@mittwald/flow-react-components 0.1.0-alpha.341 → 0.1.0-alpha.343

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.343](https://github.com/mittwald/flow/compare/0.1.0-alpha.342...0.1.0-alpha.343) (2024-11-12)
+
+**Note:** Version bump only for package @mittwald/flow-react-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.342](https://github.com/mittwald/flow/compare/0.1.0-alpha.341...0.1.0-alpha.342) (2024-11-12)
+
+**Note:** Version bump only for package @mittwald/flow-react-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [0.1.0-alpha.341](https://github.com/mittwald/flow/compare/0.1.0-alpha.340...0.1.0-alpha.341) (2024-11-12)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/dist/js/List.js

@@ -12,13 +12,13 @@ import { d as nt } from "./dynamic-ClpUSmEt.js";
 import { B as y } from "./Button-tKo9ydZL.js";
 import { IconArrowBackUp as rt } from "@tabler/icons-react";
 import { I as ue } from "./Icon-DGqvukLZ.js";
-import { I as lt } from "./IconContextMenu-CZgbKH5A.js";
+import { I as ot } from "./IconContextMenu-CZgbKH5A.js";
 import { a as $, C as Y } from "./ContextMenuTrigger-BbYyy0an.js";
 import { M as _ } from "./MenuItem-GX6Zh70q.js";
 import { useLocalizedStringFormatter as w } from "react-aria";
 import { TunnelProvider as ye, TunnelExit as x } from "@mittwald/react-tunnel";
 import T from "clsx";
-import { g as ot } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
+import { g as lt } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
 import { f as we } from "./flowComponent-1wOIvUIq.js";
 import { R as ct } from "./Render-BdlTa7Qb.js";
 import { T as E } from "./Text-_cq3RnbD.js";
@@ -97,10 +97,11 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
     y,
     {
       variant: "plain",
+      color: "secondary",
       className: e,
       "aria-label": s.format("list.options")
     },
-    /* @__PURE__ */ i.createElement(lt, null)
+    /* @__PURE__ */ i.createElement(ot, null)
   ), t);
 }, Gt = (a) => a === "top" ? m.topContent : a === "bottom" ? m.content : m.topContent, ke = (a) => {
   const { children: e, className: t, containerBreakpointSize: s = "m" } = a, n = {
@@ -116,7 +117,7 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
       ignoreBreakpoint: !0
     },
     Content: {
-      className: nt((o) => Gt(o.slot)),
+      className: nt((l) => Gt(l.slot)),
       tunnelId: "topContent"
     },
     Avatar: {
@@ -135,12 +136,12 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
     Link: {
       unstyled: !0
     }
-  }, l = T(
+  }, o = T(
     m.view,
     t,
-    m[ot(s)]
+    m[lt(s)]
   );
-  return /* @__PURE__ */ i.createElement("div", { className: l }, /* @__PURE__ */ i.createElement(ve, { props: n }, /* @__PURE__ */ i.createElement(ye, null, e, /* @__PURE__ */ i.createElement("div", { className: m.title }, /* @__PURE__ */ i.createElement(x, { id: "title" })), /* @__PURE__ */ i.createElement(x, { id: "topContent" }))));
+  return /* @__PURE__ */ i.createElement("div", { className: o }, /* @__PURE__ */ i.createElement(ve, { props: n }, /* @__PURE__ */ i.createElement(ye, null, e, /* @__PURE__ */ i.createElement("div", { className: m.title }, /* @__PURE__ */ i.createElement(x, { id: "title" })), /* @__PURE__ */ i.createElement(x, { id: "topContent" }))));
 }, jt = "flow--list--list-summary", Wt = {
   listSummary: jt
 }, Qi = we("ListSummary", (a) => {
@@ -171,7 +172,7 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
     e
   ));
 }, Qt = (a) => {
-  const { filter: e } = a, { values: t, mode: s, name: n, property: l } = e, o = t.map((c) => /* @__PURE__ */ i.createElement(
+  const { filter: e } = a, { values: t, mode: s, name: n, property: o } = e, l = t.map((c) => /* @__PURE__ */ i.createElement(
     _,
     {
       id: c.id,
@@ -182,13 +183,13 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
     },
     c.render()
   )), d = t.filter((c) => c.isActive).map((c) => c.id);
-  return /* @__PURE__ */ i.createElement($, null, /* @__PURE__ */ i.createElement(y, { variant: "outline", color: "secondary" }, /* @__PURE__ */ i.createElement(E, null, n ?? l), /* @__PURE__ */ i.createElement(ut, null)), /* @__PURE__ */ i.createElement(
+  return /* @__PURE__ */ i.createElement($, null, /* @__PURE__ */ i.createElement(y, { variant: "outline", color: "secondary" }, /* @__PURE__ */ i.createElement(E, null, n ?? o), /* @__PURE__ */ i.createElement(ut, null)), /* @__PURE__ */ i.createElement(
     Y,
     {
       selectionMode: s === "one" ? "single" : "multiple",
       selectedKeys: d
     },
-    o
+    l
   ));
 }, Xt = "flow--list--header", Zt = "flow--list--header--picker-list-and-search", es = "flow--list--header--picker-list", ts = "flow--list--header--search-and-actions", ss = "flow--list--header--search-field", is = "flow--list--header--actions", F = {
   header: Xt,
@@ -200,8 +201,8 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
 }, as = "flow--list--header--active-filters", ns = "flow--list--header--active-filters--clear-button", rs = {
   activeFilters: as,
   clearButton: ns
-}, ls = pt(() => {
-  const a = g(), e = w(S), s = a.filters.flatMap((c) => c.values).filter((c) => c.isActive).map((c) => /* @__PURE__ */ i.createElement(ft, { key: c.id, onClose: () => c.deactivate() }, /* @__PURE__ */ i.createElement(E, null, c.render()))), n = a.filters.filter((c) => c.hasChanged()).length > 0, l = a.supportsSettingsStorage && n && /* @__PURE__ */ i.createElement(H, null, /* @__PURE__ */ i.createElement(q, null, /* @__PURE__ */ i.createElement(A, { locales: S }, "list.filters.store")), /* @__PURE__ */ i.createElement(
+}, os = pt(() => {
+  const a = g(), e = w(S), s = a.filters.flatMap((c) => c.values).filter((c) => c.isActive).map((c) => /* @__PURE__ */ i.createElement(ft, { key: c.id, onClose: () => c.deactivate() }, /* @__PURE__ */ i.createElement(E, null, c.render()))), n = a.filters.filter((c) => c.hasChanged()).length > 0, o = a.supportsSettingsStorage && n && /* @__PURE__ */ i.createElement(H, null, /* @__PURE__ */ i.createElement(q, null, /* @__PURE__ */ i.createElement(A, { locales: S }, "list.filters.store")), /* @__PURE__ */ i.createElement(
     y,
     {
       size: "s",
@@ -211,7 +212,7 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
       "aria-label": e.format("list.filters.store")
     },
     /* @__PURE__ */ i.createElement(mt, null)
-  )), o = n ? /* @__PURE__ */ i.createElement(H, null, /* @__PURE__ */ i.createElement(q, null, /* @__PURE__ */ i.createElement(A, { locales: S }, "list.filters.reset")), /* @__PURE__ */ i.createElement(
+  )), l = n ? /* @__PURE__ */ i.createElement(H, null, /* @__PURE__ */ i.createElement(q, null, /* @__PURE__ */ i.createElement(A, { locales: S }, "list.filters.reset")), /* @__PURE__ */ i.createElement(
     y,
     {
       size: "s",
@@ -231,30 +232,30 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
     },
     /* @__PURE__ */ i.createElement(ue, null, /* @__PURE__ */ i.createElement(ht, null))
   )) : void 0;
-  return s.length === 0 && !l && !o ? null : /* @__PURE__ */ i.createElement("div", { className: rs.activeFilters }, s, l, o, d);
-}), os = (a) => {
-  const { className: e, onChange: t, value: s, ...n } = a, [l, o] = J(s ?? "");
+  return s.length === 0 && !o && !l ? null : /* @__PURE__ */ i.createElement("div", { className: rs.activeFilters }, s, o, l, d);
+}), ls = (a) => {
+  const { className: e, onChange: t, value: s, ...n } = a, [o, l] = J(s ?? "");
   bt(s, () => {
-    o(s ?? "");
-  }, [l]);
+    l(s ?? "");
+  }, [o]);
   const d = () => {
-    t(void 0), o("");
+    t(void 0), l("");
   }, c = (u) => {
-    u.key === "Enter" ? l.trim() === "" ? t(void 0) : t(l) : u.key === "Escape" && d();
+    u.key === "Enter" ? o.trim() === "" ? t(void 0) : t(o) : u.key === "Escape" && d();
   };
   return /* @__PURE__ */ i.createElement(
     vt,
     {
       className: e,
-      value: l,
+      value: o,
       onKeyUp: c,
-      onChange: (u) => o(u),
+      onChange: (u) => l(u),
       onClear: d,
       ...n
     }
   );
 }, cs = (a) => {
-  const { className: e, search: t } = a, s = t.render ?? os;
+  const { className: e, search: t } = a, s = t.render ?? ls;
   return be(s, {
     className: e,
     value: t.value,
@@ -287,8 +288,8 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
   const { className: e, hasActionGroup: t } = a, s = g();
   if (s.filters.length === 0 && s.visibleSorting.length === 0 && !s.search && !s.table && !t)
     return null;
-  const n = s.filters.map((l) => /* @__PURE__ */ i.createElement(Qt, { key: l.property, filter: l }));
-  return /* @__PURE__ */ i.createElement("div", { className: T(e, F.header) }, /* @__PURE__ */ i.createElement("div", { className: F.pickerListAndSearch }, /* @__PURE__ */ i.createElement("div", { className: F.pickerList }, /* @__PURE__ */ i.createElement(ds, null), /* @__PURE__ */ i.createElement(_t, null), n), /* @__PURE__ */ i.createElement("div", { className: F.searchAndActions }, s.search && /* @__PURE__ */ i.createElement(cs, { className: F.searchField, search: s.search }), /* @__PURE__ */ i.createElement(x, { id: "actions" }))), /* @__PURE__ */ i.createElement(ls, null));
+  const n = s.filters.map((o) => /* @__PURE__ */ i.createElement(Qt, { key: o.property, filter: o }));
+  return /* @__PURE__ */ i.createElement("div", { className: T(e, F.header) }, /* @__PURE__ */ i.createElement("div", { className: F.pickerListAndSearch }, /* @__PURE__ */ i.createElement("div", { className: F.pickerList }, /* @__PURE__ */ i.createElement(ds, null), /* @__PURE__ */ i.createElement(_t, null), n), /* @__PURE__ */ i.createElement("div", { className: F.searchAndActions }, s.search && /* @__PURE__ */ i.createElement(cs, { className: F.searchField, search: s.search }), /* @__PURE__ */ i.createElement(x, { id: "actions" }))), /* @__PURE__ */ i.createElement(os, null));
 }, ms = "flow--list", hs = {
   list: ms
 };
@@ -318,7 +319,7 @@ class fs {
     r(this, "list");
     var n;
     const { batchSize: s = 20 } = t;
-    this.list = e, this.batchSize = s, e.filters.forEach((l) => l.onFilterUpdated(() => this.reset())), (n = e.search) == null || n.onUpdated(() => this.reset());
+    this.list = e, this.batchSize = s, e.filters.forEach((o) => o.onFilterUpdated(() => this.reset())), (n = e.search) == null || n.onUpdated(() => this.reset());
   }
   get reactTable() {
     return this.list.reactTable.table;
@@ -402,8 +403,8 @@ class M {
     var s;
     this.list = e, this.property = t.property, this.mode = t.mode ?? "one", this._values = (s = t.values) == null ? void 0 : s.map((n) => new fe(this, n)), this.matcher = t.matcher ?? bs, this.renderItem = t.renderItem ?? vs, this.name = t.name, this.defaultSelectedValues = t.defaultSelected ? this.values.filter(
       (n) => {
-        var l;
-        return (l = t.defaultSelected) == null ? void 0 : l.some((o) => o === n.value);
+        var o;
+        return (o = t.defaultSelected) == null ? void 0 : o.some((l) => l === n.value);
       }
     ) : void 0;
   }
@@ -427,19 +428,19 @@ class M {
   }
   getReactTableFilterFn() {
     return (e, t, s) => {
-      const n = this.property, l = n.startsWith(Ss) ? e.original : wt(e.original, n);
-      return this.checkFilterMatches(l, s);
+      const n = this.property, o = n.startsWith(Ss) ? e.original : wt(e.original, n);
+      return this.checkFilterMatches(o, s);
     };
   }
   checkFilterMatches(e, t) {
     if (t === null)
       return !0;
-    const s = (l) => Array.isArray(l) ? l : [l], n = (l) => this.matcher(l.value, e);
+    const s = (o) => Array.isArray(o) ? o : [o], n = (o) => this.matcher(o.value, e);
     if (this.mode === "all")
       return s(t).every(n);
     if (this.mode === "some") {
-      const l = s(t);
-      return l.length === 0 || l.some(n);
+      const o = s(t);
+      return o.length === 0 || o.some(n);
     } else if (this.mode === "one")
       return n(t);
     throw new Error(`Unknown filter mode '${this.mode}'`);
@@ -556,16 +557,16 @@ class Z {
     this.list = e;
     const n = this.list.sorting.filter(
       (d) => d.defaultEnabled !== !1
-    ), [l, o] = J(
+    ), [o, l] = J(
       n.map((d) => d.getReactTableColumnSort())
     );
-    this.sortingState = l, this.updateSortingState = o, this.table = this.useReactTable(t, s);
+    this.sortingState = o, this.updateSortingState = l, this.table = this.useReactTable(t, s);
   }
   static useNew(e, t, s = {}) {
     return new Z(e, t, s);
   }
   useReactTable(e, t = {}) {
-    var o;
+    var l;
     const s = this.list.loader.useData(), n = {
       pagination: {
         pageSize: this.list.batches.batchSize
@@ -574,8 +575,8 @@ class Z {
     };
     for (const d of this.list.filters)
       d.updateInitialState(n);
-    (o = this.list.search) == null || o.updateInitialState(n);
-    const l = Et({
+    (l = this.list.search) == null || l.updateInitialState(n);
+    const o = Et({
       data: s,
       state: {
         sorting: this.sortingState
@@ -596,11 +597,11 @@ class Z {
     });
     return D(() => {
       e && e(this.list);
-    }, [this.list, e, l]), l;
+    }, [this.list, e, o]), o;
   }
   handleSortingStateUpdate(e) {
     const t = typeof e == "function" ? e(this.sortingState) : e, s = this.list.sorting.filter(
-      (n) => n.defaultEnabled === "hidden" && !t.some((l) => l.id === n.property)
+      (n) => n.defaultEnabled === "hidden" && !t.some((o) => o.id === n.property)
     ).map((n) => n.getReactTableColumnSort());
     this.updateSortingState([...s, ...t]);
   }
@@ -616,13 +617,13 @@ class Z {
       const n = e.get(s);
       if (n)
         return n;
-      const l = {
+      const o = {
         id: s,
         accessorKey: s,
         enableSorting: !1,
         enableColumnFilter: !1
       };
-      return e.set(s, l), l;
+      return e.set(s, o), o;
     };
     return this.list.filters.forEach(
       (s) => s.updateTableColumnDef(t(s.property))
@@ -686,8 +687,8 @@ class te {
     var d;
     const { source: s } = t;
     this.dataSource = s ?? { staticData: ws };
-    const n = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, l = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, o = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
-    this.list = e, this.loaderState = ee.useNew(), this.manualPagination = n ?? !1, this.manualFiltering = l ?? this.manualPagination, this.manualSorting = o ?? this.manualPagination, this.list.filters.forEach((c) => c.onFilterUpdated(() => this.reset())), (d = this.list.search) == null || d.onUpdated(() => this.reset());
+    const n = "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;
+    this.list = e, this.loaderState = ee.useNew(), this.manualPagination = n ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((c) => c.onFilterUpdated(() => this.reset())), (d = this.list.search) == null || d.onUpdated(() => this.reset());
   }
   static useNew(e, t = {}) {
     return new te(e, t);
@@ -725,8 +726,8 @@ class te {
   }
   useObserveBatchData(e, t) {
     const s = (n) => {
-      const { data: l, itemTotalCount: o } = n;
-      this.loaderState.setDataBatch(t, l), o !== void 0 && this.list.batches.updateItemTotalCount(o);
+      const { data: o, itemTotalCount: l } = n;
+      this.loaderState.setDataBatch(t, o), l !== void 0 && this.list.batches.updateItemTotalCount(l);
     };
     D(() => (e.value.value.isSet && s(e.value.value.value), e.value.observe((n) => {
       n.isSet && s(n.value);
@@ -764,9 +765,9 @@ class te {
         [t.staticData]
       );
     if ("asyncLoader" in t) {
-      const n = t.asyncLoader, l = t.dependencies, o = l ? Ee(l).toString() : void 0;
+      const n = t.asyncLoader, o = t.dependencies, l = o ? Ee(o).toString() : void 0;
       return ge(n, [s], {
-        loaderId: o
+        loaderId: l
       });
     }
     if ("asyncResourceFactory" in t) {
@@ -814,8 +815,8 @@ const R = class R {
     r(this, "href");
     r(this, "fallback");
     r(this, "renderFn");
-    const { fallback: s, textValue: n, href: l, renderFn: o } = t;
-    this.list = e, this.textValue = n, this.renderFn = o, this.href = l, this.fallback = s;
+    const { fallback: s, textValue: n, href: o, renderFn: l } = t;
+    this.list = e, this.textValue = n, this.renderFn = l, this.href = o, this.fallback = s;
   }
   render(e) {
     return (this.renderFn ?? R.fallbackRenderItemFn)(e, this.list);
@@ -834,7 +835,7 @@ let j = R, Fs = class {
     r(this, "componentProps");
     r(this, "columns");
     const { columns: s = [], ...n } = t;
-    this.table = e, this.columns = s.map((l) => new Fs(this, l)), this.componentProps = n;
+    this.table = e, this.columns = s.map((o) => new Fs(this, o)), this.componentProps = n;
   }
 }, Cs = class {
   constructor(e, t = {}) {
@@ -850,7 +851,7 @@ let j = R, Fs = class {
     r(this, "cells");
     r(this, "componentProps");
     const { cells: s = [], ...n } = t;
-    this.tableBody = e, this.cells = s.map((l) => new Cs(this, l)), this.componentProps = n;
+    this.tableBody = e, this.cells = s.map((o) => new Cs(this, o)), this.componentProps = n;
   }
 }, Ls = class {
   constructor(e, t = {}) {
@@ -866,8 +867,8 @@ let j = R, Fs = class {
     r(this, "header");
     r(this, "body");
     r(this, "componentProps");
-    const { header: s, body: n, ...l } = t;
-    this.list = e, this.header = new Ts(this, s), this.body = new Ls(this, n), this.componentProps = l;
+    const { header: s, body: n, ...o } = t;
+    this.list = e, this.header = new Ts(this, s), this.body = new Ls(this, n), this.componentProps = o;
   }
 };
 var v;
@@ -896,8 +897,8 @@ let Vs = (v = class {
       settingStorageKey: t,
       itemView: s,
       table: n,
-      filters: l = [],
-      sorting: o = [],
+      filters: o = [],
+      sorting: l = [],
       batchesController: d,
       onChange: c,
       loader: u,
@@ -907,7 +908,7 @@ let Vs = (v = class {
       defaultViewMode: L,
       ...U
     } = e;
-    this.settingsStore = Pt(), this.settingStorageKey = t, this.filterSettingsStorageKey = t ? `${t}.activeFilters` : void 0, this.viewModeStorageKey = t ? `${t}.viewMode` : void 0, this.supportsSettingsStorage = !!this.settingStorageKey, this.items = new ps(this), this.filters = l.map((p) => new M(this, p)), this.sorting = o.map((p) => new ys(this, p)), this.search = h ? new Es(this, h) : void 0, this.itemView = s ? new j(this, s) : void 0, this.table = n ? new Ps(this, n) : void 0, this.batches = new fs(this, d), this.componentProps = U, this.loader = te.useNew(this, u), this.onAction = C, this.getItemId = z, this.reactTable = Z.useNew(this, c, {
+    this.settingsStore = Pt(), this.settingStorageKey = t, this.filterSettingsStorageKey = t ? `${t}.activeFilters` : void 0, this.viewModeStorageKey = t ? `${t}.viewMode` : void 0, this.supportsSettingsStorage = !!this.settingStorageKey, this.items = new ps(this), this.filters = o.map((p) => new M(this, p)), this.sorting = l.map((p) => new ys(this, p)), this.search = h ? new Es(this, h) : void 0, this.itemView = s ? new j(this, s) : void 0, this.table = n ? new Ps(this, n) : void 0, this.batches = new fs(this, d), this.componentProps = U, this.loader = te.useNew(this, u), this.onAction = C, this.getItemId = z, this.reactTable = Z.useNew(this, c, {
       manualFiltering: this.loader.manualFiltering,
       manualPagination: this.loader.manualPagination,
       manualSorting: this.loader.manualSorting
@@ -992,10 +993,10 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
   isSelected: Bs,
   hasAction: Ds
 }, Be = () => /* @__PURE__ */ i.createElement(ke, null, /* @__PURE__ */ i.createElement(Q, null, /* @__PURE__ */ i.createElement(N, { width: "200px" })), /* @__PURE__ */ i.createElement(E, null, /* @__PURE__ */ i.createElement(N, { width: "300px" }))), xs = (a) => {
-  const { id: e, data: t, children: s } = a, l = g().itemView;
-  if (!l)
+  const { id: e, data: t, children: s } = a, o = g().itemView;
+  if (!o)
     return null;
-  const o = l.list.onAction, d = l.textValue ? l.textValue(t) : void 0, c = l.href ? l.href(t) : void 0, u = !!o || !!c;
+  const l = o.list.onAction, d = o.textValue ? o.textValue(t) : void 0, c = o.href ? o.href(t) : void 0, u = !!l || !!c;
   return /* @__PURE__ */ i.createElement(
     X.GridListItem,
     {
@@ -1005,11 +1006,11 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
         u && B.hasAction,
         h.isSelected && B.isSelected
       ),
-      onAction: () => o && o(t),
+      onAction: () => l && l(t),
       textValue: d,
       href: c
     },
-    /* @__PURE__ */ i.createElement(Ze, { fallback: /* @__PURE__ */ i.createElement(Be, null) }, s ?? l.render(t))
+    /* @__PURE__ */ i.createElement(Ze, { fallback: /* @__PURE__ */ i.createElement(Be, null) }, s ?? o.render(t))
   );
 }, Ns = (a) => /* @__PURE__ */ i.createElement(X.GridListItem, { textValue: "-", className: B.item }, a.children), W = () => {
   const a = w(S);
@@ -1022,7 +1023,7 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
   const a = g(), e = a.loader.useIsLoading(), t = a.loader.useIsInitiallyLoading();
   if (!a.itemView)
     return null;
-  const s = a.items.entries.map((l) => /* @__PURE__ */ i.createElement(xs, { key: l.id, data: l.data, id: l.id })), n = T(Se.items, e && Se.isLoading);
+  const s = a.items.entries.map((o) => /* @__PURE__ */ i.createElement(xs, { key: o.id, data: o.data, id: o.id })), n = T(Se.items, e && Se.isLoading);
   return /* @__PURE__ */ i.createElement("div", { "aria-hidden": t, "aria-busy": e }, /* @__PURE__ */ i.createElement(
     X.GridList,
     {
@@ -1035,12 +1036,12 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
 }, De = (a) => null, zs = () => De, xe = (a) => null, Us = () => xe, Ne = (a) => null, Ks = () => Ne, Re = (a) => null, Os = () => Re, $e = (a) => null, Hs = () => $e, qs = "flow--list--footer", Gs = {
   footer: qs
 }, js = (a) => {
-  const e = w(S), t = g(), s = t.batches, n = t.loader.useIsInitiallyLoading(), l = t.useIsEmpty(), o = s.getTotalItemsCount(), d = s.getVisibleItemsCount();
-  if (l)
+  const e = w(S), t = g(), s = t.batches, n = t.loader.useIsInitiallyLoading(), o = t.useIsEmpty(), l = s.getTotalItemsCount(), d = s.getVisibleItemsCount();
+  if (o)
     return null;
   const c = n ? /* @__PURE__ */ i.createElement(Dt, { width: "200px" }) : e.format("list.paginationInfo", {
     visibleItemsCount: d,
-    totalItemsCount: o
+    totalItemsCount: l
   });
   return /* @__PURE__ */ i.createElement(E, { ...a }, c);
 }, Ws = (a) => {
@@ -1075,7 +1076,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
     return /* @__PURE__ */ i.createElement(_s, { ...e.componentProps });
   if (t)
     return /* @__PURE__ */ i.createElement(W, null);
-  const l = e.list.onAction, o = T(
+  const o = e.list.onAction, l = T(
     I.table,
     s && I.isLoading,
     e.componentProps.className
@@ -1085,7 +1086,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
     {
       ...a.componentProps,
       ...e.componentProps,
-      className: o
+      className: l
     },
     /* @__PURE__ */ i.createElement(Ce, { ...e.header.componentProps }, e.header.columns.map((d, c) => /* @__PURE__ */ i.createElement(Ie, { key: c, ...d.componentProps }))),
     /* @__PURE__ */ i.createElement(
@@ -1101,13 +1102,13 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
           {
             className: (u) => T(
               I.row,
-              l && I.hasAction,
+              o && I.hasAction,
               e.body.row.componentProps.className,
               u.isSelected && I.isSelected
             ),
             key: d.id,
             id: d.id,
-            onAction: l ? () => l(d.data) : void 0,
+            onAction: o ? () => o(d.data) : void 0,
             ...e.body.row.componentProps
           },
           (c = e.body.row) == null ? void 0 : c.cells.map((u, h) => /* @__PURE__ */ i.createElement(Ve, { key: h, ...u.componentProps }, u.renderFn ? u.renderFn(d.data, a) : void 0))
@@ -1116,24 +1117,24 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
     )
   );
 }, He = (a) => null, qe = (a) => null, Ge = (a) => null, ii = we("List", (a) => {
-  var se, ie, ae, ne, re, le, oe, ce, de;
-  const { children: e, batchSize: t, onChange: s, refProp: n, ...l } = a, o = (se = b(
+  var se, ie, ae, ne, re, oe, le, ce, de;
+  const { children: e, batchSize: t, onChange: s, refProp: n, ...o } = a, l = (se = b(
     e,
     De
   )) == null ? void 0 : se.props, d = (ie = b(
     e,
     Mt
   )) == null ? void 0 : ie.props, c = (ae = b(e, $e)) == null ? void 0 : ae.props, u = {
-    source: o ? {
-      ...o,
-      asyncLoader: o.children
+    source: l ? {
+      ...l,
+      asyncLoader: l.children
     } : d ? {
       ...d,
       asyncResourceFactory: d.children
     } : c ? {
       staticData: c.data
     } : void 0
-  }, h = (ne = b(e, ze)) == null ? void 0 : ne.props, C = (re = b(e, Re)) == null ? void 0 : re.props, z = (le = b(e, He)) == null ? void 0 : le.props, L = V(e, Ue).map(
+  }, h = (ne = b(e, ze)) == null ? void 0 : ne.props, C = (re = b(e, Re)) == null ? void 0 : re.props, z = (oe = b(e, He)) == null ? void 0 : oe.props, L = V(e, Ue).map(
     (f) => ({
       ...f.props,
       name: f.props.children
@@ -1143,7 +1144,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
       ...f.props,
       renderFn: f.props.children
     })
-  ), K = (oe = b(e, Ke)) == null ? void 0 : oe.props, O = (ce = b(e, qe)) == null ? void 0 : ce.props, p = (de = b(e, Ge)) == null ? void 0 : de.props, P = Vs.useNew({
+  ), K = (le = b(e, Ke)) == null ? void 0 : le.props, O = (ce = b(e, qe)) == null ? void 0 : ce.props, p = (de = b(e, Ge)) == null ? void 0 : de.props, P = Vs.useNew({
     onChange: s,
     loader: u,
     filters: V(e, xe).map(
@@ -1179,7 +1180,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
     batchesController: {
       batchSize: t
     },
-    ...l
+    ...o
   }), je = {
     ActionGroup: {
       className: F.actions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.341",
+  "version": "0.1.0-alpha.343",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -405,7 +405,7 @@
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/date": "^3.5.6",
     "@internationalized/string-compiler": "^3.2.5",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.341",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.343",
     "@mittwald/react-use-promise": "^2.5.0",
     "@react-aria/form": "^3.0.10",
     "@react-aria/utils": "^3.25.3",
@@ -435,7 +435,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.3",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.341",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.343",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^20.0.0",
     "@storybook/addon-a11y": "^8.3.5",
@@ -530,5 +530,5 @@
       }
     }
   },
-  "gitHead": "a46f4167187edb67b5761f91c60bcc1503a7698f"
+  "gitHead": "9d4cfee340e4132a7b79a6abc635a763983362a0"
 }