@semcore/dropdown-menu 4.20.4 → 4.21.0-prerelease.1

package/CHANGELOG.md

@@ -2,7 +2,22 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [4.20.4-prerelease.1] - 2024-02-19
+## [4.21.0-prerelease.1] - 2024-02-15
+
+### Fixed
+
+- Assistive technologies were not announcing the selected item if dropdown contained focusable elements.
+
+### Changed
+
+- When dropdown menu item has focusable elements inside, pressing tab locks focus inside the item. Closing or navigating inside the dropdown menu unlocks the focus.
+- If dropdown menu poppers placed to the left or right side of trigger, user needs to press `ArrowLeft` or `ArrowRight` to open the popper (`ArrowUp` or `ArrowDown` was opening popper with any placement before the change).
+
+### Added
+
+- `DropdownMenu.Nesting` component to support accessible nested dropdowns.
+
+## [4.20.4] - 2024-02-19
 
 ### Changed
 

package/lib/cjs/DropdownMenu.js

@@ -27,24 +27,27 @@ var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 var _useFocusLock = require("@semcore/utils/lib/use/useFocusLock");
 var _styleScrollArea = _interopRequireDefault(require("./styleScrollArea"));
-var _excluded = ["className"],
-  _excluded2 = ["className"];
+var _setFocus = require("@semcore/utils/src/focus-lock/setFocus");
+var _isFocusInside = require("@semcore/utils/src/focus-lock/isFocusInside");
+var _getFocusableIn = require("@semcore/utils/src/focus-lock/getFocusableIn");
+var _excluded = ["className"];
 /*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_qdb5q_gg_,.___SDropdownMenuList_qdb5q_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_qdb5q_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0}.___SDropdownMenuItem_qdb5q_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_qdb5q_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_qdb5q_gg_:focus{outline:0}.___SDropdownMenuItem_qdb5q_gg_.__selected_qdb5q_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_qdb5q_gg_.__selected_qdb5q_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_qdb5q_gg_.__highlighted_qdb5q_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_qdb5q_gg_.__disabled_qdb5q_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_qdb5q_gg_._size_l_qdb5q_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_qdb5q_gg_._size_m_qdb5q_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_qdb5q_gg_.__notInteractive_qdb5q_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_qdb5q_gg_.__notInteractive_qdb5q_gg_:hover{background:0 0}}.___SDropdownMenuItem_qdb5q_gg_._variant_hint_qdb5q_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_qdb5q_gg_._variant_hint_qdb5q_gg_:hover{background:0 0}}.___SDropdownMenuItem_qdb5q_gg_._variant_title_qdb5q_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_qdb5q_gg_._variant_title_qdb5q_gg_:hover{background:0 0}}.___SDropdownMenuItemAddon_qdb5q_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_qdb5q_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_qdb5q_gg_:last-child{margin-right:0}" /*__inner_css_end__*/, "qdb5q_gg_") /*__reshadow_css_end__*/, {
-  "__SDropdownMenuList": "___SDropdownMenuList_qdb5q_gg_",
-  "__SDropdownMenuItem": "___SDropdownMenuItem_qdb5q_gg_",
-  "_highlighted": "__highlighted_qdb5q_gg_",
-  "_disabled": "__disabled_qdb5q_gg_",
-  "_size_l": "_size_l_qdb5q_gg_",
-  "_size_m": "_size_m_qdb5q_gg_",
-  "_selected": "__selected_qdb5q_gg_",
-  "_notInteractive": "__notInteractive_qdb5q_gg_",
-  "_variant_hint": "_variant_hint_qdb5q_gg_",
-  "_variant_title": "_variant_title_qdb5q_gg_",
-  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_qdb5q_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_1578a_gg_,.___SDropdownMenuList_1578a_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1578a_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0}.___SDropdownMenuItem_1578a_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_1578a_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_1578a_gg_:focus{outline:0}.___SDropdownMenuItem_1578a_gg_.__selected_1578a_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_1578a_gg_.__selected_1578a_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_1578a_gg_.__highlighted_1578a_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_1578a_gg_.__disabled_1578a_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_1578a_gg_._size_l_1578a_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_1578a_gg_._size_m_1578a_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_1578a_gg_.__notInteractive_1578a_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_1578a_gg_.__notInteractive_1578a_gg_:hover{background:0 0}}.___SDropdownMenuItem_1578a_gg_._variant_hint_1578a_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1578a_gg_._variant_hint_1578a_gg_:hover{background:0 0}}.___SDropdownMenuItem_1578a_gg_._variant_title_1578a_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1578a_gg_._variant_title_1578a_gg_:hover{background:0 0}}.___SDropdownMenuItem_1578a_gg_.__visible_1578a_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItem_1578a_gg_.__nesting-trigger_1578a_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1578a_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_1578a_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1578a_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1578a_gg_,.___SDropdownMenuNesting_1578a_gg_._size_l_1578a_gg_,.___SDropdownMenuNesting_1578a_gg_._size_m_1578a_gg_{padding:0}.___SDropdownMenuNesting_1578a_gg_.__highlighted_1578a_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}" /*__inner_css_end__*/, "1578a_gg_") /*__reshadow_css_end__*/, {
+  "__SDropdownMenuList": "___SDropdownMenuList_1578a_gg_",
+  "__SDropdownMenuItem": "___SDropdownMenuItem_1578a_gg_",
+  "_highlighted": "__highlighted_1578a_gg_",
+  "_disabled": "__disabled_1578a_gg_",
+  "_size_l": "_size_l_1578a_gg_",
+  "_size_m": "_size_m_1578a_gg_",
+  "_visible": "__visible_1578a_gg_",
+  "_nesting-trigger": "__nesting-trigger_1578a_gg_",
+  "__SDropdownMenuNesting": "___SDropdownMenuNesting_1578a_gg_",
+  "_selected": "__selected_1578a_gg_",
+  "_notInteractive": "__notInteractive_1578a_gg_",
+  "_variant_hint": "_variant_hint_1578a_gg_",
+  "_variant_title": "_variant_title_1578a_gg_",
+  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1578a_gg_"
 });
-var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
-var INTERACTION_TAGS = ['INPUT', 'TEXTAREA', 'BUTTON'];
 var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(DropdownMenuRoot, _Component);
   var _super = (0, _createSuper2["default"])(DropdownMenuRoot);
@@ -55,55 +58,194 @@ 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
+    });
     (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), "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), "bindHandlerKeyDown", function (place) {
       return function (e) {
         var amount = e.shiftKey ? 5 : 1;
         var targetTagName = e.target.tagName;
-        if (e.key === ' ' && INTERACTION_TAGS.includes(targetTagName)) return;
+        var _this$asProps = _this.asProps,
+          visible = _this$asProps.visible,
+          highlightedIndex = _this$asProps.highlightedIndex,
+          placement = _this$asProps.placement;
+        if (e.key === ' ' && ['INPUT', 'TEXTAREA', 'BUTTON'].includes(targetTagName)) return;
         if (e.key === 'Enter') {
           if (targetTagName === 'TEXTAREA') return;
           if (place === 'popper' && (targetTagName === 'BUTTON' || targetTagName === 'A')) return;
         }
-        var visible = _this.asProps.visible;
-        var element = _this.popperRef.current;
-        if (place === 'popper' && visible && e.key === 'Tab' && (0, _useFocusLock.hasFocusableIn)(element)) {
-          _this.handlers.highlightedIndex(null);
+        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 (!KEYS.includes(e.key)) return;
-        e.preventDefault();
-        var isVisible = _this.asProps.visible;
-        _this.handlers.visible(true);
+        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();
+          _this.handlers.visible(true);
+        }
+        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) {
+            _this.handlers.visible(false);
+          }
+          if (visibleChanged) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+        }
+        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
+                });
+              }
+              var prevFocused = focusable[focusedIndex - 1];
+              if (prevFocused) {
+                e.preventDefault();
+                e.stopPropagation();
+                prevFocused.focus();
+              }
+            }
+          }
+        }
         switch (e.key) {
           case 'ArrowDown':
             {
-              isVisible && _this.moveHighlightedIndex(amount, e);
-              (targetTagName === 'BUTTON' || targetTagName === 'A') && (element === null || element === void 0 ? void 0 : element.focus());
+              if (visible) {
+                _this.moveHighlightedIndex(amount, e);
+                if ((0, _isFocusInside.isFocusInside)(_this.popperRef.current)) {
+                  _this.focusTrigger();
+                }
+                e.preventDefault();
+                e.stopPropagation();
+              }
               break;
             }
           case 'ArrowUp':
             {
-              isVisible && _this.moveHighlightedIndex(-amount, e);
-              (targetTagName === 'BUTTON' || targetTagName === 'A') && (element === null || element === void 0 ? void 0 : element.focus());
+              if (visible) {
+                _this.moveHighlightedIndex(-amount, e);
+                if ((0, _isFocusInside.isFocusInside)(_this.popperRef.current)) {
+                  _this.focusTrigger();
+                }
+                e.preventDefault();
+                e.stopPropagation();
+              }
               break;
             }
           case ' ':
           case 'Enter':
             if (_this.highlightedItemRef.current) {
+              e.stopPropagation();
+              e.preventDefault();
               _this.highlightedItemRef.current.click();
             } else {
-              if (place === 'trigger') _this.handlers.visible(false);
+              if (place === 'trigger') {
+                _this.handlers.visible(false);
+                e.preventDefault();
+              }
             }
             break;
         }
       };
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTriggerKeyboardFocus", function () {
+      if (_this.ignoreTriggerKeyboardFocusUntil > Date.now()) return false;
+    });
+    (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), "scrollToNode", function (node) {
-      _this.highlightedItemRef.current = node;
+      if (node) {
+        _this.highlightedItemRef.current = node;
+      }
       setTimeout(function () {
         if (node !== null && node !== void 0 && node.scrollIntoView) {
           if (_this.asProps.highlightedIndex !== _this.prevHighlightedIndex) {
@@ -121,21 +263,26 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(DropdownMenuRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
+      var _this2 = this;
       return {
         highlightedIndex: null,
-        visible: null
+        visible: [null, function (visible) {
+          if (!visible) {
+            _this2.ignoreTriggerKeyboardFocusUntil = Date.now() + 100;
+          }
+        }]
       };
     }
   }, {
     key: "getTriggerProps",
     value: function getTriggerProps() {
-      var _this$asProps = this.asProps,
-        size = _this$asProps.size,
-        uid = _this$asProps.uid,
-        disablePortal = _this$asProps.disablePortal,
-        visible = _this$asProps.visible,
-        getI18nText = _this$asProps.getI18nText,
-        highlightedIndex = _this$asProps.highlightedIndex;
+      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;
       return {
         size: size,
         id: "igc-".concat(uid, "-trigger"),
@@ -143,15 +290,17 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
         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')
+        onKeyDown: this.bindHandlerKeyDown('trigger'),
+        ref: this.triggerRef,
+        onKeyboardFocus: this.handleTriggerKeyboardFocus
       };
     }
   }, {
     key: "getListProps",
     value: function getListProps() {
-      var _this$asProps2 = this.asProps,
-        size = _this$asProps2.size,
-        uid = _this$asProps2.uid;
+      var _this$asProps4 = this.asProps,
+        size = _this$asProps4.size,
+        uid = _this$asProps4.uid;
       return {
         size: size,
         uid: uid,
@@ -161,12 +310,12 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
-      var _this$asProps3 = this.asProps,
-        uid = _this$asProps3.uid,
-        disablePortal = _this$asProps3.disablePortal,
-        ignorePortalsStacking = _this$asProps3.ignorePortalsStacking,
-        interaction = _this$asProps3.interaction,
-        highlightedIndex = _this$asProps3.highlightedIndex;
+      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;
       return {
         ref: this.popperRef,
         tabIndex: 0,
@@ -181,21 +330,29 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getItemProps",
     value: function getItemProps(props, index) {
-      var _this$asProps4 = this.asProps,
-        size = _this$asProps4.size,
-        highlightedIndex = _this$asProps4.highlightedIndex,
-        uid = _this$asProps4.uid;
+      var _this3 = this;
+      var _this$asProps6 = this.asProps,
+        size = _this$asProps6.size,
+        highlightedIndex = _this$asProps6.highlightedIndex,
+        uid = _this$asProps6.uid;
       var highlighted = index === highlightedIndex;
-      var extraProps = {};
+      var ref = this.itemRefs[index];
       this.itemProps[index] = props;
       if (highlighted) {
-        extraProps.ref = this.scrollToNode;
+        ref = function ref(node) {
+          _this3.itemRefs[index] = node;
+          _this3.scrollToNode(node);
+        };
       }
-      return (0, _objectSpread2["default"])({
+      return {
         id: "igc-".concat(uid, "-option-").concat(index),
         size: size,
-        highlighted: highlighted
-      }, extraProps);
+        highlighted: highlighted,
+        focusLock: this.state.focusLockItemIndex === index,
+        triggerRef: this.triggerRef,
+        ref: ref,
+        index: index
+      };
     }
   }, {
     key: "getItemHintProps",
@@ -226,6 +383,8 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
       if (highlightedIndex == null) {
         if (selectedIndex !== -1) {
           highlightedIndex = selectedIndex;
+        } else if (this.highlightedItemRef.current) {
+          highlightedIndex = this.prevHighlightedIndex;
         } else {
           highlightedIndex = amount < 0 ? 0 : itemsLastIndex;
         }
@@ -245,22 +404,25 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var visible = this.asProps.visible;
-      if (!visible) {
+      var _this4 = this;
+      if (!this.asProps.visible) {
         this.handlers.highlightedIndex(null);
       }
+      if ((this.state.focusLockItemIndex !== this.asProps.highlightedIndex || !this.asProps.visible) && this.state.focusLockItemIndex !== null) {
+        setTimeout(function () {
+          _this4.setState({
+            focusLockItemIndex: null
+          });
+        }, 0);
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _ref = this.asProps;
-      var _this$asProps5 = this.asProps,
-        Children = _this$asProps5.Children,
-        interaction = _this$asProps5.interaction,
-        dataUiName = _this$asProps5['data-ui-name'];
-      var props = {};
+      var Children = this.asProps.Children;
       this.itemProps = [];
-      return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)((0, _objectSpread2["default"])({}, props), _ref), /*#__PURE__*/_react["default"].createElement(Children, null));
+      return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)({}, _ref), /*#__PURE__*/_react["default"].createElement(Children, null));
     }
   }]);
   return DropdownMenuRoot;
@@ -278,10 +440,10 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
 });
 function List(props) {
   var _ref2 = arguments[0],
-    _ref7;
+    _ref10;
   var SDropdownMenuList = _scrollArea["default"];
   var uid = props.uid;
-  return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref7.cn("SDropdownMenuList", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref10 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref10.cn("SDropdownMenuList", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tabIndex": null,
     "role": 'menu',
     "aria-labelledby": "igc-".concat(uid, "-trigger"),
@@ -309,22 +471,72 @@ function Menu(props) {
   };
   return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/_react["default"].createElement(DropdownMenu.List, (0, _core.assignProps)({}, _ref3)));
 }
-function Item(props) {
-  var _useFlex = (0, _flexBox.useFlex)(props, props.forwardRef),
-    _useFlex2 = (0, _slicedToArray2["default"])(_useFlex, 2),
-    SDropdownMenuItem = _useFlex2[0],
-    _useFlex2$ = _useFlex2[1],
-    className = _useFlex2$.className,
-    other = (0, _objectWithoutProperties2["default"])(_useFlex2$, _excluded);
-  var styles = (0, _core.sstyled)(props.styles);
-  return /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, (0, _extends2["default"])({
-    role: "menuitem",
-    tabIndex: -1,
-    id: props.label,
-    className: (0, _classnames["default"])(styles.cn('SDropdownMenuItem', (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
-      highlighted: !props.disabled && props.highlighted
-    })).className, className) || undefined
-  }, other));
+function Item(_ref16) {
+  var _ref4 = arguments[0],
+    _ref11;
+  var styles = _ref16.styles,
+    label = _ref16.label,
+    triggerRef = _ref16.triggerRef,
+    focusLock = _ref16.focusLock,
+    disabled = _ref16.disabled,
+    highlighted = _ref16.highlighted;
+  var SDropdownMenuItem = _flexBox.Flex;
+  var ref = _react["default"].useRef();
+  (0, _useFocusLock.useFocusLock)(ref, false, triggerRef, !focusLock || disabled, true);
+  return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref11.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "ref": ref,
+    "role": 'menuitem',
+    "tabIndex": -1,
+    "id": label,
+    "use:highlighted": !disabled && highlighted
+  }, _ref4))));
+}
+function Nesting(_ref17) {
+  var _ref5 = arguments[0],
+    _ref12;
+  var styles = _ref17.styles;
+  var SDropdownMenuNesting = DropdownMenu.Item;
+  return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuNesting, _ref12.cn("SDropdownMenuNesting", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "aria-haspopup": 'true'
+  }, _ref5))));
+}
+function NestingTrigger(_ref18) {
+  var _ref6 = arguments[0],
+    _ref13;
+  var styles = _ref18.styles,
+    visible = _ref18.visible,
+    onNestedVisibleChange = _ref18.onNestedVisibleChange;
+  var SDropdownMenuItem = _flexBox.Flex;
+  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';
+  }, []);
+  _react["default"].useEffect(function () {
+    document.addEventListener('mouseover', handleMouseEvent, {
+      capture: true
+    });
+    document.addEventListener('keydown', handleKeyboardEvent, {
+      capture: true
+    });
+    return function () {
+      document.removeEventListener('mouseover', handleMouseEvent, {
+        capture: true
+      });
+      document.removeEventListener('keydown', handleKeyboardEvent, {
+        capture: true
+      });
+    };
+  }, []);
+  return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref13.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "nesting-trigger": true,
+    "tabIndex": 0
+  }, _ref6))));
 }
 function Addon(props) {
   var _useBox = (0, _flexBox.useBox)(props, props.forwardRef),
@@ -332,33 +544,33 @@ function Addon(props) {
     SDropdownMenuItemAddon = _useBox2[0],
     _useBox2$ = _useBox2[1],
     className = _useBox2$.className,
-    other = (0, _objectWithoutProperties2["default"])(_useBox2$, _excluded2);
+    other = (0, _objectWithoutProperties2["default"])(_useBox2$, _excluded);
   var styles = (0, _core.sstyled)(props.styles);
   return /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemAddon, (0, _extends2["default"])({
     className: (0, _classnames["default"])(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined
   }, other));
 }
 function Hint(props) {
-  var _ref4 = arguments[0],
-    _ref8;
+  var _ref7 = arguments[0],
+    _ref14;
   var SDropdownMenuItem = _flexBox.Flex;
-  return _ref8 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref8.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref14 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref14.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "variant": 'hint'
-  }, _ref4))));
+  }, _ref7))));
 }
 function Title(props) {
-  var _ref5 = arguments[0],
-    _ref9;
+  var _ref8 = arguments[0],
+    _ref15;
   var SDropdownMenuItem = _flexBox.Flex;
-  return _ref9 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref9.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref15 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref15.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "variant": 'title'
-  }, _ref5))));
+  }, _ref8))));
 }
 function Trigger() {
-  var _ref6 = arguments[0];
+  var _ref9 = arguments[0];
   return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({
     "aria-haspopup": 'true'
-  }, _ref6));
+  }, _ref9));
 }
 var DropdownMenu = (0, _core["default"])(DropdownMenuRoot, {
   Trigger: Trigger,
@@ -368,6 +580,10 @@ var DropdownMenu = (0, _core["default"])(DropdownMenuRoot, {
   Item: [Item, {
     Addon: Addon
   }],
+  Nesting: [Nesting, {
+    Trigger: NestingTrigger,
+    Addon: Addon
+  }],
   ItemTitle: Title,
   ItemHint: Hint
 }, {