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

package/cjs/index.js

@@ -440,12 +440,16 @@ var PopupComponent2 = ({
   className,
   anchorElement,
   minWidth,
+  offsetLeft,
+  offsetTop,
   placement,
   position: positionProp
 }) => {
   const { popupRef, position } = useAnchoredPosition({
     anchorElement,
     minWidth,
+    offsetLeft,
+    offsetTop,
     placement,
     position: positionProp
   });
@@ -980,6 +984,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__ */ (0, import_jsx_runtime5.jsx)(
           MenuItem,
@@ -998,6 +1003,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)
           }
         )
@@ -1887,23 +1893,18 @@ var Prompt = ({
 
 // src/tooltip/useAnchoredPosition.ts
 var import_react16 = require("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"
-      );
+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 = ({
@@ -1912,19 +1913,49 @@ var useAnchoredPosition2 = ({
   offsetTop = 0,
   placement
 }) => {
-  const [position, setPosition] = (0, import_react16.useState)();
+  const ref = (0, import_react16.useCallback)(
+    (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]
+  );
   (0, import_react16.useLayoutEffect)(() => {
-    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
@@ -1934,26 +1965,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__ */ (0, import_jsx_runtime11.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
-      className: (0, import_clsx9.default)(classBase6, {
+      className: (0, import_clsx9.default)(classBase6, className, "vuuHidden", {
         [`${classBase6}-error`]: status === "error"
       }),
-      "data-align": placement,
       id,
-      style: { ...styleProp, ...position },
+      ref,
+      style: { ...styleProp, left: 0, top: 0 },
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "span",
         {
@@ -1971,11 +2003,13 @@ var Tooltip = ({
 var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var import_react17 = require("react");
 var useTooltip = ({
+  anchorQuery = "*",
   id: idProp,
   placement = "right",
   tooltipContent
 }) => {
   const hideTooltipRef = (0, import_react17.useRef)();
+  const isHoveringRef = (0, import_react17.useRef)(false);
   const anchorElementRef = (0, import_react17.useRef)(null);
   const mouseEnterTimerRef = (0, import_react17.useRef)();
   const mouseLeaveTimerRef = (0, import_react17.useRef)();
@@ -1998,52 +2032,64 @@ var useTooltip = ({
     var _a;
     (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
   }, []);
-  const showTooltip = (0, import_react17.useCallback)(() => {
-    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 = (0, import_react17.useCallback)((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 showTooltip = (0, import_react17.useCallback)(
+    (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 = (0, import_react17.useCallback)(
     (evt) => {
-      const el = evt.target;
+      isHoveringRef.current = true;
+      const el = (0, import_vuu_utils9.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 = (0, import_react17.useCallback)(() => {
-    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
-          );
-        }
-      }
-  }, []);
+    isHoveringRef.current = false;
+    hideTooltip(200);
+  }, [hideTooltip]);
   const anchorProps = {
     "aria-describedby": `${id}-tooltip`,
     onMouseEnter: handleMouseEnter,
@@ -2051,6 +2097,8 @@ var useTooltip = ({
   };
   return {
     anchorProps,
+    hideTooltip,
+    showTooltip,
     tooltipProps
   };
 };