@jielga/tmdatagrid 2.0.0-beta.11 → 2.0.0-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/index.d.ts +285 -22
  2. package/dist/index.js +2857 -2376
  3. package/dist/index.js.map +1 -1
  4. package/dist/styles.css +1 -1
  5. package/package.json +1 -2
  6. package/skills/appearance/SKILL.md +1 -1
  7. package/skills/cell-selection/SKILL.md +1 -1
  8. package/skills/columns/SKILL.md +2 -2
  9. package/skills/data/SKILL.md +5 -2
  10. package/skills/editing/SKILL.md +1 -1
  11. package/skills/filtering/SKILL.md +112 -26
  12. package/skills/getting-started/SKILL.md +4 -4
  13. package/skills/grouping/SKILL.md +1 -1
  14. package/skills/options/SKILL.md +3 -1
  15. package/skills/rows/SKILL.md +1 -1
  16. package/skills/server-side/SKILL.md +44 -15
  17. package/skills/testing/SKILL.md +6 -3
  18. package/src/tmdatagrid/components/TMDataGrid.tsx +3 -0
  19. package/src/tmdatagrid/components/TMDataGridEditColumn.tsx +1 -1
  20. package/src/tmdatagrid/components/TMDataGridFilterPanel.module.css +37 -18
  21. package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx +138 -160
  22. package/src/tmdatagrid/components/TMDataGridFilterSurface.module.css +54 -0
  23. package/src/tmdatagrid/components/TMDataGridFilterSurface.tsx +162 -0
  24. package/src/tmdatagrid/components/TMDataGridFooter.tsx +28 -1
  25. package/src/tmdatagrid/components/TMDataGridHeaderCell.module.css +10 -0
  26. package/src/tmdatagrid/components/TMDataGridHeaderCell.tsx +12 -3
  27. package/src/tmdatagrid/components/TMDataGridHeaderFilterRow.module.css +51 -0
  28. package/src/tmdatagrid/components/TMDataGridHeaderFilterRow.tsx +303 -0
  29. package/src/tmdatagrid/components/TMDataGridTable.module.css +9 -41
  30. package/src/tmdatagrid/components/TMDataGridTable.tsx +84 -15
  31. package/src/tmdatagrid/components/TMDataGridToolbar.tsx +37 -11
  32. package/src/tmdatagrid/components/filters/DgAutocompleteFilter.tsx +5 -4
  33. package/src/tmdatagrid/components/filters/DgDateRangeFilter.tsx +22 -5
  34. package/src/tmdatagrid/components/filters/DgRangeSliderFilter.tsx +5 -1
  35. package/src/tmdatagrid/components/filters/DgTriStateFilter.tsx +5 -1
  36. package/src/tmdatagrid/components/filters/TMDataGridFilterValueInput.tsx +44 -28
  37. package/src/tmdatagrid/components/filters/controlLayout.ts +32 -0
  38. package/src/tmdatagrid/components/filters/filterControlFor.ts +65 -0
  39. package/src/tmdatagrid/components/sticky.module.css +44 -0
  40. package/src/tmdatagrid/core/columnOptions.ts +46 -0
  41. package/src/tmdatagrid/core/controlledStateSync.ts +108 -0
  42. package/src/tmdatagrid/core/editEngine.ts +68 -12
  43. package/src/tmdatagrid/core/filterControls.ts +28 -0
  44. package/src/tmdatagrid/core/filterOperators.ts +64 -1
  45. package/src/tmdatagrid/core/filterSurface.ts +99 -0
  46. package/src/tmdatagrid/core/labels.ts +7 -0
  47. package/src/tmdatagrid/core/labelsSv.ts +3 -0
  48. package/src/tmdatagrid/core/pageReset.ts +115 -0
  49. package/src/tmdatagrid/index.ts +13 -0
  50. package/src/tmdatagrid/useTMDataGrid.tsx +191 -11
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { MantineSize, MenuProps } from "@mantine/core";
2
2
  import { CSSProperties, ComponentType, MouseEvent, MutableRefObject, ReactNode } from "react";
3
- import { Cell, Column, ColumnPinningState, ExpandedState, Header, Row, RowData, RowSelectionState, Table, TableFeatures, TableOptions, TableState, aggregationFns } from "@tanstack/react-table";
3
+ import { Cell, Column, ColumnFiltersState, ColumnPinningState, ExpandedState, Header, Row, RowData, RowSelectionState, Table, TableFeatures, TableOptions, TableState, aggregationFns } from "@tanstack/react-table";
4
4
  import { Store } from "@tanstack/store";
5
5
  import { AnyFieldApi, AnyFormApi, StandardSchemaV1 } from "@tanstack/react-form";
6
6
  import { RankingInfo } from "@tanstack/match-sorter-utils";
@@ -181,12 +181,48 @@ declare function operatorTakesArrayValue(operator: TMDataGridFilterOperator): bo
181
181
  declare function operatorTakesRangeValue(operator: TMDataGridFilterOperator): boolean;
182
182
  /** The untouched value a fresh filter starts with - the operator's shape, empty. */
183
183
  declare function emptyValueForOperator(operator: TMDataGridFilterOperator): string | ReadonlyArray<string>;
184
+ /**
185
+ * The three value shapes an operator can take. A set is not a range, even
186
+ * though both are arrays.
187
+ */
188
+ type TMDataGridFilterValueShape = "scalar" | "set" | "range";
189
+ /**
190
+ * Which shape an operator's value takes. A typed value survives an operator or
191
+ * column change only within its shape, which is the rule both the panel and
192
+ * the header controls use when the operator changes.
193
+ */
194
+ declare function filterValueShape(operator: TMDataGridFilterOperator): TMDataGridFilterValueShape;
184
195
  /**
185
196
  * A filter only narrows the row set once it has something to compare against.
186
197
  * Half-typed filters stay in state (so the panel keeps rendering their row) but
187
198
  * are treated as inactive for the funnel indicator and for row matching.
188
199
  */
