@vuu-ui/vuu-popups 0.8.74 → 0.8.76

package/cjs/notifications/NotificationsProvider.js

@@ -4,14 +4,36 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var NotificationsCenter = require('./NotificationsCenter.js');
 
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _notify;
 class NotificationsContextObject {
   constructor() {
-    this.notify = () => console.log("have you forgotten to provide a NotificationsCenter?");
+    __privateAdd(this, _notify, () => console.log("have you forgotten to provide a NotificationsCenter?"));
+    // We want the public notify method to be stable, setNotify call should not trigger re-renders
+    this.notify = (notification) => __privateGet(this, _notify).call(this, notification);
     this.setNotify = (dispatcher) => {
-      this.notify = dispatcher;
+      __privateSet(this, _notify, dispatcher);
     };
   }
 }
+_notify = new WeakMap();
 const NotificationsContext = React.createContext(
   new NotificationsContextObject()
 );

package/cjs/notifications/NotificationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsProvider.js","sources":["../../src/notifications/NotificationsProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport { Notification } from \"./notificationTypes\";\n\nexport type DispatchNotification = (\n  notification: Omit<Notification, \"id\">\n) => void;\n\nexport type NotificationsContext = {\n  notify: DispatchNotification;\n  setNotify: (dispatcher: DispatchNotification) => void;\n};\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  notify: DispatchNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  setNotify = (dispatcher: DispatchNotification) => {\n    this.notify = dispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject()\n);\n\nexport const NotificationsProvider = (props: {\n  children: JSX.Element | JSX.Element[];\n}) => {\n  const context = useContext(NotificationsContext);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter notificationsContext={context} />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { notify } = useContext(NotificationsContext);\n  return notify;\n};\n"],"names":["useContext","jsxs","jsx","NotificationsCenter"],"mappings":";;;;;;AAsBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAA+B,IAAA,CAAA,MAAA,GAAA,MAC7B,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AACpE,IAAA,IAAA,CAAA,SAAA,GAAY,CAAC,UAAqC,KAAA;AAChD,MAAA,IAAA,CAAK,MAAS,GAAA,UAAA,CAAA;AAAA,KAChB,CAAA;AAAA,GAAA;AACF,CAAA;AAEA,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B,EAAA;AACjC,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUA,iBAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAA,uBACGC,eAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,uCAAA,EAAA,EAAoB,sBAAsB,OAAS,EAAA,CAAA;AAAA,IACnD,KAAM,CAAA,QAAA;AAAA,GACT,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,MAAA,EAAW,GAAAH,gBAAA,CAAW,oBAAoB,CAAA,CAAA;AAClD,EAAO,OAAA,MAAA,CAAA;AACT;;;;;"}
+{"version":3,"file":"NotificationsProvider.js","sources":["../../src/notifications/NotificationsProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport { Notification } from \"./notificationTypes\";\n\nexport type DispatchNotification = (\n  notification: Omit<Notification, \"id\">\n) => void;\n\nexport type NotificationsContext = {\n  notify: DispatchNotification;\n  setNotify: (dispatcher: DispatchNotification) => void;\n};\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  #notify: DispatchNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  // We want the public notify method to be stable, setNotify call should not trigger re-renders\n  notify: DispatchNotification = (notification) => this.#notify(notification);\n  setNotify = (dispatcher: DispatchNotification) => {\n    this.#notify = dispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject()\n);\n\nexport const NotificationsProvider = (props: {\n  children: JSX.Element | JSX.Element[];\n}) => {\n  const context = useContext(NotificationsContext);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter notificationsContext={context} />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { notify } = useContext(NotificationsContext);\n  return notify;\n};\n"],"names":["useContext","jsxs","jsx","NotificationsCenter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,OAAA,CAAA;AAsBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAAgC,YAAA,CAAA,IAAA,EAAA,OAAA,EAAA,MAC9B,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA,CAAA;AAEpE;AAAA,IAAA,IAAA,CAAA,MAAA,GAA+B,CAAC,YAAA,KAAiB,YAAK,CAAA,IAAA,EAAA,OAAA,CAAA,CAAL,IAAa,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AAC9D,IAAA,IAAA,CAAA,SAAA,GAAY,CAAC,UAAqC,KAAA;AAChD,MAAA,YAAA,CAAA,IAAA,EAAK,OAAU,EAAA,UAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAAA,GAAA;AACF,CAAA;AAPE,OAAA,GAAA,IAAA,OAAA,EAAA,CAAA;AASF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B,EAAA;AACjC,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUA,iBAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAA,uBACGC,eAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,uCAAA,EAAA,EAAoB,sBAAsB,OAAS,EAAA,CAAA;AAAA,IACnD,KAAM,CAAA,QAAA;AAAA,GACT,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,MAAA,EAAW,GAAAH,gBAAA,CAAW,oBAAoB,CAAA,CAAA;AAClD,EAAO,OAAA,MAAA,CAAA;AACT;;;;;"}

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/notifications/NotificationsProvider.js

@@ -2,14 +2,36 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useContext } from 'react';
 import { NotificationsCenter } from './NotificationsCenter.js';
 
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _notify;
 class NotificationsContextObject {
   constructor() {
-    this.notify = () => console.log("have you forgotten to provide a NotificationsCenter?");
+    __privateAdd(this, _notify, () => console.log("have you forgotten to provide a NotificationsCenter?"));
+    // We want the public notify method to be stable, setNotify call should not trigger re-renders
+    this.notify = (notification) => __privateGet(this, _notify).call(this, notification);
     this.setNotify = (dispatcher) => {
-      this.notify = dispatcher;
+      __privateSet(this, _notify, dispatcher);
     };
   }
 }
