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

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -23,45 +24,52 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dropdown = _interopRequireDefault(require("intergalactic/dropdown"));
 var _flexBox = require("intergalactic/flex-box");
 var _scrollArea = _interopRequireWildcard(require("intergalactic/scroll-area"));
-var _uniqueID = _interopRequireDefault(require("intergalactic/utils/lib/uniqueID"));
+var _uniqueID = _interopRequireWildcard(require("intergalactic/utils/lib/uniqueID"));
 var _i18nEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/i18nEnhance"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
-var _useFocusLock = require("intergalactic/utils/lib/use/useFocusLock");
-var _hasParent = require("intergalactic/utils/lib/hasParent");
 var _setFocus = require("intergalactic/utils/lib/focus-lock/setFocus");
 var _isFocusInside = require("intergalactic/utils/lib/focus-lock/isFocusInside");
-var _getFocusableIn = require("intergalactic/utils/lib/focus-lock/getFocusableIn");
-var _keyboardFocusEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/keyboardFocusEnhance"));
+var _keyboardFocusEnhance = require("intergalactic/utils/lib/enhances/keyboardFocusEnhance");
+var _findComponent = require("intergalactic/utils/lib/findComponent");
+var _button = _interopRequireDefault(require("intergalactic/button"));
+var _ref31 = require("intergalactic/utils/lib/ref");
+var _focusSourceEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/focusSourceEnhance"));
 var _excluded = ["className"];
 /*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.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__*/_index.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_"
 });
-var ListBoxContextProvider = function ListBoxContextProvider(_ref18) {
-  var children = _ref18.children;
+var ListBoxContextProvider = function ListBoxContextProvider(_ref22) {
+  var children = _ref22.children;
   return /*#__PURE__*/_react["default"].createElement(_scrollArea.hideScrollBarsFromScreenReadersContext.Provider, {
     value: true
   }, children);
 };
+var selectedIndexContext = /*#__PURE__*/_react["default"].createContext(0);
+var menuItemContext = /*#__PURE__*/_react["default"].createContext({});
 var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(DropdownMenuRoot, _Component);
   var _super = (0, _createSuper2["default"])(DropdownMenuRoot);
@@ -72,22 +80,20 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      focusLockItemIndex: null,
-      keyboardFocused: false
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popperRef", /*#__PURE__*/_react["default"].createRef());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "triggerRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "menuRef", /*#__PURE__*/_react["default"].createRef());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemProps", []);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemRefs", []);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlightedItemRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ignoreTriggerKeyboardFocusUntil", 0);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "prevHighlightedIndex", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusTrigger", function () {
-      var trigger = _this.triggerRef.current;
-      if (!trigger) return;
-      if ((0, _isFocusInside.isFocusInside)(trigger)) return;
-      (0, _setFocus.setFocus)(trigger);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerKeyDown", function (place) {
       return function (e) {
@@ -96,189 +102,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 && (0, _getFocusableIn.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 = (0, _getFocusableIn.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 ((0, _isFocusInside.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 ((0, _isFocusInside.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;
+          }
         }
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTriggerKeyboardFocus", function () {
-      if (_this.ignoreTriggerKeyboardFocusUntil > Date.now()) return false;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTriggerKeyboardFocusedStateChange", function (keyboardFocused) {
-      _this.setState({
-        keyboardFocused: keyboardFocused
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleItemFocusOut", function (event) {
-      if (event.relatedTarget === _this.popperRef.current) return;
-      var focused = event.relatedTarget;
-      if ((0, _hasParent.hasParent)(focused, _this.popperRef.current)) {
-        _this.handlers.highlightedIndex(null);
-        _this.setState({
-          focusLockItemIndex: null
-        });
-        focused.focus();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleNestingClick", function (event) {
-      var _focusable$;
-      var itemIndex = _this.itemRefs.indexOf(event.currentTarget);
-      if (itemIndex === -1) return;
-      var focusable = (0, _getFocusableIn.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();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleNestingKeyDown", function (event) {
-      if (event.key === ' ') {
-        _this.handleNestingClick(event);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNestingProps", function () {
-      var size = _this.asProps.size;
-      return {
-        size: size,
-        onClick: _this.handleNestingClick,
-        onKeyDown: _this.handleNestingKeyDown
-      };
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleNestedVisibleChange", function (lastUserInteraction) {
-      if (_this.asProps.visible && _this.asProps.highlightedIndex === null && lastUserInteraction === 'keyboard') {
-        _this.handlers.highlightedIndex(0);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNestingTriggerProps", function () {
-      var _this$asProps2 = _this.asProps,
-        size = _this$asProps2.size,
-        visible = _this$asProps2.visible;
-      return {
-        size: size,
-        visible: visible,
-        onNestedVisibleChange: _this.handleNestedVisibleChange
-      };
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNestingItemProps", function () {
-      return _this.getNestingTriggerProps();
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollToNode", function (node) {
       if (node) {
         _this.highlightedItemRef.current = node;
@@ -295,64 +212,107 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
         }
       }, 0);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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;
   }
   (0, _createClass2["default"])(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,
@@ -362,36 +322,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 === _button["default"]) {
+        var _props$use, _props$theme, _props$size;
+        itemProps.use = (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : 'tertiary';
+        itemProps.theme = (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : 'muted';
+        itemProps.size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 's';
+      }
+      return itemProps;
     }
   }, {
     key: "getItemHintProps",
@@ -409,107 +379,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 || (0, _isFocusInside.isFocusInside)(this.popperRef.current)) {
+          if ((document.activeElement === document.body || (0, _isFocusInside.isFocusInside)(this.popperRef.current)) && this.asProps.focusSourceRef.current === 'keyboard') {
             (0, _setFocus.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["default"].createElement(_dropdown["default"], (0, _core.assignProps)({}, _ref), /*#__PURE__*/_react["default"].createElement(Children, null));
+      return /*#__PURE__*/_react["default"].createElement(selectedIndexContext.Provider, {
+        value: selectedIndex
+      }, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)({
+        "timeout": timeout || (interaction === 'hover' ? [0, 100] : undefined)
+      }, _ref), /*#__PURE__*/_react["default"].createElement(Children, null)));
     }
   }]);
   return DropdownMenuRoot;
 }(_core.Component);
 (0, _defineProperty2["default"])(DropdownMenuRoot, "displayName", 'DropdownMenu');
 (0, _defineProperty2["default"])(DropdownMenuRoot, "style", style);
-(0, _defineProperty2["default"])(DropdownMenuRoot, "enhance", [(0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
+(0, _defineProperty2["default"])(DropdownMenuRoot, "enhance", [(0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _focusSourceEnhance["default"])()]);
 (0, _defineProperty2["default"])(DropdownMenuRoot, "defaultProps", {
   size: 'm',
   defaultVisible: false,
-  defaultHighlightedIndex: null,
+  defaultHighlightedIndex: 0,
+  defaultSelectedIndex: 0,
   i18n: _intergalacticDynamicLocales.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 = _scrollArea["default"];
-  var uid = props.uid;
-  return _ref11 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(ListBoxContextProvider, _ref11.cn("ListBoxContextProvider", {}), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref11.cn("SDropdownMenuList", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tabIndex": null,
-    "role": 'menu',
-    "aria-labelledby": "igc-".concat(uid, "-trigger"),
+  return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(ListBoxContextProvider, _ref14.cn("ListBoxContextProvider", {}), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref14.cn("SDropdownMenuList", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "shadow": true
-  }, _ref2)))));
+  }, _ref2))), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Container, {
+    tabIndex: undefined
+  }, /*#__PURE__*/_react["default"].createElement(Children, _ref14.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Bar, {
+    orientation: "horizontal"
+  }), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Bar, {
+    orientation: "vertical"
+  })));
+}
+function Actions(_ref24) {
+  var _ref3 = arguments[0],
+    _ref15;
+  var styles = _ref24.styles;
+  var SDropdownMenuActions = _flexBox.Flex;
+  return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuActions, _ref15.cn("SDropdownMenuActions", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
 }
 function Menu(props) {
-  var _ref3 = arguments[0];
+  var _ref4 = arguments[0];
   var visible = props.visible,
     disablePortal = props.disablePortal,
     ignorePortalsStacking = props.ignorePortalsStacking,
@@ -526,98 +468,78 @@ function Menu(props) {
     autoFocus: autoFocus,
     animationsDisabled: animationsDisabled
   };
-  return /*#__PURE__*/_react["default"].createElement(ListBoxContextProvider, null, /*#__PURE__*/_react["default"].createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/_react["default"].createElement(DropdownMenu.List, (0, _core.assignProps)({}, _ref3))));
+  return /*#__PURE__*/_react["default"].createElement(ListBoxContextProvider, null, /*#__PURE__*/_react["default"].createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/_react["default"].createElement(DropdownMenu.List, (0, _core.assignProps)({}, _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 = _flexBox.Flex;
-  var ref = _react["default"].useRef();
-  (0, _useFocusLock.useFocusLock)(ref, false, triggerRef, !focusLock || disabled, true, handleFocusOut);
-  return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref12.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "ref": ref,
-    "role": 'menuitem',
-    "tabIndex": -1,
-    "id": label,
-    "use:highlighted": !disabled && highlighted && triggerKeyboardFocused
-  }, _ref4))));
-}
-var NestingContext = /*#__PURE__*/_react["default"].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["default"].useMemo(function () {
-    return {
-      disabled: disabled
-    };
-  }, [disabled]);
-  return /*#__PURE__*/_react["default"].createElement(NestingContext.Provider, {
-    value: contextValue
-  }, (_ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuNesting, _ref13.cn("SDropdownMenuNesting", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "aria-haspopup": 'true'
-  }, _ref5))))));
-}
-function NestingTrigger(props) {
-  var _ref6 = arguments[0],
-    _ref14;
-  var styles = props.styles,
-    visible = props.visible,
-    onNestedVisibleChange = props.onNestedVisibleChange;
-  var SDropdownMenuItem = _flexBox.Flex;
-  var nestingContext = _react["default"].useContext(NestingContext);
-  var disabled = props.disabled || (nestingContext === null || nestingContext === void 0 ? void 0 : nestingContext.disabled);
-  var lastUserInteractionRef = _react["default"].useRef(undefined);
-  _react["default"].useEffect(function () {
-    onNestedVisibleChange(lastUserInteractionRef.current);
-  }, [visible]);
-  var handleMouseEvent = _react["default"].useCallback(function () {
-    lastUserInteractionRef.current = 'mouse';
-  }, []);
-  var handleKeyboardEvent = _react["default"].useCallback(function () {
-    lastUserInteractionRef.current = 'keyboard';
-  }, []);
+    _ref16;
+  var id = _ref25.id,
+    styles = _ref25.styles,
+    disabled = _ref25.disabled,
+    Children = _ref25.Children,
+    forwardRef = _ref25.forwardRef;
+  var SDropdownMenuItemContainer = _flexBox.Box;
+  var itemRef = _react["default"].useRef();
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    highlighted = _React$useState2[0],
+    setHighlighted = _React$useState2[1];
+  var menuItemContextValue = {
+    contentId: id,
+    ref: (0, _ref31.forkRef)(forwardRef, itemRef)
+  };
+  var ariaDescribes = [];
+  var hasSubMenu = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.displayName], true);
+  var hasHint = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Item.Hint.displayName], true);
+  var advancedMode = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
+  if (hasHint) {
+    var hintId = "igc-".concat((0, _uniqueID.useUID)(), "-option-hint");
+    menuItemContextValue.hintId = hintId;
+    ariaDescribes.push(hintId);
+  }
+  if (hasSubMenu) {
+    menuItemContextValue.hasSubMenu = true;
+  }
+  menuItemContextValue.ariaDescribes = ariaDescribes;
   _react["default"].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["default"].createElement(NestingContext.Provider, {
-    value: null
-  }, (_ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref14.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownNestingItem, _ref15.cn("SDropdownNestingItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "use:tabIndex": -1
-  }, _ref7))));
+  }, [itemRef.current]);
+  var focusSourceRef = (0, _keyboardFocusEnhance.useFocusSource)();
+  return _ref16 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(menuItemContext.Provider, {
+    value: menuItemContextValue
+  }, /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref16.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "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["default"].createElement(Children, _ref16.cn("Children", {}))));
 }
 function Addon(props) {
   var _useBox = (0, _flexBox.useBox)(props, props.forwardRef),
@@ -631,52 +553,166 @@ function Addon(props) {
     className: (0, _classnames["default"])(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined
   }, other));
 }
