@tcn/ui 0.2.0 → 0.3.0

package/dist/overlay/popper/element_popper.js

@@ -0,0 +1,33 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { BasePopper as s } from "./base/base_popper.js";
+import { ElementTethered as E } from "../tethered/element_tethered.js";
+const j = d(function({
+  restoreFocus: e,
+  open: o,
+  onDismissal: t,
+  isException: m,
+  acceptedRefs: p,
+  veil: n,
+  dismissals: f,
+  children: i,
+  ...l
+}, c) {
+  return /* @__PURE__ */ r(
+    s,
+    {
+      restoreFocus: e,
+      open: o,
+      onDismissal: t,
+      isException: m,
+      dismissals: f,
+      acceptedRefs: p,
+      veil: n,
+      children: /* @__PURE__ */ r(E, { ref: c, ...l, children: i })
+    }
+  );
+});
+export {
+  j as ElementPopper
+};
+//# sourceMappingURL=element_popper.js.map

package/dist/overlay/popper/element_popper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element_popper.js","sources":["../../../src/overlay/popper/element_popper.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport {\n  ElementTethered,\n  type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\n\nexport type ElementPopperProps = BasePopperProps & ElementTetheredProps;\n\nexport const ElementPopper = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ElementPopperProps>\n>(function ElementPopper(\n  {\n    restoreFocus,\n    open,\n    onDismissal,\n    isException,\n    acceptedRefs,\n    veil,\n    dismissals,\n    children,\n    ...elementTetheredProps\n  },\n  ref\n) {\n  return (\n    <BasePopper\n      restoreFocus={restoreFocus}\n      open={open}\n      onDismissal={onDismissal}\n      isException={isException}\n      dismissals={dismissals}\n      acceptedRefs={acceptedRefs}\n      veil={veil}\n    >\n      <ElementTethered ref={ref} {...elementTetheredProps}>\n        {children}\n      </ElementTethered>\n    </BasePopper>\n  );\n});\n"],"names":["ElementPopper","forwardRef","restoreFocus","open","onDismissal","isException","acceptedRefs","veil","dismissals","children","elementTetheredProps","ref","jsx","BasePopper","ElementTethered"],"mappings":";;;;AASO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAAX;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAG;AAAA,MACA,cAAAF;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAAK,EAACE,GAAA,EAAgB,KAAAH,GAAW,GAAGD,GAC5B,UAAAD,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/overlay/popper/hooks/use_context_trigger.d.ts

@@ -0,0 +1,7 @@
+import { Rectangle } from '../../../utils/types/dimensions.js';
+export declare function useContextTrigger(anchorElement: React.RefObject<HTMLElement>): {
+    isOpen: boolean;
+    close: () => void;
+    rectangle: Rectangle | null;
+};
+//# sourceMappingURL=use_context_trigger.d.ts.map

package/dist/overlay/popper/hooks/use_context_trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_context_trigger.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/hooks/use_context_trigger.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAmBpE,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;;EA6B5E"}

package/dist/overlay/popper/hooks/use_context_trigger.js

@@ -0,0 +1,31 @@
+import { useState as u, useCallback as o, useLayoutEffect as f } from "react";
+function a(e, n) {
+  return e ? {
+    position: { x: n.clientX, y: n.clientY },
+    dimensions: {
+      width: 8,
+      height: 8
+    }
+  } : null;
+}
+function p(e) {
+  const [n, r] = u(!1), [i, c] = u(null), l = o(() => {
+    r(!1);
+  }, []), s = o(
+    (t) => {
+      t.preventDefault(), c(a(e.current, t)), r(!0);
+    },
+    [e]
+  );
+  return f(() => {
+    const t = e.current;
+    if (t)
+      return t.addEventListener("contextmenu", s), () => {
+        t.removeEventListener("contextmenu", s);
+      };
+  }, [e, s]), { isOpen: n, close: l, rectangle: i };
+}
+export {
+  p as useContextTrigger
+};
+//# sourceMappingURL=use_context_trigger.js.map

package/dist/overlay/popper/hooks/use_context_trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_context_trigger.js","sources":["../../../../src/overlay/popper/hooks/use_context_trigger.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from 'react';\nimport type { Rectangle } from '../../../utils/types/dimensions.js';\n\nfunction getContextMenuRectangle(\n  element: HTMLElement | null,\n  mouseEvent: MouseEvent\n): Rectangle | null {\n  if (!element) return null;\n\n  const position = { x: mouseEvent.clientX, y: mouseEvent.clientY };\n\n  return {\n    position,\n    dimensions: {\n      width: 8,\n      height: 8,\n    },\n  };\n}\n\nexport function useContextTrigger(anchorElement: React.RefObject<HTMLElement>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [rectangle, setRectangle] = useState<Rectangle | null>(null);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleContextMenu = useCallback(\n    (e: MouseEvent) => {\n      e.preventDefault();\n      setRectangle(getContextMenuRectangle(anchorElement.current, e));\n      setIsOpen(true);\n    },\n    [anchorElement]\n  );\n\n  useLayoutEffect(() => {\n    const element = anchorElement.current;\n    if (!element) return;\n\n    element.addEventListener('contextmenu', handleContextMenu);\n\n    return () => {\n      element.removeEventListener('contextmenu', handleContextMenu);\n    };\n  }, [anchorElement, handleContextMenu]);\n\n  return { isOpen, close, rectangle };\n}\n"],"names":["getContextMenuRectangle","element","mouseEvent","useContextTrigger","anchorElement","isOpen","setIsOpen","useState","rectangle","setRectangle","close","useCallback","handleContextMenu","e","useLayoutEffect"],"mappings":";AAGA,SAASA,EACPC,GACAC,GACkB;AAClB,SAAKD,IAIE;AAAA,IACL,UAHe,EAAE,GAAGC,EAAW,SAAS,GAAGA,EAAW,QAAA;AAAA,IAItD,YAAY;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV,IATmB;AAWvB;AAEO,SAASC,EAAkBC,GAA6C;AAC7E,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAWC,CAAY,IAAIF,EAA2B,IAAI,GAE3DG,IAAQC,EAAY,MAAM;AAC9B,IAAAL,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE,GAECM,IAAoBD;AAAA,IACxB,CAACE,MAAkB;AACjB,MAAAA,EAAE,eAAA,GACFJ,EAAaT,EAAwBI,EAAc,SAASS,CAAC,CAAC,GAC9DP,EAAU,EAAI;AAAA,IAChB;AAAA,IACA,CAACF,CAAa;AAAA,EAAA;AAGhB,SAAAU,EAAgB,MAAM;AACpB,UAAMb,IAAUG,EAAc;AAC9B,QAAKH;AAEL,aAAAA,EAAQ,iBAAiB,eAAeW,CAAiB,GAElD,MAAM;AACX,QAAAX,EAAQ,oBAAoB,eAAeW,CAAiB;AAAA,MAC9D;AAAA,EACF,GAAG,CAACR,GAAeQ,CAAiB,CAAC,GAE9B,EAAE,QAAAP,GAAQ,OAAAK,GAAO,WAAAF,EAAA;AAC1B;"}

package/dist/overlay/popper/hooks/use_hover_trigger.d.ts

@@ -0,0 +1,6 @@
+export declare function usePreviewElement(anchorElement: React.RefObject<HTMLElement>): {
+    isOpen: boolean;
+    close: () => void;
+    open: () => void;
+};
+//# sourceMappingURL=use_hover_trigger.d.ts.map

package/dist/overlay/popper/hooks/use_hover_trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_hover_trigger.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/hooks/use_hover_trigger.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;;EAqB5E"}

package/dist/overlay/popper/hooks/use_hover_trigger.js

@@ -0,0 +1,17 @@
+import { useState as c, useCallback as s, useLayoutEffect as a } from "react";
+function i(n) {
+  const [o, r] = c(!1), u = s(() => {
+    r(!1);
+  }, []), e = s(() => r(!0), []);
+  return a(() => {
+    const t = n.current;
+    if (t)
+      return t.addEventListener("mouseenter", e), () => {
+        t.removeEventListener("mouseenter", e);
+      };
+  }, [n, e]), { isOpen: o, close: u, open: e };
+}
+export {
+  i as usePreviewElement
+};
+//# sourceMappingURL=use_hover_trigger.js.map

package/dist/overlay/popper/hooks/use_hover_trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_hover_trigger.js","sources":["../../../../src/overlay/popper/hooks/use_hover_trigger.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from 'react';\n\nexport function usePreviewElement(anchorElement: React.RefObject<HTMLElement>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const close = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const open = useCallback(() => setIsOpen(true), []);\n\n  // Open on hover on the anchor element\n  useLayoutEffect(() => {\n    const anchor = anchorElement.current;\n    if (!anchor) return;\n\n    anchor.addEventListener('mouseenter', open);\n\n    return () => {\n      anchor.removeEventListener('mouseenter', open);\n    };\n  }, [anchorElement, open]);\n\n  return { isOpen, close, open };\n}\n"],"names":["usePreviewElement","anchorElement","isOpen","setIsOpen","useState","close","useCallback","open","useLayoutEffect","anchor"],"mappings":";AAEO,SAASA,EAAkBC,GAA6C;AAC7E,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAQC,EAAY,MAAM;AAC9B,IAAAH,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE,GAECI,IAAOD,EAAY,MAAMH,EAAU,EAAI,GAAG,CAAA,CAAE;AAGlD,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAASR,EAAc;AAC7B,QAAKQ;AAEL,aAAAA,EAAO,iBAAiB,cAAcF,CAAI,GAEnC,MAAM;AACX,QAAAE,EAAO,oBAAoB,cAAcF,CAAI;AAAA,MAC/C;AAAA,EACF,GAAG,CAACN,GAAeM,CAAI,CAAC,GAEjB,EAAE,QAAAL,GAAQ,OAAAG,GAAO,MAAAE,EAAA;AAC1B;"}

package/dist/overlay/popper/hooks/use_restore_focus.d.ts

@@ -0,0 +1,2 @@
+export declare function useRestoreFocus(open: boolean, restoreFocus: boolean): void;
+//# sourceMappingURL=use_restore_focus.d.ts.map

package/dist/overlay/popper/hooks/use_restore_focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_restore_focus.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/hooks/use_restore_focus.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,QAanE"}

package/dist/overlay/popper/hooks/use_restore_focus.js

@@ -0,0 +1,18 @@
+import { useRef as u, useLayoutEffect as c } from "react";
+function s(e, t) {
+  const n = u(null);
+  c(() => {
+    if (e)
+      n.current = window.document.activeElement;
+    else {
+      const o = n.current;
+      requestAnimationFrame(() => {
+        t && o?.focus();
+      });
+    }
+  }, [e, t]);
+}
+export {
+  s as useRestoreFocus
+};
+//# sourceMappingURL=use_restore_focus.js.map

package/dist/overlay/popper/hooks/use_restore_focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_restore_focus.js","sources":["../../../../src/overlay/popper/hooks/use_restore_focus.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\n\nexport function useRestoreFocus(open: boolean, restoreFocus: boolean) {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (open) {\n      activeElementRef.current = window.document.activeElement as HTMLElement;\n    } else {\n      const restoreToElement = activeElementRef.current;\n      requestAnimationFrame(() => {\n        restoreFocus && restoreToElement?.focus();\n      });\n    }\n  }, [open, restoreFocus]);\n}\n"],"names":["useRestoreFocus","open","restoreFocus","activeElementRef","useRef","useLayoutEffect","restoreToElement"],"mappings":";AAEO,SAASA,EAAgBC,GAAeC,GAAuB;AACpE,QAAMC,IAAmBC,EAA2B,IAAI;AAExD,EAAAC,EAAgB,MAAM;AACpB,QAAIJ;AACF,MAAAE,EAAiB,UAAU,OAAO,SAAS;AAAA,SACtC;AACL,YAAMG,IAAmBH,EAAiB;AAC1C,4BAAsB,MAAM;AAC1B,QAAAD,KAAgBI,GAAkB,MAAA;AAAA,MACpC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAACL,GAAMC,CAAY,CAAC;AACzB;"}

