@reportportal/ui-kit 0.0.1-alpha.150 → 0.0.1-alpha.152

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/table.js CHANGED
@@ -1,4 +1,4 @@
1
- import { T as r } from "./table-82d5455c.js";
1
+ import { T as r } from "./table-2c659767.js";
2
2
  import "react/jsx-runtime";
3
3
  import "react";
4
4
  import "react-resizable";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reportportal/ui-kit",
3
- "version": "0.0.1-alpha.150",
3
+ "version": "0.0.1-alpha.152",
4
4
  "description": "The UI-kit library for ReportPortal Design System.",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -1,597 +0,0 @@
1
- import { jsx as o, jsxs as S } from "react/jsx-runtime";
2
- import { useMemo as se, useState as $, useCallback as x, useEffect as re, useRef as oe, forwardRef as Ue } from "react";
3
- import { Resizable as je } from "react-resizable";
4
- import { c as ce } from "./bind-06a7ff84.js";
5
- import { c as He, b as ee, a as le, S as Be } from "./resizeColumn-d4107941.js";
6
- import { C as te } from "./checkbox-ed6cc375.js";
7
- import { Tooltip as Ge } from "./tooltip.js";
8
- import { i as Xe } from "./isEmpty-ccacb5ff.js";
9
- const ie = (l) => typeof l == "string", Ve = "_table_1244e_1", Ye = "_resizable_1244e_46", qe = "_selectable_1244e_63", Je = "_expanded_1244e_59", Qe = "_label_1244e_303", Ze = {
10
- table: Ve,
11
- "fixed-header": "_fixed-header_1244e_8",
12
- "horizontally-scrollable-container": "_horizontally-scrollable-container_1244e_14",
13
- "table-header": "_table-header_1244e_19",
14
- "sticky-header": "_sticky-header_1244e_26",
15
- "horizontally-scrollable": "_horizontally-scrollable_1244e_14",
16
- resizable: Ye,
17
- "resizable-column": "_resizable-column_1244e_46",
18
- "table-row": "_table-row_1244e_54",
19
- "expanded-cell": "_expanded-cell_1244e_59",
20
- selectable: qe,
21
- "row-content-wrapper": "_row-content-wrapper_1244e_67",
22
- "table-row-content": "_table-row-content_1244e_75",
23
- "expand-cell": "_expand-cell_1244e_89",
24
- "size-small": "_size-small_1244e_92",
25
- "size-large": "_size-large_1244e_103",
26
- "table-body": "_table-body_1244e_115",
27
- "scrollable-body": "_scrollable-body_1244e_121",
28
- "table-header-cell": "_table-header-cell_1244e_181",
29
- "table-cell": "_table-cell_1244e_182",
30
- "action-menu-cell": "_action-menu-cell_1244e_188",
31
- "checkbox-cell": "_checkbox-cell_1244e_213",
32
- "expand-all-tooltip-wrapper": "_expand-all-tooltip-wrapper_1244e_255",
33
- "expand-all-tooltip-content": "_expand-all-tooltip-content_1244e_264",
34
- "expand-icon": "_expand-icon_1244e_273",
35
- expanded: Je,
36
- "primary-cell": "_primary-cell_1244e_282",
37
- label: Qe,
38
- "sortable-cell": "_sortable-cell_1244e_317",
39
- "align-right": "_align-right_1244e_320",
40
- "align-center": "_align-center_1244e_326",
41
- "pinned-column": "_pinned-column_1244e_329"
42
- }, de = "asc", m = 32, he = 100, Ke = 48, Fe = (l) => l.toLowerCase() === de, Re = (l) => l.map((n) => n.key), N = (l) => "primary" in l && l.primary === !0, Ie = (l) => {
43
- var s;
44
- return `size-${((s = l.rowConfigs) == null ? void 0 : s.size) ?? "default"}`;
45
- }, j = (l) => ie(l) ? l : `${l}px`, el = (l, n, s, c, i) => {
46
- let a = 0;
47
- c && (a += m), i && (a += m);
48
- for (let p = 0; p < l; p++) {
49
- const u = n[p];
50
- if (N(u)) {
51
- const t = s.current.get(u.key) || he;
52
- a += t;
53
- } else {
54
- const t = u, h = ie(t.width) ? parseInt(t.width, 10) || 0 : t.width;
55
- a += h;
56
- }
57
- }
58
- return a;
59
- }, W = (l, n, s, c, i, a, p) => {
60
- const u = {};
61
- if (!N(l)) {
62
- const t = l;
63
- u.textAlign = t.align;
64
- }
65
- if (n && s !== void 0) {
66
- const t = el(
67
- s,
68
- c,
69
- i,
70
- a,
71
- p
72
- );
73
- u.left = `${t}px`;
74
- }
75
- return u;
76
- }, ne = (l, n, s, c, i, a = !1, p, u = !1) => {
77
- const t = [];
78
- s && t.push(`${m}px`), a && c && t.push(`${m}px`);
79
- const h = (r) => {
80
- if ((p == null ? void 0 : p[r.key]) !== void 0) {
81
- t.push(`${p[r.key]}px`);
82
- return;
83
- }
84
- if (N(r)) {
85
- const f = r;
86
- if (u && f.width) {
87
- t.push(j(f.width));
88
- return;
89
- }
90
- const y = f.width ? j(f.width) : `${he}px`;
91
- t.push(`minmax(${y}, 1fr)`);
92
- } else {
93
- const y = j(r.width);
94
- t.push(y);
95
- }
96
- };
97
- return l.forEach(h), n.forEach(h), i && t.push(`${Ke}px`), t.join(" ");
98
- }, ll = ({
99
- primaryColumns: l,
100
- fixedColumns: n,
101
- pinnedColumnKeys: s
102
- }) => se(() => {
103
- const c = [], i = [];
104
- return l.forEach((a) => {
105
- const p = { ...a, primary: !0 };
106
- s.includes(a.key) ? c.push(p) : i.push(p);
107
- }), n.forEach((a) => {
108
- s.includes(a.key) ? c.push(a) : i.push(a);
109
- }), {
110
- pinnedColumns: c,
111
- scrollableColumns: i
112
- };
113
- }, [l, n, s]), tl = () => {
114
- const [l, n] = $(null), [s, c] = $(null), i = x((t) => {
115
- n(t);
116
- }, []), a = x(() => {
117
- n(null);
118
- }, []), p = x((t) => {
119
- c(t);
120
- }, []), u = x(() => {
121
- c(null);
122
- }, []);
123
- return {
124
- hoveredColumn: l,
125
- hoveredRow: s,
126
- handleColumnMouseEnter: i,
127
- handleColumnMouseLeave: a,
128
- handleRowMouseEnter: p,
129
- handleRowMouseLeave: u
130
- };
131
- }, nl = ({
132
- primaryColumns: l,
133
- fixedColumns: n,
134
- expandedRowIds: s,
135
- onToggleRowExpansion: c
136
- }) => {
137
- const [i, a] = $(/* @__PURE__ */ new Set());
138
- re(() => {
139
- const t = [
140
- ...l.map((r) => r.key),
141
- ...n.map((r) => r.key)
142
- ], h = /* @__PURE__ */ new Set();
143
- s.forEach((r) => {
144
- t.forEach((f) => {
145
- h.add(`${r}-${f}`);
146
- });
147
- }), a((r) => {
148
- if (r.size === h.size) {
149
- let f = !0;
150
- if (r.forEach((y) => {
151
- h.has(y) || (f = !1);
152
- }), f)
153
- return r;
154
- }
155
- return h;
156
- });
157
- }, [s, l, n]);
158
- const p = x(
159
- (t) => {
160
- const h = new Set(i), r = s.includes(t), f = [
161
- ...l.map((y) => y.key),
162
- ...n.map((y) => y.key)
163
- ];
164
- r ? f.forEach((y) => {
165
- const k = `${t}-${y}`;
166
- h.delete(k);
167
- }) : f.forEach((y) => {
168
- const k = `${t}-${y}`;
169
- h.add(k);
170
- }), a(h), c(t);
171
- },
172
- [i, s, l, n, c]
173
- ), u = x(
174
- (t, h) => {
175
- const r = `${t}-${h}`;
176
- return i.has(r);
177
- },
178
- [i]
179
- );
180
- return {
181
- expandedCells: i,
182
- handleToggleRowExpansion: p,
183
- isCellExpanded: u
184
- };
185
- }, al = () => {
186
- const l = oe(/* @__PURE__ */ new Map()), n = x(
187
- (s) => (c) => {
188
- if (!c)
189
- return;
190
- const i = c.getBoundingClientRect().width;
191
- i > 0 && l.current.set(s, i);
192
- },
193
- []
194
- );
195
- return {
196
- columnWidthsRef: l,
197
- setCellRef: n
198
- };
199
- }, sl = ({
200
- enabled: l = !1,
201
- minWidth: n = 50,
202
- maxWidth: s = 500,
203
- columnWidthsRef: c,
204
- onColumnResize: i
205
- }) => {
206
- const [a, p] = $({}), u = x(() => {
207
- if (!l || Object.keys(a).length > 0 || !c)
208
- return;
209
- const r = {};
210
- c.current.forEach((f, y) => {
211
- r[y] = f;
212
- }), p(r);
213
- }, [l, a, c]), t = x(
214
- (r) => (f, { size: y }) => {
215
- if (!l)
216
- return;
217
- const k = Math.min(s, Math.max(n, y.width));
218
- p((z) => ({ ...z, [r]: k }));
219
- },
220
- [l, n, s]
221
- ), h = x(
222
- (r) => () => {
223
- !l || !a[r] || i == null || i(r, a[r]);
224
- },
225
- [l, a, i]
226
- );
227
- return {
228
- columnWidths: a,
229
- handleResize: t,
230
- handleResizeStop: h,
231
- handleResizeStart: u
232
- };
233
- }, rl = {
234
- "resize-handle": "_resize-handle_15uk3_1"
235
- }, ol = ce.bind(rl), cl = Ue(
236
- (l, n) => /* @__PURE__ */ o("div", { ref: n, className: ol("resize-handle"), ...l, children: /* @__PURE__ */ o(He, {}) })
237
- ), d = ce.bind(Ze), ae = ({ column: l }) => {
238
- const n = oe(null), [s, c] = $(!1);
239
- return re(() => {
240
- if (n.current) {
241
- const i = n.current.offsetWidth, a = n.current.scrollWidth;
242
- c(a > i);
243
- }
244
- }, [l.header]), /* @__PURE__ */ o("span", { ref: n, title: s ? l.header : void 0, children: l.header });
245
- }, bl = ({
246
- data: l,
247
- primaryColumn: n,
248
- fixedColumns: s,
249
- renderRowActions: c,
250
- className: i = "",
251
- rowClassName: a = "",
252
- headerClassName: p = "",
253
- bodyClassName: u = "",
254
- selectable: t = !1,
255
- selectedRowIds: h = [],
256
- sortingDirection: r = de,
257
- sortingColumn: f,
258
- sortableColumns: y,
259
- isHeaderFixed: k = !1,
260
- isHorizontallyScrollable: z = !1,
261
- pinnedColumnKeys: pe = [],
262
- isRowsExpandable: v = !1,
263
- expandedRowIds: E = [],
264
- isAllExpandedByDefault: H,
265
- expandAllTooltip: B,
266
- isResizable: b = !1,
267
- minColumnWidth: D = 50,
268
- maxColumnWidth: G = 500,
269
- isSelectAllCheckboxAlwaysVisible: _e = !1,
270
- onChangeSorting: ye = () => {
271
- },
272
- onToggleRowSelection: fe = () => {
273
- },
274
- onToggleAllRowsSelection: ue = () => {
275
- },
276
- onToggleRowExpansion: be = () => {
277
- },
278
- onToggleAllRowsExpansion: ke = () => {
279
- },
280
- onColumnResize: ve = () => {
281
- }
282
- }) => {
283
- const T = se(
284
- () => Array.isArray(n) ? n : [n],
285
- [n]
286
- ), w = f ?? T[0], A = y ?? Re([...T, ...s]), { pinnedColumns: g, scrollableColumns: L } = ll({
287
- primaryColumns: T,
288
- fixedColumns: s,
289
- pinnedColumnKeys: pe
290
- }), {
291
- hoveredColumn: X,
292
- hoveredRow: xe,
293
- handleColumnMouseEnter: V,
294
- handleColumnMouseLeave: Y,
295
- handleRowMouseEnter: we,
296
- handleRowMouseLeave: Ce
297
- } = tl(), { columnWidthsRef: M, setCellRef: q } = al(), { handleToggleRowExpansion: ge, isCellExpanded: J } = nl({
298
- primaryColumns: T,
299
- fixedColumns: s,
300
- expandedRowIds: E,
301
- onToggleRowExpansion: be
302
- }), { columnWidths: O, handleResize: Ne, handleResizeStop: Se, handleResizeStart: me } = sl({
303
- enabled: b,
304
- minWidth: D,
305
- maxWidth: G,
306
- columnWidthsRef: M,
307
- onColumnResize: ve
308
- }), Q = (e, C) => /* @__PURE__ */ o(
309
- je,
310
- {
311
- width: O[e.key] ?? (typeof e.width == "number" ? e.width : D),
312
- height: 0,
313
- axis: "x",
314
- handle: /* @__PURE__ */ o(cl, {}),
315
- onResizeStart: me,
316
- onResize: Ne(e.key),
317
- onResizeStop: Se(e.key),
318
- minConstraints: [D, 0],
319
- maxConstraints: [G, 0],
320
- className: d("resizable-column"),
321
- children: C
322
- },
323
- e.key
324
- ), Z = (e) => {
325
- A.includes(e) && ye({ key: e, direction: r });
326
- }, ze = (e) => {
327
- fe(e);
328
- }, Ee = () => {
329
- ue();
330
- }, Me = () => {
331
- ke();
332
- }, K = (e) => A.includes(e) ? (w == null ? void 0 : w.key) === e ? Fe(r) ? /* @__PURE__ */ o(le, {}) : /* @__PURE__ */ o(Be, {}) : /* @__PURE__ */ o(le, {}) : null, $e = l.every((e) => h.includes(e.id)), Te = l.some((e) => h.includes(e.id)), F = (h == null ? void 0 : h.length) > 0, Ae = !Xe(l), Le = _e && Ae || F, Pe = l.every((e) => E.includes(e.id)), We = H !== void 0 ? H : Pe, De = ne(
333
- g,
334
- L,
335
- v,
336
- t,
337
- !!c,
338
- !1,
339
- b ? O : void 0,
340
- b
341
- ), Oe = ne(
342
- g,
343
- L,
344
- v,
345
- t,
346
- !!c,
347
- !0,
348
- b ? O : void 0,
349
- b
350
- ), R = /* @__PURE__ */ o("button", { onClick: Me, "aria-label": "Toggle all rows expansion", children: /* @__PURE__ */ o("span", { className: d("expand-icon", { expanded: We }), children: /* @__PURE__ */ o(ee, {}) }) });
351
- return /* @__PURE__ */ S(
352
- "div",
353
- {
354
- className: d(
355
- "table",
356
- {
357
- "fixed-header": k,
358
- "horizontally-scrollable-container": k && (z || b)
359
- },
360
- i
361
- ),
362
- children: [
363
- /* @__PURE__ */ S(
364
- "div",
365
- {
366
- className: d(
367
- "table-header",
368
- {
369
- "sticky-header": k,
370
- "horizontally-scrollable": z,
371
- resizable: b
372
- },
373
- p
374
- ),
375
- style: { gridTemplateColumns: Oe },
376
- children: [
377
- t && /* @__PURE__ */ o(
378
- "div",
379
- {
380
- className: d("table-header-cell", "checkbox-cell"),
381
- style: { left: v ? `${m}px` : "0" },
382
- children: Le && /* @__PURE__ */ o(
383
- te,
384
- {
385
- value: $e,
386
- partiallyChecked: Te,
387
- onChange: Ee,
388
- className: d("checkbox-cell")
389
- }
390
- )
391
- }
392
- ),
393
- v && /* @__PURE__ */ o("div", { className: d("table-header-cell", "expand-cell"), style: { left: "0" }, children: B ? /* @__PURE__ */ o(
394
- Ge,
395
- {
396
- content: B,
397
- placement: "top",
398
- wrapperClassName: d("expand-all-tooltip-wrapper"),
399
- contentClassName: d("expand-all-tooltip-content"),
400
- children: R
401
- }
402
- ) : R }),
403
- g.map((e, C) => {
404
- const _ = /* @__PURE__ */ o(
405
- "button",
406
- {
407
- className: d("table-header-cell", "pinned-column", {
408
- [`align-${e.align}`]: "align" in e,
409
- "primary-cell": N(e),
410
- "sortable-cell": A.includes(e.key),
411
- resizable: b
412
- }),
413
- style: W(
414
- e,
415
- !0,
416
- C,
417
- g,
418
- M,
419
- v,
420
- t
421
- ),
422
- children: /* @__PURE__ */ S(
423
- "div",
424
- {
425
- className: d("label"),
426
- onClick: () => Z(e.key),
427
- onMouseEnter: () => V(e.key),
428
- onMouseLeave: Y,
429
- children: [
430
- /* @__PURE__ */ o(ae, { column: e }),
431
- (X === e.key || (w == null ? void 0 : w.key) === e.key) && K(e.key)
432
- ]
433
- }
434
- )
435
- },
436
- e.key
437
- );
438
- return b ? Q(e, _) : _;
439
- }),
440
- L.map((e) => {
441
- const C = /* @__PURE__ */ o(
442
- "button",
443
- {
444
- className: d("table-header-cell", {
445
- [`align-${e.align}`]: "align" in e,
446
- "primary-cell": N(e),
447
- "sortable-cell": A.includes(e.key),
448
- resizable: b
449
- }),
450
- style: W(
451
- e,
452
- !1,
453
- void 0,
454
- g,
455
- M,
456
- v,
457
- t
458
- ),
459
- children: /* @__PURE__ */ S(
460
- "div",
461
- {
462
- className: d("label"),
463
- onClick: () => Z(e.key),
464
- onMouseEnter: () => V(e.key),
465
- onMouseLeave: Y,
466
- children: [
467
- /* @__PURE__ */ o(ae, { column: e }),
468
- (X === e.key || (w == null ? void 0 : w.key) === e.key) && K(e.key)
469
- ]
470
- }
471
- )
472
- },
473
- e.key
474
- );
475
- return b ? Q(e, C) : C;
476
- }),
477
- c && /* @__PURE__ */ o("div", { className: d("table-header-cell", "action-menu-cell") })
478
- ]
479
- }
480
- ),
481
- /* @__PURE__ */ o(
482
- "div",
483
- {
484
- className: d(
485
- "table-body",
486
- {
487
- "scrollable-body": k,
488
- "horizontally-scrollable": z,
489
- resizable: b
490
- },
491
- u
492
- ),
493
- children: l.map((e, C) => /* @__PURE__ */ S(
494
- "div",
495
- {
496
- className: d("table-row", Ie(e), a, {
497
- selectable: t
498
- }),
499
- onMouseEnter: () => we(C),
500
- onMouseLeave: Ce,
501
- children: [
502
- t && /* @__PURE__ */ o(
503
- "div",
504
- {
505
- className: d("table-cell", "checkbox-cell"),
506
- style: { left: v ? `${m}px` : "0" },
507
- children: (F || xe === C) && /* @__PURE__ */ o(
508
- te,
509
- {
510
- value: h.includes(e.id),
511
- onChange: () => ze(e.id),
512
- className: d("checkbox-cell")
513
- }
514
- )
515
- }
516
- ),
517
- /* @__PURE__ */ o("div", { className: d("row-content-wrapper"), children: /* @__PURE__ */ S("div", { className: d("table-row-content"), style: { gridTemplateColumns: De }, children: [
518
- v && /* @__PURE__ */ o("div", { className: d("table-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ o(
519
- "button",
520
- {
521
- onClick: () => ge(e.id),
522
- "aria-label": E.includes(e.id) ? "Collapse row" : "Expand row",
523
- "aria-expanded": E.includes(e.id),
524
- children: /* @__PURE__ */ o(
525
- "span",
526
- {
527
- className: d("expand-icon", {
528
- expanded: E.includes(e.id)
529
- }),
530
- children: /* @__PURE__ */ o(ee, {})
531
- }
532
- )
533
- }
534
- ) }),
535
- g.map((_, U) => {
536
- const P = J(e.id, _.key), I = N(_);
537
- return /* @__PURE__ */ o(
538
- "div",
539
- {
540
- ref: I ? q(_.key) : void 0,
541
- className: d("table-cell", "pinned-column", {
542
- "primary-cell": I,
543
- "expanded-cell": P
544
- }),
545
- style: W(
546
- _,
547
- !0,
548
- U,
549
- g,
550
- M,
551
- v,
552
- t
553
- ),
554
- children: e[_.key].component || e[_.key].content || e[_.key]
555
- },
556
- _.key
557
- );
558
- }),
559
- L.map((_) => {
560
- const U = J(e.id, _.key), P = N(_);
561
- return /* @__PURE__ */ o(
562
- "div",
563
- {
564
- ref: P ? q(_.key) : void 0,
565
- className: d("table-cell", {
566
- "primary-cell": P,
567
- "expanded-cell": U
568
- }),
569
- style: W(
570
- _,
571
- !1,
572
- void 0,
573
- g,
574
- M,
575
- v,
576
- t
577
- ),
578
- children: e[_.key].component || e[_.key].content || e[_.key]
579
- },
580
- _.key
581
- );
582
- }),
583
- c && /* @__PURE__ */ o("div", { className: d("table-cell", "action-menu-cell"), children: c(e.metaData) })
584
- ] }) })
585
- ]
586
- },
587
- e.id
588
- ))
589
- }
590
- )
591
- ]
592
- }
593
- );
594
- };
595
- export {
596
- bl as T
597
- };