@tcn/ui 0.12.1 → 0.12.3
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/inputs/phone_number_input/phone_number_input_adapter.d.ts.map +1 -1
- package/dist/inputs/phone_number_input/phone_number_input_adapter.js +39 -34
- package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
- package/dist/inputs/phone_number_input/sip_input.d.ts.map +1 -1
- package/dist/inputs/phone_number_input/sip_input.js +57 -52
- package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
- package/dist/inputs/suggestions/suggestion_list.d.ts +8 -1
- package/dist/inputs/suggestions/suggestion_list.d.ts.map +1 -1
- package/dist/inputs/suggestions/suggestion_list.js +121 -111
- package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
- package/dist/overlay/popper/base/dismissal_decorator.js +6 -6
- package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -1
- package/dist/overlay/popper/context_popper.d.ts.map +1 -1
- package/dist/overlay/popper/context_popper.js +34 -26
- package/dist/overlay/popper/context_popper.js.map +1 -1
- package/dist/overlay/popper/element_popper.d.ts.map +1 -1
- package/dist/overlay/popper/element_popper.js +43 -25
- package/dist/overlay/popper/element_popper.js.map +1 -1
- package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts +3 -0
- package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/use_ref_dimensions.js +26 -0
- package/dist/overlay/tethered/hooks/use_ref_dimensions.js.map +1 -0
- package/dist/overlay/tethered/hooks/{useTether.d.ts → use_tether.d.ts} +7 -4
- package/dist/overlay/tethered/hooks/use_tether.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/{useTether.js → use_tether.js} +19 -15
- package/dist/overlay/tethered/hooks/use_tether.js.map +1 -0
- package/dist/overlay/tethered/hooks/use_tether_origin.d.ts +10 -0
- package/dist/overlay/tethered/hooks/use_tether_origin.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/use_tether_origin.js +22 -0
- package/dist/overlay/tethered/hooks/use_tether_origin.js.map +1 -0
- package/dist/overlay/tethered/hooks/{calculate_origin.d.ts → utils/calculate_origin.d.ts} +4 -10
- package/dist/overlay/tethered/hooks/utils/calculate_origin.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/utils/calculate_origin.js +41 -0
- package/dist/overlay/tethered/hooks/utils/calculate_origin.js.map +1 -0
- package/dist/overlay/tethered/hooks/{calculate_position.d.ts → utils/calculate_position.d.ts} +2 -2
- package/dist/overlay/tethered/hooks/utils/calculate_position.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/utils/calculate_position.js.map +1 -0
- package/dist/overlay/tethered/tethered.d.ts.map +1 -1
- package/dist/overlay/tethered/tethered.js +63 -62
- package/dist/overlay/tethered/tethered.js.map +1 -1
- package/dist/surfaces/pop_confirm/pop_confirm.js +7 -7
- 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 +27 -28
- package/dist/surfaces/tooltip/tooltip.js.map +1 -1
- package/dist/themes/themes/ergo/ergo_theme.css +1 -1
- package/dist/themes/themes/ergo/ergo_theme.js +98 -8
- package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
- package/package.json +1 -1
- package/src/inputs/phone_number_input/phone_number_input.stories.tsx +7 -0
- package/src/inputs/phone_number_input/phone_number_input_adapter.tsx +5 -0
- package/src/inputs/phone_number_input/sip_input.tsx +5 -0
- package/src/inputs/select/select.stories.tsx +34 -11
- package/src/inputs/suggestions/suggestion_list.tsx +23 -6
- package/src/overlay/popper/base/dismissal_decorator.tsx +1 -1
- package/src/overlay/popper/context_popper.tsx +7 -3
- package/src/overlay/popper/element_popper.tsx +14 -4
- package/src/overlay/tethered/__stories__/shared/base_story_config.ts +1 -1
- package/src/overlay/tethered/hooks/use_ref_dimensions.ts +32 -0
- package/src/overlay/tethered/hooks/{useTether.ts → use_tether.ts} +7 -2
- package/src/overlay/tethered/hooks/use_tether_origin.ts +46 -0
- package/src/overlay/tethered/hooks/{calculate_origin.ts → utils/calculate_origin.ts} +12 -12
- package/src/overlay/tethered/hooks/{calculate_position.ts → utils/calculate_position.ts} +3 -3
- package/src/overlay/tethered/tethered.tsx +22 -26
- package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +206 -6
- package/src/surfaces/pop_confirm/pop_confirm.tsx +1 -1
- package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +136 -0
- package/src/surfaces/tooltip/__stories__/tooltip_stories.module.css +14 -0
- package/src/surfaces/tooltip/tooltip.tsx +6 -2
- package/src/themes/themes/ergo/ergo_theme.css +98 -8
- package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +0 -1
- package/dist/overlay/tethered/hooks/calculate_origin.js +0 -41
- package/dist/overlay/tethered/hooks/calculate_origin.js.map +0 -1
- package/dist/overlay/tethered/hooks/calculate_position.d.ts.map +0 -1
- package/dist/overlay/tethered/hooks/calculate_position.js.map +0 -1
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +0 -9
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +0 -1
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +0 -14
- package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +0 -1
- package/dist/overlay/tethered/hooks/useTether.d.ts.map +0 -1
- package/dist/overlay/tethered/hooks/useTether.js.map +0 -1
- package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +0 -3
- package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +0 -1
- package/dist/overlay/tethered/hooks/useTetherContentRect.js +0 -36
- package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +0 -1
- package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +0 -14
- package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +0 -1
- package/dist/overlay/tethered/hooks/useTetherOrigin.js +0 -24
- package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +0 -1
- package/dist/surfaces/popconfirm/pop_confirm.d.ts +0 -5
- package/dist/surfaces/popconfirm/pop_confirm.d.ts.map +0 -1
- package/dist/surfaces/popconfirm/pop_confirm.js +0 -13
- package/dist/surfaces/popconfirm/pop_confirm.js.map +0 -1
- package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +0 -22
- package/src/overlay/tethered/hooks/useTetherContentRect.ts +0 -49
- package/src/overlay/tethered/hooks/useTetherOrigin.ts +0 -49
- package/src/surfaces/popconfirm/pop_confirm.tsx +0 -18
- package/src/surfaces/tooltip/tooltip.stories.tsx +0 -54
- /package/dist/overlay/tethered/hooks/{calculate_position.js → utils/calculate_position.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context_popper.js","sources":["../../../src/overlay/popper/context_popper.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { Tethered, type TetheredProps } from '../tethered/tethered.js';\nimport { useContextTrigger } from './hooks/use_context_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\n\nexport type ContextPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n Omit<TetheredProps, 'anchor'> & {\n anchorElement: React.RefObject<HTMLElement>;\n };\n\nexport const ContextPopper = forwardRef<\n HTMLDivElement,\n PropsWithChildren<ContextPopperProps>\n>(function ContextPopper(\n {\n anchorElement,\n restoreFocus,\n children,\n acceptedRefs = [],\n isException,\n dismissals = [PopperDismissal.CLICK_AWAY, PopperDismissal.SCROLL_AWAY],\n ...tetheredProps\n },\n ref\n) {\n const { isOpen, close, rectangle } = useContextTrigger(anchorElement);\n\n return (\n <BasePopper\n open={isOpen && rectangle != null}\n onDismissal={close}\n restoreFocus={restoreFocus}\n dismissals={dismissals}\n acceptedRefs={
|
|
1
|
+
{"version":3,"file":"context_popper.js","sources":["../../../src/overlay/popper/context_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { Tethered, type TetheredProps } from '../tethered/tethered.js';\nimport { useContextTrigger } from './hooks/use_context_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\nimport { useForkRef } from '../../utils/index.js';\n\nexport type ContextPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n Omit<TetheredProps, 'anchor'> & {\n anchorElement: React.RefObject<HTMLElement>;\n };\n\nexport const ContextPopper = forwardRef<\n HTMLDivElement,\n PropsWithChildren<ContextPopperProps>\n>(function ContextPopper(\n {\n anchorElement,\n restoreFocus,\n children,\n acceptedRefs = [],\n isException,\n dismissals = [PopperDismissal.CLICK_AWAY, PopperDismissal.SCROLL_AWAY],\n ...tetheredProps\n },\n ref\n) {\n const { isOpen, close, rectangle } = useContextTrigger(anchorElement);\n const popperRef = useRef<HTMLDivElement>(null);\n const mergedRef = useForkRef(ref, popperRef);\n const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];\n\n return (\n <BasePopper\n open={isOpen && rectangle != null}\n onDismissal={close}\n restoreFocus={restoreFocus}\n dismissals={dismissals}\n acceptedRefs={effectiveAcceptedRefs}\n isException={isException}\n >\n <Tethered ref={mergedRef} anchor={rectangle} {...tetheredProps}>\n {children}\n </Tethered>\n </BasePopper>\n );\n});\n"],"names":["ContextPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","tetheredProps","ref","isOpen","close","rectangle","useContextTrigger","popperRef","useRef","mergedRef","useForkRef","effectiveAcceptedRefs","jsx","BasePopper","Tethered"],"mappings":";;;;;;;;;;;;;;AAYO,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,YAAYA,EAAgB,WAAW;AAAA,EACrE,GAAGC;AACL,GACAC,GACA;AACA,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAkBZ,CAAa,GAC9Da,IAAYC,EAAuB,IAAI,GACvCC,IAAYC,EAAWR,GAAKK,CAAS,GACrCI,IAAwB,CAACJ,GAAWb,GAAe,GAAGG,CAAY;AAExE,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMV,KAAUE,KAAa;AAAA,MAC7B,aAAaD;AAAA,MACb,cAAAT;AAAA,MACA,YAAAI;AAAA,MACA,cAAcY;AAAA,MACd,aAAAb;AAAA,MAEA,UAAA,gBAAAc,EAACE,KAAS,KAAKL,GAAW,QAAQJ,GAAY,GAAGJ,GAC9C,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element_popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/element_popper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"element_popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/element_popper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,iCAAiC,CAAC;AAGzC,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,oBAAoB,CAAC;AAExE,eAAO,MAAM,aAAa;;kDAyCxB,CAAC"}
|
|
@@ -1,33 +1,51 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { BasePopper as
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as P, useRef as a } from "react";
|
|
3
|
+
import { BasePopper as x } from "./base/base_popper.js";
|
|
4
4
|
import { ElementTethered as E } from "../tethered/element_tethered.js";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
5
|
+
import "../../utils/click_away_listener.js";
|
|
6
|
+
import "../../utils/focus_redirect.js";
|
|
7
|
+
import "../../utils/scroll_away_listener.js";
|
|
8
|
+
import { useForkRef as g } from "../../utils/hooks/use_fork_ref.js";
|
|
9
|
+
import "../../utils/hooks/use_resize_observer.js";
|
|
10
|
+
import "../../utils/dnd/context.js";
|
|
11
|
+
import "clsx";
|
|
12
|
+
import "../../draggable.module-BgelQsuJ.js";
|
|
13
|
+
const C = P(function({
|
|
14
|
+
restoreFocus: t,
|
|
15
|
+
open: p,
|
|
16
|
+
onDismissal: m,
|
|
17
|
+
isException: f,
|
|
18
|
+
acceptedRefs: i = [],
|
|
19
|
+
veil: c,
|
|
20
|
+
dismissals: n,
|
|
21
|
+
children: s,
|
|
22
|
+
anchorElement: e,
|
|
23
|
+
...R
|
|
24
|
+
}, d) {
|
|
25
|
+
const r = a(null), l = g(d, r), u = [r, e, ...i];
|
|
26
|
+
return /* @__PURE__ */ o(
|
|
27
|
+
x,
|
|
18
28
|
{
|
|
19
|
-
restoreFocus:
|
|
20
|
-
open:
|
|
21
|
-
onDismissal:
|
|
22
|
-
isException:
|
|
23
|
-
dismissals:
|
|
24
|
-
acceptedRefs:
|
|
25
|
-
veil:
|
|
26
|
-
children: /* @__PURE__ */
|
|
29
|
+
restoreFocus: t,
|
|
30
|
+
open: p,
|
|
31
|
+
onDismissal: m,
|
|
32
|
+
isException: f,
|
|
33
|
+
dismissals: n,
|
|
34
|
+
acceptedRefs: u,
|
|
35
|
+
veil: c,
|
|
36
|
+
children: /* @__PURE__ */ o(
|
|
37
|
+
E,
|
|
38
|
+
{
|
|
39
|
+
ref: l,
|
|
40
|
+
anchorElement: e,
|
|
41
|
+
...R,
|
|
42
|
+
children: s
|
|
43
|
+
}
|
|
44
|
+
)
|
|
27
45
|
}
|
|
28
46
|
);
|
|
29
47
|
});
|
|
30
48
|
export {
|
|
31
|
-
|
|
49
|
+
C as ElementPopper
|
|
32
50
|
};
|
|
33
51
|
//# sourceMappingURL=element_popper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element_popper.js","sources":["../../../src/overlay/popper/element_popper.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport {\n ElementTethered,\n type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\n\nexport type ElementPopperProps = BasePopperProps & ElementTetheredProps;\n\nexport const ElementPopper = forwardRef<\n HTMLDivElement,\n PropsWithChildren<ElementPopperProps>\n>(function ElementPopper(\n {\n restoreFocus,\n open,\n onDismissal,\n isException,\n acceptedRefs,\n veil,\n dismissals,\n children,\n ...elementTetheredProps\n },\n ref\n) {\n return (\n <BasePopper\n restoreFocus={restoreFocus}\n open={open}\n onDismissal={onDismissal}\n isException={isException}\n dismissals={dismissals}\n acceptedRefs={
|
|
1
|
+
{"version":3,"file":"element_popper.js","sources":["../../../src/overlay/popper/element_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport {\n ElementTethered,\n type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\nimport { useForkRef } from '../../utils/index.js';\n\nexport type ElementPopperProps = BasePopperProps & ElementTetheredProps;\n\nexport const ElementPopper = forwardRef<\n HTMLDivElement,\n PropsWithChildren<ElementPopperProps>\n>(function ElementPopper(\n {\n restoreFocus,\n open,\n onDismissal,\n isException,\n acceptedRefs = [],\n veil,\n dismissals,\n children,\n anchorElement,\n ...elementTetheredProps\n },\n ref\n) {\n const popperRef = useRef<HTMLDivElement>(null);\n const mergedRef = useForkRef(ref, popperRef);\n const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];\n\n return (\n <BasePopper\n restoreFocus={restoreFocus}\n open={open}\n onDismissal={onDismissal}\n isException={isException}\n dismissals={dismissals}\n acceptedRefs={effectiveAcceptedRefs}\n veil={veil}\n >\n <ElementTethered\n ref={mergedRef}\n anchorElement={anchorElement}\n {...elementTetheredProps}\n >\n {children}\n </ElementTethered>\n </BasePopper>\n );\n});\n"],"names":["ElementPopper","forwardRef","restoreFocus","open","onDismissal","isException","acceptedRefs","veil","dismissals","children","anchorElement","elementTetheredProps","ref","popperRef","useRef","mergedRef","useForkRef","effectiveAcceptedRefs","jsx","BasePopper","ElementTethered"],"mappings":";;;;;;;;;;;;AAUO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAYC,EAAWJ,GAAKC,CAAS,GACrCI,IAAwB,CAACJ,GAAWH,GAAe,GAAGJ,CAAY;AAExE,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAAjB;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAG;AAAA,MACA,cAAcS;AAAA,MACd,MAAAV;AAAA,MAEA,UAAA,gBAAAW;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKL;AAAA,UACL,eAAAL;AAAA,UACC,GAAGC;AAAA,UAEH,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_ref_dimensions.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/use_ref_dimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQ1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,UAAU,CAsB9E"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { useState as o, useLayoutEffect as u } from "react";
|
|
2
|
+
function r(e) {
|
|
3
|
+
if (!e) return { width: 0, height: 0 };
|
|
4
|
+
const t = e.getBoundingClientRect();
|
|
5
|
+
return { width: t.width, height: t.height };
|
|
6
|
+
}
|
|
7
|
+
function h(e) {
|
|
8
|
+
const [t, s] = o(
|
|
9
|
+
() => r(e.current)
|
|
10
|
+
);
|
|
11
|
+
return u(() => {
|
|
12
|
+
const n = () => {
|
|
13
|
+
s(r(e.current));
|
|
14
|
+
};
|
|
15
|
+
n();
|
|
16
|
+
const i = new ResizeObserver(n);
|
|
17
|
+
if (e.current)
|
|
18
|
+
return i.observe(e.current), () => {
|
|
19
|
+
i.disconnect();
|
|
20
|
+
};
|
|
21
|
+
}, [e]), t;
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
h as useRefDimensions
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=use_ref_dimensions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_ref_dimensions.js","sources":["../../../../src/overlay/tethered/hooks/use_ref_dimensions.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\nimport type { Dimensions } from '../../../utils/index.js';\n\nfunction getDimensions(element: HTMLElement | null): Dimensions {\n if (!element) return { width: 0, height: 0 };\n const rect = element.getBoundingClientRect();\n return { width: rect.width, height: rect.height };\n}\n\nexport function useRefDimensions(ref: React.RefObject<HTMLElement>): Dimensions {\n const [dimensions, setDimensions] = useState<Dimensions>(() =>\n getDimensions(ref.current)\n );\n\n useLayoutEffect(() => {\n const update = () => {\n setDimensions(getDimensions(ref.current));\n };\n\n update();\n\n const resizeObserver = new ResizeObserver(update);\n if (!ref.current) return;\n resizeObserver.observe(ref.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [ref]);\n\n return dimensions;\n}\n"],"names":["getDimensions","element","rect","useRefDimensions","ref","dimensions","setDimensions","useState","useLayoutEffect","update","resizeObserver"],"mappings":";AAGA,SAASA,EAAcC,GAAyC;AAC9D,MAAI,CAACA,EAAS,QAAO,EAAE,OAAO,GAAG,QAAQ,EAAA;AACzC,QAAMC,IAAOD,EAAQ,sBAAA;AACrB,SAAO,EAAE,OAAOC,EAAK,OAAO,QAAQA,EAAK,OAAA;AAC3C;AAEO,SAASC,EAAiBC,GAA+C;AAC9E,QAAM,CAACC,GAAYC,CAAa,IAAIC;AAAA,IAAqB,MACvDP,EAAcI,EAAI,OAAO;AAAA,EAAA;AAG3B,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,MAAAH,EAAcN,EAAcI,EAAI,OAAO,CAAC;AAAA,IAC1C;AAEA,IAAAK,EAAA;AAEA,UAAMC,IAAiB,IAAI,eAAeD,CAAM;AAChD,QAAKL,EAAI;AACT,aAAAM,EAAe,QAAQN,EAAI,OAAO,GAE3B,MAAM;AACX,QAAAM,EAAe,WAAA;AAAA,MACjB;AAAA,EACF,GAAG,CAACN,CAAG,CAAC,GAEDC;AACT;"}
|
|
@@ -10,10 +10,13 @@ export interface UseTetherParams {
|
|
|
10
10
|
horizontalOffset?: number;
|
|
11
11
|
}
|
|
12
12
|
export declare function useTether({ anchor, verticalAnchor, verticalOrigin, horizontalAnchor, horizontalOrigin, verticalOffset, horizontalOffset, }: UseTetherParams): {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
rectangle: {
|
|
14
|
+
dimensions: import('../../../utils/index.js').Dimensions;
|
|
15
|
+
position: {
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
};
|
|
16
19
|
};
|
|
17
20
|
tetherRef: import('react').RefObject<HTMLDivElement>;
|
|
18
21
|
};
|
|
19
|
-
//# sourceMappingURL=
|
|
22
|
+
//# sourceMappingURL=use_tether.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_tether.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/use_tether.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAIpE,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;;;;;;;;;EAkEjB"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { calculateTetheredPosition as
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { useState as w, useRef as g, useCallback as l, useLayoutEffect as a } from "react";
|
|
2
|
+
import { calculateTetheredPosition as y } from "./utils/calculate_position.js";
|
|
3
|
+
import { useRefDimensions as C } from "./use_ref_dimensions.js";
|
|
4
|
+
function L({
|
|
5
|
+
anchor: i,
|
|
5
6
|
verticalAnchor: s = "bottom",
|
|
6
7
|
verticalOrigin: r = "top",
|
|
7
8
|
horizontalAnchor: u = "start",
|
|
@@ -9,11 +10,11 @@ function E({
|
|
|
9
10
|
verticalOffset: p = 0,
|
|
10
11
|
horizontalOffset: c = 0
|
|
11
12
|
}) {
|
|
12
|
-
const [
|
|
13
|
-
if (!
|
|
13
|
+
const [o, f] = w({ top: 0, left: 0 }), n = g(null), h = C(n), m = l(() => {
|
|
14
|
+
if (!i || !n.current) return;
|
|
14
15
|
const t = n.current.getBoundingClientRect(), e = getComputedStyle(n.current);
|
|
15
|
-
return
|
|
16
|
-
anchor:
|
|
16
|
+
return y({
|
|
17
|
+
anchor: i,
|
|
17
18
|
tether: {
|
|
18
19
|
dimensions: {
|
|
19
20
|
width: t.width,
|
|
@@ -37,7 +38,7 @@ function E({
|
|
|
37
38
|
}
|
|
38
39
|
});
|
|
39
40
|
}, [
|
|
40
|
-
|
|
41
|
+
i,
|
|
41
42
|
s,
|
|
42
43
|
r,
|
|
43
44
|
u,
|
|
@@ -45,18 +46,21 @@ function E({
|
|
|
45
46
|
p,
|
|
46
47
|
c
|
|
47
48
|
]);
|
|
48
|
-
return
|
|
49
|
+
return a(() => {
|
|
49
50
|
const t = () => {
|
|
50
|
-
const e =
|
|
51
|
+
const e = m();
|
|
51
52
|
if (!e) return;
|
|
52
|
-
(
|
|
53
|
+
(o.top !== e.top || o.left !== e.left) && f(e);
|
|
53
54
|
};
|
|
54
55
|
return t(), window.addEventListener("resize", t), () => {
|
|
55
56
|
window.removeEventListener("resize", t);
|
|
56
57
|
};
|
|
57
|
-
}), {
|
|
58
|
+
}), {
|
|
59
|
+
rectangle: { dimensions: h, position: { x: o.left, y: o.top } },
|
|
60
|
+
tetherRef: n
|
|
61
|
+
};
|
|
58
62
|
}
|
|
59
63
|
export {
|
|
60
|
-
|
|
64
|
+
L as useTether
|
|
61
65
|
};
|
|
62
|
-
//# sourceMappingURL=
|
|
66
|
+
//# sourceMappingURL=use_tether.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_tether.js","sources":["../../../../src/overlay/tethered/hooks/use_tether.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { type Rectangle } from '../../../utils/index.js';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport { calculateTetheredPosition } from './utils/calculate_position.js';\nimport { useRefDimensions } from './use_ref_dimensions.js';\n\nexport interface UseTetherParams {\n anchor: Rectangle | null;\n verticalAnchor?: VerticalTether;\n verticalOrigin?: VerticalTether;\n horizontalOrigin?: HorizontalTether;\n horizontalAnchor?: HorizontalTether;\n verticalOffset?: number;\n horizontalOffset?: number;\n}\n\nexport function useTether({\n anchor,\n verticalAnchor = 'bottom',\n verticalOrigin = 'top',\n horizontalAnchor = 'start',\n horizontalOrigin = 'start',\n verticalOffset = 0,\n horizontalOffset = 0,\n}: UseTetherParams) {\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const tetherRef = useRef<HTMLDivElement>(null);\n const dimensions = useRefDimensions(tetherRef);\n\n const getPosition = useCallback(() => {\n if (!anchor || !tetherRef.current) return;\n\n const tether = tetherRef.current.getBoundingClientRect();\n const computedStyle = getComputedStyle(tetherRef.current);\n\n return calculateTetheredPosition({\n anchor: anchor,\n tether: {\n dimensions: {\n width: tether.width,\n height: tether.height,\n },\n position: {\n x: tether.left,\n y: tether.top,\n },\n },\n direction: computedStyle.direction as 'ltr' | 'rtl',\n verticalAnchor: verticalAnchor,\n verticalOrigin: verticalOrigin,\n horizontalAnchor: horizontalAnchor,\n horizontalOrigin: horizontalOrigin,\n verticalOffset: verticalOffset,\n horizontalOffset: horizontalOffset,\n viewport: {\n width: window.innerWidth,\n height: window.innerHeight,\n },\n });\n }, [\n anchor,\n verticalAnchor,\n verticalOrigin,\n horizontalAnchor,\n horizontalOrigin,\n verticalOffset,\n horizontalOffset,\n ]);\n\n useLayoutEffect(() => {\n const update = () => {\n const newPosition = getPosition();\n if (!newPosition) return;\n const hasChanged =\n position.top !== newPosition.top || position.left !== newPosition.left;\n if (hasChanged) {\n setPosition(newPosition);\n }\n };\n update();\n window.addEventListener('resize', update);\n return () => {\n window.removeEventListener('resize', update);\n };\n });\n\n return {\n rectangle: { dimensions, position: { x: position.left, y: position.top } },\n tetherRef,\n };\n}\n"],"names":["useTether","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","position","setPosition","useState","tetherRef","useRef","dimensions","useRefDimensions","getPosition","useCallback","tether","computedStyle","calculateTetheredPosition","useLayoutEffect","update","newPosition"],"mappings":";;;AAgBO,SAASA,EAAU;AAAA,EACxB,QAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AACrB,GAAoB;AAClB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAYC,EAAuB,IAAI,GACvCC,IAAaC,EAAiBH,CAAS,GAEvCI,IAAcC,EAAY,MAAM;AACpC,QAAI,CAACf,KAAU,CAACU,EAAU,QAAS;AAEnC,UAAMM,IAASN,EAAU,QAAQ,sBAAA,GAC3BO,IAAgB,iBAAiBP,EAAU,OAAO;AAExD,WAAOQ,EAA0B;AAAA,MAC/B,QAAAlB;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,OAAOgB,EAAO;AAAA,UACd,QAAQA,EAAO;AAAA,QAAA;AAAA,QAEjB,UAAU;AAAA,UACR,GAAGA,EAAO;AAAA,UACV,GAAGA,EAAO;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,WAAWC,EAAc;AAAA,MACzB,gBAAAhB;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAU;AAAA,QACR,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA;AAAA,IACjB,CACD;AAAA,EACH,GAAG;AAAA,IACDN;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD;AAED,SAAAa,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,YAAMC,IAAcP,EAAA;AACpB,UAAI,CAACO,EAAa;AAGlB,OADEd,EAAS,QAAQc,EAAY,OAAOd,EAAS,SAASc,EAAY,SAElEb,EAAYa,CAAW;AAAA,IAE3B;AACA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GACjC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,CAAC,GAEM;AAAA,IACL,WAAW,EAAE,YAAAR,GAAY,UAAU,EAAE,GAAGL,EAAS,MAAM,GAAGA,EAAS,MAAI;AAAA,IACvE,WAAAG;AAAA,EAAA;AAEJ;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Position, Rectangle } from '../../../utils/index.js';
|
|
2
|
+
import { HorizontalTether, VerticalTether } from '../types.js';
|
|
3
|
+
import { CaretDirection } from './utils/calculate_origin.js';
|
|
4
|
+
export interface TetherOrigin {
|
|
5
|
+
rectangle: Rectangle;
|
|
6
|
+
offset: Position;
|
|
7
|
+
direction: CaretDirection;
|
|
8
|
+
}
|
|
9
|
+
export declare function useTetherOrigin(tetherRectangle: Rectangle, hOrigin: HorizontalTether, vOrigin: VerticalTether, precision: 'high' | 'low'): [TetherOrigin, React.RefObject<HTMLElement>];
|
|
10
|
+
//# sourceMappingURL=use_tether_origin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_tether_origin.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/use_tether_origin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,6BAA6B,CAAC;AAGrC,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC;IACjB,SAAS,EAAE,cAAc,CAAC;CAC3B;AAQD,wBAAgB,eAAe,CAC7B,eAAe,EAAE,SAAS,EAC1B,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,MAAM,GAAG,KAAK,GACxB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAiB9C"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useRef as g } from "react";
|
|
2
|
+
import { getOriginOffset as m, getOriginPosition as u, getOriginDirection as p } from "./utils/calculate_origin.js";
|
|
3
|
+
import { useRefDimensions as d } from "./use_ref_dimensions.js";
|
|
4
|
+
const l = {
|
|
5
|
+
rectangle: { dimensions: { width: 0, height: 0 }, position: { x: 0, y: 0 } },
|
|
6
|
+
offset: { x: 0, y: 0 },
|
|
7
|
+
direction: "none"
|
|
8
|
+
};
|
|
9
|
+
function h(o, n, t, s) {
|
|
10
|
+
const i = g(null), r = d(i);
|
|
11
|
+
if (s === "low") return [l, i];
|
|
12
|
+
const e = m(o.dimensions, n, t), f = u(o.position, e), c = p(t, n);
|
|
13
|
+
return [{
|
|
14
|
+
rectangle: { dimensions: r, position: f },
|
|
15
|
+
offset: e,
|
|
16
|
+
direction: c
|
|
17
|
+
}, i];
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
h as useTetherOrigin
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=use_tether_origin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_tether_origin.js","sources":["../../../../src/overlay/tethered/hooks/use_tether_origin.ts"],"sourcesContent":["import { useRef } from 'react';\nimport type { Position, Rectangle } from '../../../utils/index.js';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport {\n getOriginDirection,\n getOriginOffset,\n getOriginPosition,\n type CaretDirection,\n} from './utils/calculate_origin.js';\nimport { useRefDimensions } from './use_ref_dimensions.js';\n\nexport interface TetherOrigin {\n rectangle: Rectangle;\n offset: Position;\n direction: CaretDirection;\n}\n\nconst initialOriginResult: TetherOrigin = {\n rectangle: { dimensions: { width: 0, height: 0 }, position: { x: 0, y: 0 } },\n offset: { x: 0, y: 0 },\n direction: 'none',\n};\n\nexport function useTetherOrigin(\n tetherRectangle: Rectangle,\n hOrigin: HorizontalTether,\n vOrigin: VerticalTether,\n precision: 'high' | 'low'\n): [TetherOrigin, React.RefObject<HTMLElement>] {\n const ref = useRef<HTMLElement | null>(null);\n const dimensions = useRefDimensions(ref);\n\n if (precision === 'low') return [initialOriginResult, ref];\n\n // Calculate origin values for high precision\n const originOffset = getOriginOffset(tetherRectangle.dimensions, hOrigin, vOrigin);\n const originPosition = getOriginPosition(tetherRectangle.position, originOffset);\n const originDirection = getOriginDirection(vOrigin, hOrigin);\n\n const origin: TetherOrigin = {\n rectangle: { dimensions, position: originPosition },\n offset: originOffset,\n direction: originDirection,\n };\n return [origin, ref];\n}\n"],"names":["initialOriginResult","useTetherOrigin","tetherRectangle","hOrigin","vOrigin","precision","ref","useRef","dimensions","useRefDimensions","originOffset","getOriginOffset","originPosition","getOriginPosition","originDirection","getOriginDirection"],"mappings":";;;AAiBA,MAAMA,IAAoC;AAAA,EACxC,WAAW,EAAE,YAAY,EAAE,OAAO,GAAG,QAAQ,KAAK,UAAU,EAAE,GAAG,GAAG,GAAG,IAAE;AAAA,EACzE,QAAQ,EAAE,GAAG,GAAG,GAAG,EAAA;AAAA,EACnB,WAAW;AACb;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GAC8C;AAC9C,QAAMC,IAAMC,EAA2B,IAAI,GACrCC,IAAaC,EAAiBH,CAAG;AAEvC,MAAID,MAAc,MAAO,QAAO,CAACL,GAAqBM,CAAG;AAGzD,QAAMI,IAAeC,EAAgBT,EAAgB,YAAYC,GAASC,CAAO,GAC3EQ,IAAiBC,EAAkBX,EAAgB,UAAUQ,CAAY,GACzEI,IAAkBC,EAAmBX,GAASD,CAAO;AAO3D,SAAO,CALsB;AAAA,IAC3B,WAAW,EAAE,YAAAK,GAAY,UAAUI,EAAA;AAAA,IACnC,QAAQF;AAAA,IACR,WAAWI;AAAA,EAAA,GAEGR,CAAG;AACrB;"}
|
|
@@ -1,21 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { HorizontalTether, VerticalTether } from '
|
|
1
|
+
import { Dimensions, Position } from '../../../../utils/index.js';
|
|
2
|
+
import { HorizontalTether, VerticalTether } from '../../types.js';
|
|
3
3
|
export type CaretDirection = 'top' | 'bottom' | 'start' | 'end' | 'none';
|
|
4
4
|
/**
|
|
5
5
|
* Calculates the offset from the tethered element's top-left corner to the origin point
|
|
6
6
|
* based on tether dimensions and origin alignment.
|
|
7
7
|
*/
|
|
8
|
-
export declare function getOriginOffset(
|
|
9
|
-
yOffset: number;
|
|
10
|
-
xOffset: number;
|
|
11
|
-
};
|
|
8
|
+
export declare function getOriginOffset(tetherDimensions: Dimensions, hOrigin: HorizontalTether, vOrigin: VerticalTether): Position;
|
|
12
9
|
/**
|
|
13
10
|
* Adds offset to baseline position to get absolute origin position.
|
|
14
11
|
*/
|
|
15
|
-
export declare function getOriginPosition(baselinePosition: Position, offset:
|
|
16
|
-
yOffset: number;
|
|
17
|
-
xOffset: number;
|
|
18
|
-
}): Position;
|
|
12
|
+
export declare function getOriginPosition(baselinePosition: Position, offset: Position): Position;
|
|
19
13
|
/**
|
|
20
14
|
* Determines caret direction based on origin values.
|
|
21
15
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculate_origin.d.ts","sourceRoot":"","sources":["../../../../../src/overlay/tethered/hooks/utils/calculate_origin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzE;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,gBAAgB,EAAE,UAAU,EAC5B,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,cAAc,GACtB,QAAQ,CA+BV;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,gBAAgB,EAAE,QAAQ,EAC1B,MAAM,EAAE,QAAQ,GACf,QAAQ,CAKV;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,gBAAgB,GACxB,cAAc,CAQhB"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
function a(e, t, n) {
|
|
2
|
+
let r = 0, c = 0;
|
|
3
|
+
switch (n) {
|
|
4
|
+
case "top":
|
|
5
|
+
r = 0;
|
|
6
|
+
break;
|
|
7
|
+
case "center":
|
|
8
|
+
r = e.height / 2;
|
|
9
|
+
break;
|
|
10
|
+
case "bottom":
|
|
11
|
+
r = e.height;
|
|
12
|
+
break;
|
|
13
|
+
}
|
|
14
|
+
switch (t) {
|
|
15
|
+
case "start":
|
|
16
|
+
c = 0;
|
|
17
|
+
break;
|
|
18
|
+
case "center":
|
|
19
|
+
c = e.width / 2;
|
|
20
|
+
break;
|
|
21
|
+
case "end":
|
|
22
|
+
c = e.width;
|
|
23
|
+
break;
|
|
24
|
+
}
|
|
25
|
+
return { y: r, x: c };
|
|
26
|
+
}
|
|
27
|
+
function f(e, t) {
|
|
28
|
+
return {
|
|
29
|
+
x: e.x + t.x,
|
|
30
|
+
y: e.y + t.y
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function i(e, t) {
|
|
34
|
+
return e !== "center" ? e : t !== "center" ? t : "none";
|
|
35
|
+
}
|
|
36
|
+
export {
|
|
37
|
+
i as getOriginDirection,
|
|
38
|
+
a as getOriginOffset,
|
|
39
|
+
f as getOriginPosition
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=calculate_origin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculate_origin.js","sources":["../../../../../src/overlay/tethered/hooks/utils/calculate_origin.ts"],"sourcesContent":["import type { Dimensions, Position } 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 tetherDimensions: Dimensions,\n hOrigin: HorizontalTether,\n vOrigin: VerticalTether\n): Position {\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 = tetherDimensions.height / 2;\n break;\n case 'bottom':\n yOffset = tetherDimensions.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 = tetherDimensions.width / 2;\n break;\n case 'end':\n xOffset = tetherDimensions.width;\n break;\n }\n\n return { y: yOffset, x: xOffset };\n}\n\n/**\n * Adds offset to baseline position to get absolute origin position.\n */\nexport function getOriginPosition(\n baselinePosition: Position,\n offset: Position\n): Position {\n return {\n x: baselinePosition.x + offset.x,\n y: baselinePosition.y + offset.y,\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","tetherDimensions","hOrigin","vOrigin","yOffset","xOffset","getOriginPosition","baselinePosition","offset","getOriginDirection"],"mappings":"AASO,SAASA,EACdC,GACAC,GACAC,GACU;AACV,MAAIC,IAAU,GACVC,IAAU;AAGd,UAAQF,GAAA;AAAA,IACN,KAAK;AACH,MAAAC,IAAU;AACV;AAAA,IACF,KAAK;AACH,MAAAA,IAAUH,EAAiB,SAAS;AACpC;AAAA,IACF,KAAK;AACH,MAAAG,IAAUH,EAAiB;AAC3B;AAAA,EAAA;AAIJ,UAAQC,GAAA;AAAA,IACN,KAAK;AACH,MAAAG,IAAU;AACV;AAAA,IACF,KAAK;AACH,MAAAA,IAAUJ,EAAiB,QAAQ;AACnC;AAAA,IACF,KAAK;AACH,MAAAI,IAAUJ,EAAiB;AAC3B;AAAA,EAAA;AAGJ,SAAO,EAAE,GAAGG,GAAS,GAAGC,EAAA;AAC1B;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;"}
|
package/dist/overlay/tethered/hooks/{calculate_position.d.ts → utils/calculate_position.d.ts}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { HorizontalTether, VerticalTether } from '
|
|
2
|
-
import { Rectangle, Dimensions } from '
|
|
1
|
+
import { HorizontalTether, VerticalTether } from '../../types.js';
|
|
2
|
+
import { Rectangle, Dimensions } from '../../../../utils/index.js';
|
|
3
3
|
export interface CalculateTetheredPositionParams {
|
|
4
4
|
anchor: Rectangle;
|
|
5
5
|
tether: Rectangle;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculate_position.d.ts","sourceRoot":"","sources":["../../../../../src/overlay/tethered/hooks/utils/calculate_position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,UAAU,CAAC;CACtB;AAED,eAAO,MAAM,yBAAyB,GAAI,gJAWvC,+BAA+B;;;CAiFjC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculate_position.js","sources":["../../../../../src/overlay/tethered/hooks/utils/calculate_position.ts"],"sourcesContent":["import type { HorizontalTether, VerticalTether } from '../../types.js';\nimport type { Rectangle } from '../../../../utils/index.js';\nimport type { Dimensions } from '../../../../utils/index.js';\n\nexport interface CalculateTetheredPositionParams {\n anchor: Rectangle;\n tether: Rectangle;\n direction: 'ltr' | 'rtl';\n verticalAnchor: VerticalTether;\n verticalOrigin: VerticalTether;\n horizontalAnchor: HorizontalTether;\n horizontalOrigin: HorizontalTether;\n verticalOffset: number;\n horizontalOffset: number;\n viewport: Dimensions;\n}\n\nexport const calculateTetheredPosition = ({\n anchor,\n tether,\n direction,\n verticalAnchor,\n verticalOrigin,\n horizontalAnchor,\n horizontalOrigin,\n verticalOffset,\n horizontalOffset,\n viewport,\n}: CalculateTetheredPositionParams) => {\n const isRtl = direction === 'rtl';\n\n let top = anchor.position.y;\n let left = anchor.position.x;\n\n // Calculate vertical position\n switch (verticalAnchor) {\n case 'top':\n top += verticalOffset;\n break;\n case 'center':\n top += anchor.dimensions.height / 2;\n break;\n case 'bottom':\n top += anchor.dimensions.height - verticalOffset;\n break;\n }\n\n switch (verticalOrigin) {\n case 'top':\n break;\n case 'center':\n top -= tether.dimensions.height / 2;\n break;\n case 'bottom':\n top -= tether.dimensions.height;\n break;\n }\n\n // Calculate horizontal position with direction sensitivity\n if (horizontalAnchor === 'start') {\n left += isRtl ? anchor.dimensions.width + horizontalOffset : horizontalOffset;\n } else if (horizontalAnchor === 'center') {\n left += anchor.dimensions.width / 2;\n } else if (horizontalAnchor === 'end') {\n left += isRtl ? -horizontalOffset : anchor.dimensions.width + horizontalOffset;\n }\n\n // Adjust the origin based on RTL direction\n let adjustedHorizontalOrigin = horizontalOrigin;\n if (isRtl) {\n if (horizontalOrigin === 'start') {\n adjustedHorizontalOrigin = 'end';\n } else if (horizontalOrigin === 'end') {\n adjustedHorizontalOrigin = 'start';\n }\n }\n\n // Apply adjusted origin to the position calculation\n if (adjustedHorizontalOrigin === 'start') {\n // No adjustment needed\n } else if (adjustedHorizontalOrigin === 'center') {\n left -= tether.dimensions.width / 2;\n } else if (adjustedHorizontalOrigin === 'end') {\n left -= tether.dimensions.width;\n }\n\n // Ensure the popover stays within the viewport\n // Prevent overflow to the right\n if (left + tether.dimensions.width > viewport.width) {\n left = viewport.width - tether.dimensions.width;\n }\n\n // Prevent overflow to the left\n if (left < 0) {\n left = 0;\n }\n\n // Prevent overflow to the bottom\n // FIXME: doesn't account for padding.\n if (top + tether.dimensions.height > viewport.height) {\n top = viewport.height - tether.dimensions.height;\n }\n\n // Prevent overflow to the top\n if (top < 0) {\n top = 0;\n }\n\n return { top, left };\n};\n"],"names":["calculateTetheredPosition","anchor","tether","direction","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","viewport","isRtl","top","left","adjustedHorizontalOrigin"],"mappings":"AAiBO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AACF,MAAuC;AACrC,QAAMC,IAAQR,MAAc;AAE5B,MAAIS,IAAMX,EAAO,SAAS,GACtBY,IAAOZ,EAAO,SAAS;AAG3B,UAAQG,GAAA;AAAA,IACN,KAAK;AACH,MAAAQ,KAAOJ;AACP;AAAA,IACF,KAAK;AACH,MAAAI,KAAOX,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAW,KAAOX,EAAO,WAAW,SAASO;AAClC;AAAA,EAAA;AAGJ,UAAQH,GAAA;AAAA,IACN,KAAK;AACH;AAAA,IACF,KAAK;AACH,MAAAO,KAAOV,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAU,KAAOV,EAAO,WAAW;AACzB;AAAA,EAAA;AAIJ,EAAII,MAAqB,UACvBO,KAAQF,IAAQV,EAAO,WAAW,QAAQQ,IAAmBA,IACpDH,MAAqB,WAC9BO,KAAQZ,EAAO,WAAW,QAAQ,IACzBK,MAAqB,UAC9BO,KAAQF,IAAQ,CAACF,IAAmBR,EAAO,WAAW,QAAQQ;AAIhE,MAAIK,IAA2BP;AAC/B,SAAII,MACEJ,MAAqB,UACvBO,IAA2B,QAClBP,MAAqB,UAC9BO,IAA2B,WAK3BA,MAA6B,YAEtBA,MAA6B,WACtCD,KAAQX,EAAO,WAAW,QAAQ,IACzBY,MAA6B,UACtCD,KAAQX,EAAO,WAAW,SAKxBW,IAAOX,EAAO,WAAW,QAAQQ,EAAS,UAC5CG,IAAOH,EAAS,QAAQR,EAAO,WAAW,QAIxCW,IAAO,MACTA,IAAO,IAKLD,IAAMV,EAAO,WAAW,SAASQ,EAAS,WAC5CE,IAAMF,EAAS,SAASR,EAAO,WAAW,SAIxCU,IAAM,MACRA,IAAM,IAGD,EAAE,KAAAA,GAAK,MAAAC,EAAA;AAChB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/tethered.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/tethered.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKnE,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,WAAW;CAAG;AAEtE,eAAO,MAAM,QAAQ;;+CA4EpB,CAAC"}
|
|
@@ -1,82 +1,83 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { clsx as
|
|
3
|
-
import { forwardRef as
|
|
1
|
+
import { jsx as s, jsxs as T } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as m } from "clsx";
|
|
3
|
+
import { forwardRef as _ } from "react";
|
|
4
4
|
import "../../stacks/box/box.js";
|
|
5
5
|
import "../../stacks/h_collapsible_box.js";
|
|
6
6
|
import "../../stacks/h_stack.js";
|
|
7
7
|
import "../../stacks/spacer.js";
|
|
8
8
|
import "../../stacks/v_collapsible_box.js";
|
|
9
9
|
import "../../stacks/v_stack.js";
|
|
10
|
-
import { ZStack as
|
|
10
|
+
import { ZStack as b } from "../../stacks/z_stack.js";
|
|
11
11
|
import "../../utils/click_away_listener.js";
|
|
12
12
|
import "../../utils/focus_redirect.js";
|
|
13
13
|
import "../../utils/scroll_away_listener.js";
|
|
14
|
-
import { useForkRef as
|
|
14
|
+
import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
|
|
15
15
|
import "../../utils/hooks/use_resize_observer.js";
|
|
16
16
|
import "../../utils/dnd/context.js";
|
|
17
17
|
import "../../draggable.module-BgelQsuJ.js";
|
|
18
|
-
import { Caret as
|
|
19
|
-
import { Portal as
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import '../../tethered.css';const Z = "_origin-indicator_cbc16ea", q = "_tethered_44058d8", f = { "origin-indicator": Z, tethered: q }, mt = j(
|
|
18
|
+
import { Caret as j } from "../caret/caret.js";
|
|
19
|
+
import { Portal as N } from "../portal/portal.js";
|
|
20
|
+
import { useTether as C } from "./hooks/use_tether.js";
|
|
21
|
+
import { useTetherOrigin as F } from "./hooks/use_tether_origin.js";
|
|
22
|
+
import '../../tethered.css';const I = "_origin-indicator_cbc16ea", P = "_tethered_44058d8", p = { "origin-indicator": I, tethered: P }, tt = _(
|
|
24
23
|
function({
|
|
25
|
-
anchor:
|
|
26
|
-
verticalAnchor:
|
|
27
|
-
verticalOrigin:
|
|
28
|
-
horizontalAnchor:
|
|
29
|
-
horizontalOrigin:
|
|
30
|
-
verticalOffset:
|
|
31
|
-
horizontalOffset:
|
|
32
|
-
precision:
|
|
33
|
-
children:
|
|
34
|
-
style:
|
|
35
|
-
className:
|
|
36
|
-
...
|
|
37
|
-
},
|
|
38
|
-
const {
|
|
39
|
-
anchor:
|
|
40
|
-
verticalAnchor:
|
|
41
|
-
verticalOrigin:
|
|
42
|
-
horizontalAnchor:
|
|
43
|
-
horizontalOrigin:
|
|
44
|
-
verticalOffset:
|
|
45
|
-
horizontalOffset:
|
|
46
|
-
}),
|
|
24
|
+
anchor: a,
|
|
25
|
+
verticalAnchor: r = "bottom",
|
|
26
|
+
verticalOrigin: e = "top",
|
|
27
|
+
horizontalAnchor: n = "start",
|
|
28
|
+
horizontalOrigin: i = "start",
|
|
29
|
+
verticalOffset: c = 0,
|
|
30
|
+
horizontalOffset: h = 0,
|
|
31
|
+
precision: d = "low",
|
|
32
|
+
children: f,
|
|
33
|
+
style: g,
|
|
34
|
+
className: x,
|
|
35
|
+
...l
|
|
36
|
+
}, $) {
|
|
37
|
+
const { rectangle: o, tetherRef: y } = C({
|
|
38
|
+
anchor: a,
|
|
39
|
+
verticalAnchor: r,
|
|
40
|
+
verticalOrigin: e,
|
|
41
|
+
horizontalAnchor: n,
|
|
42
|
+
horizontalOrigin: i,
|
|
43
|
+
verticalOffset: c,
|
|
44
|
+
horizontalOffset: h
|
|
45
|
+
}), [t, u] = F(
|
|
46
|
+
o,
|
|
47
47
|
i,
|
|
48
|
-
e
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
"--tethered-
|
|
52
|
-
"--tethered-
|
|
53
|
-
"--tethered-origin-
|
|
54
|
-
"--tethered-origin-
|
|
55
|
-
"--tethered-origin-delta-
|
|
56
|
-
"--origin-
|
|
57
|
-
"--origin-indicator-dimensions-
|
|
48
|
+
e,
|
|
49
|
+
d
|
|
50
|
+
), R = k($, y), w = {
|
|
51
|
+
"--tethered-top": `${o.position.y}px`,
|
|
52
|
+
"--tethered-left": `${o.position.x}px`,
|
|
53
|
+
"--tethered-origin-y": `${t.rectangle.position.y}px`,
|
|
54
|
+
"--tethered-origin-x": `${t.rectangle.position.x}px`,
|
|
55
|
+
"--tethered-origin-delta-y": `${t.offset.y}px`,
|
|
56
|
+
"--tethered-origin-delta-x": `${t.offset.x}px`,
|
|
57
|
+
"--origin-indicator-dimensions-width": `${t.rectangle.dimensions.width}px`,
|
|
58
|
+
"--origin-indicator-dimensions-height": `${t.rectangle.dimensions.height}px`
|
|
58
59
|
};
|
|
59
|
-
return /* @__PURE__ */
|
|
60
|
-
|
|
60
|
+
return /* @__PURE__ */ s(N, { children: /* @__PURE__ */ T(
|
|
61
|
+
b,
|
|
61
62
|
{
|
|
62
|
-
ref:
|
|
63
|
-
className:
|
|
64
|
-
style: { ...
|
|
65
|
-
"data-v-anchor":
|
|
66
|
-
"data-h-anchor":
|
|
67
|
-
"data-v-origin":
|
|
68
|
-
"data-h-origin":
|
|
69
|
-
"data-anchor-direction":
|
|
70
|
-
...
|
|
63
|
+
ref: R,
|
|
64
|
+
className: m(p.tethered, "tcn-tethered", x),
|
|
65
|
+
style: { ...w, ...g },
|
|
66
|
+
"data-v-anchor": r,
|
|
67
|
+
"data-h-anchor": n,
|
|
68
|
+
"data-v-origin": e,
|
|
69
|
+
"data-h-origin": i,
|
|
70
|
+
"data-anchor-direction": t.direction,
|
|
71
|
+
...l,
|
|
71
72
|
children: [
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
f,
|
|
74
|
+
d === "high" && t.direction !== "none" && /* @__PURE__ */ s(
|
|
75
|
+
j,
|
|
75
76
|
{
|
|
76
|
-
ref:
|
|
77
|
-
direction:
|
|
78
|
-
className:
|
|
79
|
-
|
|
77
|
+
ref: u,
|
|
78
|
+
direction: t.direction,
|
|
79
|
+
className: m(
|
|
80
|
+
p["origin-indicator"],
|
|
80
81
|
"tcn-tethered-origin-indicator"
|
|
81
82
|
)
|
|
82
83
|
}
|
|
@@ -87,6 +88,6 @@ import '../../tethered.css';const Z = "_origin-indicator_cbc16ea", q = "_tethere
|
|
|
87
88
|
}
|
|
88
89
|
);
|
|
89
90
|
export {
|
|
90
|
-
|
|
91
|
+
tt as Tethered
|
|
91
92
|
};
|
|
92
93
|
//# sourceMappingURL=tethered.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { Caret } from '../caret/caret.js';\nimport { Portal } from '../portal/portal.js';\nimport {
|
|
1
|
+
{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { Caret } from '../caret/caret.js';\nimport { Portal } from '../portal/portal.js';\nimport { useTether } from './hooks/use_tether.js';\nimport { useTetherOrigin } from './hooks/use_tether_origin.js';\nimport type { HorizontalTether, VerticalTether } from './types.js';\n\n// Styles\nimport styles from './tethered.module.css';\n\nexport interface BaseTetheredOwnProps {\n verticalAnchor?: VerticalTether;\n verticalOrigin?: VerticalTether;\n horizontalOrigin?: HorizontalTether;\n horizontalAnchor?: HorizontalTether;\n verticalOffset?: number;\n horizontalOffset?: number;\n}\n\nexport interface TetheredOwnProp extends BaseTetheredOwnProps {\n anchor: Rectangle | null;\n precision?: 'high' | 'low';\n}\n\nexport interface TetheredProps extends TetheredOwnProp, ZStackProps {}\n\nexport const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(\n function Tethered(\n {\n anchor,\n verticalAnchor = 'bottom',\n verticalOrigin = 'top',\n horizontalAnchor = 'start',\n horizontalOrigin = 'start',\n verticalOffset = 0,\n horizontalOffset = 0,\n precision = 'low',\n children,\n style,\n className,\n ...rest\n },\n ref\n ) {\n const { rectangle, tetherRef } = useTether({\n anchor,\n verticalAnchor,\n verticalOrigin,\n horizontalAnchor,\n horizontalOrigin,\n verticalOffset,\n horizontalOffset,\n });\n\n const [origin, originRef] = useTetherOrigin(\n rectangle,\n horizontalOrigin,\n verticalOrigin,\n precision\n );\n\n const forkedRef = useForkRef(ref, tetherRef);\n\n const cssVariables = {\n '--tethered-top': `${rectangle.position.y}px`,\n '--tethered-left': `${rectangle.position.x}px`,\n '--tethered-origin-y': `${origin.rectangle.position.y}px`,\n '--tethered-origin-x': `${origin.rectangle.position.x}px`,\n '--tethered-origin-delta-y': `${origin.offset.y}px`,\n '--tethered-origin-delta-x': `${origin.offset.x}px`,\n '--origin-indicator-dimensions-width': `${origin.rectangle.dimensions.width}px`,\n '--origin-indicator-dimensions-height': `${origin.rectangle.dimensions.height}px`,\n };\n\n return (\n <Portal>\n <ZStack\n ref={forkedRef}\n className={clsx(styles.tethered, 'tcn-tethered', className)}\n style={{ ...cssVariables, ...style }}\n data-v-anchor={verticalAnchor}\n data-h-anchor={horizontalAnchor}\n data-v-origin={verticalOrigin}\n data-h-origin={horizontalOrigin}\n data-anchor-direction={origin.direction}\n {...rest}\n >\n {children}\n {precision === 'high' && origin.direction !== 'none' && (\n <Caret\n ref={originRef}\n direction={origin.direction}\n className={clsx(\n styles['origin-indicator'],\n 'tcn-tethered-origin-indicator'\n )}\n />\n )}\n </ZStack>\n </Portal>\n );\n }\n);\n"],"names":["Tethered","forwardRef","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","precision","children","style","className","rest","ref","rectangle","tetherRef","useTether","origin","originRef","useTetherOrigin","forkedRef","useForkRef","cssVariables","Portal","jsxs","ZStack","clsx","styles","jsx","Caret"],"mappings":";;;;;;;;;;;;;;;;;;;;;4GA6BaA,KAAWC;AAAA,EACtB,SACE;AAAA,IACE,QAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,WAAAC,GAAW,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACzC,QAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAEK,CAACU,GAAQC,CAAS,IAAIC;AAAA,MAC1BL;AAAA,MACAT;AAAA,MACAF;AAAA,MACAK;AAAA,IAAA,GAGIY,IAAYC,EAAWR,GAAKE,CAAS,GAErCO,IAAe;AAAA,MACnB,kBAAkB,GAAGR,EAAU,SAAS,CAAC;AAAA,MACzC,mBAAmB,GAAGA,EAAU,SAAS,CAAC;AAAA,MAC1C,uBAAuB,GAAGG,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,uBAAuB,GAAGA,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,uCAAuC,GAAGA,EAAO,UAAU,WAAW,KAAK;AAAA,MAC3E,wCAAwC,GAAGA,EAAO,UAAU,WAAW,MAAM;AAAA,IAAA;AAG/E,6BACGM,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAU,gBAAgBhB,CAAS;AAAA,QAC1D,OAAO,EAAE,GAAGW,GAAc,GAAGZ,EAAA;AAAA,QAC7B,iBAAeR;AAAA,QACf,iBAAeE;AAAA,QACf,iBAAeD;AAAA,QACf,iBAAeE;AAAA,QACf,yBAAuBY,EAAO;AAAA,QAC7B,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAH;AAAA,UACAD,MAAc,UAAUS,EAAO,cAAc,UAC5C,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKX;AAAA,cACL,WAAWD,EAAO;AAAA,cAClB,WAAWS;AAAA,gBACTC,EAAO,kBAAkB;AAAA,gBACzB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;"}
|