@vuu-ui/vuu-ui-controls 0.13.88 → 0.13.89
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/cjs/hover-overlay/HoverOverlay.js +95 -0
- package/cjs/hover-overlay/HoverOverlay.js.map +1 -0
- package/cjs/index.js +2 -0
- package/cjs/index.js.map +1 -1
- package/esm/hover-overlay/HoverOverlay.js +93 -0
- package/esm/hover-overlay/HoverOverlay.js.map +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/package.json +10 -10
- package/types/hover-overlay/HoverOverlay.d.ts +8 -0
- package/types/index.d.ts +2 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
const HoverOverlay = ({
|
|
8
|
+
children,
|
|
9
|
+
open: openProp = false,
|
|
10
|
+
onOpenChange,
|
|
11
|
+
trigger
|
|
12
|
+
}) => {
|
|
13
|
+
const [open, _setOpen] = React.useState(openProp);
|
|
14
|
+
const isOpen = React.useRef(false);
|
|
15
|
+
const showHandle = React.useRef(void 0);
|
|
16
|
+
const hideHandle = React.useRef(void 0);
|
|
17
|
+
const setOpen = React.useCallback(
|
|
18
|
+
(open2) => {
|
|
19
|
+
if (open2 !== isOpen.current) {
|
|
20
|
+
isOpen.current = open2;
|
|
21
|
+
_setOpen(open2);
|
|
22
|
+
onOpenChange?.(open2);
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
[onOpenChange]
|
|
26
|
+
);
|
|
27
|
+
React.useEffect(() => {
|
|
28
|
+
if (openProp !== isOpen.current) {
|
|
29
|
+
setOpen(openProp);
|
|
30
|
+
}
|
|
31
|
+
}, [openProp, setOpen]);
|
|
32
|
+
const handleOverlayMouseEnter = React.useCallback(() => {
|
|
33
|
+
if (hideHandle.current) {
|
|
34
|
+
clearTimeout(hideHandle.current);
|
|
35
|
+
hideHandle.current = void 0;
|
|
36
|
+
}
|
|
37
|
+
}, []);
|
|
38
|
+
const handleOverlayMouseLeave = React.useCallback(() => {
|
|
39
|
+
hideHandle.current = setTimeout(() => {
|
|
40
|
+
setOpen(false);
|
|
41
|
+
hideHandle.current = void 0;
|
|
42
|
+
}, 300);
|
|
43
|
+
}, [setOpen]);
|
|
44
|
+
const handleMouseEnter = React.useCallback(() => {
|
|
45
|
+
showHandle.current = setTimeout(() => {
|
|
46
|
+
setOpen(true);
|
|
47
|
+
showHandle.current = void 0;
|
|
48
|
+
}, 400);
|
|
49
|
+
if (hideHandle.current) {
|
|
50
|
+
clearTimeout(hideHandle.current);
|
|
51
|
+
hideHandle.current = void 0;
|
|
52
|
+
}
|
|
53
|
+
}, [setOpen]);
|
|
54
|
+
const handleMouseLeave = React.useCallback(() => {
|
|
55
|
+
if (showHandle.current) {
|
|
56
|
+
clearTimeout(showHandle.current);
|
|
57
|
+
showHandle.current = void 0;
|
|
58
|
+
} else if (isOpen.current) {
|
|
59
|
+
hideHandle.current = setTimeout(() => {
|
|
60
|
+
setOpen(false);
|
|
61
|
+
hideHandle.current = void 0;
|
|
62
|
+
}, 300);
|
|
63
|
+
}
|
|
64
|
+
}, [setOpen]);
|
|
65
|
+
const handleClick = React.useCallback(() => {
|
|
66
|
+
if (showHandle.current) {
|
|
67
|
+
clearTimeout(showHandle.current);
|
|
68
|
+
showHandle.current = void 0;
|
|
69
|
+
} else if (isOpen.current) {
|
|
70
|
+
setOpen(false);
|
|
71
|
+
}
|
|
72
|
+
}, [setOpen]);
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(core.Overlay, { placement: "right", onOpenChange, open, children: [
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.OverlayTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
onClick: handleClick,
|
|
78
|
+
onMouseEnter: handleMouseEnter,
|
|
79
|
+
onMouseLeave: handleMouseLeave,
|
|
80
|
+
children: trigger
|
|
81
|
+
}
|
|
82
|
+
) }),
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
84
|
+
core.OverlayPanelContent,
|
|
85
|
+
{
|
|
86
|
+
onMouseEnter: handleOverlayMouseEnter,
|
|
87
|
+
onMouseLeave: handleOverlayMouseLeave,
|
|
88
|
+
children
|
|
89
|
+
}
|
|
90
|
+
) })
|
|
91
|
+
] });
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.HoverOverlay = HoverOverlay;
|
|
95
|
+
//# sourceMappingURL=HoverOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HoverOverlay.js","sources":["../../../../packages/vuu-ui-controls/src/hover-overlay/HoverOverlay.tsx"],"sourcesContent":["import {\n Overlay,\n OverlayPanel,\n OverlayPanelContent,\n OverlayProps,\n OverlayTrigger,\n} from \"@salt-ds/core\";\nimport { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\n\nexport interface HoverOverlayProps extends Pick<OverlayProps, \"onOpenChange\"> {\n children: ReactNode;\n open?: boolean;\n trigger: ReactNode;\n}\n\nexport const HoverOverlay = ({\n children,\n open: openProp = false,\n onOpenChange,\n trigger,\n}: HoverOverlayProps) => {\n const [open, _setOpen] = useState(openProp);\n const isOpen = useRef(false);\n const showHandle = useRef<ReturnType<typeof setTimeout>>(undefined);\n const hideHandle = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const setOpen = useCallback(\n (open: boolean) => {\n if (open !== isOpen.current) {\n isOpen.current = open;\n _setOpen(open);\n onOpenChange?.(open);\n }\n },\n [onOpenChange],\n );\n\n useEffect(() => {\n if (openProp !== isOpen.current) {\n setOpen(openProp);\n }\n }, [openProp, setOpen]);\n\n const handleOverlayMouseEnter = useCallback(() => {\n if (hideHandle.current) {\n clearTimeout(hideHandle.current);\n hideHandle.current = undefined;\n }\n }, []);\n\n const handleOverlayMouseLeave = useCallback(() => {\n hideHandle.current = setTimeout(() => {\n setOpen(false);\n hideHandle.current = undefined;\n }, 300);\n }, [setOpen]);\n\n const handleMouseEnter = useCallback(() => {\n showHandle.current = setTimeout(() => {\n setOpen(true);\n showHandle.current = undefined;\n }, 400);\n if (hideHandle.current) {\n clearTimeout(hideHandle.current);\n hideHandle.current = undefined;\n }\n }, [setOpen]);\n\n const handleMouseLeave = useCallback(() => {\n if (showHandle.current) {\n clearTimeout(showHandle.current);\n showHandle.current = undefined;\n } else if (isOpen.current) {\n hideHandle.current = setTimeout(() => {\n setOpen(false);\n hideHandle.current = undefined;\n }, 300);\n }\n }, [setOpen]);\n\n const handleClick = useCallback(() => {\n if (showHandle.current) {\n clearTimeout(showHandle.current);\n showHandle.current = undefined;\n } else if (isOpen.current) {\n setOpen(false);\n }\n }, [setOpen]);\n\n return (\n <Overlay placement=\"right\" onOpenChange={onOpenChange} open={open}>\n <OverlayTrigger>\n <div\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {trigger}\n </div>\n </OverlayTrigger>\n <OverlayPanel>\n <OverlayPanelContent\n onMouseEnter={handleOverlayMouseEnter}\n onMouseLeave={handleOverlayMouseLeave}\n >\n {children}\n </OverlayPanelContent>\n </OverlayPanel>\n </Overlay>\n );\n};\n"],"names":["useState","useRef","useCallback","open","useEffect","jsxs","Overlay","jsx","OverlayTrigger","OverlayPanel","OverlayPanelContent"],"mappings":";;;;;;AAeO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,MAAM,QAAW,GAAA,KAAA;AAAA,EACjB,YAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,CAAC,IAAA,EAAM,QAAQ,CAAA,GAAIA,eAAS,QAAQ,CAAA;AAC1C,EAAM,MAAA,MAAA,GAASC,aAAO,KAAK,CAAA;AAC3B,EAAM,MAAA,UAAA,GAAaA,aAAsC,KAAS,CAAA,CAAA;AAClE,EAAM,MAAA,UAAA,GAAaA,aAAsC,KAAS,CAAA,CAAA;AAElE,EAAA,MAAM,OAAU,GAAAC,iBAAA;AAAA,IACd,CAACC,KAAkB,KAAA;AACjB,MAAIA,IAAAA,KAAAA,KAAS,OAAO,OAAS,EAAA;AAC3B,QAAA,MAAA,CAAO,OAAUA,GAAAA,KAAAA;AACjB,QAAA,QAAA,CAASA,KAAI,CAAA;AACb,QAAA,YAAA,GAAeA,KAAI,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,QAAA,KAAa,OAAO,OAAS,EAAA;AAC/B,MAAA,OAAA,CAAQ,QAAQ,CAAA;AAAA;AAClB,GACC,EAAA,CAAC,QAAU,EAAA,OAAO,CAAC,CAAA;AAEtB,EAAM,MAAA,uBAAA,GAA0BF,kBAAY,MAAM;AAChD,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA;AACvB,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,uBAAA,GAA0BA,kBAAY,MAAM;AAChD,IAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,MAAA,OAAA,CAAQ,KAAK,CAAA;AACb,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,OACpB,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAM,MAAA,gBAAA,GAAmBA,kBAAY,MAAM;AACzC,IAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,MAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,OACpB,GAAG,CAAA;AACN,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA;AACvB,GACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAM,MAAA,gBAAA,GAAmBA,kBAAY,MAAM;AACzC,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,MAAA,IAAW,OAAO,OAAS,EAAA;AACzB,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,OAAA,CAAQ,KAAK,CAAA;AACb,QAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,SACpB,GAAG,CAAA;AAAA;AACR,GACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAM,MAAA,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,MAAA,IAAW,OAAO,OAAS,EAAA;AACzB,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,GACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,uBACGG,eAAA,CAAAC,YAAA,EAAA,EAAQ,SAAU,EAAA,OAAA,EAAQ,cAA4B,IACrD,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,mBACC,EAAA,EAAA,QAAA,kBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,YAAc,EAAA,gBAAA;AAAA,QACd,YAAc,EAAA,gBAAA;AAAA,QAEb,QAAA,EAAA;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA,mCACCE,iBACC,EAAA,EAAA,QAAA,kBAAAF,cAAA;AAAA,MAACG,wBAAA;AAAA,MAAA;AAAA,QACC,YAAc,EAAA,uBAAA;AAAA,QACd,YAAc,EAAA,uBAAA;AAAA,QAEb;AAAA;AAAA,KAEL,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
|
package/cjs/index.js
CHANGED
|
@@ -22,6 +22,7 @@ var useGlobalDragDrop = require('./drag-drop/useGlobalDragDrop.js');
|
|
|
22
22
|
var useEditableText = require('./editable/useEditableText.js');
|
|
23
23
|
var EditableLabel = require('./editable-label/EditableLabel.js');
|
|
24
24
|
var ExpandoInput = require('./expando-input/ExpandoInput.js');
|
|
25
|
+
var HoverOverlay = require('./hover-overlay/HoverOverlay.js');
|
|
25
26
|
var Icon = require('./icon-button/Icon.js');
|
|
26
27
|
var IconButton = require('./icon-button/IconButton.js');
|
|
27
28
|
var ToggleIconButton = require('./icon-button/ToggleIconButton.js');
|
|
@@ -114,6 +115,7 @@ exports.useEditableText = useEditableText.useEditableText;
|
|
|
114
115
|
exports.EditableLabel = EditableLabel.EditableLabel;
|
|
115
116
|
exports.NullEditAPI = EditableLabel.NullEditAPI;
|
|
116
117
|
exports.ExpandoInput = ExpandoInput.ExpandoInput;
|
|
118
|
+
exports.HoverOverlay = HoverOverlay.HoverOverlay;
|
|
117
119
|
exports.Icon = Icon.Icon;
|
|
118
120
|
exports.IconButton = IconButton.IconButton;
|
|
119
121
|
exports.ToggleIconButton = ToggleIconButton.ToggleIconButton;
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Overlay, OverlayTrigger, OverlayPanel, OverlayPanelContent } from '@salt-ds/core';
|
|
3
|
+
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
const HoverOverlay = ({
|
|
6
|
+
children,
|
|
7
|
+
open: openProp = false,
|
|
8
|
+
onOpenChange,
|
|
9
|
+
trigger
|
|
10
|
+
}) => {
|
|
11
|
+
const [open, _setOpen] = useState(openProp);
|
|
12
|
+
const isOpen = useRef(false);
|
|
13
|
+
const showHandle = useRef(void 0);
|
|
14
|
+
const hideHandle = useRef(void 0);
|
|
15
|
+
const setOpen = useCallback(
|
|
16
|
+
(open2) => {
|
|
17
|
+
if (open2 !== isOpen.current) {
|
|
18
|
+
isOpen.current = open2;
|
|
19
|
+
_setOpen(open2);
|
|
20
|
+
onOpenChange?.(open2);
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
[onOpenChange]
|
|
24
|
+
);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (openProp !== isOpen.current) {
|
|
27
|
+
setOpen(openProp);
|
|
28
|
+
}
|
|
29
|
+
}, [openProp, setOpen]);
|
|
30
|
+
const handleOverlayMouseEnter = useCallback(() => {
|
|
31
|
+
if (hideHandle.current) {
|
|
32
|
+
clearTimeout(hideHandle.current);
|
|
33
|
+
hideHandle.current = void 0;
|
|
34
|
+
}
|
|
35
|
+
}, []);
|
|
36
|
+
const handleOverlayMouseLeave = useCallback(() => {
|
|
37
|
+
hideHandle.current = setTimeout(() => {
|
|
38
|
+
setOpen(false);
|
|
39
|
+
hideHandle.current = void 0;
|
|
40
|
+
}, 300);
|
|
41
|
+
}, [setOpen]);
|
|
42
|
+
const handleMouseEnter = useCallback(() => {
|
|
43
|
+
showHandle.current = setTimeout(() => {
|
|
44
|
+
setOpen(true);
|
|
45
|
+
showHandle.current = void 0;
|
|
46
|
+
}, 400);
|
|
47
|
+
if (hideHandle.current) {
|
|
48
|
+
clearTimeout(hideHandle.current);
|
|
49
|
+
hideHandle.current = void 0;
|
|
50
|
+
}
|
|
51
|
+
}, [setOpen]);
|
|
52
|
+
const handleMouseLeave = useCallback(() => {
|
|
53
|
+
if (showHandle.current) {
|
|
54
|
+
clearTimeout(showHandle.current);
|
|
55
|
+
showHandle.current = void 0;
|
|
56
|
+
} else if (isOpen.current) {
|
|
57
|
+
hideHandle.current = setTimeout(() => {
|
|
58
|
+
setOpen(false);
|
|
59
|
+
hideHandle.current = void 0;
|
|
60
|
+
}, 300);
|
|
61
|
+
}
|
|
62
|
+
}, [setOpen]);
|
|
63
|
+
const handleClick = useCallback(() => {
|
|
64
|
+
if (showHandle.current) {
|
|
65
|
+
clearTimeout(showHandle.current);
|
|
66
|
+
showHandle.current = void 0;
|
|
67
|
+
} else if (isOpen.current) {
|
|
68
|
+
setOpen(false);
|
|
69
|
+
}
|
|
70
|
+
}, [setOpen]);
|
|
71
|
+
return /* @__PURE__ */ jsxs(Overlay, { placement: "right", onOpenChange, open, children: [
|
|
72
|
+
/* @__PURE__ */ jsx(OverlayTrigger, { children: /* @__PURE__ */ jsx(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
onClick: handleClick,
|
|
76
|
+
onMouseEnter: handleMouseEnter,
|
|
77
|
+
onMouseLeave: handleMouseLeave,
|
|
78
|
+
children: trigger
|
|
79
|
+
}
|
|
80
|
+
) }),
|
|
81
|
+
/* @__PURE__ */ jsx(OverlayPanel, { children: /* @__PURE__ */ jsx(
|
|
82
|
+
OverlayPanelContent,
|
|
83
|
+
{
|
|
84
|
+
onMouseEnter: handleOverlayMouseEnter,
|
|
85
|
+
onMouseLeave: handleOverlayMouseLeave,
|
|
86
|
+
children
|
|
87
|
+
}
|
|
88
|
+
) })
|
|
89
|
+
] });
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export { HoverOverlay };
|
|
93
|
+
//# sourceMappingURL=HoverOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HoverOverlay.js","sources":["../../../../packages/vuu-ui-controls/src/hover-overlay/HoverOverlay.tsx"],"sourcesContent":["import {\n Overlay,\n OverlayPanel,\n OverlayPanelContent,\n OverlayProps,\n OverlayTrigger,\n} from \"@salt-ds/core\";\nimport { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\n\nexport interface HoverOverlayProps extends Pick<OverlayProps, \"onOpenChange\"> {\n children: ReactNode;\n open?: boolean;\n trigger: ReactNode;\n}\n\nexport const HoverOverlay = ({\n children,\n open: openProp = false,\n onOpenChange,\n trigger,\n}: HoverOverlayProps) => {\n const [open, _setOpen] = useState(openProp);\n const isOpen = useRef(false);\n const showHandle = useRef<ReturnType<typeof setTimeout>>(undefined);\n const hideHandle = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const setOpen = useCallback(\n (open: boolean) => {\n if (open !== isOpen.current) {\n isOpen.current = open;\n _setOpen(open);\n onOpenChange?.(open);\n }\n },\n [onOpenChange],\n );\n\n useEffect(() => {\n if (openProp !== isOpen.current) {\n setOpen(openProp);\n }\n }, [openProp, setOpen]);\n\n const handleOverlayMouseEnter = useCallback(() => {\n if (hideHandle.current) {\n clearTimeout(hideHandle.current);\n hideHandle.current = undefined;\n }\n }, []);\n\n const handleOverlayMouseLeave = useCallback(() => {\n hideHandle.current = setTimeout(() => {\n setOpen(false);\n hideHandle.current = undefined;\n }, 300);\n }, [setOpen]);\n\n const handleMouseEnter = useCallback(() => {\n showHandle.current = setTimeout(() => {\n setOpen(true);\n showHandle.current = undefined;\n }, 400);\n if (hideHandle.current) {\n clearTimeout(hideHandle.current);\n hideHandle.current = undefined;\n }\n }, [setOpen]);\n\n const handleMouseLeave = useCallback(() => {\n if (showHandle.current) {\n clearTimeout(showHandle.current);\n showHandle.current = undefined;\n } else if (isOpen.current) {\n hideHandle.current = setTimeout(() => {\n setOpen(false);\n hideHandle.current = undefined;\n }, 300);\n }\n }, [setOpen]);\n\n const handleClick = useCallback(() => {\n if (showHandle.current) {\n clearTimeout(showHandle.current);\n showHandle.current = undefined;\n } else if (isOpen.current) {\n setOpen(false);\n }\n }, [setOpen]);\n\n return (\n <Overlay placement=\"right\" onOpenChange={onOpenChange} open={open}>\n <OverlayTrigger>\n <div\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {trigger}\n </div>\n </OverlayTrigger>\n <OverlayPanel>\n <OverlayPanelContent\n onMouseEnter={handleOverlayMouseEnter}\n onMouseLeave={handleOverlayMouseLeave}\n >\n {children}\n </OverlayPanelContent>\n </OverlayPanel>\n </Overlay>\n );\n};\n"],"names":["open"],"mappings":"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"}
|
package/esm/index.js
CHANGED
|
@@ -20,6 +20,7 @@ export { useGlobalDragDrop } from './drag-drop/useGlobalDragDrop.js';
|
|
|
20
20
|
export { useEditableText } from './editable/useEditableText.js';
|
|
21
21
|
export { EditableLabel, NullEditAPI } from './editable-label/EditableLabel.js';
|
|
22
22
|
export { ExpandoInput } from './expando-input/ExpandoInput.js';
|
|
23
|
+
export { HoverOverlay } from './hover-overlay/HoverOverlay.js';
|
|
23
24
|
export { Icon } from './icon-button/Icon.js';
|
|
24
25
|
export { IconButton } from './icon-button/IconButton.js';
|
|
25
26
|
export { ToggleIconButton } from './icon-button/ToggleIconButton.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.89",
|
|
3
3
|
"description": "VUU UI Controls",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.13.
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.13.
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.13.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.13.89",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.13.89",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.13.89"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@vuu-ui/vuu-context-menu": "0.13.
|
|
13
|
-
"@vuu-ui/vuu-data-react": "0.13.
|
|
14
|
-
"@vuu-ui/vuu-layout": "0.13.
|
|
15
|
-
"@vuu-ui/vuu-popups": "0.13.
|
|
16
|
-
"@vuu-ui/vuu-table": "0.13.
|
|
17
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
12
|
+
"@vuu-ui/vuu-context-menu": "0.13.89",
|
|
13
|
+
"@vuu-ui/vuu-data-react": "0.13.89",
|
|
14
|
+
"@vuu-ui/vuu-layout": "0.13.89",
|
|
15
|
+
"@vuu-ui/vuu-popups": "0.13.89",
|
|
16
|
+
"@vuu-ui/vuu-table": "0.13.89",
|
|
17
|
+
"@vuu-ui/vuu-utils": "0.13.89",
|
|
18
18
|
"@salt-ds/core": "1.48.0",
|
|
19
19
|
"@salt-ds/icons": "1.14.0",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { OverlayProps } from "@salt-ds/core";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
export interface HoverOverlayProps extends Pick<OverlayProps, "onOpenChange"> {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
open?: boolean;
|
|
6
|
+
trigger: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, trigger, }: HoverOverlayProps) => import("react/jsx-runtime").JSX.Element;
|
package/types/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from "./calendar";
|
|
2
2
|
export * from "./column-picker";
|
|
3
3
|
export * from "./common-hooks";
|
|
4
|
-
export {
|
|
4
|
+
export { ContextPanelProvider, useContextPanel, useHideContextPanel, type ShowContextPanel, } from "./context-panel-provider/ContextPanelProvider";
|
|
5
5
|
export * from "./cycle-state-button";
|
|
6
6
|
export * from "./date-input";
|
|
7
7
|
export * from "./date-picker";
|
|
@@ -9,6 +9,7 @@ export * from "./drag-drop";
|
|
|
9
9
|
export * from "./editable";
|
|
10
10
|
export * from "./editable-label";
|
|
11
11
|
export * from "./expando-input";
|
|
12
|
+
export { HoverOverlay } from "./hover-overlay/HoverOverlay";
|
|
12
13
|
export * from "./icon-button";
|
|
13
14
|
export * from "./instrument-picker";
|
|
14
15
|
export * from "./measured-container";
|