@vuu-ui/vuu-popups 0.11.2 → 0.12.0
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/vuu-context-menu/src/ContextMenu.css.js +6 -0
- package/cjs/vuu-context-menu/src/ContextMenu.css.js.map +1 -0
- package/cjs/vuu-context-menu/src/ContextMenu.js +48 -0
- package/cjs/vuu-context-menu/src/ContextMenu.js.map +1 -0
- package/cjs/vuu-context-menu/src/ContextMenuProvider.js +11 -0
- package/cjs/vuu-context-menu/src/ContextMenuProvider.js.map +1 -0
- package/cjs/vuu-context-menu/src/menu-utils.js +26 -0
- package/cjs/vuu-context-menu/src/menu-utils.js.map +1 -0
- package/cjs/vuu-context-menu/src/useContextMenu.js +89 -0
- package/cjs/vuu-context-menu/src/useContextMenu.js.map +1 -0
- package/cjs/vuu-popups/src/dialog/useDialog.js.map +1 -0
- package/cjs/vuu-popups/src/dialog-header/DialogHeader.js.map +1 -0
- package/cjs/{index.js → vuu-popups/src/index.js} +0 -14
- package/cjs/vuu-popups/src/index.js.map +1 -0
- package/cjs/vuu-popups/src/notifications/NotificationsCenter.js.map +1 -0
- package/cjs/vuu-popups/src/notifications/NotificationsProvider.js.map +1 -0
- package/cjs/vuu-popups/src/notifications/ToastNotification.js.map +1 -0
- package/cjs/vuu-popups/src/popup/Popup.js.map +1 -0
- package/cjs/vuu-popups/src/popup/getPositionRelativeToAnchor.js.map +1 -0
- package/cjs/vuu-popups/src/popup/popup-service.js.map +1 -0
- package/cjs/vuu-popups/src/popup/useAnchoredPosition.js.map +1 -0
- package/cjs/vuu-popups/src/popup-menu/PopupMenu.js.map +1 -0
- package/cjs/{popup-menu → vuu-popups/src/popup-menu}/usePopupMenu.js +24 -51
- package/cjs/vuu-popups/src/popup-menu/usePopupMenu.js.map +1 -0
- package/cjs/vuu-popups/src/portal/Portal.js.map +1 -0
- package/cjs/vuu-popups/src/portal-deprecated/render-portal.js.map +1 -0
- package/cjs/vuu-popups/src/prompt/Prompt.js.map +1 -0
- package/cjs/vuu-popups/src/tooltip/Tooltip.js.map +1 -0
- package/cjs/vuu-popups/src/tooltip/useTooltip.js.map +1 -0
- package/cjs/vuu-popups/src/tooltip/useTooltipAnchoredPosition.js.map +1 -0
- package/esm/vuu-context-menu/src/ContextMenu.css.js +4 -0
- package/esm/vuu-context-menu/src/ContextMenu.css.js.map +1 -0
- package/esm/vuu-context-menu/src/ContextMenu.js +46 -0
- package/esm/vuu-context-menu/src/ContextMenu.js.map +1 -0
- package/esm/vuu-context-menu/src/ContextMenuProvider.js +9 -0
- package/esm/vuu-context-menu/src/ContextMenuProvider.js.map +1 -0
- package/esm/vuu-context-menu/src/menu-utils.js +23 -0
- package/esm/vuu-context-menu/src/menu-utils.js.map +1 -0
- package/esm/vuu-context-menu/src/useContextMenu.js +87 -0
- package/esm/vuu-context-menu/src/useContextMenu.js.map +1 -0
- package/esm/vuu-popups/src/dialog/useDialog.js.map +1 -0
- package/esm/vuu-popups/src/dialog-header/DialogHeader.js.map +1 -0
- package/esm/{index.js → vuu-popups/src/index.js} +0 -4
- package/esm/{index.js.map → vuu-popups/src/index.js.map} +1 -1
- package/esm/vuu-popups/src/notifications/NotificationsCenter.js.map +1 -0
- package/esm/vuu-popups/src/notifications/NotificationsProvider.js.map +1 -0
- package/esm/vuu-popups/src/notifications/ToastNotification.js.map +1 -0
- package/esm/vuu-popups/src/popup/Popup.js.map +1 -0
- package/esm/vuu-popups/src/popup/getPositionRelativeToAnchor.js.map +1 -0
- package/esm/vuu-popups/src/popup/popup-service.js.map +1 -0
- package/esm/vuu-popups/src/popup/useAnchoredPosition.js.map +1 -0
- package/esm/vuu-popups/src/popup-menu/PopupMenu.js.map +1 -0
- package/esm/vuu-popups/src/popup-menu/usePopupMenu.js +90 -0
- package/esm/vuu-popups/src/popup-menu/usePopupMenu.js.map +1 -0
- package/esm/vuu-popups/src/portal/Portal.js.map +1 -0
- package/esm/vuu-popups/src/portal-deprecated/render-portal.js.map +1 -0
- package/esm/vuu-popups/src/prompt/Prompt.js.map +1 -0
- package/esm/vuu-popups/src/tooltip/Tooltip.js.map +1 -0
- package/esm/vuu-popups/src/tooltip/useTooltip.js.map +1 -0
- package/esm/vuu-popups/src/tooltip/useTooltipAnchoredPosition.js.map +1 -0
- package/package.json +5 -5
- package/types/index.d.ts +0 -1
- package/types/popup/popup-service.d.ts +1 -2
- package/types/popup-menu/PopupMenu.d.ts +1 -1
- package/types/popup-menu/usePopupMenu.d.ts +1 -1
- package/cjs/dialog/useDialog.js.map +0 -1
- package/cjs/dialog-header/DialogHeader.js.map +0 -1
- package/cjs/index.js.map +0 -1
- package/cjs/menu/ContextMenu.js +0 -118
- package/cjs/menu/ContextMenu.js.map +0 -1
- package/cjs/menu/MenuList.css.js +0 -6
- package/cjs/menu/MenuList.css.js.map +0 -1
- package/cjs/menu/MenuList.js +0 -172
- package/cjs/menu/MenuList.js.map +0 -1
- package/cjs/menu/context-menu-provider.js +0 -66
- package/cjs/menu/context-menu-provider.js.map +0 -1
- package/cjs/menu/key-code.js +0 -54
- package/cjs/menu/key-code.js.map +0 -1
- package/cjs/menu/list-dom-utils.js +0 -6
- package/cjs/menu/list-dom-utils.js.map +0 -1
- package/cjs/menu/use-cascade.js +0 -279
- package/cjs/menu/use-cascade.js.map +0 -1
- package/cjs/menu/use-items-with-ids-next.js +0 -68
- package/cjs/menu/use-items-with-ids-next.js.map +0 -1
- package/cjs/menu/use-keyboard-navigation.js +0 -140
- package/cjs/menu/use-keyboard-navigation.js.map +0 -1
- package/cjs/menu/useContextMenu.js +0 -143
- package/cjs/menu/useContextMenu.js.map +0 -1
- package/cjs/menu/utils.js +0 -8
- package/cjs/menu/utils.js.map +0 -1
- package/cjs/notifications/NotificationsCenter.js.map +0 -1
- package/cjs/notifications/NotificationsProvider.js.map +0 -1
- package/cjs/notifications/ToastNotification.js.map +0 -1
- package/cjs/popup/Popup.js.map +0 -1
- package/cjs/popup/getPositionRelativeToAnchor.js.map +0 -1
- package/cjs/popup/popup-service.js.map +0 -1
- package/cjs/popup/useAnchoredPosition.js.map +0 -1
- package/cjs/popup-menu/PopupMenu.js.map +0 -1
- package/cjs/popup-menu/usePopupMenu.js.map +0 -1
- package/cjs/portal/Portal.js.map +0 -1
- package/cjs/portal-deprecated/render-portal.js.map +0 -1
- package/cjs/prompt/Prompt.js.map +0 -1
- package/cjs/tooltip/Tooltip.js.map +0 -1
- package/cjs/tooltip/useTooltip.js.map +0 -1
- package/cjs/tooltip/useTooltipAnchoredPosition.js.map +0 -1
- package/esm/dialog/useDialog.js.map +0 -1
- package/esm/dialog-header/DialogHeader.js.map +0 -1
- package/esm/menu/ContextMenu.js +0 -116
- package/esm/menu/ContextMenu.js.map +0 -1
- package/esm/menu/MenuList.css.js +0 -4
- package/esm/menu/MenuList.css.js.map +0 -1
- package/esm/menu/MenuList.js +0 -165
- package/esm/menu/MenuList.js.map +0 -1
- package/esm/menu/context-menu-provider.js +0 -63
- package/esm/menu/context-menu-provider.js.map +0 -1
- package/esm/menu/key-code.js +0 -50
- package/esm/menu/key-code.js.map +0 -1
- package/esm/menu/list-dom-utils.js +0 -4
- package/esm/menu/list-dom-utils.js.map +0 -1
- package/esm/menu/use-cascade.js +0 -276
- package/esm/menu/use-cascade.js.map +0 -1
- package/esm/menu/use-items-with-ids-next.js +0 -66
- package/esm/menu/use-items-with-ids-next.js.map +0 -1
- package/esm/menu/use-keyboard-navigation.js +0 -138
- package/esm/menu/use-keyboard-navigation.js.map +0 -1
- package/esm/menu/useContextMenu.js +0 -141
- package/esm/menu/useContextMenu.js.map +0 -1
- package/esm/menu/utils.js +0 -5
- package/esm/menu/utils.js.map +0 -1
- package/esm/notifications/NotificationsCenter.js.map +0 -1
- package/esm/notifications/NotificationsProvider.js.map +0 -1
- package/esm/notifications/ToastNotification.js.map +0 -1
- package/esm/popup/Popup.js.map +0 -1
- package/esm/popup/getPositionRelativeToAnchor.js.map +0 -1
- package/esm/popup/popup-service.js.map +0 -1
- package/esm/popup/useAnchoredPosition.js.map +0 -1
- package/esm/popup-menu/PopupMenu.js.map +0 -1
- package/esm/popup-menu/usePopupMenu.js +0 -117
- package/esm/popup-menu/usePopupMenu.js.map +0 -1
- package/esm/portal/Portal.js.map +0 -1
- package/esm/portal-deprecated/render-portal.js.map +0 -1
- package/esm/prompt/Prompt.js.map +0 -1
- package/esm/tooltip/Tooltip.js.map +0 -1
- package/esm/tooltip/useTooltip.js.map +0 -1
- package/esm/tooltip/useTooltipAnchoredPosition.js.map +0 -1
- package/types/menu/ContextMenu.d.ts +0 -16
- package/types/menu/MenuList.d.ts +0 -45
- package/types/menu/aim/aim.d.ts +0 -13
- package/types/menu/aim/corners.d.ts +0 -9
- package/types/menu/aim/utils.d.ts +0 -4
- package/types/menu/context-menu-provider.d.ts +0 -12
- package/types/menu/index.d.ts +0 -4
- package/types/menu/key-code.d.ts +0 -12
- package/types/menu/list-dom-utils.d.ts +0 -4
- package/types/menu/use-cascade.d.ts +0 -26
- package/types/menu/use-items-with-ids-next.d.ts +0 -12
- package/types/menu/use-keyboard-navigation.d.ts +0 -30
- package/types/menu/useContextMenu.d.ts +0 -20
- package/types/menu/utils.d.ts +0 -2
- package/cjs/{dialog → vuu-popups/src/dialog}/useDialog.js +0 -0
- package/cjs/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js +0 -0
- package/cjs/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js.map +0 -0
- package/cjs/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.js +0 -0
- package/cjs/{notifications → vuu-popups/src/notifications}/NotificationsCenter.js +0 -0
- package/cjs/{notifications → vuu-popups/src/notifications}/NotificationsProvider.js +0 -0
- package/cjs/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js +0 -0
- package/cjs/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js.map +0 -0
- package/cjs/{notifications → vuu-popups/src/notifications}/ToastNotification.js +0 -0
- package/cjs/{popup → vuu-popups/src/popup}/Popup.css.js +0 -0
- package/cjs/{popup → vuu-popups/src/popup}/Popup.css.js.map +0 -0
- package/cjs/{popup → vuu-popups/src/popup}/Popup.js +0 -0
- package/cjs/{popup → vuu-popups/src/popup}/getPositionRelativeToAnchor.js +0 -0
- package/cjs/{popup → vuu-popups/src/popup}/popup-service.js +0 -0
- package/cjs/{popup → vuu-popups/src/popup}/useAnchoredPosition.js +0 -0
- package/cjs/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js +0 -0
- package/cjs/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js.map +0 -0
- package/cjs/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.js +2 -2
- package/cjs/{portal → vuu-popups/src/portal}/Portal.css.js +0 -0
- package/cjs/{portal → vuu-popups/src/portal}/Portal.css.js.map +0 -0
- package/cjs/{portal → vuu-popups/src/portal}/Portal.js +0 -0
- package/cjs/{portal-deprecated → vuu-popups/src/portal-deprecated}/render-portal.js +0 -0
- package/cjs/{prompt → vuu-popups/src/prompt}/Prompt.css.js +0 -0
- package/cjs/{prompt → vuu-popups/src/prompt}/Prompt.css.js.map +0 -0
- package/cjs/{prompt → vuu-popups/src/prompt}/Prompt.js +0 -0
- package/cjs/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js +0 -0
- package/cjs/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js.map +0 -0
- package/cjs/{tooltip → vuu-popups/src/tooltip}/Tooltip.js +0 -0
- package/cjs/{tooltip → vuu-popups/src/tooltip}/useTooltip.js +0 -0
- package/cjs/{tooltip → vuu-popups/src/tooltip}/useTooltipAnchoredPosition.js +0 -0
- package/esm/{dialog → vuu-popups/src/dialog}/useDialog.js +0 -0
- package/esm/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js +0 -0
- package/esm/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js.map +0 -0
- package/esm/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.js +0 -0
- package/esm/{notifications → vuu-popups/src/notifications}/NotificationsCenter.js +0 -0
- package/esm/{notifications → vuu-popups/src/notifications}/NotificationsProvider.js +0 -0
- package/esm/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js +0 -0
- package/esm/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js.map +0 -0
- package/esm/{notifications → vuu-popups/src/notifications}/ToastNotification.js +0 -0
- package/esm/{popup → vuu-popups/src/popup}/Popup.css.js +0 -0
- package/esm/{popup → vuu-popups/src/popup}/Popup.css.js.map +0 -0
- package/esm/{popup → vuu-popups/src/popup}/Popup.js +0 -0
- package/esm/{popup → vuu-popups/src/popup}/getPositionRelativeToAnchor.js +0 -0
- package/esm/{popup → vuu-popups/src/popup}/popup-service.js +0 -0
- package/esm/{popup → vuu-popups/src/popup}/useAnchoredPosition.js +0 -0
- package/esm/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js +0 -0
- package/esm/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js.map +0 -0
- package/esm/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.js +2 -2
- /package/esm/{portal → vuu-popups/src/portal}/Portal.css.js +0 -0
- /package/esm/{portal → vuu-popups/src/portal}/Portal.css.js.map +0 -0
- /package/esm/{portal → vuu-popups/src/portal}/Portal.js +0 -0
- /package/esm/{portal-deprecated → vuu-popups/src/portal-deprecated}/render-portal.js +0 -0
- /package/esm/{prompt → vuu-popups/src/prompt}/Prompt.css.js +0 -0
- /package/esm/{prompt → vuu-popups/src/prompt}/Prompt.css.js.map +0 -0
- /package/esm/{prompt → vuu-popups/src/prompt}/Prompt.js +0 -0
- /package/esm/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js +0 -0
- /package/esm/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js.map +0 -0
- /package/esm/{tooltip → vuu-popups/src/tooltip}/Tooltip.js +0 -0
- /package/esm/{tooltip → vuu-popups/src/tooltip}/useTooltip.js +0 -0
- /package/esm/{tooltip → vuu-popups/src/tooltip}/useTooltipAnchoredPosition.js +0 -0
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var contextMenuCss = ".vuuContextMenuPanel {\n &:has([data-icon]) {\n .saltMenuItem {\n padding-left: calc(var(--salt-spacing-400) + var(--salt-spacing-200));\n }\n .saltMenuItem[data-icon]:after {\n --vuu-icon-left: var(--salt-spacing-150);\n --vuu-icon-top: var(--salt-spacing-150);\n }\n .saltMenuItem[aria-haspopup=\"menu\"]:after {\n content: \"\";\n background-color: var(--vuu-icon-color, var(--saltIcon-color, var(--salt-content-secondary-foreground)));\n right: var(--salt-spacing-100);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n mask: var(--vuu-svg-triangle-right) center center / 8px 8px;\n mask-repeat: no-repeat;\n position: absolute;\n transform: rotate(315deg);\n top: var(--salt-spacing-200);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n }\n }\n}";
|
|
4
|
+
|
|
5
|
+
module.exports = contextMenuCss;
|
|
6
|
+
//# sourceMappingURL=ContextMenu.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContextMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var menuUtils = require('./menu-utils.js');
|
|
8
|
+
var ContextMenu$1 = require('./ContextMenu.css.js');
|
|
9
|
+
|
|
10
|
+
const ContextMenu = ({
|
|
11
|
+
menuHandler,
|
|
12
|
+
menuItemDescriptors,
|
|
13
|
+
onOpenChange,
|
|
14
|
+
open,
|
|
15
|
+
x,
|
|
16
|
+
y
|
|
17
|
+
}) => {
|
|
18
|
+
const targetWindow = window.useWindow();
|
|
19
|
+
styles.useComponentCssInjection({
|
|
20
|
+
testId: "vuu-context-menu",
|
|
21
|
+
css: ContextMenu$1,
|
|
22
|
+
window: targetWindow
|
|
23
|
+
});
|
|
24
|
+
const virtualElement = {
|
|
25
|
+
getBoundingClientRect: () => ({
|
|
26
|
+
width: 0,
|
|
27
|
+
height: 0,
|
|
28
|
+
x,
|
|
29
|
+
y,
|
|
30
|
+
top: y,
|
|
31
|
+
right: x,
|
|
32
|
+
bottom: y,
|
|
33
|
+
left: x
|
|
34
|
+
})
|
|
35
|
+
};
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
core.Menu,
|
|
38
|
+
{
|
|
39
|
+
getVirtualElement: () => virtualElement,
|
|
40
|
+
onOpenChange,
|
|
41
|
+
open,
|
|
42
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuPanel, { className: "vuuContextMenuPanel", children: menuUtils.menuItemsFromMenuDescriptors(menuItemDescriptors, menuHandler) })
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
exports.ContextMenu = ContextMenu;
|
|
48
|
+
//# sourceMappingURL=ContextMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContextMenu.js","sources":["../../../../vuu-context-menu/src/ContextMenu.tsx"],"sourcesContent":["import { VirtualElement } from \"@floating-ui/dom\";\nimport { Menu, MenuPanel, MenuProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler } from \"./ContextMenuProvider\";\nimport {\n ContextMenuItemDescriptor,\n menuItemsFromMenuDescriptors,\n} from \"./menu-utils\";\n\nimport contextMenuCss from \"./ContextMenu.css\";\n\nexport interface ContextMenuProps\n extends Pick<MenuProps, \"open\" | \"onOpenChange\"> {\n menuHandler: MenuActionHandler;\n menuItemDescriptors: ContextMenuItemDescriptor[];\n x: number;\n y: number;\n}\n\nexport const ContextMenu = ({\n menuHandler,\n menuItemDescriptors,\n onOpenChange,\n open,\n x,\n y,\n}: ContextMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-context-menu\",\n css: contextMenuCss,\n window: targetWindow,\n });\n\n const virtualElement: VirtualElement = {\n getBoundingClientRect: () => ({\n width: 0,\n height: 0,\n x,\n y,\n top: y,\n right: x,\n bottom: y,\n left: x,\n }),\n };\n\n return (\n <Menu\n getVirtualElement={() => virtualElement}\n onOpenChange={onOpenChange}\n open={open}\n >\n <MenuPanel className=\"vuuContextMenuPanel\">\n {menuItemsFromMenuDescriptors(menuItemDescriptors, menuHandler)}\n </MenuPanel>\n </Menu>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","contextMenuCss","jsx","Menu","MenuPanel","menuItemsFromMenuDescriptors"],"mappings":";;;;;;;;;AAoBO,MAAM,cAAc,CAAC;AAAA,EAC1B,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,YAAA;AAAA,EACA,IAAA;AAAA,EACA,CAAA;AAAA,EACA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAiC,GAAA;AAAA,IACrC,uBAAuB,OAAO;AAAA,MAC5B,KAAO,EAAA,CAAA;AAAA,MACP,MAAQ,EAAA,CAAA;AAAA,MACR,CAAA;AAAA,MACA,CAAA;AAAA,MACA,GAAK,EAAA,CAAA;AAAA,MACL,KAAO,EAAA,CAAA;AAAA,MACP,MAAQ,EAAA,CAAA;AAAA,MACR,IAAM,EAAA;AAAA,KACR;AAAA,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,mBAAmB,MAAM,cAAA;AAAA,MACzB,YAAA;AAAA,MACA,IAAA;AAAA,MAEA,yCAACC,cAAU,EAAA,EAAA,SAAA,EAAU,uBAClB,QAA6B,EAAAC,sCAAA,CAAA,mBAAA,EAAqB,WAAW,CAChE,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContextMenuProvider.js","sources":["../../../../vuu-context-menu/src/ContextMenuProvider.tsx"],"sourcesContent":["import {\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\n\nimport { ContextMenuItemDescriptor } from \"./menu-utils\";\n\nexport type MenuActionHandler<T extends string = string, Options = unknown> = (\n menuItemId: T,\n options?: Options,\n) => boolean | undefined;\n\nexport type MenuBuilder<Location extends string = string, Options = unknown> = (\n location: Location,\n options: Options,\n) => ContextMenuItemDescriptor[];\n\nexport interface ContextMenuContextType {\n menuBuilders: MenuBuilder[];\n menuActionHandler: MenuActionHandler;\n showContextMenu: (contextMenu: ReactElement | null) => void;\n}\n\nexport const ContextMenuContext = createContext<ContextMenuContextType | null>(\n null,\n);\n\nexport interface ContextMenuProviderProps<\n L extends string = string,\n O = unknown,\n> {\n children: ReactNode;\n menuActionHandler?: MenuActionHandler;\n menuBuilder?: MenuBuilder<L, O>;\n}\n\ninterface ProviderProps<L extends string = string, O = unknown>\n extends ContextMenuProviderProps<L, O> {\n context: ContextMenuContextType | null;\n}\n\nconst Provider = <L extends string = string, O = unknown>({\n children,\n context,\n menuActionHandler,\n menuBuilder,\n}: ProviderProps<L, O>) => {\n const [contextMenu, setContextMenu] = useState<ReactElement | null>(null);\n const showContextMenu = useMemo(() => {\n if (context?.showContextMenu) {\n return context.showContextMenu;\n } else {\n return (contextMenu: ReactElement | null) => {\n setContextMenu(contextMenu);\n };\n }\n }, [context]);\n const menuBuilders = useMemo(() => {\n if (context?.menuBuilders && menuBuilder) {\n // menuBuilder may have a narrower type than the inherited menuBuilders, discard this\n return context.menuBuilders.concat(menuBuilder as MenuBuilder);\n } else if (menuBuilder) {\n return [menuBuilder as MenuBuilder];\n } else {\n return context?.menuBuilders || [];\n }\n }, [context, menuBuilder]);\n\n const handleMenuAction = useCallback<MenuActionHandler>(\n (menuItemId, options) => {\n if (menuActionHandler?.(menuItemId, options)) {\n return true;\n }\n\n if (context?.menuActionHandler?.(menuItemId, options)) {\n return true;\n }\n },\n [context, menuActionHandler],\n );\n\n return (\n <ContextMenuContext.Provider\n value={{\n menuActionHandler: handleMenuAction,\n menuBuilders,\n showContextMenu,\n }}\n >\n {children}\n {contextMenu}\n </ContextMenuContext.Provider>\n );\n};\n\nexport const ContextMenuProvider = <L extends string = string, O = unknown>({\n children,\n menuActionHandler,\n menuBuilder,\n}: ContextMenuProviderProps<L, O>) => {\n return (\n <ContextMenuContext.Consumer>\n {(parentContext) => (\n <Provider<L, O>\n context={parentContext}\n menuActionHandler={menuActionHandler}\n menuBuilder={menuBuilder}\n >\n {children}\n </Provider>\n )}\n </ContextMenuContext.Consumer>\n );\n};\n"],"names":["createContext"],"mappings":";;;;;AA2BO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC;AACF;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
|
|
6
|
+
const isGroupMenuItemDescriptor = (menuItem) => menuItem !== void 0 && "children" in menuItem;
|
|
7
|
+
const menuItemsFromMenuDescriptors = (menuDescriptors, menuActionHandler) => {
|
|
8
|
+
const fromDescriptor = (menuItem, index) => isGroupMenuItemDescriptor(menuItem) ? /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
|
|
9
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: menuItem.label }) }),
|
|
10
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.MenuPanel, { className: "vuuContextMenuPanel", children: menuItem.children.map(fromDescriptor) })
|
|
11
|
+
] }, index) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12
|
+
core.MenuItem,
|
|
13
|
+
{
|
|
14
|
+
className: menuItem.className,
|
|
15
|
+
"data-icon": menuItem.icon,
|
|
16
|
+
onClick: () => menuActionHandler(menuItem.id, menuItem.options),
|
|
17
|
+
children: menuItem.label
|
|
18
|
+
},
|
|
19
|
+
index
|
|
20
|
+
);
|
|
21
|
+
return menuDescriptors.map(fromDescriptor);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
exports.isGroupMenuItemDescriptor = isGroupMenuItemDescriptor;
|
|
25
|
+
exports.menuItemsFromMenuDescriptors = menuItemsFromMenuDescriptors;
|
|
26
|
+
//# sourceMappingURL=menu-utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-utils.js","sources":["../../../../vuu-context-menu/src/menu-utils.tsx"],"sourcesContent":["import { Menu, MenuItem, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { MenuActionHandler } from \"./ContextMenuProvider\";\n\nexport interface ContextMenuItemBase {\n className?: string;\n icon?: string;\n label: string;\n location?: string;\n}\n\nexport interface ContextMenuLeafItemDescriptor extends ContextMenuItemBase {\n id: string;\n options?: unknown;\n}\n\nexport interface ContextMenuGroupItemDescriptor extends ContextMenuItemBase {\n children: ContextMenuItemDescriptor[];\n}\n\nexport type ContextMenuItemDescriptor =\n | ContextMenuLeafItemDescriptor\n | ContextMenuGroupItemDescriptor;\n\nexport const isGroupMenuItemDescriptor = (\n menuItem?: ContextMenuItemDescriptor,\n): menuItem is ContextMenuGroupItemDescriptor =>\n menuItem !== undefined && \"children\" in menuItem;\n\nexport const menuItemsFromMenuDescriptors = (\n menuDescriptors: ContextMenuItemDescriptor[],\n menuActionHandler: MenuActionHandler,\n) => {\n const fromDescriptor = (\n menuItem: ContextMenuItemDescriptor,\n index: number,\n ) =>\n isGroupMenuItemDescriptor(menuItem) ? (\n <Menu key={index}>\n <MenuTrigger>\n <MenuItem>{menuItem.label}</MenuItem>\n </MenuTrigger>\n <MenuPanel className=\"vuuContextMenuPanel\">\n {menuItem.children.map(fromDescriptor)}\n </MenuPanel>\n </Menu>\n ) : (\n <MenuItem\n key={index}\n className={menuItem.className}\n data-icon={menuItem.icon}\n onClick={() => menuActionHandler(menuItem.id, menuItem.options)}\n >\n {menuItem.label}\n </MenuItem>\n );\n\n return menuDescriptors.map(fromDescriptor);\n};\n"],"names":["Menu","jsx","MenuTrigger","MenuItem","MenuPanel"],"mappings":";;;;;AAuBO,MAAM,yBAA4B,GAAA,CACvC,QAEA,KAAA,QAAA,KAAa,UAAa,UAAc,IAAA;AAE7B,MAAA,4BAAA,GAA+B,CAC1C,eAAA,EACA,iBACG,KAAA;AACH,EAAM,MAAA,cAAA,GAAiB,CACrB,QACA,EAAA,KAAA,KAEA,0BAA0B,QAAQ,CAAA,mCAC/BA,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,gBACC,EAAA,EAAA,QAAA,kBAAAD,cAAA,CAACE,aAAU,EAAA,EAAA,QAAA,EAAA,QAAA,CAAS,OAAM,CAC5B,EAAA,CAAA;AAAA,oBACAF,cAAA,CAACG,kBAAU,SAAU,EAAA,qBAAA,EAClB,mBAAS,QAAS,CAAA,GAAA,CAAI,cAAc,CACvC,EAAA;AAAA,GAAA,EAAA,EANS,KAOX,CAEA,mBAAAH,cAAA;AAAA,IAACE,aAAA;AAAA,IAAA;AAAA,MAEC,WAAW,QAAS,CAAA,SAAA;AAAA,MACpB,aAAW,QAAS,CAAA,IAAA;AAAA,MACpB,SAAS,MAAM,iBAAA,CAAkB,QAAS,CAAA,EAAA,EAAI,SAAS,OAAO,CAAA;AAAA,MAE7D,QAAS,EAAA,QAAA,CAAA;AAAA,KAAA;AAAA,IALL;AAAA,GAMP;AAGJ,EAAO,OAAA,eAAA,CAAgB,IAAI,cAAc,CAAA;AAC3C;;;;;"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var ContextMenu = require('./ContextMenu.js');
|
|
6
|
+
var ContextMenuProvider = require('./ContextMenuProvider.js');
|
|
7
|
+
|
|
8
|
+
const useContextMenu = (menuBuilder, menuActionHandler) => {
|
|
9
|
+
const ctx = React.useContext(ContextMenuProvider.ContextMenuContext);
|
|
10
|
+
const buildMenuOptions = React.useCallback(
|
|
11
|
+
(menuBuilders, location, options) => {
|
|
12
|
+
let results = [];
|
|
13
|
+
for (const menuBuilder2 of menuBuilders) {
|
|
14
|
+
results = results.concat(menuBuilder2(location, options));
|
|
15
|
+
}
|
|
16
|
+
return results;
|
|
17
|
+
},
|
|
18
|
+
[]
|
|
19
|
+
);
|
|
20
|
+
const handleOpenChange = React.useCallback(
|
|
21
|
+
(open) => {
|
|
22
|
+
if (!open) {
|
|
23
|
+
ctx?.showContextMenu(null);
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
[ctx]
|
|
27
|
+
);
|
|
28
|
+
const showContextMenu = React.useCallback(
|
|
29
|
+
(evt, location, options, { onOpenChange, x = evt.clientX, y = evt.clientY } = {
|
|
30
|
+
x: evt.clientX,
|
|
31
|
+
y: evt.clientY
|
|
32
|
+
}) => {
|
|
33
|
+
evt.stopPropagation?.();
|
|
34
|
+
evt.preventDefault?.();
|
|
35
|
+
console.log(
|
|
36
|
+
`showContextMenu at ${evt.clientX} ${evt.clientY} location ${location}`
|
|
37
|
+
);
|
|
38
|
+
const menuBuilders = [];
|
|
39
|
+
if (menuBuilder) {
|
|
40
|
+
menuBuilders.push(menuBuilder);
|
|
41
|
+
}
|
|
42
|
+
if (ctx && Array.isArray(ctx?.menuBuilders) && ctx.menuBuilders.length > 0) {
|
|
43
|
+
menuBuilders.push(...ctx.menuBuilders);
|
|
44
|
+
}
|
|
45
|
+
if (menuBuilders.length > 0) {
|
|
46
|
+
const menuItemDescriptors = buildMenuOptions(
|
|
47
|
+
menuBuilders,
|
|
48
|
+
location,
|
|
49
|
+
options
|
|
50
|
+
);
|
|
51
|
+
const menuHandler = (menuItemId, options2) => {
|
|
52
|
+
if (menuActionHandler?.(menuItemId, options2) === true) {
|
|
53
|
+
return true;
|
|
54
|
+
} else {
|
|
55
|
+
return ctx?.menuActionHandler(menuItemId, options2);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
const localOpenChange = (isOpen) => {
|
|
59
|
+
onOpenChange?.(isOpen);
|
|
60
|
+
handleOpenChange(isOpen);
|
|
61
|
+
};
|
|
62
|
+
if (menuItemDescriptors.length) {
|
|
63
|
+
ctx?.showContextMenu(
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
65
|
+
ContextMenu.ContextMenu,
|
|
66
|
+
{
|
|
67
|
+
menuHandler,
|
|
68
|
+
menuItemDescriptors,
|
|
69
|
+
onOpenChange: localOpenChange,
|
|
70
|
+
open: true,
|
|
71
|
+
x,
|
|
72
|
+
y
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
} else {
|
|
78
|
+
console.warn(
|
|
79
|
+
"useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)"
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
[buildMenuOptions, ctx, handleOpenChange, menuActionHandler, menuBuilder]
|
|
84
|
+
);
|
|
85
|
+
return showContextMenu;
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
exports.useContextMenu = useContextMenu;
|
|
89
|
+
//# sourceMappingURL=useContextMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useContextMenu.js","sources":["../../../../vuu-context-menu/src/useContextMenu.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { ContextMenu, ContextMenuProps } from \"./ContextMenu\";\nimport {\n ContextMenuContext,\n MenuActionHandler,\n MenuBuilder,\n} from \"./ContextMenuProvider\";\nimport { ContextMenuItemDescriptor } from \"./menu-utils\";\n\nexport type EventLike = {\n clientX: number;\n clientY: number;\n preventDefault?: () => void;\n stopPropagation?: () => void;\n};\n\nexport type ShowContextMenu = (\n e: EventLike,\n location: string,\n options: unknown,\n contextMenuProps?: Pick<ContextMenuProps, \"onOpenChange\" | \"x\" | \"y\">,\n) => void;\n\n// The argument allows a top-level menuBuilder to operate outside the Context\nexport const useContextMenu = (\n menuBuilder?: MenuBuilder,\n menuActionHandler?: MenuActionHandler,\n): ShowContextMenu => {\n const ctx = useContext(ContextMenuContext);\n\n const buildMenuOptions = useCallback(\n (menuBuilders: MenuBuilder[], location: string, options: unknown) => {\n let results: ContextMenuItemDescriptor[] = [];\n for (const menuBuilder of menuBuilders) {\n // Maybe we should leave the concatenation to the menuBuilder, then it can control menuItem order\n results = results.concat(menuBuilder(location, options));\n }\n return results;\n },\n [],\n );\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n if (!open) {\n ctx?.showContextMenu(null);\n }\n },\n [ctx],\n );\n\n const showContextMenu = useCallback<ShowContextMenu>(\n (\n evt,\n location,\n options,\n { onOpenChange, x = evt.clientX, y = evt.clientY } = {\n x: evt.clientX,\n y: evt.clientY,\n },\n ) => {\n evt.stopPropagation?.();\n evt.preventDefault?.();\n\n console.log(\n `showContextMenu at ${evt.clientX} ${evt.clientY} location ${location}`,\n );\n\n const menuBuilders: MenuBuilder[] = [];\n if (menuBuilder) {\n menuBuilders.push(menuBuilder);\n }\n if (\n ctx &&\n Array.isArray(ctx?.menuBuilders) &&\n ctx.menuBuilders.length > 0\n ) {\n menuBuilders.push(...ctx.menuBuilders);\n }\n\n if (menuBuilders.length > 0) {\n const menuItemDescriptors = buildMenuOptions(\n menuBuilders,\n location,\n options,\n );\n\n const menuHandler: MenuActionHandler = (menuItemId, options) => {\n if (menuActionHandler?.(menuItemId, options) === true) {\n return true;\n } else {\n return ctx?.menuActionHandler(menuItemId, options);\n }\n };\n\n const localOpenChange = (isOpen: boolean) => {\n onOpenChange?.(isOpen);\n handleOpenChange(isOpen);\n };\n\n if (menuItemDescriptors.length) {\n ctx?.showContextMenu(\n <ContextMenu\n menuHandler={menuHandler}\n menuItemDescriptors={menuItemDescriptors}\n onOpenChange={localOpenChange}\n open={true}\n x={x}\n y={y}\n />,\n );\n }\n } else {\n console.warn(\n \"useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)\",\n );\n }\n },\n [buildMenuOptions, ctx, handleOpenChange, menuActionHandler, menuBuilder],\n );\n\n return showContextMenu;\n};\n"],"names":["useContext","ContextMenuContext","useCallback","menuBuilder","options","jsx","ContextMenu"],"mappings":";;;;;;;AAwBa,MAAA,cAAA,GAAiB,CAC5B,WAAA,EACA,iBACoB,KAAA;AACpB,EAAM,MAAA,GAAA,GAAMA,iBAAWC,sCAAkB,CAAA;AAEzC,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,YAA6B,EAAA,QAAA,EAAkB,OAAqB,KAAA;AACnE,MAAA,IAAI,UAAuC,EAAC;AAC5C,MAAA,KAAA,MAAWC,gBAAe,YAAc,EAAA;AAEtC,QAAA,OAAA,GAAU,OAAQ,CAAA,MAAA,CAAOA,YAAY,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA;AAEzD,MAAO,OAAA,OAAA;AAAA,KACT;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,gBAAmB,GAAAD,iBAAA;AAAA,IACvB,CAAC,IAAkB,KAAA;AACjB,MAAA,IAAI,CAAC,IAAM,EAAA;AACT,QAAA,GAAA,EAAK,gBAAgB,IAAI,CAAA;AAAA;AAC3B,KACF;AAAA,IACA,CAAC,GAAG;AAAA,GACN;AAEA,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CACE,GAAA,EACA,QACA,EAAA,OAAA,EACA,EAAE,YAAA,EAAc,CAAI,GAAA,GAAA,CAAI,OAAS,EAAA,CAAA,GAAI,GAAI,CAAA,OAAA,EAAY,GAAA;AAAA,MACnD,GAAG,GAAI,CAAA,OAAA;AAAA,MACP,GAAG,GAAI,CAAA;AAAA,KAEN,KAAA;AACH,MAAA,GAAA,CAAI,eAAkB,IAAA;AACtB,MAAA,GAAA,CAAI,cAAiB,IAAA;AAErB,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,sBAAsB,GAAI,CAAA,OAAO,IAAI,GAAI,CAAA,OAAO,aAAa,QAAQ,CAAA;AAAA,OACvE;AAEA,MAAA,MAAM,eAA8B,EAAC;AACrC,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,YAAA,CAAa,KAAK,WAAW,CAAA;AAAA;AAE/B,MACE,IAAA,GAAA,IACA,MAAM,OAAQ,CAAA,GAAA,EAAK,YAAY,CAC/B,IAAA,GAAA,CAAI,YAAa,CAAA,MAAA,GAAS,CAC1B,EAAA;AACA,QAAa,YAAA,CAAA,IAAA,CAAK,GAAG,GAAA,CAAI,YAAY,CAAA;AAAA;AAGvC,MAAI,IAAA,YAAA,CAAa,SAAS,CAAG,EAAA;AAC3B,QAAA,MAAM,mBAAsB,GAAA,gBAAA;AAAA,UAC1B,YAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA,SACF;AAEA,QAAM,MAAA,WAAA,GAAiC,CAAC,UAAA,EAAYE,QAAY,KAAA;AAC9D,UAAA,IAAI,iBAAoB,GAAA,UAAA,EAAYA,QAAO,CAAA,KAAM,IAAM,EAAA;AACrD,YAAO,OAAA,IAAA;AAAA,WACF,MAAA;AACL,YAAO,OAAA,GAAA,EAAK,iBAAkB,CAAA,UAAA,EAAYA,QAAO,CAAA;AAAA;AACnD,SACF;AAEA,QAAM,MAAA,eAAA,GAAkB,CAAC,MAAoB,KAAA;AAC3C,UAAA,YAAA,GAAe,MAAM,CAAA;AACrB,UAAA,gBAAA,CAAiB,MAAM,CAAA;AAAA,SACzB;AAEA,QAAA,IAAI,oBAAoB,MAAQ,EAAA;AAC9B,UAAK,GAAA,EAAA,eAAA;AAAA,4BACHC,cAAA;AAAA,cAACC,uBAAA;AAAA,cAAA;AAAA,gBACC,WAAA;AAAA,gBACA,mBAAA;AAAA,gBACA,YAAc,EAAA,eAAA;AAAA,gBACd,IAAM,EAAA,IAAA;AAAA,gBACN,CAAA;AAAA,gBACA;AAAA;AAAA;AACF,WACF;AAAA;AACF,OACK,MAAA;AACL,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,gBAAA,EAAkB,GAAK,EAAA,gBAAA,EAAkB,mBAAmB,WAAW;AAAA,GAC1E;AAEA,EAAO,OAAA,eAAA;AACT;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDialog.js","sources":["../../../../src/dialog/useDialog.tsx"],"sourcesContent":["import {\n Dialog,\n DialogActions,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n} from \"@salt-ds/core\";\nimport {\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\n\nexport type DialogState = {\n actions?: ReactElement[];\n content: ReactElement;\n title: string;\n hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport type ShowDialog = (\n dialogContent: ReactElement,\n title: string,\n dialogActionButtons?: ReactElement[],\n hideCloseButton?: boolean\n) => void;\n\nexport interface DialogContextProps {\n showDialog: ShowDialog;\n closeDialog: () => void;\n setDialogDispatchers: (\n showDialog: ShowDialog,\n closeDialog: () => void\n ) => void;\n}\n\nexport const useDialog = () => {\n const [dialogState, setDialogState] = useState<DialogState>();\n\n const closeDialog = useCallback(() => {\n setDialogState(undefined);\n }, []);\n\n const handleOpenChange = useCallback(\n (open?: boolean) => {\n if (open !== true) {\n closeDialog();\n }\n },\n [closeDialog]\n );\n\n const dialog = dialogState ? (\n <Dialog open={true} onOpenChange={handleOpenChange}>\n <DialogHeader header={dialogState.title} />\n <DialogContent>{dialogState.content}</DialogContent>\n {dialogState.hideCloseButton !== true ? (\n <DialogCloseButton\n data-embedded\n data-icon=\"close\"\n onClick={closeDialog}\n />\n ) : null}\n {dialogState.actions ? (\n <DialogActions>{dialogState.actions}</DialogActions>\n ) : null}\n </Dialog>\n ) : null;\n\n return {\n dialog,\n setDialogState,\n };\n};\n\nconst defaultShowDialog: ShowDialog = () => {\n console.warn(\"No DialogProvider in place\");\n};\nconst defaultCloseDialog = () => {\n console.warn(\"No DialogProvider in place\");\n};\n\nclass DialogContextObject implements DialogContextProps {\n showDialog = defaultShowDialog;\n closeDialog = defaultCloseDialog;\n setDialogDispatchers(showDialog: ShowDialog, closeDialog: () => void) {\n this.showDialog = showDialog;\n this.closeDialog = closeDialog;\n }\n}\n\nconst DialogContext = createContext<DialogContextProps>(\n new DialogContextObject()\n);\n\nconst DialogHost = ({ context }: { context: DialogContextProps }) => {\n const { dialog, setDialogState } = useDialog();\n const showDialog: ShowDialog = useCallback(\n (dialogContent, title, actionButtons, hideCloseButton) => {\n setDialogState({\n actions: actionButtons,\n content: dialogContent,\n title,\n hideCloseButton,\n });\n },\n [setDialogState]\n );\n const closeDialog = useCallback(() => {\n setDialogState(undefined);\n }, [setDialogState]);\n\n useMemo(() => {\n context.setDialogDispatchers(showDialog, closeDialog);\n }, [closeDialog, context, showDialog]);\n return dialog;\n};\n\nexport const DialogProvider = ({ children }: { children: ReactNode }) => {\n const context = useContext(DialogContext);\n return (\n <DialogContext.Provider value={context}>\n <DialogHost context={context} />\n {children}\n </DialogContext.Provider>\n );\n};\n\nexport const useDialogContext = () => {\n const { closeDialog, showDialog } = useContext(DialogContext);\n return { showDialog, closeDialog };\n};\n"],"names":["useState","useCallback","jsxs","Dialog","jsx","DialogHeader","DialogContent","DialogCloseButton","DialogActions","createContext","useMemo","useContext"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogHeader.js","sources":["../../../../src/dialog-header/DialogHeader.tsx"],"sourcesContent":["import { Button, Text } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\n\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst classBase = \"vuuDialogHeader\";\n\nexport interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {\n hideCloseButton?: boolean;\n onClose: () => void;\n}\n\nexport const DialogHeader = ({\n hideCloseButton = false,\n title,\n onClose,\n ...htmlAttributes\n}: DialogHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dialoh-header\",\n css: dialogHeaderCss,\n window: targetWindow,\n });\n\n return (\n <div {...htmlAttributes} className={classBase}>\n <Text className=\"dialogHeader\">{title}</Text>\n {!hideCloseButton && (\n <Button\n key=\"close\"\n onClick={onClose}\n data-align=\"end\"\n data-icon=\"close\"\n variant=\"secondary\"\n />\n )}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","dialogHeaderCss","jsxs","jsx","Text","Button"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,iBAAA;AAOX,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAkB,GAAA,KAAA;AAAA,EAClB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,SAAA,EAAA,EAAK,SAAU,EAAA,cAAA,EAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,IACrC,CAAC,eACA,oBAAAD,cAAA;AAAA,MAACE,WAAA;AAAA,MAAA;AAAA,QAEC,OAAS,EAAA,OAAA;AAAA,QACT,YAAW,EAAA,KAAA;AAAA,QACX,WAAU,EAAA,OAAA;AAAA,QACV,OAAQ,EAAA;AAAA,OAAA;AAAA,MAJJ;AAAA;AAKN,GAEJ,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var useDialog = require('./dialog/useDialog.js');
|
|
4
4
|
var DialogHeader = require('./dialog-header/DialogHeader.js');
|
|
5
|
-
var ContextMenu = require('./menu/ContextMenu.js');
|
|
6
|
-
var MenuList = require('./menu/MenuList.js');
|
|
7
|
-
var contextMenuProvider = require('./menu/context-menu-provider.js');
|
|
8
|
-
var useContextMenu = require('./menu/useContextMenu.js');
|
|
9
5
|
var popupService = require('./popup/popup-service.js');
|
|
10
6
|
var Popup = require('./popup/Popup.js');
|
|
11
7
|
var useAnchoredPosition = require('./popup/useAnchoredPosition.js');
|
|
@@ -24,16 +20,6 @@ exports.DialogProvider = useDialog.DialogProvider;
|
|
|
24
20
|
exports.useDialog = useDialog.useDialog;
|
|
25
21
|
exports.useDialogContext = useDialog.useDialogContext;
|
|
26
22
|
exports.DialogHeader = DialogHeader.DialogHeader;
|
|
27
|
-
exports.ContextMenu = ContextMenu.ContextMenu;
|
|
28
|
-
exports.MenuItem = MenuList.MenuItem;
|
|
29
|
-
exports.MenuItemGroup = MenuList.MenuItemGroup;
|
|
30
|
-
exports.MenuList = MenuList.MenuList;
|
|
31
|
-
exports.Separator = MenuList.Separator;
|
|
32
|
-
exports.isMenuItemGroup = MenuList.isMenuItemGroup;
|
|
33
|
-
exports.isMenuItemLabel = MenuList.isMenuItemLabel;
|
|
34
|
-
exports.ContextMenuContext = contextMenuProvider.ContextMenuContext;
|
|
35
|
-
exports.ContextMenuProvider = contextMenuProvider.ContextMenuProvider;
|
|
36
|
-
exports.useContextMenu = useContextMenu.useContextMenu;
|
|
37
23
|
exports.DialogService = popupService.DialogService;
|
|
38
24
|
exports.PopupService = popupService.PopupService;
|
|
39
25
|
exports.reasonIsClickAway = popupService.reasonIsClickAway;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationsCenter.js","sources":["../../../../src/notifications/NotificationsCenter.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { NotificationsContext } from \"./NotificationsProvider\";\nimport { getUniqueId } from \"@vuu-ui/vuu-utils\";\nimport { ToastNotification } from \"./ToastNotification\";\nimport { Notification } from \"./notificationTypes\";\n\nexport interface NotificationsCenterProps {\n notificationsContext: NotificationsContext;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\nconst toastDisplayDuration = 6000;\nconst horizontalTransitionDuration = 1000;\n\n// toast size in pixels\nconst toastHeight = 56;\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nexport const NotificationsCenter = ({\n notificationsContext,\n}: NotificationsCenterProps) => {\n const [notifications, setNotifications] = useState<Notification[]>([]);\n\n useMemo(() => {\n notificationsContext.setNotify((notification) => {\n const newNotification: Notification = {\n ...notification,\n id: getUniqueId(),\n };\n setNotifications((prev) => prev.concat(newNotification));\n setTimeout(\n () => {\n setNotifications((prev) => prev.filter((n) => n !== newNotification));\n },\n toastDisplayDuration + horizontalTransitionDuration * 2,\n );\n });\n }, [notificationsContext]);\n\n return (\n <>\n {notifications.map((notification, i) => (\n <ToastNotification\n top={toastOffsetTop + (toastHeight + toastContainerContentGap) * i}\n notification={notification}\n key={notification.id}\n />\n ))}\n </>\n );\n};\n"],"names":["useState","useMemo","getUniqueId","jsx","Fragment","ToastNotification"],"mappings":";;;;;;;AAWA,MAAM,cAAiB,GAAA,EAAA;AACvB,MAAM,oBAAuB,GAAA,GAAA;AAC7B,MAAM,4BAA+B,GAAA,GAAA;AAGrC,MAAM,WAAc,GAAA,EAAA;AACpB,MAAM,wBAA2B,GAAA,EAAA;AAI1B,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAA,cAAA,CAAyB,EAAE,CAAA;AAErE,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAqB,oBAAA,CAAA,SAAA,CAAU,CAAC,YAAiB,KAAA;AAC/C,MAAA,MAAM,eAAgC,GAAA;AAAA,QACpC,GAAG,YAAA;AAAA,QACH,IAAIC,oBAAY;AAAA,OAClB;AACA,MAAA,gBAAA,CAAiB,CAAC,IAAA,KAAS,IAAK,CAAA,MAAA,CAAO,eAAe,CAAC,CAAA;AACvD,MAAA,UAAA;AAAA,QACE,MAAM;AACJ,UAAiB,gBAAA,CAAA,CAAC,SAAS,IAAK,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAA,KAAM,eAAe,CAAC,CAAA;AAAA,SACtE;AAAA,QACA,uBAAuB,4BAA+B,GAAA;AAAA,OACxD;AAAA,KACD,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,uBAEKC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,aAAA,CAAc,GAAI,CAAA,CAAC,cAAc,CAChC,qBAAAD,cAAA;AAAA,IAACE,mCAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,cAAkB,GAAA,CAAA,WAAA,GAAc,wBAA4B,IAAA,CAAA;AAAA,MACjE;AAAA,KAAA;AAAA,IACK,YAAa,CAAA;AAAA,GAErB,CACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.js","sources":["../../../../src/notifications/NotificationsProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport { Notification } from \"./notificationTypes\";\n\nexport type DispatchNotification = (\n notification: Omit<Notification, \"id\">\n) => void;\n\nexport type NotificationsContext = {\n notify: DispatchNotification;\n setNotify: (dispatcher: DispatchNotification) => void;\n};\n\n/*\n The Context is not exposed outside this module, only the notify\n prop can be accessed via the useNotifications hook.\n The NotificationsCenter receives the full context object and\n sets the notify method. State management around dispatched\n notifications is handled entirely within the NotificationsCenter,\n avoiding rerendering our children when notifications are \n dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n #notify: DispatchNotification = () =>\n console.log(\"have you forgotten to provide a NotificationsCenter?\");\n // We want the public notify method to be stable, setNotify call should not trigger re-renders\n notify: DispatchNotification = (notification) => this.#notify(notification);\n setNotify = (dispatcher: DispatchNotification) => {\n this.#notify = dispatcher;\n };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n new NotificationsContextObject()\n);\n\nexport const NotificationsProvider = (props: {\n children: JSX.Element | JSX.Element[];\n}) => {\n const context = useContext(NotificationsContext);\n return (\n <NotificationsContext.Provider value={context}>\n <NotificationsCenter notificationsContext={context} />\n {props.children}\n </NotificationsContext.Provider>\n );\n};\n\nexport const useNotifications = () => {\n const { notify } = useContext(NotificationsContext);\n return notify;\n};\n"],"names":["useContext","jsxs","jsx","NotificationsCenter"],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAA,OAAA;AAsBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAAgC,YAAA,CAAA,IAAA,EAAA,OAAA,EAAA,MAC9B,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AAEpE;AAAA,IAAA,aAAA,CAAA,IAAA,EAAA,QAAA,EAA+B,CAAC,YAAA,KAAiB,YAAK,CAAA,IAAA,EAAA,OAAA,CAAA,CAAL,IAAa,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AAC9D,IAAA,aAAA,CAAA,IAAA,EAAA,WAAA,EAAY,CAAC,UAAqC,KAAA;AAChD,MAAA,YAAA,CAAA,IAAA,EAAK,OAAU,EAAA,UAAA,CAAA;AAAA,KACjB,CAAA;AAAA;AACF;AAPE,OAAA,GAAA,IAAA,OAAA,EAAA;AASF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B;AACjC,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUA,iBAAW,oBAAoB,CAAA;AAC/C,EAAA,uBACGC,eAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,uCAAA,EAAA,EAAoB,sBAAsB,OAAS,EAAA,CAAA;AAAA,IACnD,KAAM,CAAA;AAAA,GACT,EAAA,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,MAAA,EAAW,GAAAH,gBAAA,CAAW,oBAAoB,CAAA;AAClD,EAAO,OAAA,MAAA;AACT;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastNotification.js","sources":["../../../../src/notifications/ToastNotification.tsx"],"sourcesContent":["import { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useEffect, useState } from \"react\";\nimport { Portal } from \"../portal\";\nimport type { Notification } from \"./notificationTypes\";\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nconst toastWidth = 300;\nconst toastContainerRightPadding = 50;\nconst toastDisplayDuration = 6000;\nconst horizontalTransitionDuration = 1000;\nconst toastHeight = 56;\nconst verticalTransitionDuration = 300;\n\nexport type ToastNotificationProps = {\n top: number;\n notification: Notification;\n animated?: boolean;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nconst icon = {\n error: \"error\",\n info: \"info-circle\",\n success: \"tick\",\n warning: \"warn-triangle\",\n};\n\nexport const ToastNotification = (props: ToastNotificationProps) => {\n const { top, notification, animated = true } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toast-notification\",\n css: toastNotificationCss,\n window: targetWindow,\n });\n\n const [right, setRight] = useState(-toastWidth - toastContainerRightPadding);\n\n useEffect(() => {\n setTimeout(() => setRight(toastContainerRightPadding));\n\n if (animated) {\n setTimeout(\n () => setRight(-toastWidth - toastContainerRightPadding),\n toastDisplayDuration + horizontalTransitionDuration,\n );\n }\n }, [animated]);\n\n return (\n <Portal>\n <div\n className={cx(classBase, `${classBase}-${notification.type}`)}\n style={{\n height: toastHeight,\n right,\n width: toastWidth,\n top,\n transition: animated\n ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms `\n : \"none\",\n }}\n >\n <Icon name={icon[notification.type]} />\n <div className={`${classBase}-toastContent`}>\n <strong className={`${classBase}-toastHeader`}>\n {notification.header}\n </strong>\n <div>{notification.body}</div>\n </div>\n </div>\n </Portal>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","toastNotificationCss","useState","useEffect","Portal","jsxs","jsx","Icon"],"mappings":";;;;;;;;;;;AAUA,MAAM,UAAa,GAAA,GAAA;AACnB,MAAM,0BAA6B,GAAA,EAAA;AACnC,MAAM,oBAAuB,GAAA,GAAA;AAC7B,MAAM,4BAA+B,GAAA,GAAA;AACrC,MAAM,WAAc,GAAA,EAAA;AACpB,MAAM,0BAA6B,GAAA,GAAA;AAQnC,MAAM,SAAY,GAAA,sBAAA;AAElB,MAAM,IAAO,GAAA;AAAA,EACX,KAAO,EAAA,OAAA;AAAA,EACP,IAAM,EAAA,aAAA;AAAA,EACN,OAAS,EAAA,MAAA;AAAA,EACT,OAAS,EAAA;AACX,CAAA;AAEa,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAA,MAAM,EAAE,GAAA,EAAK,YAAc,EAAA,QAAA,GAAW,MAAS,GAAA,KAAA;AAC/C,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,IAAIC,cAAS,CAAA,CAAC,aAAa,0BAA0B,CAAA;AAE3E,EAAAC,eAAA,CAAU,MAAM;AACd,IAAW,UAAA,CAAA,MAAM,QAAS,CAAA,0BAA0B,CAAC,CAAA;AAErD,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,UAAA;AAAA,QACE,MAAM,QAAA,CAAS,CAAC,UAAA,GAAa,0BAA0B,CAAA;AAAA,QACvD,oBAAuB,GAAA;AAAA,OACzB;AAAA;AACF,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,sCACGC,aACC,EAAA,EAAA,QAAA,kBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,YAAA,CAAa,IAAI,CAAE,CAAA,CAAA;AAAA,MAC5D,KAAO,EAAA;AAAA,QACL,MAAQ,EAAA,WAAA;AAAA,QACR,KAAA;AAAA,QACA,KAAO,EAAA,UAAA;AAAA,QACP,GAAA;AAAA,QACA,YAAY,QACR,GAAA,CAAA,MAAA,EAAS,4BAA4B,CAAA,QAAA,EAAW,0BAA0B,CAC1E,GAAA,CAAA,GAAA;AAAA,OACN;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,kBAAK,EAAA,EAAA,IAAA,EAAM,IAAK,CAAA,YAAA,CAAa,IAAI,CAAG,EAAA,CAAA;AAAA,wBACpCF,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,YAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,YAAA,CAAA,EAC5B,uBAAa,MAChB,EAAA,CAAA;AAAA,0BACAA,cAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,YAAA,CAAa,IAAK,EAAA;AAAA,SAC1B,EAAA;AAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popup.js","sources":["../../../../src/popup/Popup.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, RefObject } from \"react\";\nimport { useAnchoredPosition } from \"./useAnchoredPosition\";\nimport { Position } from \"./getPositionRelativeToAnchor\";\n\nimport popupCss from \"./Popup.css\";\n\nexport type PopupPlacement =\n | \"absolute\"\n | \"auto\"\n | \"below\"\n | \"below-center\"\n | \"below-right\"\n | \"below-full-width\"\n | \"center\"\n | \"right\";\n\nexport interface PopupComponentProps extends HTMLAttributes<HTMLDivElement> {\n anchorElement: RefObject<HTMLElement>;\n // TODO this is repeated in Position\n minWidth?: number | string;\n offsetLeft?: number;\n offsetTop?: number;\n placement: PopupPlacement;\n position?: Position;\n}\n\nexport const PopupComponent = ({\n children,\n className,\n anchorElement,\n minWidth,\n offsetLeft,\n offsetTop,\n placement,\n position: positionProp,\n}: PopupComponentProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-popup\",\n css: popupCss,\n window: targetWindow,\n });\n\n const { popupRef, position } = useAnchoredPosition({\n anchorElement,\n minWidth,\n offsetLeft,\n offsetTop,\n placement,\n position: positionProp,\n });\n return position === undefined ? null : (\n <div className={cx(`vuuPortal`, className)} ref={popupRef} style={position}>\n {children}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","popupCss","useAnchoredPosition","jsx"],"mappings":";;;;;;;;;AA6BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA;AACZ,CAA2B,KAAA;AACzB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,QAAS,EAAA,GAAIC,uCAAoB,CAAA;AAAA,IACjD,aAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA;AAAA,GACX,CAAA;AACD,EAAA,OAAO,QAAa,KAAA,KAAA,CAAA,GAAY,IAC9B,mBAAAC,cAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,CAAa,SAAA,CAAA,EAAA,SAAS,CAAG,EAAA,GAAA,EAAK,QAAU,EAAA,KAAA,EAAO,UAC/D,QACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getPositionRelativeToAnchor.js","sources":["../../../../src/popup/getPositionRelativeToAnchor.ts"],"sourcesContent":["import { PopupPlacement } from \"./Popup\";\n\nexport type Visibility = \"hidden\" | \"visible\";\n\nexport type Position = {\n left: number;\n minWidth?: number | string;\n top: number;\n visibility?: Visibility;\n width?: number;\n};\n\nexport const getPositionRelativeToAnchor = (\n anchorElement: HTMLElement,\n placement: PopupPlacement,\n offsetLeft: number,\n offsetTop: number,\n minWidth?: number | string,\n dimensions?: { height: number; width: number }\n): {\n left: number;\n minWidth?: number | string;\n top: number;\n visibility?: Visibility;\n width?: number;\n} => {\n const { bottom, height, left, right, top, width } =\n anchorElement.getBoundingClientRect();\n switch (placement) {\n case \"below\":\n return { left: left + offsetLeft, top: bottom + offsetTop };\n case \"right\":\n return { left: right + offsetLeft, top: top + offsetTop };\n case \"below-center\":\n return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };\n case \"below-right\":\n return { left: left, minWidth, top: bottom + offsetTop };\n case \"below-full-width\":\n return {\n left: left + offsetLeft,\n minWidth,\n top: bottom + offsetTop,\n width,\n };\n case \"center\":\n if (dimensions) {\n return {\n left: width / 2 - dimensions.width / 2 + offsetLeft,\n top: height / 2 - dimensions.height / 2 + offsetTop,\n visibility: \"visible\",\n };\n } else {\n return {\n left: width / 2 + offsetLeft,\n top: height / 2 + offsetTop,\n visibility: \"hidden\",\n };\n }\n default:\n throw Error(\n `Popup getPositionRelativeToAnchor non-supported placement value ${placement}`\n );\n }\n};\n"],"names":[],"mappings":";;AAYO,MAAM,8BAA8B,CACzC,aAAA,EACA,WACA,UACA,EAAA,SAAA,EACA,UACA,UAOG,KAAA;AACH,EAAM,MAAA,EAAE,QAAQ,MAAQ,EAAA,IAAA,EAAM,OAAO,GAAK,EAAA,KAAA,EACxC,GAAA,aAAA,CAAc,qBAAsB,EAAA;AACtC,EAAA,QAAQ,SAAW;AAAA,IACjB,KAAK,OAAA;AACH,MAAA,OAAO,EAAE,IAAM,EAAA,IAAA,GAAO,UAAY,EAAA,GAAA,EAAK,SAAS,SAAU,EAAA;AAAA,IAC5D,KAAK,OAAA;AACH,MAAA,OAAO,EAAE,IAAM,EAAA,KAAA,GAAQ,UAAY,EAAA,GAAA,EAAK,MAAM,SAAU,EAAA;AAAA,IAC1D,KAAK,cAAA;AACH,MAAO,OAAA,EAAE,MAAM,IAAO,GAAA,KAAA,GAAQ,IAAI,UAAY,EAAA,GAAA,EAAK,SAAS,SAAU,EAAA;AAAA,IACxE,KAAK,aAAA;AACH,MAAA,OAAO,EAAE,IAAA,EAAY,QAAU,EAAA,GAAA,EAAK,SAAS,SAAU,EAAA;AAAA,IACzD,KAAK,kBAAA;AACH,MAAO,OAAA;AAAA,QACL,MAAM,IAAO,GAAA,UAAA;AAAA,QACb,QAAA;AAAA,QACA,KAAK,MAAS,GAAA,SAAA;AAAA,QACd;AAAA,OACF;AAAA,IACF,KAAK,QAAA;AACH,MAAA,IAAI,UAAY,EAAA;AACd,QAAO,OAAA;AAAA,UACL,IAAM,EAAA,KAAA,GAAQ,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAI,GAAA,UAAA;AAAA,UACzC,GAAK,EAAA,MAAA,GAAS,CAAI,GAAA,UAAA,CAAW,SAAS,CAAI,GAAA,SAAA;AAAA,UAC1C,UAAY,EAAA;AAAA,SACd;AAAA,OACK,MAAA;AACL,QAAO,OAAA;AAAA,UACL,IAAA,EAAM,QAAQ,CAAI,GAAA,UAAA;AAAA,UAClB,GAAA,EAAK,SAAS,CAAI,GAAA,SAAA;AAAA,UAClB,UAAY,EAAA;AAAA,SACd;AAAA;AACF,IACF;AACE,MAAM,MAAA,KAAA;AAAA,QACJ,mEAAmE,SAAS,CAAA;AAAA,OAC9E;AAAA;AAEN;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popup-service.js","sources":["../../../../src/popup/popup-service.ts"],"sourcesContent":["import cx from \"clsx\";\nimport React, {\n createElement,\n CSSProperties,\n HTMLAttributes,\n KeyboardEvent as ReactKeyboardEvent,\n ReactElement,\n} from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { renderPortal } from \"../portal-deprecated\";\n\nlet _dialogOpen = false;\nconst _popups: string[] = [];\n\nexport type PopupCloseCallback = (reason?: PopupCloseReason) => void;\n\nexport type TabAwayClosePopup = {\n closedBy?: string;\n type: \"tab-away\";\n event: ReactKeyboardEvent;\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 const reasonIsMenuAction = (\n reason?: PopupCloseReason,\n): reason is MenuActionClosePopup => reason?.type === \"menu-action\";\n\nexport const reasonIsClickAway = (\n reason?: PopupCloseReason,\n): reason is ClickAwayClosePopup => reason?.type === \"click-away\";\n\nfunction specialKeyHandler(e: KeyboardEvent) {\n if (e.key === \"Esc\") {\n if (_popups.length) {\n closeAllPopups();\n } else if (_dialogOpen) {\n const dialogRoot = document.body.querySelector(\".vuuDialog\");\n if (dialogRoot) {\n ReactDOM.unmountComponentAtNode(dialogRoot);\n }\n }\n }\n}\n\nfunction outsideClickHandler(e: MouseEvent) {\n if (_popups.length) {\n const popupContainers = document.body.querySelectorAll(\n \".vuuPopup,#vuu-portal-root\",\n );\n for (let i = 0; i < popupContainers.length; i++) {\n if (popupContainers[i].contains(e.target as HTMLElement)) {\n return;\n }\n }\n closeAllPopups({ mouseEvt: e, type: \"click-away\" });\n }\n}\n\nfunction closeAllPopups(reason?: PopupCloseReason) {\n if (_popups.length === 1) {\n PopupService.hidePopup(reason, \"anon\", \"all\");\n } else if (_popups.length) {\n // onsole.log(`closeAllPopups`);\n const popupContainers = document.body.querySelectorAll(\".vuuPopup\");\n for (let i = 0; i < popupContainers.length; i++) {\n ReactDOM.unmountComponentAtNode(popupContainers[i]);\n }\n popupClosed(\"*\");\n }\n}\n\nfunction dialogOpened() {\n if (_dialogOpen === false) {\n _dialogOpen = true;\n window.addEventListener(\"keydown\", specialKeyHandler, true);\n }\n}\n\nfunction dialogClosed() {\n if (_dialogOpen) {\n _dialogOpen = false;\n window.removeEventListener(\"keydown\", specialKeyHandler, true);\n }\n}\n\nfunction popupOpened(name: string) {\n if (_popups.indexOf(name) === -1) {\n _popups.push(name);\n //onsole.log('PopupService, popup opened ' + name + ' popups : ' + _popups);\n if (_dialogOpen === false) {\n window.addEventListener(\"keydown\", specialKeyHandler, true);\n window.addEventListener(\"click\", outsideClickHandler, true);\n }\n }\n}\n\nfunction popupClosed(name: string /*, group=null*/) {\n if (_popups.length) {\n if (name === \"*\") {\n _popups.length = 0;\n } else {\n const pos = _popups.indexOf(name);\n if (pos !== -1) {\n _popups.splice(pos, 1);\n }\n }\n //onsole.log('PopupService, popup closed ' + name + ' popups : ' + _popups);\n if (_popups.length === 0 && _dialogOpen === false) {\n window.removeEventListener(\"keydown\", specialKeyHandler, true);\n window.removeEventListener(\"click\", outsideClickHandler, true);\n }\n }\n}\n\nconst PopupComponent = ({\n children,\n position,\n style,\n}: HTMLAttributes<HTMLDivElement> & {\n position?: \"above\" | \"below\" | \"\";\n style?: CSSProperties;\n}) => {\n const className = cx(\"hwPopup\", \"hwPopupContainer\", position);\n return createElement(\"div\", { className, style }, children);\n};\n\nlet incrementingKey = 1;\n\nexport interface ShowPopupProps {\n depth?: number;\n /**\n * if true, focus will be invoked on first focusable element\n */\n focus?: boolean;\n name?: string;\n group?: string;\n position?: \"above\" | \"below\" | \"\";\n left?: number;\n right?: \"auto\" | number;\n top?: number;\n component: ReactElement;\n width?: number | \"auto\";\n}\n\nexport class PopupService {\n static onClose: PopupCloseCallback | undefined;\n static showPopup({\n group = \"all\",\n name = \"anon\",\n left = 0,\n position = \"\",\n right = \"auto\",\n top = 0,\n width = \"auto\",\n component,\n }: ShowPopupProps) {\n if (!component) {\n throw Error(`PopupService showPopup, no component supplied`);\n }\n\n if (typeof component.props.onClose === \"function\") {\n PopupService.onClose = component.props.onClose;\n } else {\n PopupService.onClose = undefined;\n }\n\n popupOpened(name);\n\n document.addEventListener(\"keydown\", PopupService.escapeKeyListener, true);\n\n let el = document.body.querySelector(\".vuuPopup.\" + group) as HTMLElement;\n if (el === null) {\n el = document.createElement(\"div\") as HTMLElement;\n el.className = \"vuuPopup \" + group;\n document.body.appendChild(el);\n }\n\n const style = { width };\n\n renderPortal(\n createElement(\n PopupComponent,\n { key: incrementingKey++, position, style },\n component,\n ),\n el,\n left,\n top,\n () => {\n PopupService.keepWithinThePage(el, right);\n },\n );\n }\n\n static escapeKeyListener(evt: KeyboardEvent) {\n if (evt.key === \"Escape\") {\n PopupService.hidePopup({ type: \"escape\", event: evt });\n }\n }\n\n static hidePopup(reason?: PopupCloseReason, name = \"anon\", group = \"all\") {\n if (_popups.indexOf(name) !== -1) {\n popupClosed(name);\n const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);\n if (popupRoot) {\n ReactDOM.unmountComponentAtNode(popupRoot);\n }\n }\n document.removeEventListener(\n \"keydown\",\n PopupService.escapeKeyListener,\n true,\n );\n\n PopupService?.onClose?.(\n reason\n ? {\n ...reason,\n closedBy: \"popup-service\",\n }\n : undefined,\n );\n }\n\n static keepWithinThePage(el: HTMLElement, right: number | \"auto\" = \"auto\") {\n const target = el.querySelector(\".vuuPopupContainer > *\") as HTMLElement;\n if (target) {\n const {\n top,\n left,\n width,\n height,\n right: currentRight,\n } = target.getBoundingClientRect();\n\n const w = window.innerWidth;\n const h = window.innerHeight;\n\n const overflowH = h - (top + height);\n if (overflowH < 0) {\n target.style.top = Math.round(top) + overflowH + \"px\";\n }\n\n const overflowW = w - (left + width);\n if (overflowW < 0) {\n target.style.left = Math.round(left) + overflowW + \"px\";\n }\n\n if (typeof right === \"number\" && right !== currentRight) {\n const adjustment = right - currentRight;\n target.style.left = left + adjustment + \"px\";\n }\n }\n }\n}\n\nexport class DialogService {\n static showDialog(dialog: ReactElement) {\n const containerEl = \".vuuDialog\";\n const onClose = dialog.props.onClose;\n\n dialogOpened();\n\n ReactDOM.render(\n React.cloneElement(dialog, {\n container: containerEl,\n onClose: () => {\n DialogService.closeDialog();\n if (onClose) {\n onClose();\n }\n },\n }),\n document.body.querySelector(containerEl),\n );\n }\n\n static closeDialog() {\n dialogClosed();\n const dialogRoot = document.body.querySelector(\".vuuDialog\");\n if (dialogRoot) {\n ReactDOM.unmountComponentAtNode(dialogRoot);\n }\n }\n}\n"],"names":["createElement","renderPortal"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAnchoredPosition.js","sources":["../../../../src/popup/useAnchoredPosition.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n getPositionRelativeToAnchor,\n Position,\n} from \"./getPositionRelativeToAnchor\";\nimport { PopupComponentProps } from \"./Popup\";\n\nexport type AnchoredPositionHookProps = Pick<\n PopupComponentProps,\n | \"anchorElement\"\n | \"minWidth\"\n | \"offsetLeft\"\n | \"offsetTop\"\n | \"placement\"\n | \"position\"\n>;\n\nexport const useAnchoredPosition = ({\n anchorElement,\n minWidth,\n offsetLeft = 0,\n offsetTop = 0,\n placement,\n position: positionProp,\n}: AnchoredPositionHookProps) => {\n const popupRef = useRef<HTMLElement | null>(null);\n const [position, setPosition] = useState<Position | undefined>(positionProp);\n\n // maybe better as useMemo ?\n useLayoutEffect(() => {\n if (placement === \"absolute\" && positionProp) {\n setPosition(positionProp);\n } else if (anchorElement.current && placement !== \"auto\") {\n const dimensions =\n popupRef.current === null\n ? undefined\n : popupRef.current.getBoundingClientRect();\n const position = getPositionRelativeToAnchor(\n anchorElement.current,\n placement,\n offsetLeft,\n offsetTop,\n minWidth,\n dimensions\n );\n setPosition(position);\n }\n }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);\n\n const popupCallbackRef = useCallback(\n (el: HTMLDivElement | null) => {\n popupRef.current = el;\n if (el && placement === \"center\" && anchorElement.current) {\n const { height, width } = el.getBoundingClientRect();\n setPosition(\n getPositionRelativeToAnchor(\n anchorElement.current,\n placement,\n offsetLeft,\n offsetTop,\n undefined,\n { height, width }\n )\n );\n }\n },\n [anchorElement, offsetLeft, offsetTop, placement]\n );\n\n return {\n position,\n popupRef: placement === \"center\" ? popupCallbackRef : undefined,\n };\n};\n"],"names":["useRef","useState","useLayoutEffect","position","getPositionRelativeToAnchor","useCallback"],"mappings":";;;;;AAiBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,aAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAa,GAAA,CAAA;AAAA,EACb,SAAY,GAAA,CAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAU,EAAA;AACZ,CAAiC,KAAA;AAC/B,EAAM,MAAA,QAAA,GAAWA,aAA2B,IAAI,CAAA;AAChD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAA+B,YAAY,CAAA;AAG3E,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAI,IAAA,SAAA,KAAc,cAAc,YAAc,EAAA;AAC5C,MAAA,WAAA,CAAY,YAAY,CAAA;AAAA,KACf,MAAA,IAAA,aAAA,CAAc,OAAW,IAAA,SAAA,KAAc,MAAQ,EAAA;AACxD,MAAA,MAAM,aACJ,QAAS,CAAA,OAAA,KAAY,OACjB,KACA,CAAA,GAAA,QAAA,CAAS,QAAQ,qBAAsB,EAAA;AAC7C,MAAA,MAAMC,SAAW,GAAAC,uDAAA;AAAA,QACf,aAAc,CAAA,OAAA;AAAA,QACd,SAAA;AAAA,QACA,UAAA;AAAA,QACA,SAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,WAAA,CAAYD,SAAQ,CAAA;AAAA;AACtB,GACF,EAAG,CAAC,aAAe,EAAA,QAAA,EAAU,YAAY,SAAW,EAAA,SAAA,EAAW,YAAY,CAAC,CAAA;AAE5E,EAAA,MAAM,gBAAmB,GAAAE,iBAAA;AAAA,IACvB,CAAC,EAA8B,KAAA;AAC7B,MAAA,QAAA,CAAS,OAAU,GAAA,EAAA;AACnB,MAAA,IAAI,EAAM,IAAA,SAAA,KAAc,QAAY,IAAA,aAAA,CAAc,OAAS,EAAA;AACzD,QAAA,MAAM,EAAE,MAAA,EAAQ,KAAM,EAAA,GAAI,GAAG,qBAAsB,EAAA;AACnD,QAAA,WAAA;AAAA,UACED,uDAAA;AAAA,YACE,aAAc,CAAA,OAAA;AAAA,YACd,SAAA;AAAA,YACA,UAAA;AAAA,YACA,SAAA;AAAA,YACA,KAAA,CAAA;AAAA,YACA,EAAE,QAAQ,KAAM;AAAA;AAClB,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,aAAA,EAAe,UAAY,EAAA,SAAA,EAAW,SAAS;AAAA,GAClD;AAEA,EAAO,OAAA;AAAA,IACL,QAAA;AAAA,IACA,QAAA,EAAU,SAAc,KAAA,QAAA,GAAW,gBAAmB,GAAA,KAAA;AAAA,GACxD;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopupMenu.js","sources":["../../../../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, RefObject } from \"react\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { PopupCloseReason } from \"../popup/popup-service\";\nimport { usePopupMenu } from \"./usePopupMenu\";\n\nimport popupMenuCss from \"./PopupMenu.css\";\n\nconst classBase = \"vuuPopupMenu\";\n\nexport type MenuCloseHandler = (reason?: PopupCloseReason) => void;\n\nexport interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {\n anchorElement?: RefObject<HTMLElement>;\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":";;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,cAAA;AAoBX,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;;;;"}
|
|
@@ -2,18 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var getPositionRelativeToAnchor = require('../popup/getPositionRelativeToAnchor.js');
|
|
5
|
-
require('
|
|
6
|
-
require('
|
|
7
|
-
require('
|
|
8
|
-
var useContextMenu = require('
|
|
9
|
-
var popupService = require('../popup/popup-service.js');
|
|
5
|
+
require('../../../vuu-context-menu/src/ContextMenuProvider.js');
|
|
6
|
+
require('react/jsx-runtime');
|
|
7
|
+
require('@salt-ds/core');
|
|
8
|
+
var useContextMenu = require('../../../vuu-context-menu/src/useContextMenu.js');
|
|
10
9
|
|
|
11
10
|
const usePopupMenu = ({
|
|
12
11
|
anchorElement,
|
|
13
12
|
id,
|
|
14
13
|
menuActionHandler,
|
|
15
14
|
menuBuilder,
|
|
16
|
-
menuClassName,
|
|
17
15
|
menuLocation,
|
|
18
16
|
menuOptions,
|
|
19
17
|
onMenuClose,
|
|
@@ -33,31 +31,15 @@ const usePopupMenu = ({
|
|
|
33
31
|
},
|
|
34
32
|
[onMenuOpen]
|
|
35
33
|
);
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const handleMenuClose = React.useCallback(
|
|
43
|
-
(reason) => {
|
|
44
|
-
setMenuOpen(false);
|
|
45
|
-
if (popupService.reasonIsClickAway(reason)) {
|
|
46
|
-
const target = reason.mouseEvt.target;
|
|
47
|
-
if (target === rootRef.current) {
|
|
48
|
-
suppressShowMenuRef.current = true;
|
|
49
|
-
}
|
|
50
|
-
onMenuClose?.(reason);
|
|
51
|
-
} else {
|
|
52
|
-
requestAnimationFrame(() => {
|
|
53
|
-
onMenuClose?.(reason);
|
|
54
|
-
if (tabIndex !== -1 && reason?.type !== "tab-away") {
|
|
55
|
-
rootRef.current?.focus();
|
|
56
|
-
}
|
|
57
|
-
});
|
|
34
|
+
const showContextMenu = useContextMenu.useContextMenu(menuBuilder, menuActionHandler);
|
|
35
|
+
const handleMenuOpenChange = React.useCallback(
|
|
36
|
+
(isOpen) => {
|
|
37
|
+
if (isOpen === false) {
|
|
38
|
+
setMenuOpen(false);
|
|
39
|
+
onMenuClose?.();
|
|
58
40
|
}
|
|
59
41
|
},
|
|
60
|
-
[onMenuClose, setMenuOpen
|
|
42
|
+
[onMenuClose, setMenuOpen]
|
|
61
43
|
);
|
|
62
44
|
const showMenu = React.useCallback(
|
|
63
45
|
(e) => {
|
|
@@ -68,38 +50,29 @@ const usePopupMenu = ({
|
|
|
68
50
|
if (anchorEl) {
|
|
69
51
|
const {
|
|
70
52
|
left: x,
|
|
71
|
-
top: y
|
|
72
|
-
width
|
|
53
|
+
top: y
|
|
54
|
+
// width,
|
|
73
55
|
} = getPositionRelativeToAnchor.getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);
|
|
74
56
|
setMenuOpen(true);
|
|
75
|
-
showContextMenu(e, menuLocation, {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
x,
|
|
83
|
-
y
|
|
84
|
-
},
|
|
85
|
-
style: { width: width ? width - 2 : void 0 }
|
|
86
|
-
},
|
|
87
|
-
...menuOptions
|
|
57
|
+
showContextMenu(e, menuLocation, menuOptions, {
|
|
58
|
+
// className: menuClassName,
|
|
59
|
+
// id: `${id}-menu`,
|
|
60
|
+
onOpenChange: handleMenuOpenChange,
|
|
61
|
+
x,
|
|
62
|
+
y
|
|
63
|
+
// style: { width: width ? width - 2 : undefined },
|
|
88
64
|
});
|
|
89
65
|
}
|
|
90
66
|
}
|
|
91
67
|
},
|
|
92
68
|
[
|
|
93
69
|
anchorElement,
|
|
94
|
-
handleMenuClose,
|
|
95
|
-
handleOpenMenu,
|
|
96
|
-
id,
|
|
97
|
-
menuClassName,
|
|
98
|
-
menuLocation,
|
|
99
|
-
menuOptions,
|
|
100
70
|
popupPlacement,
|
|
101
71
|
setMenuOpen,
|
|
102
|
-
showContextMenu
|
|
72
|
+
showContextMenu,
|
|
73
|
+
menuLocation,
|
|
74
|
+
menuOptions,
|
|
75
|
+
handleMenuOpenChange
|
|
103
76
|
]
|
|
104
77
|
);
|
|
105
78
|
const ariaAttributes = {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopupMenu.js","sources":["../../../../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;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Portal.js","sources":["../../../../src/portal/Portal.tsx"],"sourcesContent":["import { ThemeAttributes, useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport portalCss from \"./Portal.css\";\n\nexport interface PortalProps {\n /**\n * The children to render into the `container`.\n */\n children?: ReactNode;\n /**\n * An HTML element, component instance, or function that returns either.\n * The `container` will have the portal children appended to it.\n *\n * By default, it uses the body of the top-level document object,\n * so it's simply `document.body` most of the time.\n */\n container?: Element | (() => Element | null) | null;\n /**\n * Id of element into which portal will be rendered. If this node does not exist on the document,\n * it will be created for you. If more than one value is provided, the first element found will\n * be used.\n */\n id?: string | string[];\n /**\n * Callback invoked immediately after render (in layoutEffect). Can be\n * used to check position vis-a-vis viewport and adjust if out of bounds\n */\n onRender?: () => void;\n /**\n * Allow conditional rendering of this Portal, if false, will render nothing.\n * Defaults to true\n */\n open?: boolean;\n /**\n * ThemeAttributes can be passed in for cases where ContextMenu is\n * rendered via popup-service showPopup, outside the Context hierarchy.\n */\n themeAttributes?: ThemeAttributes;\n}\n\nfunction getContainer(container: PortalProps[\"container\"]) {\n return typeof container === \"function\" ? container() : container;\n}\n\nconst DEFAULT_ID = [\"vuu-dialog-portal-root\", \"vuu-portal-root\"];\n\nconst getFirstAvailableElementById = (id: string | string[]) => {\n if (Array.isArray(id)) {\n for (const i of id) {\n const element = document.getElementById(i);\n if (element) {\n return element;\n }\n }\n } else {\n return document.getElementById(id);\n }\n return null;\n};\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal = ({\n children,\n container: containerProp = document.body,\n id = DEFAULT_ID,\n onRender,\n open = true,\n themeAttributes,\n}: PortalProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-portal\",\n css: portalCss,\n window: targetWindow,\n });\n\n const [mounted, setMounted] = useState(false);\n const portalRef = useRef<HTMLElement | null>(null);\n const container = getContainer(containerProp) ?? document.body;\n const [themeClass, densityClass, dataMode] =\n useThemeAttributes(themeAttributes);\n\n useLayoutEffect(() => {\n const root = getFirstAvailableElementById(id);\n if (root) {\n portalRef.current = root;\n } else {\n portalRef.current = document.createElement(\"div\");\n portalRef.current.id =\n typeof id === \"string\"\n ? id\n : id.length > 0\n ? (id.at(-1) as string)\n : \"vuu-portal-root\";\n }\n const el = portalRef.current;\n if (!container.contains(el)) {\n container.appendChild(el);\n }\n el.classList.add(themeClass, densityClass);\n el.dataset.mode = dataMode;\n setMounted(true);\n }, [id, container, themeClass, densityClass, dataMode]);\n\n useLayoutEffect(() => {\n requestAnimationFrame(() => {\n onRender?.();\n });\n }, [onRender]);\n\n if (open && mounted && portalRef.current && children) {\n return createPortal(children, portalRef.current);\n }\n\n return null;\n};\n"],"names":["useWindow","useComponentCssInjection","portalCss","useState","useRef","useThemeAttributes","useLayoutEffect","createPortal"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"render-portal.js","sources":["../../../../src/portal-deprecated/render-portal.tsx"],"sourcesContent":["import * as ReactDOM from \"react-dom\";\nimport { ReactElement } from \"react\";\nimport cx from \"clsx\";\n\nlet containerId = 1;\n\n// render this inline for now as we don't have a react componnet to inject it\nconst popupCss =\n \"box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);position: absolute;top: 0;left: 0;width: 0;height: 0;overflow: visible;z-index: 1000\";\n\nconst getPortalContainer = ({\n className,\n dataMode,\n x = 0,\n y = 0,\n win = window,\n}: HTMLContainerProps) => {\n const el = win.document.createElement(\"div\");\n el.className = cx(`vuuPopup ${containerId++}`, className);\n el.style.cssText = `left:${x}px; top:${y}px;${popupCss}`;\n if (dataMode) {\n el.dataset.mode = dataMode;\n }\n win.document.body.appendChild(el);\n return el;\n};\n\nexport interface HTMLContainerProps {\n className?: string;\n dataMode?: string;\n x?: number;\n y?: number;\n win?: typeof globalThis;\n}\n\nexport const createContainer = (props: HTMLContainerProps) =>\n getPortalContainer(props);\n\nexport const renderPortal = (\n component: ReactElement,\n container: HTMLElement,\n x: number,\n y: number,\n onRender?: () => void\n) => {\n // check this first to see if position has changed\n container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;\n\n ReactDOM.render(component, container, onRender);\n};\n"],"names":["ReactDOM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAI,WAAc,GAAA,CAAA;AAGlB,MAAM,QACJ,GAAA,kIAAA;AAEF,MAAM,qBAAqB,CAAC;AAAA,EAC1B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,CAAI,GAAA,CAAA;AAAA,EACJ,CAAI,GAAA,CAAA;AAAA,EACJ,GAAM,GAAA;AACR,CAA0B,KAAA;AACxB,EAAA,MAAM,EAAK,GAAA,GAAA,CAAI,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA;AAC3C,EAAA,EAAA,CAAG,SAAY,GAAA,EAAA,CAAG,CAAY,SAAA,EAAA,WAAA,EAAa,IAAI,SAAS,CAAA;AACxD,EAAA,EAAA,CAAG,MAAM,OAAU,GAAA,CAAA,KAAA,EAAQ,CAAC,CAAW,QAAA,EAAA,CAAC,MAAM,QAAQ,CAAA,CAAA;AACtD,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,EAAA,CAAG,QAAQ,IAAO,GAAA,QAAA;AAAA;AAEpB,EAAI,GAAA,CAAA,QAAA,CAAS,IAAK,CAAA,WAAA,CAAY,EAAE,CAAA;AAChC,EAAO,OAAA,EAAA;AACT,CAAA;AAUO,MAAM,eAAkB,GAAA,CAAC,KAC9B,KAAA,kBAAA,CAAmB,KAAK;AAEnB,MAAM,eAAe,CAC1B,SAAA,EACA,SACA,EAAA,CAAA,EACA,GACA,QACG,KAAA;AAEH,EAAA,SAAA,CAAU,KAAM,CAAA,OAAA,GAAU,CAAQ,KAAA,EAAA,CAAC,WAAW,CAAC,CAAA,sBAAA,CAAA;AAE/C,EAASA,mBAAA,CAAA,MAAA,CAAO,SAAW,EAAA,SAAA,EAAW,QAAQ,CAAA;AAChD;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Prompt.js","sources":["../../../../src/prompt/Prompt.tsx"],"sourcesContent":["import { useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useLayoutEffect, useRef } from \"react\";\nimport { PopupComponentProps, useAnchoredPosition } from \"../popup\";\n\nimport propmtCss from \"./Prompt.css\";\n\nconst classBase = \"vuuPrompt\";\n\nconst AnchorBody = { current: document.body };\n\nconst EMPTY_PROPS = {};\n\nexport interface PromptProps extends HTMLAttributes<HTMLDialogElement> {\n PopupProps?: Partial<PopupComponentProps>;\n cancelButtonLabel?: string;\n confirmButtonLabel?: string;\n onCancel: () => void;\n onConfirm: () => void;\n icon?: string;\n text: string;\n variant?: \"warn\" | \"error\" | \"info\";\n}\n\nexport const Prompt = ({\n PopupProps = EMPTY_PROPS,\n cancelButtonLabel = \"Cancel\",\n confirmButtonLabel = \"Confirm\",\n icon,\n onCancel,\n onConfirm,\n style,\n text,\n title,\n variant = \"info\",\n ...htmlAttributes\n}: PromptProps) => {\n const {\n anchorElement = AnchorBody,\n offsetLeft = 0,\n offsetTop = 0,\n placement = \"below\",\n } = PopupProps;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-prompt\",\n css: propmtCss,\n window: targetWindow,\n });\n\n const [themeClass, _, dataMode] = useThemeAttributes();\n const { position } = useAnchoredPosition({\n anchorElement,\n offsetLeft,\n offsetTop,\n placement,\n });\n const rootRef = useRef<HTMLDialogElement>(null);\n const confirmRef = useRef<HTMLButtonElement>(null);\n\n useLayoutEffect(() => {\n if (rootRef.current) {\n rootRef.current.showModal();\n if (confirmRef.current) {\n confirmRef.current.focus();\n }\n if (placement.endsWith(\"center\")) {\n const { width } = rootRef.current.getBoundingClientRect();\n rootRef.current.style.marginLeft = `-${width / 2}px`;\n }\n }\n }, [placement]);\n\n return (\n <dialog\n {...htmlAttributes}\n className={cx(classBase, `${classBase}-${variant}`, themeClass)}\n data-mode={dataMode}\n ref={rootRef}\n style={{ ...style, ...position }}\n >\n <form className={`${classBase}-form`}>\n <div className={`${classBase}-header`} data-icon={icon}>\n {title}\n </div>\n <div className={`${classBase}-text`}>{text}</div>\n <div className={`${classBase}-buttonBar`}>\n <Button onClick={onCancel} variant=\"secondary\">\n {cancelButtonLabel}\n </Button>\n <Button onClick={onConfirm} ref={confirmRef} value=\"default\">\n {confirmButtonLabel}\n </Button>\n </div>\n </form>\n </dialog>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","propmtCss","useThemeAttributes","useAnchoredPosition","useRef","useLayoutEffect","jsx","jsxs","Button"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from \"react\";\nimport { Portal } from \"../portal\";\nimport {\n TooltipPlacement,\n useTooltipAnchoredPosition,\n} from \"./useTooltipAnchoredPosition\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tooltipCss from \"./Tooltip.css\";\n\nconst classBase = \"vuuTooltip\";\n\nexport type TooltipStatus = \"warning\" | \"error\" | \"info\";\nexport interface TooltipProps {\n anchorElement: RefObject<HTMLElement>;\n children: ReactNode;\n className?: string;\n id?: string;\n onMouseEnter: MouseEventHandler;\n onMouseLeave: MouseEventHandler;\n placement: TooltipPlacement | TooltipPlacement[];\n status?: TooltipStatus;\n style?: CSSProperties;\n}\n\nexport const Tooltip = ({\n anchorElement,\n children,\n className,\n id,\n onMouseEnter,\n onMouseLeave,\n placement: placementProp,\n status,\n style: styleProp,\n}: TooltipProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const ref = useTooltipAnchoredPosition({\n anchorElement,\n placement: placementProp,\n });\n return (\n <Portal>\n <div\n className={cx(classBase, className, \"vuuHidden\", {\n [`${classBase}-error`]: status === \"error\",\n })}\n id={id}\n ref={ref}\n style={{ ...styleProp, left: 0, top: 0 }}\n >\n <span\n className={`${classBase}-content`}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n {children}\n </span>\n </div>\n </Portal>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","tooltipCss","useTooltipAnchoredPosition","Portal","jsx"],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,YAAA;AAeX,MAAM,UAAU,CAAC;AAAA,EACtB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,MAAMC,qDAA2B,CAAA;AAAA,IACrC,aAAA;AAAA,IACA,SAAW,EAAA;AAAA,GACZ,CAAA;AACD,EAAA,sCACGC,aACC,EAAA,EAAA,QAAA,kBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,WAAa,EAAA;AAAA,QAC/C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,MAAW,KAAA;AAAA,OACpC,CAAA;AAAA,MACD,EAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAO,EAAE,GAAG,WAAW,IAAM,EAAA,CAAA,EAAG,KAAK,CAAE,EAAA;AAAA,MAEvC,QAAA,kBAAAA,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,UACvB,YAAA;AAAA,UACA,YAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../../../../src/tooltip/useTooltip.ts"],"sourcesContent":["import { queryClosest, useId } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactNode, useCallback, useRef, useState } from \"react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { TooltipPlacement } from \"./useTooltipAnchoredPosition\";\n\nexport interface TooltipHookProps {\n anchorQuery?: string;\n id: string;\n placement?: TooltipPlacement | TooltipPlacement[];\n tooltipContent: ReactNode;\n}\n\nexport const useTooltip = ({\n anchorQuery = \"*\",\n id: idProp,\n placement = [\"right\", \"above\", \"below\"],\n tooltipContent,\n}: TooltipHookProps) => {\n const hideTooltipRef = useRef<() => void>();\n const isHoveringRef = useRef(false);\n const anchorElementRef = useRef<HTMLElement | null>(null);\n const mouseEnterTimerRef = useRef<number | undefined>();\n const mouseLeaveTimerRef = useRef<number | undefined>();\n const [tooltipProps, setTooltipProps] = useState<TooltipProps | undefined>();\n\n const id = useId(idProp);\n\n const escapeListener = useCallback((evt: KeyboardEvent) => {\n if (evt.key === \"Escape\") {\n hideTooltipRef.current?.();\n }\n }, []);\n\n hideTooltipRef.current = useCallback(() => {\n setTooltipProps(undefined);\n document.removeEventListener(\"keydown\", escapeListener);\n }, [escapeListener]);\n\n const handleMouseEnterTooltip = useCallback(() => {\n window.clearTimeout(mouseLeaveTimerRef.current);\n }, []);\n\n const handleMouseLeaveTooltip = useCallback(() => {\n hideTooltipRef.current?.();\n }, []);\n\n const hideTooltip = useCallback((defer = 0) => {\n if (mouseEnterTimerRef.current) {\n window.clearTimeout(mouseEnterTimerRef.current);\n mouseEnterTimerRef.current = undefined;\n } else if (hideTooltipRef.current) {\n if (defer === 0) {\n hideTooltipRef.current();\n } else {\n mouseLeaveTimerRef.current = window.setTimeout(\n hideTooltipRef.current,\n defer,\n );\n }\n }\n }, []);\n\n const showTooltip = useCallback(\n (ref = anchorElementRef) => {\n const { current: anchorEl } = ref;\n if (anchorEl) {\n setTooltipProps({\n anchorElement: ref,\n children: tooltipContent,\n id: `${id}-tooltip`,\n onMouseEnter: handleMouseEnterTooltip,\n onMouseLeave: handleMouseLeaveTooltip,\n placement: placement,\n });\n // register ESC listener\n document.addEventListener(\"keydown\", escapeListener);\n }\n mouseEnterTimerRef.current = undefined;\n hideTooltip(isHoveringRef.current ? 3000 : 1000);\n },\n [\n escapeListener,\n handleMouseEnterTooltip,\n handleMouseLeaveTooltip,\n hideTooltip,\n id,\n placement,\n tooltipContent,\n ],\n );\n\n const handleMouseEnter = useCallback(\n (evt: MouseEvent) => {\n isHoveringRef.current = true;\n const el = queryClosest(evt.target, anchorQuery);\n if (el) {\n console.log(`el ${el.classList}`);\n anchorElementRef.current = el;\n mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);\n }\n },\n [anchorQuery, showTooltip],\n );\n\n const handleMouseLeave = useCallback(() => {\n isHoveringRef.current = false;\n hideTooltip(200);\n }, [hideTooltip]);\n\n const anchorProps = {\n \"aria-describedby\": `${id}-tooltip`,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n };\n\n return {\n anchorProps,\n hideTooltip,\n showTooltip,\n tooltipProps,\n };\n};\n"],"names":["useRef","useState","useId","useCallback","queryClosest"],"mappings":"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"}
|