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

package/esm/popup-menu/usePopupMenu.js

@@ -1,98 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-import { getPositionRelativeToAnchor } from '../popup/getPositionRelativeToAnchor.js';
-import { useContextMenu } from '@vuu-ui/vuu-context-menu';
-
-const usePopupMenu = ({
-  anchorElement,
-  "aria-label": ariaLabel = "Popup menu",
-  id,
-  menuActionHandler,
-  menuBuilder,
-  menuLocation,
-  menuOptions,
-  onMenuClose,
-  onMenuOpen,
-  popupPlacement,
-  tabIndex
-}) => {
-  const [menuOpen, _setMenuOpen] = useState(false);
-  const suppressShowMenuRef = useRef(false);
-  const rootRef = useRef(null);
-  const setMenuOpen = useCallback(
-    (isOpen) => {
-      _setMenuOpen(isOpen);
-      if (isOpen) {
-        onMenuOpen?.();
-        setTimeout(() => {
-          const firstOption = document.activeElement?.querySelector(
-            ".saltMenuItem"
-          );
-          firstOption?.focus();
-        }, 40);
-      } else {
-        suppressShowMenuRef.current = false;
-      }
-    },
-    [onMenuOpen]
-  );
-  const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);
-  const handleMenuOpenChange = useCallback(
-    (isOpen) => {
-      if (!isOpen) {
-        setMenuOpen(false);
-        onMenuClose?.();
-      }
-    },
-    [onMenuClose, setMenuOpen]
-  );
-  const showMenu = useCallback(
-    (e) => {
-      if (suppressShowMenuRef.current) {
-        suppressShowMenuRef.current = false;
-      } else {
-        suppressShowMenuRef.current = true;
-        const anchorEl = anchorElement?.current ?? rootRef.current;
-        if (anchorEl) {
-          const {
-            left: x,
-            top: y
-            // width,
-          } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);
-          setMenuOpen(true);
-          showContextMenu(e, menuLocation, menuOptions, {
-            // className: menuClassName,
-            // id: `${id}-menu`,
-            onOpenChange: handleMenuOpenChange,
-            x,
-            y
-            // style: { width: width ? width - 2 : undefined },
-          });
-        }
-      }
-    },
-    [
-      anchorElement,
-      popupPlacement,
-      setMenuOpen,
-      showContextMenu,
-      menuLocation,
-      menuOptions,
-      handleMenuOpenChange
-    ]
-  );
-  const ariaAttributes = {
-    "aria-controls": menuOpen ? `${id}-menu` : void 0,
-    "aria-label": ariaLabel,
-    "aria-expanded": menuOpen,
-    "aria-haspopup": "menu"
-  };
-  const buttonProps = {
-    id,
-    onClick: showMenu,
-    tabIndex
-  };
-  return { ariaAttributes, buttonProps, menuOpen, rootRef };
-};
-
-export { usePopupMenu };
-//# sourceMappingURL=usePopupMenu.js.map

