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

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.37.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.37.0...v8.37.1-snapshot-13) (2023-05-15)
+# [8.38.0](https://github.com/instructure/instructure-ui/compare/v8.37.0...v8.38.0) (2023-05-15)
 
 **Note:** Version bump only for package @instructure/ui-time-select
 

package/es/TimeSelect/index.js

@@ -55,15 +55,31 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     };
     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,
@@ -77,112 +93,111 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       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.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.parse(inputValue, this.locale(), this.timezone(), [this.props.format], true);
@@ -237,22 +252,29 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     return 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.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.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
@@ -267,14 +289,10 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       });
     }
   }
-
-  // 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.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();
@@ -282,7 +300,8 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     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
@@ -296,16 +315,18 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       format = _this$props10.format;
     const initialValue = value || defaultValue;
     if (typeof initialValue === 'string') {
+      const date = 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.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
@@ -314,11 +335,6 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     }
     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;
@@ -335,9 +351,12 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
   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
@@ -345,8 +364,7 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
         // 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()
         });
       }
@@ -354,58 +372,38 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     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();
     }
@@ -455,9 +453,9 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       onKeyDown = _this$props11.onKeyDown,
       mountNode = _this$props11.mountNode,
       rest = _objectWithoutProperties(_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.createElement(Select, Object.assign({
       mountNode: mountNode,
       renderLabel: renderLabel,
@@ -482,7 +480,7 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       renderAfterInput: renderAfterInput,
       isShowingOptions: isShowingOptions,
       onRequestShowOptions: this.handleShowOptions,
-      onRequestHideOptions: this.handleHideOptions,
+      onRequestHideOptions: this.handleBlurOrEsc,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
       onInputChange: this.handleInputChange,