@semcore/select 16.1.12 → 17.0.0-prerelease.17

package/lib/cjs/Select.js

@@ -1,20 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapSelect = exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.wrapSelect = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _baseComponents = require("@semcore/base-components");
@@ -27,25 +19,23 @@ var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
 var _divider = _interopRequireDefault(require("@semcore/divider"));
 var _dropdown = _interopRequireWildcard(require("@semcore/dropdown"));
 var _dropdownMenu = _interopRequireDefault(require("@semcore/dropdown-menu"));
-var _flexBox = require("@semcore/flex-box");
-var _popper = require("@semcore/popper");
+var _typography = require("@semcore/typography");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _context = require("./context");
 var _InputSearch = _interopRequireDefault(require("./InputSearch"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
-var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
 /*!__reshadow-styles__:"./style/select.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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__*/_core.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_"
 });
 function isSelectedOption(value, valueOption) {
   return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
@@ -56,297 +46,271 @@ function isEmptyValue(value) {
 function getEmptyValue(multiselect) {
   return multiselect ? [] : null;
 }
-var ListBoxContextProvider = function ListBoxContextProvider(_ref9) {
-  var children = _ref9.children;
-  return /*#__PURE__*/_react["default"].createElement(_baseComponents.hideScrollBarsFromScreenReadersContext.Provider, {
-    value: true
-  }, children);
-};
-var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
-  function RootSelect() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, RootSelect);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, RootSelect, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "role", 'listbox');
-    (0, _defineProperty2["default"])(_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.default.createElement(_baseComponents.hideScrollBarsFromScreenReadersContext.Provider, {
+  value: true
+}, children);
+class RootSelect extends _dropdown.AbstractDropdown {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "role", 'listbox');
+    (0, _defineProperty2.default)(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();
+      }
     });
