@semcore/dropdown-menu 16.2.2-prerelease.4 → 17.0.0-prerelease.17

package/lib/cjs/DropdownMenu.js

@@ -1,68 +1,54 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _button = _interopRequireDefault(require("@semcore/button"));
-var _assignProps13 = require("@semcore/core/lib/utils/assignProps");
+var _assignProps1 = require("@semcore/core/lib/utils/assignProps");
 var _findComponent = require("@semcore/core/lib/utils/findComponent");
 var _isFocusInside = require("@semcore/core/lib/utils/focus-lock/isFocusInside");
 var _setFocus = require("@semcore/core/lib/utils/focus-lock/setFocus");
-var _ref30 = require("@semcore/core/lib/utils/ref");
+var _ref16 = require("@semcore/core/lib/utils/ref");
 var _uniqueID = require("@semcore/core/lib/utils/uniqueID");
 var _dropdown = _interopRequireWildcard(require("@semcore/dropdown"));
-var _flexBox = require("@semcore/flex-box");
-var _scrollArea = _interopRequireDefault(require("@semcore/scroll-area"));
 var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 var _Context = require("./components/Context");
 var _VirtualList = require("./components/VirtualList");
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 /*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_1ulzv_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1ulzv_gg_ .___SBar_1ulzv_gg_{z-index:3}.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:before,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1ulzv_gg_ .___SItemContent_1ulzv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1ulzv_gg_.__nesting-trigger_1ulzv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1ulzv_gg_,.___SItemContentText_1ulzv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1ulzv_gg_:first-child,.___SItemContentText_1ulzv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1ulzv_gg_:last-child,.___SItemContentText_1ulzv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_m_1ulzv_gg_{padding:0}.___SDropdownMenuNesting_1ulzv_gg_.__highlighted_1ulzv_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownNestingItem_1ulzv_gg_._size_m_1ulzv_gg_{padding-right:0}.___SDropdownNestingItem_1ulzv_gg_ .___SDropdownMenuItemContainer_1ulzv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1ulzv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"1ulzv_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_1r615_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1r615_gg_ .___SBar_1r615_gg_{z-index:3}.___SDropdownMenuList_1r615_gg_ .___SShadowHorizontal_1r615_gg_:after,.___SDropdownMenuList_1r615_gg_ .___SShadowHorizontal_1r615_gg_:before,.___SDropdownMenuList_1r615_gg_ .___SShadowVertical_1r615_gg_:after,.___SDropdownMenuList_1r615_gg_ .___SShadowVertical_1r615_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1r615_gg_ .___SItemContent_1r615_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1r615_gg_.__nesting-trigger_1r615_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1r615_gg_,.___SItemContentText_1r615_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1r615_gg_:first-child,.___SItemContentText_1r615_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1r615_gg_:last-child,.___SItemContentText_1r615_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1r615_gg_,.___SDropdownMenuNesting_1r615_gg_._size_l_1r615_gg_,.___SDropdownMenuNesting_1r615_gg_._size_m_1r615_gg_{padding:0}.___SDropdownMenuNesting_1r615_gg_.__highlighted_1r615_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_1r615_gg_._size_l_1r615_gg_,.___SDropdownNestingItem_1r615_gg_._size_m_1r615_gg_{padding-right:0}.___SDropdownNestingItem_1r615_gg_ .___SDropdownMenuItemContainer_1r615_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1r615_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"1r615_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1ulzv_gg_",
-  "_nesting-trigger": "__nesting-trigger_1ulzv_gg_",
-  "__SDropdownMenuNesting": "___SDropdownMenuNesting_1ulzv_gg_",
-  "_size_l": "_size_l_1ulzv_gg_",
-  "_size_m": "_size_m_1ulzv_gg_",
-  "_highlighted": "__highlighted_1ulzv_gg_",
-  "__SDropdownNestingItem": "___SDropdownNestingItem_1ulzv_gg_",
-  "__SItemHint": "___SItemHint_1ulzv_gg_",
-  "__SDropdownMenuList": "___SDropdownMenuList_1ulzv_gg_",
-  "__SBar": "___SBar_1ulzv_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_1ulzv_gg_",
-  "__SShadowVertical": "___SShadowVertical_1ulzv_gg_",
-  "__SItemContent": "___SItemContent_1ulzv_gg_",
-  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1ulzv_gg_",
-  "__SItemContentText": "___SItemContentText_1ulzv_gg_"
+  "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1r615_gg_",
+  "_nesting-trigger": "__nesting-trigger_1r615_gg_",
+  "__SDropdownMenuNesting": "___SDropdownMenuNesting_1r615_gg_",
+  "_size_l": "_size_l_1r615_gg_",
+  "_size_m": "_size_m_1r615_gg_",
+  "_highlighted": "__highlighted_1r615_gg_",
+  "__SDropdownNestingItem": "___SDropdownNestingItem_1r615_gg_",
+  "__SItemHint": "___SItemHint_1r615_gg_",
+  "__SDropdownMenuList": "___SDropdownMenuList_1r615_gg_",
+  "__SBar": "___SBar_1r615_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_1r615_gg_",
+  "__SShadowVertical": "___SShadowVertical_1r615_gg_",
+  "__SItemContent": "___SItemContent_1r615_gg_",
+  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1r615_gg_",
+  "__SItemContentText": "___SItemContentText_1r615_gg_"
 });
-var menuItemContext = /*#__PURE__*/_react["default"].createContext({});
-var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
-  function DropdownMenuRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, DropdownMenuRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, DropdownMenuRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "actionsRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "role", 'menu');
+const menuItemContext = /*#__PURE__*/_react.default.createContext({});
+class DropdownMenuRoot extends _dropdown.AbstractDropdown {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "actionsRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "role", 'menu');
     /**
      * TODO: It needs to be reconsidered in a future implementation so that component accepts items as a prop instead of JSX.
      * Tab index recalculation flag.
@@ -71,261 +57,231 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
      * to the next available focusable item. This flag ensures the focus lock
      * remains within proper boundaries during the initial render cycle.
     */
-    (0, _defineProperty2["default"])(_this, "shouldRecalculateItemTabIndex", false);
-    return _this;
+    (0, _defineProperty2.default)(this, "shouldRecalculateItemTabIndex", false);
   }
