@instructure/ui-time-select 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-time-select
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-time-select

package/es/TimeSelect/TimeSelectLocator.js

@@ -22,14 +22,15 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
+
 /* eslint-disable no-restricted-imports */
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
-
 import { SelectLocator } from '@instructure/ui-select/es/Select/SelectLocator';
 /* eslint-enable no-restricted-imports */
 
-import { TimeSelect } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { TimeSelect } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const TimeSelectLocator = locator(TimeSelect.selector, {
   findInput: SelectLocator.findInput,
   // TODO these dont work because TS doesnt find its type declarations

package/es/TimeSelect/__examples__/TimeSelect.examples.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export default {
   maxExamplesPerPage: 50,
   sectionProp: 'size',

package/es/TimeSelect/index.js

@@ -1,8 +1,6 @@
 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, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -26,13 +24,13 @@ var _dec, _dec2, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { Component } from 'react';
 import { ApplyLocaleContext, Locale, DateTime } from '@instructure/ui-i18n';
 import { getInteraction, passthroughProps, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { Select } from '@instructure/ui-select';
 import { allowedProps, propTypes } from './props';
-
 /**
 ---
 category: components
@@ -44,30 +42,24 @@ A component used to select a time value.
 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);
@@ -77,36 +69,28 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
         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,
@@ -116,7 +100,6 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       }));
       (_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;
@@ -127,22 +110,17 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
         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 : '';
@@ -160,76 +138,59 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
           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 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.browserLocale();
   }
-
   timezone() {
     if (this.props.timezone) {
       return this.props.timezone;
     } else if (this.context && this.context.timezone) {
       return this.context.timezone;
     }
-
     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) {
       // options change, reset everything
@@ -237,22 +198,19 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       // 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.parse(outsideVal, this.locale(), this.timezone());
       const label = this.props.format ? date.format(this.props.format) : date.toISOString();
       this.setState({
@@ -260,18 +218,16 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
         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.parse(value, this.locale(), this.timezone()).toISOString();
   }
-
   getInitialState() {
     const initialOptions = this.generateOptions();
     const initialSelection = this.getInitialOption(initialOptions);
@@ -284,73 +240,61 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       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.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.parse(baseValue, this.locale(), this.timezone());
     } else {
       baseDate = 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
@@ -359,26 +303,23 @@ 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
+      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,
@@ -386,18 +327,15 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
           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 {
@@ -405,32 +343,27 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
           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.createElement(Select.Option, {
         id: id,
         key: id,
@@ -439,7 +372,6 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       }, label);
     });
   }
-
   renderEmptyOption() {
     return /*#__PURE__*/React.createElement(Select.Option, {
       id: this._emptyOptionId,
@@ -447,36 +379,34 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       isSelected: false
     }, 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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_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.createElement(Select, Object.assign({
       renderLabel: renderLabel,
       inputValue: inputValue,
@@ -506,7 +436,6 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       onInputChange: this.handleInputChange
     }, passthroughProps(rest)), isShowingOptions && this.renderOptions());
   }
-
 }, _class2.displayName = "TimeSelect", _class2.componentId = 'TimeSelect', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   defaultToFirstOption: false,
   format: 'LT',

package/es/TimeSelect/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
 import { I18nPropTypes } from '@instructure/ui-i18n';

package/es/index.js

@@ -21,4 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { TimeSelect } from './TimeSelect';

package/lib/TimeSelect/TimeSelectLocator.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TimeSelectLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _SelectLocator = require("@instructure/ui-select/lib/Select/SelectLocator");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -39,6 +35,7 @@ var _index = require("./index");
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
 
 /* eslint-enable no-restricted-imports */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const TimeSelectLocator = (0, _locator.locator)(_index.TimeSelect.selector, {
   findInput: _SelectLocator.SelectLocator.findInput,

package/lib/TimeSelect/__examples__/TimeSelect.examples.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *