Update @react-aria/*, @react-stately/*, @react-types/* and @internationalized/* dependencies

.changeset/good-pillows-sell.md

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

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.5.5",
+    "@internationalized/date": "^3.7.0",
     "@keystar/ui": "workspace:^",
     "@keystatic/core": "workspace:^",
     "@keystatic/next": "workspace:^",
     "@markdoc/markdoc": "^0.4.0",
-    "@react-aria/i18n": "^3.12.1",
+    "@react-aria/i18n": "^3.12.5",
     "clipboard-copy": "^4.0.1",
     "emery": "^1.4.1",
     "esbuild": "^0.14.53",

design-system/pkg/package.json

@@ -1478,98 +1478,98 @@
     "@babel/runtime": "^7.18.3",
     "@emotion/css": "^11.13.5",
     "@floating-ui/react": "^0.24.0",
-    "@internationalized/date": "^3.5.5",
-    "@internationalized/string": "^3.2.3",
-    "@react-aria/actiongroup": "^3.7.8",
-    "@react-aria/breadcrumbs": "^3.5.16",
-    "@react-aria/button": "^3.9.8",
-    "@react-aria/calendar": "^3.5.11",
-    "@react-aria/checkbox": "^3.14.6",
-    "@react-aria/combobox": "^3.10.3",
-    "@react-aria/datepicker": "^3.11.2",
-    "@react-aria/dialog": "^3.5.17",
-    "@react-aria/dnd": "^3.7.2",
-    "@react-aria/focus": "^3.18.1",
-    "@react-aria/gridlist": "^3.9.3",
-    "@react-aria/i18n": "^3.12.1",
-    "@react-aria/interactions": "^3.22.1",
-    "@react-aria/label": "^3.7.11",
-    "@react-aria/link": "^3.7.4",
-    "@react-aria/listbox": "^3.13.3",
-    "@react-aria/live-announcer": "^3.3.4",
-    "@react-aria/menu": "^3.15.3",
-    "@react-aria/meter": "^3.4.16",
-    "@react-aria/numberfield": "^3.11.6",
-    "@react-aria/overlays": "^3.23.2",
-    "@react-aria/progress": "^3.4.16",
-    "@react-aria/radio": "^3.10.7",
-    "@react-aria/searchfield": "^3.7.8",
-    "@react-aria/select": "^3.14.9",
-    "@react-aria/selection": "^3.19.3",
-    "@react-aria/separator": "^3.4.2",
-    "@react-aria/ssr": "^3.9.5",
-    "@react-aria/switch": "^3.6.7",
-    "@react-aria/table": "^3.15.1",
-    "@react-aria/tabs": "^3.9.5",
-    "@react-aria/tag": "^3.4.5",
-    "@react-aria/textfield": "^3.14.8",
-    "@react-aria/toast": "3.0.0-beta.15",
-    "@react-aria/tooltip": "^3.7.7",
-    "@react-aria/utils": "^3.25.1",
-    "@react-aria/virtualizer": "^4.0.2",
-    "@react-aria/visually-hidden": "^3.8.15",
-    "@react-stately/calendar": "^3.5.4",
-    "@react-stately/checkbox": "^3.6.8",
-    "@react-stately/collections": "^3.10.9",
-    "@react-stately/combobox": "^3.9.2",
-    "@react-stately/data": "^3.11.6",
-    "@react-stately/datepicker": "^3.10.2",
-    "@react-stately/dnd": "^3.4.2",
-    "@react-stately/form": "^3.0.6",
-    "@react-stately/layout": "^4.0.2",
-    "@react-stately/list": "^3.10.8",
-    "@react-stately/menu": "^3.8.2",
-    "@react-stately/numberfield": "^3.9.6",
-    "@react-stately/overlays": "^3.6.10",
-    "@react-stately/radio": "^3.10.7",
-    "@react-stately/searchfield": "^3.5.6",
-    "@react-stately/select": "^3.6.7",
-    "@react-stately/selection": "^3.17.0",
-    "@react-stately/table": "^3.12.1",
-    "@react-stately/tabs": "^3.6.9",
-    "@react-stately/toast": "3.0.0-beta.5",
-    "@react-stately/toggle": "^3.7.7",
-    "@react-stately/tooltip": "^3.4.12",
-    "@react-stately/tree": "^3.8.4",
-    "@react-stately/utils": "^3.10.3",
-    "@react-stately/virtualizer": "^4.0.2",
-    "@react-types/actionbar": "^3.1.9",
-    "@react-types/actiongroup": "^3.4.11",
-    "@react-types/breadcrumbs": "^3.7.7",
-    "@react-types/button": "^3.9.6",
-    "@react-types/calendar": "^3.4.9",
-    "@react-types/combobox": "^3.12.1",
-    "@react-types/datepicker": "^3.8.2",
-    "@react-types/grid": "^3.2.8",
-    "@react-types/menu": "^3.9.11",
-    "@react-types/numberfield": "^3.8.5",
-    "@react-types/overlays": "^3.8.9",
-    "@react-types/radio": "^3.8.3",
-    "@react-types/select": "^3.9.6",
-    "@react-types/shared": "^3.24.1",
-    "@react-types/switch": "^3.5.5",
-    "@react-types/table": "^3.10.1",
-    "@react-types/tabs": "^3.3.9",
+    "@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",
     "@types/react": "^19.0.8",
     "emery": "^1.4.1",
     "facepaint": "^1.2.1"
   },
   "devDependencies": {
-    "@internationalized/string-compiler": "^3.2.4",
+    "@internationalized/string-compiler": "^3.2.6",
     "@jest/globals": "^29.7.0",
     "@keystar/ui": "workspace:^",
     "@keystar/ui-storybook": "workspace:^",
-    "@react-aria/landmark": "3.0.0-beta.15",
+    "@react-aria/landmark": "3.0.0-beta.18",
     "@svgr/core": "^6.5.1",
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-prettier": "^6.5.1",

design-system/pkg/src/button/types.ts

@@ -102,7 +102,9 @@ export type ToggleButtonProps = {
 // accessibility attributes could be applied to the parent or ancestor etc.
 export type FieldButtonProps = ActionButtonProps & {
   isActive?: boolean;
+  /** @deprecated use isInvalid instead */
   validationState?: ValidationState;
