@semcore/select 16.1.12 → 17.0.0-prerelease.18

package/lib/esm/Select.mjs

@@ -1,15 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, createComponent, lastInteraction, assignProps } from "@semcore/core";
-import { hideScrollBarsFromScreenReadersContext } from "@semcore/base-components";
+import { useBox, isInputTriggerTag, hideScrollBarsFromScreenReadersContext } from "@semcore/base-components";
 import { ButtonTrigger } from "@semcore/base-trigger";
 import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
@@ -19,31 +11,29 @@ import logger from "@semcore/core/lib/utils/logger";
 import Divider from "@semcore/divider";
 import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
 import DropdownMenu from "@semcore/dropdown-menu";
-import { useBox } from "@semcore/flex-box";
-import { isInputTriggerTag } from "@semcore/popper";
+import { Text } from "@semcore/typography";
 import cn from "classnames";
 import React from "react";
 import { selectContext } from "./context.mjs";
 import InputSearch from "./InputSearch.mjs";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
-var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
 /*!__reshadow-styles__:"./style/select.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SOptionCheckbox_1hlru_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_1hlru_gg_::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_1hlru_gg_::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center}.___SOptionCheckbox_1hlru_gg_.__selected_1hlru_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1hlru_gg_._size_l_1hlru_gg_{width:20px;height:20px}.___SOptionCheckbox_1hlru_gg_._size_l_1hlru_gg_.__selected_1hlru_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1hlru_gg_.__indeterminate_1hlru_gg_:before,.___SOptionCheckbox_1hlru_gg_.__selected_1hlru_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1hlru_gg_.__theme_1hlru_gg_:before{border-color:var(--theme_1hlru)}.___SOptionCheckbox_1hlru_gg_.__theme_1hlru_gg_.__indeterminate_1hlru_gg_:before,.___SOptionCheckbox_1hlru_gg_.__theme_1hlru_gg_.__selected_1hlru_gg_:before{background-color:var(--theme_1hlru);border-color:var(--theme_1hlru)}.___SOptionCheckbox_1hlru_gg_.__selected_1hlru_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1hlru_gg_.__selected_1hlru_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_1hlru_gg_.__indeterminate_1hlru_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_1hlru_gg_.__indeterminate_1hlru_gg_._size_l_1hlru_gg_:after{width:12px;height:2px}.___SOptionCheckbox_1hlru_gg_.__indeterminate_1hlru_gg_._size_m_1hlru_gg_:after{width:8px;height:2px}',
+    '.___SOptionCheckbox_ggett_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_ggett_gg_::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_ggett_gg_::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center}.___SOptionCheckbox_ggett_gg_.__selected_ggett_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_ggett_gg_._size_l_ggett_gg_{width:20px;height:20px}.___SOptionCheckbox_ggett_gg_._size_l_ggett_gg_.__selected_ggett_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_ggett_gg_.__indeterminate_ggett_gg_:before,.___SOptionCheckbox_ggett_gg_.__selected_ggett_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_ggett_gg_.__theme_ggett_gg_:before{border-color:var(--theme_ggett)}.___SOptionCheckbox_ggett_gg_.__theme_ggett_gg_.__indeterminate_ggett_gg_:before,.___SOptionCheckbox_ggett_gg_.__theme_ggett_gg_.__selected_ggett_gg_:before{background-color:var(--theme_ggett);border-color:var(--theme_ggett)}.___SOptionCheckbox_ggett_gg_.__selected_ggett_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_ggett_gg_.__selected_ggett_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_ggett_gg_.__indeterminate_ggett_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_ggett_gg_.__indeterminate_ggett_gg_._size_l_ggett_gg_:after{width:12px;height:2px}.___SOptionCheckbox_ggett_gg_.__indeterminate_ggett_gg_._size_m_ggett_gg_:after{width:8px;height:2px}',
     /*__inner_css_end__*/
