@instructure/ui-date-time-input 8.33.1 → 8.33.2-snapshot-5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
+
+**Note:** Version bump only for package @instructure/ui-date-time-input
+
+
+
+
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input

package/es/DateTimeInput/DateTimeInputLocator.js

@@ -21,17 +21,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
 import { DateTimeInput } from './index';
+
 /* eslint-disable no-restricted-imports */
 // @ts-expect-error bypass no type definition found error
-
-import { DateInputLocator } from '@instructure/ui-date-input/es/DateInput/DateInputLocator'; // @ts-expect-error bypass no type definition found error
-
+import { DateInputLocator } from '@instructure/ui-date-input/es/DateInput/DateInputLocator';
+// @ts-expect-error bypass no type definition found error
 import { TimeSelectLocator } from '@instructure/ui-time-select/es/TimeSelect/TimeSelectLocator';
 /* eslint-enable no-restricted-imports */
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const DateTimeInputLocator = locator(DateTimeInput.selector, {
   findDateInput: function () {
     return DateInputLocator.find(...arguments);

package/es/DateTimeInput/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,6 +22,7 @@ var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { Component } from 'react';
 import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n';
 import { FormFieldGroup } from '@instructure/ui-form-field';
@@ -34,26 +34,26 @@ import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
 import { propTypes, allowedProps } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeInput extends Component {
   // extra verbose localized date and time
+
   // This is used by Tooltip for positioning
+
   constructor(props) {
-    super(props); // State needs to be calculated because render could be called before
+    super(props);
+    // State needs to be calculated because render could be called before
     // componentDidMount()
-
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.handleDateTextChange = (_event, date) => {
       const dateParsed = this.tryParseDate(date.value);
       this.setState({
@@ -63,19 +63,17 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         renderedDate: dateParsed ? dateParsed.clone() : DateTime.now(this.locale(), this.timezone())
       });
     };
-
     this.handleDayClick = (event, _ref) => {
       let date = _ref.date;
       const dateParsed = DateTime.parse(date, this.locale(), this.timezone());
       this.updateStateBasedOnDateInput(dateParsed, event);
     };
-
     this.handleHideCalendar = event => {
       // prevent event pooling https://reactjs.org/docs/legacy-event-pooling.html
       // Remove if React 16 is no longer supported
-      event.persist(); // timeout is needed here because handleDayClick could be called in the same
+      event.persist();
+      // timeout is needed here because handleDayClick could be called in the same
       // frame, and it updates calendarSelectedDate which is read in here.
-
       window.setTimeout(() => {
         // update state based on the DateInput's text value
         if (this.state.dateInputTextChanged || event.key === 'Enter') {
@@ -88,51 +86,41 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
             calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
           });
         }
-
         this.setState({
           isShowingCalendar: false,
           dateInputTextChanged: false
         });
       }, 0);
     };
-
     this.handleTimeChange = (event, option) => {
       let newValue;
-
       if (this.state.iso) {
         newValue = option.value;
       } else {
         // if no date is set just return the input text, it will error
         newValue = option.inputText;
       }
-
       const newState = this.recalculateState(newValue, true, false);
       this.changeStateIfNeeded(newState, event);
       this.setState({
         timeSelectValue: option.value
       });
     };
-
     this.changeStateIfNeeded = (newState, e) => {
       this.setState({
         message: newState.message
       });
-
       if (!newState.iso && !this.state.iso) {
         return;
       }
-
       if (!this.state.iso || !newState.iso || !this.state.iso.isSame(newState.iso)) {
         this.setState(newState);
-
         if (this.props.onChange) {
           var _newState$iso;
-
           this.props.onChange(e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
         }
       }
     };
-
     this.handleBlur = e => {
       // when TABbing from the DateInput to TimeInput or visa-versa, the blur
       // happens on the target before the relatedTarget gets focus.
@@ -140,21 +128,17 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       if (typeof this.props.onBlur === 'function') {
         window.setTimeout(() => {
           var _this$props$onBlur, _this$props;
-
           (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, e);
         }, 0);
       }
     };
-
     this.handleShowCalendar = _event => {
       this.setState({
         isShowingCalendar: true
       });
     };
-
     this.handleSelectNextDay = _event => {
       let toAlter;
-
       if (this.state.calendarSelectedDate) {
         toAlter = this.state.calendarSelectedDate.clone();
       } else if (this.state.iso) {
@@ -162,7 +146,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       } else {
         toAlter = DateTime.now(this.locale(), this.timezone());
       }
-
       toAlter.add({
         days: 1
       });
@@ -172,10 +155,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         dateInputText: toAlter.format(this.dateFormat)
       });
     };
-
     this.handleSelectPrevDay = _event => {
       let toAlter;
-
       if (this.state.calendarSelectedDate) {
         toAlter = this.state.calendarSelectedDate.clone();
       } else if (this.state.iso) {
@@ -183,7 +164,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       } else {
         toAlter = DateTime.now(this.locale(), this.timezone());
       }
-
       toAlter.subtract({
         days: 1
       });
@@ -193,7 +173,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         dateInputText: toAlter.format(this.dateFormat)
       });
     };
