@tipp/ui 1.0.45 → 1.0.47

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 (73) hide show
  1. package/dist/atoms/drawer.js +2 -2
  2. package/dist/atoms/field-error-wrapper.js +2 -2
  3. package/dist/atoms/index.js +54 -54
  4. package/dist/atoms/pagination.js +3 -3
  5. package/dist/charts/index.js +3 -3
  6. package/dist/chunk-27COZ7JE.js +123 -0
  7. package/dist/chunk-27COZ7JE.js.map +1 -0
  8. package/dist/chunk-3HCVB462.js +123 -0
  9. package/dist/chunk-3HCVB462.js.map +1 -0
  10. package/dist/chunk-3N6DZ5K5.js +72 -0
  11. package/dist/chunk-3N6DZ5K5.js.map +1 -0
  12. package/dist/chunk-7TKVFGWB.js +72 -0
  13. package/dist/chunk-7TKVFGWB.js.map +1 -0
  14. package/dist/chunk-ANDMT45Z.js +123 -0
  15. package/dist/chunk-ANDMT45Z.js.map +1 -0
  16. package/dist/chunk-AUICOKM7.js +123 -0
  17. package/dist/chunk-AUICOKM7.js.map +1 -0
  18. package/dist/chunk-BZTI5I3W.js +123 -0
  19. package/dist/chunk-BZTI5I3W.js.map +1 -0
  20. package/dist/chunk-FUSEDVWI.js +130 -0
  21. package/dist/chunk-FUSEDVWI.js.map +1 -0
  22. package/dist/chunk-GSYJMQZP.js +123 -0
  23. package/dist/chunk-GSYJMQZP.js.map +1 -0
  24. package/dist/chunk-HMHRKLU7.js +123 -0
  25. package/dist/chunk-HMHRKLU7.js.map +1 -0
  26. package/dist/chunk-IQ7JV3NX.js +72 -0
  27. package/dist/chunk-IQ7JV3NX.js.map +1 -0
  28. package/dist/chunk-IUT2HS6J.js +130 -0
  29. package/dist/chunk-IUT2HS6J.js.map +1 -0
  30. package/dist/chunk-JEQAAME2.js +123 -0
  31. package/dist/chunk-JEQAAME2.js.map +1 -0
  32. package/dist/chunk-R6BKHIPF.js +123 -0
  33. package/dist/chunk-R6BKHIPF.js.map +1 -0
  34. package/dist/chunk-RWVITRNU.js +123 -0
  35. package/dist/chunk-RWVITRNU.js.map +1 -0
  36. package/dist/chunk-TVXYMNVM.js +123 -0
  37. package/dist/chunk-TVXYMNVM.js.map +1 -0
  38. package/dist/chunk-UXJHGE4F.js +124 -0
  39. package/dist/chunk-UXJHGE4F.js.map +1 -0
  40. package/dist/chunk-VEUQBCIM.js +72 -0
  41. package/dist/chunk-VEUQBCIM.js.map +1 -0
  42. package/dist/chunk-W26QXSFH.js +124 -0
  43. package/dist/chunk-W26QXSFH.js.map +1 -0
  44. package/dist/chunk-WEY4HIWE.js +123 -0
  45. package/dist/chunk-WEY4HIWE.js.map +1 -0
  46. package/dist/chunk-ZNZU4IY4.js +123 -0
  47. package/dist/chunk-ZNZU4IY4.js.map +1 -0
  48. package/dist/index.cjs +11 -5
  49. package/dist/index.cjs.map +1 -1
  50. package/dist/index.css +24 -13
  51. package/dist/index.css.map +1 -1
  52. package/dist/index.js +71 -71
  53. package/dist/molecules/date-picker/index.js +2 -2
  54. package/dist/molecules/expand-table/index.cjs +11 -5
  55. package/dist/molecules/expand-table/index.cjs.map +1 -1
  56. package/dist/molecules/expand-table/index.js +27 -27
  57. package/dist/molecules/expand-table/row.cjs +6 -4
  58. package/dist/molecules/expand-table/row.cjs.map +1 -1
  59. package/dist/molecules/expand-table/row.d.cts +1 -0
  60. package/dist/molecules/expand-table/row.d.ts +1 -0
  61. package/dist/molecules/expand-table/row.js +24 -24
  62. package/dist/molecules/index.cjs +11 -5
  63. package/dist/molecules/index.cjs.map +1 -1
  64. package/dist/molecules/index.js +29 -29
  65. package/dist/molecules/navigation.js +24 -24
  66. package/dist/types/react-table.d.cjs.map +1 -1
  67. package/dist/types/react-table.d.d.cts +2 -0
  68. package/dist/types/react-table.d.d.ts +2 -0
  69. package/dist/types/react-table.d.js.map +1 -1
  70. package/package.json +1 -1
  71. package/src/molecules/expand-table/index.tsx +5 -2
  72. package/src/molecules/expand-table/row.tsx +6 -2
  73. package/src/types/react-table.d.ts +2 -0
