intergalactic 15.106.0-prerelease.0 → 15.107.0-prerelease.0

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

@@ -1,3 +1,4 @@
+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";
@@ -9,6 +10,9 @@ 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';
 import { assignProps as _assignProps9 } from 'intergalactic/core';
 import { assignProps as _assignProps8 } from 'intergalactic/core';
@@ -24,46 +28,53 @@ import React from 'react';
 import cn from 'classnames';
 import createComponent, { Component, sstyled, Root } from 'intergalactic/core';
 import Dropdown from 'intergalactic/dropdown';
-import { Flex, useBox } from 'intergalactic/flex-box';
+import { Flex, useBox, Box } from 'intergalactic/flex-box';
 import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from 'intergalactic/scroll-area';
-import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import uniqueIDEnhancement, { useUID } from 'intergalactic/utils/lib/uniqueID';
 import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-import { useFocusLock } from 'intergalactic/utils/lib/use/useFocusLock';
-import { hasParent } from 'intergalactic/utils/lib/hasParent';
 /*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_1qr7w_gg_,.___SDropdownMenuList_1qr7w_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1qr7w_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0}.___SDropdownMenuList_1qr7w_gg_ .___SShadowHorizontal_1qr7w_gg_:after,.___SDropdownMenuList_1qr7w_gg_ .___SShadowHorizontal_1qr7w_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_1qr7w_gg_ .___SShadowHorizontal_1qr7w_gg_._position_median_1qr7w_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_1qr7w_gg_ .___SShadowHorizontal_1qr7w_gg_._position_median_1qr7w_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_1qr7w_gg_ .___SShadowHorizontal_1qr7w_gg_._position_start_1qr7w_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_1qr7w_gg_ .___SShadowHorizontal_1qr7w_gg_._position_end_1qr7w_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_1qr7w_gg_ .___SShadowVertical_1qr7w_gg_:after,.___SDropdownMenuList_1qr7w_gg_ .___SShadowVertical_1qr7w_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_1qr7w_gg_ .___SShadowVertical_1qr7w_gg_._position_median_1qr7w_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_1qr7w_gg_ .___SShadowVertical_1qr7w_gg_._position_median_1qr7w_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_1qr7w_gg_ .___SShadowVertical_1qr7w_gg_._position_start_1qr7w_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_1qr7w_gg_ .___SShadowVertical_1qr7w_gg_._position_end_1qr7w_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      )}.___SDropdownMenuItem_1qr7w_gg_{display:flex;align-items:center;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}@media (hover:hover){.___SDropdownMenuItem_1qr7w_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_1qr7w_gg_:focus{outline:0}.___SDropdownMenuItem_1qr7w_gg_.__selected_1qr7w_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){.___SDropdownMenuItem_1qr7w_gg_.__selected_1qr7w_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_1qr7w_gg_.__highlighted_1qr7w_gg_:not(:focus-within){z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_1qr7w_gg_.__disabled_1qr7w_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_1qr7w_gg_._size_l_1qr7w_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}.___SDropdownMenuItem_1qr7w_gg_._size_m_1qr7w_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}.___SDropdownMenuItem_1qr7w_gg_.__notInteractive_1qr7w_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qr7w_gg_.__notInteractive_1qr7w_gg_:hover{background:0 0}}.___SDropdownMenuItem_1qr7w_gg_._variant_hint_1qr7w_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qr7w_gg_._variant_hint_1qr7w_gg_:hover{background:0 0}}.___SDropdownMenuItem_1qr7w_gg_._variant_title_1qr7w_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qr7w_gg_._variant_title_1qr7w_gg_:hover{background:0 0}}.___SDropdownMenuItem_1qr7w_gg_.__visible_1qr7w_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItem_1qr7w_gg_.__nesting-trigger_1qr7w_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1qr7w_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_1qr7w_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1qr7w_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1qr7w_gg_,.___SDropdownMenuNesting_1qr7w_gg_._size_l_1qr7w_gg_,.___SDropdownMenuNesting_1qr7w_gg_._size_m_1qr7w_gg_{padding:0}.___SDropdownMenuNesting_1qr7w_gg_.__highlighted_1qr7w_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_1qr7w_gg_._size_l_1qr7w_gg_,.___SDropdownNestingItem_1qr7w_gg_._size_m_1qr7w_gg_{padding-right:0}.___SDropdownNestingItem_1qr7w_gg_ .___SDropdownMenuItem_1qr7w_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}" /*__inner_css_end__*/, "1qr7w_gg_") /*__reshadow_css_end__*/, {
-  "__SDropdownMenuItem": "___SDropdownMenuItem_1qr7w_gg_",
-  "_highlighted": "__highlighted_1qr7w_gg_",
-  "_disabled": "__disabled_1qr7w_gg_",
-  "_size_l": "_size_l_1qr7w_gg_",
-  "_size_m": "_size_m_1qr7w_gg_",
-  "_visible": "__visible_1qr7w_gg_",
-  "_nesting-trigger": "__nesting-trigger_1qr7w_gg_",
-  "__SDropdownMenuNesting": "___SDropdownMenuNesting_1qr7w_gg_",
-  "__SDropdownNestingItem": "___SDropdownNestingItem_1qr7w_gg_",
-  "__SDropdownMenuList": "___SDropdownMenuList_1qr7w_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_1qr7w_gg_",
-  "_position_median": "_position_median_1qr7w_gg_",
-  "_position_start": "_position_start_1qr7w_gg_",
-  "_position_end": "_position_end_1qr7w_gg_",
-  "__SShadowVertical": "___SShadowVertical_1qr7w_gg_",
-  "_selected": "__selected_1qr7w_gg_",
-  "_notInteractive": "__notInteractive_1qr7w_gg_",
-  "_variant_hint": "_variant_hint_1qr7w_gg_",
-  "_variant_title": "_variant_title_1qr7w_gg_",
-  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1qr7w_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuList_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_:after,.___SDropdownMenuList_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_start_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_end_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_:after,.___SDropdownMenuList_zxmau_gg_ .___SShadowVertical_zxmau_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_start_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_end_zxmau_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_zxmau_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_zxmau_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItemContainer_zxmau_gg_:focus{outline:0}.___SDropdownMenuItemContainer_zxmau_gg_.__selected_zxmau_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_zxmau_gg_.__selected_zxmau_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItemContainer_zxmau_gg_.__highlighted_zxmau_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItemContainer_zxmau_gg_.__disabled_zxmau_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItemContainer_zxmau_gg_._size_l_zxmau_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_zxmau_gg_._size_m_zxmau_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_zxmau_gg_.__notInteractive_zxmau_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_.__notInteractive_zxmau_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_zxmau_gg_._variant_hint_zxmau_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_._variant_hint_zxmau_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_zxmau_gg_._variant_title_zxmau_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_._variant_title_zxmau_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_zxmau_gg_.__visible_zxmau_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItemContainer_zxmau_gg_.__nesting-trigger_zxmau_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_zxmau_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_zxmau_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_zxmau_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_zxmau_gg_,.___SDropdownMenuNesting_zxmau_gg_._size_l_zxmau_gg_,.___SDropdownMenuNesting_zxmau_gg_._size_m_zxmau_gg_{padding:0}.___SDropdownMenuNesting_zxmau_gg_.__highlighted_zxmau_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_zxmau_gg_._size_l_zxmau_gg_,.___SDropdownNestingItem_zxmau_gg_._size_m_zxmau_gg_{padding-right:0}.___SDropdownNestingItem_zxmau_gg_ .___SDropdownMenuItemContainer_zxmau_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SGroupTitle_zxmau_gg_{font-weight:var(--intergalactic-bold, 700)}.___SGroupHint_zxmau_gg_,.___SItemHint_zxmau_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SItemContent_zxmau_gg_:focus{outline:0}" /*__inner_css_end__*/, "zxmau_gg_") /*__reshadow_css_end__*/, {
+  "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_zxmau_gg_",
+  "_highlighted": "__highlighted_zxmau_gg_",
+  "_disabled": "__disabled_zxmau_gg_",
+  "_size_l": "_size_l_zxmau_gg_",
+  "_size_m": "_size_m_zxmau_gg_",
+  "_visible": "__visible_zxmau_gg_",
+  "_nesting-trigger": "__nesting-trigger_zxmau_gg_",
+  "__SDropdownMenuNesting": "___SDropdownMenuNesting_zxmau_gg_",
+  "__SDropdownNestingItem": "___SDropdownNestingItem_zxmau_gg_",
+  "__SGroupTitle": "___SGroupTitle_zxmau_gg_",
+  "__SGroupHint": "___SGroupHint_zxmau_gg_",
+  "__SItemHint": "___SItemHint_zxmau_gg_",
+  "__SItemContent": "___SItemContent_zxmau_gg_",
+  "__SDropdownMenuList": "___SDropdownMenuList_zxmau_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_zxmau_gg_",
+  "_position_median": "_position_median_zxmau_gg_",
+  "_position_start": "_position_start_zxmau_gg_",
+  "_position_end": "_position_end_zxmau_gg_",
+  "__SShadowVertical": "___SShadowVertical_zxmau_gg_",
+  "_selected": "__selected_zxmau_gg_",
+  "_notInteractive": "__notInteractive_zxmau_gg_",
+  "_variant_hint": "_variant_hint_zxmau_gg_",
+  "_variant_title": "_variant_title_zxmau_gg_",
+  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_zxmau_gg_"
 });
 import { setFocus } from 'intergalactic/utils/lib/focus-lock/setFocus';
 import { isFocusInside } from 'intergalactic/utils/lib/focus-lock/isFocusInside';
-import { getFocusableIn } from 'intergalactic/utils/lib/focus-lock/getFocusableIn';
-import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
-var ListBoxContextProvider = function ListBoxContextProvider(_ref18) {
-  var children = _ref18.children;
+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;
   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 _super = _createSuper(DropdownMenuRoot);
@@ -74,22 +85,20 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      focusLockItemIndex: null,
-      keyboardFocused: false
-    });
     _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), "ignoreTriggerKeyboardFocusUntil", 0);
     _defineProperty(_assertThisInitialized(_this), "prevHighlightedIndex", null);
-    _defineProperty(_assertThisInitialized(_this), "focusTrigger", function () {
-      var trigger = _this.triggerRef.current;
-      if (!trigger) return;
-      if (isFocusInside(trigger)) return;
-      setFocus(trigger);
+    _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) {
@@ -98,189 +107,100 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
         var _this$asProps = _this.asProps,
           visible = _this$asProps.visible,
           highlightedIndex = _this$asProps.highlightedIndex,
-          placement = _this$asProps.placement;
+          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 (visible && e.key === 'Tab') {
-          var item = highlightedIndex !== null && _this.itemRefs[highlightedIndex];
-          if (item && getFocusableIn(item).length !== 0) {
-            _this.setState({
-              focusLockItemIndex: highlightedIndex
-            });
-          } else {
-            _this.handlers.highlightedIndex(null);
-          }
-          return;
+        if (place === 'trigger' && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key) && e.target.getAttribute('role') !== 'menuitem') {
+          _this.handleClickTrigger(e);
         }
-        if (e.key === 'Escape' && _this.state.focusLockItemIndex !== null) {
-          _this.setState({
-            focusLockItemIndex: null
-          });
-          return false;
-        }
-        var verticalPlacement = !placement || placement.startsWith('top') || placement.startsWith('bottom');
-        if (['ArrowDown', 'ArrowUp'].includes(e.key) && verticalPlacement) {
-          e.preventDefault();
+        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 (['ArrowLeft', 'ArrowRight'].includes(e.key) && !verticalPlacement) {
-          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');
-          var visibleChanged = visible && hide || !visible && show;
-          if (show) {
-            _this.handlers.visible(true);
-          } else if (hide) {
+        if (place === 'list' && visible && hide && isMenuItem) {
+          if (!inlineActions || inlineActions && (e.key === 'Escape' || _this.asProps.highlightedIndex === 0)) {
+            var _this$triggerRef$curr;
             _this.handlers.visible(false);
-          }
-          if (visibleChanged) {
+            (_this$triggerRef$curr = _this.triggerRef.current) === null || _this$triggerRef$curr === void 0 ? void 0 : _this$triggerRef$curr.focus();
             e.preventDefault();
             e.stopPropagation();
             return;
           }
         }
-        if (e.key.startsWith('Arrow') && !_this.state.keyboardFocused) {
-          _this.setState({
-            keyboardFocused: true
-          });
-        }
-        if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
-          var _item = highlightedIndex !== null && _this.itemRefs[highlightedIndex];
-          var focusable = getFocusableIn(_item);
-          if (focusable.length > 0 && _item) {
-            var focusedIndex = focusable.indexOf(document.activeElement);
-            if (e.key === 'ArrowRight') {
-              if (focusedIndex === -1) {
-                _this.setState({
-                  focusLockItemIndex: highlightedIndex
-                });
-              }
-              var nextFocused = focusable[focusedIndex + 1];
-              if (nextFocused) {
-                e.preventDefault();
-                e.stopPropagation();
-                nextFocused.focus();
-              }
-            } else if (e.key === 'ArrowLeft') {
-              if (focusedIndex === 0) {
-                _this.setState({
-                  focusLockItemIndex: null
-                });
+        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;
               }
-              var prevFocused = focusable[focusedIndex - 1];
-              if (prevFocused) {
-                e.preventDefault();
-                e.stopPropagation();
-                prevFocused.focus();
+            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;
               }
-            }
-          }
-        }
-        switch (e.key) {
-          case 'ArrowDown':
-            {
-              if (visible) {
-                _this.moveHighlightedIndex(amount, e);
-                if (isFocusInside(_this.popperRef.current)) {
-                  _this.focusTrigger();
+            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();
                 }
-                e.preventDefault();
-                e.stopPropagation();
+                break;
               }
-              break;
-            }
-          case 'ArrowUp':
-            {
-              if (visible) {
-                _this.moveHighlightedIndex(-amount, e);
-                if (isFocusInside(_this.popperRef.current)) {
-                  _this.focusTrigger();
+            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();
                 }
-                e.preventDefault();
-                e.stopPropagation();
+                break;
               }
-              break;
-            }
-          case ' ':
-          case 'Enter':
-            if (_this.highlightedItemRef.current && highlightedIndex !== null) {
-              e.stopPropagation();
-              e.preventDefault();
-              _this.highlightedItemRef.current.click();
-            } else {
-              if (place === 'trigger') {
-                _this.handlers.visible(false);
+            case ' ':
+            case 'Enter':
+              if (_this.highlightedItemRef.current && highlightedIndex !== null) {
+                e.stopPropagation();
                 e.preventDefault();
+                _this.highlightedItemRef.current.click();
               }
-            }
-            break;
+              break;
+          }
         }
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "handleTriggerKeyboardFocus", function () {
-      if (_this.ignoreTriggerKeyboardFocusUntil > Date.now()) return false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleTriggerKeyboardFocusedStateChange", function (keyboardFocused) {
-      _this.setState({
-        keyboardFocused: keyboardFocused
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemFocusOut", function (event) {
-      if (event.relatedTarget === _this.popperRef.current) return;
-      var focused = event.relatedTarget;
-      if (hasParent(focused, _this.popperRef.current)) {
-        _this.handlers.highlightedIndex(null);
-        _this.setState({
-          focusLockItemIndex: null
-        });
-        focused.focus();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleNestingClick", function (event) {
-      var _focusable$;
-      var itemIndex = _this.itemRefs.indexOf(event.currentTarget);
-      if (itemIndex === -1) return;
-      var focusable = getFocusableIn(event.currentTarget);
-      (_focusable$ = focusable[0]) === null || _focusable$ === void 0 ? void 0 : _focusable$.focus();
-      if (focusable[0] && _this.state.focusLockItemIndex === null) {
-        _this.setState({
-          focusLockItemIndex: null
-        });
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleNestingKeyDown", function (event) {
-      if (event.key === ' ') {
-        _this.handleNestingClick(event);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "getNestingProps", function () {
-      var size = _this.asProps.size;
-      return {
-        size: size,
-        onClick: _this.handleNestingClick,
-        onKeyDown: _this.handleNestingKeyDown
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleNestedVisibleChange", function (lastUserInteraction) {
-      if (_this.asProps.visible && _this.asProps.highlightedIndex === null && lastUserInteraction === 'keyboard') {
-        _this.handlers.highlightedIndex(0);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "getNestingTriggerProps", function () {
-      var _this$asProps2 = _this.asProps,
-        size = _this$asProps2.size,
-        visible = _this$asProps2.visible;
-      return {
-        size: size,
-        visible: visible,
-        onNestedVisibleChange: _this.handleNestedVisibleChange
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "getNestingItemProps", function () {
-      return _this.getNestingTriggerProps();
-    });
     _defineProperty(_assertThisInitialized(_this), "scrollToNode", function (node) {
       if (node) {
         _this.highlightedItemRef.current = node;
@@ -297,64 +217,107 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
         }
       }, 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;
+      }
+    });
     return _this;
   }
   _createClass(DropdownMenuRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
+      var _this2 = this;
       return {
-        highlightedIndex: null,
+        selectedIndex: null,
+        highlightedIndex: [null, function (index) {
+          _this2.handlers.selectedIndex(index);
+        }],
         visible: null
       };
     }
   }, {
     key: "getTriggerProps",
     value: function getTriggerProps() {
-      var _this$asProps3 = this.asProps,
-        size = _this$asProps3.size,
-        uid = _this$asProps3.uid,
-        disablePortal = _this$asProps3.disablePortal,
-        visible = _this$asProps3.visible,
-        getI18nText = _this$asProps3.getI18nText,
-        highlightedIndex = _this$asProps3.highlightedIndex;
+      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': "igc-".concat(uid, "-popper"),
+        'aria-controls': visible ? "igc-".concat(uid, "-list") : undefined,
         focusHint: visible && !disablePortal ? getI18nText('triggerHint') : undefined,
         'aria-expanded': visible ? 'true' : 'false',
-        'aria-activedescendant': visible && highlightedIndex !== null ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : undefined,
         onKeyDown: this.bindHandlerKeyDown('trigger'),
-        ref: this.triggerRef,
-        onKeyboardFocus: this.handleTriggerKeyboardFocus,
-        onKeyboardFocusedStateChange: this.handleTriggerKeyboardFocusedStateChange
+        onClick: this.handleClickTrigger,
+        ref: this.triggerRef
       };
     }
   }, {
     key: "getListProps",
     value: function getListProps() {
-      var _this$asProps4 = this.asProps,
-        size = _this$asProps4.size,
-        uid = _this$asProps4.uid;
+      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,
-        uid: uid,
-        index: this.asProps.highlightedIndex
+        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();
+    }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
-      var _this$asProps5 = this.asProps,
-        uid = _this$asProps5.uid,
-        disablePortal = _this$asProps5.disablePortal,
-        ignorePortalsStacking = _this$asProps5.ignorePortalsStacking,
-        interaction = _this$asProps5.interaction,
-        highlightedIndex = _this$asProps5.highlightedIndex;
+      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: 0,
-        onKeyDown: this.bindHandlerKeyDown('popper'),
+        tabIndex: -1,
         id: "igc-".concat(uid, "-popper"),
         disablePortal: disablePortal,
         ignorePortalsStacking: ignorePortalsStacking,
@@ -364,36 +327,46 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
         'use:autoFocus': false
       };
     }
+  }, {
+    key: "getGroupProps",
+    value: function getGroupProps() {
+      var size = this.asProps.size;
+      return {
+        size: size
+      };
+    }
   }, {
     key: "getItemProps",
     value: function getItemProps(props, index) {
-      var _this2 = this;
-      var _this$asProps6 = this.asProps,
-        size = _this$asProps6.size,
-        highlightedIndex = _this$asProps6.highlightedIndex,
-        uid = _this$asProps6.uid;
-      var highlighted = index === highlightedIndex;
+      var _this3 = this;
+      var _this$asProps5 = this.asProps,
+        size = _this$asProps5.size,
+        uid = _this$asProps5.uid;
       var ref = function ref(node) {
-        _this2.itemRefs[index] = 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;
-      if (highlighted) {
-        ref = function ref(node) {
-          _this2.itemRefs[index] = node;
-          _this2.scrollToNode(node);
-        };
-      }
-      return {
+      var itemProps = {
         id: "igc-".concat(uid, "-option-").concat(index),
         size: size,
-        highlighted: highlighted,
-        focusLock: this.state.focusLockItemIndex === index,
-        triggerRef: this.triggerRef,
         ref: ref,
         index: index,
-        handleFocusOut: this.handleItemFocusOut,
-        triggerKeyboardFocused: this.state.keyboardFocused
+        onMouseEnter: function onMouseEnter() {
+          return _this3.handlers.selectedIndex(index);
+        }
       };
+      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';
+      }
+      return itemProps;
     }
   }, {
     key: "getItemHintProps",
@@ -411,107 +384,79 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
         size: size
       };
     }
-  }, {
-    key: "moveHighlightedIndex",
-    value: function moveHighlightedIndex(amount, e) {
-      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.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);
-      } else if (!this.itemProps[newIndex]) {
-        this.handlers.highlightedIndex(0, e);
-      } else {
-        this.handlers.highlightedIndex(newIndex, e);
-      }
-    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this3 = this;
       var visibilityChanged = this.asProps.visible !== prevProps.visible;
       if (visibilityChanged && prevProps.visible !== undefined) {
         if (!this.asProps.visible) {
           this.handlers.highlightedIndex(null);
           this.highlightedItemRef.current = null;
-          this.ignoreTriggerKeyboardFocusUntil = Date.now() + 100;
-          if (document.activeElement === document.body || isFocusInside(this.popperRef.current)) {
+          if ((document.activeElement === document.body || isFocusInside(this.popperRef.current)) && this.asProps.focusSourceRef.current === 'keyboard') {
             setFocus(this.triggerRef.current);
           }
         }
       }
-      if (visibilityChanged && this.asProps.visible) {
-        setTimeout(function () {
-          var selectedItemIndex = _this3.itemProps.findIndex(function (item) {
-            return item.selected;
-          });
-          if (selectedItemIndex === -1 || _this3.asProps.highlightedIndex !== null) return;
-          _this3.handlers.highlightedIndex(selectedItemIndex);
-        }, 0);
-      }
-      if ((this.state.focusLockItemIndex !== this.asProps.highlightedIndex || !this.asProps.visible) && this.state.focusLockItemIndex !== null) {
-        setTimeout(function () {
-          _this3.setState({
-            focusLockItemIndex: null
-          });
-        }, 0);
-      }
     }
   }, {
     key: "render",
     value: function render() {
       var _ref = this.asProps;
-      var Children = this.asProps.Children;
+      var _this$asProps6 = this.asProps,
+        Children = _this$asProps6.Children,
+        selectedIndex = _this$asProps6.selectedIndex,
+        interaction = _this$asProps6.interaction,
+        timeout = _this$asProps6.timeout;
       this.itemProps = [];
-      return /*#__PURE__*/React.createElement(Dropdown, _assignProps({}, _ref), /*#__PURE__*/React.createElement(Children, null));
+      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)));
     }
   }]);
   return DropdownMenuRoot;
 }(Component);
 _defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
 _defineProperty(DropdownMenuRoot, "style", style);
-_defineProperty(DropdownMenuRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
+_defineProperty(DropdownMenuRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages), focusSourceEnhance()]);
 _defineProperty(DropdownMenuRoot, "defaultProps", {
   size: 'm',
   defaultVisible: false,
-  defaultHighlightedIndex: null,
+  defaultHighlightedIndex: 0,
+  defaultSelectedIndex: 0,
   i18n: localizedMessages,
   locale: 'en',
-  interaction: 'click'
+  interaction: 'click',
+  inlineActions: false,
+  placement: 'bottom-start',
+  timeout: 0
 });
-function List(props) {
+function List(_ref23) {
   var _ref2 = arguments[0],
-    _ref11;
+    _ref14;
+  var styles = _ref23.styles,
+    Children = _ref23.Children;
   var SDropdownMenuList = ScrollAreaComponent;
-  var uid = props.uid;
-  return _ref11 = sstyled(props.styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref11.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref11.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
-    "tabIndex": null,
-    "role": 'menu',
-    "aria-labelledby": "igc-".concat(uid, "-trigger"),
+  return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref14.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref14.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
     "shadow": true
-  }, _ref2)))));
+  }, _ref2))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, {
+    tabIndex: undefined
+  }, /*#__PURE__*/React.createElement(Children, _ref14.cn("Children", {}))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
+    orientation: "horizontal"
+  }), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
+    orientation: "vertical"
+  })));
+}
+function Actions(_ref24) {
+  var _ref3 = arguments[0],
+    _ref15;
+  var styles = _ref24.styles;
+  var SDropdownMenuActions = Flex;
+  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref15.cn("SDropdownMenuActions", _objectSpread({}, _assignProps3({}, _ref3))));
 }
 function Menu(props) {
-  var _ref3 = arguments[0];
+  var _ref4 = arguments[0];
   var visible = props.visible,
     disablePortal = props.disablePortal,
     ignorePortalsStacking = props.ignorePortalsStacking,
@@ -528,98 +473,78 @@ function Menu(props) {
     autoFocus: autoFocus,
     animationsDisabled: animationsDisabled
   };
-  return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps3({}, _ref3))));
+  return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _ref4))));
 }
-function Item(_ref19) {
-  var _ref4 = arguments[0],
-    _ref12;
-  var styles = _ref19.styles,
-    label = _ref19.label,
-    triggerRef = _ref19.triggerRef,
-    focusLock = _ref19.focusLock,
-    disabled = _ref19.disabled,
-    highlighted = _ref19.highlighted,
-    handleFocusOut = _ref19.handleFocusOut,
-    triggerKeyboardFocused = _ref19.triggerKeyboardFocused;
-  var SDropdownMenuItem = Flex;
-  var ref = React.useRef();
-  useFocusLock(ref, false, triggerRef, !focusLock || disabled, true, handleFocusOut);
-  return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref12.cn("SDropdownMenuItem", _objectSpread({}, _assignProps4({
-    "ref": ref,
-    "role": 'menuitem',
-    "tabIndex": -1,
-    "id": label,
-    "use:highlighted": !disabled && highlighted && triggerKeyboardFocused
-  }, _ref4))));
-}
-var NestingContext = /*#__PURE__*/React.createContext(null);
-function Nesting(_ref20) {
+function Item(_ref25) {
   var _ref5 = arguments[0],
-    _ref13;
-  var styles = _ref20.styles,
-    disabled = _ref20.disabled;
-  var SDropdownMenuNesting = DropdownMenu.Item;
-  var contextValue = React.useMemo(function () {
-    return {
-      disabled: disabled
-    };
-  }, [disabled]);
-  return /*#__PURE__*/React.createElement(NestingContext.Provider, {
-    value: contextValue
-  }, (_ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuNesting, _ref13.cn("SDropdownMenuNesting", _objectSpread({}, _assignProps5({
-    "aria-haspopup": 'true'
-  }, _ref5))))));
-}
-function NestingTrigger(props) {
-  var _ref6 = arguments[0],
-    _ref14;
-  var styles = props.styles,
-    visible = props.visible,
-    onNestedVisibleChange = props.onNestedVisibleChange;
-  var SDropdownMenuItem = Flex;
-  var nestingContext = React.useContext(NestingContext);
-  var disabled = props.disabled || (nestingContext === null || nestingContext === void 0 ? void 0 : nestingContext.disabled);
-  var lastUserInteractionRef = React.useRef(undefined);
-  React.useEffect(function () {
-    onNestedVisibleChange(lastUserInteractionRef.current);
-  }, [visible]);
-  var handleMouseEvent = React.useCallback(function () {
-    lastUserInteractionRef.current = 'mouse';
-  }, []);
-  var handleKeyboardEvent = React.useCallback(function () {
-    lastUserInteractionRef.current = 'keyboard';
-  }, []);
+    _ref16;
+  var id = _ref25.id,
+    styles = _ref25.styles,
+    disabled = _ref25.disabled,
+    Children = _ref25.Children,
+    forwardRef = _ref25.forwardRef;
+  var SDropdownMenuItemContainer = Box;
+  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 = {
+    contentId: id,
+    ref: forkRef(forwardRef, itemRef)
+  };
+  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;
+  if (hasHint) {
+    var hintId = "igc-".concat(useUID(), "-option-hint");
+    menuItemContextValue.hintId = hintId;
+    ariaDescribes.push(hintId);
+  }
+  if (hasSubMenu) {
+    menuItemContextValue.hasSubMenu = true;
+  }
+  menuItemContextValue.ariaDescribes = ariaDescribes;
   React.useEffect(function () {
-    document.addEventListener('mouseover', handleMouseEvent, {
+    var onFocus = function onFocus(e) {
+      if (e.target === itemRef.current) {
+        setHighlighted(true);
+        if (hasSubMenu) {
+          e.stopPropagation();
+        }
+      }
+    };
+    var onBlur = function onBlur(e) {
+      if (e.target === itemRef.current) {
+        setHighlighted(false);
+      }
+    };
+    document.addEventListener('focus', onFocus, {
       capture: true
     });
-    document.addEventListener('keydown', handleKeyboardEvent, {
+    document.addEventListener('blur', onBlur, {
       capture: true
     });
     return function () {
-      document.removeEventListener('mouseover', handleMouseEvent, {
+      document.removeEventListener('focus', onFocus, {
         capture: true
       });
-      document.removeEventListener('keydown', handleKeyboardEvent, {
+      document.removeEventListener('blur', onBlur, {
         capture: true
       });
     };
-  }, []);
-  return /*#__PURE__*/React.createElement(NestingContext.Provider, {
-    value: null
-  }, (_ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref14.cn("SDropdownMenuItem", _objectSpread({}, _assignProps6({
-    "nesting-trigger": true,
-    "use:tabIndex": !disabled ? 0 : undefined
-  }, _ref6))))));
-}
-function NestingItem(props) {
-  var _ref7 = arguments[0],
-    _ref15;
-  var styles = props.styles;
-  var SDropdownNestingItem = NestingTrigger;
-  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownNestingItem, _ref15.cn("SDropdownNestingItem", _objectSpread({}, _assignProps7({
-    "use:tabIndex": -1
-  }, _ref7))));
+  }, [itemRef.current]);
+  var focusSourceRef = useFocusSource();
+  return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(menuItemContext.Provider, {
+    value: menuItemContextValue
+  }, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref16.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps5({
+    "ref": advancedMode ? undefined : menuItemContextValue.ref,
+    "use:highlighted": !disabled && highlighted && focusSourceRef.current === 'keyboard',
+    "role": advancedMode ? undefined : 'menuitem',
+    "use:id": advancedMode ? undefined : id,
+    "tabIndex": advancedMode ? undefined : -1
+  }, _ref5))), /*#__PURE__*/React.createElement(Children, _ref16.cn("Children", {}))));
 }
 function Addon(props) {
   var _useBox = useBox(props, props.forwardRef),
@@ -633,51 +558,165 @@ function Addon(props) {
     className: cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined
   }, other));
 }
-function Hint(props) {
+function Trigger() {
+  var _ref6 = arguments[0];
+  return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({
+    "aria-haspopup": 'true'
+  }, _ref6));
+}
+function Group(_ref26) {
+  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],
-    _ref16;
-  var SDropdownMenuItem = Flex;
-  return _ref16 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref16.cn("SDropdownMenuItem", _objectSpread({}, _assignProps8({
-    "variant": 'hint'
+    _ref18;
+  var styles = _ref27.styles;
+  var SItemContent = Flex;
+  var ref = React.useRef();
+  var menuItemCtxValue = React.useContext(menuItemContext);
+  var 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;
+    if (parent.getAttribute('aria-haspopup') === 'true' && parent.getAttribute('aria-describedby')) {
+      setDescribedby(function (prev) {
+        prev.add(parent.getAttribute('aria-describedby'));
+        return new Set(prev);
+      });
+    }
+  }, [menuItemCtxValue.ariaDescribes]);
+  return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContent, _ref18.cn("SItemContent", _objectSpread({}, _assignProps8({
+    "role": 'menuitem',
+    "id": menuItemCtxValue.contentId,
+    "tabIndex": -1,
+    "ref": forkRef(menuItemCtxValue.ref, ref),
+    "use:aria-describedby": _toConsumableArray(describedby).join(' '),
+    "aria-haspopup": menuItemCtxValue.hasSubMenu ? 'true' : undefined,
+    "aria-expanded": subMenu,
+    "alignItems": menuItemCtxValue.hasSubMenu ? 'center' : undefined,
+    "justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined
   }, _ref8))));
 }
