@semcore/select 4.52.2 → 4.53.0-prerelease.0

package/lib/cjs/Select.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,42 +12,39 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
+var _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _index = require("@semcore/utils/lib/core/index");
-var _core = _interopRequireWildcard(require("@semcore/core"));
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _dropdownMenu = _interopRequireDefault(require("@semcore/dropdown-menu"));
-var _dropdown = _interopRequireWildcard(require("@semcore/dropdown"));
+var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _baseTrigger = require("@semcore/base-trigger");
+var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
+var _assignProps7 = require("@semcore/core/lib/utils/assignProps");
+var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
+var _findComponent = _interopRequireWildcard(require("@semcore/core/lib/utils/findComponent"));
+var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
 var _divider = _interopRequireDefault(require("@semcore/divider"));
-var _findComponent = _interopRequireWildcard(require("@semcore/utils/lib/findComponent"));
-var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
-var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
-var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
-var _InputSearch = _interopRequireDefault(require("./InputSearch"));
-var _flexBox = require("@semcore/flex-box");
+var _dropdown = _interopRequireWildcard(require("@semcore/dropdown"));
+var _dropdownMenu = _interopRequireDefault(require("@semcore/dropdown-menu"));
+var _typography = require("@semcore/typography");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
 var _context = require("./context");