-  (0, _inherits2["default"])(DropdownMenuRoot, _AbstractDropdown);
-  return (0, _createClass2["default"])(DropdownMenuRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this2 = this;
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(DropdownMenuRoot, "uncontrolledProps", this, 3)([])), {}, {
-        visible: [null, function (visible) {
-          if (visible === true) {
-            setTimeout(function () {
-              _this2.focusAndScrollToSelected();
-              // for some reason, Google Chrome optimizes this timeout with 0 value with previous render (when we set aria-selected)
-              // and that's why its skip scrollToNodes. We selected the appropriate timeout manually.
-            }, 50);
-          }
-        }]
-      });
-    }
-  }, {
-    key: "menuElements",
-    get: function get() {
-      var menuElement = this.menuRef.current;
-      if (!menuElement) {
-        return {
-          selected: null,
-          options: null
-        };
-      }
-      var options = menuElement.querySelectorAll('[role="menuitemcheckbox"], [role="menuitemradio"]');
-      var selected = menuElement.querySelector('[aria-checked="true"]:not([disabled])');
+  uncontrolledProps() {
+    return {
+      ...super.uncontrolledProps(),
+      visible: [null, visible => {
+        if (visible === true) {
+          setTimeout(() => {
+            this.focusAndScrollToSelected();
+            // for some reason, Google Chrome optimizes this timeout with 0 value with previous render (when we set aria-selected)
+            // and that's why its skip scrollToNodes. We selected the appropriate timeout manually.
+          }, 50);
+        }
+      }]
+    };
+  }
+  get menuElements() {
+    const menuElement = this.menuRef.current;
+    if (!menuElement) {
       return {
-        selected: selected,
-        options: options
+        selected: null,
+        options: null
       };
     }
-  }, {
-    key: "focusAndScrollToSelected",
-    value: function focusAndScrollToSelected() {
-      var _this$menuRef$current,
-        _this3 = this;
-      var _this$menuElements = this.menuElements,
-        selected = _this$menuElements.selected,
-        options = _this$menuElements.options;
-      var isFocusAlreadyInPopper = (0, _isFocusInside.isFocusInside)(this.popperRef.current);
-      if (!selected || !options || (_this$menuRef$current = this.menuRef.current) !== null && _this$menuRef$current !== void 0 && _this$menuRef$current.dataset.isVirtual || isFocusAlreadyInPopper) return;
-      this.scrollToNodeAsync(selected, true).then(function () {
-        if (_this3.asProps.visible) {
-          selected.focus({
-            preventScroll: true
-          });
-        }
-      });
-      var selectedIndex = Array.from(options).indexOf(selected);
-      if (selectedIndex !== -1) {
-        this.handlers.highlightedIndex(selectedIndex);
+    const options = menuElement.querySelectorAll('[role="menuitemcheckbox"], [role="menuitemradio"]');
+    const selected = menuElement.querySelector('[aria-checked="true"]:not([disabled])');
+    return {
+      selected,
+      options
+    };
+  }
+  focusAndScrollToSelected() {
+    let {
+      selected,
+      options
+    } = this.menuElements;
+    const isFocusAlreadyInPopper = (0, _isFocusInside.isFocusInside)(this.popperRef.current);
+    if (!selected || !options || this.menuRef.current?.dataset.isVirtual || isFocusAlreadyInPopper) return;
+    this.scrollToNodeAsync(selected, true).then(() => {
+      if (this.asProps.visible) {
+        selected.focus({
+          preventScroll: true
+        });
       }
+    });
+    const selectedIndex = Array.from(options).indexOf(selected);
+    if (selectedIndex !== -1) {
+      this.handlers.highlightedIndex(selectedIndex);
     }
-  }, {
-    key: "afterOpenPopper",
-    value: function afterOpenPopper() {
-      var _this$menuRef$current2;
-      var _this$menuElements2 = this.menuElements,
-        selected = _this$menuElements2.selected,
-        options = _this$menuElements2.options;
-      if (selected && options && !((_this$menuRef$current2 = this.menuRef.current) !== null && _this$menuRef$current2 !== void 0 && _this$menuRef$current2.dataset.isVirtual)) return;
-      (0, _superPropGet2["default"])(DropdownMenuRoot, "afterOpenPopper", this, 3)([]);
-    }
-  }, {
-    key: "itemRef",
-    value: function itemRef(props, index, node) {
-      (0, _superPropGet2["default"])(DropdownMenuRoot, "itemRef", this, 3)([props, index, node]);
-      if (node === document.activeElement) {
-        (0, _superPropGet2["default"])(DropdownMenuRoot, "scrollToNode", this, 3)([node]);
-      }
+  }
+  afterOpenPopper() {
+    const {
+      selected,
+      options
+    } = this.menuElements;
+    if (selected && options && !this.menuRef.current?.dataset.isVirtual) return;
+    super.afterOpenPopper();
+  }
+  itemRef(props, index, node) {
+    super.itemRef(props, index, node);
+    if (node === document.activeElement) {
+      super.scrollToNode(node);
     }
-  }, {
-    key: "getTriggerProps",
-    value: function getTriggerProps() {
-      var _this$asProps = this.asProps,
-        Children = _this$asProps.Children,
-        uid = _this$asProps.uid,
-        visible = _this$asProps.visible;
-      var hasMenu = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Menu.displayName]);
-      var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(DropdownMenuRoot, "getTriggerProps", this, 3)([])), {}, {
-        'onKeyDown': (0, _assignProps13.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu('trigger')),
-        'aria-controls': visible ? ariaControls : undefined,
-        'aria-haspopup': hasMenu ? 'true' : 'dialog'
-      });
+  }
+  getTriggerProps() {
+    const {
+      Children,
+      uid,
+      visible
+    } = this.asProps;
+    const hasMenu = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Menu.displayName]);
+    const ariaControls = hasMenu ? `igc-${uid}-list` : `igc-${uid}-popper`;
+    return {
+      ...super.getTriggerProps(),
+      'onKeyDown': (0, _assignProps1.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu('trigger')),
+      'aria-controls': visible ? ariaControls : undefined,
+      'aria-haspopup': hasMenu ? 'true' : 'dialog'
+    };
+  }
+  getListProps() {
+    return {
+      ...super.getListProps(),
+      onKeyDown: (0, _assignProps1.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
+    };
+  }
+  getVirtualListProps() {
+    return {
+      ...super.getListProps(),
+      onKeyDown: (0, _assignProps1.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
+    };
+  }
+  getPopperProps() {
+    return {
+      ...super.getPopperProps(),
+      onKeyDown: (0, _assignProps1.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
+    };
+  }
+  getActionsProps() {
+    return {
+      ...this.getListProps(),
+      ref: this.actionsRef,
+      onKeyDown: (0, _assignProps1.callAllEventHandlers)(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
+    };
+  }
+  getItemTabIndex(props, itemIndex) {
+    const {
+      disabled,
+      index
+    } = props;
+    const {
+      highlightedIndex,
+      visible
+    } = this.asProps;
+    if (!visible) return -1;
+    const isHighlighted = (index ?? itemIndex) === highlightedIndex;
+    if (isHighlighted && !disabled) {
+      return 0;
     }
-  }, {
-    key: "getListProps",
-    value: function getListProps() {
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(DropdownMenuRoot, "getListProps", this, 3)([])), {}, {
-        onKeyDown: (0, _assignProps13.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
-      });
+    if (disabled && isHighlighted) {
+      this.shouldRecalculateItemTabIndex = true;
     }
-  }, {
-    key: "getVirtualListProps",
-    value: function getVirtualListProps() {
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(DropdownMenuRoot, "getListProps", this, 3)([])), {}, {
-        onKeyDown: (0, _assignProps13.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
-      });
+    if (!isHighlighted && !disabled && this.shouldRecalculateItemTabIndex) {
+      this.shouldRecalculateItemTabIndex = false;
+      return 0;
     }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(DropdownMenuRoot, "getPopperProps", this, 3)([])), {}, {
-        onKeyDown: (0, _assignProps13.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
-      });
+    return -1;
+  }
+  getItemProps(props, index) {
+    const realIndex = props.index ?? index;
+    const itemProps = {
+      ...super.getItemProps(props, realIndex),
+      tabIndex: this.getItemTabIndex(props, index),
+      ref: node => this.itemRef(props, realIndex, node),
+      actionsRef: this.actionsRef
+    };
+    if (props.tag === _button.default) {
+      itemProps.use = props.use ?? 'tertiary';
+      itemProps.theme = props.theme ?? 'muted';
+      itemProps.size = props.size ?? 's';
+      itemProps.innerOutline = false;
     }
-  }, {
-    key: "getActionsProps",
-    value: function getActionsProps() {
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, this.getListProps()), {}, {
-        ref: this.actionsRef,
-        onKeyDown: (0, _assignProps13.callAllEventHandlers)(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
-      });
+    if (props.selected) {
+      itemProps['aria-checked'] = true;
     }
-  }, {
-    key: "getItemTabIndex",
-    value: function getItemTabIndex(props, itemIndex) {
-      var disabled = props.disabled,
-        index = props.index;
-      var _this$asProps2 = this.asProps,
-        highlightedIndex = _this$asProps2.highlightedIndex,
-        visible = _this$asProps2.visible;
-      if (!visible) return -1;
-      var isHighlighted = (index !== null && index !== void 0 ? index : itemIndex) === highlightedIndex;
-      if (isHighlighted && !disabled) {
-        return 0;
-      }
-      if (disabled && isHighlighted) {
-        this.shouldRecalculateItemTabIndex = true;
-      }
-      if (!isHighlighted && !disabled && this.shouldRecalculateItemTabIndex) {
-        this.shouldRecalculateItemTabIndex = false;
-        return 0;
-      }
-      return -1;
+    if (super.childRole === 'menuitemradio') {
+      itemProps.onClick = () => {
+        this.handlers.visible(false);
+      };
     }
-  }, {
-    key: "getItemProps",
-    value: function getItemProps(props, index) {
-      var _props$index,
-        _this4 = this;
-      var realIndex = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : index;
-      var itemProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _superPropGet2["default"])(DropdownMenuRoot, "getItemProps", this, 3)([props, realIndex])), {}, {
-        tabIndex: this.getItemTabIndex(props, index),
-        ref: function ref(node) {
-          return _this4.itemRef(props, realIndex, node);
-        },
-        actionsRef: this.actionsRef
-      });
-      if (props.tag === _button["default"]) {
-        var _props$use, _props$theme, _props$size;
-        itemProps.use = (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : 'tertiary';
-        itemProps.theme = (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : 'muted';
-        itemProps.size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 's';
-        itemProps.innerOutline = false;
-      }
-      if (props.selected) {
-        itemProps['aria-checked'] = true;
+    return itemProps;
+  }
+  handleKeyDownForMenu(place) {
+    return e => {
+      const {
+        visible,
+        placement,
+        inlineActions
+      } = this.asProps;
+
+      // stop propagation keyboard events if it calls not on DropdownMenu.Items
+      if (place === 'list' && !this.menuRef.current?.contains(e.target) && !inlineActions) {
+        e.stopPropagation();
+        return false;
       }
-      if ((0, _superPropGet2["default"])(DropdownMenuRoot, "childRole", this, 1) === 'menuitemradio') {
-        itemProps.onClick = function () {
-          _this4.handlers.visible(false);
-        };
+      const show = e.key === 'ArrowRight' && placement?.startsWith('right') || e.key === 'ArrowLeft' && placement?.startsWith('left') || (e.key === 'Enter' || e.key === ' ') && !inlineActions;
+      const hide = e.key === 'ArrowLeft' && placement?.startsWith('right') || e.key === 'ArrowRight' && placement?.startsWith('left') || e.key === 'Escape';
+      const isMenuItem = e.target.getAttribute('role')?.startsWith(super.childRole);
+      if (place === 'trigger' && show && isMenuItem) {
+        this.handlers.visible(true);
+        this.handlers.highlightedIndex(0);
+        setTimeout(() => {
+          let {
+            highlightedIndex
+          } = this.asProps;
+          const highlightedIndexProps = this.itemProps[highlightedIndex];
+          if (highlightedIndexProps?.disabled) {
+            highlightedIndex = this.itemProps.findIndex(p => !p.disabled);
+          }
+          if (highlightedIndex === -1) return;
+          this.itemRefs[highlightedIndex]?.focus();
+        }, 0);
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
       }
-      return itemProps;
-    }
-  }, {
-    key: "handleKeyDownForMenu",
-    value: function handleKeyDownForMenu(place) {
-      var _this5 = this;
-      return function (e) {
-        var _this5$menuRef$curren, _e$target$getAttribut;
-        var _this5$asProps = _this5.asProps,
-          visible = _this5$asProps.visible,
-          placement = _this5$asProps.placement,
-          inlineActions = _this5$asProps.inlineActions;
-
-        // stop propagation keyboard events if it calls not on DropdownMenu.Items
-        if (place === 'list' && !((_this5$menuRef$curren = _this5.menuRef.current) !== null && _this5$menuRef$curren !== void 0 && _this5$menuRef$curren.contains(e.target)) && !inlineActions) {
-          e.stopPropagation();
-          return false;
-        }
-        var show = e.key === 'ArrowRight' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('right')) || e.key === 'ArrowLeft' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('left')) || (e.key === 'Enter' || e.key === ' ') && !inlineActions;
-        var hide = e.key === 'ArrowLeft' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('right')) || e.key === 'ArrowRight' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('left')) || e.key === 'Escape';
-        var isMenuItem = (_e$target$getAttribut = e.target.getAttribute('role')) === null || _e$target$getAttribut === void 0 ? void 0 : _e$target$getAttribut.startsWith((0, _superPropGet2["default"])(DropdownMenuRoot, "childRole", _this5, 1));
-        if (place === 'trigger' && show && isMenuItem) {
-          _this5.handlers.visible(true);
-          _this5.handlers.highlightedIndex(0);
-          setTimeout(function () {
-            var _this5$itemRefs$highl;
-            var highlightedIndex = _this5.asProps.highlightedIndex;
-            var highlightedIndexProps = _this5.itemProps[highlightedIndex];
-            if (highlightedIndexProps !== null && highlightedIndexProps !== void 0 && highlightedIndexProps.disabled) {
-              highlightedIndex = _this5.itemProps.findIndex(function (p) {
-                return !p.disabled;
-              });
-            }
-            if (highlightedIndex === -1) return;
-            (_this5$itemRefs$highl = _this5.itemRefs[highlightedIndex]) === null || _this5$itemRefs$highl === void 0 || _this5$itemRefs$highl.focus();
-          }, 0);
+      if (place === 'list' && visible && hide && isMenuItem) {
+        if (!inlineActions || inlineActions && (e.key === 'Escape' || this.asProps.highlightedIndex === 0)) {
+          this.handlers.visible(false);
+          if (this.triggerRef.current) {
+            (0, _setFocus.setFocus)(this.triggerRef.current);
+          }
           e.preventDefault();
           e.stopPropagation();
           return false;
         }
-        if (place === 'list' && visible && hide && isMenuItem) {
-          if (!inlineActions || inlineActions && (e.key === 'Escape' || _this5.asProps.highlightedIndex === 0)) {
-            _this5.handlers.visible(false);
-            if (_this5.triggerRef.current) {
-              (0, _setFocus.setFocus)(_this5.triggerRef.current);
-            }
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-          }
-        }
-      };
-    }
-  }, {
-    key: "handlePreventTabOnActions",
-    value: function handlePreventTabOnActions(e) {
-      if (e.key === 'Tab') {
-        e.stopPropagation();
-        e.preventDefault();
-        return false;
       }
+    };
+  }
+  handlePreventTabOnActions(e) {
+    if (e.key === 'Tab') {
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps;
-      var _this$asProps3 = this.asProps,
-        Children = _this$asProps3.Children,
-        selectedIndex = _this$asProps3.selectedIndex,
-        interaction = _this$asProps3.interaction,
-        timeout = _this$asProps3.timeout;
-      this.itemProps = [];
-      return /*#__PURE__*/_react["default"].createElement(_dropdown.selectedIndexContext.Provider, {
-        value: selectedIndex
-      }, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)({
-        "timeout": timeout || (interaction === 'hover' ? [0, 100] : undefined)
-      }, _ref), /*#__PURE__*/_react["default"].createElement(Children, null)));
-    }
-  }]);
-}(_dropdown.AbstractDropdown);
-(0, _defineProperty2["default"])(DropdownMenuRoot, "displayName", 'DropdownMenu');
-(0, _defineProperty2["default"])(DropdownMenuRoot, "style", style);
-(0, _defineProperty2["default"])(DropdownMenuRoot, "enhance", Object.values(_dropdown.enhance));
-(0, _defineProperty2["default"])(DropdownMenuRoot, "defaultProps", {
+  }
+  render() {
+    var _ref = this.asProps;
+    const {
+      Children,
+      selectedIndex,
+      interaction,
+      timeout
+    } = this.asProps;
+    this.itemProps = [];
+    return /*#__PURE__*/_react.default.createElement(_dropdown.selectedIndexContext.Provider, {
+      value: selectedIndex
+    }, /*#__PURE__*/_react.default.createElement(_dropdown.default, (0, _core.assignProps)({
+      "timeout": timeout || (interaction === 'hover' ? [0, 100] : undefined)
+    }, _ref), /*#__PURE__*/_react.default.createElement(Children, null)));
+  }
+}
+(0, _defineProperty2.default)(DropdownMenuRoot, "displayName", 'DropdownMenu');
+(0, _defineProperty2.default)(DropdownMenuRoot, "style", style);
+(0, _defineProperty2.default)(DropdownMenuRoot, "enhance", Object.values(_dropdown.enhance));
+(0, _defineProperty2.default)(DropdownMenuRoot, "defaultProps", {
   size: 'm',
   defaultVisible: false,
   defaultHighlightedIndex: 0,
@@ -337,90 +293,97 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
   placement: 'bottom-start',
   timeout: 0
 });
