@tcn/ui 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/dist/draggable.module-BgelQsuJ.js +5 -0
  2. package/dist/draggable.module-BgelQsuJ.js.map +1 -0
  3. package/dist/form/field/field.js +13 -10
  4. package/dist/form/field/field.js.map +1 -1
  5. package/dist/form/field_presenters/field_presenter.d.ts +2 -2
  6. package/dist/form/field_presenters/field_presenter.d.ts.map +1 -1
  7. package/dist/form/field_presenters/field_presenter.js.map +1 -1
  8. package/dist/inputs/color_input/color_picker.js +5 -3
  9. package/dist/inputs/color_input/color_picker.js.map +1 -1
  10. package/dist/inputs/combo_box/combo_box.js +4 -2
  11. package/dist/inputs/combo_box/combo_box.js.map +1 -1
  12. package/dist/inputs/date_picker/date_picker.js +16 -14
  13. package/dist/inputs/date_picker/date_picker.js.map +1 -1
  14. package/dist/inputs/date_picker/date_picker_input.js +10 -8
  15. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  16. package/dist/inputs/date_picker/date_picker_year_selector.js +4 -2
  17. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  18. package/dist/inputs/mask_input/key_capture_input.js +15 -12
  19. package/dist/inputs/mask_input/key_capture_input.js.map +1 -1
  20. package/dist/inputs/mask_input/mask_input.js +13 -10
  21. package/dist/inputs/mask_input/mask_input.js.map +1 -1
  22. package/dist/inputs/multiselect/multiselect.js +9 -7
  23. package/dist/inputs/multiselect/multiselect.js.map +1 -1
  24. package/dist/inputs/phone_number_input/phone_number_input.d.ts +1 -0
  25. package/dist/inputs/phone_number_input/phone_number_input.d.ts.map +1 -1
  26. package/dist/inputs/phone_number_input/phone_number_input.js +136 -133
  27. package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
  28. package/dist/inputs/select/select.js +4 -2
  29. package/dist/inputs/select/select.js.map +1 -1
  30. package/dist/inputs/slider/slider.js +7 -5
  31. package/dist/inputs/slider/slider.js.map +1 -1
  32. package/dist/inputs/suggestions/suggestion_list.js +4 -2
  33. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  34. package/dist/inputs/switch/switch.js +16 -14
  35. package/dist/inputs/switch/switch.js.map +1 -1
  36. package/dist/inputs/unit_input/unit_input.js +16 -14
  37. package/dist/inputs/unit_input/unit_input.js.map +1 -1
  38. package/dist/navigation/tabs/primitives/tabs_list.d.ts.map +1 -1
  39. package/dist/navigation/tabs/primitives/tabs_list.js +61 -21
  40. package/dist/navigation/tabs/primitives/tabs_list.js.map +1 -1
  41. package/dist/navigation/tabs/state/link/tab_link.d.ts.map +1 -1
  42. package/dist/navigation/tabs/state/link/tab_link.js +25 -19
  43. package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
  44. package/dist/navigation/tabs/state/link/use_tab_link.js +8 -8
  45. package/dist/navigation/tabs/state/link/use_tab_link.js.map +1 -1
  46. package/dist/navigation/tabs/state/tab.d.ts.map +1 -1
  47. package/dist/navigation/tabs/state/tab.js +8 -3
  48. package/dist/navigation/tabs/state/tab.js.map +1 -1
  49. package/dist/overlay/caret/caret.d.ts +8 -0
  50. package/dist/overlay/caret/caret.d.ts.map +1 -0
  51. package/dist/overlay/caret/caret.js +20 -0
  52. package/dist/overlay/caret/caret.js.map +1 -0
  53. package/dist/overlay/menu/menu.js +34 -32
  54. package/dist/overlay/menu/menu.js.map +1 -1
  55. package/dist/overlay/popper/legacy/popper.js +22 -20
  56. package/dist/overlay/popper/legacy/popper.js.map +1 -1
  57. package/dist/overlay/popper/preview_popper.js +12 -9
  58. package/dist/overlay/popper/preview_popper.js.map +1 -1
  59. package/dist/overlay/tethered/hooks/calculate_origin.d.ts +23 -0
  60. package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +1 -0
  61. package/dist/overlay/tethered/hooks/calculate_origin.js +41 -0
  62. package/dist/overlay/tethered/hooks/calculate_origin.js.map +1 -0
  63. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +9 -0
  64. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +1 -0
  65. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +14 -0
  66. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +1 -0
  67. package/dist/overlay/tethered/hooks/useTether.d.ts +1 -1
  68. package/dist/overlay/tethered/hooks/useTether.d.ts.map +1 -1
  69. package/dist/overlay/tethered/hooks/useTether.js +22 -21
  70. package/dist/overlay/tethered/hooks/useTether.js.map +1 -1
  71. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +3 -0
  72. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +1 -0
  73. package/dist/overlay/tethered/hooks/useTetherContentRect.js +36 -0
  74. package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +1 -0
  75. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +14 -0
  76. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +1 -0
  77. package/dist/overlay/tethered/hooks/useTetherOrigin.js +24 -0
  78. package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +1 -0
  79. package/dist/overlay/tethered/tethered.d.ts +2 -1
  80. package/dist/overlay/tethered/tethered.d.ts.map +1 -1
  81. package/dist/overlay/tethered/tethered.js +71 -38
  82. package/dist/overlay/tethered/tethered.js.map +1 -1
  83. package/dist/stacks/box/box.js +29 -27
  84. package/dist/stacks/box/box.js.map +1 -1
  85. package/dist/stacks/h_collapsible_box.js +14 -12
  86. package/dist/stacks/h_collapsible_box.js.map +1 -1
  87. package/dist/stacks/v_collapsible_box.js +8 -6
  88. package/dist/stacks/v_collapsible_box.js.map +1 -1
  89. package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map +1 -1
  90. package/dist/surfaces/pop_confirm/pop_confirm.js +14 -13
  91. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  92. package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -1
  93. package/dist/surfaces/tooltip/tooltip.js +12 -11
  94. package/dist/surfaces/tooltip/tooltip.js.map +1 -1
  95. package/dist/tethered.css +1 -1
  96. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  97. package/dist/themes/themes/ergo/ergo_theme.js +87 -57
  98. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  99. package/dist/themes/themes/windows_98/windows_98.css +1 -1
  100. package/dist/themes/themes/windows_98/windows_98_theme.js +18 -18
  101. package/dist/themes/themes/windows_98/windows_98_theme.js.map +1 -1
  102. package/dist/utils/dnd/draggable/draggable.js +13 -12
  103. package/dist/utils/dnd/draggable/draggable.js.map +1 -1
  104. package/dist/utils/index.d.ts +2 -0
  105. package/dist/utils/index.d.ts.map +1 -1
  106. package/dist/utils/index.js +23 -19
  107. package/dist/utils/index.js.map +1 -1
  108. package/package.json +11 -11
  109. package/src/form/field_presenters/field_presenter.ts +3 -3
  110. package/src/inputs/phone_number_input/phone_number_input.stories.tsx +24 -0
  111. package/src/inputs/phone_number_input/phone_number_input.tsx +8 -6
  112. package/src/navigation/tabs/primitives/tabs_list.tsx +46 -2
  113. package/src/navigation/tabs/state/link/tab_link.tsx +4 -1
  114. package/src/navigation/tabs/state/link/use_tab_link.ts +4 -4
  115. package/src/navigation/tabs/state/tab.tsx +10 -0
  116. package/src/overlay/{carrot/carrot.stories.tsx → caret/caret.stories.tsx} +14 -14
  117. package/src/overlay/caret/caret.tsx +24 -0
  118. package/src/overlay/tethered/__stories__/shared/base_story_config.ts +8 -0
  119. package/src/overlay/tethered/hooks/calculate_origin.ts +74 -0
  120. package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +22 -0
  121. package/src/overlay/tethered/hooks/useTether.ts +4 -3
  122. package/src/overlay/tethered/hooks/useTetherContentRect.ts +49 -0
  123. package/src/overlay/tethered/hooks/useTetherOrigin.ts +49 -0
  124. package/src/overlay/tethered/tethered.module.css +55 -0
  125. package/src/overlay/tethered/tethered.tsx +44 -6
  126. package/src/surfaces/panel/__stories__/panel.stories.tsx +62 -27
  127. package/src/surfaces/panel/__stories__/panel_stories.module.css +14 -1
  128. package/src/surfaces/pop_confirm/pop_confirm.tsx +4 -3
  129. package/src/surfaces/tooltip/tooltip.tsx +1 -0
  130. package/src/themes/themes/ergo/ergo_theme.css +87 -57
  131. package/src/themes/themes/windows_98/windows_98.css +18 -18
  132. package/src/utils/index.ts +3 -0
  133. package/dist/overlay/carrot/base_carrot.d.ts +0 -8
  134. package/dist/overlay/carrot/base_carrot.d.ts.map +0 -1
  135. package/dist/overlay/carrot/base_carrot.js +0 -21
  136. package/dist/overlay/carrot/base_carrot.js.map +0 -1
  137. package/src/overlay/carrot/base_carrot.tsx +0 -24
