@instructure/ui-date-time-input 8.25.1-snapshot-10 → 8.25.1-snapshot-13

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.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 

package/es/DateTimeInput/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
+var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 
 /*
  * The MIT License (MIT)
@@ -42,33 +42,168 @@ category: components
 @tsProps
 **/
 
-let DateTimeInput = (_dec = testable(), _dec(_class = class DateTimeInput extends Component {
-  static displayName = "DateTimeInput";
+let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeInput extends Component {
   // extra verbose localized date and time
-  static DEFAULT_MESSAGE_FORMAT = 'LLLL';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    layout: 'inline',
-    colSpacing: 'medium',
-    rowSpacing: 'small',
-    timeStep: 30,
-    messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
-    isRequired: false,
-    dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
-
-  };
-  static contextType = ApplyLocaleContext;
-  ref = null; // This is used by Tooltip for positioning
-
-  handleRef = el => {
-    this.ref = el;
-  };
-
+  // This is used by Tooltip for positioning
   constructor(props) {
     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({
+        dateInputText: date.value,
+        dateInputTextChanged: true,
+        calendarSelectedDate: dateParsed ? dateParsed : void 0,
+        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 => {
+      // update state based on the DateInput's text value
+      if (this.state.dateInputTextChanged || event.key === 'Enter') {
+        const dateParsed = this.tryParseDate(this.state.dateInputText);
+        this.updateStateBasedOnDateInput(dateParsed, event);
+      } else {
+        // user clicked outside or tabbed away or pressed esc, reset text
+        this.setState({
+          dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
+          calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
+        });
+      }
+
+      this.setState({
+        isShowingCalendar: false,
+        dateInputTextChanged: false
+      });
+    };
+
+    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.
+      // The timeout gives it a moment for that to happen
+      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) {
+        toAlter = this.state.iso.clone();
+      } else {
+        toAlter = DateTime.now(this.locale(), this.timezone());
+      }
+
+      toAlter.add({
+        days: 1
+      });
+      this.setState({
+        calendarSelectedDate: toAlter,
+        renderedDate: toAlter.clone(),
+        dateInputText: toAlter.format(this.dateFormat)
+      });
+    };
+
+    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.now(this.locale(), this.timezone());
+      }
+
+      toAlter.subtract({
+        days: 1
+      });
+      this.setState({
+        calendarSelectedDate: toAlter,
+        renderedDate: toAlter.clone(),
+        dateInputText: toAlter.format(this.dateFormat)
+      });
+    };
+
+    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);
   }
 
@@ -212,46 +347,12 @@ let DateTimeInput = (_dec = testable(), _dec(_class = class DateTimeInput extend
   } // 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 : void 0,
-      renderedDate: dateParsed ? dateParsed.clone() : DateTime.now(this.locale(), this.timezone())
-    });
-  };
-
   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
 
 
-  handleDayClick = (event, _ref) => {
-    let date = _ref.date;
-    const dateParsed = DateTime.parse(date, this.locale(), this.timezone());
-    this.updateStateBasedOnDateInput(dateParsed, event);
-  };
-  handleHideCalendar = event => {
-    // update state based on the DateInput's text value
-    if (this.state.dateInputTextChanged || event.key === 'Enter') {
-      const dateParsed = this.tryParseDate(this.state.dateInputText);
-      this.updateStateBasedOnDateInput(dateParsed, event);
-    } else {
-      // user clicked outside or tabbed away or pressed esc, reset text
-      this.setState({
-        dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
-        calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
-      });
-    }
-
-    this.setState({
-      isShowingCalendar: false,
-      dateInputTextChanged: false
-    });
-  };
-
   updateStateBasedOnDateInput(dateParsed, event) {
     let newState;
 
@@ -273,113 +374,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = class DateTimeInput extend
     this.changeStateIfNeeded(newState, event);
   }
 
-  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
-    });
-  };
-  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());
-      }
-    }
-  };
-  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') {
-      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);
-    }
-  };
-  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.now(this.locale(), this.timezone());
-    }
-
-    toAlter.add({
-      days: 1
-    });
-    this.setState({
-      calendarSelectedDate: toAlter,
-      renderedDate: toAlter.clone(),
-      dateInputText: toAlter.format(this.dateFormat)
-    });
-  };
-  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.now(this.locale(), this.timezone());
-    }
-
-    toAlter.subtract({
-      days: 1
-    });
-    this.setState({
-      calendarSelectedDate: toAlter,
-      renderedDate: toAlter.clone(),
-      dateInputText: toAlter.format(this.dateFormat)
-    });
-  };
-  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() {
     if (!this.state.isShowingCalendar) {
       // this is an expensive function, only execute if the calendar is open
@@ -531,6 +525,15 @@ let DateTimeInput = (_dec = testable(), _dec(_class = class DateTimeInput extend
     }));
   }
 
-}) || _class);
+}, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  layout: 'inline',
+  colSpacing: 'medium',
+  rowSpacing: 'small',
+  timeStep: 30,
+  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/lib/DateTimeInput/index.js

@@ -37,7 +37,7 @@ var _debounce = require("@instructure/debounce");
 
 var _props = require("./props");
 
