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

package/lib/DateTimeInput/index.js

@@ -37,7 +37,7 @@ var _debounce = require("@instructure/debounce");
 
 var _props = require("./props");
 
-var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
+var _dec, _class, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 
 /**
 ---
@@ -45,171 +45,33 @@ category: components
 ---
 @tsProps
 **/
-let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class DateTimeInput extends _react.Component {
+let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = class DateTimeInput extends _react.Component {
+  static displayName = "DateTimeInput";
   // extra verbose localized date and time
-  // This is used by Tooltip for positioning
+  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;
+  };
+
   constructor(props) {
     super(props); // State needs to be calculated because render could be called before
     // componentDidMount()
 
-    this.context = void 0;
-    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);
   }
 
@@ -354,6 +216,16 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
   } // 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());
 
@@ -361,6 +233,32 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
   } // 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;
 
@@ -383,6 +281,113 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
     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
@@ -537,16 +542,7 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
     }));
   }
 
-}, _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);
+}) || _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-7",
+  "version": "8.25.1-snapshot-10",
   "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-7",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-7",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-7"
+    "@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"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.25.1-snapshot-7",
-    "@instructure/emotion": "8.25.1-snapshot-7",
-    "@instructure/ui-a11y-content": "8.25.1-snapshot-7",
-    "@instructure/ui-buttons": "8.25.1-snapshot-7",
-    "@instructure/ui-calendar": "8.25.1-snapshot-7",
-    "@instructure/ui-date-input": "8.25.1-snapshot-7",
-    "@instructure/ui-form-field": "8.25.1-snapshot-7",
-    "@instructure/ui-i18n": "8.25.1-snapshot-7",
-    "@instructure/ui-icons": "8.25.1-snapshot-7",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-7",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-7",
-    "@instructure/ui-testable": "8.25.1-snapshot-7",
-    "@instructure/ui-time-select": "8.25.1-snapshot-7",
-    "@instructure/ui-utils": "8.25.1-snapshot-7",
+    "@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",
     "prop-types": "^15"
   },
   "peerDependencies": {

package/src/DateTimeInput/index.tsx

@@ -64,8 +64,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
   } as const
 
-  context!: React.ContextType<typeof ApplyLocaleContext>
-
+  declare context: React.ContextType<typeof ApplyLocaleContext>
   static contextType = ApplyLocaleContext
 
   ref: Element | null = null // This is used by Tooltip for positioning

package/src/DateTimeInput/props.ts

@@ -69,22 +69,7 @@ type DateTimeInputProps = {
   /**
    * The label over the time input
    **/
-  timeRenderLabel:
-    | React.ReactNode
-    | (({
-        id,
-        isDisabled,
-        isSelected,
-        isHighlighted,
-        children
-      }: // TODO type this better when Select is typed
-      {
-        id: any
-        isDisabled: any
-        isSelected: any
-        isHighlighted: any
-        children: any
-      }) => React.ReactNode)
+  timeRenderLabel: React.ReactNode | (() => React.ReactNode)
   /**
    * The number of minutes to increment by when generating the allowable time options.
    */