@vuu-ui/vuu-popups 2.1.18 → 2.1.19-beta.2

package/package.json

@@ -1,17 +1,18 @@
 {
-  "version": "2.1.18",
+  "version": "2.1.19-beta.2",
   "description": "VUU popup components - Context Menu, Dialog etc",
   "author": "heswell",
   "license": "Apache-2.0",
+  "type": "module",
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "2.1.18",
-    "@vuu-ui/vuu-data-types": "2.1.18",
-    "@vuu-ui/vuu-layout": "2.1.18",
-    "@vuu-ui/vuu-utils": "2.1.18",
-    "@vuu-ui/vuu-ui-controls": "2.1.18"
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-layout": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -21,20 +22,16 @@
   "sideEffects": false,
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-popups",
-  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/index.js

@@ -0,0 +1,4 @@
+export * from "./popup/index.js";
+export * from "./popup-menu/index.js";
+export * from "./portal/index.js";
+export * from "./tooltip/index.js";

package/src/popup/Popup.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useAnchoredPosition } from "./useAnchoredPosition.js";
+import Popup from "./Popup.css";
+const PopupComponent = ({ children, className, anchorElement, minWidth, offsetLeft, offsetTop, placement, position: positionProp })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-popup",
+        css: Popup,
+        window: targetWindow
+    });
+    const { popupRef, position } = useAnchoredPosition({
+        anchorElement,
+        minWidth,
+        offsetLeft,
+        offsetTop,
+        placement,
+        position: positionProp
+    });
+    return void 0 === position ? null : /*#__PURE__*/ jsx("div", {
+        className: clsx("vuuPortal", className),
+        ref: popupRef,
+        style: position,
+        children: children
+    });
+};
+export { PopupComponent };

package/src/popup/getPositionRelativeToAnchor.js

@@ -0,0 +1,47 @@
+const getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions)=>{
+    const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+    switch(placement){
+        case "below":
+            return {
+                left: left + offsetLeft,
+                top: bottom + offsetTop
+            };
+        case "right":
+            return {
+                left: right + offsetLeft,
+                top: top + offsetTop
+            };
+        case "below-center":
+            return {
+                left: left + width / 2 + offsetLeft,
+                top: bottom + offsetTop
+            };
+        case "below-right":
+            return {
+                left: left,
+                minWidth,
+                top: bottom + offsetTop
+            };
+        case "below-full-width":
+            return {
+                left: left + offsetLeft,
+                minWidth,
+                top: bottom + offsetTop,
+                width
+            };
+        case "center":
+            if (dimensions) return {
+                left: width / 2 - dimensions.width / 2 + offsetLeft,
+                top: height / 2 - dimensions.height / 2 + offsetTop,
+                visibility: "visible"
+            };
+            return {
+                left: width / 2 + offsetLeft,
+                top: height / 2 + offsetTop,
+                visibility: "hidden"
+            };
+        default:
+            throw Error(`Popup getPositionRelativeToAnchor non-supported placement value ${placement}`);
+    }
+};
+export { getPositionRelativeToAnchor };

package/src/popup/index.js

@@ -0,0 +1,2 @@
+export * from "./Popup.js";
+export * from "./useAnchoredPosition.js";

package/src/popup/useAnchoredPosition.js

