@mittwald/flow-react-components 0.1.0-alpha.182 → 0.1.0-alpha.184

package/dist/List.js

@@ -25,31 +25,31 @@ import { T as S } from "./Text-SLaOJhzj.js";
 import { I as X } from "./IconChevronDown-d3q78pVs.js";
 import { I as Z } from "./IconClose-9DrWhSP2.js";
 import { T as It } from "./TextField-DhdMjRzb.js";
-import { autorun as At, runInAction as kt, makeObservable as Vt, observable as O, computed as H, action as L } from "mobx";
+import { autorun as kt, runInAction as At, makeObservable as xt, observable as U, computed as O, action as L } from "mobx";
 import "./context-BB3_MApL.js";
-import { u as xt } from "./useOnChange-C1Quwyuz.js";
+import { u as Vt } from "./useOnChange-C1Quwyuz.js";
 import { getProperty as Bt } from "dot-prop";
 import { useReactTable as Pt, getCoreRowModel as Dt, getSortedRowModel as Nt, getFilteredRowModel as Rt, getPaginationRowModel as zt, getFacetedUniqueValues as Mt } from "@tanstack/react-table";
 import _ from "invariant";
-import { useLocalObservable as Ut } from "mobx-react-lite";
-import { getAsyncResource as q } from "@mittwald/react-use-promise";
-import { u as G } from "./useSelector-DpU7_HMO.js";
-import * as B from "react-aria-components";
-import { I as $t } from "./IllustratedMessage-B3MHD01M.js";
+import { useLocalObservable as $t } from "mobx-react-lite";
+import { getAsyncResource as H } from "@mittwald/react-use-promise";
+import { u as q } from "./useSelector-DpU7_HMO.js";
+import * as V from "react-aria-components";
+import { I as Ut } from "./IllustratedMessage-B3MHD01M.js";
 import { I as Ot } from "./IconSearch-Bxe-heXD.js";
 import { H as tt } from "./Heading-1M1gRZfk.js";
-import { S as I } from "./Skeleton-CgOx_15R.js";
-import { d as y, a as K } from "./deepFindOfType-6pG0fH7S.js";
+import { d as y, a as G } from "./deepFindOfType-6pG0fH7S.js";
 import { ListLoaderAsyncResource as Ht, TypedListLoaderAsyncResource as qt } from "./List/ListLoaderAsyncResource.js";
-const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view--title", jt = "flow--list--items--item--view--top-content", Jt = "flow--list--items--item--view--content", Wt = "flow--list--items--item--view--action", Yt = "flow--list--items--item--view--avatar", Qt = "flow--list--items--item--view--text", Xt = "flow--list--items--item--view--heading", d = {
-  view: Gt,
-  title: Kt,
-  topContent: jt,
-  content: Jt,
-  action: Wt,
-  avatar: Yt,
-  text: Qt,
-  heading: Xt,
+import { S as Gt } from "./Skeleton-CKLaTmDR.js";
+const Kt = "flow--list--items--item--view", jt = "flow--list--items--item--view--title", Jt = "flow--list--items--item--view--top-content", Wt = "flow--list--items--item--view--content", Yt = "flow--list--items--item--view--action", Qt = "flow--list--items--item--view--avatar", Xt = "flow--list--items--item--view--text", Zt = "flow--list--items--item--view--heading", d = {
+  view: Kt,
+  title: jt,
+  topContent: Jt,
+  content: Wt,
+  action: Yt,
+  avatar: Qt,
+  text: Xt,
+  heading: Zt,
   "container-breakpoint-size-xs": "flow--list--items--item--view--container-breakpoint-size-xs",
   "container-breakpoint-size-s": "flow--list--items--item--view--container-breakpoint-size-s",
   "container-breakpoint-size-m": "flow--list--items--item--view--container-breakpoint-size-m",
@@ -75,28 +75,28 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
   "list.setSorting": (i) => `Sorting: ${i.property}`,
   "list.showMore": "Show more",
   "list.sorting": "Sorting"
-} }, Zt = (i) => {
-  const { className: t, children: e } = i, a = b(g);
+} }, _t = (i) => {
+  const { className: t, children: e } = i, s = b(g);
   return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(
     f,
     {
       variant: "plain",
       className: t,
-      "aria-label": a.format("list.options")
+      "aria-label": s.format("list.options")
     },
     /* @__PURE__ */ n.createElement(Et, null)
   ), e);
