@mittwald/flow-react-components 0.1.0-alpha.178 → 0.1.0-alpha.179
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/List.js +180 -176
- package/dist/types/components/List/model/loading/types.d.ts +1 -1
- package/dist/types/components/List/model/search/Search.d.ts +1 -0
- package/dist/types/components/List/model/search/types.d.ts +4 -2
- package/dist/types/components/List/setupComponents/ListSearch.d.ts +2 -2
- package/dist/types/components/List/typedList.d.ts +4 -1
- package/dist/types/components/TextField/TextField.d.ts +2 -1
- package/package.json +4 -4
package/dist/List.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
var mt = Object.defineProperty;
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import n, { createContext as
|
|
4
|
+
var dt = (i, t, e) => t in i ? mt(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
|
|
5
|
+
var r = (i, t, e) => dt(i, typeof t != "symbol" ? t + "" : t, e);
|
|
6
|
+
import n, { createContext as ht, useContext as gt, createElement as W, useState as pt, useEffect as T, useRef as ft, cloneElement as bt } from "react";
|
|
7
7
|
import "./propsContext-DzAKlmhS.js";
|
|
8
8
|
import { P as St } from "./PropsContextProvider-C6Z4XGp6.js";
|
|
9
9
|
import "@react-aria/utils";
|
|
@@ -13,11 +13,11 @@ import { B as f } from "./Button-BRmT11B1.js";
|
|
|
13
13
|
import "@tabler/icons-react";
|
|
14
14
|
import "./Icon-BCN5qdXA.js";
|
|
15
15
|
import { I as wt } from "./IconContextMenu-Cy6_2TgT.js";
|
|
16
|
-
import { a as
|
|
16
|
+
import { a as x, C as Y } from "./ContextMenuTrigger-DuiGa0Zj.js";
|
|
17
17
|
import { M as Q } from "./MenuItem-Cb7EDu-b.js";
|
|
18
18
|
import { useLocalizedStringFormatter as b } from "react-aria";
|
|
19
19
|
import { TunnelProvider as Et, TunnelExit as $ } from "@mittwald/react-tunnel";
|
|
20
|
-
import
|
|
20
|
+
import C from "clsx";
|
|
21
21
|
import { g as Ct } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
|
|
22
22
|
import { f as Ft } from "./flowComponent-CwV0a4FM.js";
|
|
23
23
|
import { R as Lt } from "./Render-BdlTa7Qb.js";
|
|
@@ -25,23 +25,23 @@ import { T as S } from "./Text-SLaOJhzj.js";
|
|
|
25
25
|
import { I as X } from "./IconChevronDown-d3q78pVs.js";
|
|
26
26
|
import { I as Z } from "./IconClose-9DrWhSP2.js";
|
|
27
27
|
import { T as Tt } from "./TextField-DhdMjRzb.js";
|
|
28
|
-
import { autorun as It, runInAction as At, makeObservable as kt, observable as O, computed as H, action as
|
|
28
|
+
import { autorun as It, runInAction as At, makeObservable as kt, observable as O, computed as H, action as L } from "mobx";
|
|
29
29
|
import "./context-BB3_MApL.js";
|
|
30
30
|
import { u as Vt } from "./useOnChange-C1Quwyuz.js";
|
|
31
|
-
import { getProperty as
|
|
32
|
-
import { useReactTable as
|
|
31
|
+
import { getProperty as xt } from "dot-prop";
|
|
32
|
+
import { useReactTable as Pt, getCoreRowModel as Bt, getSortedRowModel as Dt, getFilteredRowModel as Nt, getPaginationRowModel as Rt, getFacetedUniqueValues as zt } from "@tanstack/react-table";
|
|
33
33
|
import _ from "invariant";
|
|
34
34
|
import { useLocalObservable as Mt } from "mobx-react-lite";
|
|
35
35
|
import { getAsyncResource as G } from "@mittwald/react-use-promise";
|
|
36
36
|
import { u as K } from "./useSelector-DpU7_HMO.js";
|
|
37
|
-
import * as
|
|
37
|
+
import * as P from "react-aria-components";
|
|
38
38
|
import { I as Ut } from "./IllustratedMessage-B3MHD01M.js";
|
|
39
39
|
import { I as $t } from "./IconSearch-Bxe-heXD.js";
|
|
40
40
|
import { H as tt } from "./Heading-1M1gRZfk.js";
|
|
41
|
-
import { S as
|
|
42
|
-
import { d as
|
|
41
|
+
import { S as I } from "./Skeleton-CgOx_15R.js";
|
|
42
|
+
import { d as y, a as q } from "./deepFindOfType-6pG0fH7S.js";
|
|
43
43
|
import { ListLoaderAsyncResource as Ot, TypedListLoaderAsyncResource as Ht } from "./List/ListLoaderAsyncResource.js";
|
|
44
|
-
const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view--title", qt = "flow--list--items--item--view--top-content", jt = "flow--list--items--item--view--content", Jt = "flow--list--items--item--view--action", Wt = "flow--list--items--item--view--avatar", Yt = "flow--list--items--item--view--text", Qt = "flow--list--items--item--view--heading",
|
|
44
|
+
const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view--title", qt = "flow--list--items--item--view--top-content", jt = "flow--list--items--item--view--content", Jt = "flow--list--items--item--view--action", Wt = "flow--list--items--item--view--avatar", Yt = "flow--list--items--item--view--text", Qt = "flow--list--items--item--view--heading", d = {
|
|
45
45
|
view: Gt,
|
|
46
46
|
title: Kt,
|
|
47
47
|
topContent: qt,
|
|
@@ -55,7 +55,7 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
55
55
|
"container-breakpoint-size-m": "flow--list--items--item--view--container-breakpoint-size-m",
|
|
56
56
|
"container-breakpoint-size-l": "flow--list--items--item--view--container-breakpoint-size-l",
|
|
57
57
|
"container-breakpoint-size-xl": "flow--list--items--item--view--container-breakpoint-size-xl"
|
|
58
|
-
},
|
|
58
|
+
}, g = { "de-DE": {
|
|
59
59
|
"list.noResult.heading": "Keine Suchergebnisse gefunden",
|
|
60
60
|
"list.noResult.text": "Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.",
|
|
61
61
|
"list.options": "Optionen",
|
|
@@ -76,8 +76,8 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
76
76
|
"list.showMore": "Show more",
|
|
77
77
|
"list.sorting": "Sorting"
|
|
78
78
|
} }, Xt = (i) => {
|
|
79
|
-
const { className: t, children: e } = i, a = b(
|
|
80
|
-
return /* @__PURE__ */ n.createElement(
|
|
79
|
+
const { className: t, children: e } = i, a = b(g);
|
|
80
|
+
return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(
|
|
81
81
|
f,
|
|
82
82
|
{
|
|
83
83
|
variant: "plain",
|
|
@@ -86,64 +86,64 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
86
86
|
},
|
|
87
87
|
/* @__PURE__ */ n.createElement(wt, null)
|
|
88
88
|
), e);
|
|
89
|
-
}, Zt = (i) => i === "top" ?
|
|
89
|
+
}, Zt = (i) => i === "top" ? d.topContent : i === "bottom" ? d.content : d.topContent, et = (i) => {
|
|
90
90
|
const { children: t, className: e, containerBreakpointSize: a = "m" } = i, s = {
|
|
91
91
|
ContextMenu: {
|
|
92
|
-
wrapWith: /* @__PURE__ */ n.createElement(Xt, { className:
|
|
92
|
+
wrapWith: /* @__PURE__ */ n.createElement(Xt, { className: d.action }),
|
|
93
93
|
placement: "bottom end"
|
|
94
94
|
},
|
|
95
95
|
Button: {
|
|
96
|
-
className:
|
|
96
|
+
className: d.action
|
|
97
97
|
},
|
|
98
98
|
Content: {
|
|
99
99
|
className: yt((l) => Zt(l.slot)),
|
|
100
100
|
tunnelId: "topContent"
|
|
101
101
|
},
|
|
102
102
|
Avatar: {
|
|
103
|
-
className:
|
|
103
|
+
className: d.avatar,
|
|
104
104
|
tunnelId: "title"
|
|
105
105
|
},
|
|
106
106
|
Heading: {
|
|
107
|
-
className:
|
|
107
|
+
className: d.heading,
|
|
108
108
|
level: 5,
|
|
109
109
|
tunnelId: "title"
|
|
110
110
|
},
|
|
111
111
|
Text: {
|
|
112
|
-
className:
|
|
112
|
+
className: d.text,
|
|
113
113
|
tunnelId: "title"
|
|
114
114
|
},
|
|
115
115
|
Link: {
|
|
116
116
|
unstyled: !0
|
|
117
117
|
}
|
|
118
|
-
},
|
|
119
|
-
|
|
118
|
+
}, o = C(
|
|
119
|
+
d.view,
|
|
120
120
|
e,
|
|
121
|
-
|
|
121
|
+
d[Ct(a)]
|
|
122
122
|
);
|
|
123
|
-
return /* @__PURE__ */ n.createElement("div", { className:
|
|
124
|
-
}, at =
|
|
123
|
+
return /* @__PURE__ */ n.createElement("div", { className: o }, /* @__PURE__ */ n.createElement(St, { props: s }, /* @__PURE__ */ n.createElement(Et, null, t, /* @__PURE__ */ n.createElement("div", { className: d.title }, /* @__PURE__ */ n.createElement($, { id: "title" })), /* @__PURE__ */ n.createElement($, { id: "topContent" }))));
|
|
124
|
+
}, at = ht({}), h = () => gt(at).list, _t = () => h().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(Lt, { key: e }, () => {
|
|
125
125
|
t();
|
|
126
126
|
})), te = (i) => {
|
|
127
127
|
const { sorting: t } = i;
|
|
128
128
|
return /* @__PURE__ */ n.createElement(Q, { id: t.id }, t.name);
|
|
129
|
-
},
|
|
129
|
+
}, A = (i) => {
|
|
130
130
|
const { children: t, locales: e, variables: a } = i;
|
|
131
131
|
return b(e).format(t, a);
|
|
132
132
|
}, ee = () => {
|
|
133
|
-
const i =
|
|
133
|
+
const i = h(), t = i.sorting.map((s) => /* @__PURE__ */ n.createElement(te, { sorting: s, key: s.id }));
|
|
134
134
|
if (i.sorting.length === 0)
|
|
135
135
|
return null;
|
|
136
136
|
const e = i.sorting.find((s) => s.isSorted()), a = /* @__PURE__ */ n.createElement(S, null, e ? /* @__PURE__ */ n.createElement(
|
|
137
|
-
|
|
137
|
+
A,
|
|
138
138
|
{
|
|
139
|
-
locales:
|
|
139
|
+
locales: g,
|
|
140
140
|
variables: {
|
|
141
141
|
property: e.name ?? e.property
|
|
142
142
|
}
|
|
143
143
|
},
|
|
144
144
|
"list.setSorting"
|
|
145
|
-
) : /* @__PURE__ */ n.createElement(
|
|
146
|
-
return /* @__PURE__ */ n.createElement(
|
|
145
|
+
) : /* @__PURE__ */ n.createElement(A, { locales: g }, "list.sorting"));
|
|
146
|
+
return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, a, /* @__PURE__ */ n.createElement(X, null)), /* @__PURE__ */ n.createElement(
|
|
147
147
|
Y,
|
|
148
148
|
{
|
|
149
149
|
selectionMode: "single",
|
|
@@ -155,10 +155,10 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
155
155
|
t
|
|
156
156
|
));
|
|
157
157
|
}, ae = (i) => {
|
|
158
|
-
const { filter: t } = i, { values: e, mode: a, name: s, property:
|
|
158
|
+
const { filter: t } = i, { values: e, mode: a, name: s, property: o } = t, l = e.map((u) => /* @__PURE__ */ n.createElement(Q, { key: t.getValueId(u), id: String(u) }, String(u))), c = e.filter((u) => t.isValueActive(u)).map((u) => String(u)), m = (u) => {
|
|
159
159
|
t.toggleValue(u);
|
|
160
160
|
};
|
|
161
|
-
return /* @__PURE__ */ n.createElement(
|
|
161
|
+
return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ n.createElement(S, null, s ?? o), /* @__PURE__ */ n.createElement(X, null)), /* @__PURE__ */ n.createElement(
|
|
162
162
|
Y,
|
|
163
163
|
{
|
|
164
164
|
onAction: m,
|
|
@@ -167,7 +167,7 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
167
167
|
},
|
|
168
168
|
l
|
|
169
169
|
));
|
|
170
|
-
}, se = "flow--list--header", ie = "flow--list--header--picker-list-and-search", ne = "flow--list--header--picker-list", re = "flow--list--header--search-field",
|
|
170
|
+
}, se = "flow--list--header", ie = "flow--list--header--picker-list-and-search", ne = "flow--list--header--picker-list", re = "flow--list--header--search-field", w = {
|
|
171
171
|
header: se,
|
|
172
172
|
pickerListAndSearch: ie,
|
|
173
173
|
pickerList: ne,
|
|
@@ -176,7 +176,7 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
176
176
|
activeFilters: oe,
|
|
177
177
|
clearButton: le
|
|
178
178
|
}, ce = () => {
|
|
179
|
-
const i =
|
|
179
|
+
const i = h(), t = i.filters.flatMap(
|
|
180
180
|
(e) => e.values.filter((a) => e.isValueActive(a)).map((a) => /* @__PURE__ */ n.createElement(
|
|
181
181
|
f,
|
|
182
182
|
{
|
|
@@ -197,35 +197,37 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
197
197
|
variant: "plain",
|
|
198
198
|
onPress: () => i.clearFilters()
|
|
199
199
|
},
|
|
200
|
-
/* @__PURE__ */ n.createElement(
|
|
200
|
+
/* @__PURE__ */ n.createElement(A, { locales: g }, "list.resetAll")
|
|
201
201
|
));
|
|
202
202
|
}, ue = (i) => {
|
|
203
|
-
const { className: t, onChange: e, value: a } = i,
|
|
203
|
+
const { className: t, onChange: e, value: a, ...s } = i, o = b(g), [l, c] = pt(a ?? "");
|
|
204
204
|
Vt(a, () => {
|
|
205
|
-
|
|
206
|
-
}, [
|
|
207
|
-
const
|
|
208
|
-
e(void 0),
|
|
209
|
-
},
|
|
210
|
-
|
|
205
|
+
c(a ?? "");
|
|
206
|
+
}, [l]);
|
|
207
|
+
const m = o.format("list.search"), u = () => {
|
|
208
|
+
e(void 0), c("");
|
|
209
|
+
}, v = (p) => {
|
|
210
|
+
p.key === "Enter" ? l.trim() === "" ? e(void 0) : e(l) : p.key === "Escape" && u();
|
|
211
211
|
};
|
|
212
212
|
return /* @__PURE__ */ n.createElement("div", { className: t }, /* @__PURE__ */ n.createElement(
|
|
213
213
|
Tt,
|
|
214
214
|
{
|
|
215
215
|
style: { flexGrow: "1" },
|
|
216
|
-
"aria-label":
|
|
217
|
-
placeholder:
|
|
218
|
-
value:
|
|
219
|
-
onKeyUp:
|
|
220
|
-
onChange: (
|
|
216
|
+
"aria-label": m,
|
|
217
|
+
placeholder: m,
|
|
218
|
+
value: l,
|
|
219
|
+
onKeyUp: v,
|
|
220
|
+
onChange: (p) => c(p),
|
|
221
|
+
...s
|
|
221
222
|
}
|
|
222
223
|
), /* @__PURE__ */ n.createElement(
|
|
223
224
|
f,
|
|
224
225
|
{
|
|
225
226
|
color: "secondary",
|
|
226
227
|
variant: "plain",
|
|
227
|
-
onPress:
|
|
228
|
-
isDisabled: !
|
|
228
|
+
onPress: u,
|
|
229
|
+
isDisabled: !l,
|
|
230
|
+
excludeFromTabOrder: !0
|
|
229
231
|
},
|
|
230
232
|
/* @__PURE__ */ n.createElement(Z, null)
|
|
231
233
|
));
|
|
@@ -234,19 +236,20 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
|
|
|
234
236
|
return W(a, {
|
|
235
237
|
className: t,
|
|
236
238
|
value: e.value,
|
|
237
|
-
onChange: e.setValue.bind(e)
|
|
239
|
+
onChange: e.setValue.bind(e),
|
|
240
|
+
...e.textFieldProps
|
|
238
241
|
});
|
|
239
|
-
},
|
|
240
|
-
const { className: t } = i, e =
|
|
241
|
-
return /* @__PURE__ */ n.createElement("div", { className:
|
|
242
|
-
},
|
|
243
|
-
list:
|
|
242
|
+
}, de = (i) => {
|
|
243
|
+
const { className: t } = i, e = h(), a = e.filters.map((s) => /* @__PURE__ */ n.createElement(ae, { key: s.property, filter: s }));
|
|
244
|
+
return /* @__PURE__ */ n.createElement("div", { className: C(t, w.header) }, /* @__PURE__ */ n.createElement("div", { className: w.pickerListAndSearch }, /* @__PURE__ */ n.createElement("div", { className: w.pickerList }, /* @__PURE__ */ n.createElement(ee, null), a), e.search && /* @__PURE__ */ n.createElement(me, { className: w.searchField, search: e.search })), /* @__PURE__ */ n.createElement(ce, null));
|
|
245
|
+
}, he = "flow--list", ge = {
|
|
246
|
+
list: he
|
|
244
247
|
};
|
|
245
248
|
let pe = class st {
|
|
246
249
|
constructor(t, e, a) {
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
+
r(this, "id");
|
|
251
|
+
r(this, "data");
|
|
252
|
+
r(this, "collection");
|
|
250
253
|
this.collection = t, this.id = e, this.data = a;
|
|
251
254
|
}
|
|
252
255
|
static fromRow(t, e) {
|
|
@@ -255,7 +258,7 @@ let pe = class st {
|
|
|
255
258
|
};
|
|
256
259
|
class fe {
|
|
257
260
|
constructor(t) {
|
|
258
|
-
|
|
261
|
+
r(this, "list");
|
|
259
262
|
this.list = t;
|
|
260
263
|
}
|
|
261
264
|
get entries() {
|
|
@@ -264,11 +267,11 @@ class fe {
|
|
|
264
267
|
}
|
|
265
268
|
class be {
|
|
266
269
|
constructor(t, e = {}) {
|
|
267
|
-
|
|
268
|
-
|
|
270
|
+
r(this, "batchSize");
|
|
271
|
+
r(this, "list");
|
|
269
272
|
var s;
|
|
270
273
|
const { batchSize: a = 20 } = e;
|
|
271
|
-
this.list = t, this.batchSize = a, t.filters.forEach((
|
|
274
|
+
this.list = t, this.batchSize = a, t.filters.forEach((o) => o.onFilterUpdated(() => this.reset())), (s = t.search) == null || s.onUpdated(() => this.reset());
|
|
272
275
|
}
|
|
273
276
|
get reactTable() {
|
|
274
277
|
return this.list.reactTable.table;
|
|
@@ -312,13 +315,13 @@ class be {
|
|
|
312
315
|
const Se = (i, t) => i === t;
|
|
313
316
|
class ve {
|
|
314
317
|
constructor(t, e) {
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
318
|
+
r(this, "_values");
|
|
319
|
+
r(this, "list");
|
|
320
|
+
r(this, "property");
|
|
321
|
+
r(this, "mode");
|
|
322
|
+
r(this, "matcher");
|
|
323
|
+
r(this, "name");
|
|
324
|
+
r(this, "onFilterUpdateCallbacks", /* @__PURE__ */ new Set());
|
|
322
325
|
this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = e.values, this.matcher = e.matcher ?? Se, this.name = e.name;
|
|
323
326
|
}
|
|
324
327
|
updateTableColumnDef(t) {
|
|
@@ -326,19 +329,19 @@ class ve {
|
|
|
326
329
|
}
|
|
327
330
|
getReactTableFilterFn() {
|
|
328
331
|
return (t, e, a) => this.checkFilterMatches(
|
|
329
|
-
|
|
332
|
+
xt(t.original, this.property),
|
|
330
333
|
a
|
|
331
334
|
);
|
|
332
335
|
}
|
|
333
336
|
checkFilterMatches(t, e) {
|
|
334
337
|
if (e === null)
|
|
335
338
|
return !0;
|
|
336
|
-
const a = (
|
|
339
|
+
const a = (o) => Array.isArray(o) ? o : [o], s = (o) => this.matcher(o, t);
|
|
337
340
|
if (this.mode === "all")
|
|
338
341
|
return a(e).every(s);
|
|
339
342
|
if (this.mode === "some") {
|
|
340
|
-
const
|
|
341
|
-
return
|
|
343
|
+
const o = a(e);
|
|
344
|
+
return o.length === 0 || o.some(s);
|
|
342
345
|
} else if (this.mode === "one")
|
|
343
346
|
return s(e);
|
|
344
347
|
throw new Error(`Unknown filter mode '${this.mode}'`);
|
|
@@ -386,7 +389,7 @@ class ve {
|
|
|
386
389
|
toggleValue(t) {
|
|
387
390
|
const e = this.isValueActive(t), a = this.getArrayValue();
|
|
388
391
|
let s;
|
|
389
|
-
this.mode === "all" || this.mode === "some" ? e ? s = a.filter((
|
|
392
|
+
this.mode === "all" || this.mode === "some" ? e ? s = a.filter((o) => o !== t) : s = [...a, t] : s = e ? null : t, this.list.reactTable.getTableColumn(this.property).setFilterValue(s), this.onFilterUpdateCallbacks.forEach((o) => o());
|
|
390
393
|
}
|
|
391
394
|
onFilterUpdated(t) {
|
|
392
395
|
this.onFilterUpdateCallbacks.add(t);
|
|
@@ -394,11 +397,11 @@ class ve {
|
|
|
394
397
|
}
|
|
395
398
|
class ye {
|
|
396
399
|
constructor(t, e) {
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
400
|
+
r(this, "list");
|
|
401
|
+
r(this, "property");
|
|
402
|
+
r(this, "name");
|
|
403
|
+
r(this, "direction");
|
|
404
|
+
r(this, "defaultEnabled");
|
|
402
405
|
this.list = t, this.property = e.property, this.name = e.name, this.direction = e.direction ?? "asc", this.defaultEnabled = !!e.defaultEnabled;
|
|
403
406
|
}
|
|
404
407
|
updateTableColumnDef(t) {
|
|
@@ -420,13 +423,13 @@ class ye {
|
|
|
420
423
|
return `${this.getTableColumn().id}:${this.direction}`;
|
|
421
424
|
}
|
|
422
425
|
}
|
|
423
|
-
const we = (i) =>
|
|
424
|
-
class
|
|
426
|
+
const we = (i) => T(It(i));
|
|
427
|
+
class B {
|
|
425
428
|
constructor(t, e = {}) {
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
429
|
+
r(this, "list");
|
|
430
|
+
r(this, "table");
|
|
431
|
+
r(this, "tableState");
|
|
432
|
+
r(this, "onTableStateChange", (t) => {
|
|
430
433
|
const e = this.tableState.value;
|
|
431
434
|
if (!e)
|
|
432
435
|
return;
|
|
@@ -438,23 +441,23 @@ class D {
|
|
|
438
441
|
this.list = t, this.tableState = Mt(() => ({ value: void 0 })), this.table = this.useReactTable(e);
|
|
439
442
|
}
|
|
440
443
|
static useNew(t, e = {}) {
|
|
441
|
-
return new
|
|
444
|
+
return new B(t, e);
|
|
442
445
|
}
|
|
443
446
|
useReactTable(t = {}) {
|
|
444
|
-
const e = this.list.loader.useData(), a = this.list.sorting.filter((
|
|
447
|
+
const e = this.list.loader.useData(), a = this.list.sorting.filter((o) => o.defaultEnabled), s = Pt({
|
|
445
448
|
data: e,
|
|
446
449
|
initialState: {
|
|
447
450
|
pagination: {
|
|
448
451
|
pageSize: this.list.batches.batchSize
|
|
449
452
|
},
|
|
450
|
-
sorting: a.map((
|
|
451
|
-
id: String(
|
|
452
|
-
desc:
|
|
453
|
+
sorting: a.map((o) => ({
|
|
454
|
+
id: String(o.property),
|
|
455
|
+
desc: o.direction === "desc"
|
|
453
456
|
}))
|
|
454
457
|
},
|
|
455
458
|
columns: this.getTableColumnDefs(),
|
|
456
|
-
getCoreRowModel:
|
|
457
|
-
getSortedRowModel:
|
|
459
|
+
getCoreRowModel: Bt(),
|
|
460
|
+
getSortedRowModel: Dt(),
|
|
458
461
|
getFilteredRowModel: Nt(),
|
|
459
462
|
getPaginationRowModel: Rt(),
|
|
460
463
|
getFacetedUniqueValues: zt(),
|
|
@@ -489,13 +492,13 @@ class D {
|
|
|
489
492
|
const s = t.get(a);
|
|
490
493
|
if (s)
|
|
491
494
|
return s;
|
|
492
|
-
const
|
|
495
|
+
const o = {
|
|
493
496
|
id: a,
|
|
494
497
|
accessorKey: a,
|
|
495
498
|
enableSorting: !1,
|
|
496
499
|
enableColumnFilter: !1
|
|
497
500
|
};
|
|
498
|
-
return t.set(a,
|
|
501
|
+
return t.set(a, o), o;
|
|
499
502
|
};
|
|
500
503
|
return this.list.filters.forEach(
|
|
501
504
|
(a) => a.updateTableColumnDef(e(a.property))
|
|
@@ -504,23 +507,23 @@ class D {
|
|
|
504
507
|
), Array.from(t.values());
|
|
505
508
|
}
|
|
506
509
|
}
|
|
507
|
-
class
|
|
510
|
+
class D {
|
|
508
511
|
constructor() {
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
+
r(this, "dataBatches", []);
|
|
513
|
+
r(this, "prevDataBatches", []);
|
|
514
|
+
r(this, "batchLoadingStates", ["void"]);
|
|
512
515
|
kt(this, {
|
|
513
516
|
dataBatches: O.shallow,
|
|
514
517
|
batchLoadingStates: O.shallow,
|
|
515
518
|
mergedData: H,
|
|
516
519
|
isLoading: H,
|
|
517
|
-
reset:
|
|
518
|
-
setDataBatch:
|
|
519
|
-
setBatchLoadingState:
|
|
520
|
+
reset: L.bound,
|
|
521
|
+
setDataBatch: L.bound,
|
|
522
|
+
setBatchLoadingState: L.bound
|
|
520
523
|
});
|
|
521
524
|
}
|
|
522
525
|
static useNew() {
|
|
523
|
-
return ft(new
|
|
526
|
+
return ft(new D()).current;
|
|
524
527
|
}
|
|
525
528
|
reset() {
|
|
526
529
|
this.batchLoadingStates = [], this.dataBatches = [];
|
|
@@ -545,22 +548,22 @@ class P {
|
|
|
545
548
|
}
|
|
546
549
|
}
|
|
547
550
|
const Ee = [];
|
|
548
|
-
class
|
|
551
|
+
class N {
|
|
549
552
|
constructor(t, e = {}) {
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
553
|
+
r(this, "list");
|
|
554
|
+
r(this, "dataSource");
|
|
555
|
+
r(this, "manualSorting");
|
|
556
|
+
r(this, "manualFiltering");
|
|
557
|
+
r(this, "manualPagination");
|
|
558
|
+
r(this, "loaderState");
|
|
556
559
|
var c;
|
|
557
560
|
const { source: a } = e;
|
|
558
561
|
this.dataSource = a ?? { staticData: Ee };
|
|
559
|
-
const s = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0,
|
|
560
|
-
this.list = t, this.loaderState =
|
|
562
|
+
const s = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, o = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, l = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
|
|
563
|
+
this.list = t, this.loaderState = D.useNew(), this.manualPagination = s ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((m) => m.onFilterUpdated(() => this.reset())), (c = this.list.search) == null || c.onUpdated(() => this.reset());
|
|
561
564
|
}
|
|
562
565
|
static useNew(t, e = {}) {
|
|
563
|
-
return new
|
|
566
|
+
return new N(t, e);
|
|
564
567
|
}
|
|
565
568
|
reset() {
|
|
566
569
|
this.loaderState.reset();
|
|
@@ -586,7 +589,7 @@ class x {
|
|
|
586
589
|
}), this.useObserveBatchData(e, t), this.useObserveBatchLoadingState(e, t);
|
|
587
590
|
}
|
|
588
591
|
useObserveBatchLoadingState(t, e) {
|
|
589
|
-
|
|
592
|
+
T(() => (this.loaderState.setBatchLoadingState(
|
|
590
593
|
e,
|
|
591
594
|
t.state.value
|
|
592
595
|
), t.state.observe((a) => {
|
|
@@ -595,10 +598,10 @@ class x {
|
|
|
595
598
|
}
|
|
596
599
|
useObserveBatchData(t, e) {
|
|
597
600
|
const a = (s) => {
|
|
598
|
-
const { data:
|
|
599
|
-
this.loaderState.setDataBatch(e,
|
|
601
|
+
const { data: o, itemTotalCount: l } = s;
|
|
602
|
+
this.loaderState.setDataBatch(e, o), l !== void 0 && this.list.batches.updateItemTotalCount(l);
|
|
600
603
|
};
|
|
601
|
-
|
|
604
|
+
T(() => (t.value.value.isSet && a(t.value.value.value), t.value.observe((s) => {
|
|
602
605
|
s.isSet && a(s.value);
|
|
603
606
|
})), [t, e]);
|
|
604
607
|
}
|
|
@@ -643,10 +646,11 @@ class x {
|
|
|
643
646
|
}
|
|
644
647
|
class Ce {
|
|
645
648
|
constructor(t, e) {
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
this
|
|
649
|
+
r(this, "list");
|
|
650
|
+
r(this, "render");
|
|
651
|
+
r(this, "textFieldProps");
|
|
652
|
+
r(this, "onUpdateCallbacks", /* @__PURE__ */ new Set());
|
|
653
|
+
this.list = t, this.render = e.render, this.textFieldProps = e.textFieldProps;
|
|
650
654
|
}
|
|
651
655
|
get value() {
|
|
652
656
|
return this.list.reactTable.searchString;
|
|
@@ -664,41 +668,41 @@ class Ce {
|
|
|
664
668
|
this.onUpdateCallbacks.add(t);
|
|
665
669
|
}
|
|
666
670
|
}
|
|
667
|
-
const
|
|
671
|
+
const E = class E {
|
|
668
672
|
constructor(t, e = {}) {
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
const { onAction: a, fallback: s, textValue:
|
|
676
|
-
this.list = t, this.textValue =
|
|
673
|
+
r(this, "list");
|
|
674
|
+
r(this, "textValue");
|
|
675
|
+
r(this, "href");
|
|
676
|
+
r(this, "onAction");
|
|
677
|
+
r(this, "fallback");
|
|
678
|
+
r(this, "renderFn");
|
|
679
|
+
const { onAction: a, fallback: s, textValue: o, href: l, renderFn: c } = e;
|
|
680
|
+
this.list = t, this.textValue = o, this.renderFn = c, this.href = l, this.onAction = a, this.fallback = s;
|
|
677
681
|
}
|
|
678
682
|
render(t) {
|
|
679
|
-
return (this.renderFn ??
|
|
683
|
+
return (this.renderFn ?? E.fallbackRenderItemFn)(t);
|
|
680
684
|
}
|
|
681
685
|
};
|
|
682
|
-
|
|
683
|
-
let
|
|
686
|
+
r(E, "fallbackRenderItemFn", (t) => W("pre", void 0, JSON.stringify(t)));
|
|
687
|
+
let k = E, Fe = class it {
|
|
684
688
|
constructor(t) {
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
689
|
+
r(this, "filters");
|
|
690
|
+
r(this, "itemView");
|
|
691
|
+
r(this, "search");
|
|
692
|
+
r(this, "sorting");
|
|
693
|
+
r(this, "items");
|
|
694
|
+
r(this, "reactTable");
|
|
695
|
+
r(this, "batches");
|
|
696
|
+
r(this, "loader");
|
|
697
|
+
r(this, "hasAction");
|
|
694
698
|
const {
|
|
695
699
|
itemView: e,
|
|
696
700
|
filters: a = [],
|
|
697
701
|
sorting: s = [],
|
|
698
|
-
batchesController:
|
|
702
|
+
batchesController: o,
|
|
699
703
|
hasAction: l
|
|
700
704
|
} = t;
|
|
701
|
-
this.items = new fe(this), this.filters = a.map((c) => new ve(this, c)), this.sorting = s.map((c) => new ye(this, c)), this.search = t.search ? new Ce(this, t.search) : void 0, this.itemView = new
|
|
705
|
+
this.items = new fe(this), this.filters = a.map((c) => new ve(this, c)), this.sorting = s.map((c) => new ye(this, c)), this.search = t.search ? new Ce(this, t.search) : void 0, this.itemView = new k(this, e), this.batches = new be(this, o), this.loader = N.useNew(this, t.loader), this.reactTable = B.useNew(this, {
|
|
702
706
|
manualFiltering: this.loader.manualFiltering,
|
|
703
707
|
manualPagination: this.loader.manualPagination,
|
|
704
708
|
manualSorting: this.loader.manualSorting
|
|
@@ -728,47 +732,47 @@ let A = w, Fe = class it {
|
|
|
728
732
|
const Le = "flow--list--items", Te = "flow--list--items--is-loading", J = {
|
|
729
733
|
items: Le,
|
|
730
734
|
isLoading: Te
|
|
731
|
-
}, Ie = "flow--list--items--item", Ae = "flow--list--items--item--has-action",
|
|
735
|
+
}, Ie = "flow--list--items--item", Ae = "flow--list--items--item--has-action", V = {
|
|
732
736
|
item: Ie,
|
|
733
737
|
hasAction: Ae
|
|
734
738
|
}, ke = (i) => {
|
|
735
|
-
const { data: t, children: e } = i, a =
|
|
739
|
+
const { data: t, children: e } = i, a = h(), s = a.itemView, o = s.onAction, l = s.textValue ? s.textValue(t) : void 0, c = o ? () => o(t) : void 0, m = s.href ? s.href(t) : void 0, u = a.hasAction || !!c || !!m, v = C(V.item, u && V.hasAction);
|
|
736
740
|
return /* @__PURE__ */ n.createElement(
|
|
737
|
-
|
|
741
|
+
P.GridListItem,
|
|
738
742
|
{
|
|
739
|
-
className:
|
|
743
|
+
className: v,
|
|
740
744
|
onAction: c,
|
|
741
745
|
textValue: l,
|
|
742
746
|
href: m
|
|
743
747
|
},
|
|
744
748
|
e ?? s.render(t)
|
|
745
749
|
);
|
|
746
|
-
}, Ve = (i) => /* @__PURE__ */ n.createElement(
|
|
747
|
-
const i = b(
|
|
750
|
+
}, Ve = (i) => /* @__PURE__ */ n.createElement(P.GridListItem, { textValue: "-", className: V.item }, i.children), xe = () => {
|
|
751
|
+
const i = b(g);
|
|
748
752
|
return /* @__PURE__ */ n.createElement(Ut, null, /* @__PURE__ */ n.createElement($t, null), /* @__PURE__ */ n.createElement(tt, null, i.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(S, null, i.format("list.noResult.text")));
|
|
749
|
-
},
|
|
750
|
-
const t =
|
|
753
|
+
}, Pe = () => /* @__PURE__ */ n.createElement(et, null, /* @__PURE__ */ n.createElement(tt, null, /* @__PURE__ */ n.createElement(I, { width: "200px" })), /* @__PURE__ */ n.createElement(S, null, /* @__PURE__ */ n.createElement(I, { width: "300px" }))), Be = () => {
|
|
754
|
+
const t = h().itemView.fallback ?? /* @__PURE__ */ n.createElement(Pe, null);
|
|
751
755
|
return Array.from(Array(5)).map((e, a) => /* @__PURE__ */ n.createElement(Ve, { key: a }, bt(t)));
|
|
752
|
-
},
|
|
753
|
-
const { className: t, ...e } = i, a =
|
|
756
|
+
}, De = (i) => {
|
|
757
|
+
const { className: t, ...e } = i, a = h(), s = a.loader.useIsLoading(), o = a.loader.useIsInitiallyLoading(), l = a.useIsEmpty(), c = a.items.entries.map((u) => /* @__PURE__ */ n.createElement(ke, { key: u.id, data: u.data })), m = C(
|
|
754
758
|
J.items,
|
|
755
759
|
t,
|
|
756
760
|
s && J.isLoading
|
|
757
761
|
);
|
|
758
|
-
return l ? /* @__PURE__ */ n.createElement(
|
|
762
|
+
return l ? /* @__PURE__ */ n.createElement(xe, null) : /* @__PURE__ */ n.createElement("div", { "aria-hidden": o, "aria-busy": s }, /* @__PURE__ */ n.createElement(P.GridList, { className: m, ...e }, o ? /* @__PURE__ */ n.createElement(Be, null) : c));
|
|
759
763
|
}, nt = (i) => null, Ne = () => nt, rt = (i) => null, Re = () => rt, ot = (i) => null, ze = () => ot, lt = (i) => null, Me = () => lt, ct = (i) => null, Ue = () => ct, $e = "flow--list--footer", Oe = {
|
|
760
764
|
footer: $e
|
|
761
765
|
}, He = (i) => {
|
|
762
|
-
const t = b(
|
|
763
|
-
if (
|
|
766
|
+
const t = b(g), e = h(), a = e.batches, s = e.loader.useIsInitiallyLoading(), o = e.useIsEmpty(), l = a.getTotalItemsCount(), c = a.getVisibleItemsCount();
|
|
767
|
+
if (o)
|
|
764
768
|
return null;
|
|
765
|
-
const m = s ? /* @__PURE__ */ n.createElement(
|
|
769
|
+
const m = s ? /* @__PURE__ */ n.createElement(I, { width: "200px" }) : t.format("list.paginationInfo", {
|
|
766
770
|
visibleItemsCount: c,
|
|
767
771
|
totalItemsCount: l
|
|
768
772
|
});
|
|
769
773
|
return /* @__PURE__ */ n.createElement(S, { ...i }, m);
|
|
770
774
|
}, Ge = (i) => {
|
|
771
|
-
const t = b(
|
|
775
|
+
const t = b(g), e = h(), a = e.loader.useIsLoading(), s = e.loader.useIsInitiallyLoading();
|
|
772
776
|
return !e.batches.hasNextBatch() && !a ? null : /* @__PURE__ */ n.createElement(
|
|
773
777
|
f,
|
|
774
778
|
{
|
|
@@ -786,33 +790,33 @@ function ut(i) {
|
|
|
786
790
|
return null;
|
|
787
791
|
}
|
|
788
792
|
const qe = () => ut, je = Ft("List", (i) => {
|
|
789
|
-
var
|
|
790
|
-
const { children: t, batchSize: e, ...a } = i, s = (
|
|
793
|
+
var p, R, z, M, U;
|
|
794
|
+
const { children: t, batchSize: e, ...a } = i, s = (p = y(
|
|
791
795
|
t,
|
|
792
796
|
nt
|
|
793
|
-
)) == null ? void 0 :
|
|
797
|
+
)) == null ? void 0 : p.props, o = (R = y(
|
|
794
798
|
t,
|
|
795
799
|
Ot
|
|
796
|
-
)) == null ? void 0 : R.props, l = (z =
|
|
800
|
+
)) == null ? void 0 : R.props, l = (z = y(t, ct)) == null ? void 0 : z.props, c = {
|
|
797
801
|
source: s ? {
|
|
798
802
|
...s,
|
|
799
803
|
asyncLoader: s.children
|
|
800
|
-
} :
|
|
801
|
-
...
|
|
802
|
-
asyncResourceFactory:
|
|
804
|
+
} : o ? {
|
|
805
|
+
...o,
|
|
806
|
+
asyncResourceFactory: o.children
|
|
803
807
|
} : l ? {
|
|
804
808
|
staticData: l.data
|
|
805
809
|
} : void 0
|
|
806
|
-
}, m = (M =
|
|
810
|
+
}, m = (M = y(t, ut)) == null ? void 0 : M.props, u = (U = y(t, lt)) == null ? void 0 : U.props, v = Fe.useNew({
|
|
807
811
|
loader: c,
|
|
808
812
|
filters: q(t, rt).map(
|
|
809
|
-
(
|
|
813
|
+
(F) => F.props
|
|
810
814
|
),
|
|
811
815
|
search: m ? {
|
|
812
|
-
|
|
813
|
-
|
|
816
|
+
render: m.children,
|
|
817
|
+
textFieldProps: m
|
|
814
818
|
} : void 0,
|
|
815
|
-
sorting: q(t, ot).map((
|
|
819
|
+
sorting: q(t, ot).map((F) => F.props),
|
|
816
820
|
itemView: u ? {
|
|
817
821
|
...u,
|
|
818
822
|
renderFn: u.children
|
|
@@ -826,13 +830,13 @@ const qe = () => ut, je = Ft("List", (i) => {
|
|
|
826
830
|
at.Provider,
|
|
827
831
|
{
|
|
828
832
|
value: {
|
|
829
|
-
list:
|
|
833
|
+
list: v
|
|
830
834
|
}
|
|
831
835
|
},
|
|
832
836
|
/* @__PURE__ */ n.createElement(_t, null),
|
|
833
|
-
/* @__PURE__ */ n.createElement("div", { className: ge.list }, /* @__PURE__ */ n.createElement(
|
|
837
|
+
/* @__PURE__ */ n.createElement("div", { className: ge.list }, /* @__PURE__ */ n.createElement(de, null), /* @__PURE__ */ n.createElement(De, { ...a }), /* @__PURE__ */ n.createElement(Ke, null))
|
|
834
838
|
);
|
|
835
|
-
}),
|
|
839
|
+
}), xa = () => ({
|
|
836
840
|
List: je,
|
|
837
841
|
Filter: Re(),
|
|
838
842
|
Search: qe(),
|
|
@@ -856,5 +860,5 @@ export {
|
|
|
856
860
|
Ne as TypedListLoaderAsync,
|
|
857
861
|
ze as TypedListSorting,
|
|
858
862
|
Ue as TypedListStaticData,
|
|
859
|
-
|
|
863
|
+
xa as typedList
|
|
860
864
|
};
|
|
@@ -24,7 +24,7 @@ export interface DataLoaderResult<T> {
|
|
|
24
24
|
}
|
|
25
25
|
export type AsyncDataLoader<T> = (options?: DataLoaderOptions<T>) => Promise<DataLoaderResult<T>>;
|
|
26
26
|
type AsyncResourceFactory<T> = (options?: DataLoaderOptions<T>) => AsyncResource<DataLoaderResult<T>>;
|
|
27
|
-
type StaticData<T> = T[];
|
|
27
|
+
type StaticData<T> = T[] | readonly T[];
|
|
28
28
|
interface DynamicLoaderShape {
|
|
29
29
|
manualSorting?: boolean;
|
|
30
30
|
manualFiltering?: boolean;
|
|
@@ -4,6 +4,7 @@ import { SearchFieldRenderComponent, SearchShape, SearchValue } from './types';
|
|
|
4
4
|
export declare class Search<T> {
|
|
5
5
|
readonly list: List<T>;
|
|
6
6
|
readonly render?: SearchFieldRenderComponent;
|
|
7
|
+
readonly textFieldProps: SearchShape<T>["textFieldProps"];
|
|
7
8
|
private onUpdateCallbacks;
|
|
8
9
|
constructor(list: List<T>, searchShape: SearchShape<T>);
|
|
9
10
|
get value(): SearchValue;
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
|
+
import { TextFieldProps } from '../../../TextField';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
type SupportedTextFieldProps = Pick<TextFieldProps, "className" | "autoFocus">;
|
|
5
|
+
interface SearchFieldRenderProps extends SupportedTextFieldProps {
|
|
4
6
|
onChange: (value: SearchValue) => unknown;
|
|
5
7
|
value: SearchValue;
|
|
6
|
-
className?: string;
|
|
7
8
|
}
|
|
8
9
|
export type SearchFieldRenderComponent = ComponentType<SearchFieldRenderProps>;
|
|
9
10
|
export type SearchValue = string | undefined;
|
|
10
11
|
export interface SearchShape<IgnoredT> {
|
|
11
12
|
render?: SearchFieldRenderComponent;
|
|
13
|
+
textFieldProps: SupportedTextFieldProps;
|
|
12
14
|
}
|
|
13
15
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { SearchFieldRenderComponent, SearchShape } from '../model/search/types';
|
|
2
2
|
import { ComponentType } from 'react';
|
|
3
3
|
|
|
4
|
-
type Props<T> = Omit<SearchShape<T>, "render"> & {
|
|
4
|
+
type Props<T> = Omit<SearchShape<T>, "render" | "textFieldProps"> & {
|
|
5
5
|
children?: SearchFieldRenderComponent;
|
|
6
|
-
};
|
|
6
|
+
} & SearchShape<T>["textFieldProps"];
|
|
7
7
|
export declare function ListSearch<T = never>(ignoredProps: Props<T>): null;
|
|
8
8
|
export declare const TypedListSearch: <T>() => ComponentType<Props<T>>;
|
|
9
9
|
export {};
|
|
@@ -7,8 +7,11 @@ export declare const typedList: <T>() => {
|
|
|
7
7
|
values?: TMatcherValue[] | undefined;
|
|
8
8
|
matcher?: import('./model/filter/types').FilterMatcher<T, TProp, TMatcherValue> | undefined;
|
|
9
9
|
}) => import('react').ReactNode;
|
|
10
|
-
Search: import('react').ComponentType<Omit<import('./model/search/types').SearchShape<T>, "render"> & {
|
|
10
|
+
Search: import('react').ComponentType<Omit<import('./model/search/types').SearchShape<T>, "render" | "textFieldProps"> & {
|
|
11
11
|
children?: import('./model/search/types').SearchFieldRenderComponent;
|
|
12
|
+
} & {
|
|
13
|
+
className?: string;
|
|
14
|
+
autoFocus?: boolean;
|
|
12
15
|
}>;
|
|
13
16
|
Sorting: import('react').ComponentType<import('./model/sorting/types').SortingShape<T>>;
|
|
14
17
|
Item: import('react').ComponentType<Omit<import('./model/item/ItemView').ItemViewShape<T>, "renderFn"> & {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TextFieldBaseProps } from '../TextFieldBase';
|
|
3
3
|
import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
4
|
+
import { PropsWithClassName } from '../../lib/types/props';
|
|
4
5
|
|
|
5
6
|
import * as Aria from "react-aria-components";
|
|
6
|
-
export interface TextFieldProps extends Omit<TextFieldBaseProps, "input">, Pick<Aria.InputProps, "placeholder">, FlowComponentProps {
|
|
7
|
+
export interface TextFieldProps extends Omit<TextFieldBaseProps, "input" | "className">, Pick<Aria.InputProps, "placeholder">, PropsWithClassName, FlowComponentProps {
|
|
7
8
|
}
|
|
8
9
|
export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<never>>;
|
|
9
10
|
export default TextField;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.179",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
"dependencies": {
|
|
281
281
|
"@chakra-ui/live-region": "^2.1.0",
|
|
282
282
|
"@internationalized/string-compiler": "^3.2.4",
|
|
283
|
-
"@mittwald/react-tunnel": "^0.1.0-alpha.
|
|
283
|
+
"@mittwald/react-tunnel": "^0.1.0-alpha.179",
|
|
284
284
|
"@mittwald/react-use-promise": "^2.3.13",
|
|
285
285
|
"@react-aria/utils": "^3.24.1",
|
|
286
286
|
"@react-types/shared": "^3.23.1",
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
},
|
|
308
308
|
"devDependencies": {
|
|
309
309
|
"@faker-js/faker": "^8.4.1",
|
|
310
|
-
"@mittwald/flow-design-tokens": "^0.1.0-alpha.
|
|
310
|
+
"@mittwald/flow-design-tokens": "^0.1.0-alpha.179",
|
|
311
311
|
"@mittwald/react-use-promise": "^2.3.13",
|
|
312
312
|
"@nx/storybook": "^19.4.0",
|
|
313
313
|
"@storybook/addon-a11y": "^8.1.11",
|
|
@@ -383,5 +383,5 @@
|
|
|
383
383
|
"optional": true
|
|
384
384
|
}
|
|
385
385
|
},
|
|
386
|
-
"gitHead": "
|
|
386
|
+
"gitHead": "de36708d864e12de248830eee99d769a55b1b1bc"
|
|
387
387
|
}
|