@mittwald/flow-react-components 0.1.0-alpha.140 → 0.1.0-alpha.142
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/{Accordion-rCpRbkUM.js → Accordion-QhhkJhTO.js} +1 -1
- package/dist/Accordion.js +1 -1
- package/dist/{Button-BPAhEOTg.js → Button-BS1F0zPs.js} +9 -12
- package/dist/Button.js +1 -1
- package/dist/ContextualHelp.js +5 -8
- package/dist/CopyButton.js +6 -9
- package/dist/InlineAlert.js +1 -1
- package/dist/{Label-CJi7iMmE.js → Label-5xy35UpX.js} +5 -8
- package/dist/Label.js +1 -1
- package/dist/List.js +218 -221
- package/dist/Navigation.js +1 -1
- package/dist/Notification.js +2 -2
- package/dist/NumberField.js +1 -1
- package/dist/OffCanvas.js +1 -1
- package/dist/Slider.js +8 -11
- package/dist/StatusBadge.js +1 -1
- package/dist/{StatusIcon-l795M3JX.js → StatusIcon-J28z-uQ4.js} +11 -14
- package/dist/StatusIcon.js +1 -1
- package/dist/Switch.js +1 -1
- package/dist/Tabs.js +1 -1
- package/dist/TextArea.js +1 -1
- package/dist/TextField.js +1 -1
- package/dist/TextFieldBase-Ciy6scGP.js +60 -0
- package/dist/react-hook-form.js +42 -39
- package/dist/styles.css +1 -1
- package/package.json +31 -30
- package/dist/TextFieldBase-BhdK6WXV.js +0 -60
package/dist/List.js
CHANGED
|
@@ -1,82 +1,79 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var o = (
|
|
6
|
-
import
|
|
7
|
-
import { R as
|
|
8
|
-
import { C as q, a as
|
|
3
|
+
var _ = Object.defineProperty;
|
|
4
|
+
var tt = (s, t, e) => t in s ? _(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
|
|
5
|
+
var o = (s, t, e) => (tt(s, typeof t != "symbol" ? t + "" : t, e), e);
|
|
6
|
+
import n, { createContext as et, useContext as at, createElement as st, useEffect as F, useRef as nt, Suspense as it } from "react";
|
|
7
|
+
import { R as rt } from "./Render-BdlTa7Qb.js";
|
|
8
|
+
import { C as q, a as ot } from "./ContextMenuTrigger-DjZx2IST.js";
|
|
9
9
|
import { M as K } from "./MenuItem-Dny58Rqq.js";
|
|
10
10
|
import * as j from "react-aria-components";
|
|
11
|
-
import { autorun as
|
|
11
|
+
import { autorun as lt, runInAction as ct, makeObservable as ut, observable as N, computed as R, action as I } from "mobx";
|
|
12
12
|
import "./useOverlayController-CGKumeGL.js";
|
|
13
13
|
import "./propsContext-DzAKlmhS.js";
|
|
14
14
|
import "@react-aria/utils";
|
|
15
|
-
import { times as
|
|
16
|
-
import { getProperty as
|
|
15
|
+
import { times as mt } from "remeda";
|
|
16
|
+
import { getProperty as dt } from "dot-prop";
|
|
17
17
|
import { T as y } from "./Text-D6e-S6em.js";
|
|
18
18
|
import "@tabler/icons-react";
|
|
19
19
|
import "./Icon-D4bkU_pz.js";
|
|
20
20
|
import { I as J } from "./IconChevronDown-HLDPe1kj.js";
|
|
21
|
-
import { B as g } from "./Button-
|
|
22
|
-
import {
|
|
23
|
-
import
|
|
24
|
-
import { I as
|
|
25
|
-
import { useReactTable as
|
|
26
|
-
import
|
|
27
|
-
import { useLocalObservable as
|
|
21
|
+
import { B as g } from "./Button-BS1F0zPs.js";
|
|
22
|
+
import { useLocalizedStringFormatter as v } from "react-aria";
|
|
23
|
+
import W from "clsx";
|
|
24
|
+
import { I as ht } from "./IconClose-FTrJdf_N.js";
|
|
25
|
+
import { useReactTable as gt, getCoreRowModel as pt, getSortedRowModel as ft, getFilteredRowModel as bt, getPaginationRowModel as St, getFacetedUniqueValues as yt } from "@tanstack/react-table";
|
|
26
|
+
import Y from "invariant";
|
|
27
|
+
import { useLocalObservable as vt } from "mobx-react-lite";
|
|
28
28
|
import { getAsyncResource as V } from "@mittwald/react-use-promise";
|
|
29
29
|
import { u as x } from "./useSelector-DpU7_HMO.js";
|
|
30
|
-
import { I as
|
|
31
|
-
import { I as
|
|
32
|
-
import { H as
|
|
33
|
-
import { S as
|
|
34
|
-
import { P as
|
|
35
|
-
import { d as
|
|
36
|
-
import { I as
|
|
37
|
-
import { TunnelProvider as
|
|
38
|
-
import { L as
|
|
39
|
-
import { d as
|
|
40
|
-
import { ListLoaderAsyncResource as
|
|
41
|
-
import { I as
|
|
30
|
+
import { I as Et } from "./IllustratedMessage-DadLfPs9.js";
|
|
31
|
+
import { I as Ct } from "./IconSearch-DadOOeXe.js";
|
|
32
|
+
import { H as It } from "./Heading-CfQzGjxY.js";
|
|
33
|
+
import { S as G } from "./Skeleton-CKLaTmDR.js";
|
|
34
|
+
import { P as Ft } from "./PropsContextProvider-C6Z4XGp6.js";
|
|
35
|
+
import { d as Tt } from "./dynamic-ClpUSmEt.js";
|
|
36
|
+
import { I as Lt } from "./IconContextMenu-Bmk1_j_0.js";
|
|
37
|
+
import { TunnelProvider as wt, TunnelExit as z } from "@mittwald/react-tunnel";
|
|
38
|
+
import { L as Bt } from "./Link-CcYCy_KC.js";
|
|
39
|
+
import { d as C, a as $ } from "./deepFindOfType-6pG0fH7S.js";
|
|
40
|
+
import { ListLoaderAsyncResource as At } from "./List/ListLoaderAsyncResource.js";
|
|
41
|
+
import { I as kt } from "./InlineCode-BT-PKxVv.js";
|
|
42
42
|
import "react-children-utilities";
|
|
43
|
-
const
|
|
43
|
+
const Q = et({}), h = () => at(Q).list, Dt = () => h().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(rt, { key: e }, () => {
|
|
44
44
|
t();
|
|
45
|
-
})), Pt = (
|
|
46
|
-
const { sorting: t } =
|
|
47
|
-
return /* @__PURE__ */
|
|
48
|
-
}, d = {
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
},
|
|
72
|
-
const
|
|
73
|
-
|
|
74
|
-
}, Nt = () => {
|
|
75
|
-
const i = h(), t = i.sorting.map((n) => /* @__PURE__ */ s.createElement(Pt, { sorting: n, key: n.getTableColumn().id }));
|
|
76
|
-
if (i.sorting.length === 0)
|
|
45
|
+
})), Pt = (s) => {
|
|
46
|
+
const { sorting: t } = s;
|
|
47
|
+
return /* @__PURE__ */ n.createElement(K, { id: t.getTableColumn().id }, t.name);
|
|
48
|
+
}, d = { "de-DE": {
|
|
49
|
+
"list.noResult.heading": "Keine Suchergebnisse gefunden",
|
|
50
|
+
"list.noResult.text": "Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.",
|
|
51
|
+
"list.options": "Optionen",
|
|
52
|
+
"list.paginationInfo": (s) => `${s.visibleItemsCount} von insgesamt ${s.totalItemsCount} angezeigt`,
|
|
53
|
+
"list.paginationInfoFiltered": (s) => `${s.visibleItemsCount} von insgesamt ${s.filteredItemsCount} (gefiltert aus ${s.totalItemsCount}) angezeigt`,
|
|
54
|
+
"list.resetAll": "Alles zurücksetzen",
|
|
55
|
+
"list.setSorting": (s) => `Sortierung: ${s.property}`,
|
|
56
|
+
"list.showMore": "Mehr anzeigen",
|
|
57
|
+
"list.sorting": "Sortierung"
|
|
58
|
+
}, "en-EN": {
|
|
59
|
+
"list.noResult.heading": "No search results found",
|
|
60
|
+
"list.noResult.text": "Your search did not return any results. Please adjust the search query or your filters.",
|
|
61
|
+
"list.options": "Options",
|
|
62
|
+
"list.paginationInfo": (s) => `Showing ${s.visibleItemsCount} of ${s.totalItemsCount}`,
|
|
63
|
+
"list.paginationInfoFiltered": (s) => `Showing ${s.visibleItemsCount} of ${s.filteredItemsCount} (unfiltered total count ${s.totalItemsCount})`,
|
|
64
|
+
"list.resetAll": "Reset filters",
|
|
65
|
+
"list.setSorting": (s) => `Sorting: ${s.property}`,
|
|
66
|
+
"list.showMore": "Show more",
|
|
67
|
+
"list.sorting": "Sorting"
|
|
68
|
+
} }, T = (s) => {
|
|
69
|
+
const { children: t, locales: e, variables: a } = s;
|
|
70
|
+
return v(e).format(t, a);
|
|
71
|
+
}, Mt = () => {
|
|
72
|
+
const s = h(), t = s.sorting.map((i) => /* @__PURE__ */ n.createElement(Pt, { sorting: i, key: i.getTableColumn().id }));
|
|
73
|
+
if (s.sorting.length === 0)
|
|
77
74
|
return null;
|
|
78
|
-
const e =
|
|
79
|
-
|
|
75
|
+
const e = s.sorting.find((i) => i.isSorted()), a = /* @__PURE__ */ n.createElement(y, null, e ? /* @__PURE__ */ n.createElement(
|
|
76
|
+
T,
|
|
80
77
|
{
|
|
81
78
|
locales: d,
|
|
82
79
|
variables: {
|
|
@@ -84,40 +81,40 @@ const X = at({}), h = () => st(X).list, Mt = () => h().loader.getLoaderInvocatio
|
|
|
84
81
|
}
|
|
85
82
|
},
|
|
86
83
|
"list.setSorting"
|
|
87
|
-
) : /* @__PURE__ */
|
|
88
|
-
return /* @__PURE__ */
|
|
84
|
+
) : /* @__PURE__ */ n.createElement(T, { locales: d }, "list.sorting"));
|
|
85
|
+
return /* @__PURE__ */ n.createElement(j.MenuTrigger, null, /* @__PURE__ */ n.createElement(g, { variant: "soft", size: "s", color: "secondary" }, a, /* @__PURE__ */ n.createElement(J, null)), /* @__PURE__ */ n.createElement(
|
|
89
86
|
q,
|
|
90
87
|
{
|
|
91
88
|
selectionMode: "single",
|
|
92
89
|
selectedKeys: e ? [e.property] : [],
|
|
93
|
-
onAction: (
|
|
94
|
-
|
|
90
|
+
onAction: (i) => {
|
|
91
|
+
s.getSorting(String(i)).enable();
|
|
95
92
|
}
|
|
96
93
|
},
|
|
97
94
|
t
|
|
98
95
|
));
|
|
99
|
-
},
|
|
100
|
-
const { filter: t } =
|
|
96
|
+
}, Nt = (s) => {
|
|
97
|
+
const { filter: t } = s, e = t.values.map((r) => /* @__PURE__ */ n.createElement(K, { key: t.getValueId(r), id: String(r) }, String(r))), a = t.values.filter((r) => t.isValueActive(r)).map((r) => String(r)), i = (r) => {
|
|
101
98
|
t.toggleValue(r);
|
|
102
99
|
};
|
|
103
|
-
return /* @__PURE__ */
|
|
100
|
+
return /* @__PURE__ */ n.createElement(j.MenuTrigger, null, /* @__PURE__ */ n.createElement(g, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ n.createElement(y, null, t.name ?? t.property), /* @__PURE__ */ n.createElement(J, null)), /* @__PURE__ */ n.createElement(
|
|
104
101
|
q,
|
|
105
102
|
{
|
|
106
|
-
onAction:
|
|
103
|
+
onAction: i,
|
|
107
104
|
selectionMode: "multiple",
|
|
108
105
|
selectedKeys: a
|
|
109
106
|
},
|
|
110
107
|
e
|
|
111
108
|
));
|
|
112
|
-
},
|
|
113
|
-
header:
|
|
114
|
-
pickerList:
|
|
115
|
-
},
|
|
116
|
-
activeFilters:
|
|
117
|
-
clearButton:
|
|
118
|
-
},
|
|
119
|
-
const
|
|
120
|
-
(e) => e.values.filter((a) => e.isValueActive(a)).map((a) => /* @__PURE__ */
|
|
109
|
+
}, Rt = "flow--list--header", Vt = "flow--list--header--picker-list", O = {
|
|
110
|
+
header: Rt,
|
|
111
|
+
pickerList: Vt
|
|
112
|
+
}, xt = "flow--list--header--active-filters", zt = "flow--list--header--clear-button", U = {
|
|
113
|
+
activeFilters: xt,
|
|
114
|
+
clearButton: zt
|
|
115
|
+
}, $t = () => {
|
|
116
|
+
const s = h(), t = s.filters.flatMap(
|
|
117
|
+
(e) => e.values.filter((a) => e.isValueActive(a)).map((a) => /* @__PURE__ */ n.createElement(
|
|
121
118
|
g,
|
|
122
119
|
{
|
|
123
120
|
variant: "soft",
|
|
@@ -125,25 +122,25 @@ const X = at({}), h = () => st(X).list, Mt = () => h().loader.getLoaderInvocatio
|
|
|
125
122
|
key: String(a),
|
|
126
123
|
onPress: () => e.deactivateValue(a)
|
|
127
124
|
},
|
|
128
|
-
/* @__PURE__ */
|
|
129
|
-
/* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ n.createElement(y, null, String(a)),
|
|
126
|
+
/* @__PURE__ */ n.createElement(ht, null)
|
|
130
127
|
))
|
|
131
128
|
);
|
|
132
|
-
return t.length <= 0 ? null : /* @__PURE__ */
|
|
129
|
+
return t.length <= 0 ? null : /* @__PURE__ */ n.createElement("div", { className: U.activeFilters }, t, /* @__PURE__ */ n.createElement(
|
|
133
130
|
g,
|
|
134
131
|
{
|
|
135
|
-
className:
|
|
132
|
+
className: U.clearButton,
|
|
136
133
|
size: "s",
|
|
137
134
|
variant: "plain",
|
|
138
|
-
onPress: () =>
|
|
135
|
+
onPress: () => s.clearFilters()
|
|
139
136
|
},
|
|
140
|
-
/* @__PURE__ */
|
|
137
|
+
/* @__PURE__ */ n.createElement(T, { locales: d }, "list.resetAll")
|
|
141
138
|
));
|
|
142
|
-
},
|
|
143
|
-
const { className: t } =
|
|
144
|
-
return /* @__PURE__ */
|
|
145
|
-
},
|
|
146
|
-
list:
|
|
139
|
+
}, Ot = (s) => {
|
|
140
|
+
const { className: t } = s, a = h().filters.map((i) => /* @__PURE__ */ n.createElement(Nt, { key: i.property, filter: i }));
|
|
141
|
+
return /* @__PURE__ */ n.createElement("div", { className: W(t, O.header) }, /* @__PURE__ */ n.createElement("div", { className: O.pickerList }, /* @__PURE__ */ n.createElement(Mt, null), a), /* @__PURE__ */ n.createElement($t, null));
|
|
142
|
+
}, Ut = "flow--list", Ht = {
|
|
143
|
+
list: Ut
|
|
147
144
|
}, S = class S {
|
|
148
145
|
constructor(t, e, a) {
|
|
149
146
|
o(this, "id");
|
|
@@ -158,8 +155,8 @@ const X = at({}), h = () => st(X).list, Mt = () => h().loader.getLoaderInvocatio
|
|
|
158
155
|
return new S(t, e.id, e.original);
|
|
159
156
|
}
|
|
160
157
|
};
|
|
161
|
-
o(S, "fallbackRenderItemFn", (t) =>
|
|
162
|
-
let
|
|
158
|
+
o(S, "fallbackRenderItemFn", (t) => st("pre", void 0, JSON.stringify(t)));
|
|
159
|
+
let L = S;
|
|
163
160
|
class w {
|
|
164
161
|
constructor(t) {
|
|
165
162
|
o(this, "list");
|
|
@@ -169,15 +166,15 @@ class w {
|
|
|
169
166
|
return new w(t);
|
|
170
167
|
}
|
|
171
168
|
get entries() {
|
|
172
|
-
return this.list.reactTable.table.getRowModel().rows.map((t) =>
|
|
169
|
+
return this.list.reactTable.table.getRowModel().rows.map((t) => L.fromRow(this, t));
|
|
173
170
|
}
|
|
174
171
|
}
|
|
175
|
-
class
|
|
172
|
+
class qt {
|
|
176
173
|
constructor(t, e = {}) {
|
|
177
174
|
o(this, "batchSize");
|
|
178
175
|
o(this, "list");
|
|
179
176
|
const { batchSize: a = 20 } = e;
|
|
180
|
-
this.list = t, this.batchSize = a, t.filters.forEach((
|
|
177
|
+
this.list = t, this.batchSize = a, t.filters.forEach((i) => i.onFilterUpdated(() => this.reset()));
|
|
181
178
|
}
|
|
182
179
|
get reactTable() {
|
|
183
180
|
return this.list.reactTable.table;
|
|
@@ -221,8 +218,8 @@ class Kt {
|
|
|
221
218
|
}
|
|
222
219
|
}
|
|
223
220
|
}
|
|
224
|
-
const
|
|
225
|
-
class
|
|
221
|
+
const Kt = (s, t) => s === t;
|
|
222
|
+
class jt {
|
|
226
223
|
constructor(t, e) {
|
|
227
224
|
o(this, "_values");
|
|
228
225
|
o(this, "list");
|
|
@@ -231,28 +228,28 @@ class Jt {
|
|
|
231
228
|
o(this, "matcher");
|
|
232
229
|
o(this, "name");
|
|
233
230
|
o(this, "onFilterUpdateCallbacks", /* @__PURE__ */ new Set());
|
|
234
|
-
this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = e.values, this.matcher = e.matcher ??
|
|
231
|
+
this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = e.values, this.matcher = e.matcher ?? Kt, this.name = e.name;
|
|
235
232
|
}
|
|
236
233
|
updateTableColumnDef(t) {
|
|
237
234
|
t.enableColumnFilter = !0, t.filterFn = this.getReactTableFilterFn();
|
|
238
235
|
}
|
|
239
236
|
getReactTableFilterFn() {
|
|
240
237
|
return (t, e, a) => this.checkFilterMatches(
|
|
241
|
-
|
|
238
|
+
dt(t.original, this.property),
|
|
242
239
|
a
|
|
243
240
|
);
|
|
244
241
|
}
|
|
245
242
|
checkFilterMatches(t, e) {
|
|
246
243
|
if (e === null)
|
|
247
244
|
return !0;
|
|
248
|
-
const a = (r) => Array.isArray(r) ? r : [r],
|
|
245
|
+
const a = (r) => Array.isArray(r) ? r : [r], i = (r) => this.matcher(r, t);
|
|
249
246
|
if (this.mode === "all")
|
|
250
|
-
return a(e).every(
|
|
247
|
+
return a(e).every(i);
|
|
251
248
|
if (this.mode === "some") {
|
|
252
249
|
const r = a(e);
|
|
253
|
-
return r.length === 0 || r.some(
|
|
250
|
+
return r.length === 0 || r.some(i);
|
|
254
251
|
} else if (this.mode === "one")
|
|
255
|
-
return
|
|
252
|
+
return i(e);
|
|
256
253
|
throw new Error(`Unknown filter mode '${this.mode}'`);
|
|
257
254
|
}
|
|
258
255
|
getTableColumnFilter() {
|
|
@@ -284,12 +281,12 @@ class Jt {
|
|
|
284
281
|
activateValue(t) {
|
|
285
282
|
const e = this.getArrayValue();
|
|
286
283
|
let a;
|
|
287
|
-
this.mode === "all" || this.mode === "some" ? a = [...e, t] : a = t, this.list.reactTable.getTableColumn(this.property).setFilterValue(a), this.onFilterUpdateCallbacks.forEach((
|
|
284
|
+
this.mode === "all" || this.mode === "some" ? a = [...e, t] : a = t, this.list.reactTable.getTableColumn(this.property).setFilterValue(a), this.onFilterUpdateCallbacks.forEach((i) => i());
|
|
288
285
|
}
|
|
289
286
|
deactivateValue(t) {
|
|
290
287
|
const e = this.getArrayValue();
|
|
291
288
|
let a;
|
|
292
|
-
this.mode === "all" || this.mode === "some" ? a = e.filter((
|
|
289
|
+
this.mode === "all" || this.mode === "some" ? a = e.filter((i) => i !== t) : a = null, this.list.reactTable.getTableColumn(this.property).setFilterValue(a), this.onFilterUpdateCallbacks.forEach((i) => i());
|
|
293
290
|
}
|
|
294
291
|
clearValues() {
|
|
295
292
|
let t;
|
|
@@ -297,14 +294,14 @@ class Jt {
|
|
|
297
294
|
}
|
|
298
295
|
toggleValue(t) {
|
|
299
296
|
const e = this.isValueActive(t), a = this.getArrayValue();
|
|
300
|
-
let
|
|
301
|
-
this.mode === "all" || this.mode === "some" ? e ?
|
|
297
|
+
let i;
|
|
298
|
+
this.mode === "all" || this.mode === "some" ? e ? i = a.filter((r) => r !== t) : i = [...a, t] : i = e ? null : t, this.list.reactTable.getTableColumn(this.property).setFilterValue(i), this.onFilterUpdateCallbacks.forEach((r) => r());
|
|
302
299
|
}
|
|
303
300
|
onFilterUpdated(t) {
|
|
304
301
|
this.onFilterUpdateCallbacks.add(t);
|
|
305
302
|
}
|
|
306
303
|
}
|
|
307
|
-
class
|
|
304
|
+
class Jt {
|
|
308
305
|
constructor(t, e) {
|
|
309
306
|
o(this, "list");
|
|
310
307
|
o(this, "property");
|
|
@@ -329,7 +326,7 @@ class Wt {
|
|
|
329
326
|
this.list.reactTable.getTableColumn(this.property).clearSorting();
|
|
330
327
|
}
|
|
331
328
|
}
|
|
332
|
-
const
|
|
329
|
+
const Wt = (s) => F(lt(s));
|
|
333
330
|
class B {
|
|
334
331
|
constructor(t, e = {}) {
|
|
335
332
|
o(this, "list");
|
|
@@ -340,17 +337,17 @@ class B {
|
|
|
340
337
|
if (!e)
|
|
341
338
|
return;
|
|
342
339
|
const a = typeof t == "function" ? t(e) : t;
|
|
343
|
-
|
|
340
|
+
ct(() => {
|
|
344
341
|
this.tableState.value = this.getUpdatedTableState(e, a);
|
|
345
342
|
});
|
|
346
343
|
});
|
|
347
|
-
this.list = t, this.tableState =
|
|
344
|
+
this.list = t, this.tableState = vt(() => ({ value: void 0 })), this.table = this.useReactTable(e);
|
|
348
345
|
}
|
|
349
346
|
static useNew(t, e = {}) {
|
|
350
347
|
return new B(t, e);
|
|
351
348
|
}
|
|
352
349
|
useReactTable(t = {}) {
|
|
353
|
-
const e = this.list.loader.useData(), a = this.list.sorting.filter((r) => r.defaultEnabled),
|
|
350
|
+
const e = this.list.loader.useData(), a = this.list.sorting.filter((r) => r.defaultEnabled), i = gt({
|
|
354
351
|
data: e,
|
|
355
352
|
initialState: {
|
|
356
353
|
pagination: {
|
|
@@ -362,18 +359,18 @@ class B {
|
|
|
362
359
|
}))
|
|
363
360
|
},
|
|
364
361
|
columns: this.getTableColumnDefs(),
|
|
365
|
-
getCoreRowModel:
|
|
366
|
-
getSortedRowModel:
|
|
367
|
-
getFilteredRowModel:
|
|
368
|
-
getPaginationRowModel:
|
|
369
|
-
getFacetedUniqueValues:
|
|
362
|
+
getCoreRowModel: pt(),
|
|
363
|
+
getSortedRowModel: ft(),
|
|
364
|
+
getFilteredRowModel: bt(),
|
|
365
|
+
getPaginationRowModel: St(),
|
|
366
|
+
getFacetedUniqueValues: yt(),
|
|
370
367
|
onStateChange: this.onTableStateChange,
|
|
371
368
|
...t
|
|
372
369
|
});
|
|
373
|
-
return this.useUpdateTableState(
|
|
370
|
+
return this.useUpdateTableState(i), i;
|
|
374
371
|
}
|
|
375
372
|
useUpdateTableState(t) {
|
|
376
|
-
|
|
373
|
+
Wt(() => {
|
|
377
374
|
const e = this.tableState.value;
|
|
378
375
|
e ? t.setOptions((a) => ({
|
|
379
376
|
...a,
|
|
@@ -386,13 +383,13 @@ class B {
|
|
|
386
383
|
}
|
|
387
384
|
getTableColumn(t) {
|
|
388
385
|
const e = this.table.getColumn(t);
|
|
389
|
-
return
|
|
386
|
+
return Y(!!e, `Column #${t} is not defined`), e;
|
|
390
387
|
}
|
|
391
388
|
getTableColumnDefs() {
|
|
392
389
|
const t = /* @__PURE__ */ new Map(), e = (a) => {
|
|
393
|
-
const
|
|
394
|
-
if (
|
|
395
|
-
return
|
|
390
|
+
const i = t.get(a);
|
|
391
|
+
if (i)
|
|
392
|
+
return i;
|
|
396
393
|
const r = {
|
|
397
394
|
id: a,
|
|
398
395
|
accessorKey: a,
|
|
@@ -413,18 +410,18 @@ class A {
|
|
|
413
410
|
o(this, "dataBatches", []);
|
|
414
411
|
o(this, "prevDataBatches", []);
|
|
415
412
|
o(this, "batchLoadingStates", ["void"]);
|
|
416
|
-
|
|
413
|
+
ut(this, {
|
|
417
414
|
dataBatches: N.shallow,
|
|
418
415
|
batchLoadingStates: N.shallow,
|
|
419
416
|
mergedData: R,
|
|
420
417
|
isLoading: R,
|
|
421
|
-
reset:
|
|
422
|
-
setDataBatch:
|
|
423
|
-
setBatchLoadingState:
|
|
418
|
+
reset: I.bound,
|
|
419
|
+
setDataBatch: I.bound,
|
|
420
|
+
setBatchLoadingState: I.bound
|
|
424
421
|
});
|
|
425
422
|
}
|
|
426
423
|
static useNew() {
|
|
427
|
-
return
|
|
424
|
+
return nt(new A()).current;
|
|
428
425
|
}
|
|
429
426
|
reset() {
|
|
430
427
|
this.batchLoadingStates = [], this.dataBatches = [];
|
|
@@ -448,7 +445,7 @@ class A {
|
|
|
448
445
|
return x(() => this.isLoading);
|
|
449
446
|
}
|
|
450
447
|
}
|
|
451
|
-
const
|
|
448
|
+
const Yt = [];
|
|
452
449
|
class k {
|
|
453
450
|
constructor(t, e = {}) {
|
|
454
451
|
o(this, "list");
|
|
@@ -458,9 +455,9 @@ class k {
|
|
|
458
455
|
o(this, "manualPagination");
|
|
459
456
|
o(this, "loaderState");
|
|
460
457
|
const { source: a } = e;
|
|
461
|
-
this.dataSource = a ?? { staticData:
|
|
462
|
-
const
|
|
463
|
-
this.list = t, this.loaderState = A.useNew(), this.manualPagination =
|
|
458
|
+
this.dataSource = a ?? { staticData: Yt };
|
|
459
|
+
const i = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, r = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, l = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
|
|
460
|
+
this.list = t, this.loaderState = A.useNew(), this.manualPagination = i ?? !1, this.manualFiltering = r ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((u) => u.onFilterUpdated(() => this.reset()));
|
|
464
461
|
}
|
|
465
462
|
static useNew(t, e = {}) {
|
|
466
463
|
return new k(t, e);
|
|
@@ -478,7 +475,7 @@ class k {
|
|
|
478
475
|
return this.loaderState.useMergedData();
|
|
479
476
|
}
|
|
480
477
|
getLoaderInvocationHooks() {
|
|
481
|
-
return
|
|
478
|
+
return mt(this.list.batches.getBatchIndex() + 1, (e) => e).map((e) => () => {
|
|
482
479
|
this.useLoadBatch(e);
|
|
483
480
|
});
|
|
484
481
|
}
|
|
@@ -489,7 +486,7 @@ class k {
|
|
|
489
486
|
}), this.useObserveBatchData(e, t), this.useObserveBatchLoadingState(e, t);
|
|
490
487
|
}
|
|
491
488
|
useObserveBatchLoadingState(t, e) {
|
|
492
|
-
|
|
489
|
+
F(() => (this.loaderState.setBatchLoadingState(
|
|
493
490
|
e,
|
|
494
491
|
t.state.value
|
|
495
492
|
), t.state.observe((a) => {
|
|
@@ -497,12 +494,12 @@ class k {
|
|
|
497
494
|
})), [t, e]);
|
|
498
495
|
}
|
|
499
496
|
useObserveBatchData(t, e) {
|
|
500
|
-
const a = (
|
|
501
|
-
const { data: r, itemTotalCount: l } =
|
|
497
|
+
const a = (i) => {
|
|
498
|
+
const { data: r, itemTotalCount: l } = i;
|
|
502
499
|
this.loaderState.setDataBatch(e, r), l !== void 0 && this.list.batches.updateItemTotalCount(l);
|
|
503
500
|
};
|
|
504
|
-
|
|
505
|
-
|
|
501
|
+
F(() => (t.value.value.isSet && a(t.value.value.value), t.value.observe((i) => {
|
|
502
|
+
i.isSet && a(i.value);
|
|
506
503
|
})), [t, e]);
|
|
507
504
|
}
|
|
508
505
|
getDataLoaderOptions(t) {
|
|
@@ -525,27 +522,27 @@ class k {
|
|
|
525
522
|
getBatchDataAsyncResource(t) {
|
|
526
523
|
const e = this.dataSource, a = this.getDataLoaderOptions(t);
|
|
527
524
|
if ("staticData" in e) {
|
|
528
|
-
const
|
|
525
|
+
const i = e.staticData;
|
|
529
526
|
return V(
|
|
530
527
|
async () => ({
|
|
531
|
-
data:
|
|
532
|
-
itemTotalCount:
|
|
528
|
+
data: i,
|
|
529
|
+
itemTotalCount: i.length
|
|
533
530
|
}),
|
|
534
531
|
[]
|
|
535
532
|
);
|
|
536
533
|
}
|
|
537
534
|
if ("asyncLoader" in e) {
|
|
538
|
-
const
|
|
539
|
-
return V(
|
|
535
|
+
const i = e.asyncLoader;
|
|
536
|
+
return V(i, [a]);
|
|
540
537
|
}
|
|
541
538
|
if ("asyncResourceFactory" in e) {
|
|
542
|
-
const
|
|
543
|
-
return
|
|
539
|
+
const i = e.asyncResourceFactory;
|
|
540
|
+
return i(a);
|
|
544
541
|
}
|
|
545
542
|
throw new Error("Unknown data source");
|
|
546
543
|
}
|
|
547
544
|
}
|
|
548
|
-
let
|
|
545
|
+
let Gt = class X {
|
|
549
546
|
constructor(t) {
|
|
550
547
|
o(this, "filters");
|
|
551
548
|
o(this, "sorting");
|
|
@@ -554,22 +551,22 @@ let Qt = class Z {
|
|
|
554
551
|
o(this, "reactTable");
|
|
555
552
|
o(this, "batches");
|
|
556
553
|
o(this, "loader");
|
|
557
|
-
const { render: e, filters: a = [], sorting:
|
|
558
|
-
this.render = e, this.items = w.useNew(this), this.filters = a.map((l) => new
|
|
554
|
+
const { render: e, filters: a = [], sorting: i = [], batchesController: r } = t;
|
|
555
|
+
this.render = e, this.items = w.useNew(this), this.filters = a.map((l) => new jt(this, l)), this.sorting = i.map((l) => new Jt(this, l)), this.batches = new qt(this, r), this.loader = k.useNew(this, t.loader), this.reactTable = B.useNew(this, {
|
|
559
556
|
manualFiltering: this.loader.manualFiltering,
|
|
560
557
|
manualPagination: this.loader.manualPagination,
|
|
561
558
|
manualSorting: this.loader.manualSorting
|
|
562
559
|
});
|
|
563
560
|
}
|
|
564
561
|
static useNew(t) {
|
|
565
|
-
return new
|
|
562
|
+
return new X(t);
|
|
566
563
|
}
|
|
567
564
|
isFiltered() {
|
|
568
565
|
return this.filters.some((t) => t.isActive());
|
|
569
566
|
}
|
|
570
567
|
getSorting(t) {
|
|
571
568
|
const e = this.sorting.find((a) => a.property === t);
|
|
572
|
-
return
|
|
569
|
+
return Y(!!e, `Could not get Sorting (property: ${t})`), e;
|
|
573
570
|
}
|
|
574
571
|
clearSorting() {
|
|
575
572
|
return this.sorting.forEach((t) => t.clear());
|
|
@@ -581,41 +578,41 @@ let Qt = class Z {
|
|
|
581
578
|
return !this.loader.useIsLoading() && this.items.entries.length === 0;
|
|
582
579
|
}
|
|
583
580
|
};
|
|
584
|
-
const
|
|
585
|
-
itemList:
|
|
586
|
-
isLoading:
|
|
587
|
-
},
|
|
588
|
-
item:
|
|
589
|
-
title:
|
|
590
|
-
topContent:
|
|
591
|
-
content:
|
|
592
|
-
action:
|
|
593
|
-
avatar:
|
|
594
|
-
text:
|
|
595
|
-
statusBadge:
|
|
596
|
-
heading:
|
|
597
|
-
},
|
|
598
|
-
const { className: t, children: e } =
|
|
599
|
-
return /* @__PURE__ */
|
|
581
|
+
const Qt = "flow--list--items--item-list", Xt = "flow--list--items--is-loading", H = {
|
|
582
|
+
itemList: Qt,
|
|
583
|
+
isLoading: Xt
|
|
584
|
+
}, Zt = "flow--list--items--item", _t = "flow--list--items--title", te = "flow--list--items--top-content", ee = "flow--list--items--content", ae = "flow--list--items--action", se = "flow--list--items--avatar", ne = "flow--list--items--text", ie = "flow--list--items--status-badge", re = "flow--list--items--heading", c = {
|
|
585
|
+
item: Zt,
|
|
586
|
+
title: _t,
|
|
587
|
+
topContent: te,
|
|
588
|
+
content: ee,
|
|
589
|
+
action: ae,
|
|
590
|
+
avatar: se,
|
|
591
|
+
text: ne,
|
|
592
|
+
statusBadge: ie,
|
|
593
|
+
heading: re
|
|
594
|
+
}, oe = (s) => {
|
|
595
|
+
const { className: t, children: e } = s, a = v(d);
|
|
596
|
+
return /* @__PURE__ */ n.createElement(ot, null, /* @__PURE__ */ n.createElement(
|
|
600
597
|
g,
|
|
601
598
|
{
|
|
602
599
|
variant: "plain",
|
|
603
600
|
className: t,
|
|
604
601
|
"aria-label": a.format("list.options")
|
|
605
602
|
},
|
|
606
|
-
/* @__PURE__ */
|
|
603
|
+
/* @__PURE__ */ n.createElement(Lt, null)
|
|
607
604
|
), e);
|
|
608
|
-
},
|
|
609
|
-
const { children: t, href: e, ...a } =
|
|
605
|
+
}, le = (s) => s === "top" ? c.topContent : s === "bottom" ? c.content : c.topContent, Z = (s) => {
|
|
606
|
+
const { children: t, href: e, ...a } = s, i = {
|
|
610
607
|
ContextMenu: {
|
|
611
|
-
wrapWith: /* @__PURE__ */
|
|
608
|
+
wrapWith: /* @__PURE__ */ n.createElement(oe, { className: c.action }),
|
|
612
609
|
placement: "bottom end"
|
|
613
610
|
},
|
|
614
611
|
Button: {
|
|
615
612
|
className: c.action
|
|
616
613
|
},
|
|
617
614
|
Content: {
|
|
618
|
-
className:
|
|
615
|
+
className: Tt((l) => le(l.slot)),
|
|
619
616
|
tunnelId: "topContent"
|
|
620
617
|
},
|
|
621
618
|
Avatar: {
|
|
@@ -638,104 +635,104 @@ const Xt = "flow--list--items--item-list", Zt = "flow--list--items--is-loading",
|
|
|
638
635
|
Link: {
|
|
639
636
|
unstyled: !0
|
|
640
637
|
}
|
|
641
|
-
}, r = (l) => e ? /* @__PURE__ */
|
|
642
|
-
return /* @__PURE__ */
|
|
643
|
-
}, b = () => /* @__PURE__ */
|
|
644
|
-
const { className: t } =
|
|
638
|
+
}, r = (l) => e ? /* @__PURE__ */ n.createElement(Bt, { unstyled: !0, ...a, className: c.item, href: e }, l.children) : /* @__PURE__ */ n.createElement("div", { className: c.item }, l.children);
|
|
639
|
+
return /* @__PURE__ */ n.createElement(r, null, /* @__PURE__ */ n.createElement(Ft, { props: i }, /* @__PURE__ */ n.createElement(wt, null, t, /* @__PURE__ */ n.createElement("div", { className: c.title }, /* @__PURE__ */ n.createElement(z, { id: "title" })), /* @__PURE__ */ n.createElement(z, { id: "topContent" }))));
|
|
640
|
+
}, b = () => /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(G, { height: "3rem" })), ce = (s) => {
|
|
641
|
+
const { className: t } = s, e = h(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading(), r = e.useIsEmpty(), l = v(d), u = e.items.entries.map((m) => /* @__PURE__ */ n.createElement(it, { key: m.id }, m.render())), p = W(
|
|
645
642
|
H.itemList,
|
|
646
643
|
t,
|
|
647
644
|
a && H.isLoading
|
|
648
645
|
);
|
|
649
|
-
return r ? /* @__PURE__ */
|
|
650
|
-
},
|
|
651
|
-
function
|
|
646
|
+
return r ? /* @__PURE__ */ n.createElement(Et, null, /* @__PURE__ */ n.createElement(Ct, null), /* @__PURE__ */ n.createElement(It, null, l.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(y, null, l.format("list.noResult.text"))) : /* @__PURE__ */ n.createElement("div", { className: p }, i ? ue : u);
|
|
647
|
+
}, ue = /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null));
|
|
648
|
+
function me(s) {
|
|
652
649
|
return null;
|
|
653
650
|
}
|
|
654
|
-
function
|
|
651
|
+
function de(s) {
|
|
655
652
|
return null;
|
|
656
653
|
}
|
|
657
|
-
function
|
|
654
|
+
function he(s) {
|
|
658
655
|
return null;
|
|
659
656
|
}
|
|
660
|
-
function
|
|
657
|
+
function ge(s) {
|
|
661
658
|
return null;
|
|
662
659
|
}
|
|
663
|
-
function
|
|
660
|
+
function pe(s) {
|
|
664
661
|
return null;
|
|
665
662
|
}
|
|
666
|
-
const
|
|
667
|
-
footer:
|
|
668
|
-
},
|
|
669
|
-
const t =
|
|
663
|
+
const fe = "flow--list--footer", be = {
|
|
664
|
+
footer: fe
|
|
665
|
+
}, Se = (s) => {
|
|
666
|
+
const t = v(d), e = h(), a = e.batches, i = e.isFiltered() && !e.loader.manualFiltering, r = e.loader.useIsInitiallyLoading(), l = e.useIsEmpty(), u = a.getTotalItemsCount() ?? 0, p = a.getFilteredItemsCount() ?? 0, m = a.getVisibleItemsCount() ?? 0;
|
|
670
667
|
if (l)
|
|
671
668
|
return null;
|
|
672
|
-
const
|
|
669
|
+
const E = r ? /* @__PURE__ */ n.createElement(G, { width: "200px" }) : i ? t.format("list.paginationInfoFiltered", {
|
|
673
670
|
visibleItemsCount: m,
|
|
674
671
|
filteredItemsCount: p,
|
|
675
672
|
totalItemsCount: u
|
|
676
|
-
}) : t("list.paginationInfo", {
|
|
673
|
+
}) : t.format("list.paginationInfo", {
|
|
677
674
|
visibleItemsCount: m,
|
|
678
675
|
totalItemsCount: u
|
|
679
676
|
});
|
|
680
|
-
return /* @__PURE__ */
|
|
681
|
-
},
|
|
682
|
-
const t =
|
|
683
|
-
return !e.batches.hasNextBatch() && !a ? null : /* @__PURE__ */
|
|
677
|
+
return /* @__PURE__ */ n.createElement(y, { ...s }, E);
|
|
678
|
+
}, ye = (s) => {
|
|
679
|
+
const t = v(d), e = h(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading();
|
|
680
|
+
return !e.batches.hasNextBatch() && !a ? null : /* @__PURE__ */ n.createElement(
|
|
684
681
|
g,
|
|
685
682
|
{
|
|
686
|
-
isPending: a && !
|
|
687
|
-
isDisabled:
|
|
688
|
-
...
|
|
683
|
+
isPending: a && !i,
|
|
684
|
+
isDisabled: i,
|
|
685
|
+
...s,
|
|
689
686
|
onPress: () => e.batches.nextBatch(),
|
|
690
687
|
variant: "plain",
|
|
691
688
|
size: "s"
|
|
692
689
|
},
|
|
693
690
|
t.format("list.showMore")
|
|
694
691
|
);
|
|
695
|
-
},
|
|
696
|
-
function
|
|
697
|
-
var
|
|
698
|
-
const { children: t, batchSize: e, ...a } =
|
|
692
|
+
}, ve = () => /* @__PURE__ */ n.createElement("div", { className: be.footer }, /* @__PURE__ */ n.createElement(Se, null), /* @__PURE__ */ n.createElement(ye, null)), Ee = (s) => /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(kt, null, JSON.stringify(s.data)));
|
|
693
|
+
function ia(s) {
|
|
694
|
+
var E, D, P, M;
|
|
695
|
+
const { children: t, batchSize: e, ...a } = s, i = (E = C(t, me)) == null ? void 0 : E.props, r = (D = C(
|
|
699
696
|
t,
|
|
700
|
-
|
|
701
|
-
)) == null ? void 0 : D.props, l = (
|
|
702
|
-
source:
|
|
703
|
-
...
|
|
704
|
-
asyncLoader:
|
|
697
|
+
At
|
|
698
|
+
)) == null ? void 0 : D.props, l = (P = C(t, pe)) == null ? void 0 : P.props, u = {
|
|
699
|
+
source: i ? {
|
|
700
|
+
...i,
|
|
701
|
+
asyncLoader: i.children
|
|
705
702
|
} : r ? {
|
|
706
703
|
...r,
|
|
707
704
|
asyncResourceFactory: r.children
|
|
708
705
|
} : l ? {
|
|
709
706
|
staticData: l.data
|
|
710
707
|
} : void 0
|
|
711
|
-
}, p = (f) => /* @__PURE__ */
|
|
708
|
+
}, p = (f) => /* @__PURE__ */ n.createElement(Ee, { data: f }), m = Gt.useNew({
|
|
712
709
|
loader: u,
|
|
713
|
-
filters:
|
|
714
|
-
sorting:
|
|
715
|
-
render: ((
|
|
710
|
+
filters: $(t, de).map((f) => f.props),
|
|
711
|
+
sorting: $(t, he).map((f) => f.props),
|
|
712
|
+
render: ((M = C(t, ge)) == null ? void 0 : M.props.children) ?? p,
|
|
716
713
|
...a,
|
|
717
714
|
batchesController: {
|
|
718
715
|
batchSize: e
|
|
719
716
|
}
|
|
720
717
|
});
|
|
721
|
-
return /* @__PURE__ */
|
|
722
|
-
|
|
718
|
+
return /* @__PURE__ */ n.createElement(
|
|
719
|
+
Q.Provider,
|
|
723
720
|
{
|
|
724
721
|
value: {
|
|
725
722
|
list: m
|
|
726
723
|
}
|
|
727
724
|
},
|
|
728
|
-
/* @__PURE__ */
|
|
729
|
-
/* @__PURE__ */
|
|
725
|
+
/* @__PURE__ */ n.createElement(Dt, null),
|
|
726
|
+
/* @__PURE__ */ n.createElement("div", { className: Ht.list }, /* @__PURE__ */ n.createElement(Ot, null), /* @__PURE__ */ n.createElement(ce, null), /* @__PURE__ */ n.createElement(ve, null))
|
|
730
727
|
);
|
|
731
728
|
}
|
|
732
729
|
export {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
730
|
+
ia as List,
|
|
731
|
+
de as ListFilter,
|
|
732
|
+
Z as ListItem,
|
|
733
|
+
ge as ListItemView,
|
|
734
|
+
me as ListLoaderAsync,
|
|
735
|
+
he as ListSorting,
|
|
736
|
+
pe as ListStaticData,
|
|
737
|
+
ia as default
|
|
741
738
|
};
|