@mittwald/flow-react-components 0.1.0-alpha.177 → 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.
Files changed (9) hide show
  1. package/dist/List.js +180 -176
  2. package/dist/Switch.js +4 -4
  3. package/dist/types/components/List/model/loading/types.d.ts +1 -1
  4. package/dist/types/components/List/model/search/Search.d.ts +1 -0
  5. package/dist/types/components/List/model/search/types.d.ts +4 -2
  6. package/dist/types/components/List/setupComponents/ListSearch.d.ts +2 -2
  7. package/dist/types/components/List/typedList.d.ts +4 -1
  8. package/dist/types/components/TextField/TextField.d.ts +2 -1
  9. 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 ht = (i, t, e) => t in i ? mt(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
5
- var o = (i, t, e) => ht(i, typeof t != "symbol" ? t + "" : t, e);
6
- import n, { createContext as dt, useContext as gt, createElement as W, useState as pt, useEffect as L, useRef as ft, cloneElement as bt } from "react";
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 V, C as Y } from "./ContextMenuTrigger-DuiGa0Zj.js";
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 E from "clsx";
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 F } from "mobx";
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 Bt } from "dot-prop";
32
- import { useReactTable as Dt, getCoreRowModel as Pt, getSortedRowModel as xt, getFilteredRowModel as Nt, getPaginationRowModel as Rt, getFacetedUniqueValues as zt } from "@tanstack/react-table";
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 B from "react-aria-components";
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 T } from "./Skeleton-CgOx_15R.js";
42
- import { d as v, a as q } from "./deepFindOfType-6pG0fH7S.js";
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", h = {
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
- }, p = { "de-DE": {
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(p);
80
- return /* @__PURE__ */ n.createElement(V, null, /* @__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" ? h.topContent : i === "bottom" ? h.content : h.topContent, et = (i) => {
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: h.action }),
92
+ wrapWith: /* @__PURE__ */ n.createElement(Xt, { className: d.action }),
93
93
  placement: "bottom end"
94
94
  },
95
95
  Button: {
96
- className: h.action
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: h.avatar,
103
+ className: d.avatar,
104
104
  tunnelId: "title"
105
105
  },
106
106
  Heading: {
107
- className: h.heading,
107
+ className: d.heading,
108
108
  level: 5,
109
109
  tunnelId: "title"
110
110
  },
111
111
  Text: {
112
- className: h.text,
112
+ className: d.text,
113
113
  tunnelId: "title"
114
114
  },
115
115
  Link: {
116
116
  unstyled: !0
117
117
  }
118
- }, r = E(
119
- h.view,
118
+ }, o = C(
119
+ d.view,
120
120
  e,
121
- h[Ct(a)]
121
+ d[Ct(a)]
122
122
  );
123
- return /* @__PURE__ */ n.createElement("div", { className: r }, /* @__PURE__ */ n.createElement(St, { props: s }, /* @__PURE__ */ n.createElement(Et, null, t, /* @__PURE__ */ n.createElement("div", { className: h.title }, /* @__PURE__ */ n.createElement($, { id: "title" })), /* @__PURE__ */ n.createElement($, { id: "topContent" }))));
124
- }, at = dt({}), d = () => gt(at).list, _t = () => d().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(Lt, { key: e }, () => {
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
- }, I = (i) => {
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 = d(), t = i.sorting.map((s) => /* @__PURE__ */ n.createElement(te, { sorting: s, key: s.id }));
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
- I,
137
+ A,
138
138
  {
139
- locales: p,
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(I, { locales: p }, "list.sorting"));
146
- return /* @__PURE__ */ n.createElement(V, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, a, /* @__PURE__ */ n.createElement(X, null)), /* @__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: r } = 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) => {
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(V, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ n.createElement(S, null, s ?? r), /* @__PURE__ */ n.createElement(X, null)), /* @__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", y = {
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 = d(), t = i.filters.flatMap(
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(I, { locales: p }, "list.resetAll")
200
+ /* @__PURE__ */ n.createElement(A, { locales: g }, "list.resetAll")
201
201
  ));
202
202
  }, ue = (i) => {
203
- const { className: t, onChange: e, value: a } = i, s = b(p), [r, l] = pt(a ?? "");
203
+ const { className: t, onChange: e, value: a, ...s } = i, o = b(g), [l, c] = pt(a ?? "");
204
204
  Vt(a, () => {
205
- l(a ?? "");
206
- }, [r]);
207
- const c = s.format("list.search"), m = () => {
208
- e(void 0), l("");
209
- }, u = (g) => {
210
- g.key === "Enter" ? r.trim() === "" ? e(void 0) : e(r) : g.key === "Escape" && m();
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": c,
217
- placeholder: c,
218
- value: r,
219
- onKeyUp: u,
220
- onChange: (g) => l(g)
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: m,
228
- isDisabled: !r
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
- }, he = (i) => {
240
- const { className: t } = i, e = d(), a = e.filters.map((s) => /* @__PURE__ */ n.createElement(ae, { key: s.property, filter: s }));
241
- return /* @__PURE__ */ n.createElement("div", { className: E(t, y.header) }, /* @__PURE__ */ n.createElement("div", { className: y.pickerListAndSearch }, /* @__PURE__ */ n.createElement("div", { className: y.pickerList }, /* @__PURE__ */ n.createElement(ee, null), a), e.search && /* @__PURE__ */ n.createElement(me, { className: y.searchField, search: e.search })), /* @__PURE__ */ n.createElement(ce, null));
242
- }, de = "flow--list", ge = {
243
- list: de
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
- o(this, "id");
248
- o(this, "data");
249
- o(this, "collection");
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
- o(this, "list");
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
- o(this, "batchSize");
268
- o(this, "list");
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((r) => r.onFilterUpdated(() => this.reset())), (s = t.search) == null || s.onUpdated(() => this.reset());
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
- o(this, "_values");
316
- o(this, "list");
317
- o(this, "property");
318
- o(this, "mode");
319
- o(this, "matcher");
320
- o(this, "name");
321
- o(this, "onFilterUpdateCallbacks", /* @__PURE__ */ new Set());
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
- Bt(t.original, this.property),
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 = (r) => Array.isArray(r) ? r : [r], s = (r) => this.matcher(r, t);
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 r = a(e);
341
- return r.length === 0 || r.some(s);
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((r) => r !== t) : s = [...a, t] : s = e ? null : t, this.list.reactTable.getTableColumn(this.property).setFilterValue(s), this.onFilterUpdateCallbacks.forEach((r) => r());
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
- o(this, "list");
398
- o(this, "property");
399
- o(this, "name");
400
- o(this, "direction");
401
- o(this, "defaultEnabled");
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) => L(It(i));
424
- class D {
426
+ const we = (i) => T(It(i));
427
+ class B {
425
428
  constructor(t, e = {}) {
426
- o(this, "list");
427
- o(this, "table");
428
- o(this, "tableState");
429
- o(this, "onTableStateChange", (t) => {
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 D(t, e);
444
+ return new B(t, e);
442
445
  }
443
446
  useReactTable(t = {}) {
444
- const e = this.list.loader.useData(), a = this.list.sorting.filter((r) => r.defaultEnabled), s = Dt({
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((r) => ({
451
- id: String(r.property),
452
- desc: r.direction === "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: Pt(),
457
- getSortedRowModel: xt(),
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 r = {
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, r), r;
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 P {
510
+ class D {
508
511
  constructor() {
509
- o(this, "dataBatches", []);
510
- o(this, "prevDataBatches", []);
511
- o(this, "batchLoadingStates", ["void"]);
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: F.bound,
518
- setDataBatch: F.bound,
519
- setBatchLoadingState: F.bound
520
+ reset: L.bound,
521
+ setDataBatch: L.bound,
522
+ setBatchLoadingState: L.bound
520
523
  });
521
524
  }
522
525
  static useNew() {
523
- return ft(new P()).current;
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 x {
551
+ class N {
549
552
  constructor(t, e = {}) {
550
- o(this, "list");
551
- o(this, "dataSource");
552
- o(this, "manualSorting");
553
- o(this, "manualFiltering");
554
- o(this, "manualPagination");
555
- o(this, "loaderState");
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, r = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, l = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
560
- this.list = t, this.loaderState = P.useNew(), this.manualPagination = s ?? !1, this.manualFiltering = r ?? 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());
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 x(t, e);
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
- L(() => (this.loaderState.setBatchLoadingState(
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: r, itemTotalCount: l } = s;
599
- this.loaderState.setDataBatch(e, r), l !== void 0 && this.list.batches.updateItemTotalCount(l);
601
+ const { data: o, itemTotalCount: l } = s;
602
+ this.loaderState.setDataBatch(e, o), l !== void 0 && this.list.batches.updateItemTotalCount(l);
600
603
  };
601
- L(() => (t.value.value.isSet && a(t.value.value.value), t.value.observe((s) => {
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
- o(this, "list");
647
- o(this, "render");
648
- o(this, "onUpdateCallbacks", /* @__PURE__ */ new Set());
649
- this.list = t, this.render = e.render;
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 w = class w {
671
+ const E = class E {
668
672
  constructor(t, e = {}) {
669
- o(this, "list");
670
- o(this, "textValue");
671
- o(this, "href");
672
- o(this, "onAction");
673
- o(this, "fallback");
674
- o(this, "renderFn");
675
- const { onAction: a, fallback: s, textValue: r, href: l, renderFn: c } = e;
676
- this.list = t, this.textValue = r, this.renderFn = c, this.href = l, this.onAction = a, this.fallback = s;
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 ?? w.fallbackRenderItemFn)(t);
683
+ return (this.renderFn ?? E.fallbackRenderItemFn)(t);
680
684
  }
681
685
  };
682
- o(w, "fallbackRenderItemFn", (t) => W("pre", void 0, JSON.stringify(t)));
683
- let A = w, Fe = class it {
686
+ r(E, "fallbackRenderItemFn", (t) => W("pre", void 0, JSON.stringify(t)));
687
+ let k = E, Fe = class it {
684
688
  constructor(t) {
685
- o(this, "filters");
686
- o(this, "itemView");
687
- o(this, "search");
688
- o(this, "sorting");
689
- o(this, "items");
690
- o(this, "reactTable");
691
- o(this, "batches");
692
- o(this, "loader");
693
- o(this, "hasAction");
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: r,
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 A(this, e), this.batches = new be(this, r), this.loader = x.useNew(this, t.loader), this.reactTable = D.useNew(this, {
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", k = {
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 = d(), s = a.itemView, r = s.onAction, l = s.textValue ? s.textValue(t) : void 0, c = r ? () => r(t) : void 0, m = s.href ? s.href(t) : void 0, u = a.hasAction || !!c || !!m, g = E(k.item, u && k.hasAction);
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
- B.GridListItem,
741
+ P.GridListItem,
738
742
  {
739
- className: g,
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(B.GridListItem, { textValue: "-", className: k.item }, i.children), Be = () => {
747
- const i = b(p);
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
- }, De = () => /* @__PURE__ */ n.createElement(et, null, /* @__PURE__ */ n.createElement(tt, null, /* @__PURE__ */ n.createElement(T, { width: "200px" })), /* @__PURE__ */ n.createElement(S, null, /* @__PURE__ */ n.createElement(T, { width: "300px" }))), Pe = () => {
750
- const t = d().itemView.fallback ?? /* @__PURE__ */ n.createElement(De, null);
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
- }, xe = (i) => {
753
- const { className: t, ...e } = i, a = d(), s = a.loader.useIsLoading(), r = a.loader.useIsInitiallyLoading(), l = a.useIsEmpty(), c = a.items.entries.map((u) => /* @__PURE__ */ n.createElement(ke, { key: u.id, data: u.data })), m = E(
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(Be, null) : /* @__PURE__ */ n.createElement("div", { "aria-hidden": r, "aria-busy": s }, /* @__PURE__ */ n.createElement(B.GridList, { className: m, ...e }, r ? /* @__PURE__ */ n.createElement(Pe, null) : c));
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(p), e = d(), a = e.batches, s = e.loader.useIsInitiallyLoading(), r = e.useIsEmpty(), l = a.getTotalItemsCount(), c = a.getVisibleItemsCount();
763
- if (r)
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(T, { width: "200px" }) : t.format("list.paginationInfo", {
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(p), e = d(), a = e.loader.useIsLoading(), s = e.loader.useIsInitiallyLoading();
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 N, R, z, M, U;
790
- const { children: t, batchSize: e, ...a } = i, s = (N = v(
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 : N.props, r = (R = v(
797
+ )) == null ? void 0 : p.props, o = (R = y(
794
798
  t,
795
799
  Ot
796
- )) == null ? void 0 : R.props, l = (z = v(t, ct)) == null ? void 0 : z.props, c = {
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
- } : r ? {
801
- ...r,
802
- asyncResourceFactory: r.children
804
+ } : o ? {
805
+ ...o,
806
+ asyncResourceFactory: o.children
803
807
  } : l ? {
804
808
  staticData: l.data
805
809
  } : void 0
806
- }, m = (M = v(t, ut)) == null ? void 0 : M.props, u = (U = v(t, lt)) == null ? void 0 : U.props, g = Fe.useNew({
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
- (C) => C.props
813
+ (F) => F.props
810
814
  ),
811
815
  search: m ? {
812
- ...m,
813
- render: m.children
816
+ render: m.children,
817
+ textFieldProps: m
814
818
  } : void 0,
815
- sorting: q(t, ot).map((C) => C.props),
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: g
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(he, null), /* @__PURE__ */ n.createElement(xe, { ...a }), /* @__PURE__ */ n.createElement(Ke, null))
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
- }), Ba = () => ({
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
- Ba as typedList
863
+ xa as typedList
860
864
  };
package/dist/Switch.js CHANGED
@@ -20,19 +20,19 @@ const E = "flow--switch--track", C = "flow--switch--handle", N = "flow--switch--
20
20
  track: E,
21
21
  handle: C,
22
22
  label: N
23
- }, R = b("Switch", (l) => {
23
+ }, R = b("Switch", (a) => {
24
24
  const {
25
- children: a,
25
+ children: l,
26
26
  className: o,
27
27
  labelPosition: r = "trailing",
28
28
  refProp: s,
29
29
  ...c
30
- } = l, m = f(
30
+ } = a, m = f(
31
31
  t.switch,
32
32
  t[`label-${r}`],
33
33
  o
34
34
  );
35
- return /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(n.Switch, { ...c, className: m, ref: s }, ({ isSelected: i }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: t.track }, /* @__PURE__ */ e.createElement("div", { className: t.handle }, i ? /* @__PURE__ */ e.createElement(p, { size: "s" }) : /* @__PURE__ */ e.createElement(h, { size: "s" }))), /* @__PURE__ */ e.createElement(w, { className: t.label }, a))));
35
+ return /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(n.Switch, { ...c, className: m, ref: s }, ({ isSelected: i }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: t.track }, /* @__PURE__ */ e.createElement("div", { className: t.handle }, i ? /* @__PURE__ */ e.createElement(p, { size: "s" }) : /* @__PURE__ */ e.createElement(h, { size: "s" }))), l && /* @__PURE__ */ e.createElement(w, { className: t.label }, l))));
36
36
  });
37
37
  export {
38
38
  R as Switch,
package/dist/types/components/List/model/loading/types.d.ts CHANGED
@@ -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;
package/dist/types/components/List/model/search/Search.d.ts CHANGED
@@ -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;
package/dist/types/components/List/model/search/types.d.ts CHANGED
@@ -1,13 +1,15 @@
1
1
  import { ComponentType } from 'react';
2
+ import { TextFieldProps } from '../../../TextField';
2
3
 
3
- interface SearchFieldRenderProps {
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 {};
package/dist/types/components/List/setupComponents/ListSearch.d.ts CHANGED
@@ -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 {};
package/dist/types/components/List/typedList.d.ts CHANGED
@@ -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"> & {
package/dist/types/components/TextField/TextField.d.ts CHANGED
@@ -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.177",
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.177",
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.177",
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": "0843bcf404657121e9a0d0a2247df0d052d62f0f"
386
+ "gitHead": "de36708d864e12de248830eee99d769a55b1b1bc"
387
387
  }