-function Title(props) {
+function ItemHint(_ref28) {
   var _ref9 = arguments[0],
-    _ref17;
-  var SDropdownMenuItem = Flex;
-  return _ref17 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref17.cn("SDropdownMenuItem", _objectSpread({}, _assignProps9({
-    "variant": 'title'
+    _ref19;
+  var styles = _ref28.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({
+    "id": hintId,
+    "aria-hidden": 'true'
   }, _ref9))));
 }
-function Trigger(_ref21) {
-  var _ref10 = arguments[0];
-  var keyboardFocused = _ref21.keyboardFocused,
-    onKeyboardFocusedStateChange = _ref21.onKeyboardFocusedStateChange;
-  React.useEffect(function () {
-    onKeyboardFocusedStateChange(keyboardFocused);
-  }, [keyboardFocused, onKeyboardFocusedStateChange]);
-  return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps10({
-    "aria-haspopup": 'true'
-  }, _ref10));
+
+/**
+ * @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({
+    "variant": 'hint'
+  }, _ref10))));
+}
+/**
+ * @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({
+    "variant": 'title'
+  }, _ref11))));
+}
+
+/**
+ * @deprecated
+ */
+function Nesting(_ref29) {
+  var _ref12 = arguments[0];
+  var forwardRef = _ref29.forwardRef;
+  return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps12({
+    "ref": forwardRef
+  }, _ref12));
+}
+
+/**
+ * @deprecated
+ */
+function NestingTrigger(_ref30) {
+  var _ref13 = arguments[0];
+  var forwardRef = _ref30.forwardRef;
+  return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content, _assignProps13({
+    "tag": DropdownMenu.Trigger,
+    "ref": forwardRef,
+    "use:role": 'menuitem'
+  }, _ref13));
 }
-Trigger.enhance = [keyboardFocusEnhance(false)];
 var DropdownMenu = createComponent(DropdownMenuRoot, {
   Trigger: Trigger,
   Popper: Dropdown.Popper,
   List: List,
+  Actions: Actions,
   Menu: Menu,
   Item: [Item, {
-    Addon: Addon
+    Addon: Addon,
+    Content: ItemContent,
+    Hint: ItemHint
   }],
+  /**
+   * @deprecated. Use just Item. See examples on
+   */
   Nesting: [Nesting, {
     Trigger: NestingTrigger,
-    Addon: Addon,
-    Item: NestingItem
+    Addon: Addon
   }],
   ItemTitle: Title,
-  ItemHint: Hint
+  ItemHint: Hint,
+  Group: Group
 }, {
   parent: [Dropdown]
 });
+DropdownMenu.selectedIndexContext = selectedIndexContext;
 export default DropdownMenu;
 //# sourceMappingURL=DropdownMenu.js.map