@deque/cauldron-react 6.18.4-canary.611629ae → 6.18.4-canary.8f96513c

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>, 'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'> & {
2
+ type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, '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,14 +8,6 @@ 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;
19
11
  } & Pick<{
20
12
  target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
21
13
  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, _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];
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];
5074
5074
  var triggerRef = React.useRef(null);
5075
5075
  var actionMenuRef = useSharedRef(ref);
5076
5076
  var actionMenuListRef = useSharedRef(actionMenuList.props.ref);
5077
- var _f = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _f[0];
5077
+ var _e = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _e[0];
5078
5078
  var handleTriggerClick = React.useCallback(function (event) {
5079
5079
  // istanbul ignore else
5080
5080
  if (!event.defaultPrevented) {
@@ -5083,9 +5083,8 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
5083
5083
  }
5084
5084
  }, [open]);
5085
5085
  var handleTriggerKeyDown = React.useCallback(function (event) {
5086
- var _a;
5087
5086
  // istanbul ignore else
5088
- if ([ArrowDown, ArrowUp].includes(event.key)) {
5087
+ if ([ArrowDown, ArrowUp].includes(event.key) && !open) {
5089
5088
  // prevent page from scrolling if the user triggers the action menu
5090
5089
  // via an "ArrowDown" key press
5091
5090
  event.preventDefault();
@@ -5093,14 +5092,22 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
5093
5092
  // default is prevented to perform as normal
5094
5093
  event.defaultPrevented = false;
5095
5094
  setFocusStrategy(event.key === ArrowUp ? 'last' : 'first');
5096
- if (open) {
5097
- (_a = actionMenuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
5098
- }
5099
- else {
5100
- setOpen(true);
5101
- }
5095
+ setOpen(true);
5102
5096
  }
5103
5097
  }, [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);
5104
5111
  var handleClickOutside = React.useCallback(function (event) {
5105
5112
  var _a, _b;
5106
5113
  if (!((_a = actionMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
@@ -5127,41 +5134,16 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
5127
5134
  (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.focus();
5128
5135
  }
5129
5136
  }, [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);
5162
5137
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
5163
5138
  React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: triggerProps.ref }, actionMenuTrigger),
5164
- renderInTrigger ? null : overlay));
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
+ }))));
5165
5147
  });
5166
5148
  ActionMenu.displayName = 'ActionMenu';
5167
5149
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "6.18.4-canary.611629ae",
3
+ "version": "6.18.4-canary.8f96513c",
4
4
  "license": "MPL-2.0",
5
5
  "description": "Fully accessible react components library for Deque Cauldron",
6
6
  "homepage": "https://cauldron.dequelabs.com/",