@instructure/ui-time-select 8.34.1-snapshot-1 → 8.35.0

package/CHANGELOG.md

@@ -3,13 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.34.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.34.0...v8.34.1-snapshot-1) (2023-02-17)
-
-**Note:** Version bump only for package @instructure/ui-time-select
-
-
+# [8.35.0](https://github.com/instructure/instructure-ui/compare/v8.34.0...v8.35.0) (2023-02-17)
 
+### Features
 
+- **ui-time-select:** allow non-step values with allowNonStepInput ([6dace32](https://github.com/instructure/instructure-ui/commit/6dace32d7fbb4d13227ac988b83f521308541204))
 
 # [8.34.0](https://github.com/instructure/instructure-ui/compare/v8.33.2...v8.34.0) (2023-02-10)
 

package/es/TimeSelect/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["value", "defaultValue", "placeholder", "renderLabel", "inputRef", "id", "listRef", "renderBeforeInput", "renderAfterInput", "isRequired", "isInline", "width", "format", "step", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "onFocus", "onShowOptions", "onHideOptions", "mountNode"];
+const _excluded = ["value", "defaultValue", "placeholder", "renderLabel", "inputRef", "id", "listRef", "renderBeforeInput", "renderAfterInput", "isRequired", "isInline", "width", "format", "step", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "onFocus", "onShowOptions", "onHideOptions", "onInputChange", "onKeyDown", "mountNode"];
 var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
@@ -61,6 +61,7 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       (_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);
       this.setState({
@@ -73,32 +74,44 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
         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);
       }
+      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.handleShowOptions = event => {
-      var _this$props$onShowOpt2, _this$props3;
+      var _this$props$onShowOpt2, _this$props4;
       this.setState({
         isShowingOptions: true,
         highlightedOptionId: this.state.selectedOptionId
       });
-      (_this$props$onShowOpt2 = (_this$props3 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props3, event);
+      (_this$props$onShowOpt2 = (_this$props4 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props4, event);
     };
     this.handleHideOptions = event => {
-      var _this$props$onHideOpt, _this$props4;
-      const selectedOptionId = this.state.selectedOptionId;
-      const option = this.getOption('id', selectedOptionId);
-      let prevValue = '';
+      var _this$props$onHideOpt, _this$props5;
+      const input = this.parseInputText(this.state.inputValue);
+      let defaultValue = '';
       if (this.props.defaultValue) {
         const date = DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
-        prevValue = this.props.format ? date.format(this.props.format) : date.toISOString();
+        defaultValue = this.props.format ? date.format(this.props.format) : date.toISOString();
       }
-      this.setState(() => ({
-        isShowingOptions: false,
-        highlightedOptionId: void 0,
-        inputValue: selectedOptionId ? option.label : prevValue,
-        filteredOptions: this.filterOptions(''),
-        ...this.matchValue()
-      }));
-      (_this$props$onHideOpt = (_this$props4 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props4, event);
+      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 {
+        this.setState(() => ({
+          isShowingOptions: false,
+          highlightedOptionId: void 0,
+          inputValue: this.state.lastValidInput || defaultValue || '',
+          filteredOptions: this.filterOptions('')
+        }));
+      }
+      (_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;
@@ -111,7 +124,7 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       }));
     };
     this.handleSelectOption = (event, _ref2) => {
-      var _this$props$onHideOpt2, _this$props6;
+      var _this$props$onHideOpt2, _this$props7;
       let id = _ref2.id;
       if (id === this._emptyOptionId) {
         this.setState({
@@ -139,13 +152,45 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
         });
       }
       if (id !== this.state.selectedOptionId) {
-        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, {
+        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
         });
       }
-      (_this$props$onHideOpt2 = (_this$props6 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props6, event);
+      (_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) {
+        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
+        });
+        // 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.parseInputText = inputValue => {
+      const input = DateTime.parse(inputValue, this.locale(), this.timezone(), [this.props.format], true);
+      const baseDate = this.getBaseDate();
+      input.year(baseDate.year());
+      input.month(baseDate.month());
+      input.date(baseDate.date());
+      return input;
     };
     this.state = this.getInitialState();
   }
@@ -212,7 +257,10 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       const outsideVal = this.props.value ? this.props.value : '';
       // value does not match an existing option
       const date = DateTime.parse(outsideVal, this.locale(), this.timezone());
-      const label = this.props.format ? date.format(this.props.format) : date.toISOString();
+      let label = '';
+      if (date.isValid()) {
+        label = this.props.format ? date.format(this.props.format) : date.toISOString();
+      }
       this.setState({
         inputValue: option ? option.label : label,
         selectedOptionId: option ? option.id : void 0
@@ -241,11 +289,11 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     };
   }
   getInitialOption(options) {
-    const _this$props7 = this.props,
-      value = _this$props7.value,
-      defaultValue = _this$props7.defaultValue,
-      defaultToFirstOption = _this$props7.defaultToFirstOption,
-      format = _this$props7.format;
+    const _this$props10 = this.props,
+      value = _this$props10.value,
+      defaultValue = _this$props10.defaultValue,
+      defaultToFirstOption = _this$props10.defaultToFirstOption,
+      format = _this$props10.format;
     const initialValue = value || defaultValue;
     if (typeof initialValue === 'string') {
       // get option based on value or defaultValue, if provided
@@ -380,31 +428,33 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     }, callRenderProp(this.props.renderEmptyOption));
   }
   render() {
-    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,
-      mountNode = _this$props8.mountNode,
-      rest = _objectWithoutProperties(_this$props8, _excluded);
+    const _this$props11 = this.props,
+      value = _this$props11.value,
+      defaultValue = _this$props11.defaultValue,
+      placeholder = _this$props11.placeholder,
+      renderLabel = _this$props11.renderLabel,
+      inputRef = _this$props11.inputRef,
+      id = _this$props11.id,
+      listRef = _this$props11.listRef,
+      renderBeforeInput = _this$props11.renderBeforeInput,
+      renderAfterInput = _this$props11.renderAfterInput,
+      isRequired = _this$props11.isRequired,
+      isInline = _this$props11.isInline,
+      width = _this$props11.width,
+      format = _this$props11.format,
+      step = _this$props11.step,
+      optionsMaxWidth = _this$props11.optionsMaxWidth,
+      visibleOptionsCount = _this$props11.visibleOptionsCount,
+      messages = _this$props11.messages,
+      placement = _this$props11.placement,
+      constrain = _this$props11.constrain,
+      onFocus = _this$props11.onFocus,
+      onShowOptions = _this$props11.onShowOptions,
+      onHideOptions = _this$props11.onHideOptions,
+      onInputChange = _this$props11.onInputChange,
+      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;
@@ -435,7 +485,8 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       onRequestHideOptions: this.handleHideOptions,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
-      onInputChange: this.handleInputChange
+      onInputChange: this.handleInputChange,
+      onKeyDown: this.onKeyDown
     }, passthroughProps(rest)), isShowingOptions && this.renderOptions());
   }
 }, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
