@vuu-ui/vuu-popups 0.8.10-debug → 0.8.11-debug

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 (25) hide show
  1. package/cjs/index.js +483 -351
  2. package/cjs/index.js.map +4 -4
  3. package/esm/index.js +516 -386
  4. package/esm/index.js.map +4 -4
  5. package/index.css +110 -57
  6. package/index.css.map +3 -3
  7. package/package.json +7 -7
  8. package/types/dialog-header/DialogHeader.d.ts +7 -0
  9. package/types/dialog-header/index.d.ts +1 -0
  10. package/types/index.d.ts +2 -0
  11. package/types/menu/ContextMenu.d.ts +3 -2
  12. package/types/menu/MenuList.d.ts +4 -3
  13. package/types/menu/use-cascade.d.ts +3 -2
  14. package/types/menu/use-keyboard-navigation.d.ts +2 -1
  15. package/types/menu/useContextMenu.d.ts +0 -1
  16. package/types/notifications/NotificationsProvider.d.ts +30 -0
  17. package/types/notifications/index.d.ts +1 -0
  18. package/types/popup/Popup.d.ts +6 -3
  19. package/types/popup/popup-service.d.ts +1 -14
  20. package/types/popup/useAnchoredPosition.d.ts +12 -10
  21. package/types/popup-menu/PopupMenu.d.ts +1 -1
  22. package/types/portal/Portal.d.ts +12 -1
  23. package/types/portal-deprecated/index.d.ts +0 -2
  24. package/types/portal-deprecated/PortalDeprecated.d.ts +0 -8
  25. package/types/portal-deprecated/portal-utils.d.ts +0 -1
package/index.css CHANGED
@@ -1,33 +1,27 @@
1
- /* src/dialog/Dialog.css */
2
- .vuuDialog {
3
- background: var(--salt-container-primary-background);
4
- border: var(--vuuDialog-border, solid 1px #ccc);
5
- border-radius: 5px;
6
- padding: var(--vuuDialog-padding, 0);
7
- box-shadow: var(--salt-overlayable-shadow, none);
8
- height: var(--vuuDialog-height, fit-content);
9
- width: var(--vuuDialog-width, fit-content);
1
+ /* src/portal/Portal.css */
2
+ .vuuPortal {
3
+ background-color: var(--salt-container-primary-background);
4
+ border-radius: 4px;
5
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
6
+ position: absolute;
7
+ border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));
8
+ border-style: solid;
9
+ border-width: 1px;
10
+ padding: 4px 0;
11
+ z-index: var(--salt-zIndex-modal);
10
12
  }
11
- .vuuDialog-header {
13
+ .vuuPortal:has(.vuuDropdown-popup-component.vuuList-empty) {
14
+ display: none;
15
+ }
16
+
17
+ /* src/dialog-header/DialogHeader.css */
18
+ .vuuDialogHeader {
12
19
  --saltButton-height: 28px;
13
20
  --saltButton-width: 28px;
14
21
  --saltToolbar-background: transparent;
15
22
  --saltToolbar-height: calc(var(--salt-size-base) + 5px);
16
- }
17
- .vuuDialog-header > .Responsive-inner {
18
- align-items: center;
19
- }
20
- .vuuDialog-header > .Responsive-inner > :last-child {
21
- right: 2px;
22
- }
23
- .dialogHeader {
24
- display: flex;
25
- padding-bottom: 0px;
26
- padding-top: 16px;
27
- padding-left: 16px;
28
- flex-direction: column;
29
23
  align-items: flex-start;
30
- align-self: stretch;
24
+ display: flex;
31
25
  color: var(--light-text-primary, #15171B);
32
26
  font-feature-settings:
33
27
  "ss02" on,
@@ -36,6 +30,24 @@
36
30
  "liga" off;
37
31
  font-size: 16px;
38
32
  font-weight: 600;
33
+ padding: 0 6px;
34
+ }
35
+ .vuuDialogHeader > .Responsive-inner {
36
+ align-items: center;
37
+ }
38
+ .vuuDialogHeader > .Responsive-inner > :last-child {
39
+ right: 2px;
40
+ }
41
+
42
+ /* src/dialog/Dialog.css */
43
+ .vuuDialog {
44
+ background: var(--salt-container-primary-background);
45
+ border: var(--vuuDialog-border, solid 1px #ccc);
46
+ border-radius: 5px;
47
+ padding: var(--vuuDialog-padding, 0);
48
+ box-shadow: var(--salt-overlayable-shadow, none);
49
+ height: var(--vuuDialog-height, fit-content);
50
+ width: var(--vuuDialog-width, fit-content);
39
51
  }
40
52
 
41
53
  /* src/menu/MenuList.css */
@@ -47,7 +59,7 @@
47
59
  --context-menu-padding: var(--hw-list-item-padding, 0 6px);
48
60
  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
49
61
  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
50
- --context-menu-highlight-bg: var(--vuu-color-gray-10);
62
+ --context-menu-highlight-bg: var(--salt-selectable-background-hover);
51
63
  --context-menu-blur-focus-bg: #e0e4e9;
52
64
  --menu-item-icon-color: black;
53
65
  --menu-item-twisty-color: black;
@@ -58,7 +70,6 @@
58
70
  --menu-icon-size: 12px;
59
71
  background-clip: padding-box;
60
72
  background-color: white;
61
- border-style: var(--vuuMenuList-borderStyle, none);
62
73
  font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));
63
74
  font-weight: var(--salt-typography-fontWeight-medium);
64
75
  list-style: none;
@@ -162,15 +173,6 @@
162
173
  border-width: 1px;
163
174
  }
164
175
 
165
- /* src/menu/ContextMenu.css */
166
- .vuuContextMenu {
167
- border-radius: 4px;
168
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
169
- border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));
170
- border-style: solid;
171
- border-width: 1px;
172
- }
173
-
174
176
  /* src/popup/popup-service.css */
