npm - @instructure/ui-top-nav-bar - Versions diffs - 11.7.5 → 11.7.6-snapshot-11 - Mend

@instructure/ui-top-nav-bar 11.7.5 → 11.7.6-snapshot-11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -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-top-nav-bar

package/es/TopNavBar/v1/utils/mapItemsForDrilldown.js CHANGED Viewed

@@ -24,7 +24,6 @@
 import { Children } from 'react';
 import { warn } from '@instructure/console';
-import { generateId } from '@instructure/ui-utils';
 import { matchComponentTypes } from '@instructure/ui-react-utils';
 import { Drilldown } from '@instructure/ui-drilldown/v11_6';
 import { TopNavBarItem } from '../TopNavBarItem/index.js';
@@ -36,7 +35,6 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
     currentPageId,
     renderOptionContent
   } = options;
-  const customPopoverIdMap = new Map();
   Children.forEach(itemList, item => {
     if (!item || !matchComponentTypes(item, [TopNavBarItem])) return;
     const {
@@ -80,7 +78,9 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
       // if still has customPopover...
       if (customPopover) {
-        customPopoverId = generateId(`TopNavBarItem__customPopoverOption`, customPopoverIdMap);
+        // Derive a stable, unique id from the item's (required) id so it
+        // matches across server and client renders without a shared counter.
+        customPopoverId = `${id}__customPopoverOption`;
         optionSubPageId = customPopoverId;
         submenuPages.push(_jsx(Drilldown.Page, {
           id: customPopoverId,

package/es/TopNavBar/v2/utils/mapItemsForDrilldown.js CHANGED Viewed

@@ -24,7 +24,6 @@
 import { Children } from 'react';
 import { warn } from '@instructure/console';
-import { generateId } from '@instructure/ui-utils';
 import { matchComponentTypes } from '@instructure/ui-react-utils';
 import { Drilldown } from '@instructure/ui-drilldown/latest';
 import { TopNavBarItem } from '../TopNavBarItem/index.js';
@@ -36,7 +35,6 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
     currentPageId,
     renderOptionContent
   } = options;
-  const customPopoverIdMap = new Map();
   Children.forEach(itemList, item => {
     if (!item || !matchComponentTypes(item, [TopNavBarItem])) return;
     const {
@@ -80,7 +78,9 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
       // if still has customPopover...
       if (customPopover) {
-        customPopoverId = generateId(`TopNavBarItem__customPopoverOption`, customPopoverIdMap);
+        // Derive a stable, unique id from the item's (required) id so it
+        // matches across server and client renders without a shared counter.
+        customPopoverId = `${id}__customPopoverOption`;
         optionSubPageId = customPopoverId;
         submenuPages.push(_jsx(Drilldown.Page, {
           id: customPopoverId,

package/lib/TopNavBar/v1/utils/mapItemsForDrilldown.js CHANGED Viewed

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.renderMappedItemsAsDrilldownOptions = exports.renderMappedItemDrilldownSubpages = exports.mapItemsForDrilldown = exports.default = void 0;
 var _react = require("react");
 var _console = require("@instructure/console");
-var _generateId = require("@instructure/ui-utils/lib/generateId.js");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _v11_ = require("@instructure/ui-drilldown/v11_6");
 var _index = require("../TopNavBarItem/index.js");
@@ -42,7 +41,6 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
     currentPageId,
     renderOptionContent
   } = options;
-  const customPopoverIdMap = new Map();
   _react.Children.forEach(itemList, item => {
     if (!item || !(0, _matchComponentTypes.matchComponentTypes)(item, [_index.TopNavBarItem])) return;
     const {
@@ -86,7 +84,9 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
       // if still has customPopover...
       if (customPopover) {
-        customPopoverId = (0, _generateId.generateId)(`TopNavBarItem__customPopoverOption`, customPopoverIdMap);
+        // Derive a stable, unique id from the item's (required) id so it
+        // matches across server and client renders without a shared counter.
+        customPopoverId = `${id}__customPopoverOption`;
         optionSubPageId = customPopoverId;
         submenuPages.push((0, _jsxRuntime.jsx)(_v11_.Drilldown.Page, {
           id: customPopoverId,

package/lib/TopNavBar/v2/utils/mapItemsForDrilldown.js CHANGED Viewed

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.renderMappedItemsAsDrilldownOptions = exports.renderMappedItemDrilldownSubpages = exports.mapItemsForDrilldown = exports.default = void 0;
 var _react = require("react");
 var _console = require("@instructure/console");
-var _generateId = require("@instructure/ui-utils/lib/generateId.js");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _latest = require("@instructure/ui-drilldown/latest");
 var _index = require("../TopNavBarItem/index.js");
@@ -42,7 +41,6 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
     currentPageId,
     renderOptionContent
   } = options;
-  const customPopoverIdMap = new Map();
   _react.Children.forEach(itemList, item => {
     if (!item || !(0, _matchComponentTypes.matchComponentTypes)(item, [_index.TopNavBarItem])) return;
     const {
@@ -86,7 +84,9 @@ const mapItemsForDrilldown = (itemList, options = {}) => {
       // if still has customPopover...
       if (customPopover) {
-        customPopoverId = (0, _generateId.generateId)(`TopNavBarItem__customPopoverOption`, customPopoverIdMap);
+        // Derive a stable, unique id from the item's (required) id so it
+        // matches across server and client renders without a shared counter.
+        customPopoverId = `${id}__customPopoverOption`;
         optionSubPageId = customPopoverId;
         submenuPages.push((0, _jsxRuntime.jsx)(_latest.Drilldown.Page, {
           id: customPopoverId,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-top-nav-bar",
-  "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",
@@ -15,37 +15,37 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.5",
-    "@instructure/shared-types": "11.7.5",
-    "@instructure/emotion": "11.7.5",
-    "@instructure/ui-a11y-content": "11.7.5",
-    "@instructure/ui-avatar": "11.7.5",
-    "@instructure/ui-breadcrumb": "11.7.5",
-    "@instructure/ui-buttons": "11.7.5",
-    "@instructure/ui-dom-utils": "11.7.5",
-    "@instructure/ui-dialog": "11.7.5",
-    "@instructure/ui-drilldown": "11.7.5",
-    "@instructure/ui-icons": "11.7.5",
-    "@instructure/ui-link": "11.7.5",
-    "@instructure/ui-popover": "11.7.5",
-    "@instructure/ui-react-utils": "11.7.5",
-    "@instructure/ui-themes": "11.7.5",
-    "@instructure/ui-responsive": "11.7.5",
-    "@instructure/ui-tray": "11.7.5",
-    "@instructure/ui-truncate-list": "11.7.5",
-    "@instructure/ui-tooltip": "11.7.5",
-    "@instructure/ui-view": "11.7.5",
-    "@instructure/ui-utils": "11.7.5"
+    "@instructure/console": "11.7.6-snapshot-11",
+    "@instructure/shared-types": "11.7.6-snapshot-11",
+    "@instructure/emotion": "11.7.6-snapshot-11",
+    "@instructure/ui-a11y-content": "11.7.6-snapshot-11",
+    "@instructure/ui-avatar": "11.7.6-snapshot-11",
+    "@instructure/ui-breadcrumb": "11.7.6-snapshot-11",
+    "@instructure/ui-dialog": "11.7.6-snapshot-11",
+    "@instructure/ui-dom-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-drilldown": "11.7.6-snapshot-11",
+    "@instructure/ui-buttons": "11.7.6-snapshot-11",
+    "@instructure/ui-icons": "11.7.6-snapshot-11",
+    "@instructure/ui-link": "11.7.6-snapshot-11",
+    "@instructure/ui-popover": "11.7.6-snapshot-11",
+    "@instructure/ui-responsive": "11.7.6-snapshot-11",
+    "@instructure/ui-themes": "11.7.6-snapshot-11",
+    "@instructure/ui-react-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-tooltip": "11.7.6-snapshot-11",
+    "@instructure/ui-tray": "11.7.6-snapshot-11",
+    "@instructure/ui-truncate-list": "11.7.6-snapshot-11",
+    "@instructure/ui-utils": "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-scripts": "11.7.5",
-    "@instructure/ui-color-utils": "11.7.5"
+    "@instructure/ui-axe-check": "11.7.6-snapshot-11",
+    "@instructure/ui-color-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-babel-preset": "11.7.6-snapshot-11",
+    "@instructure/ui-scripts": "11.7.6-snapshot-11"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/TopNavBar/v1/utils/mapItemsForDrilldown.tsx CHANGED Viewed

@@ -25,7 +25,6 @@
 import { Children } from 'react'
 import { warn } from '@instructure/console'
-import { generateId } from '@instructure/ui-utils'
 import { matchComponentTypes } from '@instructure/ui-react-utils'
 import { Drilldown } from '@instructure/ui-drilldown/v11_6'
@@ -59,8 +58,6 @@ const mapItemsForDrilldown = (
   const submenus: ItemMappedForDrilldownOption[] = []
   const { currentPageId, renderOptionContent } = options
-  const customPopoverIdMap = new Map<string, number>()
   Children.forEach(itemList, (item) => {
     if (!item || !matchComponentTypes(item, [TopNavBarItem])) return
@@ -124,10 +121,9 @@ const mapItemsForDrilldown = (
       // if still has customPopover...
       if (customPopover) {
-        customPopoverId = generateId(
-          `TopNavBarItem__customPopoverOption`,
-          customPopoverIdMap
-        )
+        // Derive a stable, unique id from the item's (required) id so it
+        // matches across server and client renders without a shared counter.
+        customPopoverId = `${id}__customPopoverOption`
         optionSubPageId = customPopoverId
         submenuPages.push(
           <Drilldown.Page id={customPopoverId} key={customPopoverId}>

package/src/TopNavBar/v2/utils/mapItemsForDrilldown.tsx CHANGED Viewed

@@ -25,7 +25,6 @@
 import { Children } from 'react'
 import { warn } from '@instructure/console'
-import { generateId } from '@instructure/ui-utils'
 import { matchComponentTypes } from '@instructure/ui-react-utils'
 import { Drilldown } from '@instructure/ui-drilldown/latest'
@@ -59,8 +58,6 @@ const mapItemsForDrilldown = (
   const submenus: ItemMappedForDrilldownOption[] = []
   const { currentPageId, renderOptionContent } = options
-  const customPopoverIdMap = new Map<string, number>()
   Children.forEach(itemList, (item) => {
     if (!item || !matchComponentTypes(item, [TopNavBarItem])) return
@@ -124,10 +121,9 @@ const mapItemsForDrilldown = (
       // if still has customPopover...
       if (customPopover) {
-        customPopoverId = generateId(
-          `TopNavBarItem__customPopoverOption`,
-          customPopoverIdMap
-        )
+        // Derive a stable, unique id from the item's (required) id so it
+        // matches across server and client renders without a shared counter.
+        customPopoverId = `${id}__customPopoverOption`
         optionSubPageId = customPopoverId
         submenuPages.push(
           <Drilldown.Page id={customPopoverId} key={customPopoverId}>