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

package/dist/List.js

@@ -28,13 +28,13 @@ 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 "./context-BB3_MApL.js";
 import { u as xt } from "./useOnChange-C1Quwyuz.js";
-import { getProperty as Pt } from "dot-prop";
-import { useReactTable as Bt, getCoreRowModel as Dt, getSortedRowModel as Nt, getFilteredRowModel as Rt, getPaginationRowModel as zt, getFacetedUniqueValues as Mt } from "@tanstack/react-table";
+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 P from "react-aria-components";
+import * as B from "react-aria-components";
 import { I as $t } from "./IllustratedMessage-B3MHD01M.js";
 import { I as Ot } from "./IconSearch-Bxe-heXD.js";
 import { H as tt } from "./Heading-1M1gRZfk.js";
@@ -130,10 +130,10 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
   const { children: t, locales: e, variables: a } = i;
   return b(e).format(t, a);
 }, ae = () => {
-  const i = h(), t = i.sorting.map((s) => /* @__PURE__ */ n.createElement(ee, { sorting: s, key: s.id }));
-  if (i.sorting.length === 0)
+  const i = h(), t = i.visibleSorting.map((s) => /* @__PURE__ */ n.createElement(ee, { sorting: s, key: s.id }));
+  if (t.length === 0)
     return null;
-  const e = i.sorting.find((s) => s.isSorted()), a = /* @__PURE__ */ n.createElement(S, null, e ? /* @__PURE__ */ n.createElement(
+  const e = i.visibleSorting.find((s) => s.isSorted()), a = /* @__PURE__ */ n.createElement(S, null, e ? /* @__PURE__ */ n.createElement(
     A,
     {
       locales: g,
@@ -240,7 +240,10 @@ const Gt = "flow--list--items--item--view", Kt = "flow--list--items--item--view-
     ...e.textFieldProps
   });
 }, he = (i) => {
-  const { className: t } = i, e = h(), a = e.filters.map((s) => /* @__PURE__ */ n.createElement(se, { key: s.property, filter: s }));
+  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
@@ -329,7 +332,7 @@ class ye {
   }
   getReactTableFilterFn() {
     return (t, e, a) => this.checkFilterMatches(
-      Pt(t.original, this.property),
+      Bt(t.original, this.property),
       a
     );
   }
@@ -404,11 +407,17 @@ class we {
     r(this, "name");
     r(this, "direction");
     r(this, "defaultEnabled");
-    this.list = t, this.property = e.property, this.name = e.name, this.direction = e.direction ?? "asc", this.defaultEnabled = !!e.defaultEnabled;
+    this.list = t, this.property = e.property, this.name = e.name, this.direction = e.direction ?? "asc", this.defaultEnabled = e.defaultEnabled ?? !1;
   }
   updateTableColumnDef(t) {
     t.enableSorting = !0;
   }
+  getReactTableColumnSort() {
+    return {
+      id: this.property,
+      desc: this.direction === "desc"
+    };
+  }
   isSorted() {
     return this.getTableColumn().getIsSorted() == this.direction;
   }
@@ -426,7 +435,7 @@ class we {
   }
 }
 const Ee = (i) => T(At(i));
-class B {
+class P {
   constructor(t, e = {}) {
     r(this, "list");
     r(this, "table");
@@ -437,25 +446,24 @@ class B {
         return;
       const a = typeof t == "function" ? t(e) : t;
       kt(() => {
-        this.tableState.value = this.getUpdatedTableState(e, a);
+        this.finalizeTableState(a), this.tableState.value = a;
       });
     });
     this.list = t, this.tableState = Ut(() => ({ value: void 0 })), this.table = this.useReactTable(e);
   }
   static useNew(t, e = {}) {
-    return new B(t, e);
+    return new P(t, e);
   }
   useReactTable(t = {}) {
-    const e = this.list.loader.useData(), a = this.list.sorting.filter((o) => o.defaultEnabled), s = Bt({
+    const e = this.list.loader.useData(), a = this.list.sorting.filter(
+      (o) => o.defaultEnabled !== !1
+    ), s = Pt({
       data: e,
       initialState: {
         pagination: {
           pageSize: this.list.batches.batchSize
         },
-        sorting: a.map((o) => ({
-          id: String(o.property),
-          desc: o.direction === "desc"
-        }))
+        sorting: a.map((o) => o.getReactTableColumnSort())
       },
       columns: this.getTableColumnDefs(),
       getCoreRowModel: Dt(),
@@ -478,8 +486,11 @@ class B {
       })) : this.tableState.value = t.getState();
     });
   }
-  getUpdatedTableState(t, e) {
-    return e;
+  finalizeTableState(t) {
+    const e = this.list.sorting.filter(
+      (a) => a.defaultEnabled === "hidden" && !t.sorting.some((s) => s.id === a.property)
+    ).map((a) => a.getReactTableColumnSort());
+    t.sorting.unshift(...e);
   }
   get searchString() {
     var t;
@@ -515,6 +526,9 @@ class D {
     r(this, "prevDataBatches", []);
     r(this, "batchLoadingStates", ["void"]);
     Vt(this, {
+      prevDataBatches: !1,
+      useMergedData: !1,
+      useIsLoading: !1,
       dataBatches: O.shallow,
       batchLoadingStates: O.shallow,
       mergedData: H,
@@ -704,7 +718,7 @@ let k = E, Le = class it {
       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 = B.useNew(this, {
+    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, {
       manualFiltering: this.loader.manualFiltering,
       manualPagination: this.loader.manualPagination,
       manualSorting: this.loader.manualSorting
@@ -716,6 +730,9 @@ let k = E, Le = class it {
   get isFiltered() {
     return this.filters.some((t) => t.isActive()) || !!this.search && this.search.isSet;
   }
+  get visibleSorting() {
+    return this.sorting.filter((t) => t.defaultEnabled !== "hidden");
+  }
   getSorting(t) {
     const e = this.sorting.find((a) => a.id === t);
     return _(!!e, `Could not get Sorting (ID: ${t})`), e;
@@ -740,7 +757,7 @@ const Te = "flow--list--items", Ie = "flow--list--items--is-loading", J = {
 }, 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);
   return /* @__PURE__ */ n.createElement(
-    P.GridListItem,
+    B.GridListItem,
     {
       className: v,
       onAction: c,
@@ -749,11 +766,11 @@ const Te = "flow--list--items", Ie = "flow--list--items--is-loading", J = {
     },
     e ?? s.render(t)
   );
-}, xe = (i) => /* @__PURE__ */ n.createElement(P.GridListItem, { textValue: "-", className: V.item }, i.children), Pe = () => {
+}, xe = (i) => /* @__PURE__ */ n.createElement(B.GridListItem, { textValue: "-", className: V.item }, i.children), Be = () => {
   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")));
-}, Be = () => /* @__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(Be, null);
+}, 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(
@@ -761,7 +778,7 @@ const Te = "flow--list--items", Ie = "flow--list--items--is-loading", J = {
     t,
     s && J.isLoading
   );
-  return l ? /* @__PURE__ */ n.createElement(Pe, null) : /* @__PURE__ */ n.createElement("div", { "aria-hidden": o, "aria-busy": s }, /* @__PURE__ */ n.createElement(P.GridList, { className: m, ...e }, o ? /* @__PURE__ */ n.createElement(De, null) : c));
+  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) => {
@@ -838,7 +855,7 @@ const je = () => ut, Je = Lt("List", (i) => {
     /* @__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))
   );
-}), Pa = () => ({
+}), Ba = () => ({
   List: Je,
   Filter: ze(),
   Search: je(),
@@ -862,5 +879,5 @@ export {
   Re as TypedListLoaderAsync,
   Me as TypedListSorting,
   $e as TypedListStaticData,
-  Pa as typedList
+  Ba as typedList
 };