-
     this.handleRenderNextMonth = _event => {
       this.setState({
         renderedDate: this.state.renderedDate.clone().add({
@@ -201,7 +180,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         })
       });
     };
-
     this.handleRenderPrevMonth = _event => {
       this.setState({
         renderedDate: this.state.renderedDate.clone().subtract({
@@ -209,57 +187,46 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         })
       });
     };
-
     this.state = this.recalculateState(props.value || props.defaultValue);
   }
-
   componentDidMount() {
     // we'll need to recalculate the state because the context value is
     // set at this point (and it might change locale & timezone)
     const initState = this.recalculateState(this.props.value || this.props.defaultValue);
     this.setState(initState);
   }
-
   componentDidUpdate(prevProps) {
     const valueChanged = prevProps.value !== this.props.value || prevProps.defaultValue !== this.props.defaultValue;
     const isUpdated = valueChanged || prevProps.locale !== this.props.locale || prevProps.timezone !== this.props.timezone || prevProps.dateFormat !== this.props.dateFormat || prevProps.messageFormat !== this.props.messageFormat || prevProps.invalidDateTimeMessage !== this.props.invalidDateTimeMessage;
-
     if (isUpdated) {
       this.setState(_prevState => {
-        return { ...this.recalculateState(this.props.value || this.props.defaultValue)
+        return {
+          ...this.recalculateState(this.props.value || this.props.defaultValue)
         };
       });
     }
   }
-
   recalculateState(dateStr) {
     let doNotChangeDate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
     let doNotChangeTime = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
     let errorMsg;
-
     if (dateStr) {
       const parsed = DateTime.parse(dateStr, this.locale(), this.timezone());
-
       if (parsed.isValid()) {
         if (doNotChangeTime && this.state.timeSelectValue) {
           // There is a selected time, adjust the parsed date to its value
           const timeParsed = DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
           parsed.hour(timeParsed.hour()).minute(timeParsed.minute());
         }
-
         if (doNotChangeDate && this.state.iso) {
           parsed.date(this.state.iso.date()).month(this.state.iso.month()).year(this.state.iso.year());
         }
-
         const newTimeSelectValue = parsed.toISOString();
-
         if (this.isDisabledDate(parsed)) {
           let text = typeof this.props.disabledDateTimeMessage === 'function' ? this.props.disabledDateTimeMessage(parsed.toISOString(true)) : this.props.disabledDateTimeMessage;
-
           if (!text) {
             text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(parsed.toISOString(true)) : this.props.invalidDateTimeMessage;
           }
-
           errorMsg = text ? {
             text,
             type: 'error'
@@ -274,7 +241,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
             renderedDate: parsed.clone()
           };
         }
-
         return {
           iso: parsed.clone(),
           calendarSelectedDate: parsed.clone(),
@@ -288,7 +254,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
           renderedDate: parsed.clone()
         };
       }
-
       if (dateStr.length > 0 || this.props.isRequired) {
         const text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(dateStr) : this.props.invalidDateTimeMessage;
         errorMsg = text ? {
@@ -297,7 +262,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         } : void 0;
       }
     }
-
     return {
       iso: void 0,
       calendarSelectedDate: void 0,
@@ -307,61 +271,52 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       dateInputTextChanged: false
     };
   }
-
   locale() {
     if (this.props.locale) {
       return this.props.locale;
     } else if (this.context && this.context.locale) {
       return this.context.locale;
     }
-
     return Locale.browserLocale();
   }
-
   timezone() {
     if (this.props.timezone) {
       return this.props.timezone;
     } else if (this.context && this.context.timezone) {
       return this.context.timezone;
     }
-
     return DateTime.browserTimeZone();
   }
-
   get dateFormat() {
     return this.props.dateFormat;
   }
-
   isDisabledDate(date) {
     const disabledDates = this.props.disabledDates;
-
     if (!disabledDates) {
       return false;
     }
-
     if (Array.isArray(disabledDates)) {
       for (const aDisabledDate of disabledDates) {
         if (date.isSame(aDisabledDate, 'day')) {
           return true;
         }
       }
-
       return false;
     }
-
     return disabledDates(date.toISOString());
-  } // Called when the user enters text into dateInput
+  }
 
+  // Called when the user enters text into dateInput
 
   tryParseDate(val) {
     const parsed = DateTime.parse(val, this.locale(), this.timezone());
     return parsed.isValid() ? parsed : null;
-  } // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
+  }
 
+  // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
 
   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 = DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
@@ -376,30 +331,25 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     } else {
       newState = this.recalculateState(dateParsed === null || dateParsed === void 0 ? void 0 : dateParsed.toISOString(), false, true);
     }
-
     this.changeStateIfNeeded(newState, event);
   }
