@instructure/ui-time-select 8.25.1-snapshot-10 → 8.25.1-snapshot-13

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.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-time-select
 

package/es/TimeSelect/index.js

@@ -1,7 +1,7 @@
 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"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -41,29 +41,138 @@ category: components
 
 A component used to select a time value.
  **/
-let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = class TimeSelect extends Component {
-  static displayName = "TimeSelect";
-  static componentId = 'TimeSelect';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    defaultToFirstOption: false,
-    format: 'LT',
-    // see https://momentjs.com/docs/#/displaying/
-    step: 30,
-    isRequired: false,
-    isInline: false,
-    visibleOptionsCount: 8,
-    placement: 'bottom stretch',
-    constrain: 'window',
-    renderEmptyOption: '---'
-  };
-  static contextType = ApplyLocaleContext;
-  ref = null;
-  _emptyOptionId = this.props.deterministicId('Select-EmptyOption');
-
+let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TimeSelect extends Component {
   constructor(props) {
+    var _this;
+
     super(props);
+    _this = this;
+    this.ref = null;
+    this._emptyOptionId = this.props.deterministicId('Select-EmptyOption');
+
+    this.getOption = function (field, value) {
+      let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : _this.state.options;
+      return options.find(option => option[field] === value);
+    };
+
+    this.handleRef = node => {
+      this.ref = node;
+    };
+
+    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 => {
+      const value = event.target.value;
+      const newOptions = this.filterOptions(value);
+      this.setState({
+        inputValue: value,
+        filteredOptions: newOptions,
+        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : void 0,
+        isShowingOptions: true
+      });
+
+      if (!this.state.isShowingOptions) {
+        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,
+        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.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 = DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
+        prevValue = 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);
+    };
+
+    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
+      }));
+    };
+
+    this.handleSelectOption = (event, _ref2) => {
+      var _this$props$onHideOpt2, _this$props6;
+
+      let id = _ref2.id;
+
+      if (id === this._emptyOptionId) {
+        this.setState({
+          isShowingOptions: false
+        });
+        return;
+      }
+
+      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: newInputValue,
+          filteredOptions: this.filterOptions('')
+        });
+      } else {
+        newInputValue = option.label;
+        this.setState({
+          isShowingOptions: false,
+          selectedOptionId: id,
+          inputValue: newInputValue,
+          filteredOptions: this.filterOptions('')
+        });
+      }
+
+      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, {
+          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.state = this.getInitialState();
   }
 
@@ -177,11 +286,11 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
   }
 
   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') {
@@ -208,15 +317,6 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     return void 0;
   }
 
-  getOption = (() => {
-    var _this = this;
-
-    return function (field, value) {
-      let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : _this.state.options;
-      return options.find(option => option[field] === value);
-    };
-  })();
-
   getFormattedId(date) {
     // ISO8601 strings may contain a space. Remove any spaces before using the
     // date as the id.
@@ -318,118 +418,6 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     return void 0;
   }
 
