@tipp/ui 1.0.25 → 1.0.27
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.
- package/dist/atoms/form.cjs +136 -0
- package/dist/atoms/form.cjs.map +1 -0
- package/dist/atoms/form.d.cts +13 -0
- package/dist/atoms/form.d.ts +13 -0
- package/dist/atoms/form.js +8 -0
- package/dist/atoms/form.js.map +1 -0
- package/dist/atoms/index.cjs +71 -0
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.d.cts +2 -0
- package/dist/atoms/index.d.ts +2 -0
- package/dist/atoms/index.js +13 -9
- package/dist/charts/index.js +1 -0
- package/dist/chunk-2ANGYYEV.js +1 -0
- package/dist/chunk-2ANGYYEV.js.map +1 -0
- package/dist/chunk-2CVXGGI5.js +79 -0
- package/dist/chunk-2CVXGGI5.js.map +1 -0
- package/dist/chunk-2HO6TD5Z.js +77 -0
- package/dist/chunk-2HO6TD5Z.js.map +1 -0
- package/dist/chunk-3R2IB6WJ.js +104 -0
- package/dist/chunk-3R2IB6WJ.js.map +1 -0
- package/dist/chunk-4K4S5TXK.js +7 -0
- package/dist/chunk-4K4S5TXK.js.map +1 -0
- package/dist/chunk-CHHLIPDN.js +23 -0
- package/dist/chunk-CHHLIPDN.js.map +1 -0
- package/dist/chunk-FH5ZSMU2.js +104 -0
- package/dist/chunk-FH5ZSMU2.js.map +1 -0
- package/dist/chunk-KO2GTLZU.js +119 -0
- package/dist/chunk-KO2GTLZU.js.map +1 -0
- package/dist/chunk-LBO3JR5R.js +79 -0
- package/dist/chunk-LBO3JR5R.js.map +1 -0
- package/dist/chunk-MQDLXULL.js +119 -0
- package/dist/chunk-MQDLXULL.js.map +1 -0
- package/dist/chunk-OCDOKW5S.js +119 -0
- package/dist/chunk-OCDOKW5S.js.map +1 -0
- package/dist/chunk-OUSFDJNS.js +119 -0
- package/dist/chunk-OUSFDJNS.js.map +1 -0
- package/dist/chunk-P6F4CTYO.js +79 -0
- package/dist/chunk-P6F4CTYO.js.map +1 -0
- package/dist/chunk-PSINRHYW.js +1 -0
- package/dist/chunk-PSINRHYW.js.map +1 -0
- package/dist/chunk-QANLBULQ.js +79 -0
- package/dist/chunk-QANLBULQ.js.map +1 -0
- package/dist/chunk-QOY42XM2.js +59 -0
- package/dist/chunk-QOY42XM2.js.map +1 -0
- package/dist/chunk-XG4N7OQF.js +104 -0
- package/dist/chunk-XG4N7OQF.js.map +1 -0
- package/dist/chunk-YL5VWNBV.js +91 -0
- package/dist/chunk-YL5VWNBV.js.map +1 -0
- package/dist/index.cjs +318 -47
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +8 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +3 -5
- package/dist/index.d.ts +3 -5
- package/dist/index.js +28 -13
- package/dist/molecules/expand-table/index.cjs +46 -336
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +5 -4
- package/dist/molecules/expand-table/row.cjs +15 -372
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.js +5 -4
- package/dist/molecules/index.cjs +80 -334
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +10 -9
- package/dist/molecules/navigation.cjs +18 -298
- package/dist/molecules/navigation.cjs.map +1 -1
- package/dist/molecules/navigation.js +5 -4
- package/package.json +3 -31
- package/src/atoms/form.tsx +72 -0
- package/src/atoms/index.ts +2 -0
- package/src/index.ts +1 -0
|
@@ -64,268 +64,19 @@ __export(expand_table_exports, {
|
|
|
64
64
|
});
|
|
65
65
|
module.exports = __toCommonJS(expand_table_exports);
|
|
66
66
|
var import_react_table2 = require("@tanstack/react-table");
|
|
67
|
-
var
|
|
67
|
+
var import_react4 = require("react");
|
|
68
68
|
|
|
69
|
-
// src/atoms/
|
|
69
|
+
// src/atoms/flex.tsx
|
|
70
70
|
var import_themes = require("@radix-ui/themes");
|
|
71
71
|
|
|
72
|
-
// src/atoms/
|
|
72
|
+
// src/atoms/typo.tsx
|
|
73
73
|
var import_themes2 = require("@radix-ui/themes");
|
|
74
|
-
|
|
75
|
-
// src/atoms/avatar.tsx
|
|
76
|
-
var import_themes3 = require("@radix-ui/themes");
|
|
77
74
|
var import_react = require("react");
|
|
78
75
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
79
|
-
var
|
|
80
|
-
(props, ref) => {
|
|
81
|
-
const _a = props, { children, size, variant = "soft" } = _a, rest = __objRest(_a, ["children", "size", "variant"]);
|
|
82
|
-
const radixSize = (0, import_react.useMemo)(() => {
|
|
83
|
-
switch (size) {
|
|
84
|
-
case "small":
|
|
85
|
-
return "1";
|
|
86
|
-
case "medium":
|
|
87
|
-
return "2";
|
|
88
|
-
case "large":
|
|
89
|
-
return "3";
|
|
90
|
-
case "full":
|
|
91
|
-
return "4";
|
|
92
|
-
default:
|
|
93
|
-
return size;
|
|
94
|
-
}
|
|
95
|
-
}, [size]);
|
|
96
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes3.Avatar, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, variant, children }));
|
|
97
|
-
}
|
|
98
|
-
);
|
|
99
|
-
Avatar.displayName = "Avatar";
|
|
100
|
-
|
|
101
|
-
// src/atoms/badge.tsx
|
|
102
|
-
var import_themes4 = require("@radix-ui/themes");
|
|
103
|
-
var import_react2 = require("react");
|
|
104
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
105
|
-
var Badge = (0, import_react2.forwardRef)(
|
|
106
|
-
(props, ref) => {
|
|
107
|
-
const _a = props, { size, color } = _a, rest = __objRest(_a, ["size", "color"]);
|
|
108
|
-
const radixSize = (0, import_react2.useMemo)(() => {
|
|
109
|
-
switch (size) {
|
|
110
|
-
case "small":
|
|
111
|
-
return "1";
|
|
112
|
-
case "large":
|
|
113
|
-
return "3";
|
|
114
|
-
default:
|
|
115
|
-
return "1";
|
|
116
|
-
}
|
|
117
|
-
}, [size]);
|
|
118
|
-
const radixColor = (0, import_react2.useMemo)(() => {
|
|
119
|
-
switch (color) {
|
|
120
|
-
case "error":
|
|
121
|
-
return "red";
|
|
122
|
-
case "neutral":
|
|
123
|
-
return "gray";
|
|
124
|
-
case "success":
|
|
125
|
-
return "green";
|
|
126
|
-
case "accent":
|
|
127
|
-
default:
|
|
128
|
-
return void 0;
|
|
129
|
-
}
|
|
130
|
-
}, [color]);
|
|
131
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes4.Badge, __spreadProps(__spreadValues({}, rest), { color: radixColor, ref, size: radixSize }));
|
|
132
|
-
}
|
|
133
|
-
);
|
|
134
|
-
Badge.displayName = "Badge";
|
|
135
|
-
|
|
136
|
-
// src/atoms/blockquote.tsx
|
|
137
|
-
var import_themes5 = require("@radix-ui/themes");
|
|
138
|
-
|
|
139
|
-
// src/atoms/box.tsx
|
|
140
|
-
var import_themes6 = require("@radix-ui/themes");
|
|
141
|
-
|
|
142
|
-
// src/atoms/button.tsx
|
|
143
|
-
var import_themes7 = require("@radix-ui/themes");
|
|
144
|
-
var import_react3 = require("react");
|
|
145
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
146
|
-
var Button = (0, import_react3.forwardRef)(
|
|
147
|
-
(props, ref) => {
|
|
148
|
-
const _a = props, { size } = _a, restProps = __objRest(_a, ["size"]);
|
|
149
|
-
const radixSize = (0, import_react3.useMemo)(() => {
|
|
150
|
-
switch (size) {
|
|
151
|
-
case "small":
|
|
152
|
-
return "1";
|
|
153
|
-
case "medium":
|
|
154
|
-
return "2";
|
|
155
|
-
case "large":
|
|
156
|
-
return "3";
|
|
157
|
-
default:
|
|
158
|
-
return "2";
|
|
159
|
-
}
|
|
160
|
-
}, [size]);
|
|
161
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes7.Button, __spreadProps(__spreadValues({}, restProps), { ref, size: radixSize }));
|
|
162
|
-
}
|
|
163
|
-
);
|
|
164
|
-
Button.displayName = "Button";
|
|
165
|
-
|
|
166
|
-
// src/atoms/call-out.tsx
|
|
167
|
-
var import_themes8 = require("@radix-ui/themes");
|
|
168
|
-
|
|
169
|
-
// src/atoms/card.tsx
|
|
170
|
-
var import_themes9 = require("@radix-ui/themes");
|
|
171
|
-
|
|
172
|
-
// src/atoms/check-box.tsx
|
|
173
|
-
var import_themes10 = require("@radix-ui/themes");
|
|
174
|
-
var import_react4 = require("react");
|
|
175
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
176
|
-
var Checkbox = (0, import_react4.forwardRef)(
|
|
177
|
-
(props, ref) => {
|
|
178
|
-
const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
|
|
179
|
-
const radixSize = (0, import_react4.useMemo)(() => {
|
|
180
|
-
switch (size) {
|
|
181
|
-
case "small":
|
|
182
|
-
return "1";
|
|
183
|
-
case "medium":
|
|
184
|
-
return "2";
|
|
185
|
-
case "large":
|
|
186
|
-
return "3";
|
|
187
|
-
}
|
|
188
|
-
}, [size]);
|
|
189
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes10.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
|
|
190
|
-
}
|
|
191
|
-
);
|
|
192
|
-
Checkbox.displayName = "Checkbox";
|
|
193
|
-
|
|
194
|
-
// src/atoms/check-box-card.tsx
|
|
195
|
-
var import_themes11 = require("@radix-ui/themes");
|
|
196
|
-
|
|
197
|
-
// src/atoms/check-box-group.tsx
|
|
198
|
-
var import_themes12 = require("@radix-ui/themes");
|
|
199
|
-
var import_react5 = require("react");
|
|
200
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
201
|
-
var Root = (0, import_react5.forwardRef)((props, ref) => {
|
|
202
|
-
const _a = props, { children, size } = _a, rest = __objRest(_a, ["children", "size"]);
|
|
203
|
-
const groupSize = (0, import_react5.useMemo)(() => {
|
|
204
|
-
switch (size) {
|
|
205
|
-
case "small":
|
|
206
|
-
return "1";
|
|
207
|
-
case "large":
|
|
208
|
-
return "3";
|
|
209
|
-
case "medium":
|
|
210
|
-
default:
|
|
211
|
-
return "2";
|
|
212
|
-
}
|
|
213
|
-
}, [size]);
|
|
214
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes12.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
|
|
215
|
-
});
|
|
216
|
-
Root.displayName = "CheckboxGroup.Root";
|
|
217
|
-
var CheckboxGroup = {
|
|
218
|
-
Root,
|
|
219
|
-
Item: import_themes12.CheckboxGroup.Item
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
// src/atoms/code.tsx
|
|
223
|
-
var import_themes13 = require("@radix-ui/themes");
|
|
224
|
-
|
|
225
|
-
// src/atoms/container.tsx
|
|
226
|
-
var import_themes14 = require("@radix-ui/themes");
|
|
227
|
-
|
|
228
|
-
// src/atoms/data-list.tsx
|
|
229
|
-
var import_themes15 = require("@radix-ui/themes");
|
|
230
|
-
|
|
231
|
-
// src/atoms/dialog.tsx
|
|
232
|
-
var import_themes16 = require("@radix-ui/themes");
|
|
233
|
-
|
|
234
|
-
// src/atoms/dropdown-menu.tsx
|
|
235
|
-
var import_themes17 = require("@radix-ui/themes");
|
|
236
|
-
|
|
237
|
-
// src/atoms/em.tsx
|
|
238
|
-
var import_themes18 = require("@radix-ui/themes");
|
|
239
|
-
|
|
240
|
-
// src/atoms/flex.tsx
|
|
241
|
-
var import_themes19 = require("@radix-ui/themes");
|
|
242
|
-
|
|
243
|
-
// src/atoms/grid.tsx
|
|
244
|
-
var import_themes20 = require("@radix-ui/themes");
|
|
245
|
-
|
|
246
|
-
// src/atoms/heading.tsx
|
|
247
|
-
var import_themes21 = require("@radix-ui/themes");
|
|
248
|
-
var import_react6 = require("react");
|
|
249
|
-
var import_themes22 = require("@radix-ui/themes");
|
|
250
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
251
|
-
|
|
252
|
-
// src/atoms/hover-card.tsx
|
|
253
|
-
var import_themes23 = require("@radix-ui/themes");
|
|
254
|
-
|
|
255
|
-
// src/atoms/icon-button.tsx
|
|
256
|
-
var import_themes24 = require("@radix-ui/themes");
|
|
257
|
-
|
|
258
|
-
// src/atoms/inset.tsx
|
|
259
|
-
var import_themes25 = require("@radix-ui/themes");
|
|
260
|
-
|
|
261
|
-
// src/atoms/kbd.tsx
|
|
262
|
-
var import_themes26 = require("@radix-ui/themes");
|
|
263
|
-
|
|
264
|
-
// src/atoms/link.tsx
|
|
265
|
-
var import_themes27 = require("@radix-ui/themes");
|
|
266
|
-
var import_react7 = require("react");
|
|
267
|
-
var import_themes28 = require("@radix-ui/themes");
|
|
268
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
269
|
-
|
|
270
|
-
// src/atoms/popover.tsx
|
|
271
|
-
var import_themes29 = require("@radix-ui/themes");
|
|
272
|
-
|
|
273
|
-
// src/atoms/progress.tsx
|
|
274
|
-
var import_themes30 = require("@radix-ui/themes");
|
|
275
|
-
|
|
276
|
-
// src/atoms/quote.tsx
|
|
277
|
-
var import_themes31 = require("@radix-ui/themes");
|
|
278
|
-
|
|
279
|
-
// src/atoms/radio.tsx
|
|
280
|
-
var import_themes32 = require("@radix-ui/themes");
|
|
281
|
-
|
|
282
|
-
// src/atoms/radio-cards.tsx
|
|
283
|
-
var import_themes33 = require("@radix-ui/themes");
|
|
284
|
-
|
|
285
|
-
// src/atoms/radio-group.tsx
|
|
286
|
-
var import_themes34 = require("@radix-ui/themes");
|
|
287
|
-
|
|
288
|
-
// src/atoms/scroll-area.tsx
|
|
289
|
-
var import_themes35 = require("@radix-ui/themes");
|
|
290
|
-
|
|
291
|
-
// src/atoms/section.tsx
|
|
292
|
-
var import_themes36 = require("@radix-ui/themes");
|
|
293
|
-
|
|
294
|
-
// src/atoms/segmented-control.tsx
|
|
295
|
-
var import_themes37 = require("@radix-ui/themes");
|
|
296
|
-
|
|
297
|
-
// src/atoms/select.tsx
|
|
298
|
-
var import_themes38 = require("@radix-ui/themes");
|
|
299
|
-
|
|
300
|
-
// src/atoms/separator.tsx
|
|
301
|
-
var import_themes39 = require("@radix-ui/themes");
|
|
302
|
-
|
|
303
|
-
// src/atoms/skeleton.tsx
|
|
304
|
-
var import_themes40 = require("@radix-ui/themes");
|
|
305
|
-
|
|
306
|
-
// src/atoms/strong.tsx
|
|
307
|
-
var import_themes41 = require("@radix-ui/themes");
|
|
308
|
-
|
|
309
|
-
// src/atoms/switch.tsx
|
|
310
|
-
var import_themes42 = require("@radix-ui/themes");
|
|
311
|
-
|
|
312
|
-
// src/atoms/tab-nav.tsx
|
|
313
|
-
var import_themes43 = require("@radix-ui/themes");
|
|
314
|
-
|
|
315
|
-
// src/atoms/tabs.tsx
|
|
316
|
-
var import_themes44 = require("@radix-ui/themes");
|
|
317
|
-
|
|
318
|
-
// src/atoms/text-area.tsx
|
|
319
|
-
var import_themes45 = require("@radix-ui/themes");
|
|
320
|
-
|
|
321
|
-
// src/atoms/typo.tsx
|
|
322
|
-
var import_themes46 = require("@radix-ui/themes");
|
|
323
|
-
var import_react8 = require("react");
|
|
324
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
325
|
-
var Typo = (0, import_react8.forwardRef)(
|
|
76
|
+
var Typo = (0, import_react.forwardRef)(
|
|
326
77
|
(props, ref) => {
|
|
327
78
|
const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
|
|
328
|
-
const radixSize = (0,
|
|
79
|
+
const radixSize = (0, import_react.useMemo)(() => {
|
|
329
80
|
if (size !== void 0)
|
|
330
81
|
return size;
|
|
331
82
|
switch (variant) {
|
|
@@ -338,81 +89,40 @@ var Typo = (0, import_react8.forwardRef)(
|
|
|
338
89
|
return "2";
|
|
339
90
|
}
|
|
340
91
|
}, [size, variant]);
|
|
341
|
-
return /* @__PURE__ */ (0,
|
|
92
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes2.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
|
|
342
93
|
}
|
|
343
94
|
);
|
|
344
95
|
Typo.displayName = "Typo";
|
|
345
96
|
|
|
346
|
-
// src/atoms/text-field.tsx
|
|
347
|
-
var import_themes47 = require("@radix-ui/themes");
|
|
348
|
-
|
|
349
|
-
// src/atoms/tooltip.tsx
|
|
350
|
-
var import_themes48 = require("@radix-ui/themes");
|
|
351
|
-
|
|
352
97
|
// src/atoms/collapse.tsx
|
|
353
|
-
var
|
|
354
|
-
var
|
|
98
|
+
var import_react2 = require("react");
|
|
99
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
355
100
|
function Collapse(props) {
|
|
356
101
|
const { children, closedHeight = "0" } = props;
|
|
357
|
-
const [open, setOpen] = (0,
|
|
102
|
+
const [open, setOpen] = (0, import_react2.useState)(() => {
|
|
358
103
|
return props.open || props.defaultOpen || false;
|
|
359
104
|
});
|
|
360
|
-
(0,
|
|
105
|
+
(0, import_react2.useEffect)(() => {
|
|
361
106
|
if (props.open === void 0)
|
|
362
107
|
return;
|
|
363
108
|
setOpen(props.open);
|
|
364
109
|
}, [props.open]);
|
|
365
|
-
const ref = (0,
|
|
366
|
-
(0,
|
|
110
|
+
const ref = (0, import_react2.useRef)(null);
|
|
111
|
+
(0, import_react2.useEffect)(() => {
|
|
367
112
|
if (!ref.current)
|
|
368
113
|
return;
|
|
369
114
|
ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
|
|
370
115
|
}, [closedHeight, open]);
|
|
371
|
-
return /* @__PURE__ */ (0,
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "collapse", ref, children });
|
|
372
117
|
}
|
|
373
118
|
|
|
374
|
-
// src/atoms/spinner.tsx
|
|
375
|
-
var import_themes49 = require("@radix-ui/themes");
|
|
376
|
-
|
|
377
|
-
// src/atoms/pagination.tsx
|
|
378
|
-
var import_react10 = require("react");
|
|
379
|
-
|
|
380
|
-
// src/icon.ts
|
|
381
|
-
var import_react_icons = require("@radix-ui/react-icons");
|
|
382
|
-
|
|
383
|
-
// src/atoms/pagination.tsx
|
|
384
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
385
|
-
|
|
386
|
-
// src/atoms/field-error-wrapper.tsx
|
|
387
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
388
|
-
|
|
389
|
-
// src/atoms/ellipsis-tooltip.tsx
|
|
390
|
-
var import_react11 = require("react");
|
|
391
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
392
|
-
|
|
393
|
-
// src/atoms/drawer.tsx
|
|
394
|
-
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
395
|
-
|
|
396
|
-
// src/theme/theme-provider.tsx
|
|
397
|
-
var import_themes50 = require("@radix-ui/themes");
|
|
398
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
399
|
-
|
|
400
|
-
// src/atoms/toast.tsx
|
|
401
|
-
var import_react_icons2 = require("@radix-ui/react-icons");
|
|
402
|
-
var import_react_toastify = require("react-toastify");
|
|
403
|
-
var import_react_toastify2 = require("react-toastify");
|
|
404
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
405
|
-
|
|
406
|
-
// src/atoms/drawer.tsx
|
|
407
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
408
|
-
|
|
409
119
|
// src/icons/down.tsx
|
|
410
|
-
var
|
|
411
|
-
var
|
|
412
|
-
var TriangleArrowDownIcon =
|
|
120
|
+
var React3 = __toESM(require("react"), 1);
|
|
121
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
122
|
+
var TriangleArrowDownIcon = React3.forwardRef(
|
|
413
123
|
(_a, forwardedRef) => {
|
|
414
124
|
var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
|
|
415
|
-
return /* @__PURE__ */ (0,
|
|
125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
416
126
|
"svg",
|
|
417
127
|
__spreadProps(__spreadValues({
|
|
418
128
|
fill: "none",
|
|
@@ -422,7 +132,7 @@ var TriangleArrowDownIcon = React7.forwardRef(
|
|
|
422
132
|
xmlns: "http://www.w3.org/2000/svg"
|
|
423
133
|
}, props), {
|
|
424
134
|
ref: forwardedRef,
|
|
425
|
-
children: /* @__PURE__ */ (0,
|
|
135
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
426
136
|
"path",
|
|
427
137
|
{
|
|
428
138
|
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",
|
|
@@ -436,12 +146,12 @@ var TriangleArrowDownIcon = React7.forwardRef(
|
|
|
436
146
|
TriangleArrowDownIcon.displayName = "ArrowDownIcon";
|
|
437
147
|
|
|
438
148
|
// src/icons/up.tsx
|
|
439
|
-
var
|
|
440
|
-
var
|
|
441
|
-
var TriangleArrowUpIcon =
|
|
149
|
+
var React4 = __toESM(require("react"), 1);
|
|
150
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
151
|
+
var TriangleArrowUpIcon = React4.forwardRef(
|
|
442
152
|
(_a, forwardedRef) => {
|
|
443
153
|
var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
|
|
444
|
-
return /* @__PURE__ */ (0,
|
|
154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
445
155
|
"svg",
|
|
446
156
|
__spreadProps(__spreadValues({
|
|
447
157
|
fill: "none",
|
|
@@ -451,7 +161,7 @@ var TriangleArrowUpIcon = React8.forwardRef(
|
|
|
451
161
|
xmlns: "http://www.w3.org/2000/svg"
|
|
452
162
|
}, props), {
|
|
453
163
|
ref: forwardedRef,
|
|
454
|
-
children: /* @__PURE__ */ (0,
|
|
164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
455
165
|
"path",
|
|
456
166
|
{
|
|
457
167
|
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",
|
|
@@ -466,22 +176,22 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
|
|
|
466
176
|
|
|
467
177
|
// src/molecules/expand-table/row.tsx
|
|
468
178
|
var import_react_table = require("@tanstack/react-table");
|
|
469
|
-
var
|
|
470
|
-
var
|
|
179
|
+
var import_react3 = require("react");
|
|
180
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
471
181
|
function Row(props) {
|
|
472
182
|
const { row, ExpandComp, gridColTemp } = props;
|
|
473
|
-
const [open, setOpen] = (0,
|
|
474
|
-
const onClickRow = (0,
|
|
183
|
+
const [open, setOpen] = (0, import_react3.useState)(false);
|
|
184
|
+
const onClickRow = (0, import_react3.useCallback)(() => {
|
|
475
185
|
var _a;
|
|
476
186
|
(_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
|
|
477
187
|
setOpen((prev) => !prev);
|
|
478
188
|
}, [props, row.original]);
|
|
479
|
-
return /* @__PURE__ */ (0,
|
|
189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
480
190
|
"div",
|
|
481
191
|
{
|
|
482
192
|
className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
|
|
483
193
|
children: [
|
|
484
|
-
/* @__PURE__ */ (0,
|
|
194
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
485
195
|
"button",
|
|
486
196
|
{
|
|
487
197
|
className: "tr",
|
|
@@ -491,7 +201,7 @@ function Row(props) {
|
|
|
491
201
|
children: row.getVisibleCells().map((cell) => {
|
|
492
202
|
var _a, _b;
|
|
493
203
|
const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
|
|
494
|
-
return /* @__PURE__ */ (0,
|
|
204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
495
205
|
"div",
|
|
496
206
|
{
|
|
497
207
|
className: "td",
|
|
@@ -501,7 +211,7 @@ function Row(props) {
|
|
|
501
211
|
},
|
|
502
212
|
children: [
|
|
503
213
|
(0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
|
|
504
|
-
((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0,
|
|
214
|
+
((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
505
215
|
cell.column.columnDef.meta.OpenBtn,
|
|
506
216
|
{
|
|
507
217
|
data: row.original,
|
|
@@ -517,7 +227,7 @@ function Row(props) {
|
|
|
517
227
|
},
|
|
518
228
|
`tr_${row.id}`
|
|
519
229
|
),
|
|
520
|
-
ExpandComp ? /* @__PURE__ */ (0,
|
|
230
|
+
ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpandComp, { row }) }) }) : null
|
|
521
231
|
]
|
|
522
232
|
},
|
|
523
233
|
`tr-wrapper_${row.id}`
|
|
@@ -525,10 +235,10 @@ function Row(props) {
|
|
|
525
235
|
}
|
|
526
236
|
|
|
527
237
|
// src/molecules/expand-table/index.tsx
|
|
528
|
-
var
|
|
238
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
529
239
|
function ExpandTable(props) {
|
|
530
240
|
const { data, columns, ExpandComp, placeholder, onRowClick } = props;
|
|
531
|
-
const [sorting, setSorting] = (0,
|
|
241
|
+
const [sorting, setSorting] = (0, import_react4.useState)([]);
|
|
532
242
|
const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
|
|
533
243
|
data: data || [],
|
|
534
244
|
columns,
|
|
@@ -539,7 +249,7 @@ function ExpandTable(props) {
|
|
|
539
249
|
},
|
|
540
250
|
onSortingChange: setSorting
|
|
541
251
|
});
|
|
542
|
-
const gridColTemp = (0,
|
|
252
|
+
const gridColTemp = (0, import_react4.useMemo)(() => {
|
|
543
253
|
return columns.map((col) => {
|
|
544
254
|
var _a;
|
|
545
255
|
if ((_a = col.meta) == null ? void 0 : _a.autoSize)
|
|
@@ -548,8 +258,8 @@ function ExpandTable(props) {
|
|
|
548
258
|
}).join(" ");
|
|
549
259
|
}, [columns]);
|
|
550
260
|
const rowModels = getRowModel();
|
|
551
|
-
return /* @__PURE__ */ (0,
|
|
552
|
-
/* @__PURE__ */ (0,
|
|
261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "expand-table", children: [
|
|
262
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
553
263
|
"div",
|
|
554
264
|
{
|
|
555
265
|
className: "tr",
|
|
@@ -557,30 +267,30 @@ function ExpandTable(props) {
|
|
|
557
267
|
children: headerGroup.headers.map((header) => {
|
|
558
268
|
const sortable = header.column.getCanSort();
|
|
559
269
|
const sortedState = header.column.getIsSorted();
|
|
560
|
-
return /* @__PURE__ */ (0,
|
|
270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
561
271
|
"button",
|
|
562
272
|
{
|
|
563
273
|
onClick: header.column.getToggleSortingHandler(),
|
|
564
274
|
style: sortable ? { cursor: "pointer" } : void 0,
|
|
565
275
|
type: "button",
|
|
566
276
|
children: [
|
|
567
|
-
/* @__PURE__ */ (0,
|
|
277
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
|
|
568
278
|
header.column.columnDef.header,
|
|
569
279
|
header.getContext()
|
|
570
280
|
) }),
|
|
571
|
-
sortable ? /* @__PURE__ */ (0,
|
|
572
|
-
|
|
281
|
+
sortable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
282
|
+
import_themes.Flex,
|
|
573
283
|
{
|
|
574
284
|
direction: "column",
|
|
575
285
|
style: { marginLeft: "var(--space-2)" },
|
|
576
286
|
children: [
|
|
577
|
-
/* @__PURE__ */ (0,
|
|
287
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
578
288
|
TriangleArrowUpIcon,
|
|
579
289
|
{
|
|
580
290
|
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
581
291
|
}
|
|
582
292
|
),
|
|
583
|
-
/* @__PURE__ */ (0,
|
|
293
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
584
294
|
TriangleArrowDownIcon,
|
|
585
295
|
{
|
|
586
296
|
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
@@ -596,10 +306,10 @@ function ExpandTable(props) {
|
|
|
596
306
|
},
|
|
597
307
|
headerGroup.id
|
|
598
308
|
)) }),
|
|
599
|
-
/* @__PURE__ */ (0,
|
|
600
|
-
rowModels.rows.length === 0 && /* @__PURE__ */ (0,
|
|
309
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "tbody", children: [
|
|
310
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
601
311
|
rowModels.rows.map((row) => {
|
|
602
|
-
return /* @__PURE__ */ (0,
|
|
312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
603
313
|
Row,
|
|
604
314
|
{
|
|
605
315
|
ExpandComp,
|