@canonical/maas-react-components 2.7.1 → 2.8.0

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 (80) hide show
  1. package/dist/@canonical/maas-react-components.es.js +2 -689
  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-qz4Dneh_.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/Layout/Layout.d.ts +3 -1
  33. package/dist/sections/MainToolbar/MainToolbar.d.ts +4 -4
  34. package/dist/sections/MainToolbar/MainToolbar.stories.d.ts +2 -2
  35. package/dist/sections/Navigation/Banner/Banner.d.ts +1 -1
  36. package/dist/sections/Navigation/Banner/Banner.stories.d.ts +2 -2
  37. package/dist/sections/Navigation/CollapseToggle/CollapseToggle.stories.d.ts +1 -1
  38. package/dist/sections/Navigation/Content/Content.d.ts +1 -1
  39. package/dist/sections/Navigation/Content/Content.stories.d.ts +2 -2
  40. package/dist/sections/Navigation/Controls/Controls.d.ts +1 -1
  41. package/dist/sections/Navigation/Controls/Controls.stories.d.ts +2 -2
  42. package/dist/sections/Navigation/Drawer/Drawer.d.ts +1 -1
  43. package/dist/sections/Navigation/Drawer/Drawer.stories.d.ts +2 -2
  44. package/dist/sections/Navigation/Footer/Footer.d.ts +1 -1
  45. package/dist/sections/Navigation/Footer/Footer.stories.d.ts +2 -2
  46. package/dist/sections/Navigation/Header/Header.d.ts +1 -1
  47. package/dist/sections/Navigation/Header/Header.stories.d.ts +2 -2
  48. package/dist/sections/Navigation/Icon/Icon.d.ts +1 -1
  49. package/dist/sections/Navigation/Icon/Icon.stories.d.ts +1 -1
  50. package/dist/sections/Navigation/Item/Item.d.ts +1 -1
  51. package/dist/sections/Navigation/Item/Item.stories.d.ts +3 -3
  52. package/dist/sections/Navigation/Label/Label.d.ts +1 -1
  53. package/dist/sections/Navigation/Label/Label.stories.d.ts +1 -1
  54. package/dist/sections/Navigation/Link/Link.d.ts +2 -2
  55. package/dist/sections/Navigation/Link/Link.stories.d.ts +3 -3
  56. package/dist/sections/Navigation/List/List.d.ts +1 -1
  57. package/dist/sections/Navigation/List/List.stories.d.ts +2 -2
  58. package/dist/sections/Navigation/Logo/Logo.d.ts +2 -2
  59. package/dist/sections/Navigation/Logo/Logo.stories.d.ts +2 -2
  60. package/dist/sections/Navigation/LogoIcon/LogoIcon.stories.d.ts +2 -2
  61. package/dist/sections/Navigation/LogoName/LogoName.d.ts +1 -1
  62. package/dist/sections/Navigation/LogoName/LogoName.stories.d.ts +1 -1
  63. package/dist/sections/Navigation/LogoTag/LogoTag.d.ts +1 -1
  64. package/dist/sections/Navigation/LogoTag/LogoTag.stories.d.ts +2 -2
  65. package/dist/sections/Navigation/LogoText/LogoText.d.ts +1 -1
  66. package/dist/sections/Navigation/MenuButton/MenuButton.d.ts +1 -1
  67. package/dist/sections/Navigation/MenuButton/MenuButton.stories.d.ts +1 -1
  68. package/dist/sections/Navigation/Navigation.d.ts +19 -19
  69. package/dist/sections/Navigation/Navigation.stories.d.ts +3 -3
  70. package/dist/sections/Navigation/Text/Text.d.ts +1 -1
  71. package/dist/sections/SidePanel/SidePanel.d.ts +8 -4
  72. package/dist/sections/SidePanel/SidePanel.stories.d.ts +1 -1
  73. package/dist/sections/SidePanel/index.d.ts +1 -1
  74. package/dist/testing/index.es.js +112 -129
  75. package/dist/testing/mockSidePanel.d.ts +3 -2
  76. package/dist/testing/spyOnMutation.d.ts +2 -1
  77. package/dist/types.d.ts +7 -0
  78. package/dist/utils/formatBytes/formatBytes.stories.d.ts +1 -1
  79. package/package.json +12 -15
  80. package/dist/QueryInput-D7uXzKgr.mjs +0 -1648
@@ -1,689 +1,2 @@
1
- import { C as te, S as ne } from "../QueryInput-D7uXzKgr.mjs";
2
- import { D as Be, F as Oe, G as Ue, I as je, L as Ve, a as Te, M as qe, N as Ge, b as Ke, e as ze, f as Qe, P as $e, c as He, T as Ze, d as Xe, m as Ye, t as Je, u as We } from "../QueryInput-D7uXzKgr.mjs";
3
- import { jsx as s, jsxs as N, Fragment as le } from "react/jsx-runtime";
4
- import { Link as se, Spinner as $, Label as oe, Button as V, Icon as K, CheckboxInput as ae, useClickOutside as ie, useOnEscapePressed as re, SearchBox as H } from "@canonical/react-components";
5
- import { lazy as ce, Suspense as de, useReducer as ue, useCallback as w, useId as q, useMemo as O, useState as U, useEffect as G, useRef as T } from "react";
6
- import L from "classnames";
7
- import { useDropzone as pe } from "react-dropzone";
8
- const Ee = ({ children: t, to: l, ...e }) => /* @__PURE__ */ s(se, { ...e, href: l, rel: "noreferrer noopener", target: "_blank", children: t }), he = ({
9
- percentComplete: t
10
- }) => /* @__PURE__ */ N("small", { className: "progress-indicator", children: [
11
- t,
12
- "% ",
13
- /* @__PURE__ */ s($, { className: "progress-indicator__spinner" })
14
- ] }), xe = (t, l) => {
15
- const e = ce(t);
16
- return (r) => /* @__PURE__ */ s(
17
- de,
18
- {
19
- fallback: /* @__PURE__ */ s(te, { children: /* @__PURE__ */ s(ne.Skeleton, { hasTitle: l }) }),
20
- children: /* @__PURE__ */ s(e, { ...r })
21
- }
22
- );
23
- }, Z = ({
24
- children: t,
25
- className: l,
26
- isVisible: e
27
- }) => /* @__PURE__ */ s(
28
- "div",
29
- {
30
- className: L("fade-in--down", l),
31
- "aria-hidden": e ? "false" : "true",
32
- style: { visibility: e ? "visible" : "hidden" },
33
- children: t
34
- }
35
- ), Pe = ({
36
- children: t,
37
- ...l
38
- }) => /* @__PURE__ */ s(Z, { isVisible: !l["aria-hidden"], children: /* @__PURE__ */ s("div", { className: "p-form__nested-group", ...l, children: t }) }), ke = ({ activeStep: t, items: l }) => /* @__PURE__ */ s("ol", { className: "stepper", children: l.map((e, n) => {
39
- const r = n === t, p = n < t;
40
- return /* @__PURE__ */ s("li", { "aria-label": e, className: "stepper__item", children: /* @__PURE__ */ s(
41
- "p",
42
- {
43
- "aria-label": p ? `${e} (completed)` : e,
44
- className: L("stepper__title", {
45
- "stepper__title--is-active": r,
46
- "stepper__title--is-complete": p
47
- }),
48
- children: e
49
- }
50
- ) }, n);
51
- }) }), me = () => {
52
- const t = (u, g) => {
53
- switch (g.type) {
54
- case "add-files":
55
- return {
56
- acceptedFiles: [
57
- ...u.acceptedFiles,
58
- ...g.payload.acceptedFiles
59
- ],
60
- fileRejections: [
61
- ...u.fileRejections,
62
- ...g.payload.fileRejections
63
- ]
64
- };
65
- case "remove-accepted":
66
- return {
67
- ...u,
68
- acceptedFiles: u.acceptedFiles.filter(
69
- (v) => v !== g.payload
70
- )
71
- };
72
- case "remove-rejected":
73
- return {
74
- ...u,
75
- fileRejections: u.fileRejections.filter(
76
- (v) => v !== g.payload
77
- )
78
- };
79
- }
80
- }, [{ acceptedFiles: l, fileRejections: e }, n] = ue(
81
- t,
82
- {
83
- acceptedFiles: [],
84
- fileRejections: []
85
- }
86
- ), r = w(
87
- (u, g) => n({
88
- type: "add-files",
89
- payload: { acceptedFiles: u, fileRejections: g }
90
- }),
91
- [n]
92
- );
93
- return { acceptedFiles: l, fileRejections: e, onFileUpload: r, removeFile: (u) => n({ type: "remove-accepted", payload: u }), removeRejectedFile: (u) => n({ type: "remove-rejected", payload: u }) };
94
- }, Re = ({
95
- accept: t,
96
- error: l,
97
- files: e,
98
- help: n,
99
- label: r,
100
- maxFiles: p,
101
- maxSize: m,
102
- minSize: u,
103
- onFileUpload: g,
104
- onRemoveFile: v,
105
- rejectedFiles: C
106
- }) => {
107
- const d = me(), b = e ?? d.acceptedFiles, f = C ?? d.fileRejections, E = g ?? d.onFileUpload, h = (c) => {
108
- v ? v(c) : "file" in c && "errors" in c ? d.removeRejectedFile(c) : d.removeFile(c);
109
- }, { getRootProps: x, getInputProps: i } = pe({
110
- accept: t,
111
- maxFiles: p,
112
- maxSize: m,
113
- minSize: u,
114
- onDrop: E
115
- }), y = q();
116
- return /* @__PURE__ */ N(
117
- "div",
118
- {
119
- className: L("p-form__group p-form-validation", {
120
- "is-error": !!l
121
- }),
122
- children: [
123
- r && /* @__PURE__ */ s(oe, { id: y, children: r }),
124
- n && /* @__PURE__ */ s("p", { className: "p-form-help-text", children: n }),
125
- /* @__PURE__ */ N("div", { className: "p-form__control", children: [
126
- !p || b.length + f.length < p ? /* @__PURE__ */ s("div", { className: "file-upload__wrapper", children: /* @__PURE__ */ N(
127
- "div",
128
- {
129
- ...x(),
130
- "aria-labelledby": r ? y : void 0,
131
- className: "file-upload",
132
- "data-testid": "file-upload",
133
- children: [
134
- /* @__PURE__ */ s("input", { ...i() }),
135
- /* @__PURE__ */ s("button", { className: "file-upload__button", type: "button", children: "Drag and drop files here or click to upload" })
136
- ]
137
- }
138
- ) }) : null,
139
- /* @__PURE__ */ N("div", { className: "file-upload__files-list", children: [
140
- f && f.map((c) => /* @__PURE__ */ s("span", { className: "is-error", children: /* @__PURE__ */ N("div", { className: "file-upload__file is-rejected", children: [
141
- c.file.name,
142
- /* @__PURE__ */ s(
143
- V,
144
- {
145
- appearance: "base",
146
- className: "file-upload__file-remove-button",
147
- onClick: () => h(c),
148
- type: "button",
149
- children: /* @__PURE__ */ s(K, { name: "close", children: "Remove file" })
150
- }
151
- )
152
- ] }) }, c.file.name)),
153
- b && b.map((c) => /* @__PURE__ */ N("div", { className: "file-upload__file", children: [
154
- c.name,
155
- c.percentUploaded !== void 0 ? /* @__PURE__ */ s(he, { percentComplete: c.percentUploaded }) : /* @__PURE__ */ s(
156
- V,
157
- {
158
- appearance: "base",
159
- className: "file-upload__file-remove-button",
160
- onClick: () => h(c),
161
- type: "button",
162
- children: /* @__PURE__ */ s(K, { name: "close", children: "Remove file" })
163
- }
164
- )
165
- ] }, c.name))
166
- ] }),
167
- l ? /* @__PURE__ */ N("p", { className: "p-form-validation__message", children: [
168
- /* @__PURE__ */ s("strong", { children: "Error: " }),
169
- l
170
- ] }) : null
171
- ] })
172
- ]
173
- }
174
- );
175
- }, X = (t, l) => t.label.localeCompare(l.label, "en", { numeric: !0 }), fe = (t) => (l, e) => {
176
- if (t) {
177
- const n = t.has(l.value), r = t.has(e.value);
178
- if (n && !r) return -1;
179
- if (!n && r) return 1;
180
- }
181
- return 0;
182
- }, ge = (t) => {
183
- const l = /* @__PURE__ */ new Map();
184
- return t.forEach((e) => {
185
- const n = e.group || "Ungrouped", r = l.get(n) || [];
186
- r.push(e), l.set(n, r);
187
- }), Array.from(l, ([e, n]) => ({ group: e, items: n }));
188
- }, ve = ({
189
- items: t,
190
- selectedItems: l,
191
- disabledItems: e,
192
- header: n,
193
- updateItems: r,
194
- isOpen: p,
195
- footer: m,
196
- sortFn: u = X,
197
- groupFn: g = ge,
198
- ...v
199
- }) => {
200
- const C = O(
201
- () => new Set(l.map((i) => i.value)),
202
- [l]
203
- ), d = O(
204
- () => new Set(e.map((i) => i.value)),
205
- [e]
206
- ), [b, f] = U(new Set(C));
207
- G(() => {
208
- p && f(new Set(C));
209
- }, [p]);
210
- const E = O(() => t.some((i) => i.group), [t]), h = O(
211
- () => E ? g(t) : [{ group: "Ungrouped", items: t }],
212
- [t, g]
213
- ), x = (i) => {
214
- const { checked: y, value: c } = i.target, P = t.find((I) => `${I.value}` === c);
215
- if (P) {
216
- const I = y ? [...l, P] : l.filter((F) => `${F.value}` !== c) ?? [];
217
- r(I);
218
- }
219
- };
220
- return /* @__PURE__ */ s(Z, { isVisible: p, className: "put-above", children: /* @__PURE__ */ N("div", { className: "multi-select__dropdown", role: "listbox", ...v, children: [
221
- n || null,
222
- h.map(({ group: i, items: y }) => /* @__PURE__ */ N("div", { className: "multi-select__group", children: [
223
- E ? /* @__PURE__ */ s("h5", { className: "multi-select__dropdown-header", children: i }) : null,
224
- /* @__PURE__ */ s("ul", { className: "multi-select__dropdown-list", "aria-label": i, children: y.sort(u).sort(fe(b)).map((c) => /* @__PURE__ */ s("li", { className: "multi-select__dropdown-item", children: /* @__PURE__ */ s(
225
- ae,
226
- {
227
- disabled: d.has(c.value),
228
- label: c.label,
229
- checked: C.has(c.value),
230
- value: c.value,
231
- onChange: x
232
- },
233
- c.value
234
- ) }, c.value)) })
235
- ] }, i)),
236
- m ? /* @__PURE__ */ s("div", { className: "multi-select__footer", children: m }) : null
237
- ] }) });
238
- }, Ae = ({
239
- disabled: t,
240
- selectedItems: l = [],
241
- label: e,
242
- onItemsUpdate: n,
243
- placeholder: r,
244
- required: p = !1,
245
- items: m = [],
246
- disabledItems: u = [],
247
- dropdownHeader: g,
248
- dropdownFooter: v,
249
- variant: C = "search"
250
- }) => {
251
- const d = ie(() => {
252
- f(!1), h("");
253
- });
254
- re(() => {
255
- f(!1), h("");
256
- });
257
- const [b, f] = U(!1), [E, h] = U("");
258
- G(() => {
259
- b || h("");
260
- }, [b]);
261
- const [x, i] = U([]), y = l || x, c = (_) => {
262
- const R = Array.from(new Set(_));
263
- i(R), n && n(R);
264
- }, P = q(), I = q(), F = y.filter(
265
- (_) => m.some((R) => R.value === _.value)
266
- ).sort(X).map((_) => _.label).join(", ");
267
- return /* @__PURE__ */ s("div", { ref: d, children: /* @__PURE__ */ N("div", { className: "multi-select", children: [
268
- C === "search" ? /* @__PURE__ */ s(
269
- H,
270
- {
271
- externallyControlled: !0,
272
- "aria-controls": P,
273
- "aria-expanded": b,
274
- id: I,
275
- role: "combobox",
276
- "aria-label": e || r || "Search",
277
- disabled: t,
278
- autoComplete: "off",
279
- onChange: (_) => {
280
- h(_), f(!0);
281
- },
282
- onFocus: () => f(!0),
283
- placeholder: r ?? "Search",
284
- required: p,
285
- type: "text",
286
- value: E,
287
- className: "multi-select__input"
288
- }
289
- ) : /* @__PURE__ */ s(
290
- "button",
291
- {
292
- role: "combobox",
293
- type: "button",
294
- "aria-label": e || r || "Select items",
295
- "aria-controls": P,
296
- "aria-expanded": b,
297
- className: "multi-select__select-button",
298
- onClick: () => {
299
- f((_) => !_);
300
- },
301
- children: /* @__PURE__ */ s("span", { className: "multi-select__condensed-text", children: y.length > 0 ? F : r ?? "Select items" })
302
- }
303
- ),
304
- /* @__PURE__ */ s(
305
- ve,
306
- {
307
- id: P,
308
- isOpen: b,
309
- items: E.length > 0 ? m.filter(
310
- (_) => _.label.toLowerCase().includes(E.toLowerCase())
311
- ) : m,
312
- selectedItems: y,
313
- disabledItems: u,
314
- header: g,
315
- updateItems: c,
316
- footer: v || /* @__PURE__ */ N(le, { children: [
317
- /* @__PURE__ */ s(
318
- V,
319
- {
320
- appearance: "link",
321
- onClick: () => {
322
- const _ = m.filter(
323
- (R) => !u.some(
324
- (D) => D.value === R.value
325
- )
326
- );
327
- c([...y, ..._]);
328
- },
329
- type: "button",
330
- children: "Select all"
331
- }
332
- ),
333
- /* @__PURE__ */ s(
334
- V,
335
- {
336
- appearance: "link",
337
- onClick: () => {
338
- const _ = y.filter(
339
- (R) => u.some(
340
- (D) => D.value === R.value
341
- )
342
- );
343
- c(_);
344
- },
345
- type: "button",
346
- children: "Clear"
347
- }
348
- )
349
- ] })
350
- }
351
- )
352
- ] }) });
353
- }, z = {
354
- DEFAULT: 4,
355
- EXPANDED: 15
356
- }, k = {
357
- OPEN_PAREN: "(",
358
- CLOSE_PAREN: ")",
359
- EQUALS: "=",
360
- COLON: ":",
361
- COMMA: ","
362
- }, j = (t, l = t.length) => {
363
- const e = be(t, l), { token: n, tokenStart: r, tokenEnd: p } = _e(t, l);
364
- return { context: e, token: n, tokenStart: r, tokenEnd: p };
365
- }, be = (t, l) => {
366
- let e = 0;
367
- for (let n = l - 1; n >= 0; n--) {
368
- const r = t[n];
369
- if (r === k.CLOSE_PAREN)
370
- e++;
371
- else if (r === k.OPEN_PAREN) {
372
- if (e === 0) {
373
- const m = t.slice(0, n).trimEnd().match(/([a-zA-Z0-9_-]+)\s*:\s*$/);
374
- return (m == null ? void 0 : m[1]) || "";
375
- }
376
- e--;
377
- }
378
- }
379
- return "";
380
- }, _e = (t, l) => {
381
- let e = l, n = l;
382
- for (; n < t.length && /[^\s=(),]/.test(t[n]); )
383
- n++;
384
- for (; e > 0 && /[^\s=(),]/.test(t[e - 1]); )
385
- e--;
386
- return { token: t.slice(e, n), tokenStart: e, tokenEnd: n };
387
- }, Q = (t, l) => {
388
- const e = t.charAt(l - 1);
389
- return l > 0 && (e === k.CLOSE_PAREN || e === k.COMMA);
390
- }, Me = ({
391
- className: t,
392
- disabled: l = !1,
393
- search: e,
394
- setSearch: n,
395
- context: r,
396
- setContext: p,
397
- setToken: m,
398
- suggestions: u,
399
- isLoading: g = !1,
400
- placeholder: v,
401
- ...C
402
- }) => {
403
- const [d, b] = U({
404
- isVisible: !1,
405
- highlightedIndex: -1,
406
- showingMore: !1,
407
- cursorPosition: 0
408
- }), f = T(null), E = T(null), h = T(null), x = O(() => {
409
- const o = d.showingMore ? z.EXPANDED : z.DEFAULT, a = u.slice(0, o);
410
- return !d.showingMore && u.length > o ? [...a, { value: "Show more...", type: "more" }] : a;
411
- }, [u, d.showingMore]), i = w(
412
- (o) => {
413
- b(typeof o == "function" ? (a) => ({ ...a, ...o(a) }) : (a) => ({ ...a, ...o }));
414
- },
415
- []
416
- ), y = w(
417
- (o) => {
418
- f.current && !f.current.contains(o.target) && i({
419
- isVisible: !1,
420
- highlightedIndex: -1
421
- });
422
- },
423
- [i]
424
- ), c = w(
425
- (o, a) => {
426
- const { tokenStart: S, tokenEnd: A } = a;
427
- if (o.type === "filter") {
428
- const B = o.value + k.COLON + k.OPEN_PAREN;
429
- return e.slice(0, S) + B + e.slice(A);
430
- }
431
- if (r.length === 0) {
432
- const B = o.type + k.COLON + k.OPEN_PAREN + k.EQUALS + o.value;
433
- return e.slice(0, S) + B + e.slice(A);
434
- }
435
- const M = e.charAt(S - 1) === k.EQUALS ? o.value : k.EQUALS + o.value;
436
- return e.slice(0, S) + M + e.slice(A);
437
- },
438
- [e, r]
439
- ), P = w(
440
- (o) => {
441
- const a = x[o];
442
- if (!a) return;
443
- if (a.type === "more") {
444
- i({ showingMore: !0 });
445
- return;
446
- }
447
- const S = j(
448
- e,
449
- d.cursorPosition
450
- ), A = c(a, S), M = S.tokenStart + (a.type === "filter" ? a.value.length + 2 : r.length === 0 ? a.type.length + a.value.length + 3 : a.value.length + 1), { context: B, token: ee } = j(
451
- A,
452
- M
453
- );
454
- p(B), m(ee), n(A), setTimeout(() => {
455
- h.current && (h.current.focus(), h.current.setSelectionRange(
456
- M,
457
- M
458
- ));
459
- }, 0), i({
460
- highlightedIndex: 0,
461
- showingMore: !1,
462
- isVisible: a.type === "filter",
463
- cursorPosition: M
464
- });
465
- },
466
- [
467
- x,
468
- c,
469
- e,
470
- d.cursorPosition,
471
- r,
472
- p,
473
- m,
474
- n,
475
- i
476
- ]
477
- ), I = w(() => {
478
- if (!h.current) return;
479
- const o = h.current.selectionStart || 0, { context: a, token: S } = j(
480
- e,
481
- o
482
- );
483
- p(a), m(S), i((A) => ({
484
- ...A,
485
- isVisible: !Q(e, o),
486
- cursorPosition: o
487
- }));
488
- }, [e, p, m, i]), F = w(
489
- (o) => {
490
- const { key: a } = o;
491
- if (d.isVisible) {
492
- const S = x.length;
493
- switch (a) {
494
- case "Tab":
495
- case "ArrowDown":
496
- o.preventDefault(), i({
497
- highlightedIndex: (d.highlightedIndex + 1) % S
498
- });
499
- return;
500
- case "ArrowUp":
501
- o.preventDefault(), i({
502
- highlightedIndex: d.highlightedIndex <= 0 ? S - 1 : d.highlightedIndex - 1
503
- });
504
- return;
505
- case "Enter":
506
- o.preventDefault(), d.highlightedIndex >= 0 ? P(d.highlightedIndex) : i({ isVisible: !1 });
507
- return;
508
- case "Escape":
509
- o.preventDefault(), i({
510
- isVisible: !1,
511
- highlightedIndex: -1
512
- });
513
- return;
514
- }
515
- }
516
- (a === "ArrowLeft" || a === "ArrowRight" || a === "Home" || a === "End") && setTimeout(I, 0);
517
- },
518
- [
519
- d,
520
- x.length,
521
- i,
522
- P,
523
- I
524
- ]
525
- ), _ = w(
526
- (o) => {
527
- const { key: a } = o;
528
- (a === "ArrowLeft" || a === "ArrowRight" || a === "Home" || a === "End") && I();
529
- },
530
- [I]
531
- ), R = w(() => {
532
- i({
533
- isVisible: !0,
534
- highlightedIndex: 0
535
- });
536
- }, [i]), D = w(
537
- (o) => {
538
- var M;
539
- const a = ((M = h.current) == null ? void 0 : M.selectionStart) || o.length, { context: S, token: A } = j(
540
- o,
541
- a
542
- );
543
- p(S), m(A), n(o), i({
544
- highlightedIndex: 0,
545
- isVisible: !Q(o, a),
546
- showingMore: !1,
547
- cursorPosition: a
548
- });
549
- },
550
- [p, m, n, i]
551
- ), Y = w(() => {
552
- setTimeout(I, 0);
553
- }, [I]), J = w(() => {
554
- i({
555
- isVisible: !1,
556
- highlightedIndex: -1
557
- });
558
- }, [i]), W = w(
559
- (o) => {
560
- i({ highlightedIndex: o });
561
- },
562
- [i]
563
- );
564
- return G(() => (document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y)), [y]), /* @__PURE__ */ N(
565
- "div",
566
- {
567
- className: L("p-query-input", t),
568
- "data-testid": "p-query-input",
569
- ref: f,
570
- ...C,
571
- children: [
572
- /* @__PURE__ */ s(
573
- H,
574
- {
575
- disabled: l,
576
- placeholder: v,
577
- value: e,
578
- externallyControlled: !0,
579
- autoComplete: "off",
580
- id: "query-input",
581
- name: "query-input",
582
- ref: h,
583
- onFocus: R,
584
- onChange: D,
585
- onKeyDown: F,
586
- onKeyUp: _,
587
- onClear: J,
588
- onClick: Y,
589
- "aria-disabled": l,
590
- "aria-expanded": d.isVisible,
591
- "aria-haspopup": "listbox",
592
- "aria-owns": "query-suggestions"
593
- }
594
- ),
595
- d.isVisible && u.length > 0 && /* @__PURE__ */ s(
596
- "ul",
597
- {
598
- className: "p-query-input__list",
599
- ref: E,
600
- id: "query-suggestions",
601
- role: "listbox",
602
- "aria-label": "Search suggestions",
603
- children: g ? /* @__PURE__ */ s("div", { className: "p-query-input__loading", children: /* @__PURE__ */ s($, { text: "Loading..." }) }) : x.map((o, a) => /* @__PURE__ */ N(
604
- "li",
605
- {
606
- className: L("p-query-input__item", {
607
- highlight: a === d.highlightedIndex
608
- }),
609
- onClick: () => P(a),
610
- onKeyDown: () => P(a),
611
- onMouseEnter: () => W(a),
612
- role: "option",
613
- "aria-selected": a === d.highlightedIndex,
614
- tabIndex: -1,
615
- children: [
616
- /* @__PURE__ */ N("span", { className: "p-query-input__item-label", children: [
617
- /* @__PURE__ */ s(
618
- "span",
619
- {
620
- className: L({
621
- "u-text--muted": o.type === "more"
622
- }),
623
- children: o.value
624
- }
625
- ),
626
- o.type === "filter" && /* @__PURE__ */ s("span", { className: "u-text--muted", children: ":()" })
627
- ] }),
628
- o.type !== "more" && /* @__PURE__ */ s("span", { className: "u-text--muted u-align-text--right", children: o.type })
629
- ]
630
- },
631
- `${o.value}-${a}`
632
- ))
633
- }
634
- )
635
- ]
636
- }
637
- );
638
- }, Le = ({ value: t, unit: l }, {
639
- binary: e = !1,
640
- convertTo: n,
641
- decimals: r = 2,
642
- roundFunc: p = "round"
643
- } = {}) => {
644
- const m = t < 0, u = Math.abs(t);
645
- if (u === 0)
646
- return { value: 0, unit: n || "B" };
647
- const g = e ? 1024 : 1e3, v = e ? ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"] : ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], C = v.findIndex((h) => h === l) || 0, d = u * Math.pow(g, C), b = n ? v.findIndex((h) => h === n) : Math.floor(Math.log(d) / Math.log(g));
648
- let f = d / Math.pow(g, b);
649
- if (f % 1 !== 0) {
650
- const h = Math.pow(10, r);
651
- f = Math[p](f * h) / h;
652
- }
653
- return {
654
- value: m ? -f : f,
655
- unit: v[b]
656
- };
657
- };
658
- export {
659
- te as ContentSection,
660
- Be as DynamicTable,
661
- Ee as ExternalLink,
662
- Re as FileUpload,
663
- Oe as FormSection,
664
- Ue as GenericTable,
665
- je as InputGroup,
666
- Ve as Layout,
667
- Te as MainToolbar,
668
- qe as Meter,
669
- Ae as MultiSelect,
670
- ve as MultiSelectDropdown,
671
- Ge as Navigation,
672
- Ke as NavigationBar,
673
- Pe as NestedFormGroup,
674
- ze as Pagination,
675
- Qe as PaginationContainer,
676
- $e as Placeholder,
677
- he as ProgressIndicator,
678
- Me as QueryInput,
679
- ne as SidePanel,
680
- He as SidePanelContextProvider,
681
- ke as Stepper,
682
- Ze as TableCaption,
683
- Xe as defaultFilledColors,
684
- Le as formatBytes,
685
- xe as lazyLoadSidePanel,
686
- Ye as meterColor,
687
- Je as testIds,
688
- We as useSidePanel
689
- };
1
+ import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "../lib-qz4Dneh_.mjs";
2
+ export { t as ContentSection, c as DynamicTable, r as ExternalLink, u as FileUpload, a as FormSection, S as GenericTable, O as InputGroup, p as Layout, m as MainToolbar, n as Meter, b as MultiSelect, C as MultiSelectDropdown, x as Navigation, v as NavigationBar, f as NestedFormGroup, T as Pagination, d as PaginationContainer, D as Placeholder, o as ProgressIndicator, y as QueryInput, l as SidePanel, E as SidePanelContextProvider, _ as Stepper, h as TableCaption, i as defaultFilledColors, w as formatBytes, s as lazyLoadSidePanel, g as meterColor, e as testIds, k as useSidePanel };
@@ -15,15 +15,15 @@ export type DynamicTableProps = PropsWithChildren<{
15
15
  * @returns
16
16
  */
17
17
  export declare const DynamicTable: {
18
- ({ className, children, variant, ...props }: DynamicTableProps): import("react/jsx-runtime").JSX.Element;
19
- Body: ({ className, children, style, ...props }: DynamicTableBodyProps) => import("react/jsx-runtime").JSX.Element;
18
+ ({ className, children, variant, ...props }: DynamicTableProps): import("react").JSX.Element;
19
+ Body: ({ className, children, style, ...props }: DynamicTableBodyProps) => import("react").JSX.Element;
20
20
  Loading: <TData extends RowData>({ className, table, }: {
21
21
  className?: string;
22
22
  table?: Table<TData>;
23
23
  placeholderLengths?: {
24
24
  [key: string]: string;
25
25
  };
26
- }) => import("react/jsx-runtime").JSX.Element;
26
+ }) => import("react").JSX.Element;
27
27
  };
28
28
  interface DynamicTableBodyProps extends AriaAttributes {
29
29
  className?: string;