@instructure/ui-date-input 9.2.1-snapshot-14 → 9.2.1-snapshot-16

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.2.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-14) (2024-07-16)
+## [9.2.1-snapshot-16](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-16) (2024-07-16)
 
-**Note:** Version bump only for package @instructure/ui-date-input
+
+### Features
+
+* **ui,ui-date-input:** add new DateInput2 component ([9c893fc](https://github.com/instructure/instructure-ui/commit/9c893fc6ac1ae5ef4648f573b648cad78997ac86))
 
 
 

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,208 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
+/*
+ * 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, IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
+import { Popover } from '@instructure/ui-popover';
+import { TextInput } from '@instructure/ui-text-input';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
+import { jsx } from '@instructure/emotion';
+import { propTypes } from './props';
+function isValidDate(dateString) {
+  return !isNaN(new Date(dateString).getTime());
+}
+function isValidMomentDate(dateString, locale, timezone) {
+  return moment.tz(dateString, [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
+}
+
+/**
+---
+category: components
+---
+**/
+const DateInput2 = ({
+  renderLabel,
+  screenReaderLabels,
+  isRequired = false,
+  interaction = 'enabled',
+  size = 'medium',
+  isInline = false,
+  value,
+  messages,
+  width,
+  onChange,
+  onBlur,
+  withYearPicker,
+  invalidDateErrorMessage,
+  locale,
+  timezone,
+  placeholder,
+  ...rest
+}) => {
+  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]);
+  useEffect(() => {
+    setInputMessages(messages || []);
+  }, [messages]);
+  const handleInputChange = (e, value) => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+  };
+  const handleDateSelected = (dateString, _momentDate, e) => {
+    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
+      month: 'long',
+      year: 'numeric',
+      day: 'numeric',
+      timeZone: getTimezone()
+    });
+    handleInputChange(e, formattedDate);
+    setShowPopover(false);
+  };
+  const validateInput = (onlyRemoveError = false) => {
+    // TODO `isValidDate` and `isValidMomentDate` basically have the same functionality but the latter is a bit more strict (e.g.: `33` is only valid in `isValidMomentDate`)
+    // in the future we should get rid of moment but currently Calendar is using it for validation too so we can only remove it simultaneously
+    // otherwise DateInput could pass invalid dates to Calendar and break it
+    if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
+      setSelectedDate(value || '');
+      setInputMessages(messages || []);
+      return true;
+    }
+    if (!onlyRemoveError) {
+      setInputMessages([{
+        type: 'error',
+        text: invalidDateErrorMessage || ''
+      }]);
+    }
+    return false;
+  };
+  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;
+    }
+    // default to the system's timezone
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  };
+  const handleBlur = e => {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    const isInputValid = validateInput(false);
+    if (isInputValid && value) {
+      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
+        month: 'long',
+        year: 'numeric',
+        day: 'numeric',
+        timeZone: getTimezone()
+      });
+      handleInputChange(e, formattedDate);
+    }
+  };
+  return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
+    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: screenReaderLabels.calendarIcon,
+        shape: "circle",
+        size: size,
+        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,
+      locale: locale,
+      timezone: timezone,
+      role: "listbox",
+      renderNextMonthButton: jsx(IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.nextMonthButton
+      }),
+      renderPrevMonthButton: jsx(IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = jsx(IconArrowOpenStartSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.prevMonthButton
+      })
+    }))
+  }));
+};
+DateInput2.propTypes = propTypes;
+export default DateInput2;
+export { DateInput2 };

package/es/DateInput2/props.js

