@semcore/select 4.51.0 → 16.0.0-prerelease.11

package/lib/esm/Select.mjs

@@ -1,102 +1,129 @@
-import K from "@babel/runtime/helpers/esm/slicedToArray";
-import M from "@babel/runtime/helpers/esm/extends";
-import J from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import h from "@babel/runtime/helpers/esm/objectSpread2";
-import Q from "@babel/runtime/helpers/esm/classCallCheck";
-import V from "@babel/runtime/helpers/esm/createClass";
-import A from "@babel/runtime/helpers/esm/assertThisInitialized";
-import k from "@babel/runtime/helpers/esm/get";
-import y from "@babel/runtime/helpers/esm/getPrototypeOf";
-import U from "@babel/runtime/helpers/esm/inherits";
-import X from "@babel/runtime/helpers/esm/createSuper";
-import b from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as F } from "@semcore/utils/lib/core/index";
-import q, { assignProps as P, sstyled as R } from "@semcore/core";
-import g from "react";
-import Y from "classnames";
-import f from "@semcore/dropdown-menu";
-import w, { enhance as ee, selectedIndexContext as te, AbstractDropdown as re } from "@semcore/dropdown";
-import { ButtonTrigger as C } from "@semcore/base-trigger";
-import ie from "@semcore/divider";
-import oe, { isAdvanceMode as S } from "@semcore/utils/lib/findComponent";
-import ne from "@semcore/utils/lib/logger";
-import ae from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import le from "@semcore/utils/lib/addonTextChildren";
-import D from "./InputSearch.mjs";
-import { useBox as ce } from "@semcore/flex-box";
-import { selectContext as se } from "./context.mjs";
-import { localizedMessages as de } from "./translations/__intergalactic-dynamic-locales.mjs";
-import { isInputTriggerTag as _e } from "@semcore/popper";
-import { callAllEventHandlers as N } from "@semcore/utils/lib/assignProps";
-var ge = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"], ue = (
+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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, lastInteraction, assignProps } from "@semcore/core";
+import React from "react";
+import cn from "classnames";
+import DropdownMenu from "@semcore/dropdown-menu";
+import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
+import { ButtonTrigger } from "@semcore/base-trigger";
+import Divider from "@semcore/divider";
+import findComponent, { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
+import logger from "@semcore/core/lib/utils/logger";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import InputSearch from "./InputSearch.mjs";
+import { useBox } from "@semcore/flex-box";
+import { selectContext } from "./context.mjs";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import { isInputTriggerTag } from "@semcore/popper";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
+var style = (
   /*__reshadow_css_start__*/
-  (F.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SOptionCheckbox_xxc2k_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_xxc2k_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_xxc2k_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_xxc2k_gg_.__selected_xxc2k_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_xxc2k_gg_._size_l_xxc2k_gg_{width:20px;height:20px}.___SOptionCheckbox_xxc2k_gg_._size_l_xxc2k_gg_.__selected_xxc2k_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_xxc2k_gg_.__indeterminate_xxc2k_gg_:before,.___SOptionCheckbox_xxc2k_gg_.__selected_xxc2k_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_xxc2k_gg_.__theme_xxc2k_gg_:before{border-color:var(--theme_xxc2k)}.___SOptionCheckbox_xxc2k_gg_.__theme_xxc2k_gg_.__indeterminate_xxc2k_gg_:before,.___SOptionCheckbox_xxc2k_gg_.__theme_xxc2k_gg_.__selected_xxc2k_gg_:before{background-color:var(--theme_xxc2k);border-color:var(--theme_xxc2k)}.___SOptionCheckbox_xxc2k_gg_.__selected_xxc2k_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_xxc2k_gg_.__selected_xxc2k_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_xxc2k_gg_.__indeterminate_xxc2k_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_xxc2k_gg_.__indeterminate_xxc2k_gg_._size_l_xxc2k_gg_:after{width:12px;height:2px}.___SOptionCheckbox_xxc2k_gg_.__indeterminate_xxc2k_gg_._size_m_xxc2k_gg_:after{width:8px;height:2px}',
-    "xxc2k_gg_"
+    '.___SOptionCheckbox_1dlne_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_1dlne_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_1dlne_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_1dlne_gg_.__selected_1dlne_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1dlne_gg_._size_l_1dlne_gg_{width:20px;height:20px}.___SOptionCheckbox_1dlne_gg_._size_l_1dlne_gg_.__selected_1dlne_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_:before,.___SOptionCheckbox_1dlne_gg_.__selected_1dlne_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1dlne_gg_.__theme_1dlne_gg_:before{border-color:var(--theme_1dlne)}.___SOptionCheckbox_1dlne_gg_.__theme_1dlne_gg_.__indeterminate_1dlne_gg_:before,.___SOptionCheckbox_1dlne_gg_.__theme_1dlne_gg_.__selected_1dlne_gg_:before{background-color:var(--theme_1dlne);border-color:var(--theme_1dlne)}.___SOptionCheckbox_1dlne_gg_.__selected_1dlne_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1dlne_gg_.__selected_1dlne_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_._size_l_1dlne_gg_:after{width:12px;height:2px}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_._size_m_1dlne_gg_:after{width:8px;height:2px}',
+    "1dlne_gg_"
   ), {
-    __SOptionCheckbox: "___SOptionCheckbox_xxc2k_gg_",
-    _selected: "__selected_xxc2k_gg_",
-    _size_l: "_size_l_xxc2k_gg_",
-    _indeterminate: "__indeterminate_xxc2k_gg_",
-    _theme: "__theme_xxc2k_gg_",
-    "--theme": "--theme_xxc2k",
-    _size_m: "_size_m_xxc2k_gg_"
+    "__SOptionCheckbox": "___SOptionCheckbox_1dlne_gg_",
+    "_selected": "__selected_1dlne_gg_",
+    "_size_l": "_size_l_1dlne_gg_",
+    "_indeterminate": "__indeterminate_1dlne_gg_",
+    "_theme": "__theme_1dlne_gg_",
+    "--theme": "--theme_1dlne",
+    "_size_m": "_size_m_1dlne_gg_"
   })
 );