189
200
  declare function isFilterActive(value: unknown): boolean;
201
+ /** One column's filter, typed - what `columnFilters` holds per entry. */
202
+ type TMDataGridColumnFilter = {
203
+ id: string;
204
+ value: TMDataGridFilterValue;
205
+ };
206
+ /**
207
+ * The column filters that are actually narrowing the grid, typed.
208
+ *
209
+ * `ColumnFiltersState` types `value` as `unknown`, so the first line of a
210
+ * server-side mapping layer is otherwise a cast back to the shape the grid
211
+ * itself wrote, wrapped in the same "drop the half-typed ones" filter every
212
+ * consumer writes:
213
+ *
214
+ * ```ts
215
+ * const predicates = activeColumnFilters(table).map((filter) =>
216
+ * toPredicate(filter.id, filter.value),
217
+ * );
218
+ * ```
219
+ *
220
+ * Takes the table, or a `columnFilters` array where the consumer owns the
221
+ * slice. Reading it from the table reads the current value and does not
222
+ * subscribe; inside a component, subscribe to `columnFilters` the way the
223
+ * grid's own chrome does.
224
+ */
225
+ declare function activeColumnFilters<TData extends RowData>(source: TMDataGridTable<TData> | ColumnFiltersState): Array<TMDataGridColumnFilter>;
190
226
  /**
191
227
  * One-line description of a single filter, as shown on a filter pill.
192
228
  *
@@ -766,11 +802,26 @@ type TMDataGridEditApi<TData extends RowData = TMDataGridRowData> = {
766
802
  addRows: (rows: ReadonlyArray<Partial<TData>>, options?: TMDataGridAddRowsOptions) => Promise<TMDataGridAddRowsResult>;
767
803
  /**
768
804
  * Deletes a row: `onRowDelete` straight away, or under `editing.draft` a
769
- * toggle of the id in `deletedRowIds` - the row renders struck through
770
- * until `saveDrafts` reports it. On an uncommitted entry row it just
771
- * discards the entry.
805
+ * mark in `deletedRowIds` - the row renders struck through until
806
+ * `saveDrafts` reports it. Idempotent: deleting a marked row again leaves
807
+ * it marked, and {@link restoreRow} is the undo. On an entry row,
808
+ * committed or not, it just discards the entry; an id the grid does not
809
+ * know is a no-op.
772
810
  */
773
811
  deleteRow: (rowId: string) => void;
812
+ /**
813
+ * {@link deleteRow} for several rows in one call - one notification for
814
+ * the batch, for a bulk action over a selection. Because `deleteRow` is
815
+ * idempotent and ignores unknown ids, the list may be passed exactly as
816
+ * the selection stands - already-marked rows stay marked, duplicates and
817
+ * stale ids do nothing.
818
+ */
819
+ deleteRows: (rowIds: ReadonlyArray<string>) => void;
820
+ /**
821
+ * Removes a row's deletion mark - the lane's Restore. A no-op on a row
822
+ * that is not marked, and outside `editing.draft`, where no marks exist.
823
+ */
824
+ restoreRow: (rowId: string) => void;
774
825
  /** Whether delete chrome makes sense - the lane's trash gate. */
775
826
  canDeleteRows: () => boolean;
776
827
  };
@@ -832,6 +883,8 @@ type TMDataGridLabels = {
832
883
  clearAllFilters: string;
833
884
  closeFilters: string;
834
885
  removeFilter: string;
886
+ /** Names the operator button in a column's header filter control. */
887
+ filterOperatorFor: (column: string) => string;
835
888
  activeFilters: string;
836
889
  clearFilter: (column: string) => string;
837
890
  sortAsc: string;
@@ -857,6 +910,11 @@ type TMDataGridLabels = {
857
910
  to: number;
858
911
  total: number;
859
912
  }) => string;
913
+ /** `pageCount` is `-1` when a manual grid declares an unknown total. */
914
+ pageNumber: (args: {
915
+ page: number;
916
+ pageCount: number;
917
+ }) => string;
860
918
  groupedAllRows: (total: number) => string;
861
919
  pagingSuspendedHint: string;
862
920
  previousPage: string;
@@ -962,7 +1020,30 @@ type TMDataGridFilterControlArgs = {
962
1020
  options: ReadonlyArray<TMDataGridOption>;
963
1021
  size: TMDataGridSize;
964
1022
  labels: TMDataGridLabels;
1023
+ /**
1024
+ * How much room the control has, and whether it names itself. The same
1025
+ * vocabulary as `TMDataGrid.FilterPanel`'s own `layout` prop, plus the one
1026
+ * value only a header cell can be in.
1027
+ *
1028
+ * | Layout | Where | Field |
1029
+ * | --- | --- | --- |
1030
+ * | `"row"` | A filter row laid out side by side | Labelled, fixed width |
1031
+ * | `"stacked"` | A filter row in a narrow host - the sidebar | Labelled, full width |
1032
+ * | `"header"` | One header cell, under `filters.inHeader` | `aria-label`, full width |
1033
+ *
1034
+ * Every built-in control honours it. A custom control that ignores it still
1035
+ * works - it will simply look the same everywhere.
1036
+ */
1037
+ layout: TMDataGridFilterControlLayout;
965
1038
  };
