@camstack/ui-library 1.2.254 → 1.2.256

package/dist/composites/confirm-dialog.d.ts

@@ -37,6 +37,12 @@ export interface PromptOptions {
      * a refusal never needs a second `alert`.
      */
     readonly validate?: (value: string) => string | null;
+    /**
+     * `danger` paints the affirmative button as destructive — a typed
+     * confirmation ("type 17 to revoke 17 links") is a prompt whose OK destroys.
+     * Focus still opens on the field. Default: `default`.
+     */
+    readonly variant?: DialogVariant;
 }
 export interface DialogContextValue {
     readonly confirm: (options: ConfirmOptions) => Promise<boolean>;

package/dist/composites/data-table-filter-bar.d.ts

@@ -1,4 +1,14 @@
 import { DataTableFacet, DataTableFilterState } from './data-table-filter';
+/** One facet group as the bar draws it. */
+export interface DataTableFilterBarGroup {
+    readonly id: string;
+    /** Visible caption AND the chip group's accessible name ("Status"). */
+    readonly label: string;
+    readonly facets: readonly DataTableFacet[];
+    readonly selected: readonly string[];
+    /** Render a chip's caption. Default: the raw value. */
+    readonly facetLabel?: (value: string) => string;
+}
 export interface DataTableFilterBarLabels {
     /** Placeholder of the search box. */
     readonly searchPlaceholder: string;
@@ -19,5 +29,8 @@ export interface DataTableFilterBarProps {
     readonly onClear: () => void;
     /** Render a chip's caption. Default: the raw value. */
     readonly facetLabel?: (value: string) => string;
+    /** Further chip rows (status, owner, kind…), each its own group. */
+    readonly groups?: readonly DataTableFilterBarGroup[];
+    readonly onToggleGroupFacet?: (groupId: string, value: string) => void;
 }
-export declare function DataTableFilterBar({ state, facets, labels, onSearch, onToggleFacet, onClear, facetLabel, }: DataTableFilterBarProps): import("react").JSX.Element;
+export declare function DataTableFilterBar({ state, facets, labels, onSearch, onToggleFacet, onClear, facetLabel, groups, onToggleGroupFacet, }: DataTableFilterBarProps): import("react").JSX.Element;

package/dist/composites/data-table-filter.d.ts

@@ -3,8 +3,25 @@ export interface DataTableFilterState {
     readonly search: string;
     /** Selected facet values. Empty = every row. */
     readonly facets: readonly string[];
+    /**
+     * Selected chips per facet GROUP (`facetGroups[].id` → values). OR inside a
+     * group, AND across groups. Absent or empty = the group does not filter.
+     */
+    readonly groups?: Readonly<Record<string, readonly string[]>>;
 }
 export declare const EMPTY_DATA_TABLE_FILTER: DataTableFilterState;
+/** One independent chip row — status, owner, kind… */
+export interface DataTableFacetGroupConfig<T> {
+    /** Stable id; the key of `DataTableFilterState.groups`. */
+    readonly id: string;
+    /** The value this row contributes to THIS group's chips. */
+    readonly value: (row: T) => string;
+}
+/** A group's chips, derived from the rows. */
+export interface DataTableFacetGroup {
+    readonly id: string;
+    readonly facets: readonly DataTableFacet[];
+}
 /** One facet chip, with how many of the rows carry it. */
 export interface DataTableFacet {
     readonly value: string;
@@ -18,13 +35,19 @@ export interface DataTableFilterConfig<T> {
     /** The value this row contributes to the facet chips. Omit for a table
      *  with a search box only. */
     readonly facetValue?: (row: T) => string;
+    /** Further chip rows, each filtering on its own dimension. */
+    readonly facetGroups?: readonly DataTableFacetGroupConfig<T>[];
 }
 /**
  * The facet chips for these rows: one per distinct value, most common first,
  * ties by value.
  */
 export declare function dataTableFacets<T>(rows: readonly T[], facetValue: ((row: T) => string) | undefined): readonly DataTableFacet[];
+/** One chip row per configured group, each derived like {@link dataTableFacets}. */
+export declare function dataTableFacetGroups<T>(rows: readonly T[], groups: readonly DataTableFacetGroupConfig<T>[] | undefined): readonly DataTableFacetGroup[];
 export declare function isDataTableFilterActive(state: DataTableFilterState): boolean;
+/** A new state with `value` added to, or removed from, group `groupId`. */
+export declare function toggleDataTableGroupFacet(state: DataTableFilterState, groupId: string, value: string): DataTableFilterState;
 /** A new state with `value` added to, or removed from, the selected facets. */
 export declare function toggleDataTableFacet(state: DataTableFilterState, value: string): DataTableFilterState;
 /**

package/dist/composites/data-table-pager.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { DataTablePage, DataTablePaginationLabels } from './data-table-pagination';
+export interface DataTablePagerProps {
+    readonly page: DataTablePage<unknown>;
+    readonly labels: DataTablePaginationLabels;
+    readonly onPageChange: (page: number) => void;
+}
+export declare function DataTablePager({ page, labels, onPageChange }: DataTablePagerProps): ReactNode;

package/dist/composites/data-table-pagination.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Client-side pagination for {@link DataTable} — pure, no React.
+ *
+ * The table sorts first and pages second, so page 1 always holds the first
+ * rows of the CURRENT order. A page past the end (the rows shrank under it:
+ * a filter narrowed, a revoke removed rows) clamps to the last page instead
+ * of rendering an empty table with a pager that says "page 4 of 2".
+ */
+export interface DataTablePage<T> {
+    readonly pageRows: readonly T[];
+    /** 0-based page actually shown (after clamping). */
+    readonly page: number;
+    /** At least 1 — an empty table is one empty page. */
+    readonly pageCount: number;
+    /** 1-based index of the first row shown; 0 when there are none. */
+    readonly from: number;
+    /** 1-based index of the last row shown; 0 when there are none. */
+    readonly to: number;
+    readonly total: number;
+}
+export declare function paginateRows<T>(rows: readonly T[], page: number, pageSize: number): DataTablePage<T>;
+/** Every visible string of the pager — this library carries no translations. */
+export interface DataTablePaginationLabels {
+    /** Accessible name of the pager's `<nav>` — say WHICH table. */
+    readonly navLabel: string;
+    readonly previous: string;
+    readonly next: string;
+    /** "1–25 of 167". Arguments are 1-based; `from`/`to` are 0 for no rows. */
+    readonly range: (from: number, to: number, total: number) => string;
+}
+export declare const DEFAULT_PAGINATION_LABELS: DataTablePaginationLabels;

package/dist/composites/data-table-selection.d.ts

@@ -0,0 +1,15 @@
+import { DataColumn } from './data-table';
+export interface DataTableSelection<T> {
+    /** Selected row keys (`rowKey(row)`, stringified). Owned by the caller. */
+    readonly selected: ReadonlySet<string>;
+    readonly onChange: (next: ReadonlySet<string>) => void;
+    /** False = no checkbox for this row (e.g. the caller's own session). */
+    readonly isSelectable?: (row: T) => boolean;
+    /** Accessible name of a row's checkbox — name the row, not "select". */
+    readonly rowLabel: (row: T) => string;
+    /** Accessible name of the header checkbox. */
+    readonly pageLabel: string;
+}
+export declare const SELECTION_COLUMN_KEY = "__select";
+/** The selection column for the rows currently on screen. */
+export declare function selectionColumn<T>(selection: DataTableSelection<T>, pageRows: readonly T[], keyOf: (row: T) => string): DataColumn<T>;

package/dist/composites/data-table.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { TableMobileMode } from './data-table-layout';
+import { DataTablePaginationLabels } from './data-table-pagination';
+import { DataTableSelection } from './data-table-selection';
 import { TableSortState, TableSortValue } from './table-sort';
 export interface DataColumn<T> {
     /** Stable key for React reconciliation + tests. */
@@ -80,9 +82,36 @@ export interface DataTableProps<T> {
      *
      * The state is owned INSIDE the table from here on — a header click moves it
      * none → asc → desc → none. Pass this only to choose the opening order, not
-     * to drive the table from outside.
+     * to drive the table from outside — that is {@link DataTableProps.sort}.
      */
     readonly defaultSort?: TableSortState;
+    /**
+     * CONTROLLED sort. Present (even `null`) = the owner holds the state: the
+     * table renders exactly this order and reports header clicks through
+     * `onSortChange` without moving on its own. Use it when the order must
+     * survive a remount or live in the URL. Absent = uncontrolled
+     * (`defaultSort`).
+     */
+    readonly sort?: TableSortState | null;
+    /** Every header click, with the next state (none → asc → desc → none). */
+    readonly onSortChange?: (next: TableSortState | null) => void;
+    /**
+     * Client-side pagination: show this many rows per page with a pager under
+     * the table. Sorting happens first, so page 1 holds the first rows of the
+     * current order. Absent = every row, no pager. The pager is drawn only when
+     * the rows do not fit on one page.
+     */
+    readonly pageSize?: number;
+    /** CONTROLLED 0-based page (with `onPageChange`). Absent = the table owns it. */
+    readonly page?: number;
+    readonly onPageChange?: (page: number) => void;
+    /** The pager's strings. Default: English. */
+    readonly paginationLabels?: DataTablePaginationLabels;
+    /**
+     * Row selection — a leading checkbox column (see `data-table-selection`).
+     * Needs `rowKey`: keys are what the caller's bulk action acts on.
+     */
+    readonly selection?: DataTableSelection<T>;
 }
 /**
  * The default cap for an internally-scrolling table.
@@ -92,4 +121,4 @@ export interface DataTableProps<T> {
  * does not need a breakpoint of its own.
  */
 export declare const TABLE_SCROLL_MAX_H: "max-h-[60vh]";
-export declare function DataTable<T>({ columns, rows, rowKey, onRowClick, minWidthPx, emptyMessage, className, bordered, rowClassName, mobileMode, maxBodyHeight, defaultSort, }: DataTableProps<T>): import("react").JSX.Element | null;
+export declare function DataTable<T>({ columns, rows, rowKey, onRowClick, minWidthPx, emptyMessage, className, bordered, rowClassName, mobileMode, maxBodyHeight, defaultSort, sort: sortProp, onSortChange, pageSize, page: pageProp, onPageChange, paginationLabels, selection, }: DataTableProps<T>): import("react").JSX.Element | null;

package/dist/composites/index.d.ts

@@ -66,11 +66,16 @@ export { CopyButton } from './copy-button';
 export type { DataColumn, DataTableProps } from './data-table';
 export * from './data-table';
 export { DataTable } from './data-table';
-export type { DataTableFacet, DataTableFilterConfig, DataTableFilterState, } from './data-table-filter';
-export { dataTableFacets, EMPTY_DATA_TABLE_FILTER, filterDataTableRows, isDataTableFilterActive, toggleDataTableFacet, } from './data-table-filter';
-export type { DataTableFilterBarLabels, DataTableFilterBarProps } from './data-table-filter-bar';
+export type { DataTablePage, DataTablePaginationLabels } from './data-table-pagination';
+export { DEFAULT_PAGINATION_LABELS, paginateRows } from './data-table-pagination';
+export type { DataTablePagerProps } from './data-table-pager';
+export { DataTablePager } from './data-table-pager';
+export type { DataTableSelection } from './data-table-selection';
+export type { DataTableFacet, DataTableFacetGroup, DataTableFacetGroupConfig, DataTableFilterConfig, DataTableFilterState, } from './data-table-filter';
+export { dataTableFacetGroups, toggleDataTableGroupFacet, dataTableFacets, EMPTY_DATA_TABLE_FILTER, filterDataTableRows, isDataTableFilterActive, toggleDataTableFacet, } from './data-table-filter';
+export type { DataTableFilterBarGroup, DataTableFilterBarLabels, DataTableFilterBarProps, } from './data-table-filter-bar';
 export { DataTableFilterBar } from './data-table-filter-bar';
-export type { DataTableFilter } from './use-data-table-filter';
+export type { DataTableFilter, DataTableFilterGroupView } from './use-data-table-filter';
 export { useDataTableFilter } from './use-data-table-filter';
 export type { TableLayoutKind, TableMobileMode } from './data-table-layout';
 export { CARD_MODE_MIN_COLUMNS, resolveTableLayout } from './data-table-layout';

package/dist/composites/use-data-table-filter.d.ts

@@ -1,8 +1,17 @@
 import { DataTableFacet, DataTableFilterConfig, DataTableFilterState } from './data-table-filter';
+/** A facet group as the bar renders it: its chips and what is selected. */
+export interface DataTableFilterGroupView {
+    readonly id: string;
+    readonly facets: readonly DataTableFacet[];
+    readonly selected: readonly string[];
+}
 export interface DataTableFilter<T> {
     readonly state: DataTableFilterState;
     readonly setSearch: (search: string) => void;
     readonly toggleFacet: (value: string) => void;
+    readonly toggleGroupFacet: (groupId: string, value: string) => void;
+    /** One entry per `facetGroups` config, chips derived from the UNFILTERED rows. */
+    readonly groups: readonly DataTableFilterGroupView[];
     readonly clear: () => void;
     /** Chips derived from the UNFILTERED rows — a chip never disappears because
      *  it was the one just pressed. */