@vuu-ui/vuu-popups 0.6.10-debug → 0.6.11-debug-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 (28) hide show
  1. package/cjs/index.js +1311 -1
  2. package/index.css +150 -1
  3. package/index.css.map +1 -1
  4. package/package.json +5 -3
  5. package/types/dialog/Dialog.d.ts +7 -0
  6. package/types/dialog/index.d.ts +1 -0
  7. package/types/index.d.ts +4 -0
  8. package/types/menu/ContextMenu.d.ts +14 -0
  9. package/types/menu/MenuList.d.ts +32 -0
  10. package/types/menu/aim/aim.d.ts +13 -0
  11. package/types/menu/aim/corners.d.ts +9 -0
  12. package/types/menu/aim/utils.d.ts +4 -0
  13. package/types/menu/context-menu-provider.d.ts +29 -0
  14. package/types/menu/index.d.ts +4 -0
  15. package/types/menu/key-code.d.ts +12 -0
  16. package/types/menu/list-dom-utils.d.ts +4 -0
  17. package/types/menu/use-cascade.d.ts +26 -0
  18. package/types/menu/use-click-away.d.ts +6 -0
  19. package/types/menu/use-items-with-ids.d.ts +13 -0
  20. package/types/menu/use-keyboard-navigation.d.ts +26 -0
  21. package/types/menu/useContextMenu.d.ts +2 -0
  22. package/types/menu/utils.d.ts +2 -0
  23. package/types/popup/index.d.ts +1 -0
  24. package/types/popup/popup-service.d.ts +34 -0
  25. package/types/portal/Portal.d.ts +8 -0
  26. package/types/portal/index.d.ts +3 -0
  27. package/types/portal/portal-utils.d.ts +1 -0
  28. package/types/portal/render-portal.d.ts +3 -0
package/index.css CHANGED
@@ -1,2 +1,151 @@
1
- .vuuDialog{background:var(--salt-container-primary-background);border:var(--vuuDialog-border, solid 1px #ccc);border-radius:5px;padding:var(--vuuDialog-padding, 0);box-shadow:var(--salt-overlayable-shadow, none);height:var(--vuuDialog-height, fit-content);width:var(--vuuDialog-width, fit-content)}.vuuDialog-header{--saltButton-height: 28px;--saltButton-width: 28px;--saltToolbar-background: transparent;--saltToolbar-height: calc(var(--salt-size-base) + 5px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuDialog-header>.Responsive-inner{align-items:center}.vuuDialog-header>.Responsive-inner>:last-child{right:2px}.vuuMenuList{--context-menu-color: #161616;--context-menu-padding: var(--hw-list-item-padding, 0 6px);--context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, .175));--focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));--context-menu-highlight-bg: #a4d5f4;--context-menu-blur-focus-bg: #e0e4e9;--menu-item-height: var(--hw-list-item-height, 24px);--menu-item-icon-color: black;--menu-item-twisty-color: black;--menu-item-twisty-content: "";--menu-item-twisty-top: 50%;--menu-item-twisty-left: auto;--menu-item-twisty-right: 0px;--menu-icon-size: 12px;background-clip:padding-box;background-color:#fff;border-radius:4px;border:solid 1px rgba(0,0,0,.15);box-shadow:var(--context-menu-shadow);font-size:var(--salt-text-label-fontSize);font-weight:var(--salt-typography-fontWeight-semiBold);list-style:none;margin:2px 0 0;outline:0;padding:0;position:absolute}.vuuMenuItem{align-items:center;color:var(--context-menu-color);display:flex;gap:6px;height:var(--menu-item-height);padding:var(--context-menu-padding);padding-right:24px;position:relative;white-space:nowrap}.vuuIconContainer{display:inline-block;flex:12px 0 0;height:var(--menu-icon-size);mask-repeat:no-repeat;width:var(--menu-icon-size)}.vuuMenuItem[aria-expanded=true]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem-separator{border-top:solid 1px var(--context-menu-blur-focus-bg)}.vuuMenuItem[aria-haspopup=true]:after{content:var(--menu-item-twisty-content);-webkit-mask:var(--svg-chevron-right) center center/12px 12px;mask:var(--svg-chevron-down) center center/12px 12px;mask-repeat:no-repeat;background-color:var(--menu-item-twisty-color);height:16px;left:var(--menu-item-twisty-left);right:var(--menu-item-twisty-right);margin-top:-8px;position:absolute;top:var(--menu-item-twisty-top);transition:transform .3s;width:16px}.vuuMenuItem[data-highlighted]{background-color:var(--context-menu-highlight-bg)}.vuuMenuItem:hover{background-color:var(--context-menu-highlight-bg);cursor:default}.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem.focusVisible:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0px;border:dotted var(--focus-visible-border-color) 2px}.vuuPopupContainer.top-bottom-right-right .popup-menu{left:auto;right:0}.popup-menu .menu-item.showing>button,.popup-menu .menu-item>button:focus,.popup-menu .menu-item>button:hover{text-decoration:none;color:#000;background-color:#dcdcdc}.vuuMenuItem-button:active,.hwMenuItem-button:hover{outline:0}.popup-menu .menu-item.disabled>button{clear:both;font-weight:400;line-height:1.5;color:#787878;white-space:nowrap;text-decoration:none;cursor:default}.vuuPopup{box-shadow:0 6px 12px #0000002d;position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:1000}.vuuPopup{position:absolute}
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);
10
+ }
11
+ .vuuDialog-header {
12
+ --saltButton-height: 28px;
13
+ --saltButton-width: 28px;
14
+ --saltToolbar-background: transparent;
15
+ --saltToolbar-height: calc(var(--salt-size-base) + 5px);
16
+ border-bottom: solid 1px var(--salt-container-primary-borderColor);
17
+ }
18
+ .vuuDialog-header > .Responsive-inner {
19
+ align-items: center;
20
+ }
21
+ .vuuDialog-header > .Responsive-inner > :last-child {
22
+ right: 2px;
23
+ }
24
+
25
+ /* src/menu/MenuList.css */
26
+ .vuuMenuList {
27
+ --context-menu-color: #161616;
28
+ --context-menu-padding: var(--hw-list-item-padding, 0 6px);
29
+ --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
30
+ --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
31
+ --context-menu-highlight-bg: #a4d5f4;
32
+ --context-menu-blur-focus-bg: #e0e4e9;
33
+ --menu-item-height: var(--hw-list-item-height, 24px);
34
+ --menu-item-icon-color: black;
35
+ --menu-item-twisty-color: black;
36
+ --menu-item-twisty-content: "";
37
+ --menu-item-twisty-top: 50%;
38
+ --menu-item-twisty-left: auto;
39
+ --menu-item-twisty-right: 0px;
40
+ --menu-icon-size: 12px;
41
+ background-clip: padding-box;
42
+ background-color: white;
43
+ border-radius: 4px;
44
+ border: solid 1px rgba(0, 0, 0, 0.15);
45
+ box-shadow: var(--context-menu-shadow);
46
+ font-size: var(--salt-text-label-fontSize);
47
+ font-weight: var(--salt-typography-fontWeight-semiBold);
48
+ list-style: none;
49
+ margin: 2px 0 0;
50
+ outline: 0;
51
+ padding: 0;
52
+ position: absolute;
53
+ }
54
+ .vuuMenuItem {
55
+ align-items: center;
56
+ color: var(--context-menu-color);
57
+ display: flex;
58
+ gap: 6px;
59
+ height: var(--menu-item-height);
60
+ padding: var(--context-menu-padding);
61
+ padding-right: 24px;
62
+ position: relative;
63
+ white-space: nowrap;
64
+ }
65
+ .vuuIconContainer {
66
+ display: inline-block;
67
+ flex: 12px 0 0;
68
+ height: var(--menu-icon-size);
69
+ mask-repeat: no-repeat;
70
+ width: var(--menu-icon-size);
71
+ }
72
+ .vuuMenuItem[aria-expanded=true] {
73
+ background-color: var(--context-menu-blur-focus-bg);
74
+ }
75
+ .vuuMenuItem-separator {
76
+ border-top: solid 1px var(--context-menu-blur-focus-bg);
77
+ }
78
+ .vuuMenuItem[aria-haspopup=true]:after {
79
+ content: var(--menu-item-twisty-content);
80
+ -webkit-mask: var(--svg-chevron-right) center center/12px 12px;
81
+ mask: var(--svg-chevron-down) center center/12px 12px;
82
+ mask-repeat: no-repeat;
83
+ background-color: var(--menu-item-twisty-color);
84
+ height: 16px;
85
+ left: var(--menu-item-twisty-left);
86
+ right: var(--menu-item-twisty-right);
87
+ margin-top: -8px;
88
+ position: absolute;
89
+ top: var(--menu-item-twisty-top);
90
+ transition: transform 0.3s;
91
+ width: 16px;
92
+ }
93
+ .vuuMenuItem[data-highlighted] {
94
+ background-color: var(--context-menu-highlight-bg);
95
+ }
96
+ .vuuMenuItem:hover {
97
+ background-color: var(--context-menu-highlight-bg);
98
+ cursor: default;
99
+ }
100
+ .vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {
101
+ background-color: var(--context-menu-blur-focus-bg);
102
+ }
103
+ .vuuMenuItem.focusVisible:before {
104
+ content: "";
105
+ position: absolute;
106
+ top: 0;
107
+ left: 0;
108
+ right: 0;
109
+ bottom: 0px;
110
+ border: dotted var(--focus-visible-border-color) 2px;
111
+ }
112
+ .vuuPopupContainer.top-bottom-right-right .popup-menu {
113
+ left: auto;
114
+ right: 0;
115
+ }
116
+ .popup-menu .menu-item.showing > button,
117
+ .popup-menu .menu-item > button:focus,
118
+ .popup-menu .menu-item > button:hover {
119
+ text-decoration: none;
120
+ color: rgb(0, 0, 0);
121
+ background-color: rgb(220, 220, 220);
122
+ }
123
+ .vuuMenuItem-button:active,
124
+ .hwMenuItem-button:hover {
125
+ outline: 0;
126
+ }
127
+ .popup-menu .menu-item.disabled > button {
128
+ clear: both;
129
+ font-weight: normal;
130
+ line-height: 1.5;
131
+ color: rgb(120, 120, 120);
132
+ white-space: nowrap;
133
+ text-decoration: none;
134
+ cursor: default;
135
+ }
136
+
137
+ /* src/popup/popup-service.css */
138
+ .vuuPopup {
139
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
140
+ position: absolute;
141
+ top: 0;
142
+ left: 0;
143
+ width: 0;
144
+ height: 0;
145
+ overflow: visible;
146
+ z-index: 1000;
147
+ }
148
+ .vuuPopup {
149
+ position: absolute;
150
+ }
2
151
  /*# sourceMappingURL=index.css.map */
package/index.css.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css"],
4
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 border-bottom: solid 1px var(--salt-container-primary-borderColor);\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\n", ".vuuMenuList {\n --context-menu-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: #a4d5f4;\n --context-menu-blur-focus-bg: #e0e4e9;\n --menu-item-height: var(--hw-list-item-height, 24px);\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-radius: 4px;\n border: solid 1px rgba(0, 0, 0, 0.15);\n box-shadow: var(--context-menu-shadow);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-typography-fontWeight-semiBold);\n list-style: none;\n margin: 2px 0 0;\n outline: 0;\n padding: 0;\n position: absolute;\n}\n\n.vuuMenuItem {\n align-items: center;\n color: var(--context-menu-color);\n display: flex;\n gap: 6px;\n height: var(--menu-item-height);\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(--svg-chevron-right) center center/12px 12px;\n mask: var(--svg-chevron-down) center center/12px 12px;\n mask-repeat: 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 .hwMenuItem[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.hwMenuItem-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", ".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"],
5
- "mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,aACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,0CACA,uDACA,gBAvBF,eAyBE,UAzBF,UA2BE,kBAGF,aACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,kBACE,qBACA,cACA,6BACA,sBACA,4BAGF,iCACE,mDAGF,uBACE,uDAGF,uCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,+BACE,kDAGF,mBACE,kDACA,eAGF,4DACE,mDAGF,iCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAGF,sDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAEF,oDAEE,UAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCzHF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE",
5
+ "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACxBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;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;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;;;ACzHF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "@salt-ds/core": "1.0.0",
8
8
  "@salt-ds/icons": "1.0.0",
9
9
  "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
10
- "@vuu-ui/vuu-utils": "0.6.10-debug",
10
+ "@vuu-ui/vuu-utils": "0.6.11-debug",
11
11
  "classnames": "^2.2.6",
12
12
  "react": "^17.0.2",
13
13
  "react-dom": "^17.0.2"
@@ -17,9 +17,11 @@
17
17
  "index.css",
18
18
  "index.js.map",
19
19
  "index.css.map",
20
- "/src"
20
+ "/src",
21
+ "/types"
21
22
  ],
22
23
  "module": "esm/index.js",
