@mittwald/flow-react-components 1.5.0-next.8 → 1.5.0

package/dist/types/_bundled/flow-components-base/list/table/ListTable.d.ts

@@ -0,0 +1,34 @@
+import type { RowData, Table, TableOptions, TableState, Updater } from "@tanstack/table-core";
+/**
+ * A TanStack table whose state is MobX.
+ *
+ * `useReactTable` is `createTable` plus a `useState` for the table's own state
+ * and a `setOptions` on every render that folds that state back in. Only the
+ * `useState` is React, and `@tanstack/vue-table` reimplements the same twenty
+ * lines against Vue's reactivity — so the state lives here instead and each
+ * binding brings its subscription.
+ *
+ * Options still arrive from the binding on every render, because that is where
+ * they come from: the loaded data, the column definitions the list's filters
+ * and sortings produce, a controlled piece of state. `setOptions` is therefore
+ * called by the binding, and re-applied here whenever the state changes.
+ */
+export declare class ListTable<T extends RowData> {
+    readonly table: Table<T>;
+    state: TableState;
+    /**
+     * Bumped whenever the state _or_ the options changed.
+     *
+     * The row models are derived from both, and the options are plain data that
+     * arrives from the binding — so a binding observing only `state` keeps
+     * rendering the previous rows after new data was handed in. It is the one
+     * signal that says "ask the table again".
+     */
+    revision: number;
+    private options;
+    constructor(options: TableOptions<T>);
+    setState(updater: Updater<TableState>): void;
+    /** Called by the binding on every render, with that render's options. */
+    setOptions(options: TableOptions<T>): void;
+    private applyOptions;
+}

package/dist/types/_bundled/flow-components-base/list/types.d.ts

@@ -0,0 +1,18 @@
+import type { ItemType } from "../lib/array";
+import type { DeepKeys, DeepValue } from "@tanstack/table-core";
+export declare const customPropertyPrefix: "$";
+/**
+ * A column that is not a property of the item — a computed one, or one a filter
+ * invents. Prefixed so it cannot collide with a real key.
+ */
+export type CustomPropertyName = `${typeof customPropertyPrefix}${string}`;
+export type PropertyName<T> = DeepKeys<T> | CustomPropertyName;
+export type PropertyValue<T, TProp> = TProp extends CustomPropertyName ? T : DeepValue<T, TProp>;
+/**
+ * How a filter turns one of its values into something to show.
+ *
+ * The return type is the binding's: React's `Filter` narrows it to `ReactNode`,
+ * which is why the class carries it as a type parameter instead of deciding it
+ * here.
+ */
+export type PropertyValueRenderMethod<TMatcherValue, TRendered = unknown> = (prop: NonNullable<ItemType<TMatcherValue>>) => TRendered;

package/dist/types/_bundled/flow-components-base/list/viewMode/ListViewMode.d.ts

@@ -0,0 +1,25 @@
+import type { ListViewModeOptions, ListViewModeValue } from "./types";
+/**
+ * Which layout the list is in, and its persistence.
+ *
+ * The value is a MobX observable rather than a binding's own state, so that the
+ * rule it obeys — a stored mode wins over the default, and a change is written
+ * back — is one implementation. A binding brings the subscription:
+ * `useSelector` in React, `watchMobxValue` in Vue.
+ */
+export declare class ListViewMode {
+    value: ListViewModeValue;
+    private storage;
+    constructor(options?: ListViewModeOptions);
+    get autosave(): boolean;
+    /**
+     * Where a change is written, for a binding whose list can change it without a
+     * new model — React rebuilds the list every render, the view mode lives on.
+     * The value itself is read only once, at construction.
+     */
+    updateStorage(storage: Pick<ListViewModeOptions, "autosave" | "settings">): void;
+    get isTiles(): boolean;
+    get isTable(): boolean;
+    get isList(): boolean;
+    set(viewMode: ListViewModeValue): void;
+}

package/dist/types/_bundled/flow-components-base/list/viewMode/types.d.ts

@@ -0,0 +1,10 @@
+import type { ListSettingsPort } from "../settings/types";
+/** How the list lays its items out. */
+export type ListViewModeValue = "table" | "list" | "tiles";
+export interface ListViewModeOptions {
+    /** The mode to start in. A persisted mode takes precedence. */
+    defaultValue?: ListViewModeValue;
+    /** @default true */
+    autosave?: boolean;
+    settings?: ListSettingsPort;
+}

package/dist/types/components/Accordion/Accordion.d.ts

