@instructure/ui-tabs 11.7.5 → 11.7.6-snapshot-11

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.6-snapshot-11](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6-snapshot-11) (2026-08-31)
+
+
+### Bug Fixes
+
+* **many:** generate deterministic ids with React useId ([83aa25a](https://github.com/instructure/instructure-ui/commit/83aa25aebd41720fd09beac025dbf961e1f413c2))
+
+
+
+
+
 ## [11.7.5](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5) (2026-08-25)
 
 **Note:** Version bump only for package @instructure/ui-tabs

package/es/Tabs/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _class;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -26,9 +26,8 @@ var _dec, _class;
 import { cloneElement, Children, Component } from 'react';
 import keycode from 'keycode';
 import { View } from '@instructure/ui-view/v11_6';
-import { matchComponentTypes, safeCloneElement, passthroughProps } from '@instructure/ui-react-utils';
+import { matchComponentTypes, safeCloneElement, passthroughProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { logError as error } from '@instructure/console';
-import { uid } from '@instructure/uid';
 import { Focusable } from '@instructure/ui-focusable';
 import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
@@ -45,7 +44,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Tabs extends Component {
+let Tabs = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Tabs extends Component {
   static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = allowedProps;
@@ -347,7 +346,7 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     Children.toArray(children).map((child, index) => {
       if (matchComponentTypes(child, [Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
-        const id = uid();
+        const id = this.props.deterministicId(`Tabs_${index}`);
         tabs.push(this.createTab(index, id, selected, child));
         if (activePanels.length === 1) {
           panels.push(this.clonePanel(index, id, selected, child, activePanels[0]));
@@ -399,6 +398,6 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       })]
     });
   }
-}) || _class);
+}) || _class) || _class);
 export default Tabs;
 export { Tabs, Panel };

package/es/Tabs/v2/index.js

@@ -1,4 +1,4 @@
-var _dec, _class;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -26,9 +26,8 @@ var _dec, _class;
 import { cloneElement, Children, Component } from 'react';
 import keycode from 'keycode';
 import { View } from '@instructure/ui-view/latest';
-import { matchComponentTypes, safeCloneElement, passthroughProps } from '@instructure/ui-react-utils';
+import { matchComponentTypes, safeCloneElement, passthroughProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { logError as error } from '@instructure/console';
-import { uid } from '@instructure/uid';
 import { Focusable } from '@instructure/ui-focusable';
 import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
@@ -44,7 +43,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let Tabs = (_dec = withStyleNew(generateStyle), _dec(_class = class Tabs extends Component {
+let Tabs = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle), _dec(_class = _dec2(_class = class Tabs extends Component {
   static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = allowedProps;
@@ -346,7 +345,7 @@ let Tabs = (_dec = withStyleNew(generateStyle), _dec(_class = class Tabs extends
     Children.toArray(children).map((child, index) => {
       if (matchComponentTypes(child, [Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
-        const id = uid();
+        const id = this.props.deterministicId(`Tabs_${index}`);
         tabs.push(this.createTab(index, id, selected, child));
         if (activePanels.length === 1) {
           panels.push(this.clonePanel(index, id, selected, child, activePanels[0]));
@@ -398,6 +397,6 @@ let Tabs = (_dec = withStyleNew(generateStyle), _dec(_class = class Tabs extends
       })]
     });
   }
-}) || _class);
+}) || _class) || _class);
 export default Tabs;
 export { Tabs, Panel };

package/lib/Tabs/v1/index.js

@@ -17,8 +17,8 @@ var _v11_ = require("@instructure/ui-view/v11_6");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _console = require("@instructure/console");
-var _uid = require("@instructure/uid");
 var _Focusable = require("@instructure/ui-focusable/lib/Focusable");
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
 var _debounce = require("@instructure/debounce");
@@ -30,7 +30,7 @@ var _index = require("./Tab/index.js");
 var _index2 = require("./Panel/index.js");
 var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -59,7 +59,7 @@ var _dec, _class;
 category: components
 ---
 **/
-let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Tabs extends _react.Component {
+let Tabs = exports.Tabs = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Tabs extends _react.Component {
   static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = _props.allowedProps;
@@ -361,7 +361,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     _react.Children.toArray(children).map((child, index) => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
-        const id = (0, _uid.uid)();
+        const id = this.props.deterministicId(`Tabs_${index}`);
         tabs.push(this.createTab(index, id, selected, child));
         if (activePanels.length === 1) {
           panels.push(this.clonePanel(index, id, selected, child, activePanels[0]));
@@ -413,5 +413,5 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       })]
     });
   }
-}) || _class);
+}) || _class) || _class);
 var _default = exports.default = Tabs;

package/lib/Tabs/v2/index.js

@@ -17,8 +17,8 @@ var _latest = require("@instructure/ui-view/latest");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _console = require("@instructure/console");
-var _uid = require("@instructure/uid");
 var _Focusable = require("@instructure/ui-focusable/lib/Focusable");
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
 var _debounce = require("@instructure/debounce");
@@ -29,7 +29,7 @@ var _index = require("./Tab/index.js");
 var _index2 = require("./Panel/index.js");
 var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -58,7 +58,7 @@ var _dec, _class;
 category: components
 ---
 **/
-let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class Tabs extends _react.Component {
+let Tabs = exports.Tabs = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Tabs extends _react.Component {
   static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = _props.allowedProps;
@@ -360,7 +360,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
     _react.Children.toArray(children).map((child, index) => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
-        const id = (0, _uid.uid)();
+        const id = this.props.deterministicId(`Tabs_${index}`);
         tabs.push(this.createTab(index, id, selected, child));
         if (activePanels.length === 1) {
           panels.push(this.clonePanel(index, id, selected, child, activePanels[0]));
@@ -412,5 +412,5 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
       })]
     });
   }
