Merge branch 'main' into upgrade-sb-9

snowystinger · snowystinger · commit a99c2c424dda · 2025-07-28T11:27:32.000+10:00
diff --git a/.github/labeler.yml 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
@@ -0,0 +1,14 @@
+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
+      with:
+        sync-labels: true
diff --git a/package.json b/package.json
@@ -152,7 +152,6 @@
     "eslint-plugin-rulesdir": "^0.2.2",
     "fast-check": "^2.19.0",
     "fast-glob": "^3.1.0",
-    "framer-motion": "^11.3.0-alpha.0",
     "fs-extra": "^11.0.0",
     "glob": "^8.0.3",
     "glob-promise": "^6.0.5",
@@ -168,6 +167,7 @@
     "lfcdn": "^0.4.2",
     "lucide-react": "^0.294.0",
     "md5": "^2.2.1",
+    "motion": "^12.23.6",
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
     "p-queue": "^6.2.1",
diff --git a/packages/@react-aria/i18n/src/index.ts b/packages/@react-aria/i18n/src/index.ts
@@ -18,6 +18,7 @@ export {useDateFormatter} from './useDateFormatter';
 export {useNumberFormatter} from './useNumberFormatter';
 export {useCollator} from './useCollator';
 export {useFilter} from './useFilter';
+export {isRTL} from './utils';
 
 export type {FormatMessage} from './useMessageFormatter';
 export type {LocalizedStringFormatter} from '@internationalized/string';
diff --git a/packages/@react-aria/tabs/src/utils.ts b/packages/@react-aria/tabs/src/utils.ts
@@ -25,6 +25,9 @@ export function generateId<T>(state: TabListState<T> | 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
@@ -57,6 +57,7 @@ React.forwardRef(ScrollView);
 export {ScrollViewForwardRef as ScrollView};
 
 interface ScrollViewAria {
+  isScrolling: boolean,
   scrollViewProps: HTMLAttributes<HTMLElement>,
   contentProps: HTMLAttributes<HTMLElement>
 }
@@ -84,6 +85,16 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   let {direction} = useLocale();
 
   let [isScrolling, setScrolling] = useState(false);
+
+  let onScrollTimeout = useCallback(() => {
+    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<HTMLElement
       // keep track of the current timeout time and only reschedule
       // the timer when it is getting close.
       let now = Date.now();
-      if (state.scrollEndTime <= now + 50) {
+      if (!('onscrollend' in window) && state.scrollEndTime <= now + 50) {
         state.scrollEndTime = now + 300;
 
         if (state.scrollTimeout != null) {
           clearTimeout(state.scrollTimeout);
         }
 
-        state.scrollTimeout = setTimeout(() => {
-          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<HTMLElement
   };
 
   return {
+    isScrolling,
     scrollViewProps: {
       ...otherProps,
       style
diff --git 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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -633,7 +633,7 @@ function Example() {
 
 ## Testing
 
-### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 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
@@ -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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -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/home/Styles.tsx b/packages/dev/docs/pages/react-aria/home/Styles.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {AddressBar, FileTab, Scrollable, Window} from './components';
-import {animate, AnimationPlaybackControls, motion, useMotionValueEvent, useReducedMotion, useScroll, useTransform} from 'framer-motion';
+import {animate, AnimationPlaybackControls, motion, useMotionValueEvent, useReducedMotion, useScroll, useTransform} from 'motion/react';
 import {
   Button,
   Collection,
diff --git 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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+## React Aria test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 [@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
@@ -342,7 +342,7 @@ import {SSRProvider, Provider, lightTheme} from '@adobe/react-spectrum';
 </SSRProvider>
 ```
 
-## React Spectrum test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+## React Spectrum test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 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/Button.mdx b/packages/react-aria-components/docs/Button.mdx
@@ -412,7 +412,7 @@ This example uses [Framer Motion](https://www.framer.com/motion/) to create an `
 import type {ButtonProps} from 'react-aria-components';
 import {ButtonContext, useContextProps} from 'react-aria-components';
 import {useButton} from 'react-aria';
-import {motion} from 'framer-motion';
+import {motion} from 'motion/react';
 
 const AnimatedButton = React.forwardRef((props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
   // Merge the local props and ref with the ones provided via context.
diff --git 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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -1944,7 +1944,7 @@ If you need to customize things even further, such as accessing internal state,
 
 ## Testing
 
-### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -2152,7 +2152,7 @@ If you need to customize things even further, such as accessing internal state o
 
 ## Testing
 
-### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -1222,7 +1222,7 @@ By providing the above contexts, the existing `Button`, `Popover`, and `Menu` co
 
 ## Testing
 
-### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -1303,7 +1303,7 @@ from your automated accessibility tests as shown [here](./accessibility.html#fal
 
 ## Testing
 
-### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -2660,7 +2660,7 @@ If you need to customize things even further, such as accessing internal state o
 
 ## Testing
 
-### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -756,7 +756,7 @@ If you need to customize things even further, such as accessing internal state o
 
 ## Testing
 
-### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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/ToggleButton.mdx b/packages/react-aria-components/docs/ToggleButton.mdx
@@ -269,7 +269,7 @@ import type {ToggleButtonProps} from 'react-aria-components';
 import {ToggleButtonContext, useContextProps} from 'react-aria-components';
 import {useToggleState} from 'react-stately';
 import {useToggleButton} from 'react-aria';
-import {motion} from 'framer-motion';
+import {motion} from 'motion/react';
 
 const AnimatedToggleButton = React.forwardRef((props: ToggleButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
   // Merge the local props and ref with the ones provided via context.
diff --git 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 <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 `@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
@@ -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) => {
diff --git a/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx b/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx
diff --git a/packages/react-aria-components/docs/examples/ios-list.mdx b/packages/react-aria-components/docs/examples/ios-list.mdx
diff --git a/packages/react-aria-components/docs/examples/swipeable-tabs.mdx b/packages/react-aria-components/docs/examples/swipeable-tabs.mdx
diff --git a/packages/react-aria-components/docs/styling.mdx b/packages/react-aria-components/docs/styling.mdx
diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx
diff --git a/packages/react-aria-components/stories/Tooltip.stories.tsx b/packages/react-aria-components/stories/Tooltip.stories.tsx
diff --git a/packages/react-aria/src/index.ts b/packages/react-aria/src/index.ts
diff --git a/scripts/buildWebsite.js b/scripts/buildWebsite.js
diff --git a/scripts/compareAPIs.js b/scripts/compareAPIs.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+needs translations:`
	`2`	`+- changed-files:`
	`3`	`+ - any-glob-to-any-file: ['*/intl/.json']`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,9 @@ export function generateId<T>(state: TabListState<T> \| null, key: Key \| null \| u`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`let baseId = tabsIds.get(state);`
	`28`	`+ if (process.env.NODE_ENV !== 'production' && !baseId) {`
	`29`	`+ console.error('There is no tab id, please check if you have rendered the tab panel before the tab list.');`
	`30`	`+ }`
`28`	`31`	return `${baseId}-${role}-${key}`;
`29`	`32`	`}`
`30`	`33`