@instructure/ui-calendar 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-calendar

package/es/Calendar/v1/index.js

@@ -62,9 +62,12 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   constructor(props) {
     super(props);
     this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
+      // The instance name must vary per weekday: `deterministicId` derives the
+      // id from the name, so calling it repeatedly with the same name returns
+      // the same id (it is no longer a counter) and every header would collide.
       return {
         ...ids,
-        [i]: this.props.deterministicId('weekday-header')
+        [i]: this.props.deterministicId(`weekday-header-${i}`)
       };
     }, {});
     this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);

package/es/Calendar/v2/index.js

@@ -61,9 +61,12 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
   constructor(props) {
     super(props);
     this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
+      // The instance name must vary per weekday: `deterministicId` derives the
+      // id from the name, so calling it repeatedly with the same name returns
+      // the same id (it is no longer a counter) and every header would collide.
       return {
         ...ids,
-        [i]: this.props.deterministicId('weekday-header')
+        [i]: this.props.deterministicId(`weekday-header-${i}`)
       };
     }, {});
     this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);

package/lib/Calendar/v1/index.js

@@ -73,9 +73,12 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
   constructor(props) {
     super(props);
     this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
+      // The instance name must vary per weekday: `deterministicId` derives the
+      // id from the name, so calling it repeatedly with the same name returns
+      // the same id (it is no longer a counter) and every header would collide.
       return {
         ...ids,
-        [i]: this.props.deterministicId('weekday-header')
+        [i]: this.props.deterministicId(`weekday-header-${i}`)
       };
     }, {});
     this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);

package/lib/Calendar/v2/index.js

@@ -71,9 +71,12 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
   constructor(props) {
     super(props);
     this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
+      // The instance name must vary per weekday: `deterministicId` derives the
+      // id from the name, so calling it repeatedly with the same name returns
+      // the same id (it is no longer a counter) and every header would collide.
       return {
         ...ids,
-        [i]: this.props.deterministicId('weekday-header')
+        [i]: this.props.deterministicId(`weekday-header-${i}`)
       };
     }, {});
     this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "11.7.5",
+  "version": "11.7.6-snapshot-11",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.5",
-    "@instructure/emotion": "11.7.5",
-    "@instructure/shared-types": "11.7.5",
-    "@instructure/ui-a11y-content": "11.7.5",
-    "@instructure/ui-buttons": "11.7.5",
-    "@instructure/ui-i18n": "11.7.5",
-    "@instructure/ui-icons": "11.7.5",
-    "@instructure/ui-simple-select": "11.7.5",
-    "@instructure/ui-themes": "11.7.5",
-    "@instructure/ui-utils": "11.7.5",
-    "@instructure/uid": "11.7.5",
-    "@instructure/ui-react-utils": "11.7.5",
-    "@instructure/ui-view": "11.7.5"
+    "@instructure/console": "11.7.6-snapshot-11",
+    "@instructure/emotion": "11.7.6-snapshot-11",
+    "@instructure/ui-a11y-content": "11.7.6-snapshot-11",
+    "@instructure/shared-types": "11.7.6-snapshot-11",
+    "@instructure/ui-buttons": "11.7.6-snapshot-11",
+    "@instructure/ui-react-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-i18n": "11.7.6-snapshot-11",
+    "@instructure/ui-icons": "11.7.6-snapshot-11",
+    "@instructure/ui-simple-select": "11.7.6-snapshot-11",
+    "@instructure/ui-themes": "11.7.6-snapshot-11",
+    "@instructure/ui-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-view": "11.7.6-snapshot-11",
+    "@instructure/uid": "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-babel-preset": "11.7.5",
-    "@instructure/ui-color-utils": "11.7.5"
+    "@instructure/ui-babel-preset": "11.7.6-snapshot-11",
+    "@instructure/ui-color-utils": "11.7.6-snapshot-11"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Calendar/v1/index.tsx

@@ -87,7 +87,10 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     this._weekdayHeaderIds = (
       this.props.renderWeekdayLabels || this.defaultWeekdays
     ).reduce((ids: Record<number, string>, _label, i) => {
-      return { ...ids, [i]: this.props.deterministicId!('weekday-header') }
+      // The instance name must vary per weekday: `deterministicId` derives the
+      // id from the name, so calling it repeatedly with the same name returns
+      // the same id (it is no longer a counter) and every header would collide.
+      return { ...ids, [i]: this.props.deterministicId!(`weekday-header-${i}`) }
     }, {})
     this.state = this.calculateState(
       this.locale(),

package/src/Calendar/v2/index.tsx

@@ -86,7 +86,10 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     this._weekdayHeaderIds = (
       this.props.renderWeekdayLabels || this.defaultWeekdays
     ).reduce((ids: Record<number, string>, _label, i) => {
-      return { ...ids, [i]: this.props.deterministicId!('weekday-header') }
+      // The instance name must vary per weekday: `deterministicId` derives the
+      // id from the name, so calling it repeatedly with the same name returns
+      // the same id (it is no longer a counter) and every header would collide.
+      return { ...ids, [i]: this.props.deterministicId!(`weekday-header-${i}`) }
     }, {})
     this.state = this.calculateState(
       this.locale(),