-}, _t = (i) => i === "top" ? d.topContent : i === "bottom" ? d.content : d.topContent, et = (i) => {
-  const { children: t, className: e, containerBreakpointSize: a = "m" } = i, s = {
+}, te = (i) => i === "top" ? d.topContent : i === "bottom" ? d.content : d.topContent, et = (i) => {
+  const { children: t, className: e, containerBreakpointSize: s = "m" } = i, a = {
     ContextMenu: {
-      wrapWith: /* @__PURE__ */ n.createElement(Zt, { className: d.action }),
+      wrapWith: /* @__PURE__ */ n.createElement(_t, { className: d.action }),
       placement: "bottom end"
     },
     Button: {
       className: d.action
     },
     Content: {
-      className: wt((l) => _t(l.slot)),
+      className: wt((l) => te(l.slot)),
       tunnelId: "topContent"
     },
     Avatar: {
@@ -118,23 +118,23 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
   }, o = C(
     d.view,
     e,
-    d[Ft(a)]
+    d[Ft(s)]
   );
-  return /* @__PURE__ */ n.createElement("div", { className: o }, /* @__PURE__ */ n.createElement(St, { props: s }, /* @__PURE__ */ n.createElement(Ct, null, t, /* @__PURE__ */ n.createElement("div", { className: d.title }, /* @__PURE__ */ n.createElement($, { id: "title" })), /* @__PURE__ */ n.createElement($, { id: "topContent" }))));
-}, at = ht({}), h = () => gt(at).list, te = () => h().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(Tt, { key: e }, () => {
+  return /* @__PURE__ */ n.createElement("div", { className: o }, /* @__PURE__ */ n.createElement(St, { props: a }, /* @__PURE__ */ n.createElement(Ct, null, t, /* @__PURE__ */ n.createElement("div", { className: d.title }, /* @__PURE__ */ n.createElement($, { id: "title" })), /* @__PURE__ */ n.createElement($, { id: "topContent" }))));
+}, st = ht({}), h = () => gt(st).list, ee = () => h().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(Tt, { key: e }, () => {
   t();
-})), ee = (i) => {
+})), se = (i) => {
   const { sorting: t } = i;
   return /* @__PURE__ */ n.createElement(Q, { id: t.id }, t.name);
-}, A = (i) => {
-  const { children: t, locales: e, variables: a } = i;
-  return b(e).format(t, a);
+}, I = (i) => {
+  const { children: t, locales: e, variables: s } = i;
+  return b(e).format(t, s);
 }, ae = () => {
-  const i = h(), t = i.visibleSorting.map((s) => /* @__PURE__ */ n.createElement(ee, { sorting: s, key: s.id }));
+  const i = h(), t = i.visibleSorting.map((a) => /* @__PURE__ */ n.createElement(se, { sorting: a, key: a.id }));
   if (t.length === 0)
     return null;
-  const e = i.visibleSorting.find((s) => s.isSorted()), a = /* @__PURE__ */ n.createElement(S, null, e ? /* @__PURE__ */ n.createElement(
-    A,
+  const e = i.visibleSorting.find((a) => a.isSorted()), s = /* @__PURE__ */ n.createElement(S, null, e ? /* @__PURE__ */ n.createElement(
+    I,
     {
       locales: g,
       variables: {
@@ -142,67 +142,67 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
       }
     },
     "list.setSorting"
-  ) : /* @__PURE__ */ n.createElement(A, { locales: g }, "list.sorting"));
-  return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, a, /* @__PURE__ */ n.createElement(X, null)), /* @__PURE__ */ n.createElement(
+  ) : /* @__PURE__ */ n.createElement(I, { locales: g }, "list.sorting"));
+  return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, s, /* @__PURE__ */ n.createElement(X, null)), /* @__PURE__ */ n.createElement(
     Y,
     {
       selectionMode: "single",
       selectedKeys: e ? [e.id] : [],
-      onAction: (s) => {
-        i.getSorting(String(s)).enable();
+      onAction: (a) => {
+        i.getSorting(String(a)).enable();
       }
     },
     t
   ));
