@semcore/select 16.1.12 → 17.0.0-prerelease.18

package/lib/es6/Select.js

@@ -1,12 +1,4 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _superPropGet from "@babel/runtime/helpers/superPropGet";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps6 } from "@semcore/core";
@@ -15,8 +7,7 @@ import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
-import { hideScrollBarsFromScreenReadersContext } from '@semcore/base-components';
+import { hideScrollBarsFromScreenReadersContext, useBox, isInputTriggerTag } from '@semcore/base-components';
 import { ButtonTrigger } from '@semcore/base-trigger';
 import { createComponent, Root, sstyled, lastInteraction } from '@semcore/core';
 import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
@@ -27,23 +18,22 @@ import logger from '@semcore/core/lib/utils/logger';
 import Divider from '@semcore/divider';
 import Dropdown, { AbstractDropdown, enhance, selectedIndexContext } 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';
 import InputSearch from './InputSearch';
 /*!__reshadow-styles__:"./style/select.shadow.css"*/
-var 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}", /*__inner_css_end__*/"1hlru_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___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__*/"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_"
 });
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 function isSelectedOption(value, valueOption) {
@@ -55,297 +45,271 @@ function isEmptyValue(value) {
 function getEmptyValue(multiselect) {
   return multiselect ? [] : null;
 }
-var ListBoxContextProvider = function ListBoxContextProvider(_ref9) {
-  var children = _ref9.children;
-  return /*#__PURE__*/React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
-    value: true
-  }, children);
-};
-var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
-  function RootSelect() {
-    var _this;
-    _classCallCheck(this, RootSelect);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, RootSelect, [].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);
-          }
+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();
-        }
-      };
+      }
+      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(RootSelect, _AbstractDropdown);
-  return _createClass(RootSelect, [{
-    key: "itemRef",
-    value: function itemRef(props, index, node) {
-      _superPropGet(RootSelect, "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(RootSelect, "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(() => {
+            const options = this.menuRef.current?.querySelectorAll('[role="option"]');
+            const selected = this.menuRef.current?.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;
                 }
               }
-              // for some reason, Google Chrome optimizes this timeout with 0 value with previous render (when we set aria-selected)
-              // and that's why its skip scrollToNodes. We selected the appropriate timeout manually.
-            }, 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(RootSelect, "getTriggerProps", this, 3)([])), {}, {
-        'onKeyDown': callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
-        'aria-controls': visible ? ariaControls : undefined,
-        'aria-haspopup': isMenu ? 'listbox' : 'dialog',
-        'aria-disabled': disabled ? 'true' : 'false',
-        'aria-activedescendant': visible && highlightedIndex !== null && this.itemRefs[highlightedIndex] ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : undefined,
-        'empty': isEmptyValue(value),
-        value: value,
-        name: name,
-        '$hiddenRef': forwardRef,
-        multiselect: multiselect,
-        state: state,
-        placeholder: placeholder,
-        disabled: disabled,
-        'active': visible,
-        'onClear': this.handlerClear,
-        'children': this.renderChildrenTrigger(value, options),
-        getI18nText: getI18nText,
-        'onBlur': function onBlur() {
-          // if popper is opened and we moved from the trigger in select - it means we moved on some controls in popper and should hide highlighted for the option
-          if (_this3.asProps.visible) {
-            _this3.prevHighlightedIndex = _this3.asProps.highlightedIndex;
-            _this3.handlers.highlightedIndex(null);
-          }
-        },
-        'onFocus': function onFocus() {
-          // if popper is opened and we moved to the trigger in select - it means we moved from some controls in popper and should highlight the last highlighted option
-          if (_this3.asProps.visible) {
-            var index = _this3.prevHighlightedIndex;
-            _this3.handlers.highlightedIndex(index);
-          }
+            }
+            // for some reason, Google Chrome optimizes this timeout with 0 value with previous render (when we set aria-selected)
+            // and that's why its skip scrollToNodes. We selected the appropriate timeout manually.
+          }, 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 : undefined,
+      'aria-haspopup': isMenu ? 'listbox' : 'dialog',
+      'aria-disabled': disabled ? 'true' : 'false',
+      'aria-activedescendant': visible && highlightedIndex !== null && this.itemRefs[highlightedIndex] ? `igc-${uid}-option-${highlightedIndex}` : undefined,
+      'empty': isEmptyValue(value),
+      value,
+      name,
+      '$hiddenRef': forwardRef,
+      multiselect,
+      state,
+      placeholder,
+      disabled,
+      'active': visible,
+      'onClear': this.handlerClear,
+      'children': this.renderChildrenTrigger(value, options),
+      getI18nText,
+      'onBlur': () => {
+        // if popper is opened and we moved from the trigger in select - it means we moved on some controls in popper and should hide highlighted for the option
+        if (this.asProps.visible) {
+          this.prevHighlightedIndex = this.asProps.highlightedIndex;
+          this.handlers.highlightedIndex(null);
+        }
+      },
+      'onFocus': () => {
+        // if popper is opened and we moved to the trigger in select - it means we moved from some controls in popper and should highlight the last highlighted option
+        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(RootSelect, "getListProps", this, 3)([])), {}, {
-        'aria-multiselectable': multiselect ? 'true' : undefined
-      });
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect, "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(RootSelect, "getItemProps", this, 3)([props, index])), {}, {
-        highlighted: highlighted,
-        selected: 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: size
-      });
-    }
-  }, {
-    key: "getOptionCheckboxProps",
-    value: function getOptionCheckboxProps() {
-      var _this$asProps4 = this.asProps,
-        size = _this$asProps4.size,
-        resolveColor = _this$asProps4.resolveColor;
-      return {
-        size: size,
-        resolveColor: 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, value) {
-          var selectedOption = options.find(function (o) {
-            return isSelectedOption(value, 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, value) {
+    };
+  }
+  getListProps() {
+    const {
+      multiselect
+    } = this.asProps;
+    return {
+      ...super.getListProps(),
+      'aria-multiselectable': multiselect ? 'true' : undefined
+    };
+  }
+  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, value) => {
+        const selectedOption = options.find(o => isSelectedOption(value, o.value));
+        if (!selectedOption) return acc;
         if (acc.length) acc.push(', ');
-        acc.push(value);
+        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,
-        _value = _this$asProps5.value,
-        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, _assignProps2({}, _ref2), /*#__PURE__*/React.createElement(Children, null));
+    return Array.isArray(value) ? value.reduce((acc, value) => {
+      if (acc.length) acc.push(', ');
+      acc.push(value);
+      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, _assignProps2({}, _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({}, _assignProps3({
-    "tag": Tag,
-    "placeholder": getI18nText('selectPlaceholder'),
-    "role": 'combobox',
-    "aria-autocomplete": hasInputTrigger && 'list' || undefined
-  }, _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", {
+    ..._assignProps3({
+      "tag": Tag,
+      "placeholder": getI18nText('selectPlaceholder'),
+      "role": 'combobox',
+      "aria-autocomplete": hasInputTrigger && 'list' || undefined
+    }, _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,
@@ -354,77 +318,114 @@ 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 = {
-    visible: visible,
-    disablePortal: disablePortal,
-    ignorePortalsStacking: ignorePortalsStacking,
-    disableEnforceFocus: disableEnforceFocus,
-    interaction: interaction,
-    autoFocus: autoFocus,
-    animationsDisabled: animationsDisabled
+  const {
+    visible,
+    disablePortal,
+    ignorePortalsStacking,
+    disableEnforceFocus,
+    interaction,
+    autoFocus,
+    animationsDisabled
+  } = props;
+  const popperProps = {
+    visible,
+    disablePortal,
+    ignorePortalsStacking,
+    disableEnforceFocus,
+    interaction,
+    autoFocus,
+    animationsDisabled
   };
   return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(Select.Popper, _extends({}, popperProps, {
     role: null
   }), /*#__PURE__*/React.createElement(Select.List, _assignProps4({}, _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({}, _assignProps5({}, _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", {
+    ..._assignProps5({
+      "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', {
-      size: size,
-      'use:theme': resolveColor(theme),
-      indeterminate: indeterminate,
-      selected: selected
-    }),
-    className = _styles$cn.className,
-    style = _styles$cn.style;
+  const optionProps = React.useContext(optionPropsContext);
+  const props = React.useMemo(() => ({
+    selected: optionProps?.selected,
+    disabled: optionProps?.disabled,
+    size: 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
+  } = styles.cn('SOptionCheckbox', {
+    size,
+    'use:theme': resolveColor(theme),
+    indeterminate,
+    selected
+  });
   return /*#__PURE__*/React.createElement(SOptionCheckbox, _extends({}, componentProps, {
     className: cn(className, componentProps.className) || undefined,
-    style: _objectSpread(_objectSpread({}, style), componentProps.style),
+    style: {
+      ...style,
+      ...componentProps.style
+    },
     tabIndex: -1
   }));
 }
-var InputSearchWrapper = function InputSearchWrapper() {
+function OptionText(providedProps) {
+  var _ref9;
+  const optionProps = React.useContext(optionPropsContext);
+  const selectedIndex = React.useContext(selectedIndexContext);
+  const props = React.useMemo(() => ({
+    key: optionProps?.id,
+    selected: optionProps?.selected,
+    disabled: optionProps?.disabled,
+    size: optionProps?.size,
+    hintProps: 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, _assignProps6({}, _ref6));
 };
-var Select = createComponent(RootSelect, {
+const Select = createComponent(RootSelect, {
   Trigger: [Trigger, {
     Addon: ButtonTrigger.Addon,
     Text: ButtonTrigger.Text
@@ -435,22 +436,19 @@ var Select = createComponent(RootSelect, {
   Option: [Option, {
     Addon: DropdownMenu.Item.Addon,
     Content: DropdownMenu.Item.Content,
+    Text: OptionText,
     Hint: DropdownMenu.Item.Hint,
-    Checkbox: Checkbox
+    Checkbox
   }],
   Group: Dropdown.Group,
-  OptionTitle: DropdownMenu.ItemTitle,
-  OptionHint: DropdownMenu.ItemHint,
-  Divider: Divider,
+  Divider,
   InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents],
   Input: [InputSearchWrapper, InputSearch._______childrenComponents]
 }, {
   parent: DropdownMenu,
   context: selectContext
 });
-export var wrapSelect = function wrapSelect(wrapper) {
-  return wrapper;
-};
+export const wrapSelect = wrapper => wrapper;
 Select.selectedIndexContext = selectedIndexContext;
 export default Select;
 //# sourceMappingURL=Select.js.map