@instructure/ui-date-time-input 8.56.2-pr-snapshot-1721749364069 → 8.56.2-snapshot-2

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.
 
-## [8.56.2-pr-snapshot-1721749364069](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-pr-snapshot-1721749364069) (2024-07-23)
+## [8.56.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-snapshot-2) (2024-08-06)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 

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

@@ -6,7 +6,8 @@ var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
-var _uiI18n = require("@instructure/ui-i18n");
+var _ApplyLocale = require("@instructure/ui-i18n/lib/ApplyLocale");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
 var _DateTimeInput, _DateTimeInput2, _DateTimeInput3;
 /*
  * The MIT License (MIT)
@@ -43,7 +44,7 @@ describe('<DateTimeInput />', () => {
   it('should use the default value', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
       description: "date_time",
       prevMonthLabel: "Previous month",
@@ -64,7 +65,7 @@ describe('<DateTimeInput />', () => {
     const onChange = jest.fn();
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T23:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T23:30Z', locale, timezone);
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
       description: "date_time",
       prevMonthLabel: "Previous month",
@@ -85,8 +86,8 @@ describe('<DateTimeInput />', () => {
   it('should prefer value to defaultValue', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const value = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
-    const defaultValue = _uiI18n.DateTime.parse('2016-04-01T17:00Z', locale, timezone);
+    const value = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const defaultValue = _DateTime.DateTime.parse('2016-04-01T17:00Z', locale, timezone);
     const onChange = jest.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
       description: "date_time",
@@ -109,7 +110,7 @@ describe('<DateTimeInput />', () => {
   it('should set time to local midnight when only date is set', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateObj = _uiI18n.DateTime.parse('2017-04-01T18:30Z', locale, timezone);
+    const dateObj = _DateTime.DateTime.parse('2017-04-01T18:30Z', locale, timezone);
     const date = dateObj.toISOString().split('T')[0];
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
       description: "date_time",
@@ -173,7 +174,7 @@ describe('<DateTimeInput />', () => {
     const onChange = jest.fn();
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const defaultValue = _uiI18n.DateTime.parse('2017-05-01T17:00', locale, timezone);
+    const defaultValue = _DateTime.DateTime.parse('2017-05-01T17:00', locale, timezone);
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
       description: "date_time",
       dateRenderLabel: "date-input",
@@ -231,7 +232,7 @@ describe('<DateTimeInput />', () => {
   it('should show the formatted date-time message', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const defaultValue = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const defaultValue = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
@@ -249,7 +250,7 @@ describe('<DateTimeInput />', () => {
   it('should show the formatted date-time message in the proper locale', () => {
     const timezone = 'US/Eastern';
     const locale = 'fr';
-    const defaultValue = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const defaultValue = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
         description: "date_time",
         dateRenderLabel: "date-input",
@@ -292,7 +293,7 @@ describe('<DateTimeInput />', () => {
     const onChange = jest.fn();
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const props = {
       description: 'date_time',
       prevMonthLabel: 'Previous month',
@@ -318,7 +319,7 @@ describe('<DateTimeInput />', () => {
     const onChange = jest.fn();
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -344,7 +345,7 @@ describe('<DateTimeInput />', () => {
     const onChange = jest.fn();
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -403,7 +404,7 @@ describe('<DateTimeInput />', () => {
   it('should update error message when value is invalid', async () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -431,7 +432,7 @@ describe('<DateTimeInput />', () => {
   it('should show supplied message', async () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -463,7 +464,7 @@ describe('<DateTimeInput />', () => {
   it('should not show built in message when `showMessages` is false', async () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -509,11 +510,11 @@ describe('<DateTimeInput />', () => {
   });
   it('should read locale and timezone from context', () => {
     const onChange = jest.fn();
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
     const _render13 = (0, _react2.render)(
       /*#__PURE__*/
       // Africa/Nairobi is GMT +3