1039
+ /** How much room a filter control has. See `layout`. */
1040
+ type TMDataGridFilterControlLayout = "row" | "stacked" | "header";
1041
+ /**
1042
+ * The two a filter *panel* can be in - {@link TMDataGridFilterControlLayout}
1043
+ * without the header cell, which is not a panel. `TMDataGrid.FilterPanel`'s
1044
+ * `layout` prop.
1045
+ */
1046
+ type TMDataGridFilterPanelLayout = Exclude<TMDataGridFilterControlLayout, "header">;
966
1047
  /**
967
1048
  * `meta.filter.control` - replaces the built-in value control for this column.
968
1049
  * Rendered as JSX, never invoked as a bare function, so hooks are legal
@@ -996,6 +1077,83 @@ type TMDataGridColumnFilterOptions = {
996
1077
  control?: TMDataGridFilterControlComponent;
997
1078
  };
998
1079
  //#endregion
1080
+ //#region .types-tmp/core/filterSurface.d.ts
1081
+ /**
1082
+ * Where the grid puts its filter controls.
1083
+ *
1084
+ * | Surface | Where it renders |
1085
+ * | --- | --- |
1086
+ * | `"popup"` | Floating over the first body rows, under the header |
1087
+ * | `"sidebar"` | Beside the table, inside the grid frame |
1088
+ * | `"none"` | Nowhere - the grid renders no panel of its own |
1089
+ *
1090
+ * Header filters are not one of these: they are a second row of controls in
1091
+ * the header, always visible, and they coexist with any of the three. See
1092
+ * {@link TMDataGridFiltersOptions.inHeader}.
1093
+ */
1094
+ type TMDataGridFilterSurface = "popup" | "sidebar" | "none";
1095
+ /** Which side of the table the sidebar surface renders on. */
1096
+ type TMDataGridFilterSidebarSide = "left" | "right";
1097
+ /**
1098
+ * `filters` on `useTMDataGrid` - everything about where the filter controls
1099
+ * are, as opposed to what they do.
1100
+ *
1101
+ * Named for the option key, the way `editing` has `TMDataGridEditingOptions`.
1102
+ * Not to be confused with `TMDataGridColumnFilterOptions`, which is one
1103
+ * column's `meta.filter`.
1104
+ *
1105
+ * ```tsx
1106
+ * useTMDataGrid({ data, columns, filters: { surface: "sidebar" } });
1107
+ * ```
1108
+ */
1109
+ type TMDataGridFiltersOptions = {
1110
+ /**
1111
+ * Which surface `TMDataGrid.Table` renders and `TMDataGrid.FilterButton`
1112
+ * toggles. Defaults to `"popup"`.
1113
+ *
1114
+ * Under `"none"` the table renders no panel and the filter button renders
1115
+ * nothing. That is what a grid running header filters alone wants, and it is
1116
+ * also what frees a hand-placed `<TMDataGrid.FilterPanel />` to be the only
1117
+ * panel on the page - mounted, it is always visible, so drive it off
1118
+ * `ui.state.filterPanelOpen` if it belongs behind a control of your own.
1119
+ */
1120
+ surface?: TMDataGridFilterSurface;
1121
+ /** Which side the `"sidebar"` surface sits on. Defaults to `"right"`. */
1122
+ sidebarSide?: TMDataGridFilterSidebarSide;
1123
+ /** Width of the `"sidebar"` surface, any CSS length. Defaults to `"280px"`. */
1124
+ sidebarWidth?: string;
1125
+ /**
1126
+ * Whether the popup or the sidebar starts open. Read once, at mount, like
1127
+ * `initialState`.
1128
+ *
1129
+ * Defaults to `true` under `"sidebar"` and `false` everywhere else: a
1130
+ * sidebar is a layout choice, so asking for one and getting an empty strip
1131
+ * until the funnel is clicked is not what it reads like, while a popup that
1132
+ * greets you open is in the way.
1133
+ *
1134
+ * Under `"none"` it is simply the starting value of
1135
+ * `ui.state.filterPanelOpen`, which a control of your own can read.
1136
+ */
1137
+ defaultOpen?: boolean;
1138
+ /**
1139
+ * A second header row holding one value control per filterable column,
1140
+ * always visible. Off by default.
1141
+ *
1142
+ * Independent of `surface` - a grid may have header filters and a popup at
1143
+ * once. What it does change is the column chrome: the header's funnel
1144
+ * indicator and the column menu's "Filter" item both come off, because
1145
+ * their only job was to reveal a control that is now already on screen.
1146
+ *
1147
+ * A header cell has room for a value and an operator button, not for the
1148
+ * panel's column / operator / value triple. Everything else about a filter
1149
+ * is unchanged - the same operators, the same `meta.filter.control`, the
1150
+ * same `columnFilters` state.
1151
+ */
1152
+ inHeader?: boolean;
1153
+ };
1154
+ /** {@link TMDataGridFiltersOptions} with every default filled in. */
1155
+ type TMDataGridFiltersSettings = Required<TMDataGridFiltersOptions>;
1156
+ //#endregion
999
1157
  //#region .types-tmp/core/quickSearch.d.ts
1000
1158
  /** How the quick search matches - see `quickSearchMode` on the hook options. */
1001
1159
  type TMDataGridQuickSearchMode = "fuzzy" | "contains";
