@tcn/ui 0.12.2 → 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 (84) hide show
  1. package/dist/overlay/popper/base/dismissal_decorator.js +6 -6
  2. package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -1
  3. package/dist/overlay/popper/context_popper.d.ts.map +1 -1
  4. package/dist/overlay/popper/context_popper.js +34 -26
  5. package/dist/overlay/popper/context_popper.js.map +1 -1
  6. package/dist/overlay/popper/element_popper.d.ts.map +1 -1
  7. package/dist/overlay/popper/element_popper.js +43 -25
  8. package/dist/overlay/popper/element_popper.js.map +1 -1
  9. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts +3 -0
  10. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts.map +1 -0
  11. package/dist/overlay/tethered/hooks/use_ref_dimensions.js +26 -0
  12. package/dist/overlay/tethered/hooks/use_ref_dimensions.js.map +1 -0
  13. package/dist/overlay/tethered/hooks/{useTether.d.ts → use_tether.d.ts} +7 -4
  14. package/dist/overlay/tethered/hooks/use_tether.d.ts.map +1 -0
  15. package/dist/overlay/tethered/hooks/{useTether.js → use_tether.js} +19 -15
  16. package/dist/overlay/tethered/hooks/use_tether.js.map +1 -0
  17. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts +10 -0
  18. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts.map +1 -0
  19. package/dist/overlay/tethered/hooks/use_tether_origin.js +22 -0
  20. package/dist/overlay/tethered/hooks/use_tether_origin.js.map +1 -0
  21. package/dist/overlay/tethered/hooks/{calculate_origin.d.ts → utils/calculate_origin.d.ts} +4 -10
  22. package/dist/overlay/tethered/hooks/utils/calculate_origin.d.ts.map +1 -0
  23. package/dist/overlay/tethered/hooks/utils/calculate_origin.js +41 -0
  24. package/dist/overlay/tethered/hooks/utils/calculate_origin.js.map +1 -0
  25. package/dist/overlay/tethered/hooks/{calculate_position.d.ts → utils/calculate_position.d.ts} +2 -2
  26. package/dist/overlay/tethered/hooks/utils/calculate_position.d.ts.map +1 -0
  27. package/dist/overlay/tethered/hooks/utils/calculate_position.js.map +1 -0
  28. package/dist/overlay/tethered/tethered.d.ts.map +1 -1
  29. package/dist/overlay/tethered/tethered.js +63 -62
  30. package/dist/overlay/tethered/tethered.js.map +1 -1
  31. package/dist/surfaces/pop_confirm/pop_confirm.js +7 -7
  32. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  33. package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -1
  34. package/dist/surfaces/tooltip/tooltip.js +27 -28
  35. package/dist/surfaces/tooltip/tooltip.js.map +1 -1
  36. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  37. package/dist/themes/themes/ergo/ergo_theme.js +98 -8
  38. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  39. package/package.json +1 -1
  40. package/src/overlay/popper/base/dismissal_decorator.tsx +1 -1
  41. package/src/overlay/popper/context_popper.tsx +7 -3
  42. package/src/overlay/popper/element_popper.tsx +14 -4
  43. package/src/overlay/tethered/__stories__/shared/base_story_config.ts +1 -1
  44. package/src/overlay/tethered/hooks/use_ref_dimensions.ts +32 -0
  45. package/src/overlay/tethered/hooks/{useTether.ts → use_tether.ts} +7 -2
  46. package/src/overlay/tethered/hooks/use_tether_origin.ts +46 -0
  47. package/src/overlay/tethered/hooks/{calculate_origin.ts → utils/calculate_origin.ts} +12 -12
  48. package/src/overlay/tethered/hooks/{calculate_position.ts → utils/calculate_position.ts} +3 -3
  49. package/src/overlay/tethered/tethered.tsx +22 -26
  50. package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +206 -6
  51. package/src/surfaces/pop_confirm/pop_confirm.tsx +1 -1
  52. package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +136 -0
  53. package/src/surfaces/tooltip/__stories__/tooltip_stories.module.css +14 -0
  54. package/src/surfaces/tooltip/tooltip.tsx +6 -2
  55. package/src/themes/themes/ergo/ergo_theme.css +98 -8
  56. package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +0 -1
  57. package/dist/overlay/tethered/hooks/calculate_origin.js +0 -41
  58. package/dist/overlay/tethered/hooks/calculate_origin.js.map +0 -1
  59. package/dist/overlay/tethered/hooks/calculate_position.d.ts.map +0 -1
  60. package/dist/overlay/tethered/hooks/calculate_position.js.map +0 -1
  61. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +0 -9
  62. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +0 -1
  63. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +0 -14
  64. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +0 -1
  65. package/dist/overlay/tethered/hooks/useTether.d.ts.map +0 -1
  66. package/dist/overlay/tethered/hooks/useTether.js.map +0 -1
  67. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +0 -3
  68. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +0 -1
  69. package/dist/overlay/tethered/hooks/useTetherContentRect.js +0 -36
  70. package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +0 -1
  71. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +0 -14
  72. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +0 -1
  73. package/dist/overlay/tethered/hooks/useTetherOrigin.js +0 -24
  74. package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +0 -1
  75. package/dist/surfaces/popconfirm/pop_confirm.d.ts +0 -5
  76. package/dist/surfaces/popconfirm/pop_confirm.d.ts.map +0 -1
  77. package/dist/surfaces/popconfirm/pop_confirm.js +0 -13
  78. package/dist/surfaces/popconfirm/pop_confirm.js.map +0 -1
  79. package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +0 -22
  80. package/src/overlay/tethered/hooks/useTetherContentRect.ts +0 -49
  81. package/src/overlay/tethered/hooks/useTetherOrigin.ts +0 -49
  82. package/src/surfaces/popconfirm/pop_confirm.tsx +0 -18
  83. package/src/surfaces/tooltip/tooltip.stories.tsx +0 -54
  84. /package/dist/overlay/tethered/hooks/{calculate_position.js → utils/calculate_position.js} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTether.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGpE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,cAAyB,EACzB,cAAsB,EACtB,gBAA0B,EAC1B,gBAA0B,EAC1B,cAAkB,EAClB,gBAAoB,GACrB,EAAE,eAAe;;;;;;EA8DjB"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTether.js","sources":["../../../../src/overlay/tethered/hooks/useTether.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 './calculate_position.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\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 { position, tetherRef };\n}\n"],"names":["useTether","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","position","setPosition","useState","tetherRef","useRef","getPosition","useCallback","tether","computedStyle","calculateTetheredPosition","useLayoutEffect","update","newPosition"],"mappings":";;AAeO,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,GAEvCC,IAAcC,EAAY,MAAM;AACpC,QAAI,CAACb,KAAU,CAACU,EAAU,QAAS;AAEnC,UAAMI,IAASJ,EAAU,QAAQ,sBAAA,GAC3BK,IAAgB,iBAAiBL,EAAU,OAAO;AAExD,WAAOM,EAA0B;AAAA,MAC/B,QAAAhB;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,OAAOc,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,gBAAAd;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,SAAAW,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,YAAMC,IAAcP,EAAA;AACpB,UAAI,CAACO,EAAa;AAGlB,OADEZ,EAAS,QAAQY,EAAY,OAAOZ,EAAS,SAASY,EAAY,SAElEX,EAAYW,CAAW;AAAA,IAE3B;AACA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GACjC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,CAAC,GAEM,EAAE,UAAAX,GAAU,WAAAG,EAAA;AACrB;"}
