@vuu-ui/vuu-ui-controls 4.0.0-beta.3 → 4.0.0-beta.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.5",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
@@ -10,17 +10,17 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-beta.3",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.3",
-    "@vuu-ui/vuu-table-types": "4.0.0-beta.3"
+    "@vuu-ui/vuu-data-types": "4.0.0-beta.5",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.5",
+    "@vuu-ui/vuu-table-types": "4.0.0-beta.5"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-beta.3",
-    "@vuu-ui/vuu-data-react": "4.0.0-beta.3",
-    "@vuu-ui/vuu-layout": "4.0.0-beta.3",
-    "@vuu-ui/vuu-popups": "4.0.0-beta.3",
-    "@vuu-ui/vuu-table": "4.0.0-beta.3",
-    "@vuu-ui/vuu-utils": "4.0.0-beta.3",
+    "@vuu-ui/vuu-context-menu": "4.0.0-beta.5",
+    "@vuu-ui/vuu-data-react": "4.0.0-beta.5",
+    "@vuu-ui/vuu-layout": "4.0.0-beta.5",
+    "@vuu-ui/vuu-popups": "4.0.0-beta.5",
+    "@vuu-ui/vuu-table": "4.0.0-beta.5",
+    "@vuu-ui/vuu-utils": "4.0.0-beta.5",
     "@salt-ds/core": "1.72.0",
     "@salt-ds/icons": "1.18.3",
     "@salt-ds/styles": "0.4.1",

package/src/hover-overlay/HoverOverlay.css.js

@@ -0,0 +1,8 @@
+const css = `
+.vuuHoverOverlay-panel {
+  --saltOverlay-borderColor: var(--salt-container-primary-borderColor);
+}
+
+
+`;
+export default css;

package/src/hover-overlay/HoverOverlay.js

@@ -1,11 +1,38 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Overlay, OverlayPanel, OverlayPanelContent, OverlayTrigger } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { containsPoint } from "@vuu-ui/vuu-utils";
 import { useCallback, useEffect, useRef, useState } from "react";