@@ -1,6 +1,11 @@
1
- import { useTabs as r } from "./context.js";
2
- const n = ({ value: t, children: e }) => r().value !== t ? null : e;
1
+ import e from "react";
2
+ import { useTabs as a } from "./context.js";
3
+ const m = ({ value: o, children: t }) => a().value !== o ? null : t && e.isValidElement(t) ? e.cloneElement(t, {
4
+ ...t.props,
5
+ id: t.props.id ?? `tabpanel-${o}`,
6
+ role: t.props.role ?? "tabpanel"
7
+ }) : t;
3
8
  export {
4
- n as Tab
9
+ m as Tab
5
10
  };
6
11
  //# sourceMappingURL=tab.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tab.js","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { useTabs } from './context.js';\n\nexport interface TabProps {\n value: string;\n}\n\nexport const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {\n const state = useTabs();\n if (state.value !== value) return null;\n return children;\n};\n"],"names":["Tab","value","children","useTabs"],"mappings":";AAOO,MAAMA,IAAuC,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAC9CC,EAAA,EACJ,UAAUF,IAAc,OAC3BC;"}
1
+ {"version":3,"file":"tab.js","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC, PropsWithChildren } from 'react';\nimport { useTabs } from './context.js';\n\nexport interface TabProps {\n value: string;\n}\n\nexport const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {\n const state = useTabs();\n if (state.value !== value) return null;\n\n if (children && React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...children.props,\n id: children.props.id ?? `tabpanel-${value}`,\n role: children.props.role ?? 'tabpanel',\n });\n }\n\n return children;\n};\n"],"names":["Tab","value","children","useTabs","React"],"mappings":";;AAQO,MAAMA,IAAuC,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAC9CC,EAAA,EACJ,UAAUF,IAAc,OAE9BC,KAAYE,EAAM,eAAeF,CAAQ,IACpCE,EAAM,aAAaF,GAAU;AAAA,EAClC,GAAGA,EAAS;AAAA,EACZ,IAAIA,EAAS,MAAM,MAAM,YAAYD,CAAK;AAAA,EAC1C,MAAMC,EAAS,MAAM,QAAQ;AAAA,CAC9B,IAGIA;"}
@@ -0,0 +1,8 @@
1
+ import { BoxProps } from '../../stacks/box/box.js';
2
+ export interface CaretOwnProps {
3
+ direction: 'top' | 'bottom' | 'start' | 'end';
4
+ }
5
+ export interface CaretProps extends CaretOwnProps, BoxProps {
6
+ }
7
+ export declare const Caret: import('react').ForwardRefExoticComponent<CaretProps & import('react').RefAttributes<HTMLElement>>;
8
+ //# sourceMappingURL=caret.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"caret.d.ts","sourceRoot":"","sources":["../../../src/overlay/caret/caret.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;CAC/C;AAED,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;CAAG;AAE9D,eAAO,MAAM,KAAK,oGAahB,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { jsx as m } from "react/jsx-runtime";
2
+ import s from "clsx";
3
+ import { forwardRef as e } from "react";
4
+ import { Box as n } from "../../stacks/box/box.js";
5
+ const l = e(function({ direction: r, className: o, as: f = "span", ...t }, a) {
6
+ return /* @__PURE__ */ m(
7
+ n,
8
+ {
9
+ ref: a,
10
+ as: "span",
11
+ "data-direction": r,
12
+ className: s("tcn-caret", o),
13
+ ...t
14
+ }
15
+ );
16
+ });
17
+ export {
18
+ l as Caret
19
+ };
20
+ //# sourceMappingURL=caret.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"caret.js","sources":["../../../src/overlay/caret/caret.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { forwardRef } from 'react';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\n\nexport interface CaretOwnProps {\n direction: 'top' | 'bottom' | 'start' | 'end';\n}\n\nexport interface CaretProps extends CaretOwnProps, BoxProps {}\n\nexport const Caret = forwardRef<HTMLElement, CaretProps>(function Caret(\n { direction, className, as = 'span', ...rest },\n ref\n) {\n return (\n <Box\n ref={ref}\n as=\"span\"\n data-direction={direction}\n className={clsx('tcn-caret', className)}\n {...rest}\n />\n );\n});\n"],"names":["Caret","forwardRef","direction","className","as","rest","ref","jsx","Box","clsx"],"mappings":";;;;AAUO,MAAMA,IAAQC,EAAoC,SACvD,EAAE,WAAAC,GAAW,WAAAC,GAAW,IAAAC,IAAK,QAAQ,GAAGC,EAAA,GACxCC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,kBAAgBJ;AAAA,MAChB,WAAWO,EAAK,aAAaN,CAAS;AAAA,MACrC,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
@@ -6,10 +6,12 @@ import "../../utils/scroll_away_listener.js";
6
6
  import f, { useState as F, useLayoutEffect as V, useRef as M } from "react";