package/esm/popup-menu/usePopupMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePopupMenu.js","sources":["../../../../packages/vuu-popups/src/popup-menu/usePopupMenu.ts"],"sourcesContent":["import {\n  AriaAttributes,\n  MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { PopupMenuProps } from \"./PopupMenu\";\nimport { getPositionRelativeToAnchor } from \"../popup/getPositionRelativeToAnchor\";\nimport { PopupPlacement } from \"../popup/Popup\";\nimport { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface PopupMenuHookProps\n  extends Pick<\n    PopupMenuProps,\n    | \"anchorElement\"\n    | \"aria-label\"\n    | \"menuActionHandler\"\n    | \"menuBuilder\"\n    | \"menuClassName\"\n    | \"menuOptions\"\n    | \"onMenuClose\"\n    | \"onMenuOpen\"\n  > {\n  id: string;\n  menuLocation: string;\n  popupPlacement: PopupPlacement;\n  tabIndex: number;\n}\n\nexport const usePopupMenu = ({\n  anchorElement,\n  \"aria-label\": ariaLabel = \"Popup menu\",\n  id,\n  menuActionHandler,\n  menuBuilder,\n  menuLocation,\n  menuOptions,\n  onMenuClose,\n  onMenuOpen,\n  popupPlacement,\n  tabIndex,\n}: PopupMenuHookProps) => {\n  const [menuOpen, _setMenuOpen] = useState(false);\n  const suppressShowMenuRef = useRef(false);\n  const rootRef = useRef<HTMLButtonElement>(null);\n\n  const setMenuOpen = useCallback(\n    (isOpen: boolean) => {\n      _setMenuOpen(isOpen);\n      if (isOpen) {\n        onMenuOpen?.();\n        setTimeout(() => {\n          const firstOption = document.activeElement?.querySelector(\n            \".saltMenuItem\",\n          ) as HTMLElement;\n          firstOption?.focus();\n        }, 40);\n      } else {\n        suppressShowMenuRef.current = false;\n      }\n    },\n    [onMenuOpen],\n  );\n\n  const showContextMenu = useContextMenu(menuBuilder, menuActionHandler);\n\n  const handleMenuOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        setMenuOpen(false);\n        onMenuClose?.();\n      }\n    },\n    [onMenuClose, setMenuOpen],\n  );\n\n  const showMenu = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (suppressShowMenuRef.current) {\n        suppressShowMenuRef.current = false;\n      } else {\n        suppressShowMenuRef.current = true;\n        const anchorEl = anchorElement?.current ?? rootRef.current;\n        if (anchorEl) {\n          const {\n            left: x,\n            top: y,\n            // width,\n          } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);\n          setMenuOpen(true);\n\n          showContextMenu(e, menuLocation, menuOptions, {\n            // className: menuClassName,\n            // id: `${id}-menu`,\n            onOpenChange: handleMenuOpenChange,\n            x,\n            y,\n            // style: { width: width ? width - 2 : undefined },\n          });\n        }\n      }\n    },\n    [\n      anchorElement,\n      popupPlacement,\n      setMenuOpen,\n      showContextMenu,\n      menuLocation,\n      menuOptions,\n      handleMenuOpenChange,\n    ],\n  );\n\n  const ariaAttributes: AriaAttributes = {\n    \"aria-controls\": menuOpen ? `${id}-menu` : undefined,\n    \"aria-label\": ariaLabel,\n    \"aria-expanded\": menuOpen,\n    \"aria-haspopup\": \"menu\",\n  };\n\n  const buttonProps = {\n    id,\n    onClick: showMenu,\n    tabIndex,\n  };\n\n  return { ariaAttributes, buttonProps, menuOpen, rootRef };\n};\n"],"names":[],"mappings":"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"}

package/esm/portal/Portal.css.js

@@ -1,4 +0,0 @@
-var portalCss = "/*\nThere is work to do to sort out styling across Portal/Popup/Draggable\n*/\n.vuuPortal {\n    position: absolute;\n    z-index: 100;\n}\n\n.vuuPortal:not(.vuuPopup) {\n    background-color: var(--salt-container-primary-background);\n    border-radius:4px;\n    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n    border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));\n    border-style: solid;\n    border-width: 1px;\n    padding: 4px 0;\n}\n\n.vuuPortal:has(.vuuDropdown-popup-component.vuuList-empty){\n    display: none;\n}\n\n#vuu-portal-root {\n    z-index: 1000;\n}";
-
-export { portalCss as default };
-//# sourceMappingURL=Portal.css.js.map

package/esm/portal/Portal.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Portal.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/portal/Portal.js