-(0, _defineProperty2["default"])(DropdownMenuRoot, "nestedMenuInteraction", {
+(0, _defineProperty2.default)(DropdownMenuRoot, "nestedMenuInteraction", {
   trigger: [['onClick', 'onMouseEnter'], ['onClick', 'onMouseLeave']],
   popper: [['onMouseEnter'], ['onMouseLeave']]
 });
-function List(_ref22) {
+function List({
+  styles,
+  Children
+}) {
   var _ref2 = arguments[0],
-    _ref13;
-  var styles = _ref22.styles,
-    Children = _ref22.Children;
-  var SDropdownMenuList = _scrollArea["default"];
-  var SBar = _scrollArea["default"].Bar;
-  return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_Context.ListBoxContextProvider, _ref13.cn("ListBoxContextProvider", {}), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref13.cn("SDropdownMenuList", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "shadow": true,
-    "shadowSize": 16,
-    "shadowTheme": 'light'
-  }, _ref2))), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Container, {
+    _ref1;
+  const SDropdownMenuList = _baseComponents.ScrollArea;
+  const SBar = _baseComponents.ScrollArea.Bar;
+  return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_Context.ListBoxContextProvider, _ref1.cn("ListBoxContextProvider", {}), /*#__PURE__*/_react.default.createElement(SDropdownMenuList, _ref1.cn("SDropdownMenuList", {
+    ...(0, _core.assignProps)({
+      "shadow": true,
+      "shadowSize": 16,
+      "shadowTheme": 'light'
+    }, _ref2)
+  }), /*#__PURE__*/_react.default.createElement(_baseComponents.ScrollArea.Container, {
     tabIndex: undefined
-  }, /*#__PURE__*/_react["default"].createElement(Children, _ref13.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(SBar, _ref13.cn("SBar", {
+  }, /*#__PURE__*/_react.default.createElement(Children, _ref1.cn("Children", {}))), /*#__PURE__*/_react.default.createElement(SBar, _ref1.cn("SBar", {
     "orientation": 'horizontal'
-  })), /*#__PURE__*/_react["default"].createElement(SBar, _ref13.cn("SBar", {
+  })), /*#__PURE__*/_react.default.createElement(SBar, _ref1.cn("SBar", {
     "orientation": 'vertical'
   }))));
 }
-function Actions(_ref23) {
+function Actions({
+  styles
+}) {
   var _ref3 = arguments[0],
-    _ref14;
-  var styles = _ref23.styles;
-  var SDropdownMenuActions = _flexBox.Flex;
-  return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuActions, _ref14.cn("SDropdownMenuActions", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
+    _ref10;
+  const SDropdownMenuActions = _baseComponents.Flex;
+  return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SDropdownMenuActions, _ref10.cn("SDropdownMenuActions", {
+    ...(0, _core.assignProps)({}, _ref3)
+  }));
 }
 function Menu(props) {
   var _ref4 = arguments[0];
-  var visible = props.visible,
-    disablePortal = props.disablePortal,
-    ignorePortalsStacking = props.ignorePortalsStacking,
-    disableEnforceFocus = props.disableEnforceFocus,
-    interaction = props.interaction,
-    autoFocus = props.autoFocus,
-    animationsDisabled = props.animationsDisabled;
-  var popperProps = {
-    visible: visible,
-    disablePortal: disablePortal,
-    ignorePortalsStacking: ignorePortalsStacking,
-    disableEnforceFocus: disableEnforceFocus,
-    interaction: interaction,
-    autoFocus: autoFocus,
-    animationsDisabled: animationsDisabled
+  const {
+    visible,
+    disablePortal,
+    ignorePortalsStacking,
+    disableEnforceFocus,
+    interaction,
+    autoFocus,
+    animationsDisabled
+  } = props;
+  const popperProps = {
+    visible,
+    disablePortal,
+    ignorePortalsStacking,
+    disableEnforceFocus,
+    interaction,
+    autoFocus,
+    animationsDisabled
   };
-  return /*#__PURE__*/_react["default"].createElement(_Context.ListBoxContextProvider, null, /*#__PURE__*/_react["default"].createElement(DropdownMenu.Popper, (0, _extends2["default"])({}, popperProps, {
+  return /*#__PURE__*/_react.default.createElement(_Context.ListBoxContextProvider, null, /*#__PURE__*/_react.default.createElement(DropdownMenu.Popper, (0, _extends2.default)({}, popperProps, {
     role: null
-  }), /*#__PURE__*/_react["default"].createElement(DropdownMenu.List, (0, _core.assignProps)({}, _ref4))));
+  }), /*#__PURE__*/_react.default.createElement(DropdownMenu.List, (0, _core.assignProps)({}, _ref4))));
 }
-function Item(_ref24) {
+function Item({
+  id,
+  styles,
+  disabled,
+  Children,
+  forwardRef,
+  role,
+  tabIndex,
+  actionsRef,
+  'aria-checked': ariaChecked
+}) {
   var _ref5 = arguments[0],
-    _ref15;
-  var id = _ref24.id,
-    styles = _ref24.styles,
-    disabled = _ref24.disabled,
-    Children = _ref24.Children,
-    forwardRef = _ref24.forwardRef,
-    role = _ref24.role,
-    tabIndex = _ref24.tabIndex,
-    actionsRef = _ref24.actionsRef,
-    ariaChecked = _ref24['aria-checked'];
-  var SDropdownMenuItemContainer = _dropdown["default"].Item;
-  var itemRef = _react["default"].useRef();
-  var _React$useState = _react["default"].useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    highlighted = _React$useState2[0],
-    setHighlighted = _React$useState2[1];
-  var menuItemContextValue = {
+    _ref11;
+  const SDropdownMenuItemContainer = _dropdown.default.Item;
+  const itemRef = _react.default.useRef();
+  const [highlighted, setHighlighted] = _react.default.useState(false);
+  const menuItemContextValue = {
     contentId: id,
-    ref: (0, _ref30.forkRef)(forwardRef, itemRef),
-    role: role,
-    tabIndex: tabIndex,
-    ariaChecked: ariaChecked,
-    disabled: disabled
+    ref: itemRef,
+    forwardRef,
+    role,
+    tabIndex,
+    ariaChecked,
+    disabled
   };
-  var ariaDescribes = [];
-  var hasSubMenu = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.displayName], true);
-  var hasHint = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Item.Hint.displayName], true);
-  var advancedMode = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
+  const ariaDescribes = [];
+  const hasSubMenu = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.displayName], true);
+  const hasHint = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Item.Hint.displayName], true);
+  const advancedMode = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
   if (hasHint) {
-    var hintId = "igc-".concat((0, _uniqueID.useUID)(), "-option-hint");
+    const hintId = `igc-${(0, _uniqueID.useUID)()}-option-hint`;
     menuItemContextValue.hintId = hintId;
     ariaDescribes.push(hintId);
   }
