@tcn/ui 0.5.0 → 0.7.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.
- package/dist/confirm.css +1 -1
- package/dist/draggable.module-BgelQsuJ.js +5 -0
- package/dist/draggable.module-BgelQsuJ.js.map +1 -0
- package/dist/form/field/field.js +13 -10
- package/dist/form/field/field.js.map +1 -1
- package/dist/inputs/color_input/color_picker.js +5 -3
- package/dist/inputs/color_input/color_picker.js.map +1 -1
- package/dist/inputs/combo_box/combo_box.js +4 -2
- package/dist/inputs/combo_box/combo_box.js.map +1 -1
- package/dist/inputs/date_picker/date_picker.js +16 -14
- package/dist/inputs/date_picker/date_picker.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_input.js +10 -8
- package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_year_selector.js +4 -2
- package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
- package/dist/inputs/mask_input/key_capture_input.js +15 -12
- package/dist/inputs/mask_input/key_capture_input.js.map +1 -1
- package/dist/inputs/mask_input/mask_input.js +13 -10
- package/dist/inputs/mask_input/mask_input.js.map +1 -1
- package/dist/inputs/multiselect/multiselect.js +9 -7
- package/dist/inputs/multiselect/multiselect.js.map +1 -1
- package/dist/inputs/phone_number_input/phone_number_input.d.ts +1 -0
- package/dist/inputs/phone_number_input/phone_number_input.d.ts.map +1 -1
- package/dist/inputs/phone_number_input/phone_number_input.js +136 -133
- package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
- package/dist/inputs/select/select.js +4 -2
- package/dist/inputs/select/select.js.map +1 -1
- package/dist/inputs/slider/slider.js +7 -5
- package/dist/inputs/slider/slider.js.map +1 -1
- package/dist/inputs/suggestions/suggestion_list.js +4 -2
- package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
- package/dist/inputs/switch/switch.js +16 -14
- package/dist/inputs/switch/switch.js.map +1 -1
- package/dist/inputs/unit_input/unit_input.js +16 -14
- package/dist/inputs/unit_input/unit_input.js.map +1 -1
- package/dist/navigation/tabs/state/link/tab_link.js +9 -6
- package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
- package/dist/navigation/tabs/state/link/use_tab_link.js +8 -8
- package/dist/navigation/tabs/state/link/use_tab_link.js.map +1 -1
- package/dist/overlay/caret/caret.d.ts +8 -0
- package/dist/overlay/caret/caret.d.ts.map +1 -0
- package/dist/overlay/caret/caret.js +20 -0
- package/dist/overlay/caret/caret.js.map +1 -0
- package/dist/overlay/menu/menu.js +34 -32
- package/dist/overlay/menu/menu.js.map +1 -1
- package/dist/overlay/popper/legacy/popper.js +22 -20
- package/dist/overlay/popper/legacy/popper.js.map +1 -1
- package/dist/overlay/popper/preview_popper.js +12 -9
- package/dist/overlay/popper/preview_popper.js.map +1 -1
- package/dist/overlay/tethered/hooks/calculate_origin.d.ts +23 -0
- package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/calculate_origin.js +41 -0
- package/dist/overlay/tethered/hooks/calculate_origin.js.map +1 -0
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +9 -0
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +14 -0
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +1 -0
- package/dist/overlay/tethered/hooks/useTether.d.ts +1 -1
- package/dist/overlay/tethered/hooks/useTether.d.ts.map +1 -1
- package/dist/overlay/tethered/hooks/useTether.js +22 -21
- package/dist/overlay/tethered/hooks/useTether.js.map +1 -1
- package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +3 -0
- package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/useTetherContentRect.js +36 -0
- package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +1 -0
- package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +14 -0
- package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/useTetherOrigin.js +24 -0
- package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +1 -0
- package/dist/overlay/tethered/tethered.d.ts +2 -1
- package/dist/overlay/tethered/tethered.d.ts.map +1 -1
- package/dist/overlay/tethered/tethered.js +71 -38
- package/dist/overlay/tethered/tethered.js.map +1 -1
- package/dist/stacks/box/box.js +29 -27
- package/dist/stacks/box/box.js.map +1 -1
- package/dist/stacks/h_collapsible_box.js +14 -12
- package/dist/stacks/h_collapsible_box.js.map +1 -1
- package/dist/stacks/v_collapsible_box.js +8 -6
- package/dist/stacks/v_collapsible_box.js.map +1 -1
- package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map +1 -1
- package/dist/surfaces/pop_confirm/pop_confirm.js +14 -13
- package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
- package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -1
- package/dist/surfaces/tooltip/tooltip.js +12 -11
- package/dist/surfaces/tooltip/tooltip.js.map +1 -1
- package/dist/tethered.css +1 -1
- package/dist/themes/themes/ergo/ergo_theme.css +1 -1
- package/dist/themes/themes/ergo/ergo_theme.js +86 -56
- package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
- package/dist/themes/themes/windows_98/windows_98.css +1 -1
- package/dist/themes/themes/windows_98/windows_98_theme.js +18 -18
- package/dist/themes/themes/windows_98/windows_98_theme.js.map +1 -1
- package/dist/utils/dnd/draggable/draggable.js +13 -12
- package/dist/utils/dnd/draggable/draggable.js.map +1 -1
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +23 -19
- package/dist/utils/index.js.map +1 -1
- package/package.json +9 -9
- package/src/inputs/phone_number_input/phone_number_input.stories.tsx +24 -0
- package/src/inputs/phone_number_input/phone_number_input.tsx +8 -6
- package/src/navigation/tabs/state/link/use_tab_link.ts +4 -4
- package/src/overlay/{carrot/carrot.stories.tsx → caret/caret.stories.tsx} +14 -14
- package/src/overlay/caret/caret.tsx +24 -0
- package/src/overlay/tethered/__stories__/shared/base_story_config.ts +8 -0
- package/src/overlay/tethered/hooks/calculate_origin.ts +74 -0
- package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +22 -0
- package/src/overlay/tethered/hooks/useTether.ts +4 -3
- package/src/overlay/tethered/hooks/useTetherContentRect.ts +49 -0
- package/src/overlay/tethered/hooks/useTetherOrigin.ts +49 -0
- package/src/overlay/tethered/tethered.module.css +55 -0
- package/src/overlay/tethered/tethered.tsx +44 -6
- package/src/surfaces/confirm/confirm.module.css +0 -1
- package/src/surfaces/panel/__stories__/panel.stories.tsx +62 -27
- package/src/surfaces/panel/__stories__/panel_stories.module.css +14 -1
- package/src/surfaces/pop_confirm/pop_confirm.tsx +4 -3
- package/src/surfaces/tooltip/tooltip.tsx +1 -0
- package/src/themes/themes/ergo/ergo_theme.css +86 -56
- package/src/themes/themes/windows_98/windows_98.css +18 -18
- package/src/utils/index.ts +3 -0
- package/dist/overlay/carrot/base_carrot.d.ts +0 -8
- package/dist/overlay/carrot/base_carrot.d.ts.map +0 -1
- package/dist/overlay/carrot/base_carrot.js +0 -21
- package/dist/overlay/carrot/base_carrot.js.map +0 -1
- package/src/overlay/carrot/base_carrot.tsx +0 -24
|
@@ -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:
|
|
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),
|
|
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: (
|
|
38
|
-
|
|
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:
|
|
44
|
-
verticalAnchor:
|
|
45
|
-
verticalOrigin:
|
|
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:
|
|
51
|
-
onClick: (
|
|
52
|
-
t.props.children == null && x && x(), t.props.onClick && t.props.onClick(
|
|
52
|
+
direction: a,
|
|
53
|
+
onClick: (o) => {
|
|
54
|
+
t.props.children == null && x && x(), t.props.onClick && t.props.onClick(o);
|
|
53
55
|
},
|
|
54
|
-
onMouseEnter: (
|
|
55
|
-
r(
|
|
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 ===
|
|
60
|
+
return t.type === D && (k.open = z === m), f.cloneElement(t, k);
|
|
59
61
|
});
|
|
60
|
-
return
|
|
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:
|
|
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:
|
|
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),
|
|
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
|
|
100
|
-
if (
|
|
101
|
-
const u = window.getComputedStyle(
|
|
102
|
-
|
|
103
|
-
const P = n.clientX -
|
|
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
|
-
|
|
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
|
-
|
|
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),
|
|
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
|
-
}, [
|
|
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": !!
|
|
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:
|
|
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:
|
|
150
|
+
verticalOffset: a,
|
|
149
151
|
horizontalAnchor: y,
|
|
150
152
|
horizontalOrigin: x,
|
|
151
153
|
horizontalOffset: Y,
|
|
152
154
|
hAlign: "start",
|
|
153
|
-
onActivatedMenu: (
|
|
154
|
-
E.current =
|
|
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":"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"}
|
|
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":"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"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { jsx as
|
|
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
|
|
8
|
-
import
|
|
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
|
|
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),
|
|
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
|
|
34
|
-
if (!r || !
|
|
35
|
-
const e = r.getBoundingClientRect(), o =
|
|
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(() => (
|
|
63
|
-
window.removeEventListener("resize",
|
|
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
|
|
78
|
+
let p = /* @__PURE__ */ l(J, { onScrollAway: S, isException: $, children: /* @__PURE__ */ l(
|
|
77
79
|
"div",
|
|
78
80
|
{
|
|
79
|
-
ref:
|
|
80
|
-
className:
|
|
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 && (
|
|
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:
|
|
96
|
+
children: p
|
|
95
97
|
}
|
|
96
|
-
)), /* @__PURE__ */ G(
|
|
97
|
-
y && /* @__PURE__ */
|
|
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:
|
|
105
|
+
children: p
|
|
104
106
|
}
|
|
105
107
|
),
|
|
106
|
-
!y &&
|
|
108
|
+
!y && p
|
|
107
109
|
] });
|
|
108
110
|
}
|
|
109
111
|
export {
|
|
110
|
-
|
|
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
|
|
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
|
|
13
|
-
anchorElement:
|
|
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(
|
|
22
|
-
return /* @__PURE__ */
|
|
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,
|
|
31
|
-
children: /* @__PURE__ */
|
|
33
|
+
acceptedRefs: [o, r, ...m],
|
|
34
|
+
children: /* @__PURE__ */ e(
|
|
32
35
|
v,
|
|
33
36
|
{
|
|
34
37
|
ref: c,
|
|
35
|
-
anchorElement:
|
|
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
|
-
|
|
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":"
|
|
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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useState as i, useLayoutEffect as c } from "react";
|
|
2
|
+
function u(t, n) {
|
|
3
|
+
const [e, r] = i(null), [s, a] = i({ width: 0, height: 0 });
|
|
4
|
+
return c(() => {
|
|
5
|
+
if (t === "high" && n !== "none" && e) {
|
|
6
|
+
const h = e.getBoundingClientRect();
|
|
7
|
+
a({ width: h.width, height: h.height });
|
|
8
|
+
}
|
|
9
|
+
}, [t, n, e]), { caretElementRef: r, caretSize: s };
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
u as useCaretRefDimensions
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=useCaretRefDimensions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCaretRefDimensions.js","sources":["../../../../src/overlay/tethered/hooks/useCaretRefDimensions.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\nimport type { CaretDirection } from './calculate_origin.js';\n\nexport function useCaretRefDimensions(\n precision: 'high' | 'low',\n originDirection: CaretDirection\n): {\n caretElementRef: (element: HTMLElement | null) => void;\n caretSize: { width: number; height: number };\n} {\n const [caretElement, setCaretElement] = useState<HTMLElement | null>(null);\n const [caretSize, setCaretSize] = useState({ width: 0, height: 0 });\n\n useLayoutEffect(() => {\n if (precision === 'high' && originDirection !== 'none' && caretElement) {\n const rect = caretElement.getBoundingClientRect();\n setCaretSize({ width: rect.width, height: rect.height });\n }\n }, [precision, originDirection, caretElement]);\n\n return { caretElementRef: setCaretElement, caretSize };\n}\n"],"names":["useCaretRefDimensions","precision","originDirection","caretElement","setCaretElement","useState","caretSize","setCaretSize","useLayoutEffect","rect"],"mappings":";AAGO,SAASA,EACdC,GACAC,GAIA;AACA,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6B,IAAI,GACnE,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAElE,SAAAG,EAAgB,MAAM;AACpB,QAAIP,MAAc,UAAUC,MAAoB,UAAUC,GAAc;AACtE,YAAMM,IAAON,EAAa,sBAAA;AAC1B,MAAAI,EAAa,EAAE,OAAOE,EAAK,OAAO,QAAQA,EAAK,QAAQ;AAAA,IACzD;AAAA,EACF,GAAG,CAACR,GAAWC,GAAiBC,CAAY,CAAC,GAEtC,EAAE,iBAAiBC,GAAiB,WAAAE,EAAA;AAC7C;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { HorizontalTether, VerticalTether } from '../types.js';
|
|
2
1
|
import { Rectangle } from '../../../utils/index.js';
|
|
2
|
+
import { HorizontalTether, VerticalTether } from '../types.js';
|
|
3
3
|
export interface UseTetherParams {
|
|
4
4
|
anchor: Rectangle | null;
|
|
5
5
|
verticalAnchor?: VerticalTether;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTether.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"useTether.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGpE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,cAAyB,EACzB,cAAsB,EACtB,gBAA0B,EAC1B,gBAA0B,EAC1B,cAAkB,EAClB,gBAAoB,GACrB,EAAE,eAAe;;;;;;EA8DjB"}
|