@@ -1,71 +0,0 @@
-import { useThemeAttributes } from '@vuu-ui/vuu-utils';
-import { useState, useRef, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import portalCss from './Portal.css.js';
-
-function getContainer(container) {
-  return typeof container === "function" ? container() : container;
-}
-const DEFAULT_ID = ["vuu-dialog-portal-root", "vuu-portal-root"];
-const getFirstAvailableElementById = (id) => {
-  if (Array.isArray(id)) {
-    for (const i of id) {
-      const element = document.getElementById(i);
-      if (element) {
-        return element;
-      }
-    }
-  } else {
-    return document.getElementById(id);
-  }
-  return null;
-};
-const Portal = ({
-  children,
-  container: containerProp = document.body,
-  id = DEFAULT_ID,
-  onRender,
-  open = true,
-  themeAttributes
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-portal",
-    css: portalCss,
-    window: targetWindow
-  });
-  const [mounted, setMounted] = useState(false);
-  const portalRef = useRef(null);
-  const container = getContainer(containerProp) ?? document.body;
-  const [themeClass, densityClass, dataMode] = useThemeAttributes(themeAttributes);
-  useLayoutEffect(() => {
-    const root = getFirstAvailableElementById(id);
-    if (root) {
-      portalRef.current = root;
-    } else {
-      portalRef.current = document.createElement("div");
-      portalRef.current.id = typeof id === "string" ? id : id.length > 0 ? id.at(-1) : "vuu-portal-root";
-    }
-    const el = portalRef.current;
-    if (!container.contains(el)) {
-      container.appendChild(el);
-    }
-    el.classList.add(themeClass, densityClass);
-    el.dataset.mode = dataMode;
-    setMounted(true);
-  }, [id, container, themeClass, densityClass, dataMode]);
-  useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      onRender?.();
-    });
-  }, [onRender]);
-  if (open && mounted && portalRef.current && children) {
-    return createPortal(children, portalRef.current);
-  }
-  return null;
-};
-
-export { Portal };
-//# sourceMappingURL=Portal.js.map

package/esm/portal/Portal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Portal.js","sources":["../../../../packages/vuu-popups/src/portal/Portal.tsx"],"sourcesContent":["import { ThemeAttributes, useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport portalCss from \"./Portal.css\";\n\nexport interface PortalProps {\n  /**\n   * The children to render into the `container`.\n   */\n  children?: ReactNode;\n  /**\n   * An HTML element, component instance, or function that returns either.\n   * The `container` will have the portal children appended to it.\n   *\n   * By default, it uses the body of the top-level document object,\n   * so it's simply `document.body` most of the time.\n   */\n  container?: Element | (() => Element | null) | null;\n  /**\n   * Id of element into which portal will be rendered. If this node does not exist on the document,\n   * it will be created for you. If more than one value is provided, the first element found will\n   * be used.\n   */\n  id?: string | string[];\n  /**\n   * Callback invoked immediately after render (in layoutEffect). Can be\n   * used to check position vis-a-vis viewport and adjust if out of bounds\n   */\n  onRender?: () => void;\n  /**\n   * Allow conditional rendering of this Portal, if false, will render nothing.\n   * Defaults to true\n   */\n  open?: boolean;\n  /**\n   * ThemeAttributes can be passed in for cases where ContextMenu is\n   * rendered via popup-service showPopup, outside the Context hierarchy.\n   */\n  themeAttributes?: ThemeAttributes;\n}\n\nfunction getContainer(container: PortalProps[\"container\"]) {\n  return typeof container === \"function\" ? container() : container;\n}\n\nconst DEFAULT_ID = [\"vuu-dialog-portal-root\", \"vuu-portal-root\"];\n\nconst getFirstAvailableElementById = (id: string | string[]) => {\n  if (Array.isArray(id)) {\n    for (const i of id) {\n      const element = document.getElementById(i);\n      if (element) {\n        return element;\n      }\n    }\n  } else {\n    return document.getElementById(id);\n  }\n  return null;\n};\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal = ({\n  children,\n  container: containerProp = document.body,\n  id = DEFAULT_ID,\n  onRender,\n  open = true,\n  themeAttributes,\n}: PortalProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-portal\",\n    css: portalCss,\n    window: targetWindow,\n  });\n\n  const [mounted, setMounted] = useState(false);\n  const portalRef = useRef<HTMLElement | null>(null);\n  const container = getContainer(containerProp) ?? document.body;\n  const [themeClass, densityClass, dataMode] =\n    useThemeAttributes(themeAttributes);\n\n  useLayoutEffect(() => {\n    const root = getFirstAvailableElementById(id);\n    if (root) {\n      portalRef.current = root;\n    } else {\n      portalRef.current = document.createElement(\"div\");\n      portalRef.current.id =\n        typeof id === \"string\"\n          ? id\n          : id.length > 0\n            ? (id.at(-1) as string)\n            : \"vuu-portal-root\";\n    }\n    const el = portalRef.current;\n    if (!container.contains(el)) {\n      container.appendChild(el);\n    }\n    el.classList.add(themeClass, densityClass);\n    el.dataset.mode = dataMode;\n    setMounted(true);\n  }, [id, container, themeClass, densityClass, dataMode]);\n\n  useLayoutEffect(() => {\n    requestAnimationFrame(() => {\n      onRender?.();\n    });\n  }, [onRender]);\n\n  if (open && mounted && portalRef.current && children) {\n    return createPortal(children, portalRef.current);\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;;AA4CA,SAAS,aAAa,SAAqC,EAAA;AACzD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAa,GAAA,SAAA,EAAc,GAAA,SAAA;AACzD;AAEA,MAAM,UAAA,GAAa,CAAC,wBAAA,EAA0B,iBAAiB,CAAA;AAE/D,MAAM,4BAAA,GAA+B,CAAC,EAA0B,KAAA;AAC9D,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,EAAE,CAAG,EAAA;AACrB,IAAA,KAAA,MAAW,KAAK,EAAI,EAAA;AAClB,MAAM,MAAA,OAAA,GAAU,QAAS,CAAA,cAAA,CAAe,CAAC,CAAA;AACzC,MAAA,IAAI,OAAS,EAAA;AACX,QAAO,OAAA,OAAA;AAAA;AACT;AACF,GACK,MAAA;AACL,IAAO,OAAA,QAAA,CAAS,eAAe,EAAE,CAAA;AAAA;AAEnC,EAAO,OAAA,IAAA;AACT,CAAA;AAMO,MAAM,SAAS,CAAC;AAAA,EACrB,QAAA;AAAA,EACA,SAAA,EAAW,gBAAgB,QAAS,CAAA,IAAA;AAAA,EACpC,EAAK,GAAA,UAAA;AAAA,EACL,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP;AACF,CAAmB,KAAA;AACjB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAA,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AACjD,EAAA,MAAM,SAAY,GAAA,YAAA,CAAa,aAAa,CAAA,IAAK,QAAS,CAAA,IAAA;AAC1D,EAAA,MAAM,CAAC,UAAY,EAAA,YAAA,EAAc,QAAQ,CAAA,GACvC,mBAAmB,eAAe,CAAA;AAEpC,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAM,MAAA,IAAA,GAAO,6BAA6B,EAAE,CAAA;AAC5C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA;AAAA,KACf,MAAA;AACL,MAAU,SAAA,CAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA;AAChD,MAAA,SAAA,CAAU,OAAQ,CAAA,EAAA,GAChB,OAAO,EAAA,KAAO,QACV,GAAA,EAAA,GACA,EAAG,CAAA,MAAA,GAAS,CACT,GAAA,EAAA,CAAG,EAAG,CAAA,CAAA,CAAE,CACT,GAAA,iBAAA;AAAA;AAEV,IAAA,MAAM,KAAK,SAAU,CAAA,OAAA;AACrB,IAAA,IAAI,CAAC,SAAA,CAAU,QAAS,CAAA,EAAE,CAAG,EAAA;AAC3B,MAAA,SAAA,CAAU,YAAY,EAAE,CAAA;AAAA;AAE1B,IAAG,EAAA,CAAA,SAAA,CAAU,GAAI,CAAA,UAAA,EAAY,YAAY,CAAA;AACzC,IAAA,EAAA,CAAG,QAAQ,IAAO,GAAA,QAAA;AAClB,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,KACd,CAAC,EAAA,EAAI,WAAW,UAAY,EAAA,YAAA,EAAc,QAAQ,CAAC,CAAA;AAEtD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAW,QAAA,IAAA;AAAA,KACZ,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,IAAQ,IAAA,OAAA,IAAW,SAAU,CAAA,OAAA,IAAW,QAAU,EAAA;AACpD,IAAO,OAAA,YAAA,CAAa,QAAU,EAAA,SAAA,CAAU,OAAO,CAAA;AAAA;AAGjD,EAAO,OAAA,IAAA;AACT;;;;"}

package/esm/tooltip/Tooltip.css.js

@@ -1,4 +0,0 @@
-var tooltipCss = ".vuuTooltip {\n  --tooltip-align: flex-start;\n  --tooltip-background: var(--salt-actionable-bold-background-hover);\n  --tooltip-border: var(--salt-actionable-bold-background-hover);\n  --tooltip-color: var(--salt-actionable-bold-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.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/tooltip/Tooltip.js