package/dist/overlay/popper/legacy/popper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popper.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/C,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,wBAAgB,MAAM,CAAC,EACrB,aAAa,EACb,cAAyB,EACzB,cAAsB,EACtB,cAAkB,EAClB,gBAA0B,EAC1B,gBAA0B,EAC1B,gBAAoB,EACpB,YAAoB,EACpB,IAAY,EACZ,WAAW,EACX,aAAkB,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,WAAW,kDA8Kb"}

package/dist/overlay/popper/{popper.js → legacy/popper.js}

@@ -1,11 +1,11 @@
 import { jsx as p, jsxs as G } from "react/jsx-runtime";
-import "../../utils/focus_redirect.js";
-import { ClickAwayListener as I } from "../../utils/click_away_listener.js";
-import { ScrollAwayListener as J } from "../../utils/scroll_away_listener.js";
+import { ClickAwayListener as I } from "../../../utils/click_away_listener.js";
+import "../../../utils/focus_redirect.js";
+import { ScrollAwayListener as J } from "../../../utils/scroll_away_listener.js";
 import { useRef as f, useState as K, useLayoutEffect as E } from "react";
-import "../../utils/hooks/use_resize_observer.js";
-import { Portal as M } from "../portal/portal.js";
-import '../../popper.css';const Q = "_popover_069b323", U = "_popover-veil_2f5f985", P = { popover: Q, "popover-veil": U };
+import "../../../utils/hooks/use_resize_observer.js";
+import { Portal as M } from "../../portal/portal.js";
+import '../../../popper.css';const Q = "_popover_fcfb66a", U = "_popover-veil_c56df66", P = { popover: Q, "popover-veil": U };
 function ie({
   anchorElement: n,
   verticalAnchor: _ = "bottom",

package/dist/overlay/popper/legacy/popper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popper.js","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"sourcesContent":["import { ClickAwayListener, ScrollAwayListener } from '../../../utils/index.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { Portal } from '../../portal/portal.js';\nimport styles from './popper.module.css';\n\nexport interface PopperProps {\n  anchorElement: HTMLElement | null;\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'start' | 'center' | 'end';\n  horizontalOrigin?: 'start' | 'center' | 'end';\n  horizontalOffset?: number;\n  open: boolean;\n  onClose: () => void;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n  veil?: boolean;\n  onVeilClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  clickAwayRefs?: React.RefObject<HTMLElement>[];\n  isClickAwayException?: (target: HTMLElement) => boolean;\n  isScrollAwayException?: (target: HTMLElement) => boolean;\n  disableClickAway?: boolean;\n}\n\n// This component is being phased out in favor of ElementPopper - need to ensure parity beforehand.\nexport function Popper({\n  anchorElement,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  verticalOffset = 0,\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  horizontalOffset = 0,\n  restoreFocus = false,\n  veil = false,\n  onVeilClick,\n  clickAwayRefs = [],\n  open,\n  onClose,\n  children,\n  disableClickAway = false,\n  isClickAwayException,\n  isScrollAwayException,\n}: PopperProps) {\n  const anchorElementRef = useRef(anchorElement);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const activeElementRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const canOpen = open && anchorElement != null;\n  const finalClickAwayRefs: React.RefObject<HTMLElement>[] = clickAwayRefs ?? [];\n  const enableClickAway = !disableClickAway;\n  const veilRef = useRef<HTMLDivElement>(null);\n  function close() {\n    onClose && onClose();\n  }\n\n  // eslint-disable-next-line complexity\n  const updatePosition = () => {\n    if (!anchorElement || !popoverRef.current) return;\n\n    const anchorRect = anchorElement.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Determine the text direction (ltr or rtl)\n    const computedStyle = getComputedStyle(anchorElement);\n    const isRtl = computedStyle.direction === 'rtl';\n\n    let top = anchorRect.top;\n    let left = anchorRect.left;\n\n    // Calculate vertical position\n    switch (verticalAnchor) {\n      case 'top':\n        top += verticalOffset;\n        break;\n      case 'center':\n        top += anchorRect.height / 2;\n        break;\n      case 'bottom':\n        top += anchorRect.height - verticalOffset;\n        break;\n    }\n\n    switch (verticalOrigin) {\n      case 'top':\n        break;\n      case 'center':\n        top -= popoverRect.height / 2;\n        break;\n      case 'bottom':\n        top -= popoverRect.height;\n        break;\n    }\n\n    // Calculate horizontal position with direction sensitivity\n    if (horizontalAnchor === 'start') {\n      left += isRtl ? anchorRect.width + horizontalOffset : horizontalOffset;\n    } else if (horizontalAnchor === 'center') {\n      left += anchorRect.width / 2;\n    } else if (horizontalAnchor === 'end') {\n      left += isRtl ? -horizontalOffset : anchorRect.width + horizontalOffset;\n    }\n\n    // Adjust the origin based on RTL direction\n    let adjustedHorizontalOrigin = horizontalOrigin;\n    if (isRtl) {\n      if (horizontalOrigin === 'start') {\n        adjustedHorizontalOrigin = 'end';\n      } else if (horizontalOrigin === 'end') {\n        adjustedHorizontalOrigin = 'start';\n      }\n    }\n\n    // Apply adjusted origin to the position calculation\n    if (adjustedHorizontalOrigin === 'start') {\n      // No adjustment needed\n    } else if (adjustedHorizontalOrigin === 'center') {\n      left -= popoverRect.width / 2;\n    } else if (adjustedHorizontalOrigin === 'end') {\n      left -= popoverRect.width;\n    }\n\n    // Ensure the popover stays within the viewport\n    // Prevent overflow to the right\n    if (left + popoverRect.width > viewportWidth) {\n      left = viewportWidth - popoverRect.width;\n    }\n\n    // Prevent overflow to the left\n    if (left < 0) {\n      left = 0;\n    }\n\n    // Prevent overflow to the bottom\n    if (top + popoverRect.height > viewportHeight) {\n      top = viewportHeight - popoverRect.height;\n    }\n\n    // Prevent overflow to the top\n    if (top < 0) {\n      top = 0;\n    }\n\n    // Only update if position has changed to avoid unnecessary re-renders\n    if (top !== position.top || left !== position.left) {\n      setPosition({ top, left });\n    }\n  };\n\n  useLayoutEffect(() => {\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n    };\n  });\n\n  useLayoutEffect(() => {\n    if (open) {\n      activeElementRef.current = window.document.activeElement as HTMLElement;\n    } else {\n      const restoreToElement = activeElementRef.current;\n      requestAnimationFrame(() => {\n        restoreFocus && restoreToElement?.focus();\n      });\n    }\n  }, [open, restoreFocus]);\n\n  if (!canOpen) {\n    return null;\n  }\n\n  anchorElementRef.current = anchorElement;\n\n  let content = (\n    <ScrollAwayListener onScrollAway={close} isException={isScrollAwayException}>\n      <div\n        ref={popoverRef}\n        className={styles.popover}\n        style={{\n          top: `${position.top}px`,\n          left: `${position.left}px`,\n        }}\n      >\n        {children}\n      </div>\n    </ScrollAwayListener>\n  );\n\n  if (enableClickAway) {\n    content = (\n      <ClickAwayListener\n        onClickAway={close}\n        refs={[anchorElementRef, ...finalClickAwayRefs]}\n        isException={isClickAwayException}\n      >\n        {content}\n      </ClickAwayListener>\n    );\n  }\n\n  return (\n    <Portal>\n      {veil && (\n        <div\n          ref={veilRef}\n          onClick={e => veilRef.current === e.target && onVeilClick && onVeilClick(e)}\n          className={styles['popover-veil']}\n        >\n          {content}\n        </div>\n      )}\n      {!veil && content}\n    </Portal>\n  );\n}\n"],"names":["Popper","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","restoreFocus","veil","onVeilClick","clickAwayRefs","open","onClose","children","disableClickAway","isClickAwayException","isScrollAwayException","anchorElementRef","useRef","position","setPosition","useState","activeElementRef","popoverRef","canOpen","finalClickAwayRefs","enableClickAway","veilRef","close","updatePosition","anchorRect","popoverRect","viewportWidth","viewportHeight","isRtl","top","left","adjustedHorizontalOrigin","useLayoutEffect","restoreToElement","content","jsx","ScrollAwayListener","styles","ClickAwayListener","Portal"],"mappings":"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"}

package/dist/overlay/popper/preview_popper.d.ts

@@ -0,0 +1,7 @@
+import { BasePopperProps } from './base/base_popper.js';
+import { ElementTetheredProps } from '../tethered/element_tethered.js';
+export type PreviewPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> & ElementTetheredProps;
+export declare const PreviewPopper: import('react').ForwardRefExoticComponent<Omit<BasePopperProps, "open" | "onDismissal"> & ElementTetheredProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=preview_popper.d.ts.map

package/dist/overlay/popper/preview_popper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview_popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/preview_popper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,iCAAiC,CAAC;AAIzC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAC5E,oBAAoB,CAAC;AAEvB,eAAO,MAAM,aAAa;;+CAwCxB,CAAC"}

package/dist/overlay/popper/preview_popper.js

@@ -0,0 +1,46 @@
+import { jsx as e, Fragment as d } from "react/jsx-runtime";
+import { forwardRef as u, useRef as a } from "react";
+import { BasePopper as R } from "./base/base_popper.js";
+import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
+import "../../utils/scroll_away_listener.js";
+import { useForkRef as w } from "../../utils/hooks/use_fork_ref.js";
+import "../../utils/hooks/use_resize_observer.js";
+import { ElementTethered as E } from "../tethered/element_tethered.js";
+import { usePreviewElement as v } from "./hooks/use_hover_trigger.js";
+import { PopperDismissal as g } from "./base/dismissal_decorator.js";
+const T = u(function({
+  anchorElement: r,
+  restoreFocus: p,
+  children: m,
+  acceptedRefs: i = [],
+  isException: t,
+  dismissals: s = [g.MOUSE_LEAVE],
+  ...f
+}, n) {
+  const o = a(null), c = w(n, o), { isOpen: l, close: P } = v(r);
+  return /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
+    R,
+    {
+      restoreFocus: p,
+      open: l,
+      onDismissal: P,
+      isException: t,
+      dismissals: s,
+      acceptedRefs: [o, ...i],
+      children: /* @__PURE__ */ e(
+        E,
+        {
+          ref: c,
+          anchorElement: r,
+          ...f,
+          children: m
+        }
+      )
+    }
+  ) });
+});
+export {
+  T as PreviewPopper
+};
+//# sourceMappingURL=preview_popper.js.map

package/dist/overlay/popper/preview_popper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview_popper.js","sources":["../../../src/overlay/popper/preview_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { useForkRef } from '../../utils/index.js';\nimport {\n  ElementTethered,\n  type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\nimport { usePreviewElement } from './hooks/use_hover_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\n\nexport type PreviewPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n  ElementTetheredProps;\n\nexport const PreviewPopper = forwardRef<\n  HTMLElement,\n  PropsWithChildren<PreviewPopperProps>\n>(function PreviewPopper(\n  {\n    anchorElement,\n    restoreFocus,\n    children,\n    acceptedRefs = [],\n    isException,\n    dismissals = [PopperDismissal.MOUSE_LEAVE],\n    ...elementTetheredProps\n  },\n  ref\n) {\n  const popperRef = useRef<HTMLElement>(null);\n  const merged = useForkRef(ref, popperRef);\n\n  const { isOpen, close } = usePreviewElement(anchorElement);\n\n  return (\n    <>\n      <BasePopper\n        restoreFocus={restoreFocus}\n        open={isOpen}\n        onDismissal={close}\n        isException={isException}\n        dismissals={dismissals}\n        acceptedRefs={[popperRef, ...acceptedRefs]}\n      >\n        <ElementTethered\n          ref={merged}\n          anchorElement={anchorElement}\n          {...elementTetheredProps}\n        >\n          {children}\n        </ElementTethered>\n      </BasePopper>\n    </>\n  );\n});\n"],"names":["PreviewPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","elementTetheredProps","ref","popperRef","useRef","merged","useForkRef","isOpen","close","usePreviewElement","jsx","Fragment","BasePopper","ElementTethered"],"mappings":";;;;;;;;;;;AAaO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC;AAAA,EACA,YAAAC,IAAa,CAACC,EAAgB,WAAW;AAAA,EACzC,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GACpCC,IAASC,EAAWJ,GAAKC,CAAS,GAElC,EAAE,QAAAI,GAAQ,OAAAC,MAAUC,EAAkBf,CAAa;AAEzD,SACE,gBAAAgB,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAAjB;AAAA,MACA,MAAMY;AAAA,MACN,aAAaC;AAAA,MACb,aAAAV;AAAA,MACA,YAAAC;AAAA,MACA,cAAc,CAACI,GAAW,GAAGN,CAAY;AAAA,MAEzC,UAAA,gBAAAa;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,KAAKR;AAAA,UACL,eAAAX;AAAA,UACC,GAAGO;AAAA,UAEH,UAAAL;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

package/dist/overlay/tethered/element_tethered.d.ts

@@ -0,0 +1,8 @@
+import { TetheredProps } from './tethered.js';
+export interface ElementTetheredProps extends Omit<TetheredProps, 'anchor'> {
+    anchorElement: React.RefObject<HTMLElement>;
+}
+export declare const ElementTethered: import('react').ForwardRefExoticComponent<ElementTetheredProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=element_tethered.d.ts.map

package/dist/overlay/tethered/element_tethered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element_tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/element_tethered.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IACzE,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC7C;AAgBD,eAAO,MAAM,eAAe;;+CAuC1B,CAAC"}

package/dist/overlay/tethered/element_tethered.js

@@ -0,0 +1,33 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as f, useState as w, useLayoutEffect as m } from "react";
+import { Tethered as h } from "./tethered.js";
+function v(n) {
+  if (!n) return null;
+  const e = n.getBoundingClientRect();
+  return {
+    position: { x: e.left, y: e.top },
+    dimensions: {
+      width: e.width,
+      height: e.height
+    }
+  };
+}
+const E = f(function({ anchorElement: e, children: i, ...s }, c) {
+  const [d, u] = w(null);
+  return m(() => {
+    const r = e.current;
+    if (!r) return;
+    const t = () => {
+      u(v(r));
+    };
+    t();
+    const o = new ResizeObserver(t);
+    return o.observe(r), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+      o.disconnect(), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+    };
+  }, [e]), /* @__PURE__ */ l(h, { ref: c, anchor: d, ...s, children: i });
+});
+export {
+  E as ElementTethered
+};
+//# sourceMappingURL=element_tethered.js.map