175
177
  .vuuPopup {
176
178
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -226,28 +228,6 @@
226
228
  padding: 0 28px 0 8px;
227
229
  }
228
230
 
229
- /* src/portal/Portal.css */
230
- .vuuPortal {
231
- background-color: var(--salt-container-primary-background);
232
- border-radius: 4px;
233
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
234
- position: absolute;
235
- border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));
236
- border-style: solid;
237
- border-width: 1px;
238
- padding: 4px 0;
239
- z-index: var(--salt-zIndex-modal);
240
- }
241
- .vuuPopupMenuList {
242
- border-radius: 4px;
243
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
244
- position: absolute;
245
- border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));
246
- border-style: solid !important;
247
- border-width: 1px;
248
- padding: 4px 0;
249
- }
250
-
251
231
  /* src/prompt/Prompt.css */
252
232
  .vuuPrompt {
253
233
  --saltButton-padding: var(--prompt-padding);
@@ -368,4 +348,77 @@
368
348
  .vuuTooltip[data-align=left]::before {
369
349
  transform: translate(-19px, 0) rotate(45deg);
370
350
  }
351
+
352
+ /* src/notifications/notifications.css */
353
+ .vuuToastNotifications-toastContainer {
354
+ --top: 60px;
355
+ position: absolute;
356
+ z-index: 100000;
357
+ right: 0;
358
+ top: var(--top);
359
+ overflow: hidden;
360
+ height: calc(100% - var(--top));
361
+ font-size: 12px;
362
+ }
363
+ .vuuToastNotifications-toast {
364
+ --vuu-icon-size: 24px;
365
+ position: absolute;
366
+ display: flex;
367
+ padding: 8px 32px 8px 8px;
368
+ align-items: center;
369
+ gap: 8px;
370
+ border-radius: 6px;
371
+ box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.40);
372
+ }
373
+ .vuuToastNotifications-toastContent {
374
+ display: flex;
375
+ flex-direction: column;
376
+ gap: 4px;
377
+ }
378
+ .vuuToastNotifications-toastHeader {
379
+ font-size: 16px;
380
+ font-weight: 700;
381
+ }
382
+ .error {
383
+ background: var(--status-error-background-emphasize, #E23434);
384
+ }
385
+ .success {
386
+ background: var(--status-success-background-emphasize, #248913);
387
+ }
388
+ .info {
389
+ background: var(--status-info-background-emphasize, #017CB1);
390
+ }
391
+ .warning {
392
+ background: var(--status-warning-background-emphasize, #F4CA33);
393
+ }
394
+ .error,
395
+ .success,
396
+ .info {
397
+ color: white;
398
+ }
399
+ .vuuToastNotifications-toastIcon {
400
+ height: var(--vuu-icon-height, var(--vuu-icon-size, 24px));
401
+ width: var(--vuu-icon-width, var(--vuu-icon-size, 24px));
402
+ -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
403
+ mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
404
+ mask-repeat: no-repeat;
405
+ }
406
+ .success-icon {
407
+ --vuu-icon-svg: var(--vuu-svg-tick);
408
+ }
409
+ .warning-icon {
410
+ --vuu-icon-svg: var(--vuu-svg-warn-triangle);
411
+ background-color: #000000;
412
+ }
413
+ .info-icon {
414
+ --vuu-icon-svg: var(--vuu-svg-info-circle);
415
+ }
416
+ .error-icon {
417
+ --vuu-icon-svg: var(--vuu-svg-alert-circle);
418
+ }
419
+ .success-icon,
420
+ .info-icon,
421
+ .error-icon {
422
+ background-color: #ffffff;
423
+ }
371
424
  /*# sourceMappingURL=index.css.map */
package/index.css.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/menu/ContextMenu.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-popups/src/popup-menu/PopupMenu.css", "../../../packages/vuu-popups/src/portal/Portal.css", "../../../packages/vuu-popups/src/prompt/Prompt.css", "../../../packages/vuu-popups/src/tooltip/Tooltip.css"],
4
- "sourcesContent": [".vuuDialog {\n background: var(--salt-container-primary-background);\n border: var(--vuuDialog-border, solid 1px #ccc);\n border-radius: 5px;\n padding: var(--vuuDialog-padding, 0);\n box-shadow: var(--salt-overlayable-shadow, none);\n height: var(--vuuDialog-height, fit-content);\n width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n\n --saltToolbar-background: transparent;\n --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n}\n\n.vuuDialog-header > .Responsive-inner {\n align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n right: 2px;\n}\n\n.dialogHeader {\n display: flex;\n padding-bottom: 0px;\n padding-top: 16px;\n padding-left: 16px;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n color: var(--light-text-primary, #15171B);\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 16px;\n font-weight: 600;\n}\n", ".vuuMenuList {\n --salt-focused-outlineStyle: dashed !important;\n --salt-focused-outlineWidth: 1px !important;\n --vuuListItem-padding: 8px;\n --context-menu-color: var(--vuuMenuList-color,#161616);\n --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n --context-menu-highlight-bg: var(--vuu-color-gray-10);\n --context-menu-blur-focus-bg: #e0e4e9;\n --menu-item-icon-color: black;\n --menu-item-twisty-color: black;\n --menu-item-twisty-content: '';\n --menu-item-twisty-top: 50%;\n --menu-item-twisty-left: auto;\n --menu-item-twisty-right: 0px;\n --menu-icon-size: 12px;\n\n background-clip: padding-box;\n background-color: white;\n border-style: var(--vuuMenuList-borderStyle, none);\n font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));\n font-weight: var(--salt-typography-fontWeight-medium);\n list-style: none;\n outline: 0;\n overflow: hidden;\n padding: var(--vuuMenuList-padding, 0);\n position: absolute;\n}\n\n/* hacky fix until problem is identified (css source code order in prod build )*/\n.vuuPortal > .vuuMenuList {\n position: relative;\n}\n\n.vuuMenuItem {\n align-items: center;\n border-width: 1px;\n border-color: var(--vuuMenuItem-borderColor, transparent);\n border-style: var(--vuuMenuItem-borderStyle, none);\n color: var(--context-menu-color);\n display: flex;\n gap: 6px;\n height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px));\n padding: var(--context-menu-padding);\n padding-right: 24px;\n position: relative;\n white-space: nowrap;\n}\n\n.vuuIconContainer {\n display: inline-block;\n flex: 12px 0 0;\n height: var(--menu-icon-size);\n mask-repeat: no-repeat;\n width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n content: var(--menu-item-twisty-content);\n -webkit-mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;\n mask: var(---vuu-svg-chevron-right) center center/8px 8px no-repeat;\n background-color: var(--menu-item-twisty-color);\n height: 16px;\n left: var(--menu-item-twisty-left);\n right: var(--menu-item-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--menu-item-twisty-top);\n transition: transform 0.3s;\n width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n background-color: var(--context-menu-highlight-bg);\n cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .vuuMenuItem[data-highlighted] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n left: auto;\n right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n text-decoration: none;\n color: rgb(0, 0, 0);\n background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.vuuMenuItem-button:hover {\n outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n clear: both;\n font-weight: normal;\n line-height: 1.5;\n color: rgb(120, 120, 120);\n white-space: nowrap;\n text-decoration: none;\n cursor: default;\n}\n\n/* hacky fix, to be revisited */\n.vuuMenuList.salt-theme {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n border-color: var(--salt-container-primary-borderColor);\n border-style: solid !important;\n border-width: 1px;\n\n}", ".vuuContextMenu {\n border-radius:4px;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));\n border-style: solid;\n border-width: 1px;\n}", ".vuuPopup {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n overflow: visible;\n z-index: 1000;\n}\n\n.vuuPopup {\n position: absolute;\n}\n", ".vuuPopupMenu {\n --saltButton-height: 24px;\n --saltButton-width: 24px;\n --vuu-icon-color: var(--vuuPopupMenu-iconColor,#606477);\n --vuu-icon-height: 20px;\n --vuu-icon-left: 2px;\n --vuu-icon-size: 16px;\n --vuu-icon-top: 2px;\n --vuu-icon-width: 20px;\n\n background: var(--vuuPopupMenu-background, transparent);\n border: var(--vuuPopupMenu-border, none);\n border-radius: var(--vuuPopupMenu-borderRadius, 4px);\n cursor: pointer;\n display: inline-block;\n margin-top: 2px;\n padding: 2px;\n}\n\n.vuuPopupMenu:hover {\n /* --vuu-icon-color: #15171B; */\n --vuu-icon-color: var(--saltButton-text-color-hover);\n}\n\n.vuuPopupMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --vuu-icon-color: white;\n}\n\n/* temp references to theme until new theme fully incorporated */\n.vuu-theme .vuuPopupMenu:hover {\n --saltButton-background-hover: #F37880;\n}\n\n.vuu-theme .vuuPopupMenu-open {\n --saltButton-background: #6D18BD;\n}\n\n.vuuPopupMenu-withCaption {\n --vuu-icon-left: calc(100% - 24px); \n --vuu-icon-size: 20px;\n --saltButton-width: auto;\n padding: 0 28px 0 8px;\n}", ".vuuPortal {\n background-color: var(--salt-container-primary-background);\n border-radius:4px;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));\n border-style: solid;\n border-width: 1px;\n padding: 4px 0;\n z-index: var(--salt-zIndex-modal);\n}\n\n.vuuPopupMenuList {\n border-radius:4px;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));\n border-style: solid !important;\n border-width: 1px;\n padding: 4px 0;\n}\n", ".vuuPrompt {\n --saltButton-padding: var(--prompt-padding);\n --saltButton-width: auto;\n --border-width: var(--vuuPrompt-borderWidth, 1px);\n --border-color: var(--vuuPrompt-borderColor, var(--vuu-color-purple-10));\n --prompt-padding: 16px;\n --variant-color: inherit;\n --vuu-icon-color: var(--vuu-color-gray-80);\n --vuu-icon-left: 6px;\n --vuu-icon-size: 24px;\n\n background-color: var(--salt-container-primary-background);\n border-color: var(--border-color);\n border-radius:4px;\n border-style: solid;\n border-width: var(--border-width);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n margin: 0;\n padding: 0;\n position: absolute;\n}\n\n.vuuPrompt-warn {\n --border-color: var(--vuu-color-yellow-20);\n --variant-color: var(--vuu-color-yellow-20);\n}\n\n.vuuPrompt-form {\n display: flex;\n flex-direction: column;\n}\n\n.vuuPrompt-header {\n align-items: center;\n background-color: var(--variant-color);\n display: flex;\n flex: 0 0 32px; \n font-size: 16px;\n font-weight: 700;\n padding: 0 var(--prompt-padding); \n}\n\n.vuuPrompt-header[data-icon]{\n padding-left: 36px;\n}\n\n\n.vuuPrompt-text {\n flex: 1 1 auto;\n padding: var(--prompt-padding);\n\n}\n.vuuPrompt-buttonBar {\n align-items: flex-end;\n display: flex;\n flex: 0 0 32px;\n gap: 6px;\n justify-content: flex-end;\n padding: 0 var(--prompt-padding) var(--prompt-padding) var(--prompt-padding); \n\n}", ".vuuTooltip {\n --tooltip-align: flex-start;\n --tooltip-justify: flex-start;\n --tooltip-top: auto;\n --tooltip-right: auto;\n --tooltip-bottom: auto;\n --tooltip-left: auto;\n align-items: var(--tooltip-align);\n justify-content: var(--tooltip-justify);\n display: flex;\n position: absolute;\n }\n \n .vuuTooltip[data-align='right'] {\n --tooltip-align: center;\n --tooltip-left: 9px;\n }\n \n .vuuTooltip[data-align='left'] {\n --tooltip-align: center;\n --tooltip-left: auto;\n --tooltip-right: 10px;\n }\n \n .vuuTooltip[data-align='above'] {\n --tooltip-justify: center;\n --tooltip-bottom: 9px;\n --tooltip-left: auto;\n }\n .vuuTooltip[data-align='below'] {\n --tooltip-justify: center;\n --tooltip-top: 9px;\n --tooltip-left: auto;\n }\n \n .vuuTooltip-content {\n background-color: var(--salt-color-blue-500);\n border-radius: 4px;\n color: white;\n line-height: 24px;\n padding: 2px 6px;\n position: absolute;\n white-space: nowrap;\n top: var(--tooltip-top);\n right: var(--tooltip-right);\n bottom: var(--tooltip-bottom);\n left: var(--tooltip-left);\n }\n \n .vuuTooltip::before {\n background-color: var(--salt-color-blue-500);\n /* background-color: red; */\n content: ' ';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n z-index: -1;\n}\n\n.vuuTooltip[data-align='above']::before {\n transform: translate(0, -18px) rotate(45deg);\n}\n\n.vuuTooltip[data-align='below']::before {\n transform: translate(0, 6px) rotate(45deg);\n}\n\n.vuuTooltip[data-align='right']::before {\n transform: translate(7px, 0px) rotate(45deg);\n}\n\n.vuuTooltip[data-align='left']::before {\n transform: translate(-19px, 0) rotate(45deg);\n}"],
5
- "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;;;ACrCF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAEF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AAAA;;;ACzIF;AACI;AACA;AACA;AACA;AACA;AAAA;;;ACLJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;;;ACZF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AAEI;AAAA;AAGJ;AACI;AACA;AAAA;AAIJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AAAA;;;AC1CJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACnBJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAIJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC1DJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;",
3
+ "sources": ["../../../packages/vuu-popups/src/portal/Portal.css", "../../../packages/vuu-popups/src/dialog-header/DialogHeader.css", "../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-popups/src/popup-menu/PopupMenu.css", "../../../packages/vuu-popups/src/prompt/Prompt.css", "../../../packages/vuu-popups/src/tooltip/Tooltip.css", "../../../packages/vuu-popups/src/notifications/notifications.css"],
4
+ "sourcesContent": [".vuuPortal {\n background-color: var(--salt-container-primary-background);\n border-radius:4px;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));\n border-style: solid;\n border-width: 1px;\n padding: 4px 0;\n z-index: var(--salt-zIndex-modal);\n}\n\n\n.vuuPortal:has(.vuuDropdown-popup-component.vuuList-empty){\n display: none;\n}", ".vuuDialogHeader {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n --saltToolbar-background: transparent;\n --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n\n align-items: flex-start;\n display: flex;\n color: var(--light-text-primary, #15171B);\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 16px;\n font-weight: 600;\n padding: 0 6px;\n\n}\n \n .vuuDialogHeader > .Responsive-inner {\n align-items: center;\n }\n \n .vuuDialogHeader > .Responsive-inner > :last-child{\n right: 2px;\n }\n \n ", ".vuuDialog {\n background: var(--salt-container-primary-background);\n border: var(--vuuDialog-border, solid 1px #ccc);\n border-radius: 5px;\n padding: var(--vuuDialog-padding, 0);\n box-shadow: var(--salt-overlayable-shadow, none);\n height: var(--vuuDialog-height, fit-content);\n width: var(--vuuDialog-width, fit-content);\n}\n\n", ".vuuMenuList {\n --salt-focused-outlineStyle: dashed !important;\n --salt-focused-outlineWidth: 1px !important;\n --vuuListItem-padding: 8px;\n --context-menu-color: var(--vuuMenuList-color,#161616);\n --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n --context-menu-highlight-bg: var(--salt-selectable-background-hover);\n --context-menu-blur-focus-bg: #e0e4e9;\n --menu-item-icon-color: black;\n --menu-item-twisty-color: black;\n --menu-item-twisty-content: '';\n --menu-item-twisty-top: 50%;\n --menu-item-twisty-left: auto;\n --menu-item-twisty-right: 0px;\n --menu-icon-size: 12px;\n\n background-clip: padding-box;\n background-color: white;\n font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));\n font-weight: var(--salt-typography-fontWeight-medium);\n list-style: none;\n outline: 0;\n overflow: hidden;\n padding: var(--vuuMenuList-padding, 0);\n position: absolute;\n}\n\n/* hacky fix until problem is identified (css source code order in prod build )*/\n.vuuPortal > .vuuMenuList {\n position: relative;\n}\n\n.vuuMenuItem {\n align-items: center;\n border-width: 1px;\n border-color: var(--vuuMenuItem-borderColor, transparent);\n border-style: var(--vuuMenuItem-borderStyle, none);\n color: var(--context-menu-color);\n display: flex;\n gap: 6px;\n height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px));\n padding: var(--context-menu-padding);\n padding-right: 24px;\n position: relative;\n white-space: nowrap;\n}\n\n.vuuIconContainer {\n display: inline-block;\n flex: 12px 0 0;\n height: var(--menu-icon-size);\n mask-repeat: no-repeat;\n width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n content: var(--menu-item-twisty-content);\n -webkit-mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;\n mask: var(---vuu-svg-chevron-right) center center/8px 8px no-repeat;\n background-color: var(--menu-item-twisty-color);\n height: 16px;\n left: var(--menu-item-twisty-left);\n right: var(--menu-item-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--menu-item-twisty-top);\n transition: transform 0.3s;\n width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n background-color: var(--context-menu-highlight-bg);\n cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .vuuMenuItem[data-highlighted] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n left: auto;\n right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n text-decoration: none;\n color: rgb(0, 0, 0);\n background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.vuuMenuItem-button:hover {\n outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n clear: both;\n font-weight: normal;\n line-height: 1.5;\n color: rgb(120, 120, 120);\n white-space: nowrap;\n text-decoration: none;\n cursor: default;\n}\n\n/* hacky fix, to be revisited */\n.vuuMenuList.salt-theme {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n border-color: var(--salt-container-primary-borderColor);\n border-style: solid !important;\n border-width: 1px;\n\n}", ".vuuPopup {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n overflow: visible;\n z-index: 1000;\n}\n\n.vuuPopup {\n position: absolute;\n}\n", ".vuuPopupMenu {\n --saltButton-height: 24px;\n --saltButton-width: 24px;\n --vuu-icon-color: var(--vuuPopupMenu-iconColor,#606477);\n --vuu-icon-height: 20px;\n --vuu-icon-left: 2px;\n --vuu-icon-size: 16px;\n --vuu-icon-top: 2px;\n --vuu-icon-width: 20px;\n\n background: var(--vuuPopupMenu-background, transparent);\n border: var(--vuuPopupMenu-border, none);\n border-radius: var(--vuuPopupMenu-borderRadius, 4px);\n cursor: pointer;\n display: inline-block;\n margin-top: 2px;\n padding: 2px;\n}\n\n.vuuPopupMenu:hover {\n /* --vuu-icon-color: #15171B; */\n --vuu-icon-color: var(--saltButton-text-color-hover);\n}\n\n.vuuPopupMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --vuu-icon-color: white;\n}\n\n/* temp references to theme until new theme fully incorporated */\n.vuu-theme .vuuPopupMenu:hover {\n --saltButton-background-hover: #F37880;\n}\n\n.vuu-theme .vuuPopupMenu-open {\n --saltButton-background: #6D18BD;\n}\n\n.vuuPopupMenu-withCaption {\n --vuu-icon-left: calc(100% - 24px); \n --vuu-icon-size: 20px;\n --saltButton-width: auto;\n padding: 0 28px 0 8px;\n}", ".vuuPrompt {\n --saltButton-padding: var(--prompt-padding);\n --saltButton-width: auto;\n --border-width: var(--vuuPrompt-borderWidth, 1px);\n --border-color: var(--vuuPrompt-borderColor, var(--vuu-color-purple-10));\n --prompt-padding: 16px;\n --variant-color: inherit;\n --vuu-icon-color: var(--vuu-color-gray-80);\n --vuu-icon-left: 6px;\n --vuu-icon-size: 24px;\n\n background-color: var(--salt-container-primary-background);\n border-color: var(--border-color);\n border-radius:4px;\n border-style: solid;\n border-width: var(--border-width);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n margin: 0;\n padding: 0;\n position: absolute;\n}\n\n.vuuPrompt-warn {\n --border-color: var(--vuu-color-yellow-20);\n --variant-color: var(--vuu-color-yellow-20);\n}\n\n.vuuPrompt-form {\n display: flex;\n flex-direction: column;\n}\n\n.vuuPrompt-header {\n align-items: center;\n background-color: var(--variant-color);\n display: flex;\n flex: 0 0 32px; \n font-size: 16px;\n font-weight: 700;\n padding: 0 var(--prompt-padding); \n}\n\n.vuuPrompt-header[data-icon]{\n padding-left: 36px;\n}\n\n\n.vuuPrompt-text {\n flex: 1 1 auto;\n padding: var(--prompt-padding);\n\n}\n.vuuPrompt-buttonBar {\n align-items: flex-end;\n display: flex;\n flex: 0 0 32px;\n gap: 6px;\n justify-content: flex-end;\n padding: 0 var(--prompt-padding) var(--prompt-padding) var(--prompt-padding); \n\n}", ".vuuTooltip {\n --tooltip-align: flex-start;\n --tooltip-justify: flex-start;\n --tooltip-top: auto;\n --tooltip-right: auto;\n --tooltip-bottom: auto;\n --tooltip-left: auto;\n align-items: var(--tooltip-align);\n justify-content: var(--tooltip-justify);\n display: flex;\n position: absolute;\n }\n \n .vuuTooltip[data-align='right'] {\n --tooltip-align: center;\n --tooltip-left: 9px;\n }\n \n .vuuTooltip[data-align='left'] {\n --tooltip-align: center;\n --tooltip-left: auto;\n --tooltip-right: 10px;\n }\n \n .vuuTooltip[data-align='above'] {\n --tooltip-justify: center;\n --tooltip-bottom: 9px;\n --tooltip-left: auto;\n }\n .vuuTooltip[data-align='below'] {\n --tooltip-justify: center;\n --tooltip-top: 9px;\n --tooltip-left: auto;\n }\n \n .vuuTooltip-content {\n background-color: var(--salt-color-blue-500);\n border-radius: 4px;\n color: white;\n line-height: 24px;\n padding: 2px 6px;\n position: absolute;\n white-space: nowrap;\n top: var(--tooltip-top);\n right: var(--tooltip-right);\n bottom: var(--tooltip-bottom);\n left: var(--tooltip-left);\n }\n \n .vuuTooltip::before {\n background-color: var(--salt-color-blue-500);\n /* background-color: red; */\n content: ' ';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n z-index: -1;\n}\n\n.vuuTooltip[data-align='above']::before {\n transform: translate(0, -18px) rotate(45deg);\n}\n\n.vuuTooltip[data-align='below']::before {\n transform: translate(0, 6px) rotate(45deg);\n}\n\n.vuuTooltip[data-align='right']::before {\n transform: translate(7px, 0px) rotate(45deg);\n}\n\n.vuuTooltip[data-align='left']::before {\n transform: translate(-19px, 0) rotate(45deg);\n}", ".vuuToastNotifications-toastContainer {\n --top: 60px;\n position: absolute;\n z-index: 100000;\n right: 0;\n top: var(--top);\n overflow: hidden;\n height:calc(100% - var(--top));\n font-size: 12px;\n}\n\n.vuuToastNotifications-toast {\n --vuu-icon-size: 24px;\n position: absolute;\n display: flex;\n padding: 8px 32px 8px 8px;\n align-items: center;\n gap: 8px;\n border-radius: 6px;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.40);\n}\n\n.vuuToastNotifications-toastContent{\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.vuuToastNotifications-toastHeader{\n font-size: 16px;\n font-weight: 700;\n}\n\n.error {\n background: var(--status-error-background-emphasize, #E23434);\n}\n\n.success {\n background: var(--status-success-background-emphasize, #248913);\n}\n\n.info {\n background: var(--status-info-background-emphasize, #017CB1);\n}\n\n.warning {\n background: var(--status-warning-background-emphasize, #F4CA33);\n}\n\n.error,\n.success,\n.info {\n color: white;\n}\n\n.vuuToastNotifications-toastIcon {\n height: var(--vuu-icon-height, var(--vuu-icon-size, 24px));\n width: var(--vuu-icon-width, var(--vuu-icon-size, 24px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n}\n\n.success-icon{\n --vuu-icon-svg: var(--vuu-svg-tick);\n}\n\n.warning-icon{\n --vuu-icon-svg: var(--vuu-svg-warn-triangle);\n background-color: #000000;\n}\n\n.info-icon {\n --vuu-icon-svg: var(--vuu-svg-info-circle);\n}\n.error-icon{\n --vuu-icon-svg: var(--vuu-svg-alert-circle);\n}\n\n.success-icon, .info-icon, .error-icon{\n background-color: #ffffff;\n}\n"],
5
+ "mappings": ";AAAA;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AAAA;;;ACdJ;AACI;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;;;ACrBJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACPF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAEF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AAAA;;;ACxIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;;;ACZF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AAEI;AAAA;AAGJ;AACI;AACA;AAAA;AAIJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AAAA;;;AC1CJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAIJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC1DJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;;;ACzEJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AAAA;AAAA;AAGI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AAAA;AAEJ;AACI;AAAA;AAGJ;AAAA;AAAA;AACI;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vuu-ui/vuu-popups",
3
- "version": "0.8.10-debug",
3
+ "version": "0.8.11-debug",
4
4
  "description": "VUU popup components - Context Menu, Dialog etc",
5
5
  "author": "heswell",
6
6
  "license": "Apache-2.0",
@@ -8,12 +8,12 @@
8
8
  "@salt-ds/core": "1.8.0",
9
9
  "@salt-ds/icons": "1.5.1",
10
10
  "@salt-ds/lab": "1.0.0-alpha.15",
11
- "@vuu-ui/vuu-data": "0.8.10-debug",
12
- "@vuu-ui/vuu-data-types": "0.8.10-debug",
13
- "@vuu-ui/vuu-layout": "0.8.10-debug",
14
- "@vuu-ui/vuu-shell": "0.8.10-debug",
15
- "@vuu-ui/vuu-utils": "0.8.10-debug",
16
- "@vuu-ui/vuu-ui-controls": "0.8.10-debug"
11
+ "@vuu-ui/vuu-data": "0.8.11-debug",
12
+ "@vuu-ui/vuu-data-types": "0.8.11-debug",
13
+ "@vuu-ui/vuu-layout": "0.8.11-debug",
14
+ "@vuu-ui/vuu-shell": "0.8.11-debug",
15
+ "@vuu-ui/vuu-utils": "0.8.11-debug",
16
+ "@vuu-ui/vuu-ui-controls": "0.8.11-debug"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "classnames": "^2.2.6",
package/types/dialog-header/DialogHeader.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { HTMLAttributes } from "react";
2
+ import "./DialogHeader.css";
3
+ export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
4
+ hideCloseButton?: boolean;
5
+ onClose: () => void;
6
+ }
7
+ export declare const DialogHeader: ({ hideCloseButton, title, onClose, ...htmlAttributes }: DialogHeaderProps) => JSX.Element;
package/types/dialog-header/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./DialogHeader";
package/types/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from "./dialog";
2
+ export * from "./dialog-header";
2
3
  export * from "./menu";
3
4
  export * from "./popup";
4
5
  export * from "./popup-menu";
@@ -6,3 +7,4 @@ export * from "./portal";
6
7
  export * from "./portal-deprecated";
7
8
  export * from "./prompt";
8
9
  export * from "./tooltip";
10
+ export * from "./notifications";
package/types/menu/ContextMenu.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import { MenuListProps } from "./MenuList";
3
3
  import { PopupCloseCallback } from "../popup";
4
- import "./ContextMenu.css";
4
+ import { PortalProps } from "@vuu-ui/vuu-popups";
5
5
  export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
6
+ PortalProps?: Partial<PortalProps>;
6
7
  onClose?: PopupCloseCallback;
7
8
  position?: {
8
9
  x: number;
@@ -11,6 +12,6 @@ export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
11
12
  withPortal?: boolean;
12
13
  }
13
14
  export declare const ContextMenu: {
14
- ({ activatedByKeyboard, children: childrenProp, className, id: idProp, onClose, position, style, ...menuListProps }: ContextMenuProps): JSX.Element;
15
+ ({ PortalProps, activatedByKeyboard, children: childrenProp, className, id: idProp, onClose, position, style, ...menuListProps }: ContextMenuProps): JSX.Element;
15
16
  displayName: string;
16
17
  };
package/types/menu/MenuList.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
12
12
  }
13
13
  export declare const MenuItemGroup: FC<MenuItemGroupProps>;
14
14
  export declare const MenuItem: {
15
- ({ children, idx, ...props }: MenuItemProps): JSX.Element;
15
+ ({ children, idx, options, ...props }: MenuItemProps): JSX.Element;
16
16
  Label: {
17
17
  ({ children }: {
18
18
  children: ReactNode;
@@ -24,6 +24,7 @@ export interface MenuItemLabelProps {
24
24
  children: ReactNode;
25
25
  }
26
26
  export declare const isMenuItemLabel: (item: ReactNode) => item is React.ReactElement<MenuItemLabelProps, string | React.JSXElementConstructor<any>>;
27
+ export type MenuOpenHandler = (menuItemEl: HTMLElement, immediate?: boolean) => void;
27
28
  export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
28
29
  activatedByKeyboard?: boolean;
29
30
  children: ReactElement[];
@@ -34,10 +35,10 @@ export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
34
35
  listItemProps?: Partial<MenuItemProps>;
35
36
  onActivate?: (menuId: string) => void;
36
37
  onCloseMenu: (idx: number) => void;
37
- onOpenMenu?: (menuItemEl: HTMLElement) => void;
38
+ openMenu?: MenuOpenHandler;
38
39
  onHighlightMenuItem?: (idx: number) => void;
39
40
  }
40
41
  export declare const MenuList: {
41
- ({ activatedByKeyboard, childMenuShowing, children, className, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
42
+ ({ activatedByKeyboard, childMenuShowing, children, className, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, onHighlightMenuItem, onActivate, onCloseMenu, openMenu: onOpenMenu, ...props }: MenuListProps): JSX.Element;
42
43
  displayName: string;
43
44
  };
package/types/menu/use-cascade.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { MouseEvent } from "react";
2
- import { MenuItemProps } from "./MenuList";
2
+ import { MenuItemProps, MenuOpenHandler } from "./MenuList";
3
3
  export type RuntimeMenuDescriptor = {
4
4
  id: string;
5
5
  left: number;
6
6
  top: number;
7
7
  };
8
+ /** menuitem-vuu-1-0 vuu-1 */
8
9
  export declare const getHostMenuId: (id: string, rootId: string) => string;
9
10
  export interface CascadeHookProps {
10
11
  id: string;
@@ -19,7 +20,7 @@ export interface CascadeHooksResult {
19
20
  closeMenu: () => void;
20
21
  handleRender: () => void;
21
22
  listItemProps: Partial<MenuItemProps>;
22
- openMenu: (menuItemEl: HTMLElement) => void;
23
+ openMenu: MenuOpenHandler;
23
24
  openMenus: RuntimeMenuDescriptor[];
24
25
  }
25
26
  export declare const useCascade: ({ id: rootId, onActivate, onMouseEnterItem, position: { x: posX, y: posY }, }: CascadeHookProps) => CascadeHooksResult;
package/types/menu/use-keyboard-navigation.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { FocusEvent, KeyboardEvent } from "react";
2
+ import { MenuOpenHandler } from "./MenuList";
2
3
  export interface KeyboardNavigationProps {
3
4
  autoHighlightFirstItem?: boolean;
4
5
  count: number;
@@ -7,7 +8,7 @@ export interface KeyboardNavigationProps {
7
8
  onActivate: (idx: number) => void;
8
9
  onHighlight?: (idx: number) => void;
9
10
  onCloseMenu: (idx: number) => void;
10
- onOpenMenu?: (menuItemEl: HTMLElement) => void;
11
+ onOpenMenu?: MenuOpenHandler;
11
12
  }
12
13
  export interface KeyboardHookListProps {
13
14
  onFocus: (evt: FocusEvent) => void;
package/types/menu/useContextMenu.d.ts CHANGED
@@ -6,7 +6,6 @@ export type ContextMenuOptions = {
6
6
  contextMenu?: JSX.Element;
7
7
  ContextMenuProps?: Partial<ContextMenuProps> & {
8
8
  className?: string;
9
- "data-mode"?: string;
10
9
  };
11
10
  controlledComponentId?: string;
12
11
  };
package/types/notifications/NotificationsProvider.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import React from "react";
2
+ import "./notifications.css";
3
+ export declare enum NotificationLevel {
4
+ Info = "info",
5
+ Success = "success",
6
+ Warning = "warning",
7
+ Error = "error"
8
+ }
9
+ type Notification = {
10
+ type: NotificationLevel;
11
+ header: string;
12
+ body: string;
13
+ id: string;
14
+ };
15
+ export declare const NotificationsContext: React.Context<{
16
+ notify: (notification: Omit<Notification, "id">) => void;
17
+ }>;
18
+ export declare const NotificationsProvider: (props: {
19
+ children: JSX.Element | JSX.Element[];
20
+ }) => JSX.Element;
21
+ export declare const useNotifications: () => {
22
+ notify: (notification: Omit<Notification, "id">) => void;
23
+ };
24
+ type ToastNotificationProps = {
25
+ top: number;
26
+ notification: Notification;
27
+ animated?: boolean;
28
+ };
29
+ export declare const ToastNotification: (props: ToastNotificationProps) => JSX.Element;
30
+ export {};
package/types/notifications/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./NotificationsProvider";
package/types/popup/Popup.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import { HTMLAttributes, RefObject } from "react";
2
+ import { Position } from "./useAnchoredPosition";
2
3
  import "./Popup.css";
3
- export type PopupPlacement = "below" | "below-center" | "below-full-width" | "center" | "right";
4
+ export type PopupPlacement = "absolute" | "below" | "below-center" | "below-full-width" | "center" | "right";
4
5
  export interface PopupComponentProps extends HTMLAttributes<HTMLDivElement> {
5
- placement: PopupPlacement;
6
6
  anchorElement: RefObject<HTMLElement>;
7
+ minWidth?: number;
7
8
  offsetLeft?: number;
8
9
  offsetTop?: number;
10
+ placement: PopupPlacement;
11
+ position?: Position;
9
12
  }
10
- export declare const PopupComponent: ({ children, className, anchorElement, placement, }: PopupComponentProps) => JSX.Element | null;
13
+ export declare const PopupComponent: ({ children, className, anchorElement, minWidth, placement, position: positionProp, }: PopupComponentProps) => JSX.Element | null;
package/types/popup/popup-service.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ReactElement } from "react";
1
+ import { ReactElement } from "react";
2
2
  import { ContextMenuOptions } from "../menu";
3
3
  import "./popup-service.css";
4
4
  export type PopupCloseCallback = (reason?: PopupCloseReason) => void;
@@ -44,16 +44,3 @@ export declare class DialogService {
44
44
  static showDialog(dialog: ReactElement): void;
45
45
  static closeDialog(): void;
46
46
  }
47
- export interface PopupProps {
48
- children: ReactElement;
49
- close?: boolean;
50
- depth: number;
51
- group?: string;
52
- name: string;
53
- position?: "above" | "below" | "";
54
- width: number;
55
- }
56
- export declare const Popup: (props: PopupProps) => React.DetailedReactHTMLElement<{
57
- className: string;
58
- ref: React.RefObject<HTMLElement>;
59
- }, HTMLElement>;
package/types/popup/useAnchoredPosition.d.ts CHANGED
@@ -1,12 +1,14 @@
1
- import { RefObject } from "react";
2
- import { PopupPlacement } from "./Popup";
3
- export interface AnchoredPositionHookProps {
4
- anchorElement: RefObject<HTMLElement>;
5
- offsetLeft?: number;
6
- offsetTop?: number;
7
- placement: PopupPlacement;
8
- }
9
- export declare const useAnchoredPosition: ({ anchorElement, offsetLeft, offsetTop, placement, }: AnchoredPositionHookProps) => {
1
+ import { PopupComponentProps } from "./Popup";
2
+ export type AnchoredPositionHookProps = Pick<PopupComponentProps, "anchorElement" | "minWidth" | "offsetLeft" | "offsetTop" | "placement" | "position">;
3
+ export type Visibility = "hidden" | "visible";
4
+ export type Position = {
10
5
  left: number;
6
+ minWidth?: number;
11
7
  top: number;
12
- } | undefined;
8
+ visibility?: Visibility;
9
+ width?: number;
10
+ };
11
+ export declare const useAnchoredPosition: ({ anchorElement, minWidth, offsetLeft, offsetTop, placement, position: positionProp, }: AnchoredPositionHookProps) => {
12
+ position: Position | undefined;
13
+ popupRef: ((el: HTMLDivElement | null) => void) | undefined;
14
+ };
package/types/popup-menu/PopupMenu.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { HTMLAttributes } from "react";
2
2
  import { PopupCloseReason } from "@vuu-ui/vuu-popups";
3
- import "./PopupMenu.css";
4
3
  import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
4
+ import "./PopupMenu.css";
5
5
  export interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {
6
6
  icon?: string;
7
7
  label?: string;
package/types/portal/Portal.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ThemeAttributes } from "@vuu-ui/vuu-shell";
1
2
  import { ReactNode } from "react";
2
3
  import "./Portal.css";
3
4
  export interface PortalProps {
@@ -17,14 +18,24 @@ export interface PortalProps {
17
18
  * If this node does not exist on the document, it will be created for you.
18
19
  */
19
20
  id?: string;
21
+ /**
22
+ * Callback invoked immediately after render (in layoutEffect). Can be
23
+ * used to check position vis-a-vis viewport and adjust if out of bounds
24
+ */
25
+ onRender?: () => void;
20
26
  /**
21
27
  * Allow conditional rendering of this Portal, if false, will render nothing.
22
28
  * Defaults to true
23
29
  */
24
30
  open?: boolean;
31
+ /**
32
+ * ThemeAttributes can be passed in for cases where ContextMenu is
33
+ * rendered via popup-service showPopup, outside the Context hierarchy.
34
+ */
35
+ themeAttributes?: ThemeAttributes;
25
36
  }
26
37
  /**
27
38
  * Portals provide a first-class way to render children into a DOM node
28
39
  * that exists outside the DOM hierarchy of the parent component.
29
40
  */
30
- export declare const Portal: ({ children, container: containerProp, id, open, }: PortalProps) => import("react").ReactPortal | null;
41
+ export declare const Portal: ({ children, container: containerProp, id, onRender, open, themeAttributes, }: PortalProps) => import("react").ReactPortal | null;
package/types/portal-deprecated/index.d.ts CHANGED
@@ -1,3 +1 @@
1
- export * from "./PortalDeprecated";
2
1
  export * from "./render-portal";
3
- export * from "./portal-utils";
package/types/portal-deprecated/PortalDeprecated.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import { ReactElement } from "react";
2
- export interface PortalDeprecatedProps {
3
- children: ReactElement;
4
- onRender?: () => void;
5
- x?: number;
6
- y?: number;
7
- }
8
- export declare const PortalDeprecated: ({ children, x, y, onRender, }: PortalDeprecatedProps) => null;
package/types/portal-deprecated/portal-utils.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const installTheme: (themeId: string) => void;