@@ -1,54 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Portal } from '../portal/Portal.js';
-import { useTooltipAnchoredPosition } from './useTooltipAnchoredPosition.js';
-import cx from 'clsx';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import tooltipCss from './Tooltip.css.js';
-
-const classBase = "vuuTooltip";
-const Tooltip = ({
-  anchorElement,
-  children,
-  className,
-  id,
-  onMouseEnter,
-  onMouseLeave,
-  placement: placementProp,
-  status,
-  style: styleProp
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-tooltip",
-    css: tooltipCss,
-    window: targetWindow
-  });
-  const ref = useTooltipAnchoredPosition({
-    anchorElement,
-    placement: placementProp
-  });
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(classBase, className, "vuuHidden", {
-        [`${classBase}-error`]: status === "error"
-      }),
-      id,
-      ref,
-      style: { ...styleProp, left: 0, top: 0 },
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: `${classBase}-content`,
-          onMouseEnter,
-          onMouseLeave,
-          children
-        }
-      )
-    }
-  ) });
-};
-
-export { Tooltip };
-//# sourceMappingURL=Tooltip.js.map

package/esm/tooltip/Tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../packages/vuu-popups/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 | null>;\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;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;AACT,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,MAAM,0BAA2B,CAAA;AAAA,IACrC,aAAA;AAAA,IACA,SAAW,EAAA;AAAA,GACZ,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;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;AAAA;AAAA;AACH;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/esm/tooltip/useTooltip.js

@@ -1,104 +0,0 @@
-import { useId, queryClosest } from '@vuu-ui/vuu-utils';
-import { useRef, useState, useCallback } from 'react';
-
-const useTooltip = ({
-  anchorQuery = "*",
-  id: idProp,
-  placement = ["right", "above", "below"],
-  tooltipContent
-}) => {
-  const hideTooltipRef = useRef(void 0);
-  const isHoveringRef = useRef(false);
-  const anchorElementRef = useRef(null);
-  const mouseEnterTimerRef = useRef(void 0);
-  const mouseLeaveTimerRef = useRef(void 0);
-  const [tooltipProps, setTooltipProps] = useState();
-  const id = useId(idProp);
-  const escapeListener = useCallback((evt) => {
-    if (evt.key === "Escape") {
-      hideTooltipRef.current?.();
-    }
-  }, []);
-  hideTooltipRef.current = useCallback(() => {
-    setTooltipProps(void 0);
-    document.removeEventListener("keydown", escapeListener);
-  }, [escapeListener]);
-  const handleMouseEnterTooltip = useCallback(() => {
-    window.clearTimeout(mouseLeaveTimerRef.current);
-  }, []);
-  const handleMouseLeaveTooltip = useCallback(() => {
-    hideTooltipRef.current?.();
-  }, []);
-  const hideTooltip = useCallback((defer = 0) => {
-    if (mouseEnterTimerRef.current) {
-      window.clearTimeout(mouseEnterTimerRef.current);
-      mouseEnterTimerRef.current = void 0;
-    } else if (hideTooltipRef.current) {
-      if (defer === 0) {
-        hideTooltipRef.current();
-      } else {
-        mouseLeaveTimerRef.current = window.setTimeout(
-          hideTooltipRef.current,
-          defer
-        );
-      }
-    }
-  }, []);
-  const showTooltip = useCallback(
-    (ref = anchorElementRef) => {
-      const { current: anchorEl } = ref;
-      if (anchorEl) {
-        setTooltipProps({
-          anchorElement: ref,
-          children: tooltipContent,
-          id: `${id}-tooltip`,
-          onMouseEnter: handleMouseEnterTooltip,
-          onMouseLeave: handleMouseLeaveTooltip,
-          placement
-        });
-        document.addEventListener("keydown", escapeListener);
-      }
-      mouseEnterTimerRef.current = void 0;
-      hideTooltip(isHoveringRef.current ? 3e3 : 1e3);
-    },
-    [
-      escapeListener,
-      handleMouseEnterTooltip,
-      handleMouseLeaveTooltip,
-      hideTooltip,
-      id,
-      placement,
-      tooltipContent
-    ]
-  );
-  const handleMouseEnter = useCallback(
-    (evt) => {
-      isHoveringRef.current = true;
-      const el = queryClosest(evt.target, anchorQuery);
-      if (el) {
-        console.log(`el ${el.classList}`);
-        anchorElementRef.current = el;
-        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);
-      }
-    },
-    [anchorQuery, showTooltip]
-  );
-  const handleMouseLeave = useCallback(() => {
-    isHoveringRef.current = false;
-    hideTooltip(200);
-  }, [hideTooltip]);
-  const anchorProps = {
-    "aria-describedby": `${id}-tooltip`,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  };
-  return {
-    anchorProps,
-    hideTooltip,
-    showTooltip,
-    tooltipProps
-  };
-};
-
-export { useTooltip };
-//# sourceMappingURL=useTooltip.js.map