@@ -1642,8 +1800,20 @@ type TMDataGridDetailsRenderer<TData extends RowData> = (args: TMDataGridDetails
1642
1800
  */
1643
1801
  type TMDataGridUiState = {
1644
1802
  filterPanelOpen: boolean;
1645
- /** Column whose filter row should be focused when the panel opens. */
1803
+ /**
1804
+ * Column whose *panel* row should take the focus. Cleared once the row has
1805
+ * taken it, so pointing at the same column twice focuses twice.
1806
+ */
1646
1807
  filterPanelColumnId: string | null;
1808
+ /**
1809
+ * Column whose *header filter* control should take the focus, under
1810
+ * `filters.inHeader`. Cleared once taken, like the one above.
1811
+ *
1812
+ * Its own slot rather than a second reader of `filterPanelColumnId`: a grid
1813
+ * can have header filters and a panel at once, and two controls racing to
1814
+ * answer one id means whichever mounted last wins the caret.
1815
+ */
1816
+ headerFilterColumnId: string | null;
1647
1817
  /**
1648
1818
  * Column being dragged by its header, if any. Held here rather than read from
1649
1819
  * `dataTransfer`, which browsers keep unreadable until the drop.
@@ -1686,6 +1856,18 @@ type TMDataGridUiState = {
1686
1856
  type TMDataGridUiActions = {
1687
1857
  openFilterPanel: (columnId?: string | null) => void;
1688
1858
  closeFilterPanel: () => void;
1859
+ /**
1860
+ * Points at a column's row in the filter panel without opening anything.
1861
+ * `openFilterPanel` does this as well as opening; this is the half a panel
1862
+ * that is already showing needs.
1863
+ */
1864
+ focusPanelFilter: (columnId: string | null) => void;
1865
+ /**
1866
+ * Points at a column's header filter control - what `openColumnFilter` does
1867
+ * under `filters.inHeader`, where there is no panel to open. The header row
1868
+ * scrolls the column into view and focuses it.
1869
+ */
1870
+ focusHeaderFilter: (columnId: string | null) => void;
1689
1871
  startColumnDrag: (columnId: string) => void;
1690
1872
  endColumnDrag: () => void;
1691
1873
  /**
@@ -1732,6 +1914,13 @@ type TMDataGridApi<TData extends RowData> = {
1732
1914
  edit: TMDataGridEditApi<TData>;
1733
1915
  /** Table-level feature switches, re-read from options on every render. */
1734
1916
  features: TMDataGridFeatureFlags;
1917
+ /**
1918
+ * Where the filter controls live, the `filters` option with its defaults
1919
+ * filled in. On the api rather than in a component's props because the
1920
+ * pills, the column menu and `openColumnFilter` all have to agree with the
1921
+ * table about which surface is on.
1922
+ */
1923
+ filters: TMDataGridFiltersSettings;
1735
1924
  /** Every string the chrome renders, `labels` merged over the English defaults. */
1736
1925
  labels: TMDataGridLabels;
1737
1926
  /** The detail renderer, when row details are on. See `renderDetails`. */
@@ -1997,12 +2186,40 @@ type UseTMDataGridOptions<TData extends RowData> = Omit<TableOptions<TMDataGridF
1997
2186
  * no extra flag.
1998
2187
  */
1999
2188
  enablePagination?: boolean;
2189
+ /**
2190
+ * Sends the grid back to the first page whenever the query changes - a
2191
+ * column filter, the quick search or the sort. Defaults to `true` under
2192
+ * `manualPagination` and `false` otherwise, where TanStack's own
2193
+ * `autoResetPageIndex` already does it.
2194
+ *
2195
+ * Server-side, `pageIndex` is a position in a result set the grid does not
2196
+ * own: narrowing the query leaves it pointing past the last page, and the
2197
+ * next request comes back empty. The reset is applied in the same event as
2198
+ * the change, so one request goes out, for the first page of the new query.
2199
+ */
2200
+ resetPageOnQueryChange?: boolean;
2000
2201
  /**
2001
2202
  * The row-number gutter: a generated lane, outermost left, numbering the
2002
2203
  * rows of the current view - sorted, filtered, continuing across pages,
2003
2204
  * with group rows unnumbered. Off by default.
2004
2205
  */
2005
2206
  enableRowNumbers?: boolean;
2207
+ /**
2208
+ * Where the grid puts its filter controls - a popup over the rows, a sidebar
2209
+ * beside them, controls in the header row, or nowhere at all so you place
2210
+ * `TMDataGrid.FilterPanel` yourself.
2211
+ *
2212
+ * ```tsx
2213
+ * useTMDataGrid({ data, columns, filters: { surface: "sidebar", inHeader: true } });
2214
+ * ```
2215
+ *
2216
+ * Defaults to `{ surface: "popup" }` - the floating panel the grid has
2217
+ * always shown. See {@link TMDataGridFiltersOptions}.
2218
+ *
2219
+ * Read field by field, so a literal is fine here - unlike `labels` or
2220
+ * `persist`, this one does not have to be referentially stable.
2221
+ */
2222
+ filters?: TMDataGridFiltersOptions;
2006
2223
  /**
2007
2224
  * How the quick search (`TMDataGrid.Search`) matches. `"fuzzy"` - the
2008
2225
  * default - forgives typos and skipped characters, and while it is the
@@ -2201,10 +2418,16 @@ type UseTMDataGridOptions<TData extends RowData> = Omit<TableOptions<TMDataGridF
2201
2418
  * flag on, so `<TMDataGrid.Footer />` renders its pager without further
2202
2419
  * options.
2203
2420
  */
2204
- declare function useTMDataGrid<TData extends RowData>({ persist, labels: labelsOverride, enableColumnOrdering, enablePagination, enableRowNumbers, selectionMode, showSelectedBackground, defaultHighlightedRowId, onHighlightedRowChange, cellSelection, onFocusedCellChange, editing, renderDetails, renderDetailsEstHeight, overscan, ...options }: UseTMDataGridOptions<TData>): TMDataGridApi<TData>;
2421
+ declare function useTMDataGrid<TData extends RowData>({ persist, labels: labelsOverride, enableColumnOrdering, enablePagination, resetPageOnQueryChange, enableRowNumbers, selectionMode, showSelectedBackground, defaultHighlightedRowId, onHighlightedRowChange, cellSelection, onFocusedCellChange, filters: filterOptions, editing, renderDetails, renderDetailsEstHeight, overscan, ...options }: UseTMDataGridOptions<TData>): TMDataGridApi<TData>;
2205
2422
  /**
2206
- * Opens the filter panel for a column, seeding an empty filter row when the
2207
- * column has none yet - mirrors "Filter" in the column header menu.
2423
+ * Sends the user to a column's filter control, seeding an empty filter when
2424
+ * the column has none yet - what "Filter" in the column menu and a click on a
2425
+ * filter pill both do.
2426
+ *
2427
+ * Which control that is follows the grid's `filters` option. Under
2428
+ * `inHeader` it is the column's header control, which is already on screen, so
2429
+ * the call focuses it and leaves the popup or sidebar closed. Otherwise it is
2430
+ * the panel's row for that column, and the call opens the surface on it.
2208
2431
  */
2209
2432
  declare function openColumnFilter<TData extends RowData>(api: TMDataGridApi<TData>, columnId: string): void;
2210
2433
  //#endregion
@@ -2324,13 +2547,35 @@ type TMDataGridDraftActionsProps = {
2324
2547
  declare function TMDataGridDraftActions({ renderActions }?: TMDataGridDraftActionsProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
2325
2548
  //#endregion
2326
2549
  //#region .types-tmp/components/TMDataGridFilterPanel.d.ts
2550
+ type TMDataGridFilterPanelProps = {
2551
+ /**
2552
+ * How one filter row is laid out.
2553
+ *
2554
+ * `"row"` - the default - puts column, operator and value side by side,
2555
+ * which wants about 550px. `"stacked"` puts them one under the other, each
2556
+ * filling the width, for a host too narrow for that: the sidebar surface
2557
+ * uses it, and so should a panel you place in a drawer or a narrow column.
2558
+ *
2559
+ * Passed through to every value control as its `layout`, so a
2560
+ * `meta.filter.control` can size itself to the same decision.
2561
+ */
2562
+ layout?: TMDataGridFilterPanelLayout;
2563
+ };
2327
2564
  /**
2328
2565
  * The MUI-style filter surface: one row per active column filter, each row a
2329
- * column / operator / value triple. It only ever reads and writes the table's
2330
- * `columnFilters` state, so a `manualFiltering` grid gets the same panel for
2331
- * free - the state is forwarded to the server instead of a row model.
2566
+ * column / operator / value triple, over an "Add filter" / "Clear all" footer.
2567
+ *
2568
+ * A plain block of controls, the way `TMDataGrid.ColumnsPanel` is - it renders
2569
+ * whenever it is mounted and knows nothing about floating. The chrome that
2570
+ * makes a floating surface (a title, a close button, click-away, Escape)
2571
+ * belongs to the popup and the sidebar, so this can equally be dropped into a
2572
+ * drawer, a page column or a form. See the `filters.surface` option.
2573
+ *
2574
+ * It only ever reads and writes the table's `columnFilters` state, so a
2575
+ * `manualFiltering` grid gets the same panel for free - the state is forwarded
2576
+ * to the server instead of a row model.
2332
2577
  */
2333
- declare function TMDataGridFilterPanel(): import("react").JSX.Element | null;
2578
+ declare function TMDataGridFilterPanel({ layout }?: TMDataGridFilterPanelProps): import("react").JSX.Element;
2334
2579
  //#endregion
2335
2580
  //#region .types-tmp/components/TMDataGridFilterPills.d.ts
2336
2581
  type TMDataGridFilterPillsProps<TData extends RowData> = {
@@ -2421,6 +2666,12 @@ type TMDataGridPaginationControls = {
2421
2666
  PageSize: () => ReactNode;
2422
2667
  /** The "1–25 of 300" range label. */
2423
2668
  Range: () => ReactNode;
2669
+ /**
2670
+ * The "Page 3 of 200" label - what a server-paged grid usually shows in
2671
+ * place of a row range. Not in the default footer; put it in a
2672
+ * `renderPagination` layout.
2673
+ */
2674
+ PageNumber: () => ReactNode;
2424
2675
  /** The previous/next buttons. */
2425
2676
  Pager: () => ReactNode;
2426
2677
  };
@@ -2447,7 +2698,7 @@ type TMDataGridFooterProps = {
2447
2698
  * renderPagination={({ state, actions, Controls }) => (
2448
2699
  * <Group>
2449
2700
  * <Controls.PageSize />
2450
- * <MyJumpToPage page={state.pageIndex} onJump={actions.setPageIndex} />
2701
+ * <Controls.PageNumber />
2451
2702
  * <Controls.Pager />
2452
2703
  * </Group>
2453
2704
  * )}
@@ -2931,13 +3182,22 @@ declare function TMDataGridLoadingIndicator(): import("react").JSX.Element | nul
2931
3182
  /**
2932
3183
  * Visible rows over total rows. On a server-driven grid, set
2933
3184
  * `meta.totalRowCount` for the denominator - the client never sees every row.
3185
+ * Without it the count is rendered alone, since the fallback denominator would
3186
+ * be the rows the server sent for the current page: a plausible-looking wrong
3187
+ * total, and on an unfiltered first page the same number twice.
2934
3188
  */
2935
3189
  declare function TMDataGridSummaryCount({ children }: {
2936
3190
  children?: ReactNode;
2937
3191
  }): import("react").JSX.Element;
2938
3192
  /**
2939
- * Toggles the filter panel, seeding a filter row on the first filterable column.
2940
- * Renders nothing when no column can be filtered (`enableColumnFilters: false`).
3193
+ * Toggles the grid's filter surface - the popup or the sidebar, whichever
3194
+ * `filters.surface` names - seeding a filter row on the first filterable
3195
+ * column. The count of active filters tints it.
3196
+ *
3197
+ * Renders nothing when no column can be filtered (`enableColumnFilters:
3198
+ * false`), and nothing under `filters.surface: "none"`, where there is no
3199
+ * automatic surface for it to toggle. Read `ui.state.filterPanelOpen` and
3200
+ * render your own control if a hand-placed panel wants one.
2941
3201
  */
2942
3202
  declare function TMDataGridFilterButton(): import("react").JSX.Element | null;
2943
3203
  //#endregion
@@ -2991,7 +3251,7 @@ type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
2991
3251
  * </TMDataGrid>
2992
3252
  * ```
2993
3253
  */
2994
- declare function TMDataGridRoot<TData extends RowData>({ table, ui, edit, features, labels, renderDetails, renderDetailsEstHeight, overscan, resetSettings, scrollToRow, scrollerRef, size, children, className, style, id, "data-testid": testId }: TMDataGridProps<TData>): import("react").JSX.Element;
3254
+ declare function TMDataGridRoot<TData extends RowData>({ table, ui, edit, features, filters, labels, renderDetails, renderDetailsEstHeight, overscan, resetSettings, scrollToRow, scrollerRef, size, children, className, style, id, "data-testid": testId }: TMDataGridProps<TData>): import("react").JSX.Element;
2995
3255
  declare const TMDataGrid: typeof TMDataGridRoot & {
2996
3256
  Toolbar: typeof TMDataGridToolbar;
2997
3257
  Spacer: typeof TMDataGridToolbarSpacer;
@@ -3047,15 +3307,18 @@ declare function formatGroupValue(value: unknown, blankLabel?: string): string;
3047
3307
  //#endregion
3048
3308
  //#region .types-tmp/components/filters/TMDataGridFilterValueInput.d.ts
3049
3309
  /**
3050
- * The built-in value control of a filter-panel row - what renders when a
3051
- * column declares no `meta.filter.control`. Shaped by the operator: a
3052
- * multi-select for the set operators, a From/To pair for `between`, a Yes/No
3053
- * dropdown for booleans, a typed input otherwise.
3310
+ * The built-in value control of a filter row - what renders when a column
3311
+ * declares no `meta.filter.control`. Shaped by the operator: a multi-select
3312
+ * for the set operators, a From/To pair for `between`, a Yes/No dropdown for
3313
+ * booleans, a typed input otherwise.
3314
+ *
3315
+ * Shaped by `layout` as well: in a header cell the fields drop their labels,
3316
+ * fill the column's width and name themselves through `aria-label`.
3054
3317
  *
3055
3318
  * Exported so a custom control can fall back to it for the operators it does
3056
3319
  * not care about, instead of rebuilding them.
3057
3320
  */
3058
- declare function TMDataGridFilterValueInput({ column, operator, value, onChange, options, size, labels }: TMDataGridFilterControlArgs): import("react").JSX.Element;
3321
+ declare function TMDataGridFilterValueInput(args: TMDataGridFilterControlArgs): import("react").JSX.Element;
3059
3322
  //#endregion
3060
3323
  //#region .types-tmp/components/filters/DgRangeSliderFilter.d.ts
3061
3324
  /**
@@ -3493,4 +3756,4 @@ declare function getSelectableRowIds<TData extends RowData>(row: Row<TMDataGridF
3493
3756
  */
3494
3757
  declare function resolveRowSelectionClick<TData extends RowData>({ rows, rowId, anchorRowId, modifiers, selection, canReplaceSelection }: ResolveRowSelectionClickArgs<TData>): ResolvedRowSelection;
3495
3758
  //#endregion
3496
- export { type BuildCellMatrixArgs, type ColumnStepArgs, DATA_STATE_SLICES, DEFAULT_CELL_EXPORT_OPTIONS, DEFAULT_TMDATAGRID_SIZE, DETAILS_COLUMN_ID, DgAutocompleteFilter, DgDateRangeFilter, DgRangeSliderFilter, DgTriStateFilter, EDIT_COLUMN_ID, FILTER_OPERATOR_LABELS, GROUP_COLUMN_ID, type MoveColumnArgs, PERSIST_PAYLOAD_VERSION, ROW_NUMBER_COLUMN_ID, type ResolveCellMoveArgs, type ResolveRangeBoundsArgs, type ResolveRowSelectionClickArgs, type ResolvedRowSelection, SELECT_COLUMN_ID, SETTINGS_STATE_SLICES, SIZE_CONTROL_SIZE, SIZE_ROW_HEIGHT, TMDATAGRID_LABELS_EN, TMDATAGRID_LABELS_SV, TMDataGrid, type TMDataGridAddRowsOptions, type TMDataGridAddRowsResult, type TMDataGridAggregationName, type TMDataGridApi, TMDataGridBooleanEditor, type TMDataGridCapabilities, type TMDataGridCellCoords, type TMDataGridCellEventArgs, type TMDataGridCellExportOptions, type TMDataGridCellMatrix, type TMDataGridCellNav, type TMDataGridCellPosition, type TMDataGridCellRange, type TMDataGridCellSelectionMode, type TMDataGridColumnCapabilities, type TMDataGridColumnEditOptions, type TMDataGridColumnFilterOptions, type TMDataGridColumnLayout, type TMDataGridColumnMenuItemsArgs, type TMDataGridColumnMenuItemsRenderer, type TMDataGridColumnMeta, type TMDataGridColumnRegion, type TMDataGridColumnType, type TMDataGridContextValue, type TMDataGridDataSlice, TMDataGridDateEditor, type TMDataGridDetailsArgs, type TMDataGridDetailsRenderer, TMDataGridDraftActions, type TMDataGridDraftActionsActions, type TMDataGridDraftActionsControls, type TMDataGridDraftActionsProps, type TMDataGridDraftActionsSlotArgs, type TMDataGridDraftActionsState, type TMDataGridDropSide, type TMDataGridEditApi, type TMDataGridEditChange, type TMDataGridEditCommitArgs, type TMDataGridEditCommitDraftsArgs, type TMDataGridEditField, type TMDataGridEditMode, type TMDataGridEditRowProjection, type TMDataGridEditRowSnapshot, type TMDataGridEditState, type TMDataGridEditValueMap, type TMDataGridEditValueMapArgs, type TMDataGridEditingOptions, type TMDataGridEditorArgs, type TMDataGridEditorComponent, type TMDataGridExpandAllArgs, type TMDataGridExpandTarget, type TMDataGridFeatureFlags, type TMDataGridFeatures, type TMDataGridFieldValidate, type TMDataGridFilterControlArgs, type TMDataGridFilterControlComponent, type TMDataGridFilterOperator, TMDataGridFilterPills, type TMDataGridFilterPillsProps, type TMDataGridFilterValue, TMDataGridFilterValueInput, type TMDataGridFooterProps, type TMDataGridLabels, type TMDataGridLabelsOverride, type TMDataGridMenuColumnsProps, type TMDataGridMenuProps, TMDataGridMultiSelectEditor, TMDataGridNumberEditor, type TMDataGridOption, type TMDataGridOptionsArgs, type TMDataGridOptionsSource, type TMDataGridPaginationActions, type TMDataGridPaginationApi, type TMDataGridPaginationControls, type TMDataGridPaginationSlotArgs, type TMDataGridPaginationState, type TMDataGridPersistKey, type TMDataGridPersistence, type TMDataGridProps, type TMDataGridQuickSearchMode, type TMDataGridRangeBounds, type TMDataGridRowAddArgs, type TMDataGridRowClickModifiers, type TMDataGridRowContextMenuArgs, type TMDataGridRowContextMenuRenderer, type TMDataGridRowData, type TMDataGridRowDeleteArgs, type TMDataGridRowEditForm, type TMDataGridRowStyle, type TMDataGridRowValidators, type TMDataGridSaveDraftsArgs, type TMDataGridSaveDraftsResult, type TMDataGridSaveOutcomes, type TMDataGridScrollAlign, type TMDataGridScrollToRowArgs, TMDataGridSearch, type TMDataGridSearchProps, TMDataGridSelectEditor, type TMDataGridSelectionMode, type TMDataGridSettingsSlice, type TMDataGridSize, type TMDataGridStorageMode, TMDataGridStringEditor, type TMDataGridTable, type TMDataGridTableMeta, type TMDataGridTableProps, type TMDataGridTableValidateArgs, type TMDataGridTableValidators, type TMDataGridUiActions, type TMDataGridUiState, type TMDataGridUiStore, type UseTMDataGridOptions, aggregateColumn, areAllRowsExpanded, autosizeColumn, boundsCellCount, boundsEdges, buildCellMatrix, buildGridCellMatrix, clearedValueForType, createTMDataGridColumnHelper, downloadTextFile, emptyValueForOperator, exportGridToCsv, formatExportValue, formatFilterLabel, formatGroupValue, fuzzyGlobalFilterFn, getColumnCapabilities, getColumnDefaultOperator, getColumnFilterControl, getColumnLabel, getColumnRegion, getColumnType, getDefaultOperator, getDisplayedRows, getEditFieldName, getGridCapabilities, getGroupDataRows, getOperatorsForType, getSelectableRowIds, getStepTargetColumn, getTMDataGridPaginationApi, isColumnEditableForRow, isColumnReorderable, isControlColumn, isFilterActive, isGeneratedColumn, isPagingActive, isSameCell, isWithinBounds, keepGeneratedColumnsOutermost, measureColumnContentWidth, mergeLabels, moveColumn, moveColumnByStep, normalizeFieldValidate, openColumnFilter, operatorNeedsValue, operatorTakesArrayValue, operatorTakesRangeValue, optionsToComboboxData, readFeatureFlags, resolveCellMove, resolveColumnOptions, resolveExpandAll, resolveRangeBounds, resolveRowSelectionClick, tmDataGridFeatures, toClipboardText, toExcelCsv, useTMDataGrid, useTMDataGridContext, writeClipboardText };
3759
+ export { type BuildCellMatrixArgs, type ColumnStepArgs, DATA_STATE_SLICES, DEFAULT_CELL_EXPORT_OPTIONS, DEFAULT_TMDATAGRID_SIZE, DETAILS_COLUMN_ID, DgAutocompleteFilter, DgDateRangeFilter, DgRangeSliderFilter, DgTriStateFilter, EDIT_COLUMN_ID, FILTER_OPERATOR_LABELS, GROUP_COLUMN_ID, type MoveColumnArgs, PERSIST_PAYLOAD_VERSION, ROW_NUMBER_COLUMN_ID, type ResolveCellMoveArgs, type ResolveRangeBoundsArgs, type ResolveRowSelectionClickArgs, type ResolvedRowSelection, SELECT_COLUMN_ID, SETTINGS_STATE_SLICES, SIZE_CONTROL_SIZE, SIZE_ROW_HEIGHT, TMDATAGRID_LABELS_EN, TMDATAGRID_LABELS_SV, TMDataGrid, type TMDataGridAddRowsOptions, type TMDataGridAddRowsResult, type TMDataGridAggregationName, type TMDataGridApi, TMDataGridBooleanEditor, type TMDataGridCapabilities, type TMDataGridCellCoords, type TMDataGridCellEventArgs, type TMDataGridCellExportOptions, type TMDataGridCellMatrix, type TMDataGridCellNav, type TMDataGridCellPosition, type TMDataGridCellRange, type TMDataGridCellSelectionMode, type TMDataGridColumnCapabilities, type TMDataGridColumnEditOptions, type TMDataGridColumnFilter, type TMDataGridColumnFilterOptions, type TMDataGridColumnLayout, type TMDataGridColumnMenuItemsArgs, type TMDataGridColumnMenuItemsRenderer, type TMDataGridColumnMeta, type TMDataGridColumnRegion, type TMDataGridColumnType, type TMDataGridContextValue, type TMDataGridDataSlice, TMDataGridDateEditor, type TMDataGridDetailsArgs, type TMDataGridDetailsRenderer, TMDataGridDraftActions, type TMDataGridDraftActionsActions, type TMDataGridDraftActionsControls, type TMDataGridDraftActionsProps, type TMDataGridDraftActionsSlotArgs, type TMDataGridDraftActionsState, type TMDataGridDropSide, type TMDataGridEditApi, type TMDataGridEditChange, type TMDataGridEditCommitArgs, type TMDataGridEditCommitDraftsArgs, type TMDataGridEditField, type TMDataGridEditMode, type TMDataGridEditRowProjection, type TMDataGridEditRowSnapshot, type TMDataGridEditState, type TMDataGridEditValueMap, type TMDataGridEditValueMapArgs, type TMDataGridEditingOptions, type TMDataGridEditorArgs, type TMDataGridEditorComponent, type TMDataGridExpandAllArgs, type TMDataGridExpandTarget, type TMDataGridFeatureFlags, type TMDataGridFeatures, type TMDataGridFieldValidate, type TMDataGridFilterControlArgs, type TMDataGridFilterControlComponent, type TMDataGridFilterControlLayout, type TMDataGridFilterOperator, type TMDataGridFilterPanelLayout, type TMDataGridFilterPanelProps, TMDataGridFilterPills, type TMDataGridFilterPillsProps, type TMDataGridFilterSidebarSide, type TMDataGridFilterSurface, type TMDataGridFilterValue, TMDataGridFilterValueInput, type TMDataGridFilterValueShape, type TMDataGridFiltersOptions, type TMDataGridFiltersSettings, type TMDataGridFooterProps, type TMDataGridLabels, type TMDataGridLabelsOverride, type TMDataGridMenuColumnsProps, type TMDataGridMenuProps, TMDataGridMultiSelectEditor, TMDataGridNumberEditor, type TMDataGridOption, type TMDataGridOptionsArgs, type TMDataGridOptionsSource, type TMDataGridPaginationActions, type TMDataGridPaginationApi, type TMDataGridPaginationControls, type TMDataGridPaginationSlotArgs, type TMDataGridPaginationState, type TMDataGridPersistKey, type TMDataGridPersistence, type TMDataGridProps, type TMDataGridQuickSearchMode, type TMDataGridRangeBounds, type TMDataGridRowAddArgs, type TMDataGridRowClickModifiers, type TMDataGridRowContextMenuArgs, type TMDataGridRowContextMenuRenderer, type TMDataGridRowData, type TMDataGridRowDeleteArgs, type TMDataGridRowEditForm, type TMDataGridRowStyle, type TMDataGridRowValidators, type TMDataGridSaveDraftsArgs, type TMDataGridSaveDraftsResult, type TMDataGridSaveOutcomes, type TMDataGridScrollAlign, type TMDataGridScrollToRowArgs, TMDataGridSearch, type TMDataGridSearchProps, TMDataGridSelectEditor, type TMDataGridSelectionMode, type TMDataGridSettingsSlice, type TMDataGridSize, type TMDataGridStorageMode, TMDataGridStringEditor, type TMDataGridTable, type TMDataGridTableMeta, type TMDataGridTableProps, type TMDataGridTableValidateArgs, type TMDataGridTableValidators, type TMDataGridUiActions, type TMDataGridUiState, type TMDataGridUiStore, type UseTMDataGridOptions, activeColumnFilters, aggregateColumn, areAllRowsExpanded, autosizeColumn, boundsCellCount, boundsEdges, buildCellMatrix, buildGridCellMatrix, clearedValueForType, createTMDataGridColumnHelper, downloadTextFile, emptyValueForOperator, exportGridToCsv, filterValueShape, formatExportValue, formatFilterLabel, formatGroupValue, fuzzyGlobalFilterFn, getColumnCapabilities, getColumnDefaultOperator, getColumnFilterControl, getColumnLabel, getColumnRegion, getColumnType, getDefaultOperator, getDisplayedRows, getEditFieldName, getGridCapabilities, getGroupDataRows, getOperatorsForType, getSelectableRowIds, getStepTargetColumn, getTMDataGridPaginationApi, isColumnEditableForRow, isColumnReorderable, isControlColumn, isFilterActive, isGeneratedColumn, isPagingActive, isSameCell, isWithinBounds, keepGeneratedColumnsOutermost, measureColumnContentWidth, mergeLabels, moveColumn, moveColumnByStep, normalizeFieldValidate, openColumnFilter, operatorNeedsValue, operatorTakesArrayValue, operatorTakesRangeValue, optionsToComboboxData, readFeatureFlags, resolveCellMove, resolveColumnOptions, resolveExpandAll, resolveRangeBounds, resolveRowSelectionClick, tmDataGridFeatures, toClipboardText, toExcelCsv, useTMDataGrid, useTMDataGridContext, writeClipboardText };