@kanunilabs/datagrid-react 1.3.0 → 1.5.0

package/dist/index.d.cts

@@ -804,6 +804,8 @@ interface GridHeaderProps<TRow = GridRowData> {
     rowNumberHeader?: React.ReactNode;
     /** 'all' | 'some' | 'none' — drives the tri-state select-all box. */
     selectAllState?: 'all' | 'some' | 'none';
+    /** No row in the result can be selected (`selection.isRowSelectable`). */
+    selectAllDisabled?: boolean;
     onToggleSelectAll?: () => void;
     /** Make headers draggable onto the group panel. */
     draggable?: boolean;
@@ -829,8 +831,13 @@ interface GridHeaderProps<TRow = GridRowData> {
     onAutoFit?: (columnId: string) => void;
     /** Right-click on a header cell (Enterprise header menu). */
     onHeaderContextMenu?: (columnId: string, event: React.MouseEvent) => void;
+    /**
+     * The grouping levels: the group column (`grouping.display: 'column'`)
+     * shows the direction of the first one, since its click sorts them all.
+     */
+    groupLevels?: readonly string[];
 }
-declare function GridHeaderImpl<TRow = GridRowData>({ bandOffset, stickyInsets, layout, centerColumns, leadingSpacer, trailingSpacer, sort, sortable, onSort, headerFilter, filteredColumns, onOpenFilter, filterIconMode, checkboxColumn, detailColumn, rowNumberColumn, rowNumberHeader, selectAllState, onToggleSelectAll, draggable, reorderable, onReorder, resizable, onResize, onAutoFit, onHeaderContextMenu, }: GridHeaderProps<TRow>): react.JSX.Element;
+declare function GridHeaderImpl<TRow = GridRowData>({ bandOffset, stickyInsets, layout, centerColumns, leadingSpacer, trailingSpacer, sort, sortable, onSort, headerFilter, filteredColumns, onOpenFilter, filterIconMode, checkboxColumn, detailColumn, rowNumberColumn, rowNumberHeader, selectAllState, selectAllDisabled, onToggleSelectAll, draggable, reorderable, onReorder, resizable, onResize, onAutoFit, onHeaderContextMenu, groupLevels, }: GridHeaderProps<TRow>): react.JSX.Element;
 declare const GridHeader: typeof GridHeaderImpl;
 
 /**
@@ -900,6 +907,18 @@ interface GridRowProps<TRow = GridRowData> {
     trailingSpacer: number;
     striped: boolean;
     selected: boolean;
+    /**
+     * Whether the row tells a screen reader its selection state
+     * (`aria-selected`). Off where rows cannot be selected — a grid without
+     * selection, a pinned row — so the reader does not say "not selected" on
+     * every one. Default true.
+     */
+    ariaSelectable?: boolean;
+    /**
+     * False when `selection.isRowSelectable` refuses this row: its checkbox is
+     * drawn disabled. Default true.
+     */
+    selectable?: boolean;
     /**
      * A group header's checkbox state — its rows all, some or none selected.
      * Absent: no checkbox (single selection, or no checkbox column).
@@ -911,7 +930,7 @@ interface GridRowProps<TRow = GridRowData> {
      * `grouping.display`: `'aligned'` draws a group row as cells, its name in
      * the first visible column and each summary under its own column.
      */
-    groupDisplay?: 'fullWidth' | 'aligned';
+    groupDisplay?: 'fullWidth' | 'aligned' | 'column';
     /** Column id holding keyboard focus in this row, or null. */
     focusedColumnId: string | null;
     /** Highlight this row as the focused one (`focusedRow` is on). */
@@ -1046,7 +1065,7 @@ interface GridRowProps<TRow = GridRowData> {
     onCellPointerEnter?: (ctx: CellSlotContext<TRow>, event: React.MouseEvent) => void;
     onCellDoubleClick?: (ctx: CellSlotContext<TRow>) => void;
 }
-declare function GridRowImpl<TRow = GridRowData>({ gridId, node, index, layout, columnModel, centerColumns, centerIndices, stickyInsets, leadingSpacer, trailingSpacer, striped, selected, groupSelection, onToggleGroupSelect, groupDisplay, focusedColumnId, rowFocused, renderRow, checkboxColumn, rowNumberColumn, rowNumber, getNote, getSpan, headerRowCount, onRowClick, onRowMouseDown, onRowDoubleClick, onToggleSelect, onCellMouseDown, onRowContextMenu, searchNeedle, onToggleGroup, summaryDefs, detailColumn, detailExpanded, onToggleDetail, onToggleTreeRow, renderDetail, renderEditForm, renderCellContent, getCellClassName, onCellPointerDown, onCellPointerEnter, onCellDoubleClick, rowDrag, dropSide, height, }: GridRowProps<TRow>): react.JSX.Element | null;
+declare function GridRowImpl<TRow = GridRowData>({ gridId, node, index, layout, columnModel, centerColumns, centerIndices, stickyInsets, leadingSpacer, trailingSpacer, striped, selected, ariaSelectable, selectable, groupSelection, onToggleGroupSelect, groupDisplay, focusedColumnId, rowFocused, renderRow, checkboxColumn, rowNumberColumn, rowNumber, getNote, getSpan, headerRowCount, onRowClick, onRowMouseDown, onRowDoubleClick, onToggleSelect, onCellMouseDown, onRowContextMenu, searchNeedle, onToggleGroup, summaryDefs, detailColumn, detailExpanded, onToggleDetail, onToggleTreeRow, renderDetail, renderEditForm, renderCellContent, getCellClassName, onCellPointerDown, onCellPointerEnter, onCellDoubleClick, rowDrag, dropSide, height, }: GridRowProps<TRow>): react.JSX.Element | null;
 declare const GridRow: typeof GridRowImpl;
 
 interface GridFilterRowProps<TRow = GridRowData> {
@@ -1389,7 +1408,7 @@ interface GridPagerProps {
     pageSizes?: number[];
     /** Rows after filtering (the thing being paged through). */
     totalRows: number;
-    /** Absolute jump (first/last). */
+    /** Absolute jump (first/last, and a numbered page button). */
     onPage: (page: number) => void;
     /**
      * RELATIVE moves go through their own callbacks so they read the controller's
@@ -1400,9 +1419,22 @@ interface GridPagerProps {
     onNext: () => void;
     onPrevious: () => void;
     onPageSize: (size: number) => void;
-    labels?: Partial<Record<'first' | 'previous' | 'next' | 'last' | 'page' | 'of' | 'rowsPerPage', string>>;
+    /**
+     * Numbered page buttons — `1 2 3 … 40` — in place of "Page 3 of 40"
+     * (`pagination.pageButtons`). The current page's button carries
+     * `aria-current="page"`.
+     */
+    pageButtons?: boolean;
+    /** Most slots the numbered buttons take, ellipses included. Default 7, at least 5. */
+    maxPageButtons?: number;
+    /**
+     * Overrides for the pager's words. `pageButton` is a numbered button's
+     * accessible name, with `{n}` for the page; `navigation` names the pager
+     * itself.
+     */
+    labels?: Partial<Record<'first' | 'previous' | 'next' | 'last' | 'page' | 'of' | 'rowsPerPage' | 'pageButton' | 'navigation', string>>;
 }
-declare function GridPagerImpl({ page, pageCount, pageSize, pageSizes, totalRows, onPage, onNext, onPrevious, onPageSize, labels, }: GridPagerProps): react.JSX.Element;
+declare function GridPagerImpl({ page, pageCount, pageSize, pageSizes, totalRows, onPage, onNext, onPrevious, onPageSize, pageButtons, maxPageButtons, labels, }: GridPagerProps): react.JSX.Element;
 declare const GridPager: react.MemoExoticComponent<typeof GridPagerImpl>;
 
 /** Labels, so the menu can be localized without rebuilding the item list. */

package/dist/index.d.ts

@@ -804,6 +804,8 @@ interface GridHeaderProps<TRow = GridRowData> {
     rowNumberHeader?: React.ReactNode;
     /** 'all' | 'some' | 'none' — drives the tri-state select-all box. */
     selectAllState?: 'all' | 'some' | 'none';
+    /** No row in the result can be selected (`selection.isRowSelectable`). */
+    selectAllDisabled?: boolean;
     onToggleSelectAll?: () => void;
     /** Make headers draggable onto the group panel. */
     draggable?: boolean;
@@ -829,8 +831,13 @@ interface GridHeaderProps<TRow = GridRowData> {
     onAutoFit?: (columnId: string) => void;
     /** Right-click on a header cell (Enterprise header menu). */
     onHeaderContextMenu?: (columnId: string, event: React.MouseEvent) => void;
+    /**
+     * The grouping levels: the group column (`grouping.display: 'column'`)
+     * shows the direction of the first one, since its click sorts them all.
+     */
+    groupLevels?: readonly string[];
 }
-declare function GridHeaderImpl<TRow = GridRowData>({ bandOffset, stickyInsets, layout, centerColumns, leadingSpacer, trailingSpacer, sort, sortable, onSort, headerFilter, filteredColumns, onOpenFilter, filterIconMode, checkboxColumn, detailColumn, rowNumberColumn, rowNumberHeader, selectAllState, onToggleSelectAll, draggable, reorderable, onReorder, resizable, onResize, onAutoFit, onHeaderContextMenu, }: GridHeaderProps<TRow>): react.JSX.Element;
+declare function GridHeaderImpl<TRow = GridRowData>({ bandOffset, stickyInsets, layout, centerColumns, leadingSpacer, trailingSpacer, sort, sortable, onSort, headerFilter, filteredColumns, onOpenFilter, filterIconMode, checkboxColumn, detailColumn, rowNumberColumn, rowNumberHeader, selectAllState, selectAllDisabled, onToggleSelectAll, draggable, reorderable, onReorder, resizable, onResize, onAutoFit, onHeaderContextMenu, groupLevels, }: GridHeaderProps<TRow>): react.JSX.Element;
 declare const GridHeader: typeof GridHeaderImpl;
 
 /**
@@ -900,6 +907,18 @@ interface GridRowProps<TRow = GridRowData> {
     trailingSpacer: number;
     striped: boolean;
     selected: boolean;
+    /**
+     * Whether the row tells a screen reader its selection state
+     * (`aria-selected`). Off where rows cannot be selected — a grid without
+     * selection, a pinned row — so the reader does not say "not selected" on
+     * every one. Default true.
+     */
+    ariaSelectable?: boolean;
+    /**
+     * False when `selection.isRowSelectable` refuses this row: its checkbox is
+     * drawn disabled. Default true.
+     */
+    selectable?: boolean;
     /**
      * A group header's checkbox state — its rows all, some or none selected.
      * Absent: no checkbox (single selection, or no checkbox column).
@@ -911,7 +930,7 @@ interface GridRowProps<TRow = GridRowData> {
      * `grouping.display`: `'aligned'` draws a group row as cells, its name in
      * the first visible column and each summary under its own column.
      */
-    groupDisplay?: 'fullWidth' | 'aligned';
+    groupDisplay?: 'fullWidth' | 'aligned' | 'column';
     /** Column id holding keyboard focus in this row, or null. */
     focusedColumnId: string | null;
     /** Highlight this row as the focused one (`focusedRow` is on). */
@@ -1046,7 +1065,7 @@ interface GridRowProps<TRow = GridRowData> {
     onCellPointerEnter?: (ctx: CellSlotContext<TRow>, event: React.MouseEvent) => void;
     onCellDoubleClick?: (ctx: CellSlotContext<TRow>) => void;
 }
-declare function GridRowImpl<TRow = GridRowData>({ gridId, node, index, layout, columnModel, centerColumns, centerIndices, stickyInsets, leadingSpacer, trailingSpacer, striped, selected, groupSelection, onToggleGroupSelect, groupDisplay, focusedColumnId, rowFocused, renderRow, checkboxColumn, rowNumberColumn, rowNumber, getNote, getSpan, headerRowCount, onRowClick, onRowMouseDown, onRowDoubleClick, onToggleSelect, onCellMouseDown, onRowContextMenu, searchNeedle, onToggleGroup, summaryDefs, detailColumn, detailExpanded, onToggleDetail, onToggleTreeRow, renderDetail, renderEditForm, renderCellContent, getCellClassName, onCellPointerDown, onCellPointerEnter, onCellDoubleClick, rowDrag, dropSide, height, }: GridRowProps<TRow>): react.JSX.Element | null;
+declare function GridRowImpl<TRow = GridRowData>({ gridId, node, index, layout, columnModel, centerColumns, centerIndices, stickyInsets, leadingSpacer, trailingSpacer, striped, selected, ariaSelectable, selectable, groupSelection, onToggleGroupSelect, groupDisplay, focusedColumnId, rowFocused, renderRow, checkboxColumn, rowNumberColumn, rowNumber, getNote, getSpan, headerRowCount, onRowClick, onRowMouseDown, onRowDoubleClick, onToggleSelect, onCellMouseDown, onRowContextMenu, searchNeedle, onToggleGroup, summaryDefs, detailColumn, detailExpanded, onToggleDetail, onToggleTreeRow, renderDetail, renderEditForm, renderCellContent, getCellClassName, onCellPointerDown, onCellPointerEnter, onCellDoubleClick, rowDrag, dropSide, height, }: GridRowProps<TRow>): react.JSX.Element | null;
 declare const GridRow: typeof GridRowImpl;
 
 interface GridFilterRowProps<TRow = GridRowData> {
@@ -1389,7 +1408,7 @@ interface GridPagerProps {
     pageSizes?: number[];
     /** Rows after filtering (the thing being paged through). */
     totalRows: number;
-    /** Absolute jump (first/last). */
+    /** Absolute jump (first/last, and a numbered page button). */
     onPage: (page: number) => void;
     /**
      * RELATIVE moves go through their own callbacks so they read the controller's
@@ -1400,9 +1419,22 @@ interface GridPagerProps {
     onNext: () => void;
     onPrevious: () => void;
     onPageSize: (size: number) => void;
-    labels?: Partial<Record<'first' | 'previous' | 'next' | 'last' | 'page' | 'of' | 'rowsPerPage', string>>;
+    /**
+     * Numbered page buttons — `1 2 3 … 40` — in place of "Page 3 of 40"
+     * (`pagination.pageButtons`). The current page's button carries
+     * `aria-current="page"`.
+     */
+    pageButtons?: boolean;
+    /** Most slots the numbered buttons take, ellipses included. Default 7, at least 5. */
+    maxPageButtons?: number;
+    /**
+     * Overrides for the pager's words. `pageButton` is a numbered button's
+     * accessible name, with `{n}` for the page; `navigation` names the pager
+     * itself.
+     */
+    labels?: Partial<Record<'first' | 'previous' | 'next' | 'last' | 'page' | 'of' | 'rowsPerPage' | 'pageButton' | 'navigation', string>>;
 }
-declare function GridPagerImpl({ page, pageCount, pageSize, pageSizes, totalRows, onPage, onNext, onPrevious, onPageSize, labels, }: GridPagerProps): react.JSX.Element;
+declare function GridPagerImpl({ page, pageCount, pageSize, pageSizes, totalRows, onPage, onNext, onPrevious, onPageSize, pageButtons, maxPageButtons, labels, }: GridPagerProps): react.JSX.Element;
 declare const GridPager: react.MemoExoticComponent<typeof GridPagerImpl>;
 
 /** Labels, so the menu can be localized without rebuilding the item list. */