@@ -0,0 +1,41 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { getPositionRelativeToAnchor } from "./getPositionRelativeToAnchor.js";
+const useAnchoredPosition = ({ anchorElement, minWidth, offsetLeft = 0, offsetTop = 0, placement, position: positionProp })=>{
+    const popupRef = useRef(null);
+    const [position, setPosition] = useState(positionProp);
+    useLayoutEffect(()=>{
+        if ("absolute" === placement && positionProp) setPosition(positionProp);
+        else if (anchorElement.current && "auto" !== placement) {
+            const dimensions = null === popupRef.current ? void 0 : popupRef.current.getBoundingClientRect();
+            const position = getPositionRelativeToAnchor(anchorElement.current, placement, offsetLeft, offsetTop, minWidth, dimensions);
+            setPosition(position);
+        }
+    }, [
+        anchorElement,
+        minWidth,
+        offsetLeft,
+        offsetTop,
+        placement,
+        positionProp
+    ]);
+    const popupCallbackRef = useCallback((el)=>{
+        popupRef.current = el;
+        if (el && "center" === placement && anchorElement.current) {
+            const { height, width } = el.getBoundingClientRect();
+            setPosition(getPositionRelativeToAnchor(anchorElement.current, placement, offsetLeft, offsetTop, void 0, {
+                height,
+                width
+            }));
+        }
+    }, [
+        anchorElement,
+        offsetLeft,
+        offsetTop,
+        placement
+    ]);
+    return {
+        position,
+        popupRef: "center" === placement ? popupCallbackRef : void 0
+    };
+};
+export { useAnchoredPosition };

package/src/popup-menu/PopupMenu.css.js

@@ -0,0 +1,11 @@
+const css = `
+.vuuPopupMenu {
+  --vuu-icon-height: 20px;
+  --vuu-icon-left: 2px;
+  --vuu-icon-size: var(--vuuPopupMenu-iconSize, 16px);
+  --vuu-icon-width: 16px;
+}
+
+
+`;
+export default css;

package/src/popup-menu/PopupMenu.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
+import { useId } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { usePopupMenu } from "./usePopupMenu.js";
+import PopupMenu from "./PopupMenu.css";
+const classBase = "vuuPopupMenu";
+const PopupMenu_PopupMenu = ({ anchorElement, "aria-label": ariaLabel, appearance = "transparent", className, disabled = false, label, icon = label ? "chevron-down" : "more-vert", id: idProp, menuActionHandler, menuBuilder, menuClassName, menuLocation = "header", menuOptions, onMenuClose, onMenuOpen, popupPlacement = "below-right", sentiment = "neutral", tabIndex = 0, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-popup-menu",
+        css: PopupMenu,
+        window: targetWindow
+    });
+    const id = useId(idProp);
+    const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({
+        anchorElement,
+        "aria-label": ariaLabel,
+        id,
+        menuActionHandler,
+        menuBuilder,
+        menuClassName,
+        menuLocation,
+        onMenuClose,
+        onMenuOpen,
+        menuOptions,
+        popupPlacement,
+        tabIndex
+    });
+    if (label) return /*#__PURE__*/ jsxs(Button, {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        appearance: appearance,
+        className: clsx(classBase, className, `${classBase}-withCaption`, {
+            "saltButton-active": menuOpen
+        }),
+        disabled: disabled,
+        ref: rootRef,
+        sentiment: sentiment,
+        children: [
+            icon ? /*#__PURE__*/ jsx(Icon, {
+                name: icon
+            }) : null,
+            label
+        ]
+    });
+    if (icon) return /*#__PURE__*/ jsx(IconButton, {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        appearance: appearance,
+        className: clsx(classBase, className, {
+            "saltButton-active": menuOpen
+        }),
+        disabled: disabled,
+        icon: icon,
+        ref: rootRef,
+        sentiment: sentiment
+    });
+    console.error("PopupMenu must have a label or an icon (or both)");
+    return null;
+};
+export { PopupMenu_PopupMenu as PopupMenu };

package/src/popup-menu/index.js

@@ -0,0 +1 @@
+export * from "./PopupMenu.js";

package/src/popup-menu/usePopupMenu.js

