@crewlethq/ui 0.2.0 → 0.3.0

package/dist/DataView/DataView.d.ts

@@ -0,0 +1,109 @@
+/**
+ * A list screen, whole: the head, the toolbar, the filter chips and the table.
+ *
+ * WHY ONE COMPONENT RATHER THAN FIVE A SCREEN COMPOSES ITSELF. The five parts
+ * are separately useful and are exported separately, but the RULES BETWEEN
+ * them are where every list screen went wrong on its own:
+ *
+ * 1. WHICH CHIPS ARE ON SCREEN is not "the filters that have a value". An axis
+ *    a reader just picked from the Filter menu has no value yet, and a chip
+ *    that appeared only once it did made picking a multiple-choice filter look
+ *    like a control that did nothing. So a chip is drawn for an axis that
+ *    HAS a value or that the reader JUST ADDED, and the second half is state
+ *    that lives here because the toolbar raises it and the chip row renders it.
+ * 2. REMOVING A CHIP IS NOT THE SAME AS EMPTYING IT. Taking the axis off the
+ *    list also puts its value back to the blank one, and the blank value of a
+ *    single-choice filter is its first option ("Any status"), not the empty
+ *    string.
+ * 3. THE ARCHIVED ROWS ARE HIDDEN AND THEIR COLUMN IS NOT DRAWN, until the
+ *    toggle is on: a Deleted at column over a list with no deleted rows in it
+ *    is a column of nothing that every reader still has to scan past.
+ * 4. FILTERING HAPPENS BEFORE HIDING. A reader who has both "role is admin"
+ *    and "show archived" on wants archived admins, which is what applying the
+ *    two in that order gives them.
+ *
+ * WHAT IT DOES NOT OWN IS THE STATE. Values and callbacks, all of them, so the
+ * screen keeps its filters wherever its own history lives, which for every
+ * screen in this product is the URL. The one exception is the two pieces of
+ * state that have no meaning outside this component (which chips are on, and
+ * which chip just opened), and the archived toggle, which is controlled when a
+ * caller passes a value for it and otherwise keeps its own.
+ */
+import { type ReactNode } from 'react';
+import { type DataTableProps } from '../DataTable/index.js';
+import type { HeadingLevel } from '../utils/headingLevel.js';
+import { type DataViewToolbarLabels } from './DataViewToolbar.js';
+import { type FilterAxisLabels } from './FilterAxisBar.js';
+import { type DataViewColumn, type DataViewSortState } from './columns.js';
+import { type FilterDef, type FilterValues } from './filters.js';
+/** Every string the composite renders on its own, by the part that renders it. */
+export interface DataViewLabels {
+    toolbar: Partial<DataViewToolbarLabels>;
+    chips: Partial<FilterAxisLabels>;
+    /** The column appended while archived rows are shown. */
+    archivedAt: string;
+    /** What that column says for a row nobody archived. */
+    archivedAtAbsent: string;
+}
+/**
+ * The table properties a screen passes straight through. Each one means
+ * exactly what it means on [DataTable]; they are listed rather than spread so
+ * the composite's own signature says what it accepts.
+ */
+type PassedToTable<TRow> = Pick<DataTableProps<TRow>, 'rowKey' | 'getRowKey' | 'rowActions' | 'onRowClick' | 'getRowHref' | 'rowTone' | 'isSelected' | 'renderExpandedRow' | 'renderAccessoryRow' | 'emptyMessage' | 'endMessage' | 'loading' | 'skeletonRows' | 'error' | 'density' | 'maxBodyHeight' | 'visibleColumns' | 'onVisibleColumnsChange' | 'columnOrder' | 'onColumnOrderChange' | 'showSettings' | 'storageKey' | 'paginated' | 'defaultItemsPerPage' | 'itemsPerPageOptions' | 'itemsPerPage' | 'onItemsPerPageChange' | 'page' | 'onPageChange' | 'pageCount' | 'resizable' | 'sortCycle' | 'stableOrder' | 'hasMore' | 'onLoadMore' | 'loadingMore' | 'loadMoreLabel' | 'archivedLabel'>;
+export interface DataViewProps<TRow> extends PassedToTable<TRow> {
+    /** What the screen is. Left out, no header is drawn and the screen draws its own. */
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Status beside the title. */
+    badges?: ReactNode;
+    /** What a reader can do on this screen, beside the title. */
+    headerActions?: ReactNode;
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * The axes this screen declares. They are offered in the Filter menu and
+     * drawn as chips, and the screen applies them itself (it usually asks a
+     * server). A filter declared on a COLUMN instead is applied here.
+     */
+    filters?: readonly FilterDef<TRow>[] | undefined;
+    filterValues?: FilterValues | undefined;
+    onFilterValuesChange?: ((next: FilterValues) => void) | undefined;
+    /** Committed: Enter in the search box, a chip edited, a chip removed. */
+    onApplyFilters?: (() => void) | undefined;
+    columns: readonly DataViewColumn<TRow>[];
+    rows: readonly TRow[];
+    /** Which column the list opens ordered by, while the sort is the view's own. */
+    defaultSort?: DataViewSortState | null | undefined;
+    /** Lift the sort into the screen (a URL, a server) by passing both of these. */
+    sort?: DataViewSortState | null | undefined;
+    onSortChange?: ((next: DataViewSortState | null) => void) | undefined;
+    /**
+     * Which rows are archived. With it the toolbar grows a toggle, the rows are
+     * hidden until it is on, and each one is marked when it is.
+     */
+    archivedPredicate?: ((row: TRow) => boolean) | undefined;
+    /** Where each archived row's own moment is read from, for the extra column. */
+    archivedTimestamp?: ((row: TRow) => string | number | Date | null | undefined) | undefined;
+    /** Lift the toggle into the screen by passing both of these. */
+    showArchived?: boolean | undefined;
+    onShowArchivedChange?: ((next: boolean) => void) | undefined;
+    /**
+     * Where the toggle is remembered when the screen does not own it. Left out,
+     * nothing is stored and a fresh visit hides archived rows.
+     */
+    archivedStorageKey?: string | undefined;
+    /**
+     * Draws the table on a surface of its own: a boundary, a radius and the
+     * subtle ground, which is what a list screen inside a padded page wants so
+     * the rows read as one object rather than as text on the page.
+     */
+    framed?: boolean | undefined;
+    /** What else belongs on the toolbar row, held to its end. */
+    toolbarActions?: ReactNode;
+    /** Keeps the toolbar under the top of the scroller. */
+    stickyToolbar?: boolean | undefined;
+    labels?: Partial<DataViewLabels> | undefined;
+    className?: string | undefined;
+}
+export declare function DataView<TRow>({ title, description, badges, headerActions, headingLevel, filters, filterValues, onFilterValuesChange, onApplyFilters, columns, rows, defaultSort, sort: sortProp, onSortChange, archivedPredicate, archivedTimestamp, showArchived: showArchivedProp, onShowArchivedChange, archivedStorageKey, archivedLabel, framed, toolbarActions, stickyToolbar, labels: labelOverrides, className, ...table }: DataViewProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DataView/DataViewToolbar.d.ts

@@ -0,0 +1,87 @@
+/**
+ * The one row above a list: search, the filters that can be added, the sort,
+ * and whatever else the screen can do here.
+ *
+ *   [search ..........................] [Filter] [Sort: Name] [Show archived]   [actions]
+ *
+ * ITS HEIGHT DOES NOT DEPEND ON HOW MANY FILTERS ARE ON. The axes a reader has
+ * added are chips on their own row underneath ([FilterAxisBar]), so a screen
+ * with six filters and a screen with none put their first row of data in the
+ * same place. A toolbar that grew a control per filter pushed the table down
+ * the page as it was used.
+ *
+ * THE SEARCH BOX IS ALWAYS DRAWN, and is never one of the filters the menu
+ * offers: a search a reader has to add from a menu is a search nobody finds.
+ *
+ * THE ACCENT MEANS SOMETHING IS ON, and only that. The Sort button takes it
+ * while a sort is applied and the archived toggle while archived rows are
+ * shown; neither takes it merely for having its menu open, which is what the
+ * overlay itself already says.
+ *
+ * It is a `group` rather than a WAI-ARIA `toolbar`: a row holding a text field
+ * cannot take the arrows away from that field's caret, so every control here
+ * keeps its own tab stop.
+ */
+import { type ReactNode } from 'react';
+import type { DataViewColumn } from './columns.js';
+import type { FilterDef, FilterValues } from './filters.js';
+import type { DataViewSortState } from './columns.js';
+export interface DataViewToolbarLabels {
+    /** Names the row, which a screen reader reads before the controls in it. */
+    toolbar: string;
+    /** Names the search box when its own filter declares no label. */
+    search: string;
+    searchPlaceholder: string;
+    clearSearch: string;
+    /** The button that offers the axes not yet on the list. */
+    filter: string;
+    /** The menu that button opens. */
+    addFilter: string;
+    /** The button that opens the sort panel, while nothing is sorted. */
+    sort: string;
+    /** The same button once a column is sorted. */
+    sortedBy: (column: string) => string;
+    /** The sort panel's own name. */
+    sortPanel: string;
+    ascending: (column: string) => string;
+    descending: (column: string) => string;
+    /** Read after the sorted column's name on the button. */
+    ascendingWord: string;
+    descendingWord: string;
+    clearSort: string;
+    /** The archived toggle, which names what a screen calls its archived rows. */
+    showArchived: (archivedLabel: string) => string;
+    archivedCount: (archivedLabel: string) => string;
+}
+export declare const DATA_VIEW_TOOLBAR_LABELS: DataViewToolbarLabels;
+export interface DataViewToolbarProps<TRow> {
+    /** Every axis the screen declares, including those already on the list. */
+    filters: readonly FilterDef<TRow>[];
+    values: FilterValues;
+    onValuesChange: (next: FilterValues) => void;
+    /** The axes already drawn as chips, which the Filter menu therefore omits. */
+    displayed?: readonly string[] | undefined;
+    /** A reader picked an axis from the Filter menu. */
+    onAddFilter?: ((name: string) => void) | undefined;
+    /** Committed: Enter in the search box, or a change the caller fetches on. */
+    onSubmit?: (() => void) | undefined;
+    /** The columns, for the sort panel. Only the sortable ones are offered. */
+    columns?: readonly DataViewColumn<TRow>[] | undefined;
+    sort?: DataViewSortState | null | undefined;
+    /** Left out, no sort control is drawn at all. */
+    onSortChange?: ((next: DataViewSortState | null) => void) | undefined;
+    /** Left out, no archived toggle is drawn. */
+    onShowArchivedChange?: ((next: boolean) => void) | undefined;
+    showArchived?: boolean | undefined;
+    /** What this screen calls its archived rows: archived, deleted, disabled. */
+    archivedLabel?: string | undefined;
+    /** How many rows the toggle would reveal. */
+    archivedCount?: number | undefined;
+    /** What else can be done here, held to the end of the row. */
+    actions?: ReactNode;
+    /** Keeps the row under the top of the scroller in a long list. */
+    sticky?: boolean | undefined;
+    labels?: Partial<DataViewToolbarLabels> | undefined;
+    className?: string | undefined;
+}
+export declare function DataViewToolbar<TRow>({ filters, values, onValuesChange, displayed, onAddFilter, onSubmit, columns, sort, onSortChange, onShowArchivedChange, showArchived, archivedLabel, archivedCount, actions, sticky, labels: overrides, className, }: DataViewToolbarProps<TRow>): import("react/jsx-runtime").JSX.Element;

package/dist/DataView/FilterAxisBar.d.ts

@@ -0,0 +1,103 @@
+/**
+ * The row of filters a reader has put on a list, one chip each.
+ *
+ * NOT [FilterChip], AND THE DIFFERENCE IS THE CONTROL RATHER THAN THE LOOK. A
+ * FilterChip is a switch: one fact about the list, on or off, or one answer of
+ * a small set. A filter AXIS is a whole dimension the reader added on purpose,
+ * so the chip carries three things a switch does not: which axis it is, what
+ * it is currently set to, and a way to take it off the list again. Pressing it
+ * opens that axis's own editor.
+ *
+ * THE CHIP FOR AN AXIS WITH NO VALUE YET IS THE POINT. A reader picks Role
+ * from the Filter menu and the chip appears reading "Role: any", with its
+ * editor already open. Rendered only once a value existed, picking a
+ * multiple-choice filter from the menu did nothing visible at all, and "click
+ * Filter, choose Role, nothing happens" was exactly the bug.
+ *
+ * THE EDITOR IS THE OPTION LIST ITSELF, with no picker nested inside the
+ * popover: a control that opens a control that opens a list is two presses and
+ * two overlays for one answer. The list is a real listbox with the package's
+ * own keyboard (the arrows, Home and End, type-ahead, disabled rows stepped
+ * over), so it is one tab stop however many answers it holds.
+ */
+import { type ReactNode } from 'react';
+import { type FilterDef, type FilterOperator, type FilterValue, type FilterValues } from './filters.js';
+export interface FilterAxisLabels {
+    /** The affordance at the end of the row that takes every filter off at once. */
+    clearAll: string;
+    /** The remove control on one chip. */
+    remove: (label: string) => string;
+    /** The editor popover's own name. */
+    editor: (label: string) => string;
+    /** The option list's name inside that popover. */
+    options: (label: string) => string;
+    /** What a chip reads when its axis is on but set to nothing. */
+    any: string;
+    /** What a multiple-choice chip reads past one answer. */
+    selected: (howMany: number) => string;
+    /** The multiple-choice editor's own two controls. */
+    clear: string;
+    done: string;
+    /** The keycap in a text editor, saying what commits it. */
+    enter: string;
+    /**
+     * The word a chip puts before its value when the axis does not compare the
+     * way its kind normally does, so "Created: on or before 1 March" cannot be
+     * read as "Created: since 1 March".
+     */
+    operator: Record<FilterOperator, string>;
+}
+export declare const FILTER_AXIS_LABELS: FilterAxisLabels;
+/**
+ * What a chip says it is set to.
+ *
+ * The operator word appears only when it is NOT the kind's usual one, because
+ * a row of chips each reading "Email contains ..." spends its width restating
+ * the obvious, and the one chip that compares differently then reads exactly
+ * like the rest.
+ */
+export declare function formatFilterValue<TRow>(def: FilterDef<TRow>, value: FilterValue, labels: FilterAxisLabels): string;
+export interface FilterAxisChipProps<TRow = unknown> {
+    def: FilterDef<TRow>;
+    value: FilterValue;
+    onValueChange: (value: FilterValue) => void;
+    /** Takes the axis off the list entirely. Left out, the chip has no remove control. */
+    onRemove?: (() => void) | undefined;
+    /**
+     * Opens the editor as the chip appears, for the chip a reader just added
+     * from the Filter menu: picking an axis and then having to press it again to
+     * say what it filters by is two presses for one intention.
+     */
+    autoOpen?: boolean | undefined;
+    onAutoOpenConsumed?: (() => void) | undefined;
+    labels?: FilterAxisLabels | undefined;
+    className?: string | undefined;
+}
+/** One axis, as a chip that opens its own editor. */
+export declare function FilterAxisChip<TRow = unknown>({ def, value, onValueChange, onRemove, autoOpen, onAutoOpenConsumed, labels, className, }: FilterAxisChipProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export interface FilterAxisBarProps<TRow = unknown> {
+    /** Every axis the screen knows about, including the ones not on the list. */
+    filters: readonly FilterDef<TRow>[];
+    values: FilterValues;
+    /** Which axes are on the list right now, in the order they are drawn. */
+    names: readonly string[];
+    onValuesChange: (next: FilterValues) => void;
+    /**
+     * Committed, for a screen that fetches rather than filters in the browser.
+     * Called after every change, including a removal.
+     */
+    onSubmit?: (() => void) | undefined;
+    onRemove?: ((def: FilterDef<TRow>) => void) | undefined;
+    onClearAll?: (() => void) | undefined;
+    /** The axis whose editor opens by itself, having just been added. */
+    autoOpenName?: string | null | undefined;
+    onAutoOpenConsumed?: (() => void) | undefined;
+    labels?: Partial<FilterAxisLabels> | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/**
+ * The chips under a toolbar. It draws nothing at all while no axis is on, so
+ * an unfiltered screen carries no empty band where its data should be.
+ */
+export declare function FilterAxisBar<TRow = unknown>({ filters, values, names, onValuesChange, onSubmit, onRemove, onClearAll, autoOpenName, onAutoOpenConsumed, labels: overrides, className, children, }: FilterAxisBarProps<TRow>): import("react/jsx-runtime").JSX.Element | null;

package/dist/DataView/columns.d.ts

@@ -0,0 +1,35 @@
+/**
+ * How a list screen declares its columns, and how that becomes a table.
+ *
+ * AN ORDERED ARRAY, EACH COLUMN CARRYING ITS OWN KEY. [DataTable] holds
+ * columns as a record keyed by field plus a separate order array, which is the
+ * right shape for a table whose reader reorders and hides columns and stores
+ * the result. It is the wrong shape for declaring a screen: the order and the
+ * columns are then two things that can disagree, and every list screen wrote
+ * the same twenty-line translation between them. The translation lives here
+ * instead, once, so a screen declares what a reader sees, in the order they
+ * see it, and there is still exactly one table underneath.
+ */
+import type { ReactNode } from 'react';
+import type { DataTableColumn, DataTableSortState } from '../DataTable/index.js';
+import type { DataViewColumnFilter } from './filters.js';
+/** Which column a list is ordered by, and which way. The table's own type. */
+export type DataViewSortState = DataTableSortState;
+export interface DataViewColumn<TRow = unknown> extends Omit<DataTableColumn<TRow>, 'label'>, DataViewColumnFilter<TRow> {
+    /** The field this column reads, and the key its sort and filter are kept under. */
+    key: string;
+    /** What the column is called, at the head of it. */
+    header: ReactNode;
+}
+export interface TableColumns<TRow> {
+    columns: Record<string, DataTableColumn<TRow>>;
+    order: string[];
+}
+/**
+ * The declared columns, as the table holds them.
+ *
+ * A column with no key is dropped rather than drawn under an empty heading:
+ * the table reads every value by key, so a keyless column is a column of
+ * nothing.
+ */
+export declare function tableColumns<TRow>(columns: readonly DataViewColumn<TRow>[]): TableColumns<TRow>;

package/dist/DataView/filters.d.ts

@@ -0,0 +1,184 @@
+/**
+ * What a list screen can be narrowed by, and what narrowing means.
+ *
+ * THE MODEL, IN ONE PLACE. A filter has a NAME (the key its value is kept
+ * under), a LABEL (what a reader calls it), a KIND (what sort of value it
+ * holds) and an OPERATOR (what comparing that value to a row means). Every
+ * screen that filters a table needs all four, and the two halves that were
+ * written per screen before this existed disagreed at once: one read "contains"
+ * as case sensitive, one dropped rows whose value was absent and one kept them.
+ *
+ * WHERE THE DEFINITIONS COME FROM. Either the columns themselves
+ * ([filterDefsFromColumns]), which is how "every column should be filterable"
+ * is satisfied without writing a second schema beside the first, or the screen
+ * (the `filters` prop), which is how a screen declares an axis the table has no
+ * column for, or one the SERVER filters rather than the browser.
+ *
+ * WHO APPLIES THEM. [applyColumnFilters] applies the filters derived from
+ * COLUMNS and nothing else, because a column that says `filterable` is saying
+ * "narrow these rows here". A screen-declared filter is the screen's own: it
+ * usually goes into a query string and comes back as fewer rows, and a browser
+ * that also applied it would filter twice, once against a row field that does
+ * not exist. That split is the whole contract, and it is what keeps the URL out
+ * of the component.
+ *
+ * A VALUE IS COMPARED AS TEXT unless both sides are numbers. A row's id is a
+ * string in one API and a number in the next, and an operator that answered
+ * differently for the two would be a filter that works on one screen.
+ */
+import type { ReactNode } from 'react';
+/** What sort of value a filter holds. */
+export type FilterKind = 'text' | 'number' | 'select' | 'datetime';
+/**
+ * What comparing a filter's value to a row means.
+ *
+ * Six, and each one is a sentence a reader could say out loud: a name
+ * CONTAINS what was typed, a status IS one thing, a role IS ANY OF several, a
+ * count EQUALS a number, an event happened ON OR AFTER a moment or ON OR
+ * BEFORE one. The pair at the end is why this is a named operator rather than
+ * a property of the kind: a window between two moments is two filters over one
+ * column, and with a single hard-coded "after" the later bound could only be
+ * had by declaring a second, duplicate column.
+ */
+export type FilterOperator = 'contains' | 'is' | 'is-any-of' | 'equals' | 'on-or-after' | 'on-or-before';
+export type FilterOptionValue = string | number;
+export interface FilterOption {
+    value: FilterOptionValue;
+    label: string;
+    /** Unavailable, and left in the list so a reader learns the answer exists. */
+    disabled?: boolean | undefined;
+}
+/** What a filter is set to. An array only in a multiple-choice filter. */
+export type FilterValue = string | number | readonly FilterOptionValue[] | null | undefined;
+/** Every filter's value, by name. A screen owns this object and its history. */
+export type FilterValues = Record<string, FilterValue>;
+export interface FilterDef<TRow = unknown> {
+    /** The key this filter's value is kept under, and a column key when it came from one. */
+    name: string;
+    /** What a reader calls it, in the Filter menu and on the chip. */
+    label: string;
+    /** Text by default: the kind most filters are, and the one a search box is. */
+    kind?: FilterKind | undefined;
+    /** What comparing means. Left out, the kind's own default (see [defaultOperator]). */
+    operator?: FilterOperator | undefined;
+    /** The answers, for a `select`. */
+    options?: readonly FilterOption[] | undefined;
+    /** Several answers at once, for a `select`. */
+    multiple?: boolean | undefined;
+    /** The example shown in an empty editor or search box. */
+    placeholder?: string | undefined;
+    /**
+     * Marks the one filter drawn as the toolbar's search box. It is always on
+     * screen, so it never appears in the Filter menu and never becomes a chip:
+     * a screen that hid its search behind "add a filter" is a screen where
+     * nobody finds the search.
+     */
+    role?: 'search' | undefined;
+    /** Whether Enter in the search box commits. True by default. */
+    submitOnEnter?: boolean | undefined;
+    /**
+     * Where the value is read from a row when this filter is applied in the
+     * browser. Defaults to `row[name]`.
+     */
+    value?: ((row: TRow) => unknown) | undefined;
+}
+/**
+ * What a filter means when its own operator is left out.
+ *
+ * Text contains, because a person typing three letters of a name is looking
+ * for the name that holds them. A number equals, because a partial number is
+ * not a fact about anything. One choice IS, several ARE ANY OF. A moment is on
+ * or after, which is the "since" a reader asks a log for.
+ */
+export declare function defaultOperator(def: Pick<FilterDef, 'kind' | 'multiple'>): FilterOperator;
+export declare function operatorOf(def: FilterDef<never> | FilterDef<unknown>): FilterOperator;
+/**
+ * The value a filter has when it is not narrowing anything.
+ *
+ * NOT ALWAYS THE EMPTY STRING. A single-choice filter's first option is its
+ * "any" answer by convention ("All roles", "Any status"), so clearing that
+ * filter means going back to that option rather than to a value the list does
+ * not offer, which would leave the control showing a placeholder over a list
+ * where every answer is unselected.
+ */
+export declare function blankFilterValue(def: FilterDef<never> | FilterDef<unknown>): FilterValue;
+/** Whether a filter is narrowing anything, which is what decides its chip. */
+export declare function filterHasValue(def: FilterDef<never> | FilterDef<unknown>, value: FilterValue): boolean;
+/**
+ * What this filter does to a row, or null when it does nothing.
+ *
+ * NULL RATHER THAN A PREDICATE THAT ALWAYS ANSWERS TRUE, so a caller can count
+ * how many filters are actually narrowing the list, and so an unset filter
+ * costs nothing per row.
+ *
+ * A ROW WITH NO VALUE FAILS EVERY OPERATOR. A seat with no last-seen time is
+ * not before every moment and not after any of them: it was never measured,
+ * and answering either way would put it in a list it does not belong to. It is
+ * the same rule the table's comparator keeps when it sorts absent values last
+ * in both directions.
+ *
+ * WHAT "DOES NOTHING" MEANS IS [filterHasValue], AND ONLY THAT. A single-choice
+ * filter's blank answer is the first option its own list offers, which is very
+ * often a word rather than the empty string ("All roles", "Any status"). Asked
+ * here as "is the value empty", a filter cleared back to that answer went on
+ * comparing every row against the word `all`, matched none of them, and handed
+ * back an empty table under a chip row that had just been emptied. Two
+ * definitions of the same fact is what did it, so there is one.
+ */
+export declare function filterPredicate<TRow>(def: FilterDef<TRow>, value: FilterValue): ((row: TRow) => boolean) | null;
+/**
+ * Every filter, folded over the rows: AND between filters, OR inside a
+ * multiple-choice one.
+ *
+ * The array is returned UNCHANGED when nothing is narrowing it, so a table
+ * whose rows did not move does not re-render on a keystroke in an unrelated
+ * box.
+ */
+export declare function applyFilters<TRow>(rows: readonly TRow[], defs: readonly FilterDef<TRow>[], values: FilterValues | undefined): readonly TRow[];
+/**
+ * A column, as a list screen declares one.
+ *
+ * `header` rather than `label`, and an ARRAY rather than a keyed record,
+ * because a list screen's columns are an ordered list of fields and writing
+ * them as a record plus a separate order array made the order and the columns
+ * two things that could disagree. [DataView] translates this into the shape
+ * [DataTable] holds, so there is one table underneath.
+ */
+export interface DataViewColumnFilter<TRow> {
+    /** Offers this column in the Filter menu. */
+    filterable?: boolean | undefined;
+    /** What sort of value it holds. Text by default. */
+    filterKind?: FilterKind | undefined;
+    /** What comparing means. The kind's default otherwise. */
+    filterOperator?: FilterOperator | undefined;
+    /** The answers, for `filterKind: 'select'`. */
+    filterOptions?: readonly FilterOption[] | undefined;
+    /** Several answers at once. */
+    filterMultiple?: boolean | undefined;
+    /** What the chip and the menu call it. The header otherwise. */
+    filterLabel?: string | undefined;
+    /** Where the value is read from a row. `row[key]` otherwise. */
+    filterValue?: ((row: TRow) => unknown) | undefined;
+    /** The example shown in an empty editor. */
+    filterPlaceholder?: string | undefined;
+}
+interface ColumnLike<TRow> extends DataViewColumnFilter<TRow> {
+    key: string;
+    header?: ReactNode;
+}
+/**
+ * The filters the columns themselves declare.
+ *
+ * A column opts in with `filterable`, and the Filter menu picks it up with no
+ * second schema to keep in step. A column whose header is not a string needs
+ * `filterLabel`: a chip reading "[object Object]" is worse than one the screen
+ * had to name.
+ */
+export declare function filterDefsFromColumns<TRow>(columns: readonly ColumnLike<TRow>[]): FilterDef<TRow>[];
+/**
+ * The rows a table shows, once the filters its own COLUMNS declare have been
+ * applied. A screen-declared filter is not applied here; see the note at the
+ * top of this file.
+ */
+export declare function applyColumnFilters<TRow>(rows: readonly TRow[], columns: readonly ColumnLike<TRow>[], values: FilterValues | undefined): readonly TRow[];
+export {};

package/dist/DataView/index.d.ts

@@ -0,0 +1,11 @@
+import './DataView.css';
+export { DataView } from './DataView.js';
+export type { DataViewLabels, DataViewProps } from './DataView.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataViewToolbar } from './DataViewToolbar.js';
+export type { DataViewToolbarLabels, DataViewToolbarProps } from './DataViewToolbar.js';
+export { FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, formatFilterValue } from './FilterAxisBar.js';
+export type { FilterAxisBarProps, FilterAxisChipProps, FilterAxisLabels } from './FilterAxisBar.js';
+export { tableColumns } from './columns.js';
+export type { DataViewColumn, DataViewSortState, TableColumns } from './columns.js';
+export { applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, operatorOf, } from './filters.js';
+export type { DataViewColumnFilter, FilterDef, FilterKind, FilterOperator, FilterOption, FilterOptionValue, FilterValue, FilterValues, } from './filters.js';

package/dist/DataView/index.js

@@ -0,0 +1,25 @@
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-GHYY2WPF.js';
+import '../chunk-5EKIWVOR.js';
+import '../chunk-HOXGBLEY.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-SFZOKW2G.js';
+import '../chunk-EHMQQHYR.js';
+import '../chunk-FBZAKNSX.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-2EOKFKHX.js';
+import '../chunk-UG46QBLT.js';
+import '../chunk-DD5BBGBE.js';
+import '../chunk-GXQ3B46I.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-2PRH365R.js';
+import '../chunk-V663QU4R.js';
+import '../chunk-GTOUGQQK.js';
+import '../chunk-O6232G37.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';