-  handleRef = node => {
-    this.ref = node;
-  };
-  handleBlur = event => {
-    var _this$props$onBlur, _this$props2;
-
-    this.setState({
-      highlightedOptionId: void 0
-    });
-    (_this$props$onBlur = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, event);
-  };
-  handleInputChange = event => {
-    const value = event.target.value;
-    const newOptions = this.filterOptions(value);
-    this.setState({
-      inputValue: value,
-      filteredOptions: newOptions,
-      highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : void 0,
-      isShowingOptions: true
-    });
-
-    if (!this.state.isShowingOptions) {
-      var _this$props$onShowOpt, _this$props3;
-
-      (_this$props$onShowOpt = (_this$props3 = this.props).onShowOptions) === null || _this$props$onShowOpt === void 0 ? void 0 : _this$props$onShowOpt.call(_this$props3, event);
-    }
-  };
-  handleShowOptions = event => {
-    var _this$props$onShowOpt2, _this$props4;
-
-    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);
-  };
-  handleHideOptions = event => {
-    var _this$props$onHideOpt, _this$props5;
-
-    const selectedOptionId = this.state.selectedOptionId;
-    const option = this.getOption('id', selectedOptionId);
-    let prevValue = '';
-
-    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();
-    }
-
-    this.setState(() => ({
-      isShowingOptions: false,
-      highlightedOptionId: void 0,
-      inputValue: selectedOptionId ? option.label : prevValue,
-      filteredOptions: this.filterOptions(''),
-      ...this.matchValue()
-    }));
-    (_this$props$onHideOpt = (_this$props5 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props5, event);
-  };
-  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
-    }));
-  };
-  handleSelectOption = (event, _ref2) => {
-    var _this$props$onHideOpt2, _this$props7;
-
-    let id = _ref2.id;
-
-    if (id === this._emptyOptionId) {
-      this.setState({
-        isShowingOptions: false
-      });
-      return;
-    }
-
-    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: newInputValue,
-        filteredOptions: this.filterOptions('')
-      });
-    } else {
-      newInputValue = option.label;
-      this.setState({
-        isShowingOptions: false,
-        selectedOptionId: id,
-        inputValue: newInputValue,
-        filteredOptions: this.filterOptions('')
-      });
-    }
-
-    if (id !== this.state.selectedOptionId) {
-      var _this$props$onChange, _this$props6;
-
-      (_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$props7 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props7, event);
-  };
-
   renderOptions() {
     const _this$state3 = this.state,
           filteredOptions = _this$state3.filteredOptions,
@@ -519,6 +507,17 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     }, passthroughProps(rest)), isShowingOptions && this.renderOptions());
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  defaultToFirstOption: false,
+  format: 'LT',
+  // see https://momentjs.com/docs/#/displaying/
+  step: 30,
+  isRequired: false,
+  isInline: false,
+  visibleOptionsCount: 8,
+  placement: 'bottom stretch',
+  constrain: 'window',
+  renderEmptyOption: '---'
+}, _class2.contextType = ApplyLocaleContext, _class2)) || _class) || _class);
 export { TimeSelect };
 export default TimeSelect;

package/lib/TimeSelect/index.js

@@ -35,7 +35,7 @@ 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"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -45,29 +45,139 @@ category: components
 
 A component used to select a time value.
  **/
-let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class TimeSelect extends _react.Component {
-  static displayName = "TimeSelect";
-  static componentId = 'TimeSelect';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    defaultToFirstOption: false,
-    format: 'LT',
-    // see https://momentjs.com/docs/#/displaying/
-    step: 30,
-    isRequired: false,
-    isInline: false,
-    visibleOptionsCount: 8,
-    placement: 'bottom stretch',
-    constrain: 'window',
-    renderEmptyOption: '---'
-  };
-  static contextType = _ApplyLocaleContext.ApplyLocaleContext;
-  ref = null;
-  _emptyOptionId = this.props.deterministicId('Select-EmptyOption');
-
+let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TimeSelect extends _react.Component {
   constructor(props) {
+    var _this;
+
     super(props);
+    _this = this;
+    this.ref = null;
+    this._emptyOptionId = this.props.deterministicId('Select-EmptyOption');
+
+    this.getOption = function (field, value) {
+      let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : _this.state.options;
+      return options.find(option => option[field] === value);
+    };
+
+    this.handleRef = node => {
+      this.ref = node;
+    };
+
+    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 => {
+      const value = event.target.value;
+      const newOptions = this.filterOptions(value);
+      this.setState({
+        inputValue: value,
+        filteredOptions: newOptions,
+        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : void 0,
+        isShowingOptions: true
+      });
+
+      if (!this.state.isShowingOptions) {
+        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,
+        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.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 = _DateTime.DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
+
+        prevValue = 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);
+    };
+
+    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
+      }));
+    };
+
+    this.handleSelectOption = (event, _ref2) => {
+      var _this$props$onHideOpt2, _this$props6;
+
+      let id = _ref2.id;
+
+      if (id === this._emptyOptionId) {
+        this.setState({
+          isShowingOptions: false
+        });
+        return;
+      }
+
+      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: newInputValue,
+          filteredOptions: this.filterOptions('')
+        });
+      } else {
+        newInputValue = option.label;
+        this.setState({
+          isShowingOptions: false,
+          selectedOptionId: id,
+          inputValue: newInputValue,
+          filteredOptions: this.filterOptions('')
+        });
+      }
+
+      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, {
+          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.state = this.getInitialState();
   }
 