@@ -428,8 +391,8 @@ function Item(_ref24) {
     menuItemContextValue.hasSubMenu = true;
   }
   menuItemContextValue.ariaDescribes = ariaDescribes;
-  _react["default"].useEffect(function () {
-    var onFocus = function onFocus(e) {
+  _react.default.useEffect(() => {
+    const onFocus = e => {
       if (e.target === itemRef.current) {
         setHighlighted(true);
         if (hasSubMenu) {
@@ -437,7 +400,7 @@ function Item(_ref24) {
         }
       }
     };
-    var onBlur = function onBlur(e) {
+    const onBlur = e => {
       if (e.target === itemRef.current) {
         setHighlighted(false);
         if (actionsRef.current) {
@@ -451,7 +414,7 @@ function Item(_ref24) {
     document.addEventListener('blur', onBlur, {
       capture: true
     });
-    return function () {
+    return () => {
       document.removeEventListener('focus', onFocus, {
         capture: true
       });
@@ -459,159 +422,123 @@ function Item(_ref24) {
         capture: true
       });
     };
-  }, [itemRef.current]);
-  return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(menuItemContext.Provider, {
+  });
+  return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(menuItemContext.Provider, {
     value: menuItemContextValue
-  }, /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref15.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "ref": advancedMode ? undefined : menuItemContextValue.ref,
-    "use:highlighted": !disabled && highlighted && _core.lastInteraction.isKeyboard(),
-    "use:role": advancedMode ? undefined : role,
-    "use:id": advancedMode ? undefined : id,
-    "use:tabIndex": advancedMode ? undefined : tabIndex,
-    "use:aria-checked": advancedMode ? undefined : ariaChecked
-  }, _ref5))), /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {}))));
+  }, /*#__PURE__*/_react.default.createElement(SDropdownMenuItemContainer, _ref11.cn("SDropdownMenuItemContainer", {
+    ...(0, _core.assignProps)({
+      "ref": advancedMode ? undefined : (0, _ref16.forkRef)(itemRef, forwardRef),
+      "use:highlighted": !disabled && highlighted && _core.lastInteraction.isKeyboard(),
+      "use:role": advancedMode ? undefined : role,
+      "use:id": advancedMode ? undefined : id,
+      "use:tabIndex": advancedMode ? undefined : tabIndex,
+      "use:aria-checked": advancedMode ? undefined : ariaChecked
+    }, _ref5)
+  }), /*#__PURE__*/_react.default.createElement(Children, _ref11.cn("Children", {}))));
 }
 function Addon(props) {
   var _ref6 = arguments[0],
-    _ref16;
-  var SDropdownMenuItemAddon = _flexBox.Box;
-  return _ref16 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemAddon, _ref16.cn("SDropdownMenuItemAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref6))));
+    _ref12;
+  const SDropdownMenuItemAddon = _baseComponents.Box;
+  return _ref12 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SDropdownMenuItemAddon, _ref12.cn("SDropdownMenuItemAddon", {
+    ...(0, _core.assignProps)({}, _ref6)
+  }));
 }
 function Trigger() {
   var _ref7 = arguments[0];
-  return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({}, _ref7));
+  return /*#__PURE__*/_react.default.createElement(_dropdown.default.Trigger, (0, _core.assignProps)({}, _ref7));
 }
