@instructure/ui-date-input 9.1.0 → 9.1.1-pr-snapshot-1720090208194

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.
 
+## [9.1.1-pr-snapshot-1720090208194](https://github.com/instructure/instructure-ui/compare/v9.1.0...v9.1.1-pr-snapshot-1720090208194) (2024-07-04)
+
+
+### Features
+
+* **ui-date-input:** add year picker to DateInput and note to use the new api ([71de6b4](https://github.com/instructure/instructure-ui/commit/71de6b44cd38ba021cb977fdfaf75a039cf1c342))
+
+
+
+
+
 # [9.1.0](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.1.0) (2024-06-14)
 
 **Note:** Version bump only for package @instructure/ui-date-input

package/es/DateInput/index.js

@@ -44,8 +44,6 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
-The `DateInput` component provides a visual interface for inputting date data.
-See <https://instructure.design/#DateInput/>
 **/
 let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_DateInput = class DateInput extends Component {
   constructor(...args) {

package/es/DateInput/props.js

@@ -62,7 +62,8 @@ const propTypes = {
   disabledDateErrorMessage: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   invalidDateErrorMessage: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   locale: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  withYearPicker: PropTypes.object
 };
 const allowedProps = ['renderLabel', 'value', 'size', 'placeholder', 'onChange', 'onBlur', 'interaction', 'isRequired', 'isInline', 'assistiveText', 'layout', 'width', 'display', 'inputRef', 'messages', 'placement', 'isShowingCalendar', 'onRequestValidateDate', 'onRequestShowCalendar', 'onRequestHideCalendar', 'onRequestSelectNextDay', 'onRequestSelectPrevDay', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderWeekdayLabels', 'renderNextMonthButton', 'renderPrevMonthButton', 'children', 'disabledDates', 'currentDate', 'disabledDateErrorMessage', 'invalidDateErrorMessage', 'locale', 'timezone'];
 export { propTypes, allowedProps };

package/es/DateInput2/index.js

@@ -0,0 +1,154 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _IconCalendarMonthLin;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import { useState, useEffect, useContext } from 'react';
+import moment from 'moment-timezone';
+import { Calendar } from '@instructure/ui-calendar';
+import { IconButton } from '@instructure/ui-buttons';
+import { IconCalendarMonthLine } from '@instructure/ui-icons';
+import { Popover } from '@instructure/ui-popover';
+import { TextInput } from '@instructure/ui-text-input';
+import { DateTime, ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
+import { jsx } from '@instructure/emotion';
+import { propTypes } from './props';
+/**
+---
+category: components
+---
+**/
+const DateInput2 = ({
+  renderLabel,
+  isRequired = false,
+  interaction = 'enabled',
+  value = '',
+  size = 'medium',
+  isInline = false,
+  messages = [],
+  width,
+  onChange,
+  onBlur,
+  withYearPicker,
+  invalidDateErrorMessage,
+  locale,
+  timezone,
+  placeholder
+}) => {
+  const _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedDate = _useState2[0],
+    setSelectedDate = _useState2[1];
+  const _useState3 = useState(messages),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputMessages = _useState4[0],
+    setInputMessages = _useState4[1];
+  const _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showPopover = _useState6[0],
+    setShowPopover = _useState6[1];
+  const localeContext = useContext(ApplyLocaleContext);
+  useEffect(() => {
+    validateInput(true);
+  }, [value]);
+  const handleInputChange = (e, value) => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+  };
+  const handleDateSelected = (dateString, momentDate, e) => {
+    setSelectedDate(dateString);
+    handleInputChange(e, `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`);
+    setShowPopover(false);
+  };
+  const validateInput = (onlyRemoveError = false) => {
+    if (moment.tz(value ? value : '', [DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], getLocale(), true, getTimezone()).isValid() || value === '') {
+      setSelectedDate(value || '');
+      setInputMessages(messages);
+      return;
+    }
+    if (typeof invalidDateErrorMessage !== 'function' && !onlyRemoveError) {
+      setInputMessages([{
+        type: 'error',
+        text: invalidDateErrorMessage
+      }]);
+    }
+  };
+  const getLocale = () => {
+    if (locale) {
+      return locale;
+    } else if (localeContext.locale) {
+      return localeContext.locale;
+    }
+    return Locale.browserLocale();
+  };
+  const getTimezone = () => {
+    if (timezone) {
+      return timezone;
+    } else if (localeContext.timezone) {
+      return localeContext.timezone;
+    }
+    return DateTime.browserTimeZone();
+  };
+  const handleBlur = e => {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    validateInput(false);
+  };
+  return jsx(TextInput, {
+    renderLabel: renderLabel,
+    onChange: handleInputChange,
+    onBlur: handleBlur,
+    isRequired: isRequired,
+    value: value,
+    placeholder: placeholder,
+    width: width,
+    size: size,
+    display: isInline ? 'inline-block' : 'block',
+    messages: inputMessages,
+    interaction: interaction,
+    renderAfterInput: jsx(Popover, {
+      renderTrigger: jsx(IconButton, {
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: "Calendar",
+        shape: "circle",
+        interaction: interaction
+      }, _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
+      isShowingContent: showPopover,
+      onShowContent: () => setShowPopover(true),
+      onHideContent: () => setShowPopover(false),
+      on: "click",
+      shouldContainFocus: true,
+      shouldReturnFocus: true,
+      shouldCloseOnDocumentClick: true
+    }, jsx(Calendar, {
+      withYearPicker: withYearPicker,
+      onDateSelected: handleDateSelected,
+      selectedDate: selectedDate,
+      visibleMonth: selectedDate
+    }))
+  });
+};
+DateInput2.propTypes = propTypes;
+export default DateInput2;
+export { DateInput2 };

package/es/DateInput2/props.js

@@ -0,0 +1,47 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types';
+import { controllable } from '@instructure/ui-prop-types';
+import { FormPropTypes } from '@instructure/ui-form-field';
+const propTypes = {
+  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  value: controllable(PropTypes.string),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  isRequired: PropTypes.bool,
+  isInline: PropTypes.bool,
+  width: PropTypes.string,
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  onRequestShowCalendar: PropTypes.func,
+  onRequestHideCalendar: PropTypes.func,
+  invalidDateErrorMessage: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  locale: PropTypes.string,
+  timezone: PropTypes.string,
+  withYearPicker: PropTypes.object
+};
+export { propTypes };

package/es/index.js

@@ -22,4 +22,5 @@
  * SOFTWARE.
  */
 
-export { DateInput } from './DateInput';
+export { DateInput } from './DateInput';
+export { DateInput2 } from './DateInput2';

package/lib/DateInput/index.js

@@ -55,8 +55,6 @@ var _dec, _dec2, _class, _DateInput, _IconCalendarMonthLin;
 ---
 category: components
 ---
-The `DateInput` component provides a visual interface for inputting date data.
-See <https://instructure.design/#DateInput/>
 **/
 let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_DateInput = class DateInput extends _react.Component {
   constructor(...args) {

package/lib/DateInput/props.js

@@ -70,6 +70,7 @@ const propTypes = exports.propTypes = {
   disabledDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   invalidDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   locale: _propTypes.default.string,
-  timezone: _propTypes.default.string
+  timezone: _propTypes.default.string,
+  withYearPicker: _propTypes.default.object
 };
 const allowedProps = exports.allowedProps = ['renderLabel', 'value', 'size', 'placeholder', 'onChange', 'onBlur', 'interaction', 'isRequired', 'isInline', 'assistiveText', 'layout', 'width', 'display', 'inputRef', 'messages', 'placement', 'isShowingCalendar', 'onRequestValidateDate', 'onRequestShowCalendar', 'onRequestHideCalendar', 'onRequestSelectNextDay', 'onRequestSelectPrevDay', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderWeekdayLabels', 'renderNextMonthButton', 'renderPrevMonthButton', 'children', 'disabledDates', 'currentDate', 'disabledDateErrorMessage', 'invalidDateErrorMessage', 'locale', 'timezone'];

package/lib/DateInput2/index.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DateInput2 = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
+var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
+var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
+var _Popover = require("@instructure/ui-popover/lib/Popover");
+var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
+var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
+var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
+var _emotion = require("@instructure/emotion");
+var _props = require("./props");
+var _IconCalendarMonthLin;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/** @jsx jsx */
+/**
+---
+category: components
+---
+**/
+const DateInput2 = ({
+  renderLabel,
+  isRequired = false,
+  interaction = 'enabled',
+  value = '',
+  size = 'medium',
+  isInline = false,
+  messages = [],
+  width,
+  onChange,
+  onBlur,
+  withYearPicker,
+  invalidDateErrorMessage,
+  locale,
+  timezone,
+  placeholder
+}) => {
+  const _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedDate = _useState2[0],
+    setSelectedDate = _useState2[1];
+  const _useState3 = (0, _react.useState)(messages),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    inputMessages = _useState4[0],
+    setInputMessages = _useState4[1];
+  const _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    showPopover = _useState6[0],
+    setShowPopover = _useState6[1];
+  const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
+  (0, _react.useEffect)(() => {
+    validateInput(true);
+  }, [value]);
+  const handleInputChange = (e, value) => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+  };
+  const handleDateSelected = (dateString, momentDate, e) => {
+    setSelectedDate(dateString);
+    handleInputChange(e, `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`);
+    setShowPopover(false);
+  };
+  const validateInput = (onlyRemoveError = false) => {
+    if (_momentTimezone.default.tz(value ? value : '', [_DateTime.DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], getLocale(), true, getTimezone()).isValid() || value === '') {
+      setSelectedDate(value || '');
+      setInputMessages(messages);
+      return;
+    }
+    if (typeof invalidDateErrorMessage !== 'function' && !onlyRemoveError) {
+      setInputMessages([{
+        type: 'error',
+        text: invalidDateErrorMessage
+      }]);
+    }
+  };
+  const getLocale = () => {
+    if (locale) {
+      return locale;
+    } else if (localeContext.locale) {
+      return localeContext.locale;
+    }
+    return _Locale.Locale.browserLocale();
+  };
+  const getTimezone = () => {
+    if (timezone) {
+      return timezone;
+    } else if (localeContext.timezone) {
+      return localeContext.timezone;
+    }
+    return _DateTime.DateTime.browserTimeZone();
+  };
+  const handleBlur = e => {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    validateInput(false);
+  };
+  return (0, _emotion.jsx)(_TextInput.TextInput, {
+    renderLabel: renderLabel,
+    onChange: handleInputChange,
+    onBlur: handleBlur,
+    isRequired: isRequired,
+    value: value,
+    placeholder: placeholder,
+    width: width,
+    size: size,
+    display: isInline ? 'inline-block' : 'block',
+    messages: inputMessages,
+    interaction: interaction,
+    renderAfterInput: (0, _emotion.jsx)(_Popover.Popover, {
+      renderTrigger: (0, _emotion.jsx)(_IconButton.IconButton, {
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: "Calendar",
+        shape: "circle",
+        interaction: interaction
+      }, _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
+      isShowingContent: showPopover,
+      onShowContent: () => setShowPopover(true),
+      onHideContent: () => setShowPopover(false),
+      on: "click",
+      shouldContainFocus: true,
+      shouldReturnFocus: true,
+      shouldCloseOnDocumentClick: true
+    }, (0, _emotion.jsx)(_Calendar.Calendar, {
+      withYearPicker: withYearPicker,
+      onDateSelected: handleDateSelected,
+      selectedDate: selectedDate,
+      visibleMonth: selectedDate
+    }))
+  });
+};
+exports.DateInput2 = DateInput2;
+DateInput2.propTypes = _props.propTypes;
+var _default = exports.default = DateInput2;

package/lib/DateInput2/props.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const propTypes = exports.propTypes = {
+  renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  value: (0, _controllable.controllable)(_propTypes.default.string),
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
+  isRequired: _propTypes.default.bool,
+  isInline: _propTypes.default.bool,
+  width: _propTypes.default.string,
+  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
+  onRequestShowCalendar: _propTypes.default.func,
+  onRequestHideCalendar: _propTypes.default.func,
+  invalidDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  locale: _propTypes.default.string,
+  timezone: _propTypes.default.string,
+  withYearPicker: _propTypes.default.object
+};

package/lib/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "DateInput", {
     return _DateInput.DateInput;
   }
 });
-var _DateInput = require("./DateInput");
+Object.defineProperty(exports, "DateInput2", {
+  enumerable: true,
+  get: function () {
+    return _DateInput2.DateInput2;
+  }
+});
+var _DateInput = require("./DateInput");
+var _DateInput2 = require("./DateInput2");

package/package.json

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

package/src/DateInput/README.md

@@ -2,6 +2,8 @@
 describes: DateInput
 ---
 
+> **Important:** You can now use are updated version [`DateInput2`](/#DateInput2) which is easier to configure for devs, has a better UX for end users, better accessibility features and a year picker. In our next major update (v10) this component will be deprecated and renamed.
+
 The `DateInput` component provides a visual interface for inputting date data.
 
 ### Default config

package/src/DateInput/index.tsx

@@ -59,8 +59,6 @@ import type { FormMessage } from '@instructure/ui-form-field'
 ---
 category: components
 ---
-The `DateInput` component provides a visual interface for inputting date data.
-See <https://instructure.design/#DateInput/>
 **/
 @withStyle(generateStyle, null)
 @testable()

package/src/DateInput/props.ts

@@ -250,6 +250,24 @@ type DateInputOwnProps = {
    * property or a context property.
    **/
   timezone?: string
+
+  /**
+   * If set, years can be picked from a dropdown.
+   * It accepts an object.
+   * screenReaderLabel: string // e.g.: i18n("pick a year")
+   *
+   * onRequestYearChange?:(e: React.MouseEvent,requestedYear: number): void // if set, on year change, only this will be called and no internal change will take place
+   *
+   * startYear: number // e.g.: 2001, sets the start year of the selectable list
+   *
+   * endYear: number // e.g.: 2030, sets the end year of the selectable list
+   */
+  withYearPicker?: {
+    screenReaderLabel: string
+    onRequestYearChange?: (e: any, requestedYear: number) => void
+    startYear: number
+    endYear: number
+  }
 }
 
 type PropKeys = keyof DateInputOwnProps
@@ -308,7 +326,8 @@ const propTypes: PropValidators<PropKeys> = {
     PropTypes.string
   ]),
   locale: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  withYearPicker: PropTypes.object
 }
 
 const allowedProps: AllowedPropKeys = [