@semcore/select 4.53.0-prerelease.0 → 4.53.0-prerelease.1

package/lib/esm/Select.mjs

@@ -4,45 +4,48 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
+import _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, lastInteraction, assignProps, createComponent } from "@semcore/core";
-import { hideScrollBarsFromScreenReadersContext, isInputTriggerTag, useBox } from "@semcore/base-components";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { assignProps, sstyled as sstyled$1 } 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 addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
-import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
-import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import findComponent, { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
-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 { Text } from "@semcore/typography";
-import cn from "classnames";
-import React from "react";
-import { selectContext } from "./context.mjs";
+import findComponent, { isAdvanceMode } from "@semcore/utils/lib/findComponent";
+import logger from "@semcore/utils/lib/logger";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import addonTextChildren from "@semcore/utils/lib/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/utils/lib/assignProps";
 var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
 /*!__reshadow-styles__:"./style/select.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SOptionCheckbox_19tod_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_19tod_gg_::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___SOptionCheckbox_19tod_gg_::before{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SOptionCheckbox_19tod_gg_::before{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SOptionCheckbox_19tod_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_19tod_gg_.__selected_19tod_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_19tod_gg_._size_l_19tod_gg_{width:20px;height:20px}.___SOptionCheckbox_19tod_gg_._size_l_19tod_gg_.__selected_19tod_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_19tod_gg_.__indeterminate_19tod_gg_:before,.___SOptionCheckbox_19tod_gg_.__selected_19tod_gg_:before{background-color:var(--intergalactic-control-primary-info, rgb(26, 30, 26));border-color:var(--intergalactic-control-primary-info, rgb(26, 30, 26))}.___SOptionCheckbox_19tod_gg_.__theme_19tod_gg_:before{border-color:var(--theme_19tod)}.___SOptionCheckbox_19tod_gg_.__theme_19tod_gg_.__indeterminate_19tod_gg_:before,.___SOptionCheckbox_19tod_gg_.__theme_19tod_gg_.__selected_19tod_gg_:before{background-color:var(--theme_19tod);border-color:var(--theme_19tod)}.___SOptionCheckbox_19tod_gg_.__selected_19tod_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 30, 209, 0.062))}@supports (color:color(display-p3 0 0 0%)){.___SOptionCheckbox_19tod_gg_.__selected_19tod_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 30, 209, 0.062))}@media (color-gamut:p3){.___SOptionCheckbox_19tod_gg_.__selected_19tod_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, color(display-p3 0.02906 0.11403 0.78782 / 0.062))}}}@media (hover:hover){.___SOptionCheckbox_19tod_gg_.__selected_19tod_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 28, 206, 0.154))}@supports (color:color(display-p3 0 0 0%)){.___SOptionCheckbox_19tod_gg_.__selected_19tod_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 28, 206, 0.154))}@media (color-gamut:p3){.___SOptionCheckbox_19tod_gg_.__selected_19tod_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, color(display-p3 0.02685 0.10865 0.77388 / 0.154))}}}}.___SOptionCheckbox_19tod_gg_.__indeterminate_19tod_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_19tod_gg_.__indeterminate_19tod_gg_._size_l_19tod_gg_:after{width:12px;height:2px}.___SOptionCheckbox_19tod_gg_.__indeterminate_19tod_gg_._size_m_19tod_gg_:after{width:8px;height:2px}',
+    '.___SOptionCheckbox_c9fxd_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_c9fxd_gg_::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___SOptionCheckbox_c9fxd_gg_::before{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SOptionCheckbox_c9fxd_gg_::before{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SOptionCheckbox_c9fxd_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_c9fxd_gg_.__selected_c9fxd_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_c9fxd_gg_._size_l_c9fxd_gg_{width:20px;height:20px}.___SOptionCheckbox_c9fxd_gg_._size_l_c9fxd_gg_.__selected_c9fxd_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_c9fxd_gg_.__indeterminate_c9fxd_gg_:before,.___SOptionCheckbox_c9fxd_gg_.__selected_c9fxd_gg_:before{background-color:var(--intergalactic-control-primary-info, rgb(26, 30, 26));border-color:var(--intergalactic-control-primary-info, rgb(26, 30, 26))}.___SOptionCheckbox_c9fxd_gg_.__theme_c9fxd_gg_:before{border-color:var(--theme_c9fxd)}.___SOptionCheckbox_c9fxd_gg_.__theme_c9fxd_gg_.__indeterminate_c9fxd_gg_:before,.___SOptionCheckbox_c9fxd_gg_.__theme_c9fxd_gg_.__selected_c9fxd_gg_:before{background-color:var(--theme_c9fxd);border-color:var(--theme_c9fxd)}.___SOptionCheckbox_c9fxd_gg_.__selected_c9fxd_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 30, 209, 0.062))}@supports (color:color(display-p3 0 0 0)){.___SOptionCheckbox_c9fxd_gg_.__selected_c9fxd_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 30, 209, 0.062))}@media (color-gamut:p3){.___SOptionCheckbox_c9fxd_gg_.__selected_c9fxd_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, color(display-p3 0.02906 0.11403 0.78782 / 0.062))}}}@media (hover:hover){.___SOptionCheckbox_c9fxd_gg_.__selected_c9fxd_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 30, 205, 0.154))}@supports (color:color(display-p3 0 0 0)){.___SOptionCheckbox_c9fxd_gg_.__selected_c9fxd_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 30, 205, 0.154))}@media (color-gamut:p3){.___SOptionCheckbox_c9fxd_gg_.__selected_c9fxd_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, color(display-p3 0.02685 0.10865 0.77388 / 0.154))}}}}.___SOptionCheckbox_c9fxd_gg_.__indeterminate_c9fxd_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_c9fxd_gg_.__indeterminate_c9fxd_gg_._size_l_c9fxd_gg_:after{width:12px;height:2px}.___SOptionCheckbox_c9fxd_gg_.__indeterminate_c9fxd_gg_._size_m_c9fxd_gg_:after{width:8px;height:2px}',
     /*__inner_css_end__*/
-    "19tod_gg_"
+    "c9fxd_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SOptionCheckbox": "___SOptionCheckbox_19tod_gg_",
-    "_selected": "__selected_19tod_gg_",
-    "_size_l": "_size_l_19tod_gg_",
-    "_indeterminate": "__indeterminate_19tod_gg_",
-    "_theme": "__theme_19tod_gg_",
-    "--theme": "--theme_19tod",
-    "_size_m": "_size_m_19tod_gg_"
+    "__SOptionCheckbox": "___SOptionCheckbox_c9fxd_gg_",
+    "_selected": "__selected_c9fxd_gg_",
+    "_size_l": "_size_l_c9fxd_gg_",
+    "_indeterminate": "__indeterminate_c9fxd_gg_",
+    "_theme": "__theme_c9fxd_gg_",
+    "--theme": "--theme_c9fxd",
+    "_size_m": "_size_m_c9fxd_gg_"
   })
 );
 function isSelectedOption(value, valueOption) {
@@ -54,22 +57,18 @@ function isEmptyValue(value) {
 function getEmptyValue(multiselect) {
   return multiselect ? [] : null;
 }
-var ListBoxContextProvider = function ListBoxContextProvider2(_ref0) {
-  var children = _ref0.children;
-  return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
-    value: true
-  }, children);
-};
-var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
+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 = _callSuper(this, RootSelect2, [].concat(args));
-    _defineProperty(_this, "role", "listbox");
-    _defineProperty(_this, "bindHandlerOptionClick", function(optionValue, index) {
+    _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;
@@ -82,7 +81,6 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
             newValue = value.concat(optionValue);
           }
         }
