@instructure/ui-time-select 8.11.2-snapshot.5 → 8.11.2-snapshot.54

package/es/TimeSelect/index.js

@@ -27,26 +27,18 @@ var _dec, _class, _class2, _temp;
  * SOFTWARE.
  */
 import React, { Component } from 'react';
-import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import './locales';
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(localizedFormat);
+import { ApplyLocaleContext, Locale, DateTime } from '@instructure/ui-i18n';
 import { getInteraction, passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { Select } from '@instructure/ui-select';
 import { uid } from '@instructure/uid';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
-**/
-
+ **/
 let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class TimeSelect extends Component {
   constructor(props) {
     super(props);
@@ -54,60 +46,64 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
     this._emptyOptionId = uid('Select-EmptyOption');
 
     this.handleRef = node => {
-      this._select = node; // TODO remove this and keep this.ref
-
       this.ref = node;
     };
 
     this.handleBlur = event => {
+      var _this$props$onBlur, _this$props;
+
       this.setState({
-        highlightedOptionId: null
+        highlightedOptionId: void 0
       });
-      this.props.onBlur(event);
+      (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, event);
     };
 
     this.handleInputChange = event => {
       const value = event.target.value;
       const newOptions = this.filterOptions(value);
-      this.setState(state => ({
+      this.setState(_state => ({
         inputValue: value,
         filteredOptions: newOptions,
-        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : null,
+        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : void 0,
         isShowingOptions: true
       }));
 
       if (!this.state.isShowingOptions) {
-        this.props.onShowOptions(event);
+        var _this$props$onShowOpt, _this$props2;
+
+        (_this$props$onShowOpt = (_this$props2 = this.props).onShowOptions) === null || _this$props$onShowOpt === void 0 ? void 0 : _this$props$onShowOpt.call(_this$props2, event);
       }
     };
 
     this.handleShowOptions = event => {
+      var _this$props$onShowOpt2, _this$props3;
+
       this.setState({
         isShowingOptions: true
       });
-      this.props.onShowOptions(event);
+      (_this$props$onShowOpt2 = (_this$props3 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props3, event);
     };
 
     this.handleHideOptions = event => {
+      var _this$props$onHideOpt, _this$props4;
+
       const selectedOptionId = this.state.selectedOptionId;
       const option = this.getOption('id', selectedOptionId);
       let prevValue = '';
 
       if (this.props.defaultValue) {
-        const date = dayjs(this.props.defaultValue).tz(this.timezone(), true).locale(this.locale());
-        prevValue = date.format(this.props.format);
+        const date = DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
+        prevValue = this.props.format ? date.format(this.props.format) : date.toISOString();
       }
 
-      this.setState(({
-        inputValue
-      }) => ({
+      this.setState(_state => ({
         isShowingOptions: false,
-        highlightedOptionId: null,
+        highlightedOptionId: void 0,
         inputValue: selectedOptionId ? option.label : prevValue,
         filteredOptions: this.filterOptions(''),
         ...this.matchValue()
       }));
-      this.props.onHideOptions(event);
+      (_this$props$onHideOpt = (_this$props4 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props4, event);
     };
 
     this.handleHighlightOption = (event, {
@@ -125,6 +121,8 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
     this.handleSelectOption = (event, {
       id
     }) => {
+      var _this$props$onHideOpt2, _this$props6;
+
       if (id === this._emptyOptionId) {
         this.setState({
           isShowingOptions: false
@@ -133,37 +131,53 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
       }
 
       const option = this.getOption('id', id);
+      let newInputValue;
 
       if (this.isControlled) {
         const prev = this.getOption('id', this.state.selectedOptionId);
+        newInputValue = prev ? prev.label : '';
         this.setState({
           isShowingOptions: false,
-          inputValue: prev ? prev.label : '',
+          inputValue: newInputValue,
           filteredOptions: this.filterOptions('')
         });
       } else {
+        newInputValue = option.label;
         this.setState({
           isShowingOptions: false,
           selectedOptionId: id,
-          inputValue: option.label,
+          inputValue: newInputValue,
           filteredOptions: this.filterOptions('')
         });
       }
 
       if (id !== this.state.selectedOptionId) {
-        this.props.onChange(event, {
-          value: option.value
+        var _this$props$onChange, _this$props5;
+
+        (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props5, event, {
+          value: option.value,
+          inputText: newInputValue
         });
       }
 
-      this.props.onHideOptions(event);
+      (_this$props$onHideOpt2 = (_this$props6 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props6, event);
     };
 
     this.state = this.getInitialState();
   }
 
+  componentDidMount() {
+    // we'll need to recalculate the state because the context value is
+    // set at this point (and it might change locale & timezone)
+    this.setState(this.getInitialState());
+  }
+
   focus() {
-    this._select && this._select.focus();
+    this.ref && this.ref.focus();
+  }
+
+  get _select() {
+    return this.ref;
   }
 
   get isControlled() {
@@ -177,11 +191,11 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
   }
 
   get focused() {
-    return this._select && this._select.focused;
+    return this.ref && this.ref.focused;
   }
 
   get id() {
-    return this._select && this._select.id;
+    return this.ref && this.ref.id;
   }
 
   locale() {
@@ -201,7 +215,7 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
       return this.context.timezone;
     }
 
-    return dayjs.tz.guess();
+    return DateTime.browserTimeZone();
   }
 
   componentDidUpdate(prevProps) {
@@ -223,7 +237,7 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
 
       this.setState({
         inputValue: option ? option.label : '',
-        selectedOptionId: option ? option.id : null
+        selectedOptionId: option ? option.id : void 0
       });
     }
   }
@@ -236,17 +250,17 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
       options: initialOptions,
       filteredOptions: initialOptions,
       isShowingOptions: false,
-      highlightedOptionId: initialSelection ? initialSelection.id : null,
-      selectedOptionId: initialSelection ? initialSelection.id : null
+      highlightedOptionId: initialSelection ? initialSelection.id : void 0,
+      selectedOptionId: initialSelection ? initialSelection.id : void 0
     };
   }
 
   getInitialOption(options) {
-    const _this$props = this.props,
-          value = _this$props.value,
-          defaultValue = _this$props.defaultValue,
-          defaultToFirstOption = _this$props.defaultToFirstOption,
-          format = _this$props.format;
+    const _this$props7 = this.props,
+          value = _this$props7.value,
+          defaultValue = _this$props7.defaultValue,
+          defaultToFirstOption = _this$props7.defaultToFirstOption,
+          format = _this$props7.format;
     const initialValue = value || defaultValue;
 
     if (typeof initialValue === 'string') {
@@ -259,9 +273,9 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
       } // value does not match an existing option
 
 
-      const date = dayjs(initialValue).tz(this.timezone(), true).locale(this.locale());
+      const date = DateTime.parse(initialValue, this.locale(), this.timezone());
       return {
-        label: date.format(format)
+        label: format ? date.format(format) : date.toISOString()
       };
     } // otherwise return first option, if desired
 
@@ -270,7 +284,7 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
       return options[0];
     }
 
-    return null;
+    return void 0;
   }
 
   getOption(field, value, options = this.state.options) {
@@ -281,7 +295,7 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
     // ISO8601 strings may contain a space. Remove any spaces before using the
     // date as the id.
     const dateStr = date.toISOString();
-    return dateStr ? dateStr.replace(/\s/g, '') : null;
+    return dateStr.replace(/\s/g, '');
   }
 
   getBaseDate() {
@@ -289,12 +303,15 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
     const baseValue = this.props.value || this.props.defaultValue;
 
     if (baseValue) {
-      baseDate = dayjs(baseValue).tz(this.timezone(), true).locale(this.locale());
+      baseDate = DateTime.parse(baseValue, this.locale(), this.timezone());
     } else {
-      baseDate = dayjs().tz(this.timezone(), true).locale(this.locale());
+      baseDate = DateTime.now(this.locale(), this.timezone());
     }
 
-    return baseDate.second(0).millisecond(0);
+    return baseDate.set({
+      second: 0,
+      millisecond: 0
+    }).clone();
   }
 
   generateOptions() {
@@ -304,15 +321,16 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
     for (let hour = 0; hour < 24; hour++) {
       for (let minute = 0; minute < 60 / this.props.step; minute++) {
         const minutes = minute * this.props.step;
-        const newDate = date.hour(hour).minute(minutes); // store time options
+        const newDate = date.set({
+          hour: hour,
+          minute: minutes
+        }); // store time options
 
         options.push({
           id: this.getFormattedId(newDate),
           // iso no spaces
           value: newDate.toISOString(),
-          // iso
-          label: newDate.format(this.props.format) // formatted string
-
+          label: this.props.format ? newDate.format(this.props.format) : newDate.toISOString()
         });
       }
     }
@@ -321,15 +339,17 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
   }
 
   filterOptions(inputValue) {
-    return this.state.options.filter(option => option.label.toLowerCase().startsWith(inputValue.toLowerCase()));
+    var _this$state;
+
+    return (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.options.filter(option => option.label.toLowerCase().startsWith(inputValue.toLowerCase()));
   }
 
   matchValue() {
-    const _this$state = this.state,
-          inputValue = _this$state.inputValue,
-          filteredOptions = _this$state.filteredOptions,
-          highlightedOptionId = _this$state.highlightedOptionId,
-          selectedOptionId = _this$state.selectedOptionId; // an option matching user input exists
+    const _this$state2 = this.state,
+          inputValue = _this$state2.inputValue,
+          filteredOptions = _this$state2.filteredOptions,
+          highlightedOptionId = _this$state2.highlightedOptionId,
+          selectedOptionId = _this$state2.selectedOptionId; // an option matching user input exists
 
     if (filteredOptions.length === 1) {
       const onlyOption = filteredOptions[0]; // automatically select the matching option
@@ -369,13 +389,15 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
         inputValue: ''
       };
     }
+
+    return void 0;
   }
 
   renderOptions() {
-    const _this$state2 = this.state,
-          filteredOptions = _this$state2.filteredOptions,
-          highlightedOptionId = _this$state2.highlightedOptionId,
-          selectedOptionId = _this$state2.selectedOptionId;
+    const _this$state3 = this.state,
+          filteredOptions = _this$state3.filteredOptions,
+          highlightedOptionId = _this$state3.highlightedOptionId,
+          selectedOptionId = _this$state3.selectedOptionId;
 
     if (filteredOptions.length < 1) {
       return this.renderEmptyOption();
@@ -402,34 +424,34 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
   }
 
   render() {
-    const _this$props2 = this.props,
-          value = _this$props2.value,
-          defaultValue = _this$props2.defaultValue,
-          placeholder = _this$props2.placeholder,
-          renderLabel = _this$props2.renderLabel,
-          inputRef = _this$props2.inputRef,
-          id = _this$props2.id,
-          listRef = _this$props2.listRef,
-          renderBeforeInput = _this$props2.renderBeforeInput,
-          renderAfterInput = _this$props2.renderAfterInput,
-          isRequired = _this$props2.isRequired,
-          isInline = _this$props2.isInline,
-          width = _this$props2.width,
-          format = _this$props2.format,
-          step = _this$props2.step,
-          optionsMaxWidth = _this$props2.optionsMaxWidth,
-          visibleOptionsCount = _this$props2.visibleOptionsCount,
-          messages = _this$props2.messages,
-          placement = _this$props2.placement,
-          constrain = _this$props2.constrain,
-          onFocus = _this$props2.onFocus,
-          onShowOptions = _this$props2.onShowOptions,
-          onHideOptions = _this$props2.onHideOptions,
-          rest = _objectWithoutProperties(_this$props2, _excluded);
-
-    const _this$state3 = this.state,
-          inputValue = _this$state3.inputValue,
-          isShowingOptions = _this$state3.isShowingOptions;
+    const _this$props8 = this.props,
+          value = _this$props8.value,
+          defaultValue = _this$props8.defaultValue,
+          placeholder = _this$props8.placeholder,
+          renderLabel = _this$props8.renderLabel,
+          inputRef = _this$props8.inputRef,
+          id = _this$props8.id,
+          listRef = _this$props8.listRef,
+          renderBeforeInput = _this$props8.renderBeforeInput,
+          renderAfterInput = _this$props8.renderAfterInput,
+          isRequired = _this$props8.isRequired,
+          isInline = _this$props8.isInline,
+          width = _this$props8.width,
+          format = _this$props8.format,
+          step = _this$props8.step,
+          optionsMaxWidth = _this$props8.optionsMaxWidth,
+          visibleOptionsCount = _this$props8.visibleOptionsCount,
+          messages = _this$props8.messages,
+          placement = _this$props8.placement,
+          constrain = _this$props8.constrain,
+          onFocus = _this$props8.onFocus,
+          onShowOptions = _this$props8.onShowOptions,
+          onHideOptions = _this$props8.onHideOptions,
+          rest = _objectWithoutProperties(_this$props8, _excluded);
+
+    const _this$state4 = this.state,
+          inputValue = _this$state4.inputValue,
+          isShowingOptions = _this$state4.isShowingOptions;
     return /*#__PURE__*/React.createElement(Select, Object.assign({
       renderLabel: renderLabel,
       inputValue: inputValue,
@@ -462,7 +484,9 @@ let TimeSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Time
 
 }, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   defaultToFirstOption: false,
+  id: void 0,
   format: 'LT',
+  // see https://momentjs.com/docs/#/displaying/
   step: 30,
   isRequired: false,
   isInline: false,

package/es/TimeSelect/props.js

@@ -56,7 +56,8 @@ const propTypes = {
   /**
    * The format to use when displaying the possible and currently selected options.
    *
-   * See [moment.js formats](https://momentjs.com/docs/#/displaying/format/) for the list of available formats.
+   * See [moment](https://momentjs.com/docs/#/displaying/format/) for the list
+   * of available formats.
    */
   format: PropTypes.string,
 

package/es/package.json

@@ -0,0 +1 @@
+{"type":"module"}