Update @react-aria/react-stately dependencies

Author: emmatown

Diff for: .changeset/tidy-tips-divide.md

@@ -0,0 +1,6 @@
+---
+'@keystatic/core': patch
+'@keystar/ui': patch
+---
+
+Update `@react-aria`/`react-stately` dependencies

Diff for: design-system/docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

Diff for: design-system/docs/package.json

@@ -19,12 +19,12 @@
     "@babel/core": "^7.23.0",
     "@babel/runtime": "^7.18.3",
     "@cloudflare/next-on-pages": "^1.11.0",
-    "@internationalized/date": "^3.7.0",
+    "@internationalized/date": "^3.8.0",
     "@keystar/ui": "workspace:^",
     "@keystatic/core": "workspace:^",
     "@keystatic/next": "workspace:^",
     "@markdoc/markdoc": "^0.4.0",
-    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/i18n": "^3.12.8",
     "clipboard-copy": "^4.0.1",
     "emery": "^1.4.1",
     "esbuild": "^0.14.53",

Diff for: design-system/pkg/package.json

@@ -1476,88 +1476,88 @@
     "@babel/runtime": "^7.18.3",
     "@emotion/css": "^11.13.5",
     "@floating-ui/react": "^0.24.0",
-    "@internationalized/date": "^3.7.0",
-    "@internationalized/string": "^3.2.5",
-    "@react-aria/actiongroup": "^3.7.12",
-    "@react-aria/breadcrumbs": "^3.5.20",
-    "@react-aria/button": "^3.11.1",
-    "@react-aria/calendar": "^3.7.0",
-    "@react-aria/checkbox": "^3.15.1",
-    "@react-aria/combobox": "^3.11.1",
-    "@react-aria/datepicker": "^3.13.0",
-    "@react-aria/dialog": "^3.5.21",
-    "@react-aria/dnd": "^3.8.1",
-    "@react-aria/focus": "^3.19.1",
-    "@react-aria/gridlist": "^3.10.1",
-    "@react-aria/i18n": "^3.12.5",
-    "@react-aria/interactions": "^3.23.0",
-    "@react-aria/label": "^3.7.14",
-    "@react-aria/link": "^3.7.8",
-    "@react-aria/listbox": "^3.14.0",
-    "@react-aria/live-announcer": "^3.4.1",
-    "@react-aria/menu": "^3.17.0",
-    "@react-aria/meter": "^3.4.19",
-    "@react-aria/numberfield": "^3.11.10",
-    "@react-aria/overlays": "^3.25.0",
-    "@react-aria/progress": "^3.4.19",
-    "@react-aria/radio": "^3.10.11",
-    "@react-aria/searchfield": "^3.8.0",
-    "@react-aria/select": "^3.15.1",
-    "@react-aria/selection": "^3.22.0",
-    "@react-aria/separator": "^3.4.5",
-    "@react-aria/ssr": "^3.9.7",
-    "@react-aria/switch": "^3.6.11",
-    "@react-aria/table": "^3.16.1",
-    "@react-aria/tabs": "^3.9.9",
-    "@react-aria/tag": "^3.4.9",
-    "@react-aria/textfield": "^3.16.0",
-    "@react-aria/toast": "3.0.0-beta.19",
-    "@react-aria/tooltip": "^3.7.11",
-    "@react-aria/utils": "^3.27.0",
-    "@react-aria/virtualizer": "^4.1.1",
-    "@react-aria/visually-hidden": "^3.8.19",
-    "@react-stately/calendar": "^3.7.0",
-    "@react-stately/checkbox": "^3.6.11",
-    "@react-stately/collections": "^3.12.1",
-    "@react-stately/combobox": "^3.10.2",
-    "@react-stately/data": "^3.12.1",
-    "@react-stately/datepicker": "^3.12.0",
-    "@react-stately/dnd": "^3.5.1",
-    "@react-stately/form": "^3.1.1",
-    "@react-stately/layout": "^4.1.1",
-    "@react-stately/list": "^3.11.2",
-    "@react-stately/menu": "^3.9.1",
-    "@react-stately/numberfield": "^3.9.9",
-    "@react-stately/overlays": "^3.6.13",
-    "@react-stately/radio": "^3.10.10",
-    "@react-stately/searchfield": "^3.5.9",
-    "@react-stately/select": "^3.6.10",
-    "@react-stately/selection": "^3.19.0",
-    "@react-stately/table": "^3.13.1",
-    "@react-stately/tabs": "^3.7.1",
-    "@react-stately/toast": "3.0.0-beta.7",
-    "@react-stately/toggle": "^3.8.1",
-    "@react-stately/tooltip": "^3.5.1",
-    "@react-stately/tree": "^3.8.7",
-    "@react-stately/utils": "^3.10.5",
-    "@react-stately/virtualizer": "^4.2.1",
-    "@react-types/actionbar": "^3.1.12",
-    "@react-types/actiongroup": "^3.4.14",
-    "@react-types/breadcrumbs": "^3.7.10",
-    "@react-types/button": "^3.10.2",
-    "@react-types/calendar": "^3.6.0",
-    "@react-types/combobox": "^3.13.2",
-    "@react-types/datepicker": "^3.10.0",
-    "@react-types/grid": "^3.2.11",
-    "@react-types/menu": "^3.9.14",
-    "@react-types/numberfield": "^3.8.8",
-    "@react-types/overlays": "^3.8.12",
-    "@react-types/radio": "^3.8.6",
-    "@react-types/select": "^3.9.9",
-    "@react-types/shared": "^3.27.0",
-    "@react-types/switch": "^3.5.8",
-    "@react-types/table": "^3.10.4",
-    "@react-types/tabs": "^3.3.12",
+    "@internationalized/date": "^3.8.0",
+    "@internationalized/string": "^3.2.6",
+    "@react-aria/actiongroup": "^3.7.15",
+    "@react-aria/breadcrumbs": "^3.5.23",
+    "@react-aria/button": "^3.13.0",
+    "@react-aria/calendar": "^3.8.0",
+    "@react-aria/checkbox": "^3.15.4",
+    "@react-aria/combobox": "^3.12.2",
+    "@react-aria/datepicker": "^3.14.2",
+    "@react-aria/dialog": "^3.5.24",
+    "@react-aria/dnd": "^3.9.2",
+    "@react-aria/focus": "^3.20.2",
+    "@react-aria/gridlist": "^3.12.0",
+    "@react-aria/i18n": "^3.12.8",
+    "@react-aria/interactions": "^3.25.0",
+    "@react-aria/label": "^3.7.17",
+    "@react-aria/link": "^3.8.0",
+    "@react-aria/listbox": "^3.14.3",
+    "@react-aria/live-announcer": "^3.4.2",
+    "@react-aria/menu": "^3.18.2",
+    "@react-aria/meter": "^3.4.22",
+    "@react-aria/numberfield": "^3.11.13",
+    "@react-aria/overlays": "^3.27.0",
+    "@react-aria/progress": "^3.4.22",
+    "@react-aria/radio": "^3.11.2",
+    "@react-aria/searchfield": "^3.8.3",
+    "@react-aria/select": "^3.15.4",
+    "@react-aria/selection": "^3.24.0",
+    "@react-aria/separator": "^3.4.8",
+    "@react-aria/ssr": "^3.9.8",
+    "@react-aria/switch": "^3.7.2",
+    "@react-aria/table": "^3.17.2",
+    "@react-aria/tabs": "^3.10.2",
+    "@react-aria/tag": "^3.5.2",
+    "@react-aria/textfield": "^3.17.2",
+    "@react-aria/toast": "3.0.2",
+    "@react-aria/tooltip": "^3.8.2",
+    "@react-aria/utils": "^3.28.2",
+    "@react-aria/virtualizer": "^4.1.4",
+    "@react-aria/visually-hidden": "^3.8.22",
+    "@react-stately/calendar": "^3.8.0",
+    "@react-stately/checkbox": "^3.6.13",
+    "@react-stately/collections": "^3.12.3",
+    "@react-stately/combobox": "^3.10.4",
+    "@react-stately/data": "^3.12.3",
+    "@react-stately/datepicker": "^3.14.0",
+    "@react-stately/dnd": "^3.5.3",
+    "@react-stately/form": "^3.1.3",
+    "@react-stately/layout": "^4.2.2",
+    "@react-stately/list": "^3.12.1",
+    "@react-stately/menu": "^3.9.3",
+    "@react-stately/numberfield": "^3.9.11",
+    "@react-stately/overlays": "^3.6.15",
+    "@react-stately/radio": "^3.10.12",
+    "@react-stately/searchfield": "^3.5.11",
+    "@react-stately/select": "^3.6.12",
+    "@react-stately/selection": "^3.20.1",
+    "@react-stately/table": "^3.14.1",
+    "@react-stately/tabs": "^3.8.1",
+    "@react-stately/toast": "3.1.0",
+    "@react-stately/toggle": "^3.8.3",
+    "@react-stately/tooltip": "^3.5.3",
+    "@react-stately/tree": "^3.8.9",
+    "@react-stately/utils": "^3.10.6",
+    "@react-stately/virtualizer": "^4.3.2",
+    "@react-types/actionbar": "^3.1.14",
+    "@react-types/actiongroup": "^3.4.16",
+    "@react-types/breadcrumbs": "^3.7.12",
+    "@react-types/button": "^3.12.0",
+    "@react-types/calendar": "^3.7.0",
+    "@react-types/combobox": "^3.13.4",
+    "@react-types/datepicker": "^3.12.0",
+    "@react-types/grid": "^3.3.1",
+    "@react-types/menu": "^3.10.0",
+    "@react-types/numberfield": "^3.8.10",
+    "@react-types/overlays": "^3.8.14",
+    "@react-types/radio": "^3.8.8",
+    "@react-types/select": "^3.9.11",
+    "@react-types/shared": "^3.29.0",
+    "@react-types/switch": "^3.5.10",
+    "@react-types/table": "^3.12.0",
+    "@react-types/tabs": "^3.3.14",
     "@types/react": "^19.0.8",
     "emery": "^1.4.1",
     "facepaint": "^1.2.1"
