@vuu-ui/vuu-popups 0.8.74 → 0.8.75

package/cjs/tooltip/Tooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tooltipCss = ".vuuTooltip {\n    --tooltip-align: flex-start;\n    --tooltip-background: var(--salt-actionable-primary-background-hover);\n    --tooltip-border: var(--salt-actionable-primary-background-hover);\n    --tooltip-color: var(--salt-actionable-primary-foreground-hover);\n    --tooltip-justify: flex-start;\n    --tooltip-top: auto;\n    --tooltip-right: auto;\n    --tooltip-bottom: auto;\n    --tooltip-left: auto;\n    align-items: var(--tooltip-align);\n    justify-content: var(--tooltip-justify);\n    display: flex;\n    position: absolute;\n    transition: opacity .15s ease-in;\n    z-index: 100;\n\n\n    &.vuuHidden {\n      opacity: 0;\n    }\n  }\n  \n  .vuuTooltip-content {\n    background-color: var(--tooltip-background);\n    border-color: var(--tooltip-border);\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--vuuTooltip-borderRadius, 6px);\n    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n    color: var(--tooltip-color);\n    line-height: 24px;\n    padding: 2px 8px;\n    white-space: nowrap;\n  }\n    \n  .vuuTooltip::before {\n    background-color: var(--tooltip-border);\n    content: ' ';\n    display: block;\n    position: absolute;\n    transform: rotate(45deg);\n    width: 12px;\n    height: 12px;\n    z-index: -1;\n}\n\n.vuuTooltip[data-align='above']::before {\n  bottom: -6px;\n  left: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align='below']::before {\n  top: -6px;\n  left: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align='right']::before {\n}\n\n.vuuTooltip[data-align='left']::before {\n}\n\n.vuuTooltip-error {\n  --tooltip-background: var(--vuu-color-red-50);\n  --tooltip-color: white;\n  color: white;\n}";
+var tooltipCss = ".vuuTooltip {\n  --tooltip-align: flex-start;\n  --tooltip-background: var(--salt-actionable-primary-background-hover);\n  --tooltip-border: var(--salt-actionable-primary-background-hover);\n  --tooltip-color: var(--salt-actionable-primary-foreground-hover);\n  --tooltip-justify: flex-start;\n  --tooltip-top: auto;\n  --tooltip-right: auto;\n  --tooltip-bottom: auto;\n  --tooltip-left: auto;\n  align-items: var(--tooltip-align);\n  justify-content: var(--tooltip-justify);\n  display: flex;\n  position: absolute;\n  transition: opacity 0.15s ease-in;\n  z-index: 100;\n\n  &.vuuHidden {\n    opacity: 0;\n  }\n}\n\n.vuuTooltip-content {\n  background-color: var(--tooltip-background);\n  border-color: var(--tooltip-border);\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--vuuTooltip-borderRadius, 6px);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n  color: var(--tooltip-color);\n  line-height: 24px;\n  padding: 2px 8px;\n  white-space: nowrap;\n}\n\n.vuuTooltip::before {\n  background-color: var(--tooltip-border);\n  content: \" \";\n  display: block;\n  position: absolute;\n  transform: rotate(45deg);\n  width: 12px;\n  height: 12px;\n  z-index: -1;\n}\n\n.vuuTooltip[data-align=\"above\"]:before {\n  bottom: -6px;\n  left: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align=\"below\"]:before {\n  top: -6px;\n  left: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align=\"right\"]:before {\n  left: -6px;\n  top: calc(50% - 6px);\n}\n\n.vuuTooltip[data-align=\"left\"]:before {\n  right: -6px;\n  top: calc(50% - 6px);\n}\n\n.vuuTooltip-error {\n  --tooltip-background: var(--vuu-color-red-50);\n  --tooltip-color: white;\n  color: white;\n}\n";
 
 module.exports = tooltipCss;
 //# sourceMappingURL=Tooltip.css.js.map

package/cjs/tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var Portal = require('../portal/Portal.js');
-var useAnchoredPosition = require('./useAnchoredPosition.js');
+var useTooltipAnchoredPosition = require('./useTooltipAnchoredPosition.js');
 var cx = require('clsx');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
@@ -26,7 +26,7 @@ const Tooltip = ({
     css: Tooltip$1,
     window: targetWindow
   });
-  const ref = useAnchoredPosition.useAnchoredPosition({
+  const ref = useTooltipAnchoredPosition.useTooltipAnchoredPosition({
     anchorElement,
     placement: placementProp
   });

package/cjs/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from \"react\";\nimport { Portal } from \"../portal\";\nimport { TooltipPlacement, useAnchoredPosition } from \"./useAnchoredPosition\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tooltipCss from \"./Tooltip.css\";\n\nconst classBase = \"vuuTooltip\";\n\nexport type TooltipStatus = \"warning\" | \"error\" | \"info\";\nexport interface TooltipProps {\n  anchorElement: RefObject<HTMLElement>;\n  children: ReactNode;\n  className?: string;\n  id?: string;\n  onMouseEnter: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n  placement: TooltipPlacement | TooltipPlacement[];\n  status?: TooltipStatus;\n  style?: CSSProperties;\n}\n\nexport const Tooltip = ({\n  anchorElement,\n  children,\n  className,\n  id,\n  onMouseEnter,\n  onMouseLeave,\n  placement: placementProp,\n  status,\n  style: styleProp,\n}: TooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const ref = useAnchoredPosition({\n    anchorElement,\n    placement: placementProp,\n  });\n  return (\n    <Portal>\n      <div\n        className={cx(classBase, className, \"vuuHidden\", {\n          [`${classBase}-error`]: status === \"error\",\n        })}\n        id={id}\n        ref={ref}\n        style={{ ...styleProp, left: 0, top: 0 }}\n      >\n        <span\n          className={`${classBase}-content`}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </span>\n      </div>\n    </Portal>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tooltipCss","useAnchoredPosition","Portal","jsx"],"mappings":";;;;;;;;;;AASA,MAAM,SAAY,GAAA,YAAA,CAAA;AAeX,MAAM,UAAU,CAAC;AAAA,EACtB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAO,EAAA,SAAA;AACT,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,MAAMC,uCAAoB,CAAA;AAAA,IAC9B,aAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,GACZ,CAAA,CAAA;AACD,EAAA,sCACGC,aACC,EAAA,EAAA,QAAA,kBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,WAAa,EAAA;AAAA,QAC/C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,MAAW,KAAA,OAAA;AAAA,OACpC,CAAA;AAAA,MACD,EAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAO,EAAE,GAAG,WAAW,IAAM,EAAA,CAAA,EAAG,KAAK,CAAE,EAAA;AAAA,MAEvC,QAAA,kBAAAA,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,UACvB,YAAA;AAAA,UACA,YAAA;AAAA,UAEC,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from \"react\";\nimport { Portal } from \"../portal\";\nimport {\n  TooltipPlacement,\n  useTooltipAnchoredPosition,\n} from \"./useTooltipAnchoredPosition\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tooltipCss from \"./Tooltip.css\";\n\nconst classBase = \"vuuTooltip\";\n\nexport type TooltipStatus = \"warning\" | \"error\" | \"info\";\nexport interface TooltipProps {\n  anchorElement: RefObject<HTMLElement>;\n  children: ReactNode;\n  className?: string;\n  id?: string;\n  onMouseEnter: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n  placement: TooltipPlacement | TooltipPlacement[];\n  status?: TooltipStatus;\n  style?: CSSProperties;\n}\n\nexport const Tooltip = ({\n  anchorElement,\n  children,\n  className,\n  id,\n  onMouseEnter,\n  onMouseLeave,\n  placement: placementProp,\n  status,\n  style: styleProp,\n}: TooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const ref = useTooltipAnchoredPosition({\n    anchorElement,\n    placement: placementProp,\n  });\n  return (\n    <Portal>\n      <div\n        className={cx(classBase, className, \"vuuHidden\", {\n          [`${classBase}-error`]: status === \"error\",\n        })}\n        id={id}\n        ref={ref}\n        style={{ ...styleProp, left: 0, top: 0 }}\n      >\n        <span\n          className={`${classBase}-content`}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </span>\n      </div>\n    </Portal>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tooltipCss","useTooltipAnchoredPosition","Portal","jsx"],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,YAAA,CAAA;AAeX,MAAM,UAAU,CAAC;AAAA,EACtB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAO,EAAA,SAAA;AACT,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,MAAMC,qDAA2B,CAAA;AAAA,IACrC,aAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,GACZ,CAAA,CAAA;AACD,EAAA,sCACGC,aACC,EAAA,EAAA,QAAA,kBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,WAAa,EAAA;AAAA,QAC/C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,MAAW,KAAA,OAAA;AAAA,OACpC,CAAA;AAAA,MACD,EAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAO,EAAE,GAAG,WAAW,IAAM,EAAA,CAAA,EAAG,KAAK,CAAE,EAAA;AAAA,MAEvC,QAAA,kBAAAA,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,UACvB,YAAA;AAAA,UACA,YAAA;AAAA,UAEC,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/tooltip/useTooltip.js