package/dist/overlay/tethered/element_tethered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element_tethered.js","sources":["../../../src/overlay/tethered/element_tethered.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useState, type PropsWithChildren } from 'react';\nimport { type Rectangle } from '../../utils/index.js';\nimport { Tethered, type TetheredProps } from './tethered.js';\n\nexport interface ElementTetheredProps extends Omit<TetheredProps, 'anchor'> {\n  anchorElement: React.RefObject<HTMLElement>;\n}\n\nfunction getElementRect(element: HTMLElement | null): Rectangle | null {\n  if (!element) return null;\n\n  const clientRect = element.getBoundingClientRect();\n\n  return {\n    position: { x: clientRect.left, y: clientRect.top },\n    dimensions: {\n      width: clientRect.width,\n      height: clientRect.height,\n    },\n  };\n}\n\nexport const ElementTethered = forwardRef<\n  HTMLElement,\n  PropsWithChildren<ElementTetheredProps>\n>(function ElementTether({ anchorElement, children, ...rest }, ref) {\n  const [rectangle, setRectangle] = useState<Rectangle | null>(null);\n\n  useLayoutEffect(() => {\n    const element = anchorElement.current;\n    if (!element) return;\n\n    const update = () => {\n      setRectangle(getElementRect(element));\n    };\n\n    update();\n\n    // Track size/position changes of the anchor element via ResizeObserver\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(element);\n\n    // Track scroll-induced position changes\n    // TODO: might need to bypass react state here (setRectangle on scroll event) - to an OV or setting css variables/attributes directly\n    // This is a slight lag - not a huge deal, but could be improved.\n    window.addEventListener('scroll', update, true);\n    // Track window resize-induced position changes\n    window.addEventListener('resize', update);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [anchorElement]);\n\n  return (\n    <Tethered ref={ref} anchor={rectangle} {...rest}>\n      {children}\n    </Tethered>\n  );\n});\n"],"names":["getElementRect","element","clientRect","ElementTethered","forwardRef","anchorElement","children","rest","ref","rectangle","setRectangle","useState","useLayoutEffect","update","resizeObserver","Tethered"],"mappings":";;;AAQA,SAASA,EAAeC,GAA+C;AACrE,MAAI,CAACA,EAAS,QAAO;AAErB,QAAMC,IAAaD,EAAQ,sBAAA;AAE3B,SAAO;AAAA,IACL,UAAU,EAAE,GAAGC,EAAW,MAAM,GAAGA,EAAW,IAAA;AAAA,IAC9C,YAAY;AAAA,MACV,OAAOA,EAAW;AAAA,MAClB,QAAQA,EAAW;AAAA,IAAA;AAAA,EACrB;AAEJ;AAEO,MAAMC,IAAkBC,EAG7B,SAAuB,EAAE,eAAAC,GAAe,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAClE,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA2B,IAAI;AAEjE,SAAAC,EAAgB,MAAM;AACpB,UAAMX,IAAUI,EAAc;AAC9B,QAAI,CAACJ,EAAS;AAEd,UAAMY,IAAS,MAAM;AACnB,MAAAH,EAAaV,EAAeC,CAAO,CAAC;AAAA,IACtC;AAEA,IAAAY,EAAA;AAGA,UAAMC,IAAiB,IAAI,eAAeD,CAAM;AAChD,WAAAC,EAAe,QAAQb,CAAO,GAK9B,OAAO,iBAAiB,UAAUY,GAAQ,EAAI,GAE9C,OAAO,iBAAiB,UAAUA,CAAM,GAEjC,MAAM;AACX,MAAAC,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUD,GAAQ,EAAI,GACjD,OAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAACR,CAAa,CAAC,qBAGfU,GAAA,EAAS,KAAAP,GAAU,QAAQC,GAAY,GAAGF,GACxC,UAAAD,GACH;AAEJ,CAAC;"}

package/dist/overlay/tethered/hooks/calculate_position.d.ts

@@ -0,0 +1,19 @@
+import { HorizontalTether, VerticalTether } from '../types.js';
+import { Rectangle, Dimensions } from '../../../utils/index.js';
+export interface CalculateTetheredPositionParams {
+    anchor: Rectangle;
+    tether: Rectangle;
+    direction: 'ltr' | 'rtl';
+    verticalAnchor: VerticalTether;
+    verticalOrigin: VerticalTether;
+    horizontalAnchor: HorizontalTether;
+    horizontalOrigin: HorizontalTether;
+    verticalOffset: number;
+    horizontalOffset: number;
+    viewport: Dimensions;
+}
+export declare const calculateTetheredPosition: ({ anchor, tether, direction, verticalAnchor, verticalOrigin, horizontalAnchor, horizontalOrigin, verticalOffset, horizontalOffset, viewport, }: CalculateTetheredPositionParams) => {
+    top: number;
+    left: number;
+};
+//# sourceMappingURL=calculate_position.d.ts.map

package/dist/overlay/tethered/hooks/calculate_position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculate_position.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,UAAU,CAAC;CACtB;AAED,eAAO,MAAM,yBAAyB,GAAI,gJAWvC,+BAA+B;;;CAiFjC,CAAC"}

package/dist/overlay/tethered/hooks/calculate_position.js

@@ -0,0 +1,43 @@
+const k = ({
+  anchor: d,
+  tether: e,
+  direction: a,
+  verticalAnchor: f,
+  verticalOrigin: h,
+  horizontalAnchor: b,
+  horizontalOrigin: w,
+  verticalOffset: g,
+  horizontalOffset: n,
+  viewport: m
+}) => {
+  const c = a === "rtl";
+  let i = d.position.y, s = d.position.x;
+  switch (f) {
+    case "top":
+      i += g;
+      break;
+    case "center":
+      i += d.dimensions.height / 2;
+      break;
+    case "bottom":
+      i += d.dimensions.height - g;
+      break;
+  }
+  switch (h) {
+    case "top":
+      break;
+    case "center":
+      i -= e.dimensions.height / 2;
+      break;
+    case "bottom":
+      i -= e.dimensions.height;
+      break;
+  }
+  b === "start" ? s += c ? d.dimensions.width + n : n : b === "center" ? s += d.dimensions.width / 2 : b === "end" && (s += c ? -n : d.dimensions.width + n);
+  let t = w;
+  return c && (w === "start" ? t = "end" : w === "end" && (t = "start")), t === "start" || (t === "center" ? s -= e.dimensions.width / 2 : t === "end" && (s -= e.dimensions.width)), s + e.dimensions.width > m.width && (s = m.width - e.dimensions.width), s < 0 && (s = 0), i + e.dimensions.height > m.height && (i = m.height - e.dimensions.height), i < 0 && (i = 0), { top: i, left: s };
+};
+export {
+  k as calculateTetheredPosition
+};
+//# sourceMappingURL=calculate_position.js.map

package/dist/overlay/tethered/hooks/calculate_position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculate_position.js","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"sourcesContent":["import type { HorizontalTether, VerticalTether } from '../types.js';\nimport type { Rectangle } from '../../../utils/index.js';\nimport type { Dimensions } from '../../../utils/index.js';\n\nexport interface CalculateTetheredPositionParams {\n  anchor: Rectangle;\n  tether: Rectangle;\n  direction: 'ltr' | 'rtl';\n  verticalAnchor: VerticalTether;\n  verticalOrigin: VerticalTether;\n  horizontalAnchor: HorizontalTether;\n  horizontalOrigin: HorizontalTether;\n  verticalOffset: number;\n  horizontalOffset: number;\n  viewport: Dimensions;\n}\n\nexport const calculateTetheredPosition = ({\n  anchor,\n  tether,\n  direction,\n  verticalAnchor,\n  verticalOrigin,\n  horizontalAnchor,\n  horizontalOrigin,\n  verticalOffset,\n  horizontalOffset,\n  viewport,\n}: CalculateTetheredPositionParams) => {\n  const isRtl = direction === 'rtl';\n\n  let top = anchor.position.y;\n  let left = anchor.position.x;\n\n  // Calculate vertical position\n  switch (verticalAnchor) {\n    case 'top':\n      top += verticalOffset;\n      break;\n    case 'center':\n      top += anchor.dimensions.height / 2;\n      break;\n    case 'bottom':\n      top += anchor.dimensions.height - verticalOffset;\n      break;\n  }\n\n  switch (verticalOrigin) {\n    case 'top':\n      break;\n    case 'center':\n      top -= tether.dimensions.height / 2;\n      break;\n    case 'bottom':\n      top -= tether.dimensions.height;\n      break;\n  }\n\n  // Calculate horizontal position with direction sensitivity\n  if (horizontalAnchor === 'start') {\n    left += isRtl ? anchor.dimensions.width + horizontalOffset : horizontalOffset;\n  } else if (horizontalAnchor === 'center') {\n    left += anchor.dimensions.width / 2;\n  } else if (horizontalAnchor === 'end') {\n    left += isRtl ? -horizontalOffset : anchor.dimensions.width + horizontalOffset;\n  }\n\n  // Adjust the origin based on RTL direction\n  let adjustedHorizontalOrigin = horizontalOrigin;\n  if (isRtl) {\n    if (horizontalOrigin === 'start') {\n      adjustedHorizontalOrigin = 'end';\n    } else if (horizontalOrigin === 'end') {\n      adjustedHorizontalOrigin = 'start';\n    }\n  }\n\n  // Apply adjusted origin to the position calculation\n  if (adjustedHorizontalOrigin === 'start') {\n    // No adjustment needed\n  } else if (adjustedHorizontalOrigin === 'center') {\n    left -= tether.dimensions.width / 2;\n  } else if (adjustedHorizontalOrigin === 'end') {\n    left -= tether.dimensions.width;\n  }\n\n  // Ensure the popover stays within the viewport\n  // Prevent overflow to the right\n  if (left + tether.dimensions.width > viewport.width) {\n    left = viewport.width - tether.dimensions.width;\n  }\n\n  // Prevent overflow to the left\n  if (left < 0) {\n    left = 0;\n  }\n\n  // Prevent overflow to the bottom\n  // FIXME: doesn't account for padding.\n  if (top + tether.dimensions.height > viewport.height) {\n    top = viewport.height - tether.dimensions.height;\n  }\n\n  // Prevent overflow to the top\n  if (top < 0) {\n    top = 0;\n  }\n\n  return { top, left };\n};\n"],"names":["calculateTetheredPosition","anchor","tether","direction","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","viewport","isRtl","top","left","adjustedHorizontalOrigin"],"mappings":"AAiBO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AACF,MAAuC;AACrC,QAAMC,IAAQR,MAAc;AAE5B,MAAIS,IAAMX,EAAO,SAAS,GACtBY,IAAOZ,EAAO,SAAS;AAG3B,UAAQG,GAAA;AAAA,IACN,KAAK;AACH,MAAAQ,KAAOJ;AACP;AAAA,IACF,KAAK;AACH,MAAAI,KAAOX,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAW,KAAOX,EAAO,WAAW,SAASO;AAClC;AAAA,EAAA;AAGJ,UAAQH,GAAA;AAAA,IACN,KAAK;AACH;AAAA,IACF,KAAK;AACH,MAAAO,KAAOV,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAU,KAAOV,EAAO,WAAW;AACzB;AAAA,EAAA;AAIJ,EAAII,MAAqB,UACvBO,KAAQF,IAAQV,EAAO,WAAW,QAAQQ,IAAmBA,IACpDH,MAAqB,WAC9BO,KAAQZ,EAAO,WAAW,QAAQ,IACzBK,MAAqB,UAC9BO,KAAQF,IAAQ,CAACF,IAAmBR,EAAO,WAAW,QAAQQ;AAIhE,MAAIK,IAA2BP;AAC/B,SAAII,MACEJ,MAAqB,UACvBO,IAA2B,QAClBP,MAAqB,UAC9BO,IAA2B,WAK3BA,MAA6B,YAEtBA,MAA6B,WACtCD,KAAQX,EAAO,WAAW,QAAQ,IACzBY,MAA6B,UACtCD,KAAQX,EAAO,WAAW,SAKxBW,IAAOX,EAAO,WAAW,QAAQQ,EAAS,UAC5CG,IAAOH,EAAS,QAAQR,EAAO,WAAW,QAIxCW,IAAO,MACTA,IAAO,IAKLD,IAAMV,EAAO,WAAW,SAASQ,EAAS,WAC5CE,IAAMF,EAAS,SAASR,EAAO,WAAW,SAIxCU,IAAM,MACRA,IAAM,IAGD,EAAE,KAAAA,GAAK,MAAAC,EAAA;AAChB;"}

package/dist/overlay/tethered/hooks/useTether.d.ts

@@ -0,0 +1,19 @@
+import { HorizontalTether, VerticalTether } from '../types.js';
+import { Rectangle } from '../../../utils/index.js';
+export interface UseTetherParams {
+    anchor: Rectangle | null;
+    verticalAnchor?: VerticalTether;
+    verticalOrigin?: VerticalTether;
+    horizontalOrigin?: HorizontalTether;
+    horizontalAnchor?: HorizontalTether;
+    verticalOffset?: number;
+    horizontalOffset?: number;
+}
+export declare function useTether({ anchor, verticalAnchor, verticalOrigin, horizontalAnchor, horizontalOrigin, verticalOffset, horizontalOffset, }: UseTetherParams): {
+    position: {
+        top: number;
+        left: number;
+    };
+    tetherRef: import('react').RefObject<HTMLDivElement>;
+};
+//# sourceMappingURL=useTether.d.ts.map

package/dist/overlay/tethered/hooks/useTether.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTether.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,cAAyB,EACzB,cAAsB,EACtB,gBAA0B,EAC1B,gBAA0B,EAC1B,cAAkB,EAClB,gBAAoB,GACrB,EAAE,eAAe;;;;;;EA6DjB"}

package/dist/overlay/tethered/hooks/useTether.js

@@ -0,0 +1,61 @@
+import { useState as h, useRef as m, useCallback as l, useLayoutEffect as g } from "react";
+import { calculateTetheredPosition as y } from "./calculate_position.js";
+function E({
+  anchor: n,
+  verticalAnchor: r = "bottom",
+  verticalOrigin: s = "top",
+  horizontalAnchor: u = "start",
+  horizontalOrigin: d = "start",
+  verticalOffset: p = 0,
+  horizontalOffset: w = 0
+}) {
+  const [o, c] = h({ top: 0, left: 0 }), i = m(null), f = l(() => {
+    if (!n || !i.current) return;
+    const t = i.current.getBoundingClientRect(), e = getComputedStyle(i.current);
+    return y({
+      anchor: n,
+      tether: {
+        dimensions: {
+          width: t.width,
+          height: t.height
+        },
+        position: {
+          x: t.left,
+          y: t.top
+        }
+      },
+      direction: e.direction,
+      verticalAnchor: r,
+      verticalOrigin: s,
+      horizontalAnchor: u,
+      horizontalOrigin: d,
+      verticalOffset: p,
+      horizontalOffset: w,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight
+      }
+    });
+  }, [
+    n,
+    r,
+    s,
+    u,
+    d,
+    p,
+    w
+  ]);
+  return g(() => {
+    const t = () => {
+      const e = f();
+      e && (o.top !== e.top || o.left !== e.left) && c(e);
+    };
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
+    };
+  }), { position: o, tetherRef: i };
+}
+export {
+  E as useTether
+};
+//# sourceMappingURL=useTether.js.map

package/dist/overlay/tethered/hooks/useTether.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTether.js","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport { type Rectangle } from '../../../utils/index.js';\nimport { calculateTetheredPosition } from './calculate_position.js';\n\nexport interface UseTetherParams {\n  anchor: Rectangle | null;\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport function useTether({\n  anchor,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  verticalOffset = 0,\n  horizontalOffset = 0,\n}: UseTetherParams) {\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const tetherRef = useRef<HTMLDivElement>(null);\n\n  const getPosition = useCallback(() => {\n    if (!anchor || !tetherRef.current) return;\n\n    const tether = tetherRef.current.getBoundingClientRect();\n    const computedStyle = getComputedStyle(tetherRef.current);\n\n    return calculateTetheredPosition({\n      anchor: anchor,\n      tether: {\n        dimensions: {\n          width: tether.width,\n          height: tether.height,\n        },\n        position: {\n          x: tether.left,\n          y: tether.top,\n        },\n      },\n      direction: computedStyle.direction as 'ltr' | 'rtl',\n      verticalAnchor: verticalAnchor,\n      verticalOrigin: verticalOrigin,\n      horizontalAnchor: horizontalAnchor,\n      horizontalOrigin: horizontalOrigin,\n      verticalOffset: verticalOffset,\n      horizontalOffset: horizontalOffset,\n      viewport: {\n        width: window.innerWidth,\n        height: window.innerHeight,\n      },\n    });\n  }, [\n    anchor,\n    verticalAnchor,\n    verticalOrigin,\n    horizontalAnchor,\n    horizontalOrigin,\n    verticalOffset,\n    horizontalOffset,\n  ]);\n\n  // Update the position when the window is resized\n  useLayoutEffect(() => {\n    const update = () => {\n      const newPosition = getPosition();\n      if (!newPosition) return;\n      if (position.top !== newPosition.top || position.left !== newPosition.left) {\n        setPosition(newPosition);\n      }\n    };\n    update();\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  });\n\n  return { position, tetherRef };\n}\n"],"names":["useTether","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","position","setPosition","useState","tetherRef","useRef","getPosition","useCallback","tether","computedStyle","calculateTetheredPosition","useLayoutEffect","update","newPosition"],"mappings":";;AAeO,SAASA,EAAU;AAAA,EACxB,QAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AACrB,GAAoB;AAClB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAYC,EAAuB,IAAI,GAEvCC,IAAcC,EAAY,MAAM;AACpC,QAAI,CAACb,KAAU,CAACU,EAAU,QAAS;AAEnC,UAAMI,IAASJ,EAAU,QAAQ,sBAAA,GAC3BK,IAAgB,iBAAiBL,EAAU,OAAO;AAExD,WAAOM,EAA0B;AAAA,MAC/B,QAAAhB;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,OAAOc,EAAO;AAAA,UACd,QAAQA,EAAO;AAAA,QAAA;AAAA,QAEjB,UAAU;AAAA,UACR,GAAGA,EAAO;AAAA,UACV,GAAGA,EAAO;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,WAAWC,EAAc;AAAA,MACzB,gBAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAU;AAAA,QACR,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA;AAAA,IACjB,CACD;AAAA,EACH,GAAG;AAAA,IACDN;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD;AAGD,SAAAW,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,YAAMC,IAAcP,EAAA;AACpB,MAAKO,MACDZ,EAAS,QAAQY,EAAY,OAAOZ,EAAS,SAASY,EAAY,SACpEX,EAAYW,CAAW;AAAA,IAE3B;AACA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GACjC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,CAAC,GAEM,EAAE,UAAAX,GAAU,WAAAG,EAAA;AACrB;"}

package/dist/overlay/tethered/tethered.d.ts

@@ -0,0 +1,20 @@
+import { HorizontalTether, VerticalTether } from './types.js';
+import { ZStackProps } from '../../stacks/index.js';
+import { Rectangle } from '../../utils/index.js';
+export interface BaseTetheredOwnProps {
+    verticalAnchor?: VerticalTether;
+    verticalOrigin?: VerticalTether;
+    horizontalOrigin?: HorizontalTether;
+    horizontalAnchor?: HorizontalTether;
+    verticalOffset?: number;
+    horizontalOffset?: number;
+}
+export interface TetheredOwnProp extends BaseTetheredOwnProps {
+    anchor: Rectangle | null;
+}
+export interface TetheredProps extends TetheredOwnProp, ZStackProps {
+}
+export declare const Tethered: import('react').ForwardRefExoticComponent<TetheredProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=tethered.d.ts.map

package/dist/overlay/tethered/tethered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/tethered.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAQlE,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;CAC1B;AACD,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,WAAW;CAAG;AAEtE,eAAO,MAAM,QAAQ;;+CA8CpB,CAAC"}

package/dist/overlay/tethered/tethered.js

@@ -0,0 +1,59 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as R } from "react";
+import "../../stacks/box/box.js";
+import "../../stacks/h_collapsible_box.js";
+import "../../stacks/h_stack.js";
+import "../../stacks/spacer.js";
+import "../../stacks/v_collapsible_box.js";
+import "../../stacks/v_stack.js";
+import { ZStack as b } from "../../stacks/z_stack.js";
+import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
+import "../../utils/scroll_away_listener.js";
+import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
+import "../../utils/hooks/use_resize_observer.js";
+import { useTether as T } from "./hooks/useTether.js";
+import { clsx as y } from "clsx";
+import { Portal as _ } from "../portal/portal.js";
+import '../../tethered.css';const $ = "_tethered_44058d8", j = { tethered: $ }, I = R(
+  function({
+    anchor: r,
+    verticalAnchor: e = "bottom",
+    verticalOrigin: m = "top",
+    horizontalAnchor: p = "start",
+    horizontalOrigin: i = "start",
+    verticalOffset: s = 0,
+    horizontalOffset: f = 0,
+    children: c,
+    style: n,
+    className: d,
+    ...a
+  }, h) {
+    const { position: t, tetherRef: l } = T({
+      anchor: r,
+      verticalAnchor: e,
+      verticalOrigin: m,
+      horizontalAnchor: p,
+      horizontalOrigin: i,
+      verticalOffset: s,
+      horizontalOffset: f
+    }), u = k(h, l), x = {
+      "--tethered-top": `${t.top}px`,
+      "--tethered-left": `${t.left}px`
+    };
+    return /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(
+      b,
+      {
+        ref: u,
+        className: y(j.tethered, d),
+        style: { position: "absolute", ...x, ...n },
+        ...a,
+        children: c
+      }
+    ) });
+  }
+);
+export {
+  I as Tethered
+};
+//# sourceMappingURL=tethered.js.map

