@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.
Files changed (219) hide show
  1. package/cjs/vuu-context-menu/src/ContextMenu.css.js +6 -0
  2. package/cjs/vuu-context-menu/src/ContextMenu.css.js.map +1 -0
  3. package/cjs/vuu-context-menu/src/ContextMenu.js +48 -0
  4. package/cjs/vuu-context-menu/src/ContextMenu.js.map +1 -0
  5. package/cjs/vuu-context-menu/src/ContextMenuProvider.js +11 -0
  6. package/cjs/vuu-context-menu/src/ContextMenuProvider.js.map +1 -0
  7. package/cjs/vuu-context-menu/src/menu-utils.js +26 -0
  8. package/cjs/vuu-context-menu/src/menu-utils.js.map +1 -0
  9. package/cjs/vuu-context-menu/src/useContextMenu.js +89 -0
  10. package/cjs/vuu-context-menu/src/useContextMenu.js.map +1 -0
  11. package/cjs/vuu-popups/src/dialog/useDialog.js.map +1 -0
  12. package/cjs/vuu-popups/src/dialog-header/DialogHeader.js.map +1 -0
  13. package/cjs/{index.js → vuu-popups/src/index.js} +0 -14
  14. package/cjs/vuu-popups/src/index.js.map +1 -0
  15. package/cjs/vuu-popups/src/notifications/NotificationsCenter.js.map +1 -0
  16. package/cjs/vuu-popups/src/notifications/NotificationsProvider.js.map +1 -0
  17. package/cjs/vuu-popups/src/notifications/ToastNotification.js.map +1 -0
  18. package/cjs/vuu-popups/src/popup/Popup.js.map +1 -0
  19. package/cjs/vuu-popups/src/popup/getPositionRelativeToAnchor.js.map +1 -0
  20. package/cjs/vuu-popups/src/popup/popup-service.js.map +1 -0
  21. package/cjs/vuu-popups/src/popup/useAnchoredPosition.js.map +1 -0
  22. package/cjs/vuu-popups/src/popup-menu/PopupMenu.js.map +1 -0
  23. package/cjs/{popup-menu → vuu-popups/src/popup-menu}/usePopupMenu.js +24 -51
  24. package/cjs/vuu-popups/src/popup-menu/usePopupMenu.js.map +1 -0
  25. package/cjs/vuu-popups/src/portal/Portal.js.map +1 -0
  26. package/cjs/vuu-popups/src/portal-deprecated/render-portal.js.map +1 -0
  27. package/cjs/vuu-popups/src/prompt/Prompt.js.map +1 -0
  28. package/cjs/vuu-popups/src/tooltip/Tooltip.js.map +1 -0
  29. package/cjs/vuu-popups/src/tooltip/useTooltip.js.map +1 -0
  30. package/cjs/vuu-popups/src/tooltip/useTooltipAnchoredPosition.js.map +1 -0
  31. package/esm/vuu-context-menu/src/ContextMenu.css.js +4 -0
  32. package/esm/vuu-context-menu/src/ContextMenu.css.js.map +1 -0
  33. package/esm/vuu-context-menu/src/ContextMenu.js +46 -0
  34. package/esm/vuu-context-menu/src/ContextMenu.js.map +1 -0
  35. package/esm/vuu-context-menu/src/ContextMenuProvider.js +9 -0
  36. package/esm/vuu-context-menu/src/ContextMenuProvider.js.map +1 -0
  37. package/esm/vuu-context-menu/src/menu-utils.js +23 -0
  38. package/esm/vuu-context-menu/src/menu-utils.js.map +1 -0
  39. package/esm/vuu-context-menu/src/useContextMenu.js +87 -0
  40. package/esm/vuu-context-menu/src/useContextMenu.js.map +1 -0
  41. package/esm/vuu-popups/src/dialog/useDialog.js.map +1 -0
  42. package/esm/vuu-popups/src/dialog-header/DialogHeader.js.map +1 -0
  43. package/esm/{index.js → vuu-popups/src/index.js} +0 -4
  44. package/esm/{index.js.map → vuu-popups/src/index.js.map} +1 -1
  45. package/esm/vuu-popups/src/notifications/NotificationsCenter.js.map +1 -0
  46. package/esm/vuu-popups/src/notifications/NotificationsProvider.js.map +1 -0
  47. package/esm/vuu-popups/src/notifications/ToastNotification.js.map +1 -0
  48. package/esm/vuu-popups/src/popup/Popup.js.map +1 -0
  49. package/esm/vuu-popups/src/popup/getPositionRelativeToAnchor.js.map +1 -0
  50. package/esm/vuu-popups/src/popup/popup-service.js.map +1 -0
  51. package/esm/vuu-popups/src/popup/useAnchoredPosition.js.map +1 -0
  52. package/esm/vuu-popups/src/popup-menu/PopupMenu.js.map +1 -0
  53. package/esm/vuu-popups/src/popup-menu/usePopupMenu.js +90 -0
  54. package/esm/vuu-popups/src/popup-menu/usePopupMenu.js.map +1 -0
  55. package/esm/vuu-popups/src/portal/Portal.js.map +1 -0
  56. package/esm/vuu-popups/src/portal-deprecated/render-portal.js.map +1 -0
  57. package/esm/vuu-popups/src/prompt/Prompt.js.map +1 -0
  58. package/esm/vuu-popups/src/tooltip/Tooltip.js.map +1 -0
  59. package/esm/vuu-popups/src/tooltip/useTooltip.js.map +1 -0
  60. package/esm/vuu-popups/src/tooltip/useTooltipAnchoredPosition.js.map +1 -0
  61. package/package.json +5 -5
  62. package/types/index.d.ts +0 -1
  63. package/types/popup/popup-service.d.ts +1 -2
  64. package/types/popup-menu/PopupMenu.d.ts +1 -1
  65. package/types/popup-menu/usePopupMenu.d.ts +1 -1
  66. package/cjs/dialog/useDialog.js.map +0 -1
  67. package/cjs/dialog-header/DialogHeader.js.map +0 -1
  68. package/cjs/index.js.map +0 -1
  69. package/cjs/menu/ContextMenu.js +0 -118
  70. package/cjs/menu/ContextMenu.js.map +0 -1
  71. package/cjs/menu/MenuList.css.js +0 -6
  72. package/cjs/menu/MenuList.css.js.map +0 -1
  73. package/cjs/menu/MenuList.js +0 -172
  74. package/cjs/menu/MenuList.js.map +0 -1
  75. package/cjs/menu/context-menu-provider.js +0 -66
  76. package/cjs/menu/context-menu-provider.js.map +0 -1
  77. package/cjs/menu/key-code.js +0 -54
  78. package/cjs/menu/key-code.js.map +0 -1
  79. package/cjs/menu/list-dom-utils.js +0 -6
  80. package/cjs/menu/list-dom-utils.js.map +0 -1
  81. package/cjs/menu/use-cascade.js +0 -279
  82. package/cjs/menu/use-cascade.js.map +0 -1
  83. package/cjs/menu/use-items-with-ids-next.js +0 -68
  84. package/cjs/menu/use-items-with-ids-next.js.map +0 -1
  85. package/cjs/menu/use-keyboard-navigation.js +0 -140
  86. package/cjs/menu/use-keyboard-navigation.js.map +0 -1
  87. package/cjs/menu/useContextMenu.js +0 -143
  88. package/cjs/menu/useContextMenu.js.map +0 -1
  89. package/cjs/menu/utils.js +0 -8
  90. package/cjs/menu/utils.js.map +0 -1
  91. package/cjs/notifications/NotificationsCenter.js.map +0 -1
  92. package/cjs/notifications/NotificationsProvider.js.map +0 -1
  93. package/cjs/notifications/ToastNotification.js.map +0 -1
  94. package/cjs/popup/Popup.js.map +0 -1
  95. package/cjs/popup/getPositionRelativeToAnchor.js.map +0 -1
  96. package/cjs/popup/popup-service.js.map +0 -1
  97. package/cjs/popup/useAnchoredPosition.js.map +0 -1
  98. package/cjs/popup-menu/PopupMenu.js.map +0 -1
  99. package/cjs/popup-menu/usePopupMenu.js.map +0 -1
  100. package/cjs/portal/Portal.js.map +0 -1
  101. package/cjs/portal-deprecated/render-portal.js.map +0 -1
  102. package/cjs/prompt/Prompt.js.map +0 -1
  103. package/cjs/tooltip/Tooltip.js.map +0 -1
  104. package/cjs/tooltip/useTooltip.js.map +0 -1
  105. package/cjs/tooltip/useTooltipAnchoredPosition.js.map +0 -1
  106. package/esm/dialog/useDialog.js.map +0 -1
  107. package/esm/dialog-header/DialogHeader.js.map +0 -1
  108. package/esm/menu/ContextMenu.js +0 -116
  109. package/esm/menu/ContextMenu.js.map +0 -1
  110. package/esm/menu/MenuList.css.js +0 -4
  111. package/esm/menu/MenuList.css.js.map +0 -1
  112. package/esm/menu/MenuList.js +0 -165
  113. package/esm/menu/MenuList.js.map +0 -1
  114. package/esm/menu/context-menu-provider.js +0 -63
  115. package/esm/menu/context-menu-provider.js.map +0 -1
  116. package/esm/menu/key-code.js +0 -50
  117. package/esm/menu/key-code.js.map +0 -1
  118. package/esm/menu/list-dom-utils.js +0 -4
  119. package/esm/menu/list-dom-utils.js.map +0 -1
  120. package/esm/menu/use-cascade.js +0 -276
  121. package/esm/menu/use-cascade.js.map +0 -1
  122. package/esm/menu/use-items-with-ids-next.js +0 -66
  123. package/esm/menu/use-items-with-ids-next.js.map +0 -1
  124. package/esm/menu/use-keyboard-navigation.js +0 -138
  125. package/esm/menu/use-keyboard-navigation.js.map +0 -1
  126. package/esm/menu/useContextMenu.js +0 -141
  127. package/esm/menu/useContextMenu.js.map +0 -1
  128. package/esm/menu/utils.js +0 -5
  129. package/esm/menu/utils.js.map +0 -1
  130. package/esm/notifications/NotificationsCenter.js.map +0 -1
  131. package/esm/notifications/NotificationsProvider.js.map +0 -1
  132. package/esm/notifications/ToastNotification.js.map +0 -1
  133. package/esm/popup/Popup.js.map +0 -1
  134. package/esm/popup/getPositionRelativeToAnchor.js.map +0 -1
  135. package/esm/popup/popup-service.js.map +0 -1
  136. package/esm/popup/useAnchoredPosition.js.map +0 -1
  137. package/esm/popup-menu/PopupMenu.js.map +0 -1
  138. package/esm/popup-menu/usePopupMenu.js +0 -117
  139. package/esm/popup-menu/usePopupMenu.js.map +0 -1
  140. package/esm/portal/Portal.js.map +0 -1
  141. package/esm/portal-deprecated/render-portal.js.map +0 -1
  142. package/esm/prompt/Prompt.js.map +0 -1
  143. package/esm/tooltip/Tooltip.js.map +0 -1
  144. package/esm/tooltip/useTooltip.js.map +0 -1
  145. package/esm/tooltip/useTooltipAnchoredPosition.js.map +0 -1
  146. package/types/menu/ContextMenu.d.ts +0 -16
  147. package/types/menu/MenuList.d.ts +0 -45
  148. package/types/menu/aim/aim.d.ts +0 -13
  149. package/types/menu/aim/corners.d.ts +0 -9
  150. package/types/menu/aim/utils.d.ts +0 -4
  151. package/types/menu/context-menu-provider.d.ts +0 -12
  152. package/types/menu/index.d.ts +0 -4
  153. package/types/menu/key-code.d.ts +0 -12
  154. package/types/menu/list-dom-utils.d.ts +0 -4
  155. package/types/menu/use-cascade.d.ts +0 -26
  156. package/types/menu/use-items-with-ids-next.d.ts +0 -12
  157. package/types/menu/use-keyboard-navigation.d.ts +0 -30
  158. package/types/menu/useContextMenu.d.ts +0 -20
  159. package/types/menu/utils.d.ts +0 -2
  160. package/cjs/{dialog → vuu-popups/src/dialog}/useDialog.js +0 -0
  161. package/cjs/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js +0 -0
  162. package/cjs/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js.map +0 -0
  163. package/cjs/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.js +0 -0
  164. package/cjs/{notifications → vuu-popups/src/notifications}/NotificationsCenter.js +0 -0
  165. package/cjs/{notifications → vuu-popups/src/notifications}/NotificationsProvider.js +0 -0
  166. package/cjs/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js +0 -0
  167. package/cjs/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js.map +0 -0
  168. package/cjs/{notifications → vuu-popups/src/notifications}/ToastNotification.js +0 -0
  169. package/cjs/{popup → vuu-popups/src/popup}/Popup.css.js +0 -0
  170. package/cjs/{popup → vuu-popups/src/popup}/Popup.css.js.map +0 -0
  171. package/cjs/{popup → vuu-popups/src/popup}/Popup.js +0 -0
  172. package/cjs/{popup → vuu-popups/src/popup}/getPositionRelativeToAnchor.js +0 -0
  173. package/cjs/{popup → vuu-popups/src/popup}/popup-service.js +0 -0
  174. package/cjs/{popup → vuu-popups/src/popup}/useAnchoredPosition.js +0 -0
  175. package/cjs/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js +0 -0
  176. package/cjs/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js.map +0 -0
  177. package/cjs/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.js +2 -2
  178. package/cjs/{portal → vuu-popups/src/portal}/Portal.css.js +0 -0
  179. package/cjs/{portal → vuu-popups/src/portal}/Portal.css.js.map +0 -0
  180. package/cjs/{portal → vuu-popups/src/portal}/Portal.js +0 -0
  181. package/cjs/{portal-deprecated → vuu-popups/src/portal-deprecated}/render-portal.js +0 -0
  182. package/cjs/{prompt → vuu-popups/src/prompt}/Prompt.css.js +0 -0
  183. package/cjs/{prompt → vuu-popups/src/prompt}/Prompt.css.js.map +0 -0
  184. package/cjs/{prompt → vuu-popups/src/prompt}/Prompt.js +0 -0
  185. package/cjs/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js +0 -0
  186. package/cjs/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js.map +0 -0
  187. package/cjs/{tooltip → vuu-popups/src/tooltip}/Tooltip.js +0 -0
  188. package/cjs/{tooltip → vuu-popups/src/tooltip}/useTooltip.js +0 -0
  189. package/cjs/{tooltip → vuu-popups/src/tooltip}/useTooltipAnchoredPosition.js +0 -0
  190. package/esm/{dialog → vuu-popups/src/dialog}/useDialog.js +0 -0
  191. package/esm/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js +0 -0
  192. package/esm/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.css.js.map +0 -0
  193. package/esm/{dialog-header → vuu-popups/src/dialog-header}/DialogHeader.js +0 -0
  194. package/esm/{notifications → vuu-popups/src/notifications}/NotificationsCenter.js +0 -0
  195. package/esm/{notifications → vuu-popups/src/notifications}/NotificationsProvider.js +0 -0
  196. package/esm/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js +0 -0
  197. package/esm/{notifications → vuu-popups/src/notifications}/ToastNotification.css.js.map +0 -0
  198. package/esm/{notifications → vuu-popups/src/notifications}/ToastNotification.js +0 -0
  199. package/esm/{popup → vuu-popups/src/popup}/Popup.css.js +0 -0
  200. package/esm/{popup → vuu-popups/src/popup}/Popup.css.js.map +0 -0
  201. package/esm/{popup → vuu-popups/src/popup}/Popup.js +0 -0
  202. package/esm/{popup → vuu-popups/src/popup}/getPositionRelativeToAnchor.js +0 -0
  203. package/esm/{popup → vuu-popups/src/popup}/popup-service.js +0 -0
  204. package/esm/{popup → vuu-popups/src/popup}/useAnchoredPosition.js +0 -0
  205. package/esm/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js +0 -0
  206. package/esm/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.css.js.map +0 -0
  207. package/esm/{popup-menu → vuu-popups/src/popup-menu}/PopupMenu.js +2 -2
  208. /package/esm/{portal → vuu-popups/src/portal}/Portal.css.js +0 -0
  209. /package/esm/{portal → vuu-popups/src/portal}/Portal.css.js.map +0 -0
  210. /package/esm/{portal → vuu-popups/src/portal}/Portal.js +0 -0
  211. /package/esm/{portal-deprecated → vuu-popups/src/portal-deprecated}/render-portal.js +0 -0
  212. /package/esm/{prompt → vuu-popups/src/prompt}/Prompt.css.js +0 -0
  213. /package/esm/{prompt → vuu-popups/src/prompt}/Prompt.css.js.map +0 -0
  214. /package/esm/{prompt → vuu-popups/src/prompt}/Prompt.js +0 -0
  215. /package/esm/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js +0 -0
  216. /package/esm/{tooltip → vuu-popups/src/tooltip}/Tooltip.css.js.map +0 -0
  217. /package/esm/{tooltip → vuu-popups/src/tooltip}/Tooltip.js +0 -0
  218. /package/esm/{tooltip → vuu-popups/src/tooltip}/useTooltip.js +0 -0
  219. /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,11 @@
1
+ 'use strict';
2
+
3
+ require('react/jsx-runtime');
4
+ var React = require('react');
5
+
6
+ const ContextMenuContext = React.createContext(
7
+ null
8
+ );
9
+
10
+ exports.ContextMenuContext = ContextMenuContext;
11
+ //# sourceMappingURL=ContextMenuProvider.js.map
@@ -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":"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"}
@@ -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":";;;;;;;;;;AAWA,IAAI,WAAc,GAAA,KAAA;AAClB,MAAM,UAAoB,EAAC;AAmCpB,MAAM,kBAAqB,GAAA,CAChC,MACmC,KAAA,MAAA,EAAQ,IAAS,KAAA;AAE/C,MAAM,iBAAoB,GAAA,CAC/B,MACkC,KAAA,MAAA,EAAQ,IAAS,KAAA;AAErD,SAAS,kBAAkB,CAAkB,EAAA;AAC3C,EAAI,IAAA,CAAA,CAAE,QAAQ,KAAO,EAAA;AACnB,IAAA,IAAI,QAAQ,MAAQ,EAAA;AAClB,MAAe,cAAA,EAAA;AAAA,eACN,WAAa,EAAA;AACtB,MAAA,MAAM,UAAa,GAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,YAAY,CAAA;AAC3D,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,QAAA,CAAS,uBAAuB,UAAU,CAAA;AAAA;AAC5C;AACF;AAEJ;AAEA,SAAS,oBAAoB,CAAe,EAAA;AAC1C,EAAA,IAAI,QAAQ,MAAQ,EAAA;AAClB,IAAM,MAAA,eAAA,GAAkB,SAAS,IAAK,CAAA,gBAAA;AAAA,MACpC;AAAA,KACF;AACA,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,eAAA,CAAgB,QAAQ,CAAK,EAAA,EAAA;AAC/C,MAAA,IAAI,gBAAgB,CAAC,CAAA,CAAE,QAAS,CAAA,CAAA,CAAE,MAAqB,CAAG,EAAA;AACxD,QAAA;AAAA;AACF;AAEF,IAAA,cAAA,CAAe,EAAE,QAAA,EAAU,CAAG,EAAA,IAAA,EAAM,cAAc,CAAA;AAAA;AAEtD;AAEA,SAAS,eAAe,MAA2B,EAAA;AACjD,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAa,YAAA,CAAA,SAAA,CAAU,MAAQ,EAAA,MAAA,EAAQ,KAAK,CAAA;AAAA,GAC9C,MAAA,IAAW,QAAQ,MAAQ,EAAA;AAEzB,IAAA,MAAM,eAAkB,GAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAW,CAAA;AAClE,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,eAAA,CAAgB,QAAQ,CAAK,EAAA,EAAA;AAC/C,MAAS,QAAA,CAAA,sBAAA,CAAuB,eAAgB,CAAA,CAAC,CAAC,CAAA;AAAA;AAEpD,IAAA,WAAA,CAAY,GAAG,CAAA;AAAA;AAEnB;AAEA,SAAS,YAAe,GAAA;AACtB,EAAA,IAAI,gBAAgB,KAAO,EAAA;AACzB,IAAc,WAAA,GAAA,IAAA;AACd,IAAO,MAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,iBAAA,EAAmB,IAAI,CAAA;AAAA;AAE9D;AAEA,SAAS,YAAe,GAAA;AACtB,EAAA,IAAI,WAAa,EAAA;AACf,IAAc,WAAA,GAAA,KAAA;AACd,IAAO,MAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,iBAAA,EAAmB,IAAI,CAAA;AAAA;AAEjE;AAEA,SAAS,YAAY,IAAc,EAAA;AACjC,EAAA,IAAI,OAAQ,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CAAI,CAAA,EAAA;AAChC,IAAA,OAAA,CAAQ,KAAK,IAAI,CAAA;AAEjB,IAAA,IAAI,gBAAgB,KAAO,EAAA;AACzB,MAAO,MAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,iBAAA,EAAmB,IAAI,CAAA;AAC1D,MAAO,MAAA,CAAA,gBAAA,CAAiB,OAAS,EAAA,mBAAA,EAAqB,IAAI,CAAA;AAAA;AAC5D;AAEJ;AAEA,SAAS,YAAY,IAA+B,EAAA;AAClD,EAAA,IAAI,QAAQ,MAAQ,EAAA;AAClB,IAAA,IAAI,SAAS,GAAK,EAAA;AAChB,MAAA,OAAA,CAAQ,MAAS,GAAA,CAAA;AAAA,KACZ,MAAA;AACL,MAAM,MAAA,GAAA,GAAM,OAAQ,CAAA,OAAA,CAAQ,IAAI,CAAA;AAChC,MAAA,IAAI,QAAQ,CAAI,CAAA,EAAA;AACd,QAAQ,OAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA;AACvB;AAGF,IAAA,IAAI,OAAQ,CAAA,MAAA,KAAW,CAAK,IAAA,WAAA,KAAgB,KAAO,EAAA;AACjD,MAAO,MAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,iBAAA,EAAmB,IAAI,CAAA;AAC7D,MAAO,MAAA,CAAA,mBAAA,CAAoB,OAAS,EAAA,mBAAA,EAAqB,IAAI,CAAA;AAAA;AAC/D;AAEJ;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,kBAAA,EAAoB,QAAQ,CAAA;AAC5D,EAAA,OAAOA,oBAAc,KAAO,EAAA,EAAE,SAAW,EAAA,KAAA,IAAS,QAAQ,CAAA;AAC5D,CAAA;AAEA,IAAI,eAAkB,GAAA,CAAA;AAkBf,MAAM,aAAA,GAAN,MAAM,aAAa,CAAA;AAAA,EAExB,OAAO,SAAU,CAAA;AAAA,IACf,KAAQ,GAAA,KAAA;AAAA,IACR,IAAO,GAAA,MAAA;AAAA,IACP,IAAO,GAAA,CAAA;AAAA,IACP,QAAW,GAAA,EAAA;AAAA,IACX,KAAQ,GAAA,MAAA;AAAA,IACR,GAAM,GAAA,CAAA;AAAA,IACN,KAAQ,GAAA,MAAA;AAAA,IACR;AAAA,GACiB,EAAA;AACjB,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,MAAM,MAAM,CAA+C,6CAAA,CAAA,CAAA;AAAA;AAG7D,IAAA,IAAI,OAAO,SAAA,CAAU,KAAM,CAAA,OAAA,KAAY,UAAY,EAAA;AACjD,MAAa,aAAA,CAAA,OAAA,GAAU,UAAU,KAAM,CAAA,OAAA;AAAA,KAClC,MAAA;AACL,MAAA,aAAA,CAAa,OAAU,GAAA,KAAA,CAAA;AAAA;AAGzB,IAAA,WAAA,CAAY,IAAI,CAAA;AAEhB,IAAA,QAAA,CAAS,gBAAiB,CAAA,SAAA,EAAW,aAAa,CAAA,iBAAA,EAAmB,IAAI,CAAA;AAEzE,IAAA,IAAI,EAAK,GAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,eAAe,KAAK,CAAA;AACzD,IAAA,IAAI,OAAO,IAAM,EAAA;AACf,MAAK,EAAA,GAAA,QAAA,CAAS,cAAc,KAAK,CAAA;AACjC,MAAA,EAAA,CAAG,YAAY,WAAc,GAAA,KAAA;AAC7B,MAAS,QAAA,CAAA,IAAA,CAAK,YAAY,EAAE,CAAA;AAAA;AAG9B,IAAM,MAAA,KAAA,GAAQ,EAAE,KAAM,EAAA;AAEtB,IAAAC,yBAAA;AAAA,MACED,mBAAA;AAAA,QACE,cAAA;AAAA,QACA,EAAE,GAAA,EAAK,eAAmB,EAAA,EAAA,QAAA,EAAU,KAAM,EAAA;AAAA,QAC1C;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAM;AACJ,QAAa,aAAA,CAAA,iBAAA,CAAkB,IAAI,KAAK,CAAA;AAAA;AAC1C,KACF;AAAA;AACF,EAEA,OAAO,kBAAkB,GAAoB,EAAA;AAC3C,IAAI,IAAA,GAAA,CAAI,QAAQ,QAAU,EAAA;AACxB,MAAA,aAAA,CAAa,UAAU,EAAE,IAAA,EAAM,QAAU,EAAA,KAAA,EAAO,KAAK,CAAA;AAAA;AACvD;AACF,EAEA,OAAO,SAAU,CAAA,MAAA,EAA2B,IAAO,GAAA,MAAA,EAAQ,QAAQ,KAAO,EAAA;AACxE,IAAA,IAAI,OAAQ,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CAAI,CAAA,EAAA;AAChC,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,MAAM,YAAY,QAAS,CAAA,IAAA,CAAK,aAAc,CAAA,CAAA,UAAA,EAAa,KAAK,CAAE,CAAA,CAAA;AAClE,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,QAAA,CAAS,uBAAuB,SAAS,CAAA;AAAA;AAC3C;AAEF,IAAS,QAAA,CAAA,mBAAA;AAAA,MACP,SAAA;AAAA,MACA,aAAa,CAAA,iBAAA;AAAA,MACb;AAAA,KACF;AAEA,IAAc,aAAA,EAAA,OAAA;AAAA,MACZ,MACI,GAAA;AAAA,QACE,GAAG,MAAA;AAAA,QACH,QAAU,EAAA;AAAA,OAEZ,GAAA,KAAA;AAAA,KACN;AAAA;AACF,EAEA,OAAO,iBAAA,CAAkB,EAAiB,EAAA,KAAA,GAAyB,MAAQ,EAAA;AACzE,IAAM,MAAA,MAAA,GAAS,EAAG,CAAA,aAAA,CAAc,wBAAwB,CAAA;AACxD,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA;AAAA,QACA,KAAO,EAAA;AAAA,OACT,GAAI,OAAO,qBAAsB,EAAA;AAEjC,MAAA,MAAM,IAAI,MAAO,CAAA,UAAA;AACjB,MAAA,MAAM,IAAI,MAAO,CAAA,WAAA;AAEjB,MAAM,MAAA,SAAA,GAAY,KAAK,GAAM,GAAA,MAAA,CAAA;AAC7B,MAAA,IAAI,YAAY,CAAG,EAAA;AACjB,QAAA,MAAA,CAAO,MAAM,GAAM,GAAA,IAAA,CAAK,KAAM,CAAA,GAAG,IAAI,SAAY,GAAA,IAAA;AAAA;AAGnD,MAAM,MAAA,SAAA,GAAY,KAAK,IAAO,GAAA,KAAA,CAAA;AAC9B,MAAA,IAAI,YAAY,CAAG,EAAA;AACjB,QAAA,MAAA,CAAO,MAAM,IAAO,GAAA,IAAA,CAAK,KAAM,CAAA,IAAI,IAAI,SAAY,GAAA,IAAA;AAAA;AAGrD,MAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,KAAA,KAAU,YAAc,EAAA;AACvD,QAAA,MAAM,aAAa,KAAQ,GAAA,YAAA;AAC3B,QAAO,MAAA,CAAA,KAAA,CAAM,IAAO,GAAA,IAAA,GAAO,UAAa,GAAA,IAAA;AAAA;AAC1C;AACF;AAEJ,CAAA;AA7GE,aAAA,CADW,aACJ,EAAA,SAAA,CAAA;AADF,IAAM,YAAN,GAAA;AAgHA,MAAM,aAAc,CAAA;AAAA,EACzB,OAAO,WAAW,MAAsB,EAAA;AACtC,IAAA,MAAM,WAAc,GAAA,YAAA;AACpB,IAAM,MAAA,OAAA,GAAU,OAAO,KAAM,CAAA,OAAA;AAE7B,IAAa,YAAA,EAAA;AAEb,IAAS,QAAA,CAAA,MAAA;AAAA,MACP,KAAA,CAAM,aAAa,MAAQ,EAAA;AAAA,QACzB,SAAW,EAAA,WAAA;AAAA,QACX,SAAS,MAAM;AACb,UAAA,aAAA,CAAc,WAAY,EAAA;AAC1B,UAAA,IAAI,OAAS,EAAA;AACX,YAAQ,OAAA,EAAA;AAAA;AACV;AACF,OACD,CAAA;AAAA,MACD,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,WAAW;AAAA,KACzC;AAAA;AACF,EAEA,OAAO,WAAc,GAAA;AACnB,IAAa,YAAA,EAAA;AACb,IAAA,MAAM,UAAa,GAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,YAAY,CAAA;AAC3D,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,QAAA,CAAS,uBAAuB,UAAU,CAAA;AAAA;AAC5C;AAEJ;;;;;;;"}
@@ -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('../menu/ContextMenu.js');
6
- require('../menu/MenuList.js');
7
- require('../menu/context-menu-provider.js');
8
- var useContextMenu = require('../menu/useContextMenu.js');
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 [showContextMenu] = useContextMenu.useContextMenu(menuBuilder, menuActionHandler);
37
- const handleOpenMenu = React.useCallback((el) => {
38
- console.log(`menu Open `, {
39
- el
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, tabIndex]
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
- ContextMenuProps: {
77
- className: menuClassName,
78
- id: `${id}-menu`,
79
- onClose: handleMenuClose,
80
- openMenu: handleOpenMenu,
81
- position: {
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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"}