@semcore/dropdown-menu 16.2.2 → 17.0.0-prerelease.18

package/lib/esm/DropdownMenu.mjs

@@ -1,14 +1,7 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, lastInteraction } from "@semcore/core";
+import { Flex, Box, ScrollArea } from "@semcore/base-components";
 import ButtonComponent from "@semcore/button";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
@@ -17,279 +10,265 @@ import { setFocus } from "@semcore/core/lib/utils/focus-lock/setFocus";
 import { forkRef } from "@semcore/core/lib/utils/ref";
 import { useUID } from "@semcore/core/lib/utils/uniqueID";
 import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
-import { Box, Flex } from "@semcore/flex-box";
-import ScrollAreaComponent from "@semcore/scroll-area";
 import { Text } from "@semcore/typography";
 import React from "react";
 import { ListBoxContextProvider } from "./components/Context.mjs";
 import { VirtualList } from "./components/VirtualList.mjs";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
 /*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (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)}",
+    ".___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__*/
-    "1ulzv_gg_"
+    "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.createContext({});
-var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
-  function DropdownMenuRoot2() {
-    var _this;
-    _classCallCheck(this, DropdownMenuRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DropdownMenuRoot2, [].concat(args));
-    _defineProperty(_this, "actionsRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "role", "menu");
-    _defineProperty(_this, "shouldRecalculateItemTabIndex", false);
-    return _this;
+const menuItemContext = /* @__PURE__ */ React.createContext({});
+class DropdownMenuRoot extends AbstractDropdown {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "actionsRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "role", "menu");
+    _defineProperty(this, "shouldRecalculateItemTabIndex", false);
   }
-  _inherits(DropdownMenuRoot2, _AbstractDropdown);
-  return _createClass(DropdownMenuRoot2, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this2 = this;
-      return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "uncontrolledProps", this, 3)([])), {}, {
-        visible: [null, function(visible) {
-          if (visible === true) {
-            setTimeout(function() {
-              _this2.focusAndScrollToSelected();
-            }, 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();
+          }, 50);
+        }
+      }]
+    };
+  }
+  get menuElements() {
+    const menuElement = this.menuRef.current;
+    if (!menuElement) {
       return {
-        selected,
-        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 = 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() {
+    var _a;
+    let {
+      selected,
+      options
+    } = this.menuElements;
+    const isFocusAlreadyInPopper = isFocusInside(this.popperRef.current);
+    if (!selected || !options || ((_a = this.menuRef.current) == null ? void 0 : _a.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;
-      _superPropGet(DropdownMenuRoot2, "afterOpenPopper", this, 3)([]);
-    }
-  }, {
-    key: "itemRef",
-    value: function itemRef(props, index, node) {
-      _superPropGet(DropdownMenuRoot2, "itemRef", this, 3)([props, index, node]);
-      if (node === document.activeElement) {
-        _superPropGet(DropdownMenuRoot2, "scrollToNode", this, 3)([node]);
-      }
+  }
+  afterOpenPopper() {
+    var _a;
+    const {
+      selected,
+      options
+    } = this.menuElements;
+    if (selected && options && !((_a = this.menuRef.current) == null ? void 0 : _a.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 = isAdvanceMode(Children, [DropdownMenu.Menu.displayName]);
-      var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
-      return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "getTriggerProps", this, 3)([])), {}, {
-        "onKeyDown": callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu("trigger")),
-        "aria-controls": visible ? ariaControls : void 0,
-        "aria-haspopup": hasMenu ? "true" : "dialog"
-      });
+  }
+  getTriggerProps() {
+    const {
+      Children,
+      uid,
+      visible
+    } = this.asProps;
+    const hasMenu = isAdvanceMode(Children, [DropdownMenu.Menu.displayName]);
+    const ariaControls = hasMenu ? `igc-${uid}-list` : `igc-${uid}-popper`;
+    return {
+      ...super.getTriggerProps(),
+      "onKeyDown": callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu("trigger")),
+      "aria-controls": visible ? ariaControls : void 0,
+      "aria-haspopup": hasMenu ? "true" : "dialog"
+    };
+  }
+  getListProps() {
+    return {
+      ...super.getListProps(),
+      onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
+    };
+  }
+  getVirtualListProps() {
+    return {
+      ...super.getListProps(),
+      onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
+    };
+  }
+  getPopperProps() {
+    return {
+      ...super.getPopperProps(),
+      onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
+    };
+  }
+  getActionsProps() {
+    return {
+      ...this.getListProps(),
+      ref: this.actionsRef,
+      onKeyDown: 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 _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "getListProps", this, 3)([])), {}, {
-        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
-      });
+    if (disabled && isHighlighted) {
+      this.shouldRecalculateItemTabIndex = true;
     }
-  }, {
-    key: "getVirtualListProps",
-    value: function getVirtualListProps() {
-      return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "getListProps", this, 3)([])), {}, {
-        onKeyDown: 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 _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "getPopperProps", this, 3)([])), {}, {
-        onKeyDown: 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 === ButtonComponent) {
+      itemProps.use = props.use ?? "tertiary";
+      itemProps.theme = props.theme ?? "muted";
+      itemProps.size = props.size ?? "s";
+      itemProps.innerOutline = false;
     }
