@instructure/ui-select 8.25.1-snapshot-1 → 8.25.1-snapshot-10

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

package/es/Select/Group/index.js

@@ -33,7 +33,13 @@ id: Select.Group
 **/
 
 class Group extends Component {
+  static displayName = "Group";
+  static componentId = 'Select.Group';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {};
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. Select.Group children
     // are parsed in Select and rendered as Options components
@@ -42,10 +48,5 @@ class Group extends Component {
 
 }
 
-Group.displayName = "Group";
-Group.componentId = 'Select.Group';
-Group.allowedProps = allowedProps;
-Group.propTypes = propTypes;
-Group.defaultProps = {};
 export default Group;
 export { Group };

package/es/Select/Option/index.js

@@ -33,7 +33,17 @@ id: Select.Option
 **/
 
 class Option extends Component {
+  static displayName = "Option";
+  static componentId = 'Select.Option';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    isHighlighted: false,
+    isSelected: false,
+    isDisabled: false
+  };
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. Select.Option children
     // are parsed in Select and rendered as Options.Item components
@@ -42,14 +52,5 @@ class Option extends Component {
 
 }
 
-Option.displayName = "Option";
-Option.componentId = 'Select.Option';
-Option.allowedProps = allowedProps;
-Option.propTypes = propTypes;
-Option.defaultProps = {
-  isHighlighted: false,
-  isSelected: false,
-  isDisabled: false
-};
 export default Option;
 export { Option };

package/es/Select/index.js

@@ -3,7 +3,7 @@ const _excluded = ["id", "renderLabel", "children"],
       _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
       _excluded3 = ["ref"];
 
-var _dec, _dec2, _dec3, _class, _class2, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+var _dec, _dec2, _dec3, _class, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
 
 /*
  * The MIT License (MIT)
@@ -55,63 +55,54 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 @tsProps
 **/
-let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Select extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      hasInputRef: false
-    };
-    this.ref = null;
-    this._input = null;
-    this._defaultId = this.props.deterministicId();
-    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({
-          hasInputRef: true
-        });
-      }
-
-      this._input = 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 => {
-      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;
-      }
-    };
-
-    this.handleInputContainerRef = node => {
-      this._inputContainer = node;
-    };
-  }
+let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Select extends Component {
+  static displayName = "Select";
+  static componentId = 'Select';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    inputValue: '',
+    isShowingOptions: false,
+    size: 'medium',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    isRequired: false,
+    isInline: false,
+    visibleOptionsCount: 8,
+    placement: 'bottom stretch',
+    constrain: 'window',
+    shouldNotWrap: false
+  };
+  static Option = Option;
+  static Group = Group;
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_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$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.scrollToOption(this.highlightedOptionId);
   }
 
+  state = {
+    hasInputRef: false
+  };
+  ref = null;
+  _input = null;
+  _defaultId = this.props.deterministicId();
+  _inputContainer = null;
+  _listView = null; // temporarily stores actionable options
+
+  _optionIds = []; // best guess for first calculation of list height
+
+  _optionHeight = 36;
+
   focus() {
     this._input && this._input.focus();
   }
@@ -193,6 +184,32 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     return selectedOptionId;
   }
 
+  handleInputRef = node => {
+    var _this$props$inputRef, _this$props3;
+
+    // ensures list is positioned with respect to input if list is open on mount
+    if (!this.state.hasInputRef) {
+      this.setState({
+        hasInputRef: true
+      });
+    }
+
+    this._input = node;
+    (_this$props$inputRef = (_this$props3 = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props3, node);
+  };
+  handleListRef = node => {
+    var _this$props$listRef, _this$props4;
+
+    (_this$props$listRef = (_this$props4 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props4, node); // store option height to calculate list maxHeight
+
+    if (node && node.querySelector('[role="option"]')) {
+      this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
+    }
+  };
+  handleInputContainerRef = node => {
+    this._inputContainer = node;
+  };
+
   scrollToOption(id) {
     if (this._listView) {
       const option = this._listView.querySelector(`[id="${id}"]`);
@@ -570,18 +587,6 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     });
   }
 
-}, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  inputValue: '',
-  isShowingOptions: false,
-  size: 'medium',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  isRequired: false,
-  isInline: false,
-  visibleOptionsCount: 8,
-  placement: 'bottom stretch',
-  constrain: 'window',
-  shouldNotWrap: false
-}, _class2.Option = Option, _class2.Group = Group, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default Select;
 export { Select };