-function ItemContent(_ref25) {
+function ItemContent({
+  styles
+}) {
   var _ref8 = arguments[0],
-    _ref17;
-  var styles = _ref25.styles;
-  var SItemContent = _flexBox.Flex;
-  var ref = _react["default"].useRef();
-  var menuItemCtxValue = _react["default"].useContext(menuItemContext);
-  var subMenu = undefined;
+    _ref13;
+  const SItemContent = _baseComponents.Flex;
+  const ref = _react.default.useRef();
+  const menuItemCtxValue = _react.default.useContext(menuItemContext);
+  let subMenu = undefined;
   if (menuItemCtxValue.hasSubMenu) {
     subMenu = 'true';
   }
-  var _React$useState3 = _react["default"].useState(new Set(menuItemCtxValue.ariaDescribes)),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    describedby = _React$useState4[0],
-    setDescribedby = _React$useState4[1];
-  _react["default"].useEffect(function () {
-    var element = ref.current;
-    var parent = element === null || element === void 0 ? void 0 : element.parentElement;
+  const [describedby, setDescribedby] = _react.default.useState(new Set(menuItemCtxValue.ariaDescribes));
+  _react.default.useEffect(() => {
+    const element = ref.current;
+    const parent = element?.parentElement;
     if (parent.getAttribute('aria-haspopup') === 'true' && parent.getAttribute('aria-describedby')) {
-      setDescribedby(function (prev) {
+      setDescribedby(prev => {
         prev.add(parent.getAttribute('aria-describedby'));
         return new Set(prev);
       });
     }
   }, [menuItemCtxValue.ariaDescribes]);
-  return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemContent, _ref17.cn("SItemContent", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "role": menuItemCtxValue.role,
-    "id": menuItemCtxValue.contentId,
-    "tabIndex": menuItemCtxValue.tabIndex,
-    "ref": (0, _ref30.forkRef)(menuItemCtxValue.ref, ref),
-    "use:aria-describedby": (0, _toConsumableArray2["default"])(describedby).join(' '),
-    "aria-haspopup": menuItemCtxValue.hasSubMenu ? 'true' : undefined,
-    "aria-expanded": subMenu,
-    "aria-checked": menuItemCtxValue.ariaChecked,
-    "alignItems": 'center',
-    "justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined,
-    "disabled": menuItemCtxValue.disabled
-  }, _ref8))));
+  return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemContent, _ref13.cn("SItemContent", {
+    ...(0, _core.assignProps)({
+      "role": menuItemCtxValue.role,
+      "id": menuItemCtxValue.contentId,
+      "tabIndex": menuItemCtxValue.tabIndex,
+      "ref": (0, _ref16.forkRef)(menuItemCtxValue.ref, menuItemCtxValue.forwardRef, ref),
+      "use:aria-describedby": [...describedby].join(' '),
+      "aria-haspopup": menuItemCtxValue.hasSubMenu ? 'true' : undefined,
+      "aria-expanded": subMenu,
+      "aria-checked": menuItemCtxValue.ariaChecked,
+      "alignItems": 'center',
+      "justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined,
+      "disabled": menuItemCtxValue.disabled
+    }, _ref8)
+  }));
 }