-  }, {
-    key: "getActionsProps",
-    value: function getActionsProps() {
-      return _objectSpread(_objectSpread({}, this.getListProps()), {}, {
-        ref: this.actionsRef,
-        onKeyDown: 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 = _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "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 === ButtonComponent) {
-        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) => {
+      var _a, _b;
+      const {
+        visible,
+        placement,
+        inlineActions
+      } = this.asProps;
+      if (place === "list" && !((_a = this.menuRef.current) == null ? void 0 : _a.contains(e.target)) && !inlineActions) {
+        e.stopPropagation();
+        return false;
       }
-      if (_superPropGet(DropdownMenuRoot2, "childRole", this, 1) === "menuitemradio") {
-        itemProps.onClick = function() {
-          _this4.handlers.visible(false);
-        };
+      const show = e.key === "ArrowRight" && (placement == null ? void 0 : placement.startsWith("right")) || e.key === "ArrowLeft" && (placement == null ? void 0 : placement.startsWith("left")) || (e.key === "Enter" || e.key === " ") && !inlineActions;
+      const hide = e.key === "ArrowLeft" && (placement == null ? void 0 : placement.startsWith("right")) || e.key === "ArrowRight" && (placement == null ? void 0 : placement.startsWith("left")) || e.key === "Escape";
+      const isMenuItem = (_b = e.target.getAttribute("role")) == null ? void 0 : _b.startsWith(super.childRole);
+      if (place === "trigger" && show && isMenuItem) {
+        this.handlers.visible(true);
+        this.handlers.highlightedIndex(0);
+        setTimeout(() => {
+          var _a2;
+          let {
+            highlightedIndex
+          } = this.asProps;
+          const highlightedIndexProps = this.itemProps[highlightedIndex];
+          if (highlightedIndexProps == null ? void 0 : highlightedIndexProps.disabled) {
+            highlightedIndex = this.itemProps.findIndex((p) => !p.disabled);
+          }
+          if (highlightedIndex === -1) return;
+          (_a2 = this.itemRefs[highlightedIndex]) == null ? void 0 : _a2.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;
-        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(_superPropGet(DropdownMenuRoot2, "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) {
+            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) {
-              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.createElement(selectedIndexContext.Provider, {
-        value: selectedIndex
-      }, /* @__PURE__ */ React.createElement(Dropdown, assignProps({
-        "timeout": timeout || (interaction === "hover" ? [0, 100] : void 0)
-      }, _ref), /* @__PURE__ */ React.createElement(Children, null)));
-    }
-  }]);
-})(AbstractDropdown);
+  }
+  render() {
+    var _ref = this.asProps;
+    const {
+      Children,
+      selectedIndex,
+      interaction,
+      timeout
+    } = this.asProps;
+    this.itemProps = [];
+    return /* @__PURE__ */ React.createElement(selectedIndexContext.Provider, {
+      value: selectedIndex
+    }, /* @__PURE__ */ React.createElement(Dropdown, assignProps({
+      "timeout": timeout || (interaction === "hover" ? [0, 100] : void 0)
+    }, _ref), /* @__PURE__ */ React.createElement(Children, null)));
+  }
+}
 _defineProperty(DropdownMenuRoot, "displayName", "DropdownMenu");
 _defineProperty(DropdownMenuRoot, "style", style);
 _defineProperty(DropdownMenuRoot, "enhance", Object.values(enhance));
@@ -309,33 +288,48 @@ _defineProperty(DropdownMenuRoot, "nestedMenuInteraction", {
   trigger: [["onClick", "onMouseEnter"], ["onClick", "onMouseLeave"]],
   popper: [["onMouseEnter"], ["onMouseLeave"]]
 });
-function List(_ref22) {
-  var _ref2 = arguments[0], _ref13;
-  var styles = _ref22.styles, Children = _ref22.Children;
-  var SDropdownMenuList = ScrollAreaComponent;
-  var SBar = ScrollAreaComponent.Bar;
-  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref13.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref13.cn("SDropdownMenuList", _objectSpread({}, assignProps({
-    "shadow": true,
-    "shadowSize": 16,
-    "shadowTheme": "light"
-  }, _ref2))), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Container, {
+function List({
+  styles,
+  Children
+}) {
+  var _ref2 = arguments[0], _ref1;
+  const SDropdownMenuList = ScrollArea;
+  const SBar = ScrollArea.Bar;
+  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref1.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref1.cn("SDropdownMenuList", {
+    ...assignProps({
+      "shadow": true,
+      "shadowSize": 16,
+      "shadowTheme": "light"
+    }, _ref2)
+  }), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
     tabIndex: void 0
-  }, /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {}))), /* @__PURE__ */ React.createElement(SBar, _ref13.cn("SBar", {
+  }, /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {}))), /* @__PURE__ */ React.createElement(SBar, _ref1.cn("SBar", {
     "orientation": "horizontal"
-  })), /* @__PURE__ */ React.createElement(SBar, _ref13.cn("SBar", {
+  })), /* @__PURE__ */ React.createElement(SBar, _ref1.cn("SBar", {
     "orientation": "vertical"
   }))));
 }
