@tipp/ui 1.0.46 → 1.0.48

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 (82) hide show
  1. package/dist/atoms/card.cjs +3 -1
  2. package/dist/atoms/card.cjs.map +1 -1
  3. package/dist/atoms/card.js +1 -1
  4. package/dist/atoms/drawer.js +2 -2
  5. package/dist/atoms/field-error-wrapper.js +2 -2
  6. package/dist/atoms/index.cjs +3 -1
  7. package/dist/atoms/index.cjs.map +1 -1
  8. package/dist/atoms/index.js +55 -55
  9. package/dist/atoms/pagination.js +3 -3
  10. package/dist/chunk-27COZ7JE.js +123 -0
  11. package/dist/chunk-27COZ7JE.js.map +1 -0
  12. package/dist/chunk-3HCVB462.js +123 -0
  13. package/dist/chunk-3HCVB462.js.map +1 -0
  14. package/dist/chunk-3N6DZ5K5.js +72 -0
  15. package/dist/chunk-3N6DZ5K5.js.map +1 -0
  16. package/dist/chunk-3TMEAHAO.js +123 -0
  17. package/dist/chunk-3TMEAHAO.js.map +1 -0
  18. package/dist/chunk-7TKVFGWB.js +72 -0
  19. package/dist/chunk-7TKVFGWB.js.map +1 -0
  20. package/dist/chunk-ANDMT45Z.js +123 -0
  21. package/dist/chunk-ANDMT45Z.js.map +1 -0
  22. package/dist/chunk-AUICOKM7.js +123 -0
  23. package/dist/chunk-AUICOKM7.js.map +1 -0
  24. package/dist/chunk-BZTI5I3W.js +123 -0
  25. package/dist/chunk-BZTI5I3W.js.map +1 -0
  26. package/dist/chunk-GSYJMQZP.js +123 -0
  27. package/dist/chunk-GSYJMQZP.js.map +1 -0
  28. package/dist/chunk-HMHRKLU7.js +123 -0
  29. package/dist/chunk-HMHRKLU7.js.map +1 -0
  30. package/dist/chunk-IQ7JV3NX.js +72 -0
  31. package/dist/chunk-IQ7JV3NX.js.map +1 -0
  32. package/dist/chunk-IUT2HS6J.js +130 -0
  33. package/dist/chunk-IUT2HS6J.js.map +0 -0
  34. package/dist/chunk-JEQAAME2.js +123 -0
  35. package/dist/chunk-JEQAAME2.js.map +1 -0
  36. package/dist/chunk-KFSFQ47B.js +123 -0
  37. package/dist/chunk-KFSFQ47B.js.map +1 -0
  38. package/dist/chunk-R6BKHIPF.js +123 -0
  39. package/dist/chunk-R6BKHIPF.js.map +1 -0
  40. package/dist/chunk-RWVITRNU.js +123 -0
  41. package/dist/chunk-RWVITRNU.js.map +1 -0
  42. package/dist/chunk-TVXYMNVM.js +123 -0
  43. package/dist/chunk-TVXYMNVM.js.map +1 -0
  44. package/dist/chunk-UVKNLJDZ.js +44 -0
  45. package/dist/chunk-UVKNLJDZ.js.map +1 -0
  46. package/dist/chunk-UXJHGE4F.js +124 -0
  47. package/dist/chunk-UXJHGE4F.js.map +1 -0
  48. package/dist/chunk-VEUQBCIM.js +72 -0
  49. package/dist/chunk-VEUQBCIM.js.map +1 -0
  50. package/dist/chunk-W26QXSFH.js +124 -0
  51. package/dist/chunk-W26QXSFH.js.map +1 -0
  52. package/dist/chunk-WEY4HIWE.js +123 -0
  53. package/dist/chunk-WEY4HIWE.js.map +1 -0
  54. package/dist/chunk-ZNZU4IY4.js +123 -0
  55. package/dist/chunk-ZNZU4IY4.js.map +1 -0
  56. package/dist/index.cjs +14 -6
  57. package/dist/index.cjs.map +1 -1
  58. package/dist/index.css +22 -9
  59. package/dist/index.css.map +1 -1
  60. package/dist/index.js +72 -72
  61. package/dist/molecules/date-picker/index.js +2 -2
  62. package/dist/molecules/expand-table/index.cjs +11 -5
  63. package/dist/molecules/expand-table/index.cjs.map +1 -1
  64. package/dist/molecules/expand-table/index.js +26 -26
  65. package/dist/molecules/expand-table/row.cjs +6 -4
  66. package/dist/molecules/expand-table/row.cjs.map +1 -1
  67. package/dist/molecules/expand-table/row.d.cts +1 -0
  68. package/dist/molecules/expand-table/row.d.ts +1 -0
  69. package/dist/molecules/expand-table/row.js +25 -25
  70. package/dist/molecules/index.cjs +11 -5
  71. package/dist/molecules/index.cjs.map +1 -1
  72. package/dist/molecules/index.js +30 -30
  73. package/dist/molecules/navigation.js +25 -25
  74. package/dist/types/react-table.d.cjs.map +1 -1
  75. package/dist/types/react-table.d.d.cts +2 -0
  76. package/dist/types/react-table.d.d.ts +2 -0
  77. package/dist/types/react-table.d.js.map +1 -1
  78. package/package.json +1 -1
  79. package/src/atoms/card.tsx +1 -0
  80. package/src/molecules/expand-table/index.tsx +5 -2
  81. package/src/molecules/expand-table/row.tsx +6 -2
  82. package/src/types/react-table.d.ts +2 -0
package/dist/index.js CHANGED
@@ -1,31 +1,36 @@
1
1
  import {
2
2
  useThemeContext
3
3
  } from "./chunk-MMGP4GEQ.js";
4
- import {
5
- uiProps
6
- } from "./chunk-NVKNDAIN.js";
7
- import "./chunk-PSINRHYW.js";
8
- import {
9
- EchartDefaultProps
10
- } from "./chunk-2QFSCWES.js";
11
- import {
12
- HorizontalBarChart
13
- } from "./chunk-SGMO4KBC.js";
14
4
  import "./chunk-KHHXN3CH.js";
15
5
  import {
16
6
  Navigation
17
- } from "./chunk-RKLEKAON.js";
7
+ } from "./chunk-7A7J457W.js";
18
8
  import {
19
- DatePicker
20
- } from "./chunk-Z2PA5PMV.js";
9
+ uiProps
10
+ } from "./chunk-NVKNDAIN.js";
21
11
  import {
22
12
  ExpandTable,
23
13
  createColumnHelper
24
- } from "./chunk-2WPHYT3E.js";
25
- import "./chunk-XHNYNSZZ.js";
14
+ } from "./chunk-WEY4HIWE.js";
15
+ import "./chunk-7TKVFGWB.js";
16
+ import {
17
+ DatePicker
18
+ } from "./chunk-G4FN6FJG.js";
26
19
  import "./chunk-BSTJBBEX.js";
27
20
  import "./chunk-NDUKDKGB.js";
28
21
  import "./chunk-2ANGYYEV.js";
22
+ import {
23
+ TextField
24
+ } from "./chunk-JPIZP2PZ.js";
25
+ import {
26
+ Separator
27
+ } from "./chunk-HYITAA4J.js";
28
+ import {
29
+ Skeleton
30
+ } from "./chunk-5H3YPCZK.js";
31
+ import {
32
+ Spinner
33
+ } from "./chunk-FR2GDOU2.js";
29
34
  import {
30
35
  Strong
31
36
  } from "./chunk-74DX4CU7.js";
@@ -42,8 +47,14 @@ import {
42
47
  TextArea
43
48
  } from "./chunk-ILRUXI2E.js";
44
49
  import {
45
- TextField
46
- } from "./chunk-JPIZP2PZ.js";
50
+ Quote
51
+ } from "./chunk-YO3BQW6S.js";
52
+ import {
53
+ RadioCards
54
+ } from "./chunk-6IVCARWS.js";
55
+ import {
56
+ RadioGroup
57
+ } from "./chunk-6DJOIRMF.js";
47
58
  import {
48
59
  Radio
49
60
  } from "./chunk-FPD73OHW.js";
@@ -60,14 +71,8 @@ import {
60
71
  Select
61
72
  } from "./chunk-3JRNKBMN.js";
62
73
  import {
63
- Separator
64
- } from "./chunk-HYITAA4J.js";
65
- import {
66
- Skeleton
67
- } from "./chunk-5H3YPCZK.js";
68
- import {
69
- Spinner
70
- } from "./chunk-FR2GDOU2.js";
74
+ Inset
75
+ } from "./chunk-XQOL7UBI.js";
71
76
  import {
72
77
  Kbd
73
78
  } from "./chunk-TULWX7D6.js";
@@ -76,7 +81,7 @@ import {
76
81
  } from "./chunk-XQOZWYUA.js";
77
82
  import {
78
83
  Pagination
79
- } from "./chunk-FQYPUIFX.js";
84
+ } from "./chunk-HXJPG3ZO.js";
80
85
  import {
81
86
  Popover
82
87
  } from "./chunk-5AVBYDPB.js";
@@ -84,14 +89,23 @@ import {
84
89
  Progress
85
90
  } from "./chunk-365QMK4D.js";
86
91
  import {
87
- Quote
88
- } from "./chunk-YO3BQW6S.js";
92
+ EllipsisTooltip
93
+ } from "./chunk-4IKPNQV5.js";
89
94
  import {
90
- RadioCards
91
- } from "./chunk-6IVCARWS.js";
95
+ Tooltip
96
+ } from "./chunk-ACVANQJ4.js";
92
97
  import {
93
- RadioGroup
94
- } from "./chunk-6DJOIRMF.js";
98
+ Em
99
+ } from "./chunk-2DZ2Y3JI.js";
100
+ import {
101
+ FieldErrorWrapper
102
+ } from "./chunk-CNQ7RNNY.js";
103
+ import {
104
+ Typo
105
+ } from "./chunk-O3XTRD7R.js";
106
+ import {
107
+ Flex
108
+ } from "./chunk-25HMMI7R.js";
95
109
  import {
96
110
  Form
97
111
  } from "./chunk-2CVXGGI5.js";
