@vuu-ui/vuu-popups 2.1.17 → 2.1.19-beta.1
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/package.json +9 -11
- package/cjs/index.js +0 -18
- package/cjs/index.js.map +0 -1
- package/cjs/popup/Popup.css.js +0 -6
- package/cjs/popup/Popup.css.js.map +0 -1
- package/cjs/popup/Popup.js +0 -38
- package/cjs/popup/Popup.js.map +0 -1
- package/cjs/popup/getPositionRelativeToAnchor.js +0 -43
- package/cjs/popup/getPositionRelativeToAnchor.js.map +0 -1
- package/cjs/popup/useAnchoredPosition.js +0 -58
- package/cjs/popup/useAnchoredPosition.js.map +0 -1
- package/cjs/popup-menu/PopupMenu.css.js +0 -6
- package/cjs/popup-menu/PopupMenu.css.js.map +0 -1
- package/cjs/popup-menu/PopupMenu.js +0 -100
- package/cjs/popup-menu/PopupMenu.js.map +0 -1
- package/cjs/popup-menu/usePopupMenu.js +0 -100
- package/cjs/popup-menu/usePopupMenu.js.map +0 -1
- package/cjs/portal/Portal.css.js +0 -6
- package/cjs/portal/Portal.css.js.map +0 -1
- package/cjs/portal/Portal.js +0 -73
- package/cjs/portal/Portal.js.map +0 -1
- package/cjs/tooltip/Tooltip.css.js +0 -6
- package/cjs/tooltip/Tooltip.css.js.map +0 -1
- package/cjs/tooltip/Tooltip.js +0 -56
- package/cjs/tooltip/Tooltip.js.map +0 -1
- package/cjs/tooltip/useTooltip.js +0 -106
- package/cjs/tooltip/useTooltip.js.map +0 -1
- package/cjs/tooltip/useTooltipAnchoredPosition.js +0 -117
- package/cjs/tooltip/useTooltipAnchoredPosition.js.map +0 -1
- package/esm/index.js +0 -7
- package/esm/index.js.map +0 -1
- package/esm/popup/Popup.css.js +0 -4
- package/esm/popup/Popup.css.js.map +0 -1
- package/esm/popup/Popup.js +0 -36
- package/esm/popup/Popup.js.map +0 -1
- package/esm/popup/getPositionRelativeToAnchor.js +0 -41
- package/esm/popup/getPositionRelativeToAnchor.js.map +0 -1
- package/esm/popup/useAnchoredPosition.js +0 -56
- package/esm/popup/useAnchoredPosition.js.map +0 -1
- package/esm/popup-menu/PopupMenu.css.js +0 -4
- package/esm/popup-menu/PopupMenu.css.js.map +0 -1
- package/esm/popup-menu/PopupMenu.js +0 -98
- package/esm/popup-menu/PopupMenu.js.map +0 -1
- package/esm/popup-menu/usePopupMenu.js +0 -98
- package/esm/popup-menu/usePopupMenu.js.map +0 -1
- package/esm/portal/Portal.css.js +0 -4
- package/esm/portal/Portal.css.js.map +0 -1
- package/esm/portal/Portal.js +0 -71
- package/esm/portal/Portal.js.map +0 -1
- package/esm/tooltip/Tooltip.css.js +0 -4
- package/esm/tooltip/Tooltip.css.js.map +0 -1
- package/esm/tooltip/Tooltip.js +0 -54
- package/esm/tooltip/Tooltip.js.map +0 -1
- package/esm/tooltip/useTooltip.js +0 -104
- package/esm/tooltip/useTooltip.js.map +0 -1
- package/esm/tooltip/useTooltipAnchoredPosition.js +0 -115
- package/esm/tooltip/useTooltipAnchoredPosition.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.1.
|
|
2
|
+
"version": "2.1.19-beta.1",
|
|
3
3
|
"description": "VUU popup components - Context Menu, Dialog etc",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
|
+
"type": "module",
|
|
6
7
|
"dependencies": {
|
|
7
8
|
"@salt-ds/core": "1.54.1",
|
|
8
9
|
"@salt-ds/styles": "0.2.1",
|
|
9
10
|
"@salt-ds/window": "0.1.1",
|
|
10
|
-
"@vuu-ui/vuu-context-menu": "2.1.
|
|
11
|
-
"@vuu-ui/vuu-data-types": "2.1.
|
|
12
|
-
"@vuu-ui/vuu-layout": "2.1.
|
|
13
|
-
"@vuu-ui/vuu-utils": "2.1.
|
|
14
|
-
"@vuu-ui/vuu-ui-controls": "2.1.
|
|
11
|
+
"@vuu-ui/vuu-context-menu": "2.1.19-beta.1",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "2.1.19-beta.1",
|
|
13
|
+
"@vuu-ui/vuu-layout": "2.1.19-beta.1",
|
|
14
|
+
"@vuu-ui/vuu-utils": "2.1.19-beta.1",
|
|
15
|
+
"@vuu-ui/vuu-ui-controls": "2.1.19-beta.1"
|
|
15
16
|
},
|
|
16
17
|
"peerDependencies": {
|
|
17
18
|
"clsx": "^2.0.0",
|
|
@@ -27,14 +28,11 @@
|
|
|
27
28
|
],
|
|
28
29
|
"exports": {
|
|
29
30
|
".": {
|
|
30
|
-
"
|
|
31
|
-
"import": "./esm/index.js",
|
|
31
|
+
"import": "./index.js",
|
|
32
32
|
"types": "./types/index.d.ts"
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
|
-
"
|
|
36
|
-
"module": "esm/index.js",
|
|
35
|
+
"module": "index.js",
|
|
37
36
|
"name": "@vuu-ui/vuu-popups",
|
|
38
|
-
"type": "module",
|
|
39
37
|
"types": "types/index.d.ts"
|
|
40
38
|
}
|
package/cjs/index.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var Popup = require('./popup/Popup.js');
|
|
4
|
-
var useAnchoredPosition = require('./popup/useAnchoredPosition.js');
|
|
5
|
-
var PopupMenu = require('./popup-menu/PopupMenu.js');
|
|
6
|
-
var Portal = require('./portal/Portal.js');
|
|
7
|
-
var Tooltip = require('./tooltip/Tooltip.js');
|
|
8
|
-
var useTooltip = require('./tooltip/useTooltip.js');
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
exports.PopupComponent = Popup.PopupComponent;
|
|
13
|
-
exports.useAnchoredPosition = useAnchoredPosition.useAnchoredPosition;
|
|
14
|
-
exports.PopupMenu = PopupMenu.PopupMenu;
|
|
15
|
-
exports.Portal = Portal.Portal;
|
|
16
|
-
exports.Tooltip = Tooltip.Tooltip;
|
|
17
|
-
exports.useTooltip = useTooltip.useTooltip;
|
|
18
|
-
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|
package/cjs/popup/Popup.css.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/cjs/popup/Popup.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var cx = require('clsx');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var useAnchoredPosition = require('./useAnchoredPosition.js');
|
|
8
|
-
var Popup = require('./Popup.css.js');
|
|
9
|
-
|
|
10
|
-
const PopupComponent = ({
|
|
11
|
-
children,
|
|
12
|
-
className,
|
|
13
|
-
anchorElement,
|
|
14
|
-
minWidth,
|
|
15
|
-
offsetLeft,
|
|
16
|
-
offsetTop,
|
|
17
|
-
placement,
|
|
18
|
-
position: positionProp
|
|
19
|
-
}) => {
|
|
20
|
-
const targetWindow = window.useWindow();
|
|
21
|
-
styles.useComponentCssInjection({
|
|
22
|
-
testId: "vuu-popup",
|
|
23
|
-
css: Popup,
|
|
24
|
-
window: targetWindow
|
|
25
|
-
});
|
|
26
|
-
const { popupRef, position } = useAnchoredPosition.useAnchoredPosition({
|
|
27
|
-
anchorElement,
|
|
28
|
-
minWidth,
|
|
29
|
-
offsetLeft,
|
|
30
|
-
offsetTop,
|
|
31
|
-
placement,
|
|
32
|
-
position: positionProp
|
|
33
|
-
});
|
|
34
|
-
return position === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(`vuuPortal`, className), ref: popupRef, style: position, children });
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
exports.PopupComponent = PopupComponent;
|
|
38
|
-
//# sourceMappingURL=Popup.js.map
|
package/cjs/popup/Popup.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","sources":["../../../../packages/vuu-popups/src/popup/Popup.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, RefObject } from \"react\";\nimport { useAnchoredPosition } from \"./useAnchoredPosition\";\nimport { Position } from \"./getPositionRelativeToAnchor\";\n\nimport popupCss from \"./Popup.css\";\n\nexport type PopupPlacement =\n | \"absolute\"\n | \"auto\"\n | \"below\"\n | \"below-center\"\n | \"below-right\"\n | \"below-full-width\"\n | \"center\"\n | \"right\";\n\nexport interface PopupComponentProps extends HTMLAttributes<HTMLDivElement> {\n anchorElement: RefObject<HTMLElement | null>;\n // TODO this is repeated in Position\n minWidth?: number | string;\n offsetLeft?: number;\n offsetTop?: number;\n placement: PopupPlacement;\n position?: Position;\n}\n\nexport const PopupComponent = ({\n children,\n className,\n anchorElement,\n minWidth,\n offsetLeft,\n offsetTop,\n placement,\n position: positionProp,\n}: PopupComponentProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-popup\",\n css: popupCss,\n window: targetWindow,\n });\n\n const { popupRef, position } = useAnchoredPosition({\n anchorElement,\n minWidth,\n offsetLeft,\n offsetTop,\n placement,\n position: positionProp,\n });\n return position === undefined ? null : (\n <div className={cx(`vuuPortal`, className)} ref={popupRef} style={position}>\n {children}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","popupCss","useAnchoredPosition","jsx"],"mappings":";;;;;;;;;AA6BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA;AACZ,CAA2B,KAAA;AACzB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,QAAS,EAAA,GAAIC,uCAAoB,CAAA;AAAA,IACjD,aAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA;AAAA,GACX,CAAA;AACD,EAAA,OAAO,QAAa,KAAA,KAAA,CAAA,GAAY,IAC9B,mBAAAC,cAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,CAAa,SAAA,CAAA,EAAA,SAAS,CAAG,EAAA,GAAA,EAAK,QAAU,EAAA,KAAA,EAAO,UAC/D,QACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions) => {
|
|
4
|
-
const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
|
|
5
|
-
switch (placement) {
|
|
6
|
-
case "below":
|
|
7
|
-
return { left: left + offsetLeft, top: bottom + offsetTop };
|
|
8
|
-
case "right":
|
|
9
|
-
return { left: right + offsetLeft, top: top + offsetTop };
|
|
10
|
-
case "below-center":
|
|
11
|
-
return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };
|
|
12
|
-
case "below-right":
|
|
13
|
-
return { left, minWidth, top: bottom + offsetTop };
|
|
14
|
-
case "below-full-width":
|
|
15
|
-
return {
|
|
16
|
-
left: left + offsetLeft,
|
|
17
|
-
minWidth,
|
|
18
|
-
top: bottom + offsetTop,
|
|
19
|
-
width
|
|
20
|
-
};
|
|
21
|
-
case "center":
|
|
22
|
-
if (dimensions) {
|
|
23
|
-
return {
|
|
24
|
-
left: width / 2 - dimensions.width / 2 + offsetLeft,
|
|
25
|
-
top: height / 2 - dimensions.height / 2 + offsetTop,
|
|
26
|
-
visibility: "visible"
|
|
27
|
-
};
|
|
28
|
-
} else {
|
|
29
|
-
return {
|
|
30
|
-
left: width / 2 + offsetLeft,
|
|
31
|
-
top: height / 2 + offsetTop,
|
|
32
|
-
visibility: "hidden"
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
default:
|
|
36
|
-
throw Error(
|
|
37
|
-
`Popup getPositionRelativeToAnchor non-supported placement value ${placement}`
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
exports.getPositionRelativeToAnchor = getPositionRelativeToAnchor;
|
|
43
|
-
//# sourceMappingURL=getPositionRelativeToAnchor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getPositionRelativeToAnchor.js","sources":["../../../../packages/vuu-popups/src/popup/getPositionRelativeToAnchor.ts"],"sourcesContent":["import { PopupPlacement } from \"./Popup\";\n\nexport type Visibility = \"hidden\" | \"visible\";\n\nexport type Position = {\n left: number;\n minWidth?: number | string;\n top: number;\n visibility?: Visibility;\n width?: number;\n};\n\nexport const getPositionRelativeToAnchor = (\n anchorElement: HTMLElement,\n placement: PopupPlacement,\n offsetLeft: number,\n offsetTop: number,\n minWidth?: number | string,\n dimensions?: { height: number; width: number }\n): {\n left: number;\n minWidth?: number | string;\n top: number;\n visibility?: Visibility;\n width?: number;\n} => {\n const { bottom, height, left, right, top, width } =\n anchorElement.getBoundingClientRect();\n switch (placement) {\n case \"below\":\n return { left: left + offsetLeft, top: bottom + offsetTop };\n case \"right\":\n return { left: right + offsetLeft, top: top + offsetTop };\n case \"below-center\":\n return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };\n case \"below-right\":\n return { left: left, minWidth, top: bottom + offsetTop };\n case \"below-full-width\":\n return {\n left: left + offsetLeft,\n minWidth,\n top: bottom + offsetTop,\n width,\n };\n case \"center\":\n if (dimensions) {\n return {\n left: width / 2 - dimensions.width / 2 + offsetLeft,\n top: height / 2 - dimensions.height / 2 + offsetTop,\n visibility: \"visible\",\n };\n } else {\n return {\n left: width / 2 + offsetLeft,\n top: height / 2 + offsetTop,\n visibility: \"hidden\",\n };\n }\n default:\n throw Error(\n `Popup getPositionRelativeToAnchor non-supported placement value ${placement}`\n );\n }\n};\n"],"names":[],"mappings":";;AAYO,MAAM,8BAA8B,CACzC,aAAA,EACA,WACA,UACA,EAAA,SAAA,EACA,UACA,UAOG,KAAA;AACH,EAAM,MAAA,EAAE,QAAQ,MAAQ,EAAA,IAAA,EAAM,OAAO,GAAK,EAAA,KAAA,EACxC,GAAA,aAAA,CAAc,qBAAsB,EAAA;AACtC,EAAA,QAAQ,SAAW;AAAA,IACjB,KAAK,OAAA;AACH,MAAA,OAAO,EAAE,IAAM,EAAA,IAAA,GAAO,UAAY,EAAA,GAAA,EAAK,SAAS,SAAU,EAAA;AAAA,IAC5D,KAAK,OAAA;AACH,MAAA,OAAO,EAAE,IAAM,EAAA,KAAA,GAAQ,UAAY,EAAA,GAAA,EAAK,MAAM,SAAU,EAAA;AAAA,IAC1D,KAAK,cAAA;AACH,MAAO,OAAA,EAAE,MAAM,IAAO,GAAA,KAAA,GAAQ,IAAI,UAAY,EAAA,GAAA,EAAK,SAAS,SAAU,EAAA;AAAA,IACxE,KAAK,aAAA;AACH,MAAA,OAAO,EAAE,IAAA,EAAY,QAAU,EAAA,GAAA,EAAK,SAAS,SAAU,EAAA;AAAA,IACzD,KAAK,kBAAA;AACH,MAAO,OAAA;AAAA,QACL,MAAM,IAAO,GAAA,UAAA;AAAA,QACb,QAAA;AAAA,QACA,KAAK,MAAS,GAAA,SAAA;AAAA,QACd;AAAA,OACF;AAAA,IACF,KAAK,QAAA;AACH,MAAA,IAAI,UAAY,EAAA;AACd,QAAO,OAAA;AAAA,UACL,IAAM,EAAA,KAAA,GAAQ,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAI,GAAA,UAAA;AAAA,UACzC,GAAK,EAAA,MAAA,GAAS,CAAI,GAAA,UAAA,CAAW,SAAS,CAAI,GAAA,SAAA;AAAA,UAC1C,UAAY,EAAA;AAAA,SACd;AAAA,OACK,MAAA;AACL,QAAO,OAAA;AAAA,UACL,IAAA,EAAM,QAAQ,CAAI,GAAA,UAAA;AAAA,UAClB,GAAA,EAAK,SAAS,CAAI,GAAA,SAAA;AAAA,UAClB,UAAY,EAAA;AAAA,SACd;AAAA;AACF,IACF;AACE,MAAM,MAAA,KAAA;AAAA,QACJ,mEAAmE,SAAS,CAAA;AAAA,OAC9E;AAAA;AAEN;;;;"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var getPositionRelativeToAnchor = require('./getPositionRelativeToAnchor.js');
|
|
5
|
-
|
|
6
|
-
const useAnchoredPosition = ({
|
|
7
|
-
anchorElement,
|
|
8
|
-
minWidth,
|
|
9
|
-
offsetLeft = 0,
|
|
10
|
-
offsetTop = 0,
|
|
11
|
-
placement,
|
|
12
|
-
position: positionProp
|
|
13
|
-
}) => {
|
|
14
|
-
const popupRef = react.useRef(null);
|
|
15
|
-
const [position, setPosition] = react.useState(positionProp);
|
|
16
|
-
react.useLayoutEffect(() => {
|
|
17
|
-
if (placement === "absolute" && positionProp) {
|
|
18
|
-
setPosition(positionProp);
|
|
19
|
-
} else if (anchorElement.current && placement !== "auto") {
|
|
20
|
-
const dimensions = popupRef.current === null ? void 0 : popupRef.current.getBoundingClientRect();
|
|
21
|
-
const position2 = getPositionRelativeToAnchor.getPositionRelativeToAnchor(
|
|
22
|
-
anchorElement.current,
|
|
23
|
-
placement,
|
|
24
|
-
offsetLeft,
|
|
25
|
-
offsetTop,
|
|
26
|
-
minWidth,
|
|
27
|
-
dimensions
|
|
28
|
-
);
|
|
29
|
-
setPosition(position2);
|
|
30
|
-
}
|
|
31
|
-
}, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);
|
|
32
|
-
const popupCallbackRef = react.useCallback(
|
|
33
|
-
(el) => {
|
|
34
|
-
popupRef.current = el;
|
|
35
|
-
if (el && placement === "center" && anchorElement.current) {
|
|
36
|
-
const { height, width } = el.getBoundingClientRect();
|
|
37
|
-
setPosition(
|
|
38
|
-
getPositionRelativeToAnchor.getPositionRelativeToAnchor(
|
|
39
|
-
anchorElement.current,
|
|
40
|
-
placement,
|
|
41
|
-
offsetLeft,
|
|
42
|
-
offsetTop,
|
|
43
|
-
void 0,
|
|
44
|
-
{ height, width }
|
|
45
|
-
)
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
[anchorElement, offsetLeft, offsetTop, placement]
|
|
50
|
-
);
|
|
51
|
-
return {
|
|
52
|
-
position,
|
|
53
|
-
popupRef: placement === "center" ? popupCallbackRef : void 0
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
exports.useAnchoredPosition = useAnchoredPosition;
|
|
58
|
-
//# sourceMappingURL=useAnchoredPosition.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useAnchoredPosition.js","sources":["../../../../packages/vuu-popups/src/popup/useAnchoredPosition.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n getPositionRelativeToAnchor,\n Position,\n} from \"./getPositionRelativeToAnchor\";\nimport { PopupComponentProps } from \"./Popup\";\n\nexport type AnchoredPositionHookProps = Pick<\n PopupComponentProps,\n | \"anchorElement\"\n | \"minWidth\"\n | \"offsetLeft\"\n | \"offsetTop\"\n | \"placement\"\n | \"position\"\n>;\n\nexport const useAnchoredPosition = ({\n anchorElement,\n minWidth,\n offsetLeft = 0,\n offsetTop = 0,\n placement,\n position: positionProp,\n}: AnchoredPositionHookProps) => {\n const popupRef = useRef<HTMLElement | null>(null);\n const [position, setPosition] = useState<Position | undefined>(positionProp);\n\n // maybe better as useMemo ?\n useLayoutEffect(() => {\n if (placement === \"absolute\" && positionProp) {\n setPosition(positionProp);\n } else if (anchorElement.current && placement !== \"auto\") {\n const dimensions =\n popupRef.current === null\n ? undefined\n : popupRef.current.getBoundingClientRect();\n const position = getPositionRelativeToAnchor(\n anchorElement.current,\n placement,\n offsetLeft,\n offsetTop,\n minWidth,\n dimensions\n );\n setPosition(position);\n }\n }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);\n\n const popupCallbackRef = useCallback(\n (el: HTMLDivElement | null) => {\n popupRef.current = el;\n if (el && placement === \"center\" && anchorElement.current) {\n const { height, width } = el.getBoundingClientRect();\n setPosition(\n getPositionRelativeToAnchor(\n anchorElement.current,\n placement,\n offsetLeft,\n offsetTop,\n undefined,\n { height, width }\n )\n );\n }\n },\n [anchorElement, offsetLeft, offsetTop, placement]\n );\n\n return {\n position,\n popupRef: placement === \"center\" ? popupCallbackRef : undefined,\n };\n};\n"],"names":["useRef","useState","useLayoutEffect","position","getPositionRelativeToAnchor","useCallback"],"mappings":";;;;;AAiBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,aAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAa,GAAA,CAAA;AAAA,EACb,SAAY,GAAA,CAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAU,EAAA;AACZ,CAAiC,KAAA;AAC/B,EAAM,MAAA,QAAA,GAAWA,aAA2B,IAAI,CAAA;AAChD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAA+B,YAAY,CAAA;AAG3E,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAI,IAAA,SAAA,KAAc,cAAc,YAAc,EAAA;AAC5C,MAAA,WAAA,CAAY,YAAY,CAAA;AAAA,KACf,MAAA,IAAA,aAAA,CAAc,OAAW,IAAA,SAAA,KAAc,MAAQ,EAAA;AACxD,MAAA,MAAM,aACJ,QAAS,CAAA,OAAA,KAAY,OACjB,KACA,CAAA,GAAA,QAAA,CAAS,QAAQ,qBAAsB,EAAA;AAC7C,MAAA,MAAMC,SAAW,GAAAC,uDAAA;AAAA,QACf,aAAc,CAAA,OAAA;AAAA,QACd,SAAA;AAAA,QACA,UAAA;AAAA,QACA,SAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,WAAA,CAAYD,SAAQ,CAAA;AAAA;AACtB,GACF,EAAG,CAAC,aAAe,EAAA,QAAA,EAAU,YAAY,SAAW,EAAA,SAAA,EAAW,YAAY,CAAC,CAAA;AAE5E,EAAA,MAAM,gBAAmB,GAAAE,iBAAA;AAAA,IACvB,CAAC,EAA8B,KAAA;AAC7B,MAAA,QAAA,CAAS,OAAU,GAAA,EAAA;AACnB,MAAA,IAAI,EAAM,IAAA,SAAA,KAAc,QAAY,IAAA,aAAA,CAAc,OAAS,EAAA;AACzD,QAAA,MAAM,EAAE,MAAA,EAAQ,KAAM,EAAA,GAAI,GAAG,qBAAsB,EAAA;AACnD,QAAA,WAAA;AAAA,UACED,uDAAA;AAAA,YACE,aAAc,CAAA,OAAA;AAAA,YACd,SAAA;AAAA,YACA,UAAA;AAAA,YACA,SAAA;AAAA,YACA,KAAA,CAAA;AAAA,YACA,EAAE,QAAQ,KAAM;AAAA;AAClB,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,aAAA,EAAe,UAAY,EAAA,SAAA,EAAW,SAAS;AAAA,GAClD;AAEA,EAAO,OAAA;AAAA,IACL,QAAA;AAAA,IACA,QAAA,EAAU,SAAc,KAAA,QAAA,GAAW,gBAAmB,GAAA,KAAA;AAAA,GACxD;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var popupMenuCss = ".vuuPopupMenu {\n --vuu-icon-height: 20px;\n --vuu-icon-left: 2px;\n --vuu-icon-size: var(--vuuPopupMenu-iconSize, 16px);\n --vuu-icon-width: 16px;\n}\n\n";
|
|
4
|
-
|
|
5
|
-
module.exports = popupMenuCss;
|
|
6
|
-
//# sourceMappingURL=PopupMenu.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PopupMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
8
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
9
|
-
var cx = require('clsx');
|
|
10
|
-
var usePopupMenu = require('./usePopupMenu.js');
|
|
11
|
-
var PopupMenu$1 = require('./PopupMenu.css.js');
|
|
12
|
-
|
|
13
|
-
const classBase = "vuuPopupMenu";
|
|
14
|
-
const PopupMenu = ({
|
|
15
|
-
anchorElement,
|
|
16
|
-
"aria-label": ariaLabel,
|
|
17
|
-
appearance = "transparent",
|
|
18
|
-
className,
|
|
19
|
-
disabled = false,
|
|
20
|
-
label,
|
|
21
|
-
icon = label ? "chevron-down" : "more-vert",
|
|
22
|
-
id: idProp,
|
|
23
|
-
menuActionHandler,
|
|
24
|
-
menuBuilder,
|
|
25
|
-
menuClassName,
|
|
26
|
-
menuLocation = "header",
|
|
27
|
-
menuOptions,
|
|
28
|
-
onMenuClose,
|
|
29
|
-
onMenuOpen,
|
|
30
|
-
popupPlacement = "below-right",
|
|
31
|
-
sentiment = "neutral",
|
|
32
|
-
tabIndex = 0,
|
|
33
|
-
...htmlAttributes
|
|
34
|
-
}) => {
|
|
35
|
-
const targetWindow = window.useWindow();
|
|
36
|
-
styles.useComponentCssInjection({
|
|
37
|
-
testId: "vuu-popup-menu",
|
|
38
|
-
css: PopupMenu$1,
|
|
39
|
-
window: targetWindow
|
|
40
|
-
});
|
|
41
|
-
const id = vuuUtils.useId(idProp);
|
|
42
|
-
const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu.usePopupMenu({
|
|
43
|
-
anchorElement,
|
|
44
|
-
"aria-label": ariaLabel,
|
|
45
|
-
id,
|
|
46
|
-
menuActionHandler,
|
|
47
|
-
menuBuilder,
|
|
48
|
-
menuClassName,
|
|
49
|
-
menuLocation,
|
|
50
|
-
onMenuClose,
|
|
51
|
-
onMenuOpen,
|
|
52
|
-
menuOptions,
|
|
53
|
-
popupPlacement,
|
|
54
|
-
tabIndex
|
|
55
|
-
});
|
|
56
|
-
if (label) {
|
|
57
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
58
|
-
core.Button,
|
|
59
|
-
{
|
|
60
|
-
...htmlAttributes,
|
|
61
|
-
...ariaAttributes,
|
|
62
|
-
...buttonProps,
|
|
63
|
-
appearance,
|
|
64
|
-
className: cx(classBase, className, `${classBase}-withCaption`, {
|
|
65
|
-
"saltButton-active": menuOpen
|
|
66
|
-
}),
|
|
67
|
-
disabled,
|
|
68
|
-
ref: rootRef,
|
|
69
|
-
sentiment,
|
|
70
|
-
children: [
|
|
71
|
-
icon ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: icon }) : null,
|
|
72
|
-
label
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
} else if (icon) {
|
|
77
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
78
|
-
vuuUiControls.IconButton,
|
|
79
|
-
{
|
|
80
|
-
...htmlAttributes,
|
|
81
|
-
...ariaAttributes,
|
|
82
|
-
...buttonProps,
|
|
83
|
-
appearance,
|
|
84
|
-
className: cx(classBase, className, {
|
|
85
|
-
"saltButton-active": menuOpen
|
|
86
|
-
}),
|
|
87
|
-
disabled,
|
|
88
|
-
icon,
|
|
89
|
-
ref: rootRef,
|
|
90
|
-
sentiment
|
|
91
|
-
}
|
|
92
|
-
);
|
|
93
|
-
} else {
|
|
94
|
-
console.error("PopupMenu must have a label or an icon (or both)");
|
|
95
|
-
return null;
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
exports.PopupMenu = PopupMenu;
|
|
100
|
-
//# sourceMappingURL=PopupMenu.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, KeyboardEvent, RefObject } from \"react\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { usePopupMenu } from \"./usePopupMenu\";\n\nimport popupMenuCss from \"./PopupMenu.css\";\n\nconst classBase = \"vuuPopupMenu\";\n\nexport type TabAwayClosePopup = {\n closedBy?: string;\n type: \"tab-away\";\n event: KeyboardEvent;\n};\n\nexport type ClickAwayClosePopup = {\n closedBy?: string;\n type: \"click-away\";\n mouseEvt: MouseEvent;\n};\n\nexport type EscapeClosePopup = {\n closedBy?: string;\n event: KeyboardEvent;\n type: \"escape\";\n};\n\nexport type MenuActionClosePopup = {\n closedBy?: string;\n menuId: string;\n options: unknown;\n type: \"menu-action\";\n};\n\nexport type PopupCloseReason =\n | ClickAwayClosePopup\n | EscapeClosePopup\n | MenuActionClosePopup\n | TabAwayClosePopup;\n\nexport type MenuCloseHandler = (reason?: PopupCloseReason) => void;\n\nexport interface PopupMenuProps\n extends Pick<ButtonProps, \"appearance\" | \"sentiment\">,\n HTMLAttributes<HTMLButtonElement> {\n anchorElement?: RefObject<HTMLElement | null>;\n disabled?: boolean;\n icon?: string;\n label?: string;\n menuActionHandler?: MenuActionHandler;\n menuBuilder?: MenuBuilder;\n menuClassName?: string;\n menuLocation?: string;\n menuOptions?: { [key: string]: unknown };\n onMenuClose?: MenuCloseHandler;\n onMenuOpen?: () => void;\n popupPlacement?: PopupPlacement;\n}\n\nexport const PopupMenu = ({\n anchorElement,\n \"aria-label\": ariaLabel,\n appearance = \"transparent\",\n className,\n disabled = false,\n label,\n icon = label ? \"chevron-down\" : \"more-vert\",\n id: idProp,\n menuActionHandler,\n menuBuilder,\n menuClassName,\n menuLocation = \"header\",\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement = \"below-right\",\n sentiment = \"neutral\",\n tabIndex = 0,\n ...htmlAttributes\n}: PopupMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-popup-menu\",\n css: popupMenuCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({\n anchorElement,\n \"aria-label\": ariaLabel,\n id,\n menuActionHandler,\n menuBuilder,\n menuClassName,\n menuLocation,\n onMenuClose,\n onMenuOpen,\n menuOptions,\n popupPlacement,\n tabIndex,\n });\n\n if (label) {\n return (\n <Button\n {...htmlAttributes}\n {...ariaAttributes}\n {...buttonProps}\n appearance={appearance}\n className={cx(classBase, className, `${classBase}-withCaption`, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n ref={rootRef}\n sentiment={sentiment}\n >\n {icon ? <Icon name={icon} /> : null}\n {label}\n </Button>\n );\n } else if (icon) {\n return (\n <IconButton\n {...htmlAttributes}\n {...ariaAttributes}\n {...buttonProps}\n appearance={appearance}\n className={cx(classBase, className, {\n \"saltButton-active\": menuOpen,\n })}\n disabled={disabled}\n icon={icon}\n ref={rootRef}\n sentiment={sentiment}\n />\n );\n } else {\n console.error(\"PopupMenu must have a label or an icon (or both)\");\n return null;\n }\n};\n"],"names":["useWindow","useComponentCssInjection","popupMenuCss","useId","usePopupMenu","jsxs","Button","jsx","Icon","IconButton"],"mappings":";;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAoDX,MAAM,YAAY,CAAC;AAAA,EACxB,aAAA;AAAA,EACA,YAAc,EAAA,SAAA;AAAA,EACd,UAAa,GAAA,aAAA;AAAA,EACb,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,KAAA;AAAA,EACA,IAAA,GAAO,QAAQ,cAAiB,GAAA,WAAA;AAAA,EAChC,EAAI,EAAA,MAAA;AAAA,EACJ,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAe,GAAA,QAAA;AAAA,EACf,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAiB,GAAA,aAAA;AAAA,EACjB,SAAY,GAAA,SAAA;AAAA,EACZ,QAAW,GAAA,CAAA;AAAA,EACX,GAAG;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,eAAM,MAAM,CAAA;AAEvB,EAAA,MAAM,EAAE,cAAgB,EAAA,WAAA,EAAa,QAAU,EAAA,OAAA,KAAYC,yBAAa,CAAA;AAAA,IACtE,aAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,EAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,IAAI,KAAO,EAAA;AACT,IACE,uBAAAC,eAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACJ,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,CAAA,EAAG,SAAS,CAAgB,YAAA,CAAA,EAAA;AAAA,UAC9D,mBAAqB,EAAA;AAAA,SACtB,CAAA;AAAA,QACD,QAAA;AAAA,QACA,GAAK,EAAA,OAAA;AAAA,QACL,SAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,mBAAQC,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAM,EAAA,IAAA,EAAM,CAAK,GAAA,IAAA;AAAA,UAC9B;AAAA;AAAA;AAAA,KACH;AAAA,aAEO,IAAM,EAAA;AACf,IACE,uBAAAD,cAAA;AAAA,MAACE,wBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACJ,UAAA;AAAA,QACA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,mBAAqB,EAAA;AAAA,SACtB,CAAA;AAAA,QACD,QAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAK,EAAA,OAAA;AAAA,QACL;AAAA;AAAA,KACF;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,MAAM,kDAAkD,CAAA;AAChE,IAAO,OAAA,IAAA;AAAA;AAEX;;;;"}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var getPositionRelativeToAnchor = require('../popup/getPositionRelativeToAnchor.js');
|
|
5
|
-
var vuuContextMenu = require('@vuu-ui/vuu-context-menu');
|
|
6
|
-
|
|
7
|
-
const usePopupMenu = ({
|
|
8
|
-
anchorElement,
|
|
9
|
-
"aria-label": ariaLabel = "Popup menu",
|
|
10
|
-
id,
|
|
11
|
-
menuActionHandler,
|
|
12
|
-
menuBuilder,
|
|
13
|
-
menuLocation,
|
|
14
|
-
menuOptions,
|
|
15
|
-
onMenuClose,
|
|
16
|
-
onMenuOpen,
|
|
17
|
-
popupPlacement,
|
|
18
|
-
tabIndex
|
|
19
|
-
}) => {
|
|
20
|
-
const [menuOpen, _setMenuOpen] = react.useState(false);
|
|
21
|
-
const suppressShowMenuRef = react.useRef(false);
|
|
22
|
-
const rootRef = react.useRef(null);
|
|
23
|
-
const setMenuOpen = react.useCallback(
|
|
24
|
-
(isOpen) => {
|
|
25
|
-
_setMenuOpen(isOpen);
|
|
26
|
-
if (isOpen) {
|
|
27
|
-
onMenuOpen?.();
|
|
28
|
-
setTimeout(() => {
|
|
29
|
-
const firstOption = document.activeElement?.querySelector(
|
|
30
|
-
".saltMenuItem"
|
|
31
|
-
);
|
|
32
|
-
firstOption?.focus();
|
|
33
|
-
}, 40);
|
|
34
|
-
} else {
|
|
35
|
-
suppressShowMenuRef.current = false;
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
[onMenuOpen]
|
|
39
|
-
);
|
|
40
|
-
const showContextMenu = vuuContextMenu.useContextMenu(menuBuilder, menuActionHandler);
|
|
41
|
-
const handleMenuOpenChange = react.useCallback(
|
|
42
|
-
(isOpen) => {
|
|
43
|
-
if (!isOpen) {
|
|
44
|
-
setMenuOpen(false);
|
|
45
|
-
onMenuClose?.();
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
[onMenuClose, setMenuOpen]
|
|
49
|
-
);
|
|
50
|
-
const showMenu = react.useCallback(
|
|
51
|
-
(e) => {
|
|
52
|
-
if (suppressShowMenuRef.current) {
|
|
53
|
-
suppressShowMenuRef.current = false;
|
|
54
|
-
} else {
|
|
55
|
-
suppressShowMenuRef.current = true;
|
|
56
|
-
const anchorEl = anchorElement?.current ?? rootRef.current;
|
|
57
|
-
if (anchorEl) {
|
|
58
|
-
const {
|
|
59
|
-
left: x,
|
|
60
|
-
top: y
|
|
61
|
-
// width,
|
|
62
|
-
} = getPositionRelativeToAnchor.getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);
|
|
63
|
-
setMenuOpen(true);
|
|
64
|
-
showContextMenu(e, menuLocation, menuOptions, {
|
|
65
|
-
// className: menuClassName,
|
|
66
|
-
// id: `${id}-menu`,
|
|
67
|
-
onOpenChange: handleMenuOpenChange,
|
|
68
|
-
x,
|
|
69
|
-
y
|
|
70
|
-
// style: { width: width ? width - 2 : undefined },
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
[
|
|
76
|
-
anchorElement,
|
|
77
|
-
popupPlacement,
|
|
78
|
-
setMenuOpen,
|
|
79
|
-
showContextMenu,
|
|
80
|
-
menuLocation,
|
|
81
|
-
menuOptions,
|
|
82
|
-
handleMenuOpenChange
|
|
83
|
-
]
|
|
84
|
-
);
|
|
85
|
-
const ariaAttributes = {
|
|
86
|
-
"aria-controls": menuOpen ? `${id}-menu` : void 0,
|
|
87
|
-
"aria-label": ariaLabel,
|
|
88
|
-
"aria-expanded": menuOpen,
|
|
89
|
-
"aria-haspopup": "menu"
|
|
90
|
-
};
|
|
91
|
-
const buttonProps = {
|
|
92
|
-
id,
|
|
93
|
-
onClick: showMenu,
|
|
94
|
-
tabIndex
|
|
95
|
-
};
|
|
96
|
-
return { ariaAttributes, buttonProps, menuOpen, rootRef };
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
exports.usePopupMenu = usePopupMenu;
|
|
100
|
-
//# sourceMappingURL=usePopupMenu.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/usePopupMenu.ts"],"sourcesContent":["import {\n AriaAttributes,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { PopupMenuProps } from \"./PopupMenu\";\nimport { getPositionRelativeToAnchor } from \"../popup/getPositionRelativeToAnchor\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface PopupMenuHookProps\n extends Pick<\n PopupMenuProps,\n | \"anchorElement\"\n | \"aria-label\"\n | \"menuActionHandler\"\n | \"menuBuilder\"\n | \"menuClassName\"\n | \"menuOptions\"\n | \"onMenuClose\"\n | \"onMenuOpen\"\n > {\n id: string;\n menuLocation: string;\n popupPlacement: PopupPlacement;\n tabIndex: number;\n}\n\nexport const usePopupMenu = ({\n anchorElement,\n \"aria-label\": ariaLabel = \"Popup menu\",\n id,\n menuActionHandler,\n menuBuilder,\n menuLocation,\n menuOptions,\n onMenuClose,\n onMenuOpen,\n popupPlacement,\n tabIndex,\n}: PopupMenuHookProps) => {\n const [menuOpen, _setMenuOpen] = useState(false);\n const suppressShowMenuRef = useRef(false);\n const rootRef = useRef<HTMLButtonElement>(null);\n\n const setMenuOpen = useCallback(\n (isOpen: boolean) => {\n _setMenuOpen(isOpen);\n if (isOpen) {\n onMenuOpen?.();\n setTimeout(() => {\n const firstOption = document.activeElement?.querySelector(\n \".saltMenuItem\",\n ) as HTMLElement;\n firstOption?.focus();\n }, 40);\n } else {\n suppressShowMenuRef.current = false;\n }\n },\n [onMenuOpen],\n );\n\n const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);\n\n const handleMenuOpenChange = useCallback(\n (isOpen: boolean) => {\n if (!isOpen) {\n setMenuOpen(false);\n onMenuClose?.();\n }\n },\n [onMenuClose, setMenuOpen],\n );\n\n const showMenu = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n if (suppressShowMenuRef.current) {\n suppressShowMenuRef.current = false;\n } else {\n suppressShowMenuRef.current = true;\n const anchorEl = anchorElement?.current ?? rootRef.current;\n if (anchorEl) {\n const {\n left: x,\n top: y,\n // width,\n } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);\n setMenuOpen(true);\n\n showContextMenu(e, menuLocation, menuOptions, {\n // className: menuClassName,\n // id: `${id}-menu`,\n onOpenChange: handleMenuOpenChange,\n x,\n y,\n // style: { width: width ? width - 2 : undefined },\n });\n }\n }\n },\n [\n anchorElement,\n popupPlacement,\n setMenuOpen,\n showContextMenu,\n menuLocation,\n menuOptions,\n handleMenuOpenChange,\n ],\n );\n\n const ariaAttributes: AriaAttributes = {\n \"aria-controls\": menuOpen ? `${id}-menu` : undefined,\n \"aria-label\": ariaLabel,\n \"aria-expanded\": menuOpen,\n \"aria-haspopup\": \"menu\",\n };\n\n const buttonProps = {\n id,\n onClick: showMenu,\n tabIndex,\n };\n\n return { ariaAttributes, buttonProps, menuOpen, rootRef };\n};\n"],"names":["useState","useRef","useCallback","useContextMenu","getPositionRelativeToAnchor"],"mappings":";;;;;;AA8BO,MAAM,eAAe,CAAC;AAAA,EAC3B,aAAA;AAAA,EACA,cAAc,SAAY,GAAA,YAAA;AAAA,EAC1B,EAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,CAAC,QAAA,EAAU,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC/C,EAAM,MAAA,mBAAA,GAAsBC,aAAO,KAAK,CAAA;AACxC,EAAM,MAAA,OAAA,GAAUA,aAA0B,IAAI,CAAA;AAE9C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,MAAoB,KAAA;AACnB,MAAA,YAAA,CAAa,MAAM,CAAA;AACnB,MAAA,IAAI,MAAQ,EAAA;AACV,QAAa,UAAA,IAAA;AACb,QAAA,UAAA,CAAW,MAAM;AACf,UAAM,MAAA,WAAA,GAAc,SAAS,aAAe,EAAA,aAAA;AAAA,YAC1C;AAAA,WACF;AACA,UAAA,WAAA,EAAa,KAAM,EAAA;AAAA,WAClB,EAAE,CAAA;AAAA,OACA,MAAA;AACL,QAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAAA;AAChC,KACF;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAM,MAAA,eAAA,GAAkBC,6BAAe,CAAA,WAAA,EAAa,iBAAiB,CAAA;AAErE,EAAA,MAAM,oBAAuB,GAAAD,iBAAA;AAAA,IAC3B,CAAC,MAAoB,KAAA;AACnB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAc,WAAA,IAAA;AAAA;AAChB,KACF;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,GAC3B;AAEA,EAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,IACf,CAAC,CAA+B,KAAA;AAC9B,MAAA,IAAI,oBAAoB,OAAS,EAAA;AAC/B,QAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAAA,OACzB,MAAA;AACL,QAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAC9B,QAAM,MAAA,QAAA,GAAW,aAAe,EAAA,OAAA,IAAW,OAAQ,CAAA,OAAA;AACnD,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA;AAAA,YACJ,IAAM,EAAA,CAAA;AAAA,YACN,GAAK,EAAA;AAAA;AAAA,WAEH,GAAAE,uDAAA,CAA4B,QAAU,EAAA,cAAA,EAAgB,GAAG,CAAC,CAAA;AAC9D,UAAA,WAAA,CAAY,IAAI,CAAA;AAEhB,UAAgB,eAAA,CAAA,CAAA,EAAG,cAAc,WAAa,EAAA;AAAA;AAAA;AAAA,YAG5C,YAAc,EAAA,oBAAA;AAAA,YACd,CAAA;AAAA,YACA;AAAA;AAAA,WAED,CAAA;AAAA;AACH;AACF,KACF;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,cAAiC,GAAA;AAAA,IACrC,eAAiB,EAAA,QAAA,GAAW,CAAG,EAAA,EAAE,CAAU,KAAA,CAAA,GAAA,KAAA,CAAA;AAAA,IAC3C,YAAc,EAAA,SAAA;AAAA,IACd,eAAiB,EAAA,QAAA;AAAA,IACjB,eAAiB,EAAA;AAAA,GACnB;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,OAAS,EAAA,QAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,OAAO,EAAE,cAAA,EAAgB,WAAa,EAAA,QAAA,EAAU,OAAQ,EAAA;AAC1D;;;;"}
|
package/cjs/portal/Portal.css.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var portalCss = "/*\nThere is work to do to sort out styling across Portal/Popup/Draggable\n*/\n.vuuPortal {\n position: absolute;\n z-index: 100;\n}\n\n.vuuPortal:not(.vuuPopup) {\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 border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));\n border-style: solid;\n border-width: 1px;\n padding: 4px 0;\n}\n\n.vuuPortal:has(.vuuDropdown-popup-component.vuuList-empty){\n display: none;\n}\n\n#vuu-portal-root {\n z-index: 1000;\n}";
|
|
4
|
-
|
|
5
|
-
module.exports = portalCss;
|
|
6
|
-
//# sourceMappingURL=Portal.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/cjs/portal/Portal.js
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var reactDom = require('react-dom');
|
|
6
|
-
var styles = require('@salt-ds/styles');
|
|
7
|
-
var window = require('@salt-ds/window');
|
|
8
|
-
var Portal$1 = require('./Portal.css.js');
|
|
9
|
-
|
|
10
|
-
function getContainer(container) {
|
|
11
|
-
return typeof container === "function" ? container() : container;
|
|
12
|
-
}
|
|
13
|
-
const DEFAULT_ID = ["vuu-dialog-portal-root", "vuu-portal-root"];
|
|
14
|
-
const getFirstAvailableElementById = (id) => {
|
|
15
|
-
if (Array.isArray(id)) {
|
|
16
|
-
for (const i of id) {
|
|
17
|
-
const element = document.getElementById(i);
|
|
18
|
-
if (element) {
|
|
19
|
-
return element;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
} else {
|
|
23
|
-
return document.getElementById(id);
|
|
24
|
-
}
|
|
25
|
-
return null;
|
|
26
|
-
};
|
|
27
|
-
const Portal = ({
|
|
28
|
-
children,
|
|
29
|
-
container: containerProp = document.body,
|
|
30
|
-
id = DEFAULT_ID,
|
|
31
|
-
onRender,
|
|
32
|
-
open = true,
|
|
33
|
-
themeAttributes
|
|
34
|
-
}) => {
|
|
35
|
-
const targetWindow = window.useWindow();
|
|
36
|
-
styles.useComponentCssInjection({
|
|
37
|
-
testId: "vuu-portal",
|
|
38
|
-
css: Portal$1,
|
|
39
|
-
window: targetWindow
|
|
40
|
-
});
|
|
41
|
-
const [mounted, setMounted] = react.useState(false);
|
|
42
|
-
const portalRef = react.useRef(null);
|
|
43
|
-
const container = getContainer(containerProp) ?? document.body;
|
|
44
|
-
const [themeClass, densityClass, dataMode] = vuuUtils.useThemeAttributes(themeAttributes);
|
|
45
|
-
react.useLayoutEffect(() => {
|
|
46
|
-
const root = getFirstAvailableElementById(id);
|
|
47
|
-
if (root) {
|
|
48
|
-
portalRef.current = root;
|
|
49
|
-
} else {
|
|
50
|
-
portalRef.current = document.createElement("div");
|
|
51
|
-
portalRef.current.id = typeof id === "string" ? id : id.length > 0 ? id.at(-1) : "vuu-portal-root";
|
|
52
|
-
}
|
|
53
|
-
const el = portalRef.current;
|
|
54
|
-
if (!container.contains(el)) {
|
|
55
|
-
container.appendChild(el);
|
|
56
|
-
}
|
|
57
|
-
el.classList.add(themeClass, densityClass);
|
|
58
|
-
el.dataset.mode = dataMode;
|
|
59
|
-
setMounted(true);
|
|
60
|
-
}, [id, container, themeClass, densityClass, dataMode]);
|
|
61
|
-
react.useLayoutEffect(() => {
|
|
62
|
-
requestAnimationFrame(() => {
|
|
63
|
-
onRender?.();
|
|
64
|
-
});
|
|
65
|
-
}, [onRender]);
|
|
66
|
-
if (open && mounted && portalRef.current && children) {
|
|
67
|
-
return reactDom.createPortal(children, portalRef.current);
|
|
68
|
-
}
|
|
69
|
-
return null;
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
exports.Portal = Portal;
|
|
73
|
-
//# sourceMappingURL=Portal.js.map
|
package/cjs/portal/Portal.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.js","sources":["../../../../packages/vuu-popups/src/portal/Portal.tsx"],"sourcesContent":["import { ThemeAttributes, useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport portalCss from \"./Portal.css\";\n\nexport interface PortalProps {\n /**\n * The children to render into the `container`.\n */\n children?: ReactNode;\n /**\n * An HTML element, component instance, or function that returns either.\n * The `container` will have the portal children appended to it.\n *\n * By default, it uses the body of the top-level document object,\n * so it's simply `document.body` most of the time.\n */\n container?: Element | (() => Element | null) | null;\n /**\n * Id of element into which portal will be rendered. If this node does not exist on the document,\n * it will be created for you. If more than one value is provided, the first element found will\n * be used.\n */\n id?: string | string[];\n /**\n * Callback invoked immediately after render (in layoutEffect). Can be\n * used to check position vis-a-vis viewport and adjust if out of bounds\n */\n onRender?: () => void;\n /**\n * Allow conditional rendering of this Portal, if false, will render nothing.\n * Defaults to true\n */\n open?: boolean;\n /**\n * ThemeAttributes can be passed in for cases where ContextMenu is\n * rendered via popup-service showPopup, outside the Context hierarchy.\n */\n themeAttributes?: ThemeAttributes;\n}\n\nfunction getContainer(container: PortalProps[\"container\"]) {\n return typeof container === \"function\" ? container() : container;\n}\n\nconst DEFAULT_ID = [\"vuu-dialog-portal-root\", \"vuu-portal-root\"];\n\nconst getFirstAvailableElementById = (id: string | string[]) => {\n if (Array.isArray(id)) {\n for (const i of id) {\n const element = document.getElementById(i);\n if (element) {\n return element;\n }\n }\n } else {\n return document.getElementById(id);\n }\n return null;\n};\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal = ({\n children,\n container: containerProp = document.body,\n id = DEFAULT_ID,\n onRender,\n open = true,\n themeAttributes,\n}: PortalProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-portal\",\n css: portalCss,\n window: targetWindow,\n });\n\n const [mounted, setMounted] = useState(false);\n const portalRef = useRef<HTMLElement | null>(null);\n const container = getContainer(containerProp) ?? document.body;\n const [themeClass, densityClass, dataMode] =\n useThemeAttributes(themeAttributes);\n\n useLayoutEffect(() => {\n const root = getFirstAvailableElementById(id);\n if (root) {\n portalRef.current = root;\n } else {\n portalRef.current = document.createElement(\"div\");\n portalRef.current.id =\n typeof id === \"string\"\n ? id\n : id.length > 0\n ? (id.at(-1) as string)\n : \"vuu-portal-root\";\n }\n const el = portalRef.current;\n if (!container.contains(el)) {\n container.appendChild(el);\n }\n el.classList.add(themeClass, densityClass);\n el.dataset.mode = dataMode;\n setMounted(true);\n }, [id, container, themeClass, densityClass, dataMode]);\n\n useLayoutEffect(() => {\n requestAnimationFrame(() => {\n onRender?.();\n });\n }, [onRender]);\n\n if (open && mounted && portalRef.current && children) {\n return createPortal(children, portalRef.current);\n }\n\n return null;\n};\n"],"names":["useWindow","useComponentCssInjection","portalCss","useState","useRef","useThemeAttributes","useLayoutEffect","createPortal"],"mappings":";;;;;;;;;AA4CA,SAAS,aAAa,SAAqC,EAAA;AACzD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAa,GAAA,SAAA,EAAc,GAAA,SAAA;AACzD;AAEA,MAAM,UAAA,GAAa,CAAC,wBAAA,EAA0B,iBAAiB,CAAA;AAE/D,MAAM,4BAAA,GAA+B,CAAC,EAA0B,KAAA;AAC9D,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,EAAE,CAAG,EAAA;AACrB,IAAA,KAAA,MAAW,KAAK,EAAI,EAAA;AAClB,MAAM,MAAA,OAAA,GAAU,QAAS,CAAA,cAAA,CAAe,CAAC,CAAA;AACzC,MAAA,IAAI,OAAS,EAAA;AACX,QAAO,OAAA,OAAA;AAAA;AACT;AACF,GACK,MAAA;AACL,IAAO,OAAA,QAAA,CAAS,eAAe,EAAE,CAAA;AAAA;AAEnC,EAAO,OAAA,IAAA;AACT,CAAA;AAMO,MAAM,SAAS,CAAC;AAAA,EACrB,QAAA;AAAA,EACA,SAAA,EAAW,gBAAgB,QAAS,CAAA,IAAA;AAAA,EACpC,EAAK,GAAA,UAAA;AAAA,EACL,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP;AACF,CAAmB,KAAA;AACjB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAYC,aAA2B,IAAI,CAAA;AACjD,EAAA,MAAM,SAAY,GAAA,YAAA,CAAa,aAAa,CAAA,IAAK,QAAS,CAAA,IAAA;AAC1D,EAAA,MAAM,CAAC,UAAY,EAAA,YAAA,EAAc,QAAQ,CAAA,GACvCC,4BAAmB,eAAe,CAAA;AAEpC,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAM,MAAA,IAAA,GAAO,6BAA6B,EAAE,CAAA;AAC5C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA;AAAA,KACf,MAAA;AACL,MAAU,SAAA,CAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA;AAChD,MAAA,SAAA,CAAU,OAAQ,CAAA,EAAA,GAChB,OAAO,EAAA,KAAO,QACV,GAAA,EAAA,GACA,EAAG,CAAA,MAAA,GAAS,CACT,GAAA,EAAA,CAAG,EAAG,CAAA,CAAA,CAAE,CACT,GAAA,iBAAA;AAAA;AAEV,IAAA,MAAM,KAAK,SAAU,CAAA,OAAA;AACrB,IAAA,IAAI,CAAC,SAAA,CAAU,QAAS,CAAA,EAAE,CAAG,EAAA;AAC3B,MAAA,SAAA,CAAU,YAAY,EAAE,CAAA;AAAA;AAE1B,IAAG,EAAA,CAAA,SAAA,CAAU,GAAI,CAAA,UAAA,EAAY,YAAY,CAAA;AACzC,IAAA,EAAA,CAAG,QAAQ,IAAO,GAAA,QAAA;AAClB,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,KACd,CAAC,EAAA,EAAI,WAAW,UAAY,EAAA,YAAA,EAAc,QAAQ,CAAC,CAAA;AAEtD,EAAAA,qBAAA,CAAgB,MAAM;AACpB,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAW,QAAA,IAAA;AAAA,KACZ,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,IAAQ,IAAA,OAAA,IAAW,SAAU,CAAA,OAAA,IAAW,QAAU,EAAA;AACpD,IAAO,OAAAC,qBAAA,CAAa,QAAU,EAAA,SAAA,CAAU,OAAO,CAAA;AAAA;AAGjD,EAAO,OAAA,IAAA;AACT;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tooltipCss = ".vuuTooltip {\n --tooltip-align: flex-start;\n --tooltip-background: var(--salt-actionable-bold-background-hover);\n --tooltip-border: var(--salt-actionable-bold-background-hover);\n --tooltip-color: var(--salt-actionable-bold-foreground-hover);\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 transition: opacity 0.15s ease-in;\n z-index: 100;\n\n &.vuuHidden {\n opacity: 0;\n }\n}\n\n.vuuTooltip-content {\n background-color: var(--tooltip-background);\n border-color: var(--tooltip-border);\n border-width: 1px;\n border-style: solid;\n border-radius: var(--vuuTooltip-borderRadius, 6px);\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n color: var(--tooltip-color);\n line-height: 24px;\n padding: 2px 8px;\n white-space: nowrap;\n}\n\n.vuuTooltip::before {\n background-color: var(--tooltip-border);\n content: \" \";\n display: block;\n position: absolute;\n transform: rotate(45deg);\n width: 12px;\n height: 12px;\n z-index: -1;\n}\n\n.vuuTooltip[data-align=\"above\"]:before {\n bottom: -6px;\n left: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align=\"below\"]:before {\n top: -6px;\n left: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align=\"right\"]:before {\n left: -6px;\n top: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align=\"left\"]:before {\n right: -6px;\n top: calc(50% - 6px);\n}\n\n.vuuTooltip-error {\n --tooltip-background: var(--vuu-color-red-50);\n --tooltip-color: white;\n color: white;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = tooltipCss;
|
|
6
|
-
//# sourceMappingURL=Tooltip.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/cjs/tooltip/Tooltip.js
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var Portal = require('../portal/Portal.js');
|
|
5
|
-
var useTooltipAnchoredPosition = require('./useTooltipAnchoredPosition.js');
|
|
6
|
-
var cx = require('clsx');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var Tooltip$1 = require('./Tooltip.css.js');
|
|
10
|
-
|
|
11
|
-
const classBase = "vuuTooltip";
|
|
12
|
-
const Tooltip = ({
|
|
13
|
-
anchorElement,
|
|
14
|
-
children,
|
|
15
|
-
className,
|
|
16
|
-
id,
|
|
17
|
-
onMouseEnter,
|
|
18
|
-
onMouseLeave,
|
|
19
|
-
placement: placementProp,
|
|
20
|
-
status,
|
|
21
|
-
style: styleProp
|
|
22
|
-
}) => {
|
|
23
|
-
const targetWindow = window.useWindow();
|
|
24
|
-
styles.useComponentCssInjection({
|
|
25
|
-
testId: "vuu-tooltip",
|
|
26
|
-
css: Tooltip$1,
|
|
27
|
-
window: targetWindow
|
|
28
|
-
});
|
|
29
|
-
const ref = useTooltipAnchoredPosition.useTooltipAnchoredPosition({
|
|
30
|
-
anchorElement,
|
|
31
|
-
placement: placementProp
|
|
32
|
-
});
|
|
33
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
34
|
-
"div",
|
|
35
|
-
{
|
|
36
|
-
className: cx(classBase, className, "vuuHidden", {
|
|
37
|
-
[`${classBase}-error`]: status === "error"
|
|
38
|
-
}),
|
|
39
|
-
id,
|
|
40
|
-
ref,
|
|
41
|
-
style: { ...styleProp, left: 0, top: 0 },
|
|
42
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
43
|
-
"span",
|
|
44
|
-
{
|
|
45
|
-
className: `${classBase}-content`,
|
|
46
|
-
onMouseEnter,
|
|
47
|
-
onMouseLeave,
|
|
48
|
-
children
|
|
49
|
-
}
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
) });
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
exports.Tooltip = Tooltip;
|
|
56
|
-
//# sourceMappingURL=Tooltip.js.map
|