-    (0, _defineProperty2["default"])(_this, "handlerClear", function (e) {
-      var value = _this.asProps.value;
-      var emptyValue = getEmptyValue(Array.isArray(value));
-      _this.handlers.value(emptyValue, e);
-      _this.handlers.visible(false);
+    (0, _defineProperty2.default)(this, "handlerClear", e => {
+      const {
+        value
+      } = this.asProps;
+      const emptyValue = getEmptyValue(Array.isArray(value));
+      this.handlers.value(emptyValue, e);
+      this.handlers.visible(false);
     });
-    return _this;
   }
-  (0, _inherits2["default"])(RootSelect, _AbstractDropdown);
-  return (0, _createClass2["default"])(RootSelect, [{
-    key: "itemRef",
-    value: function itemRef(props, index, node) {
-      (0, _superPropGet2["default"])(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 (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "uncontrolledProps", this, 3)([])), {}, {
-        visible: [null, function (visible) {
-          if (visible === true) {
-            var hasInputSearch = (0, _findComponent.isAdvanceMode)(_this2.asProps.Children, [Select.InputSearch.displayName, _InputSearch["default"].displayName], true);
-            var defaultIndex = hasInputSearch || _core.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 = (0, _findComponent.isAdvanceMode)(this.asProps.Children, [Select.InputSearch.displayName, _InputSearch.default.displayName], true);
+          const defaultIndex = hasInputSearch || _core.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 = (0, _findComponent.isAdvanceMode)(Children, [Select.Menu.displayName], true) || !hasChildren;
-      var ariaControls = isMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "getTriggerProps", this, 3)([])), {}, {
-        'onKeyDown': (0, _assignProps7.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 = (0, _findComponent.isAdvanceMode)(Children, [Select.Menu.displayName], true) || !hasChildren;
+    const ariaControls = isMenu ? `igc-${uid}-list` : `igc-${uid}-popper`;
+    return {
+      ...super.getTriggerProps(),
+      'onKeyDown': (0, _assignProps7.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 (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "getListProps", this, 3)([])), {}, {
-        'aria-multiselectable': multiselect ? 'true' : undefined
-      });
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "getPopperProps", this, 3)([])), {}, {
-        onKeyDown: (0, _assignProps7.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 && _core.lastInteraction.isKeyboard() && !props.disabled;
-      var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : isSelectedOption(value, props.value);
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(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: (0, _assignProps7.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 && _core.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 = (0, _objectWithoutProperties2["default"])(_this$asProps5, _excluded);
-      var advancedMode = forcedAdvancedMode || (0, _findComponent["default"])(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
-      _logger["default"].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["default"].createElement(_dropdownMenu["default"], (0, _core.assignProps)({}, _ref), /*#__PURE__*/_react["default"].createElement(Select.Trigger, other), /*#__PURE__*/_react["default"].createElement(Select.Menu, null, options.map(function (option, index) {
-          return /*#__PURE__*/_react["default"].createElement(Select.Option, (0, _extends2["default"])({
-            key: option.value,
-            id: "igc-".concat(uid, "-option-").concat(index)
-          }, option), multiselect && /*#__PURE__*/_react["default"].createElement(Select.Option.Checkbox, null), option.children);
-        })));
-      }
-      return /*#__PURE__*/_react["default"].createElement(_dropdownMenu["default"], (0, _core.assignProps)({}, _ref2), /*#__PURE__*/_react["default"].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 || (0, _findComponent.default)(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
+    _logger.default.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.default.createElement(_dropdownMenu.default, (0, _core.assignProps)({}, _ref), /*#__PURE__*/_react.default.createElement(Select.Trigger, other), /*#__PURE__*/_react.default.createElement(Select.Menu, null, options.map((option, index) => {
+        return /*#__PURE__*/_react.default.createElement(Select.Option, (0, _extends2.default)({
+          key: option.value,
+          id: `igc-${uid}-option-${index}`
+        }, option), multiselect && /*#__PURE__*/_react.default.createElement(Select.Option.Checkbox, null), option.children);
+      })));
     }
-  }]);
-}(_dropdown.AbstractDropdown);
-(0, _defineProperty2["default"])(RootSelect, "displayName", 'Select');
-(0, _defineProperty2["default"])(RootSelect, "style", style);
-(0, _defineProperty2["default"])(RootSelect, "enhance", Object.values(_dropdown.enhance).concat([(0, _resolveColorEnhance["default"])()]));
-(0, _defineProperty2["default"])(RootSelect, "defaultProps", function (props) {
-  var _props$highlightedInd, _props$selectedIndex, _props$interaction, _props$timeout;
-  var hasInputSearch = props.children && (0, _findComponent.isAdvanceMode)(props.children, [Select.InputSearch.displayName, _InputSearch["default"].displayName], true);
-  var defaultIndex = hasInputSearch ? null : 0;
+    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, (0, _core.assignProps)({}, _ref2), /*#__PURE__*/_react.default.createElement(Children, null));
+  }
+}
+(0, _defineProperty2.default)(RootSelect, "displayName", 'Select');
+(0, _defineProperty2.default)(RootSelect, "style", style);
+(0, _defineProperty2.default)(RootSelect, "enhance", Object.values(_dropdown.enhance).concat([(0, _resolveColorEnhance.default)()]));
+(0, _defineProperty2.default)(RootSelect, "defaultProps", props => {
+  const hasInputSearch = props.children && (0, _findComponent.isAdvanceMode)(props.children, [Select.InputSearch.displayName, _InputSearch.default.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: _intergalacticDynamicLocales.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 = _baseTrigger.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 ? _baseTrigger.ButtonTrigger : _ref0$tag,
-    getI18nText = _ref0.getI18nText;
-  var hasInputTrigger = (0, _popper.isInputTriggerTag)(Tag);
-  var SSelectTrigger = _dropdown["default"].Trigger;
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSelectTrigger, _ref7.cn("SSelectTrigger", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tag": Tag,
-    "placeholder": getI18nText('selectPlaceholder'),
-    "role": 'combobox',
-    "aria-autocomplete": hasInputTrigger && 'list' || undefined
-  }, _ref3))), (0, _addonTextChildren["default"])(Children, Tag.Text || Tag.Value || _baseTrigger.ButtonTrigger.Text, Tag.Addon || _baseTrigger.ButtonTrigger.Addon, true), name && /*#__PURE__*/_react["default"].createElement("input", _ref7.cn("input", {
+  const hasInputTrigger = (0, _baseComponents.isInputTriggerTag)(Tag);
+  const SSelectTrigger = _dropdown.default.Trigger;
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SSelectTrigger, _ref7.cn("SSelectTrigger", {
+    ...(0, _core.assignProps)({
+      "tag": Tag,
+      "placeholder": getI18nText('selectPlaceholder'),
+      "role": 'combobox',
+      "aria-autocomplete": hasInputTrigger && 'list' || undefined
+    }, _ref3)
+  }), (0, _addonTextChildren.default)(Children, Tag.Text || Tag.Value || _baseTrigger.ButtonTrigger.Text, Tag.Addon || _baseTrigger.ButtonTrigger.Addon, true), name && /*#__PURE__*/_react.default.createElement("input", _ref7.cn("input", {
     "type": 'hidden',
     "defaultValue": value,
     "name": name,
@@ -355,103 +319,138 @@ 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["default"].createElement(ListBoxContextProvider, null, /*#__PURE__*/_react["default"].createElement(Select.Popper, (0, _extends2["default"])({}, popperProps, {
+  return /*#__PURE__*/_react.default.createElement(ListBoxContextProvider, null, /*#__PURE__*/_react.default.createElement(Select.Popper, (0, _extends2.default)({}, popperProps, {
     role: null
-  }), /*#__PURE__*/_react["default"].createElement(Select.List, (0, _core.assignProps)({}, _ref4))));
+  }), /*#__PURE__*/_react.default.createElement(Select.List, (0, _core.assignProps)({}, _ref4))));
 }
-var optionPropsContext = /*#__PURE__*/_react["default"].createContext({});
+const optionPropsContext = /*#__PURE__*/_react.default.createContext({});
 function Option(props) {
   var _ref5 = arguments[0],
     _ref8;
-  var SSelectOption = _dropdown["default"].Item;
-  var styles = props.styles,
-    Children = props.Children;
-  var hasCheckbox = (0, _findComponent.isAdvanceMode)(Children, [Select.Option.Checkbox.displayName]);
-  var hasContent = (0, _findComponent.isAdvanceMode)(Children, [Select.Option.Content.displayName]);
-  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSelectOption, _ref8.cn("SSelectOption", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref5))), /*#__PURE__*/_react["default"].createElement(optionPropsContext.Provider, {
-    value: props
-  }, hasCheckbox && !hasContent ? /*#__PURE__*/_react["default"].createElement(Select.Option.Content, null, /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {}))) : /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {}))));
+  const SSelectOption = _dropdown.default.Item;
+  const {
+    styles,
+    Children,
+    highlighted
+  } = props;
+  const itemRef = _react.default.useRef(null);
+  const hasCheckbox = (0, _findComponent.isAdvanceMode)(Children, [Select.Option.Checkbox.displayName]);
+  const hasContent = (0, _findComponent.isAdvanceMode)(Children, [Select.Option.Content.displayName]);
+  const optionPropsContextValue = {
+    ...props,
+    itemRef,
+    highlighted
+  };
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SSelectOption, _ref8.cn("SSelectOption", {
+    ...(0, _core.assignProps)({
+      "ref": itemRef
+    }, _ref5)
+  }), /*#__PURE__*/_react.default.createElement(optionPropsContext.Provider, {
+    value: optionPropsContextValue
+  }, hasCheckbox && !hasContent ? /*#__PURE__*/_react.default.createElement(Select.Option.Content, null, /*#__PURE__*/_react.default.createElement(Children, _ref8.cn("Children", {}))) : /*#__PURE__*/_react.default.createElement(Children, _ref8.cn("Children", {}))));
 }
 function Checkbox(providedProps) {
-  var optionProps = _react["default"].useContext(optionPropsContext);
-  var props = _react["default"].useMemo(function () {
-    return (0, _objectSpread2["default"])({
-      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 = (0, _flexBox.useBox)(props, props.forwardRef),
-    _useBox2 = (0, _slicedToArray2["default"])(_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 = (0, _core.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;
-  return /*#__PURE__*/_react["default"].createElement(SOptionCheckbox, (0, _extends2["default"])({}, componentProps, {
-    className: (0, _classnames["default"])(className, componentProps.className) || undefined,
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), componentProps.style),
+  const optionProps = _react.default.useContext(optionPropsContext);
+  const props = _react.default.useMemo(() => ({
+    selected: optionProps?.selected,
+    disabled: optionProps?.disabled,
+    size: optionProps?.size,
+    ...(providedProps || {})
+  }), [providedProps, optionProps]);
+  const [SOptionCheckbox, componentProps] = (0, _baseComponents.useBox)(props, props.forwardRef);
+  const {
+    size,
+    theme,
+    selected,
+    resolveColor,
+    indeterminate
+  } = props;
+  const styles = (0, _core.sstyled)(props.styles);
+  const {
+    className,
+    style
+  } = styles.cn('SOptionCheckbox', {
+    size,
+    'use:theme': resolveColor(theme),
+    indeterminate,
+    selected
+  });
+  return /*#__PURE__*/_react.default.createElement(SOptionCheckbox, (0, _extends2.default)({}, componentProps, {
+    className: (0, _classnames.default)(className, componentProps.className) || undefined,
+    style: {
+      ...style,
+      ...componentProps.style
+    },
     tabIndex: -1
   }));
 }
-var InputSearchWrapper = function InputSearchWrapper() {
+function OptionText(providedProps) {
+  var _ref9;
+  const optionProps = _react.default.useContext(optionPropsContext);
+  const selectedIndex = _react.default.useContext(_dropdown.selectedIndexContext);
+  const props = _react.default.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 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(_typography.Text, _ref9.cn("Text", {
+    ...props
+  }));
+}
+const InputSearchWrapper = function () {
   var _ref6 = arguments[0];
-  return /*#__PURE__*/_react["default"].createElement(_InputSearch["default"], (0, _core.assignProps)({}, _ref6));
+  return /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _core.assignProps)({}, _ref6));
 };
-var Select = (0, _core.createComponent)(RootSelect, {
+const Select = (0, _core.createComponent)(RootSelect, {
   Trigger: [Trigger, {
     Addon: _baseTrigger.ButtonTrigger.Addon,
     Text: _baseTrigger.ButtonTrigger.Text
   }],
-  Popper: _dropdown["default"].Popper,
-  List: _dropdownMenu["default"].List,
+  Popper: _dropdown.default.Popper,
+  List: _dropdownMenu.default.List,
   Menu: Menu,
   Option: [Option, {
-    Addon: _dropdownMenu["default"].Item.Addon,
-    Content: _dropdownMenu["default"].Item.Content,
-    Hint: _dropdownMenu["default"].Item.Hint,
-    Checkbox: Checkbox
+    Addon: _dropdownMenu.default.Item.Addon,
+    Content: _dropdownMenu.default.Item.Content,
+    Text: OptionText,
+    Hint: _dropdownMenu.default.Item.Hint,
+    Checkbox
   }],
-  Group: _dropdown["default"].Group,
-  OptionTitle: _dropdownMenu["default"].ItemTitle,
-  OptionHint: _dropdownMenu["default"].ItemHint,
-  Divider: _divider["default"],
-  InputSearch: [InputSearchWrapper, _InputSearch["default"]._______childrenComponents],
-  Input: [InputSearchWrapper, _InputSearch["default"]._______childrenComponents]
+  Group: _dropdown.default.Group,
+  Divider: _divider.default,
+  InputSearch: [InputSearchWrapper, _InputSearch.default._______childrenComponents],
+  Input: [InputSearchWrapper, _InputSearch.default._______childrenComponents]
 }, {
-  parent: _dropdownMenu["default"],
+  parent: _dropdownMenu.default,
   context: _context.selectContext
 });
-var wrapSelect = exports.wrapSelect = function wrapSelect(wrapper) {
-  return wrapper;
-};
+const wrapSelect = wrapper => wrapper;
+exports.wrapSelect = wrapSelect;
 Select.selectedIndexContext = _dropdown.selectedIndexContext;
-var _default = exports["default"] = Select;
+var _default = exports.default = Select;
 //# sourceMappingURL=Select.js.map