@instructure/ui-time-select 8.37.1-snapshot-13 → 8.38.0

package/lib/TimeSelect/index.js

@@ -67,15 +67,31 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     };
     this.handleBlur = event => {
       var _this$props$onBlur, _this$props;
-      this.setState({
-        highlightedOptionId: void 0
-      });
       (_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 => {
       var _this$props$onInputCh, _this$props3;
       const value = event.target.value;
       const newOptions = this.filterOptions(value);
+      if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.length) == 1) {
+        // if there is only 1 option, it will be automatically selected except
+        // if in controlled mode (it would commit this change)
+        if (!this.isControlled) {
+          this.setState({
+            selectedOptionId: newOptions[0].id
+          });
+        }
+        this.setState({
+          fireChangeOnBlur: newOptions[0]
+        });
+      } else {
+        this.setState({
+          // needs not to lose selectedOptionId in controlled mode otherwise it'd
+          // revert to the default or '' instead of the set value
+          selectedOptionId: this.isControlled ? this.state.selectedOptionId : void 0,
+          fireChangeOnBlur: void 0
+        });
+      }
       this.setState({
         inputValue: value,
         filteredOptions: newOptions,
@@ -89,112 +105,111 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       const inputAsDate = this.parseInputText(value);
       (_this$props$onInputCh = (_this$props3 = this.props).onInputChange) === null || _this$props$onInputCh === void 0 ? void 0 : _this$props$onInputCh.call(_this$props3, event, value, inputAsDate.isValid() ? inputAsDate.toISOString() : void 0);
     };
+    this.onKeyDown = event => {
+      var _this$props$onKeyDown, _this$props4;
+      const input = this.parseInputText(this.state.inputValue);
+      if (event.key === 'Enter' && this.props.allowNonStepInput && input.isValid()) {
+        this.setState(() => ({
+          isShowingOptions: false,
+          highlightedOptionId: void 0
+        }));
+        // others are set in handleBlurOrEsc
+      }
+
+      (_this$props$onKeyDown = (_this$props4 = this.props).onKeyDown) === null || _this$props$onKeyDown === void 0 ? void 0 : _this$props$onKeyDown.call(_this$props4, event);
+    };
     this.handleShowOptions = event => {
-      var _this$props$onShowOpt2, _this$props4;
+      var _this$props$onShowOpt2, _this$props5;
       this.setState({
         isShowingOptions: true,
         highlightedOptionId: this.state.selectedOptionId
       });
-      (_this$props$onShowOpt2 = (_this$props4 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props4, event);
+      (_this$props$onShowOpt2 = (_this$props5 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props5, event);
     };
-    this.handleHideOptions = event => {
-      var _this$props$onHideOpt, _this$props5;
-      const input = this.parseInputText(this.state.inputValue);
+    this.handleBlurOrEsc = event => {
+      var _this$props$onHideOpt, _this$props7;
+      const _this$state = this.state,
+        selectedOptionId = _this$state.selectedOptionId,
+        inputValue = _this$state.inputValue;
       let defaultValue = '';
       if (this.props.defaultValue) {
         const date = _DateTime.DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
         defaultValue = this.props.format ? date.format(this.props.format) : date.toISOString();
       }
-      if (!this.props.allowNonStepInput || this.props.allowNonStepInput && input.isValid() && input.minute() % this.props.step === 0) {
-        const selectedOptionId = this.state.selectedOptionId;
-        const option = this.getOption('id', selectedOptionId);
-        this.setState(() => ({
-          isShowingOptions: false,
-          highlightedOptionId: void 0,
-          inputValue: selectedOptionId ? option.label : defaultValue,
-          filteredOptions: this.filterOptions(''),
-          ...this.matchValue()
-        }));
-      } else {
+      const selectedOption = this.getOption('id', selectedOptionId);
+      let newInputValue = defaultValue;
+      if (selectedOption) {
+        // If there is a selected option use its value in the input field.
+        newInputValue = selectedOption.label;
+      }
+      // if input was completely cleared, ensure it stays clear
+      // e.g. defaultValue defined, but no selection yet made
+      else if (inputValue === '') {
+        newInputValue = '';
+      }
+      this.setState(() => ({
+        isShowingOptions: false,
+        highlightedOptionId: void 0,
+        inputValue: newInputValue,
+        filteredOptions: this.filterOptions('')
+      }));
+      if (this.state.fireChangeOnBlur && event.key !== 'Escape') {
+        var _this$props$onChange, _this$props6;
         this.setState(() => ({
-          isShowingOptions: false,
-          highlightedOptionId: void 0,
-          inputValue: this.state.lastValidInput || defaultValue || '',
-          filteredOptions: this.filterOptions('')
+          fireChangeOnBlur: void 0
         }));
+        (_this$props$onChange = (_this$props6 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props6, event, {
+          value: this.state.fireChangeOnBlur.value.toISOString(),
+          inputText: this.state.fireChangeOnBlur.label
+        });
       }
-      (_this$props$onHideOpt = (_this$props5 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props5, event);
-    };
-    this.handleHighlightOption = (event, _ref) => {
-      let id = _ref.id;
-      if (id === this._emptyOptionId) return;
-      const type = event.type;
-      const option = this.getOption('id', id).label;
-      this.setState(state => ({
-        highlightedOptionId: id,
-        inputValue: type === 'keydown' ? option : state.inputValue
-      }));
+      // TODO only fire this if handleSelectOption was not called before.
+      (_this$props$onHideOpt = (_this$props7 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props7, event);
     };
-    this.handleSelectOption = (event, _ref2) => {
-      var _this$props$onHideOpt2, _this$props7;
-      let id = _ref2.id;
-      if (id === this._emptyOptionId) {
+    this.handleSelectOption = (event, data) => {
+      var _this$props$onHideOpt2, _this$props9;
+      if (data.id === this._emptyOptionId) {
         this.setState({
           isShowingOptions: false
         });
         return;
       }
-      const option = this.getOption('id', id);
+      const selectedOption = this.getOption('id', data.id);
       let newInputValue;
+      const currentSelectedOptionId = this.state.selectedOptionId;
       if (this.isControlled) {
+        // in controlled mode we leave to the user to set the value of the
+        // component e.g. in the onChange event handler.
+        // This is accomplished by not setting a selectedOptionId
         const prev = this.getOption('id', this.state.selectedOptionId);
         newInputValue = prev ? prev.label : '';
         this.setState({
-          isShowingOptions: false,
-          inputValue: newInputValue,
-          filteredOptions: this.filterOptions('')
+          isShowingOptions: false
         });
       } else {
-        newInputValue = option.label;
+        newInputValue = selectedOption.label;
         this.setState({
           isShowingOptions: false,
-          selectedOptionId: id,
-          inputValue: newInputValue,
-          filteredOptions: this.filterOptions('')
-        });
-      }
-      if (id !== this.state.selectedOptionId) {
-        var _this$props$onChange, _this$props6;
-        this.setState({
-          lastValidInput: newInputValue
-        });
-        (_this$props$onChange = (_this$props6 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props6, event, {
-          value: option.value,
-          inputText: newInputValue
+          selectedOptionId: data.id,
+          inputValue: newInputValue
         });
       }
-      (_this$props$onHideOpt2 = (_this$props7 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props7, event);
-    };
-    this.onKeyDown = event => {
-      var _this$props$onKeyDown, _this$props9;
-      const input = this.parseInputText(this.state.inputValue);
-      // validate input and if OK close dropdown
-      if (event.key === 'Enter' && this.props.allowNonStepInput && input.isValid() && input.minute() % this.props.step !== 0 && this.state.lastValidInput != this.state.inputValue) {
+      if (data.id !== currentSelectedOptionId) {
         var _this$props$onChange2, _this$props8;
-        this.setState(() => ({
-          isShowingOptions: false,
-          highlightedOptionId: void 0,
-          filteredOptions: this.filterOptions(''),
-          lastValidInput: this.state.inputValue
-        }));
         (_this$props$onChange2 = (_this$props8 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props8, event, {
-          value: input.toISOString(),
-          inputText: this.state.inputValue
+          value: selectedOption.value.toISOString(),
+          inputText: newInputValue
         });
-        // others are set in OnHideOptions
       }
-
-      (_this$props$onKeyDown = (_this$props9 = this.props).onKeyDown) === null || _this$props$onKeyDown === void 0 ? void 0 : _this$props$onKeyDown.call(_this$props9, event);
+      (_this$props$onHideOpt2 = (_this$props9 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props9, event);
+    };
+    this.handleHighlightOption = (event, data) => {
+      if (data.id === this._emptyOptionId) return;
+      const option = this.getOption('id', data.id).label;
+      this.setState(state => ({
+        highlightedOptionId: data.id,
+        inputValue: event.type === 'keydown' ? option : state.inputValue
+      }));
     };
     this.parseInputText = inputValue => {
       const input = _DateTime.DateTime.parse(inputValue, this.locale(), this.timezone(), [this.props.format], true);
@@ -249,22 +264,29 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     return _DateTime.DateTime.browserTimeZone();
   }
   componentDidUpdate(prevProps) {
-    if (this.props.step !== prevProps.step || this.props.format !== prevProps.format || this.props.locale !== prevProps.locale || this.props.timezone !== prevProps.timezone) {
+    if (this.props.step !== prevProps.step || this.props.format !== prevProps.format || this.props.locale !== prevProps.locale || this.props.timezone !== prevProps.timezone || this.props.allowNonStepInput !== prevProps.allowNonStepInput) {
       // options change, reset everything
       // when controlled, selection will be preserved
       // when uncontrolled, selection will be lost
       this.setState(this.getInitialState());
     }
     if (this.props.value !== prevProps.value) {
-      const normalizedValue = this.normalizeISOTime(this.props.value);
+      let newValue;
+      if (this.props.value) {
+        newValue = _DateTime.DateTime.parse(this.props.value, this.locale(), this.timezone());
+      }
       // value changed
       const initState = this.getInitialState();
       this.setState(initState);
       // options need to be passed because state is not set immediately
-      let option = this.getOption('value', normalizedValue, initState.options);
-      if (typeof normalizedValue === 'undefined') {
+      let option;
+      if (!this.isControlled) {
         // preserve current value when changing from controlled to uncontrolled
-        option = this.getOption('value', this.normalizeISOTime(prevProps.value));
+        if (prevProps.value) {
+          option = this.getOption('id', this.getFormattedId(_DateTime.DateTime.parse(prevProps.value, this.locale(), this.timezone())));
+        }
+      } else if (newValue) {
+        option = this.getOption('id', this.getFormattedId(newValue), initState.options);
       }
       const outsideVal = this.props.value ? this.props.value : '';
       // value does not match an existing option
@@ -279,14 +301,10 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       });
     }
   }
-
-  // value needs to be normalized because e.g. 2022-03-29T19:00Z and
-  // 2022-03-29T19:00:00.000Z refer to the same time in the same timezone.
-  normalizeISOTime(value) {
-    if (!value) {
-      return value;
-    }
-    return _DateTime.DateTime.parse(value, this.locale(), this.timezone()).toISOString();
+  getFormattedId(date) {
+    // ISO8601 strings may contain a space. Remove any spaces before using the
+    // date as the id.
+    return date.toISOString().replace(/\s/g, '');
   }
   getInitialState() {
     const initialOptions = this.generateOptions();
@@ -294,7 +312,8 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     return {
       inputValue: initialSelection ? initialSelection.label : '',
       options: initialOptions,
-      filteredOptions: initialOptions,
+      // 288 = 5 min step
+      filteredOptions: initialOptions.length > 288 ? initialOptions.filter(opt => opt.value.minute() % this.props.step === 0) : initialOptions,
       isShowingOptions: false,
       highlightedOptionId: initialSelection ? initialSelection.id : void 0,
       selectedOptionId: initialSelection ? initialSelection.id : void 0
@@ -308,16 +327,18 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       format = _this$props10.format;
     const initialValue = value || defaultValue;
     if (typeof initialValue === 'string') {
+      const date = _DateTime.DateTime.parse(initialValue, this.locale(), this.timezone());
       // get option based on value or defaultValue, if provided
-      const option = this.getOption('value', this.normalizeISOTime(initialValue), options);
+      const option = this.getOption('value', date, options);
       if (option) {
         // value matches an existing option
         return option;
       }
       // value does not match an existing option
-      const date = _DateTime.DateTime.parse(initialValue, this.locale(), this.timezone());
       return {
-        label: format ? date.format(format) : date.toISOString()
+        id: this.getFormattedId(date),
+        label: format ? date.format(format) : date.toISOString(),
+        value: date
       };
     }
     // otherwise, return first option, if desired
@@ -326,11 +347,6 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     }
     return void 0;
   }
-  getFormattedId(date) {
-    // ISO8601 strings may contain a space. Remove any spaces before using the
-    // date as the id.
-    return date.toISOString().replace(/\s/g, '');
-  }
   getBaseDate() {
     let baseDate;
     const baseValue = this.props.value || this.props.defaultValue;
@@ -347,9 +363,12 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   generateOptions() {
     const date = this.getBaseDate();
     const options = [];
+    const step = this.props.step ? this.props.step : 30;
+    const maxMinute = this.props.allowNonStepInput ? 60 : 60 / step;
+    const minuteStep = this.props.allowNonStepInput ? 1 : step;
     for (let hour = 0; hour < 24; hour++) {
-      for (let minute = 0; minute < 60 / this.props.step; minute++) {
-        const minutes = minute * this.props.step;
+      for (let minute = 0; minute < maxMinute; minute++) {
+        const minutes = minute * minuteStep;
         const newDate = date.set({
           hour: hour,
           minute: minutes
@@ -357,8 +376,7 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
         // store time options
         options.push({
           id: this.getFormattedId(newDate),
-          // iso no spaces
-          value: newDate.toISOString(),
+          value: newDate.clone(),
           label: this.props.format ? newDate.format(this.props.format) : newDate.toISOString()
         });
       }
@@ -366,58 +384,38 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     return options;
   }
   filterOptions(inputValue) {
-    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$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
-      if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
-        return {
-          inputValue: onlyOption.label,
-          selectedOptionId: onlyOption.id,
-          filteredOptions: this.filterOptions('')
-        };
-      }
-    }
-    // no match found, return selected option label to input
-    const selectedOption = this.getOption('id', selectedOptionId);
-    if (selectedOption) {
-      return {
-        inputValue: selectedOption.label
-      };
-    }
-    // input value is from highlighted option, not user input
-    if (highlightedOptionId) {
-      if (inputValue === this.getOption('id', highlightedOptionId).label) {
-        return {
-          inputValue: '',
-          filteredOptions: this.filterOptions('')
-        };
+    var _this$state3;
+    let inputNoSeconds = inputValue;
+    // if the input contains seconds disregard them (e.g. if format = LTS)
+    if (inputValue.length > 5) {
+      // e.g. "5:34:"
+      const input = this.parseInputText(inputValue);
+      if (input.isValid()) {
+        input.set({
+          second: 0
+        });
+        inputNoSeconds = input.format(this.props.format);
       }
     }
-    // if input was completely cleared, ensure it stays clear
-    // e.g. defaultValue defined, but no selection yet made
-    if (inputValue === '') {
-      return {
-        inputValue: ''
-      };
+    if (this.props.allowNonStepInput && inputNoSeconds.length < 3) {
+      var _this$state2;
+      // could show too many results, show only step values
+      return (_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.options.filter(option => {
+        return option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()) && option.value.minute() % this.props.step == 0;
+      });
     }
-    return void 0;
+    return (_this$state3 = this.state) === null || _this$state3 === void 0 ? void 0 : _this$state3.options.filter(option => option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()));
   }
+
+  // Called when the input is blurred (=when clicking outside, tabbing away),
+  // when pressing ESC. NOT called when an item is selected via Enter/click,
+  // (but in this case it will be called later when the input is blurred.)
+  // Called when an option is selected via mouse click or Enter.
   renderOptions() {
-    const _this$state3 = this.state,
-      filteredOptions = _this$state3.filteredOptions,
-      highlightedOptionId = _this$state3.highlightedOptionId,
-      selectedOptionId = _this$state3.selectedOptionId;
+    const _this$state4 = this.state,
+      filteredOptions = _this$state4.filteredOptions,
+      highlightedOptionId = _this$state4.highlightedOptionId,
+      selectedOptionId = _this$state4.selectedOptionId;
     if (filteredOptions.length < 1) {
       return this.renderEmptyOption();
     }
@@ -467,9 +465,9 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       onKeyDown = _this$props11.onKeyDown,
       mountNode = _this$props11.mountNode,
       rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded);
-    const _this$state4 = this.state,
-      inputValue = _this$state4.inputValue,
-      isShowingOptions = _this$state4.isShowingOptions;
+    const _this$state5 = this.state,
+      inputValue = _this$state5.inputValue,
+      isShowingOptions = _this$state5.isShowingOptions;
     return /*#__PURE__*/_react.default.createElement(_Select.Select, Object.assign({
       mountNode: mountNode,
       renderLabel: renderLabel,
@@ -494,7 +492,7 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       renderAfterInput: renderAfterInput,
       isShowingOptions: isShowingOptions,
       onRequestShowOptions: this.handleShowOptions,
-      onRequestHideOptions: this.handleHideOptions,
+      onRequestHideOptions: this.handleBlurOrEsc,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
       onInputChange: this.handleInputChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-time-select",
-  "version": "8.37.1-snapshot-13",
+  "version": "8.38.0",
   "description": "A component for selecting time values.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@instructure/shared-types": "8.37.1-snapshot-13",
-    "@instructure/ui-form-field": "8.37.1-snapshot-13",
-    "@instructure/ui-i18n": "8.37.1-snapshot-13",
-    "@instructure/ui-position": "8.37.1-snapshot-13",
-    "@instructure/ui-prop-types": "8.37.1-snapshot-13",
-    "@instructure/ui-react-utils": "8.37.1-snapshot-13",
-    "@instructure/ui-select": "8.37.1-snapshot-13",
-    "@instructure/ui-test-locator": "8.37.1-snapshot-13",
-    "@instructure/ui-testable": "8.37.1-snapshot-13",
-    "@instructure/ui-utils": "8.37.1-snapshot-13",
+    "@instructure/shared-types": "8.38.0",
+    "@instructure/ui-form-field": "8.38.0",
+    "@instructure/ui-i18n": "8.38.0",
+    "@instructure/ui-position": "8.38.0",
+    "@instructure/ui-prop-types": "8.38.0",
+    "@instructure/ui-react-utils": "8.38.0",
+    "@instructure/ui-select": "8.38.0",
+    "@instructure/ui-test-locator": "8.38.0",
+    "@instructure/ui-testable": "8.38.0",
+    "@instructure/ui-utils": "8.38.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.37.1-snapshot-13",
-    "@instructure/ui-test-utils": "8.37.1-snapshot-13",
+    "@instructure/ui-babel-preset": "8.38.0",
+    "@instructure/ui-test-utils": "8.38.0",
     "moment-timezone": "^0.5.43"
   },
   "peerDependencies": {

package/src/TimeSelect/README.md

@@ -2,7 +2,7 @@
 describes: TimeSelect
 ---
 
-`TimeSelect` component is a higher level abstraction of [Select](#Select) specifically for selecting time values. The list of possible values can be configured via the component's props. If you need to select times and dates, be sure to check out the documentation around [Time and Date patterns](#TimeDate).
+`TimeSelect` component is a higher level abstraction of [Select](#Select) specifically for selecting time values. The list of possible values can be configured via the component's props.
 
 ### Uncontrolled