-function Hint(props) {
+function Trigger() {
+  var _ref6 = arguments[0];
+  return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({
+    "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 = _flexBox.Box;
+  var SDropdownMenuItemContainer = _flexBox.Box;
+  var SGroupTitle = _flexBox.Flex;
+  var SGroupHint = _flexBox.Flex;
+  var uidTitle = (0, _uniqueID.useUID)('title_mi_group');
+  var uidSubTitle = (0, _uniqueID.useUID)('sub_title_mi_group');
+  var groupAriaProps = {
+    'aria-labelledby': uidTitle,
+    'aria-describedby': subTitle ? uidSubTitle : undefined
+  };
+  return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref17.cn("SDropdownMenuItemContainer", {
+    "notInteractive": true,
+    "aria-hidden": 'true',
+    "tabindex": -1,
+    "size": size
+  }), /*#__PURE__*/_react["default"].createElement(SGroupTitle, _ref17.cn("SGroupTitle", {
+    "id": uidTitle
+  }), title), subTitle && /*#__PURE__*/_react["default"].createElement(SGroupHint, _ref17.cn("SGroupHint", {
+    "id": uidSubTitle
+  }), subTitle)), /*#__PURE__*/_react["default"].createElement(SGroup, _ref17.cn("SGroup", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    "role": 'group'
+  }, groupAriaProps), {}, {
+    "__excludeProps": ['title']
+  }), _ref7))), /*#__PURE__*/_react["default"].createElement(Children, _ref17.cn("Children", {}))));
+}
+function ItemContent(_ref27) {
   var _ref8 = arguments[0],
-    _ref16;
-  var SDropdownMenuItem = _flexBox.Flex;
-  return _ref16 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref16.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "variant": 'hint'
+    _ref18;
+  var styles = _ref27.styles;
+  var SItemContent = _flexBox.Flex;
+  var ref = _react["default"].useRef();
+  var menuItemCtxValue = _react["default"].useContext(menuItemContext);
+  var subMenu = undefined;
+  if (menuItemCtxValue.hasSubMenu) {
+    subMenu = 'true';
+  }
+  var _React$useState3 = _react["default"].useState(new Set(menuItemCtxValue.ariaDescribes)),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    describedby = _React$useState4[0],
+    setDescribedby = _React$useState4[1];
+  _react["default"].useEffect(function () {
+    var element = ref.current;
+    var parent = element === null || element === void 0 ? void 0 : element.parentElement;
+    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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemContent, _ref18.cn("SItemContent", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "role": 'menuitem',
+    "id": menuItemCtxValue.contentId,
+    "tabIndex": -1,
+    "ref": (0, _ref31.forkRef)(menuItemCtxValue.ref, ref),
+    "use:aria-describedby": (0, _toConsumableArray2["default"])(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 = _flexBox.Flex;
-  return _ref17 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref17.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "variant": 'title'
+    _ref19;
+  var styles = _ref28.styles;
+  var SItemHint = _flexBox.Flex;
+  var _React$useContext = _react["default"].useContext(menuItemContext),
+    hintId = _React$useContext.hintId;
+  return _ref19 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemHint, _ref19.cn("SItemHint", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "id": hintId,
+    "aria-hidden": 'true'
   }, _ref9))));
 }
-function Trigger(_ref21) {
-  var _ref10 = arguments[0];
-  var keyboardFocused = _ref21.keyboardFocused,
-    onKeyboardFocusedStateChange = _ref21.onKeyboardFocusedStateChange;
-  _react["default"].useEffect(function () {
-    onKeyboardFocusedStateChange(keyboardFocused);
-  }, [keyboardFocused, onKeyboardFocusedStateChange]);
-  return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({
-    "aria-haspopup": 'true'
-  }, _ref10));
+
+/**
+ * @deprecated Use Item hint
+ */
+function Hint(props) {
+  var _ref10 = arguments[0],
+    _ref20;
+  var SDropdownMenuItemContainer = _flexBox.Flex;
+  return _ref20 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "variant": 'hint'
+  }, _ref10))));
+}
+/**
+ * @deprecated Use Group with title prop
+ */
+function Title(props) {
+  var _ref11 = arguments[0],
+    _ref21;
+  var SDropdownMenuItemContainer = _flexBox.Flex;
+  return _ref21 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "variant": 'title'
+  }, _ref11))));
+}
+
+/**
+ * @deprecated
+ */
+function Nesting(_ref29) {
+  var _ref12 = arguments[0];
+  var forwardRef = _ref29.forwardRef;
+  return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Item, (0, _core.assignProps)({
+    "ref": forwardRef
+  }, _ref12));
+}
+
+/**
+ * @deprecated
+ */
+function NestingTrigger(_ref30) {
+  var _ref13 = arguments[0];
+  var forwardRef = _ref30.forwardRef;
+  return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Item.Content, (0, _core.assignProps)({
+    "tag": DropdownMenu.Trigger,
+    "ref": forwardRef,
+    "use:role": 'menuitem'
+  }, _ref13));
 }
-Trigger.enhance = [(0, _keyboardFocusEnhance["default"])(false)];
 var DropdownMenu = (0, _core["default"])(DropdownMenuRoot, {
   Trigger: Trigger,
   Popper: _dropdown["default"].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["default"]]
 });
+DropdownMenu.selectedIndexContext = selectedIndexContext;
 var _default = DropdownMenu;
 exports["default"] = _default;
 //# sourceMappingURL=DropdownMenu.js.map