@instructure/ui-calendar 10.24.3-snapshot-9 → 10.24.3-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.24.3-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-9) (2025-08-28)
+## [10.24.3-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-10) (2025-08-29)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 

package/es/Calendar/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
+var _dec, _dec2, _dec3, _class, _Calendar, _IconButton, _IconButton2;
 /*
  * The MIT License (MIT)
  *
@@ -25,10 +25,9 @@ var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
 
 import { Children, Component } from 'react';
 import { View } from '@instructure/ui-view';
-import { safeCloneElement, callRenderProp, omitProps } from '@instructure/ui-react-utils';
+import { safeCloneElement, callRenderProp, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
-import { uid } from '@instructure/uid';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
@@ -47,16 +46,11 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_Calendar = class Calendar extends Component {
+let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Calendar = class Calendar extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
-    this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
-      return {
-        ...ids,
-        [i]: uid(`weekday-header-${i}`)
-      };
-    }, {});
+    this._weekdayHeaderIds = void 0;
     this.handleRef = el => {
       this.ref = el;
     };
@@ -152,6 +146,12 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
       }
     };
+    this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
+      return {
+        ...ids,
+        [i]: this.props.deterministicId('weekday-header')
+      };
+    }, {});
     this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);
   }
   componentDidMount() {
@@ -403,6 +403,6 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
 }, _Calendar.displayName = "Calendar", _Calendar.componentId = 'Calendar', _Calendar.contextType = ApplyLocaleContext, _Calendar.Day = Day, _Calendar.DAY_COUNT = 42, _Calendar.propTypes = propTypes, _Calendar.allowedProps = allowedProps, _Calendar.defaultProps = {
   as: 'span',
   role: 'table'
-}, _Calendar)) || _class) || _class);
+}, _Calendar)) || _class) || _class) || _class);
 export default Calendar;
 export { Calendar };

package/lib/Calendar/index.js

@@ -10,9 +10,9 @@ var _View = require("@instructure/ui-view/lib/View");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 var _console = require("@instructure/console");
-var _uid = require("@instructure/uid");
 var _AccessibleContent = require("@instructure/ui-a11y-content/lib/AccessibleContent");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
@@ -28,7 +28,7 @@ var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenS
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
 var _SimpleSelect = require("@instructure/ui-simple-select/lib/SimpleSelect");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
+var _dec, _dec2, _dec3, _class, _Calendar, _IconButton, _IconButton2;
 /*
  * The MIT License (MIT)
  *
@@ -57,16 +57,11 @@ var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
 category: components
 ---
 **/
-let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_Calendar = class Calendar extends _react.Component {
+let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Calendar = class Calendar extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
-    this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
-      return {
-        ...ids,
-        [i]: (0, _uid.uid)(`weekday-header-${i}`)
-      };
-    }, {});
+    this._weekdayHeaderIds = void 0;
     this.handleRef = el => {
       this.ref = el;
     };
@@ -162,6 +157,12 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
       }
     };
+    this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
+      return {
+        ...ids,
+        [i]: this.props.deterministicId('weekday-header')
+      };
+    }, {});
     this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);
   }
   componentDidMount() {
@@ -413,5 +414,5 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
 }, _Calendar.displayName = "Calendar", _Calendar.componentId = 'Calendar', _Calendar.contextType = _ApplyLocaleContext.ApplyLocaleContext, _Calendar.Day = _Day.Day, _Calendar.DAY_COUNT = 42, _Calendar.propTypes = _props.propTypes, _Calendar.allowedProps = _props.allowedProps, _Calendar.defaultProps = {
   as: 'span',
   role: 'table'
-}, _Calendar)) || _class) || _class);
+}, _Calendar)) || _class) || _class) || _class);
 var _default = exports.default = Calendar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "10.24.3-snapshot-9",
