@vuu-ui/vuu-popups 0.8.27-debug → 0.8.28-debug

package/esm/index.js

@@ -377,12 +377,16 @@ var PopupComponent2 = ({
   className,
   anchorElement,
   minWidth,
+  offsetLeft,
+  offsetTop,
   placement,
   position: positionProp
 }) => {
   const { popupRef, position } = useAnchoredPosition({
     anchorElement,
     minWidth,
+    offsetLeft,
+    offsetTop,
     placement,
     position: positionProp
   });
@@ -926,6 +930,7 @@ var MenuList = ({
       const hasSubMenu = isMenuItemGroup(child);
       const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
       const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
+      const ariaLabel = (label != null ? label : typeof children2 === "string") ? children2 : void 0;
       list.push(
         /* @__PURE__ */ jsx5(
           MenuItem,
@@ -944,6 +949,7 @@ var MenuList = ({
             "aria-controls": ariaControls,
             "aria-haspopup": hasSubMenu || void 0,
             "aria-expanded": subMenuShowing || void 0,
+            "aria-label": ariaLabel,
             children: hasSubMenu ? maybeIcon(label != null ? label : children2, withIcon, iconName) : maybeIcon(children2, withIcon, iconName)
           }
         )
@@ -1844,24 +1850,19 @@ var Prompt = ({
 };
 
 // src/tooltip/useAnchoredPosition.ts
-import { useLayoutEffect as useLayoutEffect6, useState as useState7 } from "react";
-var getPositionRelativeToAnchor2 = (anchorElement, placement, offsetLeft, offsetTop) => {
-  const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
-  const midX = left + width / 2;
-  const midY = top + height / 2;
-  switch (placement) {
-    case "above":
-      return { left: midX + offsetLeft, top: top + offsetTop };
-    case "below":
-      return { left: midX + offsetLeft, top: bottom + offsetTop };
-    case "right":
-      return { left: right + offsetLeft, top: midY + offsetLeft };
-    case "left":
-      return { left: left + offsetLeft, top: midY + offsetLeft };
-    default:
-      throw Error(
-        "Tooltip getPositionRelativeToAnchor only supported placement values are left, right, below and right"
-      );
+import { useCallback as useCallback11, useLayoutEffect as useLayoutEffect6 } from "react";
+var pointerSize = 12;
+var roomAbove = (anchor, height) => height < anchor.top;
+var roomBelow = (anchor, height) => document.body.clientHeight - anchor.bottom > height;
+var getNextPlacement = (placement) => {
+  if (Array.isArray(placement)) {
+    if (placement.length === 0) {
+      return [void 0, placement];
+    } else {
+      return [placement[0], placement.slice(1)];
+    }
+  } else {
+    return [placement, []];
   }
 };
 var useAnchoredPosition2 = ({
@@ -1870,19 +1871,49 @@ var useAnchoredPosition2 = ({
   offsetTop = 0,
   placement
 }) => {
-  const [position, setPosition] = useState7();
+  const ref = useCallback11(
+    (el) => {
+      if (el && anchorElement.current) {
+        const anchor = anchorElement.current.getBoundingClientRect();
+        const { height, width } = el.getBoundingClientRect();
+        let nextPlacement;
+        let placements = placement;
+        do {
+          [nextPlacement, placements] = getNextPlacement(placements);
+          switch (nextPlacement) {
+            case "above":
+              if (roomAbove(anchor, height + pointerSize)) {
+                const midDiff = (width - anchor.width) / 2;
+                el.style.cssText = `left:${anchor.left - midDiff}px;top:${anchor.top - height - pointerSize}px;opacity: 1;`;
+                el.dataset.align = "above";
+                return;
+              }
+              break;
+            case "below":
+              if (roomBelow(anchor, height + pointerSize)) {
+                const midDiff = (width - anchor.width) / 2;
+                el.style.cssText = `left:${anchor.left - midDiff}px;top:${anchor.bottom + pointerSize}px;opacity: 1;`;
+                el.dataset.align = "below";
+                return;
+              }
+              break;
+            case "right":
+              console.log("place the fucker right");
+              break;
+            case "left":
+              console.log("place the fucker left");
+              break;
+            default:
+              console.warn(`unklnown tooltip placement ${placement}`);
+          }
+        } while (nextPlacement);
+      }
+    },
+    [anchorElement, placement]
+  );
   useLayoutEffect6(() => {
-    if (anchorElement.current) {
-      const position2 = getPositionRelativeToAnchor2(
-        anchorElement.current,
-        placement,
-        offsetLeft,
-        offsetTop
-      );
-      setPosition(position2);
-    }
   }, [anchorElement, offsetLeft, offsetTop, placement]);
-  return position;
+  return ref;
 };
 
 // src/tooltip/Tooltip.tsx
@@ -1892,26 +1923,27 @@ var classBase6 = "vuuTooltip";
 var Tooltip = ({
   anchorElement,
   children,
+  className,
   id,
   onMouseEnter,
   onMouseLeave,
-  placement,
+  placement: placementProp,
   status,
   style: styleProp
 }) => {
-  const position = useAnchoredPosition2({ anchorElement, placement });
-  if (position === void 0) {
-    return null;
-  }
+  const ref = useAnchoredPosition2({
+    anchorElement,
+    placement: placementProp
+  });
   return /* @__PURE__ */ jsx11(Portal, { children: /* @__PURE__ */ jsx11(
     "div",
     {
-      className: cx9(classBase6, {
+      className: cx9(classBase6, className, "vuuHidden", {
         [`${classBase6}-error`]: status === "error"
       }),
-      "data-align": placement,
       id,
-      style: { ...styleProp, ...position },
+      ref,
+      style: { ...styleProp, left: 0, top: 0 },
       children: /* @__PURE__ */ jsx11(
         "span",
         {
@@ -1926,82 +1958,96 @@ var Tooltip = ({
 };
 
 // src/tooltip/useTooltip.ts
-import { useId as useId4 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback11, useRef as useRef10, useState as useState8 } from "react";
+import { queryClosest, useId as useId4 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback12, useRef as useRef10, useState as useState7 } from "react";
 var useTooltip = ({
+  anchorQuery = "*",
   id: idProp,
   placement = "right",
   tooltipContent
 }) => {
   const hideTooltipRef = useRef10();
+  const isHoveringRef = useRef10(false);
   const anchorElementRef = useRef10(null);
   const mouseEnterTimerRef = useRef10();
   const mouseLeaveTimerRef = useRef10();
-  const [tooltipProps, setTooltipProps] = useState8();
+  const [tooltipProps, setTooltipProps] = useState7();
   const id = useId4(idProp);
-  const escapeListener = useCallback11((evt) => {
+  const escapeListener = useCallback12((evt) => {
     var _a;
     if (evt.key === "Escape") {
       (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
     }
   }, []);
-  hideTooltipRef.current = useCallback11(() => {
+  hideTooltipRef.current = useCallback12(() => {
     setTooltipProps(void 0);
     document.removeEventListener("keydown", escapeListener);
   }, [escapeListener]);
-  const handleMouseEnterTooltip = useCallback11(() => {
+  const handleMouseEnterTooltip = useCallback12(() => {
     window.clearTimeout(mouseLeaveTimerRef.current);
   }, []);
-  const handleMouseLeaveTooltip = useCallback11(() => {
+  const handleMouseLeaveTooltip = useCallback12(() => {
     var _a;
     (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
   }, []);
-  const showTooltip = useCallback11(() => {
-    const { current: anchorEl } = anchorElementRef;
-    if (anchorEl) {
-      setTooltipProps({
-        anchorElement: anchorElementRef,
-        children: tooltipContent,
-        id: `${id}-tooltip`,
-        onMouseEnter: handleMouseEnterTooltip,
-        onMouseLeave: handleMouseLeaveTooltip,
-        placement
-      });
-      document.addEventListener("keydown", escapeListener);
+  const hideTooltip = useCallback12((defer = 0) => {
+    if (mouseEnterTimerRef.current) {
+      window.clearTimeout(mouseEnterTimerRef.current);
+      mouseEnterTimerRef.current = void 0;
+    } else if (hideTooltipRef.current) {
+      if (defer === 0) {
+        hideTooltipRef.current();
+      } else {
+        mouseLeaveTimerRef.current = window.setTimeout(
+          hideTooltipRef.current,
+          defer
+        );
+      }
     }
-    mouseEnterTimerRef.current = void 0;
-  }, [
-    escapeListener,
-    handleMouseEnterTooltip,
-    handleMouseLeaveTooltip,
-    id,
-    placement,
-    tooltipContent
-  ]);
-  const handleMouseEnter = useCallback11(
+  }, []);
+  const showTooltip = useCallback12(
+    (ref = anchorElementRef) => {
+      const { current: anchorEl } = ref;
+      if (anchorEl) {
+        setTooltipProps({
+          anchorElement: ref,
+          children: tooltipContent,
+          id: `${id}-tooltip`,
+          onMouseEnter: handleMouseEnterTooltip,
+          onMouseLeave: handleMouseLeaveTooltip,
+          placement
+        });
+        document.addEventListener("keydown", escapeListener);
+      }
+      mouseEnterTimerRef.current = void 0;
+      hideTooltip(isHoveringRef.current ? 3e3 : 1e3);
+    },
+    [
+      escapeListener,
+      handleMouseEnterTooltip,
+      handleMouseLeaveTooltip,
+      hideTooltip,
+      id,
+      placement,
+      tooltipContent
+    ]
+  );
+  const handleMouseEnter = useCallback12(
     (evt) => {
-      const el = evt.target;
+      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);
       }
     },
-    [showTooltip]
+    [anchorQuery, showTooltip]
   );
-  const handleMouseLeave = useCallback11(() => {
-    if (anchorElementRef.current)
-      if (mouseEnterTimerRef.current) {
-        window.clearTimeout(mouseEnterTimerRef.current);
-        mouseEnterTimerRef.current = void 0;
-      } else {
-        if (hideTooltipRef.current) {
-          mouseLeaveTimerRef.current = window.setTimeout(
-            hideTooltipRef.current,
-            200
-          );
-        }
-      }
-  }, []);
+  const handleMouseLeave = useCallback12(() => {
+    isHoveringRef.current = false;
+    hideTooltip(200);
+  }, [hideTooltip]);
   const anchorProps = {
     "aria-describedby": `${id}-tooltip`,
     onMouseEnter: handleMouseEnter,
@@ -2009,12 +2055,14 @@ var useTooltip = ({
   };
   return {
     anchorProps,
+    hideTooltip,
+    showTooltip,
     tooltipProps
   };
 };
 
 // src/notifications/NotificationsProvider.tsx
-import React4, { useState as useState9, useContext as useContext2, useCallback as useCallback12, useEffect } from "react";
+import React4, { useState as useState8, useContext as useContext2, useCallback as useCallback13, useEffect } from "react";
 import classNames from "clsx";
 import { getUniqueId } from "@vuu-ui/vuu-utils";
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -2039,8 +2087,8 @@ var NotificationsContext = React4.createContext({
   notify: () => "have you forgotten to provide a NotificationProvider?"
 });
 var NotificationsProvider = (props) => {
-  const [notifications, setNotifications] = useState9([]);
-  const notify = useCallback12((notification) => {
+  const [notifications, setNotifications] = useState8([]);
+  const notify = useCallback13((notification) => {
     const newNotification = { ...notification, id: getUniqueId() };
     setNotifications((prev) => [...prev, newNotification]);
     setTimeout(() => {
@@ -2070,7 +2118,7 @@ var NotificationsProvider = (props) => {
 var useNotifications = () => useContext2(NotificationsContext);
 var ToastNotification = (props) => {
   const { top, notification, animated = true } = props;
-  const [right, setRight] = useState9(-toastWidth - toastContainerRightPadding);
+  const [right, setRight] = useState8(-toastWidth - toastContainerRightPadding);
   useEffect(() => {
     setTimeout(() => setRight(toastContainerRightPadding));
     if (animated) {