@@ -1,8 +1,17 @@
 import { ComponentProps, FC, PropsWithChildren } from 'react';
 export interface AccordionProps extends PropsWithChildren<ComponentProps<"div">> {
+    /**
+     * The key of the accordion inside an `AccordionGroup`, used by its
+     * `expandedKeys`. Also set as the DOM id.
+     */
+    id?: string;
     /** Whether the accordion should be initially expanded. */
     defaultExpanded?: boolean;
-    /** The visual variant of the accordion. @default "default" */
+    /**
+     * The visual variant of the accordion. Has no effect.
+     *
+     * @deprecated Use `AccordionGroup` or a `LayoutCard` to set accordions apart.
+     */
     variant?: "default" | "outline";
 }
 /**

package/dist/types/components/AccordionGroup/AccordionGroup.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
+export interface AccordionGroupProps extends PropsWithChildren<Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "ref" | "children">>, FlowComponentProps {
+    /**
+     * The `id`s of the expanded accordions, when the group is controlled. Like
+     * React Aria's `expandedKeys`, but an accordion's `id` is a string.
+     */
+    expandedKeys?: Iterable<string>;
+    /** The `id`s of the accordions that are expanded initially. */
+    defaultExpandedKeys?: Iterable<string>;
+    /** Called with the `id`s of the expanded accordions when they change. */
+    onExpandedChange?: (expandedKeys: Set<string>) => void;
+    /**
+     * Whether several accordions can be expanded at the same time. When false,
+     * expanding one accordion collapses the others. Unlike React Aria's
+     * `DisclosureGroup`, this defaults to `true`.
+     *
+     * @default true
+     */
+    allowsMultipleExpanded?: boolean;
+    /**
+     * Whether separators are drawn between the accordions.
+     *
+     * @default true
+     */
+    separators?: boolean;
+}
+/**
+ * @flr-generate all
+ * @flowStatus beta, new
+ */
+export declare const AccordionGroup: import('react').FunctionComponent<AccordionGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default AccordionGroup;

package/dist/types/components/AccordionGroup/context.d.ts

@@ -0,0 +1,8 @@
+export interface AccordionGroupContextValue {
+    isExpanded: (key: string, isDefaultExpanded: boolean) => boolean;
+    setExpanded: (key: string, isExpanded: boolean) => void;
+    /** Registers an accordion for `onExpandedChange`; returns the cleanup. */
+    register: (key: string, isDefaultExpanded: boolean) => () => void;
+}
+export declare const AccordionGroupContext: import('react').Context<AccordionGroupContextValue | null>;
+export declare const useAccordionGroupContext: () => AccordionGroupContextValue | null;

package/dist/types/components/AccordionGroup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './view';
+export { type AccordionGroupProps, AccordionGroup } from './AccordionGroup';
+export { default } from './AccordionGroup';

package/dist/types/components/AccordionGroup/lib/expansion.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The expansion state of an uncontrolled `AccordionGroup`. An accordion's own
+ * `defaultExpanded` is only known once it renders, so the state stores what the
+ * user changed instead of the full set of expanded keys.
+ */
+export interface Expansion {
+    defaultKeys: ReadonlySet<string>;
+    overrides: ReadonlyMap<string, boolean>;
+    /** False once a single-expand toggle closed every accordion but one. */
+    followsDefaults: boolean;
+}
+export declare const initialExpansion: (defaultExpandedKeys?: Iterable<string>) => Expansion;
+export declare const isKeyExpanded: (expansion: Expansion, key: string, isDefaultExpanded: boolean) => boolean;
+export declare const setKeyExpanded: (expansion: Expansion, key: string, isExpanded: boolean, allowsMultipleExpanded: boolean) => Expansion;
+export declare const expandedKeysOf: (expansion: Expansion, defaultExpandedByKey: ReadonlyMap<string, boolean>) => Set<string>;
+export declare const nextExpandedKeys: (expandedKeys: ReadonlySet<string>, key: string, isExpanded: boolean, allowsMultipleExpanded: boolean) => Set<string>;

package/dist/types/components/AccordionGroup/view.d.ts

@@ -0,0 +1,7 @@
+import { AccordionGroup } from './AccordionGroup';
+import { ViewComponent } from '../../lib/viewComponentContext';
+declare global {
+    interface FlowViewComponents {
+        AccordionGroup: ViewComponent<typeof AccordionGroup>;
+    }
+}

package/dist/types/components/Action/models/ActionState.d.ts