+var _InputSearch = _interopRequireDefault(require("./InputSearch"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
-var _popper = require("@semcore/popper");
-var _assignProps6 = require("@semcore/utils/lib/assignProps");
 var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
 /*!__reshadow-styles__:"./style/select.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_17zdz_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_17zdz_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_17zdz_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_17zdz_gg_.__selected_17zdz_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_17zdz_gg_._size_l_17zdz_gg_{width:20px;height:20px}.___SOptionCheckbox_17zdz_gg_._size_l_17zdz_gg_.__selected_17zdz_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_17zdz_gg_.__indeterminate_17zdz_gg_:before,.___SOptionCheckbox_17zdz_gg_.__selected_17zdz_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_17zdz_gg_.__theme_17zdz_gg_:before{border-color:var(--theme_17zdz)}.___SOptionCheckbox_17zdz_gg_.__theme_17zdz_gg_.__indeterminate_17zdz_gg_:before,.___SOptionCheckbox_17zdz_gg_.__theme_17zdz_gg_.__selected_17zdz_gg_:before{background-color:var(--theme_17zdz);border-color:var(--theme_17zdz)}.___SOptionCheckbox_17zdz_gg_.__selected_17zdz_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_17zdz_gg_.__selected_17zdz_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_17zdz_gg_.__indeterminate_17zdz_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_17zdz_gg_.__indeterminate_17zdz_gg_._size_l_17zdz_gg_:after{width:12px;height:2px}.___SOptionCheckbox_17zdz_gg_.__indeterminate_17zdz_gg_._size_m_17zdz_gg_:after{width:8px;height:2px}", /*__inner_css_end__*/"17zdz_gg_"),
+var style = (/*__reshadow_css_start__*/_core.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}", /*__inner_css_end__*/"19tod_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SOptionCheckbox": "___SOptionCheckbox_17zdz_gg_",
-  "_selected": "__selected_17zdz_gg_",
-  "_size_l": "_size_l_17zdz_gg_",
-  "_indeterminate": "__indeterminate_17zdz_gg_",
-  "_theme": "__theme_17zdz_gg_",
-  "--theme": "--theme_17zdz",
-  "_size_m": "_size_m_17zdz_gg_"
+  "__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_"
 });
 function isSelectedOption(value, valueOption) {
   return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
@@ -58,18 +55,22 @@ function isEmptyValue(value) {
 function getEmptyValue(multiselect) {
   return multiselect ? [] : null;
 }
+var ListBoxContextProvider = function ListBoxContextProvider(_ref0) {
+  var children = _ref0.children;
+  return /*#__PURE__*/_react["default"].createElement(_baseComponents.hideScrollBarsFromScreenReadersContext.Provider, {
+    value: true
+  }, children);
+};
 var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
-  (0, _inherits2["default"])(RootSelect, _AbstractDropdown);
-  var _super = (0, _createSuper2["default"])(RootSelect);
   function RootSelect() {
     var _this;
     (0, _classCallCheck2["default"])(this, RootSelect);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "role", 'listbox');
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerOptionClick", function (optionValue, index) {
+    _this = (0, _callSuper2["default"])(this, RootSelect, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "role", 'listbox');
+    (0, _defineProperty2["default"])(_this, "bindHandlerOptionClick", function (optionValue, index) {
       return function (e) {
         var newValue = optionValue;
         var _this$asProps = _this.asProps,
@@ -84,6 +85,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);
@@ -91,7 +93,7 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
         }
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerClear", function (e) {
+    (0, _defineProperty2["default"])(_this, "handlerClear", function (e) {
       var value = _this.asProps.value;
       var emptyValue = getEmptyValue(Array.isArray(value));
       _this.handlers.value(emptyValue, e);
@@ -99,10 +101,11 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
     });
     return _this;
   }
-  (0, _createClass2["default"])(RootSelect, [{
+  (0, _inherits2["default"])(RootSelect, _AbstractDropdown);
+  return (0, _createClass2["default"])(RootSelect, [{
     key: "itemRef",
     value: function itemRef(props, index, node) {
-      (0, _get2["default"])((0, _getPrototypeOf2["default"])(RootSelect.prototype), "itemRef", this).call(this, props, index, node);
+      (0, _superPropGet2["default"])(RootSelect, "itemRef", this, 3)([props, index, node]);
       var highlightedIndex = this.asProps.highlightedIndex;
       var isHighlighted = index === highlightedIndex;
       if (isHighlighted) {
@@ -113,11 +116,11 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       var _this2 = this;
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(RootSelect.prototype), "uncontrolledProps", this).call(this)), {}, {
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "uncontrolledProps", this, 3)([])), {}, {
         visible: [null, function (visible) {
           if (visible === true) {
-            var hasInputSearch = (0, _findComponent.isAdvanceMode)(_this2.asProps.Children, [Select.InputSearch.displayName], true);
-            var defaultIndex = hasInputSearch ? null : _this2.props.defaultHighlightedIndex;
+            var hasInputSearch = (0, _findComponent.isAdvanceMode)(_this2.asProps.Children, [Select.InputSearch.displayName, _InputSearch["default"].displayName], true);
+            var defaultIndex = hasInputSearch || _core.lastInteraction.isMouse() ? null : _this2.props.defaultHighlightedIndex;
             _this2.handlers.highlightedIndex(defaultIndex);
             setTimeout(function () {
               var _this2$menuRef$curren, _this2$menuRef$curren2;
@@ -161,32 +164,32 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
         hasChildren = _this$asProps2.children;
       var isMenu = (0, _findComponent.isAdvanceMode)(Children, [Select.Menu.displayName], true) || !hasChildren;
       var ariaControls = isMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(RootSelect.prototype), "getTriggerProps", this).call(this)), {}, {
-        onKeyDown: (0, _assignProps6.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "getTriggerProps", this, 3)([])), {}, {
+        'onKeyDown': (0, _assignProps7.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
         'aria-controls': visible ? ariaControls : undefined,
         'aria-haspopup': isMenu ? 'listbox' : 'dialog',
         'aria-disabled': disabled ? 'true' : 'false',
         'aria-activedescendant': visible && highlightedIndex !== null && this.itemRefs[highlightedIndex] ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : undefined,
-        empty: isEmptyValue(value),
+        'empty': isEmptyValue(value),
         value: value,
         name: name,
-        $hiddenRef: forwardRef,
+        '$hiddenRef': forwardRef,
         multiselect: multiselect,
         state: state,
         placeholder: placeholder,
         disabled: disabled,
-        active: visible,
-        onClear: this.handlerClear,
-        children: this.renderChildrenTrigger(value, options),
+        'active': visible,
+        'onClear': this.handlerClear,
+        'children': this.renderChildrenTrigger(value, options),
         getI18nText: getI18nText,
-        onBlur: function onBlur() {
+        'onBlur': function onBlur() {
           // if popper is opened and we moved from the trigger in select - it means we moved on some controls in popper and should hide highlighted for the option
           if (_this3.asProps.visible) {
             _this3.prevHighlightedIndex = _this3.asProps.highlightedIndex;
             _this3.handlers.highlightedIndex(null);
           }
         },
-        onFocus: function onFocus() {
+        'onFocus': function onFocus() {
           // if popper is opened and we moved to the trigger in select - it means we moved from some controls in popper and should highlight the last highlighted option
           if (_this3.asProps.visible) {
             var index = _this3.prevHighlightedIndex;
@@ -199,15 +202,15 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
     key: "getListProps",
     value: function getListProps() {
       var multiselect = this.asProps.multiselect;
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(RootSelect.prototype), "getListProps", this).call(this)), {}, {
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "getListProps", this, 3)([])), {}, {
         'aria-multiselectable': multiselect ? 'true' : undefined
       });
     }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(RootSelect.prototype), "getPopperProps", this).call(this)), {}, {
-        onKeyDown: (0, _assignProps6.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "getPopperProps", this, 3)([])), {}, {
+        onKeyDown: (0, _assignProps7.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
       });
     }
   }, {
@@ -218,19 +221,18 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
       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 highlighted = index === highlightedIndex && _core.lastInteraction.isKeyboard() && !props.disabled;
       var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : isSelectedOption(value, props.value);
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(RootSelect.prototype), "getItemProps", this).call(this, props, index)), {}, {
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(RootSelect, "getItemProps", this, 3)([props, index])), {}, {
         highlighted: highlighted,
         selected: selected,
         'aria-selected': selected ? 'true' : 'false',
         'aria-disabled': props.disabled ? 'true' : 'false',
-        role: 'option',
-        onClick: this.bindHandlerOptionClick(props.value, index),
-        ref: function ref(node) {
+        'role': 'option',
+        'onClick': this.bindHandlerOptionClick(props.value, index),
+        'ref': function ref(node) {
           return _this4.itemRef(props, index, node);
         },
         size: size
@@ -251,7 +253,7 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
     key: "getDividerProps",
     value: function getDividerProps() {
       return {
-        my: 1,
+        'my': 1,
         'aria-disabled': 'true'
       };
     }
@@ -283,12 +285,12 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
         Children = _this$asProps5.Children,
         options = _this$asProps5.options,
         multiselect = _this$asProps5.multiselect,
-        value = _this$asProps5.value,
+        _value = _this$asProps5.value,
         uid = _this$asProps5.uid,
         forcedAdvancedMode = _this$asProps5.forcedAdvancedMode,
         other = (0, _objectWithoutProperties2["default"])(_this$asProps5, _excluded);
       var advancedMode = forcedAdvancedMode || (0, _findComponent["default"])(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
-      _logger["default"].warn(options && advancedMode, "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'", other['data-ui-name'] || Select.displayName);
+      _logger["default"].warn(options && advancedMode, 'Don\'t use at the same time \'options\' property and \'<Select.Trigger/>/<Select.Popper/>\'', other['data-ui-name'] || Select.displayName);
       this.itemProps = [];
       if (options) {
         var _ref = this.asProps;
@@ -302,18 +304,16 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
       return /*#__PURE__*/_react["default"].createElement(_dropdownMenu["default"], (0, _core.assignProps)({}, _ref2), /*#__PURE__*/_react["default"].createElement(Children, null));
     }
   }]);
-  return RootSelect;
 }(_dropdown.AbstractDropdown);
 (0, _defineProperty2["default"])(RootSelect, "displayName", 'Select');
 (0, _defineProperty2["default"])(RootSelect, "style", style);
 (0, _defineProperty2["default"])(RootSelect, "enhance", Object.values(_dropdown.enhance).concat([(0, _resolveColorEnhance["default"])()]));
 (0, _defineProperty2["default"])(RootSelect, "defaultProps", function (props) {
   var _props$highlightedInd, _props$selectedIndex, _props$interaction, _props$timeout;
-  var hasInputSearch = props.children && (0, _findComponent.isAdvanceMode)(props.children, [Select.InputSearch.displayName], true);
+  var hasInputSearch = props.children && (0, _findComponent.isAdvanceMode)(props.children, [Select.InputSearch.displayName, _InputSearch["default"].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,
@@ -326,43 +326,73 @@ var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
     timeout: (_props$timeout = props.timeout) !== null && _props$timeout !== void 0 ? _props$timeout : 0
   };
 });
-function Trigger(_ref8) {
+function Trigger(_ref1) {
   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 ? _baseTrigger.ButtonTrigger : _ref8$tag,
-    getI18nText = _ref8.getI18nText;
-  var hasInputTrigger = (0, _popper.isInputTriggerTag)(Tag);
+    _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 ? _baseTrigger.ButtonTrigger : _ref1$tag,
+    getI18nText = _ref1.getI18nText;
+  var hasInputTrigger = (0, _baseComponents.isInputTriggerTag)(Tag);
   var SSelectTrigger = _dropdown["default"].Trigger;
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSelectTrigger, _ref6.cn("SSelectTrigger", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSelectTrigger, _ref7.cn("SSelectTrigger", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": Tag,
     "placeholder": getI18nText('selectPlaceholder'),
     "role": 'combobox',
     "aria-autocomplete": hasInputTrigger && 'list' || undefined
-  }, _ref3))), (0, _addonTextChildren["default"])(Children, Tag.Text || _baseTrigger.ButtonTrigger.Text, Tag.Value || _baseTrigger.ButtonTrigger.Text, Tag.Addon || _baseTrigger.ButtonTrigger.Addon, true), name && /*#__PURE__*/_react["default"].createElement("input", _ref6.cn("input", {
+  }, _ref3))), (0, _addonTextChildren["default"])(Children, Tag.Text || Tag.Value || _baseTrigger.ButtonTrigger.Text, Tag.Addon || _baseTrigger.ButtonTrigger.Addon, true), name && /*#__PURE__*/_react["default"].createElement("input", _ref7.cn("input", {
     "type": 'hidden',
     "defaultValue": value,
     "name": name,
     "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: visible,
+    disablePortal: disablePortal,
+    ignorePortalsStacking: ignorePortalsStacking,
+    disableEnforceFocus: disableEnforceFocus,
+    interaction: interaction,
+    autoFocus: autoFocus,
+    animationsDisabled: animationsDisabled
+  };
+  return /*#__PURE__*/_react["default"].createElement(ListBoxContextProvider, null, /*#__PURE__*/_react["default"].createElement(Select.Popper, (0, _extends2["default"])({}, popperProps, {
+    role: null
+  }), /*#__PURE__*/_react["default"].createElement(Select.List, (0, _core.assignProps)({}, _ref4))));
+}
 var optionPropsContext = /*#__PURE__*/_react["default"].createContext({});
 function Option(props) {
-  var _ref4 = arguments[0],
-    _ref7;
+  var _ref5 = arguments[0],
+    _ref8;
   var SSelectOption = _dropdown["default"].Item;
   var styles = props.styles,
-    Children = props.Children;
+    Children = props.Children,
+    highlighted = props.highlighted;
+  var itemRef = _react["default"].useRef(null);
   var hasCheckbox = (0, _findComponent.isAdvanceMode)(Children, [Select.Option.Checkbox.displayName]);
   var hasContent = (0, _findComponent.isAdvanceMode)(Children, [Select.Option.Content.displayName]);
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSelectOption, _ref7.cn("SSelectOption", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref4))), /*#__PURE__*/_react["default"].createElement(optionPropsContext.Provider, {
-    value: props
-  }, hasCheckbox && !hasContent ? /*#__PURE__*/_react["default"].createElement(Select.Option.Content, null, /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {}))) : /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {}))));
+  var optionPropsContextValue = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    itemRef: itemRef,
+    highlighted: highlighted
+  });
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSelectOption, _ref8.cn("SSelectOption", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "ref": itemRef
+  }, _ref5))), /*#__PURE__*/_react["default"].createElement(optionPropsContext.Provider, {
+    value: optionPropsContextValue
+  }, hasCheckbox && !hasContent ? /*#__PURE__*/_react["default"].createElement(Select.Option.Content, null, /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {}))) : /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {}))));
 }
 function Checkbox(providedProps) {
   var optionProps = _react["default"].useContext(optionPropsContext);
@@ -373,7 +403,7 @@ function Checkbox(providedProps) {
       size: optionProps === null || optionProps === void 0 ? void 0 : optionProps.size
     }, providedProps || {});
   }, [providedProps, optionProps]);