-        _this.handlers.highlightedIndex(index);
         _this.handlers.value(newValue, e);
         if (!multiselect) {
           _this.handlers.visible(false);
@@ -90,7 +88,7 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
         }
       };
     });
-    _defineProperty(_this, "handlerClear", function(e) {
+    _defineProperty(_assertThisInitialized(_this), "handlerClear", function(e) {
       var value = _this.asProps.value;
       var emptyValue = getEmptyValue(Array.isArray(value));
       _this.handlers.value(emptyValue, e);
@@ -98,11 +96,10 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
     });
     return _this;
   }
-  _inherits(RootSelect2, _AbstractDropdown);
-  return _createClass(RootSelect2, [{
+  _createClass(RootSelect2, [{
     key: "itemRef",
     value: function itemRef(props, index, node) {
-      _superPropGet(RootSelect2, "itemRef", this, 3)([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) {
@@ -113,11 +110,11 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       var _this2 = this;
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "uncontrolledProps", this, 3)([])), {}, {
+      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, InputSearch.displayName], true);
-            var defaultIndex = hasInputSearch || lastInteraction.isMouse() ? null : _this2.props.defaultHighlightedIndex;
+            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;
@@ -145,31 +142,31 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
       var _this$asProps2 = this.asProps, disabled = _this$asProps2.disabled, visible = _this$asProps2.visible, state = _this$asProps2.state, placeholder = _this$asProps2.placeholder, value = _this$asProps2.value, options = _this$asProps2.options, forwardRef = _this$asProps2.forwardRef, name = _this$asProps2.name, multiselect = _this$asProps2.multiselect, getI18nText = _this$asProps2.getI18nText, highlightedIndex = _this$asProps2.highlightedIndex, uid = _this$asProps2.uid, Children = _this$asProps2.Children, hasChildren = _this$asProps2.children;
       var isMenu = isAdvanceMode(Children, [Select.Menu.displayName], true) || !hasChildren;
       var ariaControls = isMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getTriggerProps", this, 3)([])), {}, {
-        "onKeyDown": callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
+      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),
+        empty: isEmptyValue(value),
         value,
         name,
-        "$hiddenRef": forwardRef,
+        $hiddenRef: forwardRef,
         multiselect,
         state,
         placeholder,
         disabled,
-        "active": visible,
-        "onClear": this.handlerClear,
-        "children": this.renderChildrenTrigger(value, options),
+        active: visible,
+        onClear: this.handlerClear,
+        children: this.renderChildrenTrigger(value, options),
         getI18nText,
-        "onBlur": function onBlur() {
+        onBlur: function onBlur() {
           if (_this3.asProps.visible) {
             _this3.prevHighlightedIndex = _this3.asProps.highlightedIndex;
             _this3.handlers.highlightedIndex(null);
           }
         },
-        "onFocus": function onFocus() {
+        onFocus: function onFocus() {
           if (_this3.asProps.visible) {
             var index = _this3.prevHighlightedIndex;
             _this3.handlers.highlightedIndex(index);
@@ -181,14 +178,14 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
     key: "getListProps",
     value: function getListProps() {
       var multiselect = this.asProps.multiselect;
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getListProps", this, 3)([])), {}, {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getListProps", this).call(this)), {}, {
         "aria-multiselectable": multiselect ? "true" : void 0
       });
     }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getPopperProps", this, 3)([])), {}, {
+      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))
       });
     }
@@ -196,17 +193,17 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
     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 _this$asProps3 = this.asProps, value = _this$asProps3.value, highlightedIndex = _this$asProps3.highlightedIndex, focusSourceRef = _this$asProps3.focusSourceRef, _this$asProps3$size = _this$asProps3.size, size = _this$asProps3$size === void 0 ? "m" : _this$asProps3$size;
+      var highlighted = index === highlightedIndex && focusSourceRef.current === "keyboard" && !props.disabled;
       var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : isSelectedOption(value, props.value);
-      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getItemProps", this, 3)([props, index])), {}, {
+      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(props.value, index),
-        "ref": function ref(node) {
+        role: "option",
+        onClick: this.bindHandlerOptionClick(props.value, index),
+        ref: function ref(node) {
           return _this4.itemRef(props, index, node);
         },
         size
@@ -225,7 +222,7 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
     key: "getDividerProps",
     value: function getDividerProps() {
       return {
-        "my": 1,
+        my: 1,
         "aria-disabled": "true"
       };
     }
@@ -253,7 +250,9 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
     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 _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 = [];
@@ -269,16 +268,18 @@ var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
       return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Children, null));
     }
   }]);