package/lib/Select/Group/index.js

@@ -42,7 +42,13 @@ id: Select.Group
 @tsProps
 **/
 class Group extends _react.Component {
+  static displayName = "Group";
+  static componentId = 'Select.Group';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {};
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. Select.Group children
     // are parsed in Select and rendered as Options components
@@ -52,10 +58,5 @@ class Group extends _react.Component {
 }
 
 exports.Group = Group;
-Group.displayName = "Group";
-Group.componentId = 'Select.Group';
-Group.allowedProps = _props.allowedProps;
-Group.propTypes = _props.propTypes;
-Group.defaultProps = {};
 var _default = Group;
 exports.default = _default;

package/lib/Select/Option/index.js

@@ -42,7 +42,17 @@ id: Select.Option
 @tsProps
 **/
 class Option extends _react.Component {
+  static displayName = "Option";
+  static componentId = 'Select.Option';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    isHighlighted: false,
+    isSelected: false,
+    isDisabled: false
+  };
   /* istanbul ignore next */
+
   render() {
     // this component is only used for prop validation. Select.Option children
     // are parsed in Select and rendered as Options.Item components
@@ -52,14 +62,5 @@ class Option extends _react.Component {
 }
 
 exports.Option = Option;
-Option.displayName = "Option";
-Option.componentId = 'Select.Option';
-Option.allowedProps = _props.allowedProps;
-Option.propTypes = _props.propTypes;
-Option.defaultProps = {
-  isHighlighted: false,
-  isSelected: false,
-  isDisabled: false
-};
 var _default = Option;
 exports.default = _default;

package/lib/Select/index.js

@@ -59,7 +59,7 @@ const _excluded = ["id", "renderLabel", "children"],
       _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
       _excluded3 = ["ref"];
 
-var _dec, _dec2, _dec3, _class, _class2, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+var _dec, _dec2, _dec3, _class, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
 
 /**
 ---
@@ -68,63 +68,54 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 @tsProps
 **/
-let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Select extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      hasInputRef: false
-    };
-    this.ref = null;
-    this._input = null;
-    this._defaultId = this.props.deterministicId();
-    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({
-          hasInputRef: true
-        });
-      }
-
-      this._input = 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 => {
-      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;
-      }
-    };
-
-    this.handleInputContainerRef = node => {
-      this._inputContainer = node;
-    };
-  }
+let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Select extends _react.Component {
+  static displayName = "Select";
+  static componentId = 'Select';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    inputValue: '',
+    isShowingOptions: false,
+    size: 'medium',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    isRequired: false,
+    isInline: false,
+    visibleOptionsCount: 8,
+    placement: 'bottom stretch',
+    constrain: 'window',
+    shouldNotWrap: false
+  };
+  static Option = _Option.Option;
+  static Group = _Group.Group;
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_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$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.scrollToOption(this.highlightedOptionId);
   }
 
+  state = {
+    hasInputRef: false
+  };
+  ref = null;
+  _input = null;
+  _defaultId = this.props.deterministicId();
+  _inputContainer = null;
+  _listView = null; // temporarily stores actionable options
+
+  _optionIds = []; // best guess for first calculation of list height
+
+  _optionHeight = 36;
+
   focus() {
     this._input && this._input.focus();
   }
@@ -206,6 +197,32 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
     return selectedOptionId;
   }
 