@@ -0,0 +1,72 @@
+import { useCallback, useRef, useState } from "react";
+import { getPositionRelativeToAnchor } from "../popup/getPositionRelativeToAnchor.js";
+import { useContextMenu } from "@vuu-ui/vuu-context-menu";
+const usePopupMenu = ({ anchorElement, "aria-label": ariaLabel = "Popup menu", id, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, onMenuOpen, popupPlacement, tabIndex })=>{
+    const [menuOpen, _setMenuOpen] = useState(false);
+    const suppressShowMenuRef = useRef(false);
+    const rootRef = useRef(null);
+    const setMenuOpen = useCallback((isOpen)=>{
+        _setMenuOpen(isOpen);
+        if (isOpen) {
+            onMenuOpen?.();
+            setTimeout(()=>{
+                const firstOption = document.activeElement?.querySelector(".saltMenuItem");
+                firstOption?.focus();
+            }, 40);
+        } else suppressShowMenuRef.current = false;
+    }, [
+        onMenuOpen
+    ]);
+    const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);
+    const handleMenuOpenChange = useCallback((isOpen)=>{
+        if (!isOpen) {
+            setMenuOpen(false);
+            onMenuClose?.();
+        }
+    }, [
+        onMenuClose,
+        setMenuOpen
+    ]);
+    const showMenu = useCallback((e)=>{
+        if (suppressShowMenuRef.current) suppressShowMenuRef.current = false;
+        else {
+            suppressShowMenuRef.current = true;
+            const anchorEl = anchorElement?.current ?? rootRef.current;
+            if (anchorEl) {
+                const { left: x, top: y } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);
+                setMenuOpen(true);
+                showContextMenu(e, menuLocation, menuOptions, {
+                    onOpenChange: handleMenuOpenChange,
+                    x,
+                    y
+                });
+            }
+        }
+    }, [
+        anchorElement,
+        popupPlacement,
+        setMenuOpen,
+        showContextMenu,
+        menuLocation,
+        menuOptions,
+        handleMenuOpenChange
+    ]);
+    const ariaAttributes = {
+        "aria-controls": menuOpen ? `${id}-menu` : void 0,
+        "aria-label": ariaLabel,
+        "aria-expanded": menuOpen,
+        "aria-haspopup": "menu"
+    };
+    const buttonProps = {
+        id,
+        onClick: showMenu,
+        tabIndex
+    };
+    return {
+        ariaAttributes,
+        buttonProps,
+        menuOpen,
+        rootRef
+    };
+};
+export { usePopupMenu };

package/src/portal/Portal.css.js

@@ -0,0 +1,27 @@
+const css = `
+.vuuPortal {
+  z-index: 100;
+  position: absolute;
+}
+
+.vuuPortal:not(.vuuPopup) {
+  background-color: var(--salt-container-primary-background);
+  border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 4px;
+  padding: 4px 0;
+  box-shadow: 0 6px 12px #0000002d;
+}
+
+.vuuPortal:has(.vuuDropdown-popup-component.vuuList-empty) {
+  display: none;
+}
+
+#vuu-portal-root {
+  z-index: 1000;
+}
+
+
+`;
+export default css;

package/src/portal/Portal.js

@@ -0,0 +1,62 @@
+import { useThemeAttributes } from "@vuu-ui/vuu-utils";
+import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import Portal from "./Portal.css";
+function getContainer(container) {
+    return "function" == typeof container ? container() : container;
+}
+const DEFAULT_ID = [
+    "vuu-dialog-portal-root",
+    "vuu-portal-root"
+];
+const getFirstAvailableElementById = (id)=>{
+    if (!Array.isArray(id)) return document.getElementById(id);
+    for (const i of id){
+        const element = document.getElementById(i);
+        if (element) return element;
+    }
+    return null;
+};
+const Portal_Portal = ({ children, container: containerProp = document.body, id = DEFAULT_ID, onRender, open = true, themeAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-portal",
+        css: Portal,
+        window: targetWindow
+    });
+    const [mounted, setMounted] = useState(false);
+    const portalRef = useRef(null);
+    const container = getContainer(containerProp) ?? document.body;
+    const [themeClass, densityClass, dataMode] = useThemeAttributes(themeAttributes);
+    useLayoutEffect(()=>{
+        const root = getFirstAvailableElementById(id);
+        if (root) portalRef.current = root;
+        else {
+            portalRef.current = document.createElement("div");
+            portalRef.current.id = "string" == typeof id ? id : id.length > 0 ? id.at(-1) : "vuu-portal-root";
+        }
+        const el = portalRef.current;
+        if (!container.contains(el)) container.appendChild(el);
+        el.classList.add(themeClass, densityClass);
+        el.dataset.mode = dataMode;
+        setMounted(true);
+    }, [
+        id,
+        container,
+        themeClass,
+        densityClass,
+        dataMode
+    ]);
+    useLayoutEffect(()=>{
+        requestAnimationFrame(()=>{
+            onRender?.();
+        });
+    }, [
+        onRender
+    ]);
+    if (open && mounted && portalRef.current && children) return /*#__PURE__*/ createPortal(children, portalRef.current);
+    return null;
+};
+export { Portal_Portal as Portal };