package/esm/tooltip/useTooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltip.js","sources":["../../../../packages/vuu-popups/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>(undefined);\n  const isHoveringRef = useRef(false);\n  const anchorElementRef = useRef<HTMLElement | null>(null);\n  const mouseEnterTimerRef = useRef<number | undefined>(undefined);\n  const mouseLeaveTimerRef = useRef<number | undefined>(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

@@ -1,115 +0,0 @@
-import { useCallback } from 'react';
-
-const pointerSize = 12;
-const roomAbove = (anchor, tooltip) => tooltip.height + pointerSize < anchor.top;
-const roomLeft = (anchor, tooltip) => tooltip.width + pointerSize < anchor.left;
-const roomRight = (anchor, tooltip) => anchor.right + tooltip.width + pointerSize < document.body.clientWidth;
-const roomBelow = (anchor, tooltip) => document.body.clientHeight - anchor.bottom > tooltip.height + pointerSize;
-const roomAvailableAtPlacement = (placement, anchor, tooltip) => {
-  switch (placement) {
-    case "above":
-      return roomAbove(anchor, tooltip);
-    case "left":
-      return roomLeft(anchor, tooltip);
-    case "below":
-      return roomBelow(anchor, tooltip);
-    case "right":
-      return roomRight(anchor, tooltip);
-    default:
-      throw Error("invalid tooltip placement");
-  }
-};
-const positionAbove = (anchor, tooltip) => ({
-  left: anchor.left - (tooltip.width - anchor.width) / 2,
-  top: anchor.top - (tooltip.height + pointerSize)
-});
-const positionBelow = (anchor, tooltip) => ({
-  left: anchor.left - (tooltip.width - anchor.width) / 2,
-  top: anchor.bottom + pointerSize
-});
-const positionLeft = (anchor, tooltip) => ({
-  left: anchor.left - pointerSize - tooltip.width,
-  top: anchor.top - (tooltip.height - anchor.height) / 2
-});
-const positionRight = (anchor, tooltip) => ({
-  left: anchor.right + pointerSize,
-  top: anchor.top - (tooltip.height - anchor.height) / 2
-});
-const positionAtPlacement = (placement, anchor, tooltip) => {
-  switch (placement) {
-    case "above":
-      return positionAbove(anchor, tooltip);
-    case "left":
-      return positionLeft(anchor, tooltip);
-    case "below":
-      return positionBelow(anchor, tooltip);
-    case "right":
-      return positionRight(anchor, tooltip);
-    default:
-      throw Error("invalid tooltip placement");
-  }
-};
-const keepWithinTheScreen = ({ height, width }, position) => {
-  const { clientWidth, clientHeight } = document.body;
-  let { left, top } = position;
-  if (left + width > clientWidth) {
-    left -= left + width - clientWidth;
-  }
-  if (left < 0) {
-    left = 0;
-  }
-  if (top + height > clientHeight) {
-    top -= top + height - clientHeight;
-  }
-  if (top < 0) {
-    top = 0;
-  }
-  return { left, top };
-};
-const toCSSText = ({ left, top }) => `left:${left}px;top:${top}px;opacity:1;`;
-const getNextPlacement = (placement) => {
-  if (Array.isArray(placement)) {
-    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

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltipAnchoredPosition.js","sources":["../../../../packages/vuu-popups/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 | null>;\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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"}