@instructure/ui-time-select 8.33.1 → 8.33.2

package/lib/TimeSelect/index.js

@@ -1,42 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TimeSelect = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
-
 var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
-
 var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
-
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 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"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -48,30 +31,24 @@ A component used to select a time value.
 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);
@@ -81,37 +58,28 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
         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,
@@ -121,7 +89,6 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       }));
       (_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;
@@ -132,22 +99,17 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
         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 : '';
@@ -165,76 +127,59 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
           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();
   }
-
   componentDidMount() {
     // we'll need to recalculate the state because the context value is
     // set at this point (and it might change locale & timezone)
     this.setState(this.getInitialState());
   }
-
   focus() {
     var _this$ref;
-
     (_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.focus();
   }
-
   get _select() {
     return this.ref;
   }
-
   get isControlled() {
     return typeof this.props.value !== 'undefined';
   }
-
   get interaction() {
     return (0, _getInteraction.getInteraction)({
       props: this.props
     });
   }
-
   get focused() {
     return this.ref && this.ref.focused;
   }
-
   get id() {
     return this.ref && this.ref.id;
   }
-
   locale() {
     if (this.props.locale) {
       return this.props.locale;
     } else if (this.context && this.context.locale) {
       return this.context.locale;
     }
-
     return _Locale.Locale.browserLocale();
   }
-
   timezone() {
     if (this.props.timezone) {
       return this.props.timezone;
     } else if (this.context && this.context.timezone) {
       return this.context.timezone;
     }
-
     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) {
       // options change, reset everything
@@ -242,42 +187,36 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       // when uncontrolled, selection will be lost
       this.setState(this.getInitialState());
     }
-
     if (this.props.value !== prevProps.value) {
-      const normalizedValue = this.normalizeISOTime(this.props.value); // value changed
-
+      const normalizedValue = this.normalizeISOTime(this.props.value);
+      // value changed
       const initState = this.getInitialState();
-      this.setState(initState); // options need to be passed because state is not set immediately
-
+      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') {
         // preserve current value when changing from controlled to uncontrolled
         option = this.getOption('value', this.normalizeISOTime(prevProps.value));
       }
-
-      const outsideVal = this.props.value ? this.props.value : ''; // value does not match an existing option
-
+      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();
       this.setState({
         inputValue: option ? option.label : label,
         selectedOptionId: option ? option.id : void 0
       });
     }
-  } // 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.
-
+  }
 
+  // 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();
   }
-
   getInitialState() {
     const initialOptions = this.generateOptions();
     const initialSelection = this.getInitialOption(initialOptions);
@@ -290,74 +229,61 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       selectedOptionId: initialSelection ? initialSelection.id : void 0
     };
   }
-
   getInitialOption(options) {
     const _this$props7 = this.props,
-          value = _this$props7.value,
-          defaultValue = _this$props7.defaultValue,
-          defaultToFirstOption = _this$props7.defaultToFirstOption,
-          format = _this$props7.format;
+      value = _this$props7.value,
+      defaultValue = _this$props7.defaultValue,
+      defaultToFirstOption = _this$props7.defaultToFirstOption,
+      format = _this$props7.format;
     const initialValue = value || defaultValue;
-
     if (typeof initialValue === 'string') {
       // get option based on value or defaultValue, if provided
       const option = this.getOption('value', this.normalizeISOTime(initialValue), options);
-
       if (option) {
         // value matches an existing option
         return option;
-      } // value does not match an existing 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()
       };
-    } // otherwise, return first option, if desired
-
-
+    }
+    // otherwise, return first option, if desired
     if (defaultToFirstOption) {
       return options[0];
     }
-
     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;
-
     if (baseValue) {
       baseDate = _DateTime.DateTime.parse(baseValue, this.locale(), this.timezone());
     } else {
       baseDate = _DateTime.DateTime.now(this.locale(), this.timezone());
     }
-
     return baseDate.set({
       second: 0,
       millisecond: 0
     }).clone();
   }
-
   generateOptions() {
     const date = this.getBaseDate();
     const options = [];
-
     for (let hour = 0; hour < 24; hour++) {
       for (let minute = 0; minute < 60 / this.props.step; minute++) {
         const minutes = minute * this.props.step;
         const newDate = date.set({
           hour: hour,
           minute: minutes
-        }); // store time options
-
+        });
+        // store time options
         options.push({
           id: this.getFormattedId(newDate),
           // iso no spaces
@@ -366,26 +292,23 @@ 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
+      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
-
+      const onlyOption = filteredOptions[0];
+      // automatically select the matching option
       if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
         return {
           inputValue: onlyOption.label,
@@ -393,18 +316,15 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
           filteredOptions: this.filterOptions('')
         };
       }
-    } // no match found, return selected option label to input
-
-
+    }
+    // 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
-
-
+    }
+    // input value is from highlighted option, not user input
     if (highlightedOptionId) {
       if (inputValue === this.getOption('id', highlightedOptionId).label) {
         return {
@@ -412,32 +332,27 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
           filteredOptions: this.filterOptions('')
         };
       }
-    } // if input was completely cleared, ensure it stays clear
+    }
+    // if input was completely cleared, ensure it stays clear
     // e.g. defaultValue defined, but no selection yet made