+  isInvalid?: boolean;
 };
 
 // Button

design-system/pkg/src/combobox/Combobox.tsx

@@ -157,7 +157,7 @@ const ComboboxBase = React.forwardRef(function ComboboxBase<T extends object>(
           {...listBoxProps}
           ref={listBoxRef}
           disallowEmptySelection
-          autoFocus={state.focusStrategy}
+          autoFocus={state.focusStrategy ?? undefined}
           shouldSelectOnPressUp
           focusOnPointerEnter
           layout={layout}

design-system/pkg/src/combobox/ComboboxMulti.tsx

@@ -122,7 +122,7 @@ const ComboboxMultiBase = React.forwardRef(function ComboboxMultiBase<
         <ListBoxBase
           {...listBoxProps}
           ref={listBoxRef}
-          autoFocus={state.focusStrategy}
+          autoFocus={state.focusStrategy ?? undefined}
           disallowEmptySelection
           focusOnPointerEnter
           isLoading={loadingState === 'loadingMore'}

design-system/pkg/src/combobox/useComboboxMulti.ts

@@ -138,8 +138,9 @@ export function useComboboxMulti<T extends object>(
         if (state.isOpen) {
           e.preventDefault();
         }
-
-        state.selectionManager.select(state.selectionManager.focusedKey);
+        if (state.selectionManager.focusedKey) {
+          state.selectionManager.select(state.selectionManager.focusedKey);
+        }
 
         // Clear the input value after selection but keep the menu open
         state.setInputValue('');
@@ -183,9 +184,7 @@ export function useComboboxMulti<T extends object>(
     useTextField(
       {
         ...props,
-        // @ts-expect-error — hook type generic to support textareas
         onBlur,
-        // @ts-expect-error — hook type generic to support textareas
         onFocus,
         onChange: state.setInputValue,
         onKeyDown: !props.isReadOnly

design-system/pkg/src/date-time/DateField.tsx

@@ -69,7 +69,7 @@ function DateField<T extends DateValue>(
         fieldProps={fieldProps}
         isDisabled={isDisabled}
         autoFocus={autoFocus}
-        validationState={state.validationState}
+        isInvalid={state.isInvalid}
       >
         {state.segments.map((segment, i) => (
           <InputSegment

design-system/pkg/src/date-time/DatePicker.tsx

@@ -93,7 +93,7 @@ function DatePicker<T extends DateValue>(
     isFocusVisible: isFocused && !isFocusedButton,
     isDisabled,
     isReadOnly,
-    isInvalid: state.validationState === 'invalid',
+    isInvalid: state.isInvalid,
   });
 
   return (
@@ -114,7 +114,7 @@ function DatePicker<T extends DateValue>(
       >
         <Input
           isDisabled={isDisabled}
-          validationState={state.validationState}
+          isInvalid={state.isInvalid}
           disableFocusRing
           {...styleProps.input}
         >
@@ -124,7 +124,7 @@ function DatePicker<T extends DateValue>(
         <FieldButton
           {...mergeProps(buttonProps, focusPropsButton)}
           {...styleProps.button}
-          validationState={state.validationState}
+          isInvalid={state.isInvalid}
           isDisabled={isDisabled || isReadOnly}
         >
           <Icon src={calendarDaysIcon} />

design-system/pkg/src/date-time/DateRangePicker.tsx

@@ -110,7 +110,7 @@ function DateRangePicker<T extends DateValue>(
       >
         <Input
           isDisabled={isDisabled}
-          validationState={state.validationState}
+          isInvalid={state.isInvalid}
           disableFocusRing
           {...styleProps.input}
         >
@@ -134,7 +134,7 @@ function DateRangePicker<T extends DateValue>(
         <FieldButton
           {...mergeProps(buttonProps, focusPropsButton)}
           {...styleProps.button}
-          validationState={state.validationState}
+          isInvalid={state.isInvalid}
           isDisabled={isDisabled || isReadOnly}
         >
           <Icon src={calendarDaysIcon} />

design-system/pkg/src/date-time/Input.tsx

@@ -17,7 +17,9 @@ type InputProps = {
   fieldProps?: DOMAttributes<HTMLElement>;
   isDisabled?: boolean;
   style?: CSSProperties;
+  /** @deprecated use isInvalid */
   validationState?: 'valid' | 'invalid';
+  isInvalid?: boolean;
 };
 
 export const Input = forwardRef<HTMLDivElement, InputProps>(
@@ -36,7 +38,8 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(
       within: true,
     });
 
-    let isInvalid = validationState === 'invalid' && !isDisabled;
+    let isInvalid =
+      (props.isInvalid ?? validationState === 'invalid') && !isDisabled;
     let styleProps = useInputStyles(props, {
       isDisabled,
       isInvalid,

design-system/pkg/src/date-time/TimeField.tsx

@@ -49,7 +49,7 @@ function TimeField<T extends TimeValue>(
         fieldProps={fieldProps}
         isDisabled={isDisabled}
         autoFocus={autoFocus}
-        validationState={state.validationState}
+        isInvalid={state.isInvalid}
       >
         {state.segments.map((segment, i) => (
           <InputSegment

design-system/pkg/src/date-time/stories/DateField.stories.tsx

@@ -183,7 +183,9 @@ Controls.argTypes = {
 };
 
 function ControlledExample() {
-  const [value, setValue] = React.useState(new CalendarDate(2023, 4, 14));
+  const [value, setValue] = React.useState<CalendarDate | null>(
+    new CalendarDate(2023, 4, 14)
+  );
   return <Example label="Date" value={value} onChange={setValue} />;
 }
 

design-system/pkg/src/date-time/stories/TimeField.stories.tsx

@@ -139,6 +139,6 @@ Controls.argTypes = {
 };
 
 function ControlledExample() {
-  const [value, setValue] = useState(new Time(14, 45));
+  const [value, setValue] = useState<Time | null>(new Time(14, 45));
   return <TimeField label="Time" value={value} onChange={setValue} />;
 }

design-system/pkg/src/date-time/types.ts

@@ -38,7 +38,7 @@ type DateFieldBase<T extends DateValue> = {
 
 export type DateFieldProps<T extends DateValue> = DateFieldBase<T> &
   FocusableProps &
-  ValueBase<T | null, MappedDateValue<T>> &
+  ValueBase<T | null, MappedDateValue<T> | null> &
   FieldProps;
 
 export type TimeFieldProps<T extends TimeValue> = {
@@ -61,7 +61,7 @@ export type TimeFieldProps<T extends TimeValue> = {
   /** The maximum allowed time that a user may select. */
   maxValue?: TimeValue;
 } & FocusableProps &
-  ValueBase<T | null, MappedTimeValue<T>> &
+  ValueBase<T | null, MappedTimeValue<T> | null> &
   FieldProps;
 
 type DatePickerBase<T extends DateValue> = {
@@ -81,7 +81,7 @@ type DatePickerBase<T extends DateValue> = {
 
 export type DatePickerProps<T extends DateValue> = DatePickerBase<T> &
   AriaDatePickerProps<T> &
-  ValueBase<T | null, MappedDateValue<T>>;
+  ValueBase<T | null, MappedDateValue<T> | null>;
 
 export type DateRangePickerProps<T extends DateValue> = DatePickerBase<T> &
   AriaDateRangePickerProps<T> &

design-system/pkg/src/editor/EditorListbox.tsx

@@ -64,8 +64,10 @@ export function EditorListbox<T extends object>(props: EditorListboxProps<T>) {
   let onKeyDown = (e: KeyboardEvent) => {
     switch (e.key) {
       case 'Enter':
-        state.selectionManager.select(state.selectionManager.focusedKey);
-        props.onAction?.(state.selectionManager.focusedKey);
+        if (state.selectionManager.focusedKey) {
+          state.selectionManager.select(state.selectionManager.focusedKey);
+          props.onAction?.(state.selectionManager.focusedKey);
+        }
         break;
       case 'Escape':
         onEscape?.();