@@ -1,3 +0,0 @@
1
- import { Rectangle } from '../../../utils/index.js';
2
- export declare function useTetherContentRect(ref: React.RefObject<HTMLElement>): Rectangle;
3
- //# sourceMappingURL=useTetherContentRect.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTetherContentRect.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTetherContentRect.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAuBzD,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAwBjF"}
@@ -1,36 +0,0 @@
1
- import { useState as r, useLayoutEffect as s } from "react";
2
- function i(t) {
3
- if (!t)
4
- return {
5
- dimensions: { width: 0, height: 0 },
6
- position: { x: 0, y: 0 }
7
- };
8
- const e = t.getBoundingClientRect();
9
- return {
10
- dimensions: {
11
- width: e.width,
12
- height: e.height
13
- },
14
- position: {
15
- x: e.left,
16
- y: e.top
17
- }
18
- };
19
- }
20
- function u(t) {
21
- const [e, o] = r(
22
- () => i(t.current)
23
- );
24
- return s(() => {
25
- const n = () => {
26
- o(i(t.current));
27
- };
28
- return n(), window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), () => {
29
- window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
30
- };
31
- }, [t]), e;
32
- }
33
- export {
34
- u as useTetherContentRect
35
- };
36
- //# sourceMappingURL=useTetherContentRect.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTetherContentRect.js","sources":["../../../../src/overlay/tethered/hooks/useTetherContentRect.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\nimport type { Rectangle } from '../../../utils/index.js';\n\nfunction getTetherContentRect(element: HTMLElement | null): Rectangle {\n if (!element) {\n return {\n dimensions: { width: 0, height: 0 },\n position: { x: 0, y: 0 },\n };\n }\n\n const rect = element.getBoundingClientRect();\n return {\n dimensions: {\n width: rect.width,\n height: rect.height,\n },\n position: {\n x: rect.left,\n y: rect.top,\n },\n };\n}\n\nexport function useTetherContentRect(ref: React.RefObject<HTMLElement>): Rectangle {\n const [contentRect, setContentRect] = useState<Rectangle>(() =>\n getTetherContentRect(ref.current)\n );\n\n useLayoutEffect(() => {\n const update = () => {\n setContentRect(getTetherContentRect(ref.current));\n };\n\n update();\n\n // Track resize events\n window.addEventListener('resize', update);\n // Track scroll events\n window.addEventListener('scroll', update, true);\n\n return () => {\n window.removeEventListener('resize', update);\n window.removeEventListener('scroll', update, true);\n };\n }, [ref]);\n\n return contentRect;\n}\n"],"names":["getTetherContentRect","element","rect","useTetherContentRect","ref","contentRect","setContentRect","useState","useLayoutEffect","update"],"mappings":";AAGA,SAASA,EAAqBC,GAAwC;AACpE,MAAI,CAACA;AACH,WAAO;AAAA,MACL,YAAY,EAAE,OAAO,GAAG,QAAQ,EAAA;AAAA,MAChC,UAAU,EAAE,GAAG,GAAG,GAAG,EAAA;AAAA,IAAE;AAI3B,QAAMC,IAAOD,EAAQ,sBAAA;AACrB,SAAO;AAAA,IACL,YAAY;AAAA,MACV,OAAOC,EAAK;AAAA,MACZ,QAAQA,EAAK;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,GAAGA,EAAK;AAAA,MACR,GAAGA,EAAK;AAAA,IAAA;AAAA,EACV;AAEJ;AAEO,SAASC,EAAqBC,GAA8C;AACjF,QAAM,CAACC,GAAaC,CAAc,IAAIC;AAAA,IAAoB,MACxDP,EAAqBI,EAAI,OAAO;AAAA,EAAA;AAGlC,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,MAAAH,EAAeN,EAAqBI,EAAI,OAAO,CAAC;AAAA,IAClD;AAEA,WAAAK,EAAA,GAGA,OAAO,iBAAiB,UAAUA,CAAM,GAExC,OAAO,iBAAiB,UAAUA,GAAQ,EAAI,GAEvC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM,GAC3C,OAAO,oBAAoB,UAAUA,GAAQ,EAAI;AAAA,IACnD;AAAA,EACF,GAAG,CAACL,CAAG,CAAC,GAEDC;AACT;"}
@@ -1,14 +0,0 @@
1
- import { Position } from '../../../utils/index.js';
2
- import { HorizontalTether, VerticalTether } from '../types.js';
3
- import { CaretDirection } from './calculate_origin.js';
4
- export interface UseTetherOriginResult {
5
- originPosition: Position;
6
- originOffset: {
7
- yOffset: number;
8
- xOffset: number;
9
- };
10
- containerRef: React.RefObject<HTMLDivElement>;
11
- originDirection: CaretDirection;
12
- }
13
- export declare function useTetherOrigin(tetherPosition: Position, hOrigin: HorizontalTether, vOrigin: VerticalTether, precision: 'high' | 'low'): UseTetherOriginResult;
14
- //# sourceMappingURL=useTetherOrigin.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTetherOrigin.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTetherOrigin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,QAAQ,CAAC;IACzB,YAAY,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,eAAe,EAAE,cAAc,CAAC;CACjC;AAED,wBAAgB,eAAe,CAC7B,cAAc,EAAE,QAAQ,EACxB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,MAAM,GAAG,KAAK,GACxB,qBAAqB,CAyBvB"}
@@ -1,24 +0,0 @@
1
- import { useRef as g } from "react";
2
- import { getOriginOffset as u, getOriginPosition as O, getOriginDirection as m } from "./calculate_origin.js";
3
- import { useTetherContentRect as p } from "./useTetherContentRect.js";
4
- function P(r, o, t, f) {
5
- const i = g(null), n = p(i);
6
- if (f === "low")
7
- return {
8
- originPosition: r,
9
- originOffset: { yOffset: 0, xOffset: 0 },
10
- containerRef: i,
11
- originDirection: "none"
12
- };
13
- const e = u(n, o, t), s = O(n.position, e), c = m(t, o);
14
- return {
15
- originPosition: s,
16
- originOffset: e,
17
- containerRef: i,
18
- originDirection: c
19
- };
20
- }
21
- export {
22
- P as useTetherOrigin
23
- };
24
- //# sourceMappingURL=useTetherOrigin.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTetherOrigin.js","sources":["../../../../src/overlay/tethered/hooks/useTetherOrigin.ts"],"sourcesContent":["import { useRef } from 'react';\nimport type { Position } from '../../../utils/index.js';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport {\n getOriginDirection,\n getOriginOffset,\n getOriginPosition,\n type CaretDirection,\n} from './calculate_origin.js';\nimport { useTetherContentRect } from './useTetherContentRect.js';\n\nexport interface UseTetherOriginResult {\n originPosition: Position;\n originOffset: { yOffset: number; xOffset: number };\n containerRef: React.RefObject<HTMLDivElement>;\n originDirection: CaretDirection;\n}\n\nexport function useTetherOrigin(\n tetherPosition: Position,\n hOrigin: HorizontalTether,\n vOrigin: VerticalTether,\n precision: 'high' | 'low'\n): UseTetherOriginResult {\n const containerRef = useRef<HTMLDivElement>(null);\n const containerRect = useTetherContentRect(containerRef);\n\n // If precision is low, return default values\n if (precision === 'low') {\n return {\n originPosition: tetherPosition,\n originOffset: { yOffset: 0, xOffset: 0 },\n containerRef,\n originDirection: 'none',\n };\n }\n\n // Calculate origin values for high precision\n const originOffset = getOriginOffset(containerRect, hOrigin, vOrigin);\n const originPosition = getOriginPosition(containerRect.position, originOffset);\n const originDirection = getOriginDirection(vOrigin, hOrigin);\n\n return {\n originPosition,\n originOffset,\n containerRef,\n originDirection,\n };\n}\n"],"names":["useTetherOrigin","tetherPosition","hOrigin","vOrigin","precision","containerRef","useRef","containerRect","useTetherContentRect","originOffset","getOriginOffset","originPosition","getOriginPosition","originDirection","getOriginDirection"],"mappings":";;;AAkBO,SAASA,EACdC,GACAC,GACAC,GACAC,GACuB;AACvB,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAgBC,EAAqBH,CAAY;AAGvD,MAAID,MAAc;AAChB,WAAO;AAAA,MACL,gBAAgBH;AAAA,MAChB,cAAc,EAAE,SAAS,GAAG,SAAS,EAAA;AAAA,MACrC,cAAAI;AAAA,MACA,iBAAiB;AAAA,IAAA;AAKrB,QAAMI,IAAeC,EAAgBH,GAAeL,GAASC,CAAO,GAC9DQ,IAAiBC,EAAkBL,EAAc,UAAUE,CAAY,GACvEI,IAAkBC,EAAmBX,GAASD,CAAO;AAE3D,SAAO;AAAA,IACL,gBAAAS;AAAA,IACA,cAAAF;AAAA,IACA,cAAAJ;AAAA,IACA,iBAAAQ;AAAA,EAAA;AAEJ;"}
@@ -1,5 +0,0 @@
1
- import { default as React } from 'react';
2
- import { ElementPopperProps } from '../../overlay/popper/element_popper.js';
3
- export type PopConfirmProps = ElementPopperProps;
4
- export declare const PopConfirm: React.ForwardRefExoticComponent<import('../../overlay/index.js').BasePopperProps & import('../../overlay/index.js').ElementTetheredProps & React.RefAttributes<HTMLDivElement>>;
5
- //# sourceMappingURL=pop_confirm.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pop_confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/popconfirm/pop_confirm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,iLAQtB,CAAC"}
@@ -1,13 +0,0 @@
1
- import { jsx as f } from "react/jsx-runtime";
2
- import p from "react";
3
- import { clsx as e } from "clsx";
4
- import { ElementPopper as n } from "../../overlay/popper/element_popper.js";
5
- const u = p.forwardRef(
6
- function({ children: o, className: r, ...m }, t) {
7
- return /* @__PURE__ */ f(n, { ref: t, className: e(r, "tcn-popconfirm"), ...m, children: o });
8
- }
9
- );
10
- export {
11
- u as PopConfirm
12
- };
13
- //# sourceMappingURL=pop_confirm.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/popconfirm/pop_confirm.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport {\n ElementPopper,\n type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n function PopConfirm({ children, className, ...props }, ref) {\n return (\n <ElementPopper ref={ref} className={clsx(className, 'tcn-popconfirm')} {...props}>\n {children}\n </ElementPopper>\n );\n }\n);\n"],"names":["PopConfirm","React","children","className","props","ref","jsx","ElementPopper","clsx"],"mappings":";;;;AASO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SAAoB,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AAC1D,WACE,gBAAAC,EAACC,GAAA,EAAc,KAAAF,GAAU,WAAWG,EAAKL,GAAW,gBAAgB,GAAI,GAAGC,GACxE,UAAAF,EAAA,CACH;AAAA,EAEJ;AACF;"}
@@ -1,22 +0,0 @@
1
- import { useLayoutEffect, useState } from 'react';
2
- import type { CaretDirection } from './calculate_origin.js';
3
-
4
- export function useCaretRefDimensions(
5
- precision: 'high' | 'low',
6
- originDirection: CaretDirection
7
- ): {
8
- caretElementRef: (element: HTMLElement | null) => void;
9
- caretSize: { width: number; height: number };
10
- } {
11
- const [caretElement, setCaretElement] = useState<HTMLElement | null>(null);
12
- const [caretSize, setCaretSize] = useState({ width: 0, height: 0 });
13
-
14
- useLayoutEffect(() => {
15
- if (precision === 'high' && originDirection !== 'none' && caretElement) {
16
- const rect = caretElement.getBoundingClientRect();
17
- setCaretSize({ width: rect.width, height: rect.height });
18
- }
19
- }, [precision, originDirection, caretElement]);
20
-
21
- return { caretElementRef: setCaretElement, caretSize };
22
- }
@@ -1,49 +0,0 @@
1
- import { useLayoutEffect, useState } from 'react';
2
- import type { Rectangle } from '../../../utils/index.js';
3
-
4
- function getTetherContentRect(element: HTMLElement | null): Rectangle {
5
- if (!element) {
6
- return {
7
- dimensions: { width: 0, height: 0 },
8
- position: { x: 0, y: 0 },
9
- };
10
- }
11
-
12
- const rect = element.getBoundingClientRect();
13
- return {
14
- dimensions: {
15
- width: rect.width,
16
- height: rect.height,
17
- },
18
- position: {
19
- x: rect.left,
20
- y: rect.top,
21
- },
22
- };
23
- }
24
-
25
- export function useTetherContentRect(ref: React.RefObject<HTMLElement>): Rectangle {
26
- const [contentRect, setContentRect] = useState<Rectangle>(() =>
27
- getTetherContentRect(ref.current)
28
- );
29
-
30
- useLayoutEffect(() => {
31
- const update = () => {
32
- setContentRect(getTetherContentRect(ref.current));
33
- };
34
-
35
- update();
36
-
37
- // Track resize events
38
- window.addEventListener('resize', update);
39
- // Track scroll events
40
- window.addEventListener('scroll', update, true);
41
-
42
- return () => {
43
- window.removeEventListener('resize', update);
44
- window.removeEventListener('scroll', update, true);
45
- };
46
- }, [ref]);
47
-
48
- return contentRect;
49
- }
@@ -1,49 +0,0 @@
1
- import { useRef } from 'react';
2
- import type { Position } from '../../../utils/index.js';
3
- import type { HorizontalTether, VerticalTether } from '../types.js';
4
- import {
5
- getOriginDirection,
6
- getOriginOffset,
7
- getOriginPosition,
8
- type CaretDirection,
9
- } from './calculate_origin.js';
10
- import { useTetherContentRect } from './useTetherContentRect.js';
11
-
12
- export interface UseTetherOriginResult {
13
- originPosition: Position;
14
- originOffset: { yOffset: number; xOffset: number };
15
- containerRef: React.RefObject<HTMLDivElement>;
16
- originDirection: CaretDirection;
17
- }
18
-
19
- export function useTetherOrigin(
20
- tetherPosition: Position,
21
- hOrigin: HorizontalTether,
22
- vOrigin: VerticalTether,
23
- precision: 'high' | 'low'
24
- ): UseTetherOriginResult {
25
- const containerRef = useRef<HTMLDivElement>(null);
26
- const containerRect = useTetherContentRect(containerRef);
27
-
28
- // If precision is low, return default values
29
- if (precision === 'low') {
30
- return {
31
- originPosition: tetherPosition,
32
- originOffset: { yOffset: 0, xOffset: 0 },
33
- containerRef,
34
- originDirection: 'none',
35
- };
36
- }
37
-
38
- // Calculate origin values for high precision
39
- const originOffset = getOriginOffset(containerRect, hOrigin, vOrigin);
40
- const originPosition = getOriginPosition(containerRect.position, originOffset);
41
- const originDirection = getOriginDirection(vOrigin, hOrigin);
42
-
43
- return {
44
- originPosition,
45
- originOffset,
46
- containerRef,
47
- originDirection,
48
- };
49
- }
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { clsx } from 'clsx';
3
- import {
4
- ElementPopper,
5
- type ElementPopperProps,
6
- } from '../../overlay/popper/element_popper.js';
7
-
8
- export type PopConfirmProps = ElementPopperProps;
9
-
10
- export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
11
- function PopConfirm({ children, className, ...props }, ref) {
12
- return (
13
- <ElementPopper ref={ref} className={clsx(className, 'tcn-popconfirm')} {...props}>
14
- {children}
15
- </ElementPopper>
16
- );
17
- }
18
- );
@@ -1,54 +0,0 @@
1
- import { StyleBox } from '../../stacks/story_components/style_box.js';
2
- import { BodyText } from '../../typography/index.js';
3
- import { Tooltip as TooltipComponent } from './tooltip.js';
4
-
5
- export default {
6
- title: 'Surfaces/Tooltip',
7
- component: TooltipComponent,
8
- tags: ['autodocs'],
9
- parameters: {
10
- docs: {
11
- description: {
12
- component: 'A tooltip component that displays a tooltip when hovered.',
13
- },
14
- },
15
- },
16
- };
17
-
18
- export const DefaultTooltip = () => {
19
- return (
20
- <TooltipComponent label={'Tooltip content'}>
21
- <StyleBox
22
- backgroundColor="red"
23
- padding="8px"
24
- borderRadius={'8px'}
25
- width="200px"
26
- height="100px"
27
- display="flex"
28
- justifyContent="center"
29
- alignItems="center"
30
- >
31
- Hover to open
32
- </StyleBox>
33
- </TooltipComponent>
34
- );
35
- };
36
-
37
- export const CustomTooltip = () => {
38
- return (
39
- <TooltipComponent label={<BodyText>Tooltip content</BodyText>}>
40
- <StyleBox
41
- backgroundColor="red"
42
- padding="8px"
43
- borderRadius={'8px'}
44
- width="200px"
45
- height="100px"
46
- display="flex"
47
- justifyContent="center"
48
- alignItems="center"
49
- >
50
- Hover to open
51
- </StyleBox>
52
- </TooltipComponent>
53
- );
54
- };