-}) || _class);
+}) || _class) || _class);
 var _default = exports.default = Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "11.7.5",
+  "version": "11.7.6-snapshot-11",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,28 +16,27 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "keycode": "^2",
-    "@instructure/console": "11.7.5",
-    "@instructure/emotion": "11.7.5",
-    "@instructure/debounce": "11.7.5",
-    "@instructure/shared-types": "11.7.5",
-    "@instructure/ui-dom-utils": "11.7.5",
-    "@instructure/ui-focusable": "11.7.5",
-    "@instructure/ui-i18n": "11.7.5",
-    "@instructure/ui-react-utils": "11.7.5",
-    "@instructure/ui-themes": "11.7.5",
-    "@instructure/ui-utils": "11.7.5",
-    "@instructure/ui-motion": "11.7.5",
-    "@instructure/ui-view": "11.7.5",
-    "@instructure/uid": "11.7.5"
+    "@instructure/console": "11.7.6-snapshot-11",
+    "@instructure/emotion": "11.7.6-snapshot-11",
+    "@instructure/shared-types": "11.7.6-snapshot-11",
+    "@instructure/debounce": "11.7.6-snapshot-11",
+    "@instructure/ui-dom-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-focusable": "11.7.6-snapshot-11",
+    "@instructure/ui-i18n": "11.7.6-snapshot-11",
+    "@instructure/ui-motion": "11.7.6-snapshot-11",
+    "@instructure/ui-react-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-themes": "11.7.6-snapshot-11",
+    "@instructure/ui-view": "11.7.6-snapshot-11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.5",
-    "@instructure/ui-babel-preset": "11.7.5",
-    "@instructure/ui-color-utils": "11.7.5"
+    "@instructure/ui-axe-check": "11.7.6-snapshot-11",
+    "@instructure/ui-babel-preset": "11.7.6-snapshot-11",
+    "@instructure/ui-color-utils": "11.7.6-snapshot-11"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Tabs/v1/index.tsx

@@ -37,10 +37,10 @@ import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 import {
   matchComponentTypes,
   safeCloneElement,
-  passthroughProps
+  passthroughProps,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import { logError as error } from '@instructure/console'
-import { uid } from '@instructure/uid'
 import { Focusable } from '@instructure/ui-focusable'
 import { getBoundingClientRect } from '@instructure/ui-dom-utils'
 import type { RectType } from '@instructure/ui-dom-utils'
@@ -70,6 +70,7 @@ type PanelChild = ComponentElement<TabsPanelProps, Panel>
 category: components
 ---
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 class Tabs extends Component<TabsProps, TabsState> {
   static displayName = 'Tabs'
@@ -477,7 +478,7 @@ class Tabs extends Component<TabsProps, TabsState> {
         const selected =
           !child.props.isDisabled &&
           (child.props.isSelected || selectedIndex === index)
-        const id = uid()
+        const id = this.props.deterministicId!(`Tabs_${index}`)
 
         tabs.push(this.createTab(index, id, selected, child))
         if (activePanels.length === 1) {

package/src/Tabs/v1/props.ts

@@ -29,6 +29,7 @@ import type {
 } from '@instructure/emotion'
 import type { OtherHTMLAttributes, TabsTheme } from '@instructure/shared-types'
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 
 type TabsOwnProps = {
@@ -85,6 +86,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TabsProps = TabsOwnProps &
   TextDirectionContextConsumerProps &
+  WithDeterministicIdProps &
   WithStyleProps<TabsTheme, TabsStyle> &
   OtherHTMLAttributes<TabsOwnProps>
 

package/src/Tabs/v2/index.tsx

@@ -37,10 +37,10 @@ import type { ViewOwnProps } from '@instructure/ui-view/latest'
 import {
   matchComponentTypes,
   safeCloneElement,
-  passthroughProps
+  passthroughProps,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import { logError as error } from '@instructure/console'
-import { uid } from '@instructure/uid'
 import { Focusable } from '@instructure/ui-focusable'
 import { getBoundingClientRect } from '@instructure/ui-dom-utils'
 import type { RectType } from '@instructure/ui-dom-utils'
@@ -69,6 +69,7 @@ type PanelChild = ComponentElement<TabsPanelProps, Panel>
 category: components
 ---
 **/
+@withDeterministicId()
 @withStyleNew(generateStyle)
 class Tabs extends Component<TabsProps, TabsState> {
   static displayName = 'Tabs'
@@ -476,7 +477,7 @@ class Tabs extends Component<TabsProps, TabsState> {
         const selected =
           !child.props.isDisabled &&
           (child.props.isSelected || selectedIndex === index)
-        const id = uid()
+        const id = this.props.deterministicId!(`Tabs_${index}`)
 
         tabs.push(this.createTab(index, id, selected, child))
         if (activePanels.length === 1) {

package/src/Tabs/v2/props.ts

@@ -30,6 +30,7 @@ import type {
 import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { ViewOwnProps } from '@instructure/ui-view/latest'
 
 type TabsOwnProps = {
@@ -86,6 +87,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TabsProps = TabsOwnProps &
   TextDirectionContextConsumerProps &
+  WithDeterministicIdProps &
   WithStyleProps<ReturnType<NewComponentTypes['Tabs']>, TabsStyle> &
   OtherHTMLAttributes<TabsOwnProps>
 

package/tsconfig.build.json

@@ -21,7 +21,6 @@
     { "path": "../ui-motion/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
-    { "path": "../ui-view/tsconfig.build.json" },
-    { "path": "../uid/tsconfig.build.json" }
+    { "path": "../ui-view/tsconfig.build.json" }
   ]
 }