@@ -6,7 +6,7 @@ var React = require('react');
 const useTooltip = ({
   anchorQuery = "*",
   id: idProp,
-  placement = "right",
+  placement = ["right", "above", "below"],
   tooltipContent
 }) => {
   const hideTooltipRef = React.useRef();

package/cjs/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["import { queryClosest, useId } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactNode, useCallback, useRef, useState } from \"react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { TooltipPlacement } from \"./useAnchoredPosition\";\n\nexport interface TooltipHookProps {\n  anchorQuery?: string;\n  id: string;\n  placement?: TooltipPlacement | TooltipPlacement[];\n  tooltipContent: ReactNode;\n}\n\nexport const useTooltip = ({\n  anchorQuery = \"*\",\n  id: idProp,\n  placement = \"right\",\n  tooltipContent,\n}: TooltipHookProps) => {\n  const hideTooltipRef = useRef<() => void>();\n  const isHoveringRef = useRef(false);\n  const anchorElementRef = useRef<HTMLElement | null>(null);\n  const mouseEnterTimerRef = useRef<number | undefined>();\n  const mouseLeaveTimerRef = useRef<number | undefined>();\n  const [tooltipProps, setTooltipProps] = useState<TooltipProps | undefined>();\n\n  const id = useId(idProp);\n\n  const escapeListener = useCallback((evt: KeyboardEvent) => {\n    if (evt.key === \"Escape\") {\n      hideTooltipRef.current?.();\n    }\n  }, []);\n\n  hideTooltipRef.current = useCallback(() => {\n    setTooltipProps(undefined);\n    document.removeEventListener(\"keydown\", escapeListener);\n  }, [escapeListener]);\n\n  const handleMouseEnterTooltip = useCallback(() => {\n    window.clearTimeout(mouseLeaveTimerRef.current);\n  }, []);\n\n  const handleMouseLeaveTooltip = useCallback(() => {\n    hideTooltipRef.current?.();\n  }, []);\n\n  const hideTooltip = useCallback((defer = 0) => {\n    if (mouseEnterTimerRef.current) {\n      window.clearTimeout(mouseEnterTimerRef.current);\n      mouseEnterTimerRef.current = undefined;\n    } else if (hideTooltipRef.current) {\n      if (defer === 0) {\n        hideTooltipRef.current();\n      } else {\n        mouseLeaveTimerRef.current = window.setTimeout(\n          hideTooltipRef.current,\n          defer\n        );\n      }\n    }\n  }, []);\n\n  const showTooltip = useCallback(\n    (ref = anchorElementRef) => {\n      const { current: anchorEl } = ref;\n      if (anchorEl) {\n        setTooltipProps({\n          anchorElement: ref,\n          children: tooltipContent,\n          id: `${id}-tooltip`,\n          onMouseEnter: handleMouseEnterTooltip,\n          onMouseLeave: handleMouseLeaveTooltip,\n          placement: placement,\n        });\n        // register ESC listener\n        document.addEventListener(\"keydown\", escapeListener);\n      }\n      mouseEnterTimerRef.current = undefined;\n      hideTooltip(isHoveringRef.current ? 3000 : 1000);\n    },\n    [\n      escapeListener,\n      handleMouseEnterTooltip,\n      handleMouseLeaveTooltip,\n      hideTooltip,\n      id,\n      placement,\n      tooltipContent,\n    ]\n  );\n\n  const handleMouseEnter = useCallback(\n    (evt: MouseEvent) => {\n      isHoveringRef.current = true;\n      const el = queryClosest(evt.target, anchorQuery);\n      if (el) {\n        console.log(`el ${el.classList}`);\n        anchorElementRef.current = el;\n        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);\n      }\n    },\n    [anchorQuery, showTooltip]\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    isHoveringRef.current = false;\n    hideTooltip(200);\n  }, [hideTooltip]);\n\n  const anchorProps = {\n    \"aria-describedby\": `${id}-tooltip`,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n  };\n\n  return {\n    anchorProps,\n    hideTooltip,\n    showTooltip,\n    tooltipProps,\n  };\n};\n"],"names":["useRef","useState","useId","useCallback","queryClosest"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["import { queryClosest, useId } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactNode, useCallback, useRef, useState } from \"react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { TooltipPlacement } from \"./useTooltipAnchoredPosition\";\n\nexport interface TooltipHookProps {\n  anchorQuery?: string;\n  id: string;\n  placement?: TooltipPlacement | TooltipPlacement[];\n  tooltipContent: ReactNode;\n}\n\nexport const useTooltip = ({\n  anchorQuery = \"*\",\n  id: idProp,\n  placement = [\"right\", \"above\", \"below\"],\n  tooltipContent,\n}: TooltipHookProps) => {\n  const hideTooltipRef = useRef<() => void>();\n  const isHoveringRef = useRef(false);\n  const anchorElementRef = useRef<HTMLElement | null>(null);\n  const mouseEnterTimerRef = useRef<number | undefined>();\n  const mouseLeaveTimerRef = useRef<number | undefined>();\n  const [tooltipProps, setTooltipProps] = useState<TooltipProps | undefined>();\n\n  const id = useId(idProp);\n\n  const escapeListener = useCallback((evt: KeyboardEvent) => {\n    if (evt.key === \"Escape\") {\n      hideTooltipRef.current?.();\n    }\n  }, []);\n\n  hideTooltipRef.current = useCallback(() => {\n    setTooltipProps(undefined);\n    document.removeEventListener(\"keydown\", escapeListener);\n  }, [escapeListener]);\n\n  const handleMouseEnterTooltip = useCallback(() => {\n    window.clearTimeout(mouseLeaveTimerRef.current);\n  }, []);\n\n  const handleMouseLeaveTooltip = useCallback(() => {\n    hideTooltipRef.current?.();\n  }, []);\n\n  const hideTooltip = useCallback((defer = 0) => {\n    if (mouseEnterTimerRef.current) {\n      window.clearTimeout(mouseEnterTimerRef.current);\n      mouseEnterTimerRef.current = undefined;\n    } else if (hideTooltipRef.current) {\n      if (defer === 0) {\n        hideTooltipRef.current();\n      } else {\n        mouseLeaveTimerRef.current = window.setTimeout(\n          hideTooltipRef.current,\n          defer\n        );\n      }\n    }\n  }, []);\n\n  const showTooltip = useCallback(\n    (ref = anchorElementRef) => {\n      const { current: anchorEl } = ref;\n      if (anchorEl) {\n        setTooltipProps({\n          anchorElement: ref,\n          children: tooltipContent,\n          id: `${id}-tooltip`,\n          onMouseEnter: handleMouseEnterTooltip,\n          onMouseLeave: handleMouseLeaveTooltip,\n          placement: placement,\n        });\n        // register ESC listener\n        document.addEventListener(\"keydown\", escapeListener);\n      }\n      mouseEnterTimerRef.current = undefined;\n      hideTooltip(isHoveringRef.current ? 3000 : 1000);\n    },\n    [\n      escapeListener,\n      handleMouseEnterTooltip,\n      handleMouseLeaveTooltip,\n      hideTooltip,\n      id,\n      placement,\n      tooltipContent,\n    ]\n  );\n\n  const handleMouseEnter = useCallback(\n    (evt: MouseEvent) => {\n      isHoveringRef.current = true;\n      const el = queryClosest(evt.target, anchorQuery);\n      if (el) {\n        console.log(`el ${el.classList}`);\n        anchorElementRef.current = el;\n        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);\n      }\n    },\n    [anchorQuery, showTooltip]\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    isHoveringRef.current = false;\n    hideTooltip(200);\n  }, [hideTooltip]);\n\n  const anchorProps = {\n    \"aria-describedby\": `${id}-tooltip`,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n  };\n\n  return {\n    anchorProps,\n    hideTooltip,\n    showTooltip,\n    tooltipProps,\n  };\n};\n"],"names":["useRef","useState","useId","useCallback","queryClosest"],"mappings":"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"}

package/cjs/tooltip/useTooltipAnchoredPosition.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var React = require('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)) {
+    if (placement.length === 0) {
+      return [void 0, placement];
+    } else {
+      return [placement[0], placement.slice(1)];
+    }
+  } else {
+    return [placement, []];
+  }
+};
+const useTooltipAnchoredPosition = ({
+  anchorElement,
+  placement
+}) => {
+  const ref = React.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;
+};
+
+exports.useTooltipAnchoredPosition = useTooltipAnchoredPosition;
+//# sourceMappingURL=useTooltipAnchoredPosition.js.map

package/cjs/tooltip/useTooltipAnchoredPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipAnchoredPosition.js","sources":["../../src/tooltip/useTooltipAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface TooltipAnchoredPositionHookProps {\n  anchorElement: RefObject<HTMLElement>;\n  placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, tooltip: DOMRect) =>\n  tooltip.height + pointerSize < anchor.top;\nconst roomLeft = (anchor: DOMRect, tooltip: DOMRect) =>\n  tooltip.width + pointerSize < anchor.left;\nconst roomRight = (anchor: DOMRect, tooltip: DOMRect) =>\n  anchor.right + tooltip.width + pointerSize < document.body.clientWidth;\nconst roomBelow = (anchor: DOMRect, tooltip: DOMRect) =>\n  document.body.clientHeight - anchor.bottom > tooltip.height + pointerSize;\n\nconst roomAvailableAtPlacement = (\n  placement: TooltipPlacement,\n  anchor: DOMRect,\n  tooltip: DOMRect\n) => {\n  switch (placement) {\n    case \"above\":\n      return roomAbove(anchor, tooltip);\n    case \"left\":\n      return roomLeft(anchor, tooltip);\n    case \"below\":\n      return roomBelow(anchor, tooltip);\n    case \"right\":\n      return roomRight(anchor, tooltip);\n    default:\n      throw Error(\"invalid tooltip placement\");\n  }\n};\n\ntype Position = { left: number; top: number };\ntype Positioner = (anchorRect: DOMRect, tooltipRect: DOMRect) => Position;\n\nconst positionAbove: Positioner = (anchor, tooltip) => ({\n  left: anchor.left - (tooltip.width - anchor.width) / 2,\n  top: anchor.top - (tooltip.height + pointerSize),\n});\n\nconst positionBelow: Positioner = (anchor, tooltip) => ({\n  left: anchor.left - (tooltip.width - anchor.width) / 2,\n  top: anchor.bottom + pointerSize,\n});\nconst positionLeft: Positioner = (anchor, tooltip) => ({\n  left: anchor.left - pointerSize - tooltip.width,\n  top: anchor.top - (tooltip.height - anchor.height) / 2,\n});\n\nconst positionRight: Positioner = (anchor, tooltip) => ({\n  left: anchor.right + pointerSize,\n  top: anchor.top - (tooltip.height - anchor.height) / 2,\n});\n\nconst positionAtPlacement = (\n  placement: TooltipPlacement,\n  anchor: DOMRect,\n  tooltip: DOMRect\n) => {\n  switch (placement) {\n    case \"above\":\n      return positionAbove(anchor, tooltip);\n    case \"left\":\n      return positionLeft(anchor, tooltip);\n    case \"below\":\n      return positionBelow(anchor, tooltip);\n    case \"right\":\n      return positionRight(anchor, tooltip);\n    default:\n      throw Error(\"invalid tooltip placement\");\n  }\n};\n\nconst keepWithinTheScreen = (\n  { height, width }: DOMRect,\n  position: Position\n) => {\n  const { clientWidth, clientHeight } = document.body;\n  let { left, top } = position;\n  if (left + width > clientWidth) {\n    left -= left + width - clientWidth;\n  }\n  if (left < 0) {\n    left = 0;\n  }\n  if (top + height > clientHeight) {\n    top -= top + height - clientHeight;\n  }\n  if (top < 0) {\n    top = 0;\n  }\n\n  return { left, top };\n};\n\nconst toCSSText = ({ left, top }: Position) =>\n  `left:${left}px;top:${top}px;opacity:1;`;\n\nconst getNextPlacement = (\n  placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n  if (Array.isArray(placement)) {\n    if (placement.length === 0) {\n      return [undefined, placement];\n    } else {\n      return [placement[0], placement.slice(1)];\n    }\n  } else {\n    return [placement, []];\n  }\n};\n\nexport const useTooltipAnchoredPosition = ({\n  anchorElement,\n  placement,\n}: TooltipAnchoredPositionHookProps) => {\n  const ref = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el && anchorElement.current) {\n        const anchorRect = anchorElement.current.getBoundingClientRect();\n        const tooltipRect = el.getBoundingClientRect();\n        let nextPlacement: TooltipPlacement | undefined;\n        let placements: TooltipPlacement | TooltipPlacement[] = placement;\n        [nextPlacement = \"right\", placements] = getNextPlacement(placements);\n        do {\n          if (\n            roomAvailableAtPlacement(nextPlacement, anchorRect, tooltipRect)\n          ) {\n            el.style.cssText = toCSSText(\n              keepWithinTheScreen(\n                tooltipRect,\n                positionAtPlacement(nextPlacement, anchorRect, tooltipRect)\n              )\n            );\n            el.dataset.align = nextPlacement;\n            return;\n          }\n          [nextPlacement, placements] = getNextPlacement(placements);\n        } while (nextPlacement);\n      }\n      el?.classList.remove(\"vuuHidden\");\n    },\n    [anchorElement, placement]\n  );\n  return ref;\n};\n"],"names":["useCallback"],"mappings":"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"}

package/esm/tooltip/Tooltip.css.js

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

package/esm/tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Portal } from '../portal/Portal.js';
-import { useAnchoredPosition } from './useAnchoredPosition.js';
+import { useTooltipAnchoredPosition } from './useTooltipAnchoredPosition.js';
 import cx from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
@@ -24,7 +24,7 @@ const Tooltip = ({
     css: tooltipCss,
     window: targetWindow
   });
-  const ref = useAnchoredPosition({
+  const ref = useTooltipAnchoredPosition({
     anchorElement,
     placement: placementProp
   });

package/esm/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from \"react\";\nimport { Portal } from \"../portal\";\nimport { TooltipPlacement, useAnchoredPosition } from \"./useAnchoredPosition\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tooltipCss from \"./Tooltip.css\";\n\nconst classBase = \"vuuTooltip\";\n\nexport type TooltipStatus = \"warning\" | \"error\" | \"info\";\nexport interface TooltipProps {\n  anchorElement: RefObject<HTMLElement>;\n  children: ReactNode;\n  className?: string;\n  id?: string;\n  onMouseEnter: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n  placement: TooltipPlacement | TooltipPlacement[];\n  status?: TooltipStatus;\n  style?: CSSProperties;\n}\n\nexport const Tooltip = ({\n  anchorElement,\n  children,\n  className,\n  id,\n  onMouseEnter,\n  onMouseLeave,\n  placement: placementProp,\n  status,\n  style: styleProp,\n}: TooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const ref = useAnchoredPosition({\n    anchorElement,\n    placement: placementProp,\n  });\n  return (\n    <Portal>\n      <div\n        className={cx(classBase, className, \"vuuHidden\", {\n          [`${classBase}-error`]: status === \"error\",\n        })}\n        id={id}\n        ref={ref}\n        style={{ ...styleProp, left: 0, top: 0 }}\n      >\n        <span\n          className={`${classBase}-content`}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </span>\n      </div>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,SAAY,GAAA,YAAA,CAAA;AAeX,MAAM,UAAU,CAAC;AAAA,EACtB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAO,EAAA,SAAA;AACT,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,MAAM,mBAAoB,CAAA;AAAA,IAC9B,aAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,GACZ,CAAA,CAAA;AACD,EAAA,2BACG,MACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,WAAa,EAAA;AAAA,QAC/C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,MAAW,KAAA,OAAA;AAAA,OACpC,CAAA;AAAA,MACD,EAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAO,EAAE,GAAG,WAAW,IAAM,EAAA,CAAA,EAAG,KAAK,CAAE,EAAA;AAAA,MAEvC,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,UACvB,YAAA;AAAA,UACA,YAAA;AAAA,UAEC,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from \"react\";\nimport { Portal } from \"../portal\";\nimport {\n  TooltipPlacement,\n  useTooltipAnchoredPosition,\n} from \"./useTooltipAnchoredPosition\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tooltipCss from \"./Tooltip.css\";\n\nconst classBase = \"vuuTooltip\";\n\nexport type TooltipStatus = \"warning\" | \"error\" | \"info\";\nexport interface TooltipProps {\n  anchorElement: RefObject<HTMLElement>;\n  children: ReactNode;\n  className?: string;\n  id?: string;\n  onMouseEnter: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n  placement: TooltipPlacement | TooltipPlacement[];\n  status?: TooltipStatus;\n  style?: CSSProperties;\n}\n\nexport const Tooltip = ({\n  anchorElement,\n  children,\n  className,\n  id,\n  onMouseEnter,\n  onMouseLeave,\n  placement: placementProp,\n  status,\n  style: styleProp,\n}: TooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const ref = useTooltipAnchoredPosition({\n    anchorElement,\n    placement: placementProp,\n  });\n  return (\n    <Portal>\n      <div\n        className={cx(classBase, className, \"vuuHidden\", {\n          [`${classBase}-error`]: status === \"error\",\n        })}\n        id={id}\n        ref={ref}\n        style={{ ...styleProp, left: 0, top: 0 }}\n      >\n        <span\n          className={`${classBase}-content`}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </span>\n      </div>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAYA,MAAM,SAAY,GAAA,YAAA,CAAA;AAeX,MAAM,UAAU,CAAC;AAAA,EACtB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAO,EAAA,SAAA;AACT,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,MAAM,0BAA2B,CAAA;AAAA,IACrC,aAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,GACZ,CAAA,CAAA;AACD,EAAA,2BACG,MACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,WAAa,EAAA;AAAA,QAC/C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,MAAW,KAAA,OAAA;AAAA,OACpC,CAAA;AAAA,MACD,EAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAO,EAAE,GAAG,WAAW,IAAM,EAAA,CAAA,EAAG,KAAK,CAAE,EAAA;AAAA,MAEvC,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,UACvB,YAAA;AAAA,UACA,YAAA;AAAA,UAEC,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/tooltip/useTooltip.js

@@ -4,7 +4,7 @@ import { useRef, useState, useCallback } from 'react';
 const useTooltip = ({
   anchorQuery = "*",
   id: idProp,
-  placement = "right",
+  placement = ["right", "above", "below"],
   tooltipContent
 }) => {
   const hideTooltipRef = useRef();

package/esm/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["import { queryClosest, useId } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactNode, useCallback, useRef, useState } from \"react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { TooltipPlacement } from \"./useAnchoredPosition\";\n\nexport interface TooltipHookProps {\n  anchorQuery?: string;\n  id: string;\n  placement?: TooltipPlacement | TooltipPlacement[];\n  tooltipContent: ReactNode;\n}\n\nexport const useTooltip = ({\n  anchorQuery = \"*\",\n  id: idProp,\n  placement = \"right\",\n  tooltipContent,\n}: TooltipHookProps) => {\n  const hideTooltipRef = useRef<() => void>();\n  const isHoveringRef = useRef(false);\n  const anchorElementRef = useRef<HTMLElement | null>(null);\n  const mouseEnterTimerRef = useRef<number | undefined>();\n  const mouseLeaveTimerRef = useRef<number | undefined>();\n  const [tooltipProps, setTooltipProps] = useState<TooltipProps | undefined>();\n\n  const id = useId(idProp);\n\n  const escapeListener = useCallback((evt: KeyboardEvent) => {\n    if (evt.key === \"Escape\") {\n      hideTooltipRef.current?.();\n    }\n  }, []);\n\n  hideTooltipRef.current = useCallback(() => {\n    setTooltipProps(undefined);\n    document.removeEventListener(\"keydown\", escapeListener);\n  }, [escapeListener]);\n\n  const handleMouseEnterTooltip = useCallback(() => {\n    window.clearTimeout(mouseLeaveTimerRef.current);\n  }, []);\n\n  const handleMouseLeaveTooltip = useCallback(() => {\n    hideTooltipRef.current?.();\n  }, []);\n\n  const hideTooltip = useCallback((defer = 0) => {\n    if (mouseEnterTimerRef.current) {\n      window.clearTimeout(mouseEnterTimerRef.current);\n      mouseEnterTimerRef.current = undefined;\n    } else if (hideTooltipRef.current) {\n      if (defer === 0) {\n        hideTooltipRef.current();\n      } else {\n        mouseLeaveTimerRef.current = window.setTimeout(\n          hideTooltipRef.current,\n          defer\n        );\n      }\n    }\n  }, []);\n\n  const showTooltip = useCallback(\n    (ref = anchorElementRef) => {\n      const { current: anchorEl } = ref;\n      if (anchorEl) {\n        setTooltipProps({\n          anchorElement: ref,\n          children: tooltipContent,\n          id: `${id}-tooltip`,\n          onMouseEnter: handleMouseEnterTooltip,\n          onMouseLeave: handleMouseLeaveTooltip,\n          placement: placement,\n        });\n        // register ESC listener\n        document.addEventListener(\"keydown\", escapeListener);\n      }\n      mouseEnterTimerRef.current = undefined;\n      hideTooltip(isHoveringRef.current ? 3000 : 1000);\n    },\n    [\n      escapeListener,\n      handleMouseEnterTooltip,\n      handleMouseLeaveTooltip,\n      hideTooltip,\n      id,\n      placement,\n      tooltipContent,\n    ]\n  );\n\n  const handleMouseEnter = useCallback(\n    (evt: MouseEvent) => {\n      isHoveringRef.current = true;\n      const el = queryClosest(evt.target, anchorQuery);\n      if (el) {\n        console.log(`el ${el.classList}`);\n        anchorElementRef.current = el;\n        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);\n      }\n    },\n    [anchorQuery, showTooltip]\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    isHoveringRef.current = false;\n    hideTooltip(200);\n  }, [hideTooltip]);\n\n  const anchorProps = {\n    \"aria-describedby\": `${id}-tooltip`,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n  };\n\n  return {\n    anchorProps,\n    hideTooltip,\n    showTooltip,\n    tooltipProps,\n  };\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,aAAa,CAAC;AAAA,EACzB,WAAc,GAAA,GAAA;AAAA,EACd,EAAI,EAAA,MAAA;AAAA,EACJ,SAAY,GAAA,OAAA;AAAA,EACZ,cAAA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,iBAAiB,MAAmB,EAAA,CAAA;AAC1C,EAAM,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA,CAAA;AAClC,EAAM,MAAA,gBAAA,GAAmB,OAA2B,IAAI,CAAA,CAAA;AACxD,EAAA,MAAM,qBAAqB,MAA2B,EAAA,CAAA;AACtD,EAAA,MAAM,qBAAqB,MAA2B,EAAA,CAAA;AACtD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAAmC,EAAA,CAAA;AAE3E,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,CAAC,GAAuB,KAAA;AACzD,IAAI,IAAA,GAAA,CAAI,QAAQ,QAAU,EAAA;AACxB,MAAA,cAAA,CAAe,OAAU,IAAA,CAAA;AAAA,KAC3B;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAe,cAAA,CAAA,OAAA,GAAU,YAAY,MAAM;AACzC,IAAA,eAAA,CAAgB,KAAS,CAAA,CAAA,CAAA;AACzB,IAAS,QAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA,CAAA;AAAA,GACxD,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,EAAM,MAAA,uBAAA,GAA0B,YAAY,MAAM;AAChD,IAAO,MAAA,CAAA,YAAA,CAAa,mBAAmB,OAAO,CAAA,CAAA;AAAA,GAChD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,uBAAA,GAA0B,YAAY,MAAM;AAChD,IAAA,cAAA,CAAe,OAAU,IAAA,CAAA;AAAA,GAC3B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,WAAc,GAAA,WAAA,CAAY,CAAC,KAAA,GAAQ,CAAM,KAAA;AAC7C,IAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,MAAO,MAAA,CAAA,YAAA,CAAa,mBAAmB,OAAO,CAAA,CAAA;AAC9C,MAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,KAC/B,MAAA,IAAW,eAAe,OAAS,EAAA;AACjC,MAAA,IAAI,UAAU,CAAG,EAAA;AACf,QAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,OAClB,MAAA;AACL,QAAA,kBAAA,CAAmB,UAAU,MAAO,CAAA,UAAA;AAAA,UAClC,cAAe,CAAA,OAAA;AAAA,UACf,KAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,MAAM,gBAAqB,KAAA;AAC1B,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,GAAA,CAAA;AAC9B,MAAA,IAAI,QAAU,EAAA;AACZ,QAAgB,eAAA,CAAA;AAAA,UACd,aAAe,EAAA,GAAA;AAAA,UACf,QAAU,EAAA,cAAA;AAAA,UACV,EAAA,EAAI,GAAG,EAAE,CAAA,QAAA,CAAA;AAAA,UACT,YAAc,EAAA,uBAAA;AAAA,UACd,YAAc,EAAA,uBAAA;AAAA,UACd,SAAA;AAAA,SACD,CAAA,CAAA;AAED,QAAS,QAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA,CAAA;AAAA,OACrD;AACA,MAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA,CAAA;AAC7B,MAAY,WAAA,CAAA,aAAA,CAAc,OAAU,GAAA,GAAA,GAAO,GAAI,CAAA,CAAA;AAAA,KACjD;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,uBAAA;AAAA,MACA,uBAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAoB,KAAA;AACnB,MAAA,aAAA,CAAc,OAAU,GAAA,IAAA,CAAA;AACxB,MAAA,MAAM,EAAK,GAAA,YAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,WAAW,CAAA,CAAA;AAC/C,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,GAAA,EAAM,EAAG,CAAA,SAAS,CAAE,CAAA,CAAA,CAAA;AAChC,QAAA,gBAAA,CAAiB,OAAU,GAAA,EAAA,CAAA;AAC3B,QAAA,kBAAA,CAAmB,OAAU,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAAA,OACjE;AAAA,KACF;AAAA,IACA,CAAC,aAAa,WAAW,CAAA;AAAA,GAC3B,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,aAAA,CAAc,OAAU,GAAA,KAAA,CAAA;AACxB,IAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,kBAAA,EAAoB,GAAG,EAAE,CAAA,QAAA,CAAA;AAAA,IACzB,YAAc,EAAA,gBAAA;AAAA,IACd,YAAc,EAAA,gBAAA;AAAA,GAChB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useTooltip.js","sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["import { queryClosest, useId } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactNode, useCallback, useRef, useState } from \"react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { TooltipPlacement } from \"./useTooltipAnchoredPosition\";\n\nexport interface TooltipHookProps {\n  anchorQuery?: string;\n  id: string;\n  placement?: TooltipPlacement | TooltipPlacement[];\n  tooltipContent: ReactNode;\n}\n\nexport const useTooltip = ({\n  anchorQuery = \"*\",\n  id: idProp,\n  placement = [\"right\", \"above\", \"below\"],\n  tooltipContent,\n}: TooltipHookProps) => {\n  const hideTooltipRef = useRef<() => void>();\n  const isHoveringRef = useRef(false);\n  const anchorElementRef = useRef<HTMLElement | null>(null);\n  const mouseEnterTimerRef = useRef<number | undefined>();\n  const mouseLeaveTimerRef = useRef<number | undefined>();\n  const [tooltipProps, setTooltipProps] = useState<TooltipProps | undefined>();\n\n  const id = useId(idProp);\n\n  const escapeListener = useCallback((evt: KeyboardEvent) => {\n    if (evt.key === \"Escape\") {\n      hideTooltipRef.current?.();\n    }\n  }, []);\n\n  hideTooltipRef.current = useCallback(() => {\n    setTooltipProps(undefined);\n    document.removeEventListener(\"keydown\", escapeListener);\n  }, [escapeListener]);\n\n  const handleMouseEnterTooltip = useCallback(() => {\n    window.clearTimeout(mouseLeaveTimerRef.current);\n  }, []);\n\n  const handleMouseLeaveTooltip = useCallback(() => {\n    hideTooltipRef.current?.();\n  }, []);\n\n  const hideTooltip = useCallback((defer = 0) => {\n    if (mouseEnterTimerRef.current) {\n      window.clearTimeout(mouseEnterTimerRef.current);\n      mouseEnterTimerRef.current = undefined;\n    } else if (hideTooltipRef.current) {\n      if (defer === 0) {\n        hideTooltipRef.current();\n      } else {\n        mouseLeaveTimerRef.current = window.setTimeout(\n          hideTooltipRef.current,\n          defer\n        );\n      }\n    }\n  }, []);\n\n  const showTooltip = useCallback(\n    (ref = anchorElementRef) => {\n      const { current: anchorEl } = ref;\n      if (anchorEl) {\n        setTooltipProps({\n          anchorElement: ref,\n          children: tooltipContent,\n          id: `${id}-tooltip`,\n          onMouseEnter: handleMouseEnterTooltip,\n          onMouseLeave: handleMouseLeaveTooltip,\n          placement: placement,\n        });\n        // register ESC listener\n        document.addEventListener(\"keydown\", escapeListener);\n      }\n      mouseEnterTimerRef.current = undefined;\n      hideTooltip(isHoveringRef.current ? 3000 : 1000);\n    },\n    [\n      escapeListener,\n      handleMouseEnterTooltip,\n      handleMouseLeaveTooltip,\n      hideTooltip,\n      id,\n      placement,\n      tooltipContent,\n    ]\n  );\n\n  const handleMouseEnter = useCallback(\n    (evt: MouseEvent) => {\n      isHoveringRef.current = true;\n      const el = queryClosest(evt.target, anchorQuery);\n      if (el) {\n        console.log(`el ${el.classList}`);\n        anchorElementRef.current = el;\n        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);\n      }\n    },\n    [anchorQuery, showTooltip]\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    isHoveringRef.current = false;\n    hideTooltip(200);\n  }, [hideTooltip]);\n\n  const anchorProps = {\n    \"aria-describedby\": `${id}-tooltip`,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n  };\n\n  return {\n    anchorProps,\n    hideTooltip,\n    showTooltip,\n    tooltipProps,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/tooltip/useTooltipAnchoredPosition.js

@@ -0,0 +1,115 @@
+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)) {
+    if (placement.length === 0) {
+      return [void 0, placement];
+    } else {
+      return [placement[0], placement.slice(1)];
+    }
+  } else {
+    return [placement, []];
+  }
+};
+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 };
+//# sourceMappingURL=useTooltipAnchoredPosition.js.map

