@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>, '
|
|
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,
|
|
5072
|
-
var
|
|
5073
|
-
var
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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/",
|