@semcore/select 4.53.0-prerelease.4 → 4.53.0-prerelease.5

package/lib/esm/Select.mjs

@@ -4,48 +4,45 @@ 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _get from "@babel/runtime/helpers/esm/get";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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 { sstyled, lastInteraction, assignProps, createComponent } from "@semcore/core";
+import { hideScrollBarsFromScreenReadersContext, isInputTriggerTag, useBox } from "@semcore/base-components";
 import { ButtonTrigger } from "@semcore/base-trigger";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+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 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 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 InputSearch from "./InputSearch.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_1bjc2_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_1bjc2_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_1bjc2_gg_::before{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SOptionCheckbox_1bjc2_gg_::before{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SOptionCheckbox_1bjc2_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_1bjc2_gg_.__selected_1bjc2_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1bjc2_gg_._size_l_1bjc2_gg_{width:20px;height:20px}.___SOptionCheckbox_1bjc2_gg_._size_l_1bjc2_gg_.__selected_1bjc2_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1bjc2_gg_.__indeterminate_1bjc2_gg_:before,.___SOptionCheckbox_1bjc2_gg_.__selected_1bjc2_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_1bjc2_gg_.__theme_1bjc2_gg_:before{border-color:var(--theme_1bjc2)}.___SOptionCheckbox_1bjc2_gg_.__theme_1bjc2_gg_.__indeterminate_1bjc2_gg_:before,.___SOptionCheckbox_1bjc2_gg_.__theme_1bjc2_gg_.__selected_1bjc2_gg_:before{background-color:var(--theme_1bjc2);border-color:var(--theme_1bjc2)}.___SOptionCheckbox_1bjc2_gg_.__selected_1bjc2_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 80, 255, 0.077))}@supports (color:color(display-p3 0 0 0)){.___SOptionCheckbox_1bjc2_gg_.__selected_1bjc2_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 80, 255, 0.077))}@media (color-gamut:p3){.___SOptionCheckbox_1bjc2_gg_.__selected_1bjc2_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, color(display-p3 0.12403 0.30857 0.96259 / 0.077))}}}@media (hover:hover){.___SOptionCheckbox_1bjc2_gg_.__selected_1bjc2_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 77, 255, 0.191))}@supports (color:color(display-p3 0 0 0)){.___SOptionCheckbox_1bjc2_gg_.__selected_1bjc2_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 77, 255, 0.191))}@media (color-gamut:p3){.___SOptionCheckbox_1bjc2_gg_.__selected_1bjc2_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, color(display-p3 0.11821 0.29668 0.96194 / 0.191))}}}}.___SOptionCheckbox_1bjc2_gg_.__indeterminate_1bjc2_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_1bjc2_gg_.__indeterminate_1bjc2_gg_._size_l_1bjc2_gg_:after{width:12px;height:2px}.___SOptionCheckbox_1bjc2_gg_.__indeterminate_1bjc2_gg_._size_m_1bjc2_gg_:after{width:8px;height:2px}',
+    '.___SOptionCheckbox_1xp2o_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_1xp2o_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_1xp2o_gg_::before{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SOptionCheckbox_1xp2o_gg_::before{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SOptionCheckbox_1xp2o_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_1xp2o_gg_.__selected_1xp2o_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1xp2o_gg_._size_l_1xp2o_gg_{width:20px;height:20px}.___SOptionCheckbox_1xp2o_gg_._size_l_1xp2o_gg_.__selected_1xp2o_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1xp2o_gg_.__indeterminate_1xp2o_gg_:before,.___SOptionCheckbox_1xp2o_gg_.__selected_1xp2o_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_1xp2o_gg_.__theme_1xp2o_gg_:before{border-color:var(--theme_1xp2o)}.___SOptionCheckbox_1xp2o_gg_.__theme_1xp2o_gg_.__indeterminate_1xp2o_gg_:before,.___SOptionCheckbox_1xp2o_gg_.__theme_1xp2o_gg_.__selected_1xp2o_gg_:before{background-color:var(--theme_1xp2o);border-color:var(--theme_1xp2o)}.___SOptionCheckbox_1xp2o_gg_.__selected_1xp2o_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 80, 255, 0.077))}@supports (color:color(display-p3 0 0 0%)){.___SOptionCheckbox_1xp2o_gg_.__selected_1xp2o_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(0, 80, 255, 0.077))}@media (color-gamut:p3){.___SOptionCheckbox_1xp2o_gg_.__selected_1xp2o_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, color(display-p3 0.12402 0.30857 0.96259 / 0.077))}}}@media (hover:hover){.___SOptionCheckbox_1xp2o_gg_.__selected_1xp2o_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 77, 255, 0.191))}@supports (color:color(display-p3 0 0 0%)){.___SOptionCheckbox_1xp2o_gg_.__selected_1xp2o_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, rgba(0, 77, 255, 0.191))}@media (color-gamut:p3){.___SOptionCheckbox_1xp2o_gg_.__selected_1xp2o_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, color(display-p3 0.11821 0.29668 0.96194 / 0.191))}}}}.___SOptionCheckbox_1xp2o_gg_.__indeterminate_1xp2o_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_1xp2o_gg_.__indeterminate_1xp2o_gg_._size_l_1xp2o_gg_:after{width:12px;height:2px}.___SOptionCheckbox_1xp2o_gg_.__indeterminate_1xp2o_gg_._size_m_1xp2o_gg_:after{width:8px;height:2px}',
     /*__inner_css_end__*/