-var _dec, _class, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
+var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 
 /**
 ---
@@ -45,33 +45,170 @@ category: components
 ---
 @tsProps
 **/
-let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = class DateTimeInput extends _react.Component {
-  static displayName = "DateTimeInput";
+let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class DateTimeInput extends _react.Component {
   // extra verbose localized date and time
-  static DEFAULT_MESSAGE_FORMAT = 'LLLL';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    layout: 'inline',
-    colSpacing: 'medium',
-    rowSpacing: 'small',
-    timeStep: 30,
-    messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
-    isRequired: false,
-    dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
-
-  };
-  static contextType = _ApplyLocaleContext.ApplyLocaleContext;
-  ref = null; // This is used by Tooltip for positioning
-
-  handleRef = el => {
-    this.ref = el;
-  };
-
+  // This is used by Tooltip for positioning
   constructor(props) {
     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({
+        dateInputText: date.value,
+        dateInputTextChanged: true,
+        calendarSelectedDate: dateParsed ? dateParsed : void 0,
+        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 => {
+      // update state based on the DateInput's text value
+      if (this.state.dateInputTextChanged || event.key === 'Enter') {
+        const dateParsed = this.tryParseDate(this.state.dateInputText);
+        this.updateStateBasedOnDateInput(dateParsed, event);
+      } else {
+        // user clicked outside or tabbed away or pressed esc, reset text
+        this.setState({
+          dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
+          calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
+        });
+      }
+
+      this.setState({
+        isShowingCalendar: false,
+        dateInputTextChanged: false
+      });
+    };
+
+    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.
+      // The timeout gives it a moment for that to happen
+      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) {
+        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(),
+        dateInputText: toAlter.format(this.dateFormat)
+      });
+    };
+
+    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(),
+        dateInputText: toAlter.format(this.dateFormat)
+      });
+    };
+
+    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);
   }
 
@@ -216,16 +353,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = class DateT
   } // 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 : void 0,
-      renderedDate: dateParsed ? dateParsed.clone() : _DateTime.DateTime.now(this.locale(), this.timezone())
-    });
-  };
-
   tryParseDate(val) {
     const parsed = _DateTime.DateTime.parse(val, this.locale(), this.timezone());
 
@@ -233,32 +360,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = class DateT
   } // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
 
 
-  handleDayClick = (event, _ref) => {
-    let date = _ref.date;
-
-    const dateParsed = _DateTime.DateTime.parse(date, this.locale(), this.timezone());
-
-    this.updateStateBasedOnDateInput(dateParsed, event);
-  };
-  handleHideCalendar = event => {
-    // update state based on the DateInput's text value
-    if (this.state.dateInputTextChanged || event.key === 'Enter') {
-      const dateParsed = this.tryParseDate(this.state.dateInputText);
-      this.updateStateBasedOnDateInput(dateParsed, event);
-    } else {
-      // user clicked outside or tabbed away or pressed esc, reset text
-      this.setState({
-        dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
-        calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
-      });
-    }
-
-    this.setState({
-      isShowingCalendar: false,
-      dateInputTextChanged: false
-    });
-  };
-
   updateStateBasedOnDateInput(dateParsed, event) {
     let newState;
 
@@ -281,113 +382,6 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = class DateT
     this.changeStateIfNeeded(newState, event);
   }
 
-  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
-    });
-  };
-  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());
-      }
-    }
-  };
-  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') {
-      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);
-    }
-  };
-  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(),
-      dateInputText: toAlter.format(this.dateFormat)
-    });
-  };
-  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(),
-      dateInputText: toAlter.format(this.dateFormat)
-    });
-  };
-  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() {
     if (!this.state.isShowingCalendar) {
       // this is an expensive function, only execute if the calendar is open
@@ -542,7 +536,16 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = class DateT
     }));
   }
 
-}) || _class);
+}, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  layout: 'inline',
+  colSpacing: 'medium',
+  rowSpacing: 'small',
+  timeStep: 30,
+  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;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "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.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/ui-a11y-content": "8.25.1-snapshot-10",
-    "@instructure/ui-buttons": "8.25.1-snapshot-10",
-    "@instructure/ui-calendar": "8.25.1-snapshot-10",
-    "@instructure/ui-date-input": "8.25.1-snapshot-10",
-    "@instructure/ui-form-field": "8.25.1-snapshot-10",
-    "@instructure/ui-i18n": "8.25.1-snapshot-10",
-    "@instructure/ui-icons": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-time-select": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
+    "@instructure/debounce": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/ui-a11y-content": "8.25.1-snapshot-13",
+    "@instructure/ui-buttons": "8.25.1-snapshot-13",
+    "@instructure/ui-calendar": "8.25.1-snapshot-13",
+    "@instructure/ui-date-input": "8.25.1-snapshot-13",
+    "@instructure/ui-form-field": "8.25.1-snapshot-13",
+    "@instructure/ui-i18n": "8.25.1-snapshot-13",
+    "@instructure/ui-icons": "8.25.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-time-select": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
     "prop-types": "^15"
   },
   "peerDependencies": {