-function ItemContentText(_ref26) {
+function ItemContentText({
+  styles,
+  ellipsis = false,
+  hintProps = {}
+}) {
   var _ref9 = arguments[0],
-    _ref18;
-  var styles = _ref26.styles;
-  var SItemContentText = _typography.Text;
-  return _ref18 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemContentText, _ref18.cn("SItemContentText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref9))));
+    _ref14;
+  const SItemContentText = _typography.Text;
+  const menuItemCtxValue = _react.default.useContext(menuItemContext);
+  if (menuItemCtxValue.ref) {
+    hintProps.triggerRef = menuItemCtxValue.ref;
+  }
+  return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SItemContentText, _ref14.cn("SItemContentText", {
+    ...(0, _core.assignProps)({
+      "ellipsis": ellipsis,
+      "hintProps": hintProps
+    }, _ref9)
+  })));
 }
-function ItemHint(_ref27) {
+function ItemHint({
+  styles
+}) {
   var _ref0 = arguments[0],
-    _ref19;
-  var styles = _ref27.styles;
-  var SItemHint = _flexBox.Flex;
-  var _React$useContext = _react["default"].useContext(menuItemContext),
-    hintId = _React$useContext.hintId;
-  return _ref19 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemHint, _ref19.cn("SItemHint", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "id": hintId,
-    "aria-hidden": 'true'
-  }, _ref0))));
-}
-
-/**
- * @deprecated Use Item hint
- */
-function Hint(props) {
-  var _ref1 = arguments[0],
-    _ref20;
-  var SDropdownMenuItemContainer = _dropdown["default"].Item;
-  return _ref20 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "variant": 'hint'
-  }, _ref1))));
-}
-/**
- * @deprecated Use Group with title prop
- */
-function Title(props) {
-  var _ref10 = arguments[0],
-    _ref21;
-  var SDropdownMenuItemContainer = _dropdown["default"].Item;
-  return _ref21 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "variant": 'title'
-  }, _ref10))));
-}
-
-/**
- * @deprecated
- */
-function Nesting(_ref28) {
-  var _ref11 = arguments[0];
-  var forwardRef = _ref28.forwardRef;
-  return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Item, (0, _core.assignProps)({
-    "ref": forwardRef
-  }, _ref11));
-}
-
-/**
- * @deprecated
- */
-function NestingTrigger(_ref29) {
-  var _ref12 = arguments[0];
-  var forwardRef = _ref29.forwardRef;
-  return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Item.Content, (0, _core.assignProps)({
-    "tag": DropdownMenu.Trigger,
-    "ref": forwardRef,
-    "use:role": 'menuitem'
-  }, _ref12));
+    _ref15;
+  const SItemHint = _baseComponents.Flex;
+  const {
+    hintId
+  } = _react.default.useContext(menuItemContext);
+  return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemHint, _ref15.cn("SItemHint", {
+    ...(0, _core.assignProps)({
+      "id": hintId,
+      "aria-hidden": 'true'
+    }, _ref0)
+  }));
 }
