@instructure/ui-select 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/es/Select/v1/index.js

@@ -1,28 +1,5 @@
-var _dec, _dec2, _class;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, Component, memo } from 'react';
 import * as utils from '@instructure/ui-utils';
 import { combineDataCid } from '@instructure/ui-utils';
@@ -40,651 +17,508 @@ import generateComponentTheme from './theme.js';
 import { Group } from './Group/index.js';
 import { Option } from './Option/index.js';
 import { allowedProps } from './props.js';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-// This memoed Option component is used to prevent unnecessary re-renders of
-// Options.Item when the Select component is re-rendered. This is necessary
-// 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__*/memo(function Opt(props) {
-  const {
-    optionsItemProps,
-    children
-  } = props;
-  return (
-    // The main <Options> that renders this is always an "ul"
-    _jsx(Options.Item, {
-      as: "li",
-      ...optionsItemProps,
-      children: children
-    })
-  );
-},
-// This is a custom equality function that checks if the props of the
-// <Select.Option> have changed. If they haven't, then the Options.Item
-// doesn't need to be re-rendered.
-(prevProps, nextProps) => {
-  return prevProps.selectOption.props.isHighlighted === nextProps.selectOption.props.isHighlighted && prevProps.selectOption.props.isSelected === nextProps.selectOption.props.isSelected && prevProps.selectOption.props.isDisabled === nextProps.selectOption.props.isDisabled && prevProps.selectOption.props.children === nextProps.selectOption.props.children && prevProps.selectOption.props.id === nextProps.selectOption.props.id && prevProps.selectOption.props.renderBeforeLabel === nextProps.selectOption.props.renderBeforeLabel && prevProps.selectOption.props.renderAfterLabel === nextProps.selectOption.props.renderAfterLabel && prevProps.children === nextProps.children;
+const MemoedOption = /*#__PURE__*/ memo(function Opt(props) {
+    const { optionsItemProps, children } = props;
+    return /*#__PURE__*/ _jsx(Options.Item, {
+        as: "li",
+        ...optionsItemProps,
+        children: children
+    });
+}, (prevProps, nextProps)=>{
+    return prevProps.selectOption.props.isHighlighted === nextProps.selectOption.props.isHighlighted && prevProps.selectOption.props.isSelected === nextProps.selectOption.props.isSelected && prevProps.selectOption.props.isDisabled === nextProps.selectOption.props.isDisabled && prevProps.selectOption.props.children === nextProps.selectOption.props.children && prevProps.selectOption.props.id === nextProps.selectOption.props.id && prevProps.selectOption.props.renderBeforeLabel === nextProps.selectOption.props.renderBeforeLabel && prevProps.selectOption.props.renderAfterLabel === nextProps.selectOption.props.renderAfterLabel && prevProps.children === nextProps.children;
 });
-// This is needed so the propTypes in <Options> check are correct
 MemoedOption.displayName = 'Item';
-
-/**
----
-category: components
-tags: autocomplete, typeahead, combobox, dropdown, search, form
----
-**/
-let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Select extends Component {
-  static displayName = 'Select';
-  static componentId = 'Select';
-  SCROLL_TOLERANCE = 0.5;
-  static allowedProps = 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;
-  static Group = Group;
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    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();
-  }
-  blur() {
-    this._input && this._input.blur();
-  }
-  get childrenArray() {
-    return Children.toArray(this.props.children);
-  }
-  getGroupChildrenArray(group) {
-    return Children.toArray(group.props.children);
-  }
-  get focused() {
-    return this._input ? isActiveElement(this._input) : false;
-  }
-  get id() {
-    return this.props.id || this._defaultId;
-  }
-  get width() {
-    return this._inputContainer ? this._inputContainer.offsetWidth : undefined;
-  }
-  get interaction() {
-    return getInteraction({
-      props: this.props
-    });
-  }
-  get highlightedOptionId() {
-    let highlightedOptionId;
-    this.childrenArray.forEach(child => {
-      if (matchComponentTypes(child, [Group])) {
-        // group found
-        this.getGroupChildrenArray(child).forEach(option => {
-          // check options in group
-          if (option.props.isHighlighted) {
-            highlightedOptionId = option.props.id;
-          }
-        });
-      } else {
-        // ungrouped option found
-        if (child.props.isHighlighted) {
-          highlightedOptionId = child.props.id;
+class Select extends Component {
+    static{
+        this.displayName = 'Select';
+    }
+    static{
+        this.componentId = 'Select';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            inputValue: '',
+            isShowingOptions: false,
+            size: 'medium',
+            interaction: undefined,
+            isRequired: false,
+            isInline: false,
+            visibleOptionsCount: 8,
+            placement: 'bottom stretch',
+            constrain: 'window',
+            shouldNotWrap: false,
+            scrollToHighlightedOption: true,
+            isOptionContentAppliedToInput: false
+        };
+    }
+    static{
+        this.Option = Option;
+    }
+    static{
+        this.Group = Group;
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+        if (this.props.scrollToHighlightedOption) {
+            requestAnimationFrame(()=>this.scrollToOption(this.highlightedOptionId));
         }
-      }
-    });
-    return highlightedOptionId;
-  }
-  get selectedOptionId() {
-    const selectedOptionId = [];
-    this.childrenArray.forEach(child => {
-      if (matchComponentTypes(child, [Group])) {
-        // group found
-        this.getGroupChildrenArray(child).forEach(option => {
-          // check options in group
-          if (option.props.isSelected) {
-            selectedOptionId.push(option.props.id);
-          }
+    }
+    focus() {
+        this._input && this._input.focus();
+    }
+    blur() {
+        this._input && this._input.blur();
+    }
+    get childrenArray() {
+        return Children.toArray(this.props.children);
+    }
+    getGroupChildrenArray(group) {
+        return Children.toArray(group.props.children);
+    }
+    get focused() {
+        return this._input ? isActiveElement(this._input) : false;
+    }
+    get id() {
+        return this.props.id || this._defaultId;
+    }
+    get width() {
+        return this._inputContainer ? this._inputContainer.offsetWidth : undefined;
+    }
+    get interaction() {
+        return getInteraction({
+            props: this.props
         });
-      } else {
-        // ungrouped option found
-        if (child.props.isSelected) {
-          selectedOptionId.push(child.props.id);
+    }
+    get highlightedOptionId() {
+        let highlightedOptionId;
+        this.childrenArray.forEach((child)=>{
+            if (matchComponentTypes(child, [
+                Group
+            ])) {
+                this.getGroupChildrenArray(child).forEach((option)=>{
+                    if (option.props.isHighlighted) {
+                        highlightedOptionId = option.props.id;
+                    }
+                });
+            } else {
+                if (child.props.isHighlighted) {
+                    highlightedOptionId = child.props.id;
+                }
+            }
+        });
+        return highlightedOptionId;
+    }
+    get selectedOptionId() {
+        const selectedOptionId = [];
+        this.childrenArray.forEach((child)=>{
+            if (matchComponentTypes(child, [
+                Group
+            ])) {
+                this.getGroupChildrenArray(child).forEach((option)=>{
+                    if (option.props.isSelected) {
+                        selectedOptionId.push(option.props.id);
+                    }
+                });
+            } else {
+                if (child.props.isSelected) {
+                    selectedOptionId.push(child.props.id);
+                }
+            }
+        });
+        if (selectedOptionId.length === 1) {
+            return selectedOptionId[0];
         }
-      }
-    });
-    if (selectedOptionId.length === 1) {
-      return selectedOptionId[0];
-    }
-    if (selectedOptionId.length === 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)}"]`);
-    if (!option) return;
-    const listItem = option.parentNode;
-    const parentTop = getBoundingClientRect(this._listView).top;
-    const elemTop = getBoundingClientRect(listItem).top;
-    const parentBottom = parentTop + this._listView.clientHeight;
-    const elemBottom = elemTop + (listItem ? listItem.clientHeight : 0);
-    if (elemBottom > parentBottom) {
-      this._listView.scrollTop += elemBottom - parentBottom;
-    } else if (elemTop < parentTop) {
-      this._listView.scrollTop -= parentTop - elemTop;
-    }
-  }
-  highlightOption(event, id) {
-    const {
-      onRequestHighlightOption
-    } = this.props;
-    if (id) {
-      onRequestHighlightOption?.(event, {
-        id
-      });
-    }
-  }
-  getEventHandlers() {
-    const {
-      isShowingOptions,
-      onRequestShowOptions,
-      onRequestHideOptions,
-      onRequestSelectOption
-    } = this.props;
-    return this.interaction === 'enabled' ? {
-      onRequestShowOptions: event => {
-        onRequestShowOptions?.(event);
-        const selectedOptionId = this.selectedOptionId;
-        if (selectedOptionId && !Array.isArray(selectedOptionId)) {
-          // highlight selected option on show
-          this.highlightOption(event, selectedOptionId);
+        if (selectedOptionId.length === 0) {
+            return undefined;
         }
-      },
-      onRequestHideOptions: event => {
-        onRequestHideOptions?.(event);
-      },
-      onRequestHighlightOption: (event, {
-        id,
-        direction
-      }) => {
-        if (!isShowingOptions) return;
-        const highlightedOptionId = this.highlightedOptionId;
-        // if id exists, use that
-        let highlightId = this._optionIds.indexOf(id) > -1 ? id : undefined;
-        if (!highlightId) {
-          if (!highlightedOptionId) {
-            // nothing highlighted yet, highlight first option
-            highlightId = this._optionIds[0];
-          } else {
-            // find next id based on direction
-            const index = this._optionIds.indexOf(highlightedOptionId);
-            highlightId = index > -1 ? this._optionIds[index + direction] : undefined;
-          }
+        return selectedOptionId;
+    }
+    scrollToOption(id) {
+        if (!this._listView || !id) return;
+        const option = this._listView.querySelector(`[id="${CSS.escape(id)}"]`);
+        if (!option) return;
+        const listItem = option.parentNode;
+        const parentTop = getBoundingClientRect(this._listView).top;
+        const elemTop = getBoundingClientRect(listItem).top;
+        const parentBottom = parentTop + this._listView.clientHeight;
+        const elemBottom = elemTop + (listItem ? listItem.clientHeight : 0);
+        if (elemBottom > parentBottom) {
+            this._listView.scrollTop += elemBottom - parentBottom;
+        } else if (elemTop < parentTop) {
+            this._listView.scrollTop -= parentTop - elemTop;
         }
-        if (highlightId) {
-          // only highlight if id exists as a valid option
-          this.highlightOption(event, highlightId);
+    }
+    highlightOption(event, id) {
+        const { onRequestHighlightOption } = this.props;
+        if (id) {
+            onRequestHighlightOption?.(event, {
+                id
+            });
         }
-      },
-      onRequestHighlightFirstOption: event => {
-        this.highlightOption(event, this._optionIds[0]);
-      },
-      onRequestHighlightLastOption: event => {
-        this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
-      },
-      onRequestSelectOption: (event, {
-        id
-      }) => {
-        if (id && this._optionIds.indexOf(id) !== -1) {
-          // only select if id exists as a valid option
-          onRequestSelectOption?.(event, {
-            id
-          });
+    }
+    getEventHandlers() {
+        const { isShowingOptions, onRequestShowOptions, onRequestHideOptions, onRequestSelectOption } = this.props;
+        return this.interaction === 'enabled' ? {
+            onRequestShowOptions: (event)=>{
+                onRequestShowOptions?.(event);
+                const selectedOptionId = this.selectedOptionId;
+                if (selectedOptionId && !Array.isArray(selectedOptionId)) {
+                    this.highlightOption(event, selectedOptionId);
+                }
+            },
+            onRequestHideOptions: (event)=>{
+                onRequestHideOptions?.(event);
+            },
+            onRequestHighlightOption: (event, { id, direction })=>{
+                if (!isShowingOptions) return;
+                const highlightedOptionId = this.highlightedOptionId;
+                let highlightId = this._optionIds.indexOf(id) > -1 ? id : undefined;
+                if (!highlightId) {
+                    if (!highlightedOptionId) {
+                        highlightId = this._optionIds[0];
+                    } else {
+                        const index = this._optionIds.indexOf(highlightedOptionId);
+                        highlightId = index > -1 ? this._optionIds[index + direction] : undefined;
+                    }
+                }
+                if (highlightId) {
+                    this.highlightOption(event, highlightId);
+                }
+            },
+            onRequestHighlightFirstOption: (event)=>{
+                this.highlightOption(event, this._optionIds[0]);
+            },
+            onRequestHighlightLastOption: (event)=>{
+                this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
+            },
+            onRequestSelectOption: (event, { id })=>{
+                if (id && this._optionIds.indexOf(id) !== -1) {
+                    onRequestSelectOption?.(event, {
+                        id
+                    });
+                }
+            }
+        } : {};
+    }
+    renderOption(option, data) {
+        const { getOptionProps, getDisabledOptionProps } = data;
+        const { id, isDisabled, isHighlighted, isSelected, renderBeforeLabel, renderAfterLabel, children } = option.props;
+        const getRenderOptionLabel = (renderOptionLabel)=>{
+            return typeof renderOptionLabel === 'function' && !renderOptionLabel?.prototype?.isReactComponent ? renderOptionLabel.bind(null, {
+                id,
+                isDisabled,
+                isSelected,
+                isHighlighted,
+                children
+            }) : renderOptionLabel;
+        };
+        let optionProps = {
+            ...omitProps(option.props, [
+                ...Option.allowedProps,
+                ...Options.Item.allowedProps
+            ]),
+            ...getOptionProps({
+                id
+            }),
+            renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
+            renderAfterLabel: getRenderOptionLabel(renderAfterLabel)
+        };
+        if (isSelected && isHighlighted) {
+            optionProps.variant = 'selected-highlighted';
+            optionProps.isSelected = true;
+        } else if (isSelected) {
+            optionProps.variant = 'selected';
+            optionProps.isSelected = true;
+        } else if (isHighlighted) {
+            optionProps.variant = 'highlighted';
         }
-      }
-    } : {};
-  }
-  renderOption(option, data) {
-    const {
-      getOptionProps,
-      getDisabledOptionProps
-    } = data;
-    const {
-      id,
-      isDisabled,
-      isHighlighted,
-      isSelected,
-      renderBeforeLabel,
-      renderAfterLabel,
-      children
-    } = option.props;
-    const getRenderOptionLabel = renderOptionLabel => {
-      return typeof renderOptionLabel === 'function' && !renderOptionLabel?.prototype?.isReactComponent ? renderOptionLabel.bind(null, {
-        id,
-        isDisabled,
-        isSelected,
-        isHighlighted,
-        children
-      }) : renderOptionLabel;
-    };
-    let optionProps = {
-      // passthrough props
-      ...omitProps(option.props, [...Option.allowedProps, ...Options.Item.allowedProps]),
-      // props from selectable
-      ...getOptionProps({
-        id
-      }),
-      // Options.Item props
-      renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
-      renderAfterLabel: getRenderOptionLabel(renderAfterLabel)
-    };
-    // should option be treated as highlighted or selected
-    if (isSelected && isHighlighted) {
-      optionProps.variant = 'selected-highlighted';
-      optionProps.isSelected = true;
-    } else if (isSelected) {
-      optionProps.variant = 'selected';
-      optionProps.isSelected = true;
-    } else if (isHighlighted) {
-      optionProps.variant = 'highlighted';
-    }
-    // should option be treated as disabled
-    if (isDisabled) {
-      optionProps.variant = 'disabled';
-      optionProps = {
-        ...optionProps,
-        ...getDisabledOptionProps()
-      };
-    } else {
-      // track as valid option if not disabled
-      this._optionIds.push(id);
-    }
-    return _jsx(MemoedOption, {
-      optionsItemProps: optionProps,
-      selectOption: option,
-      children: children
-    });
-  }
-  renderGroup(group, data) {
-    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(_jsx(Options.Separator, {}));
-    }
-    // create a sublist as a group
-    // a wrapping listitem will be created by Options
-    groupChildren.push(_jsx(Options, {
-      id: id,
-      as: "ul",
-      role: "group",
-      renderLabel: renderLabel,
-      ...omitProps(rest, [...Options.allowedProps, ...Group.allowedProps]),
-      children: Children.map(children, child => {
-        return this.renderOption(child, {
-          getOptionProps,
-          getDisabledOptionProps
+        if (isDisabled) {
+            optionProps.variant = 'disabled';
+            optionProps = {
+                ...optionProps,
+                ...getDisabledOptionProps()
+            };
+        } else {
+            this._optionIds.push(id);
+        }
+        return /*#__PURE__*/ _jsx(MemoedOption, {
+            optionsItemProps: optionProps,
+            selectOption: option,
+            children: children
         });
-      })
-    }));
-    // add a separator below
-    if (!isLastChild) {
-      groupChildren.push(_jsx(Options.Separator, {}));
-    }
-    return groupChildren;
-  }
-  renderList(data) {
-    const {
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps
-    } = data;
-    const {
-      isShowingOptions,
-      optionsMaxWidth,
-      optionsMaxHeight,
-      visibleOptionsCount,
-      children
-    } = this.props;
-    let lastWasGroup = false;
-    const viewProps = isShowingOptions ? {
-      display: 'block',
-      overflowY: 'auto',
-      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount - (
-      // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
-      utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
-      maxWidth: optionsMaxWidth || this.width,
-      background: 'primary',
-      elementRef: node => this._listView = node,
-      borderRadius: 'medium'
-    } : {
-      maxHeight: 0
-    };
-    return _jsx(View, {
-      ...viewProps,
-      children: _jsx(Options, {
-        ...getListProps({
-          as: 'ul',
-          elementRef: this.handleListRef
-        }),
-        children: isShowingOptions ? Children.map(children, (child, index) => {
-          if (!child || !matchComponentTypes(child, [Group, Option])) {
-            return; // ignore invalid children
-          }
-          if (matchComponentTypes(child, [Option])) {
-            lastWasGroup = false;
-            return this.renderOption(child, {
-              getOptionProps,
-              getDisabledOptionProps
-            });
-          }
-          if (matchComponentTypes(child, [Group])) {
-            const afterGroup = lastWasGroup;
-            lastWasGroup = true;
-            return this.renderGroup(child, {
-              getOptionProps,
-              getDisabledOptionProps,
-              // for rendering separators appropriately
-              isFirstChild: index === 0,
-              isLastChild: index === Children.count(children) - 1,
-              afterGroup
-            });
-          }
-          return;
-        }) : null
-      })
-    });
-  }
-  renderIcon() {
-    const {
-      styles,
-      isShowingOptions
-    } = this.props;
-    return _jsx("span", {
-      css: styles?.icon,
-      children: isShowingOptions ? _jsx(IconArrowOpenUpLine, {
-        inline: false
-      }) : _jsx(IconArrowOpenDownLine, {
-        inline: false
-      })
-    });
-  }
-  renderContentBeforeOrAfterInput(position) {
-    for (const child of this.childrenArray) {
-      if (matchComponentTypes(child, [Group])) {
-        // Group found
-        const options = this.getGroupChildrenArray(child);
-        for (const option of options) {
-          if (option.props.isSelected) {
-            return position === 'before' ? option.props.renderBeforeLabel : option.props.renderAfterLabel ? option.props.renderAfterLabel : this.renderIcon();
-          }
+    }
+    renderGroup(group, data) {
+        const { getOptionProps, getDisabledOptionProps, isFirstChild, isLastChild, afterGroup } = data;
+        const { id, renderLabel, children, ...rest } = group.props;
+        const groupChildren = [];
+        if (!isFirstChild && !afterGroup) {
+            groupChildren.push(/*#__PURE__*/ _jsx(Options.Separator, {}));
+        }
+        groupChildren.push(/*#__PURE__*/ _jsx(Options, {
+            id: id,
+            as: "ul",
+            role: "group",
+            renderLabel: renderLabel,
+            ...omitProps(rest, [
+                ...Options.allowedProps,
+                ...Group.allowedProps
+            ]),
+            children: Children.map(children, (child)=>{
+                return this.renderOption(child, {
+                    getOptionProps,
+                    getDisabledOptionProps
+                });
+            })
+        }));
+        if (!isLastChild) {
+            groupChildren.push(/*#__PURE__*/ _jsx(Options.Separator, {}));
+        }
+        return groupChildren;
+    }
+    renderList(data) {
+        const { getListProps, getOptionProps, getDisabledOptionProps } = data;
+        const { isShowingOptions, optionsMaxWidth, optionsMaxHeight, visibleOptionsCount, children } = this.props;
+        let lastWasGroup = false;
+        const viewProps = isShowingOptions ? {
+            display: 'block',
+            overflowY: 'auto',
+            maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount - (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
+            maxWidth: optionsMaxWidth || this.width,
+            background: 'primary',
+            elementRef: (node)=>this._listView = node,
+            borderRadius: 'medium'
+        } : {
+            maxHeight: 0
+        };
+        return /*#__PURE__*/ _jsx(View, {
+            ...viewProps,
+            children: /*#__PURE__*/ _jsx(Options, {
+                ...getListProps({
+                    as: 'ul',
+                    elementRef: this.handleListRef
+                }),
+                children: isShowingOptions ? Children.map(children, (child, index)=>{
+                    if (!child || !matchComponentTypes(child, [
+                        Group,
+                        Option
+                    ])) {
+                        return;
+                    }
+                    if (matchComponentTypes(child, [
+                        Option
+                    ])) {
+                        lastWasGroup = false;
+                        return this.renderOption(child, {
+                            getOptionProps,
+                            getDisabledOptionProps
+                        });
+                    }
+                    if (matchComponentTypes(child, [
+                        Group
+                    ])) {
+                        const afterGroup = lastWasGroup;
+                        lastWasGroup = true;
+                        return this.renderGroup(child, {
+                            getOptionProps,
+                            getDisabledOptionProps,
+                            isFirstChild: index === 0,
+                            isLastChild: index === Children.count(children) - 1,
+                            afterGroup
+                        });
+                    }
+                    return;
+                }) : null
+            })
+        });
+    }
+    renderIcon() {
+        const { styles, isShowingOptions } = this.props;
+        return /*#__PURE__*/ _jsx("span", {
+            css: styles?.icon,
+            children: isShowingOptions ? /*#__PURE__*/ _jsx(IconArrowOpenUpLine, {
+                inline: false
+            }) : /*#__PURE__*/ _jsx(IconArrowOpenDownLine, {
+                inline: false
+            })
+        });
+    }
+    renderContentBeforeOrAfterInput(position) {
+        for (const child of this.childrenArray){
+            if (matchComponentTypes(child, [
+                Group
+            ])) {
+                const options = this.getGroupChildrenArray(child);
+                for (const option of options){
+                    if (option.props.isSelected) {
+                        return position === 'before' ? option.props.renderBeforeLabel : option.props.renderAfterLabel ? option.props.renderAfterLabel : this.renderIcon();
+                    }
+                }
+            } else {
+                if (child.props.isSelected) {
+                    return position === 'before' ? child.props.renderBeforeLabel : child.props.renderAfterLabel ? child.props.renderAfterLabel : this.renderIcon();
+                }
+            }
+        }
+        if (position === 'after') {
+            return this.renderIcon();
+        }
+        return void 0;
+    }
+    handleInputContentRender(renderLabelInput, inputValue, isOptionContentAppliedToInput, position, defaultReturn) {
+        const isInputValueEmpty = !inputValue || inputValue === '';
+        if (renderLabelInput && isOptionContentAppliedToInput) {
+            if (!isInputValueEmpty) {
+                return this.renderContentBeforeOrAfterInput(position);
+            }
+            return renderLabelInput;
+        }
+        if (isOptionContentAppliedToInput) {
+            if (isInputValueEmpty) {
+                return defaultReturn;
+            }
+            return this.renderContentBeforeOrAfterInput(position);
         }
-      } else {
-        // Ungrouped option found
-        if (child.props.isSelected) {
-          return position === 'before' ? child.props.renderBeforeLabel : child.props.renderAfterLabel ? child.props.renderAfterLabel : this.renderIcon();
+        if (renderLabelInput) {
+            return renderLabelInput;
         }
-      }
-    }
-    // if no option with isSelected is found
-    if (position === 'after') {
-      return this.renderIcon();
-    }
-    return void 0;
-  }
-  handleInputContentRender(renderLabelInput, inputValue, isOptionContentAppliedToInput, position, defaultReturn) {
-    const isInputValueEmpty = !inputValue || inputValue === '';
-    if (renderLabelInput && isOptionContentAppliedToInput) {
-      if (!isInputValueEmpty) {
-        return this.renderContentBeforeOrAfterInput(position);
-      }
-      return renderLabelInput;
-    }
-    if (isOptionContentAppliedToInput) {
-      if (isInputValueEmpty) {
         return defaultReturn;
-      }
-      return this.renderContentBeforeOrAfterInput(position);
-    }
-    if (renderLabelInput) {
-      return renderLabelInput;
-    }
-    return defaultReturn;
-  }
-  handleRenderBeforeInput() {
-    const {
-      renderBeforeInput,
-      inputValue,
-      isOptionContentAppliedToInput
-    } = this.props;
-    return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
-    );
-  }
-  handleRenderAfterInput() {
-    const {
-      renderAfterInput,
-      inputValue,
-      isOptionContentAppliedToInput
-    } = this.props;
-    return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
-    );
-  }
-  renderInput(data) {
-    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 = omitProps(rest, Select.allowedProps);
-    const {
-      ref,
-      ...triggerProps
-    } = getTriggerProps({
-      ...passthroughProps
-    });
-    const isEditable = typeof onInputChange !== 'undefined';
-    let overrideProps = {};
-    if (!isEditable) {
-      overrideProps = {
-        role: 'combobox',
-        title: inputValue,
-        'aria-autocomplete': undefined
-      };
-    }
-
-    // backdoor to autocomplete attr to work around chrome autofill issues
-    if (passthroughProps['autoComplete']) {
-      overrideProps.autoComplete = passthroughProps['autoComplete'];
-    }
-    const inputProps = {
-      id: this.id,
-      renderLabel,
-      placeholder,
-      size,
-      width,
-      htmlSize,
-      messages,
-      value: inputValue,
-      inputRef: utils.createChainedFunction(ref, this.handleInputRef),
-      inputContainerRef: this.handleInputContainerRef,
-      interaction: interaction === 'enabled' && !isEditable ? 'readonly' // prevent keyboard cursor
-      : interaction,
-      isRequired,
-      shouldNotWrap,
-      layout,
-      display: isInline ? 'inline-block' : 'block',
-      renderBeforeInput: this.handleRenderBeforeInput(),
-      // 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 !== undefined ? _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 ? () => {} : undefined,
-      onFocus,
-      onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
-      ...overrideProps
-    };
-    // suppressHydrationWarning is needed because `role` depends on the browser type
-    return _jsx(TextInput, {
-      ...triggerProps,
-      ...getInputProps(inputProps),
-      suppressHydrationWarning: true
-    });
-  }
-  render() {
-    const {
-      constrain,
-      placement,
-      mountNode,
-      assistiveText,
-      isShowingOptions,
-      styles
-    } = this.props;
-    // clear temporary option store
-    this._optionIds = [];
-    const highlightedOptionId = this.highlightedOptionId;
-    const selectedOptionId = this.selectedOptionId;
-    return _jsx(Selectable, {
-      highlightedOptionId: highlightedOptionId,
-      isShowingOptions: isShowingOptions,
-      selectedOptionId: selectedOptionId,
-      ...this.getEventHandlers(),
-      children: ({
-        getRootProps,
-        getInputProps,
-        getTriggerProps,
-        getListProps,
-        getOptionProps,
-        getDisabledOptionProps,
-        getDescriptionProps
-      }) => _jsxs("span", {
-        ...getRootProps({
-          css: styles?.select
-        }),
-        ref: el => {
-          this.ref = el;
-        },
-        "data-cid": combineDataCid('Select', this.props),
-        children: [this.renderInput({
-          getInputProps,
-          getTriggerProps
-        }), _jsx("span", {
-          ...getDescriptionProps(),
-          css: styles?.assistiveText,
-          children: assistiveText
-        }), _jsx(Popover, {
-          constrain: constrain,
-          placement: placement
-          // On iOS VoiceOver, the Popover is mounted right after the input
-          // 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 !== undefined ? mountNode : utils.isAndroidOrIOS() ? this.ref : undefined,
-          positionTarget: this._inputContainer,
-          isShowingContent: isShowingOptions,
-          shouldReturnFocus: false,
-          withArrow: false,
-          borderWidth: styles?.popoverBorderWidth,
-          children: this.renderList({
-            getListProps,
-            getOptionProps,
-            getDisabledOptionProps
-          })
-        })]
-      })
-    });
-  }
-}) || _class) || _class);
+    }
+    handleRenderBeforeInput() {
+        const { renderBeforeInput, inputValue, isOptionContentAppliedToInput } = this.props;
+        return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null);
+    }
+    handleRenderAfterInput() {
+        const { renderAfterInput, inputValue, isOptionContentAppliedToInput } = this.props;
+        return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon());
+    }
+    renderInput(data) {
+        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 = omitProps(rest, Select.allowedProps);
+        const { ref, ...triggerProps } = getTriggerProps({
+            ...passthroughProps
+        });
+        const isEditable = typeof onInputChange !== 'undefined';
+        let overrideProps = {};
+        if (!isEditable) {
+            overrideProps = {
+                role: 'combobox',
+                title: inputValue,
+                'aria-autocomplete': undefined
+            };
+        }
+        if (passthroughProps['autoComplete']) {
+            overrideProps.autoComplete = passthroughProps['autoComplete'];
+        }
+        const inputProps = {
+            id: this.id,
+            renderLabel,
+            placeholder,
+            size,
+            width,
+            htmlSize,
+            messages,
+            value: inputValue,
+            inputRef: utils.createChainedFunction(ref, this.handleInputRef),
+            inputContainerRef: this.handleInputContainerRef,
+            interaction: interaction === 'enabled' && !isEditable ? 'readonly' : interaction,
+            isRequired,
+            shouldNotWrap,
+            layout,
+            display: isInline ? 'inline-block' : 'block',
+            renderBeforeInput: this.handleRenderBeforeInput(),
+            renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== undefined ? /*#__PURE__*/ _jsx("span", {
+                children: this.handleRenderAfterInput()
+            }, this.props.isShowingOptions ? 'open' : 'closed') : this.handleRenderAfterInput(),
+            onChange: typeof onInputChange === 'function' ? onInputChange : inputValue ? ()=>{} : undefined,
+            onFocus,
+            onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
+            ...overrideProps
+        };
+        return /*#__PURE__*/ _jsx(TextInput, {
+            ...triggerProps,
+            ...getInputProps(inputProps),
+            suppressHydrationWarning: true
+        });
+    }
+    render() {
+        const { constrain, placement, mountNode, assistiveText, isShowingOptions, styles } = this.props;
+        this._optionIds = [];
+        const highlightedOptionId = this.highlightedOptionId;
+        const selectedOptionId = this.selectedOptionId;
+        return /*#__PURE__*/ _jsx(Selectable, {
+            highlightedOptionId: highlightedOptionId,
+            isShowingOptions: isShowingOptions,
+            selectedOptionId: selectedOptionId,
+            ...this.getEventHandlers(),
+            children: ({ getRootProps, getInputProps, getTriggerProps, getListProps, getOptionProps, getDisabledOptionProps, getDescriptionProps })=>/*#__PURE__*/ _jsxs("span", {
+                    ...getRootProps({
+                        css: styles?.select
+                    }),
+                    ref: (el)=>{
+                        this.ref = el;
+                    },
+                    "data-cid": combineDataCid('Select', this.props),
+                    children: [
+                        this.renderInput({
+                            getInputProps,
+                            getTriggerProps
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            ...getDescriptionProps(),
+                            css: styles?.assistiveText,
+                            children: assistiveText
+                        }),
+                        /*#__PURE__*/ _jsx(Popover, {
+                            constrain: constrain,
+                            placement: placement,
+                            mountNode: mountNode !== undefined ? mountNode : utils.isAndroidOrIOS() ? this.ref : undefined,
+                            positionTarget: this._inputContainer,
+                            isShowingContent: isShowingOptions,
+                            shouldReturnFocus: false,
+                            withArrow: false,
+                            borderWidth: styles?.popoverBorderWidth,
+                            children: this.renderList({
+                                getListProps,
+                                getOptionProps,
+                                getDisabledOptionProps
+                            })
+                        })
+                    ]
+                })
+        });
+    }
+    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, this._optionIds = [], this._optionHeight = 36, this.handleInputRef = (node)=>{
+            if (!this.state.hasInputRef) {
+                this.setState({
+                    hasInputRef: true
+                });
+            }
+            this._input = node;
+            this.props.inputRef?.(node);
+        }, this.handleListRef = (node)=>{
+            this.props.listRef?.(node);
+            if (node && node.querySelector('[role="option"]')) {
+                this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
+            }
+        }, this.handleInputContainerRef = (node)=>{
+            this._inputContainer = node;
+        };
+    }
+}
+Select = _ts_decorate([
+    withDeterministicId(),
+    withStyle(generateStyle, generateComponentTheme)
+], Select);
 export default Select;
-export { Select };
+export { Select };