@deque/cauldron-react 6.18.4-canary.4e027a1d → 6.18.4-canary.611629ae

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'> & {
2
+ type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'> & {
3
3
  ref: React.RefObject<HTMLButtonElement>;
4
4
  };
5
5
  type ActionMenuTriggerFunction = (props: ActionMenuTriggerProps, open: boolean) => React.ReactElement;
@@ -8,6 +8,14 @@ declare const ActionMenu: React.ForwardRefExoticComponent<{
8
8
  trigger: React.ReactElement | ActionMenuTriggerFunction;
9
9
  /** Render the action menu in a different location in the dom. */
10
10
  portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
11
+ /**
12
+ * Controls whether the menu should render as a child of the trigger, as opposed to
13
+ * rendering as a sibling. Intended for use with nested menu patterns, for example
14
+ * when an `ActionMenu` is nested inside a `TopBar`/`MenuBar`.
15
+ *
16
+ * Only supported if trigger is a function *and* portal is undefined.
17
+ */
18
+ renderInTrigger?: boolean | undefined;
11
19
  } & Pick<{
12
20
  target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
13
21
  placement?: "auto" | import("@floating-ui/utils").Placement | "auto-start" | "auto-end" | undefined;
package/lib/index.js CHANGED
@@ -5068,13 +5068,13 @@ ActionListLinkItem.displayName = 'ActionListLinkItem';
5068
5068
 
5069
5069
  var _a = tslib.__read(['ArrowDown', 'ArrowUp'], 2), ArrowDown = _a[0], ArrowUp = _a[1];
5070
5070
  var ActionMenu = React.forwardRef(function (_a, ref) {
5071
- 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"]);
5072
- var _c = tslib.__read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
5073
- var _d = tslib.__read(React.useState('first'), 2), focusStrategy = _d[0], setFocusStrategy = _d[1];
5071
+ 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"]);
5072
+ var _d = tslib.__read(React.useState(false), 2), open = _d[0], setOpen = _d[1];
5073
+ var _e = tslib.__read(React.useState('first'), 2), focusStrategy = _e[0], setFocusStrategy = _e[1];
5074
5074
  var triggerRef = React.useRef(null);
5075
5075
  var actionMenuRef = useSharedRef(ref);
5076
5076
  var actionMenuListRef = useSharedRef(actionMenuList.props.ref);
5077
- var _e = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _e[0];
5077
+ var _f = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _f[0];
5078
5078
  var handleTriggerClick = React.useCallback(function (event) {
5079
5079
  // istanbul ignore else
5080
5080
  if (!event.defaultPrevented) {
@@ -5083,8 +5083,9 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
5083
5083
  }
5084
5084
  }, [open]);
5085
5085
  var handleTriggerKeyDown = React.useCallback(function (event) {
5086
+ var _a;
5086
5087
  // istanbul ignore else
5087
- if ([ArrowDown, ArrowUp].includes(event.key) && !open) {
5088
+ if ([ArrowDown, ArrowUp].includes(event.key)) {
5088
5089
  // prevent page from scrolling if the user triggers the action menu
5089
5090
  // via an "ArrowDown" key press
5090
5091
  event.preventDefault();
@@ -5092,22 +5093,14 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
5092
5093
  // default is prevented to perform as normal
5093
5094
  event.defaultPrevented = false;
5094
5095
  setFocusStrategy(event.key === ArrowUp ? 'last' : 'first');
5095
- setOpen(true);
5096
+ if (open) {
5097
+ (_a = actionMenuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
5098
+ }
5099
+ else {
5100
+ setOpen(true);
5101
+ }
5096
5102
  }
5097
5103
  }, [open]);
5098
- var triggerProps = React.useMemo(function () {
5099
- return {
5100
- ref: triggerRef,
5101
- id: triggerId,
5102
- onClick: handleTriggerClick,
5103
- onKeyDown: handleTriggerKeyDown,
5104
- 'aria-expanded': open,
5105
- 'aria-haspopup': 'menu'
5106
- };
5107
- }, [handleTriggerClick, open]);
5108
- var actionMenuTrigger = React__default["default"].isValidElement(trigger)
5109
- ? React__default["default"].cloneElement(trigger, triggerProps)
5110
- : trigger(triggerProps, open);
5111
5104
  var handleClickOutside = React.useCallback(function (event) {
5112
5105
  var _a, _b;
5113
5106
  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) {
5134
5127
  (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.focus();
5135
5128
  }
5136
5129
  }, [open]);
5130
+ 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, {
5131
+ ref: actionMenuListRef,
5132
+ role: 'menu',
5133
+ onAction: handleAction,
5134
+ 'aria-labelledby': triggerId,
5135
+ focusStrategy: focusStrategy,
5136
+ focusDisabledOptions: true
5137
+ })));
5138
+ var triggerProps = React.useMemo(function () {
5139
+ return {
5140
+ ref: triggerRef,
5141
+ id: triggerId,
5142
+ onClick: handleTriggerClick,
5143
+ onKeyDown: handleTriggerKeyDown,
5144
+ 'aria-expanded': open,
5145
+ 'aria-haspopup': 'menu'
5146
+ };
5147
+ }, [handleTriggerClick, open]);
5148
+ if (renderInTrigger) {
5149
+ // istanbul ignore next
5150
+ if (portal && process.env.NODE_ENV !== 'production') {
5151
+ console.warn('renderInTrigger is incompatible with portal.');
5152
+ }
5153
+ // istanbul ignore next
5154
+ if (React__default["default"].isValidElement(trigger)) {
5155
+ console.warn('renderInTrigger requires the use of a trigger function, rather than a prerendered trigger ReactElement.');
5156
+ }
5157
+ triggerProps.children = overlay;
5158
+ }
5159
+ var actionMenuTrigger = React__default["default"].isValidElement(trigger)
5160
+ ? React__default["default"].cloneElement(trigger, triggerProps)
5161
+ : trigger(tslib.__assign(tslib.__assign({}, triggerProps), { children: overlay }), open);
5137
5162
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
5138
5163
  React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: triggerProps.ref }, actionMenuTrigger),
5139
- 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, {
5140
- ref: actionMenuListRef,
5141
- role: 'menu',
5142
- onAction: handleAction,
5143
- 'aria-labelledby': triggerId,
5144
- focusStrategy: focusStrategy,
5145
- focusDisabledOptions: true
5146
- }))));
5164
+ renderInTrigger ? null : overlay));
5147
5165
  });
5148
5166
  ActionMenu.displayName = 'ActionMenu';
5149
5167
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "6.18.4-canary.4e027a1d",
3
+ "version": "6.18.4-canary.611629ae",
4
4
  "license": "MPL-2.0",
5
5
  "description": "Fully accessible react components library for Deque Cauldron",
6
6
  "homepage": "https://cauldron.dequelabs.com/",