@@ -0,0 +1,48 @@
+/*
+ * 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,
+  screenReaderLabels: PropTypes.object.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,217 @@
+"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 _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
+var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
+var _Popover = require("@instructure/ui-popover/lib/Popover");
+var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.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, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
+/*
+ * 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 */
+function isValidDate(dateString) {
+  return !isNaN(new Date(dateString).getTime());
+}
+function isValidMomentDate(dateString, locale, timezone) {
+  return _momentTimezone.default.tz(dateString, [_momentTimezone.default.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
+}
+
+/**
+---
+category: components
+---
+**/
+const DateInput2 = ({
+  renderLabel,
+  screenReaderLabels,
+  isRequired = false,
+  interaction = 'enabled',
+  size = 'medium',
+  isInline = false,
+  value,
+  messages,
+  width,
+  onChange,
+  onBlur,
+  withYearPicker,
+  invalidDateErrorMessage,
+  locale,
+  timezone,
+  placeholder,
+  ...rest
+}) => {
+  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]);
+  (0, _react.useEffect)(() => {
+    setInputMessages(messages || []);
+  }, [messages]);
+  const handleInputChange = (e, value) => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+  };
+  const handleDateSelected = (dateString, _momentDate, e) => {
+    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
+      month: 'long',
+      year: 'numeric',
+      day: 'numeric',
+      timeZone: getTimezone()
+    });
+    handleInputChange(e, formattedDate);
+    setShowPopover(false);
+  };
+  const validateInput = (onlyRemoveError = false) => {
+    // TODO `isValidDate` and `isValidMomentDate` basically have the same functionality but the latter is a bit more strict (e.g.: `33` is only valid in `isValidMomentDate`)
+    // in the future we should get rid of moment but currently Calendar is using it for validation too so we can only remove it simultaneously
+    // otherwise DateInput could pass invalid dates to Calendar and break it
+    if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
+      setSelectedDate(value || '');
+      setInputMessages(messages || []);
+      return true;
+    }
+    if (!onlyRemoveError) {
+      setInputMessages([{
+        type: 'error',
+        text: invalidDateErrorMessage || ''
+      }]);
+    }
+    return false;
+  };
+  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;
+    }
+    // default to the system's timezone
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  };
+  const handleBlur = e => {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    const isInputValid = validateInput(false);
+    if (isInputValid && value) {
+      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
+        month: 'long',
+        year: 'numeric',
+        day: 'numeric',
+        timeZone: getTimezone()
+      });
+      handleInputChange(e, formattedDate);
+    }
+  };
+  return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
+    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: screenReaderLabels.calendarIcon,
+        shape: "circle",
+        size: size,
+        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,
+      locale: locale,
+      timezone: timezone,
+      role: "listbox",
+      renderNextMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.nextMonthButton
+      }),
+      renderPrevMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _emotion.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.prevMonthButton
+      })
+    }))
+  }));
+};
+exports.DateInput2 = DateInput2;
+DateInput2.propTypes = _props.propTypes;
+var _default = exports.default = DateInput2;

package/lib/DateInput2/props.js

@@ -0,0 +1,54 @@
+"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,
+  screenReaderLabels: _propTypes.default.object.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.2.1-snapshot-14",
+  "version": "9.2.1-snapshot-16",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.2.1-snapshot-14",
-    "@instructure/ui-babel-preset": "9.2.1-snapshot-14",
-    "@instructure/ui-scripts": "9.2.1-snapshot-14",
-    "@instructure/ui-test-utils": "9.2.1-snapshot-14",
+    "@instructure/ui-axe-check": "9.2.1-snapshot-16",
+    "@instructure/ui-babel-preset": "9.2.1-snapshot-16",
+    "@instructure/ui-buttons": "9.2.1-snapshot-16",
+    "@instructure/ui-scripts": "9.2.1-snapshot-16",
+    "@instructure/ui-test-utils": "9.2.1-snapshot-16",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -34,20 +35,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.2.1-snapshot-14",
-    "@instructure/shared-types": "9.2.1-snapshot-14",
-    "@instructure/ui-calendar": "9.2.1-snapshot-14",
-    "@instructure/ui-form-field": "9.2.1-snapshot-14",
-    "@instructure/ui-i18n": "9.2.1-snapshot-14",
-    "@instructure/ui-icons": "9.2.1-snapshot-14",
-    "@instructure/ui-popover": "9.2.1-snapshot-14",
-    "@instructure/ui-position": "9.2.1-snapshot-14",
-    "@instructure/ui-prop-types": "9.2.1-snapshot-14",
-    "@instructure/ui-react-utils": "9.2.1-snapshot-14",
-    "@instructure/ui-selectable": "9.2.1-snapshot-14",
-    "@instructure/ui-testable": "9.2.1-snapshot-14",
-    "@instructure/ui-text-input": "9.2.1-snapshot-14",
-    "@instructure/ui-utils": "9.2.1-snapshot-14",
+    "@instructure/emotion": "9.2.1-snapshot-16",
+    "@instructure/shared-types": "9.2.1-snapshot-16",
+    "@instructure/ui-calendar": "9.2.1-snapshot-16",
+    "@instructure/ui-form-field": "9.2.1-snapshot-16",
+    "@instructure/ui-i18n": "9.2.1-snapshot-16",
+    "@instructure/ui-icons": "9.2.1-snapshot-16",
+    "@instructure/ui-popover": "9.2.1-snapshot-16",
+    "@instructure/ui-position": "9.2.1-snapshot-16",
+    "@instructure/ui-prop-types": "9.2.1-snapshot-16",
+    "@instructure/ui-react-utils": "9.2.1-snapshot-16",
+    "@instructure/ui-selectable": "9.2.1-snapshot-16",
+    "@instructure/ui-testable": "9.2.1-snapshot-16",
+    "@instructure/ui-text-input": "9.2.1-snapshot-16",
+    "@instructure/ui-utils": "9.2.1-snapshot-16",
+    "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {