intergalactic 15.109.0 → 15.110.0

package/dropdown-menu/lib/es6/DropdownMenu.js

@@ -1,16 +1,17 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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 _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from 'intergalactic/utils/lib/core/index';
-import { assignProps as _assignProps13 } from 'intergalactic/core';
 import { assignProps as _assignProps12 } from 'intergalactic/core';
 import { assignProps as _assignProps11 } from 'intergalactic/core';
 import { assignProps as _assignProps10 } from 'intergalactic/core';
@@ -26,57 +27,45 @@ import { assignProps as _assignProps } from 'intergalactic/core';
 var _excluded = ["className"];
 import React from 'react';
 import cn from 'classnames';
-import createComponent, { Component, sstyled, Root } from 'intergalactic/core';
-import Dropdown from 'intergalactic/dropdown';
+import createComponent, { sstyled, Root } from 'intergalactic/core';
+import Dropdown, { AbstractDropdown, selectedIndexContext, enhance } from 'intergalactic/dropdown';
 import { Flex, useBox, Box } from 'intergalactic/flex-box';
 import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from 'intergalactic/scroll-area';
-import uniqueIDEnhancement, { useUID } from 'intergalactic/utils/lib/uniqueID';
-import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import { useUID } from 'intergalactic/utils/lib/uniqueID';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 /*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuList_15tyi_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_15tyi_gg_ .___SShadowHorizontal_15tyi_gg_:after,.___SDropdownMenuList_15tyi_gg_ .___SShadowHorizontal_15tyi_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_15tyi_gg_ .___SShadowHorizontal_15tyi_gg_._position_median_15tyi_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_15tyi_gg_ .___SShadowHorizontal_15tyi_gg_._position_median_15tyi_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_15tyi_gg_ .___SShadowHorizontal_15tyi_gg_._position_start_15tyi_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_15tyi_gg_ .___SShadowHorizontal_15tyi_gg_._position_end_15tyi_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_15tyi_gg_ .___SShadowVertical_15tyi_gg_:after,.___SDropdownMenuList_15tyi_gg_ .___SShadowVertical_15tyi_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_15tyi_gg_ .___SShadowVertical_15tyi_gg_._position_median_15tyi_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_15tyi_gg_ .___SShadowVertical_15tyi_gg_._position_median_15tyi_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_15tyi_gg_ .___SShadowVertical_15tyi_gg_._position_start_15tyi_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_15tyi_gg_ .___SShadowVertical_15tyi_gg_._position_end_15tyi_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuItemContainer_15tyi_gg_{position:relative;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal;color:var(--intergalactic-text-primary, #191b23)}@media (hover:hover){.___SDropdownMenuItemContainer_15tyi_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItemContainer_15tyi_gg_:focus{outline:0}.___SDropdownMenuItemContainer_15tyi_gg_.__selected_15tyi_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));box-shadow:2px 0 0 0 var(--intergalactic-control-primary-info, #008ff8) inset}@media (hover:hover){.___SDropdownMenuItemContainer_15tyi_gg_.__selected_15tyi_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItemContainer_15tyi_gg_.__highlighted_15tyi_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItemContainer_15tyi_gg_.__disabled_15tyi_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItemContainer_15tyi_gg_._size_l_15tyi_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);min-height:40px}.___SDropdownMenuItemContainer_15tyi_gg_._size_m_15tyi_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);padding:calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);min-height:32px}.___SDropdownMenuItemContainer_15tyi_gg_.__notInteractive_15tyi_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_15tyi_gg_.__notInteractive_15tyi_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_15tyi_gg_._variant_hint_15tyi_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_15tyi_gg_._variant_hint_15tyi_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_15tyi_gg_._variant_title_15tyi_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_15tyi_gg_._variant_title_15tyi_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_15tyi_gg_.__visible_15tyi_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItemContainer_15tyi_gg_.__nesting-trigger_15tyi_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_15tyi_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_15tyi_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_15tyi_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_15tyi_gg_,.___SDropdownMenuNesting_15tyi_gg_._size_l_15tyi_gg_,.___SDropdownMenuNesting_15tyi_gg_._size_m_15tyi_gg_{padding:0}.___SDropdownMenuNesting_15tyi_gg_.__highlighted_15tyi_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_15tyi_gg_._size_l_15tyi_gg_,.___SDropdownNestingItem_15tyi_gg_._size_m_15tyi_gg_{padding-right:0}.___SDropdownNestingItem_15tyi_gg_ .___SDropdownMenuItemContainer_15tyi_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SGroupTitle_15tyi_gg_{font-weight:var(--intergalactic-bold, 700)}.___SGroupHint_15tyi_gg_,.___SItemHint_15tyi_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SItemContent_15tyi_gg_:focus{outline:0}" /*__inner_css_end__*/, "15tyi_gg_") /*__reshadow_css_end__*/, {
-  "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_15tyi_gg_",
-  "_highlighted": "__highlighted_15tyi_gg_",
-  "_disabled": "__disabled_15tyi_gg_",
-  "_size_l": "_size_l_15tyi_gg_",
-  "_size_m": "_size_m_15tyi_gg_",
-  "_visible": "__visible_15tyi_gg_",
-  "_nesting-trigger": "__nesting-trigger_15tyi_gg_",
-  "__SDropdownMenuNesting": "___SDropdownMenuNesting_15tyi_gg_",
-  "__SDropdownNestingItem": "___SDropdownNestingItem_15tyi_gg_",
-  "__SGroupTitle": "___SGroupTitle_15tyi_gg_",
-  "__SGroupHint": "___SGroupHint_15tyi_gg_",
-  "__SItemHint": "___SItemHint_15tyi_gg_",
-  "__SItemContent": "___SItemContent_15tyi_gg_",
-  "__SDropdownMenuList": "___SDropdownMenuList_15tyi_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_15tyi_gg_",
-  "_position_median": "_position_median_15tyi_gg_",
-  "_position_start": "_position_start_15tyi_gg_",
-  "_position_end": "_position_end_15tyi_gg_",
-  "__SShadowVertical": "___SShadowVertical_15tyi_gg_",
-  "_selected": "__selected_15tyi_gg_",
-  "_notInteractive": "__notInteractive_15tyi_gg_",
-  "_variant_hint": "_variant_hint_15tyi_gg_",
-  "_variant_title": "_variant_title_15tyi_gg_",
-  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_15tyi_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuList_14fg8_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_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_:after,.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_median_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_median_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_start_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_end_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_:after,.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_median_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_median_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_start_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_end_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuItemContainer_14fg8_gg_.__nesting-trigger_14fg8_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_14fg8_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_14fg8_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_14fg8_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_14fg8_gg_,.___SDropdownMenuNesting_14fg8_gg_._size_l_14fg8_gg_,.___SDropdownMenuNesting_14fg8_gg_._size_m_14fg8_gg_{padding:0}.___SDropdownMenuNesting_14fg8_gg_.__highlighted_14fg8_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_14fg8_gg_._size_l_14fg8_gg_,.___SDropdownNestingItem_14fg8_gg_._size_m_14fg8_gg_{padding-right:0}.___SDropdownNestingItem_14fg8_gg_ .___SDropdownMenuItemContainer_14fg8_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemContent_14fg8_gg_:focus{outline:0}.___SItemHint_14fg8_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}" /*__inner_css_end__*/, "14fg8_gg_") /*__reshadow_css_end__*/, {
+  "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_14fg8_gg_",
+  "_nesting-trigger": "__nesting-trigger_14fg8_gg_",
+  "__SDropdownMenuNesting": "___SDropdownMenuNesting_14fg8_gg_",
+  "_size_l": "_size_l_14fg8_gg_",
+  "_size_m": "_size_m_14fg8_gg_",
+  "_highlighted": "__highlighted_14fg8_gg_",
+  "__SDropdownNestingItem": "___SDropdownNestingItem_14fg8_gg_",
+  "__SItemContent": "___SItemContent_14fg8_gg_",
+  "__SItemHint": "___SItemHint_14fg8_gg_",
+  "__SDropdownMenuList": "___SDropdownMenuList_14fg8_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_14fg8_gg_",
+  "_position_median": "_position_median_14fg8_gg_",
+  "_position_start": "_position_start_14fg8_gg_",
+  "_position_end": "_position_end_14fg8_gg_",
+  "__SShadowVertical": "___SShadowVertical_14fg8_gg_",
+  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_14fg8_gg_"
 });
-import { setFocus } from 'intergalactic/utils/lib/focus-lock/setFocus';
-import { isFocusInside } from 'intergalactic/utils/lib/focus-lock/isFocusInside';
 import { useFocusSource } from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
 import { isAdvanceMode } from 'intergalactic/utils/lib/findComponent';
-import ButtonComponent from 'intergalactic/button';
 import { forkRef } from 'intergalactic/utils/lib/ref';
-import focusSourceEnhance from 'intergalactic/utils/lib/enhances/focusSourceEnhance';
-var ListBoxContextProvider = function ListBoxContextProvider(_ref22) {
-  var children = _ref22.children;
+import { callAllEventHandlers } from 'intergalactic/utils/lib/assignProps';
+import ButtonComponent from 'intergalactic/button';
+var ListBoxContextProvider = function ListBoxContextProvider(_ref20) {
+  var children = _ref20.children;
   return /*#__PURE__*/React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
     value: true
   }, children);
 };
-var selectedIndexContext = /*#__PURE__*/React.createContext(0);
 var menuItemContext = /*#__PURE__*/React.createContext({});
-var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
-  _inherits(DropdownMenuRoot, _Component);
+var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
+  _inherits(DropdownMenuRoot, _AbstractDropdown);
   var _super = _createSuper(DropdownMenuRoot);
   function DropdownMenuRoot() {
     var _this;
@@ -85,281 +74,65 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "menuRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "itemProps", []);
-    _defineProperty(_assertThisInitialized(_this), "itemRefs", []);
-    _defineProperty(_assertThisInitialized(_this), "highlightedItemRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "prevHighlightedIndex", null);
-    _defineProperty(_assertThisInitialized(_this), "handleClickTrigger", function (e) {
-      e.preventDefault();
-      _this.handlers.visible(true);
-      setTimeout(function () {
-        var element = _this.itemRefs[_this.asProps.highlightedIndex];
-        element === null || element === void 0 ? void 0 : element.focus();
-      }, 0);
-    });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function (place) {
-      return function (e) {
-        var amount = e.shiftKey ? 5 : 1;
-        var targetTagName = e.target.tagName;
-        var _this$asProps = _this.asProps,
-          visible = _this$asProps.visible,
-          highlightedIndex = _this$asProps.highlightedIndex,
-          placement = _this$asProps.placement,
-          inlineActions = _this$asProps.inlineActions;
-        if (e.key === ' ' && ['INPUT', 'TEXTAREA'].includes(targetTagName)) return;
-        if (e.key === 'Enter' && targetTagName === 'TEXTAREA') return;
-        if (place === 'popper' && (e.key === ' ' || e.key === 'Enter') && (targetTagName === 'BUTTON' || targetTagName === 'A')) return;
-        if (place === 'trigger' && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key) && e.target.getAttribute('role') !== 'menuitem') {
-          _this.handleClickTrigger(e);
-        }
-        var show = e.key === 'ArrowRight' && placement.startsWith('right') || e.key === 'ArrowLeft' && placement.startsWith('left');
-        var hide = e.key === 'ArrowLeft' && placement.startsWith('right') || e.key === 'ArrowRight' && placement.startsWith('left') || e.key === 'Escape';
-        var isMenuItem = e.target.getAttribute('role') === 'menuitem';
-        if (place === 'trigger' && (!visible || inlineActions) && show && isMenuItem) {
-          _this.handlers.visible(true);
-          _this.handlers.highlightedIndex(0);
-          setTimeout(function () {
-            var _this$itemRefs$_this$;
-            (_this$itemRefs$_this$ = _this.itemRefs[_this.asProps.highlightedIndex]) === null || _this$itemRefs$_this$ === void 0 ? void 0 : _this$itemRefs$_this$.focus();
-          }, 0);
-          e.preventDefault();
-          e.stopPropagation();
-          return;
-        }
-        if (place === 'list' && visible && hide && isMenuItem) {
-          if (!inlineActions || inlineActions && (e.key === 'Escape' || _this.asProps.highlightedIndex === 0)) {
-            var _this$triggerRef$curr;
-            _this.handlers.visible(false);
-            (_this$triggerRef$curr = _this.triggerRef.current) === null || _this$triggerRef$curr === void 0 ? void 0 : _this$triggerRef$curr.focus();
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-          }
-        }
-        if (place === 'list') {
-          switch (e.key) {
-            case 'ArrowDown':
-              {
-                if (visible && !inlineActions) {
-                  var _this$itemRefs$newHig;
-                  var newHighlightedIndex = _this.getHighlightedIndex(amount);
-                  (_this$itemRefs$newHig = _this.itemRefs[newHighlightedIndex]) === null || _this$itemRefs$newHig === void 0 ? void 0 : _this$itemRefs$newHig.focus();
-                  _this.handlers.highlightedIndex(newHighlightedIndex, e);
-                  e.preventDefault();
-                  e.stopPropagation();
-                }
-                break;
-              }
-            case 'ArrowRight':
-              {
-                if (visible && inlineActions) {
-                  var _this$itemRefs$_newHi;
-                  var _newHighlightedIndex = _this.getHighlightedIndex(amount);
-                  (_this$itemRefs$_newHi = _this.itemRefs[_newHighlightedIndex]) === null || _this$itemRefs$_newHi === void 0 ? void 0 : _this$itemRefs$_newHi.focus();
-                  _this.handlers.highlightedIndex(_newHighlightedIndex, e);
-                  e.preventDefault();
-                  e.stopPropagation();
-                }
-                break;
-              }
-            case 'ArrowUp':
-              {
-                if (visible && !inlineActions) {
-                  var _this$itemRefs$_newHi2;
-                  var _newHighlightedIndex2 = _this.getHighlightedIndex(-amount);
-                  (_this$itemRefs$_newHi2 = _this.itemRefs[_newHighlightedIndex2]) === null || _this$itemRefs$_newHi2 === void 0 ? void 0 : _this$itemRefs$_newHi2.focus();
-                  _this.handlers.highlightedIndex(_newHighlightedIndex2, e);
-                  e.preventDefault();
-                  e.stopPropagation();
-                }
-                break;
-              }
-            case 'ArrowLeft':
-              {
-                if (visible && inlineActions) {
-                  var _this$itemRefs$_newHi3;
-                  var _newHighlightedIndex3 = _this.getHighlightedIndex(-amount);
-                  (_this$itemRefs$_newHi3 = _this.itemRefs[_newHighlightedIndex3]) === null || _this$itemRefs$_newHi3 === void 0 ? void 0 : _this$itemRefs$_newHi3.focus();
-                  _this.handlers.highlightedIndex(_newHighlightedIndex3, e);
-                  e.preventDefault();
-                  e.stopPropagation();
-                }
-                break;
-              }
-            case ' ':
-            case 'Enter':
-              if (_this.highlightedItemRef.current && highlightedIndex !== null) {
-                e.stopPropagation();
-                e.preventDefault();
-                _this.highlightedItemRef.current.click();
-              }
-              break;
-          }
-        }
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "scrollToNode", function (node) {
-      if (node) {
-        _this.highlightedItemRef.current = node;
-      }
-      setTimeout(function () {
-        if (node !== null && node !== void 0 && node.scrollIntoView) {
-          if (_this.asProps.highlightedIndex !== _this.prevHighlightedIndex) {
-            _this.prevHighlightedIndex = _this.asProps.highlightedIndex;
-            node.scrollIntoView({
-              block: 'nearest',
-              inline: 'nearest'
-            });
-          }
-        }
-      }, 0);
-    });
-    _defineProperty(_assertThisInitialized(_this), "getHighlightedIndex", function (amount) {
-      var _this$itemProps$newIn;
-      var highlightedIndex = _this.asProps.highlightedIndex;
-      var itemsLastIndex = _this.itemProps.length - 1;
-      var selectedIndex = _this.itemProps.findIndex(function (item) {
-        return item.selected;
-      });
-      if (itemsLastIndex < 0) return;
-      if (highlightedIndex == null) {
-        if (selectedIndex !== -1) {
-          highlightedIndex = selectedIndex;
-        } else if (_this.highlightedItemRef.current) {
-          highlightedIndex = _this.prevHighlightedIndex;
-        } else {
-          highlightedIndex = amount < 0 ? 0 : itemsLastIndex;
-        }
-      }
-      var newIndex = highlightedIndex + amount;
-      if (newIndex < 0) {
-        newIndex = amount + itemsLastIndex + 1;
-      } else if (newIndex > itemsLastIndex) {
-        newIndex = newIndex - itemsLastIndex - 1;
-      }
-      if ((_this$itemProps$newIn = _this.itemProps[newIndex]) !== null && _this$itemProps$newIn !== void 0 && _this$itemProps$newIn.disabled) {
-        _this.getHighlightedIndex(amount < 0 ? amount - 1 : amount + 1);
-      } else if (!_this.itemProps[newIndex]) {
-        return 0;
-      } else {
-        return newIndex;
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "role", 'menu');
     return _this;
   }
   _createClass(DropdownMenuRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this2 = this;
-      return {
-        selectedIndex: null,
-        highlightedIndex: [null, function (index) {
-          _this2.handlers.selectedIndex(index);
-        }],
-        visible: null
-      };
+    key: "itemRef",
+    value: function itemRef(props, index, node) {
+      _get(_getPrototypeOf(DropdownMenuRoot.prototype), "itemRef", this).call(this, props, index, node);
+      if (node === document.activeElement) {
+        _get(_getPrototypeOf(DropdownMenuRoot.prototype), "scrollToNode", this).call(this, node);
+      }
     }
   }, {
     key: "getTriggerProps",
     value: function getTriggerProps() {
-      var _this$asProps2 = this.asProps,
-        size = _this$asProps2.size,
-        uid = _this$asProps2.uid,
-        disablePortal = _this$asProps2.disablePortal,
-        visible = _this$asProps2.visible,
-        getI18nText = _this$asProps2.getI18nText;
-      return {
-        size: size,
-        id: "igc-".concat(uid, "-trigger"),
-        'aria-controls': visible ? "igc-".concat(uid, "-list") : undefined,
-        focusHint: visible && !disablePortal ? getI18nText('triggerHint') : undefined,
-        'aria-expanded': visible ? 'true' : 'false',
-        onKeyDown: this.bindHandlerKeyDown('trigger'),
-        onClick: this.handleClickTrigger,
-        ref: this.triggerRef
-      };
+      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({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getTriggerProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu('trigger')),
+        'aria-controls': visible ? ariaControls : undefined,
+        'aria-haspopup': hasMenu ? 'true' : 'dialog'
+      });
     }
   }, {
     key: "getListProps",
     value: function getListProps() {
-      var _this$triggerRef$curr2;
-      var _this$asProps3 = this.asProps,
-        size = _this$asProps3.size,
-        uid = _this$asProps3.uid;
-      var triggerId = (_this$triggerRef$curr2 = this.triggerRef.current) === null || _this$triggerRef$curr2 === void 0 ? void 0 : _this$triggerRef$curr2.id;
-      return {
-        size: size,
-        index: this.asProps.highlightedIndex,
-        tabIndex: -1,
-        onKeyDown: this.bindHandlerKeyDown('list'),
-        ref: this.menuRef,
-        id: "igc-".concat(uid, "-list"),
-        role: 'menu',
-        'aria-labelledby': triggerId
-      };
-    }
-  }, {
-    key: "getActionsProps",
-    value: function getActionsProps() {
-      return this.getListProps();
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getListProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
+      });
     }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
-      var _this$asProps4 = this.asProps,
-        uid = _this$asProps4.uid,
-        disablePortal = _this$asProps4.disablePortal,
-        ignorePortalsStacking = _this$asProps4.ignorePortalsStacking,
-        interaction = _this$asProps4.interaction,
-        highlightedIndex = _this$asProps4.highlightedIndex;
-      return {
-        ref: this.popperRef,
-        tabIndex: -1,
-        id: "igc-".concat(uid, "-popper"),
-        disablePortal: disablePortal,
-        ignorePortalsStacking: ignorePortalsStacking,
-        focusMaster: interaction === 'click',
-        hideFocus: highlightedIndex !== null,
-        'use:role': null,
-        'use:autoFocus': false
-      };
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getPopperProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this)
+        // this.handleKeyDownForPopper.bind(this),
+        )
+      });
     }
   }, {
-    key: "getGroupProps",
-    value: function getGroupProps() {
-      var size = this.asProps.size;
-      return {
-        size: size
-      };
+    key: "getActionsProps",
+    value: function getActionsProps() {
+      return this.getListProps();
     }
   }, {
     key: "getItemProps",
     value: function getItemProps(props, index) {
-      var _this3 = this;
-      var _this$asProps5 = this.asProps,
-        size = _this$asProps5.size,
-        uid = _this$asProps5.uid;
-      var ref = function ref(node) {
-        if ((node === null || node === void 0 ? void 0 : node.getAttribute('role')) === 'menuitem') {
-          _this3.itemRefs[index] = node;
-        }
-        if (node === document.activeElement) {
-          _this3.scrollToNode(node);
-        }
-      };
-      this.itemProps[index] = props;
-      var itemProps = {
-        id: "igc-".concat(uid, "-option-").concat(index),
-        size: size,
-        ref: ref,
-        index: index,
-        onMouseEnter: function onMouseEnter() {
-          return _this3.handlers.selectedIndex(index);
+      var _this2 = this;
+      var highlightedIndex = this.asProps.highlightedIndex;
+      var isHighlighted = index === highlightedIndex;
+      var itemProps = _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getItemProps", this).call(this, props, index)), {}, {
+        tabIndex: isHighlighted ? 0 : -1,
+        ref: function ref(node) {
+          return _this2.itemRef(props, index, node);
         }
-      };
+      });
       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';
@@ -369,44 +142,50 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
       return itemProps;
     }
   }, {
-    key: "getItemHintProps",
-    value: function getItemHintProps() {
-      var size = this.asProps.size;
-      return {
-        size: size
-      };
-    }
-  }, {
-    key: "getItemTitleProps",
-    value: function getItemTitleProps() {
-      var size = this.asProps.size;
-      return {
-        size: size
-      };
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var visibilityChanged = this.asProps.visible !== prevProps.visible;
-      if (visibilityChanged && prevProps.visible !== undefined) {
-        if (!this.asProps.visible) {
-          this.handlers.highlightedIndex(null);
-          this.highlightedItemRef.current = null;
-          if ((document.activeElement === document.body || isFocusInside(this.popperRef.current)) && this.asProps.focusSourceRef.current === 'keyboard') {
-            setFocus(this.triggerRef.current);
+    key: "handleKeyDownForMenu",
+    value: function handleKeyDownForMenu(place) {
+      var _this3 = this;
+      return function (e) {
+        var _this3$asProps = _this3.asProps,
+          visible = _this3$asProps.visible,
+          placement = _this3$asProps.placement,
+          inlineActions = _this3$asProps.inlineActions;
+        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'));
+        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.getAttribute('role') === _get(_getPrototypeOf(DropdownMenuRoot.prototype), "childRole", _this3);
+        if (place === 'trigger' && (!visible || inlineActions) && show && isMenuItem) {
+          _this3.handlers.visible(true);
+          _this3.handlers.highlightedIndex(0);
+          setTimeout(function () {
+            var _this3$itemRefs$highl;
+            var highlightedIndex = _this3.asProps.highlightedIndex;
+            (_this3$itemRefs$highl = _this3.itemRefs[highlightedIndex]) === null || _this3$itemRefs$highl === void 0 ? void 0 : _this3$itemRefs$highl.focus();
+          }, 0);
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        }
+        if (place === 'list' && visible && hide && isMenuItem) {
+          if (!inlineActions || inlineActions && (e.key === 'Escape' || _this3.asProps.highlightedIndex === 0)) {
+            var _this3$triggerRef$cur;
+            _this3.handlers.visible(false);
+            (_this3$triggerRef$cur = _this3.triggerRef.current) === null || _this3$triggerRef$cur === void 0 ? void 0 : _this3$triggerRef$cur.focus();
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
           }
         }
-      }
+      };
     }
   }, {
     key: "render",
     value: function render() {
       var _ref = this.asProps;
-      var _this$asProps6 = this.asProps,
-        Children = _this$asProps6.Children,
-        selectedIndex = _this$asProps6.selectedIndex,
-        interaction = _this$asProps6.interaction,
-        timeout = _this$asProps6.timeout;
+      var _this$asProps2 = this.asProps,
+        Children = _this$asProps2.Children,
+        selectedIndex = _this$asProps2.selectedIndex,
+        interaction = _this$asProps2.interaction,
+        timeout = _this$asProps2.timeout;
       this.itemProps = [];
       return /*#__PURE__*/React.createElement(selectedIndexContext.Provider, {
         value: selectedIndex
@@ -416,10 +195,10 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
     }
   }]);
   return DropdownMenuRoot;
-}(Component);
+}(AbstractDropdown);
 _defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
 _defineProperty(DropdownMenuRoot, "style", style);
-_defineProperty(DropdownMenuRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages), focusSourceEnhance()]);
+_defineProperty(DropdownMenuRoot, "enhance", Object.values(enhance));
 _defineProperty(DropdownMenuRoot, "defaultProps", {
   size: 'm',
   defaultVisible: false,
@@ -432,28 +211,28 @@ _defineProperty(DropdownMenuRoot, "defaultProps", {
   placement: 'bottom-start',
   timeout: 0
 });
-function List(_ref23) {
+function List(_ref21) {
   var _ref2 = arguments[0],
-    _ref14;
-  var styles = _ref23.styles,
-    Children = _ref23.Children;
+    _ref13;
+  var styles = _ref21.styles,
+    Children = _ref21.Children;
   var SDropdownMenuList = ScrollAreaComponent;
-  return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref14.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref14.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
+  return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref13.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref13.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
     "shadow": true
   }, _ref2))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, {
     tabIndex: undefined
-  }, /*#__PURE__*/React.createElement(Children, _ref14.cn("Children", {}))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
+  }, /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {}))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
     orientation: "horizontal"
   }), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
     orientation: "vertical"
   })));
 }
-function Actions(_ref24) {
+function Actions(_ref22) {
   var _ref3 = arguments[0],
-    _ref15;
-  var styles = _ref24.styles;
+    _ref14;
+  var styles = _ref22.styles;
   var SDropdownMenuActions = Flex;
-  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref15.cn("SDropdownMenuActions", _objectSpread({}, _assignProps3({}, _ref3))));
+  return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref14.cn("SDropdownMenuActions", _objectSpread({}, _assignProps3({}, _ref3))));
 }
 function Menu(props) {
   var _ref4 = arguments[0];
@@ -473,17 +252,20 @@ function Menu(props) {
     autoFocus: autoFocus,
     animationsDisabled: animationsDisabled
   };
-  return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _ref4))));
+  return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, _extends({}, popperProps, {
+    role: null
+  }), /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _ref4))));
 }
-function Item(_ref25) {
+function Item(_ref23) {
   var _ref5 = arguments[0],
-    _ref16;
-  var id = _ref25.id,
-    styles = _ref25.styles,
-    disabled = _ref25.disabled,
-    Children = _ref25.Children,
-    forwardRef = _ref25.forwardRef;
-  var SDropdownMenuItemContainer = Box;
+    _ref15;
+  var id = _ref23.id,
+    styles = _ref23.styles,
+    disabled = _ref23.disabled,
+    Children = _ref23.Children,
+    forwardRef = _ref23.forwardRef,
+    role = _ref23.role;
+  var SDropdownMenuItemContainer = Dropdown.Item;
   var itemRef = React.useRef();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -491,7 +273,8 @@ function Item(_ref25) {
     setHighlighted = _React$useState2[1];
   var menuItemContextValue = {
     contentId: id,
-    ref: forkRef(forwardRef, itemRef)
+    ref: forkRef(forwardRef, itemRef),
+    role: role
   };
   var ariaDescribes = [];
   var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
@@ -536,15 +319,15 @@ function Item(_ref25) {
     };
   }, [itemRef.current]);
   var focusSourceRef = useFocusSource();
-  return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(menuItemContext.Provider, {
+  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(menuItemContext.Provider, {
     value: menuItemContextValue
-  }, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref16.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps5({
+  }, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref15.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps5({
     "ref": advancedMode ? undefined : menuItemContextValue.ref,
     "use:highlighted": !disabled && highlighted && focusSourceRef.current === 'keyboard',
-    "role": advancedMode ? undefined : 'menuitem',
+    "use:role": advancedMode ? undefined : role,
     "use:id": advancedMode ? undefined : id,
     "tabIndex": advancedMode ? undefined : -1
-  }, _ref5))), /*#__PURE__*/React.createElement(Children, _ref16.cn("Children", {}))));
+  }, _ref5))), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {}))));
 }
 function Addon(props) {
   var _useBox = useBox(props, props.forwardRef),
@@ -560,47 +343,12 @@ function Addon(props) {
 }
 function Trigger() {
   var _ref6 = arguments[0];
-  return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({
-    "aria-haspopup": 'true'
-  }, _ref6));
+  return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({}, _ref6));
 }
-function Group(_ref26) {
+function ItemContent(_ref24) {
   var _ref7 = arguments[0],
-    _ref17;
-  var styles = _ref26.styles,
-    title = _ref26.title,
-    Children = _ref26.Children,
-    subTitle = _ref26.subTitle,
-    size = _ref26.size;
-  var SGroup = Box;
-  var SDropdownMenuItemContainer = Box;
-  var SGroupTitle = Flex;
-  var SGroupHint = Flex;
-  var uidTitle = useUID('title_mi_group');
-  var uidSubTitle = useUID('sub_title_mi_group');
-  var groupAriaProps = {
-    'aria-labelledby': uidTitle,
-    'aria-describedby': subTitle ? uidSubTitle : undefined
-  };
-  return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref17.cn("SDropdownMenuItemContainer", {
-    "notInteractive": true,
-    "aria-hidden": 'true',
-    "tabindex": -1,
-    "size": size
-  }), /*#__PURE__*/React.createElement(SGroupTitle, _ref17.cn("SGroupTitle", {
-    "id": uidTitle
-  }), title), subTitle && /*#__PURE__*/React.createElement(SGroupHint, _ref17.cn("SGroupHint", {
-    "id": uidSubTitle
-  }), subTitle)), /*#__PURE__*/React.createElement(SGroup, _ref17.cn("SGroup", _objectSpread({}, _assignProps7(_objectSpread(_objectSpread({
-    "role": 'group'
-  }, groupAriaProps), {}, {
-    "__excludeProps": ['title']
-  }), _ref7))), /*#__PURE__*/React.createElement(Children, _ref17.cn("Children", {}))));
-}
-function ItemContent(_ref27) {
-  var _ref8 = arguments[0],
-    _ref18;
-  var styles = _ref27.styles;
+    _ref16;
+  var styles = _ref24.styles;
   var SItemContent = Flex;
   var ref = React.useRef();
   var menuItemCtxValue = React.useContext(menuItemContext);
@@ -622,8 +370,8 @@ function ItemContent(_ref27) {
       });
     }
   }, [menuItemCtxValue.ariaDescribes]);
-  return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContent, _ref18.cn("SItemContent", _objectSpread({}, _assignProps8({
-    "role": 'menuitem',
+  return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContent, _ref16.cn("SItemContent", _objectSpread({}, _assignProps7({
+    "role": menuItemCtxValue.role,
     "id": menuItemCtxValue.contentId,
     "tabIndex": -1,
     "ref": forkRef(menuItemCtxValue.ref, ref),
@@ -632,66 +380,66 @@ function ItemContent(_ref27) {
     "aria-expanded": subMenu,
     "alignItems": menuItemCtxValue.hasSubMenu ? 'center' : undefined,
     "justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined
-  }, _ref8))));
+  }, _ref7))));
 }
-function ItemHint(_ref28) {
-  var _ref9 = arguments[0],
-    _ref19;
-  var styles = _ref28.styles;
+function ItemHint(_ref25) {
+  var _ref8 = arguments[0],
+    _ref17;
+  var styles = _ref25.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({}, _assignProps9({
+  return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SItemHint, _ref17.cn("SItemHint", _objectSpread({}, _assignProps8({
     "id": hintId,
     "aria-hidden": 'true'
-  }, _ref9))));
+  }, _ref8))));
 }
 
 /**
  * @deprecated Use Item hint
  */
 function Hint(props) {
-  var _ref10 = arguments[0],
-    _ref20;
-  var SDropdownMenuItemContainer = Flex;
-  return _ref20 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps10({
+  var _ref9 = arguments[0],
+    _ref18;
+  var SDropdownMenuItemContainer = Dropdown.Item;
+  return _ref18 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref18.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps9({
     "variant": 'hint'
-  }, _ref10))));
+  }, _ref9))));
 }
 /**
  * @deprecated Use Group with title prop
  */
 function Title(props) {
-  var _ref11 = arguments[0],
-    _ref21;
-  var SDropdownMenuItemContainer = Flex;
-  return _ref21 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps11({
+  var _ref10 = arguments[0],
+    _ref19;
+  var SDropdownMenuItemContainer = Dropdown.Item;
+  return _ref19 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref19.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps10({
     "variant": 'title'
-  }, _ref11))));
+  }, _ref10))));
 }
 
 /**
  * @deprecated
  */
