@deque/cauldron-react 6.18.4-canary.f4a0db5c → 6.18.5-canary.11d89de9

package/lib/components/ActionMenu/ActionMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'> & {
+type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'> & {
     ref: React.RefObject<HTMLButtonElement>;
 };
 type ActionMenuTriggerFunction = (props: ActionMenuTriggerProps, open: boolean) => React.ReactElement;
@@ -8,6 +8,14 @@ declare const ActionMenu: React.ForwardRefExoticComponent<{
     trigger: React.ReactElement | ActionMenuTriggerFunction;
     /** Render the action menu in a different location in the dom. */
     portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
+    /**
+     * Controls whether the menu should render as a child of the trigger, as opposed to
+     * rendering as a sibling. Intended for use with nested menu patterns, for example
+     * when an `ActionMenu` is nested inside a `TopBar`/`MenuBar`.
+     *
+     * Only supported if trigger is a function *and* portal is undefined.
+     */
+    renderInTrigger?: boolean | undefined;
 } & Pick<{
     target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
     placement?: "auto" | import("@floating-ui/utils").Placement | "auto-start" | "auto-end" | undefined;

package/lib/index.js

@@ -5068,13 +5068,13 @@ ActionListLinkItem.displayName = 'ActionListLinkItem';
 
 var _a = tslib.__read(['ArrowDown', 'ArrowUp'], 2), ArrowDown = _a[0], ArrowUp = _a[1];
 var ActionMenu = React.forwardRef(function (_a, ref) {
-    var className = _a.className, style = _a.style, trigger = _a.trigger, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, actionMenuList = _a.children, portal = _a.portal, props = tslib.__rest(_a, ["className", "style", "trigger", "placement", "children", "portal"]);
-    var _c = tslib.__read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
-    var _d = tslib.__read(React.useState('first'), 2), focusStrategy = _d[0], setFocusStrategy = _d[1];
+    var className = _a.className, style = _a.style, trigger = _a.trigger, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, actionMenuList = _a.children, portal = _a.portal, _c = _a.renderInTrigger, renderInTrigger = _c === void 0 ? false : _c, props = tslib.__rest(_a, ["className", "style", "trigger", "placement", "children", "portal", "renderInTrigger"]);
+    var _d = tslib.__read(React.useState(false), 2), open = _d[0], setOpen = _d[1];
+    var _e = tslib.__read(React.useState('first'), 2), focusStrategy = _e[0], setFocusStrategy = _e[1];
     var triggerRef = React.useRef(null);
     var actionMenuRef = useSharedRef(ref);
     var actionMenuListRef = useSharedRef(actionMenuList.props.ref);
-    var _e = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _e[0];
+    var _f = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _f[0];
     var handleTriggerClick = React.useCallback(function (event) {
         // istanbul ignore else
         if (!event.defaultPrevented) {
@@ -5083,8 +5083,9 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
         }
     }, [open]);
     var handleTriggerKeyDown = React.useCallback(function (event) {
+        var _a;
         // istanbul ignore else
-        if ([ArrowDown, ArrowUp].includes(event.key) && !open) {
+        if ([ArrowDown, ArrowUp].includes(event.key)) {
             // prevent page from scrolling if the user triggers the action menu
             // via an "ArrowDown" key press
             event.preventDefault();
@@ -5092,22 +5093,14 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
             // default is prevented to perform as normal
             event.defaultPrevented = false;
             setFocusStrategy(event.key === ArrowUp ? 'last' : 'first');
-            setOpen(true);
+            if (open) {
+                (_a = actionMenuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                setOpen(true);
+            }
         }
     }, [open]);
-    var triggerProps = React.useMemo(function () {
-        return {
-            ref: triggerRef,
-            id: triggerId,
-            onClick: handleTriggerClick,
-            onKeyDown: handleTriggerKeyDown,
-            'aria-expanded': open,
-            'aria-haspopup': 'menu'
-        };
-    }, [handleTriggerClick, open]);
-    var actionMenuTrigger = React__default["default"].isValidElement(trigger)
-        ? React__default["default"].cloneElement(trigger, triggerProps)
-        : trigger(triggerProps, open);
     var handleClickOutside = React.useCallback(function (event) {
         var _a, _b;
         if (!((_a = actionMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
@@ -5134,16 +5127,41 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
             (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         }
     }, [open]);
+    var overlay = (React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ ref: actionMenuRef, role: "presentation", className: classNames__default["default"]('ActionMenu', className), open: open, onOpenChange: setOpen, target: triggerRef, placement: placement, offset: 4, portal: portal, style: tslib.__assign({ display: !open ? 'none' : undefined }, style) }, props), React__default["default"].cloneElement(actionMenuList, {
+        ref: actionMenuListRef,
+        role: 'menu',
+        onAction: handleAction,
+        'aria-labelledby': triggerId,
+        focusStrategy: focusStrategy,
+        focusDisabledOptions: true
+    })));
+    var triggerProps = React.useMemo(function () {
+        return {
+            ref: triggerRef,
+            id: triggerId,
+            onClick: handleTriggerClick,
+            onKeyDown: handleTriggerKeyDown,
+            'aria-expanded': open,
+            'aria-haspopup': 'menu'
+        };
+    }, [handleTriggerClick, open]);
+    if (renderInTrigger) {
+        // istanbul ignore next
+        if (portal && process.env.NODE_ENV !== 'production') {
+            console.warn('renderInTrigger is incompatible with portal.');
+        }
+        // istanbul ignore next
+        if (React__default["default"].isValidElement(trigger)) {
+            console.warn('renderInTrigger requires the use of a trigger function, rather than a prerendered trigger ReactElement.');
+        }
+        triggerProps.children = overlay;
+    }
+    var actionMenuTrigger = React__default["default"].isValidElement(trigger)
+        ? React__default["default"].cloneElement(trigger, triggerProps)
+        : trigger(tslib.__assign(tslib.__assign({}, triggerProps), { children: overlay }), open);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: triggerProps.ref }, actionMenuTrigger),
-        React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ ref: actionMenuRef, role: "presentation", className: classNames__default["default"]('ActionMenu', className), open: open, onOpenChange: setOpen, target: triggerRef, placement: placement, offset: 4, portal: portal, style: tslib.__assign({ display: !open ? 'none' : undefined }, style) }, props), React__default["default"].cloneElement(actionMenuList, {
-            ref: actionMenuListRef,
-            role: 'menu',
-            onAction: handleAction,
-            'aria-labelledby': triggerId,
-            focusStrategy: focusStrategy,
-            focusDisabledOptions: true
-        }))));
+        renderInTrigger ? null : overlay));
 });
 ActionMenu.displayName = 'ActionMenu';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.18.4-canary.f4a0db5c",
+  "version": "6.18.5-canary.11d89de9",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",