@instructure/ui-select 11.7.3-snapshot-25 → 11.7.3-snapshot-27

package/lib/Select/v2/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Select = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
 var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
@@ -28,10 +27,7 @@ var _Group = require("./Group");
 var _Option = require("./Option");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["id", "renderLabel", "children"],
-  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions", "layout"],
-  _excluded3 = ["ref"];
-var _dec, _dec2, _class, _Select, _Options$Separator, _Options$Separator2;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -65,8 +61,10 @@ const selectSizeToIconSize = {
 // because the Select component is re-rendered on every prop change of the <Select.Option>
 // and with a large amount of options, this can cause a lot of unnecessary re-renders.
 const MemoedOption = /*#__PURE__*/(0, _react.memo)(function Opt(props) {
-  const optionsItemProps = props.optionsItemProps,
-    children = props.children;
+  const {
+    optionsItemProps,
+    children
+  } = props;
   return (
     // The main <Options> that renders this is always an "ul"
     (0, _jsxRuntime.jsx)(_latest4.Options.Item, {
@@ -91,58 +89,50 @@ category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
-let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_Select = class Select extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.SCROLL_TOLERANCE = 0.5;
-    this.state = {
-      hasInputRef: false
-    };
-    this.ref = null;
-    this._input = null;
-    this._defaultId = this.props.deterministicId();
-    this._inputContainer = null;
-    this._listView = null;
-    // temporarily stores actionable options
-    this._optionIds = [];
-    // best guess for first calculation of list height
-    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 = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
+  static displayName = "Select";
+  static componentId = 'Select';
+  SCROLL_TOLERANCE = 0.5;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    inputValue: '',
+    isShowingOptions: false,
+    size: 'medium',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
+    isRequired: false,
+    isInline: false,
+    visibleOptionsCount: 8,
+    placement: 'bottom stretch',
+    constrain: 'window',
+    shouldNotWrap: false,
+    scrollToHighlightedOption: true,
+    isOptionContentAppliedToInput: false
+  };
+  static Option = _Option.Option;
+  static Group = _Group.Group;
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    this.props.makeStyles?.();
     if (this.props.scrollToHighlightedOption) {
       // scroll option into view if needed
       requestAnimationFrame(() => 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();
   }
@@ -162,7 +152,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     return this.props.id || this._defaultId;
   }
   get width() {
-    return this._inputContainer ? this._inputContainer.offsetWidth : void 0;
+    return this._inputContainer ? this._inputContainer.offsetWidth : undefined;
   }
   get interaction() {
     return (0, _getInteraction.getInteraction)({
@@ -211,10 +201,31 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       return selectedOptionId[0];
     }
     if (selectedOptionId.length === 0) {
-      return void 0;
+      return undefined;
     }
     return selectedOptionId;
   }
+  handleInputRef = node => {
+    // 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?.(node);
+  };
+  handleListRef = node => {
+    this.props.listRef?.(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 || !id) return;
     const option = this._listView.querySelector(`[id="${CSS.escape(id)}"]`);
@@ -231,22 +242,25 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     }
   }
   highlightOption(event, id) {
-    const onRequestHighlightOption = this.props.onRequestHighlightOption;
+    const {
+      onRequestHighlightOption
+    } = this.props;
     if (id) {
-      onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
+      onRequestHighlightOption?.(event, {
         id
       });
     }
   }
   getEventHandlers() {
-    const _this$props5 = this.props,
-      isShowingOptions = _this$props5.isShowingOptions,
-      onRequestShowOptions = _this$props5.onRequestShowOptions,
-      onRequestHideOptions = _this$props5.onRequestHideOptions,
-      onRequestSelectOption = _this$props5.onRequestSelectOption;
+    const {
+      isShowingOptions,
+      onRequestShowOptions,
+      onRequestHideOptions,
+      onRequestSelectOption
+    } = this.props;
     return this.interaction === 'enabled' ? {
       onRequestShowOptions: event => {
-        onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
+        onRequestShowOptions?.(event);
         const selectedOptionId = this.selectedOptionId;
         if (selectedOptionId && !Array.isArray(selectedOptionId)) {
           // highlight selected option on show
@@ -254,7 +268,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
         }
       },
       onRequestHideOptions: event => {
-        onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
+        onRequestHideOptions?.(event);
       },
       onRequestHighlightOption: (event, {
         id,
@@ -263,7 +277,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
         if (!isShowingOptions) return;
         const highlightedOptionId = this.highlightedOptionId;
         // if id exists, use that
-        let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
+        let highlightId = this._optionIds.indexOf(id) > -1 ? id : undefined;
         if (!highlightId) {
           if (!highlightedOptionId) {
             // nothing highlighted yet, highlight first option
@@ -271,7 +285,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           } else {
             // find next id based on direction
             const index = this._optionIds.indexOf(highlightedOptionId);
-            highlightId = index > -1 ? this._optionIds[index + direction] : void 0;
+            highlightId = index > -1 ? this._optionIds[index + direction] : undefined;
           }
         }
         if (highlightId) {
@@ -290,7 +304,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       }) => {
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
-          onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
+          onRequestSelectOption?.(event, {
             id
           });
         }
@@ -298,19 +312,21 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     } : {};
   }
   renderOption(option, data) {
-    const getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps;
-    const _option$props = option.props,
-      id = _option$props.id,
-      isDisabled = _option$props.isDisabled,
-      isHighlighted = _option$props.isHighlighted,
-      isSelected = _option$props.isSelected,
-      renderBeforeLabel = _option$props.renderBeforeLabel,
-      renderAfterLabel = _option$props.renderAfterLabel,
-      children = _option$props.children;
+    const {
+      getOptionProps,
+      getDisabledOptionProps
+    } = data;
+    const {
+      id,
+      isDisabled,
+      isHighlighted,
+      isSelected,
+      renderBeforeLabel,
+      renderAfterLabel,
+      children
+    } = option.props;
     const getRenderOptionLabel = renderOptionLabel => {
-      var _renderOptionLabel$pr;
-      return typeof renderOptionLabel === 'function' && !(renderOptionLabel !== null && renderOptionLabel !== void 0 && (_renderOptionLabel$pr = renderOptionLabel.prototype) !== null && _renderOptionLabel$pr !== void 0 && _renderOptionLabel$pr.isReactComponent) ? renderOptionLabel.bind(null, {
+      return typeof renderOptionLabel === 'function' && !renderOptionLabel?.prototype?.isReactComponent ? renderOptionLabel.bind(null, {
         id,
         isDisabled,
         isSelected,
@@ -318,10 +334,10 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
         children
       }) : renderOptionLabel;
     };
-    const _this$props6 = this.props,
-      isOptionContentAppliedToInput = _this$props6.isOptionContentAppliedToInput,
-      _this$props6$size = _this$props6.size,
-      size = _this$props6$size === void 0 ? 'medium' : _this$props6$size;
+    const {
+      isOptionContentAppliedToInput,
+      size = 'medium'
+    } = this.props;
     const iconSize = selectSizeToIconSize[size];
     const checkIcon = isSelected && !isOptionContentAppliedToInput ? (0, _jsxRuntime.jsx)(_uiIcons.CheckInstUIIcon, {
       inline: false,
@@ -337,7 +353,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       }),
       // Options.Item props
       renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
-      renderAfterLabel: checkIcon !== null && checkIcon !== void 0 ? checkIcon : getRenderOptionLabel(renderAfterLabel)
+      renderAfterLabel: checkIcon ?? getRenderOptionLabel(renderAfterLabel)
     };
     // should option be treated as highlighted or selected
     if (isSelected && isHighlighted) {
@@ -367,20 +383,23 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     });
   }
   renderGroup(group, data) {
-    const getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps,
-      isFirstChild = data.isFirstChild,
-      isLastChild = data.isLastChild,
-      afterGroup = data.afterGroup;
-    const _group$props = group.props,
-      id = _group$props.id,
-      renderLabel = _group$props.renderLabel,
-      children = _group$props.children,
-      rest = (0, _objectWithoutProperties2.default)(_group$props, _excluded);
+    const {
+      getOptionProps,
+      getDisabledOptionProps,
+      isFirstChild,
+      isLastChild,
+      afterGroup
+    } = data;
+    const {
+      id,
+      renderLabel,
+      children,
+      ...rest
+    } = group.props;
     const groupChildren = [];
     // add a separator above
     if (!isFirstChild && !afterGroup) {
-      groupChildren.push(_Options$Separator || (_Options$Separator = (0, _jsxRuntime.jsx)(_latest4.Options.Separator, {})));
+      groupChildren.push((0, _jsxRuntime.jsx)(_latest4.Options.Separator, {}));
     }
     // create a sublist as a group
     // a wrapping listitem will be created by Options
@@ -399,20 +418,23 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     }));
     // add a separator below
     if (!isLastChild) {
-      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = (0, _jsxRuntime.jsx)(_latest4.Options.Separator, {})));
+      groupChildren.push((0, _jsxRuntime.jsx)(_latest4.Options.Separator, {}));
     }
     return groupChildren;
   }
   renderList(data) {
-    const getListProps = data.getListProps,
-      getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps;
-    const _this$props7 = this.props,
-      isShowingOptions = _this$props7.isShowingOptions,
-      optionsMaxWidth = _this$props7.optionsMaxWidth,
-      optionsMaxHeight = _this$props7.optionsMaxHeight,
-      visibleOptionsCount = _this$props7.visibleOptionsCount,
-      children = _this$props7.children;
+    const {
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps
+    } = data;
+    const {
+      isShowingOptions,
+      optionsMaxWidth,
+      optionsMaxHeight,
+      visibleOptionsCount,
+      children
+    } = this.props;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       display: 'block',
@@ -463,10 +485,10 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     });
   }
   renderIcon() {
-    const _this$props8 = this.props,
-      isShowingOptions = _this$props8.isShowingOptions,
-      _this$props8$size = _this$props8.size,
-      size = _this$props8$size === void 0 ? 'medium' : _this$props8$size;
+    const {
+      isShowingOptions,
+      size = 'medium'
+    } = this.props;
     const iconSize = selectSizeToIconSize[size];
     return (0, _jsxRuntime.jsx)("span", {
       children: isShowingOptions ? (0, _jsxRuntime.jsx)(_uiIcons.ChevronUpInstUIIcon, {
@@ -523,50 +545,58 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     return defaultReturn;
   }
   handleRenderBeforeInput() {
-    const _this$props9 = this.props,
-      renderBeforeInput = _this$props9.renderBeforeInput,
-      inputValue = _this$props9.inputValue,
-      isOptionContentAppliedToInput = _this$props9.isOptionContentAppliedToInput;
+    const {
+      renderBeforeInput,
+      inputValue,
+      isOptionContentAppliedToInput
+    } = this.props;
     return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
     );
   }
   handleRenderAfterInput() {
-    const _this$props0 = this.props,
-      renderAfterInput = _this$props0.renderAfterInput,
-      inputValue = _this$props0.inputValue,
-      isOptionContentAppliedToInput = _this$props0.isOptionContentAppliedToInput;
+    const {
+      renderAfterInput,
+      inputValue,
+      isOptionContentAppliedToInput
+    } = this.props;
     return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
     );
   }
   renderInput(data) {
-    const getInputProps = data.getInputProps,
-      getTriggerProps = data.getTriggerProps;
-    const _this$props1 = this.props,
-      renderLabel = _this$props1.renderLabel,
-      inputValue = _this$props1.inputValue,
-      placeholder = _this$props1.placeholder,
-      isRequired = _this$props1.isRequired,
-      shouldNotWrap = _this$props1.shouldNotWrap,
-      size = _this$props1.size,
-      isInline = _this$props1.isInline,
-      width = _this$props1.width,
-      htmlSize = _this$props1.htmlSize,
-      messages = _this$props1.messages,
-      renderBeforeInput = _this$props1.renderBeforeInput,
-      renderAfterInput = _this$props1.renderAfterInput,
-      onFocus = _this$props1.onFocus,
-      onBlur = _this$props1.onBlur,
-      onInputChange = _this$props1.onInputChange,
-      onRequestHideOptions = _this$props1.onRequestHideOptions,
-      layout = _this$props1.layout,
-      rest = (0, _objectWithoutProperties2.default)(_this$props1, _excluded2);
-    const interaction = this.interaction;
+    const {
+      getInputProps,
+      getTriggerProps
+    } = data;
+    const {
+      renderLabel,
+      inputValue,
+      placeholder,
+      isRequired,
+      shouldNotWrap,
+      size,
+      isInline,
+      width,
+      htmlSize,
+      messages,
+      renderBeforeInput,
+      renderAfterInput,
+      onFocus,
+      onBlur,
+      onInputChange,
+      onRequestHideOptions,
+      layout,
+      ...rest
+    } = this.props;
+    const {
+      interaction
+    } = this;
     const passthroughProps = (0, _omitProps.omitProps)(rest, Select.allowedProps);
-    const _getTriggerProps = getTriggerProps({
-        ...passthroughProps
-      }),
-      ref = _getTriggerProps.ref,
-      triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded3);
+    const {
+      ref,
+      ...triggerProps
+    } = getTriggerProps({
+      ...passthroughProps
+    });
     const isEditable = typeof onInputChange !== 'undefined';
 
     // props to ensure screen readers treat uneditable selects as accessible
@@ -581,7 +611,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
       role: utils.isSafari() || utils.isAndroidOrIOS() || interaction === 'disabled' && utils.isChromium() ? 'button' : 'combobox',
       title: inputValue,
-      'aria-autocomplete': void 0,
+      'aria-autocomplete': undefined,
       'aria-readonly': true
     } : interaction === 'disabled' && utils.isChromium() ? {
       role: 'button'
@@ -612,14 +642,14 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       // On iOS VoiceOver, if there is a custom element instead of the changing up and down arrow button
       // the listbox closes on a swipe, so a DOM change is enforced by the key change
       // that seems to inform VoiceOver to behave the correct way
-      renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== void 0 ? (0, _jsxRuntime.jsx)("span", {
+      renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== undefined ? (0, _jsxRuntime.jsx)("span", {
         children: this.handleRenderAfterInput()
       }, this.props.isShowingOptions ? 'open' : 'closed') : this.handleRenderAfterInput(),
       // 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,
+      onChange: typeof onInputChange === 'function' ? onInputChange : inputValue ? () => {} : undefined,
       onFocus,
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
       ...overrideProps
@@ -637,13 +667,14 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     });
   }
   render() {
-    const _this$props10 = this.props,
-      constrain = _this$props10.constrain,
-      placement = _this$props10.placement,
-      mountNode = _this$props10.mountNode,
-      assistiveText = _this$props10.assistiveText,
-      isShowingOptions = _this$props10.isShowingOptions,
-      styles = _this$props10.styles;
+    const {
+      constrain,
+      placement,
+      mountNode,
+      assistiveText,
+      isShowingOptions,
+      styles
+    } = this.props;
     // clear temporary option store
     this._optionIds = [];
     const highlightedOptionId = this.highlightedOptionId;
@@ -672,7 +703,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           getTriggerProps
         }), (0, _jsxRuntime.jsx)("span", {
           ...getDescriptionProps(),
-          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
+          css: styles?.assistiveText,
           children: assistiveText
         }), (0, _jsxRuntime.jsx)(_latest2.Popover, {
           constrain: constrain,
@@ -681,12 +712,12 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           // in order to be able to navigate through the list items with a swipe.
           // The swipe would result in closing the listbox if mounted elsewhere.
           ,
-          mountNode: mountNode !== void 0 ? mountNode : utils.isAndroidOrIOS() ? this.ref : void 0,
+          mountNode: mountNode !== undefined ? mountNode : utils.isAndroidOrIOS() ? this.ref : undefined,
           positionTarget: this._inputContainer,
           isShowingContent: isShowingOptions,
           shouldReturnFocus: false,
           withArrow: false,
-          borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth,
+          borderWidth: styles?.popoverBorderWidth,
           children: this.renderList({
             getListProps,
             getOptionProps,
@@ -696,19 +727,5 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       })
     });
   }