-const HoverOverlay = ({ children, open: openProp = false, onOpenChange, placement = "right", trigger })=>{
+import HoverOverlay from "./HoverOverlay.css";
+const classBase = "vuuHoverOverlay";
+const OPEN_DELAY = 400;
+const CLOSE_DELAY = 300;
+const HoverOverlay_HoverOverlay = ({ children, open: openProp = false, onOpenChange, openOn = "hover", placement = "right", trigger })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-hover-overlay",
+        css: HoverOverlay,
+        window: targetWindow
+    });
     const [open, _setOpen] = useState(openProp);
     const isOpen = useRef(false);
     const showHandle = useRef(void 0);
     const hideHandle = useRef(void 0);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const clearShowTimer = useCallback(()=>{
+        if (showHandle.current) {
+            clearTimeout(showHandle.current);
+            showHandle.current = void 0;
+        }
+    }, []);
+    const clearHideTimer = useCallback(()=>{
+        if (hideHandle.current) {
+            clearTimeout(hideHandle.current);
+            hideHandle.current = void 0;
+        }
+    }, []);
     const setOpen = useCallback((open)=>{
         if (open !== isOpen.current) {
             isOpen.current = open;
@@ -15,78 +42,100 @@ const HoverOverlay = ({ children, open: openProp = false, onOpenChange, placemen
     }, [
         onOpenChange
     ]);
+    const startHideTimer = useCallback(()=>{
+        if (void 0 === hideHandle.current) hideHandle.current = setTimeout(()=>{
+            hideHandle.current = void 0;
+            setOpen(false);
+        }, CLOSE_DELAY);
+    }, [
+        setOpen
+    ]);
     useEffect(()=>{
         if (openProp !== isOpen.current) setOpen(openProp);
     }, [
         openProp,
         setOpen
     ]);
-    const handleOverlayMouseEnter = useCallback(()=>{
-        if (hideHandle.current) {
-            clearTimeout(hideHandle.current);
-            hideHandle.current = void 0;
+    useEffect(()=>()=>{
+            clearShowTimer();
+            clearHideTimer();
+        }, [
+        clearHideTimer,
+        clearShowTimer
+    ]);
+    useEffect(()=>{
+        if (open && "hover" === openOn) {
+            const doc = triggerRef.current?.ownerDocument ?? document;
+            const handlePointerMove = ({ clientX, clientY })=>{
+                if (containsPoint(triggerRef.current, clientX, clientY) || containsPoint(panelRef.current, clientX, clientY)) clearHideTimer();
+                else startHideTimer();
+            };
+            doc.addEventListener("pointermove", handlePointerMove);
+            doc.documentElement.addEventListener("mouseleave", startHideTimer);
+            return ()=>{
+                doc.removeEventListener("pointermove", handlePointerMove);
+                doc.documentElement.removeEventListener("mouseleave", startHideTimer);
+                clearHideTimer();
+            };
         }
-    }, []);
-    const handleOverlayMouseLeave = useCallback(()=>{
-        hideHandle.current = setTimeout(()=>{
-            setOpen(false);
-            hideHandle.current = void 0;
-        }, 300);
     }, [
-        setOpen
+        clearHideTimer,
+        open,
+        openOn,
+        startHideTimer
     ]);
     const handleMouseEnter = useCallback(()=>{
-        showHandle.current = setTimeout(()=>{
-            setOpen(true);
+        if (!isOpen.current && void 0 === showHandle.current) showHandle.current = setTimeout(()=>{
             showHandle.current = void 0;
-        }, 400);
-        if (hideHandle.current) {
-            clearTimeout(hideHandle.current);
-            hideHandle.current = void 0;
-        }
+            setOpen(true);
+        }, OPEN_DELAY);
     }, [
         setOpen
     ]);
     const handleMouseLeave = useCallback(()=>{
-        if (showHandle.current) {
-            clearTimeout(showHandle.current);
-            showHandle.current = void 0;
-        } else if (isOpen.current) hideHandle.current = setTimeout(()=>{
-            setOpen(false);
-            hideHandle.current = void 0;
-        }, 300);
+        clearShowTimer();
     }, [
-        setOpen
+        clearShowTimer
     ]);
     const handleClick = useCallback(()=>{
-        if (showHandle.current) {
-            clearTimeout(showHandle.current);
-            showHandle.current = void 0;
-        } else if (isOpen.current) setOpen(false);
+        clearShowTimer();
+    }, [
+        clearShowTimer
+    ]);
+    const handleOpenChange = useCallback((open)=>{
+        clearShowTimer();
+        clearHideTimer();
+        setOpen(open);
     }, [
+        clearHideTimer,
+        clearShowTimer,
         setOpen
     ]);
+    const triggerProps = "hover" === openOn ? {
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+    } : void 0;
     return /*#__PURE__*/ jsxs(Overlay, {
         placement: placement,
-        onOpenChange: onOpenChange,
+        onOpenChange: handleOpenChange,
         open: open,
         children: [
             /*#__PURE__*/ jsx(OverlayTrigger, {
                 children: /*#__PURE__*/ jsx("div", {
-                    onClick: handleClick,
-                    onMouseEnter: handleMouseEnter,
-                    onMouseLeave: handleMouseLeave,
+                    ...triggerProps,
+                    ref: triggerRef,
                     children: trigger
                 })
             }),
             /*#__PURE__*/ jsx(OverlayPanel, {
+                className: `${classBase}-panel`,
+                ref: panelRef,
                 children: /*#__PURE__*/ jsx(OverlayPanelContent, {
-                    onMouseEnter: handleOverlayMouseEnter,
-                    onMouseLeave: handleOverlayMouseLeave,
                     children: children
                 })
             })
         ]
     });
 };
-export { HoverOverlay };
+export { HoverOverlay_HoverOverlay as HoverOverlay };

package/types/hover-overlay/HoverOverlay.d.ts

@@ -3,6 +3,12 @@ import { ReactNode } from "react";
 export interface HoverOverlayProps extends Pick<OverlayProps, "placement" | "onOpenChange"> {
     children: ReactNode;
     open?: boolean;
+    /**
+     * hover (default) opens the overlay after a short delay when pointer
+     * enters trigger and closes it when pointer leaves both trigger and
+     * overlay. click leaves open/close entirely to Salt Overlay.
+     */
+    openOn?: "hover" | "click";
     trigger: ReactNode;
 }
-export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, placement, trigger, }: HoverOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, openOn, placement, trigger, }: HoverOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -9,7 +9,7 @@ export * from "./drag-drop";
 export * from "./editable";
 export * from "./editable-label";
 export * from "./expando-input";
-export { HoverOverlay } from "./hover-overlay/HoverOverlay";
+export { HoverOverlay, type HoverOverlayProps, } from "./hover-overlay/HoverOverlay";
 export * from "./icon-button";
 export * from "./instrument-picker";
 export { ItemPicker, type ItemPickerProps } from "./item-picker/ItemPicker";