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

package/lib/es6/DropdownMenu.js

@@ -1,18 +1,6 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _superPropGet from "@babel/runtime/helpers/superPropGet";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
-import { assignProps as _assignProps12 } from "@semcore/core";
-import { assignProps as _assignProps11 } from "@semcore/core";
-import { assignProps as _assignProps10 } from "@semcore/core";
-import { assignProps as _assignProps1 } from "@semcore/core";
 import { assignProps as _assignProps0 } from "@semcore/core";
 import { assignProps as _assignProps9 } from "@semcore/core";
 import { assignProps as _assignProps8 } from "@semcore/core";
@@ -23,6 +11,7 @@ import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
+import { Flex, ScrollArea as ScrollAreaComponent, Box } from '@semcore/base-components';
 import ButtonComponent from '@semcore/button';
 import { createComponent, sstyled, Root, lastInteraction } from '@semcore/core';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
@@ -32,44 +21,37 @@ 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, { AbstractDropdown, selectedIndexContext, enhance } from '@semcore/dropdown';
-import { Flex, Box } from '@semcore/flex-box';
-import ScrollAreaComponent from '@semcore/scroll-area';
 import { Text } from '@semcore/typography';
 import React from 'react';
 import { ListBoxContextProvider } from './components/Context';
 import { VirtualList } from './components/VirtualList';
 /*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
-var 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)}", /*__inner_css_end__*/"1ulzv_gg_"),
+const style = (/*__reshadow_css_start__*/_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_"
 });
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-var menuItemContext = /*#__PURE__*/React.createContext({});
-var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
-  function DropdownMenuRoot() {
-    var _this;
-    _classCallCheck(this, DropdownMenuRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DropdownMenuRoot, [].concat(args));
-    _defineProperty(_this, "actionsRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "role", 'menu');
+const menuItemContext = /*#__PURE__*/React.createContext({});
+class DropdownMenuRoot extends AbstractDropdown {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "actionsRef", /*#__PURE__*/React.createRef());
+    _defineProperty(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.
@@ -78,257 +60,227 @@ 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.
     */
-    _defineProperty(_this, "shouldRecalculateItemTabIndex", false);
-    return _this;
+    _defineProperty(this, "shouldRecalculateItemTabIndex", false);
   }
-  _inherits(DropdownMenuRoot, _AbstractDropdown);
-  return _createClass(DropdownMenuRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this2 = this;
-      return _objectSpread(_objectSpread({}, _superPropGet(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 = 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 = 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;
-      _superPropGet(DropdownMenuRoot, "afterOpenPopper", this, 3)([]);
-    }
-  }, {
-    key: "itemRef",
-    value: function itemRef(props, index, node) {
-      _superPropGet(DropdownMenuRoot, "itemRef", this, 3)([props, index, node]);
-      if (node === document.activeElement) {
-        _superPropGet(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 = isAdvanceMode(Children, [DropdownMenu.Menu.displayName]);
-      var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
-      return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot, "getTriggerProps", this, 3)([])), {}, {
-        'onKeyDown': 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 = 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 : undefined,
+      '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(DropdownMenuRoot, "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(DropdownMenuRoot, "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(DropdownMenuRoot, "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(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 === 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 => {
+      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 (_superPropGet(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(_superPropGet(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) {
+            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] : undefined)
-      }, _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] : undefined)
+    }, _ref), /*#__PURE__*/React.createElement(Children, null)));
+  }
+}
 _defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
 _defineProperty(DropdownMenuRoot, "style", style);
 _defineProperty(DropdownMenuRoot, "enhance", Object.values(enhance));
@@ -348,86 +300,93 @@ _defineProperty(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 = ScrollAreaComponent;
-  var SBar = ScrollAreaComponent.Bar;
-  return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref13.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref13.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
-    "shadow": true,
-    "shadowSize": 16,
-    "shadowTheme": 'light'
-  }, _ref2))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, {
+    _ref1;
+  const SDropdownMenuList = ScrollAreaComponent;
+  const SBar = ScrollAreaComponent.Bar;
+  return _ref1 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref1.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref1.cn("SDropdownMenuList", {
+    ..._assignProps2({
+      "shadow": true,
+      "shadowSize": 16,
+      "shadowTheme": 'light'
+    }, _ref2)
+  }), /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, {
     tabIndex: undefined
-  }, /*#__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) {
+function Actions({
+  styles
+}) {
   var _ref3 = arguments[0],
-    _ref14;
-  var styles = _ref23.styles;
-  var SDropdownMenuActions = Flex;
-  return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref14.cn("SDropdownMenuActions", _objectSpread({}, _assignProps3({}, _ref3))));
+    _ref10;
+  const SDropdownMenuActions = Flex;
+  return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref10.cn("SDropdownMenuActions", {
+    ..._assignProps3({}, _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.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, _extends({}, popperProps, {
     role: null
   }), /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _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.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 = {
+    _ref11;
+  const SDropdownMenuItemContainer = Dropdown.Item;
+  const itemRef = React.useRef();
+  const [highlighted, setHighlighted] = React.useState(false);
+  const menuItemContextValue = {
     contentId: id,
-    ref: forkRef(forwardRef, itemRef),
-    role: role,
-    tabIndex: tabIndex,
-    ariaChecked: ariaChecked,
-    disabled: disabled
+    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);
   }
@@ -435,8 +394,8 @@ function Item(_ref24) {
     menuItemContextValue.hasSubMenu = true;
   }
   menuItemContextValue.ariaDescribes = ariaDescribes;
-  React.useEffect(function () {
-    var onFocus = function onFocus(e) {
+  React.useEffect(() => {
+    const onFocus = e => {
       if (e.target === itemRef.current) {
         setHighlighted(true);
         if (hasSubMenu) {
@@ -444,7 +403,7 @@ function Item(_ref24) {
         }
       }
     };
-    var onBlur = function onBlur(e) {
+    const onBlur = e => {
       if (e.target === itemRef.current) {
         setHighlighted(false);
         if (actionsRef.current) {
@@ -458,7 +417,7 @@ function Item(_ref24) {
     document.addEventListener('blur', onBlur, {
       capture: true
     });
-    return function () {
+    return () => {
       document.removeEventListener('focus', onFocus, {
         capture: true
       });
@@ -466,155 +425,119 @@ 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({}, _assignProps5({
-    "ref": advancedMode ? undefined : menuItemContextValue.ref,
-    "use:highlighted": !disabled && highlighted && 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.createElement(Children, _ref15.cn("Children", {}))));
+  }, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref11.cn("SDropdownMenuItemContainer", {
+    ..._assignProps5({
+      "ref": advancedMode ? undefined : forkRef(itemRef, forwardRef),
+      "use:highlighted": !disabled && highlighted && 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.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({}, _assignProps6({}, _ref6))));
+    _ref12;
+  const SDropdownMenuItemAddon = Box;
+  return _ref12 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemAddon, _ref12.cn("SDropdownMenuItemAddon", {
+    ..._assignProps6({}, _ref6)
+  }));
 }
 function Trigger() {
   var _ref7 = arguments[0];
   return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps7({}, _ref7));
 }
-function ItemContent(_ref25) {
+function ItemContent({
+  styles
+}) {
   var _ref8 = arguments[0],
-    _ref17;
-  var styles = _ref25.styles;
-  var SItemContent = Flex;
-  var ref = React.useRef();
-  var menuItemCtxValue = React.useContext(menuItemContext);
-  var subMenu = undefined;
+    _ref13;
+  const SItemContent = Flex;
+  const ref = React.useRef();
+  const menuItemCtxValue = React.useContext(menuItemContext);
+  let subMenu = undefined;
   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?.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({}, _assignProps8({
-    "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' : undefined,
-    "aria-expanded": subMenu,
-    "aria-checked": menuItemCtxValue.ariaChecked,
-    "alignItems": 'center',
-    "justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined,
-    "disabled": menuItemCtxValue.disabled
-  }, _ref8))));
+  return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContent, _ref13.cn("SItemContent", {
+    ..._assignProps8({
+      "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' : 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 = Text;
-  return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContentText, _ref18.cn("SItemContentText", _objectSpread({}, _assignProps9({}, _ref9))));
+    _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", {
+    ..._assignProps9({
+      "ellipsis": ellipsis,
+      "hintProps": hintProps
+    }, _ref9)
+  })));
 }
-function ItemHint(_ref27) {
+function ItemHint({
+  styles
+}) {
   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({}, _assignProps0({
-    "id": hintId,
-    "aria-hidden": 'true'
-  }, _ref0))));
-}
-
-/**
- * @deprecated Use Item hint
- */
-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({}, _assignProps1({
-    "variant": 'hint'
-  }, _ref1))));
-}
-/**
- * @deprecated Use Group with title prop
- */
-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({}, _assignProps10({
-    "variant": 'title'
-  }, _ref10))));
-}
-
-/**
- * @deprecated
- */
-function Nesting(_ref28) {
-  var _ref11 = arguments[0];
-  var forwardRef = _ref28.forwardRef;
-  return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps11({
-    "ref": forwardRef
-  }, _ref11));
-}
-
-/**
- * @deprecated
- */
-function NestingTrigger(_ref29) {
-  var _ref12 = arguments[0];
-  var forwardRef = _ref29.forwardRef;
-  return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content, _assignProps12({
-    "tag": DropdownMenu.Trigger,
-    "ref": forwardRef,
-    "use:role": 'menuitem'
-  }, _ref12));
+    _ref15;
+  const SItemHint = Flex;
+  const {
+    hintId
+  } = React.useContext(menuItemContext);
+  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SItemHint, _ref15.cn("SItemHint", {
+    ..._assignProps0({
+      "id": hintId,
+      "aria-hidden": 'true'
+    }, _ref0)
+  }));
 }
-var DropdownMenu = createComponent(DropdownMenuRoot, {
-  Trigger: Trigger,
+const DropdownMenu = createComponent(DropdownMenuRoot, {
+  Trigger,
   Popper: Dropdown.Popper,
-  List: List,
-  VirtualList: VirtualList,
-  Actions: Actions,
-  Menu: Menu,
+  List,
+  VirtualList,
+  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.Group
 }, {
   parent: [Dropdown]