-function E(i, l) {
-  return Array.isArray(i) ? i.includes(l) : l === i;
+function isSelectedOption(value, valueOption) {
+  return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
 }
-function he(i) {
-  return Array.isArray(i) ? i.length === 0 : i === null;
+function isEmptyValue(value) {
+  return Array.isArray(value) ? value.length === 0 : value === null;
 }
-function $(i) {
-  return i ? [] : null;
+function getEmptyValue(multiselect) {
+  return multiselect ? [] : null;
 }
-var O = /* @__PURE__ */ function(i) {
-  U(o, i);
-  var l = X(o);
-  function o() {
-    var n;
-    Q(this, o);
-    for (var e = arguments.length, t = new Array(e), r = 0; r < e; r++)
-      t[r] = arguments[r];
-    return n = l.call.apply(l, [this].concat(t)), b(A(n), "role", "listbox"), b(A(n), "bindHandlerOptionClick", function(a, c) {
-      return function(s) {
-        var _ = a, u = n.asProps, d = u.value, x = u.multiselect;
-        Array.isArray(d) && (d.includes(a) ? _ = d.filter(function(m) {
-          return m !== a;
-        }) : _ = d.concat(a)), n.handlers.value(_, s), x || (n.handlers.visible(!1), s.preventDefault());
+var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
+  _inherits(RootSelect2, _AbstractDropdown);
+  var _super = _createSuper(RootSelect2);
+  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 = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "role", "listbox");
+    _defineProperty(_assertThisInitialized(_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.value(newValue, e);
+        if (!multiselect) {
+          _this.handlers.visible(false);
+          e.preventDefault();
+        }
       };
-    }), b(A(n), "handlerClear", function(a) {
-      var c = n.asProps.value, s = $(Array.isArray(c));
-      n.handlers.value(s, a), n.handlers.visible(!1);
-    }), n;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlerClear", function(e) {
+      var value = _this.asProps.value;
+      var emptyValue = getEmptyValue(Array.isArray(value));
+      _this.handlers.value(emptyValue, e);
+      _this.handlers.visible(false);
+    });
+    return _this;
   }
-  return V(o, [{
+  _createClass(RootSelect2, [{
     key: "itemRef",
-    value: function(e, t, r) {
-      k(y(o.prototype), "itemRef", this).call(this, e, t, r);
-      var a = this.asProps.highlightedIndex, c = t === a;
-      c && this.scrollToNode(r);
+    value: function itemRef(props, index, node) {
+      _get(_getPrototypeOf(RootSelect2.prototype), "itemRef", this).call(this, props, index, node);
+      var highlightedIndex = this.asProps.highlightedIndex;
+      var isHighlighted = index === highlightedIndex;
+      if (isHighlighted) {
+        this.scrollToNode(node);
+      }
     }
   }, {
     key: "uncontrolledProps",
-    value: function() {
-      var e = this;
-      return h(h({}, k(y(o.prototype), "uncontrolledProps", this).call(this)), {}, {
-        visible: [null, function(t) {
-          if (t === !0) {
-            var r = S(e.asProps.Children, [p.InputSearch.displayName], !0), a = r ? null : e.props.defaultHighlightedIndex;
-            e.handlers.highlightedIndex(a), setTimeout(function() {
-              var c, s, _ = (c = e.menuRef.current) === null || c === void 0 ? void 0 : c.querySelectorAll('[role="option"]'), u = (s = e.menuRef.current) === null || s === void 0 ? void 0 : s.querySelector('[aria-selected="true"]');
-              if (u && _) {
-                e.scrollToNode(u);
-                for (var d = 0; d < _.length; d++)
-                  if (_[d] === u) {
-                    e.handlers.highlightedIndex(d);
+    value: function uncontrolledProps() {
+      var _this2 = this;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "uncontrolledProps", this).call(this)), {}, {
+        visible: [null, function(visible) {
+          if (visible === true) {
+            var hasInputSearch = isAdvanceMode(_this2.asProps.Children, [Select.InputSearch.displayName], true);
+            var defaultIndex = hasInputSearch ? 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;
                   }
+                }
               }
             }, 30);
           }
@@ -106,81 +133,90 @@ var O = /* @__PURE__ */ function(i) {
     }
   }, {
     key: "getTriggerProps",
-    value: function() {
-      var e = this, t = this.asProps, r = t.disabled, a = t.visible, c = t.state, s = t.placeholder, _ = t.value, u = t.options, d = t.forwardRef, x = t.name, m = t.multiselect, v = t.getI18nText, T = t.highlightedIndex, I = t.uid, G = t.Children, Z = t.children, z = S(G, [p.Menu.displayName], !0) || !Z, j = z ? "igc-".concat(I, "-list") : "igc-".concat(I, "-popper");
-      return h(h({}, k(y(o.prototype), "getTriggerProps", this).call(this)), {}, {
-        onKeyDown: N(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
-        "aria-controls": a ? j : void 0,
-        "aria-haspopup": z ? "listbox" : "dialog",
-        "aria-disabled": r ? "true" : "false",
-        "aria-activedescendant": a && T !== null && this.itemRefs[T] ? "igc-".concat(I, "-option-").concat(T) : void 0,
-        empty: he(_),
-        value: _,
-        name: x,
-        $hiddenRef: d,
-        multiselect: m,
-        state: c,
-        placeholder: s,
-        disabled: r,
-        active: a,
+    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({}, _get(_getPrototypeOf(RootSelect2.prototype), "getTriggerProps", this).call(this)), {}, {
+        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(_, u),
-        getI18nText: v,
-        onBlur: function() {
-          e.asProps.visible && (e.prevHighlightedIndex = e.asProps.highlightedIndex, e.handlers.highlightedIndex(null));
+        children: this.renderChildrenTrigger(value, options),
+        getI18nText,
+        onBlur: function onBlur() {
+          if (_this3.asProps.visible) {
+            _this3.prevHighlightedIndex = _this3.asProps.highlightedIndex;
+            _this3.handlers.highlightedIndex(null);
+          }
         },
-        onFocus: function() {
-          if (e.asProps.visible) {
-            var B = e.prevHighlightedIndex;
-            e.handlers.highlightedIndex(B);
+        onFocus: function onFocus() {
+          if (_this3.asProps.visible) {
+            var index = _this3.prevHighlightedIndex;
+            _this3.handlers.highlightedIndex(index);
           }
         }
       });
     }
   }, {
     key: "getListProps",
-    value: function() {
-      var e = this.asProps.multiselect;
-      return h(h({}, k(y(o.prototype), "getListProps", this).call(this)), {}, {
-        "aria-multiselectable": e ? "true" : void 0
+    value: function getListProps() {
+      var multiselect = this.asProps.multiselect;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getListProps", this).call(this)), {}, {
+        "aria-multiselectable": multiselect ? "true" : void 0
       });
     }
   }, {
     key: "getPopperProps",
-    value: function() {
-      return h(h({}, k(y(o.prototype), "getPopperProps", this).call(this)), {}, {
-        onKeyDown: N(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
+    value: function getPopperProps() {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getPopperProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
       });
     }
   }, {
     key: "getOptionProps",
-    value: function(e, t) {
-      var r, a = this, c = this.asProps, s = c.value, _ = c.highlightedIndex, u = c.focusSourceRef, d = c.size, x = d === void 0 ? "m" : d, m = t === _ && u.current === "keyboard" && !e.disabled, v = (r = e.selected) !== null && r !== void 0 ? r : E(s, e.value);
-      return h(h({}, k(y(o.prototype), "getItemProps", this).call(this, e, t)), {}, {
-        highlighted: m,
-        selected: v,
-        "aria-selected": v ? "true" : "false",
-        "aria-disabled": e.disabled ? "true" : "false",
+    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({}, _get(_getPrototypeOf(RootSelect2.prototype), "getItemProps", this).call(this, props, index)), {}, {
+        highlighted,
+        selected,
+        "aria-selected": selected ? "true" : "false",
+        "aria-disabled": props.disabled ? "true" : "false",
         role: "option",
-        onClick: this.bindHandlerOptionClick(e.value, t),
-        ref: function(I) {
-          return a.itemRef(e, t, I);
+        onClick: this.bindHandlerOptionClick(props.value, index),
+        ref: function ref(node) {
+          return _this4.itemRef(props, index, node);
         },
-        size: x
+        size
       });
     }
   }, {
     key: "getOptionCheckboxProps",
-    value: function() {
-      var e = this.asProps, t = e.size, r = e.resolveColor;
+    value: function getOptionCheckboxProps() {
+      var _this$asProps4 = this.asProps, size = _this$asProps4.size, resolveColor = _this$asProps4.resolveColor;
       return {
-        size: t,
-        resolveColor: r
+        size,
+        resolveColor
       };
     }
   }, {
     key: "getDividerProps",
-    value: function() {
+    value: function getDividerProps() {
       return {
         my: 1,
         "aria-disabled": "true"
@@ -188,126 +224,155 @@ var O = /* @__PURE__ */ function(i) {
     }
   }, {
     key: "renderChildrenTrigger",
-    value: function(e, t) {
-      return t ? [].concat(e).reduce(function(r, a) {
-        var c = t.find(function(s) {
-          return E(a, s.value);
-        });
-        return c && (r.length && r.push(", "), r.push(c.label || c.value)), r;
-      }, []) : Array.isArray(e) ? e.reduce(function(r, a) {
-        return r.length && r.push(", "), r.push(a), r;
-      }, []) : e;
+    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) {
+        if (acc.length) acc.push(", ");
+        acc.push(value2);
+        return acc;
+      }, []) : value;
     }
   }, {
     key: "render",
-    value: function() {
-      var e = this.asProps, t = this.asProps, r = t.Children, a = t.options, c = t.multiselect;
-      t.value;
-      var s = t.uid, _ = t.forcedAdvancedMode, u = J(t, ge), d = _ || oe(r, [p.Trigger.displayName, p.Popper.displayName]);
-      if (ne.warn(a && d, "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'", u["data-ui-name"] || p.displayName), this.itemProps = [], a) {
-        var x = this.asProps;
-        return /* @__PURE__ */ g.createElement(f, P({}, x), /* @__PURE__ */ g.createElement(p.Trigger, u), /* @__PURE__ */ g.createElement(p.Menu, null, a.map(function(m, v) {
-          return /* @__PURE__ */ g.createElement(p.Option, M({
-            key: m.value,
-            id: "igc-".concat(s, "-option-").concat(v)
-          }, m), c && /* @__PURE__ */ g.createElement(p.Option.Checkbox, null), m.children);
+    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__ */ g.createElement(f, P({}, e), /* @__PURE__ */ g.createElement(r, null));
+      return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Children, null));
     }
-  }]), o;
-}(re);
-b(O, "displayName", "Select");
-b(O, "style", ue);
-b(O, "enhance", Object.values(ee).concat([ae()]));
-b(O, "defaultProps", function(i) {
-  var l, o, n, e, t = i.children && S(i.children, [p.InputSearch.displayName], !0), r = t ? null : 0;
+  }]);
+  return RootSelect2;
+}(AbstractDropdown);
+_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], true);
+  var defaultIndex = hasInputSearch ? null : 0;
   return {
-    placeholder: i.multiselect ? "Select options" : "Select option",
+    placeholder: props.multiselect ? "Select options" : "Select option",
     size: "m",
-    defaultValue: $(i.multiselect),
-    defaultVisible: !1,
-    defaultHighlightedIndex: (l = i.highlightedIndex) !== null && l !== void 0 ? l : r,
-    defaultSelectedIndex: (o = i.selectedIndex) !== null && o !== void 0 ? o : r,
-    scrollToSelected: !0,
-    i18n: de,
+    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,
+    scrollToSelected: true,
+    i18n: localizedMessages,
     locale: "en",
-    interaction: (n = i.interaction) !== null && n !== void 0 ? n : "click",
-    inlineActions: !1,
-    timeout: (e = i.timeout) !== null && e !== void 0 ? e : 0
+    interaction: (_props$interaction = props.interaction) !== null && _props$interaction !== void 0 ? _props$interaction : "click",
+    inlineActions: false,
+    timeout: (_props$timeout = props.timeout) !== null && _props$timeout !== void 0 ? _props$timeout : 0
   };
 });
-function pe(i) {
-  var l = arguments[0], o, n = i.Children, e = i.name, t = i.value, r = i.styles, a = i.$hiddenRef, c = i.tag, s = c === void 0 ? C : c, _ = i.getI18nText, u = _e(s), d = w.Trigger;
-  return o = R(r), /* @__PURE__ */ g.createElement(d, o.cn("SSelectTrigger", h({}, P({
-    tag: s,
-    placeholder: _("selectPlaceholder"),
-    role: "combobox",
-    "aria-autocomplete": u && "list" || void 0
-  }, l))), le(n, s.Text || C.Text, s.Value || C.Text, s.Addon || C.Addon, !0), e && /* @__PURE__ */ g.createElement("input", o.cn("input", {
-    type: "hidden",
-    defaultValue: t,
-    name: e,
-    ref: a
+function Trigger(_ref8) {
+  var _ref3 = arguments[0], _ref6;
+  var Children = _ref8.Children, name = _ref8.name, value = _ref8.value, styles = _ref8.styles, $hiddenRef = _ref8.$hiddenRef, _ref8$tag = _ref8.tag, Tag = _ref8$tag === void 0 ? ButtonTrigger : _ref8$tag, getI18nText = _ref8.getI18nText;
+  var hasInputTrigger = isInputTriggerTag(Tag);
+  var SSelectTrigger = Dropdown.Trigger;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectTrigger, _ref6.cn("SSelectTrigger", _objectSpread({}, assignProps({
+    "tag": Tag,
+    "placeholder": getI18nText("selectPlaceholder"),
+    "role": "combobox",
+    "aria-autocomplete": hasInputTrigger && "list" || void 0
+  }, _ref3))), addonTextChildren(Children, Tag.Text || ButtonTrigger.Text, Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /* @__PURE__ */ React.createElement("input", _ref6.cn("input", {
+    "type": "hidden",
+    "defaultValue": value,
+    "name": name,
+    "ref": $hiddenRef
   })));
 }
-var L = /* @__PURE__ */ g.createContext({});
-function me(i) {
-  var l = arguments[0], o, n = w.Item, e = i.styles, t = i.Children, r = S(t, [p.Option.Checkbox.displayName]), a = S(t, [p.Option.Content.displayName]);
-  return o = R(e), /* @__PURE__ */ g.createElement(n, o.cn("SSelectOption", h({}, P({}, l))), /* @__PURE__ */ g.createElement(L.Provider, {
-    value: i
-  }, r && !a ? /* @__PURE__ */ g.createElement(p.Option.Content, null, /* @__PURE__ */ g.createElement(t, o.cn("Children", {}))) : /* @__PURE__ */ g.createElement(t, o.cn("Children", {}))));
+var optionPropsContext = /* @__PURE__ */ React.createContext({});
+function Option(props) {
+  var _ref4 = arguments[0], _ref7;
+  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 _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectOption, _ref7.cn("SSelectOption", _objectSpread({}, assignProps({}, _ref4))), /* @__PURE__ */ React.createElement(optionPropsContext.Provider, {
+    value: props
+  }, hasCheckbox && !hasContent ? /* @__PURE__ */ React.createElement(Select.Option.Content, null, /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {}))) : /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {}))));
 }
-function xe(i) {
-  var l = g.useContext(L), o = g.useMemo(function() {
-    return h({
-      selected: l == null ? void 0 : l.selected,
-      disabled: l == null ? void 0 : l.disabled,
-      size: l == null ? void 0 : l.size
-    }, i || {});
-  }, [i, l]), n = ce(o, o.forwardRef), e = K(n, 2), t = e[0], r = e[1], a = o.size, c = o.theme, s = o.selected, _ = o.resolveColor, u = o.indeterminate, d = R(o.styles), x = d.cn("SOptionCheckbox", {
-    size: a,
-    "use:theme": _(c),
-    indeterminate: u,
-    selected: s
-  }), m = x.className, v = x.style;
-  return /* @__PURE__ */ g.createElement(t, M({}, r, {
-    className: Y(m, r.className) || void 0,
-    style: h(h({}, v), r.style),
+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,
+    "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),
     tabIndex: -1
   }));
 }
-var H = function() {
-  var l = arguments[0];
-  return /* @__PURE__ */ g.createElement(D, P({}, l));
-}, p = q(O, {
-  Trigger: [pe, {
-    Addon: C.Addon,
-    Text: C.Text
+var InputSearchWrapper = function InputSearchWrapper2() {
+  var _ref5 = arguments[0];
+  return /* @__PURE__ */ React.createElement(InputSearch, assignProps({}, _ref5));
+};
+var Select = createComponent(RootSelect, {
+  Trigger: [Trigger, {
+    Addon: ButtonTrigger.Addon,
+    Text: ButtonTrigger.Text
   }],
-  Popper: w.Popper,
-  List: f.List,
-  Menu: f.Menu,
-  Option: [me, {
-    Addon: f.Item.Addon,
-    Content: f.Item.Content,
-    Hint: f.Item.Hint,
-    Checkbox: xe
+  Popper: Dropdown.Popper,
+  List: DropdownMenu.List,
+  Menu: DropdownMenu.Menu,
+  Option: [Option, {
+    Addon: DropdownMenu.Item.Addon,
+    Content: DropdownMenu.Item.Content,
+    Hint: DropdownMenu.Item.Hint,
+    Checkbox
   }],
-  Group: w.Group,
-  OptionTitle: f.ItemTitle,
-  OptionHint: f.ItemHint,
-  Divider: ie,
-  InputSearch: [H, D._______childrenComponents],
-  Input: [H, D._______childrenComponents]
+  Group: Dropdown.Group,
+  OptionTitle: DropdownMenu.ItemTitle,
+  OptionHint: DropdownMenu.ItemHint,
+  Divider,
+  InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents],
+  Input: [InputSearchWrapper, InputSearch._______childrenComponents]
 }, {
-  parent: f,
-  context: se
-}), Ve = function(l) {
-  return l;
+  parent: DropdownMenu,
+  context: selectContext
+});
+var wrapSelect = function wrapSelect2(wrapper) {
+  return wrapper;
 };
-p.selectedIndexContext = te;
+Select.selectedIndexContext = selectedIndexContext;
 export {
-  p as default,
-  Ve as wrapSelect
+  Select as default,
+  wrapSelect
 };