@mittwald/flow-react-components 0.1.0-alpha.269 → 0.1.0-alpha.270

package/dist/List.js

@@ -3,7 +3,7 @@
 var je = Object.defineProperty;
 var We = (a, e, t) => e in a ? je(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
 var r = (a, e, t) => We(a, typeof e != "symbol" ? e + "" : e, t);
-import i, { createContext as Je, useContext as Ye, createElement as Se, useState as j, useEffect as B, useRef as _e, Suspense as Qe, cloneElement as Xe } from "react";
+import i, { createContext as Je, useContext as Ye, createElement as Se, useState as j, useEffect as M, useRef as _e, Suspense as Qe, cloneElement as Xe } from "react";
 import "./propsContext-DzAKlmhS.js";
 import { P as be } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
@@ -13,7 +13,7 @@ import { B as w } from "./Button-DtpO7pbw.js";
 import { IconArrowBackUp as at } from "@tabler/icons-react";
 import { I as nt } from "./Icon-9pbeBcg1.js";
 import { I as rt } from "./IconContextMenu-TKPRhsln.js";
-import { a as N, C as W } from "./ContextMenuTrigger-DB1rWK0_.js";
+import { a as x, C as W } from "./ContextMenuTrigger-DB1rWK0_.js";
 import { M as J } from "./MenuItem-C51yH30J.js";
 import { useLocalizedStringFormatter as y } from "react-aria";
 import { TunnelProvider as ve, TunnelExit as O } from "@mittwald/react-tunnel";
@@ -34,17 +34,17 @@ import { H as Y } from "./Heading-C7-PIEig.js";
 import { S as vt } from "./Section-CbYVO00-.js";
 import { getProperty as wt } from "dot-prop";
 import { hash as we } from "object-code";
-import k from "zod";
+import V from "zod";
 import { useReactTable as yt, getCoreRowModel as Et, getSortedRowModel as Ft, getFilteredRowModel as Tt, getPaginationRowModel as Ct, getFacetedUniqueValues as It } from "@tanstack/react-table";
 import ye from "invariant";
 import { getAsyncResource as he } from "@mittwald/react-use-promise";
 import { u as ge } from "./useSelector-DpU7_HMO.js";
 import { u as Lt } from "./SettingsProvider-Ckj9VyMJ.js";
 import * as _ from "react-aria-components";
-import { S as D } from "./SkeletonText-B5ZghZhO.js";
+import { S as B } from "./SkeletonText-B5ZghZhO.js";
 import { I as Pt } from "./IllustratedMessage-B3MHD01M.js";
 import { I as Vt } from "./IconSearch-CSaVgGtE.js";
-import { d as S, a as V } from "./deepFindOfType-6pG0fH7S.js";
+import { d as S, a as P } from "./deepFindOfType-6pG0fH7S.js";
 import { ListLoaderAsyncResource as kt, TypedListLoaderAsyncResource as At } from "./List/ListLoaderAsyncResource.js";
 import { S as Mt } from "./Skeleton-CKLaTmDR.js";
 import { T as Ee, d as Fe, c as Te, a as Ce, e as Ie, b as Le } from "./TableRow-BsPgWqkU.js";
@@ -91,7 +91,7 @@ const Dt = "flow--list--items--item--view", xt = "flow--list--items--item--view-
   "list.sorting": "Sorting"
 } }, Ot = (a) => {
   const { className: e, children: t } = a, s = y(v);
-  return /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(
+  return /* @__PURE__ */ i.createElement(x, null, /* @__PURE__ */ i.createElement(
     w,
     {
       variant: "plain",
@@ -152,7 +152,7 @@ const Dt = "flow--list--items--item--view", xt = "flow--list--items--item--view-
   if (e.length === 0)
     return null;
   const t = a.visibleSorting.find((n) => n.isSorted()), s = /* @__PURE__ */ i.createElement(E, null, t ? /* @__PURE__ */ i.createElement(i.Fragment, null, t.name ?? t.property) : /* @__PURE__ */ i.createElement(H, { locales: v }, "list.sorting"));
-  return /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(w, { variant: "outline", color: "secondary" }, s, /* @__PURE__ */ i.createElement(dt, null)), /* @__PURE__ */ i.createElement(
+  return /* @__PURE__ */ i.createElement(x, null, /* @__PURE__ */ i.createElement(w, { variant: "outline", color: "secondary" }, s, /* @__PURE__ */ i.createElement(dt, null)), /* @__PURE__ */ i.createElement(
     W,
     {
       selectionMode: "single",
@@ -175,7 +175,7 @@ const Dt = "flow--list--items--item--view", xt = "flow--list--items--item--view-
     },
     d.render()
   )), l = t.filter((d) => d.isActive).map((d) => d.id);
-  return /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(w, { variant: "outline", color: "secondary" }, /* @__PURE__ */ i.createElement(E, null, n ?? o), /* @__PURE__ */ i.createElement(ut, null)), /* @__PURE__ */ i.createElement(
+  return /* @__PURE__ */ i.createElement(x, null, /* @__PURE__ */ i.createElement(w, { variant: "outline", color: "secondary" }, /* @__PURE__ */ i.createElement(E, null, n ?? o), /* @__PURE__ */ i.createElement(ut, null)), /* @__PURE__ */ i.createElement(
     W,
     {
       selectionMode: s === "one" ? "single" : "multiple",
@@ -247,7 +247,7 @@ const Dt = "flow--list--items--item--view", xt = "flow--list--items--item--view-
   });
 }, rs = () => {
   const a = y(v), e = g(), t = e.viewMode, s = [];
-  return e.itemView && s.push("list"), e.table && s.push("table"), s.length <= 1 ? null : /* @__PURE__ */ i.createElement(N, null, /* @__PURE__ */ i.createElement(
+  return e.itemView && s.push("list"), e.table && s.push("table"), s.length <= 1 ? null : /* @__PURE__ */ i.createElement(x, null, /* @__PURE__ */ i.createElement(
     w,
     {
       variant: "outline",
@@ -371,7 +371,7 @@ class pe {
   }
 }
 const gs = (a, e) => a === e, ps = (a) => String(a);
-class A {
+class k {
   constructor(e, t) {
     r(this, "_values");
     r(this, "_valuesFromTableState");
@@ -393,8 +393,8 @@ class A {
   }
   getStoredDefaultSelectedValues() {
     var t;
-    const e = (t = this.list.getStoredFilterDefaultSettings()) == null ? void 0 : t[this.property];
-    return e ? this.values.filter((s) => e.includes(s.value)) : void 0;
+    const e = (t = this.list.getStoredFilterDefaultSettings()) == null ? void 0 : t[String(this.property)];
+    return e ? this.values.filter((s) => e.includes(s.id)) : void 0;
   }
   updateInitialState(e) {
     const t = this.getInitialValues();
@@ -493,7 +493,7 @@ class A {
     this.onFilterUpdateCallbacks.add(e);
   }
 }
-r(A, "settingsStorageSchema", k.record(k.array(k.unknown())).optional());
+r(k, "settingsStorageSchema", V.record(V.array(V.unknown())).optional());
 class fs {
   constructor(e, t) {
     r(this, "list");
@@ -575,7 +575,7 @@ class Q {
       globalFilterFn: "auto",
       ...t
     });
-    return B(() => {
+    return M(() => {
       e && e(this.list);
     }, [this.list, e, o]), o;
   }
@@ -697,7 +697,7 @@ class Z {
     }), this.useObserveBatchData(t, e), this.useObserveBatchLoadingState(t, e);
   }
   useObserveBatchLoadingState(e, t) {
-    B(() => (this.loaderState.setBatchLoadingState(
+    M(() => (this.loaderState.setBatchLoadingState(
       t,
       e.state.value
     ), e.state.observe((s) => {
@@ -709,7 +709,7 @@ class Z {
       const { data: o, itemTotalCount: c } = n;
       this.loaderState.setDataBatch(t, o), c !== void 0 && this.list.batches.updateItemTotalCount(c);
     };
-    B(() => (e.value.value.isSet && s(e.value.value.value), e.value.observe((n) => {
+    M(() => (e.value.value.isSet && s(e.value.value.value), e.value.observe((n) => {
       n.isSet && s(n.value);
     })), [e, t]);
   }
@@ -788,7 +788,7 @@ class bs {
     this.onUpdateCallbacks.add(e);
   }
 }
-const x = class x {
+const D = class D {
   constructor(e, t = {}) {
     r(this, "list");
     r(this, "textValue");
@@ -799,11 +799,11 @@ const x = class x {
     this.list = e, this.textValue = n, this.renderFn = c, this.href = o, this.fallback = s;
   }
   render(e) {
-    return (this.renderFn ?? x.fallbackRenderItemFn)(e, this.list);
+    return (this.renderFn ?? D.fallbackRenderItemFn)(e, this.list);
   }
 };
-r(x, "fallbackRenderItemFn", (e) => Se("pre", void 0, JSON.stringify(e)));
-let q = x, vs = class {
+r(D, "fallbackRenderItemFn", (e) => Se("pre", void 0, JSON.stringify(e)));
+let q = D, vs = class {
   constructor(e, t = {}) {
     r(this, "tableHeader");
     r(this, "componentProps");
@@ -868,7 +868,7 @@ let Cs = (b = class {
     r(this, "componentProps");
     r(this, "viewMode");
     r(this, "setViewMode");
-    r(this, "defaultSettings");
+    r(this, "settingsStore");
     r(this, "supportsSettingsStorage");
     r(this, "settingStorageKey");
     r(this, "viewModeStorageKey");
@@ -884,26 +884,26 @@ let Cs = (b = class {
       loader: u,
       search: h,
       onAction: C,
-      getItemId: R,
+      getItemId: N,
       defaultViewMode: L,
-      ...$
+      ...R
     } = e;
-    this.defaultSettings = Lt(), this.settingStorageKey = t, this.filterSettingsStorageKey = t ? `${t}.activeFilters` : void 0, this.viewModeStorageKey = t ? `${t}.viewMode` : void 0, this.supportsSettingsStorage = !!this.settingStorageKey, this.items = new us(this), this.filters = o.map((p) => new A(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, {
+    this.settingsStore = Lt(), this.settingStorageKey = t, this.filterSettingsStorageKey = t ? `${t}.activeFilters` : void 0, this.viewModeStorageKey = t ? `${t}.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 = R, this.loader = Z.useNew(this, u), this.onAction = C, this.getItemId = N, this.reactTable = Q.useNew(this, d, {
       manualFiltering: this.loader.manualFiltering,
       manualPagination: this.loader.manualPagination,
       manualSorting: this.loader.manualSorting
     });
-    const [z, U] = j(
+    const [$, z] = j(
       L ?? this.getStoredViewModeDefaultSetting() ?? "list"
     );
-    this.viewMode = z, this.setViewMode = (p) => {
-      U(p), this.defaultSettings && this.viewModeStorageKey && this.defaultSettings.set(
+    this.viewMode = $, this.setViewMode = (p) => {
+      z(p), this.settingsStore && this.viewModeStorageKey && this.settingsStore.set(
         "List",
         this.viewModeStorageKey,
         b.viewModeSettingsStorageSchema,
         p
       );
-    }, B(() => {
+    }, M(() => {
       this.filters.forEach((p) => p.deleteUnknownFilterValues());
     }, [this.filters]);
   }
@@ -917,32 +917,32 @@ let Cs = (b = class {
     return new b(e);
   }
   storeFilterDefaultSettings() {
-    if (this.defaultSettings && this.filterSettingsStorageKey) {
+    if (this.settingsStore && this.filterSettingsStorageKey) {
       const e = Object.fromEntries(
         this.filters.map((t) => [
           t.property,
-          t.getArrayValue().filter((s) => s.isActive).map((s) => s.value)
+          t.getArrayValue().filter((s) => s.isActive).map((s) => s.id)
         ])
       );
-      this.defaultSettings.set(
+      this.settingsStore.set(
         "List",
         this.filterSettingsStorageKey,
-        A.settingsStorageSchema,
+        k.settingsStorageSchema,
         e
       );
     }
   }
   getStoredFilterDefaultSettings() {
-    if (this.defaultSettings && this.filterSettingsStorageKey)
-      return this.defaultSettings.get(
+    if (this.settingsStore && this.filterSettingsStorageKey)
+      return this.settingsStore.get(
         "List",
         this.filterSettingsStorageKey,
-        A.settingsStorageSchema
+        k.settingsStorageSchema
       );
   }
   getStoredViewModeDefaultSetting() {
-    if (this.defaultSettings && this.viewModeStorageKey)
-      return this.defaultSettings.get(
+    if (this.settingsStore && this.viewModeStorageKey)
+      return this.settingsStore.get(
         "List",
         this.viewModeStorageKey,
         b.viewModeSettingsStorageSchema
@@ -961,15 +961,15 @@ let Cs = (b = class {
   useIsEmpty() {
     return !this.loader.useIsLoading() && this.items.entries.length === 0;
   }
-}, r(b, "viewModeSettingsStorageSchema", k.enum(["list", "table"]).optional()), b);
+}, r(b, "viewModeSettingsStorageSchema", V.enum(["list", "table"]).optional()), b);
 const Is = "flow--list--items", Ls = "flow--list--items--is-loading", fe = {
   items: Is,
   isLoading: Ls
-}, Ps = "flow--list--items--item", Vs = "flow--list--items--item--is-selected", ks = "flow--list--items--item--has-action", M = {
+}, Ps = "flow--list--items--item", Vs = "flow--list--items--item--is-selected", ks = "flow--list--items--item--has-action", A = {
   item: Ps,
   isSelected: Vs,
   hasAction: ks
-}, Ae = () => /* @__PURE__ */ i.createElement(Pe, null, /* @__PURE__ */ i.createElement(Y, null, /* @__PURE__ */ i.createElement(D, { width: "200px" })), /* @__PURE__ */ i.createElement(E, null, /* @__PURE__ */ i.createElement(D, { width: "300px" }))), As = (a) => {
+}, Ae = () => /* @__PURE__ */ i.createElement(Pe, 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) => {
   const { id: e, data: t, children: s } = a, o = g().itemView;
   if (!o)
     return null;
@@ -979,9 +979,9 @@ const Is = "flow--list--items", Ls = "flow--list--items--is-loading", fe = {
     {
       id: e,
       className: (h) => T(
-        M.item,
-        u && M.hasAction,
-        h.isSelected && M.isSelected
+        A.item,
+        u && A.hasAction,
+        h.isSelected && A.isSelected
       ),
       onAction: () => c && c(t),
       textValue: l,
@@ -989,7 +989,7 @@ const Is = "flow--list--items", Ls = "flow--list--items--is-loading", fe = {
     },
     /* @__PURE__ */ i.createElement(Qe, { fallback: /* @__PURE__ */ i.createElement(Ae, null) }, s ?? o.render(t))
   );
-}, Ms = (a) => /* @__PURE__ */ i.createElement(_.GridListItem, { textValue: "-", className: M.item }, a.children), G = () => {
+}, Ms = (a) => /* @__PURE__ */ i.createElement(_.GridListItem, { textValue: "-", className: A.item }, a.children), G = () => {
   const a = y(v);
   return /* @__PURE__ */ i.createElement(Pt, null, /* @__PURE__ */ i.createElement(Vt, null), /* @__PURE__ */ i.createElement(Y, null, a.format("list.noResult.heading")), /* @__PURE__ */ i.createElement(E, null, a.format("list.noResult.text")));
 }, Bs = () => {
@@ -1039,7 +1039,7 @@ const Is = "flow--list--items", Ls = "flow--list--items--is-loading", fe = {
 function Re(a) {
   return null;
 }
-const Gs = () => Re, $e = (a) => null, ze = (a) => null, Ue = (a) => null, js = (a) => /* @__PURE__ */ i.createElement(Ee, { ...a }, /* @__PURE__ */ i.createElement(Fe, null, /* @__PURE__ */ i.createElement(Te, null, /* @__PURE__ */ i.createElement(D, { width: "100%" }))), /* @__PURE__ */ i.createElement(Ce, null, Array.from(Array(5)).map((e, t) => /* @__PURE__ */ i.createElement(Ie, { key: t }, /* @__PURE__ */ i.createElement(Le, null, /* @__PURE__ */ i.createElement(D, { 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 = {
+const Gs = () => Re, $e = (a) => null, ze = (a) => null, Ue = (a) => null, js = (a) => /* @__PURE__ */ i.createElement(Ee, { ...a }, /* @__PURE__ */ i.createElement(Fe, null, /* @__PURE__ */ i.createElement(Te, null, /* @__PURE__ */ i.createElement(B, { width: "100%" }))), /* @__PURE__ */ i.createElement(Ce, null, Array.from(Array(5)).map((e, t) => /* @__PURE__ */ i.createElement(Ie, { key: t }, /* @__PURE__ */ i.createElement(Le, 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 = {
   table: Ws,
   isLoading: Js,
   row: Ys,
@@ -1111,20 +1111,20 @@ const Gs = () => Re, $e = (a) => null, ze = (a) => null, Ue = (a) => null, js =
     } : d ? {
       staticData: d.data
     } : void 0
-  }, h = (ie = S(e, Re)) == null ? void 0 : ie.props, C = (ae = S(e, xe)) == null ? void 0 : ae.props, R = (ne = S(e, Ke)) == null ? void 0 : ne.props, L = V(e, $e).map(
+  }, h = (ie = S(e, Re)) == null ? void 0 : ie.props, C = (ae = S(e, xe)) == null ? void 0 : ae.props, N = (ne = S(e, Ke)) == null ? void 0 : ne.props, L = P(e, $e).map(
     (f) => ({
       ...f.props,
       name: f.props.children
     })
-  ), $ = V(e, Ue).map(
+  ), R = P(e, Ue).map(
     (f) => ({
       ...f.props,
       renderFn: f.props.children
     })
-  ), z = (re = S(e, ze)) == null ? void 0 : re.props, U = (oe = S(e, Oe)) == null ? void 0 : oe.props, p = (le = S(e, He)) == null ? void 0 : le.props, P = Cs.useNew({
+  ), $ = (re = S(e, ze)) == null ? void 0 : re.props, z = (oe = S(e, Oe)) == null ? void 0 : oe.props, p = (le = S(e, He)) == null ? void 0 : le.props, U = Cs.useNew({
     onChange: s,
     loader: u,
-    filters: V(e, Be).map(
+    filters: P(e, Be).map(
       (f) => ({
         ...f.props,
         renderItem: f.props.children
@@ -1135,24 +1135,24 @@ const Gs = () => Re, $e = (a) => null, ze = (a) => null, Ue = (a) => null, js =
       textFieldProps: h,
       defaultValue: h.defaultValue
     } : void 0,
-    sorting: V(e, De).map((f) => f.props),
+    sorting: P(e, De).map((f) => f.props),
     itemView: C ? {
       ...C,
       renderFn: C.children
     } : void 0,
     table: L.length > 0 ? {
       header: {
-        ...U,
+        ...z,
         columns: L
       },
       body: {
         ...p,
         row: {
-          ...z,
-          cells: $
+          ...$,
+          cells: R
         }
       },
-      ...R
+      ...N
     } : void 0,
     batchesController: {
       batchSize: t
@@ -1165,15 +1165,15 @@ const Gs = () => Re, $e = (a) => null, ze = (a) => null, Ue = (a) => null, js =
       ignoreBreakpoint: !0
     }
   }, Ge = !!S(e, Bt);
-  return console.log(P), /* @__PURE__ */ i.createElement(be, { props: qe }, /* @__PURE__ */ i.createElement(ve, null, /* @__PURE__ */ i.createElement(
+  return /* @__PURE__ */ i.createElement(be, { props: qe }, /* @__PURE__ */ i.createElement(ve, null, /* @__PURE__ */ i.createElement(
     Ve.Provider,
     {
       value: {
-        list: P
+        list: U
       }
     },
     /* @__PURE__ */ i.createElement(qt, null),
-    /* @__PURE__ */ i.createElement("div", { className: cs.list, ref: n }, e, /* @__PURE__ */ i.createElement(os, { hasActionGroup: Ge }), P.viewMode === "list" && /* @__PURE__ */ i.createElement(Ds, null), P.viewMode === "table" && /* @__PURE__ */ i.createElement(Xs, null), /* @__PURE__ */ i.createElement(qs, null))
+    /* @__PURE__ */ i.createElement("div", { className: cs.list, ref: n }, e, /* @__PURE__ */ i.createElement(os, { hasActionGroup: Ge }), U.viewMode === "list" && /* @__PURE__ */ i.createElement(Ds, null), U.viewMode === "table" && /* @__PURE__ */ i.createElement(Xs, null), /* @__PURE__ */ i.createElement(qs, null))
   )));
 }), ei = () => Zs, Zi = () => ({
   List: ei(),

package/dist/types/components/List/model/List.d.ts

@@ -24,7 +24,7 @@ export declare class List<T> {
     readonly componentProps: ListSupportedComponentProps;
     viewMode: ListViewMode;
     readonly setViewMode: (viewMode: ListViewMode) => void;
-    private readonly defaultSettings?;
+    private readonly settingsStore?;
     readonly supportsSettingsStorage: boolean;
     readonly settingStorageKey?: string;
     private readonly viewModeStorageKey?;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.269",
+  "version": "0.1.0-alpha.270",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -313,7 +313,7 @@
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/date": "^3.5.5",
     "@internationalized/string-compiler": "^3.2.4",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.269",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.270",
     "@mittwald/react-use-promise": "^2.5.0",
     "@react-aria/utils": "^3.25.2",
     "@react-types/shared": "^3.24.1",
@@ -340,7 +340,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.269",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.270",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^19.7.4",
     "@storybook/addon-a11y": "^8.3.2",
@@ -418,5 +418,5 @@
       "optional": true
     }
   },
-  "gitHead": "8d03e46872a3c811a5a8162aa8ab768539ee1801"
+  "gitHead": "9f10ff23bb728dce3cc617e7e0f6782f493eddff"
 }