From a6e01d3c7cd1286883a732551ab9f25735d97785 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Sat, 26 Jul 2025 06:49:37 +1000 Subject: [PATCH 1/6] fix: Rendering error for tabs component order (#8508) --- packages/@react-aria/tabs/src/utils.ts | 3 +++ 1 file changed, 3 insertions(+) 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}`; } From 5bc34d4a7d9cd3c6e66ab61ee1a00a91e89625d0 Mon Sep 17 00:00:00 2001 From: "yugo.innami" <58389827+nami8824@users.noreply.github.com> Date: Sat, 26 Jul 2025 06:27:40 +0900 Subject: [PATCH 2/6] fix: fallback to en-US when locale resolution fails (#8589) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 印南雄悟 <> --- packages/@react-stately/datepicker/src/utils.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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( From b205696ed47fc955ef86dcb29ca0a9ddba17dda0 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Sat, 26 Jul 2025 07:29:38 +1000 Subject: [PATCH 3/6] chore: needs translation auto labeler (#8626) --- .github/labeler.yml | 3 +++ .github/workflows/labeler.yml | 12 ++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 .github/labeler.yml create mode 100644 .github/workflows/labeler.yml 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 From e79c0762d6ffe2dd9048105c9770400a2b41733f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Fri, 25 Jul 2025 23:48:52 +0200 Subject: [PATCH 4/6] Feat: Add `onscrollend` event listener to ScrollView (#8573) --- .../virtualizer/src/ScrollView.tsx | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) 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 Date: Fri, 25 Jul 2025 14:54:20 -0700 Subject: [PATCH 5/6] updates command-palette example to fix SSR (#8638) --- .../docs/examples/command-palette.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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) => { From 3ddf5e4941439ea7e81376695d68e3822f4b1e09 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 25 Jul 2025 16:47:37 -0700 Subject: [PATCH 6/6] docs: move test utils badge to beta (#8639) --- packages/@react-spectrum/combobox/docs/ComboBox.mdx | 2 +- packages/@react-spectrum/list/docs/ListView.mdx | 2 +- packages/@react-spectrum/listbox/docs/ListBox.mdx | 2 +- packages/@react-spectrum/menu/docs/MenuTrigger.mdx | 2 +- packages/@react-spectrum/picker/docs/Picker.mdx | 2 +- packages/@react-spectrum/table/docs/TableView.mdx | 2 +- packages/@react-spectrum/tabs/docs/Tabs.mdx | 2 +- packages/@react-spectrum/tree/docs/TreeView.mdx | 2 +- packages/dev/docs/pages/react-aria/testing.mdx | 2 +- packages/dev/docs/pages/react-spectrum/testing.mdx | 2 +- packages/react-aria-components/docs/ComboBox.mdx | 2 +- packages/react-aria-components/docs/GridList.mdx | 2 +- packages/react-aria-components/docs/ListBox.mdx | 2 +- packages/react-aria-components/docs/Menu.mdx | 2 +- packages/react-aria-components/docs/Select.mdx | 2 +- packages/react-aria-components/docs/Table.mdx | 2 +- packages/react-aria-components/docs/Tabs.mdx | 2 +- packages/react-aria-components/docs/Tree.mdx | 2 +- 18 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/@react-spectrum/combobox/docs/ComboBox.mdx b/packages/@react-spectrum/combobox/docs/ComboBox.mdx index 20d2e86936e..81ccd82d6a4 100644 --- a/packages/@react-spectrum/combobox/docs/ComboBox.mdx +++ b/packages/@react-spectrum/combobox/docs/ComboBox.mdx @@ -994,7 +994,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/combobox/test/ComboBox.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 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/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.