@tipp/ui 0.1.21 → 0.1.22

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 (164) hide show
  1. package/dist/atoms/ellipsis-tooltip.cjs +129 -0
  2. package/dist/atoms/ellipsis-tooltip.cjs.map +1 -0
  3. package/dist/atoms/ellipsis-tooltip.d.cts +11 -0
  4. package/dist/atoms/ellipsis-tooltip.d.ts +11 -0
  5. package/dist/atoms/ellipsis-tooltip.js +10 -0
  6. package/dist/atoms/ellipsis-tooltip.js.map +1 -0
  7. package/dist/atoms/index.cjs +44 -0
  8. package/dist/atoms/index.cjs.map +1 -1
  9. package/dist/atoms/index.d.cts +1 -0
  10. package/dist/atoms/index.d.ts +1 -0
  11. package/dist/atoms/index.js +14 -10
  12. package/dist/chunk-2A2IJOVV.js +60 -0
  13. package/dist/chunk-2A2IJOVV.js.map +1 -0
  14. package/dist/chunk-2JZ3UQAX.js +48 -0
  15. package/dist/chunk-2JZ3UQAX.js.map +1 -0
  16. package/dist/chunk-2TGD62PR.js +59 -0
  17. package/dist/chunk-2TGD62PR.js.map +1 -0
  18. package/dist/chunk-3427FUJN.js +46 -0
  19. package/dist/chunk-3427FUJN.js.map +1 -0
  20. package/dist/chunk-34P2PUMC.js +60 -0
  21. package/dist/chunk-34P2PUMC.js.map +1 -0
  22. package/dist/chunk-3I5CDBFN.js +104 -0
  23. package/dist/chunk-3I5CDBFN.js.map +1 -0
  24. package/dist/chunk-3KIARYD6.js +47 -0
  25. package/dist/chunk-3KIARYD6.js.map +1 -0
  26. package/dist/chunk-4IKPNQV5.js +58 -0
  27. package/dist/chunk-4IKPNQV5.js.map +1 -0
  28. package/dist/chunk-4RIBUNMS.js +49 -0
  29. package/dist/chunk-4RIBUNMS.js.map +1 -0
  30. package/dist/chunk-4ZQHR3JI.js +47 -0
  31. package/dist/chunk-4ZQHR3JI.js.map +1 -0
  32. package/dist/chunk-6BXAZV7N.js +63 -0
  33. package/dist/chunk-6BXAZV7N.js.map +1 -0
  34. package/dist/chunk-6GHADQAU.js +59 -0
  35. package/dist/chunk-6GHADQAU.js.map +1 -0
  36. package/dist/chunk-6SGXBZAF.js +62 -0
  37. package/dist/chunk-6SGXBZAF.js.map +1 -0
  38. package/dist/chunk-6ZEM4FBF.js +64 -0
  39. package/dist/chunk-6ZEM4FBF.js.map +1 -0
  40. package/dist/chunk-754LMJ5L.js +48 -0
  41. package/dist/chunk-754LMJ5L.js.map +1 -0
  42. package/dist/chunk-7VCJMEPY.js +60 -0
  43. package/dist/chunk-7VCJMEPY.js.map +1 -0
  44. package/dist/chunk-AD4LGJER.js +60 -0
  45. package/dist/chunk-AD4LGJER.js.map +1 -0
  46. package/dist/chunk-AS6NXGBN.js +59 -0
  47. package/dist/chunk-AS6NXGBN.js.map +1 -0
  48. package/dist/chunk-BH2MBAAY.js +59 -0
  49. package/dist/chunk-BH2MBAAY.js.map +1 -0
  50. package/dist/chunk-C5QSBSVB.js +59 -0
  51. package/dist/chunk-C5QSBSVB.js.map +1 -0
  52. package/dist/chunk-C7BS7VPF.js +46 -0
  53. package/dist/chunk-C7BS7VPF.js.map +1 -0
  54. package/dist/chunk-CC3GT7LT.js +53 -0
  55. package/dist/chunk-CC3GT7LT.js.map +1 -0
  56. package/dist/chunk-CHHLIPDN.js +23 -0
  57. package/dist/chunk-CHHLIPDN.js.map +1 -0
  58. package/dist/chunk-CMPIGFPT.js +60 -0
  59. package/dist/chunk-CMPIGFPT.js.map +1 -0
  60. package/dist/chunk-CODQBUIC.js +59 -0
  61. package/dist/chunk-CODQBUIC.js.map +1 -0
  62. package/dist/chunk-CVOLVQKD.js +60 -0
  63. package/dist/chunk-CVOLVQKD.js.map +1 -0
  64. package/dist/chunk-CXFAL52D.js +60 -0
  65. package/dist/chunk-CXFAL52D.js.map +1 -0
  66. package/dist/chunk-E6EPYWFL.js +53 -0
  67. package/dist/chunk-E6EPYWFL.js.map +1 -0
  68. package/dist/chunk-EJWIO6NJ.js +104 -0
  69. package/dist/chunk-EJWIO6NJ.js.map +1 -0
  70. package/dist/chunk-EM57H7XC.js +48 -0
  71. package/dist/chunk-EM57H7XC.js.map +1 -0
  72. package/dist/chunk-FHXW7BLD.js +61 -0
  73. package/dist/chunk-FHXW7BLD.js.map +1 -0
  74. package/dist/chunk-FVSPOU5C.js +48 -0
  75. package/dist/chunk-FVSPOU5C.js.map +1 -0
  76. package/dist/chunk-GOKKEO23.js +53 -0
  77. package/dist/chunk-GOKKEO23.js.map +1 -0
  78. package/dist/chunk-HRQSHRGQ.js +59 -0
  79. package/dist/chunk-HRQSHRGQ.js.map +1 -0
  80. package/dist/chunk-HVMWNAXK.js +60 -0
  81. package/dist/chunk-HVMWNAXK.js.map +1 -0
  82. package/dist/chunk-I6D4HPRN.js +60 -0
  83. package/dist/chunk-I6D4HPRN.js.map +1 -0
  84. package/dist/chunk-I7YPDRXO.js +62 -0
  85. package/dist/chunk-I7YPDRXO.js.map +1 -0
  86. package/dist/chunk-JJ5IIAB2.js +119 -0
  87. package/dist/chunk-JJ5IIAB2.js.map +1 -0
  88. package/dist/chunk-KFAG5R3H.js +64 -0
  89. package/dist/chunk-KFAG5R3H.js.map +1 -0
  90. package/dist/chunk-KGN7AVRJ.js +45 -0
  91. package/dist/chunk-KGN7AVRJ.js.map +1 -0
  92. package/dist/chunk-KXJM7U4I.js +47 -0
  93. package/dist/chunk-KXJM7U4I.js.map +1 -0
  94. package/dist/chunk-LA6FLXGE.js +47 -0
  95. package/dist/chunk-LA6FLXGE.js.map +1 -0
  96. package/dist/chunk-MASTHXWN.js +1 -0
  97. package/dist/chunk-MASTHXWN.js.map +1 -0
  98. package/dist/chunk-NFGNQEVV.js +46 -0
  99. package/dist/chunk-NFGNQEVV.js.map +1 -0
  100. package/dist/chunk-O4GMX5TL.js +55 -0
  101. package/dist/chunk-O4GMX5TL.js.map +1 -0
  102. package/dist/chunk-OJ5XUBZN.js +46 -0
  103. package/dist/chunk-OJ5XUBZN.js.map +1 -0
  104. package/dist/chunk-PLG3AXHM.js +59 -0
  105. package/dist/chunk-PLG3AXHM.js.map +1 -0
  106. package/dist/chunk-PQBRLX37.js +48 -0
  107. package/dist/chunk-PQBRLX37.js.map +1 -0
  108. package/dist/chunk-QIKFIRGO.js +59 -0
  109. package/dist/chunk-QIKFIRGO.js.map +1 -0
  110. package/dist/chunk-RAJAKQXU.js +59 -0
  111. package/dist/chunk-RAJAKQXU.js.map +1 -0
  112. package/dist/chunk-RNB2T5NJ.js +48 -0
  113. package/dist/chunk-RNB2T5NJ.js.map +1 -0
  114. package/dist/chunk-TBXRPM4O.js +59 -0
  115. package/dist/chunk-TBXRPM4O.js.map +1 -0
  116. package/dist/chunk-TJGELI4L.js +53 -0
  117. package/dist/chunk-TJGELI4L.js.map +1 -0
  118. package/dist/chunk-TVJ4Z7MD.js +46 -0
  119. package/dist/chunk-TVJ4Z7MD.js.map +1 -0
  120. package/dist/chunk-UCEASXHW.js +47 -0
  121. package/dist/chunk-UCEASXHW.js.map +1 -0
  122. package/dist/chunk-UGSJR77F.js +48 -0
  123. package/dist/chunk-UGSJR77F.js.map +1 -0
  124. package/dist/chunk-UQPA2QGC.js +45 -0
  125. package/dist/chunk-UQPA2QGC.js.map +1 -0
  126. package/dist/chunk-V2AYMNSS.js +46 -0
  127. package/dist/chunk-V2AYMNSS.js.map +1 -0
  128. package/dist/chunk-VC2TT56B.js +46 -0
  129. package/dist/chunk-VC2TT56B.js.map +1 -0
  130. package/dist/chunk-VCOQG6JF.js +119 -0
  131. package/dist/chunk-VCOQG6JF.js.map +1 -0
  132. package/dist/chunk-VOR32EFU.js +59 -0
  133. package/dist/chunk-VOR32EFU.js.map +1 -0
  134. package/dist/chunk-W6Z2XJJ2.js +45 -0
  135. package/dist/chunk-W6Z2XJJ2.js.map +1 -0
  136. package/dist/chunk-WG7AQQRT.js +59 -0
  137. package/dist/chunk-WG7AQQRT.js.map +1 -0
  138. package/dist/chunk-WZZEI2W4.js +59 -0
  139. package/dist/chunk-WZZEI2W4.js.map +1 -0
  140. package/dist/chunk-XDCANCKF.js +59 -0
  141. package/dist/chunk-XDCANCKF.js.map +1 -0
  142. package/dist/chunk-XZN2SS2K.js +119 -0
  143. package/dist/chunk-XZN2SS2K.js.map +1 -0
  144. package/dist/chunk-YGS4JU4E.js +60 -0
  145. package/dist/chunk-YGS4JU4E.js.map +1 -0
  146. package/dist/chunk-YKEXHUPR.js +48 -0
  147. package/dist/chunk-YKEXHUPR.js.map +1 -0
  148. package/dist/index.cjs +79 -35
  149. package/dist/index.cjs.map +1 -1
  150. package/dist/index.d.cts +1 -0
  151. package/dist/index.d.ts +1 -0
  152. package/dist/index.js +20 -16
  153. package/dist/molecules/expand-table/index.cjs +37 -33
  154. package/dist/molecules/expand-table/index.cjs.map +1 -1
  155. package/dist/molecules/expand-table/index.js +5 -4
  156. package/dist/molecules/expand-table/row.cjs +13 -9
  157. package/dist/molecules/expand-table/row.cjs.map +1 -1
  158. package/dist/molecules/expand-table/row.js +5 -4
  159. package/dist/molecules/index.cjs +37 -33
  160. package/dist/molecules/index.cjs.map +1 -1
  161. package/dist/molecules/index.js +5 -4
  162. package/package.json +1 -1
  163. package/src/atoms/ellipsis-tooltip.tsx +57 -0
  164. package/src/atoms/index.ts +2 -0
@@ -0,0 +1,59 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ function EllipsisTooltip(props) {
17
+ const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
18
+ const ref = useRef(null);
19
+ const [tooltipDisplay, setTooltipDisplay] = useState(
20
+ "none"
21
+ );
22
+ useEffect(() => {
23
+ var _a2;
24
+ const mouseOver = () => {
25
+ if (ref.current) {
26
+ const typo = ref.current;
27
+ if (typo.scrollWidth > typo.clientWidth) {
28
+ setTooltipDisplay("block");
29
+ }
30
+ }
31
+ };
32
+ const mouseOut = () => {
33
+ setTooltipDisplay("none");
34
+ };
35
+ (_a2 = ref.current) == null ? void 0 : _a2.addEventListener("mouseenter", () => {
36
+ });
37
+ }, [ref]);
38
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
39
+ Typo,
40
+ __spreadProps(__spreadValues({}, rest), {
41
+ ref,
42
+ style: __spreadValues({
43
+ width: "100%",
44
+ textOverflow: "ellipsis",
45
+ overflow: "hidden",
46
+ WebkitLineClamp: lineClamp,
47
+ display: "-webkit-box",
48
+ WebkitBoxOrient: "vertical",
49
+ wordBreak: "break-word"
50
+ }, style),
51
+ children
52
+ })
53
+ ) });
54
+ }
55
+
56
+ export {
57
+ EllipsisTooltip
58
+ };
59
+ //# sourceMappingURL=chunk-TBXRPM4O.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n \n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n const mouseOver = ()=>{\n if (ref.current) {\n const typo = ref.current;\n if (typo.scrollWidth > typo.clientWidth) {\n setTooltipDisplay('block');\n } \n }\n }\n\n const mouseOut = ()=>{\n setTooltipDisplay('none');\n }\n\n ref.current?.addEventListener(('mouseenter'),()=>{});\n }, [ref]);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={ref}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n WebkitLineClamp: lineClamp,\n\n display:'-webkit-box',\n WebkitBoxOrient: 'vertical',\n wordBreak: 'break-word',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n} "],"mappings":";;;;;;;;;;;;;AAAA,SAA4B,WAAW,QAAQ,gBAAgB;AAmCzD;AA3BC,SAAS,gBAAgB,OAA8C;AAC5E,QAAoD,YAA5C,YAAU,OAAO,YAAY,EATvC,IASsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AAExC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAhBlB,QAAAA;AAiBI,UAAM,YAAY,MAAI;AACpB,UAAI,IAAI,SAAS;AACf,cAAM,OAAO,IAAI;AACjB,YAAI,KAAK,cAAc,KAAK,aAAa;AACvC,4BAAkB,OAAO;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAAW,MAAI;AACnB,wBAAkB,MAAM;AAAA,IAC1B;AAED,KAAAA,MAAA,IAAI,YAAJ,gBAAAA,IAAa,iBAAkB,cAAc,MAAI;AAAA,IAAC;AAAA,EACnD,GAAG,CAAC,GAAG,CAAC;AAER,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,iBAAiB;AAAA,QAEjB,SAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,WAAW;AAAA,SACR;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ;","names":["_a"]}
@@ -0,0 +1,53 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { forwardRef, useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ var EllipsisTooltip = forwardRef((props, maybeRef) => {
17
+ const _a = props, { children, style } = _a, rest = __objRest(_a, ["children", "style"]);
18
+ const ref = useRef(null);
19
+ const typoRef = maybeRef || ref;
20
+ const [tooltipDisplay, setTooltipDisplay] = useState(
21
+ "none"
22
+ );
23
+ useEffect(() => {
24
+ if (typoRef.current) {
25
+ const typo = typoRef.current;
26
+ if (typo.scrollWidth > typo.clientWidth) {
27
+ setTooltipDisplay("block");
28
+ } else {
29
+ setTooltipDisplay("none");
30
+ }
31
+ }
32
+ }, []);
33
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
34
+ Typo,
35
+ __spreadProps(__spreadValues({}, rest), {
36
+ ref: typoRef,
37
+ style: __spreadValues({
38
+ width: "100%",
39
+ textOverflow: "ellipsis",
40
+ overflow: "hidden",
41
+ wordBreak: "break-word",
42
+ WebkitLineClamp: 2
43
+ }, style),
44
+ children
45
+ })
46
+ ) });
47
+ });
48
+ EllipsisTooltip.displayName = "EllipsisTooltip";
49
+
50
+ export {
51
+ EllipsisTooltip
52
+ };
53
+ //# sourceMappingURL=chunk-TJGELI4L.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n if (typoRef.current) {\n const typo = typoRef.current;\n if (typo.scrollWidth > typo.clientWidth) {\n setTooltipDisplay('block');\n } else {\n setTooltipDisplay('none');\n }\n }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: 2,\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAqC,YAA7B,YAAU,MAZpB,IAYuC,IAAT,iBAAS,IAAT,CAApB,YAAU;AAClB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,QAAQ,SAAS;AACnB,YAAM,OAAO,QAAQ;AACrB,UAAI,KAAK,cAAc,KAAK,aAAa;AACvC,0BAAkB,OAAO;AAAA,MAC3B,OAAO;AACL,0BAAkB,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,46 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { forwardRef, useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ var EllipsisTooltip = forwardRef((props, maybeRef) => {
17
+ const _a = props, { children, style, lineClamp } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
18
+ const ref = useRef(null);
19
+ const typoRef = maybeRef || ref;
20
+ const [tooltipDisplay, setTooltipDisplay] = useState(
21
+ "none"
22
+ );
23
+ useEffect(() => {
24
+ }, []);
25
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
26
+ Typo,
27
+ __spreadProps(__spreadValues({}, rest), {
28
+ ref: typoRef,
29
+ style: __spreadValues({
30
+ width: "100%",
31
+ textOverflow: "ellipsis",
32
+ overflow: "hidden",
33
+ wordBreak: "break-word",
34
+ WebkitLineClamp: lineClamp,
35
+ WebkitBoxOrient: "vertical"
36
+ }, style),
37
+ children
38
+ })
39
+ ) });
40
+ });
41
+ EllipsisTooltip.displayName = "EllipsisTooltip";
42
+
43
+ export {
44
+ EllipsisTooltip
45
+ };
46
+ //# sourceMappingURL=chunk-TVJ4Z7MD.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp,\n WebkitBoxOrient: 'vertical',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAgD,YAAxC,YAAU,OAAO,UAZ3B,IAYkD,IAAT,iBAAS,IAAT,CAA/B,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,47 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { forwardRef, useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ var EllipsisTooltip = forwardRef((props, maybeRef) => {
17
+ const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
18
+ const ref = useRef(null);
19
+ const typoRef = maybeRef || ref;
20
+ const [tooltipDisplay, setTooltipDisplay] = useState(
21
+ "none"
22
+ );
23
+ useEffect(() => {
24
+ }, []);
25
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
26
+ Typo,
27
+ __spreadProps(__spreadValues({}, rest), {
28
+ ref: typoRef,
29
+ style: __spreadValues({
30
+ width: "100%",
31
+ textOverflow: "ellipsis",
32
+ overflow: "hidden",
33
+ WebkitLineClamp: lineClamp,
34
+ display: "-webkit-box",
35
+ WebkitBoxOrient: "vertical",
36
+ wordBreak: "break-word"
37
+ }, style),
38
+ children
39
+ })
40
+ ) });
41
+ });
42
+ EllipsisTooltip.displayName = "EllipsisTooltip";
43
+
44
+ export {
45
+ EllipsisTooltip
46
+ };
47
+ //# sourceMappingURL=chunk-UCEASXHW.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n WebkitLineClamp: lineClamp,\n\n display:'-webkit-box',\n\n WebkitBoxOrient: 'vertical',\n wordBreak: 'break-word',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAoD,YAA5C,YAAU,OAAO,YAAY,EAZvC,IAYsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,iBAAiB;AAAA,QAEjB,SAAQ;AAAA,QAER,iBAAiB;AAAA,QACjB,WAAW;AAAA,SACR;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,48 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { forwardRef, useEffect, useRef, useState } from "react";
15
+ import { jsx, jsxs } from "react/jsx-runtime";
16
+ var EllipsisTooltip = forwardRef((props, maybeRef) => {
17
+ const _a = props, { children, style, lineClamp } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
18
+ const ref = useRef(null);
19
+ const typoRef = maybeRef || ref;
20
+ const [tooltipDisplay, setTooltipDisplay] = useState(
21
+ "none"
22
+ );
23
+ useEffect(() => {
24
+ }, []);
25
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsxs(
26
+ Typo,
27
+ __spreadProps(__spreadValues({}, rest), {
28
+ ref: typoRef,
29
+ style: __spreadValues({
30
+ width: "100%",
31
+ textOverflow: "ellipsis",
32
+ overflow: "hidden",
33
+ wordBreak: "break-word",
34
+ WebkitLineClamp: lineClamp
35
+ }, style),
36
+ children: [
37
+ children,
38
+ "\uC544\uC544\uC544\uC559 \uC65C\uC774\uB7EC\uC2DC\uB294\uAC70\uC5D0\uC694"
39
+ ]
40
+ })
41
+ ) });
42
+ });
43
+ EllipsisTooltip.displayName = "EllipsisTooltip";
44
+
45
+ export {
46
+ EllipsisTooltip
47
+ };
48
+ //# sourceMappingURL=chunk-UGSJR77F.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp,\n ...style,\n }}\n >\n {children}\n 아아아앙 왜이러시는거에요\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AA+B3D,cACE,YADF;AAvBG,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAgD,YAAxC,YAAU,OAAO,UAZ3B,IAYkD,IAAT,iBAAS,IAAT,CAA/B,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,QAAS;AAAA;AAAA;AAAA,EAEZ,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,45 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { forwardRef, useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ var EllipsisTooltip = forwardRef((props, maybeRef) => {
17
+ const _a = props, { children, style } = _a, rest = __objRest(_a, ["children", "style"]);
18
+ const ref = useRef(null);
19
+ const typoRef = maybeRef || ref;
20
+ const [tooltipDisplay, setTooltipDisplay] = useState(
21
+ "none"
22
+ );
23
+ useEffect(() => {
24
+ }, []);
25
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
26
+ Typo,
27
+ __spreadProps(__spreadValues({}, rest), {
28
+ ref: typoRef,
29
+ style: __spreadValues({
30
+ width: "100%",
31
+ textOverflow: "ellipsis",
32
+ overflow: "hidden",
33
+ wordBreak: "break-word",
34
+ WebkitLineClamp: 2
35
+ }, style),
36
+ children
37
+ })
38
+ ) });
39
+ });
40
+ EllipsisTooltip.displayName = "EllipsisTooltip";
41
+
42
+ export {
43
+ EllipsisTooltip
44
+ };
45
+ //# sourceMappingURL=chunk-UQPA2QGC.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: 2,\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAqC,YAA7B,YAAU,MAZpB,IAYuC,IAAT,iBAAS,IAAT,CAApB,YAAU;AAClB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,46 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { forwardRef, useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ var EllipsisTooltip = forwardRef((props, maybeRef) => {
17
+ const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
18
+ const ref = useRef(null);
19
+ const typoRef = maybeRef || ref;
20
+ const [tooltipDisplay, setTooltipDisplay] = useState(
21
+ "none"
22
+ );
23
+ useEffect(() => {
24
+ }, []);
25
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
26
+ Typo,
27
+ __spreadProps(__spreadValues({}, rest), {
28
+ ref: typoRef,
29
+ style: __spreadValues({
30
+ width: "100%",
31
+ textOverflow: "ellipsis",
32
+ overflow: "hidden",
33
+ wordBreak: "break-word",
34
+ WebkitLineClamp: lineClamp,
35
+ display: "-webkit-box"
36
+ }, style),
37
+ children
38
+ })
39
+ ) });
40
+ });
41
+ EllipsisTooltip.displayName = "EllipsisTooltip";
42
+
43
+ export {
44
+ EllipsisTooltip
45
+ };
46
+ //# sourceMappingURL=chunk-V2AYMNSS.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp ,\n display:'-webkit-box',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAoD,YAA5C,YAAU,OAAO,YAAY,EAZvC,IAYsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,SAAQ;AAAA,SACL;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,46 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { forwardRef, useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ var EllipsisTooltip = forwardRef((props, maybeRef) => {
17
+ const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
18
+ const ref = useRef(null);
19
+ const typoRef = maybeRef || ref;
20
+ const [tooltipDisplay, setTooltipDisplay] = useState(
21
+ "none"
22
+ );
23
+ useEffect(() => {
24
+ }, []);
25
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
26
+ Typo,
27
+ __spreadProps(__spreadValues({}, rest), {
28
+ ref: typoRef,
29
+ style: __spreadValues({
30
+ width: "100%",
31
+ textOverflow: "ellipsis",
32
+ overflow: "hidden",
33
+ wordBreak: "break-word",
34
+ WebkitLineClamp: lineClamp,
35
+ display: "-webkit-box"
36
+ }, style),
37
+ children
38
+ })
39
+ ) });
40
+ });
41
+ EllipsisTooltip.displayName = "EllipsisTooltip";
42
+
43
+ export {
44
+ EllipsisTooltip
45
+ };
46
+ //# sourceMappingURL=chunk-VC2TT56B.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp,\n display:'-webkit-box',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAoD,YAA5C,YAAU,OAAO,YAAY,EAZvC,IAYsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,SAAQ;AAAA,SACL;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,119 @@
1
+ import {
2
+ Row
3
+ } from "./chunk-PBPRWY2V.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ Flex
9
+ } from "./chunk-25HMMI7R.js";
10
+ import {
11
+ TriangleArrowUpIcon
12
+ } from "./chunk-NDUKDKGB.js";
13
+ import {
14
+ TriangleArrowDownIcon
15
+ } from "./chunk-BSTJBBEX.js";
16
+
17
+ // src/molecules/expand-table/index.tsx
18
+ import {
19
+ flexRender,
20
+ getCoreRowModel,
21
+ useReactTable,
22
+ getSortedRowModel,
23
+ createColumnHelper
24
+ } from "@tanstack/react-table";
25
+ import { useMemo, useState } from "react";
26
+ import { jsx, jsxs } from "react/jsx-runtime";
27
+ function ExpandTable(props) {
28
+ const { data, columns, ExpandComp, placeholder, onRowClick } = props;
29
+ const [sorting, setSorting] = useState([]);
30
+ const { getRowModel, getHeaderGroups } = useReactTable({
31
+ data: data || [],
32
+ columns,
33
+ getCoreRowModel: getCoreRowModel(),
34
+ getSortedRowModel: getSortedRowModel(),
35
+ state: {
36
+ sorting
37
+ },
38
+ onSortingChange: setSorting
39
+ });
40
+ const gridColTemp = useMemo(() => {
41
+ return columns.map((col) => {
42
+ var _a;
43
+ if ((_a = col.meta) == null ? void 0 : _a.autoSize)
44
+ return "1fr";
45
+ return `${col.size || 150}px`;
46
+ }).join(" ");
47
+ }, [columns]);
48
+ const rowModels = getRowModel();
49
+ return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
50
+ /* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
51
+ "div",
52
+ {
53
+ className: "tr",
54
+ style: { gridTemplateColumns: gridColTemp },
55
+ children: headerGroup.headers.map((header) => {
56
+ const sortable = header.column.getCanSort();
57
+ const sortedState = header.column.getIsSorted();
58
+ return /* @__PURE__ */ jsx("div", { className: "th", children: /* @__PURE__ */ jsxs(
59
+ "button",
60
+ {
61
+ onClick: header.column.getToggleSortingHandler(),
62
+ style: sortable ? { cursor: "pointer" } : void 0,
63
+ type: "button",
64
+ children: [
65
+ /* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
66
+ header.column.columnDef.header,
67
+ header.getContext()
68
+ ) }),
69
+ sortable ? /* @__PURE__ */ jsxs(
70
+ Flex,
71
+ {
72
+ direction: "column",
73
+ style: { marginLeft: "var(--space-2)" },
74
+ children: [
75
+ /* @__PURE__ */ jsx(
76
+ TriangleArrowUpIcon,
77
+ {
78
+ color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
79
+ }
80
+ ),
81
+ /* @__PURE__ */ jsx(
82
+ TriangleArrowDownIcon,
83
+ {
84
+ color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
85
+ }
86
+ )
87
+ ]
88
+ }
89
+ ) : null
90
+ ]
91
+ }
92
+ ) }, header.id);
93
+ })
94
+ },
95
+ headerGroup.id
96
+ )) }),
97
+ /* @__PURE__ */ jsxs("div", { className: "tbody", children: [
98
+ rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
99
+ rowModels.rows.map((row) => {
100
+ return /* @__PURE__ */ jsx(
101
+ Row,
102
+ {
103
+ ExpandComp,
104
+ gridColTemp,
105
+ onRowClick,
106
+ row
107
+ },
108
+ `row_${row.id}`
109
+ );
110
+ })
111
+ ] })
112
+ ] });
113
+ }
114
+
115
+ export {
116
+ createColumnHelper,
117
+ ExpandTable
118
+ };
119
+ //# sourceMappingURL=chunk-VCOQG6JF.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type { ColumnDef, SortingState, RowData } from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n flexRender,\n getCoreRowModel,\n useReactTable,\n getSortedRowModel,\n createColumnHelper,\n} from '@tanstack/react-table';\nimport React, { useMemo, useState } from 'react';\nimport { Flex, Typo } from '../../atoms';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n /** 렌더할 데이터 배열 */\n data?: Datum[];\n /** 테이블 컬럼의 메타 데이터 */\n columns: ColumnDef<Datum>[];\n /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n ExpandComp?: ExpandComp<Datum>;\n /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n placeholder?: React.ReactNode;\n /** 행 클릭 시 실행할 콜백 */\n onRowClick?: OnRowClick<Datum>;\n rowStyle?: CSSProperties;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n props: ExpandTableProps<Datum>\n): React.ReactNode {\n const { data, columns, ExpandComp, placeholder, onRowClick } = props;\n\n const [sorting, setSorting] = useState<SortingState>([]);\n const { getRowModel, getHeaderGroups } = useReactTable({\n data: data || [],\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting,\n },\n onSortingChange: setSorting,\n });\n\n const gridColTemp = useMemo<string>(() => {\n return columns\n .map((col) => {\n if (col.meta?.autoSize) return '1fr';\n return `${col.size || 150}px`;\n })\n .join(' ');\n }, [columns]);\n\n const rowModels = getRowModel();\n\n return (\n <div className=\"expand-table\">\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div\n className=\"tr\"\n key={headerGroup.id}\n style={{ gridTemplateColumns: gridColTemp }}\n >\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n\n return (\n <div className=\"th\" key={header.id}>\n <button\n onClick={header.column.getToggleSortingHandler()}\n style={sortable ? { cursor: 'pointer' } : undefined}\n type=\"button\"\n >\n <Typo variant=\"body\">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </Typo>\n {sortable ? (\n <Flex\n direction=\"column\"\n style={{ marginLeft: 'var(--space-2)' }}\n >\n <TriangleArrowUpIcon\n color={\n sortedState === 'asc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n <TriangleArrowDownIcon\n color={\n sortedState === 'desc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n </Flex>\n ) : null}\n </button>\n </div>\n );\n })}\n </div>\n ))}\n </div>\n <div className=\"tbody\">\n {/* 데이터가 없을 시 표시되는 노드 */}\n {rowModels.rows.length === 0 && (\n <div className=\"tr\" key=\"expand_placeholder\">\n <Flex align=\"center\" justify=\"center\">\n {placeholder || (\n <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n 데이터가 없습니다\n </Typo>\n )}\n </Flex>\n </div>\n )}\n\n {/* 행을 렌더하는 로직 */}\n {rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\n gridColTemp={gridColTemp}\n key={`row_${row.id}`}\n onRowClick={onRowClick}\n row={row}\n />\n );\n })}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,SAAS,gBAAgB;AAuErB,cAOE,YAPF;AAhDb,SAAS,YACd,OACiB;AACjB,QAAM,EAAE,MAAM,SAAS,YAAY,aAAa,WAAW,IAAI;AAE/D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAC,CAAC;AACvD,QAAM,EAAE,aAAa,gBAAgB,IAAI,cAAc;AAAA,IACrD,MAAM,QAAQ,CAAC;AAAA,IACf;AAAA,IACA,iBAAiB,gBAAgB;AAAA,IACjC,mBAAmB,kBAAkB;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,EACnB,CAAC;AAED,QAAM,cAAc,QAAgB,MAAM;AACxC,WAAO,QACJ,IAAI,CAAC,QAAQ;AAnDpB;AAoDQ,WAAI,SAAI,SAAJ,mBAAU;AAAU,eAAO;AAC/B,aAAO,GAAG,IAAI,QAAQ,GAAG;AAAA,IAC3B,CAAC,EACA,KAAK,GAAG;AAAA,EACb,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,YAAY,YAAY;AAE9B,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA,wBAAC,SAAI,WAAU,SACZ,0BAAgB,EAAE,IAAI,CAAC,gBACtB;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QAEV,OAAO,EAAE,qBAAqB,YAAY;AAAA,QAEzC,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACnC,gBAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,gBAAM,cAAc,OAAO,OAAO,YAAY;AAE9C,iBACE,oBAAC,SAAI,WAAU,MACb;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,OAAO,OAAO,wBAAwB;AAAA,cAC/C,OAAO,WAAW,EAAE,QAAQ,UAAU,IAAI;AAAA,cAC1C,MAAK;AAAA,cAEL;AAAA,oCAAC,QAAK,SAAQ,QACX;AAAA,kBACC,OAAO,OAAO,UAAU;AAAA,kBACxB,OAAO,WAAW;AAAA,gBACpB,GACF;AAAA,gBACC,WACC;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,iBAAiB;AAAA,oBAEtC;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,OACE,gBAAgB,QACZ,mBACA;AAAA;AAAA,sBAER;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,OACE,gBAAgB,SACZ,mBACA;AAAA;AAAA,sBAER;AAAA;AAAA;AAAA,gBACF,IACE;AAAA;AAAA;AAAA,UACN,KAjCuB,OAAO,EAkChC;AAAA,QAEJ,CAAC;AAAA;AAAA,MA5CI,YAAY;AAAA,IA6CnB,CACD,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,SAEZ;AAAA,gBAAU,KAAK,WAAW,KACzB,oBAAC,SAAI,WAAU,MACb,8BAAC,QAAK,OAAM,UAAS,SAAQ,UAC1B,yBACC,oBAAC,QAAK,OAAM,QAAO,IAAG,KAAI,IAAG,KAAI,SAAQ,QAAO,+DAEhD,GAEJ,KAPsB,oBAQxB;AAAA,MAID,UAAU,KAAK,IAAI,CAAC,QAAQ;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK,OAAO,IAAI,EAAE;AAAA,QAGpB;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
@@ -0,0 +1,59 @@
1
+ import {
2
+ Tooltip
3
+ } from "./chunk-ACVANQJ4.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-O3XTRD7R.js";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-N552FDTV.js";
12
+
13
+ // src/atoms/ellipsis-tooltip.tsx
14
+ import { useEffect, useRef, useState } from "react";
15
+ import { jsx } from "react/jsx-runtime";
16
+ function EllipsisTooltip(props) {
17
+ const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
18
+ const ref = useRef(null);
19
+ const [tooltipDisplay, setTooltipDisplay] = useState(
20
+ "none"
21
+ );
22
+ useEffect(() => {
23
+ var _a2, _b;
24
+ const mouseOver = () => {
25
+ if (ref.current) {
26
+ const typo = ref.current;
27
+ if (typo.scrollWidth > typo.clientWidth) {
28
+ setTooltipDisplay("block");
29
+ }
30
+ }
31
+ };
32
+ const mouseOut = () => {
33
+ setTooltipDisplay("none");
34
+ };
35
+ (_a2 = ref.current) == null ? void 0 : _a2.addEventListener("mouseenter", mouseOver);
36
+ (_b = ref.current) == null ? void 0 : _b.addEventListener("mouseleave", mouseOut);
37
+ }, [ref]);
38
+ return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
39
+ Typo,
40
+ __spreadProps(__spreadValues({}, rest), {
41
+ ref,
42
+ style: __spreadValues({
43
+ width: "100%",
44
+ textOverflow: "ellipsis",
45
+ overflow: "hidden",
46
+ WebkitLineClamp: lineClamp,
47
+ display: "-webkit-box",
48
+ WebkitBoxOrient: "vertical",
49
+ wordBreak: "break-word"
50
+ }, style),
51
+ children
52
+ })
53
+ ) });
54
+ }
55
+
56
+ export {
57
+ EllipsisTooltip
58
+ };
59
+ //# sourceMappingURL=chunk-VOR32EFU.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n \n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n const mouseOver = ():void=>{\n if (ref.current) {\n const typo = ref.current;\n if (typo.scrollWidth > typo.clientWidth) {\n setTooltipDisplay('block');\n }\n }\n }\n\n const mouseOut = ():void=>{\n setTooltipDisplay('none');\n }\n\n ref.current?.addEventListener('mouseenter',mouseOver);\n ref.current?.addEventListener('mouseleave',mouseOut);\n }, [ref]);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={ref}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n WebkitLineClamp: lineClamp,\n\n display:'-webkit-box',\n WebkitBoxOrient: 'vertical',\n wordBreak: 'break-word',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n}"],"mappings":";;;;;;;;;;;;;AAAA,SAA4B,WAAW,QAAQ,gBAAgB;AAoCzD;AA5BC,SAAS,gBAAgB,OAA8C;AAC5E,QAAoD,YAA5C,YAAU,OAAO,YAAY,EATvC,IASsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AAExC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAhBlB,QAAAA,KAAA;AAiBI,UAAM,YAAY,MAAS;AACzB,UAAI,IAAI,SAAS;AACf,cAAM,OAAO,IAAI;AACjB,YAAI,KAAK,cAAc,KAAK,aAAa;AACvC,4BAAkB,OAAO;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAAW,MAAS;AACxB,wBAAkB,MAAM;AAAA,IAC1B;AAED,KAAAA,MAAA,IAAI,YAAJ,gBAAAA,IAAa,iBAAiB,cAAa;AAC3C,cAAI,YAAJ,mBAAa,iBAAiB,cAAa;AAAA,EAC5C,GAAG,CAAC,GAAG,CAAC;AAER,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,iBAAiB;AAAA,QAEjB,SAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,WAAW;AAAA,SACR;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ;","names":["_a"]}