@@ -1567,7 +1567,7 @@
     "@jest/globals": "^29.7.0",
     "@keystar/ui": "workspace:^",
     "@keystar/ui-storybook": "workspace:^",
-    "@react-aria/landmark": "3.0.0-beta.18",
+    "@react-aria/landmark": "3.0.2",
     "@svgr/core": "^6.5.1",
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-prettier": "^6.5.1",

Diff for: design-system/pkg/src/list-view/ListViewLayout.tsx

@@ -3,17 +3,23 @@ import {
   LayoutInfo,
   Rect,
 } from '@react-stately/virtualizer';
-import { LayoutNode, ListLayout } from '@react-stately/layout';
+import {
+  LayoutNode,
+  ListLayout,
+  ListLayoutOptions,
+} from '@react-stately/layout';
 import { Node } from '@react-types/shared';
 
-interface ListViewLayoutProps {
+type ListViewLayoutOptions = ListLayoutOptions & {
   isLoading?: boolean;
-}
+};
 
-export class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {
+export class ListViewLayout<T> extends ListLayout<T, ListViewLayoutOptions> {
   private isLoading: boolean = false;
 
-  update(invalidationContext: InvalidationContext<ListViewLayoutProps>): void {
+  update(
+    invalidationContext: InvalidationContext<ListViewLayoutOptions>
+  ): void {
     this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
     super.update(invalidationContext);
   }

Diff for: design-system/pkg/src/listbox/ListBoxLayout.tsx

@@ -10,27 +10,21 @@ import {
 } from '@react-stately/layout';
 import { Node } from '@react-types/shared';
 
-interface ListBoxLayoutProps {
+export interface ListBoxLayoutOptions extends ListLayoutOptions {
   isLoading?: boolean;
+  placeholderHeight?: number;
 }
 
-interface ListBoxLayoutOptions extends ListLayoutOptions {
-  placeholderHeight: number;
-  padding: number;
-}
-
-export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
+export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutOptions> {
   private isLoading: boolean = false;
-  private placeholderHeight: number;
-  private padding: number;
+  private placeholderHeight: number | undefined;
 
   constructor(opts: ListBoxLayoutOptions) {
     super(opts);
     this.placeholderHeight = opts.placeholderHeight;
-    this.padding = opts.padding;
   }
 
-  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {
+  update(invalidationContext: InvalidationContext<ListBoxLayoutOptions>): void {
     this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
     super.update(invalidationContext);
   }

Diff for: design-system/pkg/src/table/Resizer.tsx

@@ -1,6 +1,6 @@
 import { FocusRing } from '@react-aria/focus';
 import { useLocale, useLocalizedStringFormatter } from '@react-aria/i18n';
-import { useUNSTABLE_PortalContext } from '@react-aria/overlays';
+import { useUNSAFE_PortalContext } from '@react-aria/overlays';
 import { useTableColumnResize } from '@react-aria/table';
 import { mergeProps, useObjectRef } from '@react-aria/utils';
 import { TableColumnResizeState } from '@react-stately/table';
@@ -153,7 +153,7 @@ function Resizer<T>(
 
 function CursorOverlay(props: PropsWithChildren<{ show: boolean }>) {
   let { show, children } = props;
-  let { getContainer } = useUNSTABLE_PortalContext();
+  let { getContainer } = useUNSAFE_PortalContext();
   return show
     ? ReactDOM.createPortal(children, getContainer?.() ?? document.body)
     : null;

Diff for: design-system/pkg/src/toast/Toast.tsx

@@ -9,13 +9,7 @@ import { checkCircle2Icon } from '@keystar/ui/icon/icons/checkCircle2Icon';
 import { infoIcon } from '@keystar/ui/icon/icons/infoIcon';
 import { alertTriangleIcon } from '@keystar/ui/icon/icons/alertTriangleIcon';
 import { SlotProvider } from '@keystar/ui/slots';
-import {
-  classNames,
-  css,
-  keyframes,
-  tokenSchema,
-  useStyleProps,
-} from '@keystar/ui/style';
+import { classNames, css, tokenSchema, useStyleProps } from '@keystar/ui/style';
 import { Text } from '@keystar/ui/typography';
 import { isReactText } from '@keystar/ui/utils';
 
@@ -33,7 +27,6 @@ function Toast(props: ToastProps, ref: ForwardedRef<HTMLDivElement>) {
   let {
     toast: {
       key,
-      animation,
       content: { children, tone, actionLabel, onAction, shouldCloseOnAction },
     },
     state,
@@ -101,27 +94,10 @@ function Toast(props: ToastProps, ref: ForwardedRef<HTMLDivElement>) {
           '&[data-tone=critical]': {
             background: tokenSchema.color.background.criticalEmphasis,
           },
-
-          // animations
-          '&[data-animation=entering]': {
-            animation: `${slideInAnim} 300ms`,
-          },
-          '&[data-animation=exiting]': {
-            animation: `${fadeOutAnim} 300ms forwards`,
-          },
         }),
         styleProps.className
       )}
-      style={{
-        ...styleProps.style,
-        zIndex: props.toast.priority,
-      }}
-      data-animation={animation}
-      onAnimationEnd={() => {
-        if (animation === 'exiting') {
-          state.remove(key);
-        }
-      }}
+      style={styleProps.style}
     >
       <SlotProvider slots={slots}>
         <div {...contentProps} className={css({ display: 'flex' })}>
@@ -184,14 +160,5 @@ function Toast(props: ToastProps, ref: ForwardedRef<HTMLDivElement>) {
   );
 }
 
-let slideInAnim = keyframes({
-  from: { transform: `var(--slide-from)` },
-  to: { transform: `var(--slide-to)` },
-});
-let fadeOutAnim = keyframes({
-  from: { opacity: 1 },
-  to: { opacity: 0 },
-});
-
 let _Toast = forwardRef(Toast);
 export { _Toast as Toast };