@vuu-ui/vuu-popups 0.13.111-alpha.2 → 0.13.111
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 +3 -8
- package/cjs/popup-menu/PopupMenu.js.map +1 -1
- package/cjs/popup-menu/usePopupMenu.js +1 -12
- package/cjs/popup-menu/usePopupMenu.js.map +1 -1
- package/esm/popup-menu/PopupMenu.js +3 -8
- package/esm/popup-menu/PopupMenu.js.map +1 -1
- package/esm/popup-menu/usePopupMenu.js +1 -12
- package/esm/popup-menu/usePopupMenu.js.map +1 -1
- package/package.json +7 -7
- package/types/popup-menu/PopupMenu.d.ts +3 -2
- package/types/popup-menu/usePopupMenu.d.ts +2 -2
|
@@ -13,8 +13,6 @@ 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",
|
|
18
16
|
className,
|
|
19
17
|
disabled = false,
|
|
20
18
|
label,
|
|
@@ -28,8 +26,8 @@ const PopupMenu = ({
|
|
|
28
26
|
onMenuClose,
|
|
29
27
|
onMenuOpen,
|
|
30
28
|
popupPlacement = "below-right",
|
|
31
|
-
sentiment = "neutral",
|
|
32
29
|
tabIndex = 0,
|
|
30
|
+
variant = "secondary",
|
|
33
31
|
...htmlAttributes
|
|
34
32
|
}) => {
|
|
35
33
|
const targetWindow = window.useWindow();
|
|
@@ -41,7 +39,6 @@ const PopupMenu = ({
|
|
|
41
39
|
const id = vuuUtils.useId(idProp);
|
|
42
40
|
const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu.usePopupMenu({
|
|
43
41
|
anchorElement,
|
|
44
|
-
"aria-label": ariaLabel,
|
|
45
42
|
id,
|
|
46
43
|
menuActionHandler,
|
|
47
44
|
menuBuilder,
|
|
@@ -60,13 +57,12 @@ const PopupMenu = ({
|
|
|
60
57
|
...htmlAttributes,
|
|
61
58
|
...ariaAttributes,
|
|
62
59
|
...buttonProps,
|
|
63
|
-
appearance,
|
|
64
60
|
className: cx(classBase, className, `${classBase}-withCaption`, {
|
|
65
61
|
"saltButton-active": menuOpen
|
|
66
62
|
}),
|
|
67
63
|
disabled,
|
|
68
64
|
ref: rootRef,
|
|
69
|
-
|
|
65
|
+
variant: "secondary",
|
|
70
66
|
children: [
|
|
71
67
|
icon ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: icon }) : null,
|
|
72
68
|
label
|
|
@@ -80,14 +76,13 @@ const PopupMenu = ({
|
|
|
80
76
|
...htmlAttributes,
|
|
81
77
|
...ariaAttributes,
|
|
82
78
|
...buttonProps,
|
|
83
|
-
appearance,
|
|
84
79
|
className: cx(classBase, className, {
|
|
85
80
|
"saltButton-active": menuOpen
|
|
86
81
|
}),
|
|
87
82
|
disabled,
|
|
88
83
|
icon,
|
|
89
84
|
ref: rootRef,
|
|
90
|
-
|
|
85
|
+
variant
|
|
91
86
|
}
|
|
92
87
|
);
|
|
93
88
|
} 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 extends 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 variant?: ButtonProps[\"variant\"];\n}\n\nexport const PopupMenu = ({\n anchorElement,\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 tabIndex = 0,\n variant = \"secondary\",\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 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 className={cx(classBase, className, `${classBase}-withCaption`, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n ref={rootRef}\n variant=\"secondary\"\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 className={cx(classBase, className, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n icon={icon}\n ref={rootRef}\n variant={variant}\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;AAmDX,MAAM,YAAY,CAAC;AAAA,EACxB,aAAA;AAAA,EACA,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,QAAW,GAAA,CAAA;AAAA,EACX,OAAU,GAAA,WAAA;AAAA,EACV,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,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,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,OAAQ,EAAA,WAAA;AAAA,QAEP,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,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,7 +6,6 @@ var vuuContextMenu = require('@vuu-ui/vuu-context-menu');
|
|
|
6
6
|
|
|
7
7
|
const usePopupMenu = ({
|
|
8
8
|
anchorElement,
|
|
9
|
-
"aria-label": ariaLabel = "Popup menu",
|
|
10
9
|
id,
|
|
11
10
|
menuActionHandler,
|
|
12
11
|
menuBuilder,
|
|
@@ -25,14 +24,6 @@ const usePopupMenu = ({
|
|
|
25
24
|
_setMenuOpen(isOpen);
|
|
26
25
|
if (isOpen) {
|
|
27
26
|
onMenuOpen?.();
|
|
28
|
-
setTimeout(() => {
|
|
29
|
-
const firstOption = document.activeElement?.querySelector(
|
|
30
|
-
".saltMenuItem"
|
|
31
|
-
);
|
|
32
|
-
firstOption?.focus();
|
|
33
|
-
}, 40);
|
|
34
|
-
} else {
|
|
35
|
-
suppressShowMenuRef.current = false;
|
|
36
27
|
}
|
|
37
28
|
},
|
|
38
29
|
[onMenuOpen]
|
|
@@ -40,7 +31,7 @@ const usePopupMenu = ({
|
|
|
40
31
|
const showContextMenu = vuuContextMenu.useContextMenu(menuBuilder, menuActionHandler);
|
|
41
32
|
const handleMenuOpenChange = react.useCallback(
|
|
42
33
|
(isOpen) => {
|
|
43
|
-
if (
|
|
34
|
+
if (isOpen === false) {
|
|
44
35
|
setMenuOpen(false);
|
|
45
36
|
onMenuClose?.();
|
|
46
37
|
}
|
|
@@ -52,7 +43,6 @@ const usePopupMenu = ({
|
|
|
52
43
|
if (suppressShowMenuRef.current) {
|
|
53
44
|
suppressShowMenuRef.current = false;
|
|
54
45
|
} else {
|
|
55
|
-
suppressShowMenuRef.current = true;
|
|
56
46
|
const anchorEl = anchorElement?.current ?? rootRef.current;
|
|
57
47
|
if (anchorEl) {
|
|
58
48
|
const {
|
|
@@ -84,7 +74,6 @@ const usePopupMenu = ({
|
|
|
84
74
|
);
|
|
85
75
|
const ariaAttributes = {
|
|
86
76
|
"aria-controls": menuOpen ? `${id}-menu` : void 0,
|
|
87
|
-
"aria-label": ariaLabel,
|
|
88
77
|
"aria-expanded": menuOpen,
|
|
89
78
|
"aria-haspopup": "menu"
|
|
90
79
|
};
|
|
@@ -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 | \"
|
|
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 === false) {\n setMenuOpen(false);\n onMenuClose?.();\n }\n // // If user has clicked the MenuButton whilst menu is open, we want to close it.\n // // The PopupService will close it for us as a 'click-away' event. We don't want\n // // that click on the button to re-open it.\n // if (reasonIsClickAway(reason)) {\n // const target = reason.mouseEvt.target as HTMLElement;\n // if (target === rootRef.current) {\n // suppressShowMenuRef.current = true;\n // }\n // onMenuClose?.(reason);\n // } else {\n // requestAnimationFrame(() => {\n // onMenuClose?.(reason);\n // if (tabIndex !== -1 && reason?.type !== \"tab-away\") {\n // rootRef.current?.focus();\n // }\n // });\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 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-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":";;;;;;AA6BO,MAAM,eAAe,CAAC;AAAA,EAC3B,aAAA;AAAA,EACA,EAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,CAAC,QAAA,EAAU,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC/C,EAAM,MAAA,mBAAA,GAAsBC,aAAO,KAAK,CAAA;AACxC,EAAM,MAAA,OAAA,GAAUA,aAA0B,IAAI,CAAA;AAE9C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,MAAoB,KAAA;AACnB,MAAA,YAAA,CAAa,MAAM,CAAA;AACnB,MAAA,IAAI,MAAQ,EAAA;AACV,QAAa,UAAA,IAAA;AAAA;AACf,KACF;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAM,MAAA,eAAA,GAAkBC,6BAAe,CAAA,WAAA,EAAa,iBAAiB,CAAA;AAErE,EAAA,MAAM,oBAAuB,GAAAD,iBAAA;AAAA,IAC3B,CAAC,MAAoB,KAAA;AACnB,MAAA,IAAI,WAAW,KAAO,EAAA;AACpB,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAc,WAAA,IAAA;AAAA;AAChB,KAkBF;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,GAC3B;AAEA,EAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,IACf,CAAC,CAA+B,KAAA;AAC9B,MAAA,IAAI,oBAAoB,OAAS,EAAA;AAC/B,QAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAAA,OACzB,MAAA;AACL,QAAM,MAAA,QAAA,GAAW,aAAe,EAAA,OAAA,IAAW,OAAQ,CAAA,OAAA;AACnD,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA;AAAA,YACJ,IAAM,EAAA,CAAA;AAAA,YACN,GAAK,EAAA;AAAA;AAAA,WAEH,GAAAE,uDAAA,CAA4B,QAAU,EAAA,cAAA,EAAgB,GAAG,CAAC,CAAA;AAC9D,UAAA,WAAA,CAAY,IAAI,CAAA;AAEhB,UAAgB,eAAA,CAAA,CAAA,EAAG,cAAc,WAAa,EAAA;AAAA;AAAA;AAAA,YAG5C,YAAc,EAAA,oBAAA;AAAA,YACd,CAAA;AAAA,YACA;AAAA;AAAA,WAED,CAAA;AAAA;AACH;AACF,KACF;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,cAAiC,GAAA;AAAA,IACrC,eAAiB,EAAA,QAAA,GAAW,CAAG,EAAA,EAAE,CAAU,KAAA,CAAA,GAAA,KAAA,CAAA;AAAA,IAC3C,eAAiB,EAAA,QAAA;AAAA,IACjB,eAAiB,EAAA;AAAA,GACnB;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,OAAS,EAAA,QAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,OAAO,EAAE,cAAA,EAAgB,WAAa,EAAA,QAAA,EAAU,OAAQ,EAAA;AAC1D;;;;"}
|
|
@@ -11,8 +11,6 @@ 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",
|
|
16
14
|
className,
|
|
17
15
|
disabled = false,
|
|
18
16
|
label,
|
|
@@ -26,8 +24,8 @@ const PopupMenu = ({
|
|
|
26
24
|
onMenuClose,
|
|
27
25
|
onMenuOpen,
|
|
28
26
|
popupPlacement = "below-right",
|
|
29
|
-
sentiment = "neutral",
|
|
30
27
|
tabIndex = 0,
|
|
28
|
+
variant = "secondary",
|
|
31
29
|
...htmlAttributes
|
|
32
30
|
}) => {
|
|
33
31
|
const targetWindow = useWindow();
|
|
@@ -39,7 +37,6 @@ const PopupMenu = ({
|
|
|
39
37
|
const id = useId(idProp);
|
|
40
38
|
const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({
|
|
41
39
|
anchorElement,
|
|
42
|
-
"aria-label": ariaLabel,
|
|
43
40
|
id,
|
|
44
41
|
menuActionHandler,
|
|
45
42
|
menuBuilder,
|
|
@@ -58,13 +55,12 @@ const PopupMenu = ({
|
|
|
58
55
|
...htmlAttributes,
|
|
59
56
|
...ariaAttributes,
|
|
60
57
|
...buttonProps,
|
|
61
|
-
appearance,
|
|
62
58
|
className: cx(classBase, className, `${classBase}-withCaption`, {
|
|
63
59
|
"saltButton-active": menuOpen
|
|
64
60
|
}),
|
|
65
61
|
disabled,
|
|
66
62
|
ref: rootRef,
|
|
67
|
-
|
|
63
|
+
variant: "secondary",
|
|
68
64
|
children: [
|
|
69
65
|
icon ? /* @__PURE__ */ jsx(Icon, { name: icon }) : null,
|
|
70
66
|
label
|
|
@@ -78,14 +74,13 @@ const PopupMenu = ({
|
|
|
78
74
|
...htmlAttributes,
|
|
79
75
|
...ariaAttributes,
|
|
80
76
|
...buttonProps,
|
|
81
|
-
appearance,
|
|
82
77
|
className: cx(classBase, className, {
|
|
83
78
|
"saltButton-active": menuOpen
|
|
84
79
|
}),
|
|
85
80
|
disabled,
|
|
86
81
|
icon,
|
|
87
82
|
ref: rootRef,
|
|
88
|
-
|
|
83
|
+
variant
|
|
89
84
|
}
|
|
90
85
|
);
|
|
91
86
|
} 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 extends 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 variant?: ButtonProps[\"variant\"];\n}\n\nexport const PopupMenu = ({\n anchorElement,\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 tabIndex = 0,\n variant = \"secondary\",\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 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 className={cx(classBase, className, `${classBase}-withCaption`, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n ref={rootRef}\n variant=\"secondary\"\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 className={cx(classBase, className, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n icon={icon}\n ref={rootRef}\n variant={variant}\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;AAmDX,MAAM,YAAY,CAAC;AAAA,EACxB,aAAA;AAAA,EACA,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,QAAW,GAAA,CAAA;AAAA,EACX,OAAU,GAAA,WAAA;AAAA,EACV,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,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,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,OAAQ,EAAA,WAAA;AAAA,QAEP,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,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,7 +4,6 @@ import { useContextMenu } from '@vuu-ui/vuu-context-menu';
|
|
|
4
4
|
|
|
5
5
|
const usePopupMenu = ({
|
|
6
6
|
anchorElement,
|
|
7
|
-
"aria-label": ariaLabel = "Popup menu",
|
|
8
7
|
id,
|
|
9
8
|
menuActionHandler,
|
|
10
9
|
menuBuilder,
|
|
@@ -23,14 +22,6 @@ const usePopupMenu = ({
|
|
|
23
22
|
_setMenuOpen(isOpen);
|
|
24
23
|
if (isOpen) {
|
|
25
24
|
onMenuOpen?.();
|
|
26
|
-
setTimeout(() => {
|
|
27
|
-
const firstOption = document.activeElement?.querySelector(
|
|
28
|
-
".saltMenuItem"
|
|
29
|
-
);
|
|
30
|
-
firstOption?.focus();
|
|
31
|
-
}, 40);
|
|
32
|
-
} else {
|
|
33
|
-
suppressShowMenuRef.current = false;
|
|
34
25
|
}
|
|
35
26
|
},
|
|
36
27
|
[onMenuOpen]
|
|
@@ -38,7 +29,7 @@ const usePopupMenu = ({
|
|
|
38
29
|
const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);
|
|
39
30
|
const handleMenuOpenChange = useCallback(
|
|
40
31
|
(isOpen) => {
|
|
41
|
-
if (
|
|
32
|
+
if (isOpen === false) {
|
|
42
33
|
setMenuOpen(false);
|
|
43
34
|
onMenuClose?.();
|
|
44
35
|
}
|
|
@@ -50,7 +41,6 @@ const usePopupMenu = ({
|
|
|
50
41
|
if (suppressShowMenuRef.current) {
|
|
51
42
|
suppressShowMenuRef.current = false;
|
|
52
43
|
} else {
|
|
53
|
-
suppressShowMenuRef.current = true;
|
|
54
44
|
const anchorEl = anchorElement?.current ?? rootRef.current;
|
|
55
45
|
if (anchorEl) {
|
|
56
46
|
const {
|
|
@@ -82,7 +72,6 @@ const usePopupMenu = ({
|
|
|
82
72
|
);
|
|
83
73
|
const ariaAttributes = {
|
|
84
74
|
"aria-controls": menuOpen ? `${id}-menu` : void 0,
|
|
85
|
-
"aria-label": ariaLabel,
|
|
86
75
|
"aria-expanded": menuOpen,
|
|
87
76
|
"aria-haspopup": "menu"
|
|
88
77
|
};
|
|
@@ -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 | \"
|
|
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 === false) {\n setMenuOpen(false);\n onMenuClose?.();\n }\n // // If user has clicked the MenuButton whilst menu is open, we want to close it.\n // // The PopupService will close it for us as a 'click-away' event. We don't want\n // // that click on the button to re-open it.\n // if (reasonIsClickAway(reason)) {\n // const target = reason.mouseEvt.target as HTMLElement;\n // if (target === rootRef.current) {\n // suppressShowMenuRef.current = true;\n // }\n // onMenuClose?.(reason);\n // } else {\n // requestAnimationFrame(() => {\n // onMenuClose?.(reason);\n // if (tabIndex !== -1 && reason?.type !== \"tab-away\") {\n // rootRef.current?.focus();\n // }\n // });\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 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-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":";;;;AA6BO,MAAM,eAAe,CAAC;AAAA,EAC3B,aAAA;AAAA,EACA,EAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,CAAC,QAAA,EAAU,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAC/C,EAAM,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA;AACxC,EAAM,MAAA,OAAA,GAAU,OAA0B,IAAI,CAAA;AAE9C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,MAAoB,KAAA;AACnB,MAAA,YAAA,CAAa,MAAM,CAAA;AACnB,MAAA,IAAI,MAAQ,EAAA;AACV,QAAa,UAAA,IAAA;AAAA;AACf,KACF;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAM,MAAA,eAAA,GAAkB,cAAe,CAAA,WAAA,EAAa,iBAAiB,CAAA;AAErE,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,MAAoB,KAAA;AACnB,MAAA,IAAI,WAAW,KAAO,EAAA;AACpB,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAc,WAAA,IAAA;AAAA;AAChB,KAkBF;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,GAC3B;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,CAA+B,KAAA;AAC9B,MAAA,IAAI,oBAAoB,OAAS,EAAA;AAC/B,QAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAAA,OACzB,MAAA;AACL,QAAM,MAAA,QAAA,GAAW,aAAe,EAAA,OAAA,IAAW,OAAQ,CAAA,OAAA;AACnD,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA;AAAA,YACJ,IAAM,EAAA,CAAA;AAAA,YACN,GAAK,EAAA;AAAA;AAAA,WAEH,GAAA,2BAAA,CAA4B,QAAU,EAAA,cAAA,EAAgB,GAAG,CAAC,CAAA;AAC9D,UAAA,WAAA,CAAY,IAAI,CAAA;AAEhB,UAAgB,eAAA,CAAA,CAAA,EAAG,cAAc,WAAa,EAAA;AAAA;AAAA;AAAA,YAG5C,YAAc,EAAA,oBAAA;AAAA,YACd,CAAA;AAAA,YACA;AAAA;AAAA,WAED,CAAA;AAAA;AACH;AACF,KACF;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,cAAiC,GAAA;AAAA,IACrC,eAAiB,EAAA,QAAA,GAAW,CAAG,EAAA,EAAE,CAAU,KAAA,CAAA,GAAA,KAAA,CAAA;AAAA,IAC3C,eAAiB,EAAA,QAAA;AAAA,IACjB,eAAiB,EAAA;AAAA,GACnB;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,OAAS,EAAA,QAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,OAAO,EAAE,cAAA,EAAgB,WAAa,EAAA,QAAA,EAAU,OAAQ,EAAA;AAC1D;;;;"}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.111
|
|
2
|
+
"version": "0.13.111",
|
|
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.48.0",
|
|
8
8
|
"@salt-ds/styles": "0.2.1",
|
|
9
9
|
"@salt-ds/window": "0.1.1",
|
|
10
|
-
"@vuu-ui/vuu-context-menu": "0.13.111
|
|
11
|
-
"@vuu-ui/vuu-data-types": "0.13.111
|
|
12
|
-
"@vuu-ui/vuu-layout": "0.13.111
|
|
13
|
-
"@vuu-ui/vuu-utils": "0.13.111
|
|
14
|
-
"@vuu-ui/vuu-ui-controls": "0.13.111
|
|
10
|
+
"@vuu-ui/vuu-context-menu": "0.13.111",
|
|
11
|
+
"@vuu-ui/vuu-data-types": "0.13.111",
|
|
12
|
+
"@vuu-ui/vuu-layout": "0.13.111",
|
|
13
|
+
"@vuu-ui/vuu-utils": "0.13.111",
|
|
14
|
+
"@vuu-ui/vuu-ui-controls": "0.13.111"
|
|
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
|
|
28
|
+
export interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {
|
|
29
29
|
anchorElement?: RefObject<HTMLElement | null>;
|
|
30
30
|
disabled?: boolean;
|
|
31
31
|
icon?: string;
|
|
@@ -40,5 +40,6 @@ export interface PopupMenuProps extends Pick<ButtonProps, "appearance" | "sentim
|
|
|
40
40
|
onMenuClose?: MenuCloseHandler;
|
|
41
41
|
onMenuOpen?: () => void;
|
|
42
42
|
popupPlacement?: PopupPlacement;
|
|
43
|
+
variant?: ButtonProps["variant"];
|
|
43
44
|
}
|
|
44
|
-
export declare const PopupMenu: ({ anchorElement,
|
|
45
|
+
export declare const PopupMenu: ({ anchorElement, className, disabled, label, icon, id: idProp, menuActionHandler, menuBuilder, menuClassName, menuLocation, menuOptions, onMenuClose, onMenuOpen, popupPlacement, tabIndex, variant, ...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" | "
|
|
4
|
+
export interface PopupMenuHookProps extends Pick<PopupMenuProps, "anchorElement" | "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,
|
|
10
|
+
export declare const usePopupMenu: ({ anchorElement, id, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, onMenuOpen, popupPlacement, tabIndex, }: PopupMenuHookProps) => {
|
|
11
11
|
ariaAttributes: AriaAttributes;
|
|
12
12
|
buttonProps: {
|
|
13
13
|
id: string;
|