-}, se = (i) => {
-  const { filter: t } = i, { values: e, mode: a, name: s, property: o } = t, l = e.map((u) => /* @__PURE__ */ n.createElement(Q, { key: t.getValueId(u), id: String(u) }, String(u))), c = e.filter((u) => t.isValueActive(u)).map((u) => String(u)), m = (u) => {
+}, ie = (i) => {
+  const { filter: t } = i, { values: e, mode: s, name: a, property: o } = t, l = e.map((u) => /* @__PURE__ */ n.createElement(Q, { key: t.getValueId(u), id: String(u) }, String(u))), c = e.filter((u) => t.isValueActive(u)).map((u) => String(u)), m = (u) => {
     t.toggleValue(u);
   };
-  return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ n.createElement(S, null, s ?? o), /* @__PURE__ */ n.createElement(X, null)), /* @__PURE__ */ n.createElement(
+  return /* @__PURE__ */ n.createElement(x, null, /* @__PURE__ */ n.createElement(f, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ n.createElement(S, null, a ?? o), /* @__PURE__ */ n.createElement(X, null)), /* @__PURE__ */ n.createElement(
     Y,
     {
       onAction: m,
-      selectionMode: a === "one" ? "single" : "multiple",
+      selectionMode: s === "one" ? "single" : "multiple",
       selectedKeys: c
     },
     l
   ));
-}, ie = "flow--list--header", ne = "flow--list--header--picker-list-and-search", re = "flow--list--header--picker-list", oe = "flow--list--header--search-field", w = {
-  header: ie,
-  pickerListAndSearch: ne,
-  pickerList: re,
-  searchField: oe
-}, le = "flow--list--header--active-filters", ce = "flow--list--header--active-filters--clear-button", j = {
-  activeFilters: le,
-  clearButton: ce
-}, ue = () => {
+}, ne = "flow--list--header", re = "flow--list--header--picker-list-and-search", oe = "flow--list--header--picker-list", le = "flow--list--header--search-field", w = {
+  header: ne,
+  pickerListAndSearch: re,
+  pickerList: oe,
+  searchField: le
+}, ce = "flow--list--header--active-filters", ue = "flow--list--header--active-filters--clear-button", K = {
+  activeFilters: ce,
+  clearButton: ue
+}, me = () => {
   const i = h(), t = i.filters.flatMap(
-    (e) => e.values.filter((a) => e.isValueActive(a)).map((a) => /* @__PURE__ */ n.createElement(
+    (e) => e.values.filter((s) => e.isValueActive(s)).map((s) => /* @__PURE__ */ n.createElement(
       f,
       {
         variant: "soft",
         size: "s",
-        key: String(a),
-        onPress: () => e.deactivateValue(a)
+        key: String(s),
+        onPress: () => e.deactivateValue(s)
       },
-      /* @__PURE__ */ n.createElement(S, null, String(a)),
+      /* @__PURE__ */ n.createElement(S, null, String(s)),
       /* @__PURE__ */ n.createElement(Z, null)
     ))
   );
-  return t.length <= 0 ? null : /* @__PURE__ */ n.createElement("div", { className: j.activeFilters }, t, /* @__PURE__ */ n.createElement(
+  return t.length <= 0 ? null : /* @__PURE__ */ n.createElement("div", { className: K.activeFilters }, t, /* @__PURE__ */ n.createElement(
     f,
     {
-      className: j.clearButton,
+      className: K.clearButton,
       size: "s",
       variant: "plain",
       onPress: () => i.clearFilters()
     },
-    /* @__PURE__ */ n.createElement(A, { locales: g }, "list.resetAll")
+    /* @__PURE__ */ n.createElement(I, { locales: g }, "list.resetAll")
   ));
-}, me = (i) => {
-  const { className: t, onChange: e, value: a, ...s } = i, o = b(g), [l, c] = pt(a ?? "");
-  xt(a, () => {
-    c(a ?? "");
+}, de = (i) => {
+  const { className: t, onChange: e, value: s, ...a } = i, o = b(g), [l, c] = pt(s ?? "");
+  Vt(s, () => {
+    c(s ?? "");
   }, [l]);
   const m = o.format("list.search"), u = () => {
     e(void 0), c("");
@@ -218,7 +218,7 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
       value: l,
       onKeyUp: v,
       onChange: (p) => c(p),
-      ...s
+      ...a
     }
   ), /* @__PURE__ */ n.createElement(
     f,
@@ -231,50 +231,50 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
     },
     /* @__PURE__ */ n.createElement(Z, null)
   ));
-}, de = (i) => {
-  const { className: t, search: e } = i, a = e.render ?? me;
-  return W(a, {
+}, he = (i) => {
+  const { className: t, search: e } = i, s = e.render ?? de;
+  return W(s, {
     className: t,
     value: e.value,
     onChange: e.setValue.bind(e),
     ...e.textFieldProps
   });
-}, he = (i) => {
+}, ge = (i) => {
   const { className: t } = i, e = h();
   if (e.filters.length === 0 && e.visibleSorting.length === 0 && !e.search)
     return null;
-  const a = e.filters.map((s) => /* @__PURE__ */ n.createElement(se, { key: s.property, filter: s }));
-  return /* @__PURE__ */ n.createElement("div", { className: C(t, w.header) }, /* @__PURE__ */ n.createElement("div", { className: w.pickerListAndSearch }, /* @__PURE__ */ n.createElement("div", { className: w.pickerList }, /* @__PURE__ */ n.createElement(ae, null), a), e.search && /* @__PURE__ */ n.createElement(de, { className: w.searchField, search: e.search })), /* @__PURE__ */ n.createElement(ue, null));
-}, ge = "flow--list", pe = {
-  list: ge
+  const s = e.filters.map((a) => /* @__PURE__ */ n.createElement(ie, { key: a.property, filter: a }));
+  return /* @__PURE__ */ n.createElement("div", { className: C(t, w.header) }, /* @__PURE__ */ n.createElement("div", { className: w.pickerListAndSearch }, /* @__PURE__ */ n.createElement("div", { className: w.pickerList }, /* @__PURE__ */ n.createElement(ae, null), s), e.search && /* @__PURE__ */ n.createElement(he, { className: w.searchField, search: e.search })), /* @__PURE__ */ n.createElement(me, null));
+}, pe = "flow--list", fe = {
+  list: pe
 };
-let fe = class st {
-  constructor(t, e, a) {
+let be = class at {
+  constructor(t, e, s) {
     r(this, "id");
     r(this, "data");
     r(this, "collection");
-    this.collection = t, this.id = e, this.data = a;
+    this.collection = t, this.id = e, this.data = s;
   }
   static fromRow(t, e) {
-    return new st(t, e.id, e.original);
+    return new at(t, e.id, e.original);
   }
 };
-class be {
+class Se {
   constructor(t) {
     r(this, "list");
     this.list = t;
   }
   get entries() {
-    return this.list.reactTable.table.getRowModel().rows.map((t) => fe.fromRow(this, t));
+    return this.list.reactTable.table.getRowModel().rows.map((t) => be.fromRow(this, t));
   }
 }
-class Se {
+class ve {
   constructor(t, e = {}) {
     r(this, "batchSize");
     r(this, "list");
-    var s;
-    const { batchSize: a = 20 } = e;
-    this.list = t, this.batchSize = a, t.filters.forEach((o) => o.onFilterUpdated(() => this.reset())), (s = t.search) == null || s.onUpdated(() => this.reset());
+    var a;
+    const { batchSize: s = 20 } = e;
+    this.list = t, this.batchSize = s, t.filters.forEach((o) => o.onFilterUpdated(() => this.reset())), (a = t.search) == null || a.onUpdated(() => this.reset());
   }
   get reactTable() {
     return this.list.reactTable.table;
@@ -315,8 +315,8 @@ class Se {
     }
   }
 }
-const ve = (i, t) => i === t;
-class ye {
+const ye = (i, t) => i === t;
+class we {
   constructor(t, e) {
     r(this, "_values");
     r(this, "list");
@@ -325,28 +325,28 @@ class ye {
     r(this, "matcher");
     r(this, "name");
     r(this, "onFilterUpdateCallbacks", /* @__PURE__ */ new Set());
-    this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = e.values, this.matcher = e.matcher ?? ve, this.name = e.name;
+    this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = e.values, this.matcher = e.matcher ?? ye, this.name = e.name;
   }
   updateTableColumnDef(t) {
     t.enableColumnFilter = !0, t.filterFn = this.getReactTableFilterFn();
   }
   getReactTableFilterFn() {
-    return (t, e, a) => this.checkFilterMatches(
+    return (t, e, s) => this.checkFilterMatches(
       Bt(t.original, this.property),
-      a
+      s
     );
   }
   checkFilterMatches(t, e) {
     if (e === null)
       return !0;
-    const a = (o) => Array.isArray(o) ? o : [o], s = (o) => this.matcher(o, t);
+    const s = (o) => Array.isArray(o) ? o : [o], a = (o) => this.matcher(o, t);
     if (this.mode === "all")
-      return a(e).every(s);
+      return s(e).every(a);
     if (this.mode === "some") {
-      const o = a(e);
-      return o.length === 0 || o.some(s);
+      const o = s(e);
+      return o.length === 0 || o.some(a);
     } else if (this.mode === "one")
-      return s(e);
+      return a(e);
     throw new Error(`Unknown filter mode '${this.mode}'`);
   }
   getTableColumnFilter() {
@@ -379,28 +379,28 @@ class ye {
   }
   activateValue(t) {
     const e = this.getArrayValue();
-    let a;
-    this.mode === "all" || this.mode === "some" ? a = [...e, t] : a = t, this.list.reactTable.getTableColumn(this.property).setFilterValue(a), this.onFilterUpdateCallbacks.forEach((s) => s());
+    let s;
+    this.mode === "all" || this.mode === "some" ? s = [...e, t] : s = t, this.list.reactTable.getTableColumn(this.property).setFilterValue(s), this.onFilterUpdateCallbacks.forEach((a) => a());
   }
   deactivateValue(t) {
     const e = this.getArrayValue();
-    let a;
-    this.mode === "all" || this.mode === "some" ? a = e.filter((s) => s !== t) : a = null, this.list.reactTable.getTableColumn(this.property).setFilterValue(a), this.onFilterUpdateCallbacks.forEach((s) => s());
+    let s;
+    this.mode === "all" || this.mode === "some" ? s = e.filter((a) => a !== t) : s = null, this.list.reactTable.getTableColumn(this.property).setFilterValue(s), this.onFilterUpdateCallbacks.forEach((a) => a());
   }
   clearValues() {
     let t;
     this.mode === "all" || this.mode === "some" ? t = [] : t = null, this.list.reactTable.getTableColumn(this.property).setFilterValue(t), this.onFilterUpdateCallbacks.forEach((e) => e());
   }
   toggleValue(t) {
-    const e = this.isValueActive(t), a = this.getArrayValue();
-    let s;
-    this.mode === "all" || this.mode === "some" ? e ? s = a.filter((o) => o !== t) : s = [...a, t] : s = e ? null : t, this.list.reactTable.getTableColumn(this.property).setFilterValue(s), this.onFilterUpdateCallbacks.forEach((o) => o());
+    const e = this.isValueActive(t), s = this.getArrayValue();
+    let a;
+    this.mode === "all" || this.mode === "some" ? e ? a = s.filter((o) => o !== t) : a = [...s, t] : a = e ? null : t, this.list.reactTable.getTableColumn(this.property).setFilterValue(a), this.onFilterUpdateCallbacks.forEach((o) => o());
   }
   onFilterUpdated(t) {
     this.onFilterUpdateCallbacks.add(t);
   }
 }
-class we {
+class Ee {
   constructor(t, e) {
     r(this, "list");
     r(this, "property");
@@ -434,8 +434,8 @@ class we {
     return `${this.getTableColumn().id}:${this.direction}`;
   }
 }
-const Ee = (i) => T(At(i));
-class P {
+const Ce = (i) => T(kt(i));
+class B {
   constructor(t, e = {}) {
     r(this, "list");
     r(this, "table");
@@ -444,26 +444,26 @@ class P {
       const e = this.tableState.value;
       if (!e)
         return;
-      const a = typeof t == "function" ? t(e) : t;
-      kt(() => {
-        this.finalizeTableState(a), this.tableState.value = a;
+      const s = typeof t == "function" ? t(e) : t;
+      At(() => {
+        this.finalizeTableState(s), this.tableState.value = s;
       });
     });
-    this.list = t, this.tableState = Ut(() => ({ value: void 0 })), this.table = this.useReactTable(e);
+    this.list = t, this.tableState = $t(() => ({ value: void 0 })), this.table = this.useReactTable(e);
   }
   static useNew(t, e = {}) {
-    return new P(t, e);
+    return new B(t, e);
   }
   useReactTable(t = {}) {
-    const e = this.list.loader.useData(), a = this.list.sorting.filter(
+    const e = this.list.loader.useData(), s = this.list.sorting.filter(
       (o) => o.defaultEnabled !== !1
-    ), s = Pt({
+    ), a = Pt({
       data: e,
       initialState: {
         pagination: {
           pageSize: this.list.batches.batchSize
         },
-        sorting: a.map((o) => o.getReactTableColumnSort())
+        sorting: s.map((o) => o.getReactTableColumnSort())
       },
       columns: this.getTableColumnDefs(),
       getCoreRowModel: Dt(),
@@ -475,21 +475,21 @@ class P {
       globalFilterFn: "auto",
       ...t
     });
-    return this.useUpdateTableState(s), s;
+    return this.useUpdateTableState(a), a;
   }
   useUpdateTableState(t) {
-    Ee(() => {
+    Ce(() => {
       const e = this.tableState.value;
-      e ? t.setOptions((a) => ({
-        ...a,
+      e ? t.setOptions((s) => ({
+        ...s,
         state: e
       })) : this.tableState.value = t.getState();
     });
   }
   finalizeTableState(t) {
     const e = this.list.sorting.filter(
-      (a) => a.defaultEnabled === "hidden" && !t.sorting.some((s) => s.id === a.property)
-    ).map((a) => a.getReactTableColumnSort());
+      (s) => s.defaultEnabled === "hidden" && !t.sorting.some((a) => a.id === s.property)
+    ).map((s) => s.getReactTableColumnSort());
     t.sorting.unshift(...e);
   }
   get searchString() {
@@ -501,45 +501,45 @@ class P {
     return _(!!e, `Column #${t} is not defined`), e;
   }
   getTableColumnDefs() {
-    const t = /* @__PURE__ */ new Map(), e = (a) => {
-      const s = t.get(a);
-      if (s)
-        return s;
+    const t = /* @__PURE__ */ new Map(), e = (s) => {
+      const a = t.get(s);
+      if (a)
+        return a;
       const o = {
-        id: a,
-        accessorKey: a,
+        id: s,
+        accessorKey: s,
         enableSorting: !1,
         enableColumnFilter: !1
       };
-      return t.set(a, o), o;
+      return t.set(s, o), o;
     };
     return this.list.filters.forEach(
-      (a) => a.updateTableColumnDef(e(a.property))
+      (s) => s.updateTableColumnDef(e(s.property))
     ), this.list.sorting.forEach(
-      (a) => a.updateTableColumnDef(e(a.property))
+      (s) => s.updateTableColumnDef(e(s.property))
     ), Array.from(t.values());
   }
 }
-class D {
+class P {
   constructor() {
     r(this, "dataBatches", []);
     r(this, "prevDataBatches", []);
     r(this, "batchLoadingStates", ["void"]);
-    Vt(this, {
+    xt(this, {
       prevDataBatches: !1,
       useMergedData: !1,
       useIsLoading: !1,
-      dataBatches: O.shallow,
-      batchLoadingStates: O.shallow,
-      mergedData: H,
-      isLoading: H,
+      dataBatches: U.shallow,
+      batchLoadingStates: U.shallow,
+      mergedData: O,
+      isLoading: O,
       reset: L.bound,
       setDataBatch: L.bound,
       setBatchLoadingState: L.bound
     });
   }
   static useNew() {
-    return ft(new D()).current;
+    return ft(new P()).current;
   }
   reset() {
     this.batchLoadingStates = [], this.dataBatches = [];
@@ -554,17 +554,17 @@ class D {
     return (this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches).flatMap((e) => e);
   }
   useMergedData() {
-    return G(() => this.mergedData);
+    return q(() => this.mergedData);
   }
   get isLoading() {
     return this.batchLoadingStates.some((t) => t === "loading" || t === "void");
   }
   useIsLoading() {
-    return G(() => this.isLoading);
+    return q(() => this.isLoading);
   }
 }
-const Ce = [];
-class N {
+const Fe = [];
+class D {
   constructor(t, e = {}) {
     r(this, "list");
     r(this, "dataSource");
@@ -573,13 +573,13 @@ class N {
     r(this, "manualPagination");
     r(this, "loaderState");
     var c;
-    const { source: a } = e;
-    this.dataSource = a ?? { staticData: Ce };
-    const s = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, o = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, l = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
-    this.list = t, this.loaderState = D.useNew(), this.manualPagination = s ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((m) => m.onFilterUpdated(() => this.reset())), (c = this.list.search) == null || c.onUpdated(() => this.reset());
+    const { source: s } = e;
+    this.dataSource = s ?? { staticData: Fe };
+    const a = "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 = t, this.loaderState = P.useNew(), this.manualPagination = a ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((m) => m.onFilterUpdated(() => this.reset())), (c = this.list.search) == null || c.onUpdated(() => this.reset());
   }
   static useNew(t, e = {}) {
-    return new N(t, e);
+    return new D(t, e);
   }
   reset() {
     this.loaderState.reset();
@@ -608,17 +608,17 @@ class N {
     T(() => (this.loaderState.setBatchLoadingState(
       e,
       t.state.value
-    ), t.state.observe((a) => {
-      this.loaderState.setBatchLoadingState(e, a);
+    ), t.state.observe((s) => {
+      this.loaderState.setBatchLoadingState(e, s);
     })), [t, e]);
   }
   useObserveBatchData(t, e) {
-    const a = (s) => {
-      const { data: o, itemTotalCount: l } = s;
+    const s = (a) => {
+      const { data: o, itemTotalCount: l } = a;
       this.loaderState.setDataBatch(e, o), l !== void 0 && this.list.batches.updateItemTotalCount(l);
     };
-    T(() => (t.value.value.isSet && a(t.value.value.value), t.value.observe((s) => {
-      s.isSet && a(s.value);
+    T(() => (t.value.value.isSet && s(t.value.value.value), t.value.observe((a) => {
+      a.isSet && s(a.value);
     })), [t, e]);
   }
   getDataLoaderOptions(t) {
@@ -640,27 +640,27 @@ class N {
     };
   }
   getBatchDataAsyncResource(t) {
-    const e = this.dataSource, a = this.getDataLoaderOptions(t);
+    const e = this.dataSource, s = this.getDataLoaderOptions(t);
     if ("staticData" in e)
-      return q(
-        async (s) => ({
-          data: s,
-          itemTotalCount: s.length
+      return H(
+        async (a) => ({
+          data: a,
+          itemTotalCount: a.length
         }),
         [e.staticData]
       );
     if ("asyncLoader" in e) {
-      const s = e.asyncLoader;
-      return q(s, [a]);
+      const a = e.asyncLoader;
+      return H(a, [s]);
     }
     if ("asyncResourceFactory" in e) {
-      const s = e.asyncResourceFactory;
-      return s(a);
+      const a = e.asyncResourceFactory;
+      return a(s);
     }
     throw new Error("Unknown data source");
   }
 }
-class Fe {
+class Le {
   constructor(t, e) {
     r(this, "list");
     r(this, "render");
@@ -692,15 +692,15 @@ const E = class E {
     r(this, "onAction");
     r(this, "fallback");
     r(this, "renderFn");
-    const { onAction: a, fallback: s, textValue: o, href: l, renderFn: c } = e;
-    this.list = t, this.textValue = o, this.renderFn = c, this.href = l, this.onAction = a, this.fallback = s;
+    const { onAction: s, fallback: a, textValue: o, href: l, renderFn: c } = e;
+    this.list = t, this.textValue = o, this.renderFn = c, this.href = l, this.onAction = s, this.fallback = a;
   }
   render(t) {
     return (this.renderFn ?? E.fallbackRenderItemFn)(t);
   }
 };
 r(E, "fallbackRenderItemFn", (t) => W("pre", void 0, JSON.stringify(t)));
-let k = E, Le = class it {
+let k = E, Te = class it {
   constructor(t) {
     r(this, "filters");
     r(this, "itemView");
@@ -713,12 +713,12 @@ let k = E, Le = class it {
     r(this, "hasAction");
     const {
       itemView: e,
-      filters: a = [],
-      sorting: s = [],
+      filters: s = [],
+      sorting: a = [],
       batchesController: o,
       hasAction: l
     } = t;
-    this.items = new be(this), this.filters = a.map((c) => new ye(this, c)), this.sorting = s.map((c) => new we(this, c)), this.search = t.search ? new Fe(this, t.search) : void 0, this.itemView = new k(this, e), this.batches = new Se(this, o), this.loader = N.useNew(this, t.loader), this.reactTable = P.useNew(this, {
+    this.items = new Se(this), this.filters = s.map((c) => new we(this, c)), this.sorting = a.map((c) => new Ee(this, c)), this.search = t.search ? new Le(this, t.search) : void 0, this.itemView = new k(this, e), this.batches = new ve(this, o), this.loader = D.useNew(this, t.loader), this.reactTable = B.useNew(this, {
       manualFiltering: this.loader.manualFiltering,
       manualPagination: this.loader.manualPagination,
       manualSorting: this.loader.manualSorting
@@ -734,7 +734,7 @@ let k = E, Le = class it {
     return this.sorting.filter((t) => t.defaultEnabled !== "hidden");
   }
   getSorting(t) {
-    const e = this.sorting.find((a) => a.id === t);
+    const e = this.sorting.find((s) => s.id === t);
     return _(!!e, `Could not get Sorting (ID: ${t})`), e;
   }
   clearSorting() {
@@ -748,55 +748,61 @@ let k = E, Le = class it {
     return !this.loader.useIsLoading() && this.items.entries.length === 0;
   }
 };
-const Te = "flow--list--items", Ie = "flow--list--items--is-loading", J = {
-  items: Te,
-  isLoading: Ie
-}, Ae = "flow--list--items--item", ke = "flow--list--items--item--has-action", V = {
+const Ie = "flow--list--items", ke = "flow--list--items--is-loading", j = {
+  items: Ie,
+  isLoading: ke
+}, Ae = "flow--list--items--item", xe = "flow--list--items--item--has-action", A = {
   item: Ae,
-  hasAction: ke
+  hasAction: xe
 }, Ve = (i) => {
-  const { data: t, children: e } = i, a = h(), s = a.itemView, o = s.onAction, l = s.textValue ? s.textValue(t) : void 0, c = o ? () => o(t) : void 0, m = s.href ? s.href(t) : void 0, u = a.hasAction || !!c || !!m, v = C(V.item, u && V.hasAction);
+  const { data: t, children: e } = i, s = h(), a = s.itemView, o = a.onAction, l = a.textValue ? a.textValue(t) : void 0, c = o ? () => o(t) : void 0, m = a.href ? a.href(t) : void 0, u = s.hasAction || !!c || !!m, v = C(A.item, u && A.hasAction);
   return /* @__PURE__ */ n.createElement(
-    B.GridListItem,
+    V.GridListItem,
     {
       className: v,
       onAction: c,
       textValue: l,
       href: m
     },
-    e ?? s.render(t)
+    e ?? a.render(t)
   );
-}, xe = (i) => /* @__PURE__ */ n.createElement(B.GridListItem, { textValue: "-", className: V.item }, i.children), Be = () => {
+}, Be = (i) => /* @__PURE__ */ n.createElement(V.GridListItem, { textValue: "-", className: A.item }, i.children), Pe = () => {
   const i = b(g);
-  return /* @__PURE__ */ n.createElement($t, null, /* @__PURE__ */ n.createElement(Ot, null), /* @__PURE__ */ n.createElement(tt, null, i.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(S, null, i.format("list.noResult.text")));
-}, Pe = () => /* @__PURE__ */ n.createElement(et, null, /* @__PURE__ */ n.createElement(tt, null, /* @__PURE__ */ n.createElement(I, { width: "200px" })), /* @__PURE__ */ n.createElement(S, null, /* @__PURE__ */ n.createElement(I, { width: "300px" }))), De = () => {
-  const t = h().itemView.fallback ?? /* @__PURE__ */ n.createElement(Pe, null);
-  return Array.from(Array(5)).map((e, a) => /* @__PURE__ */ n.createElement(xe, { key: a }, bt(t)));
-}, Ne = (i) => {
-  const { className: t, ...e } = i, a = h(), s = a.loader.useIsLoading(), o = a.loader.useIsInitiallyLoading(), l = a.useIsEmpty(), c = a.items.entries.map((u) => /* @__PURE__ */ n.createElement(Ve, { key: u.id, data: u.data })), m = C(
-    J.items,
+  return /* @__PURE__ */ n.createElement(Ut, null, /* @__PURE__ */ n.createElement(Ot, null), /* @__PURE__ */ n.createElement(tt, null, i.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(S, null, i.format("list.noResult.text")));
+}, De = "flow--skeleton-text", Ne = "flow--skeleton-text--shimmer", Re = {
+  skeletonText: De,
+  shimmer: Ne
+}, J = (i) => {
+  const { width: t, style: e = {}, ...s } = i;
+  return /* @__PURE__ */ n.createElement("div", { "aria-hidden": !0, style: { width: t, ...e }, ...s }, /* @__PURE__ */ n.createElement("div", { className: Re.skeletonText }));
+}, ze = () => /* @__PURE__ */ n.createElement(et, null, /* @__PURE__ */ n.createElement(tt, null, /* @__PURE__ */ n.createElement(J, { width: "200px" })), /* @__PURE__ */ n.createElement(S, null, /* @__PURE__ */ n.createElement(J, { width: "300px" }))), Me = () => {
+  const t = h().itemView.fallback ?? /* @__PURE__ */ n.createElement(ze, null);
+  return Array.from(Array(5)).map((e, s) => /* @__PURE__ */ n.createElement(Be, { key: s }, bt(t)));
+}, $e = (i) => {
+  const { className: t, ...e } = i, s = h(), a = s.loader.useIsLoading(), o = s.loader.useIsInitiallyLoading(), l = s.useIsEmpty(), c = s.items.entries.map((u) => /* @__PURE__ */ n.createElement(Ve, { key: u.id, data: u.data })), m = C(
+    j.items,
     t,
-    s && J.isLoading
+    a && j.isLoading
   );
-  return l ? /* @__PURE__ */ n.createElement(Be, null) : /* @__PURE__ */ n.createElement("div", { "aria-hidden": o, "aria-busy": s }, /* @__PURE__ */ n.createElement(B.GridList, { className: m, ...e }, o ? /* @__PURE__ */ n.createElement(De, null) : c));
-}, nt = (i) => null, Re = () => nt, rt = (i) => null, ze = () => rt, ot = (i) => null, Me = () => ot, lt = (i) => null, Ue = () => lt, ct = (i) => null, $e = () => ct, Oe = "flow--list--footer", He = {
-  footer: Oe
-}, qe = (i) => {
-  const t = b(g), e = h(), a = e.batches, s = e.loader.useIsInitiallyLoading(), o = e.useIsEmpty(), l = a.getTotalItemsCount(), c = a.getVisibleItemsCount();
+  return l ? /* @__PURE__ */ n.createElement(Pe, null) : /* @__PURE__ */ n.createElement("div", { "aria-hidden": o, "aria-busy": a }, /* @__PURE__ */ n.createElement(V.GridList, { className: m, ...e }, o ? /* @__PURE__ */ n.createElement(Me, null) : c));
+}, nt = (i) => null, Ue = () => nt, rt = (i) => null, Oe = () => rt, ot = (i) => null, He = () => ot, lt = (i) => null, qe = () => lt, ct = (i) => null, Ge = () => ct, Ke = "flow--list--footer", je = {
+  footer: Ke
+}, Je = (i) => {
+  const t = b(g), e = h(), s = e.batches, a = e.loader.useIsInitiallyLoading(), o = e.useIsEmpty(), l = s.getTotalItemsCount(), c = s.getVisibleItemsCount();
   if (o)
     return null;
-  const m = s ? /* @__PURE__ */ n.createElement(I, { width: "200px" }) : t.format("list.paginationInfo", {
+  const m = a ? /* @__PURE__ */ n.createElement(Gt, { width: "200px" }) : t.format("list.paginationInfo", {
     visibleItemsCount: c,
     totalItemsCount: l
   });
   return /* @__PURE__ */ n.createElement(S, { ...i }, m);
-}, Ge = (i) => {
-  const t = b(g), e = h(), a = e.loader.useIsLoading(), s = e.loader.useIsInitiallyLoading();
-  return !e.batches.hasNextBatch() && !a ? null : /* @__PURE__ */ n.createElement(
+}, We = (i) => {
+  const t = b(g), e = h(), s = e.loader.useIsLoading(), a = e.loader.useIsInitiallyLoading();
+  return !e.batches.hasNextBatch() && !s ? null : /* @__PURE__ */ n.createElement(
     f,
     {
-      isPending: a && !s,
-      isDisabled: s,
+      isPending: s && !a,
+      isDisabled: a,
       ...i,
       onPress: () => e.batches.nextBatch(),
       variant: "plain",
@@ -804,38 +810,38 @@ const Te = "flow--list--items", Ie = "flow--list--items--is-loading", J = {
     },
     t.format("list.showMore")
   );
-}, Ke = () => /* @__PURE__ */ n.createElement("div", { className: He.footer }, /* @__PURE__ */ n.createElement(qe, null), /* @__PURE__ */ n.createElement(Ge, null));
+}, Ye = () => /* @__PURE__ */ n.createElement("div", { className: je.footer }, /* @__PURE__ */ n.createElement(Je, null), /* @__PURE__ */ n.createElement(We, null));
 function ut(i) {
   return null;
 }
-const je = () => ut, Je = Lt("List", (i) => {
-  var p, R, z, M, U;
-  const { children: t, batchSize: e, ...a } = i, s = (p = y(
+const Qe = () => ut, Xe = Lt("List", (i) => {
+  var p, N, R, z, M;
+  const { children: t, batchSize: e, ...s } = i, a = (p = y(
     t,
     nt
-  )) == null ? void 0 : p.props, o = (R = y(
+  )) == null ? void 0 : p.props, o = (N = y(
     t,
     Ht
-  )) == null ? void 0 : R.props, l = (z = y(t, ct)) == null ? void 0 : z.props, c = {
-    source: s ? {
-      ...s,
-      asyncLoader: s.children
+  )) == null ? void 0 : N.props, l = (R = y(t, ct)) == null ? void 0 : R.props, c = {
+    source: a ? {
+      ...a,
+      asyncLoader: a.children
     } : o ? {
       ...o,
       asyncResourceFactory: o.children
     } : l ? {
       staticData: l.data
     } : void 0
-  }, m = (M = y(t, ut)) == null ? void 0 : M.props, u = (U = y(t, lt)) == null ? void 0 : U.props, v = Le.useNew({
+  }, m = (z = y(t, ut)) == null ? void 0 : z.props, u = (M = y(t, lt)) == null ? void 0 : M.props, v = Te.useNew({
     loader: c,
-    filters: K(t, rt).map(
+    filters: G(t, rt).map(
       (F) => F.props
     ),
     search: m ? {
       render: m.children,
       textFieldProps: m
     } : void 0,
-    sorting: K(t, ot).map((F) => F.props),
+    sorting: G(t, ot).map((F) => F.props),
     itemView: u ? {
       ...u,
       renderFn: u.children
@@ -846,38 +852,38 @@ const je = () => ut, Je = Lt("List", (i) => {
     hasAction: !!i.onAction
   });
   return /* @__PURE__ */ n.createElement(
-    at.Provider,
+    st.Provider,
     {
       value: {
         list: v
       }
     },
-    /* @__PURE__ */ n.createElement(te, null),
-    /* @__PURE__ */ n.createElement("div", { className: pe.list }, /* @__PURE__ */ n.createElement(he, null), /* @__PURE__ */ n.createElement(Ne, { ...a }), /* @__PURE__ */ n.createElement(Ke, null))
+    /* @__PURE__ */ n.createElement(ee, null),
+    /* @__PURE__ */ n.createElement("div", { className: fe.list }, /* @__PURE__ */ n.createElement(ge, null), /* @__PURE__ */ n.createElement($e, { ...s }), /* @__PURE__ */ n.createElement(Ye, null))
   );
-}), Ba = () => ({
-  List: Je,
-  Filter: ze(),
-  Search: je(),
-  Sorting: Me(),
-  Item: Ue(),
+}), Rs = () => ({
+  List: Xe,
+  Filter: Oe(),
+  Search: Qe(),
+  Sorting: He(),
+  Item: qe(),
   ItemView: et,
-  StaticData: $e(),
-  LoaderAsync: Re(),
+  StaticData: Ge(),
+  LoaderAsync: Ue(),
   LoaderAsyncResource: qt()
 });
 export {
-  Je as List,
+  Xe as List,
   rt as ListFilter,
   lt as ListItem,
   et as ListItemView,
   nt as ListLoaderAsync,
   ot as ListSorting,
   ct as ListStaticData,
-  ze as TypedListFilter,
-  Ue as TypedListItem,
-  Re as TypedListLoaderAsync,
-  Me as TypedListSorting,
-  $e as TypedListStaticData,
-  Ba as typedList
+  Oe as TypedListFilter,
+  qe as TypedListItem,
+  Ue as TypedListLoaderAsync,
+  He as TypedListSorting,
+  Ge as TypedListStaticData,
+  Rs as typedList
 };