@@ -1,29 +1,16 @@
-export type ActionStateValue = "isIdle" | "isSucceeded" | "isPending" | "isExecuting" | "isFailed";
+import { ActionState as ActionStateBase } from '../../../_bundled/flow-components-base/index';
+export type { ActionStateValue } from '../../../_bundled/flow-components-base/index';
 export declare const duration: {
     pending: number;
     succeeded: number;
     failed: number;
 };
-export declare class ActionState {
-    private showFeedback?;
-    state: ActionStateValue;
-    private setPendingTimeout;
-    error: unknown;
-    private isAsync;
-    constructor();
+/**
+ * The state machine is `@mittwald/flow-components-base`'s, shared with every
+ * remote binding; this adds the hooks.
+ */
+export declare class ActionState extends ActionStateBase {
     static useNew(): ActionState;
-    updateState(newState: ActionStateValue): void;
-    useValue(): ActionStateValue;
+    useValue(): ActionStateBase["state"];
     useIsBusy(): boolean;
-    get isBusy(): boolean;
-    onAsyncStart(): void;
-    onSucceeded(): Promise<void>;
-    onFailed(error?: unknown): Promise<void>;
-    withFeedback(feedback?: boolean): ActionState;
-    private startFailedFeedback;
-    private startSucceededFeedback;
-    private resetAfterDone;
-    private clearPendingTimeout;
-    private onDone;
-    private startPending;
 }

package/dist/types/components/ActionGroup/ActionGroup.d.ts

@@ -8,8 +8,9 @@ export interface ActionGroupProps extends PropsWithChildren, FlowComponentProps<
     /** The size of the buttons and links inside the action group. @default "m" */
     size?: ButtonProps["size"];
     /**
-     * When set, the buttons are not sorted automatically but stay in source
-     * order. @default false
+     * When set, the buttons are not sorted into the slots `primary`, `secondary`
+     * and `abort` but stay in source order. Use it when the actions have no such
+     * hierarchy, e.g. a row of equal actions or icon buttons. @default false
      */
     preserveOrder?: boolean;
 }

package/dist/types/components/Button/Button.d.ts

@@ -3,7 +3,13 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { AlphaColor } from '../../lib/types/props';
 import * as Aria from "react-aria-components";
 export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps>, FlowComponentProps<HTMLButtonElement> {
-    /** Slot for button placement in action groups. */
+    /**
+     * Slot for button placement in action groups: `primary` (at the end),
+     * `secondary` (before the primary action) or `abort` (at the start). Without
+     * a slot, an action group places the colors primary, success and danger in
+     * `primary` and every other color in `abort`. A secondary-colored button that
+     * does not abort therefore needs `slot="secondary"`.
+     */
     slot?: string;
     /**
      * The color of the button.

package/dist/types/components/Button/stories/lib.d.ts

@@ -4,4 +4,4 @@ export declare const asyncFunction: (...args: unknown[]) => Promise<void>;
 export declare const asyncLongFunction: (...args: unknown[]) => Promise<void>;
 export declare const asyncLongFunctionWithError: (...args: unknown[]) => Promise<never>;
 export declare const asyncFunctionWithError: (...args: unknown[]) => Promise<never>;
-export declare const button: import("react").JSX.Element;
+export declare const button: import('react').JSX.Element;

package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.d.ts

@@ -1 +1,3 @@
-export {};
+import { DefaultTooltipContentProps } from 'recharts';
+import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+export type TooltipPayloadItem = NonNullable<DefaultTooltipContentProps<ValueType, NameType>["payload"]>[number];

package/dist/types/components/CartesianChart/components/YAxis/YAxis.d.ts

@@ -4,6 +4,13 @@ import * as Recharts from "recharts";
 export type YAxisProps<TData extends ChartDataValue = ChartDataValue, TDataKey extends DataKey<TData> = DataKey<TData>, TDataMatch = DataKeyValue<TData, TDataKey>> = Pick<Recharts.YAxisProps, "className" | "orientation" | "allowDecimals" | "interval" | "minTickGap" | "scale" | "type" | "domain" | "hide" | "unit"> & {
     dataKey?: TDataKey;
     tickFormatter?: (value: TDataMatch, index: number) => string;
+    /**
+     * The width of the axis in pixels. `"auto"` sizes the axis to its widest tick
+     * label. Defaults to `"auto"` for a category axis (e.g. with `layout` set to
+     * `"vertical"`) and to `60` otherwise. Pin a number to align the plot areas
+     * of synchronized charts.
+     */
+    width?: number | "auto";
 };
 /**
  * `tickFormatter` is deliberately not part of the remote surface. A function

package/dist/types/components/CodeEditor/CodeEditor.d.ts

@@ -11,6 +11,13 @@ export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, "theme" | "l
      * @default false
      */
     isReadOnly?: boolean;
