Skip to content

Commit 3a4a854

Browse files
emmatownemmatown
authored
Update @react-aria/*, @react-stately/*, @react-types/* and @internationalized/* dependencies (#1406)
1 parent fe9b649 commit 3a4a854

31 files changed

+1417
-1398
lines changed

‎.changeset/good-pillows-sell.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@keystatic/core': patch
3+
'@keystar/ui': patch
4+
---
5+
6+
Update `@react-aria/*`, `@react-stately/*`, `@react-types/*` and `@internationalized/*` dependencies

‎design-system/docs/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
"@babel/core": "^7.23.0",
2020
"@babel/runtime": "^7.18.3",
2121
"@cloudflare/next-on-pages": "^1.11.0",
22-
"@internationalized/date": "^3.5.5",
22+
"@internationalized/date": "^3.7.0",
2323
"@keystar/ui": "workspace:^",
2424
"@keystatic/core": "workspace:^",
2525
"@keystatic/next": "workspace:^",
2626
"@markdoc/markdoc": "^0.4.0",
27-
"@react-aria/i18n": "^3.12.1",
27+
"@react-aria/i18n": "^3.12.5",
2828
"clipboard-copy": "^4.0.1",
2929
"emery": "^1.4.1",
3030
"esbuild": "^0.14.53",

‎design-system/pkg/package.json

+84-84
Original file line numberDiff line numberDiff line change
@@ -1478,98 +1478,98 @@
14781478
"@babel/runtime": "^7.18.3",
14791479
"@emotion/css": "^11.13.5",
14801480
"@floating-ui/react": "^0.24.0",
1481-
"@internationalized/date": "^3.5.5",
1482-
"@internationalized/string": "^3.2.3",
1483-
"@react-aria/actiongroup": "^3.7.8",
1484-
"@react-aria/breadcrumbs": "^3.5.16",
1485-
"@react-aria/button": "^3.9.8",
1486-
"@react-aria/calendar": "^3.5.11",
1487-
"@react-aria/checkbox": "^3.14.6",
1488-
"@react-aria/combobox": "^3.10.3",
1489-
"@react-aria/datepicker": "^3.11.2",
1490-
"@react-aria/dialog": "^3.5.17",
1491-
"@react-aria/dnd": "^3.7.2",
1492-
"@react-aria/focus": "^3.18.1",
1493-
"@react-aria/gridlist": "^3.9.3",
1494-
"@react-aria/i18n": "^3.12.1",
1495-
"@react-aria/interactions": "^3.22.1",
1496-
"@react-aria/label": "^3.7.11",
1497-
"@react-aria/link": "^3.7.4",
1498-
"@react-aria/listbox": "^3.13.3",
1499-
"@react-aria/live-announcer": "^3.3.4",
1500-
"@react-aria/menu": "^3.15.3",
1501-
"@react-aria/meter": "^3.4.16",
1502-
"@react-aria/numberfield": "^3.11.6",
1503-
"@react-aria/overlays": "^3.23.2",
1504-
"@react-aria/progress": "^3.4.16",
1505-
"@react-aria/radio": "^3.10.7",
1506-
"@react-aria/searchfield": "^3.7.8",
1507-
"@react-aria/select": "^3.14.9",
1508-
"@react-aria/selection": "^3.19.3",
1509-
"@react-aria/separator": "^3.4.2",
1510-
"@react-aria/ssr": "^3.9.5",
1511-
"@react-aria/switch": "^3.6.7",
1512-
"@react-aria/table": "^3.15.1",
1513-
"@react-aria/tabs": "^3.9.5",
1514-
"@react-aria/tag": "^3.4.5",
1515-
"@react-aria/textfield": "^3.14.8",
1516-
"@react-aria/toast": "3.0.0-beta.15",
1517-
"@react-aria/tooltip": "^3.7.7",
1518-
"@react-aria/utils": "^3.25.1",
1519-
"@react-aria/virtualizer": "^4.0.2",
1520-
"@react-aria/visually-hidden": "^3.8.15",
1521-
"@react-stately/calendar": "^3.5.4",
1522-
"@react-stately/checkbox": "^3.6.8",
1523-
"@react-stately/collections": "^3.10.9",
1524-
"@react-stately/combobox": "^3.9.2",
1525-
"@react-stately/data": "^3.11.6",
1526-
"@react-stately/datepicker": "^3.10.2",
1527-
"@react-stately/dnd": "^3.4.2",
1528-
"@react-stately/form": "^3.0.6",
1529-
"@react-stately/layout": "^4.0.2",
1530-
"@react-stately/list": "^3.10.8",
1531-
"@react-stately/menu": "^3.8.2",
1532-
"@react-stately/numberfield": "^3.9.6",
1533-
"@react-stately/overlays": "^3.6.10",
1534-
"@react-stately/radio": "^3.10.7",
1535-
"@react-stately/searchfield": "^3.5.6",
1536-
"@react-stately/select": "^3.6.7",
1537-
"@react-stately/selection": "^3.17.0",
1538-
"@react-stately/table": "^3.12.1",
1539-
"@react-stately/tabs": "^3.6.9",
1540-
"@react-stately/toast": "3.0.0-beta.5",
1541-
"@react-stately/toggle": "^3.7.7",
1542-
"@react-stately/tooltip": "^3.4.12",
1543-
"@react-stately/tree": "^3.8.4",
1544-
"@react-stately/utils": "^3.10.3",
1545-
"@react-stately/virtualizer": "^4.0.2",
1546-
"@react-types/actionbar": "^3.1.9",
1547-
"@react-types/actiongroup": "^3.4.11",
1548-
"@react-types/breadcrumbs": "^3.7.7",
1549-
"@react-types/button": "^3.9.6",
1550-
"@react-types/calendar": "^3.4.9",
1551-
"@react-types/combobox": "^3.12.1",
1552-
"@react-types/datepicker": "^3.8.2",
1553-
"@react-types/grid": "^3.2.8",
1554-
"@react-types/menu": "^3.9.11",
1555-
"@react-types/numberfield": "^3.8.5",
1556-
"@react-types/overlays": "^3.8.9",
1557-
"@react-types/radio": "^3.8.3",
1558-
"@react-types/select": "^3.9.6",
1559-
"@react-types/shared": "^3.24.1",
1560-
"@react-types/switch": "^3.5.5",
1561-
"@react-types/table": "^3.10.1",
1562-
"@react-types/tabs": "^3.3.9",
1481+
"@internationalized/date": "^3.7.0",
1482+
"@internationalized/string": "^3.2.5",
1483+
"@react-aria/actiongroup": "^3.7.12",
1484+
"@react-aria/breadcrumbs": "^3.5.20",
1485+
"@react-aria/button": "^3.11.1",
1486+
"@react-aria/calendar": "^3.7.0",
1487+
"@react-aria/checkbox": "^3.15.1",
1488+
"@react-aria/combobox": "^3.11.1",
1489+
"@react-aria/datepicker": "^3.13.0",
1490+
"@react-aria/dialog": "^3.5.21",
1491+
"@react-aria/dnd": "^3.8.1",
1492+
"@react-aria/focus": "^3.19.1",
1493+
"@react-aria/gridlist": "^3.10.1",
1494+
"@react-aria/i18n": "^3.12.5",
1495+
"@react-aria/interactions": "^3.23.0",
1496+
"@react-aria/label": "^3.7.14",
1497+
"@react-aria/link": "^3.7.8",
1498+
"@react-aria/listbox": "^3.14.0",
1499+
"@react-aria/live-announcer": "^3.4.1",
1500+
"@react-aria/menu": "^3.17.0",
1501+
"@react-aria/meter": "^3.4.19",
1502+
"@react-aria/numberfield": "^3.11.10",
1503+
"@react-aria/overlays": "^3.25.0",
1504+
"@react-aria/progress": "^3.4.19",
1505+
"@react-aria/radio": "^3.10.11",
1506+
"@react-aria/searchfield": "^3.8.0",
1507+
"@react-aria/select": "^3.15.1",
1508+
"@react-aria/selection": "^3.22.0",
1509+
"@react-aria/separator": "^3.4.5",
1510+
"@react-aria/ssr": "^3.9.7",
1511+
"@react-aria/switch": "^3.6.11",
1512+
"@react-aria/table": "^3.16.1",
1513+
"@react-aria/tabs": "^3.9.9",
1514+
"@react-aria/tag": "^3.4.9",
1515+
"@react-aria/textfield": "^3.16.0",
1516+
"@react-aria/toast": "3.0.0-beta.19",
1517+
"@react-aria/tooltip": "^3.7.11",
1518+
"@react-aria/utils": "^3.27.0",
1519+
"@react-aria/virtualizer": "^4.1.1",
1520+
"@react-aria/visually-hidden": "^3.8.19",
1521+
"@react-stately/calendar": "^3.7.0",
1522+
"@react-stately/checkbox": "^3.6.11",
1523+
"@react-stately/collections": "^3.12.1",
1524+
"@react-stately/combobox": "^3.10.2",
1525+
"@react-stately/data": "^3.12.1",
1526+
"@react-stately/datepicker": "^3.12.0",
1527+
"@react-stately/dnd": "^3.5.1",
1528+
"@react-stately/form": "^3.1.1",
1529+
"@react-stately/layout": "^4.1.1",
1530+
"@react-stately/list": "^3.11.2",
1531+
"@react-stately/menu": "^3.9.1",
1532+
"@react-stately/numberfield": "^3.9.9",
1533+
"@react-stately/overlays": "^3.6.13",
1534+
"@react-stately/radio": "^3.10.10",
1535+
"@react-stately/searchfield": "^3.5.9",
1536+
"@react-stately/select": "^3.6.10",
1537+
"@react-stately/selection": "^3.19.0",
1538+
"@react-stately/table": "^3.13.1",
1539+
"@react-stately/tabs": "^3.7.1",
1540+
"@react-stately/toast": "3.0.0-beta.7",
1541+
"@react-stately/toggle": "^3.8.1",
1542+
"@react-stately/tooltip": "^3.5.1",
1543+
"@react-stately/tree": "^3.8.7",
1544+
"@react-stately/utils": "^3.10.5",
1545+
"@react-stately/virtualizer": "^4.2.1",
1546+
"@react-types/actionbar": "^3.1.12",
1547+
"@react-types/actiongroup": "^3.4.14",
1548+
"@react-types/breadcrumbs": "^3.7.10",
1549+
"@react-types/button": "^3.10.2",
1550+
"@react-types/calendar": "^3.6.0",
1551+
"@react-types/combobox": "^3.13.2",
1552+
"@react-types/datepicker": "^3.10.0",
1553+
"@react-types/grid": "^3.2.11",
1554+
"@react-types/menu": "^3.9.14",
1555+
"@react-types/numberfield": "^3.8.8",
1556+
"@react-types/overlays": "^3.8.12",
1557+
"@react-types/radio": "^3.8.6",
1558+
"@react-types/select": "^3.9.9",
1559+
"@react-types/shared": "^3.27.0",
1560+
"@react-types/switch": "^3.5.8",
1561+
"@react-types/table": "^3.10.4",
1562+
"@react-types/tabs": "^3.3.12",
15631563
"@types/react": "^19.0.8",
15641564
"emery": "^1.4.1",
15651565
"facepaint": "^1.2.1"
15661566
},
15671567
"devDependencies": {
1568-
"@internationalized/string-compiler": "^3.2.4",
1568+
"@internationalized/string-compiler": "^3.2.6",
15691569
"@jest/globals": "^29.7.0",
15701570
"@keystar/ui": "workspace:^",
15711571
"@keystar/ui-storybook": "workspace:^",
1572-
"@react-aria/landmark": "3.0.0-beta.15",
1572+
"@react-aria/landmark": "3.0.0-beta.18",
15731573
"@svgr/core": "^6.5.1",
15741574
"@svgr/plugin-jsx": "^6.5.1",
15751575
"@svgr/plugin-prettier": "^6.5.1",

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

+2
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@ export type ToggleButtonProps = {
102102
// accessibility attributes could be applied to the parent or ancestor etc.
103103
export type FieldButtonProps = ActionButtonProps & {
104104
isActive?: boolean;
105+
/** @deprecated use isInvalid instead */
105106
validationState?: ValidationState;
107+
isInvalid?: boolean;
106108
};
107109