+  handleInputRef = node => {
+    var _this$props$inputRef, _this$props3;
+
+    // ensures list is positioned with respect to input if list is open on mount
+    if (!this.state.hasInputRef) {
+      this.setState({
+        hasInputRef: true
+      });
+    }
+
+    this._input = node;
+    (_this$props$inputRef = (_this$props3 = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props3, node);
+  };
+  handleListRef = node => {
+    var _this$props$listRef, _this$props4;
+
+    (_this$props$listRef = (_this$props4 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props4, node); // store option height to calculate list maxHeight
+
+    if (node && node.querySelector('[role="option"]')) {
+      this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
+    }
+  };
+  handleInputContainerRef = node => {
+    this._inputContainer = node;
+  };
+
   scrollToOption(id) {
     if (this._listView) {
       const option = this._listView.querySelector(`[id="${id}"]`);
@@ -579,19 +596,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
     });
   }
 
-}, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  inputValue: '',
-  isShowingOptions: false,
-  size: 'medium',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  isRequired: false,
-  isInline: false,
-  visibleOptionsCount: 8,
-  placement: 'bottom stretch',
-  constrain: 'window',
-  shouldNotWrap: false
-}, _class2.Option = _Option.Option, _class2.Group = _Group.Group, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 exports.Select = Select;
 var _default = Select;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.25.1-snapshot-1",
+  "version": "8.25.1-snapshot-10",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,30 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-1",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-1",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-1",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-1",
-    "@instructure/ui-themes": "8.25.1-snapshot-1"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
+    "@instructure/ui-themes": "8.25.1-snapshot-10"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.25.1-snapshot-1",
-    "@instructure/shared-types": "8.25.1-snapshot-1",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-1",
-    "@instructure/ui-form-field": "8.25.1-snapshot-1",
-    "@instructure/ui-icons": "8.25.1-snapshot-1",
-    "@instructure/ui-options": "8.25.1-snapshot-1",
-    "@instructure/ui-popover": "8.25.1-snapshot-1",
-    "@instructure/ui-position": "8.25.1-snapshot-1",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-1",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-1",
-    "@instructure/ui-selectable": "8.25.1-snapshot-1",
-    "@instructure/ui-testable": "8.25.1-snapshot-1",
-    "@instructure/ui-text-input": "8.25.1-snapshot-1",
-    "@instructure/ui-utils": "8.25.1-snapshot-1",
-    "@instructure/ui-view": "8.25.1-snapshot-1",
-    "@instructure/uid": "8.25.1-snapshot-1",
+    "@instructure/emotion": "8.25.1-snapshot-10",
+    "@instructure/shared-types": "8.25.1-snapshot-10",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
+    "@instructure/ui-form-field": "8.25.1-snapshot-10",
+    "@instructure/ui-icons": "8.25.1-snapshot-10",
+    "@instructure/ui-options": "8.25.1-snapshot-10",
+    "@instructure/ui-popover": "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-selectable": "8.25.1-snapshot-10",
+    "@instructure/ui-testable": "8.25.1-snapshot-10",
+    "@instructure/ui-text-input": "8.25.1-snapshot-10",
+    "@instructure/ui-utils": "8.25.1-snapshot-10",
+    "@instructure/ui-view": "8.25.1-snapshot-10",
+    "@instructure/uid": "8.25.1-snapshot-10",
     "prop-types": "^15"
   },
   "peerDependencies": {

package/src/Select/index.tsx

@@ -52,7 +52,8 @@ import type { ViewProps } from '@instructure/ui-view'
 import type { TextInputProps } from '@instructure/ui-text-input'
 import type {
   OptionsItemProps,
-  OptionsSeparatorProps
+  OptionsSeparatorProps,
+  OptionsItemRenderProps
 } from '@instructure/ui-options'
 import type {
   SelectableProps,
@@ -67,9 +68,7 @@ import generateComponentTheme from './theme'
 import { Group } from './Group'
 import type { SelectGroupProps } from './Group/props'
 import { Option } from './Option'
-import type { SelectOptionProps } from './Option/props'
-
-import type { RenderSelectOptionLabel } from './Option/props'
+import type { SelectOptionProps, RenderSelectOptionLabel } from './Option/props'
 
 import type { SelectProps } from './props'
 import { allowedProps, propTypes } from './props'
@@ -348,7 +347,9 @@ class Select extends Component<SelectProps> {
 
     const getRenderOptionLabel = (
       renderOptionLabel: RenderSelectOptionLabel
-    ): React.ReactNode => {
+    ):
+      | React.ReactNode
+      | ((_args: OptionsItemRenderProps) => React.ReactNode) => {
       return typeof renderOptionLabel === 'function' &&
         !renderOptionLabel?.prototype?.isReactComponent
         ? renderOptionLabel.bind(null, {