@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.
Files changed (99) hide show
  1. package/dist/inputs/phone_number_input/phone_number_input_adapter.d.ts.map +1 -1
  2. package/dist/inputs/phone_number_input/phone_number_input_adapter.js +39 -34
  3. package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
  4. package/dist/inputs/phone_number_input/sip_input.d.ts.map +1 -1
  5. package/dist/inputs/phone_number_input/sip_input.js +57 -52
  6. package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
  7. package/dist/inputs/suggestions/suggestion_list.d.ts +8 -1
  8. package/dist/inputs/suggestions/suggestion_list.d.ts.map +1 -1
  9. package/dist/inputs/suggestions/suggestion_list.js +121 -111
  10. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  11. package/dist/overlay/popper/base/dismissal_decorator.js +6 -6
  12. package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -1
  13. package/dist/overlay/popper/context_popper.d.ts.map +1 -1
  14. package/dist/overlay/popper/context_popper.js +34 -26
  15. package/dist/overlay/popper/context_popper.js.map +1 -1
  16. package/dist/overlay/popper/element_popper.d.ts.map +1 -1
  17. package/dist/overlay/popper/element_popper.js +43 -25
  18. package/dist/overlay/popper/element_popper.js.map +1 -1
  19. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts +3 -0
  20. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts.map +1 -0
  21. package/dist/overlay/tethered/hooks/use_ref_dimensions.js +26 -0
  22. package/dist/overlay/tethered/hooks/use_ref_dimensions.js.map +1 -0
  23. package/dist/overlay/tethered/hooks/{useTether.d.ts → use_tether.d.ts} +7 -4
  24. package/dist/overlay/tethered/hooks/use_tether.d.ts.map +1 -0
  25. package/dist/overlay/tethered/hooks/{useTether.js → use_tether.js} +19 -15
  26. package/dist/overlay/tethered/hooks/use_tether.js.map +1 -0
  27. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts +10 -0
  28. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts.map +1 -0
  29. package/dist/overlay/tethered/hooks/use_tether_origin.js +22 -0
  30. package/dist/overlay/tethered/hooks/use_tether_origin.js.map +1 -0
  31. package/dist/overlay/tethered/hooks/{calculate_origin.d.ts → utils/calculate_origin.d.ts} +4 -10
  32. package/dist/overlay/tethered/hooks/utils/calculate_origin.d.ts.map +1 -0
  33. package/dist/overlay/tethered/hooks/utils/calculate_origin.js +41 -0
  34. package/dist/overlay/tethered/hooks/utils/calculate_origin.js.map +1 -0
  35. package/dist/overlay/tethered/hooks/{calculate_position.d.ts → utils/calculate_position.d.ts} +2 -2
  36. package/dist/overlay/tethered/hooks/utils/calculate_position.d.ts.map +1 -0
  37. package/dist/overlay/tethered/hooks/utils/calculate_position.js.map +1 -0
  38. package/dist/overlay/tethered/tethered.d.ts.map +1 -1
  39. package/dist/overlay/tethered/tethered.js +63 -62
  40. package/dist/overlay/tethered/tethered.js.map +1 -1
  41. package/dist/surfaces/pop_confirm/pop_confirm.js +7 -7
  42. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  43. package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -1
  44. package/dist/surfaces/tooltip/tooltip.js +27 -28
  45. package/dist/surfaces/tooltip/tooltip.js.map +1 -1
  46. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  47. package/dist/themes/themes/ergo/ergo_theme.js +98 -8
  48. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  49. package/package.json +1 -1
  50. package/src/inputs/phone_number_input/phone_number_input.stories.tsx +7 -0
  51. package/src/inputs/phone_number_input/phone_number_input_adapter.tsx +5 -0
  52. package/src/inputs/phone_number_input/sip_input.tsx +5 -0
  53. package/src/inputs/select/select.stories.tsx +34 -11
  54. package/src/inputs/suggestions/suggestion_list.tsx +23 -6
  55. package/src/overlay/popper/base/dismissal_decorator.tsx +1 -1
  56. package/src/overlay/popper/context_popper.tsx +7 -3
  57. package/src/overlay/popper/element_popper.tsx +14 -4
  58. package/src/overlay/tethered/__stories__/shared/base_story_config.ts +1 -1
  59. package/src/overlay/tethered/hooks/use_ref_dimensions.ts +32 -0
  60. package/src/overlay/tethered/hooks/{useTether.ts → use_tether.ts} +7 -2
  61. package/src/overlay/tethered/hooks/use_tether_origin.ts +46 -0
  62. package/src/overlay/tethered/hooks/{calculate_origin.ts → utils/calculate_origin.ts} +12 -12
  63. package/src/overlay/tethered/hooks/{calculate_position.ts → utils/calculate_position.ts} +3 -3
  64. package/src/overlay/tethered/tethered.tsx +22 -26
  65. package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +206 -6
  66. package/src/surfaces/pop_confirm/pop_confirm.tsx +1 -1
  67. package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +136 -0
  68. package/src/surfaces/tooltip/__stories__/tooltip_stories.module.css +14 -0
  69. package/src/surfaces/tooltip/tooltip.tsx +6 -2
  70. package/src/themes/themes/ergo/ergo_theme.css +98 -8
  71. package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +0 -1
  72. package/dist/overlay/tethered/hooks/calculate_origin.js +0 -41
  73. package/dist/overlay/tethered/hooks/calculate_origin.js.map +0 -1
  74. package/dist/overlay/tethered/hooks/calculate_position.d.ts.map +0 -1
  75. package/dist/overlay/tethered/hooks/calculate_position.js.map +0 -1
  76. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +0 -9
  77. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +0 -1
  78. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +0 -14
  79. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +0 -1
  80. package/dist/overlay/tethered/hooks/useTether.d.ts.map +0 -1
  81. package/dist/overlay/tethered/hooks/useTether.js.map +0 -1
  82. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +0 -3
  83. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +0 -1
  84. package/dist/overlay/tethered/hooks/useTetherContentRect.js +0 -36
  85. package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +0 -1
  86. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +0 -14
  87. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +0 -1
  88. package/dist/overlay/tethered/hooks/useTetherOrigin.js +0 -24
  89. package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +0 -1
  90. package/dist/surfaces/popconfirm/pop_confirm.d.ts +0 -5
  91. package/dist/surfaces/popconfirm/pop_confirm.d.ts.map +0 -1
  92. package/dist/surfaces/popconfirm/pop_confirm.js +0 -13
  93. package/dist/surfaces/popconfirm/pop_confirm.js.map +0 -1
  94. package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +0 -22
  95. package/src/overlay/tethered/hooks/useTetherContentRect.ts +0 -49
  96. package/src/overlay/tethered/hooks/useTetherOrigin.ts +0 -49
  97. package/src/surfaces/popconfirm/pop_confirm.tsx +0 -18
  98. package/src/surfaces/tooltip/tooltip.stories.tsx +0 -54
  99. /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={acceptedRefs}\n isException={isException}\n >\n <Tethered ref={ref} 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","jsx","BasePopper","Tethered"],"mappings":";;;;;;AAWO,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;AAEpE,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAML,KAAUE,KAAa;AAAA,MAC7B,aAAaD;AAAA,MACb,cAAAT;AAAA,MACA,YAAAI;AAAA,MACA,cAAAF;AAAA,MACA,aAAAC;AAAA,MAEA,4BAACW,GAAA,EAAS,KAAAP,GAAU,QAAQG,GAAY,GAAGJ,GACxC,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
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;AAEzC,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,oBAAoB,CAAC;AAExE,eAAO,MAAM,aAAa;;kDAgCxB,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 r } from "react/jsx-runtime";
2
- import { forwardRef as d } from "react";
3
- import { BasePopper as s } from "./base/base_popper.js";
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
- const j = d(function({
6
- restoreFocus: e,
7
- open: o,
8
- onDismissal: t,
9
- isException: m,
10
- acceptedRefs: p,
11
- veil: n,
12
- dismissals: f,
13
- children: i,
14
- ...l
15
- }, c) {
16
- return /* @__PURE__ */ r(
17
- s,
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: e,
20
- open: o,
21
- onDismissal: t,
22
- isException: m,
23
- dismissals: f,
24
- acceptedRefs: p,
25
- veil: n,
26
- children: /* @__PURE__ */ r(E, { ref: c, ...l, children: i })
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
- j as ElementPopper
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={acceptedRefs}\n veil={veil}\n >\n <ElementTethered ref={ref} {...elementTetheredProps}>\n {children}\n </ElementTethered>\n </BasePopper>\n );\n});\n"],"names":["ElementPopper","forwardRef","restoreFocus","open","onDismissal","isException","acceptedRefs","veil","dismissals","children","elementTetheredProps","ref","jsx","BasePopper","ElementTethered"],"mappings":";;;;AASO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAAX;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAG;AAAA,MACA,cAAAF;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAAK,EAACE,GAAA,EAAgB,KAAAH,GAAW,GAAGD,GAC5B,UAAAD,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
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,3 @@
1
+ import { Dimensions } from '../../../utils/index.js';
2
+ export declare function useRefDimensions(ref: React.RefObject<HTMLElement>): Dimensions;
3
+ //# sourceMappingURL=use_ref_dimensions.d.ts.map
@@ -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
- position: {
14
- top: number;
15
- left: number;
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=useTether.d.ts.map
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 f, useRef as m, useCallback as g, useLayoutEffect as l } from "react";
2
- import { calculateTetheredPosition as a } from "./calculate_position.js";
3
- function E({
4
- anchor: o,
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 [i, h] = f({ top: 0, left: 0 }), n = m(null), w = g(() => {
13
- if (!o || !n.current) return;
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 a({
16
- anchor: o,
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
- o,
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 l(() => {
49
+ return a(() => {
49
50
  const t = () => {
50
- const e = w();
51
+ const e = m();
51
52
  if (!e) return;
52
- (i.top !== e.top || i.left !== e.left) && h(e);
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
- }), { position: i, tetherRef: n };
58
+ }), {
59
+ rectangle: { dimensions: h, position: { x: o.left, y: o.top } },
60
+ tetherRef: n
61
+ };
58
62
  }
59
63
  export {
60
- E as useTether
64
+ L as useTether
61
65
  };
62
- //# sourceMappingURL=useTether.js.map
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 { Position, Rectangle } from '../../../utils/index.js';
2
- import { HorizontalTether, VerticalTether } from '../types.js';
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(tether: Rectangle, hOrigin: HorizontalTether, vOrigin: VerticalTether): {
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;"}
@@ -1,5 +1,5 @@
1
- import { HorizontalTether, VerticalTether } from '../types.js';
2
- import { Rectangle, Dimensions } from '../../../utils/index.js';
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;AAMlE,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;AACD,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,WAAW;CAAG;AAEtE,eAAO,MAAM,QAAQ;;+CAgFpB,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 p, jsxs as P } from "react/jsx-runtime";
2
- import { clsx as c } from "clsx";
3
- import { forwardRef as j } from "react";
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 D } from "../../stacks/z_stack.js";
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 E } from "../../utils/hooks/use_fork_ref.js";
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 N } from "../caret/caret.js";
19
- import { Portal as S } from "../portal/portal.js";
20
- import { useCaretRefDimensions as F } from "./hooks/useCaretRefDimensions.js";
21
- import { useTether as I } from "./hooks/useTether.js";
22
- import { useTetherOrigin as V } from "./hooks/useTetherOrigin.js";
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: h,
26
- verticalAnchor: n = "bottom",
27
- verticalOrigin: r = "top",
28
- horizontalAnchor: s = "start",
29
- horizontalOrigin: o = "start",
30
- verticalOffset: x = 0,
31
- horizontalOffset: g = 0,
32
- precision: i = "low",
33
- children: l,
34
- style: $,
35
- className: y,
36
- ...R
37
- }, u) {
38
- const { position: t, tetherRef: w } = I({
39
- anchor: h,
40
- verticalAnchor: n,
41
- verticalOrigin: r,
42
- horizontalAnchor: s,
43
- horizontalOrigin: o,
44
- verticalOffset: x,
45
- horizontalOffset: g
46
- }), T = { x: t.left, y: t.top }, { originPosition: m, originOffset: d, containerRef: _, originDirection: e } = V(T, o, r, i), { caretElementRef: b, caretSize: a } = F(
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
- ), k = E(u, w, _), C = {
50
- "--tethered-top": `${t.top}px`,
51
- "--tethered-left": `${t.left}px`,
52
- "--tethered-origin-y": `${m.y}px`,
53
- "--tethered-origin-x": `${m.x}px`,
54
- "--tethered-origin-delta-y": `${d.yOffset}px`,
55
- "--tethered-origin-delta-x": `${d.xOffset}px`,
56
- "--origin-indicator-dimensions-width": `${a.width}px`,
57
- "--origin-indicator-dimensions-height": `${a.height}px`
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__ */ p(S, { children: /* @__PURE__ */ P(
60
- D,
60
+ return /* @__PURE__ */ s(N, { children: /* @__PURE__ */ T(
61
+ b,
61
62
  {
62
- ref: k,
63
- className: c(f.tethered, "tcn-tethered", y),
64
- style: { ...C, ...$ },
65
- "data-v-anchor": n,
66
- "data-h-anchor": s,
67
- "data-v-origin": r,
68
- "data-h-origin": o,
69
- "data-anchor-direction": e,
70
- ...R,
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
- l,
73
- i === "high" && e !== "none" && /* @__PURE__ */ p(
74
- N,
73
+ f,
74
+ d === "high" && t.direction !== "none" && /* @__PURE__ */ s(
75
+ j,
75
76
  {
76
- ref: b,
77
- direction: e,
78
- className: c(
79
- f["origin-indicator"],
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
- mt as Tethered
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 { useCaretRefDimensions } from './hooks/useCaretRefDimensions.js';\nimport { useTether } from './hooks/useTether.js';\nimport { useTetherOrigin } from './hooks/useTetherOrigin.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}\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 { position, tetherRef } = useTether({\n anchor,\n verticalAnchor,\n verticalOrigin,\n horizontalAnchor,\n horizontalOrigin,\n verticalOffset,\n horizontalOffset,\n });\n\n // Convert position from { top, left } to Position type { x, y }\n const tetherPosition = { x: position.left, y: position.top };\n\n const { originPosition, originOffset, containerRef, originDirection } =\n useTetherOrigin(tetherPosition, horizontalOrigin, verticalOrigin, precision);\n\n const { caretElementRef: setCaretElement, caretSize } = useCaretRefDimensions(\n precision,\n originDirection\n );\n\n const forkedRef = useForkRef(ref, tetherRef, containerRef);\n\n const cssVariables = {\n '--tethered-top': `${position.top}px`,\n '--tethered-left': `${position.left}px`,\n '--tethered-origin-y': `${originPosition.y}px`,\n '--tethered-origin-x': `${originPosition.x}px`,\n '--tethered-origin-delta-y': `${originOffset.yOffset}px`,\n '--tethered-origin-delta-x': `${originOffset.xOffset}px`,\n '--origin-indicator-dimensions-width': `${caretSize.width}px`,\n '--origin-indicator-dimensions-height': `${caretSize.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={originDirection}\n {...rest}\n >\n {children}\n {precision === 'high' && originDirection !== 'none' && (\n <Caret\n ref={setCaretElement}\n direction={originDirection}\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","position","tetherRef","useTether","tetherPosition","originPosition","originOffset","containerRef","originDirection","useTetherOrigin","setCaretElement","caretSize","useCaretRefDimensions","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,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACxC,QAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAGKU,IAAiB,EAAE,GAAGH,EAAS,MAAM,GAAGA,EAAS,IAAA,GAEjD,EAAE,gBAAAI,GAAgB,cAAAC,GAAc,cAAAC,GAAc,iBAAAC,EAAA,IAClDC,EAAgBL,GAAgBZ,GAAkBF,GAAgBK,CAAS,GAEvE,EAAE,iBAAiBe,GAAiB,WAAAC,EAAA,IAAcC;AAAA,MACtDjB;AAAA,MACAa;AAAA,IAAA,GAGIK,IAAYC,EAAWd,GAAKE,GAAWK,CAAY,GAEnDQ,IAAe;AAAA,MACnB,kBAAkB,GAAGd,EAAS,GAAG;AAAA,MACjC,mBAAmB,GAAGA,EAAS,IAAI;AAAA,MACnC,uBAAuB,GAAGI,EAAe,CAAC;AAAA,MAC1C,uBAAuB,GAAGA,EAAe,CAAC;AAAA,MAC1C,6BAA6B,GAAGC,EAAa,OAAO;AAAA,MACpD,6BAA6B,GAAGA,EAAa,OAAO;AAAA,MACpD,uCAAuC,GAAGK,EAAU,KAAK;AAAA,MACzD,wCAAwC,GAAGA,EAAU,MAAM;AAAA,IAAA;AAG7D,6BACGK,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAU,gBAAgBtB,CAAS;AAAA,QAC1D,OAAO,EAAE,GAAGiB,GAAc,GAAGlB,EAAA;AAAA,QAC7B,iBAAeR;AAAA,QACf,iBAAeE;AAAA,QACf,iBAAeD;AAAA,QACf,iBAAeE;AAAA,QACf,yBAAuBgB;AAAA,QACtB,GAAGT;AAAA,QAEH,UAAA;AAAA,UAAAH;AAAA,UACAD,MAAc,UAAUa,MAAoB,UAC3C,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKZ;AAAA,cACL,WAAWF;AAAA,cACX,WAAWW;AAAA,gBACTC,EAAO,kBAAkB;AAAA,gBACzB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;"}
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;"}