@mittwald/flow-react-components 1.5.0-next.48 → 1.5.0-next.49

package/dist/js/packages/components/src/components/Action/models/ActionState.mjs

@@ -2,86 +2,24 @@
 /* */
 import useSelector from "../../../lib/mobx/useSelector.mjs";
 import { useStatic } from "../../../lib/hooks/useStatic.mjs";
-import { sleep } from "../../../lib/promises/sleep.mjs";
-import { action, computed, makeObservable, observable } from "mobx";
+import { ActionState as ActionState$1, actionStateDurations } from "../../../../../components-base/src/action/ActionState.mjs";
+import "../../../../../components-base/src/index.mjs";
 //#region src/components/Action/models/ActionState.ts
-var duration = {
-	pending: 1e3,
-	succeeded: 800,
-	failed: 2e3
-};
-var ActionState = class ActionState {
-	showFeedback;
-	state = "isIdle";
-	setPendingTimeout;
-	error;
-	isAsync = false;
-	constructor() {
-		makeObservable(this, {
-			state: observable,
-			updateState: action,
-			isBusy: computed
-		});
-	}
+var duration = actionStateDurations;
+/**
+* The state machine is `@mittwald/flow-components-base`'s, shared with every
+* remote binding; this adds the hooks.
+*/
+var ActionState = class ActionState extends ActionState$1 {
 	static useNew() {
 		return useStatic(() => new ActionState());
 	}
-	updateState(newState) {
-		this.state = newState;
-	}
 	useValue() {
 		return useSelector(() => this.state, [this]);
 	}
 	useIsBusy() {
 		return useSelector(() => this.isBusy, [this]);
 	}
-	get isBusy() {
-		return this.state !== "isIdle";
-	}
-	onAsyncStart() {
-		this.clearPendingTimeout();
-		this.isAsync = true;
-		this.updateState("isExecuting");
-		this.setPendingTimeout = window.setTimeout(() => this.startPending(), duration.pending);
-	}
-	async onSucceeded() {
-		await this.onDone();
-	}
-	async onFailed(error) {
-		this.error = error ?? /* @__PURE__ */ new Error("Unknown error");
-		await this.onDone();
-	}
-	withFeedback(feedback) {
-		this.showFeedback = feedback;
-		return this;
-	}
-	async startFailedFeedback() {
-		this.updateState("isFailed");
-		await sleep(duration.failed);
-		this.resetAfterDone();
-	}
-	async startSucceededFeedback() {
-		this.updateState("isSucceeded");
-		await sleep(duration.succeeded);
-		this.resetAfterDone();
-	}
-	resetAfterDone() {
-		this.updateState("isIdle");
-		this.isAsync = false;
-		this.error = void 0;
-	}
-	clearPendingTimeout() {
-		if (this.setPendingTimeout) window.clearTimeout(this.setPendingTimeout);
-	}
-	onDone() {
-		this.clearPendingTimeout();
-		if (this.error) return this.startFailedFeedback();
-		else if (this.showFeedback !== false && (this.showFeedback || this.isAsync)) return this.startSucceededFeedback();
-		else this.resetAfterDone();
-	}
-	startPending() {
-		this.updateState("isPending");
-	}
 };
 //#endregion
 export { ActionState, duration };

package/dist/js/packages/components/src/components/Action/models/ActionState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionState.mjs","names":["mobxAction"],"sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  action as mobxAction,\n  computed,\n  makeObservable,\n  observable,\n} from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { sleep } from \"@/lib/promises/sleep\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type ActionStateValue =\n  \"isIdle\" | \"isSucceeded\" | \"isPending\" | \"isExecuting\" | \"isFailed\";\n\nexport const duration = {\n  pending: 1000,\n  succeeded: 800,\n  failed: 2000,\n};\n\nexport class ActionState {\n  private showFeedback?: boolean;\n  public state: ActionStateValue = \"isIdle\";\n  private setPendingTimeout: number | undefined;\n  public error: unknown;\n  private isAsync = false;\n\n  public constructor() {\n    makeObservable(this, {\n      state: observable,\n      updateState: mobxAction,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public updateState(newState: ActionStateValue): void {\n    this.state = newState;\n  }\n\n  public useValue(): ActionStateValue {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n\n  public get isBusy(): boolean {\n    return this.state !== \"isIdle\";\n  }\n\n  public onAsyncStart(): void {\n    this.clearPendingTimeout();\n    this.isAsync = true;\n    this.updateState(\"isExecuting\");\n    this.setPendingTimeout = window.setTimeout(\n      () => this.startPending(),\n      duration.pending,\n    );\n  }\n\n  public async onSucceeded(): Promise<void> {\n    await this.onDone();\n  }\n\n  public async onFailed(error?: unknown): Promise<void> {\n    this.error = error ?? new Error(\"Unknown error\");\n    await this.onDone();\n  }\n\n  public withFeedback(feedback?: boolean): ActionState {\n    this.showFeedback = feedback;\n    return this;\n  }\n\n  private async startFailedFeedback(): Promise<void> {\n    this.updateState(\"isFailed\");\n    await sleep(duration.failed);\n    this.resetAfterDone();\n  }\n\n  private async startSucceededFeedback(): Promise<void> {\n    this.updateState(\"isSucceeded\");\n    await sleep(duration.succeeded);\n    this.resetAfterDone();\n  }\n\n  private resetAfterDone(): void {\n    this.updateState(\"isIdle\");\n    this.isAsync = false;\n    this.error = undefined;\n  }\n\n  private clearPendingTimeout(): void {\n    if (this.setPendingTimeout) {\n      window.clearTimeout(this.setPendingTimeout);\n    }\n  }\n\n  private onDone(): Promise<void> | void {\n    this.clearPendingTimeout();\n    if (this.error) {\n      return this.startFailedFeedback();\n    } else if (\n      this.showFeedback !== false &&\n      (this.showFeedback || this.isAsync)\n    ) {\n      return this.startSucceededFeedback();\n    } else {\n      this.resetAfterDone();\n    }\n  }\n\n  private startPending(): void {\n    this.updateState(\"isPending\");\n  }\n}\n"],"mappings":";;;;;;;AAaA,IAAa,WAAW;CACtB,SAAS;CACT,WAAW;CACX,QAAQ;AACV;AAEA,IAAa,cAAb,MAAa,YAAY;CACvB;CACA,QAAiC;CACjC;CACA;CACA,UAAkB;CAElB,cAAqB;EACnB,eAAe,MAAM;GACnB,OAAO;GACP,aAAaA;GACb,QAAQ;EACV,CAAC;CACH;CAEA,OAAc,SAAsB;EAClC,OAAO,gBAAgB,IAAI,YAAY,CAAC;CAC1C;CAEA,YAAmB,UAAkC;EACnD,KAAK,QAAQ;CACf;CAEA,WAAoC;EAClC,OAAO,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC;CAC7C;CAEA,YAA4B;EAC1B,OAAO,kBAAkB,KAAK,QAAQ,CAAC,IAAI,CAAC;CAC9C;CAEA,IAAW,SAAkB;EAC3B,OAAO,KAAK,UAAU;CACxB;CAEA,eAA4B;EAC1B,KAAK,oBAAoB;EACzB,KAAK,UAAU;EACf,KAAK,YAAY,aAAa;EAC9B,KAAK,oBAAoB,OAAO,iBACxB,KAAK,aAAa,GACxB,SAAS,OACX;CACF;CAEA,MAAa,cAA6B;EACxC,MAAM,KAAK,OAAO;CACpB;CAEA,MAAa,SAAS,OAAgC;EACpD,KAAK,QAAQ,yBAAS,IAAI,MAAM,eAAe;EAC/C,MAAM,KAAK,OAAO;CACpB;CAEA,aAAoB,UAAiC;EACnD,KAAK,eAAe;EACpB,OAAO;CACT;CAEA,MAAc,sBAAqC;EACjD,KAAK,YAAY,UAAU;EAC3B,MAAM,MAAM,SAAS,MAAM;EAC3B,KAAK,eAAe;CACtB;CAEA,MAAc,yBAAwC;EACpD,KAAK,YAAY,aAAa;EAC9B,MAAM,MAAM,SAAS,SAAS;EAC9B,KAAK,eAAe;CACtB;CAEA,iBAA+B;EAC7B,KAAK,YAAY,QAAQ;EACzB,KAAK,UAAU;EACf,KAAK,QAAQ,KAAA;CACf;CAEA,sBAAoC;EAClC,IAAI,KAAK,mBACP,OAAO,aAAa,KAAK,iBAAiB;CAE9C;CAEA,SAAuC;EACrC,KAAK,oBAAoB;EACzB,IAAI,KAAK,OACP,OAAO,KAAK,oBAAoB;OAC3B,IACL,KAAK,iBAAiB,UACrB,KAAK,gBAAgB,KAAK,UAE3B,OAAO,KAAK,uBAAuB;OAEnC,KAAK,eAAe;CAExB;CAEA,eAA6B;EAC3B,KAAK,YAAY,WAAW;CAC9B;AACF"}
+{"version":3,"file":"ActionState.mjs","names":["ActionStateBase"],"sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  ActionState as ActionStateBase,\n  actionStateDurations,\n} from \"@mittwald/flow-components-base\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type { ActionStateValue } from \"@mittwald/flow-components-base\";\n\nexport const duration = actionStateDurations;\n\n/**\n * The state machine is `@mittwald/flow-components-base`'s, shared with every\n * remote binding; this adds the hooks.\n */\nexport class ActionState extends ActionStateBase {\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public useValue(): ActionStateBase[\"state\"] {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,WAAW;;;;;AAMxB,IAAa,cAAb,MAAa,oBAAoBA,cAAgB;CAC/C,OAAc,SAAsB;EAClC,OAAO,gBAAgB,IAAI,YAAY,CAAC;CAC1C;CAEA,WAA4C;EAC1C,OAAO,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC;CAC7C;CAEA,YAA4B;EAC1B,OAAO,kBAAkB,KAAK,QAAQ,CAAC,IAAI,CAAC;CAC9C;AACF"}

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs

@@ -5,8 +5,8 @@ import __locale_default from "../../../../../../../../_virtual/_6.locale.mjs";
 import { useContext, useMemo } from "react";
 import { RangeCalendarStateContext } from "react-aria-components";
 import invariant from "invariant";
-import { DateTime } from "luxon";
 import { CalendarDate, toCalendarDate } from "@internationalized/date";
+import { DateTime } from "luxon";
 //#region src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.ts
 var clampCalendarDate = (date, minDate, maxDate) => {
 	if (minDate && date.compare(minDate) < 0) return minDate;

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs

@@ -46,7 +46,7 @@ var ActiveFilters = observer((props) => {
 			size: "s",
 			variant: "plain",
 			color: "secondary",
-			onPress: () => Filter.storeFilters(list, {
+			onPress: () => Filter.storeFilters(list, list.filters, {
 				autosave: false,
 				manualSave: true
 			}),

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { transformDateValueToFormattedDate } from \"@/lib/date/transformDateValueToFormattedDate\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {`${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}`}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, { autosave: false, manualSave: true })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAE7D,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,GAAG,kCAAkC,MAAM,KAAK,EAAE,KAAK,kCAAkC,MAAM,GAAG,IAC3F,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM;IAAE,UAAU;IAAO,YAAY;GAAK,CAAC;GAEjE,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GAEjC,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}
+{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { transformDateValueToFormattedDate } from \"@/lib/date/transformDateValueToFormattedDate\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {`${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}`}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, list.filters, {\n            autosave: false,\n            manualSave: true,\n          })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAE7D,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,GAAG,kCAAkC,MAAM,KAAK,EAAE,KAAK,kCAAkC,MAAM,GAAG,IAC3F,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM,KAAK,SAAS;IACtC,UAAU;IACV,YAAY;GACd,CAAC;GAEH,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GAEjC,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}

package/dist/js/packages/components/src/components/List/model/List.mjs

@@ -1,10 +1,10 @@
 "use client"
 /* */
 import { useWarnDeprecation } from "../../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { ListBatchesController } from "../../../../../components-base/src/list/pagination/ListBatchesController.mjs";
 import { Filter } from "./filter/Filter.mjs";
 import { DateRangeFilter } from "./filter/DateRangeFilter.mjs";
 import { ItemCollection } from "./item/ItemCollection.mjs";
-import { BatchesController } from "./pagination/BatchesController.mjs";
 import { Sorting } from "./sorting/Sorting.mjs";
 import { ReactTable } from "./ReactTable.mjs";
 import { IncrementalLoader } from "./loading/IncrementalLoader.mjs";
@@ -54,24 +54,35 @@ var List = class List {
 		this.accordion = accordion;
 		this.infiniteScroll = infiniteScroll;
 		this.table = table ? new Table(this, table) : void 0;
-		this.batches = new BatchesController(this, batchesController);
+		this.batches = new ListBatchesController(this, batchesController);
+		this.filters.forEach((f) => f.onFilterUpdated(() => this.batches.reset()));
+		this.search?.onUpdated(() => this.batches.reset());
 		this.componentProps = componentProps;
+		this.getItemId = getItemId;
 		this.loader = IncrementalLoader.useNew(this, loader);
 		this.onAction = onAction;
-		this.getItemId = getItemId;
 		this.loadingItemsCount = loadingItemsCount;
 		this.reactTable = ReactTable.useNew(this, onChange, {
 			manualFiltering: this.loader.manualFiltering,
 			manualPagination: this.loader.manualPagination,
 			manualSorting: this.loader.manualSorting
 		});
-		this.viewMode = new ListViewMode(this, { defaultViewMode });
+		this.viewMode = ListViewMode.useNew(this, { defaultViewMode });
 		this.emptyView = emptyView;
 		this.emptySearchResultView = emptySearchResultView;
 		useEffect(() => {
 			this.filters.forEach((f) => f.deleteUnknownFilterValues());
 		}, [this.filters]);
 	}
+	get dataTable() {
+		return this.reactTable.table;
+	}
+	get settings() {
+		return this.settingsStorage;
+	}
+	get settingsDefaults() {
+		return this.settingsStorageDefaults;
+	}
 	getEmptyViewType() {
 		return this.hasActiveFilters || this.search?.isSet ? "search" : "list";
 	}

package/dist/js/packages/components/src/components/List/model/List.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","names":[],"sources":["../../../../../../../../src/components/List/model/List.ts"],"sourcesContent":["import { ItemCollection } from \"@/components/List/model/item/ItemCollection\";\nimport { BatchesController } from \"@/components/List/model/pagination/BatchesController\";\nimport { Filter } from \"./filter/Filter\";\nimport { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport ReactTable from \"@/components/List/model/ReactTable\";\nimport type {\n  EmptyViewType,\n  GetItemId,\n  ItemActionFn,\n  ListSettingsStorageDefaults,\n  ListShape,\n  ListSupportedComponentProps,\n} from \"@/components/List/model/types\";\nimport { IncrementalLoader } from \"@/components/List/model/loading/IncrementalLoader\";\nimport invariant from \"invariant\";\nimport { Search } from \"@/components/List/model/search/Search\";\nimport { ItemView } from \"@/components/List/model/item/ItemView\";\nimport { Table } from \"@/components/List/model/table/Table\";\nimport { useEffect, type ReactNode } from \"react\";\nimport { ListSettingsStore } from \"./ListSettingsStore\";\nimport { ListViewMode } from \"./ListViewMode\";\nimport { useSettings } from \"@/components/SettingsProvider/SettingsProvider\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport class List<T = unknown, TMeta = unknown> {\n  public readonly filters: (\n    Filter<T, never, never> | DateRangeFilter<T, never>\n  )[];\n  public readonly itemView?: ItemView<T>;\n  public readonly table?: Table<T>;\n  public readonly search?: Search<T>;\n  public readonly sorting: Sorting<T>[];\n  public readonly items: ItemCollection<T>;\n  public readonly reactTable: ReactTable<T>;\n  public readonly batches: BatchesController<T>;\n  public readonly loader: IncrementalLoader<T>;\n  public readonly onAction?: ItemActionFn<T>;\n  public readonly accordion: boolean;\n  public readonly infiniteScroll: boolean;\n  public readonly getItemId?: GetItemId<T>;\n  public readonly componentProps: ListSupportedComponentProps;\n  public metadata?: TMeta;\n  public readonly settingsStorage?: ListSettingsStore<T>;\n  public readonly loadingItemsCount;\n  public readonly viewMode: ListViewMode<T>;\n  public readonly emptyView?: ReactNode;\n  public readonly emptySearchResultView?: ReactNode;\n  public readonly settingsStorageDefaults?: ListSettingsStorageDefaults;\n\n  public constructor(shape: ListShape<T, TMeta>) {\n    const {\n      settingStorageKey,\n      itemView,\n      table,\n      filters = [],\n      sorting = [],\n      batchesController,\n      onChange,\n      loader,\n      search,\n      onAction,\n      getItemId,\n      defaultViewMode,\n      accordion = false,\n      infiniteScroll = false,\n      loadingItemsCount = 5,\n      settingsStorageDefaults,\n      emptyView,\n      emptySearchResultView,\n      ...componentProps\n    } = shape;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (itemView?.fallback !== undefined) {\n      warnDeprecation(\n        \"The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.\",\n      );\n    }\n\n    this.settingsStorageDefaults = settingsStorageDefaults;\n    const generalSettingsStore = useSettings();\n\n    this.settingsStorage =\n      settingStorageKey && generalSettingsStore\n        ? new ListSettingsStore(this, generalSettingsStore, {\n            storageKey: settingStorageKey,\n          })\n        : undefined;\n\n    this.items = new ItemCollection(this);\n    this.filters = filters.map((shape) =>\n      shape.mode === \"dateRange\"\n        ? new DateRangeFilter(this, shape)\n        : new Filter(this, shape),\n    );\n    this.sorting = sorting.map((shape) => new Sorting<T>(this, shape));\n    this.search = search ? new Search(this, search) : undefined;\n    this.itemView = itemView ? new ItemView(this, itemView) : undefined;\n    this.accordion = accordion;\n    this.infiniteScroll = infiniteScroll;\n    this.table = table ? new Table(this, table) : undefined;\n    this.batches = new BatchesController(this, batchesController);\n    this.componentProps = componentProps;\n    this.loader = IncrementalLoader.useNew<T>(this, loader);\n    this.onAction = onAction;\n    this.getItemId = getItemId;\n    this.loadingItemsCount = loadingItemsCount;\n    this.reactTable = ReactTable.useNew(this, onChange, {\n      manualFiltering: this.loader.manualFiltering,\n      manualPagination: this.loader.manualPagination,\n      manualSorting: this.loader.manualSorting,\n    });\n    this.viewMode = new ListViewMode(this, { defaultViewMode });\n    this.emptyView = emptyView;\n    this.emptySearchResultView = emptySearchResultView;\n\n    useEffect(() => {\n      this.filters.forEach((f) => f.deleteUnknownFilterValues());\n    }, [this.filters]);\n  }\n\n  public getEmptyViewType(): EmptyViewType {\n    return this.hasActiveFilters || this.search?.isSet ? \"search\" : \"list\";\n  }\n\n  public get hasActiveFilters(): boolean {\n    return this.filters.some((f) => f.isActive());\n  }\n\n  public get visibleSorting() {\n    return this.sorting.filter((s) => s.initialEnabled !== \"hidden\");\n  }\n\n  public static useNew<T, TMeta = unknown>(\n    shape: ListShape<T, TMeta>,\n  ): List<T, TMeta> {\n    return new List<T, TMeta>(shape);\n  }\n\n  public getSorting(id: string): Sorting<T> {\n    const sorting = this.sorting.find((s) => s.id === id);\n    invariant(!!sorting, `Could not get Sorting (ID: ${id})`);\n    return sorting;\n  }\n\n  public clearSorting(): void {\n    return this.sorting.forEach((s) => s.clear());\n  }\n\n  public resetFilters(): void {\n    return this.filters.forEach((f) => f.resetValues());\n  }\n\n  public clearFilters(): void {\n    return this.filters.forEach((f) => f.clear());\n  }\n\n  public useIsEmpty(): boolean {\n    return !this.loader.useIsLoading() && this.items.entries.length === 0;\n  }\n}\n\nexport default List;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,IAAa,OAAb,MAAa,KAAmC;CAC9C;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,OAA4B;EAC7C,MAAM,EACJ,mBACA,UACA,OACA,UAAU,CAAC,GACX,UAAU,CAAC,GACX,mBACA,UACA,QACA,QACA,UACA,WACA,iBACA,YAAY,OACZ,iBAAiB,OACjB,oBAAoB,GACpB,yBACA,WACA,uBACA,GAAG,mBACD;EAEJ,MAAM,kBAAkB,mBAAmB;EAC3C,IAAI,UAAU,aAAa,KAAA,GACzB,gBACE,uGACF;EAGF,KAAK,0BAA0B;EAC/B,MAAM,uBAAuB,YAAY;EAEzC,KAAK,kBACH,qBAAqB,uBACjB,IAAI,kBAAkB,MAAM,sBAAsB,EAChD,YAAY,kBACd,CAAC,IACD,KAAA;EAEN,KAAK,QAAQ,IAAI,eAAe,IAAI;EACpC,KAAK,UAAU,QAAQ,KAAK,UAC1B,MAAM,SAAS,cACX,IAAI,gBAAgB,MAAM,KAAK,IAC/B,IAAI,OAAO,MAAM,KAAK,CAC5B;EACA,KAAK,UAAU,QAAQ,KAAK,UAAU,IAAI,QAAW,MAAM,KAAK,CAAC;EACjE,KAAK,SAAS,SAAS,IAAI,OAAO,MAAM,MAAM,IAAI,KAAA;EAClD,KAAK,WAAW,WAAW,IAAI,SAAS,MAAM,QAAQ,IAAI,KAAA;EAC1D,KAAK,YAAY;EACjB,KAAK,iBAAiB;EACtB,KAAK,QAAQ,QAAQ,IAAI,MAAM,MAAM,KAAK,IAAI,KAAA;EAC9C,KAAK,UAAU,IAAI,kBAAkB,MAAM,iBAAiB;EAC5D,KAAK,iBAAiB;EACtB,KAAK,SAAS,kBAAkB,OAAU,MAAM,MAAM;EACtD,KAAK,WAAW;EAChB,KAAK,YAAY;EACjB,KAAK,oBAAoB;EACzB,KAAK,aAAa,WAAW,OAAO,MAAM,UAAU;GAClD,iBAAiB,KAAK,OAAO;GAC7B,kBAAkB,KAAK,OAAO;GAC9B,eAAe,KAAK,OAAO;EAC7B,CAAC;EACD,KAAK,WAAW,IAAI,aAAa,MAAM,EAAE,gBAAgB,CAAC;EAC1D,KAAK,YAAY;EACjB,KAAK,wBAAwB;EAE7B,gBAAgB;GACd,KAAK,QAAQ,SAAS,MAAM,EAAE,0BAA0B,CAAC;EAC3D,GAAG,CAAC,KAAK,OAAO,CAAC;CACnB;CAEA,mBAAyC;EACvC,OAAO,KAAK,oBAAoB,KAAK,QAAQ,QAAQ,WAAW;CAClE;CAEA,IAAW,mBAA4B;EACrC,OAAO,KAAK,QAAQ,MAAM,MAAM,EAAE,SAAS,CAAC;CAC9C;CAEA,IAAW,iBAAiB;EAC1B,OAAO,KAAK,QAAQ,QAAQ,MAAM,EAAE,mBAAmB,QAAQ;CACjE;CAEA,OAAc,OACZ,OACgB;EAChB,OAAO,IAAI,KAAe,KAAK;CACjC;CAEA,WAAkB,IAAwB;EACxC,MAAM,UAAU,KAAK,QAAQ,MAAM,MAAM,EAAE,OAAO,EAAE;EACpD,UAAU,CAAC,CAAC,SAAS,8BAA8B,GAAG,EAAE;EACxD,OAAO;CACT;CAEA,eAA4B;EAC1B,OAAO,KAAK,QAAQ,SAAS,MAAM,EAAE,MAAM,CAAC;CAC9C;CAEA,eAA4B;EAC1B,OAAO,KAAK,QAAQ,SAAS,MAAM,EAAE,YAAY,CAAC;CACpD;CAEA,eAA4B;EAC1B,OAAO,KAAK,QAAQ,SAAS,MAAM,EAAE,MAAM,CAAC;CAC9C;CAEA,aAA6B;EAC3B,OAAO,CAAC,KAAK,OAAO,aAAa,KAAK,KAAK,MAAM,QAAQ,WAAW;CACtE;AACF"}
+{"version":3,"file":"List.mjs","names":["BatchesController"],"sources":["../../../../../../../../src/components/List/model/List.ts"],"sourcesContent":["import { ItemCollection } from \"@/components/List/model/item/ItemCollection\";\nimport { BatchesController } from \"@/components/List/model/pagination/BatchesController\";\nimport { Filter } from \"./filter/Filter\";\nimport { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport ReactTable from \"@/components/List/model/ReactTable\";\nimport type {\n  EmptyViewType,\n  GetItemId,\n  ItemActionFn,\n  ListSettingsStorageDefaults,\n  ListShape,\n  ListSupportedComponentProps,\n} from \"@/components/List/model/types\";\nimport { IncrementalLoader } from \"@/components/List/model/loading/IncrementalLoader\";\nimport invariant from \"invariant\";\nimport { Search } from \"@/components/List/model/search/Search\";\nimport { ItemView } from \"@/components/List/model/item/ItemView\";\nimport { Table } from \"@/components/List/model/table/Table\";\nimport { useEffect, type ReactNode } from \"react\";\nimport { ListSettingsStore } from \"./ListSettingsStore\";\nimport { ListViewMode } from \"./ListViewMode\";\nimport { useSettings } from \"@/components/SettingsProvider/SettingsProvider\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport type {\n  ListModelContext,\n  ListSettingsPort,\n} from \"@mittwald/flow-components-base\";\nimport type { Table as ReactTableInstance } from \"@tanstack/table-core\";\n\nexport class List<T = unknown, TMeta = unknown> implements ListModelContext<T> {\n  public readonly filters: (\n    Filter<T, never, never> | DateRangeFilter<T, never>\n  )[];\n  public readonly itemView?: ItemView<T>;\n  public readonly table?: Table<T>;\n  public readonly search?: Search<T>;\n  public readonly sorting: Sorting<T>[];\n  public readonly items: ItemCollection<T>;\n  public readonly reactTable: ReactTable<T>;\n  public readonly batches: BatchesController<T>;\n  public readonly loader: IncrementalLoader<T>;\n  public readonly onAction?: ItemActionFn<T>;\n  public readonly accordion: boolean;\n  public readonly infiniteScroll: boolean;\n  public readonly getItemId?: GetItemId<T>;\n  public readonly componentProps: ListSupportedComponentProps;\n  public metadata?: TMeta;\n  public readonly settingsStorage?: ListSettingsStore<T>;\n  public readonly loadingItemsCount;\n  public readonly viewMode: ListViewMode<T>;\n  public readonly emptyView?: ReactNode;\n  public readonly emptySearchResultView?: ReactNode;\n  public readonly settingsStorageDefaults?: ListSettingsStorageDefaults;\n\n  public constructor(shape: ListShape<T, TMeta>) {\n    const {\n      settingStorageKey,\n      itemView,\n      table,\n      filters = [],\n      sorting = [],\n      batchesController,\n      onChange,\n      loader,\n      search,\n      onAction,\n      getItemId,\n      defaultViewMode,\n      accordion = false,\n      infiniteScroll = false,\n      loadingItemsCount = 5,\n      settingsStorageDefaults,\n      emptyView,\n      emptySearchResultView,\n      ...componentProps\n    } = shape;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (itemView?.fallback !== undefined) {\n      warnDeprecation(\n        \"The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.\",\n      );\n    }\n\n    this.settingsStorageDefaults = settingsStorageDefaults;\n    const generalSettingsStore = useSettings();\n\n    this.settingsStorage =\n      settingStorageKey && generalSettingsStore\n        ? new ListSettingsStore(this, generalSettingsStore, {\n            storageKey: settingStorageKey,\n          })\n        : undefined;\n\n    this.items = new ItemCollection(this);\n    this.filters = filters.map((shape) =>\n      shape.mode === \"dateRange\"\n        ? new DateRangeFilter(this, shape)\n        : new Filter(this, shape),\n    );\n    this.sorting = sorting.map((shape) => new Sorting<T>(this, shape));\n    this.search = search ? new Search(this, search) : undefined;\n    this.itemView = itemView ? new ItemView(this, itemView) : undefined;\n    this.accordion = accordion;\n    this.infiniteScroll = infiniteScroll;\n    this.table = table ? new Table(this, table) : undefined;\n    this.batches = new BatchesController(this, batchesController);\n\n    /*\n     * The controller no longer subscribes itself: the filters and the search\n     * are this list's, and handing a list of concrete filters to a shared\n     * model is the `Table<never>` variance trap. `IncrementalLoader` still\n     * subscribes in its own constructor, which runs right after this, so the\n     * order of the two resets is unchanged.\n     */\n    this.filters.forEach((f) => f.onFilterUpdated(() => this.batches.reset()));\n    this.search?.onUpdated(() => this.batches.reset());\n    this.componentProps = componentProps;\n    /*\n     * Before the loader: its state takes `getItemId` over in its constructor,\n     * and a loader built first would never deduplicate.\n     */\n    this.getItemId = getItemId;\n    this.loader = IncrementalLoader.useNew<T>(this, loader);\n    this.onAction = onAction;\n    this.loadingItemsCount = loadingItemsCount;\n    this.reactTable = ReactTable.useNew(this, onChange, {\n      manualFiltering: this.loader.manualFiltering,\n      manualPagination: this.loader.manualPagination,\n      manualSorting: this.loader.manualSorting,\n    });\n    this.viewMode = ListViewMode.useNew(this, { defaultViewMode });\n    this.emptyView = emptyView;\n    this.emptySearchResultView = emptySearchResultView;\n\n    useEffect(() => {\n      this.filters.forEach((f) => f.deleteUnknownFilterValues());\n    }, [this.filters]);\n  }\n\n  /*\n   * `ListModelContext` — what the shared model in\n   * `@mittwald/flow-components-base` reaches for, so `Sorting` and `Search` can\n   * keep being handed the list itself. Getters, because the model is built\n   * before the table is.\n   */\n  public get dataTable(): ReactTableInstance<T> {\n    return this.reactTable.table;\n  }\n\n  public get settings(): ListSettingsPort | undefined {\n    return this.settingsStorage;\n  }\n\n  public get settingsDefaults(): ListSettingsStorageDefaults | undefined {\n    return this.settingsStorageDefaults;\n  }\n\n  public getEmptyViewType(): EmptyViewType {\n    return this.hasActiveFilters || this.search?.isSet ? \"search\" : \"list\";\n  }\n\n  public get hasActiveFilters(): boolean {\n    return this.filters.some((f) => f.isActive());\n  }\n\n  public get visibleSorting() {\n    return this.sorting.filter((s) => s.initialEnabled !== \"hidden\");\n  }\n\n  public static useNew<T, TMeta = unknown>(\n    shape: ListShape<T, TMeta>,\n  ): List<T, TMeta> {\n    return new List<T, TMeta>(shape);\n  }\n\n  public getSorting(id: string): Sorting<T> {\n    const sorting = this.sorting.find((s) => s.id === id);\n    invariant(!!sorting, `Could not get Sorting (ID: ${id})`);\n    return sorting;\n  }\n\n  public clearSorting(): void {\n    return this.sorting.forEach((s) => s.clear());\n  }\n\n  public resetFilters(): void {\n    return this.filters.forEach((f) => f.resetValues());\n  }\n\n  public clearFilters(): void {\n    return this.filters.forEach((f) => f.clear());\n  }\n\n  public useIsEmpty(): boolean {\n    return !this.loader.useIsLoading() && this.items.entries.length === 0;\n  }\n}\n\nexport default List;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/List/model/ListSettingsStore.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListSettingsStore.mjs","names":[],"sources":["../../../../../../../../src/components/List/model/ListSettingsStore.ts"],"sourcesContent":["import type { SettingsStore } from \"@/components/SettingsProvider/models/SettingsStore\";\nimport type { ListSettingsStorageShape } from \"./types\";\nimport type List from \"./List\";\nimport z from \"zod\";\n\nexport interface ListSettingsStoreOperationOptions {\n  autosave?: boolean;\n  manualSave?: boolean;\n}\n\nconst supportedSettings = {\n  activeFilters: {\n    supports: {\n      autosave: true,\n      manualSave: true,\n    },\n    schema: z.record(z.string().or(z.symbol()), z.array(z.string())).optional(),\n  },\n  viewMode: {\n    supports: {\n      autosave: true,\n      manualSave: false,\n    },\n    schema: z.enum([\"list\", \"table\", \"tiles\"]).optional(),\n  },\n  sorting: {\n    supports: {\n      autosave: true,\n      manualSave: false,\n    },\n    schema: z\n      .object({\n        direction: z.enum([\"asc\", \"desc\"]),\n        property: z.string().or(z.number()),\n      })\n      .optional(),\n  },\n  search: {\n    supports: {\n      autosave: true,\n      manualSave: false,\n    },\n    schema: z\n      .object({\n        value: z.string().optional(),\n      })\n      .optional(),\n  },\n} as const;\n\ntype SupportedSettings = keyof typeof supportedSettings;\n\ntype SchemaOf<T extends SupportedSettings> =\n  (typeof supportedSettings)[T][\"schema\"];\n\nexport class ListSettingsStore<T> {\n  public readonly list: List<T>;\n  public readonly storageKey: string;\n  private readonly settingsStore: SettingsStore;\n\n  public constructor(\n    list: List<T>,\n    store: SettingsStore,\n    shape: ListSettingsStorageShape,\n  ) {\n    this.list = list;\n    this.settingsStore = store;\n    this.storageKey = shape.storageKey;\n  }\n\n  private getStorageKey(key: string, autosave = false) {\n    const autosaveSuffix = autosave ? \".autosave\" : \"\";\n    return `${this.storageKey}.${key}${autosaveSuffix}`;\n  }\n\n  public store<T extends SupportedSettings>(\n    key: T,\n    value: z.infer<(typeof supportedSettings)[T][\"schema\"]>,\n    options: ListSettingsStoreOperationOptions,\n  ) {\n    const settings = supportedSettings[key];\n\n    if (settings.supports.manualSave && options.manualSave) {\n      this.settingsStore.set(\n        \"List\",\n        this.getStorageKey(key, false),\n        settings.schema,\n        value as never,\n      );\n    }\n    if (settings.supports.autosave && options.autosave) {\n      this.settingsStore.set(\n        \"List\",\n        this.getStorageKey(key, true),\n        settings.schema,\n        value as never,\n      );\n    }\n  }\n\n  public get<T extends SupportedSettings>(\n    key: T,\n    options: ListSettingsStoreOperationOptions,\n  ): z.infer<SchemaOf<T>> | undefined {\n    const settings = supportedSettings[key];\n    const { autosave, manualSave = !autosave } = options; // to ensure settings is used and avoid unused variable error\n\n    const getAutosavedValue = () =>\n      this.settingsStore.get(\n        \"List\",\n        this.getStorageKey(key, options.autosave),\n        settings.schema,\n      ) as z.infer<SchemaOf<T>> | undefined;\n\n    const getManuallySavedValue = () =>\n      this.settingsStore.get(\n        \"List\",\n        this.getStorageKey(key, false),\n        settings.schema,\n      ) as z.infer<SchemaOf<T>> | undefined;\n\n    return (\n      (settings.supports.autosave && autosave\n        ? getAutosavedValue()\n        : undefined) ??\n      (settings.supports.manualSave && manualSave\n        ? getManuallySavedValue()\n        : undefined)\n    );\n  }\n}\n"],"mappings":";;;;AAUA,IAAM,oBAAoB;CACxB,eAAe;EACb,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;CAC5E;CACA,UAAU;EACR,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EAAE,KAAK;GAAC;GAAQ;GAAS;EAAO,CAAC,CAAC,CAAC,SAAS;CACtD;CACA,SAAS;EACP,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EACL,OAAO;GACN,WAAW,EAAE,KAAK,CAAC,OAAO,MAAM,CAAC;GACjC,UAAU,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;EACpC,CAAC,CAAC,CACD,SAAS;CACd;CACA,QAAQ;EACN,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EACL,OAAO,EACN,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,EAC7B,CAAC,CAAC,CACD,SAAS;CACd;AACF;AAOA,IAAa,oBAAb,MAAkC;CAChC;CACA;CACA;CAEA,YACE,MACA,OACA,OACA;EACA,KAAK,OAAO;EACZ,KAAK,gBAAgB;EACrB,KAAK,aAAa,MAAM;CAC1B;CAEA,cAAsB,KAAa,WAAW,OAAO;EACnD,MAAM,iBAAiB,WAAW,cAAc;EAChD,OAAO,GAAG,KAAK,WAAW,GAAG,MAAM;CACrC;CAEA,MACE,KACA,OACA,SACA;EACA,MAAM,WAAW,kBAAkB;EAEnC,IAAI,SAAS,SAAS,cAAc,QAAQ,YAC1C,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,KAAK,GAC7B,SAAS,QACT,KACF;EAEF,IAAI,SAAS,SAAS,YAAY,QAAQ,UACxC,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,IAAI,GAC5B,SAAS,QACT,KACF;CAEJ;CAEA,IACE,KACA,SACkC;EAClC,MAAM,WAAW,kBAAkB;EACnC,MAAM,EAAE,UAAU,aAAa,CAAC,aAAa;EAE7C,MAAM,0BACJ,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,QAAQ,QAAQ,GACxC,SAAS,MACX;EAEF,MAAM,8BACJ,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,KAAK,GAC7B,SAAS,MACX;EAEF,QACG,SAAS,SAAS,YAAY,WAC3B,kBAAkB,IAClB,KAAA,OACH,SAAS,SAAS,cAAc,aAC7B,sBAAsB,IACtB,KAAA;CAER;AACF"}
+{"version":3,"file":"ListSettingsStore.mjs","names":[],"sources":["../../../../../../../../src/components/List/model/ListSettingsStore.ts"],"sourcesContent":["import type { ListSettingsOperationOptions } from \"@mittwald/flow-components-base\";\nimport type { SettingsStore } from \"@/components/SettingsProvider/models/SettingsStore\";\nimport type { ListSettingsStorageShape } from \"./types\";\nimport type List from \"./List\";\nimport z from \"zod\";\n\nexport type ListSettingsStoreOperationOptions = ListSettingsOperationOptions;\n\nconst supportedSettings = {\n  activeFilters: {\n    supports: {\n      autosave: true,\n      manualSave: true,\n    },\n    schema: z.record(z.string().or(z.symbol()), z.array(z.string())).optional(),\n  },\n  viewMode: {\n    supports: {\n      autosave: true,\n      manualSave: false,\n    },\n    schema: z.enum([\"list\", \"table\", \"tiles\"]).optional(),\n  },\n  sorting: {\n    supports: {\n      autosave: true,\n      manualSave: false,\n    },\n    schema: z\n      .object({\n        direction: z.enum([\"asc\", \"desc\"]),\n        property: z.string().or(z.number()),\n      })\n      .optional(),\n  },\n  search: {\n    supports: {\n      autosave: true,\n      manualSave: false,\n    },\n    schema: z\n      .object({\n        value: z.string().optional(),\n      })\n      .optional(),\n  },\n} as const;\n\ntype SupportedSettings = keyof typeof supportedSettings;\n\ntype SchemaOf<T extends SupportedSettings> =\n  (typeof supportedSettings)[T][\"schema\"];\n\nexport class ListSettingsStore<T> {\n  public readonly list: List<T>;\n  public readonly storageKey: string;\n  private readonly settingsStore: SettingsStore;\n\n  public constructor(\n    list: List<T>,\n    store: SettingsStore,\n    shape: ListSettingsStorageShape,\n  ) {\n    this.list = list;\n    this.settingsStore = store;\n    this.storageKey = shape.storageKey;\n  }\n\n  private getStorageKey(key: string, autosave = false) {\n    const autosaveSuffix = autosave ? \".autosave\" : \"\";\n    return `${this.storageKey}.${key}${autosaveSuffix}`;\n  }\n\n  public store<T extends SupportedSettings>(\n    key: T,\n    value: z.infer<(typeof supportedSettings)[T][\"schema\"]>,\n    options: ListSettingsStoreOperationOptions,\n  ) {\n    const settings = supportedSettings[key];\n\n    if (settings.supports.manualSave && options.manualSave) {\n      this.settingsStore.set(\n        \"List\",\n        this.getStorageKey(key, false),\n        settings.schema,\n        value as never,\n      );\n    }\n    if (settings.supports.autosave && options.autosave) {\n      this.settingsStore.set(\n        \"List\",\n        this.getStorageKey(key, true),\n        settings.schema,\n        value as never,\n      );\n    }\n  }\n\n  public get<T extends SupportedSettings>(\n    key: T,\n    options: ListSettingsStoreOperationOptions,\n  ): z.infer<SchemaOf<T>> | undefined {\n    const settings = supportedSettings[key];\n    const { autosave, manualSave = !autosave } = options; // to ensure settings is used and avoid unused variable error\n\n    const getAutosavedValue = () =>\n      this.settingsStore.get(\n        \"List\",\n        this.getStorageKey(key, options.autosave),\n        settings.schema,\n      ) as z.infer<SchemaOf<T>> | undefined;\n\n    const getManuallySavedValue = () =>\n      this.settingsStore.get(\n        \"List\",\n        this.getStorageKey(key, false),\n        settings.schema,\n      ) as z.infer<SchemaOf<T>> | undefined;\n\n    return (\n      (settings.supports.autosave && autosave\n        ? getAutosavedValue()\n        : undefined) ??\n      (settings.supports.manualSave && manualSave\n        ? getManuallySavedValue()\n        : undefined)\n    );\n  }\n}\n"],"mappings":";;;;AAQA,IAAM,oBAAoB;CACxB,eAAe;EACb,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;CAC5E;CACA,UAAU;EACR,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EAAE,KAAK;GAAC;GAAQ;GAAS;EAAO,CAAC,CAAC,CAAC,SAAS;CACtD;CACA,SAAS;EACP,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EACL,OAAO;GACN,WAAW,EAAE,KAAK,CAAC,OAAO,MAAM,CAAC;GACjC,UAAU,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;EACpC,CAAC,CAAC,CACD,SAAS;CACd;CACA,QAAQ;EACN,UAAU;GACR,UAAU;GACV,YAAY;EACd;EACA,QAAQ,EACL,OAAO,EACN,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,EAC7B,CAAC,CAAC,CACD,SAAS;CACd;AACF;AAOA,IAAa,oBAAb,MAAkC;CAChC;CACA;CACA;CAEA,YACE,MACA,OACA,OACA;EACA,KAAK,OAAO;EACZ,KAAK,gBAAgB;EACrB,KAAK,aAAa,MAAM;CAC1B;CAEA,cAAsB,KAAa,WAAW,OAAO;EACnD,MAAM,iBAAiB,WAAW,cAAc;EAChD,OAAO,GAAG,KAAK,WAAW,GAAG,MAAM;CACrC;CAEA,MACE,KACA,OACA,SACA;EACA,MAAM,WAAW,kBAAkB;EAEnC,IAAI,SAAS,SAAS,cAAc,QAAQ,YAC1C,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,KAAK,GAC7B,SAAS,QACT,KACF;EAEF,IAAI,SAAS,SAAS,YAAY,QAAQ,UACxC,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,IAAI,GAC5B,SAAS,QACT,KACF;CAEJ;CAEA,IACE,KACA,SACkC;EAClC,MAAM,WAAW,kBAAkB;EACnC,MAAM,EAAE,UAAU,aAAa,CAAC,aAAa;EAE7C,MAAM,0BACJ,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,QAAQ,QAAQ,GACxC,SAAS,MACX;EAEF,MAAM,8BACJ,KAAK,cAAc,IACjB,QACA,KAAK,cAAc,KAAK,KAAK,GAC7B,SAAS,MACX;EAEF,QACG,SAAS,SAAS,YAAY,WAC3B,kBAAkB,IAClB,KAAA,OACH,SAAS,SAAS,cAAc,aAC7B,sBAAsB,IACtB,KAAA;CAER;AACF"}

package/dist/js/packages/components/src/components/List/model/ListViewMode.mjs

@@ -1,32 +1,44 @@
 "use client"
 /* */
-import { useState } from "react";
+import useSelector from "../../../lib/mobx/useSelector.mjs";
+import { useStatic } from "../../../lib/hooks/useStatic.mjs";
+import { ListViewMode as ListViewMode$1 } from "../../../../../components-base/src/list/viewMode/ListViewMode.mjs";
+import "../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/ListViewMode.ts
-var ListViewMode = class {
-	list;
-	autosave;
-	state;
-	constructor(list, options = {}) {
-		const { defaultViewMode, autosave = list.settingsStorageDefaults?.viewMode?.autosave ?? true } = options;
-		this.list = list;
-		this.autosave = autosave;
-		this.state = useState(this.list.settingsStorage?.get("viewMode", { autosave: this.autosave }) ?? defaultViewMode ?? "list");
+/**
+* React's view of the list's layout mode.
+*
+* The mode itself — the stored value winning over the default, the write-back —
+* is `ListViewMode` in `@mittwald/flow-components-base`. What is left here is
+* the subscription, and the fact that the model outlives a render: a view mode
+* rebuilt every render would forget what the user picked. The list, its
+* settings store and `autosave` are taken from the current render, as they were
+* when this class was rebuilt with the list.
+*/
+var ListViewMode = class ListViewMode extends ListViewMode$1 {
+	currentList;
+	constructor(list, options) {
+		super({
+			defaultValue: options.defaultViewMode,
+			...ListViewMode.storageOf(list, options)
+		});
+		this.currentList = list;
 	}
-	get value() {
-		return this.state[0];
+	get list() {
+		return this.currentList;
 	}
-	get isTiles() {
-		return this.value === "tiles";
+	static storageOf(list, options) {
+		return {
+			autosave: options.autosave ?? list.settingsStorageDefaults?.viewMode?.autosave,
+			settings: list.settingsStorage
+		};
 	}
-	get isTable() {
-		return this.value === "table";
-	}
-	get isList() {
-		return this.value === "list";
-	}
-	set(viewMode) {
-		this.state[1](viewMode);
-		this.list.settingsStorage?.store("viewMode", viewMode, { autosave: this.autosave });
+	static useNew(list, options = {}) {
+		const viewMode = useStatic(() => new ListViewMode(list, options));
+		viewMode.currentList = list;
+		viewMode.updateStorage(ListViewMode.storageOf(list, options));
+		useSelector(() => viewMode.value);
+		return viewMode;
 	}
 };
 //#endregion

package/dist/js/packages/components/src/components/List/model/ListViewMode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListViewMode.mjs","names":[],"sources":["../../../../../../../../src/components/List/model/ListViewMode.ts"],"sourcesContent":["import { useState } from \"react\";\nimport type { ListViewMode as RawListViewMode } from \"./types\";\nimport type { List } from \"./List\";\n\ninterface Options {\n  defaultViewMode?: RawListViewMode;\n  autosave?: boolean;\n}\n\nexport class ListViewMode<T = unknown> {\n  public readonly list: List<T>;\n  public readonly autosave: boolean;\n  private readonly state: [\n    RawListViewMode,\n    React.Dispatch<React.SetStateAction<RawListViewMode>>,\n  ];\n\n  public constructor(list: List<T>, options: Options = {}) {\n    const {\n      defaultViewMode,\n      autosave = list.settingsStorageDefaults?.viewMode?.autosave ?? true,\n    } = options;\n\n    this.list = list;\n    this.autosave = autosave;\n    this.state = useState(\n      this.list.settingsStorage?.get(\"viewMode\", { autosave: this.autosave }) ??\n        defaultViewMode ??\n        \"list\",\n    );\n  }\n\n  public get value() {\n    return this.state[0];\n  }\n\n  public get isTiles() {\n    return this.value === \"tiles\";\n  }\n\n  public get isTable() {\n    return this.value === \"table\";\n  }\n\n  public get isList() {\n    return this.value === \"list\";\n  }\n\n  public set(viewMode: RawListViewMode): void {\n    this.state[1](viewMode);\n    this.list.settingsStorage?.store(\"viewMode\", viewMode, {\n      autosave: this.autosave,\n    });\n  }\n}\n"],"mappings":";;;;AASA,IAAa,eAAb,MAAuC;CACrC;CACA;CACA;CAKA,YAAmB,MAAe,UAAmB,CAAC,GAAG;EACvD,MAAM,EACJ,iBACA,WAAW,KAAK,yBAAyB,UAAU,YAAY,SAC7D;EAEJ,KAAK,OAAO;EACZ,KAAK,WAAW;EAChB,KAAK,QAAQ,SACX,KAAK,KAAK,iBAAiB,IAAI,YAAY,EAAE,UAAU,KAAK,SAAS,CAAC,KACpE,mBACA,MACJ;CACF;CAEA,IAAW,QAAQ;EACjB,OAAO,KAAK,MAAM;CACpB;CAEA,IAAW,UAAU;EACnB,OAAO,KAAK,UAAU;CACxB;CAEA,IAAW,UAAU;EACnB,OAAO,KAAK,UAAU;CACxB;CAEA,IAAW,SAAS;EAClB,OAAO,KAAK,UAAU;CACxB;CAEA,IAAW,UAAiC;EAC1C,KAAK,MAAM,EAAE,CAAC,QAAQ;EACtB,KAAK,KAAK,iBAAiB,MAAM,YAAY,UAAU,EACrD,UAAU,KAAK,SACjB,CAAC;CACH;AACF"}
+{"version":3,"file":"ListViewMode.mjs","names":["ListViewModeState"],"sources":["../../../../../../../../src/components/List/model/ListViewMode.ts"],"sourcesContent":["import { ListViewMode as ListViewModeState } from \"@mittwald/flow-components-base\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport type { ListViewMode as RawListViewMode } from \"./types\";\nimport type { List } from \"./List\";\n\ninterface Options {\n  defaultViewMode?: RawListViewMode;\n  autosave?: boolean;\n}\n\n/**\n * React's view of the list's layout mode.\n *\n * The mode itself — the stored value winning over the default, the write-back —\n * is `ListViewMode` in `@mittwald/flow-components-base`. What is left here is\n * the subscription, and the fact that the model outlives a render: a view mode\n * rebuilt every render would forget what the user picked. The list, its\n * settings store and `autosave` are taken from the current render, as they were\n * when this class was rebuilt with the list.\n */\nexport class ListViewMode<T = unknown> extends ListViewModeState {\n  private currentList: List<T>;\n\n  private constructor(list: List<T>, options: Options) {\n    super({\n      defaultValue: options.defaultViewMode,\n      ...ListViewMode.storageOf(list, options),\n    });\n    this.currentList = list;\n  }\n\n  public get list(): List<T> {\n    return this.currentList;\n  }\n\n  private static storageOf<T>(list: List<T>, options: Options) {\n    return {\n      autosave:\n        options.autosave ?? list.settingsStorageDefaults?.viewMode?.autosave,\n      settings: list.settingsStorage,\n    };\n  }\n\n  public static useNew<T>(\n    list: List<T>,\n    options: Options = {},\n  ): ListViewMode<T> {\n    const viewMode = useStatic(() => new ListViewMode<T>(list, options));\n    viewMode.currentList = list;\n    viewMode.updateStorage(ListViewMode.storageOf(list, options));\n\n    /* `set()` mutates an observable — without this nothing re-renders. */\n    useSelector(() => viewMode.value);\n\n    return viewMode;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAa,eAAb,MAAa,qBAAkCA,eAAkB;CAC/D;CAEA,YAAoB,MAAe,SAAkB;EACnD,MAAM;GACJ,cAAc,QAAQ;GACtB,GAAG,aAAa,UAAU,MAAM,OAAO;EACzC,CAAC;EACD,KAAK,cAAc;CACrB;CAEA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAEA,OAAe,UAAa,MAAe,SAAkB;EAC3D,OAAO;GACL,UACE,QAAQ,YAAY,KAAK,yBAAyB,UAAU;GAC9D,UAAU,KAAK;EACjB;CACF;CAEA,OAAc,OACZ,MACA,UAAmB,CAAC,GACH;EACjB,MAAM,WAAW,gBAAgB,IAAI,aAAgB,MAAM,OAAO,CAAC;EACnE,SAAS,cAAc;EACvB,SAAS,cAAc,aAAa,UAAU,MAAM,OAAO,CAAC;EAG5D,kBAAkB,SAAS,KAAK;EAEhC,OAAO;CACT;AACF"}

package/dist/js/packages/components/src/components/List/model/ReactTable.mjs

@@ -1,9 +1,14 @@
 "use client"
 /* */
+import useSelector from "../../../lib/mobx/useSelector.mjs";
+import { useStatic } from "../../../lib/hooks/useStatic.mjs";
+import { getListColumn } from "../../../../../components-base/src/list/ListModelContext.mjs";
+import { mergeHiddenSorting } from "../../../../../components-base/src/list/sorting/ListSorting.mjs";
+import { ListTable } from "../../../../../components-base/src/list/table/ListTable.mjs";
+import "../../../../../components-base/src/index.mjs";
 import { Filter } from "./filter/Filter.mjs";
 import { useEffect, useEffectEvent, useState } from "react";
-import invariant from "invariant";
-import { getCoreRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { getCoreRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";
 //#region src/components/List/model/ReactTable.ts
 var ReactTable = class ReactTable {
 	list;
@@ -25,9 +30,7 @@ var ReactTable = class ReactTable {
 		return new ReactTable(list, onChange, tableOptions);
 	}
 	getTableColumn(property) {
-		const column = this.table.getColumn(property);
-		invariant(!!column, `Column #${property} is not defined`);
-		return column;
+		return getListColumn(this.table, property);
 	}
 	useReactTable(onChange, tableOptions = {}) {
 		const data = this.list.loader.useData();
@@ -37,7 +40,7 @@ var ReactTable = class ReactTable {
 		};
 		for (const filter of this.list.filters) filter.updateInitialState(initialState);
 		this.list.search?.updateInitialState(initialState);
-		const table = useReactTable({
+		const options = {
 			data,
 			state: { sorting: this.sortingState },
 			getRowId: this.list.getItemId,
@@ -53,10 +56,14 @@ var ReactTable = class ReactTable {
 			},
 			globalFilterFn: "auto",
 			...tableOptions
-		});
+		};
+		const listTable = useStatic(() => new ListTable(options));
+		listTable.setOptions(options);
+		useSelector(() => listTable.state);
+		const table = listTable.table;
 		const reactTableState = table.getState();
 		const onFiltersChanged = useEffectEvent(() => {
-			Filter.storeFilters(this.list, { autosave: true });
+			Filter.storeFilters(this.list, this.list.filters, { autosave: true });
 		});
 		const onStateChanged = useEffectEvent(() => {
 			if (onChange) onChange(this.list);
@@ -71,8 +78,7 @@ var ReactTable = class ReactTable {
 	}
 	handleSortingStateUpdate(updater) {
 		const newSortingState = typeof updater === "function" ? updater(this.sortingState) : updater;
-		const additionalHiddenSorting = this.list.sorting.filter((s) => s.initialEnabled === "hidden" && !newSortingState.some((existing) => existing.id === s.property)).map((s) => s.getReactTableColumnSort());
-		this.updateSortingState([...additionalHiddenSorting, ...newSortingState]);
+		this.updateSortingState(mergeHiddenSorting(this.list.sorting, newSortingState));
 	}
 	getTableColumnDefs() {
 		const columnDefsMap = /* @__PURE__ */ new Map();

package/dist/js/packages/components/src/components/List/model/ReactTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactTable.mjs","names":[],"sources":["../../../../../../../../src/components/List/model/ReactTable.ts"],"sourcesContent":["import type {\n  Column,\n  ColumnDef,\n  ColumnSort,\n  InitialTableState,\n  Table,\n  TableOptions,\n  Updater,\n} from \"@tanstack/react-table\";\nimport {\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type List from \"@/components/List/model/List\";\nimport invariant from \"invariant\";\nimport type {\n  OnListChanged,\n  PropertyName,\n} from \"@/components/List/model/types\";\nimport type { SearchValue } from \"@/components/List/model/search/types\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { useEffect, useEffectEvent, useState } from \"react\";\nimport { Filter } from \"./filter/Filter\";\n\nexport class ReactTable<T, TMeta = unknown> {\n  public readonly list: List<T, TMeta>;\n  public readonly table: Table<T>;\n  public readonly sortingState: ColumnSort[];\n  public readonly updateSortingState: Dispatch<SetStateAction<ColumnSort[]>>;\n\n  private constructor(\n    list: List<T, TMeta>,\n    onChange?: OnListChanged<T, TMeta>,\n    tableOptions: Partial<TableOptions<T>> = {},\n  ) {\n    this.list = list;\n\n    const defaultSorting = this.list.sorting.filter(\n      (s) => s.initialEnabled !== false,\n    );\n\n    const [sortingState, updateSortingState] = useState<ColumnSort[]>(\n      defaultSorting.map((s) => s.getReactTableColumnSort()),\n    );\n    this.sortingState = sortingState;\n    this.updateSortingState = updateSortingState;\n    this.table = this.useReactTable(onChange, tableOptions);\n  }\n\n  public get searchString(): SearchValue {\n    return this.table.getState().globalFilter;\n  }\n\n  public static useNew<T, TMeta = unknown>(\n    list: List<T, TMeta>,\n    onChange?: OnListChanged<T, TMeta>,\n    tableOptions: Partial<TableOptions<T>> = {},\n  ): ReactTable<T, TMeta> {\n    return new ReactTable<T, TMeta>(list, onChange, tableOptions);\n  }\n\n  public getTableColumn(property: PropertyName<T>): Column<T> {\n    const column = this.table.getColumn(property as string);\n    invariant(!!column, `Column #${property} is not defined`);\n    return column;\n  }\n\n  private useReactTable(\n    onChange?: OnListChanged<T, TMeta>,\n    tableOptions: Partial<TableOptions<T>> = {},\n  ): Table<T> {\n    const data = this.list.loader.useData();\n\n    const initialState: InitialTableState = {\n      pagination: {\n        pageSize: this.list.batches.batchSize,\n      },\n      columnFilters: [],\n    };\n\n    for (const filter of this.list.filters) {\n      filter.updateInitialState(initialState);\n    }\n\n    this.list.search?.updateInitialState(initialState);\n\n    const table = useReactTable({\n      data,\n      state: {\n        sorting: this.sortingState,\n      },\n      getRowId: this.list.getItemId,\n      initialState,\n      columns: this.getTableColumnDefs(),\n      getCoreRowModel: getCoreRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getFacetedUniqueValues: getFacetedUniqueValues(),\n      onSortingChange: (updater) => {\n        this.handleSortingStateUpdate(updater);\n      },\n      globalFilterFn: \"auto\",\n      ...tableOptions,\n    });\n\n    const reactTableState = table.getState();\n\n    const onFiltersChanged = useEffectEvent(() => {\n      Filter.storeFilters(this.list, { autosave: true });\n    });\n\n    const onStateChanged = useEffectEvent(() => {\n      if (onChange) {\n        onChange(this.list);\n      }\n    });\n\n    useEffect(() => {\n      onStateChanged();\n    }, [reactTableState]);\n\n    useEffect(() => {\n      onFiltersChanged();\n    }, [reactTableState.columnFilters]);\n\n    return table;\n  }\n\n  private handleSortingStateUpdate(updater: Updater<ColumnSort[]>) {\n    const newSortingState =\n      typeof updater === \"function\" ? updater(this.sortingState) : updater;\n\n    const additionalHiddenSorting = this.list.sorting\n      .filter(\n        (s) =>\n          s.initialEnabled === \"hidden\" &&\n          !newSortingState.some((existing) => existing.id === s.property),\n      )\n      .map((s) => s.getReactTableColumnSort());\n\n    this.updateSortingState([...additionalHiddenSorting, ...newSortingState]);\n  }\n\n  private getTableColumnDefs(): ColumnDef<T>[] {\n    const columnDefsMap = new Map<PropertyName<T>, ColumnDef<T>>();\n\n    const getOrCreateColumnDef = (p: PropertyName<T>): ColumnDef<T> => {\n      const existing = columnDefsMap.get(p);\n      if (existing) {\n        return existing;\n      }\n      const newDef: ColumnDef<T> = {\n        id: p as string,\n        accessorKey: p as string,\n        enableSorting: false,\n        enableColumnFilter: false,\n        sortingFn: \"alphanumeric\",\n      };\n\n      columnDefsMap.set(p, newDef);\n      return newDef;\n    };\n\n    this.list.filters.forEach((f) =>\n      f.updateTableColumnDef(getOrCreateColumnDef(f.property)),\n    );\n\n    this.list.sorting.forEach((s) =>\n      s.updateTableColumnDef(getOrCreateColumnDef(s.property)),\n    );\n\n    this.list.loader.staticDataProperties.forEach((property) => {\n      getOrCreateColumnDef(property);\n    });\n\n    return Array.from(columnDefsMap.values());\n  }\n}\n\nexport default ReactTable;\n"],"mappings":"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"}
+{"version":3,"file":"ReactTable.mjs","names":[],"sources":["../../../../../../../../src/components/List/model/ReactTable.ts"],"sourcesContent":["import type {\n  Column,\n  ColumnDef,\n  ColumnSort,\n  InitialTableState,\n  Table,\n  TableOptions,\n  Updater,\n} from \"@tanstack/table-core\";\nimport {\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n} from \"@tanstack/table-core\";\nimport type List from \"@/components/List/model/List\";\nimport {\n  getListColumn,\n  ListTable,\n  mergeHiddenSorting,\n} from \"@mittwald/flow-components-base\";\nimport type {\n  OnListChanged,\n  PropertyName,\n} from \"@/components/List/model/types\";\nimport type { SearchValue } from \"@/components/List/model/search/types\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { useEffect, useEffectEvent, useState } from \"react\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { Filter } from \"./filter/Filter\";\n\nexport class ReactTable<T, TMeta = unknown> {\n  public readonly list: List<T, TMeta>;\n  public readonly table: Table<T>;\n  public readonly sortingState: ColumnSort[];\n  public readonly updateSortingState: Dispatch<SetStateAction<ColumnSort[]>>;\n\n  private constructor(\n    list: List<T, TMeta>,\n    onChange?: OnListChanged<T, TMeta>,\n    tableOptions: Partial<TableOptions<T>> = {},\n  ) {\n    this.list = list;\n\n    const defaultSorting = this.list.sorting.filter(\n      (s) => s.initialEnabled !== false,\n    );\n\n    const [sortingState, updateSortingState] = useState<ColumnSort[]>(\n      defaultSorting.map((s) => s.getReactTableColumnSort()),\n    );\n    this.sortingState = sortingState;\n    this.updateSortingState = updateSortingState;\n    this.table = this.useReactTable(onChange, tableOptions);\n  }\n\n  public get searchString(): SearchValue {\n    return this.table.getState().globalFilter;\n  }\n\n  public static useNew<T, TMeta = unknown>(\n    list: List<T, TMeta>,\n    onChange?: OnListChanged<T, TMeta>,\n    tableOptions: Partial<TableOptions<T>> = {},\n  ): ReactTable<T, TMeta> {\n    return new ReactTable<T, TMeta>(list, onChange, tableOptions);\n  }\n\n  public getTableColumn(property: PropertyName<T>): Column<T> {\n    return getListColumn(this.table, property);\n  }\n\n  private useReactTable(\n    onChange?: OnListChanged<T, TMeta>,\n    tableOptions: Partial<TableOptions<T>> = {},\n  ): Table<T> {\n    const data = this.list.loader.useData();\n\n    const initialState: InitialTableState = {\n      pagination: {\n        pageSize: this.list.batches.batchSize,\n      },\n      columnFilters: [],\n    };\n\n    for (const filter of this.list.filters) {\n      filter.updateInitialState(initialState);\n    }\n\n    this.list.search?.updateInitialState(initialState);\n\n    const options: TableOptions<T> = {\n      data,\n      state: {\n        sorting: this.sortingState,\n      },\n      getRowId: this.list.getItemId,\n      initialState,\n      columns: this.getTableColumnDefs(),\n      getCoreRowModel: getCoreRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getFacetedUniqueValues: getFacetedUniqueValues(),\n      onSortingChange: (updater) => {\n        this.handleSortingStateUpdate(updater);\n      },\n      globalFilterFn: \"auto\",\n      ...tableOptions,\n    } as TableOptions<T>;\n\n    /*\n     * `useReactTable` in twenty lines of MobX, so the Vue binding runs the same\n     * table. What React still owns: the instance has to outlive a render, the\n     * options are rebuilt on every render, and a state change has to re-render.\n     */\n    const listTable = useStatic(() => new ListTable<T>(options));\n    listTable.setOptions(options);\n    useSelector(() => listTable.state);\n\n    const table = listTable.table;\n\n    const reactTableState = table.getState();\n\n    const onFiltersChanged = useEffectEvent(() => {\n      Filter.storeFilters(this.list, this.list.filters, { autosave: true });\n    });\n\n    const onStateChanged = useEffectEvent(() => {\n      if (onChange) {\n        onChange(this.list);\n      }\n    });\n\n    useEffect(() => {\n      onStateChanged();\n    }, [reactTableState]);\n\n    useEffect(() => {\n      onFiltersChanged();\n    }, [reactTableState.columnFilters]);\n\n    return table;\n  }\n\n  private handleSortingStateUpdate(updater: Updater<ColumnSort[]>) {\n    const newSortingState =\n      typeof updater === \"function\" ? updater(this.sortingState) : updater;\n\n    this.updateSortingState(\n      mergeHiddenSorting(this.list.sorting, newSortingState),\n    );\n  }\n\n  private getTableColumnDefs(): ColumnDef<T>[] {\n    const columnDefsMap = new Map<PropertyName<T>, ColumnDef<T>>();\n\n    const getOrCreateColumnDef = (p: PropertyName<T>): ColumnDef<T> => {\n      const existing = columnDefsMap.get(p);\n      if (existing) {\n        return existing;\n      }\n      const newDef: ColumnDef<T> = {\n        id: p as string,\n        accessorKey: p as string,\n        enableSorting: false,\n        enableColumnFilter: false,\n        sortingFn: \"alphanumeric\",\n      };\n\n      columnDefsMap.set(p, newDef);\n      return newDef;\n    };\n\n    this.list.filters.forEach((f) =>\n      f.updateTableColumnDef(getOrCreateColumnDef(f.property)),\n    );\n\n    this.list.sorting.forEach((s) =>\n      s.updateTableColumnDef(getOrCreateColumnDef(s.property)),\n    );\n\n    this.list.loader.staticDataProperties.forEach((property) => {\n      getOrCreateColumnDef(property);\n    });\n\n    return Array.from(columnDefsMap.values());\n  }\n}\n\nexport default ReactTable;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/List/model/filter/DateRangeFilter.mjs

@@ -1,25 +1,37 @@
 "use client"
 /* */
-import { isDateRangeValue } from "../../../Calendar/components/RangeCalendar/types.mjs";
-import { Filter } from "./Filter.mjs";
-import { dateRangeFilterFn } from "./dateRangeFilterFn.mjs";
+import { ListDateRangeFilter } from "../../../../../../components-base/src/list/filter/ListDateRangeFilter.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/filter/DateRangeFilter.tsx
-var DateRangeFilter = class extends Filter {
+/**
+* React's date-range filter.
+*
+* The column, the comparison and the stored value are `ListDateRangeFilter` in
+* `@mittwald/flow-components-base`, so the Vue binding filters the same dates
+* the same way. What is left here is the calendar's own options, which are
+* Flow's `RangeCalendar` props.
+*/
+var DateRangeFilter = class extends ListDateRangeFilter {
 	dateRangeOptions;
-	constructor(list, shape) {
-		super(list, shape);
+	constructor(context, shape) {
+		super(context, shape);
 		this.dateRangeOptions = shape.dateRangeOptions;
 	}
-	updateTableColumnDef(def) {
-		def.enableColumnFilter = true;
-		def.filterFn = dateRangeFilterFn;
-	}
 	getValue() {
-		const value = this.getTableColumnFilter()?.value;
-		return isDateRangeValue(value) ? value : null;
+		return super.getValue();
 	}
 	setValue(range) {
-		this.list.reactTable.getTableColumn(this.property).setFilterValue(range);
+		super.setValue(range);
+	}
+	/** The list this filter belongs to — `context`, typed as React's `List`. */
+	get list() {
+		return this.context;
+	}
+	get values() {
+		return super.values;
+	}
+	getArrayValue() {
+		return super.getArrayValue();
 	}
 };
 //#endregion

package/dist/js/packages/components/src/components/List/model/filter/DateRangeFilter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/DateRangeFilter.tsx"],"sourcesContent":["import type { ColumnDef } from \"@tanstack/react-table\";\nimport type List from \"@/components/List/model/List\";\nimport { Filter } from \"./Filter\";\nimport type { FilterShape } from \"@/components/List/model/filter/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\n\nimport type { DateRange, RangeValue } from \"react-aria-components\";\nimport type { DateValue } from \"@internationalized/date\";\nimport {\n  isDateRangeValue,\n  type RangeCalendarProps,\n} from \"@/components/Calendar\";\nimport { dateRangeFilterFn } from \"@/components/List/model/filter/dateRangeFilterFn\";\n\nexport class DateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n> extends Filter<T, TProp> {\n  public readonly dateRangeOptions?: RangeCalendarProps;\n\n  public constructor(list: List<T>, shape: FilterShape<T, TProp, never>) {\n    super(list, shape);\n    this.dateRangeOptions = shape.dateRangeOptions;\n  }\n\n  public override updateTableColumnDef(def: ColumnDef<T>): void {\n    def.enableColumnFilter = true;\n    def.filterFn = dateRangeFilterFn;\n  }\n\n  public override getValue(): DateRange | null {\n    const value = this.getTableColumnFilter()?.value;\n    return isDateRangeValue(value) ? value : null;\n  }\n\n  public setValue(range: RangeValue<DateValue>) {\n    this.list.reactTable.getTableColumn(this.property).setFilterValue(range);\n  }\n}\n"],"mappings":";;;;;;AAcA,IAAa,kBAAb,cAGU,OAAiB;CACzB;CAEA,YAAmB,MAAe,OAAqC;EACrE,MAAM,MAAM,KAAK;EACjB,KAAK,mBAAmB,MAAM;CAChC;CAEA,qBAAqC,KAAyB;EAC5D,IAAI,qBAAqB;EACzB,IAAI,WAAW;CACjB;CAEA,WAA6C;EAC3C,MAAM,QAAQ,KAAK,qBAAqB,CAAC,EAAE;EAC3C,OAAO,iBAAiB,KAAK,IAAI,QAAQ;CAC3C;CAEA,SAAgB,OAA8B;EAC5C,KAAK,KAAK,WAAW,eAAe,KAAK,QAAQ,CAAC,CAAC,eAAe,KAAK;CACzE;AACF"}
+{"version":3,"file":"DateRangeFilter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/DateRangeFilter.tsx"],"sourcesContent":["import { ListDateRangeFilter } from \"@mittwald/flow-components-base\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport type { FilterShape } from \"@/components/List/model/filter/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport type { RangeCalendarProps } from \"@/components/Calendar\";\nimport type { DateValue } from \"@internationalized/date\";\nimport type { DateRange, RangeValue } from \"react-aria-components\";\nimport type { ReactNode } from \"react\";\nimport type { List } from \"@/components/List/model/List\";\nimport type { FilterValue } from \"@/components/List/model/filter/FilterValue\";\n\n/**\n * React's date-range filter.\n *\n * The column, the comparison and the stored value are `ListDateRangeFilter` in\n * `@mittwald/flow-components-base`, so the Vue binding filters the same dates\n * the same way. What is left here is the calendar's own options, which are\n * Flow's `RangeCalendar` props.\n */\nexport class DateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n> extends ListDateRangeFilter<T, TProp, ReactNode> {\n  public readonly dateRangeOptions?: RangeCalendarProps;\n\n  public constructor(\n    context: ListModelContext<T>,\n    shape: FilterShape<T, TProp, never>,\n  ) {\n    super(context, shape as never);\n    this.dateRangeOptions = shape.dateRangeOptions;\n  }\n\n  /*\n   * Narrowed back to react-aria's own types, because that is what the calendar\n   * takes and what this filter's consumers already have. The shared class is\n   * typed on the three numbers a date is made of, which every date library\n   * agrees on and nothing else does.\n   */\n  public override getValue(): DateRange | null {\n    return super.getValue() as DateRange | null;\n  }\n\n  public override setValue(range: RangeValue<DateValue> | null): void {\n    super.setValue(range as never);\n  }\n\n  /** The list this filter belongs to — `context`, typed as React's `List`. */\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n\n  /* As in `Filter`: created by this filter, so each one's `filter` is React's. */\n  public override get values(): FilterValue[] {\n    return super.values as FilterValue[];\n  }\n\n  public override getArrayValue(): FilterValue[] {\n    return super.getArrayValue() as FilterValue[];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,kBAAb,cAGU,oBAAyC;CACjD;CAEA,YACE,SACA,OACA;EACA,MAAM,SAAS,KAAc;EAC7B,KAAK,mBAAmB,MAAM;CAChC;CAQA,WAA6C;EAC3C,OAAO,MAAM,SAAS;CACxB;CAEA,SAAyB,OAA2C;EAClE,MAAM,SAAS,KAAc;CAC/B;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAGA,IAAoB,SAAwB;EAC1C,OAAO,MAAM;CACf;CAEA,gBAA+C;EAC7C,OAAO,MAAM,cAAc;CAC7B;AACF"}