@@ -105,8 +119,14 @@ import {
105
119
  HoverCard
106
120
  } from "./chunk-O3T3TM3V.js";
107
121
  import {
108
- Inset
109
- } from "./chunk-XQOL7UBI.js";
122
+ Checkbox
123
+ } from "./chunk-JEHDCZQU.js";
124
+ import {
125
+ Code
126
+ } from "./chunk-OHMOP5PV.js";
127
+ import {
128
+ Collapse
129
+ } from "./chunk-KGLIAFTI.js";
110
130
  import {
111
131
  Container
112
132
  } from "./chunk-Q37G2GS6.js";
@@ -121,14 +141,14 @@ import {
121
141
  Drawer,
122
142
  Root,
123
143
  Trigger
124
- } from "./chunk-NBJOYJAF.js";
125
- import {
126
- ThemeProvider
127
- } from "./chunk-BVBX6IJ3.js";
144
+ } from "./chunk-ONYSO7Y2.js";
128
145
  import {
129
146
  ToastContainer,
130
147
  toast
131
148
  } from "./chunk-NJ2U2TVS.js";
149
+ import {
150
+ ThemeProvider
151
+ } from "./chunk-BVBX6IJ3.js";
132
152
  import {
133
153
  IconButton
134
154
  } from "./chunk-O3DNDMV3.js";
@@ -136,23 +156,14 @@ import {
136
156
  DropdownMenu
137
157
  } from "./chunk-4WFMOFN2.js";
138
158
  import {
139
- EllipsisTooltip
140
- } from "./chunk-4IKPNQV5.js";
141
- import {
142
- Tooltip
143
- } from "./chunk-ACVANQJ4.js";
144
- import {
145
- Em
146
- } from "./chunk-2DZ2Y3JI.js";
147
- import {
148
- FieldErrorWrapper
149
- } from "./chunk-CHHLIPDN.js";
159
+ Badge
160
+ } from "./chunk-ALOPZ54P.js";
150
161
  import {
151
- Flex
152
- } from "./chunk-25HMMI7R.js";
162
+ Blockquote
163
+ } from "./chunk-YGL6SWKN.js";
153
164
  import {
154
- Typo
155
- } from "./chunk-O3XTRD7R.js";
165
+ Box
166
+ } from "./chunk-4Y5BEXVN.js";
156
167
  import {
157
168
  Button
158
169
  } from "./chunk-AQX7DQLI.js";
@@ -161,22 +172,13 @@ import {
161
172
  } from "./chunk-B6XJN6EC.js";
162
173
  import {
163
174
  Card
164
- } from "./chunk-CAIVA7UA.js";
175
+ } from "./chunk-UVKNLJDZ.js";
165
176
  import {
166
177
  CheckboxCards
167
178
  } from "./chunk-MIMJ7LON.js";
168
179
  import {
169
180
  CheckboxGroup
170
181
  } from "./chunk-IQEEPHOY.js";
171
- import {
172
- Checkbox
173
- } from "./chunk-JEHDCZQU.js";
174
- import {
175
- Code
176
- } from "./chunk-OHMOP5PV.js";
177
- import {
178
- Collapse
179
- } from "./chunk-KGLIAFTI.js";
180
182
  import {
181
183
  BarChartIcon,
182
184
  BookmarkFilledIcon,
@@ -205,6 +207,13 @@ import {
205
207
  PlusIcon,
206
208
  TrashIcon
207
209
  } from "./chunk-TSVWEPRP.js";
210
+ import "./chunk-PSINRHYW.js";
211
+ import {
212
+ EchartDefaultProps
213
+ } from "./chunk-2QFSCWES.js";
214
+ import {
215
+ HorizontalBarChart
216
+ } from "./chunk-SGMO4KBC.js";
208
217
  import {
209
218
  AlertDialog
210
219
  } from "./chunk-J242TTFH.js";
@@ -214,15 +223,6 @@ import {
214
223
  import {
215
224
  Avatar
216
225
  } from "./chunk-CZEGRZBK.js";
217
- import {
218
- Badge
219
- } from "./chunk-ALOPZ54P.js";
220
- import {
221
- Blockquote
222
- } from "./chunk-YGL6SWKN.js";
223
- import {
224
- Box
225
- } from "./chunk-4Y5BEXVN.js";
226
226
  import "./chunk-N552FDTV.js";
227
227
  export {
228
228
  AlertDialog,
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  DatePicker
3
- } from "../../chunk-Z2PA5PMV.js";
3
+ } from "../../chunk-G4FN6FJG.js";
4
+ import "../../chunk-25HMMI7R.js";
4
5
  import "../../chunk-HLOY6BIP.js";
5
6
  import "../../chunk-O3DNDMV3.js";
6
- import "../../chunk-25HMMI7R.js";
7
7
  import "../../chunk-TSVWEPRP.js";
8
8
  import "../../chunk-N552FDTV.js";
9
9
  export {
@@ -199,19 +199,21 @@ function Row(props) {
199
199
  style: { gridTemplateColumns: gridColTemp },
200
200
  type: "button",
201
201
  children: row.getVisibleCells().map((cell) => {
202
- var _a, _b;
202
+ var _a, _b, _c;
203
203
  const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
204
+ const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
204
205
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
205
206
  "div",
206
207
  {
207
208
  className: "td",
208
209
  style: {
209
- minWidth: autoSize ? void 0 : cell.column.getSize(),
210
- flexGrow: autoSize ? 1 : void 0
210
+ // width: autoSize ? undefined : cell.column.getSize(),
211
+ flexGrow: autoSize ? 1 : void 0,
212
+ justifyContent
211
213
  },
212
214
  children: [
213
215
  (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
214
- ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
216
+ ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
215
217
  cell.column.columnDef.meta.OpenBtn,
216
218
  {
217
219
  data: row.original,
@@ -238,6 +240,7 @@ function Row(props) {
238
240
  var import_jsx_runtime6 = require("react/jsx-runtime");
239
241
  function ExpandTable(props) {
240
242
  const { data, columns, ExpandComp, placeholder, onRowClick } = props;
243
+ const defaultAlign = "left";
241
244
  const [sorting, setSorting] = (0, import_react4.useState)([]);
242
245
  const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
243
246
  data: data || [],
@@ -265,9 +268,11 @@ function ExpandTable(props) {
265
268
  className: "tr",
266
269
  style: { gridTemplateColumns: gridColTemp },
267
270
  children: headerGroup.headers.map((header) => {
271
+ var _a;
268
272
  const sortable = header.column.getCanSort();
269
273
  const sortedState = header.column.getIsSorted();
270
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
274
+ const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
275
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
271
276
  "button",
272
277
  {
273
278
  onClick: header.column.getToggleSortingHandler(),
@@ -313,6 +318,7 @@ function ExpandTable(props) {
313
318
  Row,
314
319
  {
315
320
  ExpandComp,
321
+ defaultAlign,
316
322
  gridColTemp,
317
323
  onRowClick,
318
324
  row
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/molecules/expand-table/index.tsx","../../../src/atoms/flex.tsx","../../../src/atoms/typo.tsx","../../../src/atoms/collapse.tsx","../../../src/icons/down.tsx","../../../src/icons/up.tsx","../../../src/molecules/expand-table/row.tsx"],"sourcesContent":["import type {\n ColumnDef,\n SortingState,\n RowData,\n Row as RowType,\n} 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, RowType as Row };\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","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n switch (variant) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowDownIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowDownIcon.displayName = 'ArrowDownIcon';\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowUpIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowUpIcon.displayName = 'ArrowUpIcon';\n","import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n minWidth: autoSize ? undefined : cell.column.getSize(),\n flexGrow: autoSize ? 1 : undefined,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {cell.column.columnDef.meta?.OpenBtn ? (\n <cell.column.columnDef.meta.OpenBtn\n data={row.original}\n open={open}\n setIsOpen={setOpen}\n />\n ) : null}\n </div>\n );\n })}\n </button>\n {ExpandComp ? (\n <Collapse open={open} >\n <div className=\"expand-comp-wrapper\">\n <ExpandComp row={row} />\n </div>\n </Collapse>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":["import_react_table","import_react","import_themes","RadixText","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../../src/molecules/expand-table/index.tsx","../../../src/atoms/flex.tsx","../../../src/atoms/typo.tsx","../../../src/atoms/collapse.tsx","../../../src/icons/down.tsx","../../../src/icons/up.tsx","../../../src/molecules/expand-table/row.tsx"],"sourcesContent":["import type {\n ColumnDef,\n SortingState,\n RowData,\n Row as RowType,\n} 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, RowType as Row };\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 const defaultAlign = 'left';\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 const justifyContent =\n header.column.columnDef.meta?.align || defaultAlign;\n\n return (\n <div className={`${justifyContent} 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 defaultAlign={defaultAlign}\n gridColTemp={gridColTemp}\n key={`row_${row.id}`}\n onRowClick={onRowClick}\n row={row}\n />\n );\n })}\n </div>\n </div>\n );\n}\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n switch (variant) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowDownIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowDownIcon.displayName = 'ArrowDownIcon';\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowUpIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowUpIcon.displayName = 'ArrowUpIcon';\n","import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n defaultAlign: 'left' | 'right' | 'center';\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n const justifyContent =\n cell.column.columnDef.meta?.align || props.defaultAlign;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n // width: autoSize ? undefined : cell.column.getSize(),\n flexGrow: autoSize ? 1 : undefined,\n justifyContent,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {cell.column.columnDef.meta?.OpenBtn ? (\n <cell.column.columnDef.meta.OpenBtn\n data={row.original}\n open={open}\n setIsOpen={setOpen}\n />\n ) : null}\n </div>\n );\n })}\n </button>\n {ExpandComp ? (\n <Collapse open={open}>\n <div className=\"expand-comp-wrapper\">\n <ExpandComp row={row} />\n </div>\n </Collapse>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":["import_react_table","import_react","import_themes","RadixText","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
@@ -1,67 +1,67 @@
1
1
  import {
2
2
  ExpandTable,
3
3
  createColumnHelper
4
- } from "../../chunk-2WPHYT3E.js";
5
- import "../../chunk-XHNYNSZZ.js";
4
+ } from "../../chunk-WEY4HIWE.js";
5
+ import "../../chunk-7TKVFGWB.js";
6
6
  import "../../chunk-BSTJBBEX.js";
7
7
  import "../../chunk-NDUKDKGB.js";
8
8
  import "../../chunk-2ANGYYEV.js";
9
+ import "../../chunk-JPIZP2PZ.js";
10
+ import "../../chunk-HYITAA4J.js";
11
+ import "../../chunk-5H3YPCZK.js";
12
+ import "../../chunk-FR2GDOU2.js";
9
13
  import "../../chunk-74DX4CU7.js";
10
14
  import "../../chunk-OYM4XCHQ.js";
11
15
  import "../../chunk-YJ7ZFOYL.js";
12
16
  import "../../chunk-5ZITU5L7.js";
13
17
  import "../../chunk-ILRUXI2E.js";
14
- import "../../chunk-JPIZP2PZ.js";
18
+ import "../../chunk-YO3BQW6S.js";
19
+ import "../../chunk-6IVCARWS.js";
20
+ import "../../chunk-6DJOIRMF.js";
15
21
  import "../../chunk-FPD73OHW.js";
16
22
  import "../../chunk-ZKZDVS7G.js";
17
23
  import "../../chunk-MUNMDHRF.js";
18
24
  import "../../chunk-TVDKGMBI.js";
19
25
  import "../../chunk-3JRNKBMN.js";
20
- import "../../chunk-HYITAA4J.js";
21
- import "../../chunk-5H3YPCZK.js";
22
- import "../../chunk-FR2GDOU2.js";
26
+ import "../../chunk-XQOL7UBI.js";
23
27
  import "../../chunk-TULWX7D6.js";
24
28
  import "../../chunk-XQOZWYUA.js";
25
- import "../../chunk-FQYPUIFX.js";
29
+ import "../../chunk-HXJPG3ZO.js";
26
30
  import "../../chunk-5AVBYDPB.js";
27
31
  import "../../chunk-365QMK4D.js";
28
- import "../../chunk-YO3BQW6S.js";
29
- import "../../chunk-6IVCARWS.js";
30
- import "../../chunk-6DJOIRMF.js";
32
+ import "../../chunk-4IKPNQV5.js";
33
+ import "../../chunk-ACVANQJ4.js";
34
+ import "../../chunk-2DZ2Y3JI.js";
35
+ import "../../chunk-CNQ7RNNY.js";
36
+ import "../../chunk-O3XTRD7R.js";
37
+ import "../../chunk-25HMMI7R.js";
31
38
  import "../../chunk-2CVXGGI5.js";
32
39
  import "../../chunk-EGEQY3KT.js";
33
40
  import "../../chunk-HLOY6BIP.js";
34
41
  import "../../chunk-O3T3TM3V.js";
35
- import "../../chunk-XQOL7UBI.js";
42
+ import "../../chunk-JEHDCZQU.js";
43
+ import "../../chunk-OHMOP5PV.js";
44
+ import "../../chunk-KGLIAFTI.js";
36
45
  import "../../chunk-Q37G2GS6.js";
37
46
  import "../../chunk-VTJZMOSP.js";
38
47
  import "../../chunk-P6B2PNYI.js";
39
- import "../../chunk-NBJOYJAF.js";
40
- import "../../chunk-BVBX6IJ3.js";
48
+ import "../../chunk-ONYSO7Y2.js";
41
49
  import "../../chunk-NJ2U2TVS.js";
50
+ import "../../chunk-BVBX6IJ3.js";
42
51
  import "../../chunk-O3DNDMV3.js";
43
52
  import "../../chunk-4WFMOFN2.js";
44
- import "../../chunk-4IKPNQV5.js";
45
- import "../../chunk-ACVANQJ4.js";
46
- import "../../chunk-2DZ2Y3JI.js";
47
- import "../../chunk-CHHLIPDN.js";
48
- import "../../chunk-25HMMI7R.js";
49
- import "../../chunk-O3XTRD7R.js";
53
+ import "../../chunk-ALOPZ54P.js";
54
+ import "../../chunk-YGL6SWKN.js";
55
+ import "../../chunk-4Y5BEXVN.js";
50
56
  import "../../chunk-AQX7DQLI.js";
51
57
  import "../../chunk-B6XJN6EC.js";
52
- import "../../chunk-CAIVA7UA.js";
58
+ import "../../chunk-UVKNLJDZ.js";
53
59
  import "../../chunk-MIMJ7LON.js";
54
60
  import "../../chunk-IQEEPHOY.js";
55
- import "../../chunk-JEHDCZQU.js";
56
- import "../../chunk-OHMOP5PV.js";
57
- import "../../chunk-KGLIAFTI.js";
58
61
  import "../../chunk-TSVWEPRP.js";
59
62
  import "../../chunk-J242TTFH.js";
60
63
  import "../../chunk-EAXUQEO5.js";
61
64
  import "../../chunk-CZEGRZBK.js";
62
- import "../../chunk-ALOPZ54P.js";
63
- import "../../chunk-YGL6SWKN.js";
64
- import "../../chunk-4Y5BEXVN.js";
65
65
  import "../../chunk-N552FDTV.js";
66
66
  export {
67
67
  ExpandTable,
@@ -71,19 +71,21 @@ function Row(props) {
71
71
  style: { gridTemplateColumns: gridColTemp },
72
72
  type: "button",
73
73
  children: row.getVisibleCells().map((cell) => {
74
- var _a, _b;
74
+ var _a, _b, _c;
75
75
  const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
76
+ const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
76
77
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
77
78
  "div",
78
79
  {
79
80
  className: "td",
80
81
  style: {
81
- minWidth: autoSize ? void 0 : cell.column.getSize(),
82
- flexGrow: autoSize ? 1 : void 0
82
+ // width: autoSize ? undefined : cell.column.getSize(),
83
+ flexGrow: autoSize ? 1 : void 0,
84
+ justifyContent
83
85
  },
84
86
  children: [
85
87
  (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
86
- ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
88
+ ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
87
89
  cell.column.columnDef.meta.OpenBtn,
88
90
  {
89
91
  data: row.original,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/molecules/expand-table/row.tsx","../../../src/atoms/collapse.tsx"],"sourcesContent":["import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n minWidth: autoSize ? undefined : cell.column.getSize(),\n flexGrow: autoSize ? 1 : undefined,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {cell.column.columnDef.meta?.OpenBtn ? (\n <cell.column.columnDef.meta.OpenBtn\n data={row.original}\n open={open}\n setIsOpen={setOpen}\n />\n ) : null}\n </div>\n );\n })}\n </button>\n {ExpandComp ? (\n <Collapse open={open} >\n <div className=\"expand-comp-wrapper\">\n <ExpandComp row={row} />\n </div>\n </Collapse>\n ) : null}\n </div>\n );\n}\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIO;AACP,IAAAA,gBAA6C;;;ACL7C,mBAAmD;AA+B/C;AArBG,SAAS,SAAS,OAAuC;AAC9D,QAAM,EAAE,UAAU,eAAe,IAAI,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,MAAM;AACrC,WAAO,MAAM,QAAQ,MAAM,eAAe;AAAA,EAC5C,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AAAW;AAC9B,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAClB,QAAI,QAAQ,MAAM,YAAY,OAC1B,GAAG,IAAI,QAAQ,YAAY,OAC3B;AAAA,EACN,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SACE,4CAAC,SAAI,WAAU,YAAW,KACvB,UACH;AAEJ;;;ADUY,IAAAC,sBAAA;AA3BL,SAAS,IACd,OACiB;AACjB,QAAM,EAAE,KAAK,YAAY,YAAY,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AAEtC,QAAM,iBAAa,2BAAY,MAAM;AAxBvC;AAyBI,gBAAM,eAAN,+BAAmB,IAAI;AACvB,YAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,cAAc,aAAa,eAAe,EAAE;AAAA,MAGvD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YAEV,SAAS;AAAA,YACT,OAAO,EAAE,qBAAqB,YAAY;AAAA,YAC1C,MAAK;AAAA,YAEJ,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AAzC7C;AA0CU,oBAAM,YAAW,UAAK,OAAO,UAAU,SAAtB,mBAA4B;AAE7C,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBAEV,OAAO;AAAA,oBACL,UAAU,WAAW,SAAY,KAAK,OAAO,QAAQ;AAAA,oBACrD,UAAU,WAAW,IAAI;AAAA,kBAC3B;AAAA,kBAEC;AAAA,uDAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA,sBACxD,UAAK,OAAO,UAAU,SAAtB,mBAA4B,WAC3B;AAAA,sBAAC,KAAK,OAAO,UAAU,KAAK;AAAA,sBAA3B;AAAA,wBACC,MAAM,IAAI;AAAA,wBACV;AAAA,wBACA,WAAW;AAAA;AAAA,oBACb,IACE;AAAA;AAAA;AAAA,gBAbC,KAAK;AAAA,cAcZ;AAAA,YAEJ,CAAC;AAAA;AAAA,UA3BI,MAAM,IAAI,EAAE;AAAA,QA4BnB;AAAA,QACC,aACC,6CAAC,YAAS,MACR,uDAAC,SAAI,WAAU,uBACb,uDAAC,cAAW,KAAU,GACxB,GACF,IACE;AAAA;AAAA;AAAA,IAvCC,cAAc,IAAI,EAAE;AAAA,EAwC3B;AAEJ;","names":["import_react","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../../src/molecules/expand-table/row.tsx","../../../src/atoms/collapse.tsx"],"sourcesContent":["import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n defaultAlign: 'left' | 'right' | 'center';\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n const justifyContent =\n cell.column.columnDef.meta?.align || props.defaultAlign;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n // width: autoSize ? undefined : cell.column.getSize(),\n flexGrow: autoSize ? 1 : undefined,\n justifyContent,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {cell.column.columnDef.meta?.OpenBtn ? (\n <cell.column.columnDef.meta.OpenBtn\n data={row.original}\n open={open}\n setIsOpen={setOpen}\n />\n ) : null}\n </div>\n );\n })}\n </button>\n {ExpandComp ? (\n <Collapse open={open}>\n <div className=\"expand-comp-wrapper\">\n <ExpandComp row={row} />\n </div>\n </Collapse>\n ) : null}\n </div>\n );\n}\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIO;AACP,IAAAA,gBAA6C;;;ACL7C,mBAAmD;AA+B/C;AArBG,SAAS,SAAS,OAAuC;AAC9D,QAAM,EAAE,UAAU,eAAe,IAAI,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,MAAM;AACrC,WAAO,MAAM,QAAQ,MAAM,eAAe;AAAA,EAC5C,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AAAW;AAC9B,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAClB,QAAI,QAAQ,MAAM,YAAY,OAC1B,GAAG,IAAI,QAAQ,YAAY,OAC3B;AAAA,EACN,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SACE,4CAAC,SAAI,WAAU,YAAW,KACvB,UACH;AAEJ;;;ADaY,IAAAC,sBAAA;AA7BL,SAAS,IACd,OACiB;AACjB,QAAM,EAAE,KAAK,YAAY,YAAY,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AAEtC,QAAM,iBAAa,2BAAY,MAAM;AAzBvC;AA0BI,gBAAM,eAAN,+BAAmB,IAAI;AACvB,YAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,cAAc,aAAa,eAAe,EAAE;AAAA,MAGvD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YAEV,SAAS;AAAA,YACT,OAAO,EAAE,qBAAqB,YAAY;AAAA,YAC1C,MAAK;AAAA,YAEJ,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AA1C7C;AA2CU,oBAAM,YAAW,UAAK,OAAO,UAAU,SAAtB,mBAA4B;AAC7C,oBAAM,mBACJ,UAAK,OAAO,UAAU,SAAtB,mBAA4B,UAAS,MAAM;AAE7C,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBAEV,OAAO;AAAA;AAAA,oBAEL,UAAU,WAAW,IAAI;AAAA,oBACzB;AAAA,kBACF;AAAA,kBAEC;AAAA,uDAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA,sBACxD,UAAK,OAAO,UAAU,SAAtB,mBAA4B,WAC3B;AAAA,sBAAC,KAAK,OAAO,UAAU,KAAK;AAAA,sBAA3B;AAAA,wBACC,MAAM,IAAI;AAAA,wBACV;AAAA,wBACA,WAAW;AAAA;AAAA,oBACb,IACE;AAAA;AAAA;AAAA,gBAdC,KAAK;AAAA,cAeZ;AAAA,YAEJ,CAAC;AAAA;AAAA,UA9BI,MAAM,IAAI,EAAE;AAAA,QA+BnB;AAAA,QACC,aACC,6CAAC,YAAS,MACR,uDAAC,SAAI,WAAU,uBACb,uDAAC,cAAW,KAAU,GACxB,GACF,IACE;AAAA;AAAA;AAAA,IA1CC,cAAc,IAAI,EAAE;AAAA,EA2C3B;AAEJ;","names":["import_react","import_jsx_runtime"]}
@@ -10,6 +10,7 @@ interface RowProps<Datum extends RowData> {
10
10
  ExpandComp?: ExpandComp<Datum>;
11
11
  onRowClick?: OnRowClick<Datum>;
12
12
  gridColTemp: string;
13
+ defaultAlign: 'left' | 'right' | 'center';
13
14
  }
14
15
  declare function Row<Datum extends RowData>(props: RowProps<Datum>): react__default.ReactNode;
15
16
 
@@ -10,6 +10,7 @@ interface RowProps<Datum extends RowData> {
10
10
  ExpandComp?: ExpandComp<Datum>;
11
11
  onRowClick?: OnRowClick<Datum>;
12
12
  gridColTemp: string;
13
+ defaultAlign: 'left' | 'right' | 'center';
13
14
  }
14
15
  declare function Row<Datum extends RowData>(props: RowProps<Datum>): react__default.ReactNode;
15
16
 
@@ -1,63 +1,63 @@
1
1
  import {
2
2
  Row
3
- } from "../../chunk-XHNYNSZZ.js";
3
+ } from "../../chunk-7TKVFGWB.js";
4
4
  import "../../chunk-2ANGYYEV.js";
5
+ import "../../chunk-JPIZP2PZ.js";
6
+ import "../../chunk-HYITAA4J.js";
7
+ import "../../chunk-5H3YPCZK.js";
8
+ import "../../chunk-FR2GDOU2.js";
5
9
  import "../../chunk-74DX4CU7.js";
6
10
  import "../../chunk-OYM4XCHQ.js";
7
11
  import "../../chunk-YJ7ZFOYL.js";
8
12
  import "../../chunk-5ZITU5L7.js";
9
13
  import "../../chunk-ILRUXI2E.js";
10
- import "../../chunk-JPIZP2PZ.js";
14
+ import "../../chunk-YO3BQW6S.js";
15
+ import "../../chunk-6IVCARWS.js";
16
+ import "../../chunk-6DJOIRMF.js";
11
17
  import "../../chunk-FPD73OHW.js";
12
18
  import "../../chunk-ZKZDVS7G.js";
13
19
  import "../../chunk-MUNMDHRF.js";
14
20
  import "../../chunk-TVDKGMBI.js";
15
21
  import "../../chunk-3JRNKBMN.js";
16
- import "../../chunk-HYITAA4J.js";
17
- import "../../chunk-5H3YPCZK.js";
18
- import "../../chunk-FR2GDOU2.js";
22
+ import "../../chunk-XQOL7UBI.js";
19
23
  import "../../chunk-TULWX7D6.js";
20
24
  import "../../chunk-XQOZWYUA.js";
21
- import "../../chunk-FQYPUIFX.js";
25
+ import "../../chunk-HXJPG3ZO.js";
22
26
  import "../../chunk-5AVBYDPB.js";
23
27
  import "../../chunk-365QMK4D.js";
24
- import "../../chunk-YO3BQW6S.js";
25
- import "../../chunk-6IVCARWS.js";
26
- import "../../chunk-6DJOIRMF.js";
28
+ import "../../chunk-4IKPNQV5.js";
29
+ import "../../chunk-ACVANQJ4.js";
30
+ import "../../chunk-2DZ2Y3JI.js";
31
+ import "../../chunk-CNQ7RNNY.js";
32
+ import "../../chunk-O3XTRD7R.js";
33
+ import "../../chunk-25HMMI7R.js";
27
34
  import "../../chunk-2CVXGGI5.js";
28
35
  import "../../chunk-EGEQY3KT.js";
29
36
  import "../../chunk-HLOY6BIP.js";
30
37
  import "../../chunk-O3T3TM3V.js";
31
- import "../../chunk-XQOL7UBI.js";
38
+ import "../../chunk-JEHDCZQU.js";
39
+ import "../../chunk-OHMOP5PV.js";
40
+ import "../../chunk-KGLIAFTI.js";
32
41
  import "../../chunk-Q37G2GS6.js";
33
42
  import "../../chunk-VTJZMOSP.js";
34
43
  import "../../chunk-P6B2PNYI.js";
35
- import "../../chunk-NBJOYJAF.js";
36
- import "../../chunk-BVBX6IJ3.js";
44
+ import "../../chunk-ONYSO7Y2.js";
37
45
  import "../../chunk-NJ2U2TVS.js";
46
+ import "../../chunk-BVBX6IJ3.js";
38
47
  import "../../chunk-O3DNDMV3.js";
39
48
  import "../../chunk-4WFMOFN2.js";
40
- import "../../chunk-4IKPNQV5.js";
41
- import "../../chunk-ACVANQJ4.js";
42
- import "../../chunk-2DZ2Y3JI.js";
43
- import "../../chunk-CHHLIPDN.js";
44
- import "../../chunk-25HMMI7R.js";
45
- import "../../chunk-O3XTRD7R.js";
49
+ import "../../chunk-ALOPZ54P.js";
50
+ import "../../chunk-YGL6SWKN.js";
51
+ import "../../chunk-4Y5BEXVN.js";
46
52
  import "../../chunk-AQX7DQLI.js";
47
53
  import "../../chunk-B6XJN6EC.js";
48
- import "../../chunk-CAIVA7UA.js";
54
+ import "../../chunk-UVKNLJDZ.js";
49
55
  import "../../chunk-MIMJ7LON.js";
50
56
  import "../../chunk-IQEEPHOY.js";
51
- import "../../chunk-JEHDCZQU.js";
52
- import "../../chunk-OHMOP5PV.js";
53
- import "../../chunk-KGLIAFTI.js";
54
57
  import "../../chunk-TSVWEPRP.js";
55
58
  import "../../chunk-J242TTFH.js";
56
59
  import "../../chunk-EAXUQEO5.js";
57
60
  import "../../chunk-CZEGRZBK.js";
58
- import "../../chunk-ALOPZ54P.js";
59
- import "../../chunk-YGL6SWKN.js";
60
- import "../../chunk-4Y5BEXVN.js";
61
61
  import "../../chunk-N552FDTV.js";
62
62
  export {
63
63
  Row