+    /**
+     * Whether the editor is disabled. The code can neither be edited, focused nor
+     * copied.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Whether the editor is displayed as invalid.
      *
@@ -19,8 +26,11 @@ export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, "theme" | "l
     isInvalid?: boolean;
     /** The elements class name. */
     className?: string;
-    /** The language the code is highlighted as. */
-    language?: CodeEditorLanguage;
+    /**
+     * The language the code is highlighted as. A language the editor does not
+     * know is shown as plain text.
+     */
+    language?: CodeEditorLanguage | (string & {});
     /**
      * Whether a button to copy the code to the clipboard is shown.
      *

package/dist/types/components/CodeEditor/hooks/useCodeEditorExtensions.d.ts

@@ -1 +1,32 @@
-export {};
+export interface CodeEditorSetup {
+    /**
+     * Whether the line the cursor is on is highlighted.
+     *
+     * @default true
+     */
+    showActiveLineMarker?: boolean;
+    /**
+     * Whether the gutter offers controls to fold and unfold code blocks.
+     *
+     * @default true
+     */
+    showCodeFolding?: boolean;
+    /**
+     * Whether indentation levels are visualized with guide lines.
+     *
+     * @default true
+     */
+    showCodeIndentationMakers?: boolean;
+    /**
+     * Whether line numbers are shown in the gutter.
+     *
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Whether linter results are shown in the gutter.
+     *
+     * @default true
+     */
+    showLinterMarkers?: boolean;
+}

package/dist/types/components/CodeEditor/languages/all.d.ts

@@ -1 +1 @@
-export {};
+export declare const ALL_LANGUAGES: readonly ["apl", "asc", "asn", "asn1", "b", "bash", "bf", "BUILD", "bzl", "c", "c++", "cc", "cfg", "cjs", "cl", "clj", "cljc", "cljs", "cljx", "cmake", "cmake.in", "cob", "coffee", "cpp", "cpy", "cql", "cr", "cs", "css", "cts", "cxx", "cyp", "cypher", "d", "dart", "diff", "dotEnv", "dtd", "dyalog", "dyl", "dylan", "e", "ecl", "edn", "el", "elm", "erl", "f", "f77", "f90", "f95", "factor", "feature", "for", "forth", "fs", "fth", "fun", "go", "gradle", "groovy", "gss", "h", "h++", "handlebars", "hbs", "hh", "hpp", "hs", "htm", "html", "hx", "hxml", "hxx", "in", "ini", "ino", "intr", "j2", "jade", "java", "jinja", "jinja2", "jl", "js", "json", "jsonld", "jsx", "ksh", "kt", "kts", "less", "liquid", "lisp", "ls", "ltx", "lua", "m", "map", "markdown", "mbox", "md", "mjs", "mkd", "ml", "mli", "mll", "mly", "mm", "mo", "mps", "mrc", "msc", "mscgen", "mscin", "msgenny", "mts", "nb", "nix", "nq", "nsh", "nsi", "nt", "nut", "oz", "p", "pas", "patch", "pgp", "php", "php3", "php4", "php5", "php7", "phtml", "pig", "pl", "pls", "pm", "pp", "pro", "properties", "proto", "ps1", "psd1", "psm1", "pug", "pxd", "pxi", "py", "pyw", "pyx", "q", "r", "R", "rb", "rq", "rs", "s", "sas", "sass", "scala", "scm", "scss", "sh", "sieve", "sig", "siv", "smackspec", "sml", "solidity", "sparql", "spec", "sql", "ss", "st", "styl", "sv", "svelte", "svg", "svh", "swift", "tcl", "tex", "text", "textile", "toml", "ts", "tsx", "ttcn", "ttcn3", "ttcnpp", "ttl", "v", "vb", "vbs", "vhd", "vhdl", "vtl", "vue", "wast", "wat", "webidl", "wl", "wls", "xml", "xq", "xqm", "xquery", "xqy", "xsd", "xsl", "xu", "xy", "yaml", "yml", "ys", "z80"];

package/dist/types/components/CodeEditor/languages/index.d.ts

@@ -10,4 +10,5 @@ export type LanguageContainer = [
     () => ReturnType<typeof linter>
 ];
 declare const supportedCodeEditorLanguages: LanguageFactory;
+export declare const isCodeEditorLanguage: (language: string) => language is CodeEditorLanguage;
 export default supportedCodeEditorLanguages;

package/dist/types/components/DonutChart/components/Donut.d.ts

@@ -3,5 +3,7 @@ import { DonutChartProps } from '..';
 interface Props extends Pick<DonutChartProps, "segments" | "size" | "maxValue"> {
     value?: number;
 }
+/** The width and height of the rendered donut in px. */
+export declare const getDonutSize: (size: DonutChartProps["size"]) => number;
 export declare const Donut: FC<Props>;
 export {};

package/dist/types/components/FileField/FileField.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { FileInputOnChangeHandler } from './components/FileInput';
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import type * as Aria from "react-aria-components";
-export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
+export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name" | "aria-describedby">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
     /** Handler that is called when the file input changes. */
     onChange?: FileInputOnChangeHandler;
     /** Whether the component is read only. */

package/dist/types/components/Link/Link.d.ts

@@ -11,7 +11,11 @@ export interface LinkProps extends PropsWithChildren<Omit<Aria.LinkProps, "child
     color?: "default" | AlphaColor;
     /** Marks the link as the currently active one, e.g. in a navigation. */
     "aria-current"?: string;
-    /** The name of the slot the link is placed in. */
+    /**
+     * The name of the slot the link is placed in. In action groups: `primary` (at
+     * the end), `secondary` (before the primary action) or `abort` (at the
+     * start).
+     */
     slot?: string;
     /** The whiteSpace css value of the element. */
     whiteSpace?: CSSProperties["whiteSpace"];

package/dist/types/components/List/components/DataLoader/DataLoader.d.ts

@@ -1,2 +1,2 @@
-export declare const DataLoader: () => import("react").JSX.Element[];
+export declare const DataLoader: () => import('react').JSX.Element[];
 export default DataLoader;

package/dist/types/components/List/components/Header/lib.d.ts

@@ -1,2 +1 @@
-import { ListViewMode } from '../../model/types';
-export declare const useAvailableViewModes: () => ListViewMode[];
+export declare const useAvailableViewModes: () => import('../../../../_bundled/flow-components-base/index').ListViewModeValue[];

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

@@ -8,7 +8,7 @@ interface Props extends PropsWithChildren {
     list: ListModel<never>;
     isTile: boolean;
 }
-export declare const Item: import('react').MemoExoticComponent<(props: Props) => import("react").JSX.Element | null>;
+export declare const Item: import('react').MemoExoticComponent<(props: Props) => import('react').JSX.Element | null>;
 interface ItemContainerProps extends PropsWithChildren {
     id?: Key;
     data?: never;

package/dist/types/components/List/components/Items/components/Item/hooks/useGridItemProps.d.ts

@@ -14,6 +14,6 @@ export declare const useGridItemProps: (props: P, list: List<never>) => {
         ref: import('react').RefObject<HTMLDivElement | null>;
         onAction: () => void;
     };
-    children: import("react").JSX.Element;
+    children: import('react').JSX.Element;
 };
 export {};

package/dist/types/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.d.ts

@@ -11,5 +11,5 @@ export type ListItemViewContentProps = PropsWithChildren & Pick<ColumnLayoutProp
     viewMode?: ListViewMode;
 };
 /** @flr-generate all */
-export declare const ListItemViewContent: (props: ListItemViewContentProps) => import("react").JSX.Element;
+export declare const ListItemViewContent: (props: ListItemViewContentProps) => import('react').JSX.Element;
 export default ListItemViewContent;

package/dist/types/components/List/model/List.d.ts

@@ -12,7 +12,9 @@ import { ReactNode } from 'react';
 import { ListSettingsStore } from './ListSettingsStore';
 import { ListViewMode } from './ListViewMode';
 import { DateRangeFilter } from './filter/DateRangeFilter';