package/dist/index.js CHANGED
@@ -1,31 +1,41 @@
1
- import {
2
- useThemeContext
3
- } from "./chunk-MMGP4GEQ.js";
4
- import {
5
- uiProps
6
- } from "./chunk-NVKNDAIN.js";
7
1
  import "./chunk-PSINRHYW.js";
8
- import {
9
- EchartDefaultProps
10
- } from "./chunk-2QFSCWES.js";
11
2
  import {
12
3
  HorizontalBarChart
13
4
  } from "./chunk-SGMO4KBC.js";
14
5
  import "./chunk-KHHXN3CH.js";
15
6
  import {
16
7
  Navigation
17
- } from "./chunk-RKLEKAON.js";
8
+ } from "./chunk-7A7J457W.js";
9
+ import {
10
+ uiProps
11
+ } from "./chunk-NVKNDAIN.js";
18
12
  import {
19
13
  DatePicker
20
- } from "./chunk-Z2PA5PMV.js";
14
+ } from "./chunk-G4FN6FJG.js";
21
15
  import {
22
16
  ExpandTable,
23
17
  createColumnHelper
24
- } from "./chunk-2WPHYT3E.js";
25
- import "./chunk-XHNYNSZZ.js";
26
- import "./chunk-BSTJBBEX.js";
27
- import "./chunk-NDUKDKGB.js";
18
+ } from "./chunk-TVXYMNVM.js";
19
+ import "./chunk-7TKVFGWB.js";
20
+ import {
21
+ useThemeContext
22
+ } from "./chunk-MMGP4GEQ.js";
23
+ import {
24
+ EchartDefaultProps
25
+ } from "./chunk-2QFSCWES.js";
28
26
  import "./chunk-2ANGYYEV.js";
27
+ import {
28
+ TextField
29
+ } from "./chunk-JPIZP2PZ.js";
30
+ import {
31
+ Separator
32
+ } from "./chunk-HYITAA4J.js";
33
+ import {
34
+ Skeleton
35
+ } from "./chunk-5H3YPCZK.js";
36
+ import {
37
+ Spinner
38
+ } from "./chunk-FR2GDOU2.js";
29
39
  import {
30
40
  Strong
31
41
  } from "./chunk-74DX4CU7.js";
@@ -42,8 +52,14 @@ import {
42
52
  TextArea
43
53
  } from "./chunk-ILRUXI2E.js";
44
54
  import {
45
- TextField
46
- } from "./chunk-JPIZP2PZ.js";
55
+ Quote
56
+ } from "./chunk-YO3BQW6S.js";
57
+ import {
58
+ RadioCards
59
+ } from "./chunk-6IVCARWS.js";
60
+ import {
61
+ RadioGroup
62
+ } from "./chunk-6DJOIRMF.js";
47
63
  import {
48
64
  Radio
49
65
  } from "./chunk-FPD73OHW.js";
@@ -60,14 +76,8 @@ import {
60
76
  Select
61
77
  } from "./chunk-3JRNKBMN.js";
62
78
  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";
79
+ Inset
80
+ } from "./chunk-XQOL7UBI.js";
71
81
  import {
72
82
  Kbd
73
83
  } from "./chunk-TULWX7D6.js";
@@ -76,7 +86,7 @@ import {
76
86
  } from "./chunk-XQOZWYUA.js";
77
87
  import {
78
88
  Pagination
79
- } from "./chunk-FQYPUIFX.js";
89
+ } from "./chunk-HXJPG3ZO.js";
80
90
  import {
81
91
  Popover
82
92
  } from "./chunk-5AVBYDPB.js";
@@ -84,14 +94,23 @@ import {
84
94
  Progress
85
95
  } from "./chunk-365QMK4D.js";
86
96
  import {
87
- Quote
88
- } from "./chunk-YO3BQW6S.js";
97
+ EllipsisTooltip
98
+ } from "./chunk-4IKPNQV5.js";
89
99
  import {
90
- RadioCards
91
- } from "./chunk-6IVCARWS.js";
100
+ Tooltip
101
+ } from "./chunk-ACVANQJ4.js";
92
102
  import {
93
- RadioGroup
94
- } from "./chunk-6DJOIRMF.js";
103
+ Em
104
+ } from "./chunk-2DZ2Y3JI.js";
105
+ import {
106
+ FieldErrorWrapper
107
+ } from "./chunk-CNQ7RNNY.js";
108
+ import {
109
+ Typo
110
+ } from "./chunk-O3XTRD7R.js";
111
+ import {
112
+ Flex
113
+ } from "./chunk-25HMMI7R.js";
95
114
  import {
96
115
  Form
97
116
  } from "./chunk-2CVXGGI5.js";
@@ -105,8 +124,14 @@ import {
105
124
  HoverCard
106
125
  } from "./chunk-O3T3TM3V.js";
107
126
  import {
108
- Inset
109
- } from "./chunk-XQOL7UBI.js";
127
+ Checkbox
128
+ } from "./chunk-JEHDCZQU.js";
129
+ import {
130
+ Code
131
+ } from "./chunk-OHMOP5PV.js";
132
+ import {
133
+ Collapse
134
+ } from "./chunk-KGLIAFTI.js";
110
135
  import {
111
136
  Container
112
137
  } from "./chunk-Q37G2GS6.js";
@@ -121,14 +146,14 @@ import {
121
146
  Drawer,
122
147
  Root,
123
148
  Trigger
124
- } from "./chunk-NBJOYJAF.js";
125
- import {
126
- ThemeProvider
127
- } from "./chunk-BVBX6IJ3.js";
149
+ } from "./chunk-ONYSO7Y2.js";
128
150
  import {
129
151
  ToastContainer,
130
152
  toast
131
153
  } from "./chunk-NJ2U2TVS.js";
154
+ import {
155
+ ThemeProvider
156
+ } from "./chunk-BVBX6IJ3.js";
132
157
  import {
133
158
  IconButton
134
159
  } from "./chunk-O3DNDMV3.js";
@@ -136,23 +161,14 @@ import {
136
161
  DropdownMenu
137
162
  } from "./chunk-4WFMOFN2.js";
138
163
  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";
164
+ Badge
165
+ } from "./chunk-ALOPZ54P.js";
150
166
  import {
151
- Flex
152
- } from "./chunk-25HMMI7R.js";
167
+ Blockquote
168
+ } from "./chunk-YGL6SWKN.js";
153
169
  import {
154
- Typo
155
- } from "./chunk-O3XTRD7R.js";
170
+ Box
171
+ } from "./chunk-4Y5BEXVN.js";
156
172
  import {
157
173
  Button
158
174
  } from "./chunk-AQX7DQLI.js";
@@ -168,15 +184,6 @@ import {
168
184
  import {
169
185
  CheckboxGroup
170
186
  } 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
187
  import {
181
188
  BarChartIcon,
182
189
  BookmarkFilledIcon,
@@ -205,6 +212,8 @@ import {
205
212
  PlusIcon,
206
213
  TrashIcon
207
214
  } from "./chunk-TSVWEPRP.js";
215
+ import "./chunk-BSTJBBEX.js";
216
+ import "./chunk-NDUKDKGB.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";
6
- import "../../chunk-BSTJBBEX.js";
7
- import "../../chunk-NDUKDKGB.js";
4
+ } from "../../chunk-TVXYMNVM.js";
5
+ import "../../chunk-7TKVFGWB.js";
8
6
  import "../../chunk-2ANGYYEV.js";
7
+ import "../../chunk-JPIZP2PZ.js";
8
+ import "../../chunk-HYITAA4J.js";
9
+ import "../../chunk-5H3YPCZK.js";
10
+ import "../../chunk-FR2GDOU2.js";
9
11
  import "../../chunk-74DX4CU7.js";
10
12
  import "../../chunk-OYM4XCHQ.js";
11
13
  import "../../chunk-YJ7ZFOYL.js";
12
14
  import "../../chunk-5ZITU5L7.js";
13
15
  import "../../chunk-ILRUXI2E.js";
14
- import "../../chunk-JPIZP2PZ.js";
16
+ import "../../chunk-YO3BQW6S.js";
17
+ import "../../chunk-6IVCARWS.js";
18
+ import "../../chunk-6DJOIRMF.js";
15
19
  import "../../chunk-FPD73OHW.js";
16
20
  import "../../chunk-ZKZDVS7G.js";
17
21
  import "../../chunk-MUNMDHRF.js";
18
22
  import "../../chunk-TVDKGMBI.js";
19
23
  import "../../chunk-3JRNKBMN.js";
20
- import "../../chunk-HYITAA4J.js";
21
- import "../../chunk-5H3YPCZK.js";
22
- import "../../chunk-FR2GDOU2.js";
24
+ import "../../chunk-XQOL7UBI.js";
23
25
  import "../../chunk-TULWX7D6.js";
24
26
  import "../../chunk-XQOZWYUA.js";
25
- import "../../chunk-FQYPUIFX.js";
27
+ import "../../chunk-HXJPG3ZO.js";
26
28
  import "../../chunk-5AVBYDPB.js";
27
29
  import "../../chunk-365QMK4D.js";
28
- import "../../chunk-YO3BQW6S.js";
29
- import "../../chunk-6IVCARWS.js";
30
- import "../../chunk-6DJOIRMF.js";
30
+ import "../../chunk-4IKPNQV5.js";
31
+ import "../../chunk-ACVANQJ4.js";
32
+ import "../../chunk-2DZ2Y3JI.js";
33
+ import "../../chunk-CNQ7RNNY.js";
34
+ import "../../chunk-O3XTRD7R.js";
35
+ import "../../chunk-25HMMI7R.js";
31
36
  import "../../chunk-2CVXGGI5.js";
32
37
  import "../../chunk-EGEQY3KT.js";
33
38
  import "../../chunk-HLOY6BIP.js";
34
39
  import "../../chunk-O3T3TM3V.js";
35
- import "../../chunk-XQOL7UBI.js";
40
+ import "../../chunk-JEHDCZQU.js";
41
+ import "../../chunk-OHMOP5PV.js";
42
+ import "../../chunk-KGLIAFTI.js";
36
43
  import "../../chunk-Q37G2GS6.js";
37
44
  import "../../chunk-VTJZMOSP.js";
38
45
  import "../../chunk-P6B2PNYI.js";
39
- import "../../chunk-NBJOYJAF.js";
40
- import "../../chunk-BVBX6IJ3.js";
46
+ import "../../chunk-ONYSO7Y2.js";
41
47
  import "../../chunk-NJ2U2TVS.js";
48
+ import "../../chunk-BVBX6IJ3.js";
42
49
  import "../../chunk-O3DNDMV3.js";
43
50
  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";
51
+ import "../../chunk-ALOPZ54P.js";
52
+ import "../../chunk-YGL6SWKN.js";
53
+ import "../../chunk-4Y5BEXVN.js";
50
54
  import "../../chunk-AQX7DQLI.js";
51
55
  import "../../chunk-B6XJN6EC.js";
52
56
  import "../../chunk-CAIVA7UA.js";
53
57
  import "../../chunk-MIMJ7LON.js";
54
58
  import "../../chunk-IQEEPHOY.js";
55
- import "../../chunk-JEHDCZQU.js";
56
- import "../../chunk-OHMOP5PV.js";
57
- import "../../chunk-KGLIAFTI.js";
58
59
  import "../../chunk-TSVWEPRP.js";
60
+ import "../../chunk-BSTJBBEX.js";
61
+ import "../../chunk-NDUKDKGB.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
54
  import "../../chunk-CAIVA7UA.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