package/esm/tooltip/useTooltipAnchoredPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipAnchoredPosition.js","sources":["../../src/tooltip/useTooltipAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface TooltipAnchoredPositionHookProps {\n  anchorElement: RefObject<HTMLElement>;\n  placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, tooltip: DOMRect) =>\n  tooltip.height + pointerSize < anchor.top;\nconst roomLeft = (anchor: DOMRect, tooltip: DOMRect) =>\n  tooltip.width + pointerSize < anchor.left;\nconst roomRight = (anchor: DOMRect, tooltip: DOMRect) =>\n  anchor.right + tooltip.width + pointerSize < document.body.clientWidth;\nconst roomBelow = (anchor: DOMRect, tooltip: DOMRect) =>\n  document.body.clientHeight - anchor.bottom > tooltip.height + pointerSize;\n\nconst roomAvailableAtPlacement = (\n  placement: TooltipPlacement,\n  anchor: DOMRect,\n  tooltip: DOMRect\n) => {\n  switch (placement) {\n    case \"above\":\n      return roomAbove(anchor, tooltip);\n    case \"left\":\n      return roomLeft(anchor, tooltip);\n    case \"below\":\n      return roomBelow(anchor, tooltip);\n    case \"right\":\n      return roomRight(anchor, tooltip);\n    default:\n      throw Error(\"invalid tooltip placement\");\n  }\n};\n\ntype Position = { left: number; top: number };\ntype Positioner = (anchorRect: DOMRect, tooltipRect: DOMRect) => Position;\n\nconst positionAbove: Positioner = (anchor, tooltip) => ({\n  left: anchor.left - (tooltip.width - anchor.width) / 2,\n  top: anchor.top - (tooltip.height + pointerSize),\n});\n\nconst positionBelow: Positioner = (anchor, tooltip) => ({\n  left: anchor.left - (tooltip.width - anchor.width) / 2,\n  top: anchor.bottom + pointerSize,\n});\nconst positionLeft: Positioner = (anchor, tooltip) => ({\n  left: anchor.left - pointerSize - tooltip.width,\n  top: anchor.top - (tooltip.height - anchor.height) / 2,\n});\n\nconst positionRight: Positioner = (anchor, tooltip) => ({\n  left: anchor.right + pointerSize,\n  top: anchor.top - (tooltip.height - anchor.height) / 2,\n});\n\nconst positionAtPlacement = (\n  placement: TooltipPlacement,\n  anchor: DOMRect,\n  tooltip: DOMRect\n) => {\n  switch (placement) {\n    case \"above\":\n      return positionAbove(anchor, tooltip);\n    case \"left\":\n      return positionLeft(anchor, tooltip);\n    case \"below\":\n      return positionBelow(anchor, tooltip);\n    case \"right\":\n      return positionRight(anchor, tooltip);\n    default:\n      throw Error(\"invalid tooltip placement\");\n  }\n};\n\nconst keepWithinTheScreen = (\n  { height, width }: DOMRect,\n  position: Position\n) => {\n  const { clientWidth, clientHeight } = document.body;\n  let { left, top } = position;\n  if (left + width > clientWidth) {\n    left -= left + width - clientWidth;\n  }\n  if (left < 0) {\n    left = 0;\n  }\n  if (top + height > clientHeight) {\n    top -= top + height - clientHeight;\n  }\n  if (top < 0) {\n    top = 0;\n  }\n\n  return { left, top };\n};\n\nconst toCSSText = ({ left, top }: Position) =>\n  `left:${left}px;top:${top}px;opacity:1;`;\n\nconst getNextPlacement = (\n  placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n  if (Array.isArray(placement)) {\n    if (placement.length === 0) {\n      return [undefined, placement];\n    } else {\n      return [placement[0], placement.slice(1)];\n    }\n  } else {\n    return [placement, []];\n  }\n};\n\nexport const useTooltipAnchoredPosition = ({\n  anchorElement,\n  placement,\n}: TooltipAnchoredPositionHookProps) => {\n  const ref = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el && anchorElement.current) {\n        const anchorRect = anchorElement.current.getBoundingClientRect();\n        const tooltipRect = el.getBoundingClientRect();\n        let nextPlacement: TooltipPlacement | undefined;\n        let placements: TooltipPlacement | TooltipPlacement[] = placement;\n        [nextPlacement = \"right\", placements] = getNextPlacement(placements);\n        do {\n          if (\n            roomAvailableAtPlacement(nextPlacement, anchorRect, tooltipRect)\n          ) {\n            el.style.cssText = toCSSText(\n              keepWithinTheScreen(\n                tooltipRect,\n                positionAtPlacement(nextPlacement, anchorRect, tooltipRect)\n              )\n            );\n            el.dataset.align = nextPlacement;\n            return;\n          }\n          [nextPlacement, placements] = getNextPlacement(placements);\n        } while (nextPlacement);\n      }\n      el?.classList.remove(\"vuuHidden\");\n    },\n    [anchorElement, placement]\n  );\n  return ref;\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.74",
+  "version": "0.8.75",
   "description": "VUU popup components - Context Menu, Dialog etc",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -7,10 +7,10 @@
     "@salt-ds/core": "1.27.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-types": "0.8.74",
-    "@vuu-ui/vuu-layout": "0.8.74",
-    "@vuu-ui/vuu-utils": "0.8.74",
-    "@vuu-ui/vuu-ui-controls": "0.8.74"
+    "@vuu-ui/vuu-data-types": "0.8.75",
+    "@vuu-ui/vuu-layout": "0.8.75",
+    "@vuu-ui/vuu-utils": "0.8.75",
+    "@vuu-ui/vuu-ui-controls": "0.8.75"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from "react";
-import { TooltipPlacement } from "./useAnchoredPosition";
+import { TooltipPlacement } from "./useTooltipAnchoredPosition";
 export type TooltipStatus = "warning" | "error" | "info";
 export interface TooltipProps {
     anchorElement: RefObject<HTMLElement>;

package/types/tooltip/useTooltip.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactNode } from "react";
 import { TooltipProps } from "./Tooltip";
-import { TooltipPlacement } from "./useAnchoredPosition";
+import { TooltipPlacement } from "./useTooltipAnchoredPosition";
 export interface TooltipHookProps {
     anchorQuery?: string;
     id: string;

package/types/tooltip/useTooltipAnchoredPosition.d.ts

@@ -0,0 +1,7 @@
+import { RefCallback, RefObject } from "react";
+export type TooltipPlacement = "above" | "right" | "below" | "left";
+export interface TooltipAnchoredPositionHookProps {
+    anchorElement: RefObject<HTMLElement>;
+    placement: TooltipPlacement | TooltipPlacement[];
+}
+export declare const useTooltipAnchoredPosition: ({ anchorElement, placement, }: TooltipAnchoredPositionHookProps) => RefCallback<HTMLDivElement>;

package/cjs/tooltip/useAnchoredPosition.js

@@ -1,71 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const pointerSize = 12;
-const roomAbove = (anchor, height) => height < anchor.top;
-const roomBelow = (anchor, height) => document.body.clientHeight - anchor.bottom > height;
-const getNextPlacement = (placement) => {
-  if (Array.isArray(placement)) {
-    if (placement.length === 0) {
-      return [void 0, placement];
-    } else {
-      return [placement[0], placement.slice(1)];
-    }
-  } else {
-    return [placement, []];
-  }
-};
-const useAnchoredPosition = ({
-  anchorElement,
-  offsetLeft = 0,
-  offsetTop = 0,
-  placement
-}) => {
-  const ref = React.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 right");
-              break;
-            case "left":
-              console.log("place left");
-              break;
-            default:
-              console.warn(`unklnown tooltip placement ${placement}`);
-          }
-        } while (nextPlacement);
-      }
-    },
-    [anchorElement, placement]
-  );
-  React.useLayoutEffect(() => {
-  }, [anchorElement, offsetLeft, offsetTop, placement]);
-  return ref;
-};
-
-exports.useAnchoredPosition = useAnchoredPosition;
-//# sourceMappingURL=useAnchoredPosition.js.map