7
7
  import { useForkRef as T } from "../../utils/hooks/use_fork_ref.js";
8
8
  import "../../utils/hooks/use_resize_observer.js";
9
+ import "../../utils/dnd/context.js";
10
+ import { clsx as L } from "clsx";
11
+ import "../../draggable.module-BgelQsuJ.js";
9
12
  import { HStack as G } from "../../stacks/h_stack.js";
10
13
  import { VStack as J } from "../../stacks/v_stack.js";
11
14
  import { Popper as K } from "../popper/legacy/popper.js";
12
- import { clsx as L } from "clsx";
13
15
  import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j = { menu: Q, "menu-item": U }, Z = f.forwardRef(function({
14
16
  anchorElement: R,
15
17
  verticalAnchor: d,
@@ -18,7 +20,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
18
20
  horizontalAnchor: C,
19
21
  horizontalOrigin: X,
20
22
  horizontalOffset: h,
21
- direction: l,
23
+ direction: a,
22
24
  open: y,
23
25
  onClose: x,
24
26
  restoreFocus: Y,
@@ -28,36 +30,36 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
28
30
  className: E,
29
31
  ...b
30
32
  }, I) {
31
- const [z, r] = F(-1), m = f.Children.toArray(_).map((t, a) => {
33
+ const [z, r] = F(-1), l = f.Children.toArray(_).map((t, m) => {
32
34
  if (!f.isValidElement(t))
33
35
  return t;
34
36
  if (t.type !== D)
35
37
  return f.cloneElement(t, {
36
38
  ...t.props,
37
- onClick: (e) => {
38
- e.stopPropagation(), t.props.onClick && t.props.onClick(e);
39
+ onClick: (o) => {
40
+ o.stopPropagation(), t.props.onClick && t.props.onClick(o);
39
41
  }
40
42
  });
41
43
  const k = {
42
44
  ...t.props,
43
- key: a,
44
- verticalAnchor: l === "up" ? "bottom" : "top",
45
- verticalOrigin: l === "up" ? "bottom" : "top",
45
+ key: m,
46
+ verticalAnchor: a === "up" ? "bottom" : "top",
47
+ verticalOrigin: a === "up" ? "bottom" : "top",
46
48
  verticalOffset: i,
47
49
  horizontalAnchor: "end",
48
50
  horizontalOrigin: "start",
49
51
  horizontalOffset: h,
50
- direction: l,
51
- onClick: (e) => {
52
- t.props.children == null && x && x(), t.props.onClick && t.props.onClick(e);
52
+ direction: a,
53
+ onClick: (o) => {
54
+ t.props.children == null && x && x(), t.props.onClick && t.props.onClick(o);
53
55
  },
54
- onMouseEnter: (e) => {
55
- r(a), c && c(!0), t.props.onMouseEnter && t.props.onMouseEnter(e);
56
+ onMouseEnter: (o) => {
57
+ r(m), c && c(!0), t.props.onMouseEnter && t.props.onMouseEnter(o);
56
58
  }
57
59
  };
58
- return t.type === D && (k.open = z === a), f.cloneElement(t, k);
60
+ return t.type === D && (k.open = z === m), f.cloneElement(t, k);
59
61
  });
60
- return l === "up" && m.reverse(), V(() => {
62
+ return a === "up" && l.reverse(), V(() => {
61
63
  y || (r(-1), c && c(!1));
62
64
  }, [y, c]), /* @__PURE__ */ g(
63
65
  K,
@@ -73,7 +75,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
73
75
  onClose: x,
74
76
  restoreFocus: Y,
75
77
  veil: s,
76
- children: /* @__PURE__ */ g(J, { ref: I, className: L(j.menu, E, "tcn-menu"), ...b, children: m })
78
+ children: /* @__PURE__ */ g(J, { ref: I, className: L(j.menu, E, "tcn-menu"), ...b, children: l })
77
79
  }
78
80
  );
79
81
  }), D = f.forwardRef(function({
@@ -84,42 +86,42 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
84
86
  direction: C = "down",
85
87
  verticalAnchor: X = "top",
86
88
  verticalOrigin: h = "top",
87
- verticalOffset: l,
89
+ verticalOffset: a,
88
90
  horizontalAnchor: y = "end",
89
91
  horizontalOrigin: x = "start",
90
92
  horizontalOffset: Y,
91
93
  open: s = !1,
92
94
  ...c
93
95
  }, _) {
94
- 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;
96
+ const E = M(!1), b = M({ x: -1, y: -1 }), I = M({ x: -1, y: -1 }), [z, r] = F(!1), l = M(null), t = T(_, l), m = i != null && i.length > 0;
95
97
  function k() {
96
98
  r(!1);
97
99
  }
98
100
  return V(() => {
99
- const e = m.current;
100
- if (e && a && s) {
101
- const u = window.getComputedStyle(e).direction, o = b.current, p = I.current, B = (n) => {
102
- o.x === -1 && (o.x = n.clientX, o.y = n.clientY);
103
- const P = n.clientX - o.x, w = n.clientY - o.y;
101
+ const o = l.current;
102
+ if (o && m && s) {
103
+ const u = window.getComputedStyle(o).direction, e = b.current, p = I.current, B = (n) => {
104
+ e.x === -1 && (e.x = n.clientX, e.y = n.clientY);
105
+ const P = n.clientX - e.x, w = n.clientY - e.y;
104
106
  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") {
105
- o.x = n.clientX, o.y = n.clientY, r(!1);
107
+ e.x = n.clientX, e.y = n.clientY, r(!1);
106
108
  return;
107
109
  }
108
110
  const H = Math.sqrt(p.x ** 2 + p.y ** 2);
109
111
  if (E.current) {
110
- o.x = n.clientX, o.y = n.clientY, r(!1);
112
+ e.x = n.clientX, e.y = n.clientY, r(!1);
111
113
  return;
112
114
  }
113
115
  if (H > 5) {
114
116
  const N = p.x / p.y > 0.2;
115
- r(!!N), o.x = n.clientX, o.y = n.clientY;
117
+ r(!!N), e.x = n.clientX, e.y = n.clientY;
116
118
  }
117
119
  };
118
120
  return window.addEventListener("mousemove", B), () => {
119
121
  window.removeEventListener("mousemove", B);
120
122
  };
121
123
  }
122
- }, [a, s]), V(() => {
124
+ }, [m, s]), V(() => {
123
125
  r(s);
124
126
  }, [s]), /* @__PURE__ */ W(q, { children: [
125
127
  /* @__PURE__ */ g(
@@ -128,7 +130,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
128
130
  as: "button",
129
131
  ref: t,
130
132
  "data-is-selected": !!R,
131
- "data-has-children": !!a,
133
+ "data-has-children": !!m,
132
134
  className: L(S, j["menu-item"], "tcn-menu-item"),
133
135
  "data-is-open": s,
134
136
  ...c,
@@ -138,20 +140,20 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
138
140
  i && /* @__PURE__ */ g(
139
141
  Z,
140
142
  {
141
- anchorElement: m.current,
143
+ anchorElement: l.current,
142
144
  veil: z,
143
145
  onClose: k,
144
146
  open: s,
145
147
  direction: C,
146
148
  verticalAnchor: X,
147
149
  verticalOrigin: h,
148
- verticalOffset: l,
150
+ verticalOffset: a,
149
151
  horizontalAnchor: y,
150
152
  horizontalOrigin: x,
151
153
  horizontalOffset: Y,
152
154
  hAlign: "start",
153
- onActivatedMenu: (e) => {
154
- E.current = e;
155
+ onActivatedMenu: (o) => {
156
+ E.current = o;
155
157
  },
156
158
  children: i
157
159
  }
@@ -1 +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, '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":";;;;;;;;;;;;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,UAAU,GAAI,GAAGC,GACxE,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,eAAe;AAAA,QAC/D,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;"}
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, '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","e","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,CAACG,MAAqC;AAC7C,UAAAA,EAAE,gBAAA,GACFH,EAAM,MAAM,WAAWA,EAAM,MAAM,QAAQG,CAAC;AAAA,QAC9C;AAAA,MAAA,CACD;AAGH,UAAMT,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,CAACiB,MAAwC;AAChD,QAAIH,EAAM,MAAM,YAAY,QAC1BZ,KAAWA,EAAA,GAEbY,EAAM,MAAM,WAAWA,EAAM,MAAM,QAAQG,CAAC;AAAA,MAC9C;AAAA,MACA,cAAc,CAACA,MAAwC;AACrD,QAAAN,EAAgBI,CAAK,GACrBV,KAAmBA,EAAgB,EAAI,GACvCS,EAAM,MAAM,gBAAgBA,EAAM,MAAM,aAAaG,CAAC;AAAA,MACxD;AAAA,IAAA;AAGF,WAAIH,EAAM,SAASE,MACjBR,EAAM,OAAOE,MAAiBK,IAGzBvB,EAAM,aAAasB,GAAON,CAAK;AAAA,EACxC,CAAC;AAED,SAAAR,MAAc,QAAQa,EAAe,QAAA,GAErCK,EAAgB,MAAM;AACpB,IAAKjB,MACHU,EAAgB,EAAE,GAClBN,KAAmBA,EAAgB,EAAK;AAAA,EAE5C,GAAG,CAACJ,GAAMI,CAAe,CAAC,GAGxB,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAA3B;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,gBAAAe,EAACE,GAAA,EAAO,KAAAZ,GAAU,WAAWa,EAAKC,EAAO,MAAMhB,GAAW,UAAU,GAAI,GAAGC,GACxE,UAAAK,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAgBYG,IAAWxB,EAAM,WAAW,SACvC;AAAA,EACE,UAAAgC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAlB;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,QAAMiB,IAAoBC,EAAO,EAAK,GAChCC,IAAoBD,EAAO,EAAE,GAAG,IAAI,GAAG,IAAI,GAC3CE,IAAiBF,EAAO,EAAE,GAAG,IAAI,GAAG,IAAI,GACxC,CAACG,GAAUC,CAAW,IAAInB,EAAS,EAAK,GACxCoB,IAAUL,EAA2B,IAAI,GACzCM,IAAYC,EAAWzB,GAAKuB,CAAO,GACnCG,IAAa7B,KAAY,QAAQA,EAAS,SAAS;AAEzD,WAAS8B,IAAQ;AACf,IAAAL,EAAY,EAAK;AAAA,EACnB;AAEA,SAAAb,EAAgB,MAAM;AACpB,UAAMmB,IAAcL,EAAQ;AAE5B,QAAIK,KAAeF,KAAclC,GAAM;AACrC,YAAMD,IAAY,OAAO,iBAAiBqC,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,KACR1C,MAAc,UAAU2C,IAAS,KACjC3C,MAAc,QAAQ2C,IAAS,MAChC3C,MAAc,UACd0C,IAAS,KACR1C,MAAc,UAAU2C,IAAS,KACjC3C,MAAc,QAAQ2C,IAAS,MAChC3C,MAAc,OAES;AACzB,UAAAsC,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,GAAYlC,CAAI,CAAC,GAErBiB,EAAgB,MAAM;AACpB,IAAAa,EAAY9B,CAAI;AAAA,EAClB,GAAG,CAACA,CAAI,CAAC,GAGP,gBAAA6C,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,EAAKf,GAAWgB,EAAO,WAAW,GAAG,eAAe;AAAA,QAC/D,gBAActB;AAAA,QACb,GAAGO;AAAA,QAEH,UAAA,OAAOiB,KAAU,WAAW,gBAAAN,EAAC8B,KAAS,OAAM,WAAW,aAAM,IAAcxB;AAAA,MAAA;AAAA,IAAA;AAAA,IAE7EnB,KACC,gBAAAa;AAAA,MAAC5B;AAAA,MAAA;AAAA,QACC,eAAeyC,EAAQ;AAAA,QACvB,MAAMF;AAAA,QACN,SAASM;AAAA,QACT,MAAAnC;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,CAAAmD,MAAiB;AAChC,UAAAxB,EAAkB,UAAUwB;AAAA,QAC9B;AAAA,QAEC,UAAA5C;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}
@@ -1,13 +1,15 @@
1
- import { jsx as p, jsxs as G } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as G } from "react/jsx-runtime";
2
2
  import { ClickAwayListener as I } from "../../../utils/click_away_listener.js";
3
3
  import "../../../utils/focus_redirect.js";
4
4
  import { ScrollAwayListener as J } from "../../../utils/scroll_away_listener.js";
5
5
  import { useRef as f, useState as K, useLayoutEffect as E } from "react";
6
6
  import "../../../utils/hooks/use_resize_observer.js";
7
- import { Portal as M } from "../../portal/portal.js";
8
- import Q from "clsx";
7
+ import "../../../utils/dnd/context.js";
8
+ import M from "clsx";
9
+ import "../../../draggable.module-BgelQsuJ.js";
10
+ import { Portal as Q } from "../../portal/portal.js";
9
11
  import '../../../popper.css';const U = "_popover_fcfb66a", V = "_popover-veil_c56df66", P = { popover: U, "popover-veil": V };
10
- function re({
12
+ function se({
11
13
  anchorElement: r,
12
14
  verticalAnchor: _ = "bottom",
13
15
  verticalOrigin: j = "top",
@@ -26,13 +28,13 @@ function re({
26
28
  isClickAwayException: W,
27
29
  isScrollAwayException: $
28
30
  }) {
29
- 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);
31
+ const k = f(r), [c, q] = K({ top: 0, left: 0 }), x = f(null), m = f(null), T = u && r != null, D = H ?? [], F = !N, C = f(null);
30
32
  function S() {
31
33
  R && R();
32
34
  }
33
- const m = () => {
34
- if (!r || !w.current) return;
35
- const e = r.getBoundingClientRect(), o = w.current.getBoundingClientRect(), A = window.innerWidth, L = window.innerHeight, v = getComputedStyle(r).direction === "rtl";
35
+ const w = () => {
36
+ if (!r || !m.current) return;
37
+ const e = r.getBoundingClientRect(), o = m.current.getBoundingClientRect(), A = window.innerWidth, L = window.innerHeight, v = getComputedStyle(r).direction === "rtl";
36
38
  let t = e.top, i = e.left;
37
39
  switch (_) {
38
40
  case "top":
@@ -59,8 +61,8 @@ function re({
59
61
  let n = a;
60
62
  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 });
61
63
  };
62
- if (E(() => (m(), window.addEventListener("resize", m), () => {
63
- window.removeEventListener("resize", m);
64
+ if (E(() => (w(), window.addEventListener("resize", w), () => {
65
+ window.removeEventListener("resize", w);
64
66
  })), E(() => {
65
67
  if (u)
66
68
  x.current = window.document.activeElement;
@@ -73,11 +75,11 @@ function re({
73
75
  }, [u, g]), !T)
74
76
  return null;
75
77
  k.current = r;
76
- let l = /* @__PURE__ */ p(J, { onScrollAway: S, isException: $, children: /* @__PURE__ */ p(
78
+ let p = /* @__PURE__ */ l(J, { onScrollAway: S, isException: $, children: /* @__PURE__ */ l(
77
79
  "div",
78
80
  {
79
- ref: w,
80
- className: Q(P.popover, "tcn-popper"),
81
+ ref: m,
82
+ className: M(P.popover, "tcn-popper"),
81
83
  style: {
82
84
  top: `${c.top}px`,
83
85
  left: `${c.left}px`
@@ -85,28 +87,28 @@ function re({
85
87
  children: B
86
88
  }
87
89
  ) });
88
- return F && (l = /* @__PURE__ */ p(
90
+ return F && (p = /* @__PURE__ */ l(
89
91
  I,
90
92
  {
91
93
  onClickAway: S,
92
94
  refs: [k, ...D],
93
95
  isException: W,
94
- children: l
96
+ children: p
95
97
  }
96
- )), /* @__PURE__ */ G(M, { children: [
97
- y && /* @__PURE__ */ p(
98
+ )), /* @__PURE__ */ G(Q, { children: [
99
+ y && /* @__PURE__ */ l(
98
100
  "div",
99
101
  {
100
102
  ref: C,
101
103
  onClick: (e) => C.current === e.target && b && b(e),
102
104
  className: P["popover-veil"],
103
- children: l
105
+ children: p
104
106
  }
105
107
  ),
106
- !y && l
108
+ !y && p
107
109
  ] });
108
110
  }
109
111
  export {
110
- re as Popper
112
+ se as Popper
111
113
  };
112
114
  //# sourceMappingURL=popper.js.map
@@ -1 +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';\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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"}
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';\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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"}
@@ -1,4 +1,4 @@
1
- import { jsx as r, Fragment as d } from "react/jsx-runtime";
1
+ import { jsx as e, Fragment as d } from "react/jsx-runtime";
2
2
  import { forwardRef as u, useRef as R } from "react";
3
3
  import { BasePopper as a } from "./base/base_popper.js";
4
4
  import "../../utils/click_away_listener.js";
@@ -6,11 +6,14 @@ import "../../utils/focus_redirect.js";
6
6
  import "../../utils/scroll_away_listener.js";
7
7
  import { useForkRef as w } from "../../utils/hooks/use_fork_ref.js";
8
8
  import "../../utils/hooks/use_resize_observer.js";
9
+ import "../../utils/dnd/context.js";
10
+ import "clsx";
11
+ import "../../draggable.module-BgelQsuJ.js";
9
12
  import { ElementTethered as v } from "../tethered/element_tethered.js";
10
13
  import { usePreviewElement as E } from "./hooks/use_hover_trigger.js";
11
14
  import { PopperDismissal as g } from "./base/dismissal_decorator.js";
12
- const T = u(function({
13
- anchorElement: e,
15
+ const _ = u(function({
16
+ anchorElement: r,
14
17
  restoreFocus: p,
15
18
  children: i,
16
19
  acceptedRefs: m = [],
@@ -18,8 +21,8 @@ const T = u(function({
18
21
  dismissals: s = [g.MOUSE_LEAVE],
19
22
  ...f
20
23
  }, n) {
21
- const o = R(null), c = w(n, o), { isOpen: l, close: P } = E(e);
22
- return /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(
24
+ const o = R(null), c = w(n, o), { isOpen: l, close: P } = E(r);
25
+ return /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
23
26
  a,
24
27
  {
25
28
  restoreFocus: p,
@@ -27,12 +30,12 @@ const T = u(function({
27
30
  onDismissal: P,
28
31
  isException: t,
29
32
  dismissals: s,
30
- acceptedRefs: [o, e, ...m],
31
- children: /* @__PURE__ */ r(
33
+ acceptedRefs: [o, r, ...m],
34
+ children: /* @__PURE__ */ e(
32
35
  v,
33
36
  {
34
37
  ref: c,
35
- anchorElement: e,
38
+ anchorElement: r,
36
39
  ...f,
37
40
  children: i
38
41
  }
@@ -41,6 +44,6 @@ const T = u(function({
41
44
  ) });
42
45
  });
43
46
  export {
44
- T as PreviewPopper
47
+ _ as PreviewPopper
45
48
  };
46
49
  //# sourceMappingURL=preview_popper.js.map
@@ -1 +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, 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;"}
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, 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;"}
@@ -0,0 +1,23 @@
1
+ import { Position, Rectangle } from '../../../utils/index.js';
2
+ import { HorizontalTether, VerticalTether } from '../types.js';
3
+ export type CaretDirection = 'top' | 'bottom' | 'start' | 'end' | 'none';
4
+ /**
5
+ * Calculates the offset from the tethered element's top-left corner to the origin point
6
+ * based on tether dimensions and origin alignment.
7
+ */
8
+ export declare function getOriginOffset(tether: Rectangle, hOrigin: HorizontalTether, vOrigin: VerticalTether): {
9
+ yOffset: number;
10
+ xOffset: number;
11
+ };
12
+ /**
13
+ * Adds offset to baseline position to get absolute origin position.
14
+ */
15
+ export declare function getOriginPosition(baselinePosition: Position, offset: {
16
+ yOffset: number;
17
+ xOffset: number;
18
+ }): Position;
19
+ /**
20
+ * Determines caret direction based on origin values.
21
+ */
22
+ export declare function getOriginDirection(vOrigin: VerticalTether, hOrigin: HorizontalTether): CaretDirection;
23
+ //# sourceMappingURL=calculate_origin.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calculate_origin.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/calculate_origin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzE;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,cAAc,GACtB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CA+BtC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,gBAAgB,EAAE,QAAQ,EAC1B,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC3C,QAAQ,CAKV;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,gBAAgB,GACxB,cAAc,CAQhB"}
@@ -0,0 +1,41 @@
1
+ function r(e, t, s) {
2
+ let n = 0, i = 0;
3
+ switch (s) {
4
+ case "top":
5
+ n = 0;
6
+ break;
7
+ case "center":
8
+ n = e.dimensions.height / 2;
9
+ break;
10
+ case "bottom":
11
+ n = e.dimensions.height;
12
+ break;
13
+ }
14
+ switch (t) {
15
+ case "start":
16
+ i = 0;
17
+ break;
18
+ case "center":
19
+ i = e.dimensions.width / 2;
20
+ break;
21
+ case "end":
22
+ i = e.dimensions.width;
23
+ break;
24
+ }
25
+ return { yOffset: n, xOffset: i };
26
+ }
27
+ function c(e, t) {
28
+ return {
29
+ x: e.x + t.xOffset,
30
+ y: e.y + t.yOffset
31
+ };
32
+ }
33
+ function f(e, t) {
34
+ return e !== "center" ? e : t !== "center" ? t : "none";
35
+ }
36
+ export {
37
+ f as getOriginDirection,
38
+ r as getOriginOffset,
39
+ c as getOriginPosition
40
+ };
41
+ //# sourceMappingURL=calculate_origin.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calculate_origin.js","sources":["../../../../src/overlay/tethered/hooks/calculate_origin.ts"],"sourcesContent":["import type { Position, Rectangle } from '../../../utils/index.js';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\n\nexport type CaretDirection = 'top' | 'bottom' | 'start' | 'end' | 'none';\n\n/**\n * Calculates the offset from the tethered element's top-left corner to the origin point\n * based on tether dimensions and origin alignment.\n */\nexport function getOriginOffset(\n tether: Rectangle,\n hOrigin: HorizontalTether,\n vOrigin: VerticalTether\n): { yOffset: number; xOffset: number } {\n let yOffset = 0;\n let xOffset = 0;\n\n // Calculate vertical offset\n switch (vOrigin) {\n case 'top':\n yOffset = 0;\n break;\n case 'center':\n yOffset = tether.dimensions.height / 2;\n break;\n case 'bottom':\n yOffset = tether.dimensions.height;\n break;\n }\n\n // Calculate horizontal offset\n switch (hOrigin) {\n case 'start':\n xOffset = 0;\n break;\n case 'center':\n xOffset = tether.dimensions.width / 2;\n break;\n case 'end':\n xOffset = tether.dimensions.width;\n break;\n }\n\n return { yOffset, xOffset };\n}\n\n/**\n * Adds offset to baseline position to get absolute origin position.\n */\nexport function getOriginPosition(\n baselinePosition: Position,\n offset: { yOffset: number; xOffset: number }\n): Position {\n return {\n x: baselinePosition.x + offset.xOffset,\n y: baselinePosition.y + offset.yOffset,\n };\n}\n\n/**\n * Determines caret direction based on origin values.\n */\nexport function getOriginDirection(\n vOrigin: VerticalTether,\n hOrigin: HorizontalTether\n): CaretDirection {\n if (vOrigin !== 'center') {\n return vOrigin;\n } else if (hOrigin !== 'center') {\n return hOrigin;\n } else {\n return 'none';\n }\n}\n"],"names":["getOriginOffset","tether","hOrigin","vOrigin","yOffset","xOffset","getOriginPosition","baselinePosition","offset","getOriginDirection"],"mappings":"AASO,SAASA,EACdC,GACAC,GACAC,GACsC;AACtC,MAAIC,IAAU,GACVC,IAAU;AAGd,UAAQF,GAAA;AAAA,IACN,KAAK;AACH,MAAAC,IAAU;AACV;AAAA,IACF,KAAK;AACH,MAAAA,IAAUH,EAAO,WAAW,SAAS;AACrC;AAAA,IACF,KAAK;AACH,MAAAG,IAAUH,EAAO,WAAW;AAC5B;AAAA,EAAA;AAIJ,UAAQC,GAAA;AAAA,IACN,KAAK;AACH,MAAAG,IAAU;AACV;AAAA,IACF,KAAK;AACH,MAAAA,IAAUJ,EAAO,WAAW,QAAQ;AACpC;AAAA,IACF,KAAK;AACH,MAAAI,IAAUJ,EAAO,WAAW;AAC5B;AAAA,EAAA;AAGJ,SAAO,EAAE,SAAAG,GAAS,SAAAC,EAAA;AACpB;AAKO,SAASC,EACdC,GACAC,GACU;AACV,SAAO;AAAA,IACL,GAAGD,EAAiB,IAAIC,EAAO;AAAA,IAC/B,GAAGD,EAAiB,IAAIC,EAAO;AAAA,EAAA;AAEnC;AAKO,SAASC,EACdN,GACAD,GACgB;AAChB,SAAIC,MAAY,WACPA,IACED,MAAY,WACdA,IAEA;AAEX;"}
@@ -0,0 +1,9 @@
1
+ import { CaretDirection } from './calculate_origin.js';
2
+ export declare function useCaretRefDimensions(precision: 'high' | 'low', originDirection: CaretDirection): {
3
+ caretElementRef: (element: HTMLElement | null) => void;
4
+ caretSize: {
5
+ width: number;
6
+ height: number;
7
+ };
8
+ };
9
+ //# sourceMappingURL=useCaretRefDimensions.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCaretRefDimensions.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useCaretRefDimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,GAAG,KAAK,EACzB,eAAe,EAAE,cAAc,GAC9B;IACD,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAYA"}