@@ -448,7 +499,8 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  renderEmptyOption: '---'
+  renderEmptyOption: '---',
+  allowNonStepInput: false
 }, _class2.contextType = ApplyLocaleContext, _class2)) || _class) || _class);
 export { TimeSelect };
 export default TimeSelect;

package/es/TimeSelect/props.js

@@ -57,7 +57,9 @@ const propTypes = {
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   locale: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  allowNonStepInput: PropTypes.bool,
+  onInputChange: PropTypes.func
 };
-const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone'];
+const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange'];
 export { propTypes, allowedProps };

package/lib/TimeSelect/index.js

@@ -18,7 +18,7 @@ var _withDeterministicId = require("@instructure/ui-react-utils/lib/Deterministi
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _Select = require("@instructure/ui-select/lib/Select");
 var _props = require("./props");
-const _excluded = ["value", "defaultValue", "placeholder", "renderLabel", "inputRef", "id", "listRef", "renderBeforeInput", "renderAfterInput", "isRequired", "isInline", "width", "format", "step", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "onFocus", "onShowOptions", "onHideOptions", "mountNode"];
+const _excluded = ["value", "defaultValue", "placeholder", "renderLabel", "inputRef", "id", "listRef", "renderBeforeInput", "renderAfterInput", "isRequired", "isInline", "width", "format", "step", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "onFocus", "onShowOptions", "onHideOptions", "onInputChange", "onKeyDown", "mountNode"];
 var _dec, _dec2, _class, _class2;
 /**
 ---
@@ -50,6 +50,7 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       (_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);
       this.setState({
@@ -62,32 +63,44 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
         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);
       }
+      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.handleShowOptions = event => {
-      var _this$props$onShowOpt2, _this$props3;
+      var _this$props$onShowOpt2, _this$props4;
       this.setState({
         isShowingOptions: true,
         highlightedOptionId: this.state.selectedOptionId
       });
-      (_this$props$onShowOpt2 = (_this$props3 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props3, event);
+      (_this$props$onShowOpt2 = (_this$props4 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props4, event);
     };
     this.handleHideOptions = event => {
-      var _this$props$onHideOpt, _this$props4;
-      const selectedOptionId = this.state.selectedOptionId;
-      const option = this.getOption('id', selectedOptionId);
-      let prevValue = '';
+      var _this$props$onHideOpt, _this$props5;
+      const input = this.parseInputText(this.state.inputValue);
+      let defaultValue = '';
       if (this.props.defaultValue) {
         const date = _DateTime.DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
-        prevValue = this.props.format ? date.format(this.props.format) : date.toISOString();
+        defaultValue = this.props.format ? date.format(this.props.format) : date.toISOString();
       }
-      this.setState(() => ({
-        isShowingOptions: false,
-        highlightedOptionId: void 0,
-        inputValue: selectedOptionId ? option.label : prevValue,
-        filteredOptions: this.filterOptions(''),
-        ...this.matchValue()
-      }));
-      (_this$props$onHideOpt = (_this$props4 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props4, event);
+      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 {
+        this.setState(() => ({
+          isShowingOptions: false,
+          highlightedOptionId: void 0,
+          inputValue: this.state.lastValidInput || defaultValue || '',
+          filteredOptions: this.filterOptions('')
+        }));
+      }
+      (_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;
@@ -100,7 +113,7 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       }));
     };
     this.handleSelectOption = (event, _ref2) => {
-      var _this$props$onHideOpt2, _this$props6;
+      var _this$props$onHideOpt2, _this$props7;
       let id = _ref2.id;
       if (id === this._emptyOptionId) {
         this.setState({
@@ -128,13 +141,45 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
         });
       }
       if (id !== this.state.selectedOptionId) {
-        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, {
+        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
         });
       }
-      (_this$props$onHideOpt2 = (_this$props6 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props6, event);
+      (_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) {
+        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
+        });
+        // 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.parseInputText = inputValue => {
+      const input = _DateTime.DateTime.parse(inputValue, this.locale(), this.timezone(), [this.props.format], true);
+      const baseDate = this.getBaseDate();
+      input.year(baseDate.year());
+      input.month(baseDate.month());
+      input.date(baseDate.date());
+      return input;
     };
     this.state = this.getInitialState();
   }
@@ -201,7 +246,10 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       const outsideVal = this.props.value ? this.props.value : '';
       // value does not match an existing option
       const date = _DateTime.DateTime.parse(outsideVal, this.locale(), this.timezone());
-      const label = this.props.format ? date.format(this.props.format) : date.toISOString();
+      let label = '';
+      if (date.isValid()) {
+        label = this.props.format ? date.format(this.props.format) : date.toISOString();
+      }
       this.setState({
         inputValue: option ? option.label : label,
         selectedOptionId: option ? option.id : void 0
@@ -230,11 +278,11 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     };
   }
   getInitialOption(options) {
-    const _this$props7 = this.props,
-      value = _this$props7.value,
-      defaultValue = _this$props7.defaultValue,
-      defaultToFirstOption = _this$props7.defaultToFirstOption,
-      format = _this$props7.format;
+    const _this$props10 = this.props,
+      value = _this$props10.value,
+      defaultValue = _this$props10.defaultValue,
+      defaultToFirstOption = _this$props10.defaultToFirstOption,
+      format = _this$props10.format;
     const initialValue = value || defaultValue;
     if (typeof initialValue === 'string') {
       // get option based on value or defaultValue, if provided
@@ -369,31 +417,33 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     }, (0, _callRenderProp.callRenderProp)(this.props.renderEmptyOption));
   }
   render() {
-    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,
-      mountNode = _this$props8.mountNode,
-      rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded);
+    const _this$props11 = this.props,
+      value = _this$props11.value,
+      defaultValue = _this$props11.defaultValue,
+      placeholder = _this$props11.placeholder,
+      renderLabel = _this$props11.renderLabel,
+      inputRef = _this$props11.inputRef,
+      id = _this$props11.id,
+      listRef = _this$props11.listRef,
+      renderBeforeInput = _this$props11.renderBeforeInput,
+      renderAfterInput = _this$props11.renderAfterInput,
+      isRequired = _this$props11.isRequired,
+      isInline = _this$props11.isInline,
+      width = _this$props11.width,
+      format = _this$props11.format,
+      step = _this$props11.step,
+      optionsMaxWidth = _this$props11.optionsMaxWidth,
+      visibleOptionsCount = _this$props11.visibleOptionsCount,
+      messages = _this$props11.messages,
+      placement = _this$props11.placement,
+      constrain = _this$props11.constrain,
+      onFocus = _this$props11.onFocus,
+      onShowOptions = _this$props11.onShowOptions,
+      onHideOptions = _this$props11.onHideOptions,
+      onInputChange = _this$props11.onInputChange,
+      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;
@@ -424,7 +474,8 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       onRequestHideOptions: this.handleHideOptions,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
-      onInputChange: this.handleInputChange
+      onInputChange: this.handleInputChange,
+      onKeyDown: this.onKeyDown
     }, (0, _passthroughProps.passthroughProps)(rest)), isShowingOptions && this.renderOptions());
   }
 }, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
@@ -437,7 +488,8 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  renderEmptyOption: '---'
+  renderEmptyOption: '---',
+  allowNonStepInput: false
 }, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2)) || _class) || _class);
 exports.TimeSelect = TimeSelect;
 var _default = TimeSelect;

package/lib/TimeSelect/props.js

@@ -64,8 +64,10 @@ const propTypes = {
   renderBeforeInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   locale: _propTypes.default.string,
-  timezone: _propTypes.default.string
+  timezone: _propTypes.default.string,
+  allowNonStepInput: _propTypes.default.bool,
+  onInputChange: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone'];
+const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange'];
 exports.allowedProps = allowedProps;

package/package.json

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

package/src/TimeSelect/README.md

@@ -5,6 +5,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).
 
 ### Uncontrolled
+
 For the most basic implementations, `TimeSelect` can be uncontrolled. If desired, the `defaultValue` prop can be used to set the initial selection.
 
 ```javascript
@@ -15,11 +16,13 @@ render: true
 <TimeSelect
   renderLabel="Choose a time"
   onChange={(e, { value }) => console.log(value)}
+  onHideOptions={(e)=> console.log("hide opts")}
   // defaultValue={new Date().toISOString()}
 />
 ```
 
 ### Controlled
+
 To use `TimeSelect` controlled, simply provide the `value` prop an ISO string. The `onChange` callback provides the ISO value of the corresponding option that was selected. Use this value to update the state.
 
 ```javascript
@@ -54,7 +57,29 @@ render(
 )
 ```
 
+### Freeform input
+
+By default, the user can only set a value that is divisible by `step` (although the component allows to set any valid time value programmatically). You can allow the user to set any valid value with typing in by setting `allowNonStepInput` to `true`. You can use the `onInputChange` event to see whether the current input is valid and its current value.
+Note that the exact value needed to be typed by the user depends on their `locale`:
+
+```javascript
+---
+example: true
+render: true
+---
+<TimeSelect
+  renderLabel="Choose a time"
+  onChange={(e, { value }) => console.log("change",value)}
+  onInputChange={(e, value, isoValue)=> console.log("inputChange", value, isoValue)}
+  defaultValue="2022-05-12T05:30:00.000Z"
+  locale="en_AU"
+  timezone='US/Eastern'
+  allowNonStepInput
+/>
+```
+
 ### Guidelines
+
 ```js
 ---
 guidelines: true
@@ -62,6 +87,7 @@ guidelines: true
 <Guidelines>
   <Figure recommendation="yes" title="Do">
     <Figure.Item>Use a default value of 11:59 pm for implementations that have to do with due dates</Figure.Item>
+    <Figure.Item>Respect the user's `locale` and `timezone` browser settings (the component does this by itself when not setting `locale` or `timezone`).</Figure.Item>
   </Figure>
 </Guidelines>
-```
+```