@tcn/ui 0.3.0 → 0.3.2

package/dist/layouts/utility_bar/utility_bar.js

@@ -1,37 +1,32 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import l from "react";
-import { clsx as y } from "clsx";
-import { HStack as m } from "../../stacks/h_stack.js";
-import '../../utility_bar.css';const u = "_utility-bar_3a92315", n = { "utility-bar": u }, x = l.forwardRef(
+import { clsx as m } from "clsx";
+import { HStack as y } from "../../stacks/h_stack.js";
+import '../../utility_bar.css';const u = "_utility-bar_3a92315", f = { "utility-bar": u }, h = l.forwardRef(
   function({
     hierarchy: t = "secondary",
     height: r = "auto",
     children: a,
     className: i,
     size: o = "md",
-    ...s
-  }, c) {
-    return /* @__PURE__ */ e(
-      m,
+    ...e
+  }, s) {
+    return /* @__PURE__ */ c(
+      y,
       {
-        ref: c,
+        ref: s,
         as: "header",
-        className: y(
-          n["utility-bar"],
-          i,
-          "utility-bar",
-          "tcn-utility-bar"
-        ),
+        className: m(f["utility-bar"], i, "tcn-utility-bar"),
         "data-hierarchy": t,
         "data-size": o,
         height: r,
-        ...s,
+        ...e,
         children: a
       }
     );
   }
 );
 export {
-  x as UtilityBar
+  h as UtilityBar
 };
 //# sourceMappingURL=utility_bar.js.map

package/dist/layouts/utility_bar/utility_bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"utility_bar.js","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './utility_bar.module.css';\n\n// UtilityBar\nexport interface UtilityBarProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(\n  function UtilityBar(\n    {\n      hierarchy = 'secondary',\n      height = 'auto',\n      children,\n      className,\n      size = 'md',\n      ...props\n    }: UtilityBarProps,\n    ref\n  ) {\n    return (\n      <HStack\n        ref={ref}\n        as=\"header\"\n        className={clsx(\n          styles['utility-bar'],\n          className,\n          'utility-bar',\n          'tcn-utility-bar'\n        )}\n        data-hierarchy={hierarchy}\n        data-size={size}\n        height={height}\n        {...props}\n      >\n        {children}\n      </HStack>\n    );\n  }\n);\n"],"names":["UtilityBar","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;4DAYaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG;AAAA,UACTC,EAAO,aAAa;AAAA,UACpBP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,kBAAgBH;AAAA,QAChB,aAAWI;AAAA,QACX,QAAAH;AAAA,QACC,GAAGI;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"utility_bar.js","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './utility_bar.module.css';\n\n// UtilityBar\nexport interface UtilityBarProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(\n  function UtilityBar(\n    {\n      hierarchy = 'secondary',\n      height = 'auto',\n      children,\n      className,\n      size = 'md',\n      ...props\n    }: UtilityBarProps,\n    ref\n  ) {\n    return (\n      <HStack\n        ref={ref}\n        as=\"header\"\n        className={clsx(styles['utility-bar'], className, 'tcn-utility-bar')}\n        data-hierarchy={hierarchy}\n        data-size={size}\n        height={height}\n        {...props}\n      >\n        {children}\n      </HStack>\n    );\n  }\n);\n"],"names":["UtilityBar","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;4DAYaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG,EAAKC,EAAO,aAAa,GAAGP,GAAW,iBAAiB;AAAA,QACnE,kBAAgBH;AAAA,QAChB,aAAWI;AAAA,QACX,QAAAH;AAAA,QACC,GAAGI;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/left_resize_handle.css

@@ -1 +1 @@
-._left-resize-handle_215501a{position:fixed;bottom:0;left:var(--resize-offset, -8px);height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}
+@layer tcn-system{:where(._left-resize-handle_215501a){position:fixed;bottom:0;left:var(--resize-offset, -8px);height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}}

package/dist/loading.css

@@ -1 +1 @@
-:root{--loading-line-color: var(--accent-color)}@keyframes _linePulse_bde300c{0%{opacity:1}to{opacity:.1}}._loading-line_e364229{animation-name:_linePulse_bde300c;animation-timing-function:linear;animation-iteration-count:infinite;opacity:.1;color:var(--loading-line-color)}
+@layer tcn-system{:root{--loading-line-color: var(--accent-color)}@keyframes _linePulse_bde300c{0%{opacity:1}to{opacity:.1}}:where(._loading-line_e364229){animation-name:_linePulse_bde300c;animation-timing-function:linear;animation-iteration-count:infinite;opacity:.1;color:var(--loading-line-color)}}

package/dist/menu.css

@@ -1 +1 @@
-._menu_9ce21e3{box-shadow:0 0 30px #00000040;border-radius:8px;background-color:#fff;padding:8px}._menu-item_68b387f{border-radius:4px;padding:4px;padding-inline:8px;height:auto;outline:none;border:none;background-color:transparent;color:var(--text-color);cursor:pointer}._menu-item_68b387f:active{opacity:.75}._menu-item_68b387f:hover,._menu-item_68b387f[data-is-open=true]{background-color:var(--accent-color);color:#ffffffe6}._menu-item_68b387f:focus{background-color:var(--accent-color);color:#ffffffe6}
+@layer tcn-system{:where(._menu_9ce21e3){box-shadow:0 0 30px #00000040;border-radius:8px;background-color:#fff;padding:8px}:where(._menu-item_68b387f){border-radius:4px;padding:4px;padding-inline:8px;height:auto;outline:none;border:none;background-color:transparent;color:var(--text-color);cursor:pointer}:where(._menu-item_68b387f:active){opacity:.75}:where(._menu-item_68b387f:hover),:where(._menu-item_68b387f[data-is-open=true]){background-color:var(--accent-color);color:#ffffffe6}:where(._menu-item_68b387f:focus){background-color:var(--accent-color);color:#ffffffe6}}

package/dist/modal.css

@@ -1 +1 @@
-._modal_473c6ef{width:auto;height:auto}
+@layer tcn-system{:where(._modal_473c6ef){width:auto;height:auto}}

package/dist/multi_combo_box.css

@@ -1 +1 @@
-._multi-combo-box-container_9528df3{gap:1px}
+@layer tcn-system{._multi-combo-box-container_9528df3{gap:1px}}

package/dist/multiselect.css

@@ -1 +1 @@
-._multiselect-container_009951a{gap:1px}
+@layer tcn-system{:where(._multiselect-container_009951a){gap:1px}}

package/dist/multiselect_values.css

@@ -1 +1 @@
-._chip_ab2e86b{margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}._remove_e42285d,._remove_e42285d:focus,._remove_e42285d:active{outline-width:1px}._item-container_2592c83{background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}._item-container_2592c83[data-is-disabled=true]{background-color:#0000000d;cursor:not-allowed}._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b{opacity:.5;cursor:not-allowed}
+@layer tcn-system{:where(._chip_ab2e86b){margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}:where(._remove_e42285d),:where(._remove_e42285d:focus),:where(._remove_e42285d:active){outline-width:1px}:where(._item-container_2592c83){background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}:where(._item-container_2592c83[data-is-disabled=true]){background-color:#0000000d;cursor:not-allowed}:where(._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b){opacity:.5;cursor:not-allowed}}

package/dist/overlay/context_menu/context_menu.js

@@ -1,15 +1,15 @@
-import { jsxs as c, Fragment as m, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, Fragment as m, jsx as t } from "react/jsx-runtime";
 import { Portal as s } from "../portal/portal.js";
 import { useState as h } from "react";
 import { Menu as u } from "../menu/menu.js";
 function v({ open: e, position: r, children: n, onClose: i }) {
   const [o, l] = h(null);
-  return !e || r == null ? null : /* @__PURE__ */ c(m, { children: [
+  return !e || r == null ? null : /* @__PURE__ */ a(m, { children: [
     /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ t(
       "div",
       {
-        ref: (a) => {
-          l(a);
+        ref: (c) => {
+          l(c);
         },
         style: {
           position: "absolute",
@@ -33,7 +33,7 @@ function v({ open: e, position: r, children: n, onClose: i }) {
         open: e,
         onClose: i,
         minWidth: "150px",
-        className: "context-menu",
+        className: "tcn-context-menu",
         children: n
       }
     )

package/dist/overlay/context_menu/context_menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context_menu.js","sources":["../../../src/overlay/context_menu/context_menu.tsx"],"sourcesContent":["import { Position } from '../../utils/index.js';\nimport { Portal } from '../portal/portal.js';\nimport React, { useState } from 'react';\nimport { Menu } from '../menu/menu.js';\n\nexport interface ContextMenuProps {\n  open: boolean;\n  onClose: () => void;\n  position?: Position | null;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenu({ open, position, children, onClose }: ContextMenuProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n\n  if (!open || position == null) {\n    return null;\n  }\n\n  return (\n    <>\n      <Portal>\n        <div style={{ position: 'fixed', inset: 0 }}>\n          <div\n            ref={element => {\n              setAnchorElement(element);\n            }}\n            style={{\n              position: 'absolute',\n              top: position.y,\n              left: position.x,\n              width: '1px',\n              height: '1px',\n              opacity: 0,\n            }}\n          ></div>\n        </div>\n      </Portal>\n      <Menu\n        veil\n        horizontalAnchor=\"start\"\n        verticalAnchor=\"top\"\n        horizontalOrigin=\"start\"\n        verticalOrigin=\"top\"\n        anchorElement={anchorElement}\n        open={open}\n        onClose={onClose}\n        minWidth=\"150px\"\n        className=\"context-menu\"\n      >\n        {children}\n      </Menu>\n    </>\n  );\n}\n"],"names":["ContextMenu","open","position","children","onClose","anchorElement","setAnchorElement","useState","jsxs","Fragment","jsx","Portal","element","Menu"],"mappings":";;;;AAYO,SAASA,EAAY,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,SAAAC,KAA6B;AACnF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA6B,IAAI;AAE3E,SAAI,CAACN,KAAQC,KAAY,OAChB,OAIP,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,4BAAC,OAAA,EAAI,OAAO,EAAE,UAAU,SAAS,OAAO,EAAA,GACtC,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,CAAAE,MAAW;AACd,UAAAN,EAAiBM,CAAO;AAAA,QAC1B;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAKV,EAAS;AAAA,UACd,MAAMA,EAAS;AAAA,UACf,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,eAAAR;AAAA,QACA,MAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAS;AAAA,QACT,WAAU;AAAA,QAET,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"context_menu.js","sources":["../../../src/overlay/context_menu/context_menu.tsx"],"sourcesContent":["import { Position } from '../../utils/index.js';\nimport { Portal } from '../portal/portal.js';\nimport React, { useState } from 'react';\nimport { Menu } from '../menu/menu.js';\n\nexport interface ContextMenuProps {\n  open: boolean;\n  onClose: () => void;\n  position?: Position | null;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenu({ open, position, children, onClose }: ContextMenuProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n\n  if (!open || position == null) {\n    return null;\n  }\n\n  return (\n    <>\n      <Portal>\n        <div style={{ position: 'fixed', inset: 0 }}>\n          <div\n            ref={element => {\n              setAnchorElement(element);\n            }}\n            style={{\n              position: 'absolute',\n              top: position.y,\n              left: position.x,\n              width: '1px',\n              height: '1px',\n              opacity: 0,\n            }}\n          ></div>\n        </div>\n      </Portal>\n      <Menu\n        veil\n        horizontalAnchor=\"start\"\n        verticalAnchor=\"top\"\n        horizontalOrigin=\"start\"\n        verticalOrigin=\"top\"\n        anchorElement={anchorElement}\n        open={open}\n        onClose={onClose}\n        minWidth=\"150px\"\n        className=\"tcn-context-menu\"\n      >\n        {children}\n      </Menu>\n    </>\n  );\n}\n"],"names":["ContextMenu","open","position","children","onClose","anchorElement","setAnchorElement","useState","jsxs","Fragment","jsx","Portal","element","Menu"],"mappings":";;;;AAYO,SAASA,EAAY,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,SAAAC,KAA6B;AACnF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA6B,IAAI;AAE3E,SAAI,CAACN,KAAQC,KAAY,OAChB,OAIP,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,4BAAC,OAAA,EAAI,OAAO,EAAE,UAAU,SAAS,OAAO,EAAA,GACtC,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,CAAAE,MAAW;AACd,UAAAN,EAAiBM,CAAO;AAAA,QAC1B;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAKV,EAAS;AAAA,UACd,MAAMA,EAAS;AAAA,UACf,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,eAAAR;AAAA,QACA,MAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAS;AAAA,QACT,WAAU;AAAA,QAET,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/overlay/frame/frame.js

@@ -11,21 +11,21 @@ import { Portal as s } from "../portal/portal.js";
 import { Draggable as n } from "../../utils/dnd/draggable/draggable.js";
 import { clsx as p } from "clsx";
 import '../../frame.css';const d = "_frame_ce82001", h = { frame: d }, D = c.forwardRef(function({
-  children: m,
-  isOpen: e = !1,
+  children: e,
+  isOpen: m = !1,
   draggable: o = !0,
   veil: a = !1,
   className: i,
   ...f
 }, l) {
-  return e ? /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(t, { width: "100%", height: "100%", "data-is-veil": a, className: "tcn-frame-veil", children: /* @__PURE__ */ r(n, { draggable: o, children: /* @__PURE__ */ r(
+  return m ? /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(t, { width: "100%", height: "100%", "data-is-veil": a, className: "tcn-frame-veil", children: /* @__PURE__ */ r(n, { draggable: o, children: /* @__PURE__ */ r(
     t,
     {
       as: "dialog",
       ref: l,
       className: p(h.frame, "tcn-frame", i),
       ...f,
-      children: m
+      children: e
     }
   ) }) }) }) : null;
 });

package/dist/overlay/menu/menu.js

@@ -3,7 +3,7 @@ import { BodyText as O } from "../../typography/body_text/body_text.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import f, { useState as F, useLayoutEffect as _, useRef as M } from "react";
+import f, { useState as F, useLayoutEffect as V, useRef as M } from "react";
 import { useForkRef as T } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import { HStack as G } from "../../stacks/h_stack.js";
@@ -12,23 +12,23 @@ import { Popper as K } from "../popper/legacy/popper.js";
 import { clsx as L } from "clsx";
 import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j = { menu: Q, "menu-item": U }, Z = f.forwardRef(function({
   anchorElement: R,
-  verticalAnchor: y,
+  verticalAnchor: d,
   verticalOrigin: S,
   verticalOffset: i,
   horizontalAnchor: C,
   horizontalOrigin: X,
   horizontalOffset: h,
-  direction: m,
-  open: d,
+  direction: l,
+  open: y,
   onClose: x,
   restoreFocus: Y,
   veil: s,
   onActivatedMenu: c,
-  children: b = [],
+  children: _ = [],
   className: E,
-  ...I
-}, z) {
-  const [P, r] = F(-1), l = f.Children.toArray(b).map((t, a) => {
+  ...b
+}, I) {
+  const [z, r] = F(-1), m = f.Children.toArray(_).map((t, a) => {
     if (!f.isValidElement(t))
       return t;
     if (t.type !== D)
@@ -41,13 +41,13 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
     const k = {
       ...t.props,
       key: a,
-      verticalAnchor: m === "up" ? "bottom" : "top",
-      verticalOrigin: m === "up" ? "bottom" : "top",
+      verticalAnchor: l === "up" ? "bottom" : "top",
+      verticalOrigin: l === "up" ? "bottom" : "top",
       verticalOffset: i,
       horizontalAnchor: "end",
       horizontalOrigin: "start",
       horizontalOffset: h,
-      direction: m,
+      direction: l,
       onClick: (e) => {
         t.props.children == null && x && x(), t.props.onClick && t.props.onClick(e);
       },
@@ -55,53 +55,53 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
         r(a), c && c(!0), t.props.onMouseEnter && t.props.onMouseEnter(e);
       }
     };
-    return t.type === D && (k.open = P === a), f.cloneElement(t, k);
+    return t.type === D && (k.open = z === a), f.cloneElement(t, k);
   });
-  return m === "up" && l.reverse(), _(() => {
-    d || (r(-1), c && c(!1));
-  }, [d, c]), /* @__PURE__ */ g(
+  return l === "up" && m.reverse(), V(() => {
+    y || (r(-1), c && c(!1));
+  }, [y, c]), /* @__PURE__ */ g(
     K,
     {
       anchorElement: R,
-      verticalAnchor: y,
+      verticalAnchor: d,
       verticalOrigin: S,
       verticalOffset: i,
       horizontalAnchor: C || "end",
       horizontalOrigin: X || "end",
       horizontalOffset: h,
-      open: d,
+      open: y,
       onClose: x,
       restoreFocus: Y,
       veil: s,
-      children: /* @__PURE__ */ g(J, { ref: z, className: L(j.menu, E, "menu"), ...I, children: l })
+      children: /* @__PURE__ */ g(J, { ref: I, className: L(j.menu, E, "tcn-menu"), ...b, children: m })
     }
   );
 }), D = f.forwardRef(function({
   selected: R,
-  label: y,
+  label: d,
   className: S,
   children: i,
   direction: C = "down",
   verticalAnchor: X = "top",
   verticalOrigin: h = "top",
-  verticalOffset: m,
-  horizontalAnchor: d = "end",
+  verticalOffset: l,
+  horizontalAnchor: y = "end",
   horizontalOrigin: x = "start",
   horizontalOffset: Y,
   open: s = !1,
   ...c
-}, b) {
-  const E = M(!1), I = M({ x: -1, y: -1 }), z = M({ x: -1, y: -1 }), [P, r] = F(!1), l = M(null), t = T(b, l), a = i != null && i.length > 0;
+}, _) {
+  const E = M(!1), b = M({ x: -1, y: -1 }), I = M({ x: -1, y: -1 }), [z, r] = F(!1), m = M(null), t = T(_, m), a = i != null && i.length > 0;
   function k() {
     r(!1);
   }
-  return _(() => {
-    const e = l.current;
+  return V(() => {
+    const e = m.current;
     if (e && a && s) {
-      const u = window.getComputedStyle(e).direction, o = I.current, p = z.current, B = (n) => {
+      const u = window.getComputedStyle(e).direction, o = b.current, p = I.current, B = (n) => {
         o.x === -1 && (o.x = n.clientX, o.y = n.clientY);
-        const V = n.clientX - o.x, w = n.clientY - o.y;
-        if (p.x = Math.max(Math.abs(V), 1e-3), p.y = Math.max(Math.abs(w), 1e-3), (V < 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "ltr" || (V > 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "rtl") {
+        const P = n.clientX - o.x, w = n.clientY - o.y;
+        if (p.x = Math.max(Math.abs(P), 1e-3), p.y = Math.max(Math.abs(w), 1e-3), (P < 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "ltr" || (P > 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "rtl") {
           o.x = n.clientX, o.y = n.clientY, r(!1);
           return;
         }
@@ -119,7 +119,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
         window.removeEventListener("mousemove", B);
       };
     }
-  }, [a, s]), _(() => {
+  }, [a, s]), V(() => {
     r(s);
   }, [s]), /* @__PURE__ */ W(q, { children: [
     /* @__PURE__ */ g(
@@ -129,24 +129,24 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
         ref: t,
         "data-is-selected": !!R,
         "data-has-children": !!a,
-        className: L(S, j["menu-item"], "menu-item"),
+        className: L(S, j["menu-item"], "tcn-menu-item"),
         "data-is-open": s,
         ...c,
-        children: typeof y == "string" ? /* @__PURE__ */ g(O, { color: "inherit", children: y }) : y
+        children: typeof d == "string" ? /* @__PURE__ */ g(O, { color: "inherit", children: d }) : d
       }
     ),
     i && /* @__PURE__ */ g(
       Z,
       {
-        anchorElement: l.current,
-        veil: P,
+        anchorElement: m.current,
+        veil: z,
         onClose: k,
         open: s,
         direction: C,
         verticalAnchor: X,
         verticalOrigin: h,
-        verticalOffset: m,
-        horizontalAnchor: d,
+        verticalOffset: l,
+        horizontalAnchor: y,
         horizontalOrigin: x,
         horizontalOffset: Y,
         hAlign: "start",

package/dist/overlay/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":";;;;;;;;;;;;sFAiBaA,IAAOC,EAAM,WAAW,SACnC;AAAA,EACE,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC,IAAW,CAAA;AAAA,EACX,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAE,GAC7CC,IAAiBrB,EAAM,SAAS,QAAQc,CAAQ,EAAE,IAAI,CAACQ,GAAOC,MAAU;AAC5E,QAAI,CAACvB,EAAM,eAAesB,CAAK;AAC7B,aAAOA;AAGT,QAAIA,EAAM,SAASE;AACjB,aAAOxB,EAAM,aAAasB,GAAO;AAAA,QAC/B,GAAGA,EAAM;AAAA,QACT,SAAS,CAAC,MAAqC;AAC7C,YAAE,gBAAA,GACFA,EAAM,MAAM,WAAWA,EAAM,MAAM,QAAQ,CAAC;AAAA,QAC9C;AAAA,MAAA,CACD;AAGH,UAAMN,IAAQ;AAAA,MACZ,GAAGM,EAAM;AAAA,MACT,KAAKC;AAAA,MACL,gBAAgBf,MAAc,OAAO,WAAW;AAAA,MAChD,gBAAgBA,MAAc,OAAO,WAAW;AAAA,MAChD,gBAAAJ;AAAA,MACA,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,kBAAAG;AAAA,MACA,WAAAC;AAAA,MACA,SAAS,CAAC,MAAwC;AAChD,QAAIc,EAAM,MAAM,YAAY,QAC1BZ,KAAWA,EAAA,GAEbY,EAAM,MAAM,WAAWA,EAAM,MAAM,QAAQ,CAAC;AAAA,MAC9C;AAAA,MACA,cAAc,CAAC,MAAwC;AACrD,QAAAH,EAAgBI,CAAK,GACrBV,KAAmBA,EAAgB,EAAI,GACvCS,EAAM,MAAM,gBAAgBA,EAAM,MAAM,aAAa,CAAC;AAAA,MACxD;AAAA,IAAA;AAGF,WAAIA,EAAM,SAASE,MACjBR,EAAM,OAAOE,MAAiBK,IAGzBvB,EAAM,aAAasB,GAAON,CAAK;AAAA,EACxC,CAAC;AAED,SAAAR,MAAc,QAAQa,EAAe,QAAA,GAErCI,EAAgB,MAAM;AACpB,IAAKhB,MACHU,EAAgB,EAAE,GAClBN,KAAmBA,EAAgB,EAAK;AAAA,EAE5C,GAAG,CAACJ,GAAMI,CAAe,CAAC,GAGxB,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAA1B;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAkBC,KAAoB;AAAA,MACtC,kBAAkBC,KAAoB;AAAA,MACtC,kBAAAC;AAAA,MACA,MAAAE;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAAc,EAACE,GAAA,EAAO,KAAAX,GAAU,WAAWY,EAAKC,EAAO,MAAMf,GAAW,MAAM,GAAI,GAAGC,GACpE,UAAAK,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAgBYG,IAAWxB,EAAM,WAAW,SACvC;AAAA,EACE,UAAA+B;AAAA,EACA,OAAAC;AAAA,EACA,WAAAjB;AAAA,EACA,UAAAD;AAAA,EACA,WAAAN,IAAY;AAAA,EACZ,gBAAAN,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC;AAAA,EACA,MAAAE,IAAO;AAAA,EACP,GAAGO;AACL,GACAC,GACA;AACA,QAAMgB,IAAoBC,EAAO,EAAK,GAChCC,IAAoBD,EAAO,EAAE,GAAG,IAAI,GAAG,IAAI,GAC3CE,IAAiBF,EAAO,EAAE,GAAG,IAAI,GAAG,IAAI,GACxC,CAACG,GAAUC,CAAW,IAAIlB,EAAS,EAAK,GACxCmB,IAAUL,EAA2B,IAAI,GACzCM,IAAYC,EAAWxB,GAAKsB,CAAO,GACnCG,IAAa5B,KAAY,QAAQA,EAAS,SAAS;AAEzD,WAAS6B,IAAQ;AACf,IAAAL,EAAY,EAAK;AAAA,EACnB;AAEA,SAAAb,EAAgB,MAAM;AACpB,UAAMmB,IAAcL,EAAQ;AAE5B,QAAIK,KAAeF,KAAcjC,GAAM;AACrC,YAAMD,IAAY,OAAO,iBAAiBoC,CAAW,EAAE,WAEjDC,IAAgBV,EAAkB,SAClCW,IAAQV,EAAe,SAEvBW,IAAiB,CAACC,MAAsB;AAC5C,QAAIH,EAAc,MAAM,OACtBA,EAAc,IAAIG,EAAM,SACxBH,EAAc,IAAIG,EAAM;AAG1B,cAAMC,IAASD,EAAM,UAAUH,EAAc,GACvCK,IAASF,EAAM,UAAUH,EAAc;AAc7C,YAbAC,EAAM,IAAI,KAAK,IAAI,KAAK,IAAIG,CAAM,GAAG,IAAK,GAC1CH,EAAM,IAAI,KAAK,IAAI,KAAK,IAAII,CAAM,GAAG,IAAK,IAGtCD,IAAS,KACRzC,MAAc,UAAU0C,IAAS,KACjC1C,MAAc,QAAQ0C,IAAS,MAChC1C,MAAc,UACdyC,IAAS,KACRzC,MAAc,UAAU0C,IAAS,KACjC1C,MAAc,QAAQ0C,IAAS,MAChC1C,MAAc,OAES;AACzB,UAAAqC,EAAc,IAAIG,EAAM,SACxBH,EAAc,IAAIG,EAAM,SACxBV,EAAY,EAAK;AACjB;AAAA,QACF;AAEA,cAAMa,IAAW,KAAK,KAAKL,EAAM,KAAK,IAAIA,EAAM,KAAK,CAAC;AAEtD,YAAIb,EAAkB,SAAS;AAC7B,UAAAY,EAAc,IAAIG,EAAM,SACxBH,EAAc,IAAIG,EAAM,SACxBV,EAAY,EAAK;AACjB;AAAA,QACF;AAEA,YAAIa,IAAW,GAAG;AAChB,gBAAMC,IAAmBN,EAAM,IAAIA,EAAM,IAAI;AAE7C,UACER,EADE,EAAAc,CACc,GAKlBP,EAAc,IAAIG,EAAM,SACxBH,EAAc,IAAIG,EAAM;AAAA,QAC1B;AAAA,MACF;AAEA,oBAAO,iBAAiB,aAAaD,CAAc,GAE5C,MAAM;AACX,eAAO,oBAAoB,aAAaA,CAAc;AAAA,MACxD;AAAA,IACF;AAAA,EACF,GAAG,CAACL,GAAYjC,CAAI,CAAC,GAErBgB,EAAgB,MAAM;AACpB,IAAAa,EAAY7B,CAAI;AAAA,EAClB,GAAG,CAACA,CAAI,CAAC,GAGP,gBAAA4C,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAA5B;AAAA,MAAC6B;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,KAAKf;AAAA,QACL,oBAAkB,EAAQT;AAAA,QAC1B,qBAAmB,EAAQW;AAAA,QAC3B,WAAWb,EAAKd,GAAWe,EAAO,WAAW,GAAG,WAAW;AAAA,QAC3D,gBAAcrB;AAAA,QACb,GAAGO;AAAA,QAEH,UAAA,OAAOgB,KAAU,WAAW,gBAAAN,EAAC8B,KAAS,OAAM,WAAW,aAAM,IAAcxB;AAAA,MAAA;AAAA,IAAA;AAAA,IAE7ElB,KACC,gBAAAY;AAAA,MAAC3B;AAAA,MAAA;AAAA,QACC,eAAewC,EAAQ;AAAA,QACvB,MAAMF;AAAA,QACN,SAASM;AAAA,QACT,MAAAlC;AAAA,QACA,WAAAD;AAAA,QACA,gBAAAN;AAAA,QACA,gBAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,QAAO;AAAA,QACP,iBAAiB,CAAAkD,MAAiB;AAChC,UAAAxB,EAAkB,UAAUwB;AAAA,QAC9B;AAAA,QAEC,UAAA3C;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":"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"}

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

@@ -1 +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"}
+{"version":3,"file":"popper.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAKjE,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/legacy/popper.js

@@ -5,9 +5,10 @@ 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_fcfb66a", U = "_popover-veil_c56df66", P = { popover: Q, "popover-veil": U };
-function ie({
-  anchorElement: n,
+import Q from "clsx";
+import '../../../popper.css';const U = "_popover_fcfb66a", V = "_popover-veil_c56df66", P = { popover: U, "popover-veil": V };
+function re({
+  anchorElement: r,
   verticalAnchor: _ = "bottom",
   verticalOrigin: j = "top",
   verticalOffset: h = 0,
@@ -25,13 +26,13 @@ function ie({
   isClickAwayException: W,
   isScrollAwayException: $
 }) {
-  const k = f(n), [c, q] = K({ top: 0, left: 0 }), x = f(null), w = f(null), T = u && n != null, D = H ?? [], F = !N, C = f(null);
+  const k = f(r), [c, q] = K({ top: 0, left: 0 }), x = f(null), w = f(null), T = u && r != null, D = H ?? [], F = !N, C = f(null);
   function S() {
     R && R();
   }
   const m = () => {
-    if (!n || !w.current) return;
-    const e = n.getBoundingClientRect(), o = w.current.getBoundingClientRect(), A = window.innerWidth, L = window.innerHeight, v = getComputedStyle(n).direction === "rtl";
+    if (!r || !w.current) return;
+    const e = r.getBoundingClientRect(), o = w.current.getBoundingClientRect(), A = window.innerWidth, L = window.innerHeight, v = getComputedStyle(r).direction === "rtl";
     let t = e.top, i = e.left;
     switch (_) {
       case "top":
@@ -55,8 +56,8 @@ function ie({
         break;
     }
     d === "start" ? i += v ? e.width + s : s : d === "center" ? i += e.width / 2 : d === "end" && (i += v ? -s : e.width + s);
-    let r = a;
-    v && (a === "start" ? r = "end" : a === "end" && (r = "start")), r === "start" || (r === "center" ? i -= o.width / 2 : r === "end" && (i -= o.width)), i + o.width > A && (i = A - o.width), i < 0 && (i = 0), t + o.height > L && (t = L - o.height), t < 0 && (t = 0), (t !== c.top || i !== c.left) && q({ top: t, left: i });
+    let n = a;
+    v && (a === "start" ? n = "end" : a === "end" && (n = "start")), n === "start" || (n === "center" ? i -= o.width / 2 : n === "end" && (i -= o.width)), i + o.width > A && (i = A - o.width), i < 0 && (i = 0), t + o.height > L && (t = L - o.height), t < 0 && (t = 0), (t !== c.top || i !== c.left) && q({ top: t, left: i });
   };
   if (E(() => (m(), window.addEventListener("resize", m), () => {
     window.removeEventListener("resize", m);
@@ -71,12 +72,12 @@ function ie({
     }
   }, [u, g]), !T)
     return null;
-  k.current = n;
+  k.current = r;
   let l = /* @__PURE__ */ p(J, { onScrollAway: S, isException: $, children: /* @__PURE__ */ p(
     "div",
     {
       ref: w,
-      className: P.popover,
+      className: Q(P.popover, "tcn-popper"),
       style: {
         top: `${c.top}px`,
         left: `${c.left}px`
@@ -106,6 +107,6 @@ function ie({
   ] });
 }
 export {
-  ie as Popper
+  re as Popper
 };
 //# sourceMappingURL=popper.js.map

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

@@ -1 +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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"}
+{"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';\nimport clsx from 'clsx';\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={clsx(styles.popover, 'tcn-popper')}\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","clsx","styles","ClickAwayListener","Portal"],"mappings":"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"}

package/dist/overlay/popper/preview_popper.js

@@ -1,40 +1,40 @@
-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 { jsx as r, Fragment as d } from "react/jsx-runtime";
+import { forwardRef as u, useRef as R } from "react";
+import { BasePopper as a } 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 { ElementTethered as v } from "../tethered/element_tethered.js";
+import { usePreviewElement as E } from "./hooks/use_hover_trigger.js";
 import { PopperDismissal as g } from "./base/dismissal_decorator.js";
 const T = u(function({
-  anchorElement: r,
+  anchorElement: e,
   restoreFocus: p,
-  children: m,
-  acceptedRefs: i = [],
+  children: i,
+  acceptedRefs: m = [],
   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,
+  const o = R(null), c = w(n, o), { isOpen: l, close: P } = E(e);
+  return /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(
+    a,
     {
       restoreFocus: p,
       open: l,
       onDismissal: P,
       isException: t,
       dismissals: s,
-      acceptedRefs: [o, ...i],
-      children: /* @__PURE__ */ e(
-        E,
+      acceptedRefs: [o, e, ...m],
+      children: /* @__PURE__ */ r(
+        v,
         {
           ref: c,
-          anchorElement: r,
+          anchorElement: e,
           ...f,
-          children: m
+          children: i
         }
       )
     }

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

@@ -1 +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;"}
+{"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, anchorElement, ...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,GAAWT,GAAe,GAAGG,CAAY;AAAA,MAExD,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/portal/portal.css

@@ -0,0 +1 @@
+@layer tcn-system{:where(body>*){position:relative;z-index:0}:where(.tcn-portal){position:absolute!important;inset:0;overflow:hidden;padding:0;margin:0;pointer-events:none}:where(.tcn-portal>*){pointer-events:auto}:where(.tcn-portal-platform){position:fixed!important;inset:0;overflow:hidden;padding:0;margin:0;background-color:#0000;pointer-events:none;transform:none;z-index:1}}