@instructure/ui-date-input 10.11.1-snapshot-18 → 10.12.1-pr-snapshot-1741273500459

package/CHANGELOG.md

@@ -3,9 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.11.1-snapshot-18](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-18) (2025-02-21)
+## [10.12.1-pr-snapshot-1741273500459](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-pr-snapshot-1741273500459) (2025-03-06)
 
-**Note:** Version bump only for package @instructure/ui-date-input
+
+### Bug Fixes
+
+* **many:** fix form label not read by NVDA in hover mode and other layout issues ([ef77281](https://github.com/instructure/instructure-ui/commit/ef77281890511e8eea794196445d3ef2454537ba))
+
+
+### Features
+
+* **ui-date-input:** add feature to disable dates and access the input's ref ([411219e](https://github.com/instructure/instructure-ui/commit/411219e4347c75ed2ffeda320b33c591ffc05329))
+
+
+
+
+
+# [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
+
+
+### Features
+
+* **many:** introduce new spacing tokens; add margin prop for more components ([048c902](https://github.com/instructure/instructure-ui/commit/048c902406c00611cd117fb2fb8164a6eba62fb8))
 
 
 

package/es/DateInput/__new-tests__/DateInput.test.js

@@ -263,7 +263,7 @@ describe('<DateInput />', () => {
             onRequestShowCalendar: onRequestShowCalendar
           }, generateDays())),
           container = _render5.container;
-        const dateInput = container.querySelector("[class$='-formFieldLabel']");
+        const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
         expect(dateInput).toHaveTextContent('Choose date');
         await userEvent.click(dateInput);
         await waitFor(() => {

package/es/DateInput2/__new-tests__/DateInput2.test.js

@@ -71,11 +71,9 @@ describe('<DateInput2 />', () => {
   it('should render an input label', async () => {
     const _render2 = render(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/React.createElement(DateInputExample, null))),
       container = _render2.container;
-    const dateInput = container.querySelector('input');
     const label = container.querySelector('label');
     expect(label).toBeInTheDocument();
     expect(label).toHaveTextContent(LABEL_TEXT);
-    expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.id).toBe(label === null || label === void 0 ? void 0 : label.htmlFor);
   });
   it('should render an input placeholder', async () => {
     const placeholder = 'Placeholder';

package/es/DateInput2/index.js

@@ -110,8 +110,6 @@ function parseLocaleDate(dateString = '', locale, timeZone) {
 ---
 category: components
 ---
-
-@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
@@ -131,8 +129,10 @@ const DateInput2 = ({
   placeholder,
   dateFormat,
   onRequestValidateDate,
+  disabledDates,
   renderCalendarIcon,
-  // margin, TODO enable this prop
+  margin,
+  inputRef,
   ...rest
 }) => {
   const localeContext = useContext(ApplyLocaleContext);
@@ -250,7 +250,7 @@ const DateInput2 = ({
   };
   const selectedDate = parseDate(value)[1];
   return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
-    // margin={'large'} TODO add this prop to TextInput
+    inputRef: inputRef,
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
@@ -261,6 +261,7 @@ const DateInput2 = ({
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
+    margin: margin,
     renderAfterInput: jsx(Popover, {
       renderTrigger: jsx(IconButton, {
         withBackground: false,
@@ -280,6 +281,7 @@ const DateInput2 = ({
       withYearPicker: withYearPicker,
       onDateSelected: handleDateSelected,
       selectedDate: selectedDate,
+      disabledDates: disabledDates,
       visibleMonth: selectedDate,
       locale: getLocale(),
       timezone: getTimezone(),

package/es/DateInput2/props.js

@@ -43,6 +43,9 @@ const propTypes = {
   withYearPicker: PropTypes.object,
   dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onRequestValidateDate: PropTypes.func,
-  renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  margin: PropTypes.string,
+  disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  inputRef: PropTypes.func
 };
 export { propTypes };

package/lib/DateInput/__new-tests__/DateInput.test.js

@@ -265,7 +265,7 @@ describe('<DateInput />', () => {
             onRequestShowCalendar: onRequestShowCalendar
           }, generateDays())),
           container = _render5.container;
-        const dateInput = container.querySelector("[class$='-formFieldLabel']");
+        const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
         expect(dateInput).toHaveTextContent('Choose date');
         await _userEvent.default.click(dateInput);
         await (0, _react2.waitFor)(() => {

package/lib/DateInput2/__new-tests__/DateInput2.test.js

@@ -75,11 +75,9 @@ describe('<DateInput2 />', () => {
   it('should render an input label', async () => {
     const _render2 = (0, _react2.render)(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/_react.default.createElement(DateInputExample, null))),
       container = _render2.container;
-    const dateInput = container.querySelector('input');
     const label = container.querySelector('label');
     expect(label).toBeInTheDocument();
     expect(label).toHaveTextContent(LABEL_TEXT);
-    expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.id).toBe(label === null || label === void 0 ? void 0 : label.htmlFor);
   });
   it('should render an input placeholder', async () => {
     const placeholder = 'Placeholder';

package/lib/DateInput2/index.js

@@ -120,8 +120,6 @@ function parseLocaleDate(dateString = '', locale, timeZone) {
 ---
 category: components
 ---
-
-@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
@@ -141,8 +139,10 @@ const DateInput2 = ({
   placeholder,
   dateFormat,
   onRequestValidateDate,
+  disabledDates,
   renderCalendarIcon,
-  // margin, TODO enable this prop
+  margin,
+  inputRef,
   ...rest
 }) => {
   const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
@@ -260,7 +260,7 @@ const DateInput2 = ({
   };
   const selectedDate = parseDate(value)[1];
   return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
-    // margin={'large'} TODO add this prop to TextInput
+    inputRef: inputRef,
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
@@ -271,6 +271,7 @@ const DateInput2 = ({
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
+    margin: margin,
     renderAfterInput: (0, _emotion.jsx)(_Popover.Popover, {
       renderTrigger: (0, _emotion.jsx)(_IconButton.IconButton, {
         withBackground: false,
@@ -290,6 +291,7 @@ const DateInput2 = ({
       withYearPicker: withYearPicker,
       onDateSelected: handleDateSelected,
       selectedDate: selectedDate,
+      disabledDates: disabledDates,
       visibleMonth: selectedDate,
       locale: getLocale(),
       timezone: getTimezone(),

package/lib/DateInput2/props.js

@@ -50,5 +50,8 @@ const propTypes = exports.propTypes = {
   withYearPicker: _propTypes.default.object,
   dateFormat: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
   onRequestValidateDate: _propTypes.default.func,
-  renderCalendarIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
+  renderCalendarIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  margin: _propTypes.default.string,
+  disabledDates: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func]),
+  inputRef: _propTypes.default.func
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "10.11.1-snapshot-18",
+  "version": "10.12.1-pr-snapshot-1741273500459",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.11.1-snapshot-18",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-18",
-    "@instructure/ui-buttons": "10.11.1-snapshot-18",
-    "@instructure/ui-scripts": "10.11.1-snapshot-18",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-18",
+    "@instructure/ui-axe-check": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-babel-preset": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-buttons": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-scripts": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-test-utils": "10.12.1-pr-snapshot-1741273500459",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.11.1-snapshot-18",
-    "@instructure/shared-types": "10.11.1-snapshot-18",
-    "@instructure/ui-calendar": "10.11.1-snapshot-18",
-    "@instructure/ui-form-field": "10.11.1-snapshot-18",
-    "@instructure/ui-i18n": "10.11.1-snapshot-18",
-    "@instructure/ui-icons": "10.11.1-snapshot-18",
-    "@instructure/ui-popover": "10.11.1-snapshot-18",
-    "@instructure/ui-position": "10.11.1-snapshot-18",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-18",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-18",
-    "@instructure/ui-selectable": "10.11.1-snapshot-18",
-    "@instructure/ui-testable": "10.11.1-snapshot-18",
-    "@instructure/ui-text-input": "10.11.1-snapshot-18",
-    "@instructure/ui-utils": "10.11.1-snapshot-18",
+    "@instructure/emotion": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/shared-types": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-calendar": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-form-field": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-i18n": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-icons": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-popover": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-position": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-prop-types": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-react-utils": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-selectable": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-testable": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-text-input": "10.12.1-pr-snapshot-1741273500459",
+    "@instructure/ui-utils": "10.12.1-pr-snapshot-1741273500459",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

package/src/DateInput/README.md

@@ -2,7 +2,7 @@
 describes: DateInput
 ---
 
-> _Note:_ you can now try the updated (but still experimental) [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using that instead of `DateInput` which will be deprecated in the future.
+> _Note:_ we recommend to update to the new [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. `DateInput` will be deprecated in the future.
 
 The `DateInput` component provides a visual interface for inputting date data.
 

package/src/DateInput/__new-tests__/DateInput.test.tsx

@@ -381,7 +381,9 @@ describe('<DateInput />', () => {
             {generateDays()}
           </DateInput>
         )
-        const dateInput = container.querySelector("[class$='-formFieldLabel']")
+        const dateInput = container.querySelector(
+          'span[class$="-formFieldLayout__label"]'
+        )
 
         expect(dateInput).toHaveTextContent('Choose date')
 

package/src/DateInput2/README.md

@@ -305,3 +305,38 @@ render(<Example />)
 ### Date format hint
 
 If the `placeholder` property is undefined it will display a hint for the date format (like `DD/MM/YYYY`). Usually it is recommended to leave it as it is for a better user experience.
+
+### Disabling dates
+
+You can use the `disabledDates` prop to disable specific dates. It accepts either an array of ISO8601 date strings or a function. Keep in mind that this will only disable the dates in the calendar and does not prevent the user the enter them into the input field. To validate those values please use the `onRequestValidateDate` prop.
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [inputValue, setInputValue] = useState('2/5/2025')
+  const [dateString, setDateString] = useState('')
+  return (
+    <DateInput2
+      renderLabel="Choose a date"
+      disabledDates={['2025-02-11', '2025-02-12', '2025-02-13']}
+      screenReaderLabels={{
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      }}
+      value={inputValue}
+      locale="en-us"
+      width="20rem"
+      onChange={(e, inputValue, dateString) => {
+        setInputValue(inputValue)
+        setDateString(dateString)
+      }}
+      invalidDateErrorMessage="Invalid date"
+    />
+  )
+}
+
+render(<Example />)
+```

package/src/DateInput2/__new-tests__/DateInput2.test.tsx

@@ -77,12 +77,10 @@ describe('<DateInput2 />', () => {
   it('should render an input label', async () => {
     const { container } = render(<DateInputExample />)
 
-    const dateInput = container.querySelector('input')
     const label = container.querySelector('label')
 
     expect(label).toBeInTheDocument()
     expect(label).toHaveTextContent(LABEL_TEXT)
-    expect(dateInput?.id).toBe(label?.htmlFor)
   })
 
   it('should render an input placeholder', async () => {

package/src/DateInput2/index.tsx

@@ -131,8 +131,6 @@ function parseLocaleDate(
 ---
 category: components
 ---
-
-@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
@@ -152,8 +150,10 @@ const DateInput2 = ({
   placeholder,
   dateFormat,
   onRequestValidateDate,
+  disabledDates,
   renderCalendarIcon,
-  // margin, TODO enable this prop
+  margin,
+  inputRef,
   ...rest
 }: DateInput2Props) => {
   const localeContext = useContext(ApplyLocaleContext)
@@ -275,10 +275,11 @@ const DateInput2 = ({
   }
 
   const selectedDate = parseDate(value)[1]
+
   return (
     <TextInput
       {...passthroughProps(rest)}
-      // margin={'large'} TODO add this prop to TextInput
+      inputRef={inputRef}
       renderLabel={renderLabel}
       onChange={handleInputChange}
       onBlur={handleBlur}
@@ -289,6 +290,7 @@ const DateInput2 = ({
       display={isInline ? 'inline-block' : 'block'}
       messages={inputMessages}
       interaction={interaction}
+      margin={margin}
       renderAfterInput={
         <Popover
           renderTrigger={
@@ -318,6 +320,7 @@ const DateInput2 = ({
             withYearPicker={withYearPicker}
             onDateSelected={handleDateSelected}
             selectedDate={selectedDate}
+            disabledDates={disabledDates}
             visibleMonth={selectedDate}
             locale={getLocale()}
             timezone={getTimezone()}

package/src/DateInput2/props.ts

@@ -33,6 +33,7 @@ import type {
   Renderable,
   PropValidators
 } from '@instructure/shared-types'
+import type { Spacing } from '@instructure/emotion'
 
 type DateInput2OwnProps = {
   /**
@@ -164,12 +165,27 @@ type DateInput2OwnProps = {
     value: string,
     utcDateString: string
   ) => void
-  // margin?: Spacing // TODO enable this prop
 
   /**
    * Custom icon for the icon button opening the picker.
    */
   renderCalendarIcon?: Renderable
+
+  /**
+   * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
+  /*
+   * Specify which date(s) will be shown as disabled in the calendar.
+   * You can either supply an array of ISO8601 timeDate strings or
+   * a function that will be called for each date shown in the calendar.
+   */
+  disabledDates?: string[] | ((isoDateToCheck: string) => boolean)
+
+  /**
+   * A function that provides a reference to the inner input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type PropKeys = keyof DateInput2OwnProps
@@ -201,7 +217,10 @@ const propTypes: PropValidators<PropKeys> = {
   withYearPicker: PropTypes.object,
   dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onRequestValidateDate: PropTypes.func,
-  renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  margin: PropTypes.string,
+  disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  inputRef: PropTypes.func
 }
 
 export type { DateInput2Props }