@vuu-ui/vuu-popups 0.6.4 → 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.
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
@@ -1,6 +1,5 @@
1
1
  {
2
2
  "name": "@vuu-ui/vuu-popups",
3
- "version": "0.6.4",
4
3
  "description": "VUU popup components - Context Menu, Dialog etc",
5
4
  "author": "heswell",
6
5
  "license": "Apache-2.0",
@@ -8,7 +7,7 @@
8
7
  "@salt-ds/core": "1.0.0",
9
8
  "@salt-ds/icons": "1.0.0",
10
9
  "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
11
- "@vuu-ui/vuu-utils": "0.6.4",
10
+ "@vuu-ui/vuu-utils": "0.6.11-debug",
12
11
  "classnames": "^2.2.6",
13
12
  "react": "^17.0.2",
14
13
  "react-dom": "^17.0.2"
@@ -23,5 +22,6 @@
23
22
  ],
24
23
  "module": "esm/index.js",
25
24
  "main": "cjs/index.js",
25
+ "version": "0.6.11-debug-debug",
26
26
  "types": "types/index.d.ts"
27
27
  }
@@ -1,13 +1,13 @@
1
1
  import { Corner } from "./corners";
2
- export declare type Point = [number, number];
3
- export declare type Position = {
2
+ export type Point = [number, number];
3
+ export type Position = {
4
4
  x: number;
5
5
  y: number;
6
6
  };
7
- export declare type Positions = [Position, Position];
7
+ export type Positions = [Position, Position];
8
8
  export declare function distance(source: Position, target: Position): number;
9
9
  export declare function pointInPolygon(point: Point, vs: Point[]): boolean;
10
- export declare type Side = "right" | "top-right" | "top" | "top-left" | "left" | "bottom-left" | "bottom" | "bottom-right";
10
+ export type Side = "right" | "top-right" | "top" | "top-left" | "left" | "bottom-left" | "bottom" | "bottom-right";
11
11
  export declare function side(corners: [Corner, Corner] | []): Side;
12
12
  export declare function bullseye(corners: [Corner, Corner] | [], boundaries: [Position, Position], mousePosition: Position): Position;
13
13
  export declare function aiming(e: MouseEvent, mousePosition: Position, prevMousePosition: Position, target: HTMLElement, alreadyAiming: boolean): number | false;
@@ -1,7 +1,7 @@
1
1
  import { Position, Positions } from "./aim";
2
- export declare type Corner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
2
+ export type Corner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
3
3
  export declare function findCorners(sourceEvt: MouseEvent, targetElement: HTMLElement): [Corner, Corner] | [];
4
- declare type Source = {
4
+ type Source = {
5
5
  left: number;
6
6
  top: number;
7
7
  };
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from "react";
2
- export declare type MenuActionHandler = (type: string, options: unknown) => boolean | undefined;
3
- export declare type MenuBuilder<L = string, O = unknown> = (location: L, options: O) => ContextMenuItemDescriptor[];
2
+ export type MenuActionHandler = (type: string, options: unknown) => boolean | undefined;
3
+ export type MenuBuilder<L = string, O = unknown> = (location: L, options: O) => ContextMenuItemDescriptor[];
4
4
  export interface ContextMenuContext {
5
5
  menuBuilders: MenuBuilder[];
6
6
  menuActionHandler: MenuActionHandler;
@@ -18,8 +18,8 @@ export interface ContextMenuLeafItemDescriptor extends ContextMenuItemBase {
18
18
  export interface ContextMenuGroupItemDescriptor extends ContextMenuItemBase {
19
19
  children: ContextMenuItemDescriptor[];
20
20
  }
21
- export declare type ContextMenuItemDescriptor = ContextMenuLeafItemDescriptor | ContextMenuGroupItemDescriptor;
22
- export declare const isGroupMenuItem: (menuItem: ContextMenuItemDescriptor) => menuItem is ContextMenuGroupItemDescriptor;
21
+ export type ContextMenuItemDescriptor = ContextMenuLeafItemDescriptor | ContextMenuGroupItemDescriptor;
22
+ export declare const isGroupMenuItemDescriptor: (menuItem?: ContextMenuItemDescriptor) => menuItem is ContextMenuGroupItemDescriptor;
23
23
  export interface ContextMenuProviderProps {
24
24
  children: ReactNode;
25
25
  label?: string;
@@ -1,6 +1,6 @@
1
1
  import { MouseEvent } from "react";
2
2
  import { MenuItemProps } from "./MenuList";
3
- export declare type RuntimeMenuDescriptor = {
3
+ export type RuntimeMenuDescriptor = {
4
4
  id: string;
5
5
  left: number;
6
6
  top: number;
@@ -1,9 +1,9 @@
1
1
  import { ReactElement } from "react";
2
2
  export declare const isMenuItemGroup: (child: ReactElement) => boolean;
3
- declare type Menus = {
3
+ type Menus = {
4
4
  [key: string]: ReactElement[];
5
5
  };
6
- declare type Actions = {
6
+ type Actions = {
7
7
  [key: string]: {
8
8
  action: string;
9
9
  options?: unknown;