-var DropdownMenu = (0, _core.createComponent)(DropdownMenuRoot, {
-  Trigger: Trigger,
-  Popper: _dropdown["default"].Popper,
-  List: List,
+const DropdownMenu = (0, _core.createComponent)(DropdownMenuRoot, {
+  Trigger,
+  Popper: _dropdown.default.Popper,
+  List,
   VirtualList: _VirtualList.VirtualList,
-  Actions: Actions,
-  Menu: Menu,
+  Actions,
+  Menu,
   Item: [Item, {
-    Addon: Addon,
+    Addon,
     Content: ItemContent,
     Text: ItemContentText,
     Hint: ItemHint
   }],
-  /**
-   * @deprecated. Use just Item. See examples on
-   */
-  Nesting: [Nesting, {
-    Trigger: NestingTrigger,
-    Addon: Addon
-  }],
-  ItemTitle: Title,
-  ItemHint: Hint,
-  Group: _dropdown["default"].Group
+  Group: _dropdown.default.Group
 }, {
-  parent: [_dropdown["default"]]
+  parent: [_dropdown.default]
 });
 DropdownMenu.selectedIndexContext = _dropdown.selectedIndexContext;
-var _default = exports["default"] = DropdownMenu;
+var _default = exports.default = DropdownMenu;
 //# sourceMappingURL=DropdownMenu.js.map