@vuu-ui/vuu-popups 0.13.106 → 0.13.108
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.
- package/cjs/popup-menu/PopupMenu.js +8 -3
- package/cjs/popup-menu/PopupMenu.js.map +1 -1
- package/cjs/popup-menu/usePopupMenu.js +12 -1
- package/cjs/popup-menu/usePopupMenu.js.map +1 -1
- package/esm/popup-menu/PopupMenu.js +8 -3
- package/esm/popup-menu/PopupMenu.js.map +1 -1
- package/esm/popup-menu/usePopupMenu.js +12 -1
- package/esm/popup-menu/usePopupMenu.js.map +1 -1
- package/package.json +7 -7
- package/types/popup-menu/PopupMenu.d.ts +2 -3
- package/types/popup-menu/usePopupMenu.d.ts +2 -2
|
@@ -13,6 +13,8 @@ var PopupMenu$1 = require('./PopupMenu.css.js');
|
|
|
13
13
|
const classBase = "vuuPopupMenu";
|
|
14
14
|
const PopupMenu = ({
|
|
15
15
|
anchorElement,
|
|
16
|
+
"aria-label": ariaLabel,
|
|
17
|
+
appearance = "transparent",
|
|
16
18
|
className,
|
|
17
19
|
disabled = false,
|
|
18
20
|
label,
|
|
@@ -26,8 +28,8 @@ const PopupMenu = ({
|
|
|
26
28
|
onMenuClose,
|
|
27
29
|
onMenuOpen,
|
|
28
30
|
popupPlacement = "below-right",
|
|
31
|
+
sentiment = "neutral",
|
|
29
32
|
tabIndex = 0,
|
|
30
|
-
variant = "secondary",
|
|
31
33
|
...htmlAttributes
|
|
32
34
|
}) => {
|
|
33
35
|
const targetWindow = window.useWindow();
|
|
@@ -39,6 +41,7 @@ const PopupMenu = ({
|
|
|
39
41
|
const id = vuuUtils.useId(idProp);
|
|
40
42
|
const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu.usePopupMenu({
|
|
41
43
|
anchorElement,
|
|
44
|
+
"aria-label": ariaLabel,
|
|
42
45
|
id,
|
|
43
46
|
menuActionHandler,
|
|
44
47
|
menuBuilder,
|
|
@@ -57,12 +60,13 @@ const PopupMenu = ({
|
|
|
57
60
|
...htmlAttributes,
|
|
58
61
|
...ariaAttributes,
|
|
59
62
|
...buttonProps,
|
|
63
|
+
appearance,
|
|
60
64
|
className: cx(classBase, className, `${classBase}-withCaption`, {
|
|
61
65
|
"saltButton-active": menuOpen
|
|
62
66
|
}),
|
|
63
67
|
disabled,
|
|
64
68
|
ref: rootRef,
|
|
65
|
-
|
|
69
|
+
sentiment,
|
|
66
70
|
children: [
|
|
67
71
|
icon ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: icon }) : null,
|
|
68
72
|
label
|
|
@@ -76,13 +80,14 @@ const PopupMenu = ({
|
|
|
76
80
|
...htmlAttributes,
|
|
77
81
|
...ariaAttributes,
|
|
78
82
|
...buttonProps,
|
|
83
|
+
appearance,
|
|
79
84
|
className: cx(classBase, className, {
|
|
80
85
|
"saltButton-active": menuOpen
|
|
81
86
|
}),
|
|
82
87
|
disabled,
|
|
83
88
|
icon,
|
|
84
89
|
ref: rootRef,
|
|
85
|
-
|
|
90
|
+
sentiment
|
|
86
91
|
}
|
|
87
92
|
);
|
|
88
93
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, KeyboardEvent, RefObject } from \"react\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { usePopupMenu } from \"./usePopupMenu\";\n\nimport popupMenuCss from \"./PopupMenu.css\";\n\nconst classBase = \"vuuPopupMenu\";\n\nexport type TabAwayClosePopup = {\n closedBy?: string;\n type: \"tab-away\";\n event: KeyboardEvent;\n};\n\nexport type ClickAwayClosePopup = {\n closedBy?: string;\n type: \"click-away\";\n mouseEvt: MouseEvent;\n};\n\nexport type EscapeClosePopup = {\n closedBy?: string;\n event: KeyboardEvent;\n type: \"escape\";\n};\n\nexport type MenuActionClosePopup = {\n closedBy?: string;\n menuId: string;\n options: unknown;\n type: \"menu-action\";\n};\n\nexport type PopupCloseReason =\n | ClickAwayClosePopup\n | EscapeClosePopup\n | MenuActionClosePopup\n | TabAwayClosePopup;\n\nexport type MenuCloseHandler = (reason?: PopupCloseReason) => void;\n\nexport interface PopupMenuProps
|
|
1
|
+
{"version":3,"file":"PopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, KeyboardEvent, RefObject } from \"react\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { usePopupMenu } from \"./usePopupMenu\";\n\nimport popupMenuCss from \"./PopupMenu.css\";\n\nconst classBase = \"vuuPopupMenu\";\n\nexport type TabAwayClosePopup = {\n closedBy?: string;\n type: \"tab-away\";\n event: KeyboardEvent;\n};\n\nexport type ClickAwayClosePopup = {\n closedBy?: string;\n type: \"click-away\";\n mouseEvt: MouseEvent;\n};\n\nexport type EscapeClosePopup = {\n closedBy?: string;\n event: KeyboardEvent;\n type: \"escape\";\n};\n\nexport type MenuActionClosePopup = {\n closedBy?: string;\n menuId: string;\n options: unknown;\n type: \"menu-action\";\n};\n\nexport type PopupCloseReason =\n | ClickAwayClosePopup\n | EscapeClosePopup\n | MenuActionClosePopup\n | TabAwayClosePopup;\n\nexport type MenuCloseHandler = (reason?: PopupCloseReason) => void;\n\nexport interface PopupMenuProps\n extends Pick<ButtonProps, \"appearance\" | \"sentiment\">,\n HTMLAttributes<HTMLButtonElement> {\n anchorElement?: RefObject<HTMLElement | null>;\n disabled?: boolean;\n icon?: string;\n label?: string;\n menuActionHandler?: MenuActionHandler;\n menuBuilder?: MenuBuilder;\n menuClassName?: string;\n menuLocation?: string;\n menuOptions?: { [key: string]: unknown };\n onMenuClose?: MenuCloseHandler;\n onMenuOpen?: () => void;\n popupPlacement?: PopupPlacement;\n}\n\nexport const PopupMenu = ({\n anchorElement,\n \"aria-label\": ariaLabel,\n appearance = \"transparent\",\n className,\n disabled = false,\n label,\n icon = label ? \"chevron-down\" : \"more-vert\",\n id: idProp,\n menuActionHandler,\n menuBuilder,\n menuClassName,\n menuLocation = \"header\",\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement = \"below-right\",\n sentiment = \"neutral\",\n tabIndex = 0,\n ...htmlAttributes\n}: PopupMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-popup-menu\",\n css: popupMenuCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({\n anchorElement,\n \"aria-label\": ariaLabel,\n id,\n menuActionHandler,\n menuBuilder,\n menuClassName,\n menuLocation,\n onMenuClose,\n onMenuOpen,\n menuOptions,\n popupPlacement,\n tabIndex,\n });\n\n if (label) {\n return (\n <Button\n {...htmlAttributes}\n {...ariaAttributes}\n {...buttonProps}\n appearance={appearance}\n className={cx(classBase, className, `${classBase}-withCaption`, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n ref={rootRef}\n sentiment={sentiment}\n >\n {icon ? <Icon name={icon} /> : null}\n {label}\n </Button>\n );\n } else if (icon) {\n return (\n <IconButton\n {...htmlAttributes}\n {...ariaAttributes}\n {...buttonProps}\n appearance={appearance}\n className={cx(classBase, className, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n icon={icon}\n ref={rootRef}\n sentiment={sentiment}\n />\n );\n } else {\n console.error(\"PopupMenu must have a label or an icon (or both)\");\n return null;\n }\n};\n"],"names":["useWindow","useComponentCssInjection","popupMenuCss","useId","usePopupMenu","jsxs","Button","jsx","Icon","IconButton"],"mappings":";;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAoDX,MAAM,YAAY,CAAC;AAAA,EACxB,aAAA;AAAA,EACA,YAAc,EAAA,SAAA;AAAA,EACd,UAAa,GAAA,aAAA;AAAA,EACb,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,KAAA;AAAA,EACA,IAAA,GAAO,QAAQ,cAAiB,GAAA,WAAA;AAAA,EAChC,EAAI,EAAA,MAAA;AAAA,EACJ,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAe,GAAA,QAAA;AAAA,EACf,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAiB,GAAA,aAAA;AAAA,EACjB,SAAY,GAAA,SAAA;AAAA,EACZ,QAAW,GAAA,CAAA;AAAA,EACX,GAAG;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,eAAM,MAAM,CAAA;AAEvB,EAAA,MAAM,EAAE,cAAgB,EAAA,WAAA,EAAa,QAAU,EAAA,OAAA,KAAYC,yBAAa,CAAA;AAAA,IACtE,aAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,EAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,IAAI,KAAO,EAAA;AACT,IACE,uBAAAC,eAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACJ,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,CAAA,EAAG,SAAS,CAAgB,YAAA,CAAA,EAAA;AAAA,UAC9D,mBAAqB,EAAA;AAAA,SACtB,CAAA;AAAA,QACD,QAAA;AAAA,QACA,GAAK,EAAA,OAAA;AAAA,QACL,SAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,mBAAQC,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAM,EAAA,IAAA,EAAM,CAAK,GAAA,IAAA;AAAA,UAC9B;AAAA;AAAA;AAAA,KACH;AAAA,aAEO,IAAM,EAAA;AACf,IACE,uBAAAD,cAAA;AAAA,MAACE,wBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACJ,UAAA;AAAA,QACA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,mBAAqB,EAAA;AAAA,SACtB,CAAA;AAAA,QACD,QAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAK,EAAA,OAAA;AAAA,QACL;AAAA;AAAA,KACF;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,MAAM,kDAAkD,CAAA;AAChE,IAAO,OAAA,IAAA;AAAA;AAEX;;;;"}
|
|
@@ -6,6 +6,7 @@ var vuuContextMenu = require('@vuu-ui/vuu-context-menu');
|
|
|
6
6
|
|
|
7
7
|
const usePopupMenu = ({
|
|
8
8
|
anchorElement,
|
|
9
|
+
"aria-label": ariaLabel = "Popup menu",
|
|
9
10
|
id,
|
|
10
11
|
menuActionHandler,
|
|
11
12
|
menuBuilder,
|
|
@@ -24,6 +25,14 @@ const usePopupMenu = ({
|
|
|
24
25
|
_setMenuOpen(isOpen);
|
|
25
26
|
if (isOpen) {
|
|
26
27
|
onMenuOpen?.();
|
|
28
|
+
setTimeout(() => {
|
|
29
|
+
const firstOption = document.activeElement?.querySelector(
|
|
30
|
+
".saltMenuItem"
|
|
31
|
+
);
|
|
32
|
+
firstOption?.focus();
|
|
33
|
+
}, 40);
|
|
34
|
+
} else {
|
|
35
|
+
suppressShowMenuRef.current = false;
|
|
27
36
|
}
|
|
28
37
|
},
|
|
29
38
|
[onMenuOpen]
|
|
@@ -31,7 +40,7 @@ const usePopupMenu = ({
|
|
|
31
40
|
const showContextMenu = vuuContextMenu.useContextMenu(menuBuilder, menuActionHandler);
|
|
32
41
|
const handleMenuOpenChange = react.useCallback(
|
|
33
42
|
(isOpen) => {
|
|
34
|
-
if (isOpen
|
|
43
|
+
if (!isOpen) {
|
|
35
44
|
setMenuOpen(false);
|
|
36
45
|
onMenuClose?.();
|
|
37
46
|
}
|
|
@@ -43,6 +52,7 @@ const usePopupMenu = ({
|
|
|
43
52
|
if (suppressShowMenuRef.current) {
|
|
44
53
|
suppressShowMenuRef.current = false;
|
|
45
54
|
} else {
|
|
55
|
+
suppressShowMenuRef.current = true;
|
|
46
56
|
const anchorEl = anchorElement?.current ?? rootRef.current;
|
|
47
57
|
if (anchorEl) {
|
|
48
58
|
const {
|
|
@@ -74,6 +84,7 @@ const usePopupMenu = ({
|
|
|
74
84
|
);
|
|
75
85
|
const ariaAttributes = {
|
|
76
86
|
"aria-controls": menuOpen ? `${id}-menu` : void 0,
|
|
87
|
+
"aria-label": ariaLabel,
|
|
77
88
|
"aria-expanded": menuOpen,
|
|
78
89
|
"aria-haspopup": "menu"
|
|
79
90
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/usePopupMenu.ts"],"sourcesContent":["import {\n AriaAttributes,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { PopupMenuProps } from \"./PopupMenu\";\nimport { getPositionRelativeToAnchor } from \"../popup/getPositionRelativeToAnchor\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface PopupMenuHookProps\n extends Pick<\n PopupMenuProps,\n | \"anchorElement\"\n | \"menuActionHandler\"\n | \"menuBuilder\"\n | \"menuClassName\"\n | \"menuOptions\"\n | \"onMenuClose\"\n | \"onMenuOpen\"\n > {\n id: string;\n menuLocation: string;\n popupPlacement: PopupPlacement;\n tabIndex: number;\n}\n\nexport const usePopupMenu = ({\n anchorElement,\n id,\n menuActionHandler,\n menuBuilder,\n menuLocation,\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement,\n tabIndex,\n}: PopupMenuHookProps) => {\n const [menuOpen, _setMenuOpen] = useState(false);\n const suppressShowMenuRef = useRef(false);\n const rootRef = useRef<HTMLButtonElement>(null);\n\n const setMenuOpen = useCallback(\n (isOpen: boolean) => {\n _setMenuOpen(isOpen);\n if (isOpen) {\n onMenuOpen?.();\n }\n },\n [onMenuOpen],\n );\n\n const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);\n\n const handleMenuOpenChange = useCallback(\n (isOpen: boolean) => {\n if (isOpen
|
|
1
|
+
{"version":3,"file":"usePopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/usePopupMenu.ts"],"sourcesContent":["import {\n AriaAttributes,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { PopupMenuProps } from \"./PopupMenu\";\nimport { getPositionRelativeToAnchor } from \"../popup/getPositionRelativeToAnchor\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface PopupMenuHookProps\n extends Pick<\n PopupMenuProps,\n | \"anchorElement\"\n | \"aria-label\"\n | \"menuActionHandler\"\n | \"menuBuilder\"\n | \"menuClassName\"\n | \"menuOptions\"\n | \"onMenuClose\"\n | \"onMenuOpen\"\n > {\n id: string;\n menuLocation: string;\n popupPlacement: PopupPlacement;\n tabIndex: number;\n}\n\nexport const usePopupMenu = ({\n anchorElement,\n \"aria-label\": ariaLabel = \"Popup menu\",\n id,\n menuActionHandler,\n menuBuilder,\n menuLocation,\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement,\n tabIndex,\n}: PopupMenuHookProps) => {\n const [menuOpen, _setMenuOpen] = useState(false);\n const suppressShowMenuRef = useRef(false);\n const rootRef = useRef<HTMLButtonElement>(null);\n\n const setMenuOpen = useCallback(\n (isOpen: boolean) => {\n _setMenuOpen(isOpen);\n if (isOpen) {\n onMenuOpen?.();\n setTimeout(() => {\n const firstOption = document.activeElement?.querySelector(\n \".saltMenuItem\",\n ) as HTMLElement;\n firstOption?.focus();\n }, 40);\n } else {\n suppressShowMenuRef.current = false;\n }\n },\n [onMenuOpen],\n );\n\n const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);\n\n const handleMenuOpenChange = useCallback(\n (isOpen: boolean) => {\n if (!isOpen) {\n setMenuOpen(false);\n onMenuClose?.();\n }\n },\n [onMenuClose, setMenuOpen],\n );\n\n const showMenu = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n if (suppressShowMenuRef.current) {\n suppressShowMenuRef.current = false;\n } else {\n suppressShowMenuRef.current = true;\n const anchorEl = anchorElement?.current ?? rootRef.current;\n if (anchorEl) {\n const {\n left: x,\n top: y,\n // width,\n } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);\n setMenuOpen(true);\n\n showContextMenu(e, menuLocation, menuOptions, {\n // className: menuClassName,\n // id: `${id}-menu`,\n onOpenChange: handleMenuOpenChange,\n x,\n y,\n // style: { width: width ? width - 2 : undefined },\n });\n }\n }\n },\n [\n anchorElement,\n popupPlacement,\n setMenuOpen,\n showContextMenu,\n menuLocation,\n menuOptions,\n handleMenuOpenChange,\n ],\n );\n\n const ariaAttributes: AriaAttributes = {\n \"aria-controls\": menuOpen ? `${id}-menu` : undefined,\n \"aria-label\": ariaLabel,\n \"aria-expanded\": menuOpen,\n \"aria-haspopup\": \"menu\",\n };\n\n const buttonProps = {\n id,\n onClick: showMenu,\n tabIndex,\n };\n\n return { ariaAttributes, buttonProps, menuOpen, rootRef };\n};\n"],"names":["useState","useRef","useCallback","useContextMenu","getPositionRelativeToAnchor"],"mappings":"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"}
|
|
@@ -11,6 +11,8 @@ import popupMenuCss from './PopupMenu.css.js';
|
|
|
11
11
|
const classBase = "vuuPopupMenu";
|
|
12
12
|
const PopupMenu = ({
|
|
13
13
|
anchorElement,
|
|
14
|
+
"aria-label": ariaLabel,
|
|
15
|
+
appearance = "transparent",
|
|
14
16
|
className,
|
|
15
17
|
disabled = false,
|
|
16
18
|
label,
|
|
@@ -24,8 +26,8 @@ const PopupMenu = ({
|
|
|
24
26
|
onMenuClose,
|
|
25
27
|
onMenuOpen,
|
|
26
28
|
popupPlacement = "below-right",
|
|
29
|
+
sentiment = "neutral",
|
|
27
30
|
tabIndex = 0,
|
|
28
|
-
variant = "secondary",
|
|
29
31
|
...htmlAttributes
|
|
30
32
|
}) => {
|
|
31
33
|
const targetWindow = useWindow();
|
|
@@ -37,6 +39,7 @@ const PopupMenu = ({
|
|
|
37
39
|
const id = useId(idProp);
|
|
38
40
|
const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({
|
|
39
41
|
anchorElement,
|
|
42
|
+
"aria-label": ariaLabel,
|
|
40
43
|
id,
|
|
41
44
|
menuActionHandler,
|
|
42
45
|
menuBuilder,
|
|
@@ -55,12 +58,13 @@ const PopupMenu = ({
|
|
|
55
58
|
...htmlAttributes,
|
|
56
59
|
...ariaAttributes,
|
|
57
60
|
...buttonProps,
|
|
61
|
+
appearance,
|
|
58
62
|
className: cx(classBase, className, `${classBase}-withCaption`, {
|
|
59
63
|
"saltButton-active": menuOpen
|
|
60
64
|
}),
|
|
61
65
|
disabled,
|
|
62
66
|
ref: rootRef,
|
|
63
|
-
|
|
67
|
+
sentiment,
|
|
64
68
|
children: [
|
|
65
69
|
icon ? /* @__PURE__ */ jsx(Icon, { name: icon }) : null,
|
|
66
70
|
label
|
|
@@ -74,13 +78,14 @@ const PopupMenu = ({
|
|
|
74
78
|
...htmlAttributes,
|
|
75
79
|
...ariaAttributes,
|
|
76
80
|
...buttonProps,
|
|
81
|
+
appearance,
|
|
77
82
|
className: cx(classBase, className, {
|
|
78
83
|
"saltButton-active": menuOpen
|
|
79
84
|
}),
|
|
80
85
|
disabled,
|
|
81
86
|
icon,
|
|
82
87
|
ref: rootRef,
|
|
83
|
-
|
|
88
|
+
sentiment
|
|
84
89
|
}
|
|
85
90
|
);
|
|
86
91
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, KeyboardEvent, RefObject } from \"react\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { usePopupMenu } from \"./usePopupMenu\";\n\nimport popupMenuCss from \"./PopupMenu.css\";\n\nconst classBase = \"vuuPopupMenu\";\n\nexport type TabAwayClosePopup = {\n closedBy?: string;\n type: \"tab-away\";\n event: KeyboardEvent;\n};\n\nexport type ClickAwayClosePopup = {\n closedBy?: string;\n type: \"click-away\";\n mouseEvt: MouseEvent;\n};\n\nexport type EscapeClosePopup = {\n closedBy?: string;\n event: KeyboardEvent;\n type: \"escape\";\n};\n\nexport type MenuActionClosePopup = {\n closedBy?: string;\n menuId: string;\n options: unknown;\n type: \"menu-action\";\n};\n\nexport type PopupCloseReason =\n | ClickAwayClosePopup\n | EscapeClosePopup\n | MenuActionClosePopup\n | TabAwayClosePopup;\n\nexport type MenuCloseHandler = (reason?: PopupCloseReason) => void;\n\nexport interface PopupMenuProps
|
|
1
|
+
{"version":3,"file":"PopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, KeyboardEvent, RefObject } from \"react\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { usePopupMenu } from \"./usePopupMenu\";\n\nimport popupMenuCss from \"./PopupMenu.css\";\n\nconst classBase = \"vuuPopupMenu\";\n\nexport type TabAwayClosePopup = {\n closedBy?: string;\n type: \"tab-away\";\n event: KeyboardEvent;\n};\n\nexport type ClickAwayClosePopup = {\n closedBy?: string;\n type: \"click-away\";\n mouseEvt: MouseEvent;\n};\n\nexport type EscapeClosePopup = {\n closedBy?: string;\n event: KeyboardEvent;\n type: \"escape\";\n};\n\nexport type MenuActionClosePopup = {\n closedBy?: string;\n menuId: string;\n options: unknown;\n type: \"menu-action\";\n};\n\nexport type PopupCloseReason =\n | ClickAwayClosePopup\n | EscapeClosePopup\n | MenuActionClosePopup\n | TabAwayClosePopup;\n\nexport type MenuCloseHandler = (reason?: PopupCloseReason) => void;\n\nexport interface PopupMenuProps\n extends Pick<ButtonProps, \"appearance\" | \"sentiment\">,\n HTMLAttributes<HTMLButtonElement> {\n anchorElement?: RefObject<HTMLElement | null>;\n disabled?: boolean;\n icon?: string;\n label?: string;\n menuActionHandler?: MenuActionHandler;\n menuBuilder?: MenuBuilder;\n menuClassName?: string;\n menuLocation?: string;\n menuOptions?: { [key: string]: unknown };\n onMenuClose?: MenuCloseHandler;\n onMenuOpen?: () => void;\n popupPlacement?: PopupPlacement;\n}\n\nexport const PopupMenu = ({\n anchorElement,\n \"aria-label\": ariaLabel,\n appearance = \"transparent\",\n className,\n disabled = false,\n label,\n icon = label ? \"chevron-down\" : \"more-vert\",\n id: idProp,\n menuActionHandler,\n menuBuilder,\n menuClassName,\n menuLocation = \"header\",\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement = \"below-right\",\n sentiment = \"neutral\",\n tabIndex = 0,\n ...htmlAttributes\n}: PopupMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-popup-menu\",\n css: popupMenuCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({\n anchorElement,\n \"aria-label\": ariaLabel,\n id,\n menuActionHandler,\n menuBuilder,\n menuClassName,\n menuLocation,\n onMenuClose,\n onMenuOpen,\n menuOptions,\n popupPlacement,\n tabIndex,\n });\n\n if (label) {\n return (\n <Button\n {...htmlAttributes}\n {...ariaAttributes}\n {...buttonProps}\n appearance={appearance}\n className={cx(classBase, className, `${classBase}-withCaption`, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n ref={rootRef}\n sentiment={sentiment}\n >\n {icon ? <Icon name={icon} /> : null}\n {label}\n </Button>\n );\n } else if (icon) {\n return (\n <IconButton\n {...htmlAttributes}\n {...ariaAttributes}\n {...buttonProps}\n appearance={appearance}\n className={cx(classBase, className, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n icon={icon}\n ref={rootRef}\n sentiment={sentiment}\n />\n );\n } else {\n console.error(\"PopupMenu must have a label or an icon (or both)\");\n return null;\n }\n};\n"],"names":[],"mappings":";;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAoDX,MAAM,YAAY,CAAC;AAAA,EACxB,aAAA;AAAA,EACA,YAAc,EAAA,SAAA;AAAA,EACd,UAAa,GAAA,aAAA;AAAA,EACb,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,KAAA;AAAA,EACA,IAAA,GAAO,QAAQ,cAAiB,GAAA,WAAA;AAAA,EAChC,EAAI,EAAA,MAAA;AAAA,EACJ,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAe,GAAA,QAAA;AAAA,EACf,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAiB,GAAA,aAAA;AAAA,EACjB,SAAY,GAAA,SAAA;AAAA,EACZ,QAAW,GAAA,CAAA;AAAA,EACX,GAAG;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,EAAA,MAAM,EAAE,cAAgB,EAAA,WAAA,EAAa,QAAU,EAAA,OAAA,KAAY,YAAa,CAAA;AAAA,IACtE,aAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,EAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,IAAI,KAAO,EAAA;AACT,IACE,uBAAA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACJ,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,CAAA,EAAG,SAAS,CAAgB,YAAA,CAAA,EAAA;AAAA,UAC9D,mBAAqB,EAAA;AAAA,SACtB,CAAA;AAAA,QACD,QAAA;AAAA,QACA,GAAK,EAAA,OAAA;AAAA,QACL,SAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,IAAA,EAAM,CAAK,GAAA,IAAA;AAAA,UAC9B;AAAA;AAAA;AAAA,KACH;AAAA,aAEO,IAAM,EAAA;AACf,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACJ,UAAA;AAAA,QACA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,mBAAqB,EAAA;AAAA,SACtB,CAAA;AAAA,QACD,QAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAK,EAAA,OAAA;AAAA,QACL;AAAA;AAAA,KACF;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,MAAM,kDAAkD,CAAA;AAChE,IAAO,OAAA,IAAA;AAAA;AAEX;;;;"}
|
|
@@ -4,6 +4,7 @@ import { useContextMenu } from '@vuu-ui/vuu-context-menu';
|
|
|
4
4
|
|
|
5
5
|
const usePopupMenu = ({
|
|
6
6
|
anchorElement,
|
|
7
|
+
"aria-label": ariaLabel = "Popup menu",
|
|
7
8
|
id,
|
|
8
9
|
menuActionHandler,
|
|
9
10
|
menuBuilder,
|
|
@@ -22,6 +23,14 @@ const usePopupMenu = ({
|
|
|
22
23
|
_setMenuOpen(isOpen);
|
|
23
24
|
if (isOpen) {
|
|
24
25
|
onMenuOpen?.();
|
|
26
|
+
setTimeout(() => {
|
|
27
|
+
const firstOption = document.activeElement?.querySelector(
|
|
28
|
+
".saltMenuItem"
|
|
29
|
+
);
|
|
30
|
+
firstOption?.focus();
|
|
31
|
+
}, 40);
|
|
32
|
+
} else {
|
|
33
|
+
suppressShowMenuRef.current = false;
|
|
25
34
|
}
|
|
26
35
|
},
|
|
27
36
|
[onMenuOpen]
|
|
@@ -29,7 +38,7 @@ const usePopupMenu = ({
|
|
|
29
38
|
const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);
|
|
30
39
|
const handleMenuOpenChange = useCallback(
|
|
31
40
|
(isOpen) => {
|
|
32
|
-
if (isOpen
|
|
41
|
+
if (!isOpen) {
|
|
33
42
|
setMenuOpen(false);
|
|
34
43
|
onMenuClose?.();
|
|
35
44
|
}
|
|
@@ -41,6 +50,7 @@ const usePopupMenu = ({
|
|
|
41
50
|
if (suppressShowMenuRef.current) {
|
|
42
51
|
suppressShowMenuRef.current = false;
|
|
43
52
|
} else {
|
|
53
|
+
suppressShowMenuRef.current = true;
|
|
44
54
|
const anchorEl = anchorElement?.current ?? rootRef.current;
|
|
45
55
|
if (anchorEl) {
|
|
46
56
|
const {
|
|
@@ -72,6 +82,7 @@ const usePopupMenu = ({
|
|
|
72
82
|
);
|
|
73
83
|
const ariaAttributes = {
|
|
74
84
|
"aria-controls": menuOpen ? `${id}-menu` : void 0,
|
|
85
|
+
"aria-label": ariaLabel,
|
|
75
86
|
"aria-expanded": menuOpen,
|
|
76
87
|
"aria-haspopup": "menu"
|
|
77
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/usePopupMenu.ts"],"sourcesContent":["import {\n AriaAttributes,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { PopupMenuProps } from \"./PopupMenu\";\nimport { getPositionRelativeToAnchor } from \"../popup/getPositionRelativeToAnchor\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface PopupMenuHookProps\n extends Pick<\n PopupMenuProps,\n | \"anchorElement\"\n | \"menuActionHandler\"\n | \"menuBuilder\"\n | \"menuClassName\"\n | \"menuOptions\"\n | \"onMenuClose\"\n | \"onMenuOpen\"\n > {\n id: string;\n menuLocation: string;\n popupPlacement: PopupPlacement;\n tabIndex: number;\n}\n\nexport const usePopupMenu = ({\n anchorElement,\n id,\n menuActionHandler,\n menuBuilder,\n menuLocation,\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement,\n tabIndex,\n}: PopupMenuHookProps) => {\n const [menuOpen, _setMenuOpen] = useState(false);\n const suppressShowMenuRef = useRef(false);\n const rootRef = useRef<HTMLButtonElement>(null);\n\n const setMenuOpen = useCallback(\n (isOpen: boolean) => {\n _setMenuOpen(isOpen);\n if (isOpen) {\n onMenuOpen?.();\n }\n },\n [onMenuOpen],\n );\n\n const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);\n\n const handleMenuOpenChange = useCallback(\n (isOpen: boolean) => {\n if (isOpen
|
|
1
|
+
{"version":3,"file":"usePopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/usePopupMenu.ts"],"sourcesContent":["import {\n AriaAttributes,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { PopupMenuProps } from \"./PopupMenu\";\nimport { getPositionRelativeToAnchor } from \"../popup/getPositionRelativeToAnchor\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface PopupMenuHookProps\n extends Pick<\n PopupMenuProps,\n | \"anchorElement\"\n | \"aria-label\"\n | \"menuActionHandler\"\n | \"menuBuilder\"\n | \"menuClassName\"\n | \"menuOptions\"\n | \"onMenuClose\"\n | \"onMenuOpen\"\n > {\n id: string;\n menuLocation: string;\n popupPlacement: PopupPlacement;\n tabIndex: number;\n}\n\nexport const usePopupMenu = ({\n anchorElement,\n \"aria-label\": ariaLabel = \"Popup menu\",\n id,\n menuActionHandler,\n menuBuilder,\n menuLocation,\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement,\n tabIndex,\n}: PopupMenuHookProps) => {\n const [menuOpen, _setMenuOpen] = useState(false);\n const suppressShowMenuRef = useRef(false);\n const rootRef = useRef<HTMLButtonElement>(null);\n\n const setMenuOpen = useCallback(\n (isOpen: boolean) => {\n _setMenuOpen(isOpen);\n if (isOpen) {\n onMenuOpen?.();\n setTimeout(() => {\n const firstOption = document.activeElement?.querySelector(\n \".saltMenuItem\",\n ) as HTMLElement;\n firstOption?.focus();\n }, 40);\n } else {\n suppressShowMenuRef.current = false;\n }\n },\n [onMenuOpen],\n );\n\n const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);\n\n const handleMenuOpenChange = useCallback(\n (isOpen: boolean) => {\n if (!isOpen) {\n setMenuOpen(false);\n onMenuClose?.();\n }\n },\n [onMenuClose, setMenuOpen],\n );\n\n const showMenu = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n if (suppressShowMenuRef.current) {\n suppressShowMenuRef.current = false;\n } else {\n suppressShowMenuRef.current = true;\n const anchorEl = anchorElement?.current ?? rootRef.current;\n if (anchorEl) {\n const {\n left: x,\n top: y,\n // width,\n } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);\n setMenuOpen(true);\n\n showContextMenu(e, menuLocation, menuOptions, {\n // className: menuClassName,\n // id: `${id}-menu`,\n onOpenChange: handleMenuOpenChange,\n x,\n y,\n // style: { width: width ? width - 2 : undefined },\n });\n }\n }\n },\n [\n anchorElement,\n popupPlacement,\n setMenuOpen,\n showContextMenu,\n menuLocation,\n menuOptions,\n handleMenuOpenChange,\n ],\n );\n\n const ariaAttributes: AriaAttributes = {\n \"aria-controls\": menuOpen ? `${id}-menu` : undefined,\n \"aria-label\": ariaLabel,\n \"aria-expanded\": menuOpen,\n \"aria-haspopup\": \"menu\",\n };\n\n const buttonProps = {\n id,\n onClick: showMenu,\n tabIndex,\n };\n\n return { ariaAttributes, buttonProps, menuOpen, rootRef };\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.108",
|
|
3
3
|
"description": "VUU popup components - Context Menu, Dialog etc",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@salt-ds/core": "1.
|
|
7
|
+
"@salt-ds/core": "1.54.1",
|
|
8
8
|
"@salt-ds/styles": "0.2.1",
|
|
9
9
|
"@salt-ds/window": "0.1.1",
|
|
10
|
-
"@vuu-ui/vuu-context-menu": "0.13.
|
|
11
|
-
"@vuu-ui/vuu-data-types": "0.13.
|
|
12
|
-
"@vuu-ui/vuu-layout": "0.13.
|
|
13
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
14
|
-
"@vuu-ui/vuu-ui-controls": "0.13.
|
|
10
|
+
"@vuu-ui/vuu-context-menu": "0.13.108",
|
|
11
|
+
"@vuu-ui/vuu-data-types": "0.13.108",
|
|
12
|
+
"@vuu-ui/vuu-layout": "0.13.108",
|
|
13
|
+
"@vuu-ui/vuu-utils": "0.13.108",
|
|
14
|
+
"@vuu-ui/vuu-ui-controls": "0.13.108"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"clsx": "^2.0.0",
|
|
@@ -25,7 +25,7 @@ export type MenuActionClosePopup = {
|
|
|
25
25
|
};
|
|
26
26
|
export type PopupCloseReason = ClickAwayClosePopup | EscapeClosePopup | MenuActionClosePopup | TabAwayClosePopup;
|
|
27
27
|
export type MenuCloseHandler = (reason?: PopupCloseReason) => void;
|
|
28
|
-
export interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {
|
|
28
|
+
export interface PopupMenuProps extends Pick<ButtonProps, "appearance" | "sentiment">, HTMLAttributes<HTMLButtonElement> {
|
|
29
29
|
anchorElement?: RefObject<HTMLElement | null>;
|
|
30
30
|
disabled?: boolean;
|
|
31
31
|
icon?: string;
|
|
@@ -40,6 +40,5 @@ export interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
40
40
|
onMenuClose?: MenuCloseHandler;
|
|
41
41
|
onMenuOpen?: () => void;
|
|
42
42
|
popupPlacement?: PopupPlacement;
|
|
43
|
-
variant?: ButtonProps["variant"];
|
|
44
43
|
}
|
|
45
|
-
export declare const PopupMenu: ({ anchorElement, className, disabled, label, icon, id: idProp, menuActionHandler, menuBuilder, menuClassName, menuLocation, menuOptions, onMenuClose, onMenuOpen, popupPlacement,
|
|
44
|
+
export declare const PopupMenu: ({ anchorElement, "aria-label": ariaLabel, appearance, className, disabled, label, icon, id: idProp, menuActionHandler, menuBuilder, menuClassName, menuLocation, menuOptions, onMenuClose, onMenuOpen, popupPlacement, sentiment, tabIndex, ...htmlAttributes }: PopupMenuProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { AriaAttributes, MouseEvent } from "react";
|
|
2
2
|
import { PopupMenuProps } from "./PopupMenu";
|
|
3
3
|
import { PopupPlacement } from "../popup/Popup";
|
|
4
|
-
export interface PopupMenuHookProps extends Pick<PopupMenuProps, "anchorElement" | "menuActionHandler" | "menuBuilder" | "menuClassName" | "menuOptions" | "onMenuClose" | "onMenuOpen"> {
|
|
4
|
+
export interface PopupMenuHookProps extends Pick<PopupMenuProps, "anchorElement" | "aria-label" | "menuActionHandler" | "menuBuilder" | "menuClassName" | "menuOptions" | "onMenuClose" | "onMenuOpen"> {
|
|
5
5
|
id: string;
|
|
6
6
|
menuLocation: string;
|
|
7
7
|
popupPlacement: PopupPlacement;
|
|
8
8
|
tabIndex: number;
|
|
9
9
|
}
|
|
10
|
-
export declare const usePopupMenu: ({ anchorElement, id, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, onMenuOpen, popupPlacement, tabIndex, }: PopupMenuHookProps) => {
|
|
10
|
+
export declare const usePopupMenu: ({ anchorElement, "aria-label": ariaLabel, id, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, onMenuOpen, popupPlacement, tabIndex, }: PopupMenuHookProps) => {
|
|
11
11
|
ariaAttributes: AriaAttributes;
|
|
12
12
|
buttonProps: {
|
|
13
13
|
id: string;
|