@mittwald/flow-react-components 0.1.0-alpha.153 → 0.1.0-alpha.155

package/dist/List.js

@@ -5,10 +5,10 @@ var tt = (s, t, e) => t in s ? _(s, t, { enumerable: !0, configurable: !0, writa
 var o = (s, t, e) => tt(s, typeof t != "symbol" ? t + "" : t, e);
 import n, { createContext as et, useContext as at, createElement as st, useEffect as F, useRef as nt, Suspense as it } from "react";
 import { R as rt } from "./Render-BdlTa7Qb.js";
-import { a as w, C as K } from "./ContextMenuTrigger-DXPJlFQQ.js";
-import { M as j } from "./MenuItem-CCEquV9i.js";
+import { a as w, C as j } from "./ContextMenuTrigger-DXPJlFQQ.js";
+import { M as J } from "./MenuItem-CCEquV9i.js";
 import "react-aria-components";
-import { autorun as ot, runInAction as lt, makeObservable as ct, observable as M, computed as V, action as I } from "mobx";
+import { autorun as ot, runInAction as lt, makeObservable as ct, observable as V, computed as x, action as I } from "mobx";
 import "./context-BB3_MApL.js";
 import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
@@ -17,35 +17,35 @@ import { getProperty as mt } from "dot-prop";
 import { T as y } from "./Text-BgxTAtk1.js";
 import "@tabler/icons-react";
 import "./Icon-CvhSELPq.js";
-import { I as J } from "./IconChevronDown-BjpRbARt.js";
-import { B as g } from "./Button-Bs4J6es6.js";
+import { I as W } from "./IconChevronDown-BjpRbARt.js";
+import { B as p } from "./Button-Bs4J6es6.js";
 import { useLocalizedStringFormatter as v } from "react-aria";
-import W from "clsx";
+import B from "clsx";
 import { I as dt } from "./IconClose-DVwhXp3R.js";
 import { useReactTable as ht, getCoreRowModel as gt, getSortedRowModel as pt, getFilteredRowModel as ft, getPaginationRowModel as bt, getFacetedUniqueValues as St } from "@tanstack/react-table";
 import Y from "invariant";
 import { useLocalObservable as yt } from "mobx-react-lite";
-import { getAsyncResource as x } from "@mittwald/react-use-promise";
-import { u as z } from "./useSelector-DpU7_HMO.js";
+import { getAsyncResource as z } from "@mittwald/react-use-promise";
+import { u as $ } from "./useSelector-DpU7_HMO.js";
 import { I as vt } from "./IllustratedMessage-DadLfPs9.js";
-import { I as Et } from "./IconSearch-DAPXXri4.js";
-import { H as Ct } from "./Heading-ob3LPLN8.js";
+import { I as Ct } from "./IconSearch-DAPXXri4.js";
+import { H as Et } from "./Heading-ob3LPLN8.js";
 import { S as G } from "./Skeleton-CKLaTmDR.js";
 import { P as It } from "./PropsContextProvider-C6Z4XGp6.js";
 import { d as Ft } from "./dynamic-ClpUSmEt.js";
 import { I as Lt } from "./IconContextMenu-B7agrmqo.js";
-import { TunnelProvider as Tt, TunnelExit as $ } from "@mittwald/react-tunnel";
+import { TunnelProvider as Tt, TunnelExit as O } from "@mittwald/react-tunnel";
 import { L as wt } from "./Link-Bal042NI.js";
-import { d as C, a as O } from "./deepFindOfType-6pG0fH7S.js";
+import { d as E, a as U } from "./deepFindOfType-6pG0fH7S.js";
 import { ListLoaderAsyncResource as Bt } from "./List/ListLoaderAsyncResource.js";
 import { I as At } from "./InlineCode-BT-PKxVv.js";
 import "react-children-utilities";
-const Q = et({}), h = () => at(Q).list, kt = () => h().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(rt, { key: e }, () => {
+const Q = et({}), g = () => at(Q).list, kt = () => g().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(rt, { key: e }, () => {
   t();
 })), Dt = (s) => {
   const { sorting: t } = s;
-  return /* @__PURE__ */ n.createElement(j, { id: t.getTableColumn().id }, t.name);
-}, d = { "de-DE": {
+  return /* @__PURE__ */ n.createElement(J, { id: t.getTableColumn().id }, t.name);
+}, h = { "de-DE": {
   "list.noResult.heading": "Keine Suchergebnisse gefunden",
   "list.noResult.text": "Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.",
   "list.options": "Optionen",
@@ -68,22 +68,22 @@ const Q = et({}), h = () => at(Q).list, kt = () => h().loader.getLoaderInvocatio
 } }, L = (s) => {
   const { children: t, locales: e, variables: a } = s;
   return v(e).format(t, a);
-}, Pt = () => {
-  const s = h(), t = s.sorting.map((i) => /* @__PURE__ */ n.createElement(Dt, { sorting: i, key: i.getTableColumn().id }));
+}, Nt = () => {
+  const s = g(), t = s.sorting.map((i) => /* @__PURE__ */ n.createElement(Dt, { sorting: i, key: i.getTableColumn().id }));
   if (s.sorting.length === 0)
     return null;
   const e = s.sorting.find((i) => i.isSorted()), a = /* @__PURE__ */ n.createElement(y, null, e ? /* @__PURE__ */ n.createElement(
     L,
     {
-      locales: d,
+      locales: h,
       variables: {
         property: e.name ?? e.property
       }
     },
     "list.setSorting"
-  ) : /* @__PURE__ */ n.createElement(L, { locales: d }, "list.sorting"));
-  return /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(g, { variant: "soft", size: "s", color: "secondary" }, a, /* @__PURE__ */ n.createElement(J, null)), /* @__PURE__ */ n.createElement(
-    K,
+  ) : /* @__PURE__ */ n.createElement(L, { locales: h }, "list.sorting"));
+  return /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(p, { variant: "soft", size: "s", color: "secondary" }, a, /* @__PURE__ */ n.createElement(W, null)), /* @__PURE__ */ n.createElement(
+    j,
     {
       selectionMode: "single",
       selectedKeys: e ? [e.property] : [],
@@ -93,12 +93,12 @@ const Q = et({}), h = () => at(Q).list, kt = () => h().loader.getLoaderInvocatio
     },
     t
   ));
-}, Nt = (s) => {
-  const { filter: t } = s, e = t.values.map((r) => /* @__PURE__ */ n.createElement(j, { key: t.getValueId(r), id: String(r) }, String(r))), a = t.values.filter((r) => t.isValueActive(r)).map((r) => String(r)), i = (r) => {
+}, Pt = (s) => {
+  const { filter: t } = s, e = t.values.map((r) => /* @__PURE__ */ n.createElement(J, { key: t.getValueId(r), id: String(r) }, String(r))), a = t.values.filter((r) => t.isValueActive(r)).map((r) => String(r)), i = (r) => {
     t.toggleValue(r);
   };
-  return /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(g, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ n.createElement(y, null, t.name ?? t.property), /* @__PURE__ */ n.createElement(J, null)), /* @__PURE__ */ n.createElement(
-    K,
+  return /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(p, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ n.createElement(y, null, t.name ?? t.property), /* @__PURE__ */ n.createElement(W, null)), /* @__PURE__ */ n.createElement(
+    j,
     {
       onAction: i,
       selectionMode: "multiple",
@@ -106,16 +106,16 @@ const Q = et({}), h = () => at(Q).list, kt = () => h().loader.getLoaderInvocatio
     },
     e
   ));
-}, Rt = "flow--list--header", Mt = "flow--list--header--picker-list", U = {
+}, Rt = "flow--list--header", Mt = "flow--list--header--picker-list", H = {
   header: Rt,
   pickerList: Mt
-}, Vt = "flow--list--header--active-filters", xt = "flow--list--header--clear-button", H = {
+}, Vt = "flow--list--header--active-filters", xt = "flow--list--header--clear-button", q = {
   activeFilters: Vt,
   clearButton: xt
 }, zt = () => {
-  const s = h(), t = s.filters.flatMap(
+  const s = g(), t = s.filters.flatMap(
     (e) => e.values.filter((a) => e.isValueActive(a)).map((a) => /* @__PURE__ */ n.createElement(
-      g,
+      p,
       {
         variant: "soft",
         size: "s",
@@ -126,19 +126,19 @@ const Q = et({}), h = () => at(Q).list, kt = () => h().loader.getLoaderInvocatio
       /* @__PURE__ */ n.createElement(dt, null)
     ))
   );
-  return t.length <= 0 ? null : /* @__PURE__ */ n.createElement("div", { className: H.activeFilters }, t, /* @__PURE__ */ n.createElement(
-    g,
+  return t.length <= 0 ? null : /* @__PURE__ */ n.createElement("div", { className: q.activeFilters }, t, /* @__PURE__ */ n.createElement(
+    p,
     {
-      className: H.clearButton,
+      className: q.clearButton,
       size: "s",
       variant: "plain",
       onPress: () => s.clearFilters()
     },
-    /* @__PURE__ */ n.createElement(L, { locales: d }, "list.resetAll")
+    /* @__PURE__ */ n.createElement(L, { locales: h }, "list.resetAll")
   ));
 }, $t = (s) => {
-  const { className: t } = s, a = h().filters.map((i) => /* @__PURE__ */ n.createElement(Nt, { key: i.property, filter: i }));
-  return /* @__PURE__ */ n.createElement("div", { className: W(t, U.header) }, /* @__PURE__ */ n.createElement("div", { className: U.pickerList }, /* @__PURE__ */ n.createElement(Pt, null), a), /* @__PURE__ */ n.createElement(zt, null));
+  const { className: t } = s, a = g().filters.map((i) => /* @__PURE__ */ n.createElement(Pt, { key: i.property, filter: i }));
+  return /* @__PURE__ */ n.createElement("div", { className: B(t, H.header) }, /* @__PURE__ */ n.createElement("div", { className: H.pickerList }, /* @__PURE__ */ n.createElement(Nt, null), a), /* @__PURE__ */ n.createElement(zt, null));
 }, Ot = "flow--list", Ut = {
   list: Ot
 }, S = class S {
@@ -157,13 +157,13 @@ const Q = et({}), h = () => at(Q).list, kt = () => h().loader.getLoaderInvocatio
 };
 o(S, "fallbackRenderItemFn", (t) => st("pre", void 0, JSON.stringify(t)));
 let T = S;
-class B {
+class A {
   constructor(t) {
     o(this, "list");
     this.list = t;
   }
   static useNew(t) {
-    return new B(t);
+    return new A(t);
   }
   get entries() {
     return this.list.reactTable.table.getRowModel().rows.map((t) => T.fromRow(this, t));
@@ -327,7 +327,7 @@ class jt {
   }
 }
 const Jt = (s) => F(ot(s));
-class A {
+class k {
   constructor(t, e = {}) {
     o(this, "list");
     o(this, "table");
@@ -344,7 +344,7 @@ class A {
     this.list = t, this.tableState = yt(() => ({ value: void 0 })), this.table = this.useReactTable(e);
   }
   static useNew(t, e = {}) {
-    return new A(t, e);
+    return new k(t, e);
   }
   useReactTable(t = {}) {
     const e = this.list.loader.useData(), a = this.list.sorting.filter((r) => r.defaultEnabled), i = ht({
@@ -405,23 +405,23 @@ class A {
     ), Array.from(t.values());
   }
 }
-class k {
+class D {
   constructor() {
     o(this, "dataBatches", []);
     o(this, "prevDataBatches", []);
     o(this, "batchLoadingStates", ["void"]);
     ct(this, {
-      dataBatches: M.shallow,
-      batchLoadingStates: M.shallow,
-      mergedData: V,
-      isLoading: V,
+      dataBatches: V.shallow,
+      batchLoadingStates: V.shallow,
+      mergedData: x,
+      isLoading: x,
       reset: I.bound,
       setDataBatch: I.bound,
       setBatchLoadingState: I.bound
     });
   }
   static useNew() {
-    return nt(new k()).current;
+    return nt(new D()).current;
   }
   reset() {
     this.batchLoadingStates = [], this.dataBatches = [];
@@ -436,17 +436,17 @@ class k {
     return (this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches).flatMap((e) => e);
   }
   useMergedData() {
-    return z(() => this.mergedData);
+    return $(() => this.mergedData);
   }
   get isLoading() {
     return this.batchLoadingStates.some((t) => t === "loading" || t === "void");
   }
   useIsLoading() {
-    return z(() => this.isLoading);
+    return $(() => this.isLoading);
   }
 }
 const Wt = [];
-class D {
+class N {
   constructor(t, e = {}) {
     o(this, "list");
     o(this, "dataSource");
@@ -457,10 +457,10 @@ class D {
     const { source: a } = e;
     this.dataSource = a ?? { staticData: Wt };
     const i = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, r = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, l = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
-    this.list = t, this.loaderState = k.useNew(), this.manualPagination = i ?? !1, this.manualFiltering = r ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((u) => u.onFilterUpdated(() => this.reset()));
+    this.list = t, this.loaderState = D.useNew(), this.manualPagination = i ?? !1, this.manualFiltering = r ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((u) => u.onFilterUpdated(() => this.reset()));
   }
   static useNew(t, e = {}) {
-    return new D(t, e);
+    return new N(t, e);
   }
   reset() {
     this.loaderState.reset();
@@ -522,7 +522,7 @@ class D {
   getBatchDataAsyncResource(t) {
     const e = this.dataSource, a = this.getDataLoaderOptions(t);
     if ("staticData" in e)
-      return x(
+      return z(
         async (i) => ({
           data: i,
           itemTotalCount: i.length
@@ -531,7 +531,7 @@ class D {
       );
     if ("asyncLoader" in e) {
       const i = e.asyncLoader;
-      return x(i, [a]);
+      return z(i, [a]);
     }
     if ("asyncResourceFactory" in e) {
       const i = e.asyncResourceFactory;
@@ -550,7 +550,7 @@ let Yt = class X {
     o(this, "batches");
     o(this, "loader");
     const { render: e, filters: a = [], sorting: i = [], batchesController: r } = t;
-    this.render = e, this.items = B.useNew(this), this.filters = a.map((l) => new Kt(this, l)), this.sorting = i.map((l) => new jt(this, l)), this.batches = new Ht(this, r), this.loader = D.useNew(this, t.loader), this.reactTable = A.useNew(this, {
+    this.render = e, this.items = A.useNew(this), this.filters = a.map((l) => new Kt(this, l)), this.sorting = i.map((l) => new jt(this, l)), this.batches = new Ht(this, r), this.loader = N.useNew(this, t.loader), this.reactTable = k.useNew(this, {
       manualFiltering: this.loader.manualFiltering,
       manualPagination: this.loader.manualPagination,
       manualSorting: this.loader.manualSorting
@@ -576,7 +576,7 @@ let Yt = class X {
     return !this.loader.useIsLoading() && this.items.entries.length === 0;
   }
 };
-const Gt = "flow--list--items--item-list", Qt = "flow--list--items--is-loading", q = {
+const Gt = "flow--list--items--item-list", Qt = "flow--list--items--is-loading", K = {
   itemList: Gt,
   isLoading: Qt
 }, Xt = "flow--list--items--item", Zt = "flow--list--items--title", _t = "flow--list--items--top-content", te = "flow--list--items--content", ee = "flow--list--items--action", ae = "flow--list--items--avatar", se = "flow--list--items--text", ne = "flow--list--items--status-badge", ie = "flow--list--items--heading", c = {
@@ -590,9 +590,9 @@ const Gt = "flow--list--items--item-list", Qt = "flow--list--items--is-loading",
   statusBadge: ne,
   heading: ie
 }, re = (s) => {
-  const { className: t, children: e } = s, a = v(d);
+  const { className: t, children: e } = s, a = v(h);
   return /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(
-    g,
+    p,
     {
       variant: "plain",
       className: t,
@@ -601,7 +601,7 @@ const Gt = "flow--list--items--item-list", Qt = "flow--list--items--is-loading",
     /* @__PURE__ */ n.createElement(Lt, null)
   ), e);
 }, oe = (s) => s === "top" ? c.topContent : s === "bottom" ? c.content : c.topContent, Z = (s) => {
-  const { children: t, href: e, ...a } = s, i = {
+  const { children: t, href: e, className: a, ...i } = s, r = {
     ContextMenu: {
       wrapWith: /* @__PURE__ */ n.createElement(re, { className: c.action }),
       placement: "bottom end"
@@ -610,7 +610,7 @@ const Gt = "flow--list--items--item-list", Qt = "flow--list--items--is-loading",
       className: c.action
     },
     Content: {
-      className: Ft((l) => oe(l.slot)),
+      className: Ft((m) => oe(m.slot)),
       tunnelId: "topContent"
     },
     Avatar: {
@@ -633,15 +633,15 @@ const Gt = "flow--list--items--item-list", Qt = "flow--list--items--is-loading",
     Link: {
       unstyled: !0
     }
-  }, r = (l) => e ? /* @__PURE__ */ n.createElement(wt, { unstyled: !0, ...a, className: c.item, href: e }, l.children) : /* @__PURE__ */ n.createElement("div", { className: c.item }, l.children);
-  return /* @__PURE__ */ n.createElement(r, null, /* @__PURE__ */ n.createElement(It, { props: i }, /* @__PURE__ */ n.createElement(Tt, null, t, /* @__PURE__ */ n.createElement("div", { className: c.title }, /* @__PURE__ */ n.createElement($, { id: "title" })), /* @__PURE__ */ n.createElement($, { id: "topContent" }))));
+  }, l = B(c.item, a), u = (m) => e ? /* @__PURE__ */ n.createElement(wt, { unstyled: !0, ...i, className: l, href: e }, m.children) : /* @__PURE__ */ n.createElement("div", { className: l }, m.children);
+  return /* @__PURE__ */ n.createElement(u, null, /* @__PURE__ */ n.createElement(It, { props: r }, /* @__PURE__ */ n.createElement(Tt, null, t, /* @__PURE__ */ n.createElement("div", { className: c.title }, /* @__PURE__ */ n.createElement(O, { id: "title" })), /* @__PURE__ */ n.createElement(O, { id: "topContent" }))));
 }, b = () => /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(G, { height: "3rem" })), le = (s) => {
-  const { className: t } = s, e = h(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading(), r = e.useIsEmpty(), l = v(d), u = e.items.entries.map((m) => /* @__PURE__ */ n.createElement(it, { key: m.id }, m.render())), p = W(
-    q.itemList,
+  const { className: t } = s, e = g(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading(), r = e.useIsEmpty(), l = v(h), u = e.items.entries.map((d) => /* @__PURE__ */ n.createElement(it, { key: d.id }, d.render())), m = B(
+    K.itemList,
     t,
-    a && q.isLoading
+    a && K.isLoading
   );
-  return r ? /* @__PURE__ */ n.createElement(vt, null, /* @__PURE__ */ n.createElement(Et, null), /* @__PURE__ */ n.createElement(Ct, null, l.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(y, null, l.format("list.noResult.text"))) : /* @__PURE__ */ n.createElement("div", { className: p }, i ? ce : u);
+  return r ? /* @__PURE__ */ n.createElement(vt, null, /* @__PURE__ */ n.createElement(Ct, null), /* @__PURE__ */ n.createElement(Et, null, l.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(y, null, l.format("list.noResult.text"))) : /* @__PURE__ */ n.createElement("div", { className: m }, i ? ce : u);
 }, ce = /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null));
 function ue(s) {
   return null;
@@ -661,22 +661,22 @@ function ge(s) {
 const pe = "flow--list--footer", fe = {
   footer: pe
 }, be = (s) => {
-  const t = v(d), e = h(), a = e.batches, i = e.isFiltered() && !e.loader.manualFiltering, r = e.loader.useIsInitiallyLoading(), l = e.useIsEmpty(), u = a.getTotalItemsCount() ?? 0, p = a.getFilteredItemsCount() ?? 0, m = a.getVisibleItemsCount() ?? 0;
+  const t = v(h), e = g(), a = e.batches, i = e.isFiltered() && !e.loader.manualFiltering, r = e.loader.useIsInitiallyLoading(), l = e.useIsEmpty(), u = a.getTotalItemsCount() ?? 0, m = a.getFilteredItemsCount() ?? 0, d = a.getVisibleItemsCount() ?? 0;
   if (l)
     return null;
-  const E = r ? /* @__PURE__ */ n.createElement(G, { width: "200px" }) : i ? t.format("list.paginationInfoFiltered", {
-    visibleItemsCount: m,
-    filteredItemsCount: p,
+  const C = r ? /* @__PURE__ */ n.createElement(G, { width: "200px" }) : i ? t.format("list.paginationInfoFiltered", {
+    visibleItemsCount: d,
+    filteredItemsCount: m,
     totalItemsCount: u
   }) : t.format("list.paginationInfo", {
-    visibleItemsCount: m,
+    visibleItemsCount: d,
     totalItemsCount: u
   });
-  return /* @__PURE__ */ n.createElement(y, { ...s }, E);
+  return /* @__PURE__ */ n.createElement(y, { ...s }, C);
 }, Se = (s) => {
-  const t = v(d), e = h(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading();
+  const t = v(h), e = g(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading();
   return !e.batches.hasNextBatch() && !a ? null : /* @__PURE__ */ n.createElement(
-    g,
+    p,
     {
       isPending: a && !i,
       isDisabled: i,
@@ -689,11 +689,11 @@ const pe = "flow--list--footer", fe = {
   );
 }, ye = () => /* @__PURE__ */ n.createElement("div", { className: fe.footer }, /* @__PURE__ */ n.createElement(be, null), /* @__PURE__ */ n.createElement(Se, null)), ve = (s) => /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(At, null, JSON.stringify(s.data)));
 function ia(s) {
-  var E, P, N, R;
-  const { children: t, batchSize: e, ...a } = s, i = (E = C(t, ue)) == null ? void 0 : E.props, r = (P = C(
+  var C, P, R, M;
+  const { children: t, batchSize: e, ...a } = s, i = (C = E(t, ue)) == null ? void 0 : C.props, r = (P = E(
     t,
     Bt
-  )) == null ? void 0 : P.props, l = (N = C(t, ge)) == null ? void 0 : N.props, u = {
+  )) == null ? void 0 : P.props, l = (R = E(t, ge)) == null ? void 0 : R.props, u = {
     source: i ? {
       ...i,
       asyncLoader: i.children
@@ -703,11 +703,11 @@ function ia(s) {
     } : l ? {
       staticData: l.data
     } : void 0
-  }, p = (f) => /* @__PURE__ */ n.createElement(ve, { data: f }), m = Yt.useNew({
+  }, m = (f) => /* @__PURE__ */ n.createElement(ve, { data: f }), d = Yt.useNew({
     loader: u,
-    filters: O(t, me).map((f) => f.props),
-    sorting: O(t, de).map((f) => f.props),
-    render: ((R = C(t, he)) == null ? void 0 : R.props.children) ?? p,
+    filters: U(t, me).map((f) => f.props),
+    sorting: U(t, de).map((f) => f.props),
+    render: ((M = E(t, he)) == null ? void 0 : M.props.children) ?? m,
     ...a,
     batchesController: {
       batchSize: e
@@ -717,7 +717,7 @@ function ia(s) {
     Q.Provider,
     {
       value: {
-        list: m
+        list: d
       }
     },
     /* @__PURE__ */ n.createElement(kt, null),

package/dist/types/components/List/components/Items/ListItem/ListItem.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren, default as React } from 'react';
 import { LinkDOMProps } from '@react-types/shared';
+import { PropsWithClassName } from '../../../../../lib/types/props';
 
-type Props = PropsWithChildren & LinkDOMProps;
+type Props = PropsWithChildren & LinkDOMProps & PropsWithClassName;
 export declare const ListItem: (props: Props) => React.JSX.Element;
 export default ListItem;

package/dist/types/components/Popover/stories/Default.stories.d.ts

@@ -6,3 +6,4 @@ export default meta;
 type Story = StoryObj<typeof Popover>;
 export declare const Default: Story;
 export declare const WithTip: Story;
+export declare const WithController: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.153",
+  "version": "0.1.0-alpha.155",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -280,7 +280,7 @@
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/string-compiler": "^3.2.4",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.153",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.155",
     "@mittwald/react-use-promise": "^2.3.13",
     "@react-aria/utils": "^3.24.1",
     "@react-types/shared": "^3.23.1",
@@ -307,7 +307,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.153",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.155",
     "@mittwald/react-use-promise": "^2.3.13",
     "@nx/storybook": "^19.3.0",
     "@storybook/addon-a11y": "^8.1.10",
@@ -383,5 +383,5 @@
       "optional": true
     }
   },
-  "gitHead": "0e77636103295c605c957b726710ef643b488bf1"
+  "gitHead": "fd0bc14df7bf0a2a7fb8f007660267b0dea9eb8f"
 }