package/dist/overlay/tethered/tethered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport type { HorizontalTether, VerticalTether } from './types.js';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { useTether } from './hooks/useTether.js';\nimport { clsx } from 'clsx';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './tethered.module.css';\n\nexport interface BaseTetheredOwnProps {\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport interface TetheredOwnProp extends BaseTetheredOwnProps {\n  anchor: Rectangle | null;\n}\nexport interface TetheredProps extends TetheredOwnProp, ZStackProps {}\n\nexport const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(\n  function Tethered(\n    {\n      anchor,\n      verticalAnchor = 'bottom',\n      verticalOrigin = 'top',\n      horizontalAnchor = 'start',\n      horizontalOrigin = 'start',\n      verticalOffset = 0,\n      horizontalOffset = 0,\n      children,\n      style,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    const { position, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n    const forkedRef = useForkRef(ref, tetherRef);\n\n    const cssVariables = {\n      '--tethered-top': `${position.top}px`,\n      '--tethered-left': `${position.left}px`,\n    };\n\n    return (\n      <Portal>\n        <ZStack\n          ref={forkedRef}\n          className={clsx(styles.tethered, className)}\n          style={{ position: 'absolute', ...cssVariables, ...style }}\n          {...rest}\n        >\n          {children}\n        </ZStack>\n      </Portal>\n    );\n  }\n);\n"],"names":["Tethered","forwardRef","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","children","style","className","rest","ref","position","tetherRef","useTether","forkedRef","useForkRef","cssVariables","Portal","jsx","ZStack","clsx","styles"],"mappings":";;;;;;;;;;;;;;;;;oDAyBaA,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,QAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACxC,QAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GACKS,IAAYC,EAAWL,GAAKE,CAAS,GAErCI,IAAe;AAAA,MACnB,kBAAkB,GAAGL,EAAS,GAAG;AAAA,MACjC,mBAAmB,GAAGA,EAAS,IAAI;AAAA,IAAA;AAGrC,6BACGM,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAUb,CAAS;AAAA,QAC1C,OAAO,EAAE,UAAU,YAAY,GAAGQ,GAAc,GAAGT,EAAA;AAAA,QAClD,GAAGE;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;"}

package/dist/overlay/tethered/types.d.ts

@@ -0,0 +1,3 @@
+export type VerticalTether = 'top' | 'center' | 'bottom';
+export type HorizontalTether = 'start' | 'center' | 'end';
+//# sourceMappingURL=types.d.ts.map