@mittwald/flow-react-components 0.1.0-alpha.259 → 0.1.0-alpha.260

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 (6) hide show
  1. package/dist/List.js +232 -212
  2. package/dist/{SettingsProvider-D2-kWC3S.js → SettingsProvider-Ckj9VyMJ.js} +4 -4
  3. package/dist/SettingsProvider.js +1 -1
  4. package/dist/types/components/List/model/List.d.ts +8 -5
  5. package/dist/types/components/List/model/item/types.d.ts +2 -1
  6. package/package.json +4 -4
package/dist/List.js CHANGED
@@ -1,55 +1,55 @@
1
1
  "use client"
2
2
  /* */
3
3
  var jt = Object.defineProperty;
4
- var _t = (a, t, e) => t in a ? jt(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
5
- var r = (a, t, e) => _t(a, typeof t != "symbol" ? t + "" : t, e);
6
- import i, { createContext as Wt, useContext as Jt, createElement as ft, useState as G, useEffect as k, useRef as Yt, Suspense as Qt, cloneElement as Xt } from "react";
4
+ var Wt = (a, t, e) => t in a ? jt(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
5
+ var r = (a, t, e) => Wt(a, typeof t != "symbol" ? t + "" : t, e);
6
+ import i, { createContext as Jt, useContext as Yt, createElement as St, useState as j, useEffect as M, useRef as _t, Suspense as Qt, cloneElement as Xt } from "react";
7
7
  import "./propsContext-DzAKlmhS.js";
8
8
  import { P as bt } from "./PropsContextProvider-C6Z4XGp6.js";
9
9
  import "@react-aria/utils";
10
10
  import { isShallowEqual as Zt, unique as te, difference as ee, times as se } from "remeda";
11
11
  import { d as ie } from "./dynamic-ClpUSmEt.js";
12
- import { B as S } from "./Button-BepCRVIi.js";
12
+ import { B as w } from "./Button-BepCRVIi.js";
13
13
  import { IconArrowBackUp as ae } from "@tabler/icons-react";
14
14
  import { I as ne } from "./Icon-cEgH3ZXQ.js";
15
15
  import { I as re } from "./IconContextMenu-DLHXM1Ph.js";
16
- import { a as D, C as j } from "./ContextMenuTrigger-5-EjHDtY.js";
17
- import { M as _ } from "./MenuItem-CFE7SA5J.js";
18
- import { useLocalizedStringFormatter as w } from "react-aria";
19
- import { TunnelProvider as St, TunnelExit as K } from "@mittwald/react-tunnel";
20
- import F from "clsx";
16
+ import { a as N, C as W } from "./ContextMenuTrigger-5-EjHDtY.js";
17
+ import { M as J } from "./MenuItem-CFE7SA5J.js";
18
+ import { useLocalizedStringFormatter as y } from "react-aria";
19
+ import { TunnelProvider as vt, TunnelExit as H } from "@mittwald/react-tunnel";
20
+ import T from "clsx";
21
21
  import { g as oe } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
22
22
  import { f as le } from "./flowComponent-CY2oW3O9.js";
23
23
  import { R as ce } from "./Render-BdlTa7Qb.js";
24
- import { T as y } from "./Text-T_kNKeFe.js";
24
+ import { T as E } from "./Text-T_kNKeFe.js";
25
25
  import { b as de, I as ue, a as me, c as he } from "./IconView-B0kOF1Eh.js";
26
26
  import { I as ge } from "./IconClose-DVYTU3Rp.js";
27
27
  import { observer as pe } from "mobx-react-lite";
28
- import { a as lt, T as ct } from "./TooltipTrigger-TslkLN5s.js";
29
- import { makeObservable as fe, observable as dt, computed as ut, action as U } from "mobx";
28
+ import { a as ct, T as dt } from "./TooltipTrigger-TslkLN5s.js";
29
+ import { makeObservable as fe, observable as ut, computed as mt, action as O } from "mobx";
30
30
  import "./context-Cf7tqFtF.js";
31
- import { u as be } from "./useOnChange-C1Quwyuz.js";
32
- import { S as Se } from "./SearchField-CMvYWO_P.js";
33
- import { H as W } from "./Heading-FRIQlW19.js";
31
+ import { u as Se } from "./useOnChange-C1Quwyuz.js";
32
+ import { S as be } from "./SearchField-CMvYWO_P.js";
33
+ import { H as Y } from "./Heading-FRIQlW19.js";
34
34
  import { S as ve } from "./Section-DsyCp0AH.js";
35
35
  import { getProperty as we } from "dot-prop";
36
- import { hash as vt } from "object-code";
37
- import O from "zod";
36
+ import { hash as wt } from "object-code";
37
+ import V from "zod";
38
38
  import { useReactTable as ye, getCoreRowModel as Ee, getSortedRowModel as Fe, getFilteredRowModel as Te, getPaginationRowModel as Ce, getFacetedUniqueValues as Ie } from "@tanstack/react-table";
39
- import wt from "invariant";
40
- import { getAsyncResource as mt } from "@mittwald/react-use-promise";
41
- import { u as ht } from "./useSelector-DpU7_HMO.js";
42
- import { u as Le } from "./SettingsProvider-D2-kWC3S.js";
43
- import * as J from "react-aria-components";
44
- import { S as A } from "./SkeletonText-B5ZghZhO.js";
39
+ import yt from "invariant";
40
+ import { getAsyncResource as ht } from "@mittwald/react-use-promise";
41
+ import { u as gt } from "./useSelector-DpU7_HMO.js";
42
+ import { u as Le } from "./SettingsProvider-Ckj9VyMJ.js";
43
+ import * as _ from "react-aria-components";
44
+ import { S as B } from "./SkeletonText-B5ZghZhO.js";
45
45
  import { I as Pe } from "./IllustratedMessage-B3MHD01M.js";
46
46
  import { I as Ve } from "./IconSearch-a4VYepNE.js";
47
- import { d as f, a as L } from "./deepFindOfType-6pG0fH7S.js";
47
+ import { d as S, a as P } from "./deepFindOfType-6pG0fH7S.js";
48
48
  import { ListLoaderAsyncResource as ke, TypedListLoaderAsyncResource as Ae } from "./List/ListLoaderAsyncResource.js";
49
- import { S as Be } from "./Skeleton-CKLaTmDR.js";
50
- import { T as yt, d as Et, c as Ft, a as Tt, e as Ct, b as It } from "./TableRow-BsPgWqkU.js";
51
- import { A as Me } from "./ActionGroup-CX4_8oFU.js";
52
- const De = "flow--list--items--item--view", xe = "flow--list--items--item--view--title", Ne = "flow--list--items--item--view--top-content", Re = "flow--list--items--item--view--content", $e = "flow--list--items--item--view--action", ze = "flow--list--items--item--view--avatar", Ue = "flow--list--items--item--view--text", Oe = "flow--list--items--item--view--heading", m = {
49
+ import { S as Me } from "./Skeleton-CKLaTmDR.js";
50
+ import { T as Et, d as Ft, c as Tt, a as Ct, e as It, b as Lt } from "./TableRow-BsPgWqkU.js";
51
+ import { A as Be } from "./ActionGroup-CX4_8oFU.js";
52
+ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view--title", Ne = "flow--list--items--item--view--top-content", Re = "flow--list--items--item--view--content", $e = "flow--list--items--item--view--action", ze = "flow--list--items--item--view--avatar", Ue = "flow--list--items--item--view--text", Ke = "flow--list--items--item--view--heading", m = {
53
53
  view: De,
54
54
  title: xe,
55
55
  topContent: Ne,
@@ -57,7 +57,7 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
57
57
  action: $e,
58
58
  avatar: ze,
59
59
  text: Ue,
60
- heading: Oe,
60
+ heading: Ke,
61
61
  "container-breakpoint-size-xs": "flow--list--items--item--view--container-breakpoint-size-xs",
62
62
  "container-breakpoint-size-s": "flow--list--items--item--view--container-breakpoint-size-s",
63
63
  "container-breakpoint-size-m": "flow--list--items--item--view--container-breakpoint-size-m",
@@ -91,10 +91,10 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
91
91
  "list.settings.viewMode.table": "Table",
92
92
  "list.showMore": "Show more",
93
93
  "list.sorting": "Sorting"
94
- } }, Ke = (a) => {
95
- const { className: t, children: e } = a, s = w(b);
96
- return /* @__PURE__ */ i.createElement(D, null, /* @__PURE__ */ i.createElement(
97
- S,
94
+ } }, Oe = (a) => {
95
+ const { className: t, children: e } = a, s = y(b);
96
+ return /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(
97
+ w,
98
98
  {
99
99
  variant: "plain",
100
100
  className: t,
@@ -102,10 +102,10 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
102
102
  },
103
103
  /* @__PURE__ */ i.createElement(re, null)
104
104
  ), e);
105
- }, He = (a) => a === "top" ? m.topContent : a === "bottom" ? m.content : m.topContent, Lt = (a) => {
105
+ }, He = (a) => a === "top" ? m.topContent : a === "bottom" ? m.content : m.topContent, Pt = (a) => {
106
106
  const { children: t, className: e, containerBreakpointSize: s = "m" } = a, n = {
107
107
  ContextMenu: {
108
- wrapWith: /* @__PURE__ */ i.createElement(Ke, { className: m.action }),
108
+ wrapWith: /* @__PURE__ */ i.createElement(Oe, { className: m.action }),
109
109
  placement: "bottom end"
110
110
  },
111
111
  Button: {
@@ -135,26 +135,26 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
135
135
  Link: {
136
136
  unstyled: !0
137
137
  }
138
- }, o = F(
138
+ }, o = T(
139
139
  m.view,
140
140
  e,
141
141
  m[oe(s)]
142
142
  );
143
- return /* @__PURE__ */ i.createElement("div", { className: o }, /* @__PURE__ */ i.createElement(bt, { props: n }, /* @__PURE__ */ i.createElement(St, null, t, /* @__PURE__ */ i.createElement("div", { className: m.title }, /* @__PURE__ */ i.createElement(K, { id: "title" })), /* @__PURE__ */ i.createElement(K, { id: "topContent" }))));
144
- }, Pt = Wt({}), g = () => Jt(Pt).list, qe = () => g().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ i.createElement(ce, { key: e }, () => {
143
+ return /* @__PURE__ */ i.createElement("div", { className: o }, /* @__PURE__ */ i.createElement(bt, { props: n }, /* @__PURE__ */ i.createElement(vt, null, t, /* @__PURE__ */ i.createElement("div", { className: m.title }, /* @__PURE__ */ i.createElement(H, { id: "title" })), /* @__PURE__ */ i.createElement(H, { id: "topContent" }))));
144
+ }, Vt = Jt({}), g = () => Yt(Vt).list, qe = () => g().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ i.createElement(ce, { key: e }, () => {
145
145
  t();
146
146
  })), Ge = (a) => {
147
147
  const { sorting: t } = a;
148
- return /* @__PURE__ */ i.createElement(_, { id: t.id }, t.name);
149
- }, B = (a) => {
148
+ return /* @__PURE__ */ i.createElement(J, { id: t.id }, t.name);
149
+ }, D = (a) => {
150
150
  const { children: t, locales: e, variables: s } = a;
151
- return w(e).format(t, s);
151
+ return y(e).format(t, s);
152
152
  }, je = () => {
153
153
  const a = g(), t = a.visibleSorting.map((n) => /* @__PURE__ */ i.createElement(Ge, { sorting: n, key: n.id }));
154
154
  if (t.length === 0)
155
155
  return null;
156
- const e = a.visibleSorting.find((n) => n.isSorted()), s = /* @__PURE__ */ i.createElement(y, null, e ? /* @__PURE__ */ i.createElement(
157
- B,
156
+ const e = a.visibleSorting.find((n) => n.isSorted()), s = /* @__PURE__ */ i.createElement(E, null, e ? /* @__PURE__ */ i.createElement(
157
+ D,
158
158
  {
159
159
  locales: b,
160
160
  variables: {
@@ -162,9 +162,9 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
162
162
  }
163
163
  },
164
164
  "list.setSorting"
165
- ) : /* @__PURE__ */ i.createElement(B, { locales: b }, "list.sorting"));
166
- return /* @__PURE__ */ i.createElement(D, null, /* @__PURE__ */ i.createElement(S, { variant: "soft", size: "s", color: "secondary" }, s, /* @__PURE__ */ i.createElement(de, null)), /* @__PURE__ */ i.createElement(
167
- j,
165
+ ) : /* @__PURE__ */ i.createElement(D, { locales: b }, "list.sorting"));
166
+ return /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(w, { variant: "soft", size: "s", color: "secondary" }, s, /* @__PURE__ */ i.createElement(de, null)), /* @__PURE__ */ i.createElement(
167
+ W,
168
168
  {
169
169
  selectionMode: "single",
170
170
  selectedKeys: e ? [e.id] : [],
@@ -174,9 +174,9 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
174
174
  },
175
175
  t
176
176
  ));
177
- }, _e = (a) => {
177
+ }, We = (a) => {
178
178
  const { filter: t } = a, { values: e, mode: s, name: n, property: o } = t, c = e.map((d) => /* @__PURE__ */ i.createElement(
179
- _,
179
+ J,
180
180
  {
181
181
  id: d.id,
182
182
  key: d.id,
@@ -186,18 +186,18 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
186
186
  },
187
187
  d.render()
188
188
  )), l = e.filter((d) => d.isActive).map((d) => d.id);
189
- return /* @__PURE__ */ i.createElement(D, null, /* @__PURE__ */ i.createElement(S, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ i.createElement(y, null, n ?? o), /* @__PURE__ */ i.createElement(ue, null)), /* @__PURE__ */ i.createElement(
190
- j,
189
+ return /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(w, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ i.createElement(E, null, n ?? o), /* @__PURE__ */ i.createElement(ue, null)), /* @__PURE__ */ i.createElement(
190
+ W,
191
191
  {
192
192
  selectionMode: s === "one" ? "single" : "multiple",
193
193
  selectedKeys: l
194
194
  },
195
195
  c
196
196
  ));
197
- }, We = "flow--list--header", Je = "flow--list--header--picker-list-and-search", Ye = "flow--list--header--picker-list", Qe = "flow--list--header--search-and-actions", Xe = "flow--list--header--search-field", Ze = "flow--list--header--actions", E = {
198
- header: We,
199
- pickerListAndSearch: Je,
200
- pickerList: Ye,
197
+ }, Je = "flow--list--header", Ye = "flow--list--header--picker-list-and-search", _e = "flow--list--header--picker-list", Qe = "flow--list--header--search-and-actions", Xe = "flow--list--header--search-field", Ze = "flow--list--header--actions", F = {
198
+ header: Je,
199
+ pickerListAndSearch: Ye,
200
+ pickerList: _e,
201
201
  searchAndActions: Qe,
202
202
  searchField: Xe,
203
203
  actions: Ze
@@ -205,8 +205,8 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
205
205
  activeFilters: ts,
206
206
  clearButton: es
207
207
  }, is = pe(() => {
208
- const a = g(), t = w(b), s = a.filters.flatMap((l) => l.values).filter((l) => l.isActive).map((l) => /* @__PURE__ */ i.createElement(S, { variant: "soft", size: "s", key: l.id, onPress: () => l.deactivate() }, /* @__PURE__ */ i.createElement(y, null, l.render()), /* @__PURE__ */ i.createElement(ge, null))), n = a.filters.filter((l) => l.hasChanged()).length > 0, o = a.supportsSettingsStorage && n && /* @__PURE__ */ i.createElement(lt, null, /* @__PURE__ */ i.createElement(ct, null, /* @__PURE__ */ i.createElement(B, { locales: b }, "list.filters.store")), /* @__PURE__ */ i.createElement(
209
- S,
208
+ const a = g(), t = y(b), s = a.filters.flatMap((l) => l.values).filter((l) => l.isActive).map((l) => /* @__PURE__ */ i.createElement(w, { variant: "soft", size: "s", key: l.id, onPress: () => l.deactivate() }, /* @__PURE__ */ i.createElement(E, null, l.render()), /* @__PURE__ */ i.createElement(ge, null))), n = a.filters.filter((l) => l.hasChanged()).length > 0, o = a.supportsSettingsStorage && n && /* @__PURE__ */ i.createElement(ct, null, /* @__PURE__ */ i.createElement(dt, null, /* @__PURE__ */ i.createElement(D, { locales: b }, "list.filters.store")), /* @__PURE__ */ i.createElement(
209
+ w,
210
210
  {
211
211
  size: "s",
212
212
  variant: "plain",
@@ -215,8 +215,8 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
215
215
  "aria-label": t.format("list.filters.store")
216
216
  },
217
217
  /* @__PURE__ */ i.createElement(me, null)
218
- )), c = n ? /* @__PURE__ */ i.createElement(lt, null, /* @__PURE__ */ i.createElement(ct, null, /* @__PURE__ */ i.createElement(B, { locales: b }, "list.filters.reset")), /* @__PURE__ */ i.createElement(
219
- S,
218
+ )), c = n ? /* @__PURE__ */ i.createElement(ct, null, /* @__PURE__ */ i.createElement(dt, null, /* @__PURE__ */ i.createElement(D, { locales: b }, "list.filters.reset")), /* @__PURE__ */ i.createElement(
219
+ w,
220
220
  {
221
221
  size: "s",
222
222
  variant: "plain",
@@ -228,8 +228,8 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
228
228
  )) : void 0;
229
229
  return s.length === 0 && !o && !c ? null : /* @__PURE__ */ i.createElement("div", { className: ss.activeFilters }, s, o, c);
230
230
  }), as = (a) => {
231
- const { className: t, onChange: e, value: s, ...n } = a, [o, c] = G(s ?? "");
232
- be(s, () => {
231
+ const { className: t, onChange: e, value: s, ...n } = a, [o, c] = j(s ?? "");
232
+ Se(s, () => {
233
233
  c(s ?? "");
234
234
  }, [o]);
235
235
  const l = () => {
@@ -238,7 +238,7 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
238
238
  u.key === "Enter" ? o.trim() === "" ? e(void 0) : e(o) : u.key === "Escape" && l();
239
239
  };
240
240
  return /* @__PURE__ */ i.createElement(
241
- Se,
241
+ be,
242
242
  {
243
243
  className: t,
244
244
  value: o,
@@ -250,26 +250,26 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
250
250
  );
251
251
  }, ns = (a) => {
252
252
  const { className: t, search: e } = a, s = e.render ?? as;
253
- return ft(s, {
253
+ return St(s, {
254
254
  className: t,
255
255
  value: e.value,
256
256
  onChange: e.setValue.bind(e),
257
257
  ...e.textFieldProps
258
258
  });
259
259
  }, rs = () => {
260
- const a = w(b), t = g(), e = t.viewMode, s = [];
261
- return t.itemView && s.push("list"), t.table && s.push("table"), s.length <= 1 ? null : /* @__PURE__ */ i.createElement(D, null, /* @__PURE__ */ i.createElement(
262
- S,
260
+ const a = y(b), t = g(), e = t.viewMode, s = [];
261
+ return t.itemView && s.push("list"), t.table && s.push("table"), s.length <= 1 ? null : /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(
262
+ w,
263
263
  {
264
264
  variant: "soft",
265
265
  color: "secondary",
266
266
  size: "s",
267
267
  "aria-label": a.format("list.settings")
268
268
  },
269
- /* @__PURE__ */ i.createElement(y, null, a.format(`list.settings.viewMode.${e}`)),
269
+ /* @__PURE__ */ i.createElement(E, null, a.format(`list.settings.viewMode.${e}`)),
270
270
  /* @__PURE__ */ i.createElement(he, null)
271
- ), /* @__PURE__ */ i.createElement(j, { selectionMode: "single", selectedKeys: [e] }, /* @__PURE__ */ i.createElement(ve, null, /* @__PURE__ */ i.createElement(W, null, a.format("list.settings.viewMode")), s.map((n) => /* @__PURE__ */ i.createElement(
272
- _,
271
+ ), /* @__PURE__ */ i.createElement(W, { selectionMode: "single", selectedKeys: [e] }, /* @__PURE__ */ i.createElement(ve, null, /* @__PURE__ */ i.createElement(Y, null, a.format("list.settings.viewMode")), s.map((n) => /* @__PURE__ */ i.createElement(
272
+ J,
273
273
  {
274
274
  id: n,
275
275
  key: n,
@@ -283,12 +283,12 @@ const De = "flow--list--items--item--view", xe = "flow--list--items--item--view-
283
283
  const { className: t, hasActionGroup: e } = a, s = g();
284
284
  if (s.filters.length === 0 && s.visibleSorting.length === 0 && !s.search && !s.table && !e)
285
285
  return null;
286
- const n = s.filters.map((o) => /* @__PURE__ */ i.createElement(_e, { key: o.property, filter: o }));
287
- return /* @__PURE__ */ i.createElement("div", { className: F(t, E.header) }, /* @__PURE__ */ i.createElement("div", { className: E.pickerListAndSearch }, /* @__PURE__ */ i.createElement("div", { className: E.pickerList }, /* @__PURE__ */ i.createElement(rs, null), /* @__PURE__ */ i.createElement(je, null), n), /* @__PURE__ */ i.createElement("div", { className: E.searchAndActions }, s.search && /* @__PURE__ */ i.createElement(ns, { className: E.searchField, search: s.search }), /* @__PURE__ */ i.createElement(K, { id: "actions" }))), /* @__PURE__ */ i.createElement(is, null));
286
+ const n = s.filters.map((o) => /* @__PURE__ */ i.createElement(We, { key: o.property, filter: o }));
287
+ return /* @__PURE__ */ i.createElement("div", { className: T(t, F.header) }, /* @__PURE__ */ i.createElement("div", { className: F.pickerListAndSearch }, /* @__PURE__ */ i.createElement("div", { className: F.pickerList }, /* @__PURE__ */ i.createElement(rs, null), /* @__PURE__ */ i.createElement(je, null), n), /* @__PURE__ */ i.createElement("div", { className: F.searchAndActions }, s.search && /* @__PURE__ */ i.createElement(ns, { className: F.searchField, search: s.search }), /* @__PURE__ */ i.createElement(H, { id: "actions" }))), /* @__PURE__ */ i.createElement(is, null));
288
288
  }, ls = "flow--list", cs = {
289
289
  list: ls
290
290
  };
291
- let ds = class Vt {
291
+ let ds = class kt {
292
292
  constructor(t, e, s) {
293
293
  r(this, "id");
294
294
  r(this, "data");
@@ -296,7 +296,7 @@ let ds = class Vt {
296
296
  this.collection = t, this.id = e, this.data = s;
297
297
  }
298
298
  static fromRow(t, e) {
299
- return new Vt(t, e.id, e.original);
299
+ return new kt(t, e.id, e.original);
300
300
  }
301
301
  };
302
302
  class us {
@@ -356,7 +356,7 @@ class ms {
356
356
  }
357
357
  }
358
358
  const hs = "$";
359
- class gt {
359
+ class pt {
360
360
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
361
361
  constructor(t, e) {
362
362
  r(this, "filter");
@@ -367,7 +367,7 @@ class gt {
367
367
  return Zt(this.value, t.value);
368
368
  }
369
369
  get id() {
370
- return `${this.filter.property}@@${vt(this.value)}`;
370
+ return `${this.filter.property}@@${wt(this.value)}`;
371
371
  }
372
372
  get isActive() {
373
373
  return this.filter.isValueActive(this);
@@ -383,7 +383,7 @@ class gt {
383
383
  }
384
384
  }
385
385
  const gs = (a, t) => a === t, ps = (a) => String(a);
386
- class P {
386
+ class k {
387
387
  constructor(t, e) {
388
388
  r(this, "_values");
389
389
  r(this, "_valuesFromTableState");
@@ -396,7 +396,7 @@ class P {
396
396
  r(this, "onFilterUpdateCallbacks", /* @__PURE__ */ new Set());
397
397
  r(this, "defaultSelectedValues");
398
398
  var s;
399
- this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = (s = e.values) == null ? void 0 : s.map((n) => new gt(this, n)), this.matcher = e.matcher ?? gs, this.renderItem = e.renderItem ?? ps, this.name = e.name, this.defaultSelectedValues = e.defaultSelected ? this.values.filter(
399
+ this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = (s = e.values) == null ? void 0 : s.map((n) => new pt(this, n)), this.matcher = e.matcher ?? gs, this.renderItem = e.renderItem ?? ps, this.name = e.name, this.defaultSelectedValues = e.defaultSelected ? this.values.filter(
400
400
  (n) => {
401
401
  var o;
402
402
  return (o = e.defaultSelected) == null ? void 0 : o.some((c) => c === n.value);
@@ -453,7 +453,7 @@ class P {
453
453
  getValuesFromTableState() {
454
454
  return te(
455
455
  Array.from(this.getTableColumn().getFacetedUniqueValues().keys()).flatMap((t) => t).filter((t) => t != null)
456
- ).map((t) => new gt(this, t));
456
+ ).map((t) => new pt(this, t));
457
457
  }
458
458
  checkIfValueIsUnknown(t) {
459
459
  return !this.values.some((s) => s.id === t.id);
@@ -505,7 +505,7 @@ class P {
505
505
  this.onFilterUpdateCallbacks.add(t);
506
506
  }
507
507
  }
508
- r(P, "settingsStorageSchema", O.record(O.array(O.unknown())).optional());
508
+ r(k, "settingsStorageSchema", V.record(V.array(V.unknown())).optional());
509
509
  class fs {
510
510
  constructor(t, e) {
511
511
  r(this, "list");
@@ -540,7 +540,7 @@ class fs {
540
540
  return `${this.getTableColumn().id}:${this.direction}`;
541
541
  }
542
542
  }
543
- class Y {
543
+ class Q {
544
544
  constructor(t, e, s = {}) {
545
545
  r(this, "list");
546
546
  r(this, "table");
@@ -549,13 +549,13 @@ class Y {
549
549
  this.list = t;
550
550
  const n = this.list.sorting.filter(
551
551
  (l) => l.defaultEnabled !== !1
552
- ), [o, c] = G(
552
+ ), [o, c] = j(
553
553
  n.map((l) => l.getReactTableColumnSort())
554
554
  );
555
555
  this.sortingState = o, this.updateSortingState = c, this.table = this.useReactTable(e, s);
556
556
  }
557
557
  static useNew(t, e, s = {}) {
558
- return new Y(t, e, s);
558
+ return new Q(t, e, s);
559
559
  }
560
560
  useReactTable(t, e = {}) {
561
561
  var c;
@@ -587,7 +587,7 @@ class Y {
587
587
  globalFilterFn: "auto",
588
588
  ...e
589
589
  });
590
- return k(() => {
590
+ return M(() => {
591
591
  t && t(this.list);
592
592
  }, [this.list, t, o]), o;
593
593
  }
@@ -602,7 +602,7 @@ class Y {
602
602
  }
603
603
  getTableColumn(t) {
604
604
  const e = this.table.getColumn(t);
605
- return wt(!!e, `Column #${t} is not defined`), e;
605
+ return yt(!!e, `Column #${t} is not defined`), e;
606
606
  }
607
607
  getTableColumnDefs() {
608
608
  const t = /* @__PURE__ */ new Map(), e = (s) => {
@@ -624,7 +624,7 @@ class Y {
624
624
  ), Array.from(t.values());
625
625
  }
626
626
  }
627
- class Q {
627
+ class X {
628
628
  constructor() {
629
629
  r(this, "dataBatches", []);
630
630
  r(this, "prevDataBatches", []);
@@ -633,17 +633,17 @@ class Q {
633
633
  prevDataBatches: !1,
634
634
  useMergedData: !1,
635
635
  useIsLoading: !1,
636
- dataBatches: dt.shallow,
637
- batchLoadingStates: dt.shallow,
638
- mergedData: ut,
639
- isLoading: ut,
640
- reset: U.bound,
641
- setDataBatch: U.bound,
642
- setBatchLoadingState: U.bound
636
+ dataBatches: ut.shallow,
637
+ batchLoadingStates: ut.shallow,
638
+ mergedData: mt,
639
+ isLoading: mt,
640
+ reset: O.bound,
641
+ setDataBatch: O.bound,
642
+ setBatchLoadingState: O.bound
643
643
  });
644
644
  }
645
645
  static useNew() {
646
- return Yt(new Q()).current;
646
+ return _t(new X()).current;
647
647
  }
648
648
  reset() {
649
649
  this.batchLoadingStates = [], this.dataBatches = [];
@@ -658,17 +658,17 @@ class Q {
658
658
  return (this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches).flatMap((e) => e);
659
659
  }
660
660
  useMergedData() {
661
- return ht(() => this.mergedData);
661
+ return gt(() => this.mergedData);
662
662
  }
663
663
  get isLoading() {
664
664
  return this.batchLoadingStates.some((t) => t === "loading" || t === "void");
665
665
  }
666
666
  useIsLoading() {
667
- return ht(() => this.isLoading);
667
+ return gt(() => this.isLoading);
668
668
  }
669
669
  }
670
- const bs = [];
671
- class X {
670
+ const Ss = [];
671
+ class Z {
672
672
  constructor(t, e = {}) {
673
673
  r(this, "list");
674
674
  r(this, "dataSource");
@@ -678,12 +678,12 @@ class X {
678
678
  r(this, "loaderState");
679
679
  var l;
680
680
  const { source: s } = e;
681
- this.dataSource = s ?? { staticData: bs };
681
+ this.dataSource = s ?? { staticData: Ss };
682
682
  const n = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, o = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, c = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
683
- this.list = t, this.loaderState = Q.useNew(), this.manualPagination = n ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = c ?? this.manualPagination, this.list.filters.forEach((d) => d.onFilterUpdated(() => this.reset())), (l = this.list.search) == null || l.onUpdated(() => this.reset());
683
+ this.list = t, this.loaderState = X.useNew(), this.manualPagination = n ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = c ?? this.manualPagination, this.list.filters.forEach((d) => d.onFilterUpdated(() => this.reset())), (l = this.list.search) == null || l.onUpdated(() => this.reset());
684
684
  }
685
685
  static useNew(t, e = {}) {
686
- return new X(t, e);
686
+ return new Z(t, e);
687
687
  }
688
688
  reset() {
689
689
  this.loaderState.reset();
@@ -709,7 +709,7 @@ class X {
709
709
  }), this.useObserveBatchData(e, t), this.useObserveBatchLoadingState(e, t);
710
710
  }
711
711
  useObserveBatchLoadingState(t, e) {
712
- k(() => (this.loaderState.setBatchLoadingState(
712
+ M(() => (this.loaderState.setBatchLoadingState(
713
713
  e,
714
714
  t.state.value
715
715
  ), t.state.observe((s) => {
@@ -721,7 +721,7 @@ class X {
721
721
  const { data: o, itemTotalCount: c } = n;
722
722
  this.loaderState.setDataBatch(e, o), c !== void 0 && this.list.batches.updateItemTotalCount(c);
723
723
  };
724
- k(() => (t.value.value.isSet && s(t.value.value.value), t.value.observe((n) => {
724
+ M(() => (t.value.value.isSet && s(t.value.value.value), t.value.observe((n) => {
725
725
  n.isSet && s(n.value);
726
726
  })), [t, e]);
727
727
  }
@@ -749,7 +749,7 @@ class X {
749
749
  getBatchDataAsyncResource(t) {
750
750
  const e = this.dataSource, s = this.getDataLoaderOptions(t);
751
751
  if ("staticData" in e)
752
- return mt(
752
+ return ht(
753
753
  async (n) => ({
754
754
  data: n,
755
755
  itemTotalCount: n.length
@@ -757,8 +757,8 @@ class X {
757
757
  [e.staticData]
758
758
  );
759
759
  if ("asyncLoader" in e) {
760
- const n = e.asyncLoader, o = e.dependencies, c = o ? vt(o).toString() : void 0;
761
- return mt(n, [s], {
760
+ const n = e.asyncLoader, o = e.dependencies, c = o ? wt(o).toString() : void 0;
761
+ return ht(n, [s], {
762
762
  loaderId: c
763
763
  });
764
764
  }
@@ -769,7 +769,7 @@ class X {
769
769
  throw new Error("Unknown data source");
770
770
  }
771
771
  }
772
- class Ss {
772
+ class bs {
773
773
  constructor(t, e) {
774
774
  r(this, "list");
775
775
  r(this, "render");
@@ -800,7 +800,7 @@ class Ss {
800
800
  this.onUpdateCallbacks.add(t);
801
801
  }
802
802
  }
803
- const M = class M {
803
+ const x = class x {
804
804
  constructor(t, e = {}) {
805
805
  r(this, "list");
806
806
  r(this, "textValue");
@@ -811,11 +811,11 @@ const M = class M {
811
811
  this.list = t, this.textValue = n, this.renderFn = c, this.href = o, this.fallback = s;
812
812
  }
813
813
  render(t) {
814
- return (this.renderFn ?? M.fallbackRenderItemFn)(t);
814
+ return (this.renderFn ?? x.fallbackRenderItemFn)(t, this.list);
815
815
  }
816
816
  };
817
- r(M, "fallbackRenderItemFn", (t) => ft("pre", void 0, JSON.stringify(t)));
818
- let H = M, vs = class {
817
+ r(x, "fallbackRenderItemFn", (t) => St("pre", void 0, JSON.stringify(t)));
818
+ let q = x, vs = class {
819
819
  constructor(t, e = {}) {
820
820
  r(this, "tableHeader");
821
821
  r(this, "componentProps");
@@ -862,10 +862,10 @@ let H = M, vs = class {
862
862
  const { header: s, body: n, ...o } = e;
863
863
  this.list = t, this.header = new ws(this, s), this.body = new Fs(this, n), this.componentProps = o;
864
864
  }
865
- }, Cs = class kt {
865
+ };
866
+ var v;
867
+ let Cs = (v = class {
866
868
  constructor(t) {
867
- r(this, "settingStorageKey");
868
- r(this, "supportsSettingsStorage");
869
869
  r(this, "filters");
870
870
  r(this, "itemView");
871
871
  r(this, "table");
@@ -880,8 +880,11 @@ let H = M, vs = class {
880
880
  r(this, "componentProps");
881
881
  r(this, "viewMode");
882
882
  r(this, "setViewMode");
883
- r(this, "filterSettingsStorageKey");
884
883
  r(this, "defaultSettings");
884
+ r(this, "supportsSettingsStorage");
885
+ r(this, "settingStorageKey");
886
+ r(this, "viewModeStorageKey");
887
+ r(this, "filterSettingsStorageKey");
885
888
  const {
886
889
  settingStorageKey: e,
887
890
  itemView: s,
@@ -892,19 +895,28 @@ let H = M, vs = class {
892
895
  onChange: d,
893
896
  loader: u,
894
897
  search: h,
895
- onAction: T,
896
- getItemId: x,
897
- defaultViewMode: I,
898
- ...N
898
+ onAction: C,
899
+ getItemId: R,
900
+ defaultViewMode: L,
901
+ ...$
899
902
  } = t;
900
- this.defaultSettings = Le(), this.settingStorageKey = e, this.filterSettingsStorageKey = e ? `${e}.activeFilters` : void 0, this.supportsSettingsStorage = !!this.settingStorageKey, this.items = new us(this), this.filters = o.map((v) => new P(this, v)), this.sorting = c.map((v) => new fs(this, v)), this.search = h ? new Ss(this, h) : void 0, this.itemView = s ? new H(this, s) : void 0, this.table = n ? new Ts(this, n) : void 0, this.batches = new ms(this, l), this.componentProps = N, this.loader = X.useNew(this, u), this.onAction = T, this.getItemId = x, this.reactTable = Y.useNew(this, d, {
903
+ this.defaultSettings = Le(), this.settingStorageKey = e, this.filterSettingsStorageKey = e ? `${e}.activeFilters` : void 0, this.viewModeStorageKey = e ? `${e}.viewMode` : void 0, this.supportsSettingsStorage = !!this.settingStorageKey, this.items = new us(this), this.filters = o.map((p) => new k(this, p)), this.sorting = c.map((p) => new fs(this, p)), this.search = h ? new bs(this, h) : void 0, this.itemView = s ? new q(this, s) : void 0, this.table = n ? new Ts(this, n) : void 0, this.batches = new ms(this, l), this.componentProps = $, this.loader = Z.useNew(this, u), this.onAction = C, this.getItemId = R, this.reactTable = Q.useNew(this, d, {
901
904
  manualFiltering: this.loader.manualFiltering,
902
905
  manualPagination: this.loader.manualPagination,
903
906
  manualSorting: this.loader.manualSorting
904
907
  });
905
- const [R, $] = G(I ?? "list");
906
- this.viewMode = R, this.setViewMode = $, k(() => {
907
- this.filters.forEach((v) => v.deleteUnknownFilterValues());
908
+ const [z, U] = j(
909
+ L ?? this.getStoredViewModeDefaultSetting() ?? "list"
910
+ );
911
+ this.viewMode = z, this.setViewMode = (p) => {
912
+ U(p), this.defaultSettings && this.viewModeStorageKey && this.defaultSettings.set(
913
+ "List",
914
+ this.viewModeStorageKey,
915
+ v.viewModeSettingsStorageSchema,
916
+ p
917
+ );
918
+ }, M(() => {
919
+ this.filters.forEach((p) => p.deleteUnknownFilterValues());
908
920
  }, [this.filters]);
909
921
  }
910
922
  get isFiltered() {
@@ -914,7 +926,7 @@ let H = M, vs = class {
914
926
  return this.sorting.filter((t) => t.defaultEnabled !== "hidden");
915
927
  }
916
928
  static useNew(t) {
917
- return new kt(t);
929
+ return new v(t);
918
930
  }
919
931
  storeFilterDefaultSettings() {
920
932
  if (this.defaultSettings && this.filterSettingsStorageKey) {
@@ -927,7 +939,7 @@ let H = M, vs = class {
927
939
  this.defaultSettings.set(
928
940
  "List",
929
941
  this.filterSettingsStorageKey,
930
- P.settingsStorageSchema,
942
+ k.settingsStorageSchema,
931
943
  t
932
944
  );
933
945
  }
@@ -937,12 +949,20 @@ let H = M, vs = class {
937
949
  return this.defaultSettings.get(
938
950
  "List",
939
951
  this.filterSettingsStorageKey,
940
- P.settingsStorageSchema
952
+ k.settingsStorageSchema
953
+ );
954
+ }
955
+ getStoredViewModeDefaultSetting() {
956
+ if (this.defaultSettings && this.viewModeStorageKey)
957
+ return this.defaultSettings.get(
958
+ "List",
959
+ this.viewModeStorageKey,
960
+ v.viewModeSettingsStorageSchema
941
961
  );
942
962
  }
943
963
  getSorting(t) {
944
964
  const e = this.sorting.find((s) => s.id === t);
945
- return wt(!!e, `Could not get Sorting (ID: ${t})`), e;
965
+ return yt(!!e, `Could not get Sorting (ID: ${t})`), e;
946
966
  }
947
967
  clearSorting() {
948
968
  return this.sorting.forEach((t) => t.clear());
@@ -953,27 +973,27 @@ let H = M, vs = class {
953
973
  useIsEmpty() {
954
974
  return !this.loader.useIsLoading() && this.items.entries.length === 0;
955
975
  }
956
- };
957
- const Is = "flow--list--items", Ls = "flow--list--items--is-loading", pt = {
976
+ }, r(v, "viewModeSettingsStorageSchema", V.enum(["list", "table"]).optional()), v);
977
+ const Is = "flow--list--items", Ls = "flow--list--items--is-loading", ft = {
958
978
  items: Is,
959
979
  isLoading: Ls
960
- }, Ps = "flow--list--items--item", Vs = "flow--list--items--item--is-selected", ks = "flow--list--items--item--has-action", V = {
980
+ }, Ps = "flow--list--items--item", Vs = "flow--list--items--item--is-selected", ks = "flow--list--items--item--has-action", A = {
961
981
  item: Ps,
962
982
  isSelected: Vs,
963
983
  hasAction: ks
964
- }, At = () => /* @__PURE__ */ i.createElement(Lt, null, /* @__PURE__ */ i.createElement(W, null, /* @__PURE__ */ i.createElement(A, { width: "200px" })), /* @__PURE__ */ i.createElement(y, null, /* @__PURE__ */ i.createElement(A, { width: "300px" }))), As = (a) => {
984
+ }, At = () => /* @__PURE__ */ i.createElement(Pt, null, /* @__PURE__ */ i.createElement(Y, null, /* @__PURE__ */ i.createElement(B, { width: "200px" })), /* @__PURE__ */ i.createElement(E, null, /* @__PURE__ */ i.createElement(B, { width: "300px" }))), As = (a) => {
965
985
  const { id: t, data: e, children: s } = a, o = g().itemView;
966
986
  if (!o)
967
987
  return null;
968
988
  const c = o.list.onAction, l = o.textValue ? o.textValue(e) : void 0, d = o.href ? o.href(e) : void 0, u = !!c || !!d;
969
989
  return /* @__PURE__ */ i.createElement(
970
- J.GridListItem,
990
+ _.GridListItem,
971
991
  {
972
992
  id: t,
973
- className: (h) => F(
974
- V.item,
975
- u && V.hasAction,
976
- h.isSelected && V.isSelected
993
+ className: (h) => T(
994
+ A.item,
995
+ u && A.hasAction,
996
+ h.isSelected && A.isSelected
977
997
  ),
978
998
  onAction: () => c && c(e),
979
999
  textValue: l,
@@ -981,42 +1001,42 @@ const Is = "flow--list--items", Ls = "flow--list--items--is-loading", pt = {
981
1001
  },
982
1002
  /* @__PURE__ */ i.createElement(Qt, { fallback: /* @__PURE__ */ i.createElement(At, null) }, s ?? o.render(e))
983
1003
  );
984
- }, Bs = (a) => /* @__PURE__ */ i.createElement(J.GridListItem, { textValue: "-", className: V.item }, a.children), q = () => {
985
- const a = w(b);
986
- return /* @__PURE__ */ i.createElement(Pe, null, /* @__PURE__ */ i.createElement(Ve, null), /* @__PURE__ */ i.createElement(W, null, a.format("list.noResult.heading")), /* @__PURE__ */ i.createElement(y, null, a.format("list.noResult.text")));
987
- }, Ms = () => {
1004
+ }, Ms = (a) => /* @__PURE__ */ i.createElement(_.GridListItem, { textValue: "-", className: A.item }, a.children), G = () => {
1005
+ const a = y(b);
1006
+ return /* @__PURE__ */ i.createElement(Pe, null, /* @__PURE__ */ i.createElement(Ve, null), /* @__PURE__ */ i.createElement(Y, null, a.format("list.noResult.heading")), /* @__PURE__ */ i.createElement(E, null, a.format("list.noResult.text")));
1007
+ }, Bs = () => {
988
1008
  var e;
989
1009
  const t = ((e = g().itemView) == null ? void 0 : e.fallback) ?? /* @__PURE__ */ i.createElement(At, null);
990
- return Array.from(Array(5)).map((s, n) => /* @__PURE__ */ i.createElement(Bs, { key: n }, Xt(t)));
1010
+ return Array.from(Array(5)).map((s, n) => /* @__PURE__ */ i.createElement(Ms, { key: n }, Xt(t)));
991
1011
  }, Ds = () => {
992
1012
  const a = g(), t = a.loader.useIsLoading(), e = a.loader.useIsInitiallyLoading();
993
1013
  if (!a.itemView)
994
1014
  return null;
995
- const s = a.items.entries.map((o) => /* @__PURE__ */ i.createElement(As, { key: o.id, data: o.data, id: o.id })), n = F(pt.items, t && pt.isLoading);
1015
+ const s = a.items.entries.map((o) => /* @__PURE__ */ i.createElement(As, { key: o.id, data: o.data, id: o.id })), n = T(ft.items, t && ft.isLoading);
996
1016
  return /* @__PURE__ */ i.createElement("div", { "aria-hidden": e, "aria-busy": t }, /* @__PURE__ */ i.createElement(
997
- J.GridList,
1017
+ _.GridList,
998
1018
  {
999
1019
  className: n,
1000
1020
  ...a.componentProps,
1001
- renderEmptyState: () => /* @__PURE__ */ i.createElement(q, null)
1021
+ renderEmptyState: () => /* @__PURE__ */ i.createElement(G, null)
1002
1022
  },
1003
- e ? /* @__PURE__ */ i.createElement(Ms, null) : s
1023
+ e ? /* @__PURE__ */ i.createElement(Bs, null) : s
1004
1024
  ));
1005
- }, Bt = (a) => null, xs = () => Bt, Mt = (a) => null, Ns = () => Mt, Dt = (a) => null, Rs = () => Dt, xt = (a) => null, $s = () => xt, Nt = (a) => null, zs = () => Nt, Us = "flow--list--footer", Os = {
1025
+ }, Mt = (a) => null, xs = () => Mt, Bt = (a) => null, Ns = () => Bt, Dt = (a) => null, Rs = () => Dt, xt = (a) => null, $s = () => xt, Nt = (a) => null, zs = () => Nt, Us = "flow--list--footer", Ks = {
1006
1026
  footer: Us
1007
- }, Ks = (a) => {
1008
- const t = w(b), e = g(), s = e.batches, n = e.loader.useIsInitiallyLoading(), o = e.useIsEmpty(), c = s.getTotalItemsCount(), l = s.getVisibleItemsCount();
1027
+ }, Os = (a) => {
1028
+ const t = y(b), e = g(), s = e.batches, n = e.loader.useIsInitiallyLoading(), o = e.useIsEmpty(), c = s.getTotalItemsCount(), l = s.getVisibleItemsCount();
1009
1029
  if (o)
1010
1030
  return null;
1011
- const d = n ? /* @__PURE__ */ i.createElement(Be, { width: "200px" }) : t.format("list.paginationInfo", {
1031
+ const d = n ? /* @__PURE__ */ i.createElement(Me, { width: "200px" }) : t.format("list.paginationInfo", {
1012
1032
  visibleItemsCount: l,
1013
1033
  totalItemsCount: c
1014
1034
  });
1015
- return /* @__PURE__ */ i.createElement(y, { ...a }, d);
1035
+ return /* @__PURE__ */ i.createElement(E, { ...a }, d);
1016
1036
  }, Hs = (a) => {
1017
- const t = w(b), e = g(), s = e.loader.useIsLoading(), n = e.loader.useIsInitiallyLoading();
1037
+ const t = y(b), e = g(), s = e.loader.useIsLoading(), n = e.loader.useIsInitiallyLoading();
1018
1038
  return !e.batches.hasNextBatch() && !s ? null : /* @__PURE__ */ i.createElement(
1019
- S,
1039
+ w,
1020
1040
  {
1021
1041
  isPending: s && !n,
1022
1042
  isDisabled: n,
@@ -1027,15 +1047,15 @@ const Is = "flow--list--items", Ls = "flow--list--items--is-loading", pt = {
1027
1047
  },
1028
1048
  t.format("list.showMore")
1029
1049
  );
1030
- }, qs = () => /* @__PURE__ */ i.createElement("div", { className: Os.footer }, /* @__PURE__ */ i.createElement(Ks, null), /* @__PURE__ */ i.createElement(Hs, null));
1050
+ }, qs = () => /* @__PURE__ */ i.createElement("div", { className: Ks.footer }, /* @__PURE__ */ i.createElement(Os, null), /* @__PURE__ */ i.createElement(Hs, null));
1031
1051
  function Rt(a) {
1032
1052
  return null;
1033
1053
  }
1034
- const Gs = () => Rt, $t = (a) => null, zt = (a) => null, Ut = (a) => null, js = (a) => /* @__PURE__ */ i.createElement(yt, { ...a }, /* @__PURE__ */ i.createElement(Et, null, /* @__PURE__ */ i.createElement(Ft, null, /* @__PURE__ */ i.createElement(A, { width: "100%" }))), /* @__PURE__ */ i.createElement(Tt, null, Array.from(Array(5)).map((t, e) => /* @__PURE__ */ i.createElement(Ct, { key: e }, /* @__PURE__ */ i.createElement(It, null, /* @__PURE__ */ i.createElement(A, { width: "100%" })))))), _s = "flow--list--table", Ws = "flow--list--table--is-loading", Js = "flow--list--table--row", Ys = "flow--list--table--is-selected", Qs = "flow--list--table--has-action", C = {
1035
- table: _s,
1036
- isLoading: Ws,
1037
- row: Js,
1038
- isSelected: Ys,
1054
+ const Gs = () => Rt, $t = (a) => null, zt = (a) => null, Ut = (a) => null, js = (a) => /* @__PURE__ */ i.createElement(Et, { ...a }, /* @__PURE__ */ i.createElement(Ft, null, /* @__PURE__ */ i.createElement(Tt, null, /* @__PURE__ */ i.createElement(B, { width: "100%" }))), /* @__PURE__ */ i.createElement(Ct, null, Array.from(Array(5)).map((t, e) => /* @__PURE__ */ i.createElement(It, { key: e }, /* @__PURE__ */ i.createElement(Lt, null, /* @__PURE__ */ i.createElement(B, { width: "100%" })))))), Ws = "flow--list--table", Js = "flow--list--table--is-loading", Ys = "flow--list--table--row", _s = "flow--list--table--is-selected", Qs = "flow--list--table--has-action", I = {
1055
+ table: Ws,
1056
+ isLoading: Js,
1057
+ row: Ys,
1058
+ isSelected: _s,
1039
1059
  hasAction: Qs
1040
1060
  }, Xs = () => {
1041
1061
  const a = g(), t = a.table, e = a.useIsEmpty(), s = a.loader.useIsLoading(), n = a.loader.useIsInitiallyLoading();
@@ -1044,56 +1064,56 @@ const Gs = () => Rt, $t = (a) => null, zt = (a) => null, Ut = (a) => null, js =
1044
1064
  if (n)
1045
1065
  return /* @__PURE__ */ i.createElement(js, { ...t.componentProps });
1046
1066
  if (e)
1047
- return /* @__PURE__ */ i.createElement(q, null);
1048
- const o = t.list.onAction, c = F(
1049
- C.table,
1050
- s && C.isLoading,
1067
+ return /* @__PURE__ */ i.createElement(G, null);
1068
+ const o = t.list.onAction, c = T(
1069
+ I.table,
1070
+ s && I.isLoading,
1051
1071
  t.componentProps.className
1052
1072
  );
1053
1073
  return /* @__PURE__ */ i.createElement(
1054
- yt,
1074
+ Et,
1055
1075
  {
1056
1076
  ...a.componentProps,
1057
1077
  ...t.componentProps,
1058
1078
  className: c
1059
1079
  },
1060
- /* @__PURE__ */ i.createElement(Et, { ...t.header.componentProps }, t.header.columns.map((l, d) => /* @__PURE__ */ i.createElement(Ft, { key: d, ...l.componentProps }))),
1080
+ /* @__PURE__ */ i.createElement(Ft, { ...t.header.componentProps }, t.header.columns.map((l, d) => /* @__PURE__ */ i.createElement(Tt, { key: d, ...l.componentProps }))),
1061
1081
  /* @__PURE__ */ i.createElement(
1062
- Tt,
1082
+ Ct,
1063
1083
  {
1064
1084
  ...t.body.componentProps,
1065
- renderEmptyState: () => /* @__PURE__ */ i.createElement(q, null)
1085
+ renderEmptyState: () => /* @__PURE__ */ i.createElement(G, null)
1066
1086
  },
1067
1087
  a.items.entries.map((l) => {
1068
1088
  var d;
1069
1089
  return /* @__PURE__ */ i.createElement(
1070
- Ct,
1090
+ It,
1071
1091
  {
1072
- className: (u) => F(
1073
- C.row,
1074
- o && C.hasAction,
1092
+ className: (u) => T(
1093
+ I.row,
1094
+ o && I.hasAction,
1075
1095
  t.body.row.componentProps.className,
1076
- u.isSelected && C.isSelected
1096
+ u.isSelected && I.isSelected
1077
1097
  ),
1078
1098
  key: l.id,
1079
1099
  id: l.id,
1080
1100
  onAction: o ? () => o(l.data) : void 0,
1081
1101
  ...t.body.row.componentProps
1082
1102
  },
1083
- (d = t.body.row) == null ? void 0 : d.cells.map((u, h) => /* @__PURE__ */ i.createElement(It, { key: h, ...u.componentProps }, u.renderFn ? u.renderFn(l.data) : void 0))
1103
+ (d = t.body.row) == null ? void 0 : d.cells.map((u, h) => /* @__PURE__ */ i.createElement(Lt, { key: h, ...u.componentProps }, u.renderFn ? u.renderFn(l.data) : void 0))
1084
1104
  );
1085
1105
  })
1086
1106
  )
1087
1107
  );
1088
- }, Ot = (a) => null, Kt = (a) => null, Ht = (a) => null, Zs = le("List", (a) => {
1089
- var Z, tt, et, st, it, at, nt, rt, ot;
1090
- const { children: t, batchSize: e, onChange: s, refProp: n, ...o } = a, c = (Z = f(
1108
+ }, Kt = (a) => null, Ot = (a) => null, Ht = (a) => null, Zs = le("List", (a) => {
1109
+ var tt, et, st, it, at, nt, rt, ot, lt;
1110
+ const { children: t, batchSize: e, onChange: s, refProp: n, ...o } = a, c = (tt = S(
1091
1111
  t,
1092
- Bt
1093
- )) == null ? void 0 : Z.props, l = (tt = f(
1112
+ Mt
1113
+ )) == null ? void 0 : tt.props, l = (et = S(
1094
1114
  t,
1095
1115
  ke
1096
- )) == null ? void 0 : tt.props, d = (et = f(t, Nt)) == null ? void 0 : et.props, u = {
1116
+ )) == null ? void 0 : et.props, d = (st = S(t, Nt)) == null ? void 0 : st.props, u = {
1097
1117
  source: c ? {
1098
1118
  ...c,
1099
1119
  asyncLoader: c.children
@@ -1103,23 +1123,23 @@ const Gs = () => Rt, $t = (a) => null, zt = (a) => null, Ut = (a) => null, js =
1103
1123
  } : d ? {
1104
1124
  staticData: d.data
1105
1125
  } : void 0
1106
- }, h = (st = f(t, Rt)) == null ? void 0 : st.props, T = (it = f(t, xt)) == null ? void 0 : it.props, x = (at = f(t, Ot)) == null ? void 0 : at.props, I = L(t, $t).map(
1107
- (p) => ({
1108
- ...p.props,
1109
- name: p.props.children
1126
+ }, h = (it = S(t, Rt)) == null ? void 0 : it.props, C = (at = S(t, xt)) == null ? void 0 : at.props, R = (nt = S(t, Kt)) == null ? void 0 : nt.props, L = P(t, $t).map(
1127
+ (f) => ({
1128
+ ...f.props,
1129
+ name: f.props.children
1110
1130
  })
1111
- ), N = L(t, Ut).map(
1112
- (p) => ({
1113
- ...p.props,
1114
- renderFn: p.props.children
1131
+ ), $ = P(t, Ut).map(
1132
+ (f) => ({
1133
+ ...f.props,
1134
+ renderFn: f.props.children
1115
1135
  })
1116
- ), R = (nt = f(t, zt)) == null ? void 0 : nt.props, $ = (rt = f(t, Kt)) == null ? void 0 : rt.props, v = (ot = f(t, Ht)) == null ? void 0 : ot.props, z = Cs.useNew({
1136
+ ), z = (rt = S(t, zt)) == null ? void 0 : rt.props, U = (ot = S(t, Ot)) == null ? void 0 : ot.props, p = (lt = S(t, Ht)) == null ? void 0 : lt.props, K = Cs.useNew({
1117
1137
  onChange: s,
1118
1138
  loader: u,
1119
- filters: L(t, Mt).map(
1120
- (p) => ({
1121
- ...p.props,
1122
- renderItem: p.props.children
1139
+ filters: P(t, Bt).map(
1140
+ (f) => ({
1141
+ ...f.props,
1142
+ renderItem: f.props.children
1123
1143
  })
1124
1144
  ),
1125
1145
  search: h ? {
@@ -1127,24 +1147,24 @@ const Gs = () => Rt, $t = (a) => null, zt = (a) => null, Ut = (a) => null, js =
1127
1147
  textFieldProps: h,
1128
1148
  defaultValue: h.defaultValue
1129
1149
  } : void 0,
1130
- sorting: L(t, Dt).map((p) => p.props),
1131
- itemView: T ? {
1132
- ...T,
1133
- renderFn: T.children
1150
+ sorting: P(t, Dt).map((f) => f.props),
1151
+ itemView: C ? {
1152
+ ...C,
1153
+ renderFn: C.children
1134
1154
  } : void 0,
1135
- table: I.length > 0 ? {
1155
+ table: L.length > 0 ? {
1136
1156
  header: {
1137
- ...$,
1138
- columns: I
1157
+ ...U,
1158
+ columns: L
1139
1159
  },
1140
1160
  body: {
1141
- ...v,
1161
+ ...p,
1142
1162
  row: {
1143
- ...R,
1144
- cells: N
1163
+ ...z,
1164
+ cells: $
1145
1165
  }
1146
1166
  },
1147
- ...x
1167
+ ...R
1148
1168
  } : void 0,
1149
1169
  batchesController: {
1150
1170
  batchSize: e
@@ -1152,20 +1172,20 @@ const Gs = () => Rt, $t = (a) => null, zt = (a) => null, Ut = (a) => null, js =
1152
1172
  ...o
1153
1173
  }), qt = {
1154
1174
  ActionGroup: {
1155
- className: E.actions,
1175
+ className: F.actions,
1156
1176
  tunnelId: "actions",
1157
1177
  ignoreBreakpoint: !0
1158
1178
  }
1159
- }, Gt = !!f(t, Me);
1160
- return /* @__PURE__ */ i.createElement(bt, { props: qt }, /* @__PURE__ */ i.createElement(St, null, /* @__PURE__ */ i.createElement(
1161
- Pt.Provider,
1179
+ }, Gt = !!S(t, Be);
1180
+ return /* @__PURE__ */ i.createElement(bt, { props: qt }, /* @__PURE__ */ i.createElement(vt, null, /* @__PURE__ */ i.createElement(
1181
+ Vt.Provider,
1162
1182
  {
1163
1183
  value: {
1164
- list: z
1184
+ list: K
1165
1185
  }
1166
1186
  },
1167
1187
  /* @__PURE__ */ i.createElement(qe, null),
1168
- /* @__PURE__ */ i.createElement("div", { className: cs.list, ref: n }, t, /* @__PURE__ */ i.createElement(os, { hasActionGroup: Gt }), z.viewMode === "list" && /* @__PURE__ */ i.createElement(Ds, null), z.viewMode === "table" && /* @__PURE__ */ i.createElement(Xs, null), /* @__PURE__ */ i.createElement(qs, null))
1188
+ /* @__PURE__ */ i.createElement("div", { className: cs.list, ref: n }, t, /* @__PURE__ */ i.createElement(os, { hasActionGroup: Gt }), K.viewMode === "list" && /* @__PURE__ */ i.createElement(Ds, null), K.viewMode === "table" && /* @__PURE__ */ i.createElement(Xs, null), /* @__PURE__ */ i.createElement(qs, null))
1169
1189
  )));
1170
1190
  }), ti = () => Zs, Zi = () => ({
1171
1191
  List: ti(),
@@ -1173,23 +1193,23 @@ const Gs = () => Rt, $t = (a) => null, zt = (a) => null, Ut = (a) => null, js =
1173
1193
  Search: Gs(),
1174
1194
  Sorting: Rs(),
1175
1195
  Item: $s(),
1176
- ItemView: Lt,
1177
- TableHeader: Kt,
1196
+ ItemView: Pt,
1197
+ TableHeader: Ot,
1178
1198
  TableColumn: $t,
1179
1199
  TableBody: Ht,
1180
1200
  TableRow: zt,
1181
1201
  TableCell: Ut,
1182
- Table: Ot,
1202
+ Table: Kt,
1183
1203
  StaticData: zs(),
1184
1204
  LoaderAsync: xs(),
1185
1205
  LoaderAsyncResource: Ae()
1186
1206
  });
1187
1207
  export {
1188
1208
  Zs as List,
1189
- Mt as ListFilter,
1209
+ Bt as ListFilter,
1190
1210
  xt as ListItem,
1191
- Lt as ListItemView,
1192
- Bt as ListLoaderAsync,
1211
+ Pt as ListItemView,
1212
+ Mt as ListLoaderAsync,
1193
1213
  Dt as ListSorting,
1194
1214
  Nt as ListStaticData,
1195
1215
  ti as TypedList,
package/dist/{SettingsProvider-D2-kWC3S.js → SettingsProvider-Ckj9VyMJ.js} RENAMED
@@ -3,7 +3,7 @@
3
3
  var d = Object.defineProperty;
4
4
  var w = (s, t, e) => t in s ? d(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
5
5
  var c = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
6
- import y, { createContext as J, useRef as v, useMemo as O, useEffect as K, useContext as b } from "react";
6
+ import y, { createContext as J, useContext as v, useRef as O, useMemo as K, useEffect as b } from "react";
7
7
  import { makeAutoObservable as l, ObservableMap as a, autorun as x } from "mobx";
8
8
  import { getAsyncResource as A } from "@mittwald/react-use-promise";
9
9
  import { mapValues as E } from "remeda";
@@ -78,10 +78,10 @@ const R = (s) => {
78
78
  return new P(s.storageKey);
79
79
  }
80
80
  throw new Error(`Unsupported setting backend: ${s}`);
81
- }, S = J(void 0), M = () => b(S), N = (s) => {
81
+ }, S = J(void 0), M = () => v(S), N = (s) => {
82
82
  const { children: t, id: e, ...n } = s, o = R(n), r = A(() => o.load(), [], {
83
83
  loaderId: e
84
- }), h = r.use(), u = v(Promise.resolve()), m = O(
84
+ }), h = r.use(), u = O(Promise.resolve()), m = K(
85
85
  () => g.fromJson(h),
86
86
  [e]
87
87
  ), p = () => {
@@ -90,7 +90,7 @@ const R = (s) => {
90
90
  await o.store(f), r.refresh();
91
91
  });
92
92
  };
93
- return K(() => x(p), [e]), /* @__PURE__ */ y.createElement(S.Provider, { value: m }, t);
93
+ return b(() => x(p), [e]), /* @__PURE__ */ y.createElement(S.Provider, { value: m }, t);
94
94
  };
95
95
  export {
96
96
  N as S,
package/dist/SettingsProvider.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client"
2
2
  /* */
3
- import { S as t } from "./SettingsProvider-D2-kWC3S.js";
3
+ import { S as t } from "./SettingsProvider-Ckj9VyMJ.js";
4
4
  export {
5
5
  t as SettingsProvider,
6
6
  t as default
package/dist/types/components/List/model/List.d.ts CHANGED
@@ -8,10 +8,8 @@ import { IncrementalLoader } from './loading/IncrementalLoader';
8
8
  import { Search } from './search/Search';
9
9
  import { ItemView } from './item/ItemView';
10
10
  import { Table } from './table/Table';
11
- import { Dispatch, SetStateAction } from 'react';
11
+ import { default as z } from 'zod';
12
12
  export declare class List<T> {
13
- readonly settingStorageKey?: string;
14
- readonly supportsSettingsStorage: boolean;
15
13
  readonly filters: Filter<T, never, never>[];
16
14
  readonly itemView?: ItemView<T>;
17
15
  readonly table?: Table<T>;
@@ -25,15 +23,20 @@ export declare class List<T> {
25
23
  readonly getItemId?: GetItemId<T>;
26
24
  readonly componentProps: ListSupportedComponentProps;
27
25
  viewMode: ListViewMode;
28
- readonly setViewMode: Dispatch<SetStateAction<ListViewMode>>;
29
- private readonly filterSettingsStorageKey?;
26
+ readonly setViewMode: (viewMode: ListViewMode) => void;
30
27
  private readonly defaultSettings?;
28
+ readonly supportsSettingsStorage: boolean;
29
+ readonly settingStorageKey?: string;
30
+ private readonly viewModeStorageKey?;
31
+ private readonly filterSettingsStorageKey?;
32
+ static readonly viewModeSettingsStorageSchema: z.ZodOptional<z.ZodEnum<["list", "table"]>>;
31
33
  constructor(shape: ListShape<T>);
32
34
  get isFiltered(): boolean;
33
35
  get visibleSorting(): Sorting<T>[];
34
36
  static useNew<T>(shape: ListShape<T>): List<T>;
35
37
  storeFilterDefaultSettings(): void;
36
38
  getStoredFilterDefaultSettings(): Record<string, unknown[]> | undefined;
39
+ getStoredViewModeDefaultSetting(): "table" | "list" | undefined;
37
40
  getSorting(id: string): Sorting<T>;
38
41
  clearSorting(): void;
39
42
  resetFilters(): void;
package/dist/types/components/List/model/item/types.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { ReactNode } from 'react';
2
- export type RenderItemFn<T> = (data: T) => ReactNode;
2
+ import { default as List } from '../List';
3
+ export type RenderItemFn<T> = (data: T, list: List<T>) => ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "0.1.0-alpha.259",
3
+ "version": "0.1.0-alpha.260",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -313,7 +313,7 @@
313
313
  "@chakra-ui/live-region": "^2.1.0",
314
314
  "@internationalized/date": "^3.5.5",
315
315
  "@internationalized/string-compiler": "^3.2.4",
316
- "@mittwald/react-tunnel": "^0.1.0-alpha.259",
316
+ "@mittwald/react-tunnel": "^0.1.0-alpha.260",
317
317
  "@mittwald/react-use-promise": "^2.5.0",
318
318
  "@react-aria/utils": "^3.25.2",
319
319
  "@react-types/shared": "^3.24.1",
@@ -340,7 +340,7 @@
340
340
  },
341
341
  "devDependencies": {
342
342
  "@faker-js/faker": "^9.0.1",
343
- "@mittwald/flow-design-tokens": "^0.1.0-alpha.259",
343
+ "@mittwald/flow-design-tokens": "^0.1.0-alpha.260",
344
344
  "@mittwald/react-use-promise": "^2.5.0",
345
345
  "@nx/storybook": "^19.7.4",
346
346
  "@storybook/addon-a11y": "^8.3.2",
@@ -418,5 +418,5 @@
418
418
  "optional": true
419
419
  }
420
420
  },
421
- "gitHead": "c9f858b6093feb9523e2b5fd7f2595f04fba86a8"
421
+ "gitHead": "9c88cd9790bf02b1a1673b9c71557bad57c61086"
422
422
  }