-function Nesting(_ref29) {
-  var _ref12 = arguments[0];
-  var forwardRef = _ref29.forwardRef;
-  return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps12({
+function Nesting(_ref26) {
+  var _ref11 = arguments[0];
+  var forwardRef = _ref26.forwardRef;
+  return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps11({
     "ref": forwardRef
-  }, _ref12));
+  }, _ref11));
 }
 
 /**
  * @deprecated
  */
-function NestingTrigger(_ref30) {
-  var _ref13 = arguments[0];
-  var forwardRef = _ref30.forwardRef;
-  return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content, _assignProps13({
+function NestingTrigger(_ref27) {
+  var _ref12 = arguments[0];
+  var forwardRef = _ref27.forwardRef;
+  return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content, _assignProps12({
     "tag": DropdownMenu.Trigger,
     "ref": forwardRef,
     "use:role": 'menuitem'
-  }, _ref13));
+  }, _ref12));
 }
 var DropdownMenu = createComponent(DropdownMenuRoot, {
   Trigger: Trigger,
@@ -713,7 +461,7 @@ var DropdownMenu = createComponent(DropdownMenuRoot, {
   }],
   ItemTitle: Title,
   ItemHint: Hint,
-  Group: Group
+  Group: Dropdown.Group
 }, {
   parent: [Dropdown]
 });