+  "version": "10.24.3-snapshot-10",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.24.3-snapshot-9",
-    "@instructure/ui-color-utils": "10.24.3-snapshot-9",
-    "@instructure/ui-themes": "10.24.3-snapshot-9",
+    "@instructure/ui-babel-preset": "10.24.3-snapshot-10",
+    "@instructure/ui-color-utils": "10.24.3-snapshot-10",
+    "@instructure/ui-themes": "10.24.3-snapshot-10",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -33,20 +33,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.24.3-snapshot-9",
-    "@instructure/emotion": "10.24.3-snapshot-9",
-    "@instructure/shared-types": "10.24.3-snapshot-9",
-    "@instructure/ui-a11y-content": "10.24.3-snapshot-9",
-    "@instructure/ui-buttons": "10.24.3-snapshot-9",
-    "@instructure/ui-i18n": "10.24.3-snapshot-9",
-    "@instructure/ui-icons": "10.24.3-snapshot-9",
-    "@instructure/ui-prop-types": "10.24.3-snapshot-9",
-    "@instructure/ui-react-utils": "10.24.3-snapshot-9",
-    "@instructure/ui-simple-select": "10.24.3-snapshot-9",
-    "@instructure/ui-testable": "10.24.3-snapshot-9",
-    "@instructure/ui-utils": "10.24.3-snapshot-9",
-    "@instructure/ui-view": "10.24.3-snapshot-9",
-    "@instructure/uid": "10.24.3-snapshot-9",
+    "@instructure/console": "10.24.3-snapshot-10",
+    "@instructure/emotion": "10.24.3-snapshot-10",
+    "@instructure/shared-types": "10.24.3-snapshot-10",
+    "@instructure/ui-a11y-content": "10.24.3-snapshot-10",
+    "@instructure/ui-buttons": "10.24.3-snapshot-10",
+    "@instructure/ui-i18n": "10.24.3-snapshot-10",
+    "@instructure/ui-icons": "10.24.3-snapshot-10",
+    "@instructure/ui-prop-types": "10.24.3-snapshot-10",
+    "@instructure/ui-react-utils": "10.24.3-snapshot-10",
+    "@instructure/ui-simple-select": "10.24.3-snapshot-10",
+    "@instructure/ui-testable": "10.24.3-snapshot-10",
+    "@instructure/ui-utils": "10.24.3-snapshot-10",
+    "@instructure/ui-view": "10.24.3-snapshot-10",
+    "@instructure/uid": "10.24.3-snapshot-10",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Calendar/index.tsx

@@ -28,11 +28,11 @@ import { View } from '@instructure/ui-view'
 import {
   safeCloneElement,
   callRenderProp,
-  omitProps
+  omitProps,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { logError as error } from '@instructure/console'
-import { uid } from '@instructure/uid'
 import { AccessibleContent } from '@instructure/ui-a11y-content'
 
 import { testable } from '@instructure/ui-testable'
@@ -64,6 +64,7 @@ import { SimpleSelect } from '@instructure/ui-simple-select'
 category: components
 ---
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Calendar extends Component<CalendarProps, CalendarState> {
@@ -82,14 +83,15 @@ class Calendar extends Component<CalendarProps, CalendarState> {
   }
 
   ref: Element | null = null
-  private _weekdayHeaderIds = (
-    this.props.renderWeekdayLabels || this.defaultWeekdays
-  ).reduce((ids: Record<number, string>, _label, i) => {
-    return { ...ids, [i]: uid(`weekday-header-${i}`) }
-  }, {})
+  private _weekdayHeaderIds
+
   constructor(props: CalendarProps) {
     super(props)
-
+    this._weekdayHeaderIds = (
+      this.props.renderWeekdayLabels || this.defaultWeekdays
+    ).reduce((ids: Record<number, string>, _label, i) => {
+      return { ...ids, [i]: this.props.deterministicId!('weekday-header') }
+    }, {})
     this.state = this.calculateState(
       this.locale(),
       this.timezone(),

package/src/Calendar/props.ts

@@ -38,6 +38,7 @@ import { ReactElement } from 'react'
 import type { CalendarDayProps } from './Day/props'
 import { Renderable } from '@instructure/shared-types'
 import type { Moment } from '@instructure/ui-i18n'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type CalendarOwnProps = {
   /**
@@ -178,7 +179,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CalendarProps = CalendarOwnProps &
   WithStyleProps<CalendarTheme, CalendarStyle> &
-  OtherHTMLAttributes<CalendarOwnProps>
+  OtherHTMLAttributes<CalendarOwnProps> &
+  WithDeterministicIdProps
 
 type CalendarStyle = ComponentStyle<
   'navigation' | 'navigationWithButtons' | 'weekdayHeader' | 'yearPicker'