@instructure/ui-date-time-input 8.33.2-snapshot-0 → 8.33.2

package/lib/DateTimeInput/index.js

@@ -1,42 +1,25 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DateTimeInput = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 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 _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
-
 /**
 ---
 category: components
@@ -45,17 +28,17 @@ category: components
 **/
 let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class DateTimeInput extends _react.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({
@@ -65,21 +48,17 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         renderedDate: dateParsed ? dateParsed.clone() : _DateTime.DateTime.now(this.locale(), this.timezone())
       });
     };
-
     this.handleDayClick = (event, _ref) => {
       let date = _ref.date;
-
       const dateParsed = _DateTime.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') {
@@ -92,51 +71,41 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
             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.
@@ -144,21 +113,17 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       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) {
@@ -166,7 +131,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       } else {
         toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
       }
-
       toAlter.add({
         days: 1
       });
@@ -176,10 +140,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         dateInputText: toAlter.format(this.dateFormat)
       });
     };
-
     this.handleSelectPrevDay = _event => {
       let toAlter;
-
       if (this.state.calendarSelectedDate) {
         toAlter = this.state.calendarSelectedDate.clone();
       } else if (this.state.iso) {
@@ -187,7 +149,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       } else {
         toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
       }
-
       toAlter.subtract({
         days: 1
       });
@@ -197,7 +158,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         dateInputText: toAlter.format(this.dateFormat)
       });
     };
-
     this.handleRenderNextMonth = _event => {
       this.setState({
         renderedDate: this.state.renderedDate.clone().add({
@@ -205,7 +165,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         })
       });
     };
-
     this.handleRenderPrevMonth = _event => {
       this.setState({
         renderedDate: this.state.renderedDate.clone().subtract({
@@ -213,58 +172,46 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         })
       });
     };
-
     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.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.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'
@@ -279,7 +226,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
             renderedDate: parsed.clone()
           };
         }
-
         return {
           iso: parsed.clone(),
           calendarSelectedDate: parsed.clone(),
@@ -293,7 +239,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
           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 ? {
@@ -302,7 +247,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         } : void 0;
       }
     }
-
     return {
       iso: void 0,
       calendarSelectedDate: void 0,
@@ -312,66 +256,55 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       dateInputTextChanged: false
     };
   }
-
   locale() {
     if (this.props.locale) {
       return this.props.locale;
     } else if (this.context && this.context.locale) {
       return this.context.locale;
     }
-
     return _Locale.Locale.browserLocale();
   }
-
   timezone() {
     if (this.props.timezone) {
       return this.props.timezone;
     } else if (this.context && this.context.timezone) {
       return this.context.timezone;
     }
-
     return _DateTime.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.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.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
-
       const dateParsedAdjusted = dateParsed.set({
         hour: timeParsed.hour(),
         minute: timeParsed.minute()
@@ -383,31 +316,25 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
     } 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.DateTime.getFirstDayOfWeek(renderedDate.startOf('month'));
-
     const arr = [];
-
     for (let i = 0; i < _Calendar.Calendar.DAY_COUNT; i++) {
       arr.push(currDate.clone());
       currDate.add({
         days: 1
       });
     }
-
     return arr.map(date => {
       const dateStr = date.toISOString();
       return /*#__PURE__*/_react.default.createElement(_DateInput.DateInput.Day, {
@@ -422,19 +349,16 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         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.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]
@@ -458,12 +382,10 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       alt: longDayNames[6]
     }, shortDayNames[6])];
   }
-
   renderNextPrevMonthButton(type) {
     if (!this.state.isShowingCalendar) {
       return;
     }
-
     return /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
       size: "small",
       withBackground: false,
@@ -476,26 +398,25 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       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.default.createElement(_FormFieldGroup.FormFieldGroup, {
       description: description,
       layout: layout,
@@ -538,7 +459,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       interaction: interaction
     }));
   }
-
 }, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   layout: 'inline',
   colSpacing: 'medium',
@@ -547,7 +467,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
   messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
   isRequired: false,
   dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
-
 }, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2)) || _class);
 exports.DateTimeInput = DateTimeInput;
 var _default = DateTimeInput;

package/lib/DateTimeInput/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "DateTimeInputLocator", {
   }
 });
 exports.default = void 0;
-
 var _DateTimeInputLocator = require("./DateTimeInputLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/DateTimeInput/props.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 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 _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -38,6 +32,7 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   description: _propTypes.default.node.isRequired,
   dateRenderLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "DateTimeInput", {
     return _DateTimeInput.DateTimeInput;
   }
 });
-
 var _DateTimeInput = require("./DateTimeInput");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.33.2-snapshot-0",
+  "version": "8.33.2",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.2-snapshot-0",
-    "@instructure/ui-test-locator": "8.33.2-snapshot-0",
-    "@instructure/ui-test-utils": "8.33.2-snapshot-0"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.33.2-snapshot-0",
-    "@instructure/emotion": "8.33.2-snapshot-0",
-    "@instructure/ui-a11y-content": "8.33.2-snapshot-0",
-    "@instructure/ui-buttons": "8.33.2-snapshot-0",
-    "@instructure/ui-calendar": "8.33.2-snapshot-0",
-    "@instructure/ui-date-input": "8.33.2-snapshot-0",
-    "@instructure/ui-form-field": "8.33.2-snapshot-0",
-    "@instructure/ui-i18n": "8.33.2-snapshot-0",
-    "@instructure/ui-icons": "8.33.2-snapshot-0",
-    "@instructure/ui-prop-types": "8.33.2-snapshot-0",
-    "@instructure/ui-react-utils": "8.33.2-snapshot-0",
-    "@instructure/ui-testable": "8.33.2-snapshot-0",
-    "@instructure/ui-time-select": "8.33.2-snapshot-0",
-    "@instructure/ui-utils": "8.33.2-snapshot-0",
+    "@instructure/debounce": "8.33.2",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/ui-a11y-content": "8.33.2",
+    "@instructure/ui-buttons": "8.33.2",
+    "@instructure/ui-calendar": "8.33.2",
+    "@instructure/ui-date-input": "8.33.2",
+    "@instructure/ui-form-field": "8.33.2",
+    "@instructure/ui-i18n": "8.33.2",
+    "@instructure/ui-icons": "8.33.2",
+    "@instructure/ui-prop-types": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-time-select": "8.33.2",
+    "@instructure/ui-utils": "8.33.2",
     "prop-types": "^15"
   },
   "peerDependencies": {