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

package/lib/TimeSelect/index.js

@@ -17,15 +17,7 @@ var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLoc
 
 var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
 
-var _dayjs = _interopRequireDefault(require("dayjs"));
-
-var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
-
-var _timezone = _interopRequireDefault(require("dayjs/plugin/timezone"));
-
-var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
-
-require("./locales");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
 
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
 
@@ -45,17 +37,11 @@ const _excluded = ["value", "defaultValue", "placeholder", "renderLabel", "input
 
 var _dec, _class, _class2, _temp;
 
-_dayjs.default.extend(_utc.default);
-
-_dayjs.default.extend(_timezone.default);
-
-_dayjs.default.extend(_localizedFormat.default);
-
 /**
 ---
 category: components
 ---
-**/
+ **/
 let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class TimeSelect extends _react.Component {
   constructor(props) {
     super(props);
@@ -63,60 +49,65 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
     this._emptyOptionId = (0, _uid.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 = (0, _dayjs.default)(this.props.defaultValue).tz(this.timezone(), true).locale(this.locale());
-        prevValue = date.format(this.props.format);
+        const date = _DateTime.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, {
@@ -134,6 +125,8 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
     this.handleSelectOption = (event, {
       id
     }) => {
+      var _this$props$onHideOpt2, _this$props6;
+
       if (id === this._emptyOptionId) {
         this.setState({
           isShowingOptions: false
@@ -142,37 +135,53 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
       }
 
       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() {
@@ -186,11 +195,11 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
   }
 
   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() {
@@ -210,7 +219,7 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
       return this.context.timezone;
     }
 
-    return _dayjs.default.tz.guess();
+    return _DateTime.DateTime.browserTimeZone();
   }
 
   componentDidUpdate(prevProps) {
@@ -232,7 +241,7 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
 
       this.setState({
         inputValue: option ? option.label : '',
-        selectedOptionId: option ? option.id : null
+        selectedOptionId: option ? option.id : void 0
       });
     }
   }
@@ -245,17 +254,17 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
       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') {
@@ -268,9 +277,10 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
       } // value does not match an existing option
 
 
-      const date = (0, _dayjs.default)(initialValue).tz(this.timezone(), true).locale(this.locale());
+      const date = _DateTime.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
 
@@ -279,7 +289,7 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
       return options[0];
     }
 
-    return null;
+    return void 0;
   }
 
   getOption(field, value, options = this.state.options) {
@@ -290,7 +300,7 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
     // 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() {
@@ -298,12 +308,15 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
     const baseValue = this.props.value || this.props.defaultValue;
 
     if (baseValue) {
-      baseDate = (0, _dayjs.default)(baseValue).tz(this.timezone(), true).locale(this.locale());
+      baseDate = _DateTime.DateTime.parse(baseValue, this.locale(), this.timezone());
     } else {
-      baseDate = (0, _dayjs.default)().tz(this.timezone(), true).locale(this.locale());
+      baseDate = _DateTime.DateTime.now(this.locale(), this.timezone());
     }
 
-    return baseDate.second(0).millisecond(0);
+    return baseDate.set({
+      second: 0,
+      millisecond: 0
+    }).clone();
   }
 
   generateOptions() {
@@ -313,15 +326,16 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
     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()
         });
       }
     }
@@ -330,15 +344,17 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
   }
 
   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
@@ -378,13 +394,15 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
         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();
@@ -411,33 +429,33 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
   }
 
   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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_this$props8, _excluded);
+    const _this$state4 = this.state,
+          inputValue = _this$state4.inputValue,
+          isShowingOptions = _this$state4.isShowingOptions;
     return /*#__PURE__*/_react.default.createElement(_Select.Select, Object.assign({
       renderLabel: renderLabel,
       inputValue: inputValue,
@@ -470,7 +488,9 @@ let TimeSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
 
 }, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   defaultToFirstOption: false,
+  id: void 0,
   format: 'LT',
+  // see https://momentjs.com/docs/#/displaying/
   step: 30,
   isRequired: false,
   isInline: false,

package/lib/TimeSelect/props.js

@@ -70,7 +70,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.default.string,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-time-select",
-  "version": "8.11.2-snapshot.5+fd40a2f7b",
+  "version": "8.11.2-snapshot.54+a6aaef205",
   "description": "A component for selecting time values.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,22 +25,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-form-field": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-i18n": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-position": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-prop-types": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-react-utils": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-select": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-test-locator": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-testable": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/uid": "8.11.2-snapshot.5+fd40a2f7b",
-    "dayjs": "^1.10.6",
+    "@instructure/console": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-form-field": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-i18n": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-position": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-prop-types": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-react-utils": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-select": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-test-locator": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-testable": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/uid": "8.11.2-snapshot.54+a6aaef205",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.11.2-snapshot.5+fd40a2f7b",
-    "@instructure/ui-test-utils": "8.11.2-snapshot.5+fd40a2f7b",
+    "@instructure/ui-babel-preset": "8.11.2-snapshot.54+a6aaef205",
+    "@instructure/ui-test-utils": "8.11.2-snapshot.54+a6aaef205",
     "moment-timezone": "^0.5.33"
   },
   "peerDependencies": {
@@ -50,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "fd40a2f7b84bb29103569d826f4babdd5af84733"
+  "gitHead": "a6aaef20508325ae9e5bfbbb29317174edebce9c"
 }