-  var _useBox = (0, _flexBox.useBox)(props, props.forwardRef),
+  var _useBox = (0, _baseComponents.useBox)(props, props.forwardRef),
     _useBox2 = (0, _slicedToArray2["default"])(_useBox, 2),
     SOptionCheckbox = _useBox2[0],
     componentProps = _useBox2[1];
@@ -397,27 +427,44 @@ function Checkbox(providedProps) {
     tabIndex: -1
   }));
 }
+function OptionText(providedProps) {
+  var _ref9;
+  var optionProps = _react["default"].useContext(optionPropsContext);
+  var selectedIndex = _react["default"].useContext(_dropdown.selectedIndexContext);
+  var props = _react["default"].useMemo(function () {
+    return (0, _objectSpread2["default"])({
+      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 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(_typography.Text, _ref9.cn("Text", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    "hint:triggerRef": optionProps.itemRef,
+    "hint:visible": selectedIndex === optionProps.index,
+    "hint:placement": 'right'
+  })));
+}
 var InputSearchWrapper = function InputSearchWrapper() {
-  var _ref5 = arguments[0];
-  return /*#__PURE__*/_react["default"].createElement(_InputSearch["default"], (0, _core.assignProps)({}, _ref5));
+  var _ref6 = arguments[0];
+  return /*#__PURE__*/_react["default"].createElement(_InputSearch["default"], (0, _core.assignProps)({}, _ref6));
 };
-var Select = (0, _core["default"])(RootSelect, {
+var Select = (0, _core.createComponent)(RootSelect, {
   Trigger: [Trigger, {
     Addon: _baseTrigger.ButtonTrigger.Addon,
     Text: _baseTrigger.ButtonTrigger.Text
   }],
   Popper: _dropdown["default"].Popper,
   List: _dropdownMenu["default"].List,
-  Menu: _dropdownMenu["default"].Menu,
+  Menu: Menu,
   Option: [Option, {
     Addon: _dropdownMenu["default"].Item.Addon,
     Content: _dropdownMenu["default"].Item.Content,
+    Text: OptionText,
     Hint: _dropdownMenu["default"].Item.Hint,
     Checkbox: Checkbox
   }],
   Group: _dropdown["default"].Group,
-  OptionTitle: _dropdownMenu["default"].ItemTitle,
-  OptionHint: _dropdownMenu["default"].ItemHint,
   Divider: _divider["default"],
   InputSearch: [InputSearchWrapper, _InputSearch["default"]._______childrenComponents],
   Input: [InputSearchWrapper, _InputSearch["default"]._______childrenComponents]
@@ -425,11 +472,9 @@ var Select = (0, _core["default"])(RootSelect, {
   parent: _dropdownMenu["default"],
   context: _context.selectContext
 });
-var wrapSelect = function wrapSelect(wrapper) {
+var wrapSelect = exports.wrapSelect = function wrapSelect(wrapper) {
   return wrapper;
 };
-exports.wrapSelect = wrapSelect;
 Select.selectedIndexContext = _dropdown.selectedIndexContext;
-var _default = Select;
-exports["default"] = _default;
+var _default = exports["default"] = Select;
 //# sourceMappingURL=Select.js.map