-    "1hlru_gg_"
+    "ggett_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SOptionCheckbox": "___SOptionCheckbox_1hlru_gg_",
-    "_selected": "__selected_1hlru_gg_",
-    "_size_l": "_size_l_1hlru_gg_",
-    "_indeterminate": "__indeterminate_1hlru_gg_",
-    "_theme": "__theme_1hlru_gg_",
-    "--theme": "--theme_1hlru",
-    "_size_m": "_size_m_1hlru_gg_"
+    "__SOptionCheckbox": "___SOptionCheckbox_ggett_gg_",
+    "_selected": "__selected_ggett_gg_",
+    "_size_l": "_size_l_ggett_gg_",
+    "_indeterminate": "__indeterminate_ggett_gg_",
+    "_theme": "__theme_ggett_gg_",
+    "--theme": "--theme_ggett",
+    "_size_m": "_size_m_ggett_gg_"
   })
 );
 function isSelectedOption(value, valueOption) {
@@ -55,257 +45,267 @@ function isEmptyValue(value) {
 function getEmptyValue(multiselect) {
   return multiselect ? [] : null;
 }
-var ListBoxContextProvider = function ListBoxContextProvider2(_ref9) {
-  var children = _ref9.children;
-  return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
-    value: true
-  }, children);
-};
-var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
-  function RootSelect2() {
-    var _this;
-    _classCallCheck(this, RootSelect2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, RootSelect2, [].concat(args));
-    _defineProperty(_this, "role", "listbox");
-    _defineProperty(_this, "bindHandlerOptionClick", function(optionValue, index) {
-      return function(e) {
-        var newValue = optionValue;
-        var _this$asProps = _this.asProps, value = _this$asProps.value, multiselect = _this$asProps.multiselect;
-        if (Array.isArray(value)) {
-          if (value.includes(optionValue)) {
-            newValue = value.filter(function(v) {
-              return v !== optionValue;
-            });
-          } else {
-            newValue = value.concat(optionValue);
-          }
-        }
-        _this.handlers.highlightedIndex(index);
-        _this.handlers.value(newValue, e);
-        if (!multiselect) {
-          _this.handlers.visible(false);
-          e.preventDefault();
+const ListBoxContextProvider = ({
+  children
+}) => /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
+  value: true
+}, children);
+class RootSelect extends AbstractDropdown {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "role", "listbox");
+    _defineProperty(this, "bindHandlerOptionClick", (optionValue, index) => (e) => {
+      let newValue = optionValue;
+      const {
+        value,
+        multiselect
+      } = this.asProps;
+      if (Array.isArray(value)) {
+        if (value.includes(optionValue)) {
+          newValue = value.filter((v) => v !== optionValue);
+        } else {
+          newValue = value.concat(optionValue);
         }
-      };
+      }
+      this.handlers.highlightedIndex(index);
+      this.handlers.value(newValue, e);
+      if (!multiselect) {
+        this.handlers.visible(false);
+        e.preventDefault();
+      }
     });
-    _defineProperty(_this, "handlerClear", function(e) {
-      var value = _this.asProps.value;
-      var emptyValue = getEmptyValue(Array.isArray(value));
-      _this.handlers.value(emptyValue, e);
-      _this.handlers.visible(false);
+    _defineProperty(this, "handlerClear", (e) => {
+      const {
+        value
+      } = this.asProps;
+      const emptyValue = getEmptyValue(Array.isArray(value));
+      this.handlers.value(emptyValue, e);
+      this.handlers.visible(false);
     });
-    return _this;
   }
-  _inherits(RootSelect2, _AbstractDropdown);
-  return _createClass(RootSelect2, [{
-    key: "itemRef",
-    value: function itemRef(props, index, node) {
-      _superPropGet(RootSelect2, "itemRef", this, 3)([props, index, node]);
-      var highlightedIndex = this.asProps.highlightedIndex;
-      var isHighlighted = index === highlightedIndex;
-      if (isHighlighted) {
-        this.scrollToNode(node);
-      }
+  itemRef(props, index, node) {
+    super.itemRef(props, index, node);
+    const {
+      highlightedIndex
+    } = this.asProps;
+    const isHighlighted = index === highlightedIndex;
+    if (isHighlighted) {
+      this.scrollToNode(node);
     }
-  }, {
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this2 = this;
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "uncontrolledProps", this, 3)([])), {}, {
-        visible: [null, function(visible) {
-          if (visible === true) {
-            var hasInputSearch = isAdvanceMode(_this2.asProps.Children, [Select.InputSearch.displayName, InputSearch.displayName], true);
-            var defaultIndex = hasInputSearch || lastInteraction.isMouse() ? null : _this2.props.defaultHighlightedIndex;
-            _this2.handlers.highlightedIndex(defaultIndex);
-            setTimeout(function() {
-              var _this2$menuRef$curren, _this2$menuRef$curren2;
-              var options = (_this2$menuRef$curren = _this2.menuRef.current) === null || _this2$menuRef$curren === void 0 ? void 0 : _this2$menuRef$curren.querySelectorAll('[role="option"]');
-              var selected = (_this2$menuRef$curren2 = _this2.menuRef.current) === null || _this2$menuRef$curren2 === void 0 ? void 0 : _this2$menuRef$curren2.querySelector('[aria-selected="true"]');
-              if (selected && options) {
-                _this2.scrollToNode(selected);
-                for (var i = 0; i < options.length; i++) {
-                  if (options[i] === selected) {
-                    _this2.handlers.highlightedIndex(i);
-                    break;
-                  }
+  }
+  uncontrolledProps() {
+    return {
+      ...super.uncontrolledProps(),
+      visible: [null, (visible) => {
+        if (visible === true) {
+          const hasInputSearch = isAdvanceMode(this.asProps.Children, [Select.InputSearch.displayName, InputSearch.displayName], true);
+          const defaultIndex = hasInputSearch || lastInteraction.isMouse() ? null : this.props.defaultHighlightedIndex;
+          this.handlers.highlightedIndex(defaultIndex);
+          setTimeout(() => {
+            var _a, _b;
+            const options = (_a = this.menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="option"]');
+            const selected = (_b = this.menuRef.current) == null ? void 0 : _b.querySelector('[aria-selected="true"]');
+            if (selected && options) {
+              this.scrollToNode(selected);
+              for (let i = 0; i < options.length; i++) {
+                if (options[i] === selected) {
+                  this.handlers.highlightedIndex(i);
+                  break;
                 }
               }
-            }, 30);
-          }
-        }],
-        value: null
-      });
-    }
-  }, {
-    key: "getTriggerProps",
-    value: function getTriggerProps() {
-      var _this3 = this;
-      var _this$asProps2 = this.asProps, disabled = _this$asProps2.disabled, visible = _this$asProps2.visible, state = _this$asProps2.state, placeholder = _this$asProps2.placeholder, value = _this$asProps2.value, options = _this$asProps2.options, forwardRef = _this$asProps2.forwardRef, name = _this$asProps2.name, multiselect = _this$asProps2.multiselect, getI18nText = _this$asProps2.getI18nText, highlightedIndex = _this$asProps2.highlightedIndex, uid = _this$asProps2.uid, Children = _this$asProps2.Children, hasChildren = _this$asProps2.children;
-      var isMenu = isAdvanceMode(Children, [Select.Menu.displayName], true) || !hasChildren;
-      var ariaControls = isMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getTriggerProps", this, 3)([])), {}, {
-        "onKeyDown": callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
-        "aria-controls": visible ? ariaControls : void 0,
-        "aria-haspopup": isMenu ? "listbox" : "dialog",
-        "aria-disabled": disabled ? "true" : "false",
-        "aria-activedescendant": visible && highlightedIndex !== null && this.itemRefs[highlightedIndex] ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : void 0,
-        "empty": isEmptyValue(value),
-        value,
-        name,
-        "$hiddenRef": forwardRef,
-        multiselect,
-        state,
-        placeholder,
-        disabled,
-        "active": visible,
-        "onClear": this.handlerClear,
-        "children": this.renderChildrenTrigger(value, options),
-        getI18nText,
-        "onBlur": function onBlur() {
-          if (_this3.asProps.visible) {
-            _this3.prevHighlightedIndex = _this3.asProps.highlightedIndex;
-            _this3.handlers.highlightedIndex(null);
-          }
-        },
-        "onFocus": function onFocus() {
-          if (_this3.asProps.visible) {
-            var index = _this3.prevHighlightedIndex;
-            _this3.handlers.highlightedIndex(index);
-          }
+            }
+          }, 30);
+        }
+      }],
+      value: null
+    };
+  }
+  getTriggerProps() {
+    const {
+      disabled,
+      visible,
+      state,
+      placeholder,
+      value,
+      options,
+      forwardRef,
+      name,
+      multiselect,
+      getI18nText,
+      highlightedIndex,
+      uid,
+      Children,
+      children: hasChildren
+    } = this.asProps;
+    const isMenu = isAdvanceMode(Children, [Select.Menu.displayName], true) || !hasChildren;
+    const ariaControls = isMenu ? `igc-${uid}-list` : `igc-${uid}-popper`;
+    return {
+      ...super.getTriggerProps(),
+      "onKeyDown": callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
+      "aria-controls": visible ? ariaControls : void 0,
+      "aria-haspopup": isMenu ? "listbox" : "dialog",
+      "aria-disabled": disabled ? "true" : "false",
+      "aria-activedescendant": visible && highlightedIndex !== null && this.itemRefs[highlightedIndex] ? `igc-${uid}-option-${highlightedIndex}` : void 0,
+      "empty": isEmptyValue(value),
+      value,
+      name,
+      "$hiddenRef": forwardRef,
+      multiselect,
+      state,
+      placeholder,
+      disabled,
+      "active": visible,
+      "onClear": this.handlerClear,
+      "children": this.renderChildrenTrigger(value, options),
+      getI18nText,
+      "onBlur": () => {
+        if (this.asProps.visible) {
+          this.prevHighlightedIndex = this.asProps.highlightedIndex;
+          this.handlers.highlightedIndex(null);
+        }
+      },
+      "onFocus": () => {
+        if (this.asProps.visible) {
+          const index = this.prevHighlightedIndex;
+          this.handlers.highlightedIndex(index);
         }
-      });
-    }
-  }, {
-    key: "getListProps",
-    value: function getListProps() {
-      var multiselect = this.asProps.multiselect;
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getListProps", this, 3)([])), {}, {
-        "aria-multiselectable": multiselect ? "true" : void 0
-      });
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getPopperProps", this, 3)([])), {}, {
-        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
-      });
-    }
-  }, {
-    key: "getOptionProps",
-    value: function getOptionProps(props, index) {
-      var _props$selected, _this4 = this;
-      var _this$asProps3 = this.asProps, value = _this$asProps3.value, highlightedIndex = _this$asProps3.highlightedIndex, _this$asProps3$size = _this$asProps3.size, size = _this$asProps3$size === void 0 ? "m" : _this$asProps3$size;
-      var highlighted = index === highlightedIndex && lastInteraction.isKeyboard() && !props.disabled;
-      var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : isSelectedOption(value, props.value);
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getItemProps", this, 3)([props, index])), {}, {
-        highlighted,
-        selected,
-        "aria-selected": selected ? "true" : "false",
-        "aria-disabled": props.disabled ? "true" : "false",
-        "role": "option",
-        "onClick": this.bindHandlerOptionClick(props.value, index),
-        "ref": function ref(node) {
-          return _this4.itemRef(props, index, node);
-        },
-        size
-      });
-    }
-  }, {
-    key: "getOptionCheckboxProps",
-    value: function getOptionCheckboxProps() {
-      var _this$asProps4 = this.asProps, size = _this$asProps4.size, resolveColor = _this$asProps4.resolveColor;
-      return {
-        size,
-        resolveColor
-      };
-    }
-  }, {
-    key: "getDividerProps",
-    value: function getDividerProps() {
-      return {
-        "my": 1,
-        "aria-disabled": "true"
-      };
-    }
-  }, {
-    key: "renderChildrenTrigger",
-    value: function renderChildrenTrigger(value, options) {
-      if (options) {
-        return [].concat(value).reduce(function(acc, value2) {
-          var selectedOption = options.find(function(o) {
-            return isSelectedOption(value2, o.value);
-          });
-          if (!selectedOption) return acc;
-          if (acc.length) acc.push(", ");
-          acc.push(selectedOption.label || selectedOption.value);
-          return acc;
-        }, []);
       }
-      return Array.isArray(value) ? value.reduce(function(acc, value2) {
+    };
+  }
+  getListProps() {
+    const {
+      multiselect
+    } = this.asProps;
+    return {
+      ...super.getListProps(),
+      "aria-multiselectable": multiselect ? "true" : void 0
+    };
+  }
+  getPopperProps() {
+    return {
+      ...super.getPopperProps(),
+      onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
+    };
+  }
+  getOptionProps(props, index) {
+    const {
+      value,
+      highlightedIndex,
+      size = "m"
+    } = this.asProps;
+    const highlighted = index === highlightedIndex && lastInteraction.isKeyboard() && !props.disabled;
+    const selected = props.selected ?? isSelectedOption(value, props.value);
+    return {
+      ...super.getItemProps(props, index),
+      highlighted,
+      selected,
+      "aria-selected": selected ? "true" : "false",
+      "aria-disabled": props.disabled ? "true" : "false",
+      "role": "option",
+      "onClick": this.bindHandlerOptionClick(props.value, index),
+      "ref": (node) => this.itemRef(props, index, node),
+      size
+    };
+  }
+  getOptionCheckboxProps() {
+    const {
+      size,
+      resolveColor
+    } = this.asProps;
+    return {
+      size,
+      resolveColor
+    };
+  }
+  getDividerProps() {
+    return {
+      "my": 1,
+      "aria-disabled": "true"
+    };
+  }
+  renderChildrenTrigger(value, options) {
+    if (options) {
+      return [].concat(value).reduce((acc, value2) => {
+        const selectedOption = options.find((o) => isSelectedOption(value2, o.value));
+        if (!selectedOption) return acc;
         if (acc.length) acc.push(", ");
-        acc.push(value2);
+        acc.push(selectedOption.label || selectedOption.value);
         return acc;
-      }, []) : value;
+      }, []);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps;
-      var _this$asProps5 = this.asProps, Children = _this$asProps5.Children, options = _this$asProps5.options, multiselect = _this$asProps5.multiselect;
-      _this$asProps5.value;
-      var uid = _this$asProps5.uid, forcedAdvancedMode = _this$asProps5.forcedAdvancedMode, other = _objectWithoutProperties(_this$asProps5, _excluded);
-      var advancedMode = forcedAdvancedMode || findComponent(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
-      logger.warn(options && advancedMode, "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'", other["data-ui-name"] || Select.displayName);
-      this.itemProps = [];
-      if (options) {
-        var _ref = this.asProps;
-        return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref), /* @__PURE__ */ React.createElement(Select.Trigger, other), /* @__PURE__ */ React.createElement(Select.Menu, null, options.map(function(option, index) {
-          return /* @__PURE__ */ React.createElement(Select.Option, _extends({
-            key: option.value,
-            id: "igc-".concat(uid, "-option-").concat(index)
-          }, option), multiselect && /* @__PURE__ */ React.createElement(Select.Option.Checkbox, null), option.children);
-        })));
-      }
-      return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Children, null));
+    return Array.isArray(value) ? value.reduce((acc, value2) => {
+      if (acc.length) acc.push(", ");
+      acc.push(value2);
+      return acc;
+    }, []) : value;
+  }
+  render() {
+    var _ref2 = this.asProps;
+    const {
+      Children,
+      options,
+      multiselect,
+      value: _value,
+      uid,
+      forcedAdvancedMode,
+      ...other
+    } = this.asProps;
+    const advancedMode = forcedAdvancedMode || findComponent(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
+    logger.warn(options && advancedMode, "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'", other["data-ui-name"] || Select.displayName);
+    this.itemProps = [];
+    if (options) {
+      var _ref = this.asProps;
+      return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref), /* @__PURE__ */ React.createElement(Select.Trigger, other), /* @__PURE__ */ React.createElement(Select.Menu, null, options.map((option, index) => {
+        return /* @__PURE__ */ React.createElement(Select.Option, _extends({
+          key: option.value,
+          id: `igc-${uid}-option-${index}`
+        }, option), multiselect && /* @__PURE__ */ React.createElement(Select.Option.Checkbox, null), option.children);
+      })));
     }
-  }]);
-})(AbstractDropdown);
+    return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Children, null));
+  }
+}
 _defineProperty(RootSelect, "displayName", "Select");
 _defineProperty(RootSelect, "style", style);
 _defineProperty(RootSelect, "enhance", Object.values(enhance).concat([resolveColorEnhance()]));
-_defineProperty(RootSelect, "defaultProps", function(props) {
-  var _props$highlightedInd, _props$selectedIndex, _props$interaction, _props$timeout;
-  var hasInputSearch = props.children && isAdvanceMode(props.children, [Select.InputSearch.displayName, InputSearch.displayName], true);
-  var defaultIndex = hasInputSearch ? null : 0;
+_defineProperty(RootSelect, "defaultProps", (props) => {
+  const hasInputSearch = props.children && isAdvanceMode(props.children, [Select.InputSearch.displayName, InputSearch.displayName], true);
+  const defaultIndex = hasInputSearch ? null : 0;
   return {
     placeholder: props.multiselect ? "Select options" : "Select option",
     size: "m",
     defaultValue: getEmptyValue(props.multiselect),
     defaultVisible: false,
-    defaultHighlightedIndex: (_props$highlightedInd = props.highlightedIndex) !== null && _props$highlightedInd !== void 0 ? _props$highlightedInd : defaultIndex,
-    defaultSelectedIndex: (_props$selectedIndex = props.selectedIndex) !== null && _props$selectedIndex !== void 0 ? _props$selectedIndex : defaultIndex,
+    defaultHighlightedIndex: props.highlightedIndex ?? defaultIndex,
+    defaultSelectedIndex: props.selectedIndex ?? defaultIndex,
     scrollToSelected: true,
     i18n: localizedMessages,
     locale: "en",
-    interaction: (_props$interaction = props.interaction) !== null && _props$interaction !== void 0 ? _props$interaction : "click",
+    interaction: props.interaction ?? "click",
     inlineActions: false,
-    timeout: (_props$timeout = props.timeout) !== null && _props$timeout !== void 0 ? _props$timeout : 0
+    timeout: props.timeout ?? 0
   };
 });
-function Trigger(_ref0) {
+function Trigger({
+  Children,
+  name,
+  value,
+  styles,
+  $hiddenRef,
+  tag: Tag = ButtonTrigger,
+  getI18nText
+}) {
   var _ref3 = arguments[0], _ref7;
-  var Children = _ref0.Children, name = _ref0.name, value = _ref0.value, styles = _ref0.styles, $hiddenRef = _ref0.$hiddenRef, _ref0$tag = _ref0.tag, Tag = _ref0$tag === void 0 ? ButtonTrigger : _ref0$tag, getI18nText = _ref0.getI18nText;
-  var hasInputTrigger = isInputTriggerTag(Tag);
-  var SSelectTrigger = Dropdown.Trigger;
-  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectTrigger, _ref7.cn("SSelectTrigger", _objectSpread({}, assignProps({
-    "tag": Tag,
-    "placeholder": getI18nText("selectPlaceholder"),
-    "role": "combobox",
-    "aria-autocomplete": hasInputTrigger && "list" || void 0
-  }, _ref3))), addonTextChildren(Children, Tag.Text || Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /* @__PURE__ */ React.createElement("input", _ref7.cn("input", {
+  const hasInputTrigger = isInputTriggerTag(Tag);
+  const SSelectTrigger = Dropdown.Trigger;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectTrigger, _ref7.cn("SSelectTrigger", {
+    ...assignProps({
+      "tag": Tag,
+      "placeholder": getI18nText("selectPlaceholder"),
+      "role": "combobox",
+      "aria-autocomplete": hasInputTrigger && "list" || void 0
+    }, _ref3)
+  }), addonTextChildren(Children, Tag.Text || Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /* @__PURE__ */ React.createElement("input", _ref7.cn("input", {
     "type": "hidden",
     "defaultValue": value,
     "name": name,
@@ -314,8 +314,16 @@ function Trigger(_ref0) {
 }
 function Menu(props) {
   var _ref4 = arguments[0];
-  var visible = props.visible, disablePortal = props.disablePortal, ignorePortalsStacking = props.ignorePortalsStacking, disableEnforceFocus = props.disableEnforceFocus, interaction = props.interaction, autoFocus = props.autoFocus, animationsDisabled = props.animationsDisabled;
-  var popperProps = {
+  const {
+    visible,
+    disablePortal,
+    ignorePortalsStacking,
+    disableEnforceFocus,
+    interaction,
+    autoFocus,
+    animationsDisabled
+  } = props;
+  const popperProps = {
     visible,
     disablePortal,
     ignorePortalsStacking,
@@ -328,46 +336,91 @@ function Menu(props) {
     role: null
   }), /* @__PURE__ */ React.createElement(Select.List, assignProps({}, _ref4))));
 }
-var optionPropsContext = /* @__PURE__ */ React.createContext({});
+const optionPropsContext = /* @__PURE__ */ React.createContext({});
 function Option(props) {
   var _ref5 = arguments[0], _ref8;
-  var SSelectOption = Dropdown.Item;
-  var styles = props.styles, Children = props.Children;
-  var hasCheckbox = isAdvanceMode(Children, [Select.Option.Checkbox.displayName]);
-  var hasContent = isAdvanceMode(Children, [Select.Option.Content.displayName]);
-  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectOption, _ref8.cn("SSelectOption", _objectSpread({}, assignProps({}, _ref5))), /* @__PURE__ */ React.createElement(optionPropsContext.Provider, {
-    value: props
+  const SSelectOption = Dropdown.Item;
+  const {
+    styles,
+    Children,
+    highlighted
+  } = props;
+  const itemRef = React.useRef(null);
+  const hasCheckbox = isAdvanceMode(Children, [Select.Option.Checkbox.displayName]);
+  const hasContent = isAdvanceMode(Children, [Select.Option.Content.displayName]);
+  const optionPropsContextValue = {
+    ...props,
+    itemRef,
+    highlighted
+  };
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectOption, _ref8.cn("SSelectOption", {
+    ...assignProps({
+      "ref": itemRef
+    }, _ref5)
+  }), /* @__PURE__ */ React.createElement(optionPropsContext.Provider, {
+    value: optionPropsContextValue
   }, hasCheckbox && !hasContent ? /* @__PURE__ */ React.createElement(Select.Option.Content, null, /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}))) : /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}))));
 }
 function Checkbox(providedProps) {
-  var optionProps = React.useContext(optionPropsContext);
-  var props = React.useMemo(function() {
-    return _objectSpread({
-      selected: optionProps === null || optionProps === void 0 ? void 0 : optionProps.selected,
-      disabled: optionProps === null || optionProps === void 0 ? void 0 : optionProps.disabled,
-      size: optionProps === null || optionProps === void 0 ? void 0 : optionProps.size
-    }, providedProps || {});
-  }, [providedProps, optionProps]);
-  var _useBox = useBox(props, props.forwardRef), _useBox2 = _slicedToArray(_useBox, 2), SOptionCheckbox = _useBox2[0], componentProps = _useBox2[1];
-  var size = props.size, theme = props.theme, selected = props.selected, resolveColor = props.resolveColor, indeterminate = props.indeterminate;
-  var styles = sstyled(props.styles);
-  var _styles$cn = styles.cn("SOptionCheckbox", {
+  const optionProps = React.useContext(optionPropsContext);
+  const props = React.useMemo(() => ({
+    selected: optionProps == null ? void 0 : optionProps.selected,
+    disabled: optionProps == null ? void 0 : optionProps.disabled,
+    size: optionProps == null ? void 0 : optionProps.size,
+    ...providedProps || {}
+  }), [providedProps, optionProps]);
+  const [SOptionCheckbox, componentProps] = useBox(props, props.forwardRef);
+  const {
+    size,
+    theme,
+    selected,
+    resolveColor,
+    indeterminate
+  } = props;
+  const styles = sstyled(props.styles);
+  const {
+    className,
+    style: style2
+  } = styles.cn("SOptionCheckbox", {
     size,
     "use:theme": resolveColor(theme),
     indeterminate,
     selected
-  }), className = _styles$cn.className, style2 = _styles$cn.style;
+  });
   return /* @__PURE__ */ React.createElement(SOptionCheckbox, _extends({}, componentProps, {
     className: cn(className, componentProps.className) || void 0,
-    style: _objectSpread(_objectSpread({}, style2), componentProps.style),
+    style: {
+      ...style2,
+      ...componentProps.style
+    },
     tabIndex: -1
   }));
 }
-var InputSearchWrapper = function InputSearchWrapper2() {
+function OptionText(providedProps) {
+  var _ref9;
+  const optionProps = React.useContext(optionPropsContext);
+  const selectedIndex = React.useContext(selectedIndexContext);
+  const props = React.useMemo(() => ({
+    key: optionProps == null ? void 0 : optionProps.id,
+    selected: optionProps == null ? void 0 : optionProps.selected,
+    disabled: optionProps == null ? void 0 : optionProps.disabled,
+    size: optionProps == null ? void 0 : optionProps.size,
+    hintProps: (optionProps == null ? void 0 : optionProps.hintProps) ?? {},
+    ...providedProps || {}
+  }), [providedProps, optionProps]);
+  if (optionProps.itemRef) {
+    props.hintProps.triggerRef = optionProps.itemRef;
+  }
+  props.hintProps.visible = selectedIndex === optionProps.index;
+  return _ref9 = sstyled(props.styles), /* @__PURE__ */ React.createElement(Text, _ref9.cn("Text", {
+    ...props
+  }));
+}
+const InputSearchWrapper = function() {
   var _ref6 = arguments[0];
   return /* @__PURE__ */ React.createElement(InputSearch, assignProps({}, _ref6));
 };
-var Select = createComponent(RootSelect, {
+const Select = createComponent(RootSelect, {
   Trigger: [Trigger, {
     Addon: ButtonTrigger.Addon,
     Text: ButtonTrigger.Text
@@ -378,12 +431,11 @@ var Select = createComponent(RootSelect, {
   Option: [Option, {
     Addon: DropdownMenu.Item.Addon,
     Content: DropdownMenu.Item.Content,
+    Text: OptionText,
     Hint: DropdownMenu.Item.Hint,
     Checkbox
   }],
   Group: Dropdown.Group,
-  OptionTitle: DropdownMenu.ItemTitle,
-  OptionHint: DropdownMenu.ItemHint,
   Divider,
   InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents],
   Input: [InputSearchWrapper, InputSearch._______childrenComponents]
@@ -391,9 +443,7 @@ var Select = createComponent(RootSelect, {
   parent: DropdownMenu,
   context: selectContext
 });
-var wrapSelect = function wrapSelect2(wrapper) {
-  return wrapper;
-};
+const wrapSelect = (wrapper) => wrapper;
 Select.selectedIndexContext = selectedIndexContext;
 export {
   Select as default,