diff --git a/.github/labeler.yml b/.github/labeler.yml new file mode 100644 index 00000000000..47a61392c8a --- /dev/null +++ b/.github/labeler.yml @@ -0,0 +1,3 @@ +needs translations: +- changed-files: + - any-glob-to-any-file: ['**/intl/*.json'] diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml new file mode 100644 index 00000000000..e57cd86e2b3 --- /dev/null +++ b/.github/workflows/labeler.yml @@ -0,0 +1,12 @@ +name: "Pull Request Labeler" +on: +- pull_request_target + +jobs: + labeler: + permissions: + contents: read + pull-requests: write + runs-on: ubuntu-latest + steps: + - uses: actions/labeler@v5 diff --git a/packages/@react-aria/tabs/src/utils.ts b/packages/@react-aria/tabs/src/utils.ts index 9fcce9d17fd..2cb9ce1e0cb 100644 --- a/packages/@react-aria/tabs/src/utils.ts +++ b/packages/@react-aria/tabs/src/utils.ts @@ -25,6 +25,9 @@ export function generateId(state: TabListState | null, key: Key | null | u } let baseId = tabsIds.get(state); + if (process.env.NODE_ENV !== 'production' && !baseId) { + console.error('There is no tab id, please check if you have rendered the tab panel before the tab list.'); + } return `${baseId}-${role}-${key}`; } diff --git a/packages/@react-aria/virtualizer/src/ScrollView.tsx b/packages/@react-aria/virtualizer/src/ScrollView.tsx index 4ab9fe06870..e89d2f2df1c 100644 --- a/packages/@react-aria/virtualizer/src/ScrollView.tsx +++ b/packages/@react-aria/virtualizer/src/ScrollView.tsx @@ -57,6 +57,7 @@ React.forwardRef(ScrollView); export {ScrollViewForwardRef as ScrollView}; interface ScrollViewAria { + isScrolling: boolean, scrollViewProps: HTMLAttributes, contentProps: HTMLAttributes } @@ -84,6 +85,16 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject { + state.isScrolling = false; + setScrolling(false); + state.scrollTimeout = null; + + window.dispatchEvent(new Event('tk.connect-observer')); + onScrollEnd?.(); + }, [state, onScrollEnd]); + let onScroll = useCallback((e) => { if (e.target !== e.currentTarget) { return; @@ -117,30 +128,21 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject { - state.isScrolling = false; - setScrolling(false); - state.scrollTimeout = null; - - window.dispatchEvent(new Event('tk.connect-observer')); - if (onScrollEnd) { - onScrollEnd(); - } - }, 300); + state.scrollTimeout = setTimeout(onScrollTimeout, 300); } }); - }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]); + }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollTimeout]); // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward. useEvent(ref, 'scroll', onScroll); - + useEvent(ref, 'scrollend', onScrollTimeout); useEffect(() => { return () => { @@ -265,6 +267,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject +### Test utils `@react-spectrum/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the combobox tester and a sample of how you could use it in your test suite. diff --git a/packages/@react-spectrum/list/docs/ListView.mdx b/packages/@react-spectrum/list/docs/ListView.mdx index 553410132a7..ae791b43f22 100644 --- a/packages/@react-spectrum/list/docs/ListView.mdx +++ b/packages/@react-spectrum/list/docs/ListView.mdx @@ -1193,7 +1193,7 @@ behaviors in your test suite. Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/list/test/ListView.test.js) if you find that the above isn't sufficient when resolving issues in your own test cases. -### Test utils +### Test utils `@react-spectrum/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the gridlist tester and a sample of how you could use it in your test suite. diff --git a/packages/@react-spectrum/listbox/docs/ListBox.mdx b/packages/@react-spectrum/listbox/docs/ListBox.mdx index 93a1a1ad259..336386f4572 100644 --- a/packages/@react-spectrum/listbox/docs/ListBox.mdx +++ b/packages/@react-spectrum/listbox/docs/ListBox.mdx @@ -411,7 +411,7 @@ Please see the following sections in the testing docs for more information on ho Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/test/ListBox.test.js) if you find that the above isn't sufficient when resolving issues in your own test cases. -### Test utils +### Test utils `@react-spectrum/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the listbox tester and a sample of how you could use it in your test suite. diff --git a/packages/@react-spectrum/menu/docs/MenuTrigger.mdx b/packages/@react-spectrum/menu/docs/MenuTrigger.mdx index 6d90a7dc207..251bddaec2f 100644 --- a/packages/@react-spectrum/menu/docs/MenuTrigger.mdx +++ b/packages/@react-spectrum/menu/docs/MenuTrigger.mdx @@ -258,7 +258,7 @@ behaviors in your test suite. Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/menu/test/MenuTrigger.test.js) if you find that the above isn't sufficient when resolving issues in your own test cases. -### Test utils +### Test utils `@react-spectrum/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the menu tester and a sample of how you could use it in your test suite. diff --git a/packages/@react-spectrum/picker/docs/Picker.mdx b/packages/@react-spectrum/picker/docs/Picker.mdx index 35f3d53c5ac..6c327e3166b 100644 --- a/packages/@react-spectrum/picker/docs/Picker.mdx +++ b/packages/@react-spectrum/picker/docs/Picker.mdx @@ -590,7 +590,7 @@ for more information on how to handle these behaviors in your test suite. Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/picker/test/Picker.test.js) if you find that the above isn't sufficient when resolving issues in your own test cases. -### Test utils +### Test utils `@react-spectrum/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the select tester and a sample of how you could use it in your test suite. diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 2150acb7ce5..ae4e9909584 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -1962,7 +1962,7 @@ behaviors in your test suite. Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/test/Table.test.js) if you find that the above isn't sufficient when resolving issues in your own test cases. -### Test utils +### Test utils `@react-spectrum/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the table tester and a sample of how you could use it in your test suite. diff --git a/packages/@react-spectrum/tabs/docs/Tabs.mdx b/packages/@react-spectrum/tabs/docs/Tabs.mdx index 27f655b55ec..3c81dd2e12e 100644 --- a/packages/@react-spectrum/tabs/docs/Tabs.mdx +++ b/packages/@react-spectrum/tabs/docs/Tabs.mdx @@ -633,7 +633,7 @@ function Example() { ## Testing -### Test utils +### Test utils Tabs features automatic tab collapse behavior and may need specific mocks to test said behavior. Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/326f48154e301edab425c8198c5c3af72422462b/packages/%40react-spectrum/tabs/test/Tabs.test.js#L58-L62) if you diff --git a/packages/@react-spectrum/tree/docs/TreeView.mdx b/packages/@react-spectrum/tree/docs/TreeView.mdx index 97c04a20af9..4dc29a886d7 100644 --- a/packages/@react-spectrum/tree/docs/TreeView.mdx +++ b/packages/@react-spectrum/tree/docs/TreeView.mdx @@ -531,7 +531,7 @@ behaviors in your test suite. Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/tree/test/TreeView.test.tsx) if you find that the above isn't sufficient when resolving issues in your own test cases. -### Test utils +### Test utils `@react-spectrum/test-utils` offers common tree interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the tree tester and a sample of how you could use it in your test suite. diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts index 148e8ac81bb..fda08dcd123 100644 --- a/packages/@react-stately/datepicker/src/utils.ts +++ b/packages/@react-stately/datepicker/src/utils.ts @@ -25,7 +25,14 @@ function getLocale() { // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided // validation messages, which to not respect our provider's language. // @ts-ignore - return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US'; + let locale = typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage) || 'en-US'; + + try { + Intl.DateTimeFormat.supportedLocalesOf([locale]); + } catch { + locale = 'en-US'; + } + return locale; } export function getValidationResult( diff --git a/packages/dev/docs/pages/react-aria/testing.mdx b/packages/dev/docs/pages/react-aria/testing.mdx index 85f8939afaf..aab35a898ec 100644 --- a/packages/dev/docs/pages/react-aria/testing.mdx +++ b/packages/dev/docs/pages/react-aria/testing.mdx @@ -147,7 +147,7 @@ userEvent.tab(); userEvent.click(document.activeElement); ``` -## React Aria test utils +## React Aria test utils [@react-aria/test-utils](https://www.npmjs.com/package/@react-aria/test-utils) is a set of testing utilities that aims to make writing unit tests easier for consumers of React Aria or for users who have built their own components following the respective ARIA pattern specification. By using the ARIA specification for any given component pattern as a source of truth, diff --git a/packages/dev/docs/pages/react-spectrum/testing.mdx b/packages/dev/docs/pages/react-spectrum/testing.mdx index a7f04df5a78..99c179e3d61 100644 --- a/packages/dev/docs/pages/react-spectrum/testing.mdx +++ b/packages/dev/docs/pages/react-spectrum/testing.mdx @@ -342,7 +342,7 @@ import {SSRProvider, Provider, lightTheme} from '@adobe/react-spectrum'; ``` -## React Spectrum test utils +## React Spectrum test utils In addition to the test utilities mentioned above, [@react-spectrum/test-utils](https://www.npmjs.com/package/@react-spectrum/test-utils) re-exports the same test utils available in `@react-aria/test-utils`, including the ARIA pattern testers. These testers are set of testing utilities that aims to make writing unit tests easier for consumers of React Spectrum. By using the ARIA specification for any given component pattern as a source of truth, diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx index 43902e54c41..8d9192d9925 100644 --- a/packages/react-aria-components/docs/ComboBox.mdx +++ b/packages/react-aria-components/docs/ComboBox.mdx @@ -1544,7 +1544,7 @@ If you need to customize things even further, such as accessing internal state, ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the combobox tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx index 71456e7e856..d268441c832 100644 --- a/packages/react-aria-components/docs/GridList.mdx +++ b/packages/react-aria-components/docs/GridList.mdx @@ -1944,7 +1944,7 @@ If you need to customize things even further, such as accessing internal state, ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the gridlist tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/ListBox.mdx b/packages/react-aria-components/docs/ListBox.mdx index 0bf91bea244..87d7e3f6f0d 100644 --- a/packages/react-aria-components/docs/ListBox.mdx +++ b/packages/react-aria-components/docs/ListBox.mdx @@ -2152,7 +2152,7 @@ If you need to customize things even further, such as accessing internal state o ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the listbox tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/Menu.mdx b/packages/react-aria-components/docs/Menu.mdx index 806cbcfe1e7..ba5de3a0c6d 100644 --- a/packages/react-aria-components/docs/Menu.mdx +++ b/packages/react-aria-components/docs/Menu.mdx @@ -1222,7 +1222,7 @@ By providing the above contexts, the existing `Button`, `Popover`, and `Menu` co ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the menu tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/Select.mdx b/packages/react-aria-components/docs/Select.mdx index 8eccf90c74e..7a497d8b4a2 100644 --- a/packages/react-aria-components/docs/Select.mdx +++ b/packages/react-aria-components/docs/Select.mdx @@ -1303,7 +1303,7 @@ from your automated accessibility tests as shown [here](./accessibility.html#fal ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the select tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx index 8a7ac04fa92..f35c5626593 100644 --- a/packages/react-aria-components/docs/Table.mdx +++ b/packages/react-aria-components/docs/Table.mdx @@ -2660,7 +2660,7 @@ If you need to customize things even further, such as accessing internal state o ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the table tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/Tabs.mdx b/packages/react-aria-components/docs/Tabs.mdx index f9001f0dc19..f06157ba739 100644 --- a/packages/react-aria-components/docs/Tabs.mdx +++ b/packages/react-aria-components/docs/Tabs.mdx @@ -756,7 +756,7 @@ If you need to customize things even further, such as accessing internal state o ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common tabs interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the tabs tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx index cb6e317ce38..ceaadb52dad 100644 --- a/packages/react-aria-components/docs/Tree.mdx +++ b/packages/react-aria-components/docs/Tree.mdx @@ -2161,7 +2161,7 @@ If you need to customize things even further, such as accessing internal state o ## Testing -### Test utils +### Test utils `@react-aria/test-utils` offers common tree interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities in your tests. Below is the full definition of the tree tester and a sample of how you could use it in your test suite. diff --git a/packages/react-aria-components/docs/examples/command-palette.mdx b/packages/react-aria-components/docs/examples/command-palette.mdx index 796882ab3f2..46b8363e30f 100644 --- a/packages/react-aria-components/docs/examples/command-palette.mdx +++ b/packages/react-aria-components/docs/examples/command-palette.mdx @@ -66,7 +66,13 @@ function CommandPaletteExample() { let [isOpen, setOpen] = useState(false); let {contains} = useFilter({sensitivity: 'base'}); - let isMac = useMemo(() => /Mac/.test(navigator.platform), []); + let isMac = useMemo( + () => + typeof navigator === 'undefined' + ? false + : /mac(os|intosh)/i.test(navigator.userAgent), + [] + ) useEffect(() => { const handleKeyDown = (e) => {