package/src/portal/index.js

@@ -0,0 +1 @@
+export * from "./Portal.js";

package/src/tooltip/Tooltip.css.js

@@ -0,0 +1,76 @@
+const css = `
+.vuuTooltip {
+  --tooltip-align: flex-start;
+  --tooltip-background: var(--salt-actionable-bold-background-hover);
+  --tooltip-border: var(--salt-actionable-bold-background-hover);
+  --tooltip-color: var(--salt-actionable-bold-foreground-hover);
+  --tooltip-justify: flex-start;
+  --tooltip-top: auto;
+  --tooltip-right: auto;
+  --tooltip-bottom: auto;
+  --tooltip-left: auto;
+  align-items: var(--tooltip-align);
+  justify-content: var(--tooltip-justify);
+  z-index: 100;
+  transition: opacity .15s ease-in;
+  display: flex;
+  position: absolute;
+
+  &.vuuHidden {
+    opacity: 0;
+  }
+}
+
+.vuuTooltip-content {
+  background-color: var(--tooltip-background);
+  border-color: var(--tooltip-border);
+  border-radius: var(--vuuTooltip-borderRadius, 6px);
+  color: var(--tooltip-color);
+  white-space: nowrap;
+  border-style: solid;
+  border-width: 1px;
+  padding: 2px 8px;
+  line-height: 24px;
+  box-shadow: 0 4px 4px #00000040;
+}
+
+.vuuTooltip:before {
+  background-color: var(--tooltip-border);
+  content: " ";
+  z-index: -1;
+  width: 12px;
+  height: 12px;
+  display: block;
+  position: absolute;
+  transform: rotate(45deg);
+}
+
+.vuuTooltip[data-align="above"]:before {
+  bottom: -6px;
+  left: calc(50% - 6px);
+}
+
+.vuuTooltip[data-align="below"]:before {
+  top: -6px;
+  left: calc(50% - 6px);
+}
+
+.vuuTooltip[data-align="right"]:before {
+  top: calc(50% - 6px);
+  left: -6px;
+}
+
+.vuuTooltip[data-align="left"]:before {
+  top: calc(50% - 6px);
+  right: -6px;
+}
+
+.vuuTooltip-error {
+  --tooltip-background: var(--vuu-color-red-50);
+  --tooltip-color: white;
+  color: #fff;
+}
+
+
+`;
+export default css;