-function Actions(_ref23) {
-  var _ref3 = arguments[0], _ref14;
-  var styles = _ref23.styles;
-  var SDropdownMenuActions = Flex;
-  return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SDropdownMenuActions, _ref14.cn("SDropdownMenuActions", _objectSpread({}, assignProps({}, _ref3))));
+function Actions({
+  styles
+}) {
+  var _ref3 = arguments[0], _ref10;
+  const SDropdownMenuActions = Flex;
+  return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SDropdownMenuActions, _ref10.cn("SDropdownMenuActions", {
+    ...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 = {
+  const {
+    visible,
+    disablePortal,
+    ignorePortalsStacking,
+    disableEnforceFocus,
+    interaction,
+    autoFocus,
+    animationsDisabled
+  } = props;
+  const popperProps = {
     visible,
     disablePortal,
     ignorePortalsStacking,
@@ -348,26 +342,36 @@ function Menu(props) {
     role: null
   }), /* @__PURE__ */ React.createElement(DropdownMenu.List, assignProps({}, _ref4))));
 }
-function Item(_ref24) {
-  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.Item;
-  var itemRef = React.useRef();
-  var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), highlighted = _React$useState2[0], setHighlighted = _React$useState2[1];
-  var menuItemContextValue = {
+function Item({
+  id,
+  styles,
+  disabled,
+  Children,
+  forwardRef,
+  role,
+  tabIndex,
+  actionsRef,
+  "aria-checked": ariaChecked
+}) {
+  var _ref5 = arguments[0], _ref11;
+  const SDropdownMenuItemContainer = Dropdown.Item;
+  const itemRef = React.useRef();
+  const [highlighted, setHighlighted] = React.useState(false);
+  const menuItemContextValue = {
     contentId: id,
-    ref: forkRef(forwardRef, itemRef),
+    ref: itemRef,
+    forwardRef,
     role,
     tabIndex,
     ariaChecked,
     disabled
   };
-  var ariaDescribes = [];
-  var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
-  var hasHint = isAdvanceMode(Children, [DropdownMenu.Item.Hint.displayName], true);
-  var advancedMode = isAdvanceMode(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
+  const ariaDescribes = [];
+  const hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
+  const hasHint = isAdvanceMode(Children, [DropdownMenu.Item.Hint.displayName], true);
+  const advancedMode = isAdvanceMode(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
   if (hasHint) {
-    var hintId = "igc-".concat(useUID(), "-option-hint");
+    const hintId = `igc-${useUID()}-option-hint`;
     menuItemContextValue.hintId = hintId;
     ariaDescribes.push(hintId);
   }
@@ -375,8 +379,8 @@ function Item(_ref24) {
     menuItemContextValue.hasSubMenu = true;
   }
   menuItemContextValue.ariaDescribes = ariaDescribes;
-  React.useEffect(function() {
-    var onFocus = function onFocus2(e) {
+  React.useEffect(() => {
+    const onFocus = (e) => {
       if (e.target === itemRef.current) {
         setHighlighted(true);
         if (hasSubMenu) {
@@ -384,7 +388,7 @@ function Item(_ref24) {
         }
       }
     };
-    var onBlur = function onBlur2(e) {
+    const onBlur = (e) => {
       if (e.target === itemRef.current) {
         setHighlighted(false);
         if (actionsRef.current) {
@@ -398,7 +402,7 @@ function Item(_ref24) {
     document.addEventListener("blur", onBlur, {
       capture: true
     });
-    return function() {
+    return () => {
       document.removeEventListener("focus", onFocus, {
         capture: true
       });
@@ -406,109 +410,103 @@ function Item(_ref24) {
         capture: true
       });
     };
-  }, [itemRef.current]);
-  return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(menuItemContext.Provider, {
+  });
+  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(menuItemContext.Provider, {
     value: menuItemContextValue
-  }, /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref15.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
-    "ref": advancedMode ? void 0 : menuItemContextValue.ref,
-    "use:highlighted": !disabled && highlighted && lastInteraction.isKeyboard(),
-    "use:role": advancedMode ? void 0 : role,
-    "use:id": advancedMode ? void 0 : id,
-    "use:tabIndex": advancedMode ? void 0 : tabIndex,
-    "use:aria-checked": advancedMode ? void 0 : ariaChecked
-  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {}))));
+  }, /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref11.cn("SDropdownMenuItemContainer", {
+    ...assignProps({
+      "ref": advancedMode ? void 0 : forkRef(itemRef, forwardRef),
+      "use:highlighted": !disabled && highlighted && lastInteraction.isKeyboard(),
+      "use:role": advancedMode ? void 0 : role,
+      "use:id": advancedMode ? void 0 : id,
+      "use:tabIndex": advancedMode ? void 0 : tabIndex,
+      "use:aria-checked": advancedMode ? void 0 : ariaChecked
+    }, _ref5)
+  }), /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {}))));
 }
 function Addon(props) {
-  var _ref6 = arguments[0], _ref16;
-  var SDropdownMenuItemAddon = Box;
-  return _ref16 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemAddon, _ref16.cn("SDropdownMenuItemAddon", _objectSpread({}, assignProps({}, _ref6))));
+  var _ref6 = arguments[0], _ref12;
+  const SDropdownMenuItemAddon = Box;
+  return _ref12 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemAddon, _ref12.cn("SDropdownMenuItemAddon", {
+    ...assignProps({}, _ref6)
+  }));
 }
 function Trigger() {
   var _ref7 = arguments[0];
   return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({}, _ref7));
 }
-function ItemContent(_ref25) {
-  var _ref8 = arguments[0], _ref17;
-  var styles = _ref25.styles;
-  var SItemContent = Flex;
-  var ref = React.useRef();
-  var menuItemCtxValue = React.useContext(menuItemContext);
-  var subMenu = void 0;
+function ItemContent({
+  styles
+}) {
+  var _ref8 = arguments[0], _ref13;
+  const SItemContent = Flex;
+  const ref = React.useRef();
+  const menuItemCtxValue = React.useContext(menuItemContext);
+  let subMenu = void 0;
   if (menuItemCtxValue.hasSubMenu) {
     subMenu = "true";
   }
-  var _React$useState3 = React.useState(new Set(menuItemCtxValue.ariaDescribes)), _React$useState4 = _slicedToArray(_React$useState3, 2), describedby = _React$useState4[0], setDescribedby = _React$useState4[1];
-  React.useEffect(function() {
-    var element = ref.current;
-    var parent = element === null || element === void 0 ? void 0 : element.parentElement;
+  const [describedby, setDescribedby] = React.useState(new Set(menuItemCtxValue.ariaDescribes));
+  React.useEffect(() => {
+    const element = ref.current;
+    const parent = element == null ? void 0 : 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 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContent, _ref17.cn("SItemContent", _objectSpread({}, assignProps({
-    "role": menuItemCtxValue.role,
-    "id": menuItemCtxValue.contentId,
-    "tabIndex": menuItemCtxValue.tabIndex,
-    "ref": forkRef(menuItemCtxValue.ref, ref),
-    "use:aria-describedby": _toConsumableArray(describedby).join(" "),
-    "aria-haspopup": menuItemCtxValue.hasSubMenu ? "true" : void 0,
-    "aria-expanded": subMenu,
-    "aria-checked": menuItemCtxValue.ariaChecked,
-    "alignItems": "center",
-    "justifyContent": menuItemCtxValue.hasSubMenu ? "space-between" : void 0,
-    "disabled": menuItemCtxValue.disabled
-  }, _ref8))));
-}
-function ItemContentText(_ref26) {
-  var _ref9 = arguments[0], _ref18;
-  var styles = _ref26.styles;
-  var SItemContentText = Text;
-  return _ref18 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContentText, _ref18.cn("SItemContentText", _objectSpread({}, assignProps({}, _ref9))));
-}
-function ItemHint(_ref27) {
-  var _ref0 = arguments[0], _ref19;
-  var styles = _ref27.styles;
-  var SItemHint = Flex;
-  var _React$useContext = React.useContext(menuItemContext), hintId = _React$useContext.hintId;
-  return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemHint, _ref19.cn("SItemHint", _objectSpread({}, assignProps({
-    "id": hintId,
-    "aria-hidden": "true"
-  }, _ref0))));
+  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContent, _ref13.cn("SItemContent", {
+    ...assignProps({
+      "role": menuItemCtxValue.role,
+      "id": menuItemCtxValue.contentId,
+      "tabIndex": menuItemCtxValue.tabIndex,
+      "ref": forkRef(menuItemCtxValue.ref, menuItemCtxValue.forwardRef, ref),
+      "use:aria-describedby": [...describedby].join(" "),
+      "aria-haspopup": menuItemCtxValue.hasSubMenu ? "true" : void 0,
+      "aria-expanded": subMenu,
+      "aria-checked": menuItemCtxValue.ariaChecked,
+      "alignItems": "center",
+      "justifyContent": menuItemCtxValue.hasSubMenu ? "space-between" : void 0,
+      "disabled": menuItemCtxValue.disabled
+    }, _ref8)
+  }));
 }
-function Hint(props) {
-  var _ref1 = arguments[0], _ref20;
-  var SDropdownMenuItemContainer = Dropdown.Item;
-  return _ref20 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
-    "variant": "hint"
-  }, _ref1))));
-}
-function Title(props) {
-  var _ref10 = arguments[0], _ref21;
-  var SDropdownMenuItemContainer = Dropdown.Item;
-  return _ref21 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
-    "variant": "title"
-  }, _ref10))));
-}
-function Nesting(_ref28) {
-  var _ref11 = arguments[0];
-  var forwardRef = _ref28.forwardRef;
-  return /* @__PURE__ */ React.createElement(DropdownMenu.Item, assignProps({
-    "ref": forwardRef
-  }, _ref11));
+function ItemContentText({
+  styles,
+  ellipsis = false,
+  hintProps = {}
+}) {
+  var _ref9 = arguments[0], _ref14;
+  const SItemContentText = Text;
+  const menuItemCtxValue = React.useContext(menuItemContext);
+  if (menuItemCtxValue.ref) {
+    hintProps.triggerRef = menuItemCtxValue.ref;
+  }
+  return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SItemContentText, _ref14.cn("SItemContentText", {
+    ...assignProps({
+      "ellipsis": ellipsis,
+      "hintProps": hintProps
+    }, _ref9)
+  })));
 }