108110
// Button

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ const ComboboxBase = React.forwardRef(function ComboboxBase<T extends object>(
157157
{...listBoxProps}
158158
ref={listBoxRef}
159159
disallowEmptySelection
160-
autoFocus={state.focusStrategy}
160+
autoFocus={state.focusStrategy ?? undefined}
161161
shouldSelectOnPressUp
162162
focusOnPointerEnter
163163
layout={layout}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ const ComboboxMultiBase = React.forwardRef(function ComboboxMultiBase<
122122
<ListBoxBase
123123
{...listBoxProps}
124124
ref={listBoxRef}
125-
autoFocus={state.focusStrategy}
125+
autoFocus={state.focusStrategy ?? undefined}
126126
disallowEmptySelection
127127
focusOnPointerEnter
128128
isLoading={loadingState === 'loadingMore'}

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,9 @@ export function useComboboxMulti<T extends object>(
138138
if (state.isOpen) {
139139
e.preventDefault();
140140
}
141-
142-
state.selectionManager.select(state.selectionManager.focusedKey);
141+
if (state.selectionManager.focusedKey) {
142+
state.selectionManager.select(state.selectionManager.focusedKey);
143+
}
143144

144145
// Clear the input value after selection but keep the menu open
145146
state.setInputValue('');
@@ -183,9 +184,7 @@ export function useComboboxMulti<T extends object>(
183184
useTextField(
184185
{
185186
...props,
186-
// @ts-expect-error — hook type generic to support textareas
187187
onBlur,
188-
// @ts-expect-error — hook type generic to support textareas
189188
onFocus,
190189
onChange: state.setInputValue,
191190
onKeyDown: !props.isReadOnly

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function DateField<T extends DateValue>(
6969
fieldProps={fieldProps}
7070
isDisabled={isDisabled}
7171
autoFocus={autoFocus}
72-
validationState={state.validationState}
72+
isInvalid={state.isInvalid}
7373
>
7474
{state.segments.map((segment, i) => (
7575
<InputSegment

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function DatePicker<T extends DateValue>(
9393
isFocusVisible: isFocused && !isFocusedButton,
9494
isDisabled,
9595
isReadOnly,
96-
isInvalid: state.validationState === 'invalid',
96+
isInvalid: state.isInvalid,
9797
});
9898

9999
return (
@@ -114,7 +114,7 @@ function DatePicker<T extends DateValue>(
114114
>
115115
<Input
116116
isDisabled={isDisabled}
117-
validationState={state.validationState}
117+
isInvalid={state.isInvalid}
118118
disableFocusRing
119119
{...styleProps.input}
120120
>
@@ -124,7 +124,7 @@ function DatePicker<T extends DateValue>(
124124
<FieldButton
125125
{...mergeProps(buttonProps, focusPropsButton)}
126126
{...styleProps.button}
127-
validationState={state.validationState}
127+
isInvalid={state.isInvalid}
128128
isDisabled={isDisabled || isReadOnly}
129129
>
130130
<Icon src={calendarDaysIcon} />

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function DateRangePicker<T extends DateValue>(
110110
>
111111
<Input
112112
isDisabled={isDisabled}
113-
validationState={state.validationState}
113+
isInvalid={state.isInvalid}
114114
disableFocusRing
115115
{...styleProps.input}
116116
>
@@ -134,7 +134,7 @@ function DateRangePicker<T extends DateValue>(
134134
<FieldButton
135135
{...mergeProps(buttonProps, focusPropsButton)}
136136
{...styleProps.button}
137-
validationState={state.validationState}
137+
isInvalid={state.isInvalid}
138138
isDisabled={isDisabled || isReadOnly}
139139
>
140140
<Icon src={calendarDaysIcon} />

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ type InputProps = {
1717
fieldProps?: DOMAttributes<HTMLElement>;
1818
isDisabled?: boolean;
1919
style?: CSSProperties;
20+
/** @deprecated use isInvalid */
2021
validationState?: 'valid' | 'invalid';
22+
isInvalid?: boolean;
2123
};
2224

2325
export const Input = forwardRef<HTMLDivElement, InputProps>(
@@ -36,7 +38,8 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(
3638
within: true,
3739
});
3840

39-
let isInvalid = validationState === 'invalid' && !isDisabled;
41+
let isInvalid =
42+
(props.isInvalid ?? validationState === 'invalid') && !isDisabled;
4043
let styleProps = useInputStyles(props, {
4144
isDisabled,
4245
isInvalid,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function TimeField<T extends TimeValue>(
4949
fieldProps={fieldProps}
5050
isDisabled={isDisabled}
5151
autoFocus={autoFocus}
52-
validationState={state.validationState}
52+
isInvalid={state.isInvalid}
5353
>
5454
{state.segments.map((segment, i) => (
5555
<InputSegment

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,9 @@ Controls.argTypes = {
183183
};
184184

185185
function ControlledExample() {
186-
const [value, setValue] = React.useState(new CalendarDate(2023, 4, 14));
186+
const [value, setValue] = React.useState<CalendarDate | null>(
187+
new CalendarDate(2023, 4, 14)
188+
);
187189
return <Example label="Date" value={value} onChange={setValue} />;
188190
}
189191

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,6 @@ Controls.argTypes = {
139139
};
140140

141141
function ControlledExample() {
142-
const [value, setValue] = useState(new Time(14, 45));
142+
const [value, setValue] = useState<Time | null>(new Time(14, 45));
143143
return <TimeField label="Time" value={value} onChange={setValue} />;
144144
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ type DateFieldBase<T extends DateValue> = {
3838

3939
export type DateFieldProps<T extends DateValue> = DateFieldBase<T> &
4040
FocusableProps &
41-
ValueBase<T | null, MappedDateValue<T>> &
41+
ValueBase<T | null, MappedDateValue<T> | null> &
4242
FieldProps;
4343

4444
export type TimeFieldProps<T extends TimeValue> = {
@@ -61,7 +61,7 @@ export type TimeFieldProps<T extends TimeValue> = {
6161
/** The maximum allowed time that a user may select. */
6262
maxValue?: TimeValue;
6363
} & FocusableProps &
64-
ValueBase<T | null, MappedTimeValue<T>> &
64+
ValueBase<T | null, MappedTimeValue<T> | null> &
6565
FieldProps;
6666

6767
type DatePickerBase<T extends DateValue> = {
@@ -81,7 +81,7 @@ type DatePickerBase<T extends DateValue> = {
8181

8282
export type DatePickerProps<T extends DateValue> = DatePickerBase<T> &
8383
AriaDatePickerProps<T> &
84-
ValueBase<T | null, MappedDateValue<T>>;
84+
ValueBase<T | null, MappedDateValue<T> | null>;
8585

8686
export type DateRangePickerProps<T extends DateValue> = DatePickerBase<T> &
8787
AriaDateRangePickerProps<T> &

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,10 @@ export function EditorListbox<T extends object>(props: EditorListboxProps<T>) {
6464
let onKeyDown = (e: KeyboardEvent) => {
6565
switch (e.key) {
6666
case 'Enter':
67-
state.selectionManager.select(state.selectionManager.focusedKey);
68-
props.onAction?.(state.selectionManager.focusedKey);
67+
if (state.selectionManager.focusedKey) {
68+
state.selectionManager.select(state.selectionManager.focusedKey);
69+
props.onAction?.(state.selectionManager.focusedKey);
70+
}
6971
break;
7072
case 'Escape':
7173
onEscape?.();

0 commit comments

Comments
 (0)