+_notify = new WeakMap();
 const NotificationsContext = React.createContext(
   new NotificationsContextObject()
 );

package/esm/notifications/NotificationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsProvider.js","sources":["../../src/notifications/NotificationsProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport { Notification } from \"./notificationTypes\";\n\nexport type DispatchNotification = (\n  notification: Omit<Notification, \"id\">\n) => void;\n\nexport type NotificationsContext = {\n  notify: DispatchNotification;\n  setNotify: (dispatcher: DispatchNotification) => void;\n};\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  notify: DispatchNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  setNotify = (dispatcher: DispatchNotification) => {\n    this.notify = dispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject()\n);\n\nexport const NotificationsProvider = (props: {\n  children: JSX.Element | JSX.Element[];\n}) => {\n  const context = useContext(NotificationsContext);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter notificationsContext={context} />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { notify } = useContext(NotificationsContext);\n  return notify;\n};\n"],"names":[],"mappings":";;;;AAsBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAA+B,IAAA,CAAA,MAAA,GAAA,MAC7B,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AACpE,IAAA,IAAA,CAAA,SAAA,GAAY,CAAC,UAAqC,KAAA;AAChD,MAAA,IAAA,CAAK,MAAS,GAAA,UAAA,CAAA;AAAA,KAChB,CAAA;AAAA,GAAA;AACF,CAAA;AAEA,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B,EAAA;AACjC,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAA,uBACG,IAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,mBAAA,EAAA,EAAoB,sBAAsB,OAAS,EAAA,CAAA;AAAA,IACnD,KAAM,CAAA,QAAA;AAAA,GACT,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,MAAA,EAAW,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAA;AAClD,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"NotificationsProvider.js","sources":["../../src/notifications/NotificationsProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport { Notification } from \"./notificationTypes\";\n\nexport type DispatchNotification = (\n  notification: Omit<Notification, \"id\">\n) => void;\n\nexport type NotificationsContext = {\n  notify: DispatchNotification;\n  setNotify: (dispatcher: DispatchNotification) => void;\n};\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  #notify: DispatchNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  // We want the public notify method to be stable, setNotify call should not trigger re-renders\n  notify: DispatchNotification = (notification) => this.#notify(notification);\n  setNotify = (dispatcher: DispatchNotification) => {\n    this.#notify = dispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject()\n);\n\nexport const NotificationsProvider = (props: {\n  children: JSX.Element | JSX.Element[];\n}) => {\n  const context = useContext(NotificationsContext);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter notificationsContext={context} />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { notify } = useContext(NotificationsContext);\n  return notify;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,OAAA,CAAA;AAsBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAAgC,YAAA,CAAA,IAAA,EAAA,OAAA,EAAA,MAC9B,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA,CAAA;AAEpE;AAAA,IAAA,IAAA,CAAA,MAAA,GAA+B,CAAC,YAAA,KAAiB,YAAK,CAAA,IAAA,EAAA,OAAA,CAAA,CAAL,IAAa,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AAC9D,IAAA,IAAA,CAAA,SAAA,GAAY,CAAC,UAAqC,KAAA;AAChD,MAAA,YAAA,CAAA,IAAA,EAAK,OAAU,EAAA,UAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAAA,GAAA;AACF,CAAA;AAPE,OAAA,GAAA,IAAA,OAAA,EAAA,CAAA;AASF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B,EAAA;AACjC,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAA,uBACG,IAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,mBAAA,EAAA,EAAoB,sBAAsB,OAAS,EAAA,CAAA;AAAA,IACnD,KAAM,CAAA,QAAA;AAAA,GACT,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,MAAA,EAAW,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAA;AAClD,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

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":"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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":[],"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.76",
   "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.76",
+    "@vuu-ui/vuu-layout": "0.8.76",
+    "@vuu-ui/vuu-utils": "0.8.76",
+    "@vuu-ui/vuu-ui-controls": "0.8.76"
   },
   "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>;