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

package/src/popup-menu/PopupMenu.js

@@ -1,67 +0,0 @@
-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

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

package/src/popup-menu/usePopupMenu.js

@@ -1,72 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

package/src/tooltip/Tooltip.css.js

@@ -1,76 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

package/src/tooltip/useTooltip.js

@@ -1,91 +0,0 @@
-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 };

package/src/tooltip/useTooltipAnchoredPosition.js

@@ -1,102 +0,0 @@
-import { useCallback } from "react";
-const pointerSize = 12;
-const roomAbove = (anchor, tooltip)=>tooltip.height + pointerSize < anchor.top;
-const roomLeft = (anchor, tooltip)=>tooltip.width + pointerSize < anchor.left;
-const roomRight = (anchor, tooltip)=>anchor.right + tooltip.width + pointerSize < document.body.clientWidth;
-const roomBelow = (anchor, tooltip)=>document.body.clientHeight - anchor.bottom > tooltip.height + pointerSize;
-const roomAvailableAtPlacement = (placement, anchor, tooltip)=>{
-    switch(placement){
-        case "above":
-            return roomAbove(anchor, tooltip);
-        case "left":
-            return roomLeft(anchor, tooltip);
-        case "below":
-            return roomBelow(anchor, tooltip);
-        case "right":
-            return roomRight(anchor, tooltip);
-        default:
-            throw Error("invalid tooltip placement");
-    }
-};
-const positionAbove = (anchor, tooltip)=>({
-        left: anchor.left - (tooltip.width - anchor.width) / 2,
-        top: anchor.top - (tooltip.height + pointerSize)
-    });
-const positionBelow = (anchor, tooltip)=>({
-        left: anchor.left - (tooltip.width - anchor.width) / 2,
-        top: anchor.bottom + pointerSize
-    });
-const positionLeft = (anchor, tooltip)=>({
-        left: anchor.left - pointerSize - tooltip.width,
-        top: anchor.top - (tooltip.height - anchor.height) / 2
-    });
-const positionRight = (anchor, tooltip)=>({
-        left: anchor.right + pointerSize,
-        top: anchor.top - (tooltip.height - anchor.height) / 2
-    });
-const positionAtPlacement = (placement, anchor, tooltip)=>{
-    switch(placement){
-        case "above":
-            return positionAbove(anchor, tooltip);
-        case "left":
-            return positionLeft(anchor, tooltip);
-        case "below":
-            return positionBelow(anchor, tooltip);
-        case "right":
-            return positionRight(anchor, tooltip);
-        default:
-            throw Error("invalid tooltip placement");
-    }
-};
-const keepWithinTheScreen = ({ height, width }, position)=>{
-    const { clientWidth, clientHeight } = document.body;
-    let { left, top } = position;
-    if (left + width > clientWidth) left -= left + width - clientWidth;
-    if (left < 0) left = 0;
-    if (top + height > clientHeight) top -= top + height - clientHeight;
-    if (top < 0) top = 0;
-    return {
-        left,
-        top
-    };
-};
-const toCSSText = ({ left, top })=>`left:${left}px;top:${top}px;opacity:1;`;
-const getNextPlacement = (placement)=>{
-    if (!Array.isArray(placement)) return [
-        placement,
-        []
-    ];
-    if (0 === placement.length) return [
-        void 0,
-        placement
-    ];
-    return [
-        placement[0],
-        placement.slice(1)
-    ];
-};
-const useTooltipAnchoredPosition = ({ anchorElement, placement })=>{
-    const ref = useCallback((el)=>{
-        if (el && anchorElement.current) {
-            const anchorRect = anchorElement.current.getBoundingClientRect();
-            const tooltipRect = el.getBoundingClientRect();
-            let nextPlacement;
-            let placements = placement;
-            [nextPlacement = "right", placements] = getNextPlacement(placements);
-            do {
-                if (roomAvailableAtPlacement(nextPlacement, anchorRect, tooltipRect)) {
-                    el.style.cssText = toCSSText(keepWithinTheScreen(tooltipRect, positionAtPlacement(nextPlacement, anchorRect, tooltipRect)));
-                    el.dataset.align = nextPlacement;
-                    return;
-                }
-                [nextPlacement, placements] = getNextPlacement(placements);
-            }while (nextPlacement)
-        }
-        el?.classList.remove("vuuHidden");
-    }, [
-        anchorElement,
-        placement
-    ]);
-    return ref;
-};
-export { useTooltipAnchoredPosition };