-      _react.default.createElement(_uiI18n.ApplyLocale, {
+      _react.default.createElement(_ApplyLocale.ApplyLocale, {
         locale: "fr",
         timezone: "Africa/Nairobi"
       }, /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
@@ -531,7 +532,7 @@ describe('<DateTimeInput />', () => {
   });
   it('should format date according to dateFormat', async () => {
     const onChange = jest.fn();
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -558,7 +559,7 @@ describe('<DateTimeInput />', () => {
   });
   it('should format bottom message according to messageFormat', async () => {
     const onChange = jest.fn();
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -586,7 +587,7 @@ describe('<DateTimeInput />', () => {
   it('should update Date and Time inputs when value prop changes', async () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const dateTime = _uiI18n.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
     const props = {
       description: 'date_time',
       dateRenderLabel: 'date-input',
@@ -603,7 +604,7 @@ describe('<DateTimeInput />', () => {
       rerender = _render16.rerender;
     expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
     const newDateStr = '2022-03-29T19:00Z';
-    const newDateTime = _uiI18n.DateTime.parse(newDateStr, locale, timezone);
+    const newDateTime = _DateTime.DateTime.parse(newDateStr, locale, timezone);
     rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
       value: newDateStr
     })));

package/lib/DateTimeInput/index.js

@@ -6,15 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DateTimeInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _uiI18n = require("@instructure/ui-i18n");
-var _uiFormField = require("@instructure/ui-form-field");
-var _uiDateInput = require("@instructure/ui-date-input");
-var _uiTimeSelect = require("@instructure/ui-time-select");
-var _uiCalendar = require("@instructure/ui-calendar");
-var _uiTestable = require("@instructure/ui-testable");
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-var _uiButtons = require("@instructure/ui-buttons");
-var _uiIcons = require("@instructure/ui-icons");
+var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
+var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
+var _FormFieldGroup = require("@instructure/ui-form-field/lib/FormFieldGroup");
+var _DateInput = require("@instructure/ui-date-input/lib/DateInput");
+var _TimeSelect = require("@instructure/ui-time-select/lib/TimeSelect");
+var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+var _AccessibleContent = require("@instructure/ui-a11y-content/lib/AccessibleContent");
+var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
+var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
+var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
 var _props = require("./props");
 var _console = require("@instructure/console");
 var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
@@ -46,7 +49,7 @@ var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 category: components
 ---
 **/
-let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(), _dec(_class = (_class2 = class DateTimeInput extends _react.Component {
+let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class DateTimeInput extends _react.Component {
   constructor(props) {
     super(props);
     // State needs to be calculated because render could be called before
@@ -64,14 +67,14 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
         dateInputText: date.value,
         dateInputTextChanged: true,
         calendarSelectedDate: dateParsed ? dateParsed : void 0,
-        renderedDate: dateParsed ? dateParsed.clone() : _uiI18n.DateTime.now(this.locale(), this.timezone())
+        renderedDate: dateParsed ? dateParsed.clone() : _DateTime.DateTime.now(this.locale(), this.timezone())
       });
     };
     // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
     this.handleDayClick = (event, {
       date
     }) => {
-      const dateParsed = _uiI18n.DateTime.parse(date, this.locale(), this.timezone());
+      const dateParsed = _DateTime.DateTime.parse(date, this.locale(), this.timezone());
       this.updateStateBasedOnDateInput(dateParsed, event);
     };
     this.handleHideCalendar = event => {
@@ -151,7 +154,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
       } else if (this.state.iso) {
         toAlter = this.state.iso.clone();
       } else {
-        toAlter = _uiI18n.DateTime.now(this.locale(), this.timezone());
+        toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
       }
       toAlter.add({
         days: 1
@@ -168,7 +171,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
       } else if (this.state.iso) {
         toAlter = this.state.iso.clone();
       } else {
-        toAlter = _uiI18n.DateTime.now(this.locale(), this.timezone());
+        toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
       }
       toAlter.subtract({
         days: 1
@@ -216,12 +219,12 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
   recalculateState(dateStr, doNotChangeDate = false, doNotChangeTime = false) {
     let errorMsg;
     if (dateStr) {
-      const parsed = _uiI18n.DateTime.parse(dateStr, this.locale(), this.timezone());
+      const parsed = _DateTime.DateTime.parse(dateStr, this.locale(), this.timezone());
       if (parsed.isValid()) {
         var _this$state;
         if (doNotChangeTime && this.state.timeSelectValue) {
           // There is a selected time, adjust the parsed date to its value
-          const timeParsed = _uiI18n.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
+          const timeParsed = _DateTime.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
           parsed.hour(timeParsed.hour()).minute(timeParsed.minute());
         }
         if (doNotChangeDate && this.state.iso) {
@@ -281,7 +284,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
       iso: void 0,
       calendarSelectedDate: void 0,
       dateInputText: dateStr ? dateStr : '',
-      renderedDate: _uiI18n.DateTime.now(this.locale(), this.timezone()),
+      renderedDate: _DateTime.DateTime.now(this.locale(), this.timezone()),
       dateInputTextChanged: false,
       ...clearTimeSelect
     };
@@ -292,7 +295,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
     } else if (this.context && this.context.locale) {
       return this.context.locale;
     }
-    return _uiI18n.Locale.browserLocale();
+    return _Locale.Locale.browserLocale();
   }
   timezone() {
     if (this.props.timezone) {
@@ -300,7 +303,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
     } else if (this.context && this.context.timezone) {
       return this.context.timezone;
     }
-    return _uiI18n.DateTime.browserTimeZone();
+    return _DateTime.DateTime.browserTimeZone();
   }
   get dateFormat() {
     return this.props.dateFormat;
@@ -321,14 +324,14 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
     return disabledDates(date.toISOString());
   }
   tryParseDate(val) {
-    const parsed = _uiI18n.DateTime.parse(val, this.locale(), this.timezone());
+    const parsed = _DateTime.DateTime.parse(val, this.locale(), this.timezone());
     return parsed.isValid() ? parsed : null;
   }
   updateStateBasedOnDateInput(dateParsed, event) {
     let newState;
     if (dateParsed && this.state.timeSelectValue && (!this.state.dateInputText || this.state.dateInputText == '')) {
       // There is already a selected time, but no date. Adjust the time too
-      const timeParsed = _uiI18n.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
+      const timeParsed = _DateTime.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
       const dateParsedAdjusted = dateParsed.set({
         hour: timeParsed.hour(),
         minute: timeParsed.minute()
@@ -347,9 +350,9 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
     // Sets it to the first local day of the week counting back from the start of the month.
     // Note that first day depends on the locale, e.g. it's Sunday in the US and
     // Monday in most of the EU.
-    const currDate = _uiI18n.DateTime.getFirstDayOfWeek(renderedDate.startOf('month'));
+    const currDate = _DateTime.DateTime.getFirstDayOfWeek(renderedDate.startOf('month'));
     const arr = [];
-    for (let i = 0; i < _uiCalendar.Calendar.DAY_COUNT; i++) {
+    for (let i = 0; i < _Calendar.Calendar.DAY_COUNT; i++) {
       arr.push(currDate.clone());
       currDate.add({
         days: 1
@@ -357,11 +360,11 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
     }
     return arr.map(date => {
       const dateStr = date.toISOString();
-      return /*#__PURE__*/_react.default.createElement(_uiDateInput.DateInput.Day, {
+      return /*#__PURE__*/_react.default.createElement(_DateInput.DateInput.Day, {
         key: dateStr,
         date: dateStr,
         isSelected: this.state.calendarSelectedDate ? date.isSame(this.state.calendarSelectedDate, 'day') : false,
-        isToday: date.isSame(_uiI18n.DateTime.now(this.locale(), this.timezone()), 'day'),
+        isToday: date.isSame(_DateTime.DateTime.now(this.locale(), this.timezone()), 'day'),
         isOutsideMonth: !date.isSame(renderedDate, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
@@ -377,27 +380,27 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
       // this is an expensive function, only execute if the calendar is open
       return [];
     }
-    const shortDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
-    const longDayNames = _uiI18n.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
-    return [/*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+    const shortDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
+    const longDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
+    return [/*#__PURE__*/_react.default.createElement(_AccessibleContent.AccessibleContent, {
       key: 1,
       alt: longDayNames[0]
-    }, shortDayNames[0]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+    }, shortDayNames[0]), /*#__PURE__*/_react.default.createElement(_AccessibleContent.AccessibleContent, {
       key: 2,
       alt: longDayNames[1]
-    }, shortDayNames[1]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+    }, shortDayNames[1]), /*#__PURE__*/_react.default.createElement(_AccessibleContent.AccessibleContent, {
       key: 3,
       alt: longDayNames[2]
-    }, shortDayNames[2]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+    }, shortDayNames[2]), /*#__PURE__*/_react.default.createElement(_AccessibleContent.AccessibleContent, {
       key: 4,
       alt: longDayNames[3]
-    }, shortDayNames[3]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+    }, shortDayNames[3]), /*#__PURE__*/_react.default.createElement(_AccessibleContent.AccessibleContent, {
       key: 5,
       alt: longDayNames[4]
-    }, shortDayNames[4]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+    }, shortDayNames[4]), /*#__PURE__*/_react.default.createElement(_AccessibleContent.AccessibleContent, {
       key: 6,
       alt: longDayNames[5]
-    }, shortDayNames[5]), /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+    }, shortDayNames[5]), /*#__PURE__*/_react.default.createElement(_AccessibleContent.AccessibleContent, {
       key: 7,
       alt: longDayNames[6]
     }, shortDayNames[6])];
@@ -406,13 +409,13 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
     if (!this.state.isShowingCalendar) {
       return;
     }
-    return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+    return /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
       size: "small",
       withBackground: false,
       withBorder: false,
-      renderIcon: type === 'prev' ? _IconArrowOpenStartSo || (_IconArrowOpenStartSo = /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenStartSolid, {
+      renderIcon: type === 'prev' ? _IconArrowOpenStartSo || (_IconArrowOpenStartSo = /*#__PURE__*/_react.default.createElement(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
         color: "primary"
-      })) : _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenEndSolid, {
+      })) : _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = /*#__PURE__*/_react.default.createElement(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
         color: "primary"
       })),
       screenReaderLabel: type === 'prev' ? this.props.prevMonthLabel : this.props.nextMonthLabel
@@ -440,7 +443,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
       interaction = _this$props4.interaction,
       renderWeekdayLabels = _this$props4.renderWeekdayLabels,
       allowNonStepInput = _this$props4.allowNonStepInput;
-    return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+    return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, {
       description: description,
       layout: layout,
       rowSpacing: rowSpacing,
@@ -448,7 +451,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
       vAlign: "top",
       elementRef: this.handleRef,
       messages: [...(showMessages && this.state.message ? [this.state.message] : []), ...(messages || [])]
-    }, /*#__PURE__*/_react.default.createElement(_uiDateInput.DateInput, {
+    }, /*#__PURE__*/_react.default.createElement(_DateInput.DateInput, {
       display: "block",
       value: this.state.dateInputText,
       onChange: this.handleDateTextChange,
@@ -469,7 +472,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
       isRequired: isRequired,
       interaction: interaction,
       renderNavigationLabel: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("div", null, this.state.renderedDate.format('MMMM')), /*#__PURE__*/_react.default.createElement("div", null, this.state.renderedDate.format('y')))
-    }, this.renderDays()), /*#__PURE__*/_react.default.createElement(_uiTimeSelect.TimeSelect, {
+    }, this.renderDays()), /*#__PURE__*/_react.default.createElement(_TimeSelect.TimeSelect, {
       value: this.state.timeSelectValue,
       onChange: this.updateStateBasedOnTimeSelect,
       placeholder: timePlaceholder,
@@ -495,5 +498,5 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _uiTestable.testable)(),
   dateFormat: 'LL',
   // Localized date with full month, e.g. "August 6, 2014"
   allowNonStepInput: false
-}, _class2.contextType = _uiI18n.ApplyLocaleContext, _class2)) || _class);
+}, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2)) || _class);
 var _default = exports.default = DateTimeInput;

package/lib/DateTimeInput/props.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-var _uiFormField = require("@instructure/ui-form-field");
-var _uiI18n = require("@instructure/ui-i18n");
+var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
+var _I18nPropTypes = require("@instructure/ui-i18n/lib/I18nPropTypes.js");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _uiPropTypes = require("@instructure/ui-prop-types");
+var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
 /*
  * The MIT License (MIT)
  *
@@ -58,13 +58,13 @@ const propTypes = exports.propTypes = {
   timezone: _propTypes.default.string,
   invalidDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
   showMessages: _propTypes.default.bool,
-  messages: _propTypes.default.arrayOf(_uiFormField.FormPropTypes.message),
+  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
   messageFormat: _propTypes.default.string,
   layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline']),
   rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
   colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
-  value: (0, _uiPropTypes.controllable)(_uiI18n.I18nPropTypes.iso8601, 'onChange'),
-  defaultValue: _uiI18n.I18nPropTypes.iso8601,
+  value: (0, _controllable.controllable)(_I18nPropTypes.I18nPropTypes.iso8601, 'onChange'),
+  defaultValue: _I18nPropTypes.I18nPropTypes.iso8601,
   renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
   isRequired: _propTypes.default.bool,
   onChange: _propTypes.default.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.56.2-pr-snapshot-1721749364069",
+  "version": "8.56.2-snapshot-2",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-test-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-babel-preset": "8.56.2-snapshot-2",
+    "@instructure/ui-test-utils": "8.56.2-snapshot-2",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/debounce": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/emotion": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-a11y-content": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-buttons": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-calendar": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-date-input": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-form-field": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-i18n": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-icons": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-prop-types": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-react-utils": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-testable": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-time-select": "8.56.2-pr-snapshot-1721749364069",
-    "@instructure/ui-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/console": "8.56.2-snapshot-2",
+    "@instructure/debounce": "8.56.2-snapshot-2",
+    "@instructure/emotion": "8.56.2-snapshot-2",
+    "@instructure/ui-a11y-content": "8.56.2-snapshot-2",
+    "@instructure/ui-buttons": "8.56.2-snapshot-2",
+    "@instructure/ui-calendar": "8.56.2-snapshot-2",
+    "@instructure/ui-date-input": "8.56.2-snapshot-2",
+    "@instructure/ui-form-field": "8.56.2-snapshot-2",
+    "@instructure/ui-i18n": "8.56.2-snapshot-2",
+    "@instructure/ui-icons": "8.56.2-snapshot-2",
+    "@instructure/ui-prop-types": "8.56.2-snapshot-2",
+    "@instructure/ui-react-utils": "8.56.2-snapshot-2",
+    "@instructure/ui-testable": "8.56.2-snapshot-2",
+    "@instructure/ui-time-select": "8.56.2-snapshot-2",
+    "@instructure/ui-utils": "8.56.2-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {