@rocket.chat/fuselage 0.83.0 → 0.84.0

package/dist/fuselage.development.js

@@ -3769,7 +3769,7 @@ const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButto
     const sizes = { large, medium, tiny, mini };
     const defaultSmall = !large && !medium && !tiny && !mini;
     const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
-    const popover = state.isOpen && ((0, jsx_runtime_1.jsx)(MenuPopover_1.default, { state: state, triggerRef: ref, placement: (0, helpers_1.getPlacement)(placement), maxWidth: maxWidth, children: (0, jsx_runtime_1.jsx)(MenuDropdown_1.default, { ...props, ...menuProps }) }));
+    const popover = state.isOpen && ((0, jsx_runtime_1.jsx)(MenuPopover_1.default, { state: state, triggerRef: ref, placement: (0, helpers_1.getPlacement)(placement), maxWidth: maxWidth, children: (0, jsx_runtime_1.jsx)(MenuDropdown_1.default, { ...props, ...menuProps, rootMenuTriggerState: state }) }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [button ? ((0, react_1.cloneElement)(button, {
                 ...buttonProps,
                 ref,
@@ -3803,11 +3803,21 @@ const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
 const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/MenuItem.tsx"));
 const MenuSection_1 = __importDefault(__webpack_require__(/*! ./MenuSection */ "./src/components/Menu/MenuSection.tsx"));
-function MenuDropDown(props) {
+const MenuSubmenu_1 = __importDefault(__webpack_require__(/*! ./MenuSubmenu */ "./src/components/Menu/MenuSubmenu.tsx"));
+function MenuDropDown({ rootMenuTriggerState, menuRef, ...props }) {
     const state = (0, react_stately_1.useTreeState)(props);
-    const ref = (0, react_1.useRef)(null);
+    const fallbackRef = (0, react_1.useRef)(null);
+    const ref = menuRef ?? fallbackRef;
     const { menuProps } = (0, react_aria_1.useMenu)(props, state, ref);
-    return ((0, jsx_runtime_1.jsx)("div", { ...menuProps, ref: ref, children: [...state.collection].map((item) => item.type === 'section' ? ((0, jsx_runtime_1.jsx)(MenuSection_1.default, { section: item, state: state }, item.key)) : ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: item, state: state }, item.key))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...menuProps, ref: ref, children: [...state.collection].map((item) => {
+            if (item.type === 'section') {
+                return ((0, jsx_runtime_1.jsx)(MenuSection_1.default, { section: item, state: state, rootMenuTriggerState: rootMenuTriggerState, parentMenuRef: ref, onAction: props.onAction }, item.key));
+            }
+            if (item.hasChildNodes) {
+                return ((0, jsx_runtime_1.jsx)(MenuSubmenu_1.default, { item: item, state: state, rootMenuTriggerState: rootMenuTriggerState, parentMenuRef: ref, onAction: props.onAction }, item.key));
+            }
+            return (0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: item, state: state }, item.key);
+        }) }));
 }
 exports["default"] = MenuDropDown;
 
@@ -3886,19 +3896,79 @@ exports["default"] = (0, react_2.memo)(MenuOption);
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
+const react_1 = __webpack_require__(/*! react */ "react");
+const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const DropdownDesktop_1 = __webpack_require__(/*! ../Dropdown/DropdownDesktop */ "./src/components/Dropdown/DropdownDesktop.tsx");
 const DropdownMobile_1 = __webpack_require__(/*! ../Dropdown/DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
 const Popover_1 = __webpack_require__(/*! ../Popover */ "./src/components/Popover/index.ts");
+const MenuPortalContext_1 = __webpack_require__(/*! ./MenuPortalContext */ "./src/components/Menu/MenuPortalContext.ts");
 function MenuPopover({ children, state, offset = 4, maxWidth, ...props }) {
     const isMobile = !(0, fuselage_hooks_1.useBreakpoints)().includes('sm');
-    if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, offset: offset, ...props, children: (0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children }) }));
+    // The root popover (no container above it) renders a `display: contents`
+    // mount point and shares it with the rest of the tree. Submenu popovers
+    // portal into it, so their DOM nests under the root popover and the whole
+    // tree behaves as one for focus/`aria-hidden` purposes — matching how
+    // `react-aria-components` groups submenu popovers via `PopoverGroupContext`.
+    const groupContainer = (0, MenuPortalContext_1.useMenuPortalContainer)();
+    const containerRef = (0, react_1.useRef)(null);
+    const isSubmenu = groupContainer !== null;
+    const popoverRef = (0, react_1.useRef)(null);
+    // react-aria only lets the *topmost* overlay dismiss on an outside click.
+    // While a submenu is open it is topmost, but submenus are non-modal (hence
+    // non-dismissable), so neither the submenu nor the root closes. Since every
+    // open submenu portals into the root popover, the root popover element
+    // contains the entire menu tree — so we close the whole menu on any
+    // interaction outside it (ignoring the trigger, which toggles on its own).
+    (0, react_aria_1.useInteractOutside)({
+        ref: popoverRef,
+        isDisabled: isSubmenu,
+        onInteractOutside: (event) => {
+            const trigger = props.triggerRef?.current;
+            if (trigger && trigger.contains(event.target)) {
+                return;
+            }
+            state.close();
+        },
+    });
+    const popover = ((0, jsx_runtime_1.jsxs)(Popover_1.Popover, { state: state, offset: offset, popoverRef: popoverRef, ...props, portalContainer: isSubmenu ? (groupContainer?.current ?? undefined) : undefined, children: [isMobile ? ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children })) : ((0, jsx_runtime_1.jsx)(DropdownDesktop_1.DropdownDesktop, { maxHeight: '80vh', overflowY: 'auto', maxWidth: maxWidth, children: children })), !isSubmenu && ((0, jsx_runtime_1.jsx)("span", { ref: containerRef, style: { display: 'contents' } }))] }));
+    if (isSubmenu) {
+        return popover;
     }
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, offset: offset, ...props, children: (0, jsx_runtime_1.jsx)(DropdownDesktop_1.DropdownDesktop, { maxHeight: '80vh', overflowY: 'auto', maxWidth: maxWidth, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(MenuPortalContext_1.MenuPortalContext.Provider, { value: containerRef, children: popover }));
 }
 exports["default"] = MenuPopover;
 
 