package/cjs/tooltip/useAnchoredPosition.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAnchoredPosition.js","sources":["../../src/tooltip/useAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback, useLayoutEffect } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface AnchoredPositionHookProps {\n  anchorElement: RefObject<HTMLElement>;\n  offsetLeft?: number;\n  offsetTop?: number;\n  placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, height: number) => height < anchor.top;\nconst roomBelow = (anchor: DOMRect, height: number) =>\n  document.body.clientHeight - anchor.bottom > height;\n\nconst getNextPlacement = (\n  placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n  if (Array.isArray(placement)) {\n    if (placement.length === 0) {\n      return [undefined, placement];\n    } else {\n      return [placement[0], placement.slice(1)];\n    }\n  } else {\n    return [placement, []];\n  }\n};\n\nexport const useAnchoredPosition = ({\n  anchorElement,\n  offsetLeft = 0,\n  offsetTop = 0,\n  placement,\n}: AnchoredPositionHookProps) => {\n  const ref = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el && anchorElement.current) {\n        const anchor = anchorElement.current.getBoundingClientRect();\n        const { height, width } = el.getBoundingClientRect();\n        let nextPlacement: TooltipPlacement | undefined;\n        let placements: TooltipPlacement | TooltipPlacement[] = placement;\n        do {\n          [nextPlacement, placements] = getNextPlacement(placements);\n          switch (nextPlacement) {\n            case \"above\":\n              if (roomAbove(anchor, height + pointerSize)) {\n                const midDiff = (width - anchor.width) / 2;\n                el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n                  anchor.top - height - pointerSize\n                }px;opacity: 1;`;\n                el.dataset.align = \"above\";\n                return;\n              }\n              break;\n            case \"below\":\n              if (roomBelow(anchor, height + pointerSize)) {\n                const midDiff = (width - anchor.width) / 2;\n                el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n                  anchor.bottom + pointerSize\n                }px;opacity: 1;`;\n                el.dataset.align = \"below\";\n                return;\n              }\n              break;\n\n            case \"right\":\n              console.log(\"place right\");\n              break;\n            case \"left\":\n              console.log(\"place left\");\n              break;\n            default:\n              console.warn(`unklnown tooltip placement ${placement}`);\n          }\n        } while (nextPlacement);\n      }\n\n      // el?.classList.remove(\"vuuHidden\");\n    },\n    [anchorElement, placement]\n  );\n  // const [position, setPosition] = useState<\n  //   { left: number; top: number } | undefined\n  // >();\n\n  // maybe better as useMemo ?\n  useLayoutEffect(() => {\n    // if (anchorElement.current) {\n    //   const position = getPositionRelativeToAnchor(\n    //     anchorElement.current,\n    //     placement,\n    //     offsetLeft,\n    //     offsetTop\n    //   );\n    //   setPosition(position);\n    // }\n  }, [anchorElement, offsetLeft, offsetTop, placement]);\n\n  return ref;\n};\n"],"names":["useCallback","useLayoutEffect"],"mappings":"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"}

package/esm/tooltip/useAnchoredPosition.js

@@ -1,69 +0,0 @@
-import { useCallback, useLayoutEffect } from 'react';
-
-const pointerSize = 12;
-const roomAbove = (anchor, height) => height < anchor.top;
-const roomBelow = (anchor, height) => document.body.clientHeight - anchor.bottom > height;
-const getNextPlacement = (placement) => {
-  if (Array.isArray(placement)) {
-    if (placement.length === 0) {
-      return [void 0, placement];
-    } else {
-      return [placement[0], placement.slice(1)];
-    }
-  } else {
-    return [placement, []];
-  }
-};
-const useAnchoredPosition = ({
-  anchorElement,
-  offsetLeft = 0,
-  offsetTop = 0,
-  placement
-}) => {
-  const ref = 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 right");
-              break;
-            case "left":
-              console.log("place left");
-              break;
-            default:
-              console.warn(`unklnown tooltip placement ${placement}`);
-          }
-        } while (nextPlacement);
-      }
-    },
-    [anchorElement, placement]
-  );
-  useLayoutEffect(() => {
-  }, [anchorElement, offsetLeft, offsetTop, placement]);
-  return ref;
-};
-
-export { useAnchoredPosition };
-//# sourceMappingURL=useAnchoredPosition.js.map