-    "1bjc2_gg_"
+    "1xp2o_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SOptionCheckbox": "___SOptionCheckbox_1bjc2_gg_",
-    "_selected": "__selected_1bjc2_gg_",
-    "_size_l": "_size_l_1bjc2_gg_",
-    "_indeterminate": "__indeterminate_1bjc2_gg_",
-    "_theme": "__theme_1bjc2_gg_",
-    "--theme": "--theme_1bjc2",
-    "_size_m": "_size_m_1bjc2_gg_"
+    "__SOptionCheckbox": "___SOptionCheckbox_1xp2o_gg_",
+    "_selected": "__selected_1xp2o_gg_",
+    "_size_l": "_size_l_1xp2o_gg_",
+    "_indeterminate": "__indeterminate_1xp2o_gg_",
+    "_theme": "__theme_1xp2o_gg_",
+    "--theme": "--theme_1xp2o",
+    "_size_m": "_size_m_1xp2o_gg_"
   })
 );
 function isSelectedOption(value, valueOption) {
@@ -57,18 +54,22 @@ function isEmptyValue(value) {
 function getEmptyValue(multiselect) {
   return multiselect ? [] : null;
 }
-var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
-  _inherits(RootSelect2, _AbstractDropdown);
-  var _super = _createSuper(RootSelect2);
+var ListBoxContextProvider = function ListBoxContextProvider2(_ref0) {
+  var children = _ref0.children;
+  return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
+    value: true
+  }, children);
+};
+var RootSelect = /* @__PURE__ */ (function(_AbstractDropdown) {
   function RootSelect2() {
     var _this;
     _classCallCheck(this, RootSelect2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "role", "listbox");
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerOptionClick", function(optionValue, index) {
+    _this = _callSuper(this, RootSelect2, [].concat(args));
+    _defineProperty(_this, "role", "listbox");
+    _defineProperty(_this, "bindHandlerOptionClick", function(optionValue, index) {
       return function(e) {
         var newValue = optionValue;
         var _this$asProps = _this.asProps, value = _this$asProps.value, multiselect = _this$asProps.multiselect;
@@ -81,6 +82,7 @@ var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
             newValue = value.concat(optionValue);
           }
         }
+        _this.handlers.highlightedIndex(index);
         _this.handlers.value(newValue, e);
         if (!multiselect) {
           _this.handlers.visible(false);
@@ -88,7 +90,7 @@ var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
         }
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "handlerClear", function(e) {
+    _defineProperty(_this, "handlerClear", function(e) {
       var value = _this.asProps.value;
       var emptyValue = getEmptyValue(Array.isArray(value));
       _this.handlers.value(emptyValue, e);
@@ -96,10 +98,11 @@ var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
     });
     return _this;
   }
-  _createClass(RootSelect2, [{
+  _inherits(RootSelect2, _AbstractDropdown);
+  return _createClass(RootSelect2, [{
     key: "itemRef",
     value: function itemRef(props, index, node) {
-      _get(_getPrototypeOf(RootSelect2.prototype), "itemRef", this).call(this, props, index, node);
+      _superPropGet(RootSelect2, "itemRef", this, 3)([props, index, node]);
       var highlightedIndex = this.asProps.highlightedIndex;
       var isHighlighted = index === highlightedIndex;
       if (isHighlighted) {
@@ -110,11 +113,11 @@ var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       var _this2 = this;
-      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "uncontrolledProps", this).call(this)), {}, {
+      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "uncontrolledProps", this, 3)([])), {}, {
         visible: [null, function(visible) {
           if (visible === true) {
-            var hasInputSearch = isAdvanceMode(_this2.asProps.Children, [Select.InputSearch.displayName], true);
-            var defaultIndex = hasInputSearch ? null : _this2.props.defaultHighlightedIndex;
+            var hasInputSearch = isAdvanceMode(_this2.asProps.Children, [Select.InputSearch.displayName, InputSearch.displayName], true);
+            var defaultIndex = hasInputSearch || lastInteraction.isMouse() ? null : _this2.props.defaultHighlightedIndex;
             _this2.handlers.highlightedIndex(defaultIndex);
             setTimeout(function() {
               var _this2$menuRef$curren, _this2$menuRef$curren2;
@@ -142,31 +145,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({}, _get(_getPrototypeOf(RootSelect2.prototype), "getTriggerProps", this).call(this)), {}, {
-        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
+      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getTriggerProps", this, 3)([])), {}, {
+        "onKeyDown": callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
         "aria-controls": visible ? ariaControls : void 0,
         "aria-haspopup": isMenu ? "listbox" : "dialog",
         "aria-disabled": disabled ? "true" : "false",
         "aria-activedescendant": visible && highlightedIndex !== null && this.itemRefs[highlightedIndex] ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : void 0,
-        empty: isEmptyValue(value),
+        "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);
@@ -178,14 +181,14 @@ var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
     key: "getListProps",
     value: function getListProps() {
       var multiselect = this.asProps.multiselect;
-      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getListProps", this).call(this)), {}, {
+      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getListProps", this, 3)([])), {}, {
         "aria-multiselectable": multiselect ? "true" : void 0
       });
     }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
-      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getPopperProps", this).call(this)), {}, {
+      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getPopperProps", this, 3)([])), {}, {
         onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
       });
     }
@@ -193,17 +196,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, 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 _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)), {}, {
+      return _objectSpread(_objectSpread({}, _superPropGet(RootSelect2, "getItemProps", this, 3)([props, index])), {}, {
         highlighted,
         selected,
         "aria-selected": selected ? "true" : "false",
         "aria-disabled": props.disabled ? "true" : "false",
-        role: "option",
-        onClick: this.bindHandlerOptionClick(props.value, index),
-        ref: function ref(node) {
+        "role": "option",
+        "onClick": this.bindHandlerOptionClick(props.value, index),
+        "ref": function ref(node) {
           return _this4.itemRef(props, index, node);
         },
         size
@@ -222,7 +225,7 @@ var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
     key: "getDividerProps",
     value: function getDividerProps() {
       return {
-        my: 1,
+        "my": 1,
         "aria-disabled": "true"
       };
     }
@@ -250,9 +253,7 @@ 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;
-      _this$asProps5.value;
-      var 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, _value = _this$asProps5.value, uid = _this$asProps5.uid, forcedAdvancedMode = _this$asProps5.forcedAdvancedMode, other = _objectWithoutProperties(_this$asProps5, _excluded);
       var advancedMode = forcedAdvancedMode || findComponent(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
       logger.warn(options && advancedMode, "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'", other["data-ui-name"] || Select.displayName);
       this.itemProps = [];
@@ -268,18 +269,16 @@ var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
       return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Children, null));
     }
   }]);
-  return RootSelect2;
-}(AbstractDropdown);
+})(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 hasInputSearch = props.children && isAdvanceMode(props.children, [Select.InputSearch.displayName, 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,
@@ -292,33 +291,56 @@ _defineProperty(RootSelect, "defaultProps", function(props) {
     timeout: (_props$timeout = props.timeout) !== null && _props$timeout !== void 0 ? _props$timeout : 0
   };
 });
-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;
+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;
   var hasInputTrigger = isInputTriggerTag(Tag);
   var SSelectTrigger = Dropdown.Trigger;
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSelectTrigger, _ref6.cn("SSelectTrigger", _objectSpread({}, assignProps({
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectTrigger, _ref7.cn("SSelectTrigger", _objectSpread({}, assignProps({
     "tag": Tag,
     "placeholder": getI18nText("selectPlaceholder"),
     "role": "combobox",
     "aria-autocomplete": hasInputTrigger && "list" || void 0
-  }, _ref3))), addonTextChildren(Children, Tag.Text || ButtonTrigger.Text, Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /* @__PURE__ */ React.createElement("input", _ref6.cn("input", {
+  }, _ref3))), addonTextChildren(Children, Tag.Text || Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /* @__PURE__ */ React.createElement("input", _ref7.cn("input", {
     "type": "hidden",
     "defaultValue": value,
     "name": name,
     "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 _ref4 = arguments[0], _ref7;
+  var _ref5 = arguments[0], _ref8;
   var SSelectOption = Dropdown.Item;
-  var styles = props.styles, Children = props.Children;
+  var styles = props.styles, Children = props.Children, highlighted = props.highlighted;
+  var itemRef = React.useRef(null);
   var hasCheckbox = isAdvanceMode(Children, [Select.Option.Checkbox.displayName]);
   var hasContent = isAdvanceMode(Children, [Select.Option.Content.displayName]);
-  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", {}))));
+  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", {}))));
 }
 function Checkbox(providedProps) {
   var optionProps = React.useContext(optionPropsContext);
@@ -331,7 +353,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$1(props.styles);
+  var styles = sstyled(props.styles);
   var _styles$cn = styles.cn("SOptionCheckbox", {
     size,
     "use:theme": resolveColor(theme),
@@ -344,9 +366,27 @@ 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 _ref5 = arguments[0];
-  return /* @__PURE__ */ React.createElement(InputSearch, assignProps({}, _ref5));
+  var _ref6 = arguments[0];
+  return /* @__PURE__ */ React.createElement(InputSearch, assignProps({}, _ref6));
 };
 var Select = createComponent(RootSelect, {
   Trigger: [Trigger, {
@@ -355,16 +395,15 @@ var Select = createComponent(RootSelect, {
   }],
   Popper: Dropdown.Popper,
   List: DropdownMenu.List,
-  Menu: DropdownMenu.Menu,
+  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,20 +1,21 @@
-import React from 'react';
-import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import DropdownMenu, {
+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 {
   DropdownMenuContext,
   DropdownMenuItemProps,
   DropdownMenuProps,
   DropdownMenuHandlers,
   DropdownMenuTriggerProps,
 } from '@semcore/dropdown-menu';
-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';
+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';
 
-/** @deprecated */
-export interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}
 export type SelectInputSearch = InputValueProps & {};
 
 export type OptionValue = string | number;
@@ -26,10 +27,8 @@ export type SelectOption = {
   label?: React.ReactNode;
 };
 
-/** @deprecated */
-export interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}
-export type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &
-  BaseTriggerProps & {
+export type SelectProps<T extends SelectValue = SelectValue> = Intergalactic.InternalTypings.EfficientOmit<DropdownMenuProps, 'size'> &
+  Intergalactic.InternalTypings.EfficientOmit<BaseTriggerProps, 'size'> & {
     /**
      * Options array
      */
@@ -67,19 +66,21 @@ export type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps
      * 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;
-  };
-
-/** @deprecated */
-export interface ISelectOption extends SelectOption, UnknownProperties {}
+  } & ({
+    tag?: never;
+    /**
+     * Default type for size from BaseTriggerProps if there is no customization via `tag`.
+     */
+    size?: BaseTriggerProps['size'];
+  } | {});
 
-/** @deprecated */
-export interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}
 export type SelectOptionProps = DropdownMenuItemProps & {
   /**
    * Enables selected state
@@ -89,14 +90,12 @@ 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;
 };
 
@@ -106,16 +105,12 @@ 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;
 };
@@ -131,14 +126,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,
+    DropdownMenuTriggerProps & (ButtonTriggerProps | LinkTriggerProps),
     {},
     [handlers: SelectHandlers]
   > & {
@@ -158,16 +153,9 @@ 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;
@@ -178,7 +166,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.4",
+  "version": "4.53.0-prerelease.5",
   "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.4",
-    "@semcore/button": "5.44.0-prerelease.4",
-    "@semcore/checkbox": "7.45.0-prerelease.4",
-    "@semcore/divider": "4.41.0-prerelease.4",
-    "@semcore/dropdown-menu": "4.49.0-prerelease.4",
-    "@semcore/dropdown": "4.44.0-prerelease.4",
-    "@semcore/popper": "5.47.0-prerelease.4",
-    "@semcore/flex-box": "5.42.0-prerelease.4",
-    "@semcore/icon": "4.63.0-prerelease.4",
-    "@semcore/input": "4.43.0-prerelease.4",
-    "@semcore/utils": "4.49.0-prerelease.4",
+    "@semcore/base-trigger": "4.54.0-prerelease.5",
+    "@semcore/button": "5.44.0-prerelease.5",
+    "@semcore/checkbox": "7.45.0-prerelease.5",
+    "@semcore/divider": "4.41.0-prerelease.5",
+    "@semcore/dropdown-menu": "4.49.0-prerelease.5",
+    "@semcore/dropdown": "4.44.0-prerelease.5",
+    "@semcore/popper": "5.47.0-prerelease.5",
+    "@semcore/flex-box": "5.42.0-prerelease.5",
+    "@semcore/icon": "4.63.0-prerelease.5",
+    "@semcore/input": "4.43.0-prerelease.5",
+    "@semcore/utils": "4.49.0-prerelease.5",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.4",
+    "@semcore/core": "^2.40.0-prerelease.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },