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

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

@@ -1,193 +1,32 @@
 "use client"
 /* */
-import { FilterValue } from "./FilterValue.mjs";
-import { toArray } from "../../../../lib/array/toArray.mjs";
-import { difference, unique } from "remeda";
-import { getProperty } from "dot-prop";
+import { ListFilter } from "../../../../../../components-base/src/list/filter/ListFilter.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/filter/Filter.ts
-var equalsPropertyMatcher = (filterValue, propertyValue) => filterValue === propertyValue;
-var selectAllMinValueCount = 6;
-var stringCastRenderMethod = (value) => String(value);
-var Filter = class {
-	_values;
-	_valuesFromTableState;
-	list;
-	property;
-	mode;
-	matcher;
-	renderItem;
-	name;
-	autosave;
-	manualSave;
-	onFilterChangeCallbacks = /* @__PURE__ */ new Set();
-	defaultSelectedValues;
-	priority;
-	storageKey;
-	constructor(list, shape) {
-		const { autosave = list.settingsStorageDefaults?.filters?.autosave ?? false, manualSave = list.settingsStorageDefaults?.filters?.manualSave ?? true, property, mode = "some", values, matcher = equalsPropertyMatcher, renderItem = stringCastRenderMethod, priority = "primary", name, defaultSelected, onChange } = shape;
-		this.list = list;
-		this.autosave = autosave;
-		this.manualSave = manualSave;
-		this.property = property;
-		this.storageKey = String(property);
-		this.mode = mode;
-		this._values = values?.map((v) => FilterValue.create(this, v));
-		this.matcher = matcher;
-		this.renderItem = renderItem;
-		this.name = name;
-		this.priority = priority;
-		this.defaultSelectedValues = defaultSelected?.map((v) => FilterValue.create(this, v));
-		if (onChange) this.onFilterChangeCallbacks.add(onChange);
-	}
-	updateInitialState(initialState) {
-		const initialIds = this.getInitialSelectedIds();
-		if (initialIds?.length) initialState.columnFilters = [...initialState.columnFilters ?? [], {
-			id: this.property,
-			value: initialIds
-		}];
-	}
-	getInitialSelectedIds() {
-		return this.getStoredSelectedIds({
-			autosave: this.autosave,
-			manualSave: this.manualSave
-		}) ?? this.defaultSelectedValues?.map((v) => v.id);
-	}
-	getStoredSelectedIds(options) {
-		return this.list.settingsStorage?.get("activeFilters", options)?.[this.storageKey];
-	}
-	getStoredSelectedValues(options) {
-		return this.getStoredSelectedIds(options)?.map((id) => this.values.find((v) => v.id === id)).filter((v) => v !== void 0);
-	}
-	static storeFilters(list, options) {
-		const data = Object.fromEntries(list.filters.map((filter) => [filter.storageKey, filter.getArrayValue().map((v) => v.id)]));
-		list.settingsStorage?.store("activeFilters", data, options);
-	}
-	updateTableColumnDef(def) {
-		def.enableColumnFilter = true;
-		def.filterFn = this.getReactTableFilterFn();
-	}
-	getReactTableFilterFn() {
-		return (row, _, filterValue) => {
-			const propertyAsString = this.property;
-			const filterBy = propertyAsString.startsWith("$") ? row.original : getProperty(row.original, propertyAsString);
-			return this.checkFilterMatches(filterBy, filterValue);
-		};
-	}
-	checkFilterMatches(property, filterValueInput) {
-		if (filterValueInput === null) return true;
-		const predicate = (filterValue) => this.matcher(filterValue.value, property);
-		const toFilterValue = (something) => FilterValue.create(this, something);
-		if (this.mode === "all") return toArray(filterValueInput).map(toFilterValue).every(predicate);
-		else if (this.mode === "some") {
-			const filterArr = toArray(filterValueInput);
-			return filterArr.length === 0 || filterArr.map(toFilterValue).some(predicate);
-		} else if (this.mode === "one") return predicate(toFilterValue(Array.isArray(filterValueInput) ? filterValueInput[0] : filterValueInput));
-		throw new Error(`Unknown filter mode '${this.mode}'`);
-	}
-	getTableColumnFilter() {
-		return this.list.reactTable.table.getState().columnFilters.find((f) => f.id === this.property);
-	}
-	getTableColumn() {
-		return this.list.reactTable.getTableColumn(this.property);
-	}
-	getValue() {
-		return this.getTableColumnFilter()?.value ?? null;
-	}
-	getValuesFromTableState() {
-		return unique(Array.from(this.getTableColumn().getFacetedUniqueValues().keys()).flatMap((v) => v).filter((v) => v !== void 0 && v !== null)).map((v) => FilterValue.create(this, v));
-	}
-	checkIfValueIsUnknown(value) {
-		return !this.values.some((v) => v.id === value.id);
-	}
-	deleteUnknownFilterValues() {
-		if (this.values === this.valuesFromTableState) return;
-		for (const currentValues of this.getArrayValue()) if (this.checkIfValueIsUnknown(currentValues)) this.deactivateValue(currentValues);
+/**
+* React's filter: the shared one, with `renderItem` narrowed.
+*
+* Everything a filter does — values, selection, persistence, the predicate the
+* table runs — is `ListFilter` in `@mittwald/flow-components-base`. The one
+* thing that is not shareable is what a filter value _looks_ like, so the core
+* carries the rendered type as a parameter and this fills it with `ReactNode`.
+*/
+var Filter = class extends ListFilter {
+	constructor(context, shape) {
+		super(context, shape);
+	}
+	/** The list this filter belongs to — `context`, typed as React's `List`. */
+	get list() {
+		return this.context;
 	}
 	get values() {
-		return this._values ?? this.valuesFromTableState;
-	}
-	get valuesFromTableState() {
-		if (!this._valuesFromTableState) this._valuesFromTableState = this.getValuesFromTableState();
-		return this._valuesFromTableState;
+		return super.values;
 	}
 	getArrayValue() {
-		const value = this.getValue();
-		return value === null ? [] : toArray(value).map((v) => FilterValue.create(this, v));
-	}
-	isValueActive(value) {
-		return this.getArrayValue().some((v) => v.equals(value));
-	}
-	isActive() {
-		return this.getArrayValue().length > 0;
-	}
-	deactivateValue(value) {
-		const currentValueAsArray = this.getArrayValue();
-		let updatedValue;
-		if (this.mode === "all" || this.mode === "some") updatedValue = currentValueAsArray.filter((v) => !v.equals(value));
-		else updatedValue = null;
-		this.list.reactTable.getTableColumn(this.property).setFilterValue(updatedValue);
-		this.callOnChangedHandlers(updatedValue);
-	}
-	callOnChangedHandlers(newValue) {
-		const values = toArray(newValue).map((v) => v?.value);
-		this.onFilterChangeCallbacks.forEach((cb) => cb(values));
-	}
-	hasChanges() {
-		const currentIds = this.getArrayValue().map((v) => v.id);
-		const defaultIds = this.getStoredSelectedIds({ autosave: false }) ?? this.defaultSelectedValues?.map((v) => v.id) ?? [];
-		return currentIds.length !== defaultIds.length || difference(currentIds, defaultIds).length > 0;
-	}
-	isStoringAvailable() {
-		return !!this.list.settingsStorage && this.manualSave;
-	}
-	resetValues() {
-		let resetTo;
-		const storedValues = this.getStoredSelectedValues({ autosave: false }) ?? this.defaultSelectedValues;
-		if (storedValues) resetTo = storedValues;
-		else if (this.mode === "all" || this.mode === "some") resetTo = [];
-		else resetTo = null;
-		this.list.reactTable.getTableColumn(this.property).setFilterValue(resetTo);
-		this.callOnChangedHandlers(resetTo);
-	}
-	clear() {
-		this.list.reactTable.getTableColumn(this.property).setFilterValue(null);
-		this.callOnChangedHandlers(null);
-	}
-	toggleValue(newValue) {
-		const currentValueAsArray = this.getArrayValue();
-		let updatedValue;
-		if (this.mode === "all" || this.mode === "some") {
-			if (newValue.isActive) updatedValue = currentValueAsArray.filter((v) => !v.equals(newValue));
-			else updatedValue = [...currentValueAsArray, newValue];
-		} else updatedValue = newValue.isActive ? null : newValue;
-		this.list.reactTable.getTableColumn(this.property).setFilterValue(updatedValue);
-		this.callOnChangedHandlers(updatedValue);
-	}
-	get isSelectAllAvailable() {
-		return this.mode === "some" && this.values.length >= selectAllMinValueCount;
-	}
-	isEveryValueActive() {
-		return this.values.every((v) => v.isActive);
-	}
-	selectAll() {
-		this.setArrayValue(this.values);
-	}
-	setActiveValueIds(ids) {
-		const idSet = new Set(ids);
-		this.setArrayValue(this.values.filter((v) => idSet.has(v.id)));
-	}
-	deselectAll() {
-		this.setArrayValue([]);
-	}
-	setArrayValue(value) {
-		this.list.reactTable.getTableColumn(this.property).setFilterValue(value);
-		this.callOnChangedHandlers(value);
-	}
-	onFilterUpdated(cb) {
-		this.onFilterChangeCallbacks.add(cb);
+		return super.getArrayValue();
 	}
 };
 //#endregion
-export { Filter };
+export { Filter, Filter as default };
 
 //# sourceMappingURL=Filter.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/Filter.ts"],"sourcesContent":["import type {\n  Column,\n  ColumnDef,\n  ColumnFilter,\n  InitialTableState,\n} from \"@tanstack/react-table\";\nimport type List from \"@/components/List/model/List\";\nimport { getProperty } from \"dot-prop\";\nimport type {\n  FilterMatcher,\n  FilterMode,\n  FilterShape,\n  FilterUpdatedCallback,\n} from \"@/components/List/model/filter/types\";\nimport type {\n  PropertyName,\n  PropertyValueRenderMethod,\n} from \"@/components/List/model/types\";\nimport { customPropertyPrefix } from \"@/components/List/model/types\";\nimport { difference, unique } from \"remeda\";\nimport { FilterValue } from \"@/components/List/model/filter/FilterValue\";\nimport { toArray } from \"@/lib/array/toArray\";\nimport type { ListSettingsStoreOperationOptions } from \"../ListSettingsStore\";\n\nconst equalsPropertyMatcher: FilterMatcher<unknown, never, never> = (\n  filterValue,\n  propertyValue,\n) => filterValue === propertyValue;\n\nconst selectAllMinValueCount = 6;\n\nconst stringCastRenderMethod: PropertyValueRenderMethod<unknown> = (value) =>\n  String(value);\n\nexport class Filter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n  TMatchValue = never,\n> {\n  private _values?: FilterValue[] | undefined;\n  private _valuesFromTableState?: FilterValue[];\n  public readonly list: List<T>;\n  public readonly property: TProp;\n  public readonly mode: FilterMode;\n  public readonly matcher: FilterMatcher<T, never, never>;\n  public readonly renderItem: PropertyValueRenderMethod<TMatchValue>;\n  public readonly name?: string;\n  public readonly autosave: boolean;\n  public readonly manualSave: boolean;\n  private onFilterChangeCallbacks = new Set<FilterUpdatedCallback>();\n  private readonly defaultSelectedValues?: FilterValue[];\n  public readonly priority: \"primary\" | \"secondary\";\n  public readonly storageKey: string;\n\n  public constructor(list: List<T>, shape: FilterShape<T, TProp, TMatchValue>) {\n    const {\n      autosave = list.settingsStorageDefaults?.filters?.autosave ?? false,\n      manualSave = list.settingsStorageDefaults?.filters?.manualSave ?? true,\n      property,\n      mode = \"some\",\n      values,\n      matcher = equalsPropertyMatcher,\n      renderItem = stringCastRenderMethod,\n      priority = \"primary\",\n      name,\n      defaultSelected,\n      onChange,\n    } = shape;\n\n    this.list = list;\n    this.autosave = autosave;\n    this.manualSave = manualSave;\n    this.property = property;\n    this.storageKey = String(property);\n    this.mode = mode;\n    this._values = values?.map((v) => FilterValue.create(this, v));\n    this.matcher = matcher;\n    this.renderItem = renderItem;\n    this.name = name;\n    this.priority = priority;\n    this.defaultSelectedValues = defaultSelected?.map((v) =>\n      FilterValue.create(this, v),\n    );\n    if (onChange) {\n      this.onFilterChangeCallbacks.add(onChange);\n    }\n  }\n\n  public updateInitialState(initialState: InitialTableState) {\n    const initialIds = this.getInitialSelectedIds();\n\n    if (initialIds?.length) {\n      initialState.columnFilters = [\n        ...(initialState.columnFilters ?? []),\n        {\n          id: this.property as string,\n          value: initialIds,\n        },\n      ];\n    }\n  }\n\n  private getInitialSelectedIds() {\n    return (\n      this.getStoredSelectedIds({\n        autosave: this.autosave,\n        manualSave: this.manualSave,\n      }) ?? this.defaultSelectedValues?.map((v) => v.id)\n    );\n  }\n\n  private getStoredSelectedIds(options: ListSettingsStoreOperationOptions) {\n    return this.list.settingsStorage?.get(\"activeFilters\", options)?.[\n      this.storageKey\n    ];\n  }\n\n  private getStoredSelectedValues(options: ListSettingsStoreOperationOptions) {\n    return this.getStoredSelectedIds(options)\n      ?.map((id) => this.values.find((v) => v.id === id))\n      .filter((v): v is FilterValue => v !== undefined);\n  }\n\n  public static storeFilters<T>(\n    list: List<T>,\n    options: ListSettingsStoreOperationOptions,\n  ) {\n    const data = Object.fromEntries(\n      list.filters.map((filter) => [\n        filter.storageKey,\n        filter.getArrayValue().map((v) => v.id),\n      ]),\n    );\n\n    list.settingsStorage?.store(\"activeFilters\", data, options);\n  }\n\n  public updateTableColumnDef(def: ColumnDef<T>): void {\n    def.enableColumnFilter = true;\n    def.filterFn = this.getReactTableFilterFn();\n  }\n\n  private getReactTableFilterFn(): ColumnDef<T>[\"filterFn\"] {\n    return (row, _, filterValue) => {\n      const propertyAsString = this.property as string;\n\n      const filterBy = propertyAsString.startsWith(customPropertyPrefix)\n        ? row.original\n        : getProperty(row.original, propertyAsString);\n\n      return this.checkFilterMatches(filterBy, filterValue);\n    };\n  }\n\n  private checkFilterMatches(\n    property: unknown,\n    filterValueInput: unknown,\n  ): boolean {\n    if (filterValueInput === null) {\n      return true;\n    }\n\n    const predicate = (filterValue: FilterValue) =>\n      this.matcher(filterValue.value as never, property as never);\n\n    const toFilterValue = (something: unknown) =>\n      FilterValue.create(this, something);\n\n    if (this.mode === \"all\") {\n      return toArray(filterValueInput).map(toFilterValue).every(predicate);\n    } else if (this.mode === \"some\") {\n      const filterArr = toArray(filterValueInput);\n      return (\n        filterArr.length === 0 || filterArr.map(toFilterValue).some(predicate)\n      );\n    } else if (this.mode === \"one\") {\n      const oneValue = Array.isArray(filterValueInput)\n        ? filterValueInput[0]\n        : filterValueInput;\n      return predicate(toFilterValue(oneValue));\n    }\n\n    throw new Error(`Unknown filter mode '${this.mode}'`);\n  }\n\n  protected getTableColumnFilter(): ColumnFilter | undefined {\n    return this.list.reactTable.table\n      .getState()\n      .columnFilters.find((f) => f.id === this.property);\n  }\n\n  private getTableColumn(): Column<T> {\n    return this.list.reactTable.getTableColumn(this.property);\n  }\n\n  public getValue(): unknown {\n    return this.getTableColumnFilter()?.value ?? null;\n  }\n\n  private getValuesFromTableState() {\n    return unique(\n      Array.from(this.getTableColumn().getFacetedUniqueValues().keys())\n        .flatMap((v) => v)\n        .filter((v) => v !== undefined && v !== null),\n    ).map((v) => FilterValue.create(this, v));\n  }\n\n  private checkIfValueIsUnknown(value: FilterValue) {\n    const isKnown = this.values.some((v) => v.id === value.id);\n    return !isKnown;\n  }\n\n  public deleteUnknownFilterValues() {\n    if (this.values === this.valuesFromTableState) {\n      return;\n    }\n\n    for (const currentValues of this.getArrayValue()) {\n      if (this.checkIfValueIsUnknown(currentValues)) {\n        this.deactivateValue(currentValues);\n      }\n    }\n  }\n\n  public get values(): FilterValue[] {\n    return this._values ?? this.valuesFromTableState;\n  }\n\n  private get valuesFromTableState(): FilterValue[] {\n    if (!this._valuesFromTableState) {\n      this._valuesFromTableState = this.getValuesFromTableState();\n    }\n    return this._valuesFromTableState;\n  }\n\n  public getArrayValue(): FilterValue[] {\n    const value = this.getValue();\n    return value === null\n      ? []\n      : toArray(value).map((v) => FilterValue.create(this, v));\n  }\n\n  public isValueActive(value: FilterValue): boolean {\n    return this.getArrayValue().some((v) => v.equals(value));\n  }\n\n  public isActive(): boolean {\n    return this.getArrayValue().length > 0;\n  }\n\n  public deactivateValue(value: FilterValue): void {\n    const currentValueAsArray = this.getArrayValue();\n\n    let updatedValue: FilterValue[] | FilterValue | null;\n\n    if (this.mode === \"all\" || this.mode === \"some\") {\n      updatedValue = currentValueAsArray.filter((v) => !v.equals(value));\n    } else {\n      updatedValue = null;\n    }\n\n    this.list.reactTable\n      .getTableColumn(this.property)\n      .setFilterValue(updatedValue);\n\n    this.callOnChangedHandlers(updatedValue);\n  }\n\n  private callOnChangedHandlers(\n    newValue: FilterValue[] | FilterValue | null,\n  ): void {\n    const values = toArray(newValue).map((v) => v?.value);\n    this.onFilterChangeCallbacks.forEach((cb) => cb(values));\n  }\n\n  public hasChanges(): boolean {\n    const currentIds = this.getArrayValue().map((v) => v.id);\n\n    const defaultIds =\n      this.getStoredSelectedIds({ autosave: false }) ??\n      this.defaultSelectedValues?.map((v) => v.id) ??\n      [];\n\n    return (\n      currentIds.length !== defaultIds.length ||\n      difference(currentIds, defaultIds).length > 0\n    );\n  }\n\n  public isStoringAvailable(): boolean {\n    return !!this.list.settingsStorage && this.manualSave;\n  }\n\n  public resetValues(): void {\n    let resetTo: FilterValue[] | FilterValue | null;\n\n    const storedValues =\n      this.getStoredSelectedValues({ autosave: false }) ??\n      this.defaultSelectedValues;\n\n    if (storedValues) {\n      resetTo = storedValues;\n    } else {\n      if (this.mode === \"all\" || this.mode === \"some\") {\n        resetTo = [];\n      } else {\n        resetTo = null;\n      }\n    }\n\n    this.list.reactTable.getTableColumn(this.property).setFilterValue(resetTo);\n    this.callOnChangedHandlers(resetTo);\n  }\n\n  public clear(): void {\n    this.list.reactTable.getTableColumn(this.property).setFilterValue(null);\n    this.callOnChangedHandlers(null);\n  }\n\n  public toggleValue(newValue: FilterValue): void {\n    const currentValueAsArray = this.getArrayValue();\n\n    let updatedValue: FilterValue[] | FilterValue | null;\n\n    if (this.mode === \"all\" || this.mode === \"some\") {\n      if (newValue.isActive) {\n        updatedValue = currentValueAsArray.filter((v) => !v.equals(newValue));\n      } else {\n        updatedValue = [...currentValueAsArray, newValue];\n      }\n    } else {\n      updatedValue = newValue.isActive ? null : newValue;\n    }\n\n    this.list.reactTable\n      .getTableColumn(this.property)\n      .setFilterValue(updatedValue);\n    this.callOnChangedHandlers(updatedValue);\n  }\n\n  public get isSelectAllAvailable(): boolean {\n    return this.mode === \"some\" && this.values.length >= selectAllMinValueCount;\n  }\n\n  public isEveryValueActive(): boolean {\n    return this.values.every((v) => v.isActive);\n  }\n\n  public selectAll(): void {\n    this.setArrayValue(this.values);\n  }\n\n  public setActiveValueIds(ids: Iterable<unknown>): void {\n    const idSet = new Set(ids);\n    this.setArrayValue(this.values.filter((v) => idSet.has(v.id)));\n  }\n\n  public deselectAll(): void {\n    this.setArrayValue([]);\n  }\n\n  private setArrayValue(value: FilterValue[]): void {\n    this.list.reactTable.getTableColumn(this.property).setFilterValue(value);\n    this.callOnChangedHandlers(value);\n  }\n\n  public onFilterUpdated(cb: () => unknown): void {\n    this.onFilterChangeCallbacks.add(cb);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Filter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/Filter.ts"],"sourcesContent":["import type { FilterShape } from \"@/components/List/model/filter/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport { ListFilter } from \"@mittwald/flow-components-base\";\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 filter: the shared one, with `renderItem` narrowed.\n *\n * Everything a filter does — values, selection, persistence, the predicate the\n * table runs — is `ListFilter` in `@mittwald/flow-components-base`. The one\n * thing that is not shareable is what a filter value _looks_ like, so the core\n * carries the rendered type as a parameter and this fills it with `ReactNode`.\n */\nexport class Filter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n  TMatchValue = never,\n> extends ListFilter<T, TProp, TMatchValue, ReactNode> {\n  public constructor(\n    context: ListModelContext<T>,\n    shape: FilterShape<T, TProp, TMatchValue>,\n  ) {\n    super(context, shape);\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  /* 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\nexport default Filter;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,SAAb,cAIU,WAA6C;CACrD,YACE,SACA,OACA;EACA,MAAM,SAAS,KAAK;CACtB;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAGA,IAAoB,SAAwB;EAC1C,OAAO,MAAM;CACf;CAEA,gBAA+C;EAC7C,OAAO,MAAM,cAAc;CAC7B;AACF"}

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

@@ -1,17 +1,21 @@
 "use client"
 /* */
-import { Item } from "./Item.mjs";
+import { ListItemCollection } from "../../../../../../components-base/src/list/item/ListItemCollection.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/item/ItemCollection.ts
-var ItemCollection = class {
-	list;
-	constructor(list) {
-		this.list = list;
+/**
+* React's item collection: `ListItemCollection` from
+* `@mittwald/flow-components-base`, plus `list` — see `Sorting` for why.
+*/
+var ItemCollection = class extends ListItemCollection {
+	get list() {
+		return this.context;
 	}
 	get entries() {
-		return this.list.reactTable.table.getRowModel().rows.map((r) => Item.fromRow(this, r));
+		return super.entries;
 	}
 };
 //#endregion
-export { ItemCollection };
+export { ItemCollection, ItemCollection as default };
 
 //# sourceMappingURL=ItemCollection.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemCollection.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemCollection.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport { Item } from \"@/components/List/model/item/Item\";\n\nexport class ItemCollection<T> {\n  public readonly list: List<T>;\n\n  public constructor(list: List<T>) {\n    this.list = list;\n  }\n\n  public get entries(): Item<T>[] {\n    return this.list.reactTable.table\n      .getRowModel()\n      .rows.map((r) => Item.fromRow(this, r));\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,iBAAb,MAA+B;CAC7B;CAEA,YAAmB,MAAe;EAChC,KAAK,OAAO;CACd;CAEA,IAAW,UAAqB;EAC9B,OAAO,KAAK,KAAK,WAAW,MACzB,YAAY,CAAC,CACb,KAAK,KAAK,MAAM,KAAK,QAAQ,MAAM,CAAC,CAAC;CAC1C;AACF"}
+{"version":3,"file":"ItemCollection.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemCollection.ts"],"sourcesContent":["import { ListItemCollection } from \"@mittwald/flow-components-base\";\nimport type { Item } from \"@/components/List/model/item/Item\";\nimport type { List } from \"@/components/List/model/List\";\n\n/**\n * React's item collection: `ListItemCollection` from\n * `@mittwald/flow-components-base`, plus `list` — see `Sorting` for why.\n */\nexport class ItemCollection<T> extends ListItemCollection<T> {\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n\n  /* Built with this collection, so each one's `collection` is React's. */\n  public override get entries(): Item<T>[] {\n    return super.entries as Item<T>[];\n  }\n}\n\nexport default ItemCollection;\n"],"mappings":";;;;;;;;;AAQA,IAAa,iBAAb,cAAuC,mBAAsB;CAC3D,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAGA,IAAoB,UAAqB;EACvC,OAAO,MAAM;CACf;AACF"}

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

@@ -1,11 +1,13 @@
 "use client"
 /* */
+import { getListDataLoaderOptions } from "../../../../../../components-base/src/list/loading/types.mjs";
+import "../../../../../../components-base/src/index.mjs";
 import { useComponentDefaults } from "../../../ComponentDefaultsProvider/ComponentDefaultsProvider.mjs";
 import { IncrementalLoaderState } from "./IncrementalLoaderState.mjs";
 import { useEffect, useMemo } from "react";
 import { times } from "remeda";
-import { getAsyncResource, usePromise } from "@mittwald/react-use-promise";
 import { hash } from "object-code";
+import { getAsyncResource, usePromise } from "@mittwald/react-use-promise";
 //#region src/components/List/model/loading/IncrementalLoader.ts
 var emptyData = [];
 var IncrementalLoader = class IncrementalLoader {
@@ -105,18 +107,13 @@ var IncrementalLoader = class IncrementalLoader {
 		}));
 	}
 	getDataLoaderOptions(batchIndex) {
-		return {
-			pagination: this.manualPagination ? {
-				limit: this.list.batches.batchSize,
-				offset: this.list.batches.batchSize * batchIndex
-			} : void 0,
-			sorting: this.manualSorting ? Object.fromEntries(this.list.sorting.filter((s) => s.isSorted()).map((s) => [s.property, s.direction])) : void 0,
-			filtering: this.manualFiltering ? Object.fromEntries(this.list.filters.filter((f) => f.getValue() !== null).map((f) => [f.property, {
-				mode: f.mode,
-				values: f.getArrayValue().map((v) => v.value)
-			}])) : void 0,
-			searchString: this.manualFiltering ? this.list.reactTable.searchString : void 0
-		};
+		return getListDataLoaderOptions({
+			batchSize: this.list.batches.batchSize,
+			modes: this,
+			sorting: this.list.sorting,
+			filters: this.list.filters,
+			searchString: this.list.reactTable.searchString
+		}, batchIndex);
 	}
 	getBatchDataAsyncResource(batchIndex) {
 		const dataSource = this.dataSource;

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

@@ -1 +1 @@
-{"version":3,"file":"IncrementalLoader.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoader.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport type {\n  DataLoaderOptions,\n  DataLoaderResult,\n  DataSource,\n  IncrementalLoaderShape,\n  LoaderInvocationHook,\n} from \"@/components/List/model/loading/types\";\nimport type { AsyncResource } from \"@mittwald/react-use-promise\";\nimport { getAsyncResource, usePromise } from \"@mittwald/react-use-promise\";\nimport { useEffect } from \"react\";\nimport { times } from \"remeda\";\nimport { IncrementalLoaderState } from \"@/components/List/model/loading/IncrementalLoaderState\";\nimport { hash } from \"object-code\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport { useMemo } from \"react\";\nimport { useComponentDefaults } from \"@/components/ComponentDefaultsProvider\";\n\nconst emptyData: never[] = [];\n\nexport class IncrementalLoader<T> {\n  private readonly list: List<T>;\n  private readonly dataSource: DataSource<T>;\n  public readonly manualSorting: boolean;\n  public readonly manualFiltering: boolean;\n  public readonly manualPagination: boolean;\n  public readonly disableInitialSuspenseBoundary: boolean;\n  public readonly loaderState: IncrementalLoaderState<T>;\n  public readonly staticDataProperties: PropertyName<T>[] = [];\n\n  private constructor(list: List<T>, shape: IncrementalLoaderShape<T> = {}) {\n    const { source } = shape;\n\n    this.dataSource = source ?? { staticData: emptyData };\n\n    const {\n      disableInitialSuspenseBoundary: disableInitialSuspenseBoundaryDefault,\n    } = useComponentDefaults(\"List\");\n\n    this.disableInitialSuspenseBoundary =\n      \"disableInitialSuspenseBoundary\" in this.dataSource\n        ? (this.dataSource.disableInitialSuspenseBoundary ??\n          disableInitialSuspenseBoundaryDefault)\n        : disableInitialSuspenseBoundaryDefault;\n\n    const manualPagination =\n      \"manualPagination\" in this.dataSource\n        ? this.dataSource.manualPagination\n        : undefined;\n\n    const manualFiltering =\n      \"manualFiltering\" in this.dataSource\n        ? this.dataSource.manualFiltering\n        : undefined;\n\n    const manualSorting =\n      \"manualSorting\" in this.dataSource\n        ? this.dataSource.manualSorting\n        : undefined;\n\n    this.list = list;\n    this.loaderState = IncrementalLoaderState.useNew<T>(list);\n\n    this.manualPagination = manualPagination ?? false;\n    this.manualFiltering = manualFiltering ?? this.manualPagination;\n    this.manualSorting = manualSorting ?? this.manualPagination;\n    this.list.filters.forEach((f) => f.onFilterUpdated(() => this.reset()));\n    this.list.search?.onUpdated(() => this.reset());\n\n    this.initStaticDataProperties();\n  }\n\n  public static useNew<T>(\n    list: List<T>,\n    shape: IncrementalLoaderShape<T> = {},\n  ): IncrementalLoader<T> {\n    return new IncrementalLoader(list, shape);\n  }\n\n  private initStaticDataProperties() {\n    const addPropertiesOfDataEntry = (data: unknown) => {\n      if (typeof data !== \"object\" || data === null) {\n        return;\n      }\n\n      (Object.keys(data) as PropertyName<T>[])\n        .filter((p) => !this.staticDataProperties.includes(p))\n        .forEach((p) => {\n          this.staticDataProperties.push(p);\n        });\n    };\n\n    if (\"staticData\" in this.dataSource) {\n      this.dataSource.staticData\n        // collect properties from just the first 100 items\n        .slice(0, 100)\n        .forEach(addPropertiesOfDataEntry);\n    }\n  }\n\n  private reset(): void {\n    this.loaderState.reset();\n  }\n\n  public useIsLoading(): boolean {\n    return this.loaderState.useIsLoading();\n  }\n\n  public useIsInitiallyLoading(): boolean {\n    return this.loaderState.useIsInitiallyLoading();\n  }\n\n  public useIsLoadingMore(): boolean {\n    return this.loaderState.useIsLoadingMore();\n  }\n\n  public useData(): T[] {\n    return this.loaderState.useMergedData();\n  }\n\n  private getUseData(): (options: DataLoaderOptions<T>) => DataLoaderResult<T> {\n    const dataSource = this.dataSource;\n\n    return (options: DataLoaderOptions<T>) => {\n      if (\"staticData\" in dataSource) {\n        return useMemo(\n          () => ({\n            data: dataSource.staticData,\n            itemTotalCount: dataSource.staticData.length,\n          }),\n          [dataSource.staticData],\n        );\n      }\n\n      if (\"useData\" in dataSource) {\n        return dataSource.useData(options);\n      }\n\n      if (\"asyncLoader\" in dataSource) {\n        const asyncLoader = dataSource.asyncLoader;\n        const dependencies = dataSource.dependencies;\n        const loaderId = dependencies\n          ? hash(dependencies).toString()\n          : undefined;\n\n        return usePromise(asyncLoader, [options], {\n          loaderId,\n        });\n      }\n\n      if (\"asyncResourceFactory\" in dataSource) {\n        return dataSource.asyncResourceFactory(options).use();\n      }\n\n      return useMemo(\n        () => ({\n          data: [],\n          itemTotalCount: 0,\n        }),\n        [],\n      );\n    };\n  }\n\n  public getLoaderInvocationHooks(): LoaderInvocationHook[] {\n    const batchesCount = times(this.list.batches.getBatchIndex() + 1, (i) => i);\n    const useData = this.getUseData();\n\n    return batchesCount.map((batchIndex) => ({\n      useLoadBatch: () => {\n        const loaderOptions = this.getDataLoaderOptions(batchIndex);\n        const loaderResult = useData(loaderOptions);\n        const { data, itemTotalCount, metadata } = loaderResult;\n\n        useEffect(() => {\n          this.loaderState.setDataBatch(batchIndex, data);\n\n          if (itemTotalCount !== undefined) {\n            this.list.batches.updateItemTotalCount(itemTotalCount);\n          }\n\n          this.loaderState.setMetadata(metadata);\n\n          this.loaderState.setBatchLoadingState(batchIndex, \"loaded\");\n        }, [loaderResult]);\n      },\n\n      useRenderSuspense: () => {\n        useEffect(() => {\n          this.loaderState.setBatchLoadingState(batchIndex, \"loading\");\n        }, [batchIndex]);\n      },\n    }));\n  }\n\n  private getDataLoaderOptions(batchIndex: number): DataLoaderOptions<T> {\n    return {\n      pagination: this.manualPagination\n        ? {\n            limit: this.list.batches.batchSize,\n            offset: this.list.batches.batchSize * batchIndex,\n          }\n        : undefined,\n\n      sorting: this.manualSorting\n        ? (Object.fromEntries(\n            this.list.sorting\n              .filter((s) => s.isSorted())\n              .map((s) => [s.property, s.direction]),\n          ) as DataLoaderOptions<T>[\"sorting\"])\n        : undefined,\n\n      filtering: this.manualFiltering\n        ? (Object.fromEntries(\n            this.list.filters\n              .filter((f) => f.getValue() !== null)\n              .map((f) => [\n                f.property,\n                {\n                  mode: f.mode,\n                  values: f.getArrayValue().map((v) => v.value),\n                },\n              ]),\n          ) as DataLoaderOptions<T>[\"filtering\"])\n        : undefined,\n\n      searchString: this.manualFiltering\n        ? this.list.reactTable.searchString\n        : undefined,\n    };\n  }\n\n  private getBatchDataAsyncResource(\n    batchIndex: number,\n  ): AsyncResource<DataLoaderResult<T>> {\n    const dataSource = this.dataSource;\n    const loaderOptions = this.getDataLoaderOptions(batchIndex);\n\n    if (\"staticData\" in dataSource) {\n      return getAsyncResource(\n        async (staticData) => ({\n          data: staticData as T[],\n          itemTotalCount: staticData.length,\n        }),\n        [dataSource.staticData],\n      );\n    }\n\n    if (\"asyncLoader\" in dataSource) {\n      const asyncLoader = dataSource.asyncLoader;\n      const dependencies = dataSource.dependencies;\n      const loaderId = dependencies ? hash(dependencies).toString() : undefined;\n      return getAsyncResource(asyncLoader, [loaderOptions], {\n        loaderId,\n      });\n    }\n\n    if (\"asyncResourceFactory\" in dataSource) {\n      const asyncResourceFactory = dataSource.asyncResourceFactory;\n      return asyncResourceFactory(loaderOptions);\n    }\n\n    throw new Error(\"Unknown data source\");\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"IncrementalLoader.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoader.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport type {\n  DataLoaderOptions,\n  DataLoaderResult,\n  DataSource,\n  IncrementalLoaderShape,\n  LoaderInvocationHook,\n} from \"@/components/List/model/loading/types\";\nimport type { AsyncResource } from \"@mittwald/react-use-promise\";\nimport { getAsyncResource, usePromise } from \"@mittwald/react-use-promise\";\nimport { useEffect } from \"react\";\nimport { times } from \"remeda\";\nimport { IncrementalLoaderState } from \"@/components/List/model/loading/IncrementalLoaderState\";\nimport { getListDataLoaderOptions } from \"@mittwald/flow-components-base\";\nimport { hash } from \"object-code\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport { useMemo } from \"react\";\nimport { useComponentDefaults } from \"@/components/ComponentDefaultsProvider\";\n\nconst emptyData: never[] = [];\n\nexport class IncrementalLoader<T> {\n  private readonly list: List<T>;\n  private readonly dataSource: DataSource<T>;\n  public readonly manualSorting: boolean;\n  public readonly manualFiltering: boolean;\n  public readonly manualPagination: boolean;\n  public readonly disableInitialSuspenseBoundary: boolean;\n  public readonly loaderState: IncrementalLoaderState<T>;\n  public readonly staticDataProperties: PropertyName<T>[] = [];\n\n  private constructor(list: List<T>, shape: IncrementalLoaderShape<T> = {}) {\n    const { source } = shape;\n\n    this.dataSource = source ?? { staticData: emptyData };\n\n    const {\n      disableInitialSuspenseBoundary: disableInitialSuspenseBoundaryDefault,\n    } = useComponentDefaults(\"List\");\n\n    this.disableInitialSuspenseBoundary =\n      \"disableInitialSuspenseBoundary\" in this.dataSource\n        ? (this.dataSource.disableInitialSuspenseBoundary ??\n          disableInitialSuspenseBoundaryDefault)\n        : disableInitialSuspenseBoundaryDefault;\n\n    const manualPagination =\n      \"manualPagination\" in this.dataSource\n        ? this.dataSource.manualPagination\n        : undefined;\n\n    const manualFiltering =\n      \"manualFiltering\" in this.dataSource\n        ? this.dataSource.manualFiltering\n        : undefined;\n\n    const manualSorting =\n      \"manualSorting\" in this.dataSource\n        ? this.dataSource.manualSorting\n        : undefined;\n\n    this.list = list;\n    this.loaderState = IncrementalLoaderState.useNew<T>(list);\n\n    this.manualPagination = manualPagination ?? false;\n    this.manualFiltering = manualFiltering ?? this.manualPagination;\n    this.manualSorting = manualSorting ?? this.manualPagination;\n    this.list.filters.forEach((f) => f.onFilterUpdated(() => this.reset()));\n    this.list.search?.onUpdated(() => this.reset());\n\n    this.initStaticDataProperties();\n  }\n\n  public static useNew<T>(\n    list: List<T>,\n    shape: IncrementalLoaderShape<T> = {},\n  ): IncrementalLoader<T> {\n    return new IncrementalLoader(list, shape);\n  }\n\n  private initStaticDataProperties() {\n    const addPropertiesOfDataEntry = (data: unknown) => {\n      if (typeof data !== \"object\" || data === null) {\n        return;\n      }\n\n      (Object.keys(data) as PropertyName<T>[])\n        .filter((p) => !this.staticDataProperties.includes(p))\n        .forEach((p) => {\n          this.staticDataProperties.push(p);\n        });\n    };\n\n    if (\"staticData\" in this.dataSource) {\n      this.dataSource.staticData\n        // collect properties from just the first 100 items\n        .slice(0, 100)\n        .forEach(addPropertiesOfDataEntry);\n    }\n  }\n\n  private reset(): void {\n    this.loaderState.reset();\n  }\n\n  public useIsLoading(): boolean {\n    return this.loaderState.useIsLoading();\n  }\n\n  public useIsInitiallyLoading(): boolean {\n    return this.loaderState.useIsInitiallyLoading();\n  }\n\n  public useIsLoadingMore(): boolean {\n    return this.loaderState.useIsLoadingMore();\n  }\n\n  public useData(): T[] {\n    return this.loaderState.useMergedData();\n  }\n\n  private getUseData(): (options: DataLoaderOptions<T>) => DataLoaderResult<T> {\n    const dataSource = this.dataSource;\n\n    return (options: DataLoaderOptions<T>) => {\n      if (\"staticData\" in dataSource) {\n        return useMemo(\n          () => ({\n            data: dataSource.staticData,\n            itemTotalCount: dataSource.staticData.length,\n          }),\n          [dataSource.staticData],\n        );\n      }\n\n      if (\"useData\" in dataSource) {\n        return dataSource.useData(options);\n      }\n\n      if (\"asyncLoader\" in dataSource) {\n        const asyncLoader = dataSource.asyncLoader;\n        const dependencies = dataSource.dependencies;\n        const loaderId = dependencies\n          ? hash(dependencies).toString()\n          : undefined;\n\n        return usePromise(asyncLoader, [options], {\n          loaderId,\n        });\n      }\n\n      if (\"asyncResourceFactory\" in dataSource) {\n        return dataSource.asyncResourceFactory(options).use();\n      }\n\n      return useMemo(\n        () => ({\n          data: [],\n          itemTotalCount: 0,\n        }),\n        [],\n      );\n    };\n  }\n\n  public getLoaderInvocationHooks(): LoaderInvocationHook[] {\n    const batchesCount = times(this.list.batches.getBatchIndex() + 1, (i) => i);\n    const useData = this.getUseData();\n\n    return batchesCount.map((batchIndex) => ({\n      useLoadBatch: () => {\n        const loaderOptions = this.getDataLoaderOptions(batchIndex);\n        const loaderResult = useData(loaderOptions);\n        const { data, itemTotalCount, metadata } = loaderResult;\n\n        useEffect(() => {\n          this.loaderState.setDataBatch(batchIndex, data);\n\n          if (itemTotalCount !== undefined) {\n            this.list.batches.updateItemTotalCount(itemTotalCount);\n          }\n\n          this.loaderState.setMetadata(metadata);\n\n          this.loaderState.setBatchLoadingState(batchIndex, \"loaded\");\n        }, [loaderResult]);\n      },\n\n      useRenderSuspense: () => {\n        useEffect(() => {\n          this.loaderState.setBatchLoadingState(batchIndex, \"loading\");\n        }, [batchIndex]);\n      },\n    }));\n  }\n\n  private getDataLoaderOptions(batchIndex: number): DataLoaderOptions<T> {\n    return getListDataLoaderOptions<T>(\n      {\n        batchSize: this.list.batches.batchSize,\n        modes: this,\n        sorting: this.list.sorting,\n        filters: this.list.filters,\n        searchString: this.list.reactTable.searchString,\n      },\n      batchIndex,\n    );\n  }\n\n  private getBatchDataAsyncResource(\n    batchIndex: number,\n  ): AsyncResource<DataLoaderResult<T>> {\n    const dataSource = this.dataSource;\n    const loaderOptions = this.getDataLoaderOptions(batchIndex);\n\n    if (\"staticData\" in dataSource) {\n      return getAsyncResource(\n        async (staticData) => ({\n          data: staticData as T[],\n          itemTotalCount: staticData.length,\n        }),\n        [dataSource.staticData],\n      );\n    }\n\n    if (\"asyncLoader\" in dataSource) {\n      const asyncLoader = dataSource.asyncLoader;\n      const dependencies = dataSource.dependencies;\n      const loaderId = dependencies ? hash(dependencies).toString() : undefined;\n      return getAsyncResource(asyncLoader, [loaderOptions], {\n        loaderId,\n      });\n    }\n\n    if (\"asyncResourceFactory\" in dataSource) {\n      const asyncResourceFactory = dataSource.asyncResourceFactory;\n      return asyncResourceFactory(loaderOptions);\n    }\n\n    throw new Error(\"Unknown data source\");\n  }\n}\n"],"mappings":"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"}

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

@@ -2,87 +2,39 @@
 /* */
 import useSelector from "../../../../lib/mobx/useSelector.mjs";
 import { useStatic } from "../../../../lib/hooks/useStatic.mjs";
-import { uniqueBy } from "remeda";
-import { action, computed, makeObservable, observable } from "mobx";
+import { ListLoaderState } from "../../../../../../components-base/src/list/loading/ListLoaderState.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/loading/IncrementalLoaderState.ts
-var IncrementalLoaderState = class IncrementalLoaderState {
-	dataBatches = [];
-	prevDataBatches = [];
-	batchLoadingStates = ["void"];
-	metadata = void 0;
+/**
+* React's view of the list's loading state.
+*
+* Everything the state _is_ — the batches, the deduplication, what counts as
+* loading — lives in `ListLoaderState` in `@mittwald/flow-components-base`, so
+* the Vue binding runs the same rules rather than a second implementation of
+* them. What is left here is the subscription: MobX is framework-agnostic,
+* reading it in a component is not.
+*/
+var IncrementalLoaderState = class IncrementalLoaderState extends ListLoaderState {
 	list;
-	isInitiallyLoading = true;
 	constructor(list) {
+		super({ getItemId: list.getItemId });
 		this.list = list;
-		makeObservable(this, {
-			prevDataBatches: false,
-			useMergedData: false,
-			useIsLoading: false,
-			useIsLoadingMore: false,
-			dataBatches: observable.shallow,
-			batchLoadingStates: observable.shallow,
-			metadata: observable,
-			mergedData: computed,
-			isLoading: computed,
-			isLoadingMore: computed,
-			isInitiallyLoading: observable,
-			setIsInitiallyLoading: action.bound,
-			reset: action.bound,
-			setDataBatch: action.bound,
-			setBatchLoadingState: action.bound,
-			setMetadata: action.bound
-		});
 	}
 	static useNew(list) {
 		return useStatic(() => new IncrementalLoaderState(list));
 	}
-	reset() {
-		this.batchLoadingStates = [];
-		this.dataBatches = [];
-	}
-	setDataBatch(index, data) {
-		if (this.dataBatches.length === 0) this.prevDataBatches = [];
-		if (this.dataBatches[index] !== data) {
-			this.dataBatches[index] = data;
-			this.prevDataBatches[index] = data;
-		}
-	}
-	setBatchLoadingState(index, state) {
-		if (state === "error" || state === "loaded") this.setIsInitiallyLoading(false);
-		if (this.batchLoadingStates[index] !== state) this.batchLoadingStates[index] = state;
-	}
-	setMetadata(metadata) {
-		this.metadata = metadata;
-	}
-	setIsInitiallyLoading(isInitiallyLoading) {
-		this.isInitiallyLoading = isInitiallyLoading;
-	}
-	get mergedData() {
-		const merged = (this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches).flatMap((d) => d);
-		if (this.list.getItemId) return uniqueBy(merged, this.list.getItemId);
-		else return merged;
-	}
 	useMergedData() {
 		return useSelector(() => this.mergedData, [this.prevDataBatches]);
 	}
-	get isLoading() {
-		return this.batchLoadingStates.some((s) => s === "loading" || s === "void");
-	}
 	useIsLoading() {
 		return useSelector(() => this.isLoading);
 	}
-	get isLoadingMore() {
-		return this.isLoading && this.dataBatches.length > 0;
-	}
 	useIsLoadingMore() {
 		return useSelector(() => this.isLoadingMore);
 	}
 	useIsInitiallyLoading() {
 		return useSelector(() => this.isInitiallyLoading);
 	}
-	isBatchLoaded(batchIndex) {
-		return batchIndex in this.dataBatches;
-	}
 };
 //#endregion
 export { IncrementalLoaderState };

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

@@ -1 +1 @@
-{"version":3,"file":"IncrementalLoaderState.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoaderState.ts"],"sourcesContent":["import type { ListData } from \"@/components/List/model/loading/types\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport type { AsyncResource } from \"@mittwald/react-use-promise\";\nimport { action, computed, makeObservable, observable } from \"mobx\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\nimport type List from \"@/components/List/model/List\";\nimport { uniqueBy } from \"remeda\";\n\ntype AsyncResourceLoadingState = AsyncResource[\"state\"][\"value\"];\ntype DataBatches<T> = ListData<T>[];\ntype BatchesLoadingState = AsyncResourceLoadingState[];\n\nexport class IncrementalLoaderState<T> {\n  public dataBatches: DataBatches<T> = [];\n  public prevDataBatches: DataBatches<T> = [];\n  public batchLoadingStates: BatchesLoadingState = [\"void\"];\n  public metadata?: unknown = undefined;\n  public readonly list: List<T>;\n  public isInitiallyLoading = true;\n\n  private constructor(list: List<T>) {\n    this.list = list;\n    makeObservable(this, {\n      prevDataBatches: false,\n      useMergedData: false,\n      useIsLoading: false,\n      useIsLoadingMore: false,\n      dataBatches: observable.shallow,\n      batchLoadingStates: observable.shallow,\n      metadata: observable,\n      mergedData: computed,\n      isLoading: computed,\n      isLoadingMore: computed,\n      isInitiallyLoading: observable,\n      setIsInitiallyLoading: action.bound,\n      reset: action.bound,\n      setDataBatch: action.bound,\n      setBatchLoadingState: action.bound,\n      setMetadata: action.bound,\n    });\n  }\n\n  public static useNew<T>(list: List<T>): IncrementalLoaderState<T> {\n    return useStatic(() => new IncrementalLoaderState<T>(list));\n  }\n\n  public reset(): void {\n    this.batchLoadingStates = [];\n    this.dataBatches = [];\n  }\n\n  public setDataBatch(index: number, data: ListData<T>): void {\n    if (this.dataBatches.length === 0) {\n      this.prevDataBatches = [];\n    }\n\n    if (this.dataBatches[index] !== data) {\n      this.dataBatches[index] = data;\n      this.prevDataBatches[index] = data;\n    }\n  }\n\n  public setBatchLoadingState(\n    index: number,\n    state: AsyncResourceLoadingState,\n  ): void {\n    if (state === \"error\" || state === \"loaded\") {\n      this.setIsInitiallyLoading(false);\n    }\n    if (this.batchLoadingStates[index] !== state) {\n      this.batchLoadingStates[index] = state;\n    }\n  }\n\n  public setMetadata(metadata?: unknown): void {\n    this.metadata = metadata;\n  }\n\n  public setIsInitiallyLoading(isInitiallyLoading: boolean): void {\n    this.isInitiallyLoading = isInitiallyLoading;\n  }\n\n  public get mergedData(): T[] {\n    const dataBatches =\n      this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches;\n\n    const merged = dataBatches.flatMap((d) => d);\n    if (this.list.getItemId) {\n      return uniqueBy(merged, this.list.getItemId);\n    } else {\n      return merged;\n    }\n  }\n\n  public useMergedData(): T[] {\n    return useSelector(() => this.mergedData, [this.prevDataBatches]);\n  }\n\n  public get isLoading(): boolean {\n    return this.batchLoadingStates.some((s) => s === \"loading\" || s === \"void\");\n  }\n\n  public useIsLoading(): boolean {\n    return useSelector(() => this.isLoading);\n  }\n\n  public get isLoadingMore(): boolean {\n    return this.isLoading && this.dataBatches.length > 0;\n  }\n\n  public useIsLoadingMore(): boolean {\n    return useSelector(() => this.isLoadingMore);\n  }\n\n  public useIsInitiallyLoading(): boolean {\n    return useSelector(() => this.isInitiallyLoading);\n  }\n\n  public isBatchLoaded(batchIndex: number) {\n    return batchIndex in this.dataBatches;\n  }\n}\n"],"mappings":";;;;;;;AAYA,IAAa,yBAAb,MAAa,uBAA0B;CACrC,cAAqC,CAAC;CACtC,kBAAyC,CAAC;CAC1C,qBAAiD,CAAC,MAAM;CACxD,WAA4B,KAAA;CAC5B;CACA,qBAA4B;CAE5B,YAAoB,MAAe;EACjC,KAAK,OAAO;EACZ,eAAe,MAAM;GACnB,iBAAiB;GACjB,eAAe;GACf,cAAc;GACd,kBAAkB;GAClB,aAAa,WAAW;GACxB,oBAAoB,WAAW;GAC/B,UAAU;GACV,YAAY;GACZ,WAAW;GACX,eAAe;GACf,oBAAoB;GACpB,uBAAuB,OAAO;GAC9B,OAAO,OAAO;GACd,cAAc,OAAO;GACrB,sBAAsB,OAAO;GAC7B,aAAa,OAAO;EACtB,CAAC;CACH;CAEA,OAAc,OAAU,MAA0C;EAChE,OAAO,gBAAgB,IAAI,uBAA0B,IAAI,CAAC;CAC5D;CAEA,QAAqB;EACnB,KAAK,qBAAqB,CAAC;EAC3B,KAAK,cAAc,CAAC;CACtB;CAEA,aAAoB,OAAe,MAAyB;EAC1D,IAAI,KAAK,YAAY,WAAW,GAC9B,KAAK,kBAAkB,CAAC;EAG1B,IAAI,KAAK,YAAY,WAAW,MAAM;GACpC,KAAK,YAAY,SAAS;GAC1B,KAAK,gBAAgB,SAAS;EAChC;CACF;CAEA,qBACE,OACA,OACM;EACN,IAAI,UAAU,WAAW,UAAU,UACjC,KAAK,sBAAsB,KAAK;EAElC,IAAI,KAAK,mBAAmB,WAAW,OACrC,KAAK,mBAAmB,SAAS;CAErC;CAEA,YAAmB,UAA0B;EAC3C,KAAK,WAAW;CAClB;CAEA,sBAA6B,oBAAmC;EAC9D,KAAK,qBAAqB;CAC5B;CAEA,IAAW,aAAkB;EAI3B,MAAM,UAFJ,KAAK,YAAY,WAAW,IAAI,KAAK,kBAAkB,KAAK,YAAA,CAEnC,SAAS,MAAM,CAAC;EAC3C,IAAI,KAAK,KAAK,WACZ,OAAO,SAAS,QAAQ,KAAK,KAAK,SAAS;OAE3C,OAAO;CAEX;CAEA,gBAA4B;EAC1B,OAAO,kBAAkB,KAAK,YAAY,CAAC,KAAK,eAAe,CAAC;CAClE;CAEA,IAAW,YAAqB;EAC9B,OAAO,KAAK,mBAAmB,MAAM,MAAM,MAAM,aAAa,MAAM,MAAM;CAC5E;CAEA,eAA+B;EAC7B,OAAO,kBAAkB,KAAK,SAAS;CACzC;CAEA,IAAW,gBAAyB;EAClC,OAAO,KAAK,aAAa,KAAK,YAAY,SAAS;CACrD;CAEA,mBAAmC;EACjC,OAAO,kBAAkB,KAAK,aAAa;CAC7C;CAEA,wBAAwC;EACtC,OAAO,kBAAkB,KAAK,kBAAkB;CAClD;CAEA,cAAqB,YAAoB;EACvC,OAAO,cAAc,KAAK;CAC5B;AACF"}
+{"version":3,"file":"IncrementalLoaderState.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoaderState.ts"],"sourcesContent":["import useSelector from \"@/lib/mobx/useSelector\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\nimport type List from \"@/components/List/model/List\";\nimport { ListLoaderState } from \"@mittwald/flow-components-base\";\n\n/**\n * React's view of the list's loading state.\n *\n * Everything the state _is_ — the batches, the deduplication, what counts as\n * loading — lives in `ListLoaderState` in `@mittwald/flow-components-base`, so\n * the Vue binding runs the same rules rather than a second implementation of\n * them. What is left here is the subscription: MobX is framework-agnostic,\n * reading it in a component is not.\n */\nexport class IncrementalLoaderState<T> extends ListLoaderState<T> {\n  public readonly list: List<T>;\n\n  private constructor(list: List<T>) {\n    super({ getItemId: list.getItemId });\n    this.list = list;\n  }\n\n  public static useNew<T>(list: List<T>): IncrementalLoaderState<T> {\n    return useStatic(() => new IncrementalLoaderState<T>(list));\n  }\n\n  public useMergedData(): T[] {\n    return useSelector(() => this.mergedData, [this.prevDataBatches]);\n  }\n\n  public useIsLoading(): boolean {\n    return useSelector(() => this.isLoading);\n  }\n\n  public useIsLoadingMore(): boolean {\n    return useSelector(() => this.isLoadingMore);\n  }\n\n  public useIsInitiallyLoading(): boolean {\n    return useSelector(() => this.isInitiallyLoading);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAa,yBAAb,MAAa,+BAAkC,gBAAmB;CAChE;CAEA,YAAoB,MAAe;EACjC,MAAM,EAAE,WAAW,KAAK,UAAU,CAAC;EACnC,KAAK,OAAO;CACd;CAEA,OAAc,OAAU,MAA0C;EAChE,OAAO,gBAAgB,IAAI,uBAA0B,IAAI,CAAC;CAC5D;CAEA,gBAA4B;EAC1B,OAAO,kBAAkB,KAAK,YAAY,CAAC,KAAK,eAAe,CAAC;CAClE;CAEA,eAA+B;EAC7B,OAAO,kBAAkB,KAAK,SAAS;CACzC;CAEA,mBAAmC;EACjC,OAAO,kBAAkB,KAAK,aAAa;CAC7C;CAEA,wBAAwC;EACtC,OAAO,kBAAkB,KAAK,kBAAkB;CAClD;AACF"}

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

@@ -1,55 +1,27 @@
 "use client"
 /* */
+import { ListSearch } from "../../../../../../components-base/src/list/search/ListSearch.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/search/Search.ts
-var Search = class {
-	list;
+/**
+* React's search: the shared one plus how the field is rendered.
+*
+* The term, its initial value and its persistence are `ListSearch` in
+* `@mittwald/flow-components-base`. `render` and `textFieldProps` stay here — a
+* component type and Flow's `SearchField` props are React, and a binding brings
+* its own.
+*/
+var Search = class extends ListSearch {
 	render;
 	textFieldProps;
-	onUpdateCallbacks = /* @__PURE__ */ new Set();
-	initialValue;
-	defaultValue;
-	autosave;
-	constructor(list, searchShape) {
-		const { autosave = list.settingsStorageDefaults?.search?.autosave ?? false, render, textFieldProps, defaultValue } = searchShape;
-		this.autosave = autosave;
-		this.list = list;
-		this.render = render;
-		this.textFieldProps = textFieldProps;
-		this.defaultValue = defaultValue;
-		this.initialValue = this.getInitialValue();
-	}
-	get value() {
-		return this.list.reactTable.searchString;
-	}
-	get isSet() {
-		return this.value !== void 0;
-	}
-	callOnUpdateCallbacks() {
-		this.onUpdateCallbacks.forEach((cb) => cb());
-	}
-	getInitialValue() {
-		return this.list.settingsStorage?.get("search", { autosave: this.autosave })?.value ?? this.defaultValue;
-	}
-	updateInitialState(initialState) {
-		initialState.globalFilter = this.initialValue;
-	}
-	setValue(value) {
-		if (value === void 0 || value.trim() === "") {
-			if (this.list.reactTable.table.getState().globalFilter) {
-				this.list.reactTable.table.setGlobalFilter(void 0);
-				this.callOnUpdateCallbacks();
-			}
-		} else {
-			this.list.reactTable.table.setGlobalFilter(value);
-			this.callOnUpdateCallbacks();
-		}
-		this.list.settingsStorage?.store("search", { value }, { autosave: this.autosave });
-	}
-	clear() {
-		this.setValue(void 0);
-	}
-	onUpdated(cb) {
-		this.onUpdateCallbacks.add(cb);
+	constructor(context, shape) {
+		super(context, shape);
+		this.render = shape.render;
+		this.textFieldProps = shape.textFieldProps;
+	}
+	/** The list this search belongs to — `context`, typed as React's `List`. */
+	get list() {
+		return this.context;
 	}
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Search.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/search/Search.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport type {\n  SearchFieldRenderComponent,\n  SearchShape,\n  SearchValue,\n} from \"@/components/List/model/search/types\";\nimport type { InitialTableState } from \"@tanstack/react-table\";\n\nexport class Search<T> {\n  public readonly list: List<T>;\n  public readonly render?: SearchFieldRenderComponent;\n  public readonly textFieldProps: SearchShape<T>[\"textFieldProps\"];\n  private onUpdateCallbacks = new Set<() => unknown>();\n  private readonly initialValue?: string;\n  private readonly defaultValue?: string;\n  private readonly autosave: boolean;\n\n  public constructor(list: List<T>, searchShape: SearchShape<T>) {\n    const {\n      autosave = list.settingsStorageDefaults?.search?.autosave ?? false,\n      render,\n      textFieldProps,\n      defaultValue,\n    } = searchShape;\n\n    this.autosave = autosave;\n    this.list = list;\n    this.render = render;\n    this.textFieldProps = textFieldProps;\n    this.defaultValue = defaultValue;\n\n    this.initialValue = this.getInitialValue();\n  }\n\n  public get value(): SearchValue {\n    return this.list.reactTable.searchString;\n  }\n\n  public get isSet() {\n    return this.value !== undefined;\n  }\n\n  private callOnUpdateCallbacks(): void {\n    this.onUpdateCallbacks.forEach((cb) => cb());\n  }\n\n  private getInitialValue() {\n    return (\n      this.list.settingsStorage?.get(\"search\", { autosave: this.autosave })\n        ?.value ?? this.defaultValue\n    );\n  }\n\n  public updateInitialState(initialState: InitialTableState) {\n    initialState.globalFilter = this.initialValue;\n  }\n\n  public setValue(value: SearchValue): void {\n    if (value === undefined || value.trim() === \"\") {\n      if (this.list.reactTable.table.getState().globalFilter) {\n        this.list.reactTable.table.setGlobalFilter(undefined);\n        this.callOnUpdateCallbacks();\n      }\n    } else {\n      this.list.reactTable.table.setGlobalFilter(value);\n      this.callOnUpdateCallbacks();\n    }\n\n    this.list.settingsStorage?.store(\n      \"search\",\n      { value },\n      { autosave: this.autosave },\n    );\n  }\n\n  public clear(): void {\n    this.setValue(undefined);\n  }\n\n  public onUpdated(cb: () => unknown): void {\n    this.onUpdateCallbacks.add(cb);\n  }\n}\n"],"mappings":";;;AAQA,IAAa,SAAb,MAAuB;CACrB;CACA;CACA;CACA,oCAA4B,IAAI,IAAmB;CACnD;CACA;CACA;CAEA,YAAmB,MAAe,aAA6B;EAC7D,MAAM,EACJ,WAAW,KAAK,yBAAyB,QAAQ,YAAY,OAC7D,QACA,gBACA,iBACE;EAEJ,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,iBAAiB;EACtB,KAAK,eAAe;EAEpB,KAAK,eAAe,KAAK,gBAAgB;CAC3C;CAEA,IAAW,QAAqB;EAC9B,OAAO,KAAK,KAAK,WAAW;CAC9B;CAEA,IAAW,QAAQ;EACjB,OAAO,KAAK,UAAU,KAAA;CACxB;CAEA,wBAAsC;EACpC,KAAK,kBAAkB,SAAS,OAAO,GAAG,CAAC;CAC7C;CAEA,kBAA0B;EACxB,OACE,KAAK,KAAK,iBAAiB,IAAI,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,EACjE,SAAS,KAAK;CAEtB;CAEA,mBAA0B,cAAiC;EACzD,aAAa,eAAe,KAAK;CACnC;CAEA,SAAgB,OAA0B;EACxC,IAAI,UAAU,KAAA,KAAa,MAAM,KAAK,MAAM,IACtC;OAAA,KAAK,KAAK,WAAW,MAAM,SAAS,CAAC,CAAC,cAAc;IACtD,KAAK,KAAK,WAAW,MAAM,gBAAgB,KAAA,CAAS;IACpD,KAAK,sBAAsB;GAC7B;SACK;GACL,KAAK,KAAK,WAAW,MAAM,gBAAgB,KAAK;GAChD,KAAK,sBAAsB;EAC7B;EAEA,KAAK,KAAK,iBAAiB,MACzB,UACA,EAAE,MAAM,GACR,EAAE,UAAU,KAAK,SAAS,CAC5B;CACF;CAEA,QAAqB;EACnB,KAAK,SAAS,KAAA,CAAS;CACzB;CAEA,UAAiB,IAAyB;EACxC,KAAK,kBAAkB,IAAI,EAAE;CAC/B;AACF"}
+{"version":3,"file":"Search.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/search/Search.ts"],"sourcesContent":["import type { SearchShape } from \"@/components/List/model/search/types\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport { ListSearch } from \"@mittwald/flow-components-base\";\nimport type { List } from \"@/components/List/model/List\";\n\n/**\n * React's search: the shared one plus how the field is rendered.\n *\n * The term, its initial value and its persistence are `ListSearch` in\n * `@mittwald/flow-components-base`. `render` and `textFieldProps` stay here — a\n * component type and Flow's `SearchField` props are React, and a binding brings\n * its own.\n */\nexport class Search<T> extends ListSearch<T> {\n  public readonly render?: SearchShape<T>[\"render\"];\n  public readonly textFieldProps: SearchShape<T>[\"textFieldProps\"];\n\n  public constructor(context: ListModelContext<T>, shape: SearchShape<T>) {\n    super(context, shape);\n    this.render = shape.render;\n    this.textFieldProps = shape.textFieldProps;\n  }\n\n  /** The list this search belongs to — `context`, typed as React's `List`. */\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,SAAb,cAA+B,WAAc;CAC3C;CACA;CAEA,YAAmB,SAA8B,OAAuB;EACtE,MAAM,SAAS,KAAK;EACpB,KAAK,SAAS,MAAM;EACpB,KAAK,iBAAiB,MAAM;CAC9B;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;AACF"}