package/esm/tooltip/useAnchoredPosition.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAnchoredPosition.js","sources":["../../src/tooltip/useAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback, useLayoutEffect } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface AnchoredPositionHookProps {\n  anchorElement: RefObject<HTMLElement>;\n  offsetLeft?: number;\n  offsetTop?: number;\n  placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, height: number) => height < anchor.top;\nconst roomBelow = (anchor: DOMRect, height: number) =>\n  document.body.clientHeight - anchor.bottom > height;\n\nconst getNextPlacement = (\n  placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n  if (Array.isArray(placement)) {\n    if (placement.length === 0) {\n      return [undefined, placement];\n    } else {\n      return [placement[0], placement.slice(1)];\n    }\n  } else {\n    return [placement, []];\n  }\n};\n\nexport const useAnchoredPosition = ({\n  anchorElement,\n  offsetLeft = 0,\n  offsetTop = 0,\n  placement,\n}: AnchoredPositionHookProps) => {\n  const ref = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el && anchorElement.current) {\n        const anchor = anchorElement.current.getBoundingClientRect();\n        const { height, width } = el.getBoundingClientRect();\n        let nextPlacement: TooltipPlacement | undefined;\n        let placements: TooltipPlacement | TooltipPlacement[] = placement;\n        do {\n          [nextPlacement, placements] = getNextPlacement(placements);\n          switch (nextPlacement) {\n            case \"above\":\n              if (roomAbove(anchor, height + pointerSize)) {\n                const midDiff = (width - anchor.width) / 2;\n                el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n                  anchor.top - height - pointerSize\n                }px;opacity: 1;`;\n                el.dataset.align = \"above\";\n                return;\n              }\n              break;\n            case \"below\":\n              if (roomBelow(anchor, height + pointerSize)) {\n                const midDiff = (width - anchor.width) / 2;\n                el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n                  anchor.bottom + pointerSize\n                }px;opacity: 1;`;\n                el.dataset.align = \"below\";\n                return;\n              }\n              break;\n\n            case \"right\":\n              console.log(\"place right\");\n              break;\n            case \"left\":\n              console.log(\"place left\");\n              break;\n            default:\n              console.warn(`unklnown tooltip placement ${placement}`);\n          }\n        } while (nextPlacement);\n      }\n\n      // el?.classList.remove(\"vuuHidden\");\n    },\n    [anchorElement, placement]\n  );\n  // const [position, setPosition] = useState<\n  //   { left: number; top: number } | undefined\n  // >();\n\n  // maybe better as useMemo ?\n  useLayoutEffect(() => {\n    // if (anchorElement.current) {\n    //   const position = getPositionRelativeToAnchor(\n    //     anchorElement.current,\n    //     placement,\n    //     offsetLeft,\n    //     offsetTop\n    //   );\n    //   setPosition(position);\n    // }\n  }, [anchorElement, offsetLeft, offsetTop, placement]);\n\n  return ref;\n};\n"],"names":[],"mappings":"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"}

package/types/tooltip/useAnchoredPosition.d.ts

@@ -1,9 +0,0 @@
-import { RefCallback, RefObject } from "react";
-export type TooltipPlacement = "above" | "right" | "below" | "left";
-export interface AnchoredPositionHookProps {
-    anchorElement: RefObject<HTMLElement>;
-    offsetLeft?: number;
-    offsetTop?: number;
-    placement: TooltipPlacement | TooltipPlacement[];
-}
-export declare const useAnchoredPosition: ({ anchorElement, offsetLeft, offsetTop, placement, }: AnchoredPositionHookProps) => RefCallback<HTMLDivElement>;