@@ -182,11 +292,11 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   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') {
@@ -214,15 +324,6 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     return void 0;
   }
 
-  getOption = (() => {
-    var _this = this;
-
-    return function (field, value) {
-      let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : _this.state.options;
-      return options.find(option => option[field] === value);
-    };
-  })();
-
   getFormattedId(date) {
     // ISO8601 strings may contain a space. Remove any spaces before using the
     // date as the id.
@@ -324,119 +425,6 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     return void 0;
   }
 
-  handleRef = node => {
-    this.ref = node;
-  };
-  handleBlur = event => {
-    var _this$props$onBlur, _this$props2;
-
-    this.setState({
-      highlightedOptionId: void 0
-    });
-    (_this$props$onBlur = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, event);
-  };
-  handleInputChange = event => {
-    const value = event.target.value;
-    const newOptions = this.filterOptions(value);
-    this.setState({
-      inputValue: value,
-      filteredOptions: newOptions,
-      highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : void 0,
-      isShowingOptions: true
-    });
-
-    if (!this.state.isShowingOptions) {
-      var _this$props$onShowOpt, _this$props3;
-
-      (_this$props$onShowOpt = (_this$props3 = this.props).onShowOptions) === null || _this$props$onShowOpt === void 0 ? void 0 : _this$props$onShowOpt.call(_this$props3, event);
-    }
-  };
-  handleShowOptions = event => {
-    var _this$props$onShowOpt2, _this$props4;
-
-    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);
-  };
-  handleHideOptions = event => {
-    var _this$props$onHideOpt, _this$props5;
-
-    const selectedOptionId = this.state.selectedOptionId;
-    const option = this.getOption('id', selectedOptionId);
-    let prevValue = '';
-
-    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();
-    }
-
-    this.setState(() => ({
-      isShowingOptions: false,
-      highlightedOptionId: void 0,
-      inputValue: selectedOptionId ? option.label : prevValue,
-      filteredOptions: this.filterOptions(''),
-      ...this.matchValue()
-    }));
-    (_this$props$onHideOpt = (_this$props5 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props5, event);
-  };
-  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
-    }));
-  };
-  handleSelectOption = (event, _ref2) => {
-    var _this$props$onHideOpt2, _this$props7;
-
-    let id = _ref2.id;
-
-    if (id === this._emptyOptionId) {
-      this.setState({
-        isShowingOptions: false
-      });
-      return;
-    }
-
-    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: newInputValue,
-        filteredOptions: this.filterOptions('')
-      });
-    } else {
-      newInputValue = option.label;
-      this.setState({
-        isShowingOptions: false,
-        selectedOptionId: id,
-        inputValue: newInputValue,
-        filteredOptions: this.filterOptions('')
-      });
-    }
-
-    if (id !== this.state.selectedOptionId) {
-      var _this$props$onChange, _this$props6;
-
-      (_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$props7 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props7, event);
-  };
-
   renderOptions() {
     const _this$state3 = this.state,
           filteredOptions = _this$state3.filteredOptions,
@@ -525,7 +513,18 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     }, (0, _passthroughProps.passthroughProps)(rest)), isShowingOptions && this.renderOptions());
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  defaultToFirstOption: false,
+  format: 'LT',
+  // see https://momentjs.com/docs/#/displaying/
+  step: 30,
+  isRequired: false,
+  isInline: false,
+  visibleOptionsCount: 8,
+  placement: 'bottom stretch',
+  constrain: 'window',
+  renderEmptyOption: '---'
+}, _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2)) || _class) || _class);
 exports.TimeSelect = TimeSelect;
 var _default = TimeSelect;
 exports.default = _default;

package/package.json

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