-
   renderDays() {
     if (!this.state.isShowingCalendar) {
       // this is an expensive function, only execute if the calendar is open
       return;
     }
-
-    const renderedDate = this.state.renderedDate; // Sets it to the first local day of the week counting back from the start of the month.
+    const renderedDate = this.state.renderedDate;
+    // 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 = DateTime.getFirstDayOfWeek(renderedDate.startOf('month'));
     const arr = [];
-
     for (let i = 0; i < Calendar.DAY_COUNT; i++) {
       arr.push(currDate.clone());
       currDate.add({
         days: 1
       });
     }
-
     return arr.map(date => {
       const dateStr = date.toISOString();
       return /*#__PURE__*/React.createElement(DateInput.Day, {
@@ -414,15 +364,14 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
       }, date.format('DD'));
     });
-  } // The default weekdays rendered in the calendar
-
+  }
 
+  // The default weekdays rendered in the calendar
   get defaultWeekdays() {
     if (!this.state.isShowingCalendar) {
       // this is an expensive function, only execute if the calendar is open
       return [];
     }
-
     const shortDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
     const longDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
     return [/*#__PURE__*/React.createElement(AccessibleContent, {
@@ -448,12 +397,10 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       alt: longDayNames[6]
     }, shortDayNames[6])];
   }
-
   renderNextPrevMonthButton(type) {
     if (!this.state.isShowingCalendar) {
       return;
     }
-
     return /*#__PURE__*/React.createElement(IconButton, {
       size: "small",
       withBackground: false,
@@ -466,26 +413,25 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       screenReaderLabel: type === 'prev' ? this.props.prevMonthLabel : this.props.nextMonthLabel
     });
   }
-
   render() {
     const _this$props2 = this.props,
-          description = _this$props2.description,
-          datePlaceholder = _this$props2.datePlaceholder,
-          dateRenderLabel = _this$props2.dateRenderLabel,
-          dateInputRef = _this$props2.dateInputRef,
-          timeRenderLabel = _this$props2.timeRenderLabel,
-          timeFormat = _this$props2.timeFormat,
-          timeStep = _this$props2.timeStep,
-          timeInputRef = _this$props2.timeInputRef,
-          locale = _this$props2.locale,
-          timezone = _this$props2.timezone,
-          messages = _this$props2.messages,
-          layout = _this$props2.layout,
-          rowSpacing = _this$props2.rowSpacing,
-          colSpacing = _this$props2.colSpacing,
-          isRequired = _this$props2.isRequired,
-          interaction = _this$props2.interaction,
-          renderWeekdayLabels = _this$props2.renderWeekdayLabels;
+      description = _this$props2.description,
+      datePlaceholder = _this$props2.datePlaceholder,
+      dateRenderLabel = _this$props2.dateRenderLabel,
+      dateInputRef = _this$props2.dateInputRef,
+      timeRenderLabel = _this$props2.timeRenderLabel,
+      timeFormat = _this$props2.timeFormat,
+      timeStep = _this$props2.timeStep,
+      timeInputRef = _this$props2.timeInputRef,
+      locale = _this$props2.locale,
+      timezone = _this$props2.timezone,
+      messages = _this$props2.messages,
+      layout = _this$props2.layout,
+      rowSpacing = _this$props2.rowSpacing,
+      colSpacing = _this$props2.colSpacing,
+      isRequired = _this$props2.isRequired,
+      interaction = _this$props2.interaction,
+      renderWeekdayLabels = _this$props2.renderWeekdayLabels;
     return /*#__PURE__*/React.createElement(FormFieldGroup, {
       description: description,
       layout: layout,
@@ -528,7 +474,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       interaction: interaction
     }));
   }
-
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   layout: 'inline',
   colSpacing: 'medium',
@@ -537,7 +482,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,
   dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
-
 }, _class2.contextType = ApplyLocaleContext, _class2)) || _class);
 export default DateTimeInput;
 export { DateTimeInput };

package/es/DateTimeInput/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { DateTimeInputLocator } from './DateTimeInputLocator';
 export { DateTimeInputLocator };
 export default DateTimeInputLocator;

package/es/DateTimeInput/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { FormPropTypes } from '@instructure/ui-form-field';
 import { I18nPropTypes } from '@instructure/ui-i18n';
 import PropTypes from 'prop-types';

package/es/index.js

@@ -21,4 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { DateTimeInput } from './DateTimeInput';

package/lib/DateTimeInput/DateTimeInputLocator.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateTimeInputLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 var _DateInputLocator = require("@instructure/ui-date-input/lib/DateInput/DateInputLocator");
-
 var _TimeSelectLocator = require("@instructure/ui-time-select/lib/TimeSelect/TimeSelectLocator");
-
 /*
  * The MIT License (MIT)
  *
@@ -39,9 +34,11 @@ var _TimeSelectLocator = require("@instructure/ui-time-select/lib/TimeSelect/Tim
 
 /* eslint-disable no-restricted-imports */
 // @ts-expect-error bypass no type definition found error
+
 // @ts-expect-error bypass no type definition found error
 
 /* eslint-enable no-restricted-imports */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const DateTimeInputLocator = (0, _locator.locator)(_index.DateTimeInput.selector, {
   findDateInput: function () {