+/***/ },
+
+/***/ "./src/components/Menu/MenuPortalContext.ts"
+/*!**************************************************!*\
+  !*** ./src/components/Menu/MenuPortalContext.ts ***!
+  \**************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useMenuPortalContainer = exports.MenuPortalContext = void 0;
+const react_1 = __webpack_require__(/*! react */ "react");
+/**
+ * Ref to the root menu popover's portal container.
+ *
+ * Submenu popovers portal into this container instead of straight into
+ * `document.body`, so the whole menu tree lives in a single DOM subtree nested
+ * under the root popover. This mirrors `react-aria-components`'
+ * `PopoverGroupContext` and is what keeps focus tracking and `aria-hidden`
+ * scoping correct across submenu levels — without it each portaled submenu
+ * looks like "outside" to the root popover and close-on-blur tears the tree
+ * down.
+ *
+ * `null` means there is no root yet, i.e. the consuming popover IS the root.
+ */
+exports.MenuPortalContext = (0, react_1.createContext)(null);
+const useMenuPortalContainer = () => (0, react_1.useContext)(exports.MenuPortalContext);
+exports.useMenuPortalContainer = useMenuPortalContainer;
+
+
 /***/ },
 
 /***/ "./src/components/Menu/MenuSection.tsx"
@@ -3918,7 +3988,8 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
 const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
 const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/MenuItem.tsx"));