package/src/tooltip/Tooltip.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "../portal/index.js";
+import { useTooltipAnchoredPosition } from "./useTooltipAnchoredPosition.js";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import Tooltip from "./Tooltip.css";
+const classBase = "vuuTooltip";
+const Tooltip_Tooltip = ({ anchorElement, children, className, id, onMouseEnter, onMouseLeave, placement: placementProp, status, style: styleProp })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tooltip",
+        css: Tooltip,
+        window: targetWindow
+    });
+    const ref = useTooltipAnchoredPosition({
+        anchorElement,
+        placement: placementProp
+    });
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: clsx(classBase, className, "vuuHidden", {
+                [`${classBase}-error`]: "error" === status
+            }),
+            id: id,
+            ref: ref,
+            style: {
+                ...styleProp,
+                left: 0,
+                top: 0
+            },
+            children: /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-content`,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave,
+                children: children
+            })
+        })
+    });
+};
+export { Tooltip_Tooltip as Tooltip };

package/src/tooltip/index.js

@@ -0,0 +1,2 @@
+export * from "./Tooltip.js";
+export * from "./useTooltip.js";

package/src/tooltip/useTooltip.js

@@ -0,0 +1,91 @@
+import { queryClosest, useId } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef, useState } from "react";
+const useTooltip = ({ anchorQuery = "*", id: idProp, placement = [
+    "right",
+    "above",
+    "below"
+], tooltipContent })=>{
+    const hideTooltipRef = useRef(void 0);
+    const isHoveringRef = useRef(false);
+    const anchorElementRef = useRef(null);
+    const mouseEnterTimerRef = useRef(void 0);
+    const mouseLeaveTimerRef = useRef(void 0);
+    const [tooltipProps, setTooltipProps] = useState();
+    const id = useId(idProp);
+    const escapeListener = useCallback((evt)=>{
+        if ("Escape" === evt.key) hideTooltipRef.current?.();
+    }, []);
+    hideTooltipRef.current = useCallback(()=>{
+        setTooltipProps(void 0);
+        document.removeEventListener("keydown", escapeListener);
+    }, [
+        escapeListener
+    ]);
+    const handleMouseEnterTooltip = useCallback(()=>{
+        window.clearTimeout(mouseLeaveTimerRef.current);
+    }, []);
+    const handleMouseLeaveTooltip = useCallback(()=>{
+        hideTooltipRef.current?.();
+    }, []);
+    const hideTooltip = useCallback((defer = 0)=>{
+        if (mouseEnterTimerRef.current) {
+            window.clearTimeout(mouseEnterTimerRef.current);
+            mouseEnterTimerRef.current = void 0;
+        } else if (hideTooltipRef.current) if (0 === defer) hideTooltipRef.current();
+        else mouseLeaveTimerRef.current = window.setTimeout(hideTooltipRef.current, defer);
+    }, []);
+    const showTooltip = useCallback((ref = anchorElementRef)=>{
+        const { current: anchorEl } = ref;
+        if (anchorEl) {
+            setTooltipProps({
+                anchorElement: ref,
+                children: tooltipContent,
+                id: `${id}-tooltip`,
+                onMouseEnter: handleMouseEnterTooltip,
+                onMouseLeave: handleMouseLeaveTooltip,
+                placement: placement
+            });
+            document.addEventListener("keydown", escapeListener);
+        }
+        mouseEnterTimerRef.current = void 0;
+        hideTooltip(isHoveringRef.current ? 3000 : 1000);
+    }, [
+        escapeListener,
+        handleMouseEnterTooltip,
+        handleMouseLeaveTooltip,
+        hideTooltip,
+        id,
+        placement,
+        tooltipContent
+    ]);
+    const handleMouseEnter = useCallback((evt)=>{
+        isHoveringRef.current = true;
+        const el = queryClosest(evt.target, anchorQuery);
+        if (el) {
+            console.log(`el ${el.classList}`);
+            anchorElementRef.current = el;
+            mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);
+        }
+    }, [
+        anchorQuery,
+        showTooltip
+    ]);
+    const handleMouseLeave = useCallback(()=>{
+        isHoveringRef.current = false;
+        hideTooltip(200);
+    }, [
+        hideTooltip
+    ]);
+    const anchorProps = {
+        "aria-describedby": `${id}-tooltip`,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+    };
+    return {
+        anchorProps,
+        hideTooltip,
+        showTooltip,
+        tooltipProps
+    };
+};
+export { useTooltip };