23
24
  "main": "cjs/index.js",
24
- "version": "0.6.10-debug"
25
+ "version": "0.6.11-debug-debug",
26
+ "types": "types/index.d.ts"
25
27
  }
package/types/dialog/Dialog.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { HTMLAttributes } from "react";
2
+ import "./Dialog.css";
3
+ export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
4
+ isOpen?: boolean;
5
+ onClose?: () => void;
6
+ }
7
+ export declare const Dialog: ({ children, className, isOpen, onClose, title, ...props }: DialogProps) => JSX.Element | null;
package/types/dialog/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Dialog";
package/types/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from "./dialog";
2
+ export * from "./menu";
3
+ export * from "./popup";
4
+ export * from "./portal";
package/types/menu/ContextMenu.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { MenuListProps } from "./MenuList";
3
+ export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
4
+ onClose?: (menuId?: string, options?: unknown) => void;
5
+ position?: {
6
+ x: number;
7
+ y: number;
8
+ };
9
+ withPortal?: boolean;
10
+ }
11
+ export declare const ContextMenu: {
12
+ ({ activatedByKeyboard, children: childrenProp, className, id: idProp, onClose, position, style, ...menuListProps }: ContextMenuProps): JSX.Element;
13
+ displayName: string;
14
+ };
package/types/menu/MenuList.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import { FC, HTMLAttributes, ReactElement } from "react";
2
+ import "./MenuList.css";
3
+ export declare const Separator: () => JSX.Element;
4
+ export interface MenuItemGroupProps {
5
+ children: ReactElement<MenuItemProps>[];
6
+ label: string;
7
+ }
8
+ export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
9
+ action?: string;
10
+ idx?: number;
11
+ options?: unknown;
12
+ }
13
+ export declare const MenuItemGroup: FC<MenuItemGroupProps>;
14
+ export declare const MenuItem: ({ children, idx, ...props }: MenuItemProps) => JSX.Element;
15
+ export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
16
+ activatedByKeyboard?: boolean;
17
+ children: ReactElement[];
18
+ childMenuShowing?: number;
19
+ highlightedIdx?: number;
20
+ isRoot?: boolean;
21
+ listItemProps?: Partial<MenuItemProps>;
22
+ menuId?: string;
23
+ onActivate?: (menuId: string) => void;
24
+ onCloseMenu: (idx: number) => void;
25
+ onOpenMenu?: (menuId: string) => void;
26
+ onHighlightMenuItem?: (idx: number) => void;
27
+ }
28
+ declare const MenuList: {
29
+ ({ activatedByKeyboard, childMenuShowing, children, className, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, menuId, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
30
+ displayName: string;
31
+ };
32
+ export default MenuList;
package/types/menu/aim/aim.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { Corner } from "./corners";
2
+ export type Point = [number, number];
3
+ export type Position = {
4
+ x: number;
5
+ y: number;
6
+ };
7
+ export type Positions = [Position, Position];
8
+ export declare function distance(source: Position, target: Position): number;
9
+ export declare function pointInPolygon(point: Point, vs: Point[]): boolean;
10
+ export type Side = "right" | "top-right" | "top" | "top-left" | "left" | "bottom-left" | "bottom" | "bottom-right";
11
+ export declare function side(corners: [Corner, Corner] | []): Side;
12
+ export declare function bullseye(corners: [Corner, Corner] | [], boundaries: [Position, Position], mousePosition: Position): Position;
13
+ export declare function aiming(e: MouseEvent, mousePosition: Position, prevMousePosition: Position, target: HTMLElement, alreadyAiming: boolean): number | false;
package/types/menu/aim/corners.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { Position, Positions } from "./aim";
2
+ export type Corner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
3
+ export declare function findCorners(sourceEvt: MouseEvent, targetElement: HTMLElement): [Corner, Corner] | [];
4
+ type Source = {
5
+ left: number;
6
+ top: number;
7
+ };
8
+ export declare function boundaries(corners: [Corner, Corner] | [], sourcePos: Position | MouseEvent | Source, targetElement: HTMLElement | SVGElement, adjustment?: false | number): Positions;
9
+ export {};
package/types/menu/aim/utils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare function mousePosition(event: MouseEvent): {
2
+ x: number;
3
+ y: number;
4
+ };
package/types/menu/context-menu-provider.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import { ReactNode } from "react";
2
+ export type MenuActionHandler = (type: string, options: unknown) => boolean | undefined;
3
+ export type MenuBuilder<L = string, O = unknown> = (location: L, options: O) => ContextMenuItemDescriptor[];
4
+ export interface ContextMenuContext {
5
+ menuBuilders: MenuBuilder[];
6
+ menuActionHandler: MenuActionHandler;
7
+ }
8
+ export declare const ContextMenuContext: import("react").Context<ContextMenuContext | null>;
9
+ export interface ContextMenuItemBase {
10
+ icon?: string;
11
+ label: string;
12
+ location?: string;
13
+ }
14
+ export interface ContextMenuLeafItemDescriptor extends ContextMenuItemBase {
15
+ action: string;
16
+ options?: unknown;
17
+ }
18
+ export interface ContextMenuGroupItemDescriptor extends ContextMenuItemBase {
19
+ children: ContextMenuItemDescriptor[];
20
+ }
21
+ export type ContextMenuItemDescriptor = ContextMenuLeafItemDescriptor | ContextMenuGroupItemDescriptor;
22
+ export declare const isGroupMenuItemDescriptor: (menuItem?: ContextMenuItemDescriptor) => menuItem is ContextMenuGroupItemDescriptor;
23
+ export interface ContextMenuProviderProps {
24
+ children: ReactNode;
25
+ label?: string;
26
+ menuActionHandler?: MenuActionHandler;
27
+ menuBuilder: MenuBuilder;
28
+ }
29
+ export declare const ContextMenuProvider: ({ children, label, menuActionHandler, menuBuilder, }: ContextMenuProviderProps) => JSX.Element;
package/types/menu/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from "./ContextMenu";
2
+ export * from "./MenuList";
3
+ export * from "./context-menu-provider";
4
+ export * from "./useContextMenu";
package/types/menu/key-code.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const ArrowUp = "ArrowUp";
2
+ export declare const ArrowDown = "ArrowDown";
3
+ export declare const ArrowLeft = "ArrowLeft";
4
+ export declare const Backspace = "Backspace";
5
+ export declare const ArrowRight = "ArrowRight";
6
+ export declare const Enter = "Enter";
7
+ export declare const Escape = "Escape";
8
+ export declare const Delete = "Delete";
9
+ export declare const isCharacterKey: (evt: KeyboardEvent) => boolean | undefined;
10
+ export declare const isNavigationKey: ({ key }: {
11
+ key: string;
12
+ }, orientation?: string) => boolean;
package/types/menu/list-dom-utils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare function listItemIndex(listItemEl: HTMLElement): number | undefined;
2
+ export declare const closestListItem: (el: HTMLElement | null | undefined) => HTMLElement;
3
+ export declare const closestListItemId: (el: HTMLElement) => string | undefined;
4
+ export declare const closestListItemIndex: (el: HTMLElement) => number | undefined;
package/types/menu/use-cascade.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import { MouseEvent } from "react";
2
+ import { MenuItemProps } from "./MenuList";
3
+ export type RuntimeMenuDescriptor = {
4
+ id: string;
5
+ left: number;
6
+ top: number;
7
+ };
8
+ export declare const getItemId: (id: string) => string;
9
+ export declare const getMenuId: (id: string) => string;
10
+ export interface CascadeHookProps {
11
+ id: string;
12
+ onActivate: (menuId: string) => void;
13
+ onMouseEnterItem: (evt: MouseEvent, itemId: string) => void;
14
+ position: {
15
+ x: number;
16
+ y: number;
17
+ };
18
+ }
19
+ export interface CascadeHooksResult {
20
+ closeMenu: () => void;
21
+ handleRender: () => void;
22
+ listItemProps: Partial<MenuItemProps>;
23
+ openMenu: (menuId?: string, itemId?: string) => void;
24
+ openMenus: RuntimeMenuDescriptor[];
25
+ }
26
+ export declare const useCascade: ({ id, onActivate, onMouseEnterItem, position: { x: posX, y: posY }, }: CascadeHookProps) => CascadeHooksResult;
package/types/menu/use-click-away.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export interface ClickAwayHookProps {
2
+ containerClassName: string;
3
+ isOpen: boolean;
4
+ onClose?: (target: string) => void;
5
+ }
6
+ export declare const useClickAway: ({ containerClassName, isOpen, onClose, }: ClickAwayHookProps) => void;
package/types/menu/use-items-with-ids.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ReactElement } from "react";
2
+ export declare const isMenuItemGroup: (child: ReactElement) => boolean;
3
+ type Menus = {
4
+ [key: string]: ReactElement[];
5
+ };
6
+ type Actions = {
7
+ [key: string]: {
8
+ action: string;
9
+ options?: unknown;
10
+ };
11
+ };
12
+ export declare const useItemsWithIds: (childrenProp: ReactElement[]) => [Menus, Actions];
13
+ export {};
package/types/menu/use-keyboard-navigation.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import { FocusEvent, KeyboardEvent } from "react";
2
+ export interface KeyboardNavigationProps {
3
+ autoHighlightFirstItem?: boolean;
4
+ count: number;
5
+ highlightedIndex?: number;
6
+ onActivate: (idx: number) => void;
7
+ onHighlight?: (idx: number) => void;
8
+ onCloseMenu: (idx: number) => void;
9
+ onOpenMenu: (idx: number) => void;
10
+ }
11
+ export interface KeyboardHookListProps {
12
+ onFocus: (evt: FocusEvent) => void;
13
+ onKeyDown: (evt: KeyboardEvent) => void;
14
+ onMouseDownCapture: () => void;
15
+ onMouseMove: () => void;
16
+ onMouseLeave: () => void;
17
+ }
18
+ export interface NavigationHookResult {
19
+ focusVisible: number;
20
+ controlledHighlighting: boolean;
21
+ highlightedIndex: number;
22
+ setHighlightedIndex: (idx: number) => void;
23
+ listProps: KeyboardHookListProps;
24
+ setIgnoreFocus: (ignoreFocus: boolean) => void;
25
+ }
26
+ export declare const useKeyboardNavigation: ({ autoHighlightFirstItem, count, highlightedIndex: highlightedIndexProp, onActivate, onHighlight, onCloseMenu, onOpenMenu, }: KeyboardNavigationProps) => NavigationHookResult;
package/types/menu/useContextMenu.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { MouseEvent } from "react";
2
+ export declare const useContextMenu: () => (e: MouseEvent<HTMLElement>, location: string, options: unknown) => void;
package/types/menu/utils.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const isRoot: (el: HTMLElement) => boolean;
2
+ export declare const hasPopup: (el: HTMLElement, idx: number) => boolean;
package/types/popup/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./popup-service";
package/types/popup/popup-service.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import React, { ReactElement } from "react";
2
+ import "./popup-service.css";
3
+ export declare class PopupService {
4
+ static showPopup({ name, group, position, left, right, top, width, component, }: {
5
+ depth?: number;
6
+ name?: string;
7
+ group?: string;
8
+ position?: "above" | "below" | "";
9
+ left?: number;
10
+ right?: "auto" | number;
11
+ top?: number;
12
+ component: ReactElement;
13
+ width?: number | "auto";
14
+ }): void;
15
+ static hidePopup(name?: string, group?: string): void;
16
+ static keepWithinThePage(el: HTMLElement, right?: number | "auto"): void;
17
+ }
18
+ export declare class DialogService {
19
+ static showDialog(dialog: ReactElement): void;
20
+ static closeDialog(): void;
21
+ }
22
+ export interface PopupProps {
23
+ children: ReactElement;
24
+ close?: boolean;
25
+ depth: number;
26
+ group?: string;
27
+ name: string;
28
+ position?: "above" | "below" | "";
29
+ width: number;
30
+ }
31
+ export declare const Popup: (props: PopupProps) => React.DetailedReactHTMLElement<{
32
+ className: string;
33
+ ref: React.RefObject<HTMLElement>;
34
+ }, HTMLElement>;
package/types/portal/Portal.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { ReactElement } from "react";
2
+ export interface PortalProps {
3
+ children: ReactElement;
4
+ onRender?: () => void;
5
+ x?: number;
6
+ y?: number;
7
+ }
8
+ export declare const Portal: ({ children, x, y, onRender, }: PortalProps) => null;
package/types/portal/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from "./Portal";
2
+ export * from "./render-portal";
3
+ export * from "./portal-utils";
package/types/portal/portal-utils.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const installTheme: (themeId: string) => void;
package/types/portal/render-portal.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ReactElement } from "react";
2
+ export declare const renderPortal: (component: ReactElement, container: HTMLElement, x: number, y: number, onRender?: () => void) => void;
3
+ export declare const createContainer: (x?: number, y?: number) => HTMLDivElement;