@instructure/ui-date-input 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.4-pr-snapshot-1781695314229](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-pr-snapshot-1781695314229) (2026-06-17)
+
+
+### Bug Fixes
+
+* **ui-date-input:** add scrollbar to dateinput v2 ([84f11c1](https://github.com/instructure/instructure-ui/commit/84f11c1c5638f9a91946b29125869115f66c5f0f))
+* **ui-dialog,ui-date-input,ui-calendar:** add aria-live to calendar header, descriptive nav button labels with target month, aria-modal on focused dialogs ([ac11880](https://github.com/instructure/instructure-ui/commit/ac11880013be74f148558671177ed25c9286204f))
+
+
+
+
+
 ## [11.7.3](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3) (2026-05-07)
 
 

package/LICENSE.md

@@ -2,6 +2,7 @@
 title: The MIT License (MIT)
 category: Getting Started
 order: 9
+isWIP: true
 ---
 
 # The MIT License (MIT)

package/{lib/DateInput/v1/styles.js → babel.config.cjs}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -28,25 +22,15 @@ exports.default = void 0;
  * SOFTWARE.
  */
 
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  _componentTheme The theme variable object.
- * @param  props the props of the component, the style is applied to
- * @return The final style object, which will be used in the component
- */
-const generateStyle = (_componentTheme, props) => {
-  return {
-    dateInput: {
-      label: 'dateInput',
-      display: props.display
-    },
-    assistiveText: {
-      label: 'dateInput__assistiveText',
-      display: 'none'
-    }
-  };
-};
-var _default = exports.default = generateStyle;
+module.exports = {
+  presets: [
+    [
+      require('@instructure/ui-babel-preset'),
+      {
+        esModules: Boolean(process.env.ES_MODULES),
+        removeConsole: process.env.NODE_ENV === 'production',
+        transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+      }
+    ]
+  ]
+}

package/es/DateInput/v1/index.js

@@ -33,8 +33,8 @@ import { createChainedFunction } from '@instructure/ui-utils';
 import { getInteraction, callRenderProp, safeCloneElement, passthroughProps } from '@instructure/ui-react-utils';
 import { DateTime, Locale } from '@instructure/ui-i18n';
 import { withStyle } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -42,7 +42,7 @@ category: components
 ---
 **/
 let DateInput = (_dec = withStyle(generateStyle, null), _dec(_class = class DateInput extends Component {
-  static displayName = "DateInput";
+  static displayName = 'DateInput';
   static componentId = 'DateInput';
   static Day = Calendar.Day;
   static allowedProps = allowedProps;

package/es/DateInput/v2/index.js

@@ -245,6 +245,7 @@ const DateInput = /*#__PURE__*/forwardRef(({
       shouldContainFocus: true,
       shouldReturnFocus: true,
       shouldCloseOnDocumentClick: true,
+      shouldScrollContent: true,
       screenReaderLabel: screenReaderLabels.datePickerDialog,
       children: _jsx(Calendar, {
         withYearPicker: withYearPicker,
@@ -255,23 +256,27 @@ const DateInput = /*#__PURE__*/forwardRef(({
         visibleMonth: selectedDate,
         locale: userLocale,
         timezone: userTimezone,
-        renderNextMonthButton: _jsx(IconButton, {
+        renderNextMonthButton: ({
+          targetMonthSrLabel
+        }) => _jsx(IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
           renderIcon: _jsx(ChevronRightInstUIIcon, {
             color: "baseColor"
           }),
-          screenReaderLabel: screenReaderLabels.nextMonthButton
+          screenReaderLabel: `${screenReaderLabels.nextMonthButton}, ${targetMonthSrLabel}`
         }),
-        renderPrevMonthButton: _jsx(IconButton, {
+        renderPrevMonthButton: ({
+          targetMonthSrLabel
+        }) => _jsx(IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
           renderIcon: _jsx(ChevronLeftInstUIIcon, {
             color: "baseColor"
           }),
-          screenReaderLabel: screenReaderLabels.prevMonthButton
+          screenReaderLabel: `${screenReaderLabels.prevMonthButton}, ${targetMonthSrLabel}`
         })
       })
     })

package/es/exports/a.js

@@ -21,5 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { DateInput } from "../DateInput/v1/index.js";
-export { DateInput2 } from "../DateInput2/v1/index.js";
+
+export { DateInput } from '../DateInput/v1/index.js';
+export { DateInput2 } from '../DateInput2/v1/index.js';

package/es/exports/b.js

@@ -21,5 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { DateInput } from "../DateInput/v2/index.js";
-export { DateInput2 } from "../DateInput2/v1/index.js";
+
+export { DateInput } from '../DateInput/v2/index.js';
+export { DateInput2 } from '../DateInput2/v1/index.js';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "11.7.3",
+  "version": "11.7.4-pr-snapshot-1781695314229",
+  "type": "module",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
-  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/emotion": "11.7.3",
-    "@instructure/ui-form-field": "11.7.3",
-    "@instructure/ui-calendar": "11.7.3",
-    "@instructure/ui-i18n": "11.7.3",
-    "@instructure/shared-types": "11.7.3",
-    "@instructure/ui-icons": "11.7.3",
-    "@instructure/ui-position": "11.7.3",
-    "@instructure/ui-react-utils": "11.7.3",
-    "@instructure/ui-selectable": "11.7.3",
-    "@instructure/ui-text-input": "11.7.3",
-    "@instructure/ui-utils": "11.7.3",
-    "@instructure/ui-popover": "11.7.3"
+    "@instructure/emotion": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-i18n": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-calendar": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-form-field": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/shared-types": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-icons": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-popover": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-position": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-selectable": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-text-input": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-utils": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-react-utils": "11.7.4-pr-snapshot-1781695314229"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.3",
-    "@instructure/ui-scripts": "11.7.3",
-    "@instructure/ui-buttons": "11.7.3"
+    "@instructure/ui-babel-preset": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-buttons": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-scripts": "11.7.4-pr-snapshot-1781695314229"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -45,7 +45,6 @@
   },
   "sideEffects": false,
   "exports": {
-    "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
@@ -54,28 +53,24 @@
       "src": "./src/exports/a.ts",
       "types": "./types/exports/a.d.ts",
       "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
       "default": "./es/exports/a.js"
     },
     "./v11_6": {
       "src": "./src/exports/a.ts",
       "types": "./types/exports/a.d.ts",
       "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
       "src": "./src/exports/b.ts",
       "types": "./types/exports/b.d.ts",
       "import": "./es/exports/b.js",
-      "require": "./lib/exports/b.js",
       "default": "./es/exports/b.js"
     },
     "./latest": {
       "src": "./src/exports/b.ts",
       "types": "./types/exports/b.d.ts",
       "import": "./es/exports/b.js",
-      "require": "./lib/exports/b.js",
       "default": "./es/exports/b.js"
     }
   },
@@ -83,7 +78,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "clean": "ui-scripts clean",
-    "build": "ui-scripts build --modules es,cjs",
+    "build": "ui-scripts build",
     "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
     "build:types": "tsc -p tsconfig.build.json",
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"

package/src/DateInput/v1/index.tsx

@@ -50,9 +50,9 @@ import { DateTime, ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
 
 import { withStyle } from '@instructure/emotion'
 
-import generateStyle from './styles'
+import generateStyle from './styles.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DateInputProps, DateInputState } from './props'
 import type { FormMessage } from '@instructure/ui-form-field/v11_6'
 
@@ -63,6 +63,7 @@ category: components
 **/
 @withStyle(generateStyle, null)
 class DateInput extends Component<DateInputProps, DateInputState> {
+  static displayName = 'DateInput'
   static readonly componentId = 'DateInput'
   static Day = Calendar.Day
   declare context: React.ContextType<typeof ApplyLocaleContext>

package/src/DateInput/v2/index.tsx

@@ -300,6 +300,7 @@ const DateInput = forwardRef(
             shouldContainFocus
             shouldReturnFocus
             shouldCloseOnDocumentClick
+            shouldScrollContent
             screenReaderLabel={screenReaderLabels.datePickerDialog}
           >
             <Calendar
@@ -311,24 +312,24 @@ const DateInput = forwardRef(
               visibleMonth={selectedDate}
               locale={userLocale}
               timezone={userTimezone}
-              renderNextMonthButton={
+              renderNextMonthButton={({ targetMonthSrLabel }) => (
                 <IconButton
                   size="small"
                   withBackground={false}
                   withBorder={false}
                   renderIcon={<ChevronRightInstUIIcon color="baseColor" />}
-                  screenReaderLabel={screenReaderLabels.nextMonthButton}
+                  screenReaderLabel={`${screenReaderLabels.nextMonthButton}, ${targetMonthSrLabel}`}
                 />
-              }
-              renderPrevMonthButton={
+              )}
+              renderPrevMonthButton={({ targetMonthSrLabel }) => (
                 <IconButton
                   size="small"
                   withBackground={false}
                   withBorder={false}
                   renderIcon={<ChevronLeftInstUIIcon color="baseColor" />}
-                  screenReaderLabel={screenReaderLabels.prevMonthButton}
+                  screenReaderLabel={`${screenReaderLabels.prevMonthButton}, ${targetMonthSrLabel}`}
                 />
-              }
+              )}
             />
           </Popover>
         }

package/src/exports/a.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-export { DateInput } from '../DateInput/v1'
-export { DateInput2 } from '../DateInput2/v1'
+export { DateInput } from '../DateInput/v1/index.js'
+export { DateInput2 } from '../DateInput2/v1/index.js'
 export type { DateInputProps } from '../DateInput/v1/props'
 export type { DateInput2Props } from '../DateInput2/v1/props'

package/src/exports/b.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-export { DateInput } from '../DateInput/v2'
-export { DateInput2 } from '../DateInput2/v1'
+export { DateInput } from '../DateInput/v2/index.js'
+export { DateInput2 } from '../DateInput2/v1/index.js'
 export type { DateInputProps } from '../DateInput/v2/props'
 export type { DateInput2Props } from '../DateInput2/v1/props'