@canonical/maas-react-components 2.7.0 → 2.7.2

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 (78) hide show
  1. package/dist/@canonical/maas-react-components.es.js +2 -678
  2. package/dist/components/DynamicTable/DynamicTable.d.ts +3 -3
  3. package/dist/components/DynamicTable/DynamicTable.stories.d.ts +1 -1
  4. package/dist/components/FileUpload/FileUpload.stories.d.ts +1 -1
  5. package/dist/components/GenericTable/GenericTable.stories.d.ts +1 -1
  6. package/dist/components/GenericTable/components/PaginationBar/ControlsBar/ControlsBar.d.ts +2 -2
  7. package/dist/components/GenericTable/components/TableCheckbox/TableCheckbox.d.ts +2 -2
  8. package/dist/components/GenericTable/utils/renderDataRows.d.ts +1 -1
  9. package/dist/components/GenericTable/utils/renderLoadingRows.d.ts +1 -1
  10. package/dist/components/MultiSelect/MultiSelect.stories.d.ts +1 -1
  11. package/dist/components/NestedFormGroup/NestedFormGroup.d.ts +1 -1
  12. package/dist/components/NestedFormGroup/NestedFormGroup.stories.d.ts +2 -2
  13. package/dist/components/Pagination/Pagination.stories.d.ts +3 -3
  14. package/dist/components/QueryInput/QueryInput.stories.d.ts +1 -1
  15. package/dist/components/Stepper/Stepper.stories.d.ts +1 -1
  16. package/dist/components/TableCaption/TableCaption.d.ts +3 -3
  17. package/dist/components/TableCaption/TableCaption.stories.d.ts +1 -1
  18. package/dist/constants.d.ts +6 -0
  19. package/dist/elements/ExternalLink/ExternalLink.d.ts +1 -1
  20. package/dist/elements/ExternalLink/ExternalLink.stories.d.ts +1 -1
  21. package/dist/elements/Meter/Meter.d.ts +2 -2
  22. package/dist/elements/Meter/Meter.stories.d.ts +2 -2
  23. package/dist/elements/Placeholder/Placeholder.stories.d.ts +1 -1
  24. package/dist/lib-BEVV6FLF.mjs +2018 -0
  25. package/dist/maas-react-components.css +2 -1
  26. package/dist/sections/ContentSection/ContentSection.d.ts +6 -6
  27. package/dist/sections/ContentSection/ContentSection.stories.d.ts +5 -5
  28. package/dist/sections/FormSection/FormSection.d.ts +4 -4
  29. package/dist/sections/FormSection/FormSection.stories.d.ts +3 -3
  30. package/dist/sections/InputGroup/InputGroup.d.ts +3 -3
  31. package/dist/sections/InputGroup/InputGroup.stories.d.ts +3 -3
  32. package/dist/sections/MainToolbar/MainToolbar.d.ts +4 -4
  33. package/dist/sections/MainToolbar/MainToolbar.stories.d.ts +2 -2
  34. package/dist/sections/Navigation/Banner/Banner.d.ts +1 -1
  35. package/dist/sections/Navigation/Banner/Banner.stories.d.ts +2 -2
  36. package/dist/sections/Navigation/CollapseToggle/CollapseToggle.stories.d.ts +1 -1
  37. package/dist/sections/Navigation/Content/Content.d.ts +1 -1
  38. package/dist/sections/Navigation/Content/Content.stories.d.ts +2 -2
  39. package/dist/sections/Navigation/Controls/Controls.d.ts +1 -1
  40. package/dist/sections/Navigation/Controls/Controls.stories.d.ts +2 -2
  41. package/dist/sections/Navigation/Drawer/Drawer.d.ts +1 -1
  42. package/dist/sections/Navigation/Drawer/Drawer.stories.d.ts +2 -2
  43. package/dist/sections/Navigation/Footer/Footer.d.ts +1 -1
  44. package/dist/sections/Navigation/Footer/Footer.stories.d.ts +2 -2
  45. package/dist/sections/Navigation/Header/Header.d.ts +1 -1
  46. package/dist/sections/Navigation/Header/Header.stories.d.ts +2 -2
  47. package/dist/sections/Navigation/Icon/Icon.d.ts +1 -1
  48. package/dist/sections/Navigation/Icon/Icon.stories.d.ts +1 -1
  49. package/dist/sections/Navigation/Item/Item.d.ts +1 -1
  50. package/dist/sections/Navigation/Item/Item.stories.d.ts +3 -3
  51. package/dist/sections/Navigation/Label/Label.d.ts +1 -1
  52. package/dist/sections/Navigation/Label/Label.stories.d.ts +1 -1
  53. package/dist/sections/Navigation/Link/Link.d.ts +2 -2
  54. package/dist/sections/Navigation/Link/Link.stories.d.ts +3 -3
  55. package/dist/sections/Navigation/List/List.d.ts +1 -1
  56. package/dist/sections/Navigation/List/List.stories.d.ts +2 -2
  57. package/dist/sections/Navigation/Logo/Logo.d.ts +2 -2
  58. package/dist/sections/Navigation/Logo/Logo.stories.d.ts +2 -2
  59. package/dist/sections/Navigation/LogoIcon/LogoIcon.stories.d.ts +2 -2
  60. package/dist/sections/Navigation/LogoName/LogoName.d.ts +1 -1
  61. package/dist/sections/Navigation/LogoName/LogoName.stories.d.ts +1 -1
  62. package/dist/sections/Navigation/LogoTag/LogoTag.d.ts +1 -1
  63. package/dist/sections/Navigation/LogoTag/LogoTag.stories.d.ts +2 -2
  64. package/dist/sections/Navigation/LogoText/LogoText.d.ts +1 -1
  65. package/dist/sections/Navigation/MenuButton/MenuButton.d.ts +1 -1
  66. package/dist/sections/Navigation/MenuButton/MenuButton.stories.d.ts +1 -1
  67. package/dist/sections/Navigation/Navigation.d.ts +19 -19
  68. package/dist/sections/Navigation/Navigation.stories.d.ts +3 -3
  69. package/dist/sections/Navigation/Text/Text.d.ts +1 -1
  70. package/dist/sections/SidePanel/SidePanel.stories.d.ts +1 -1
  71. package/dist/sections/SidePanel/index.d.ts +1 -0
  72. package/dist/testing/index.es.js +112 -129
  73. package/dist/testing/mockSidePanel.d.ts +3 -2
  74. package/dist/testing/spyOnMutation.d.ts +2 -1
  75. package/dist/types.d.ts +7 -0
  76. package/dist/utils/formatBytes/formatBytes.stories.d.ts +1 -1
  77. package/package.json +12 -15
  78. package/dist/QueryInput-D7uXzKgr.mjs +0 -1648
@@ -1,1648 +0,0 @@
1
- import { jsxs as b, jsx as t, Fragment as A } from "react/jsx-runtime";
2
- import * as y from "react";
3
- import { useRef as M, useState as P, useEffect as I, useCallback as F, createContext as J, useId as Ke, useContext as V, Children as ze, Suspense as Be, cloneElement as Oe, useLayoutEffect as Q, useMemo as z, Fragment as je } from "react";
4
- import { useListener as Ge, Row as Ve, Col as qe, AppAside as Ue, useOnEscapePressed as We, Application as Xe, AppMain as Ye, Tooltip as Z, Button as O, Icon as E, Input as Je, Select as Qe, ICONS as X, Spinner as Ze } from "@canonical/react-components";
5
- import k from "classnames";
6
- import { useLocation as et } from "react-router";
7
- import "react-dropzone";
8
- import { flexRender as ce, useReactTable as tt, getGroupedRowModel as nt, getCoreRowModel as ot, getExpandedRowModel as rt } from "@tanstack/react-table";
9
- const $ = {
10
- caution: "#F99B11",
11
- light: "#F7F7F7",
12
- linkFaded: "#D3E4ED",
13
- link: "#0066CC",
14
- negative: "#C7162B",
15
- positiveFaded: "#B7CCB9",
16
- positiveMid: "#4DAB4D",
17
- positive: "#0E8420"
18
- }, yn = [
19
- $.link,
20
- $.positive,
21
- $.negative,
22
- $.caution
23
- ], at = $.linkFaded, de = $.caution, Y = $.light, ae = 2, le = 1, ie = (e, n) => {
24
- var i, l;
25
- const o = ((l = (i = e == null ? void 0 : e.current) == null ? void 0 : i.getBoundingClientRect()) == null ? void 0 : l.width) || 0;
26
- return o > n * ae ? o / n : ae;
27
- }, K = {
28
- bar: "meter-bar",
29
- container: "meter-container",
30
- filled: "meter-filled",
31
- label: "meter-label",
32
- meteroverflow: "meter-overflow",
33
- segments: "meter-segments"
34
- }, lt = ({
35
- className: e,
36
- children: n,
37
- data: o,
38
- max: a,
39
- variant: i = "regular",
40
- size: l = "regular",
41
- ...d
42
- }) => {
43
- const r = M(null), s = o == null ? void 0 : o.reduce((h, m) => h + m.value, 0), c = a || s, u = o.map((h) => h.value / c * 100), [v, g] = P(0);
44
- I(() => {
45
- g(i === "segmented" ? ie(r, c) : 0);
46
- }, [c, i]);
47
- const f = F(() => {
48
- g(ie(r, c));
49
- }, [r, c, g]);
50
- return Ge(window, f, "resize", !0, i === "segmented"), /* @__PURE__ */ b(
51
- "div",
52
- {
53
- className: k("p-meter", e, {
54
- "p-meter--small": l === "small"
55
- }),
56
- "aria-label": d == null ? void 0 : d["aria-label"],
57
- "data-testid": K.container,
58
- ref: r,
59
- children: [
60
- /* @__PURE__ */ t(it, { children: /* @__PURE__ */ t(
61
- st,
62
- {
63
- data: o,
64
- datumWidths: u,
65
- maximum: c,
66
- overColor: de,
67
- segmentWidth: v,
68
- separatorColor: Y
69
- }
70
- ) }),
71
- n
72
- ]
73
- }
74
- );
75
- }, it = ({ children: e }) => /* @__PURE__ */ t(
76
- "div",
77
- {
78
- className: "p-meter__bar",
79
- "data-testid": K.bar,
80
- style: { backgroundColor: at },
81
- children: e
82
- }
83
- ), st = ({
84
- data: e,
85
- datumWidths: n,
86
- maximum: o,
87
- segmentWidth: a
88
- }) => {
89
- const i = () => (e == null ? void 0 : e.reduce((r, s) => r + s.value, 0)) > o, l = (r, s) => ({
90
- backgroundColor: r.color,
91
- left: `${n == null ? void 0 : n.reduce(
92
- (c, u, v) => s > v ? c + u : c,
93
- 0
94
- )}%`,
95
- width: `${n[s]}%`
96
- }), d = () => ({
97
- background: `repeating-linear-gradient(
98
- to right,
99
- transparent 0,
100
- transparent ${a - le}px,
101
- ${Y} ${a - le}px,
102
- ${Y} ${a}px
103
- )`
104
- });
105
- return /* @__PURE__ */ b(A, { children: [
106
- i() ? /* @__PURE__ */ t(
107
- "div",
108
- {
109
- className: "p-meter__filled",
110
- "data-testid": K.meteroverflow,
111
- style: { backgroundColor: de, width: "100%" }
112
- }
113
- ) : e == null ? void 0 : e.map((r, s) => /* @__PURE__ */ t(
114
- "div",
115
- {
116
- className: "p-meter__filled",
117
- "data-testid": K.filled,
118
- style: l(r, s)
119
- },
120
- `meter-${s}`
121
- )),
122
- a > 0 && /* @__PURE__ */ t(
123
- "div",
124
- {
125
- className: "p-meter__separators",
126
- "data-testid": K.segments,
127
- style: d()
128
- }
129
- )
130
- ] });
131
- }, ct = ({
132
- className: e,
133
- children: n
134
- }) => /* @__PURE__ */ t(
135
- "div",
136
- {
137
- className: k("p-meter__label", e),
138
- "data-testid": K.label,
139
- children: n
140
- }
141
- );
142
- lt.Label = ct;
143
- const w = ({
144
- className: e,
145
- width: n,
146
- height: o,
147
- isPending: a,
148
- text: i,
149
- children: l,
150
- variant: d = "text",
151
- style: r,
152
- ...s
153
- }) => {
154
- if (I(() => {
155
- a !== void 0 && console.warn(
156
- "[Placeholder] The `isPending` prop is deprecated and will be removed in a future major version. Control skeleton visibility with conditional rendering at the call-site instead."
157
- );
158
- }, [a]), I(() => {
159
- i !== void 0 && console.warn(
160
- "[Placeholder] The `text` prop is deprecated and will be removed in a future major version. Use the `width` prop to set the skeleton width."
161
- );
162
- }, [i]), I(() => {
163
- l !== void 0 && console.warn(
164
- "[Placeholder] Passing `children` to Placeholder is deprecated and will be removed in a future major version. Render children outside the Placeholder and control visibility at the call-site."
165
- );
166
- }, [l]), d === "text") {
167
- if (!a)
168
- return /* @__PURE__ */ t(A, { children: l });
169
- const u = Math.floor(Math.random() * 750), v = n ?? "fit-content";
170
- return /* @__PURE__ */ t(
171
- "div",
172
- {
173
- "aria-label": "loading",
174
- className: k("p-placeholder", e),
175
- role: "progressbar",
176
- style: { animationDelay: `${u}ms`, width: v, height: o, ...r },
177
- ...s,
178
- children: /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "p-placeholder__sizer", children: i || l || "Loading" })
179
- }
180
- );
181
- }
182
- const c = i && !n ? "fit-content" : n;
183
- return /* @__PURE__ */ t(
184
- "div",
185
- {
186
- "aria-label": "loading",
187
- className: k("p-placeholder", e),
188
- role: "progressbar",
189
- style: { width: c, height: o, ...r },
190
- ...s
191
- }
192
- );
193
- }, C = ({
194
- children: e,
195
- className: n,
196
- as: o,
197
- variant: a = "wide",
198
- ...i
199
- }) => {
200
- const l = o || "section", d = k("content-section", n);
201
- return /* @__PURE__ */ t(l, { ...i, className: d, children: /* @__PURE__ */ t(Ve, { children: /* @__PURE__ */ t(qe, { size: a === "narrow" ? 6 : 12, children: /* @__PURE__ */ t(A, { children: e }) }) }) });
202
- }, dt = ({ children: e, className: n, as: o, ...a }) => /* @__PURE__ */ t(
203
- o || "h1",
204
- {
205
- ...a,
206
- className: k("content-section__title p-heading--4", n),
207
- children: e
208
- }
209
- ), ut = ({ children: e, className: n }) => /* @__PURE__ */ t("header", { className: k("content-section__header", n), children: e }), ht = ({ children: e, className: n }) => /* @__PURE__ */ t("div", { className: k("content-section__body", n), children: e }), gt = ({ children: e, className: n }) => /* @__PURE__ */ t("footer", { className: k("content-section__footer", n), children: e });
210
- C.Title = dt;
211
- C.Header = ut;
212
- C.Content = ht;
213
- C.Footer = gt;
214
- const ee = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-form-section", children: e }), mt = ({ children: e }) => /* @__PURE__ */ t("h5", { className: "p-form-section__title u-no-padding--top", children: e }), pt = ({ children: e }) => /* @__PURE__ */ t("p", { className: "p-form-help-text", children: e }), bt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-form-section__content", children: e });
215
- ee.Title = mt;
216
- ee.Description = pt;
217
- ee.Content = bt;
218
- const te = J(null), ue = ({ children: e }) => {
219
- const n = Ke();
220
- return /* @__PURE__ */ t(te.Provider, { value: n, children: /* @__PURE__ */ t(
221
- "div",
222
- {
223
- role: "group",
224
- "aria-labelledby": `${n}_label`,
225
- "aria-describedby": `${n}_description`,
226
- className: "p-input-group",
227
- children: e
228
- }
229
- ) });
230
- }, ft = ({ children: e }) => {
231
- const n = V(te);
232
- return /* @__PURE__ */ t("label", { id: `${n}_label`, children: e });
233
- }, vt = ({ children: e }) => {
234
- const n = V(te);
235
- return /* @__PURE__ */ t("p", { className: "p-form-help-text", id: `${n}_description`, children: e });
236
- };
237
- ue.Label = ft;
238
- ue.Description = vt;
239
- const _t = ({ children: e }) => (I(() => {
240
- document.title = ze.toArray(e).join("");
241
- }, [e]), null), he = J(null), q = () => {
242
- const e = V(he);
243
- if (!e)
244
- throw new Error("useSidePanel must be used within a SidePanelProvider");
245
- return e;
246
- }, In = ({
247
- children: e
248
- }) => {
249
- const [n, o] = P({
250
- isOpen: !1,
251
- title: "",
252
- size: "regular",
253
- component: null,
254
- props: {}
255
- }), a = ({
256
- component: d,
257
- title: r,
258
- props: s = {},
259
- size: c = "regular"
260
- }) => {
261
- o({
262
- isOpen: !0,
263
- title: r,
264
- size: c,
265
- component: d,
266
- props: s || {}
267
- });
268
- }, i = () => {
269
- o({
270
- isOpen: !1,
271
- title: "",
272
- size: "regular",
273
- component: null,
274
- props: {}
275
- });
276
- }, l = F((d) => {
277
- o((r) => ({ ...r, size: d }));
278
- }, []);
279
- return /* @__PURE__ */ t(
280
- he.Provider,
281
- {
282
- value: {
283
- ...n,
284
- openSidePanel: a,
285
- closeSidePanel: i,
286
- setSidePanelSize: l
287
- },
288
- children: e
289
- }
290
- );
291
- }, kt = () => {
292
- const e = et(), { closeSidePanel: n } = q();
293
- I(
294
- () => {
295
- n();
296
- },
297
- // eslint-disable-next-line react-hooks/exhaustive-deps
298
- [e.pathname, e.search, e.hash]
299
- );
300
- }, wt = () => {
301
- const { setSidePanelSize: e } = q();
302
- I(
303
- () => () => {
304
- e("regular");
305
- },
306
- // eslint-disable-next-line react-hooks/exhaustive-deps
307
- []
308
- );
309
- }, Nt = () => {
310
- const { closeSidePanel: e } = q();
311
- We(() => {
312
- e();
313
- });
314
- }, ge = () => {
315
- Nt(), kt(), wt();
316
- const { isOpen: e, title: n, component: o, props: a, size: i } = q();
317
- return /* @__PURE__ */ t(
318
- Ue,
319
- {
320
- "aria-label": n ?? void 0,
321
- className: k({
322
- "is-narrow": i === "narrow",
323
- "is-large": i === "large",
324
- "is-wide": i === "wide"
325
- }),
326
- collapsed: !e,
327
- id: "aside-panel",
328
- children: /* @__PURE__ */ b(C, { children: [
329
- n ? /* @__PURE__ */ t("div", { className: "row section-header section-header--side-panel", children: /* @__PURE__ */ t("div", { className: "col-12", children: /* @__PURE__ */ t("h3", { className: "section-header__title u-flex--no-shrink p-heading--4", children: n }) }) }) : null,
330
- e && o && /* @__PURE__ */ t(o, { ...a })
331
- ] })
332
- }
333
- );
334
- }, xt = ({ hasTitle: e }) => /* @__PURE__ */ b(C, { "aria-hidden": "true", className: "aside-skeleton", children: [
335
- e && /* @__PURE__ */ t(C.Title, { children: /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" }) }),
336
- /* @__PURE__ */ b(C.Content, { className: "aside-skeleton__form", children: [
337
- /* @__PURE__ */ b("div", { className: "layout-skeleton__form-description", children: [
338
- /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "100%" }),
339
- /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "70%" })
340
- ] }),
341
- Array.from({ length: 2 }).map((n, o) => /* @__PURE__ */ b(
342
- "div",
343
- {
344
- className: "layout-skeleton__form-field",
345
- children: [
346
- /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "14ch" }),
347
- /* @__PURE__ */ t(w, { height: "2.5rem", variant: "block", width: "100%" })
348
- ]
349
- },
350
- `aside-skeleton-field-${o}`
351
- ))
352
- ] }),
353
- /* @__PURE__ */ b(C.Footer, { className: "aside-skeleton__footer", children: [
354
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "8ch" }),
355
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "10ch" })
356
- ] })
357
- ] });
358
- ge.Skeleton = xt;
359
- const Ct = ({
360
- className: e,
361
- children: n,
362
- pageTitle: o,
363
- view: a,
364
- isSecondaryNavVisible: i,
365
- navigation: l,
366
- secondaryNavigation: d,
367
- statusBar: r
368
- }) => /* @__PURE__ */ b(A, { children: [
369
- /* @__PURE__ */ t(_t, { children: o }),
370
- /* @__PURE__ */ b(Xe, { children: [
371
- l,
372
- /* @__PURE__ */ b(Ye, { className: e, children: [
373
- /* @__PURE__ */ t("h1", { className: "u-visually-hidden", children: o }),
374
- /* @__PURE__ */ t(
375
- "div",
376
- {
377
- className: k("l-main__nav", {
378
- "is-open": i
379
- }),
380
- children: d
381
- }
382
- ),
383
- /* @__PURE__ */ t("div", { className: "l-main__content", children: /* @__PURE__ */ t("div", { className: "row", children: /* @__PURE__ */ t("div", { className: "col-12", children: /* @__PURE__ */ t(Be, { fallback: /* @__PURE__ */ t(me, { view: a }), children: n }) }) }) })
384
- ] }),
385
- /* @__PURE__ */ t(ge, {}),
386
- r
387
- ] })
388
- ] }), me = ({
389
- view: e
390
- }) => e === "settings" ? /* @__PURE__ */ b(
391
- C,
392
- {
393
- "aria-hidden": "true",
394
- className: "layout-skeleton",
395
- variant: "narrow",
396
- children: [
397
- /* @__PURE__ */ t(C.Title, { children: /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" }) }),
398
- /* @__PURE__ */ t("div", { className: "layout-skeleton__form", children: Array.from({ length: 3 }).map((n, o) => /* @__PURE__ */ b(
399
- "div",
400
- {
401
- className: "layout-skeleton__form-field",
402
- children: [
403
- /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "14ch" }),
404
- /* @__PURE__ */ t(w, { height: "2.5rem", variant: "block", width: "100%" })
405
- ]
406
- },
407
- `layout-skeleton-field-${o}`
408
- )) }),
409
- /* @__PURE__ */ t(C.Footer, { children: /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "8ch" }) })
410
- ]
411
- }
412
- ) : /* @__PURE__ */ b(C, { "aria-hidden": "true", className: "layout-skeleton", children: [
413
- /* @__PURE__ */ t(C.Header, { children: /* @__PURE__ */ b("div", { className: "layout-skeleton__header", children: [
414
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "24ch" }),
415
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "100%" }),
416
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "18ch" }),
417
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "18ch" })
418
- ] }) }),
419
- /* @__PURE__ */ b(C.Content, { children: [
420
- /* @__PURE__ */ b("div", { className: "layout-skeleton__pagination", children: [
421
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "24ch" }),
422
- /* @__PURE__ */ b("div", { className: "layout-skeleton__pagination-controls", children: [
423
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" }),
424
- /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" })
425
- ] })
426
- ] }),
427
- /* @__PURE__ */ t(
428
- vn,
429
- {
430
- className: "layout-skeleton__table",
431
- columns: [
432
- {
433
- accessorKey: "name",
434
- header: () => /* @__PURE__ */ t(w, { variant: "block", width: "8ch" }),
435
- meta: {
436
- skeleton: () => /* @__PURE__ */ b("div", { children: [
437
- /* @__PURE__ */ t(w, { variant: "block", width: "18ch" }),
438
- /* @__PURE__ */ t(w, { variant: "block", width: "24ch" })
439
- ] })
440
- }
441
- },
442
- {
443
- accessorKey: "details",
444
- header: () => /* @__PURE__ */ t(w, { variant: "block", width: "12ch" }),
445
- meta: {
446
- skeleton: () => /* @__PURE__ */ b("div", { children: [
447
- /* @__PURE__ */ t(w, { variant: "block", width: "18ch" }),
448
- /* @__PURE__ */ t(w, { variant: "block", width: "14ch" })
449
- ] })
450
- }
451
- },
452
- {
453
- accessorKey: "status",
454
- header: () => /* @__PURE__ */ t(w, { variant: "block", width: "10ch" }),
455
- meta: {
456
- skeleton: () => /* @__PURE__ */ t(w, { variant: "block", width: "12ch" })
457
- }
458
- },
459
- {
460
- accessorKey: "updated",
461
- header: () => /* @__PURE__ */ t(w, { variant: "block", width: "16ch" }),
462
- meta: {
463
- skeleton: () => /* @__PURE__ */ t(w, { variant: "block", width: "10ch" })
464
- }
465
- },
466
- {
467
- accessorKey: "actions",
468
- header: () => /* @__PURE__ */ t(w, { variant: "block", width: "10ch" }),
469
- meta: {
470
- skeleton: () => /* @__PURE__ */ b("div", { children: [
471
- /* @__PURE__ */ t(w, { variant: "block", width: "2ch" }),
472
- /* @__PURE__ */ t(w, { variant: "block", width: "2ch" })
473
- ] })
474
- }
475
- }
476
- ],
477
- data: [],
478
- isLoading: !0,
479
- loadingVariant: "skeleton"
480
- }
481
- )
482
- ] })
483
- ] });
484
- Ct.Skeleton = me;
485
- function St(e) {
486
- const [n, o] = y.useState(null), a = y.useRef(null), i = y.useCallback(() => {
487
- if (e.current) {
488
- const l = e.current.getBoundingClientRect();
489
- o(l);
490
- }
491
- }, [e]);
492
- return y.useEffect(() => {
493
- const l = new ResizeObserver(() => {
494
- a.current && cancelAnimationFrame(a.current), a.current = requestAnimationFrame(i);
495
- });
496
- return e.current && l.observe(e.current), () => {
497
- a.current && cancelAnimationFrame(a.current), l.disconnect();
498
- };
499
- }, [e, i]), n;
500
- }
501
- const pe = y.createContext(null), be = y.createContext([!1, () => {
502
- }]), fe = ({ children: e }) => {
503
- const n = y.useRef(null), o = St(n), [a, i] = y.useState(!1);
504
- return /* @__PURE__ */ t(
505
- "header",
506
- {
507
- className: k("main-toolbar", {
508
- "main-toolbar--stacked": a
509
- }),
510
- ref: n,
511
- children: /* @__PURE__ */ t(pe.Provider, { value: o, children: /* @__PURE__ */ t(be.Provider, { value: [a, i], children: e }) })
512
- }
513
- );
514
- }, yt = ({
515
- as: e,
516
- children: n,
517
- className: o,
518
- ...a
519
- }) => /* @__PURE__ */ t(
520
- e || "h1",
521
- {
522
- className: k("main-toolbar__title p-heading--4", o),
523
- "data-testid": "main-toolbar-heading",
524
- ...a,
525
- children: n
526
- }
527
- ), It = ({ children: e }) => {
528
- const n = y.useContext(pe), [o, a] = y.useContext(be), i = y.useRef(null);
529
- return y.useEffect(() => {
530
- !i.current || !n || a(i.current.getBoundingClientRect().width > n.width);
531
- }, [a, n, i]), /* @__PURE__ */ b(A, { children: [
532
- /* @__PURE__ */ t(
533
- "div",
534
- {
535
- "aria-hidden": "true",
536
- className: "main-toolbar__controls main-toolbar__controls--observer",
537
- ref: i,
538
- style: { visibility: "hidden", position: "absolute" },
539
- children: e
540
- }
541
- ),
542
- /* @__PURE__ */ t(
543
- "div",
544
- {
545
- className: k("main-toolbar__controls", {
546
- "main-toolbar__controls--stacked": o
547
- }),
548
- children: e
549
- }
550
- )
551
- ] });
552
- };
553
- fe.Title = yt;
554
- fe.Controls = It;
555
- const Rt = ({ children: e }) => /* @__PURE__ */ t(A, { children: e }), Tt = ({
556
- isCollapsed: e,
557
- setIsCollapsed: n,
558
- className: o
559
- }) => /* @__PURE__ */ t(
560
- Z,
561
- {
562
- className: "p-side-navigation__tooltip-wrapper",
563
- message: /* @__PURE__ */ b(A, { children: [
564
- e ? "expand" : "collapse",
565
- "( ",
566
- /* @__PURE__ */ t("code", { children: "[" }),
567
- " )"
568
- ] }),
569
- position: "right",
570
- tooltipClassName: "p-side-navigation__tooltip",
571
- children: /* @__PURE__ */ t(
572
- O,
573
- {
574
- appearance: "base",
575
- "aria-label": `${e ? "expand" : "collapse"} main navigation`,
576
- className: k(
577
- "is-dense has-icon is-dark u-no-margin l-navigation-collapse-toggle",
578
- o
579
- ),
580
- onClick: (a) => {
581
- n(!e), a.stopPropagation(), a.currentTarget.blur();
582
- },
583
- children: /* @__PURE__ */ t(E, { light: !0, name: "sidebar-toggle" })
584
- }
585
- )
586
- }
587
- ), Pt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__content", children: /* @__PURE__ */ t("nav", { className: "p-side-navigation--icons is-dark", children: e }) }), At = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__controls u-no-margin--top", children: e }), Lt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "l-navigation__drawer", children: /* @__PURE__ */ t("div", { className: "p-panel is-dark", children: e }) }), Dt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__footer", children: e }), Et = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__header", children: e }), $t = ({ light: e = !0, name: n }) => /* @__PURE__ */ t(E, { className: "p-side-navigation__icon", light: e, name: n }), Mt = ({ children: e, className: n, hasActiveChild: o }) => /* @__PURE__ */ t("li", { className: k("p-side-navigation__item", n, { "has-active-child": o }), children: e }), Ft = ({ children: e, id: n, variant: o = "base" }) => /* @__PURE__ */ t("span", { className: k("p-side-navigation__label", { "p-side-navigation__label--group": o === "group" }), id: n, children: e }), Ht = ({
588
- as: e,
589
- ...n
590
- }) => /* @__PURE__ */ t(
591
- e || "a",
592
- {
593
- className: k("p-side-navigation__link", n.className),
594
- ...n
595
- }
596
- ), Kt = ({ children: e, className: n }) => /* @__PURE__ */ t("ul", { className: k("p-side-navigation__list", n), children: e }), zt = ({
597
- as: e,
598
- children: n,
599
- className: o,
600
- ...a
601
- }) => /* @__PURE__ */ t(e || "a", { className: k("p-panel__logo", o), ...a, children: /* @__PURE__ */ t("div", { className: "p-navigation__tagged-logo", children: n }) }), Bt = ({ children: e }) => Oe(e, { className: "p-panel__logo-icon p-navigation__logo-icon" }), Ot = ({ children: e, variant: n = "base" }) => /* @__PURE__ */ t(
602
- "div",
603
- {
604
- className: k("p-panel__logo-name is-fading-when-collapsed", {
605
- "p-panel__logo-name--small": n === "small"
606
- }),
607
- children: e
608
- }
609
- ), jt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-navigation__logo-tag", children: e }), Gt = ({ children: e }) => /* @__PURE__ */ t("span", { className: "p-panel__logo-text", children: e }), Vt = ({
610
- children: e,
611
- className: n,
612
- onClick: o
613
- }) => /* @__PURE__ */ t(
614
- O,
615
- {
616
- appearance: "base",
617
- className: k(
618
- "p-side-navigation__button--menu has-icon is-dark",
619
- n
620
- ),
621
- onClick: (a) => {
622
- o && o(a), a.stopPropagation(), a.currentTarget.blur();
623
- },
624
- children: /* @__PURE__ */ t(A, { children: e })
625
- }
626
- ), qt = ({ children: e }) => /* @__PURE__ */ t("span", { className: "p-side-navigation__text", children: e }), N = ({ children: e, className: n, isCollapsed: o }) => /* @__PURE__ */ t("header", { "aria-label": "main navigation", className: k("l-navigation is-maas", n, { "is-collapsed": o, "is-pinned": !o }), children: e }), Ut = ({ children: e, className: n }) => /* @__PURE__ */ t("header", { "aria-label": "navigation", className: "l-navigation-bar", children: /* @__PURE__ */ t("div", { className: k("p-panel is-dark", n), children: e }) });
627
- N.Header = Et;
628
- N.Banner = Rt;
629
- N.Drawer = Lt;
630
- N.Controls = At;
631
- N.CollapseToggle = Tt;
632
- N.Content = Pt;
633
- N.Footer = Dt;
634
- N.List = Kt;
635
- N.Item = Mt;
636
- N.Link = Ht;
637
- N.Text = qt;
638
- N.Icon = $t;
639
- N.Label = Ft;
640
- N.Logo = zt;
641
- N.LogoTag = jt;
642
- N.LogoIcon = Bt;
643
- N.LogoName = Ot;
644
- N.LogoText = Gt;
645
- Ut.MenuButton = Vt;
646
- const Wt = ({
647
- className: e,
648
- currentPage: n,
649
- error: o,
650
- disabled: a,
651
- onInputBlur: i,
652
- onInputChange: l,
653
- onNextClick: d,
654
- onPreviousClick: r,
655
- totalPages: s,
656
- ...c
657
- }) => /* @__PURE__ */ t(
658
- "nav",
659
- {
660
- "aria-label": (c == null ? void 0 : c["aria-label"]) || "pagination",
661
- className: k("p-pagination", e),
662
- children: /* @__PURE__ */ b("span", { className: "p-pagination--items", children: [
663
- /* @__PURE__ */ t(
664
- O,
665
- {
666
- "aria-label": "Previous page",
667
- className: "p-pagination__link--previous",
668
- disabled: n === 1 || a,
669
- onClick: r,
670
- type: "button",
671
- children: /* @__PURE__ */ t(E, { name: "chevron-left" })
672
- }
673
- ),
674
- /* @__PURE__ */ t("strong", { children: "Page " }),
675
- " ",
676
- /* @__PURE__ */ t(
677
- Je,
678
- {
679
- "aria-label": "page number",
680
- className: "p-pagination__input",
681
- disabled: a,
682
- error: o,
683
- max: s,
684
- min: 1,
685
- onBlur: i,
686
- onChange: l,
687
- required: !0,
688
- type: "number",
689
- value: n
690
- }
691
- ),
692
- " ",
693
- /* @__PURE__ */ b("strong", { className: "u-no-wrap", children: [
694
- " of ",
695
- s
696
- ] }),
697
- /* @__PURE__ */ t(
698
- O,
699
- {
700
- "aria-label": "Next page",
701
- className: "p-pagination__link--next",
702
- disabled: n === s || a,
703
- onClick: d,
704
- type: "button",
705
- children: /* @__PURE__ */ t(E, { name: "chevron-right" })
706
- }
707
- )
708
- ] })
709
- }
710
- ), Xt = ({
711
- currentPage: e,
712
- disabled: n,
713
- paginate: o,
714
- totalPages: a
715
- }) => {
716
- const [i, l] = P(e), [d, r] = P("");
717
- return /* @__PURE__ */ t(
718
- Wt,
719
- {
720
- currentPage: i,
721
- error: d,
722
- disabled: n,
723
- onInputBlur: () => {
724
- l(e), r("");
725
- },
726
- onInputChange: (g) => {
727
- const { value: f, valueAsNumber: h } = g.target;
728
- f ? (l(h), h > a || h < 1 ? r(`${h} is not a valid page number.`) : (r(""), o(h))) : r("Enter a page number.");
729
- },
730
- onNextClick: () => {
731
- l((g) => Number(g) + 1), o(Number(e) + 1);
732
- },
733
- onPreviousClick: () => {
734
- l((g) => Number(g) - 1), o(Number(e) - 1);
735
- },
736
- totalPages: a
737
- }
738
- );
739
- }, Yt = {
740
- // Mobile or tablet
741
- small: 620
742
- }, ve = J({ variant: "regular" }), _e = ({
743
- className: e,
744
- children: n,
745
- variant: o,
746
- ...a
747
- }) => /* @__PURE__ */ t(ve.Provider, { value: { variant: o }, children: /* @__PURE__ */ t(
748
- "table",
749
- {
750
- ...a,
751
- className: k("p-table-dynamic", e, {
752
- "is-full-height": o === "full-height"
753
- }),
754
- children: n
755
- }
756
- ) }), Jt = ({ columns: e }) => /* @__PURE__ */ t(A, { children: Array.from({ length: 10 }, (n, o) => /* @__PURE__ */ t("tr", { "aria-hidden": "true", children: e.map((a, i) => /* @__PURE__ */ t(
757
- "td",
758
- {
759
- className: k(a.id, "u-text-overflow-clip"),
760
- children: /* @__PURE__ */ t(w, { isPending: !0, text: "XXXxxxx.xxxxxxxxx" })
761
- },
762
- i
763
- )) }, o)) }), Qt = ({
764
- className: e,
765
- table: n
766
- }) => {
767
- const o = n ? n.getAllColumns() : Array.from({ length: 10 }).fill({ id: "" });
768
- return /* @__PURE__ */ b(A, { children: [
769
- /* @__PURE__ */ t("caption", { className: "u-visually-hidden", children: "Loading..." }),
770
- /* @__PURE__ */ t(ke, { "aria-busy": "true", className: e, children: /* @__PURE__ */ t(Jt, { columns: o }) })
771
- ] });
772
- }, ke = ({
773
- className: e,
774
- children: n,
775
- style: o,
776
- ...a
777
- }) => {
778
- const { variant: i } = V(ve), l = M(null), [d, r] = P(null), s = F(() => {
779
- var u, v;
780
- if (window.innerWidth > Yt.small) {
781
- const g = (v = (u = l.current) == null ? void 0 : u.getBoundingClientRect) == null ? void 0 : v.call(u).top;
782
- g && r(g + 1);
783
- } else
784
- r(null);
785
- }, []);
786
- Q(() => {
787
- s();
788
- }, [s]), I(() => (window.addEventListener("resize", s), () => window.removeEventListener("resize", s)), [s]);
789
- const c = z(() => i === "full-height" && d ? {
790
- height: `calc(100vh - ${d}px)`,
791
- minHeight: `calc(100vh - ${d}px)`,
792
- ...o
793
- } : o, [i, d, o]);
794
- return /* @__PURE__ */ t(
795
- "tbody",
796
- {
797
- className: e,
798
- ref: l,
799
- style: c,
800
- ...a,
801
- children: n
802
- }
803
- );
804
- };
805
- _e.Body = ke;
806
- _e.Loading = Qt;
807
- const we = ({ children: e }) => /* @__PURE__ */ t("caption", { children: /* @__PURE__ */ t("div", { className: "p-strip", children: e }) }), Zt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "row", children: /* @__PURE__ */ t("div", { className: "col-start-large-4 u-align--left col-8 col-medium-4", children: /* @__PURE__ */ t("p", { className: "p-heading--4 u-no-margin--bottom", children: e }) }) }), en = ({ children: e }) => /* @__PURE__ */ t("div", { className: "row", children: /* @__PURE__ */ t("div", { className: "u-align--left col-start-large-4 col-8 col-medium-4", children: /* @__PURE__ */ t("p", { children: e }) }) });
808
- we.Title = Zt;
809
- we.Description = en;
810
- const se = ({
811
- header: e
812
- }) => {
813
- var n;
814
- return {
815
- asc: /* @__PURE__ */ t(E, { name: "chevron-up", children: "ascending" }),
816
- desc: /* @__PURE__ */ t(E, { name: "chevron-down", children: "descending" })
817
- }[(n = e == null ? void 0 : e.column) == null ? void 0 : n.getIsSorted()] ?? null;
818
- }, tn = ({ header: e }) => {
819
- const n = e.column.getCanSort(), o = e.column.columnDef.meta, a = o == null ? void 0 : o.isInteractiveHeader, i = ce(e.column.columnDef.header, e.getContext());
820
- return /* @__PURE__ */ t(
821
- "th",
822
- {
823
- "aria-hidden": (o == null ? void 0 : o.headerAriaHidden) || void 0,
824
- "aria-label": o == null ? void 0 : o.headerAriaLabel,
825
- className: k("p-column-header", e.column.id),
826
- children: n && !a ? /* @__PURE__ */ t(
827
- O,
828
- {
829
- appearance: "link",
830
- className: "p-button--column-header",
831
- onClick: e.column.getToggleSortingHandler(),
832
- type: "button",
833
- children: /* @__PURE__ */ b(A, { children: [
834
- i,
835
- /* @__PURE__ */ t(se, { header: e })
836
- ] })
837
- }
838
- ) : /* @__PURE__ */ b("span", { className: "p-container--column-header", children: [
839
- i,
840
- n && !a && /* @__PURE__ */ t(se, { header: e })
841
- ] })
842
- },
843
- e.id
844
- );
845
- }, B = ({
846
- children: e,
847
- "aria-label": n = "Table controls"
848
- }) => /* @__PURE__ */ t(
849
- "section",
850
- {
851
- "aria-label": n,
852
- className: "controls-bar u-flex u-flex--justify-between u-flex--wrap",
853
- children: /* @__PURE__ */ t("div", { className: "p-form p-form--inline", children: e })
854
- }
855
- ), nn = ({ children: e }) => /* @__PURE__ */ t("strong", { className: "controls-bar__description", children: e }), on = ({ children: e }) => /* @__PURE__ */ t("div", { className: "u-flex u-flex--wrap u-flex--column-x-small controls-bar__right", children: e });
856
- B.Left = nn;
857
- B.Right = on;
858
- const rn = ({
859
- currentPage: e,
860
- itemsPerPage: n,
861
- totalItems: o,
862
- handlePageSizeChange: a,
863
- dataContext: i,
864
- setCurrentPage: l,
865
- isPending: d,
866
- pageSizes: r = [20, 30, 50, 100]
867
- }) => {
868
- const s = z(() => r, []), c = z(
869
- () => s.map((f) => ({
870
- label: `${f}/page`,
871
- value: f
872
- })),
873
- [s]
874
- ), u = Math.ceil(o / n), v = (f) => {
875
- const { value: h } = f.target;
876
- a(Number(h));
877
- }, g = () => e === u ? n - (u * n - o) : e < u ? n : 0;
878
- return /* @__PURE__ */ b(B, { children: [
879
- /* @__PURE__ */ b(B.Left, { children: [
880
- "Showing ",
881
- g(),
882
- " out of ",
883
- o,
884
- " ",
885
- i
886
- ] }),
887
- /* @__PURE__ */ b(B.Right, { children: [
888
- /* @__PURE__ */ t(
889
- Xt,
890
- {
891
- currentPage: e,
892
- disabled: d,
893
- paginate: l,
894
- totalPages: u
895
- }
896
- ),
897
- /* @__PURE__ */ t(
898
- Qe,
899
- {
900
- "aria-label": "Items per page",
901
- className: "u-no-margin--bottom",
902
- name: "Items per page",
903
- onChange: v,
904
- options: c,
905
- value: n
906
- }
907
- )
908
- ] })
909
- ] });
910
- }, an = ({
911
- grouping: e,
912
- initialData: n
913
- }) => {
914
- const [o, a] = P(!0), i = F(
915
- (l) => {
916
- a((d) => {
917
- const r = typeof l == "function" ? l(d) : l;
918
- if (r === !0) return !0;
919
- const s = { ...r };
920
- if (d !== !0)
921
- for (const c of Object.keys(d))
922
- c in s || (s[c] = !1);
923
- return s;
924
- });
925
- },
926
- []
927
- );
928
- return I(() => {
929
- e.length && i((l) => {
930
- const r = { ...l === !0 ? {} : { ...l } };
931
- for (const s of n) {
932
- const c = e.map((u) => `${u}:${s[u]}`).join(">");
933
- c in r || (r[c] = !0);
934
- }
935
- return r;
936
- });
937
- }, [n, e]), { expanded: o, setExpanded: i };
938
- }, ln = ({
939
- groupBy: e,
940
- initialData: n
941
- }) => {
942
- const [o, a] = P(e ?? []), i = z(() => o.length ? [...n].sort((l, d) => {
943
- for (const r of o) {
944
- const s = l[r] ?? null, c = d[r] ?? null;
945
- if (s === null) return 1;
946
- if (c === null || s < c) return -1;
947
- if (s > c) return 1;
948
- }
949
- return 0;
950
- }) : n, [n, o]);
951
- return { grouping: o, setGrouping: a, groupedData: i };
952
- }, sn = ({
953
- isLoading: e
954
- }) => {
955
- const n = M(null), o = M(null);
956
- I(() => {
957
- const l = n.current;
958
- if (!l || e) return;
959
- const d = [
960
- "button:not([disabled])",
961
- "input:not([disabled])",
962
- "select:not([disabled])",
963
- "textarea:not([disabled])",
964
- "a[href]"
965
- ].join(", ");
966
- l.querySelectorAll(d).forEach((r) => {
967
- r.getAttribute("tabindex") !== "-1" && (r.tabIndex = 0);
968
- });
969
- }), Q(() => {
970
- const l = n.current;
971
- if (!l || e) {
972
- o.current = null;
973
- return;
974
- }
975
- const d = Array.from(
976
- l.querySelectorAll('tbody tr[role="row"]')
977
- ).filter((r) => r.hasAttribute("tabindex"));
978
- d.length !== 0 && (o.current && d.includes(o.current) ? o.current.tabIndex = 0 : (d[0].tabIndex = 0, o.current = d[0]));
979
- });
980
- const a = F((l) => {
981
- if (!n.current) return;
982
- const s = l.target.closest(
983
- 'tbody tr[role="row"][tabindex]'
984
- );
985
- s && (o.current && o.current !== s && (o.current.tabIndex = -1), s.tabIndex = 0, o.current = s);
986
- }, []), i = F(
987
- (l) => {
988
- var x, p, _, S, R;
989
- if (l.key !== "ArrowUp" && l.key !== "ArrowDown" && l.key !== "ArrowLeft" && l.key !== "ArrowRight" && l.key !== "Home" && l.key !== "End")
990
- return;
991
- const d = n.current;
992
- if (!d) return;
993
- const r = document.activeElement;
994
- if (!r) return;
995
- const s = r.matches('tr[role="row"]'), c = r.matches('td[role="gridcell"][tabindex="-1"]');
996
- if (!s && !c) return;
997
- l.preventDefault();
998
- const u = Array.from(
999
- d.querySelectorAll('tbody tr[role="row"]')
1000
- ), v = s ? r : r.closest("tr");
1001
- if (!v) return;
1002
- const g = u.indexOf(v);
1003
- if (g === -1) return;
1004
- const f = (T) => Array.from(
1005
- T.querySelectorAll(
1006
- 'td[role="gridcell"][tabindex="-1"]:not(.p-generic-table__group-chevron)'
1007
- )
1008
- ), h = f(v), m = c ? h.indexOf(r) : -1;
1009
- switch (l.key) {
1010
- case "ArrowUp": {
1011
- if (g <= 0) break;
1012
- const T = u[g - 1];
1013
- if (c && m >= 0) {
1014
- const L = f(T);
1015
- if (L.length > 0) {
1016
- L[Math.min(m, L.length - 1)].focus();
1017
- break;
1018
- }
1019
- }
1020
- T.focus();
1021
- break;
1022
- }
1023
- case "ArrowDown": {
1024
- if (g >= u.length - 1) break;
1025
- const T = u[g + 1];
1026
- if (c && m >= 0) {
1027
- const L = f(T);
1028
- if (L.length > 0) {
1029
- L[Math.min(m, L.length - 1)].focus();
1030
- break;
1031
- }
1032
- }
1033
- T.focus();
1034
- break;
1035
- }
1036
- case "ArrowRight":
1037
- s ? (x = h[0]) == null || x.focus() : m < h.length - 1 && h[m + 1].focus();
1038
- break;
1039
- case "ArrowLeft":
1040
- if (s) break;
1041
- m > 0 ? h[m - 1].focus() : v.focus();
1042
- break;
1043
- case "Home":
1044
- c ? (p = h[0]) == null || p.focus() : l.ctrlKey && ((_ = u[0]) == null || _.focus());
1045
- break;
1046
- case "End":
1047
- c ? (S = h[h.length - 1]) == null || S.focus() : l.ctrlKey && ((R = u[u.length - 1]) == null || R.focus());
1048
- break;
1049
- }
1050
- },
1051
- []
1052
- );
1053
- return { tableRef: n, handleTableFocus: a, handleTableKeyDown: i };
1054
- }, cn = ({
1055
- containerRef: e,
1056
- variant: n,
1057
- length: o,
1058
- isLoading: a
1059
- }) => {
1060
- const i = M(null), [l, d] = P("auto"), [r, s] = P(!1);
1061
- return Q(() => {
1062
- const u = () => {
1063
- const f = i.current;
1064
- if (!f) return;
1065
- const h = (e == null ? void 0 : e.current) || document.querySelector("main");
1066
- if (!h) return;
1067
- const m = h.getBoundingClientRect(), x = f.getBoundingClientRect(), p = m.bottom - x.top, S = f.scrollHeight > p;
1068
- s(S), d(
1069
- n === "full-height" && S ? `${p}px` : "auto"
1070
- );
1071
- };
1072
- u();
1073
- const v = new ResizeObserver(u), g = i.current;
1074
- return g && v.observe(g), window.addEventListener("resize", u), () => {
1075
- window.removeEventListener("resize", u), g && v.unobserve(g);
1076
- };
1077
- }, [e, o, a]), { tableBodyRef: i, maxHeight: l, effectiveVariant: n === "full-height" && r ? "full-height" : "regular" };
1078
- }, dn = ({
1079
- externalSorting: e,
1080
- setExternalSorting: n,
1081
- grouping: o,
1082
- groupedData: a,
1083
- pinGroup: i
1084
- }) => {
1085
- const [l, d] = P(e ?? []), r = F(
1086
- (c) => {
1087
- d(c), n && n(c);
1088
- },
1089
- [n]
1090
- ), s = z(() => a.length ? [...a].sort((c, u) => {
1091
- if (i != null && i.length && o.length)
1092
- for (const { value: v, isTop: g } of i) {
1093
- const f = o[0], h = c[f] ?? null, m = u[f] ?? null;
1094
- if (h === v && m !== v)
1095
- return g ? -1 : 1;
1096
- if (m === v && h !== v)
1097
- return g ? 1 : -1;
1098
- }
1099
- for (const { id: v, desc: g } of l) {
1100
- const f = c[v] ?? null, h = u[v] ?? null;
1101
- if (f === null && h === null) return 0;
1102
- if (f === null) return g ? -1 : 1;
1103
- if (h === null || f < h) return g ? 1 : -1;
1104
- if (f > h) return g ? -1 : 1;
1105
- }
1106
- return 0;
1107
- }) : [], [a, l, i, o]);
1108
- return { sorting: l, setSorting: r, sortedData: s };
1109
- }, un = ({ table: e, ...n }) => {
1110
- const o = M(null);
1111
- if (!e)
1112
- return null;
1113
- const a = e.getCoreRowModel().rows.filter((r) => r.getCanSelect()), i = e.getSelectedRowModel().rows.filter((r) => r.getCanSelect()), l = a.length > 0 && i.length === a.length, d = i.length > 0 && !l;
1114
- return I(() => {
1115
- o.current && (o.current.indeterminate = d);
1116
- }, [d]), // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
1117
- /* @__PURE__ */ b(
1118
- "label",
1119
- {
1120
- className: "p-checkbox--inline p-table-checkbox--all",
1121
- onClick: (r) => r.stopPropagation(),
1122
- onKeyDown: (r) => r.stopPropagation(),
1123
- children: [
1124
- /* @__PURE__ */ t(
1125
- "input",
1126
- {
1127
- ref: o,
1128
- "aria-label": "select all",
1129
- className: "p-checkbox__input",
1130
- disabled: a.length === 0,
1131
- type: "checkbox",
1132
- checked: l,
1133
- onChange: () => {
1134
- const r = e.getCoreRowModel().rows.filter((c) => c.getCanSelect()), s = r.every((c) => c.getIsSelected());
1135
- r.forEach((c) => c.toggleSelected(!s));
1136
- },
1137
- ...n
1138
- }
1139
- ),
1140
- /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
1141
- ]
1142
- }
1143
- );
1144
- }, hn = ({ row: e, ...n }) => {
1145
- const o = M(null);
1146
- if (!e)
1147
- return (
1148
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
1149
- /* @__PURE__ */ b(
1150
- "label",
1151
- {
1152
- className: "p-checkbox--inline p-table-checkbox--group",
1153
- onClick: (r) => r.stopPropagation(),
1154
- onKeyDown: (r) => r.stopPropagation(),
1155
- children: [
1156
- /* @__PURE__ */ t(
1157
- "input",
1158
- {
1159
- className: "p-checkbox__input",
1160
- disabled: !0,
1161
- type: "checkbox",
1162
- ...n
1163
- }
1164
- ),
1165
- /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
1166
- ]
1167
- }
1168
- )
1169
- );
1170
- const a = e.subRows.filter(
1171
- (r) => r.getCanSelect()
1172
- ), i = a.filter(
1173
- (r) => r.getIsSelected()
1174
- ).length, l = a.length > 0 && i === a.length, d = i > 0 && !l;
1175
- return I(() => {
1176
- o.current && (o.current.indeterminate = d);
1177
- }, [d]), // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
1178
- /* @__PURE__ */ b(
1179
- "label",
1180
- {
1181
- className: "p-checkbox--inline p-table-checkbox--group",
1182
- onClick: (r) => r.stopPropagation(),
1183
- onKeyDown: (r) => r.stopPropagation(),
1184
- children: [
1185
- /* @__PURE__ */ t(
1186
- "input",
1187
- {
1188
- ref: o,
1189
- className: "p-checkbox__input",
1190
- type: "checkbox",
1191
- checked: l,
1192
- disabled: !e.getCanSelect() && a.length === 0,
1193
- onChange: () => {
1194
- const r = !l;
1195
- a.forEach(
1196
- (s) => s.toggleSelected(r)
1197
- );
1198
- },
1199
- ...n
1200
- }
1201
- ),
1202
- /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
1203
- ]
1204
- }
1205
- );
1206
- }, D = ({
1207
- row: e,
1208
- disabledTooltip: n = "",
1209
- isNested: o = !1,
1210
- ...a
1211
- }) => {
1212
- if (!e)
1213
- return (
1214
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
1215
- /* @__PURE__ */ b(
1216
- "label",
1217
- {
1218
- className: "p-checkbox--inline p-table-checkbox",
1219
- onClick: (r) => r.stopPropagation(),
1220
- onKeyDown: (r) => r.stopPropagation(),
1221
- children: [
1222
- /* @__PURE__ */ t(
1223
- "input",
1224
- {
1225
- className: "p-checkbox__input",
1226
- disabled: !0,
1227
- type: "checkbox",
1228
- ...a
1229
- }
1230
- ),
1231
- /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
1232
- ]
1233
- }
1234
- )
1235
- );
1236
- const i = e.getCanSelect(), l = typeof n == "string" ? n : n(e);
1237
- return /* @__PURE__ */ t(Z, { message: o ? "Selection is managed by the parent row" : i ? !1 : l, position: "btm-right", children: /* @__PURE__ */ b(
1238
- "label",
1239
- {
1240
- className: "p-checkbox--inline p-table-checkbox",
1241
- onClick: (r) => r.stopPropagation(),
1242
- onKeyDown: (r) => r.stopPropagation(),
1243
- children: [
1244
- /* @__PURE__ */ t(
1245
- "input",
1246
- {
1247
- className: "p-checkbox__input",
1248
- type: "checkbox",
1249
- checked: e.getIsSelected(),
1250
- disabled: !i || o,
1251
- onChange: e.getToggleSelectedHandler(),
1252
- ...a
1253
- }
1254
- ),
1255
- /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
1256
- ]
1257
- }
1258
- ) });
1259
- };
1260
- D.All = un;
1261
- D.Group = hn;
1262
- const gn = ({
1263
- canSelect: e,
1264
- initialColumns: n,
1265
- groupBy: o,
1266
- getSubRows: a,
1267
- selection: i,
1268
- showChevron: l
1269
- }) => {
1270
- let d = [...n];
1271
- if (e && i) {
1272
- const r = [
1273
- {
1274
- id: "p-generic-table__select",
1275
- accessorKey: "id",
1276
- enableSorting: !1,
1277
- meta: { headerAriaLabel: "Row selection" },
1278
- header: ({ table: s }) => o ? "" : /* @__PURE__ */ t(D.All, { table: s }),
1279
- cell: ({ row: s }) => {
1280
- const c = i.rowSelectionLabelKey && i.rowSelectionLabelKey in s.original ? `select ${s.original[i.rowSelectionLabelKey]}` : "select row";
1281
- return s.getIsGrouped() ? null : /* @__PURE__ */ t(
1282
- D,
1283
- {
1284
- "aria-label": c,
1285
- disabledTooltip: i.disabledSelectionTooltip ?? "",
1286
- isNested: a !== void 0 && !!s.parentId,
1287
- row: s
1288
- }
1289
- );
1290
- }
1291
- },
1292
- ...d
1293
- ];
1294
- if (o) {
1295
- const s = (c) => o[0] in c.original ? `select ${c.original[o[0]]}` : "select group";
1296
- d = [
1297
- {
1298
- id: "p-generic-table__group-select",
1299
- accessorKey: "id",
1300
- enableSorting: !1,
1301
- meta: { headerAriaLabel: "Row selection" },
1302
- header: ({ table: c }) => /* @__PURE__ */ t(D.All, { table: c }),
1303
- cell: ({ row: c }) => c.getIsGrouped() ? /* @__PURE__ */ t(D.Group, { "aria-label": s(c), row: c }) : null
1304
- },
1305
- ...r
1306
- ];
1307
- } else
1308
- d = r;
1309
- }
1310
- return o && l && (d = [{
1311
- id: "p-generic-table__group-chevron",
1312
- accessorKey: "id",
1313
- enableSorting: !1,
1314
- meta: { headerAriaHidden: !0 },
1315
- header: "",
1316
- cell: ({ row: s }) => {
1317
- const c = s.getIsExpanded();
1318
- return s.getIsGrouped() ? /* @__PURE__ */ t(
1319
- Z,
1320
- {
1321
- message: c ? "Collapse" : "Expand",
1322
- position: "btm-right",
1323
- children: /* @__PURE__ */ t(E, { name: c ? X.chevronUp : X.chevronDown })
1324
- }
1325
- ) : null;
1326
- }
1327
- }, ...d]), d;
1328
- }, mn = ({
1329
- table: e,
1330
- columns: n,
1331
- filterCells: o,
1332
- getSubRows: a,
1333
- noData: i,
1334
- selection: l
1335
- }) => {
1336
- if (e.getRowModel().rows.length < 1)
1337
- return /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
1338
- "td",
1339
- {
1340
- className: "p-generic-table__no-data",
1341
- colSpan: n.length,
1342
- role: "gridcell",
1343
- children: /* @__PURE__ */ t("div", { "aria-live": "polite", role: "status", children: i })
1344
- }
1345
- ) });
1346
- let d = 1;
1347
- return e.getRowModel().rows.map((r) => {
1348
- d++;
1349
- const s = d, { getIsGrouped: c, id: u, getVisibleCells: v, parentId: g } = r, f = !c(), h = (l == null ? void 0 : l.rowSelection) !== void 0 && Object.keys(l.rowSelection).includes(u), m = (p) => {
1350
- p.target === p.currentTarget && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), r.toggleExpanded());
1351
- }, x = (p) => {
1352
- if (p.target !== p.currentTarget || p.key !== "Enter" && p.key !== " ") return;
1353
- p.preventDefault();
1354
- const _ = p.currentTarget.querySelector(
1355
- "button:not([disabled]), input:not([disabled]), a[href], select:not([disabled]), textarea:not([disabled])"
1356
- );
1357
- _ == null || _.focus();
1358
- };
1359
- return /* @__PURE__ */ t(
1360
- "tr",
1361
- {
1362
- "aria-expanded": f ? void 0 : r.getIsExpanded(),
1363
- "aria-rowindex": s,
1364
- "aria-selected": h,
1365
- className: k({
1366
- "p-generic-table__individual-row": f,
1367
- "p-generic-table__group-row": !f,
1368
- "p-generic-table__nested-row": a !== void 0 && !!g
1369
- }),
1370
- onClick: f ? void 0 : () => r.toggleExpanded(),
1371
- onKeyDown: f ? x : m,
1372
- tabIndex: -1,
1373
- role: "row",
1374
- children: v().filter((p) => !f && (p.column.id === "p-generic-table__group-select" || p.column.id === "p-generic-table__group-chevron") ? !0 : o(r, p.column)).map((p) => {
1375
- var _, S;
1376
- return /* @__PURE__ */ t(
1377
- "td",
1378
- {
1379
- "aria-hidden": p.column.id === "p-generic-table__select" && a !== void 0 && g ? !0 : void 0,
1380
- "aria-label": ((S = (_ = p.column.columnDef.meta) == null ? void 0 : _.cellAriaLabel) == null ? void 0 : S.call(_, r)) ?? void 0,
1381
- className: k(`${p.column.id}`),
1382
- role: "gridcell",
1383
- tabIndex: -1,
1384
- children: ce(p.column.columnDef.cell, p.getContext())
1385
- },
1386
- p.id
1387
- );
1388
- })
1389
- },
1390
- u
1391
- );
1392
- });
1393
- }, pn = (e, n) => {
1394
- const o = e.column.id;
1395
- return o === "p-generic-table__group-chevron" ? n ? /* @__PURE__ */ t(E, { name: X.chevronDown }) : null : o === "p-generic-table__group-select" ? n ? /* @__PURE__ */ t(D.Group, { "aria-label": "select group" }) : null : o === "p-generic-table__select" ? n ? null : /* @__PURE__ */ t(D, { "aria-label": "select row" }) : null;
1396
- }, bn = (e, n, o) => e({ getIsGrouped: () => o }, n), fn = ({
1397
- table: e,
1398
- columns: n,
1399
- filterHeaders: o,
1400
- filterCells: a,
1401
- loadingVariant: i,
1402
- skeletonRowCount: l,
1403
- skeletonGroupCount: d
1404
- }) => {
1405
- var f;
1406
- const r = ((f = e.getHeaderGroups()[0]) == null ? void 0 : f.headers) ?? [], s = r.filter(o);
1407
- if (i !== "skeleton")
1408
- return /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
1409
- "td",
1410
- {
1411
- className: "p-generic-table__loading",
1412
- colSpan: s.length || n.length,
1413
- role: "gridcell",
1414
- children: /* @__PURE__ */ t(Ze, { text: "Loading..." })
1415
- }
1416
- ) });
1417
- const c = r.some(
1418
- (h) => h.column.id === "p-generic-table__group-select" || h.column.id === "p-generic-table__group-chevron"
1419
- ), u = (h, m, x) => /* @__PURE__ */ t(
1420
- "tr",
1421
- {
1422
- "aria-expanded": x ? !0 : void 0,
1423
- "aria-rowindex": m,
1424
- className: k({
1425
- "p-generic-table__group-row": x,
1426
- "p-generic-table__individual-row": !x,
1427
- "p-generic-table__skeleton-row": !0
1428
- }),
1429
- role: "row",
1430
- children: r.filter((p) => {
1431
- const _ = p.column.id;
1432
- return x && (_ === "p-generic-table__group-select" || _ === "p-generic-table__group-chevron") ? !0 : bn(
1433
- a,
1434
- p.column,
1435
- x
1436
- );
1437
- }).map((p) => {
1438
- const _ = p.column.id, S = _.startsWith("p-generic-table__"), R = p.column.columnDef.meta, T = S ? pn(p, x) : R != null && R.skeleton ? R.skeleton() : /* @__PURE__ */ t(w, { variant: "block", width: "70%", height: "1.5rem" });
1439
- return /* @__PURE__ */ t(
1440
- "td",
1441
- {
1442
- className: k("p-generic-table__skeleton-cell", _),
1443
- role: "gridcell",
1444
- children: T
1445
- },
1446
- `${h}-${p.id}`
1447
- );
1448
- })
1449
- },
1450
- h
1451
- );
1452
- if (!c)
1453
- return Array.from({ length: l }).map(
1454
- (h, m) => u(`skel-${m}`, m + 2, !1)
1455
- );
1456
- const v = [];
1457
- let g = 1;
1458
- for (let h = 0; h < d; h++) {
1459
- v.push(u(`skel-group-${h}`, ++g, !0));
1460
- for (let m = 0; m < l; m++)
1461
- v.push(u(`skel-${h}-${m}`, ++g, !1));
1462
- }
1463
- return v;
1464
- }, vn = ({
1465
- "aria-label": e,
1466
- className: n,
1467
- columns: o,
1468
- columnVisibility: a,
1469
- containerRef: i,
1470
- data: l,
1471
- filterCells: d = () => !0,
1472
- filterHeaders: r = () => !0,
1473
- getSubRows: s,
1474
- groupBy: c,
1475
- isLoading: u,
1476
- loadingVariant: v = "spinner",
1477
- skeletonRowCount: g = 10,
1478
- skeletonGroupCount: f = 2,
1479
- noData: h,
1480
- pagination: m,
1481
- pinGroup: x,
1482
- sorting: p = [],
1483
- selection: _,
1484
- setSorting: S,
1485
- showChevron: R = !1,
1486
- variant: T = "full-height",
1487
- debug: L = !1,
1488
- ...Ne
1489
- }) => {
1490
- const { grouping: U, setGrouping: xe, groupedData: Ce } = ln({
1491
- groupBy: c,
1492
- initialData: l
1493
- }), { sortedData: ne, sorting: Se, setSorting: ye } = dn({
1494
- externalSorting: p,
1495
- setExternalSorting: S,
1496
- grouping: U,
1497
- groupedData: Ce,
1498
- pinGroup: x
1499
- }), { expanded: Ie, setExpanded: Re } = an({
1500
- grouping: U,
1501
- initialData: l
1502
- }), { tableBodyRef: Te, maxHeight: Pe, effectiveVariant: Ae } = cn({
1503
- containerRef: i,
1504
- variant: T,
1505
- length: ne.length,
1506
- isLoading: u
1507
- }), [Le, De] = P({}), Ee = (a == null ? void 0 : a.columnVisibility) ?? Le, $e = (a == null ? void 0 : a.setColumnVisibility) ?? De, H = !!_, W = z(
1508
- () => gn({
1509
- canSelect: H,
1510
- initialColumns: o,
1511
- groupBy: c,
1512
- getSubRows: s,
1513
- selection: _,
1514
- showChevron: R
1515
- }),
1516
- [H, o, c, s]
1517
- ), j = tt({
1518
- data: ne,
1519
- columns: W,
1520
- state: {
1521
- grouping: U,
1522
- expanded: Ie,
1523
- sorting: Se,
1524
- columnVisibility: Ee,
1525
- rowSelection: _ == null ? void 0 : _.rowSelection
1526
- },
1527
- manualPagination: !0,
1528
- autoResetExpanded: !1,
1529
- onExpandedChange: Re,
1530
- onSortingChange: ye,
1531
- onGroupingChange: xe,
1532
- onColumnVisibilityChange: $e,
1533
- onRowSelectionChange: _ == null ? void 0 : _.setRowSelection,
1534
- manualSorting: !0,
1535
- enableSorting: !0,
1536
- enableExpanding: !0,
1537
- getSubRows: s,
1538
- getExpandedRowModel: rt(),
1539
- getCoreRowModel: ot(),
1540
- getGroupedRowModel: nt(),
1541
- groupedColumnMode: !1,
1542
- enableRowSelection: (_ == null ? void 0 : _.filterSelectable) ?? H,
1543
- enableMultiRowSelection: (_ == null ? void 0 : _.filterSelectable) ?? H,
1544
- getRowId: (G) => G.id.toString(),
1545
- debugAll: L
1546
- }), { tableRef: Me, handleTableFocus: Fe, handleTableKeyDown: He } = sn({ isLoading: u });
1547
- return /* @__PURE__ */ b(
1548
- "div",
1549
- {
1550
- className: k("p-generic-table", n),
1551
- "data-testid": "p-generic-table",
1552
- ...Ne,
1553
- children: [
1554
- m && /* @__PURE__ */ t(
1555
- rn,
1556
- {
1557
- currentPage: m.currentPage,
1558
- dataContext: m.dataContext,
1559
- handlePageSizeChange: m.handlePageSizeChange,
1560
- isPending: m.isPending,
1561
- itemsPerPage: m.itemsPerPage,
1562
- setCurrentPage: m.setCurrentPage,
1563
- totalItems: m.totalItems,
1564
- pageSizes: m.pageSizes
1565
- }
1566
- ),
1567
- /* @__PURE__ */ b(
1568
- "table",
1569
- {
1570
- ref: Me,
1571
- "aria-busy": u,
1572
- "aria-label": e,
1573
- "aria-rowcount": ((m == null ? void 0 : m.totalItems) ?? j.getRowModel().rows.length) + 1,
1574
- className: k("p-generic-table__table", {
1575
- "p-generic-table__is-full-height": Ae === "full-height",
1576
- "p-generic-table__is-selectable": H,
1577
- "p-generic-table__is-grouped": c !== void 0
1578
- }),
1579
- onFocus: Fe,
1580
- onKeyDown: He,
1581
- role: "treegrid",
1582
- children: [
1583
- /* @__PURE__ */ t("thead", { children: j.getHeaderGroups().map((G) => /* @__PURE__ */ t("tr", { "aria-rowindex": 1, role: "row", children: G.headers.filter(r).map((oe, re) => /* @__PURE__ */ b(je, { children: [
1584
- /* @__PURE__ */ t(tn, { header: oe }),
1585
- H && c && (!R && re === 2 || R && re === 3) ? /* @__PURE__ */ t(
1586
- "th",
1587
- {
1588
- "aria-hidden": "true",
1589
- className: "p-generic-table__select-alignment",
1590
- role: "columnheader"
1591
- }
1592
- ) : null
1593
- ] }, oe.id)) }, G.id)) }),
1594
- /* @__PURE__ */ t(
1595
- "tbody",
1596
- {
1597
- ref: Te,
1598
- style: {
1599
- overflowY: "auto",
1600
- maxHeight: Pe
1601
- },
1602
- children: u ? fn({
1603
- table: j,
1604
- columns: W,
1605
- filterHeaders: r,
1606
- filterCells: d,
1607
- loadingVariant: v,
1608
- skeletonRowCount: g,
1609
- skeletonGroupCount: f
1610
- }) : mn({
1611
- table: j,
1612
- columns: W,
1613
- filterCells: d,
1614
- getSubRows: s,
1615
- noData: h,
1616
- selection: _
1617
- })
1618
- }
1619
- )
1620
- ]
1621
- }
1622
- )
1623
- ]
1624
- }
1625
- );
1626
- };
1627
- export {
1628
- C,
1629
- _e as D,
1630
- ee as F,
1631
- vn as G,
1632
- ue as I,
1633
- Ct as L,
1634
- lt as M,
1635
- N,
1636
- w as P,
1637
- ge as S,
1638
- we as T,
1639
- fe as a,
1640
- Ut as b,
1641
- In as c,
1642
- yn as d,
1643
- Wt as e,
1644
- Xt as f,
1645
- $ as m,
1646
- K as t,
1647
- q as u
1648
- };