-function NestingTrigger(_ref29) {
-  var _ref12 = arguments[0];
-  var forwardRef = _ref29.forwardRef;
-  return /* @__PURE__ */ React.createElement(DropdownMenu.Item.Content, assignProps({
-    "tag": DropdownMenu.Trigger,
-    "ref": forwardRef,
-    "use:role": "menuitem"
-  }, _ref12));
+function ItemHint({
+  styles
+}) {
+  var _ref0 = arguments[0], _ref15;
+  const SItemHint = Flex;
+  const {
+    hintId
+  } = React.useContext(menuItemContext);
+  return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemHint, _ref15.cn("SItemHint", {
+    ...assignProps({
+      "id": hintId,
+      "aria-hidden": "true"
+    }, _ref0)
+  }));
 }
-var DropdownMenu = createComponent(DropdownMenuRoot, {
+const DropdownMenu = createComponent(DropdownMenuRoot, {
   Trigger,
   Popper: Dropdown.Popper,
   List,
@@ -521,15 +519,6 @@ var DropdownMenu = createComponent(DropdownMenuRoot, {
     Text: ItemContentText,
     Hint: ItemHint
   }],
-  /**
-   * @deprecated. Use just Item. See examples on
-   */
-  Nesting: [Nesting, {
-    Trigger: NestingTrigger,
-    Addon
-  }],
-  ItemTitle: Title,
-  ItemHint: Hint,
   Group: Dropdown.Group
 }, {
   parent: [Dropdown]