@instructure/ui-date-time-input 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/lib/DateTimeInput/v1/index.js

@@ -19,7 +19,6 @@ var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/generated/Icon
 var _props = require("./props");
 var _console = require("@instructure/console");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _DateTimeInput, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 /*
  * The MIT License (MIT)
  *
@@ -43,174 +42,46 @@ var _DateTimeInput, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /**
 ---
 category: components
 ---
-**/
-class DateTimeInput extends _react.Component {
+**/class DateTimeInput extends _react.Component {
+  static displayName = "DateTimeInput";
+  // extra verbose localized date and time
+  static DEFAULT_MESSAGE_FORMAT = 'LLLL';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    layout: 'inline',
+    colSpacing: 'medium',
+    rowSpacing: 'small',
+    timeStep: 30,
+    showMessages: true,
+    messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
+    isRequired: false,
+    dateFormat: 'LL',
+    // Localized date with full month, e.g. "August 6, 2014"
+    allowNonStepInput: false
+  };
+  static contextType = _ApplyLocaleContext.ApplyLocaleContext;
+  ref = null; // This is used by Tooltip for positioning
+
+  handleRef = el => {
+    this.ref = el;
+  };
   constructor(props) {
     super(props);
     // State needs to be calculated because render could be called before
     // componentDidMount()
-    this.ref = null;
-    // This is used by Tooltip for positioning
-    this.handleRef = el => {
-      this.ref = el;
-    };
-    this.reset = () => this.setState(this.recalculateState());
-    // Called when the user enters text into dateInput
-    this.handleDateTextChange = (_event, date) => {
-      const dateParsed = this.tryParseDate(date.value);
-      this.setState({
-        dateInputText: date.value,
-        dateInputTextChanged: true,
-        calendarSelectedDate: dateParsed ? dateParsed : void 0,
-        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 = _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
-      // frame, and it updates calendarSelectedDate which is read in here.
-      setTimeout(() => {
-        if (event.key === 'Enter') {
-          // user pressed enter, use the selected value in the calendar
-          this.updateStateBasedOnDateInput(this.state.calendarSelectedDate, event);
-        } else {
-          // user clicked outside/tabbed away/pressed esc, try to use the value in dateInputText
-          const dateParsed = this.tryParseDate(this.state.dateInputText);
-          this.updateStateBasedOnDateInput(dateParsed, event);
-        }
-        this.setState({
-          isShowingCalendar: false,
-          dateInputTextChanged: false
-        });
-      }, 0);
-    };
-    this.updateStateBasedOnTimeSelect = (event, option) => {
-      // this.state.iso is undefined if date is invalid or not set.
-      // in this case recalculate with the dateInput's text which will result in
-      // an empty valid date (if isRequired is false) or an invalid date.
-      const newValue = this.state.iso ? option.value : this.state.dateInputText;
-      const newState = this.recalculateState(newValue, true, false);
-      this.changeStateIfNeeded(newState, event);
-      this.setState({
-        timeSelectValue: option.value
-      });
-    };
-    this.changeStateIfNeeded = (newState, e) => {
-      const dateStr = newState.dateInputText;
-      if (this.props.isRequired && !newState.iso || dateStr && dateStr.length > 0 && !newState.iso) {
-        const text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(dateStr ? dateStr : '') : this.props.invalidDateTimeMessage;
-        // eslint-disable-next-line no-param-reassign
-        newState.message = {
-          text: text,
-          type: 'error'
-        };
-      }
-      if (this.areDifferentDates(this.state.iso, newState.iso)) {
-        if (typeof this.props.onChange === 'function') {
-          var _newState$iso;
-          const newDate = (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString();
-          // Timeout is needed here because users might change value in the
-          // onChange event lister, which might not execute properly
-          setTimeout(() => {
-            var _this$props$onChange, _this$props;
-            (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, newDate);
-          }, 0);
-        }
-      }
-      this.setState(newState);
-    };
-    this.areDifferentDates = (d1, d2) => {
-      if (!d1 && !d2) {
-        return false;
-      }
-      return !d1 || !d2 || !d1.isSame(d2);
-    };
-    this.handleBlur = e => {
-      // when TABbing from the DateInput to TimeInput or visa-versa, the blur
-      // happens on the target before the relatedTarget gets focus.
-      // The timeout gives it a moment for that to happen
-      if (typeof this.props.onBlur === 'function') {
-        setTimeout(() => {
-          var _this$props$onBlur, _this$props2;
-          (_this$props$onBlur = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, 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) {
-        toAlter = this.state.iso.clone();
-      } else {
-        toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
-      }
-      toAlter.add({
-        days: 1
-      });
-      this.setState({
-        calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone()
-      });
-    };
-    this.handleSelectPrevDay = _event => {
-      let toAlter;
-      if (this.state.calendarSelectedDate) {
-        toAlter = this.state.calendarSelectedDate.clone();
-      } else if (this.state.iso) {
-        toAlter = this.state.iso.clone();
-      } else {
-        toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
-      }
-      toAlter.subtract({
-        days: 1
-      });
-      this.setState({
-        calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone()
-      });
-    };
-    this.handleRenderNextMonth = _event => {
-      this.setState({
-        renderedDate: this.state.renderedDate.clone().add({
-          months: 1
-        })
-      });
-    };
-    this.handleRenderPrevMonth = _event => {
-      this.setState({
-        renderedDate: this.state.renderedDate.clone().subtract({
-          months: 1
-        })
-      });
-    };
     this.state = this.recalculateState(props.value || props.defaultValue);
   }
   componentDidMount() {
-    var _this$props$reset, _this$props3;
     // 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);
-    (_this$props$reset = (_this$props3 = this.props).reset) === null || _this$props$reset === void 0 ? void 0 : _this$props$reset.call(_this$props3, this.reset);
+    this.props.reset?.(this.reset);
   }
   componentDidUpdate(prevProps) {
     const valueChanged = prevProps.value !== this.props.value || prevProps.defaultValue !== this.props.defaultValue;
@@ -228,7 +99,6 @@ class DateTimeInput extends _react.Component {
     if (dateStr) {
       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 = _DateTime.DateTime.parse(this.state.timeSelectValue, this.locale(), this.timezone());
@@ -237,7 +107,7 @@ class DateTimeInput extends _react.Component {
         if (doNotChangeDate && this.state.iso) {
           parsed.date(this.state.iso.date()).month(this.state.iso.month()).year(this.state.iso.year());
         }
-        if (this.props.initialTimeForNewDate && !((_this$state = this.state) !== null && _this$state !== void 0 && _this$state.timeSelectValue)) {
+        if (this.props.initialTimeForNewDate && !this.state?.timeSelectValue) {
           const hour = Number(this.props.initialTimeForNewDate.slice(0, 2));
           const minute = Number(this.props.initialTimeForNewDate.slice(3, 5));
           if (isNaN(hour) || isNaN(minute)) {
@@ -257,7 +127,7 @@ class DateTimeInput extends _react.Component {
           errorMsg = text ? {
             text,
             type: 'error'
-          } : void 0;
+          } : undefined;
           return {
             iso: parsed.clone(),
             calendarSelectedDate: parsed.clone(),
@@ -285,17 +155,18 @@ class DateTimeInput extends _react.Component {
     // if there is no date string clear TimeSelect value
     const clearTimeSelect = dateStr ? {} : {
       timeSelectValue: '',
-      message: void 0
+      message: undefined
     };
     return {
-      iso: void 0,
-      calendarSelectedDate: void 0,
+      iso: undefined,
+      calendarSelectedDate: undefined,
       dateInputText: dateStr ? dateStr : '',
       renderedDate: _DateTime.DateTime.now(this.locale(), this.timezone()),
       dateInputTextChanged: false,
       ...clearTimeSelect
     };
   }
+  reset = () => this.setState(this.recalculateState());
   locale() {
     if (this.props.locale) {
       return this.props.locale;
@@ -330,10 +201,50 @@ class DateTimeInput extends _react.Component {
     }
     return disabledDates(date.toISOString());
   }
+
+  // Called when the user enters text into dateInput
+  handleDateTextChange = (_event, date) => {
+    const dateParsed = this.tryParseDate(date.value);
+    this.setState({
+      dateInputText: date.value,
+      dateInputTextChanged: true,
+      calendarSelectedDate: dateParsed ? dateParsed : undefined,
+      renderedDate: dateParsed ? dateParsed.clone() : _DateTime.DateTime.now(this.locale(), this.timezone())
+    });
+  };
   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
+  handleDayClick = (event, {
+    date
+  }) => {
+    const dateParsed = _DateTime.DateTime.parse(date, this.locale(), this.timezone());
+    this.updateStateBasedOnDateInput(dateParsed, event);
+  };
+  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
+    // frame, and it updates calendarSelectedDate which is read in here.
+    setTimeout(() => {
+      if (event.key === 'Enter') {
+        // user pressed enter, use the selected value in the calendar
+        this.updateStateBasedOnDateInput(this.state.calendarSelectedDate, event);
+      } else {
+        // user clicked outside/tabbed away/pressed esc, try to use the value in dateInputText
+        const dateParsed = this.tryParseDate(this.state.dateInputText);
+        this.updateStateBasedOnDateInput(dateParsed, event);
+      }
+      this.setState({
+        isShowingCalendar: false,
+        dateInputTextChanged: false
+      });
+    }, 0);
+  };
   updateStateBasedOnDateInput(dateParsed, event) {
     let newState;
     if (dateParsed && this.state.timeSelectValue && (!this.state.dateInputText || this.state.dateInputText == '')) {
@@ -348,10 +259,112 @@ class DateTimeInput extends _react.Component {
       // if the text in the dateInput is not readable display error
       newState = this.recalculateState(this.state.dateInputText, false, true);
     } else {
-      newState = this.recalculateState(dateParsed === null || dateParsed === void 0 ? void 0 : dateParsed.toISOString(), false, true);
+      newState = this.recalculateState(dateParsed?.toISOString(), false, true);
     }
     this.changeStateIfNeeded(newState, event);
   }
+  updateStateBasedOnTimeSelect = (event, option) => {
+    // this.state.iso is undefined if date is invalid or not set.
+    // in this case recalculate with the dateInput's text which will result in
+    // an empty valid date (if isRequired is false) or an invalid date.
+    const newValue = this.state.iso ? option.value : this.state.dateInputText;
+    const newState = this.recalculateState(newValue, true, false);
+    this.changeStateIfNeeded(newState, event);
+    this.setState({
+      timeSelectValue: option.value
+    });
+  };
+  changeStateIfNeeded = (newState, e) => {
+    const dateStr = newState.dateInputText;
+    if (this.props.isRequired && !newState.iso || dateStr && dateStr.length > 0 && !newState.iso) {
+      const text = typeof this.props.invalidDateTimeMessage === 'function' ? this.props.invalidDateTimeMessage(dateStr ? dateStr : '') : this.props.invalidDateTimeMessage;
+      // eslint-disable-next-line no-param-reassign
+      newState.message = {
+        text: text,
+        type: 'error'
+      };
+    }
+    if (this.areDifferentDates(this.state.iso, newState.iso)) {
+      if (typeof this.props.onChange === 'function') {
+        const newDate = newState.iso?.toISOString();
+        // Timeout is needed here because users might change value in the
+        // onChange event lister, which might not execute properly
+        setTimeout(() => {
+          this.props.onChange?.(e, newDate);
+        }, 0);
+      }
+    }
+    this.setState(newState);
+  };
+  areDifferentDates = (d1, d2) => {
+    if (!d1 && !d2) {
+      return false;
+    }
+    return !d1 || !d2 || !d1.isSame(d2);
+  };
+  handleBlur = e => {
+    // when TABbing from the DateInput to TimeInput or visa-versa, the blur
+    // happens on the target before the relatedTarget gets focus.
+    // The timeout gives it a moment for that to happen
+    if (typeof this.props.onBlur === 'function') {
+      setTimeout(() => {
+        this.props.onBlur?.(e);
+      }, 0);
+    }
+  };
+  handleShowCalendar = _event => {
+    this.setState({
+      isShowingCalendar: true
+    });
+  };
+  handleSelectNextDay = _event => {
+    let toAlter;
+    if (this.state.calendarSelectedDate) {
+      toAlter = this.state.calendarSelectedDate.clone();
+    } else if (this.state.iso) {
+      toAlter = this.state.iso.clone();
+    } else {
+      toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
+    }
+    toAlter.add({
+      days: 1
+    });
+    this.setState({
+      calendarSelectedDate: toAlter,
+      renderedDate: toAlter.clone()
+    });
+  };
+  handleSelectPrevDay = _event => {
+    let toAlter;
+    if (this.state.calendarSelectedDate) {
+      toAlter = this.state.calendarSelectedDate.clone();
+    } else if (this.state.iso) {
+      toAlter = this.state.iso.clone();
+    } else {
+      toAlter = _DateTime.DateTime.now(this.locale(), this.timezone());
+    }
+    toAlter.subtract({
+      days: 1
+    });
+    this.setState({
+      calendarSelectedDate: toAlter,
+      renderedDate: toAlter.clone()
+    });
+  };
+  handleRenderNextMonth = _event => {
+    this.setState({
+      renderedDate: this.state.renderedDate.clone().add({
+        months: 1
+      })
+    });
+  };
+  handleRenderPrevMonth = _event => {
+    this.setState({
+      renderedDate: this.state.renderedDate.clone().subtract({
+        months: 1
+      })
+    });
+  };
   renderDays() {
     const renderedDate = this.state.renderedDate;
     // Sets it to the first local day of the week counting back from the start of the month.
@@ -434,36 +447,37 @@ class DateTimeInput extends _react.Component {
       size: "small",
       withBackground: false,
       withBorder: false,
-      renderIcon: type === 'prev' ? _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _jsxRuntime.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
+      renderIcon: type === 'prev' ? (0, _jsxRuntime.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
         color: "primary"
-      })) : _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
+      }) : (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
         color: "primary"
-      })),
+      }),
       screenReaderLabel: type === 'prev' ? this.props.prevMonthLabel : this.props.nextMonthLabel
     });
   }
   render() {
-    const _this$props4 = this.props,
-      description = _this$props4.description,
-      datePlaceholder = _this$props4.datePlaceholder,
-      timePlaceholder = _this$props4.timePlaceholder,
-      dateRenderLabel = _this$props4.dateRenderLabel,
-      dateInputRef = _this$props4.dateInputRef,
-      timeRenderLabel = _this$props4.timeRenderLabel,
-      timeFormat = _this$props4.timeFormat,
-      timeStep = _this$props4.timeStep,
-      timeInputRef = _this$props4.timeInputRef,
-      locale = _this$props4.locale,
-      timezone = _this$props4.timezone,
-      showMessages = _this$props4.showMessages,
-      messages = _this$props4.messages,
-      layout = _this$props4.layout,
-      rowSpacing = _this$props4.rowSpacing,
-      colSpacing = _this$props4.colSpacing,
-      isRequired = _this$props4.isRequired,
-      interaction = _this$props4.interaction,
-      renderWeekdayLabels = _this$props4.renderWeekdayLabels,
-      allowNonStepInput = _this$props4.allowNonStepInput;
+    const {
+      description,
+      datePlaceholder,
+      timePlaceholder,
+      dateRenderLabel,
+      dateInputRef,
+      timeRenderLabel,
+      timeFormat,
+      timeStep,
+      timeInputRef,
+      locale,
+      timezone,
+      showMessages,
+      messages,
+      layout,
+      rowSpacing,
+      colSpacing,
+      isRequired,
+      interaction,
+      renderWeekdayLabels,
+      allowNonStepInput
+    } = this.props;
     const allMessages = [...(showMessages && this.state.message ? [this.state.message] : []), ...(messages || [])];
     const hasError = allMessages.find(m => m.type === 'newError' || m.type === 'error');
     // if the component is in error state, create an empty error message to pass down to the subcomponents (DateInput and TimeInput) so they get a red outline and red required asterisk
@@ -530,22 +544,4 @@ class DateTimeInput extends _react.Component {
   }
 }
 exports.DateTimeInput = DateTimeInput;
-_DateTimeInput = DateTimeInput;
-DateTimeInput.displayName = "DateTimeInput";
-// extra verbose localized date and time
-DateTimeInput.DEFAULT_MESSAGE_FORMAT = 'LLLL';
-DateTimeInput.allowedProps = _props.allowedProps;
-DateTimeInput.defaultProps = {
-  layout: 'inline',
-  colSpacing: 'medium',
-  rowSpacing: 'small',
-  timeStep: 30,
-  showMessages: true,
-  messageFormat: _DateTimeInput.DEFAULT_MESSAGE_FORMAT,
-  isRequired: false,
-  dateFormat: 'LL',
-  // Localized date with full month, e.g. "August 6, 2014"
-  allowNonStepInput: false
-};
-DateTimeInput.contextType = _ApplyLocaleContext.ApplyLocaleContext;
 var _default = exports.default = DateTimeInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "11.7.3-snapshot-7",
+  "version": "11.7.3-snapshot-26",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -14,26 +14,26 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
-    "@instructure/shared-types": "11.7.3-snapshot-7",
-    "@instructure/console": "11.7.3-snapshot-7",
-    "@instructure/ui-a11y-content": "11.7.3-snapshot-7",
-    "@instructure/ui-calendar": "11.7.3-snapshot-7",
-    "@instructure/ui-buttons": "11.7.3-snapshot-7",
-    "@instructure/ui-date-input": "11.7.3-snapshot-7",
-    "@instructure/ui-form-field": "11.7.3-snapshot-7",
-    "@instructure/ui-i18n": "11.7.3-snapshot-7",
-    "@instructure/ui-icons": "11.7.3-snapshot-7",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-time-select": "11.7.3-snapshot-7",
-    "@instructure/ui-utils": "11.7.3-snapshot-7"
+    "@babel/runtime": "^7.29.2",
+    "@instructure/console": "11.7.3-snapshot-26",
+    "@instructure/shared-types": "11.7.3-snapshot-26",
+    "@instructure/ui-a11y-content": "11.7.3-snapshot-26",
+    "@instructure/ui-buttons": "11.7.3-snapshot-26",
+    "@instructure/ui-calendar": "11.7.3-snapshot-26",
+    "@instructure/ui-date-input": "11.7.3-snapshot-26",
+    "@instructure/ui-form-field": "11.7.3-snapshot-26",
+    "@instructure/ui-i18n": "11.7.3-snapshot-26",
+    "@instructure/ui-icons": "11.7.3-snapshot-26",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-time-select": "11.7.3-snapshot-26",
+    "@instructure/ui-utils": "11.7.3-snapshot-26"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-7"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-26"
   },
   "peerDependencies": {
     "react": ">=18 <=19"