-function MenuSection({ section, state, }) {
+const MenuSubmenu_1 = __importDefault(__webpack_require__(/*! ./MenuSubmenu */ "./src/components/Menu/MenuSubmenu.tsx"));
+function MenuSection({ section, state, rootMenuTriggerState, parentMenuRef, onAction, }) {
     const { itemProps, headingProps, groupProps } = (0, react_aria_1.useMenuSection)({
         'heading': section.rendered,
         'aria-label': section['aria-label'],
@@ -3927,11 +3998,85 @@ function MenuSection({ section, state, }) {
         elementType: 'span',
     });
     // If the section is not the first, add a separator element.
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.key !== state.collection.getFirstKey() && ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { ...separatorProps })), (0, jsx_runtime_1.jsxs)("div", { ...itemProps, children: [section.rendered && ((0, jsx_runtime_1.jsx)(Option_1.OptionTitle, { ...headingProps, children: section.rendered })), (0, jsx_runtime_1.jsx)(Box_1.Box, { ...groupProps, padding: '0', children: [...section.childNodes].map((node) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: node, state: state }, node.key))) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.key !== state.collection.getFirstKey() && ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { ...separatorProps })), (0, jsx_runtime_1.jsxs)("div", { ...itemProps, children: [section.rendered && ((0, jsx_runtime_1.jsx)(Option_1.OptionTitle, { ...headingProps, children: section.rendered })), (0, jsx_runtime_1.jsx)(Box_1.Box, { ...groupProps, padding: '0', children: [...section.childNodes].map((node) => node.hasChildNodes ? ((0, jsx_runtime_1.jsx)(MenuSubmenu_1.default, { item: node, state: state, rootMenuTriggerState: rootMenuTriggerState, parentMenuRef: parentMenuRef, onAction: onAction }, node.key)) : ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: node, state: state }, node.key))) })] })] }));
 }
 exports["default"] = MenuSection;
 
 
+/***/ },
+
+/***/ "./src/components/Menu/MenuSubmenu.tsx"
+/*!*********************************************!*\
+  !*** ./src/components/Menu/MenuSubmenu.tsx ***!
+  \*********************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+const react_1 = __webpack_require__(/*! react */ "react");
+const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
+const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
+const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+const MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/MenuDropdown.tsx"));
+const MenuOption_1 = __importDefault(__webpack_require__(/*! ./MenuOption */ "./src/components/Menu/MenuOption.tsx"));
+const MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/MenuPopover.tsx"));
+/**
+ * Renders a menu item that opens a nested submenu.
+ *
+ * The trigger item belongs to the parent menu's tree state (so arrow-key
+ * navigation keeps working), while the submenu renders its own `MenuDropDown`
+ * built from the trigger's children — giving it an isolated collection and
+ * focus scope, mirroring how `react-aria-components` handles `SubmenuTrigger`.
+ */
+function MenuSubmenu({ item, state, rootMenuTriggerState, parentMenuRef, onAction, }) {
+    const triggerRef = (0, react_1.useRef)(null);
+    const submenuRef = (0, react_1.useRef)(null);
+    const submenuTriggerState = (0, react_stately_1.useSubmenuTriggerState)({ triggerKey: item.key }, rootMenuTriggerState);
+    const { submenuTriggerProps, submenuProps, popoverProps } = (0, react_aria_1.useSubmenuTrigger)({ parentMenuRef, submenuRef }, submenuTriggerState, triggerRef);
+    /** react-aria's submenu hooks bind Escape to `state.closeAll()`, tearing down the whole menu tree. We override Escape so it dismisses only this submenu level — keeping its ancestors open — matching react-aria-components, where Escape closes the latest open submenu one level at a time.
+     **/
+    const closeSubmenu = () => {
+        // Mirror the ArrowLeft behavior: move focus back to the trigger so the parent menu stays keyboard-navigable and a subsequent Escape closes the next level up.
+        triggerRef.current?.focus();
+        submenuTriggerState.close();
+    };
+    /** Fires when focus is inside the submenu (keyboard navigation). */
+    const onSubmenuKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            closeSubmenu();
+            return;
+        }
+        submenuProps.onKeyDown?.(event);
+    };
+    /** Fires when focus is on the trigger itself (e.g. a hover/press-opened submenu). When this submenu is open, close just it; once it's closed, let Escape bubble so the parent menu handles the next level up.
+     **/
+    const onTriggerKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            if (submenuTriggerState.isOpen) {
+                closeSubmenu();
+                return;
+            }
+            event.continuePropagation();
+            return;
+        }
+        submenuTriggerProps.onKeyDown?.(event);
+    };
+    const { menuItemProps, isFocused, isDisabled } = (0, react_aria_1.useMenuItem)({ ...submenuTriggerProps, onKeyDown: onTriggerKeyDown, key: item.key }, state, triggerRef);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuOption_1.default, { ...(0, react_aria_1.mergeProps)(menuItemProps, {
+                    'id': submenuTriggerProps.id,
+                    'aria-haspopup': submenuTriggerProps['aria-haspopup'],
+                    'aria-expanded': submenuTriggerProps['aria-expanded'],
+                    'aria-controls': submenuTriggerProps['aria-controls'],
+                }), ref: triggerRef, focus: isFocused, disabled: isDisabled, is: 'div', variant: item.value?.variant, children: (0, jsx_runtime_1.jsxs)("div", { className: 'rcx-option__wrapper', children: [item.rendered, (0, jsx_runtime_1.jsx)("div", { className: 'rcx-option__input', children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-left', size: 'x16' }) })] }) }), submenuTriggerState.isOpen && ((0, jsx_runtime_1.jsx)(MenuPopover_1.default, { ...popoverProps, state: submenuTriggerState, triggerRef: triggerRef, placement: 'right top', children: (0, jsx_runtime_1.jsx)(MenuDropdown_1.default, { ...submenuProps, onKeyDown: onSubmenuKeyDown, rootMenuTriggerState: rootMenuTriggerState, menuRef: submenuRef, onAction: onAction, children: item.props?.children }) }))] }));
+}
+exports["default"] = MenuSubmenu;
+
+
 /***/ },
 
 /***/ "./src/components/Menu/helpers/helpers.ts"
@@ -3990,11 +4135,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MenuItemDescription = exports.MenuItemTitle = exports.MenuItemSkeleton = exports.MenuItemInput = exports.MenuItemIcon = exports.MenuItemContent = exports.MenuItemColumn = exports.MenuItemAvatar = exports.MenuSection = exports.MenuItem = exports.Menu = void 0;
+exports.MenuItemDescription = exports.MenuItemTitle = exports.MenuItemSkeleton = exports.MenuItemInput = exports.MenuItemIcon = exports.MenuItemContent = exports.MenuItemColumn = exports.MenuItemAvatar = exports.MenuSection = exports.MenuSubmenuTrigger = exports.MenuItem = exports.Menu = void 0;
 var Menu_1 = __webpack_require__(/*! ./Menu */ "./src/components/Menu/Menu.tsx");
 Object.defineProperty(exports, "Menu", ({ enumerable: true, get: function () { return __importDefault(Menu_1).default; } }));
 var MenuItem_1 = __webpack_require__(/*! ./stately/MenuItem */ "./src/components/Menu/stately/MenuItem.tsx");
 Object.defineProperty(exports, "MenuItem", ({ enumerable: true, get: function () { return __importDefault(MenuItem_1).default; } }));
+var MenuSubmenuTrigger_1 = __webpack_require__(/*! ./stately/MenuSubmenuTrigger */ "./src/components/Menu/stately/MenuSubmenuTrigger.tsx");
+Object.defineProperty(exports, "MenuSubmenuTrigger", ({ enumerable: true, get: function () { return __importDefault(MenuSubmenuTrigger_1).default; } }));
 var MenuSection_1 = __webpack_require__(/*! ./stately/MenuSection */ "./src/components/Menu/stately/MenuSection.tsx");
 Object.defineProperty(exports, "MenuSection", ({ enumerable: true, get: function () { return __importDefault(MenuSection_1).default; } }));
 var Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
@@ -4127,6 +4274,74 @@ MenuSection.getCollectionNode = function* getCollectionNode(props) {
 exports["default"] = MenuSection;
 
 
+/***/ },
+
+/***/ "./src/components/Menu/stately/MenuSubmenuTrigger.tsx"
+/*!************************************************************!*\
+  !*** ./src/components/Menu/stately/MenuSubmenuTrigger.tsx ***!
+  \************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const react_1 = __webpack_require__(/*! react */ "react");
+function MenuSubmenuTrigger(_props) {
+    return null;
+}
+const toElementArray = (children) => {
+    const result = [];
+    const visit = (node) => {
+        if (Array.isArray(node)) {
+            node.forEach(visit);
+            return;
+        }
+        if ((0, react_1.isValidElement)(node)) {
+            result.push(node);
+        }
+    };
+    visit(children);
+    return result;
+};
+MenuSubmenuTrigger.getCollectionNode = function* getCollectionNode(props, context) {
+    const [trigger, ...submenuItems] = toElementArray(props.children);
+    if (!trigger || submenuItems.length === 0) {
+        throw new Error('A <MenuSubmenuTrigger> must have at least two children: the trigger item followed by one or more submenu items.');
+    }
+    const rendered = trigger.props.children;
+    const textValue = props.textValue ||
+        trigger.props.textValue ||
+        (typeof rendered === 'string' ? rendered : '') ||
+        props['aria-label'] ||
+        trigger.props['aria-label'] ||
+        '';
+    if (!textValue && !context?.suppressTextValueWarning) {
+        console.warn('<MenuSubmenuTrigger> with non-plain text contents is unsupported by type to select for accessibility. Please add a `textValue` prop.');
+    }
+    yield {
+        'type': 'item',
+        // Only the submenu items are forwarded as children — the trigger element is
+        // consumed here and rendered separately by `MenuSubmenu`.
+        'props': { ...props, children: submenuItems },
+        rendered,
+        textValue,
+        'aria-label': props['aria-label'] || trigger.props['aria-label'],
+        'value': (props.variant
+            ? { variant: props.variant }
+            : undefined),
+        'hasChildNodes': true,
+        *'childNodes'() {
+            for (const item of submenuItems) {
+                yield {
+                    type: 'item',
+                    element: item,
+                };
+            }
+        },
+    };
+};
+exports["default"] = MenuSubmenuTrigger;
+
+
 /***/ },
 
 /***/ "./src/components/Message/Message.tsx"
@@ -7749,8 +7964,9 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const contexts_1 = __webpack_require__(/*! ../../contexts */ "./src/contexts/index.ts");
-function Popover({ portalContainer, ...props }) {
-    const popoverRef = (0, react_1.useRef)(null);
+function Popover({ portalContainer, popoverRef: popoverRefProp, ...props }) {
+    const fallbackRef = (0, react_1.useRef)(null);
+    const popoverRef = popoverRefProp ?? fallbackRef;
     const { state, children, isNonModal } = props;
     const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
     const { popoverProps, underlayProps } = (0, react_aria_1.usePopover)({
@@ -7758,7 +7974,7 @@ function Popover({ portalContainer, ...props }) {
         popoverRef,
         boundaryElement: ownerDocument?.body,
     }, state);
-    return ((0, jsx_runtime_1.jsxs)(react_aria_1.Overlay, { portalContainer: ownerDocument?.body, children: [!isNonModal && (0, jsx_runtime_1.jsx)("div", { ...underlayProps }), (0, jsx_runtime_1.jsxs)("div", { ...popoverProps, ref: popoverRef, children: [!isNonModal && (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close }), children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_1.Overlay, { portalContainer: portalContainer ?? ownerDocument?.body, children: [!isNonModal && (0, jsx_runtime_1.jsx)("div", { ...underlayProps }), (0, jsx_runtime_1.jsxs)("div", { ...popoverProps, ref: popoverRef, children: [!isNonModal && (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close }), children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close })] })] }));
 }
 exports["default"] = Popover;
 
@@ -9042,13 +9258,13 @@ exports.SidebarCollapseGroup = SidebarCollapseGroup;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const SidebarGroupTitle_1 = __webpack_require__(/*! ./SidebarGroupTitle */ "./src/components/SidebarV2/SidebarGroupTitle.tsx");
 const useCollapse_1 = __webpack_require__(/*! ./hooks/useCollapse */ "./src/components/SidebarV2/hooks/useCollapse.tsx");
-function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, title, ...props }) {
+function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, title, ...props }) {
     const { barProps, expanded, panelExpanded, panelId, titleId } = (0, useCollapse_1.useCollapse)({
         expanded: propExpanded,
         defaultExpanded,
         tabIndex,
     });
-    return ((0, jsx_runtime_1.jsxs)("section", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group', ...props, children: [(0, jsx_runtime_1.jsx)(SidebarGroupTitle_1.SidebarGroupTitle, { expanded: expanded, title: title, titleId: titleId, badge: badge, barProps: barProps, role: 'button' }), (0, jsx_runtime_1.jsx)("div", { role: 'list', ref: ref, className: [
+    return ((0, jsx_runtime_1.jsxs)("section", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group', ...props, children: [(0, jsx_runtime_1.jsx)(SidebarGroupTitle_1.SidebarGroupTitle, { expanded: expanded, title: title, titleId: titleId, badge: badge, menu: menu, barProps: barProps, role: 'button' }), (0, jsx_runtime_1.jsx)("div", { role: 'list', ref: ref, className: [
                     'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__panel rcx-box--animated',
                     panelExpanded && 'rcx-sidebar-v2-collapse-group__panel--expanded',
                 ]
@@ -9057,6 +9273,26 @@ function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, ta
 }
 
 
+/***/ },
+
+/***/ "./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx"
+/*!***************************************************************!*\
+  !*** ./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx ***!
+  \***************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.SidebarCollapseGroupMenu = void 0;
+const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+const appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
+const patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
+const SidebarCollapseGroupMenu = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__menu-wrapper rcx-box--animated', ...props, children: (0, patchChildren_1.patchChildren)((0, jsx_runtime_1.jsx)("span", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__menu', children: children }), (childProps) => ({
+        className: (0, appendClassName_1.appendClassName)(childProps.className, 'rcx-sidebar-v2-collapse-group__menu'),
+    })) }));
+exports.SidebarCollapseGroupMenu = SidebarCollapseGroupMenu;
+
+
 /***/ },
 
 /***/ "./src/components/SidebarV2/SidebarDivider.tsx"
@@ -9137,12 +9373,13 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarGroupTitle = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Chevron_1 = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.ts");
-const SidebarGroupTitle = ({ title, titleId, badge, barProps, expanded, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: [
+const SidebarCollapseGroupMenu_1 = __webpack_require__(/*! ./SidebarCollapseGroupMenu */ "./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx");
+const SidebarGroupTitle = ({ title, titleId, badge, menu, barProps, expanded, role, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: [
         'rcx-box rcx-box--full',
         'rcx-sidebar-v2-collapse-group__bar rcx-box--animated',
     ]
         .filter(Boolean)
-        .join(' '), ...barProps, ...props, children: [expanded !== undefined && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x20', right: !expanded }), title && ((0, jsx_runtime_1.jsx)("h4", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title', id: titleId, children: title })), !expanded && badge && badge] }));
+        .join(' '), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-sidebar-v2-collapse-group__bar-button', role: role, ...barProps, children: [expanded !== undefined && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x20', right: !expanded }), title && ((0, jsx_runtime_1.jsx)("h4", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title', id: titleId, children: title })), !expanded && badge && badge] }), menu && (0, jsx_runtime_1.jsx)(SidebarCollapseGroupMenu_1.SidebarCollapseGroupMenu, { children: menu })] }));
 exports.SidebarGroupTitle = SidebarGroupTitle;
 
 
@@ -9653,7 +9890,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SidebarV2GroupTitle = exports.SidebarV2Divider = exports.SidebarV2Section = exports.SidebarV2ButtonGroup = exports.SidebarV2Banner = exports.SidebarV2CollapseGroup = exports.SidebarV2Link = exports.SidebarV2Actions = exports.SidebarV2Action = exports.SidebarV2AccordionItem = exports.SidebarV2Accordion = exports.SidebarV2 = void 0;
+exports.SidebarV2GroupTitle = exports.SidebarV2Divider = exports.SidebarV2Section = exports.SidebarV2ButtonGroup = exports.SidebarV2Banner = exports.SidebarV2CollapseGroupMenu = exports.SidebarV2CollapseGroup = exports.SidebarV2Link = exports.SidebarV2Actions = exports.SidebarV2Action = exports.SidebarV2AccordionItem = exports.SidebarV2Accordion = exports.SidebarV2 = void 0;
 var Sidebar_1 = __webpack_require__(/*! ./Sidebar */ "./src/components/SidebarV2/Sidebar.tsx");
 Object.defineProperty(exports, "SidebarV2", ({ enumerable: true, get: function () { return Sidebar_1.Sidebar; } }));
 var SidebarAccordion_1 = __webpack_require__(/*! ./SidebarAccordion */ "./src/components/SidebarV2/SidebarAccordion.tsx");
@@ -9669,6 +9906,8 @@ Object.defineProperty(exports, "SidebarV2Link", ({ enumerable: true, get: functi
 __exportStar(__webpack_require__(/*! ./SidebarItem */ "./src/components/SidebarV2/SidebarItem/index.ts"), exports);
 var SidebarCollapseGroup_1 = __webpack_require__(/*! ./SidebarCollapseGroup */ "./src/components/SidebarV2/SidebarCollapseGroup.tsx");
 Object.defineProperty(exports, "SidebarV2CollapseGroup", ({ enumerable: true, get: function () { return SidebarCollapseGroup_1.SidebarCollapseGroup; } }));
+var SidebarCollapseGroupMenu_1 = __webpack_require__(/*! ./SidebarCollapseGroupMenu */ "./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx");
+Object.defineProperty(exports, "SidebarV2CollapseGroupMenu", ({ enumerable: true, get: function () { return SidebarCollapseGroupMenu_1.SidebarCollapseGroupMenu; } }));
 var SidebarBanner_1 = __webpack_require__(/*! ./SidebarBanner */ "./src/components/SidebarV2/SidebarBanner.tsx");
 Object.defineProperty(exports, "SidebarV2Banner", ({ enumerable: true, get: function () { return SidebarBanner_1.SidebarBanner; } }));
 __exportStar(__webpack_require__(/*! ./SidebarFooter */ "./src/components/SidebarV2/SidebarFooter/index.ts"), exports);
@@ -12349,17 +12588,17 @@ module.exports = require("react/jsx-runtime");
 /******/ 	});
 /************************************************************************/
 /******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
+/******/ 	const __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
 /******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		const cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
 /******/ 			return cachedModule.exports;
 /******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 		const module = __webpack_module_cache__[moduleId] = {
 /******/ 			// no module.id needed
 /******/ 			// no module.loaded needed
 /******/ 			exports: {}
@@ -12368,7 +12607,7 @@ module.exports = require("react/jsx-runtime");
 /******/ 		// Execute the module function
 /******/ 		if (!(moduleId in __webpack_modules__)) {
 /******/ 			delete __webpack_module_cache__[moduleId];
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			const e = new Error("Cannot find module '" + moduleId + "'");
 /******/ 			e.code = 'MODULE_NOT_FOUND';
 /******/ 			throw e;
 /******/ 		}
@@ -12383,7 +12622,7 @@ module.exports = require("react/jsx-runtime");
 /******/ 	(() => {
 /******/ 		// define __esModule on exports
 /******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			if(Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
 /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
@@ -12395,7 +12634,7 @@ module.exports = require("react/jsx-runtime");
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	let __webpack_exports__ = __webpack_require__("./src/index.ts");
 /******/ 	module.exports = __webpack_exports__;
 /******/ 	
 /******/ })()