-export declare class List<T = unknown, TMeta = unknown> {
+import { ListModelContext, ListSettingsPort } from '../../../_bundled/flow-components-base/index';
+import { Table as ReactTableInstance } from '@tanstack/table-core';
+export declare class List<T = unknown, TMeta = unknown> implements ListModelContext<T> {
     readonly filters: (Filter<T, never, never> | DateRangeFilter<T, never>)[];
     readonly itemView?: ItemView<T>;
     readonly table?: Table<T>;
@@ -35,6 +37,9 @@ export declare class List<T = unknown, TMeta = unknown> {
     readonly emptySearchResultView?: ReactNode;
     readonly settingsStorageDefaults?: ListSettingsStorageDefaults;
     constructor(shape: ListShape<T, TMeta>);
+    get dataTable(): ReactTableInstance<T>;
+    get settings(): ListSettingsPort | undefined;
+    get settingsDefaults(): ListSettingsStorageDefaults | undefined;
     getEmptyViewType(): EmptyViewType;
     get hasActiveFilters(): boolean;
     get visibleSorting(): Sorting<T>[];

package/dist/types/components/List/model/ListSettingsStore.d.ts

@@ -1,11 +1,9 @@
+import { ListSettingsOperationOptions } from '../../../_bundled/flow-components-base/index';
 import { SettingsStore } from '../../SettingsProvider/models/SettingsStore';
 import { ListSettingsStorageShape } from './types';
 import { default as List } from './List';
 import { default as z } from 'zod';
-export interface ListSettingsStoreOperationOptions {
-    autosave?: boolean;
-    manualSave?: boolean;
-}
+export type ListSettingsStoreOperationOptions = ListSettingsOperationOptions;
 declare const supportedSettings: {
     readonly activeFilters: {
         readonly supports: {

package/dist/types/components/List/model/ListViewMode.d.ts

@@ -1,18 +1,25 @@
+import { ListViewMode as ListViewModeState } from '../../../_bundled/flow-components-base/index';
 import { ListViewMode as RawListViewMode } from './types';
 import { List } from './List';
 interface Options {
     defaultViewMode?: RawListViewMode;
     autosave?: boolean;
 }
-export declare class ListViewMode<T = unknown> {
-    readonly list: List<T>;
-    readonly autosave: boolean;
-    private readonly state;
-    constructor(list: List<T>, options?: Options);
-    get value(): RawListViewMode;
-    get isTiles(): boolean;
-    get isTable(): boolean;
-    get isList(): boolean;
-    set(viewMode: RawListViewMode): void;
+/**
+ * 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.
+ */
+export declare class ListViewMode<T = unknown> extends ListViewModeState {
+    private currentList;
+    private constructor();
+    get list(): List<T>;
+    private static storageOf;
+    static useNew<T>(list: List<T>, options?: Options): ListViewMode<T>;
 }
 export {};

package/dist/types/components/List/model/ReactTable.d.ts

@@ -1,4 +1,4 @@
-import { Column, ColumnSort, Table, TableOptions } from '@tanstack/react-table';
+import { Column, ColumnSort, Table, TableOptions } from '@tanstack/table-core';
 import { default as List } from './List';
 import { OnListChanged, PropertyName } from './types';
 import { SearchValue } from './search/types';

package/dist/types/components/List/model/filter/DateRangeFilter.d.ts

@@ -1,15 +1,27 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { default as List } from '../List';
-import { Filter } from './Filter';
+import { ListDateRangeFilter, ListModelContext } from '../../../../_bundled/flow-components-base/index';
 import { FilterShape } from './types';
 import { PropertyName } from '../types';
-import { DateRange, RangeValue } from 'react-aria-components';
-import { DateValue } from '@internationalized/date';
 import { RangeCalendarProps } from '../../../Calendar';
-export declare class DateRangeFilter<T = never, TProp extends PropertyName<T> = never> extends Filter<T, TProp> {
+import { DateValue } from '@internationalized/date';
+import { DateRange, RangeValue } from 'react-aria-components';
+import { ReactNode } from 'react';
+import { List } from '../List';
+import { FilterValue } from './FilterValue';
+/**
+ * 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.
+ */
+export declare class DateRangeFilter<T = never, TProp extends PropertyName<T> = never> extends ListDateRangeFilter<T, TProp, ReactNode> {
     readonly dateRangeOptions?: RangeCalendarProps;
-    constructor(list: List<T>, shape: FilterShape<T, TProp, never>);
-    updateTableColumnDef(def: ColumnDef<T>): void;
+    constructor(context: ListModelContext<T>, shape: FilterShape<T, TProp, never>);
     getValue(): DateRange | null;
-    setValue(range: RangeValue<DateValue>): void;
+    setValue(range: RangeValue<DateValue> | null): void;
+    /** The list this filter belongs to — `context`, typed as React's `List`. */
+    get list(): List<T>;
+    get values(): FilterValue[];
+    getArrayValue(): FilterValue[];
 }