@instructure/ui-select 8.13.1-snapshot.9 → 8.14.1-snapshot.15

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.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
+
+**Note:** Version bump only for package @instructure/ui-select
+
 # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
 
 ### Features

package/es/Select/Group/index.js

@@ -29,6 +29,7 @@ parent: Select
 id: Select.Group
 ---
 @module Group
+@tsProps
 **/
 
 class Group extends Component {
@@ -45,8 +46,6 @@ Group.displayName = "Group";
 Group.componentId = 'Select.Group';
 Group.allowedProps = allowedProps;
 Group.propTypes = propTypes;
-Group.defaultProps = {
-  children: null
-};
+Group.defaultProps = {};
 export default Group;
 export { Group };

package/es/Select/Group/props.js

@@ -25,14 +25,7 @@ import PropTypes from 'prop-types';
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { Option } from '../Option';
 const propTypes = {
-  /**
-   * The label associated with the group options.
-   */
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * Children of type `<SimpleSelect.Option />` that will be considered part of the group.
-   */
   children: ChildrenPropTypes.oneOf([Option])
 };
 const allowedProps = ['renderLabel', 'children'];

package/es/Select/Option/index.js

@@ -29,6 +29,7 @@ parent: Select
 id: Select.Option
 ---
 @module Option
+@tsProps
 **/
 
 class Option extends Component {
@@ -48,8 +49,7 @@ Option.propTypes = propTypes;
 Option.defaultProps = {
   isHighlighted: false,
   isSelected: false,
-  isDisabled: false,
-  children: null
+  isDisabled: false
 };
 export default Option;
 export { Option };

package/es/Select/Option/props.js

@@ -23,39 +23,12 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * The id for the option.
-   */
   id: PropTypes.string.isRequired,
-
-  /**
-   * Whether or not this option is highlighted.
-   */
   isHighlighted: PropTypes.bool,
-
-  /**
-   * Whether or not this option is selected.
-   */
   isSelected: PropTypes.bool,
-
-  /**
-   * Whether or not this option is disabled.
-   */
   isDisabled: PropTypes.bool,
-
-  /**
-   * Content to display before the option label, such as an icon.
-   */
   renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display after the option label, such as an icon.
-   */
   renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display as the option label.
-   */
   children: PropTypes.node
 };
 const allowedProps = ['id', 'isHighlighted', 'isSelected', 'isDisabled', 'renderBeforeLabel', 'renderAfterLabel', 'children'];

package/es/Select/SelectLocator.js

@@ -23,12 +23,15 @@
  */
 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 { OptionsLocator } from '@instructure/ui-options/es/Options/OptionsLocator'; // @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 { OptionsLocator } from '@instructure/ui-options/es/Options/OptionsLocator';
 import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocator';
 /* eslint-enable no-restricted-imports */
 
-import { Select } from './index';
+import { Select } 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 SelectLocator = locator(Select.selector, {
   findInput: function () {
     return locator('input').find(...arguments);

package/es/Select/index.js

@@ -30,9 +30,10 @@ var _dec, _dec2, _class, _class2, _temp, _Options$Separator, _Options$Separator2
  */
 
 /** @jsx jsx */
-import { Children, Component } from 'react';
+import React, { Children, Component } from 'react';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
+import { uid } from '@instructure/uid';
 import { matchComponentTypes, omitProps, getInteraction } from '@instructure/ui-react-utils';
 import { getBoundingClientRect, isActiveElement } from '@instructure/ui-dom-utils';
 import { View } from '@instructure/ui-view';
@@ -41,7 +42,6 @@ import { Popover } from '@instructure/ui-popover';
 import { TextInput } from '@instructure/ui-text-input';
 import { Options } from '@instructure/ui-options';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine } from '@instructure/ui-icons';
-import { uid } from '@instructure/uid';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -53,23 +53,25 @@ import { allowedProps, propTypes } from './props';
 category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
+@tsProps
 **/
 
 let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends Component {
   constructor() {
     super(...arguments);
-    this.ref = null;
     this.state = {
       hasInputRef: false
     };
+    this.ref = null;
     this._defaultId = uid('Select');
-    this._assistId = uid('Select-assistiveText');
-    this._inputContainer = void 0;
-    this._list = null;
+    this._inputContainer = null;
+    this._listView = null;
     this._optionIds = [];
     this._optionHeight = 36;
 
     this.handleInputRef = node => {
+      var _this$props$inputRef, _this$props;
+
       // ensures list is positioned with respect to input if list is open on mount
       if (!this.state.hasInputRef) {
         this.setState({
@@ -78,12 +80,13 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       }
 
       this.ref = node;
-      this.props.inputRef(node);
+      (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
     };
 
     this.handleListRef = node => {
-      this._list = node;
-      this.props.listRef(node); // store option height to calculate list maxHeight
+      var _this$props$listRef, _this$props2;
+
+      (_this$props$listRef = (_this$props2 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props2, node); // store option height to calculate list maxHeight
 
       if (node && node.querySelector('[role="option"]')) {
         this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
@@ -96,15 +99,15 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props3;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props4;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // scroll option into view if needed
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4); // scroll option into view if needed
 
     this.scrollToOption(this.highlightedOptionId);
   }
@@ -126,7 +129,7 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   }
 
   get width() {
-    return this._inputContainer && this._inputContainer.offsetWidth;
+    return this._inputContainer ? this._inputContainer.offsetWidth : void 0;
   }
 
   get interaction() {
@@ -136,10 +139,11 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   }
 
   get highlightedOptionId() {
-    let highlightedOptionId = null;
+    let highlightedOptionId;
     Children.toArray(this.props.children).forEach(child => {
       if (matchComponentTypes(child, [Group])) {
         // group found
+        ;
         Children.toArray(child.props.children).forEach(option => {
           // check options in group
           if (option.props.isHighlighted) {
@@ -161,6 +165,7 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     Children.toArray(this.props.children).forEach(child => {
       if (matchComponentTypes(child, [Group])) {
         // group found
+        ;
         Children.toArray(child.props.children).forEach(option => {
           // check options in group
           if (option.props.isSelected) {
@@ -174,8 +179,15 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
         }
       }
     });
-    if (selectedOptionId.length === 1) return selectedOptionId[0];
-    if (selectedOptionId.length === 0) return null;
+
+    if (selectedOptionId.length === 1) {
+      return selectedOptionId[0];
+    }
+
+    if (selectedOptionId.length === 0) {
+      return void 0;
+    }
+
     return selectedOptionId;
   }
 
@@ -188,7 +200,7 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       const parentTop = getBoundingClientRect(this._listView).top;
       const elemTop = getBoundingClientRect(listItem).top;
       const parentBottom = parentTop + this._listView.clientHeight;
-      const elemBottom = elemTop + listItem.clientHeight;
+      const elemBottom = elemTop + (listItem ? listItem.clientHeight : 0);
 
       if (elemBottom > parentBottom) {
         this._listView.scrollTop += elemBottom - parentBottom;
@@ -202,23 +214,23 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     const onRequestHighlightOption = this.props.onRequestHighlightOption;
 
     if (id) {
-      onRequestHighlightOption(event, {
+      onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
         id
       });
     }
   }
 
   getEventHandlers() {
-    const _this$props3 = this.props,
-          isShowingOptions = _this$props3.isShowingOptions,
-          onRequestShowOptions = _this$props3.onRequestShowOptions,
-          onRequestHideOptions = _this$props3.onRequestHideOptions,
-          onRequestSelectOption = _this$props3.onRequestSelectOption;
+    const _this$props5 = this.props,
+          isShowingOptions = _this$props5.isShowingOptions,
+          onRequestShowOptions = _this$props5.onRequestShowOptions,
+          onRequestHideOptions = _this$props5.onRequestHideOptions,
+          onRequestSelectOption = _this$props5.onRequestSelectOption;
     const highlightedOptionId = this.highlightedOptionId;
     const selectedOptionId = this.selectedOptionId;
     return this.interaction === 'enabled' ? {
       onRequestShowOptions: event => {
-        onRequestShowOptions(event);
+        onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
 
         if (selectedOptionId && !Array.isArray(selectedOptionId)) {
           // highlight selected option on show
@@ -226,14 +238,14 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
         }
       },
       onRequestHideOptions: event => {
-        onRequestHideOptions(event);
+        onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
       },
       onRequestHighlightOption: (event, _ref) => {
         let id = _ref.id,
             direction = _ref.direction;
         if (!isShowingOptions) return; // if id exists, use that
 
-        let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
+        let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
 
         if (!highlightId) {
           if (!highlightedOptionId) {
@@ -243,7 +255,7 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
             // find next id based on direction
             const index = this._optionIds.indexOf(highlightedOptionId);
 
-            highlightId = index > -1 ? this._optionIds[index + direction] : null;
+            highlightId = index > -1 ? this._optionIds[index + direction] : void 0;
           }
         }
 
@@ -263,7 +275,7 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
 
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
-          onRequestSelectOption(event, {
+          onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
             id
           });
         }
@@ -283,14 +295,14 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
           renderAfterLabel = _option$props.renderAfterLabel,
           children = _option$props.children;
 
-    const getRenderLabel = renderLabel => {
-      return typeof renderLabel === 'function' ? renderLabel.bind(null, {
+    const getRenderOptionLabel = renderOptionLabel => {
+      return typeof renderOptionLabel === 'function' ? renderOptionLabel.bind(null, {
         id,
         isDisabled,
         isSelected,
         isHighlighted,
         children
-      }) : renderLabel;
+      }) : renderOptionLabel;
     };
 
     let optionProps = { // passthrough props
@@ -300,8 +312,8 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
         id
       }),
       // Options.Item props
-      renderBeforeLabel: getRenderLabel(renderBeforeLabel),
-      renderAfterLabel: getRenderLabel(renderAfterLabel)
+      renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
+      renderAfterLabel: getRenderOptionLabel(renderAfterLabel)
     }; // should option be treated as highlighted or selected
 
     if (isSelected) {
@@ -368,11 +380,11 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     const getListProps = data.getListProps,
           getOptionProps = data.getOptionProps,
           getDisabledOptionProps = data.getDisabledOptionProps;
-    const _this$props4 = this.props,
-          isShowingOptions = _this$props4.isShowingOptions,
-          optionsMaxWidth = _this$props4.optionsMaxWidth,
-          visibleOptionsCount = _this$props4.visibleOptionsCount,
-          children = _this$props4.children;
+    const _this$props6 = this.props,
+          isShowingOptions = _this$props6.isShowingOptions,
+          optionsMaxWidth = _this$props6.optionsMaxWidth,
+          visibleOptionsCount = _this$props6.visibleOptionsCount,
+          children = _this$props6.children;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       display: 'block',
@@ -401,7 +413,7 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       }
 
       if (matchComponentTypes(child, [Group])) {
-        const afterGroup = lastWasGroup ? true : false;
+        const afterGroup = lastWasGroup;
         lastWasGroup = true;
         return this.renderGroup(child, {
           getOptionProps,
@@ -412,13 +424,15 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
           afterGroup
         });
       }
+
+      return;
     }) : null));
   }
 
   renderIcon() {
-    const _this$props5 = this.props,
-          styles = _this$props5.styles,
-          isShowingOptions = _this$props5.isShowingOptions;
+    const _this$props7 = this.props,
+          styles = _this$props7.styles,
+          isShowingOptions = _this$props7.isShowingOptions;
     return jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.icon
     }, isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = jsx(IconArrowOpenUpLine, {
@@ -432,24 +446,24 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     const getInputProps = data.getInputProps,
           getTriggerProps = data.getTriggerProps;
 
-    const _this$props6 = this.props,
-          renderLabel = _this$props6.renderLabel,
-          inputValue = _this$props6.inputValue,
-          placeholder = _this$props6.placeholder,
-          isRequired = _this$props6.isRequired,
-          shouldNotWrap = _this$props6.shouldNotWrap,
-          size = _this$props6.size,
-          isInline = _this$props6.isInline,
-          width = _this$props6.width,
-          htmlSize = _this$props6.htmlSize,
-          messages = _this$props6.messages,
-          renderBeforeInput = _this$props6.renderBeforeInput,
-          renderAfterInput = _this$props6.renderAfterInput,
-          onFocus = _this$props6.onFocus,
-          onBlur = _this$props6.onBlur,
-          onInputChange = _this$props6.onInputChange,
-          onRequestHideOptions = _this$props6.onRequestHideOptions,
-          rest = _objectWithoutProperties(_this$props6, _excluded2);
+    const _this$props8 = this.props,
+          renderLabel = _this$props8.renderLabel,
+          inputValue = _this$props8.inputValue,
+          placeholder = _this$props8.placeholder,
+          isRequired = _this$props8.isRequired,
+          shouldNotWrap = _this$props8.shouldNotWrap,
+          size = _this$props8.size,
+          isInline = _this$props8.isInline,
+          width = _this$props8.width,
+          htmlSize = _this$props8.htmlSize,
+          messages = _this$props8.messages,
+          renderBeforeInput = _this$props8.renderBeforeInput,
+          renderAfterInput = _this$props8.renderAfterInput,
+          onFocus = _this$props8.onFocus,
+          onBlur = _this$props8.onBlur,
+          onInputChange = _this$props8.onInputChange,
+          onRequestHideOptions = _this$props8.onRequestHideOptions,
+          rest = _objectWithoutProperties(_this$props8, _excluded2);
 
     const interaction = this.interaction;
     const passthroughProps = omitProps(rest, Select.allowedProps);
@@ -465,14 +479,14 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     const overrideProps = !isEditable ? {
       role: 'button',
       title: inputValue,
-      'aria-autocomplete': null
+      'aria-autocomplete': void 0
     } : {}; // backdoor to autocomplete attr to work around chrome autofill issues
 
     if (passthroughProps['autoComplete']) {
       overrideProps.autoComplete = passthroughProps['autoComplete'];
     }
 
-    return jsx(TextInput, Object.assign({}, triggerProps, getInputProps({
+    const inputProps = {
       id: this.id,
       renderLabel,
       placeholder,
@@ -490,21 +504,26 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       display: isInline ? 'inline-block' : 'block',
       renderBeforeInput,
       renderAfterInput: renderAfterInput || this.renderIcon(),
-      onChange: onInputChange,
+      // If `inputValue` is provided, we need to pass a default onChange handler,
+      // because TextInput `value` is a controlled prop,
+      // and onChange is not required for Select
+      // (before it was handled by TextInput's defaultProp)
+      onChange: typeof onInputChange === 'function' ? onInputChange : inputValue ? () => {} : void 0,
       onFocus,
       onBlur: createChainedFunction(onBlur, onRequestHideOptions),
       ...overrideProps
-    })));
+    };
+    return jsx(TextInput, Object.assign({}, triggerProps, getInputProps(inputProps)));
   }
 
   render() {
-    const _this$props7 = this.props,
-          constrain = _this$props7.constrain,
-          placement = _this$props7.placement,
-          mountNode = _this$props7.mountNode,
-          assistiveText = _this$props7.assistiveText,
-          isShowingOptions = _this$props7.isShowingOptions,
-          styles = _this$props7.styles; // clear temporary option store
+    const _this$props9 = this.props,
+          constrain = _this$props9.constrain,
+          placement = _this$props9.placement,
+          mountNode = _this$props9.mountNode,
+          assistiveText = _this$props9.assistiveText,
+          isShowingOptions = _this$props9.isShowingOptions,
+          styles = _this$props9.styles; // clear temporary option store
 
     this._optionIds = [];
     const highlightedOptionId = this.highlightedOptionId;
@@ -512,7 +531,7 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     return jsx(Selectable, Object.assign({
       highlightedOptionId: highlightedOptionId,
       isShowingOptions: isShowingOptions,
-      selectedOptionId: selectedOptionId ? selectedOptionId : null
+      selectedOptionId: selectedOptionId
     }, this.getEventHandlers()), _ref3 => {
       let getRootProps = _ref3.getRootProps,
           getInputProps = _ref3.getInputProps,
@@ -548,7 +567,6 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   inputValue: '',
   isShowingOptions: false,
   size: 'medium',
-  placeholder: null,
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
   interaction: void 0,
   isRequired: false,
@@ -556,17 +574,6 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  onFocus: event => {},
-  onBlur: event => {},
-  onRequestShowOptions: event => {},
-  onRequestHideOptions: event => {},
-  onRequestHighlightOption: (event, data) => {},
-  onRequestSelectOption: (event, data) => {},
-  inputRef: node => {},
-  listRef: node => {},
-  renderBeforeInput: null,
-  renderAfterInput: null,
-  children: null,
   shouldNotWrap: false
 }, _class2.Option = Option, _class2.Group = Group, _temp)) || _class) || _class);
 export default Select;