-
-
     if (inputValue === '') {
       return {
         inputValue: ''
       };
     }
-
     return void 0;
   }
-
   renderOptions() {
     const _this$state3 = this.state,
-          filteredOptions = _this$state3.filteredOptions,
-          highlightedOptionId = _this$state3.highlightedOptionId,
-          selectedOptionId = _this$state3.selectedOptionId;
-
+      filteredOptions = _this$state3.filteredOptions,
+      highlightedOptionId = _this$state3.highlightedOptionId,
+      selectedOptionId = _this$state3.selectedOptionId;
     if (filteredOptions.length < 1) {
       return this.renderEmptyOption();
     }
-
     return filteredOptions.map(option => {
       const id = option.id,
-            label = option.label;
+        label = option.label;
       return /*#__PURE__*/_react.default.createElement(_Select.Select.Option, {
         id: id,
         key: id,
@@ -446,7 +361,6 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       }, label);
     });
   }
-
   renderEmptyOption() {
     return /*#__PURE__*/_react.default.createElement(_Select.Select.Option, {
       id: this._emptyOptionId,
@@ -454,35 +368,34 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       isSelected: false
     }, (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,
-          rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded);
+      value = _this$props8.value,
+      defaultValue = _this$props8.defaultValue,
+      placeholder = _this$props8.placeholder,
+      renderLabel = _this$props8.renderLabel,
+      inputRef = _this$props8.inputRef,
+      id = _this$props8.id,
+      listRef = _this$props8.listRef,
+      renderBeforeInput = _this$props8.renderBeforeInput,
+      renderAfterInput = _this$props8.renderAfterInput,
+      isRequired = _this$props8.isRequired,
+      isInline = _this$props8.isInline,
+      width = _this$props8.width,
+      format = _this$props8.format,
+      step = _this$props8.step,
+      optionsMaxWidth = _this$props8.optionsMaxWidth,
+      visibleOptionsCount = _this$props8.visibleOptionsCount,
+      messages = _this$props8.messages,
+      placement = _this$props8.placement,
+      constrain = _this$props8.constrain,
+      onFocus = _this$props8.onFocus,
+      onShowOptions = _this$props8.onShowOptions,
+      onHideOptions = _this$props8.onHideOptions,
+      rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded);
     const _this$state4 = this.state,
-          inputValue = _this$state4.inputValue,
-          isShowingOptions = _this$state4.isShowingOptions;
+      inputValue = _this$state4.inputValue,
+      isShowingOptions = _this$state4.isShowingOptions;
     return /*#__PURE__*/_react.default.createElement(_Select.Select, Object.assign({
       renderLabel: renderLabel,
       inputValue: inputValue,
@@ -512,7 +425,6 @@ let TimeSelect = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       onInputChange: this.handleInputChange
     }, (0, _passthroughProps.passthroughProps)(rest)), isShowingOptions && this.renderOptions());
   }
-
 }, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   defaultToFirstOption: false,
   format: 'LT',

package/lib/TimeSelect/props.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-
 var _I18nPropTypes = require("@instructure/ui-i18n/lib/I18nPropTypes.js");
-
 var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
-
 var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -40,6 +33,7 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
   defaultToFirstOption: _propTypes.default.bool,

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "TimeSelect", {
     return _TimeSelect.TimeSelect;
   }
 });
-
 var _TimeSelect = require("./TimeSelect");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-time-select",
-  "version": "8.33.1",
+  "version": "8.33.2",
   "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.33.1",
-    "@instructure/ui-form-field": "8.33.1",
-    "@instructure/ui-i18n": "8.33.1",
-    "@instructure/ui-position": "8.33.1",
-    "@instructure/ui-prop-types": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-select": "8.33.1",
-    "@instructure/ui-test-locator": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-form-field": "8.33.2",
+    "@instructure/ui-i18n": "8.33.2",
+    "@instructure/ui-position": "8.33.2",
+    "@instructure/ui-prop-types": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-select": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1",
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2",
     "moment-timezone": "^0.5.33"
   },
   "peerDependencies": {