-}, _Select.displayName = "Select", _Select.componentId = 'Select', _Select.allowedProps = _props.allowedProps, _Select.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,
-  scrollToHighlightedOption: true,
-  isOptionContentAppliedToInput: false
-}, _Select.Option = _Option.Option, _Select.Group = _Group.Group, _Select)) || _class) || _class);
+}) || _class) || _class);
 var _default = exports.default = Select;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "11.7.3-snapshot-25",
+  "version": "11.7.3-snapshot-27",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -14,31 +14,31 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.7.3-snapshot-25",
-    "@instructure/shared-types": "11.7.3-snapshot-25",
-    "@instructure/ui-form-field": "11.7.3-snapshot-25",
-    "@instructure/ui-icons": "11.7.3-snapshot-25",
-    "@instructure/ui-dom-utils": "11.7.3-snapshot-25",
-    "@instructure/ui-options": "11.7.3-snapshot-25",
-    "@instructure/ui-popover": "11.7.3-snapshot-25",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-25",
-    "@instructure/ui-selectable": "11.7.3-snapshot-25",
-    "@instructure/ui-text-input": "11.7.3-snapshot-25",
-    "@instructure/ui-themes": "11.7.3-snapshot-25",
-    "@instructure/ui-position": "11.7.3-snapshot-25",
-    "@instructure/ui-view": "11.7.3-snapshot-25",
-    "@instructure/ui-utils": "11.7.3-snapshot-25",
-    "@instructure/uid": "11.7.3-snapshot-25"
+    "@babel/runtime": "^7.29.2",
+    "@instructure/emotion": "11.7.3-snapshot-27",
+    "@instructure/shared-types": "11.7.3-snapshot-27",
+    "@instructure/ui-icons": "11.7.3-snapshot-27",
+    "@instructure/ui-form-field": "11.7.3-snapshot-27",
+    "@instructure/ui-dom-utils": "11.7.3-snapshot-27",
+    "@instructure/ui-options": "11.7.3-snapshot-27",
+    "@instructure/ui-popover": "11.7.3-snapshot-27",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-27",
+    "@instructure/ui-position": "11.7.3-snapshot-27",
+    "@instructure/ui-selectable": "11.7.3-snapshot-27",
+    "@instructure/ui-text-input": "11.7.3-snapshot-27",
+    "@instructure/ui-utils": "11.7.3-snapshot-27",
+    "@instructure/uid": "11.7.3-snapshot-27",
+    "@instructure/ui-view": "11.7.3-snapshot-27",
+    "@instructure/ui-themes": "11.7.3-snapshot-27"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-scripts": "11.7.3-snapshot-25",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-25",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-25"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-27",
+    "@instructure/ui-scripts": "11.7.3-snapshot-27",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-27"
   },
   "peerDependencies": {
     "react": ">=18 <=19"