-})(AbstractDropdown);
+  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, InputSearch.displayName], true);
+  var hasInputSearch = props.children && isAdvanceMode(props.children, [Select.InputSearch.displayName], true);
   var 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,
@@ -291,56 +292,33 @@ _defineProperty(RootSelect, "defaultProps", function(props) {
     timeout: (_props$timeout = props.timeout) !== null && _props$timeout !== void 0 ? _props$timeout : 0
   };
 });
-function Trigger(_ref1) {
-  var _ref3 = arguments[0], _ref7;
-  var Children = _ref1.Children, name = _ref1.name, value = _ref1.value, styles = _ref1.styles, $hiddenRef = _ref1.$hiddenRef, _ref1$tag = _ref1.tag, Tag = _ref1$tag === void 0 ? ButtonTrigger : _ref1$tag, getI18nText = _ref1.getI18nText;
+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 _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectTrigger, _ref7.cn("SSelectTrigger", _objectSpread({}, assignProps({
+  return _ref6 = sstyled$1(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 || Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /* @__PURE__ */ React.createElement("input", _ref7.cn("input", {
+  }, _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
   })));
 }
-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,
-    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, assignProps({}, _ref4))));
-}
 var optionPropsContext = /* @__PURE__ */ React.createContext({});
 function Option(props) {
-  var _ref5 = arguments[0], _ref8;
+  var _ref4 = arguments[0], _ref7;
   var SSelectOption = Dropdown.Item;
-  var styles = props.styles, Children = props.Children, highlighted = props.highlighted;
-  var itemRef = React.useRef(null);
+  var styles = props.styles, Children = props.Children;
   var hasCheckbox = isAdvanceMode(Children, [Select.Option.Checkbox.displayName]);
   var hasContent = isAdvanceMode(Children, [Select.Option.Content.displayName]);
-  var optionPropsContextValue = _objectSpread(_objectSpread({}, props), {}, {
-    itemRef,
-    highlighted
-  });
-  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectOption, _ref8.cn("SSelectOption", _objectSpread({}, assignProps({
-    "ref": itemRef
-  }, _ref5))), /* @__PURE__ */ React.createElement(optionPropsContext.Provider, {
-    value: optionPropsContextValue
-  }, hasCheckbox && !hasContent ? /* @__PURE__ */ React.createElement(Select.Option.Content, null, /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}))) : /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}))));
+  return _ref7 = sstyled$1(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 Checkbox(providedProps) {
   var optionProps = React.useContext(optionPropsContext);
@@ -353,7 +331,7 @@ function Checkbox(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 = sstyled$1(props.styles);
   var _styles$cn = styles.cn("SOptionCheckbox", {
     size,
     "use:theme": resolveColor(theme),
@@ -366,27 +344,9 @@ function Checkbox(providedProps) {
     tabIndex: -1
   }));
 }
-function OptionText(providedProps) {
-  var _ref9;
-  var optionProps = React.useContext(optionPropsContext);
-  var selectedIndex = React.useContext(selectedIndexContext);
-  var props = React.useMemo(function() {
-    return _objectSpread({
-      key: optionProps === null || optionProps === void 0 ? void 0 : optionProps.id,
-      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]);
-  return _ref9 = sstyled(props.styles), /* @__PURE__ */ React.createElement(Text, _ref9.cn("Text", _objectSpread(_objectSpread({}, props), {}, {
-    "hint:triggerRef": optionProps.itemRef,
-    "hint:visible": selectedIndex === optionProps.index,
-    "hint:placement": "right"
-  })));
-}
 var InputSearchWrapper = function InputSearchWrapper2() {
-  var _ref6 = arguments[0];
-  return /* @__PURE__ */ React.createElement(InputSearch, assignProps({}, _ref6));
+  var _ref5 = arguments[0];
+  return /* @__PURE__ */ React.createElement(InputSearch, assignProps({}, _ref5));
 };
 var Select = createComponent(RootSelect, {
   Trigger: [Trigger, {
@@ -395,15 +355,16 @@ var Select = createComponent(RootSelect, {
   }],
   Popper: Dropdown.Popper,
   List: DropdownMenu.List,
-  Menu,
+  Menu: DropdownMenu.Menu,
   Option: [Option, {
     Addon: DropdownMenu.Item.Addon,
     Content: DropdownMenu.Item.Content,
-    Text: OptionText,
     Hint: DropdownMenu.Item.Hint,
     Checkbox
   }],
   Group: Dropdown.Group,
+  OptionTitle: DropdownMenu.ItemTitle,
+  OptionHint: DropdownMenu.ItemHint,
   Divider,
   InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents],
   Input: [InputSearchWrapper, InputSearch._______childrenComponents]

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
 import ja from "./ja.json.mjs";
 import ko from "./ko.json.mjs";
 import nl from "./nl.json.mjs";
-import pl from "./pl.json.mjs";
 import pt from "./pt.json.mjs";
-import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
 var localizedMessages = {
   de,
   en,

package/lib/types/index.d.ts

@@ -1,21 +1,20 @@
-import type { BoxProps, Flex } from '@semcore/base-components';
-import type { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps, LinkTriggerProps } from '@semcore/base-trigger';
-import type { PropGetterFn, Intergalactic } from '@semcore/core';
-import type Divider from '@semcore/divider';
-import type Dropdown from '@semcore/dropdown';
-import type {
+import React from 'react';
+import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
+import DropdownMenu, {
   DropdownMenuContext,
   DropdownMenuItemProps,
   DropdownMenuProps,
   DropdownMenuHandlers,
   DropdownMenuTriggerProps,
 } from '@semcore/dropdown-menu';
-import type DropdownMenu from '@semcore/dropdown-menu';
-import type { InputValueProps } from '@semcore/input';
-import type Input from '@semcore/input';
-import type { Text } from '@semcore/typography';
-import type React from 'react';
+import Dropdown from '@semcore/dropdown';
+import { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';
+import Divider from '@semcore/divider';
+import Input, { InputValueProps } from '@semcore/input';
+import { BoxProps, Flex } from '@semcore/flex-box';
 
+/** @deprecated */
+export interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}
 export type SelectInputSearch = InputValueProps & {};
 
 export type OptionValue = string | number;
@@ -27,8 +26,10 @@ export type SelectOption = {
   label?: React.ReactNode;
 };
 
-export type SelectProps<T extends SelectValue = SelectValue> = Intergalactic.InternalTypings.EfficientOmit<DropdownMenuProps, 'size'> &
-  Intergalactic.InternalTypings.EfficientOmit<BaseTriggerProps, 'size'> & {
+/** @deprecated */
+export interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}
+export type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &
+  BaseTriggerProps & {
     /**
      * Options array
      */
@@ -66,21 +67,19 @@ export type SelectProps<T extends SelectValue = SelectValue> = Intergalactic.Int
      * If provided, adds a hidden <input /> tag with the given name for enhancing accessibility.
      */
     name?: string;
-    /** Specifies the locale for i18n support */
     locale?: string;
     /**
      * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.
      * @default true
      */
     scrollToSelected?: boolean;
-  } & ({
-    tag?: never;
-    /**
-     * Default type for size from BaseTriggerProps if there is no customization via `tag`.
-     */
-    size?: BaseTriggerProps['size'];
-  } | {});
+  };
 
+/** @deprecated */
+export interface ISelectOption extends SelectOption, UnknownProperties {}
+
+/** @deprecated */
+export interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}
 export type SelectOptionProps = DropdownMenuItemProps & {
   /**
    * Enables selected state
@@ -90,12 +89,14 @@ export type SelectOptionProps = DropdownMenuItemProps & {
   value: string | number;
 };
 
+/** @deprecated */
+export interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}
 export type SelectOptionCheckboxProps = BoxProps & {
   /** Checkbox theme */
   theme?: string;
   /** Visual indeterminate state */
   indeterminate?: boolean;
-  /** Controls the selected state */
+
   selected?: boolean;
 };
 
@@ -105,12 +106,16 @@ declare const InputSearch: Intergalactic.Component<'div', SelectInputSearch> & {
   Clear: typeof Input.Addon;
 };
 
+/** @deprecated */
+export interface ISelectContext extends SelectContext, UnknownProperties {}
 export type SelectContext = DropdownMenuContext & {
   getOptionProps: PropGetterFn;
   getOptionCheckboxProps: PropGetterFn;
   getDividerProps: PropGetterFn;
 };
 
+/** @deprecated */
+export interface ISelectHandlers extends SelectHandlers, UnknownProperties {}
 export type SelectHandlers = DropdownMenuHandlers & {
   value: (index: SelectValue) => void;
 };
@@ -126,14 +131,14 @@ type IntergalacticSelectComponent<PropsExtending = {}> = (<
     SelectContext,
     [handlers: SelectHandlers]
   > &
-  PropsExtending,
+    PropsExtending,
 ) => Intergalactic.InternalTypings.ComponentRenderingResults) &
-Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', SelectProps>;
+  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', SelectProps>;
 
 declare const Select: IntergalacticSelectComponent & {
   Trigger: Intergalactic.Component<
     typeof Dropdown.Trigger,
-    DropdownMenuTriggerProps & (ButtonTriggerProps | LinkTriggerProps),
+    DropdownMenuTriggerProps & ButtonTriggerProps,
     {},
     [handlers: SelectHandlers]
   > & {
@@ -153,9 +158,16 @@ declare const Select: IntergalacticSelectComponent & {
     Addon: typeof DropdownMenu.Item.Addon;
     Checkbox: Intergalactic.Component<'div', SelectOptionCheckboxProps>;
     Content: typeof Flex;
-    Text: typeof Text;
     Hint: typeof Flex;
   };
+  /**
+   * @deprecated Use Select.Group
+   */
+  OptionTitle: typeof DropdownMenu.ItemTitle;
+  /**
+   * @deprecated Use Select.Option.Hint or Select.Group with subTitle property
+   */
+  OptionHint: typeof DropdownMenu.ItemHint;
   Divider: typeof Divider;
   InputSearch: typeof InputSearch;
   Input: typeof InputSearch;
@@ -166,7 +178,7 @@ declare const wrapSelect: <PropsExtending extends {}>(
     props: Intergalactic.InternalTypings.UntypeRefAndTag<
       Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticSelectComponent>
     > &
-    PropsExtending,
+      PropsExtending,
   ) => React.ReactNode,
 ) => IntergalacticSelectComponent<PropsExtending>;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/select",
   "description": "Semrush Select Component",
-  "version": "4.53.0-prerelease.0",
+  "version": "4.53.0-prerelease.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -13,21 +13,21 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/base-trigger": "4.54.0-prerelease.0",
-    "@semcore/button": "5.44.0-prerelease.0",
-    "@semcore/checkbox": "7.45.0-prerelease.0",
-    "@semcore/divider": "4.41.0-prerelease.0",
-    "@semcore/dropdown-menu": "4.49.0-prerelease.0",
-    "@semcore/dropdown": "4.44.0-prerelease.0",
-    "@semcore/popper": "5.47.0-prerelease.0",
-    "@semcore/flex-box": "5.42.0-prerelease.0",
-    "@semcore/icon": "4.63.0-prerelease.0",
-    "@semcore/input": "4.43.0-prerelease.0",
-    "@semcore/utils": "4.49.0-prerelease.0",
+    "@semcore/base-trigger": "4.54.0-prerelease.1",
+    "@semcore/button": "5.44.0-prerelease.1",
+    "@semcore/checkbox": "7.45.0-prerelease.1",
+    "@semcore/divider": "4.41.0-prerelease.1",
+    "@semcore/dropdown-menu": "4.49.0-prerelease.1",
+    "@semcore/dropdown": "4.44.0-prerelease.1",
+    "@semcore/popper": "5.47.0-prerelease.1",
+    "@semcore/flex-box": "5.42.0-prerelease.1",
+    "@semcore/icon": "4.63.0-prerelease.1",
+    "@semcore/input": "4.43.0-prerelease.1",
+    "@semcore/utils": "4.49.0-prerelease.1",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.0",
+    "@semcore/core": "^2.40.0-prerelease.1",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },