@kanunilabs/datagrid-react 1.7.0 → 1.8.1
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.
- package/dist/index.cjs +3 -3
- package/dist/index.d.cts +223 -20
- package/dist/index.d.ts +223 -20
- package/dist/index.js +3 -3
- package/dist/styles.css +305 -4
- package/package.json +2 -2
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, RefObject } from 'react';
|
|
3
|
-
import { GridRowData, DataGridController,
|
|
3
|
+
import { GridRowData, DataGridController, GridDataType, RowKey, LookupItem, GridDictionary, StateStoringConfig, RowNode, GridColumnDef, DataGridCoreConfig, FilterRenderContextBase, FilterNode, InferColumnsOptions, GridThemeName, GridPaletteName, DescribeFilterOptions, GridDensity, CardViewOptions, EditMode, RowChange, ColumnRuntime, ColumnLayout, SortDescriptor, ColumnModel, DataRowNode, ColSpanPlan, SummaryDef, ToolbarIconName, ColumnState, BusyPhase, VirtualWindow, ChartBoxSpec, ChartBoxModel, ChartSpec, ChartModel, ChartXYSpec, ChartXYModel, CellRange, RangeSelectionEngine, ColumnSelectMode, EditingEngine, ValidationRule, CrudHandlers, EditingPermissions, NewRowPosition, RowEditSession, LookupMatchMode } from '@kanunilabs/datagrid-core';
|
|
4
4
|
export { BusyChangedEvent, BusyPhase, ClientRowModel, ColumnLayout, ColumnLookup, ColumnModel, ColumnPin, ColumnRuntime, ColumnState, ColumnStateChangedEvent, ContentReadyEvent, CustomFilterOperator, CustomFilterOperatorId, DEFAULT_ROW_HEIGHT, DENSITY_ROW_HEIGHT, DataGridController, DataGridCoreConfig, DataRowNode, DataSource, FilterChangedEvent, FilterCondition, FilterGroupNode, FilterNode, FilterOperator, FocusedRowChangedEvent, GRID_COLOR_SCHEMES, GRID_PALETTES, GRID_THEMES, GridColorScheme, GridColumnDef, GridDataType, GridDensity, GridEventMap, GridPalette, GridPaletteName, GridRowData, GridStateStore, GridTheme, GridThemeName, GridViewState, GroupRowNode, GroupingConfig, HeaderBandCell, InferColumnsOptions, LoadOptions, LoadResult, LookupItem, NewRowPosition, RowDropPosition, RowKey, RowNode, SUMMARY_TYPE_LABEL, ScrollingConfig, SelectionDescriptor, SortChangedEvent, SortDescriptor, SortDirection, StateStoringConfig, SummaryDef, SummaryType, THEME_ROW_HEIGHT, ViewportChangedEvent, VirtualWindow, VirtualWindowEngine, allowedSummaryTypes, andFilters, attachStateStoring, bandDepth, bandPath, computeColumnLayout, computeHeaderBands, createRestDataSource, describeFilter, downloadBlob, fillText, filterInputFromNode, formatSummaryValue, humanizeField, importCsv, inferColumns, isDataRow, isDataSource, isFilterGroup, isGroupRow, isPackagedTheme, lookupLabel, moveRowInArray, parseCsv, parseFilterInput, sniffDelimiter, summaryKey, summaryLabel, summaryTypeLabels, themeClassName } from '@kanunilabs/datagrid-core';
|
|
5
5
|
|
|
6
6
|
/** Formats an export menu can offer. */
|
|
@@ -20,6 +20,86 @@ interface ExportOutcome {
|
|
|
20
20
|
*/
|
|
21
21
|
declare function runGridExport<TRow = GridRowData>(controller: DataGridController<TRow>, kind: ExportKind): Promise<ExportOutcome>;
|
|
22
22
|
|
|
23
|
+
/**
|
|
24
|
+
* Lookup items per column of the open row.
|
|
25
|
+
* `undefined` = not a lookup column · `null` = loading · array = ready.
|
|
26
|
+
*/
|
|
27
|
+
type RowLookupMap = Record<string, readonly LookupItem[] | null | undefined>;
|
|
28
|
+
interface EditFormField<TRow = GridRowData> {
|
|
29
|
+
columnId: string;
|
|
30
|
+
label: string;
|
|
31
|
+
dataType: GridDataType | undefined;
|
|
32
|
+
def: ReactGridColumnDef<TRow> | undefined;
|
|
33
|
+
/** False for a column the permissions do not allow on this row. */
|
|
34
|
+
editable: boolean;
|
|
35
|
+
}
|
|
36
|
+
interface GridEditFormProps<TRow = GridRowData> {
|
|
37
|
+
rowKey: RowKey;
|
|
38
|
+
fields: readonly EditFormField<TRow>[];
|
|
39
|
+
/** Current (pending) value per column. */
|
|
40
|
+
getValue: (columnId: string) => unknown;
|
|
41
|
+
/** Validation message per column id; only invalid columns appear. */
|
|
42
|
+
errors: Record<string, string>;
|
|
43
|
+
/**
|
|
44
|
+
* Lookup combos per column (Enterprise). A column absent from the map gets
|
|
45
|
+
* no list; omitted entirely, no field is a combo.
|
|
46
|
+
*/
|
|
47
|
+
lookups?: RowLookupMap;
|
|
48
|
+
/**
|
|
49
|
+
* Let a column's `renderEditor` draw its field (Enterprise). Default false:
|
|
50
|
+
* the field shows the value read-only instead.
|
|
51
|
+
*/
|
|
52
|
+
customEditors?: boolean;
|
|
53
|
+
/** The row with pending edits applied — what a custom editor should read. */
|
|
54
|
+
row: TRow | undefined;
|
|
55
|
+
/** True while the save is in flight; the form goes read-only. */
|
|
56
|
+
saving: boolean;
|
|
57
|
+
/** Shown above the fields when the last save was rejected. */
|
|
58
|
+
saveError?: string | null;
|
|
59
|
+
isNew: boolean;
|
|
60
|
+
dark?: boolean;
|
|
61
|
+
/** Rendered as a modal dialog rather than inline. */
|
|
62
|
+
popup?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Drawn INSIDE the grid, in the row flow (`mode: 'form'`, gap D5a).
|
|
65
|
+
*
|
|
66
|
+
* Only changes the chrome: a panel that already sits in a row slot needs no
|
|
67
|
+
* outer margin, drop shadow or rounded corners — those exist to lift a
|
|
68
|
+
* floating panel off the page, and here they would draw a second card
|
|
69
|
+
* inside the one the row already is.
|
|
70
|
+
*/
|
|
71
|
+
inline?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Reports the height the form WANTS, in px, once it is in the DOM.
|
|
74
|
+
*
|
|
75
|
+
* The in-grid form is given a slot measured in whole rows, so somebody has
|
|
76
|
+
* to decide how many. Measured here because this is where the DOM is, and
|
|
77
|
+
* measured through the scrolling field area — `scrollHeight` is the content,
|
|
78
|
+
* `clientHeight` the space it was given — so the answer does not depend on
|
|
79
|
+
* the slot already assigned. Reading the panel's own height instead would
|
|
80
|
+
* feed the current slot straight back in and never converge.
|
|
81
|
+
*/
|
|
82
|
+
onNaturalHeight?: (px: number) => void;
|
|
83
|
+
labels?: Partial<EditFormLabels>;
|
|
84
|
+
onChange: (columnId: string, value: unknown) => void;
|
|
85
|
+
onSave: () => void;
|
|
86
|
+
onCancel: () => void;
|
|
87
|
+
}
|
|
88
|
+
interface EditFormLabels {
|
|
89
|
+
save: string;
|
|
90
|
+
cancel: string;
|
|
91
|
+
editTitle: string;
|
|
92
|
+
addTitle: string;
|
|
93
|
+
saving: string;
|
|
94
|
+
/** Hint under the buttons. `{key}` is replaced with Ctrl or ⌘. */
|
|
95
|
+
shortcut: string;
|
|
96
|
+
}
|
|
97
|
+
/** The captions in one language. */
|
|
98
|
+
declare function editFormLabels(t: GridDictionary): EditFormLabels;
|
|
99
|
+
/** English, kept as the constant this package already exported. */
|
|
100
|
+
declare const DEFAULT_EDIT_FORM_LABELS: EditFormLabels;
|
|
101
|
+
declare function GridEditForm<TRow = GridRowData>({ rowKey, fields, getValue, errors, lookups, customEditors, row, saving, saveError, isNew, dark, popup, inline, onNaturalHeight, labels: labelOverrides, onChange, onSave, onCancel, }: GridEditFormProps<TRow>): react.JSX.Element;
|
|
102
|
+
|
|
23
103
|
declare function useStateStoring<TRow = GridRowData>(controller: DataGridController<TRow>, config: StateStoringConfig | undefined): void;
|
|
24
104
|
|
|
25
105
|
interface PrintLayoutOptions {
|
|
@@ -407,20 +487,43 @@ interface RowMenuContext<TRow = GridRowData> {
|
|
|
407
487
|
/** Selected row keys at the moment the menu opened. */
|
|
408
488
|
selectedKeys: RowKey[];
|
|
409
489
|
}
|
|
410
|
-
/**
|
|
490
|
+
/** Editing in the Community grid — see `DataGridProps.editing`. */
|
|
411
491
|
interface DataGridEditingOptions<TRow = GridRowData> {
|
|
412
492
|
/** Default true once `editing` is given. */
|
|
413
493
|
enabled?: boolean;
|
|
414
494
|
/**
|
|
415
|
-
*
|
|
416
|
-
*
|
|
495
|
+
* How edits are made and saved. Default `'cell'` here (`EnterpriseDataGrid`
|
|
496
|
+
* defaults to `'batch'`); all five are free since 2026-10-16.
|
|
497
|
+
*
|
|
498
|
+
* - `'cell'` — one cell at a time, saved on commit.
|
|
499
|
+
* - `'batch'` — edits collect (marked with a corner triangle) and are saved
|
|
500
|
+
* together from the Save button above the grid, or dropped with Cancel.
|
|
501
|
+
* - `'row'` — double-click (or "Edit row…" in the row menu) opens the whole
|
|
502
|
+
* row in place; Enter or Save saves it, Escape or Cancel drops it.
|
|
503
|
+
* - `'form'` — the row opens as a form under it, in the grid.
|
|
504
|
+
* - `'popup'` — the row opens as a form in a dialog over the grid.
|
|
505
|
+
*
|
|
506
|
+
* In every mode but `'cell'` the grid does not change your data itself:
|
|
507
|
+
* `onSave` receives the changes and the app writes them (then updates
|
|
508
|
+
* `dataSource`).
|
|
417
509
|
*/
|
|
418
|
-
mode?:
|
|
510
|
+
mode?: EditMode;
|
|
419
511
|
/**
|
|
420
|
-
* Persist one committed cell
|
|
421
|
-
*
|
|
512
|
+
* Persist changes: one committed cell in `'cell'` mode, every pending row in
|
|
513
|
+
* `'batch'`, the open row in `'row'`/`'form'`/`'popup'`. A rejected promise is
|
|
514
|
+
* reported in the grid and the edits stay.
|
|
422
515
|
*/
|
|
423
516
|
onSave?: (changes: RowChange<TRow>[]) => Promise<void> | void;
|
|
517
|
+
/**
|
|
518
|
+
* Wording for the form/popup editor (`mode: 'form' | 'popup'`) — the buttons,
|
|
519
|
+
* the title and the shortcut hint.
|
|
520
|
+
*/
|
|
521
|
+
formLabels?: Partial<EditFormLabels>;
|
|
522
|
+
/**
|
|
523
|
+
* Starting height in px for the in-grid form (`mode: 'form'`), before it has
|
|
524
|
+
* been measured. Only worth setting to stop the one-frame resize on open.
|
|
525
|
+
*/
|
|
526
|
+
formHeight?: number;
|
|
424
527
|
/** Typing a printable character on a focused cell opens its editor. Default true. */
|
|
425
528
|
editOnKeyPress?: boolean;
|
|
426
529
|
/** Tab moves between cells inside the grid instead of leaving it. Default true. */
|
|
@@ -823,19 +926,24 @@ interface DataGridProps<TRow = GridRowData> extends Omit<DataGridCoreConfig<TRow
|
|
|
823
926
|
*/
|
|
824
927
|
onReady?: (controller: DataGridController<TRow>) => void;
|
|
825
928
|
/**
|
|
826
|
-
* Edit
|
|
929
|
+
* Edit data in the grid — single cells free since 2026-10-12, batch, row,
|
|
930
|
+
* form and popup editing free since 2026-10-16 (owner decision).
|
|
827
931
|
*
|
|
828
932
|
* Off unless this object is given (`editing={{ onSave }}`); `enabled: false`
|
|
829
|
-
* turns it off again.
|
|
830
|
-
* an editable column; Enter commits and moves
|
|
831
|
-
* editable cell, Esc cancels. Each committed cell
|
|
832
|
-
* passed to `onSave` — one call per edit — and
|
|
933
|
+
* turns it off again. In the default `'cell'` mode double-click, F2 or
|
|
934
|
+
* typing opens the editor on an editable column; Enter commits and moves
|
|
935
|
+
* down, Tab moves to the next editable cell, Esc cancels. Each committed cell
|
|
936
|
+
* is written to its row and passed to `onSave` — one call per edit — and
|
|
937
|
+
* `cellValueChanged` fires. `mode` switches to collecting edits (`'batch'`,
|
|
938
|
+
* with a Save / Cancel strip above the grid) or to editing a whole row at a
|
|
939
|
+
* time (`'row'`, `'form'`, `'popup'` — opened by double-click or "Edit row…"
|
|
940
|
+
* in the row menu); see `DataGridEditingOptions.mode`.
|
|
833
941
|
* A column with `editable: false`, a `lookup` or a `renderEditor` stays
|
|
834
|
-
* read-only here.
|
|
942
|
+
* read-only here, in every mode.
|
|
835
943
|
*
|
|
836
|
-
*
|
|
837
|
-
*
|
|
838
|
-
* selection, fill and paste are `EnterpriseDataGrid`.
|
|
944
|
+
* Validation rules, `crud` handlers, adding and deleting rows, per-row
|
|
945
|
+
* permissions, lookup and custom editors, the command column, undo/redo,
|
|
946
|
+
* range selection, fill and paste are `EnterpriseDataGrid`.
|
|
839
947
|
*/
|
|
840
948
|
editing?: DataGridEditingOptions<TRow>;
|
|
841
949
|
/** Replace a cell's content (e.g. with an editor). Return undefined for default. */
|
|
@@ -888,8 +996,9 @@ interface DataGridProps<TRow = GridRowData> extends Omit<DataGridCoreConfig<TRow
|
|
|
888
996
|
renderDetail?: (row: TRow) => ReactNode;
|
|
889
997
|
/**
|
|
890
998
|
* Body of the in-grid edit form (`mode: 'form'`), rendered in the row flow
|
|
891
|
-
* under the record it edits. Set by `EnterpriseDataGrid`; the
|
|
892
|
-
*
|
|
999
|
+
* under the record it edits. Set by `EnterpriseDataGrid`; the free grid's own
|
|
1000
|
+
* `editing.mode: 'form'` fills it when this is left empty. The form's
|
|
1001
|
+
* position and height come from `controller.setEditFormRow`.
|
|
893
1002
|
*/
|
|
894
1003
|
renderEditForm?: (rowKey: RowKey, row: TRow | undefined) => ReactNode;
|
|
895
1004
|
}
|
|
@@ -1499,6 +1608,12 @@ interface GridToolbarProps<TRow = GridRowData> {
|
|
|
1499
1608
|
declare function GridToolbarImpl<TRow = GridRowData>({ controller, search, exportCsv, exportExcel, exportPdf, columnChooser, dark, onOpenColumnChooser, itemsBefore, itemsAfter, searchDebounce, labels, }: GridToolbarProps<TRow>): react.JSX.Element;
|
|
1500
1609
|
declare const GridToolbar: typeof GridToolbarImpl;
|
|
1501
1610
|
|
|
1611
|
+
/** A command button's icon — the shared paths of `toolbarIcons.ts` (see there for why). */
|
|
1612
|
+
declare function ToolbarIcon({ name, size }: {
|
|
1613
|
+
name: ToolbarIconName;
|
|
1614
|
+
size?: number;
|
|
1615
|
+
}): react.JSX.Element;
|
|
1616
|
+
|
|
1502
1617
|
interface GridColumnChooserProps<TRow = GridRowData> {
|
|
1503
1618
|
controller: DataGridController<TRow>;
|
|
1504
1619
|
/** Passed in so the panel re-renders when visibility changes. */
|
|
@@ -1509,7 +1624,7 @@ interface GridColumnChooserProps<TRow = GridRowData> {
|
|
|
1509
1624
|
};
|
|
1510
1625
|
onClose: () => void;
|
|
1511
1626
|
dark?: boolean;
|
|
1512
|
-
labels?: Partial<Record<'title' | 'empty' | 'showAll' | 'ok', string>>;
|
|
1627
|
+
labels?: Partial<Record<'title' | 'empty' | 'search' | 'showAll' | 'ok', string>>;
|
|
1513
1628
|
}
|
|
1514
1629
|
declare function GridColumnChooser<TRow = GridRowData>({ controller, columns, anchor, onClose, dark, labels, }: GridColumnChooserProps<TRow>): react.JSX.Element;
|
|
1515
1630
|
|
|
@@ -2095,6 +2210,94 @@ interface UseGridEditingResult<TRow = GridRowData> {
|
|
|
2095
2210
|
}
|
|
2096
2211
|
declare function useGridEditing<TRow = GridRowData>(options: UseGridEditingOptions<TRow>): UseGridEditingResult<TRow>;
|
|
2097
2212
|
|
|
2213
|
+
interface UseEditModesOptions<TRow = GridRowData> {
|
|
2214
|
+
controller: DataGridController<TRow> | null;
|
|
2215
|
+
/** The editing layer the modes draw (`useGridEditing`'s result). */
|
|
2216
|
+
editing: UseGridEditingResult<TRow>;
|
|
2217
|
+
/** The mode in force. */
|
|
2218
|
+
mode: EditMode;
|
|
2219
|
+
/** Editing is on AND drawn (not paused behind cards). */
|
|
2220
|
+
active: boolean;
|
|
2221
|
+
/** The element the row editors are looked up in, to focus one on open. */
|
|
2222
|
+
rootRef: RefObject<HTMLElement | null>;
|
|
2223
|
+
/** The grid's row height in px — a form re-measure smaller than a row is noise. */
|
|
2224
|
+
rowHeight: number;
|
|
2225
|
+
/** Wording for the form/popup editor. */
|
|
2226
|
+
formLabels?: Partial<EditFormLabels>;
|
|
2227
|
+
/** Starting height in px for the in-grid form, before it is measured. */
|
|
2228
|
+
formHeight?: number;
|
|
2229
|
+
dark?: boolean;
|
|
2230
|
+
/** Lookup combos for the open row (Enterprise). */
|
|
2231
|
+
rowLookups?: RowLookupMap;
|
|
2232
|
+
/** A column's `renderEditor` draws its form field (Enterprise). */
|
|
2233
|
+
customEditors?: boolean;
|
|
2234
|
+
/** Columns that are not fields of the record (the command column). */
|
|
2235
|
+
isFormColumn?: (columnId: string) => boolean;
|
|
2236
|
+
/**
|
|
2237
|
+
* Offer the batch Save/Cancel pair in the strip. Default true. The
|
|
2238
|
+
* Enterprise grid shows it only for an explicit `mode: 'batch'` (its
|
|
2239
|
+
* default batch mode saves from the command column) and passes that here.
|
|
2240
|
+
*/
|
|
2241
|
+
batchBar?: boolean;
|
|
2242
|
+
}
|
|
2243
|
+
interface EditModes<TRow = GridRowData> {
|
|
2244
|
+
/** A row mode (row / form / popup) is in force and drawn. */
|
|
2245
|
+
rowModeActive: boolean;
|
|
2246
|
+
/** The open row, in a row mode; null otherwise. */
|
|
2247
|
+
rowSession: RowEditSession | null;
|
|
2248
|
+
/** True for the row drawn as editors in `row` mode. */
|
|
2249
|
+
isRowEditing: (rowKey: RowKey) => boolean;
|
|
2250
|
+
/** A value drawn the way the grid draws it (renderCell → lookup → formatter → date). */
|
|
2251
|
+
defaultContent: (ctx: CellSlotContext<TRow>, value: unknown) => ReactNode;
|
|
2252
|
+
/** The open row's cell in `row` mode: its editor, or its value when read-only. Undefined otherwise. */
|
|
2253
|
+
renderRowCell: (ctx: CellSlotContext<TRow>) => ReactNode | undefined;
|
|
2254
|
+
/** A cell's PENDING value (batch), drawn; undefined when it has none. */
|
|
2255
|
+
renderPending: (ctx: CellSlotContext<TRow>) => ReactNode | undefined;
|
|
2256
|
+
/** The grid's `renderEditForm` slot in `form` mode; undefined otherwise. */
|
|
2257
|
+
renderEditForm: ((rowKey: RowKey) => ReactNode) | undefined;
|
|
2258
|
+
/** The popup form (`popup` mode, a row open), or null. Unportaled. */
|
|
2259
|
+
popup: ReactNode;
|
|
2260
|
+
/** The row strip (`row` mode) and the batch Save/Cancel, or null when there is nothing to show. */
|
|
2261
|
+
bar: ReactNode;
|
|
2262
|
+
/** What `data-row-session` on the grid's wrapper says, for the pointer lock. */
|
|
2263
|
+
rowSessionAttr: 'form' | 'popup' | undefined;
|
|
2264
|
+
/** "Edit row…" for the row menu, or null when no row can be opened now. */
|
|
2265
|
+
editRowMenuItem: <TContext>(rowKey: RowKey) => GridMenuItem<TContext> | null;
|
|
2266
|
+
/** Open a row (double-click in a row mode). False when not a row mode. */
|
|
2267
|
+
openRow: (rowKey: RowKey) => boolean;
|
|
2268
|
+
}
|
|
2269
|
+
/**
|
|
2270
|
+
* The columns a record's form offers, in the grid's own order.
|
|
2271
|
+
*
|
|
2272
|
+
* Derived from the LAYOUT rather than the raw column list, so a column the
|
|
2273
|
+
* user hid stays out of the form too — offering a field nobody chose to see,
|
|
2274
|
+
* and saving a value from it, is an invisible change. The grid's own columns
|
|
2275
|
+
* (selection, the group column, row numbers) are never fields: with grouping
|
|
2276
|
+
* shown as a column the form offered an empty, disabled "Region › Country"
|
|
2277
|
+
* (pre-release review, 2026-10-16; the plain-JavaScript form already left
|
|
2278
|
+
* them out).
|
|
2279
|
+
*/
|
|
2280
|
+
declare function editFormColumnIds<TRow>(controller: DataGridController<TRow> | null, isFormColumn?: (columnId: string) => boolean): string[];
|
|
2281
|
+
declare function useEditModes<TRow = GridRowData>({ controller, editing, mode, active, rootRef, rowHeight, formLabels, formHeight: formHeightOption, dark, rowLookups, customEditors, isFormColumn, batchBar, }: UseEditModesOptions<TRow>): EditModes<TRow>;
|
|
2282
|
+
|
|
2283
|
+
interface GridRowEditorProps<TRow = GridRowData> {
|
|
2284
|
+
controller: DataGridController<TRow>;
|
|
2285
|
+
engine: EditingEngine<TRow>;
|
|
2286
|
+
columnId: string;
|
|
2287
|
+
/** This field's validation message, or null. */
|
|
2288
|
+
message: string | null;
|
|
2289
|
+
/** True while the row's save is in flight; the fields go read-only. */
|
|
2290
|
+
saving: boolean;
|
|
2291
|
+
/**
|
|
2292
|
+
* The column's lookup items (Enterprise) — `null` while loading. Undefined
|
|
2293
|
+
* draws the plain input.
|
|
2294
|
+
*/
|
|
2295
|
+
lookupOptions?: readonly LookupItem[] | null;
|
|
2296
|
+
onSave: () => void;
|
|
2297
|
+
onCancel: () => void;
|
|
2298
|
+
}
|
|
2299
|
+
declare function GridRowEditor<TRow = GridRowData>({ controller, engine, columnId, message, saving, lookupOptions, onSave, onCancel, }: GridRowEditorProps<TRow>): react.JSX.Element;
|
|
2300
|
+
|
|
2098
2301
|
interface GridCellEditorProps {
|
|
2099
2302
|
value: unknown;
|
|
2100
2303
|
dataType: GridDataType | undefined;
|
|
@@ -2208,4 +2411,4 @@ interface GridDialogProps {
|
|
|
2208
2411
|
}
|
|
2209
2412
|
declare function GridDialog({ open, title, message, cancelLabel, confirmLabel, danger, dark, onConfirm, onCancel, }: GridDialogProps): react.ReactPortal | null;
|
|
2210
2413
|
|
|
2211
|
-
export { type AlignedGridsApi, BAND_ROW_HEIGHT, type BatchSaveError, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type CellTooltipOptions, DEFAULT_HEADER_MENU_LABELS, DataGrid, type DataGridProps, type DistinctEntry, type EditorRenderContext, type ExportOutcome, type FilterRenderContext, GridCellEditor, type GridCellEditorProps, GridColumnChooser, type GridColumnChooserProps, GridContextMenu, type GridContextMenuProps, GridDateEditor, type GridDateEditorProps, GridDialog, type GridDialogProps, GridFilterPanel, type GridFilterPanelProps, GridFilterRow, type GridFilterRowProps, GridFooterRow, type GridFooterRowProps, GridGroupPanel, type GridGroupPanelProps, GridHeader, GridHeaderBands, type GridHeaderBandsProps, GridHeaderFilterPopup, type GridHeaderFilterPopupProps, type GridHeaderProps, GridLoadingOverlay, type GridLoadingOverlayProps, GridLookupEditor, type GridLookupEditorProps, type GridMenuItem, GridNoteEditor, type GridNotesConfig, GridPager, type GridPagerProps, GridPinnedRows, type GridPinnedRowsProps, GridPopupPanel, type GridPopupPanelProps, GridPortal, type GridPortalProps, GridRow, type GridRowProps, GridSummaryBar, type GridSummaryBarProps, GridSurfaceProvider, type GridSurfaceProviderProps, GridTextProvider, type GridTextProviderProps, GridToolbar, type GridToolbarProps, GridTooltip, type GridTooltipConfig, type GridTooltipProps, type HeaderMenuContext, type HeaderMenuDeps, type HeaderMenuLabels, type HeaderRenderContext, type NoteCellContext, PRINT_MAX_ROWS, type PendingDelete, type PrintLayoutOptions, type PrintLayoutState, ROW_DRAG_MIME, type RangeApi, type ReactColumnRuntime, type ReactGridColumnDef, type RowDragConfig, type RowDragHandlers, type RowDragPayload, type RowDropEvent, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, SHORTCUT_COPY, SHORTCUT_CUT, SHORTCUT_PASTE, type SelectionStats, type TooltipState, type UseDataGridOptions, type UseDataGridResult, type UseGridEditingOptions, type UseGridEditingResult, buildCellMenuItems, buildHeaderMenu, copyToClipboard, headerMenuLabels, matchOptions, measureBestFitWidth, reconcileFilterInputs, runGridExport, useAlignedGrids, useAnchoredPopup, useCellTooltip, useDataGrid, useGridChartBoxData, useGridChartData, useGridChartXYData, useGridEditing, useGridSurfaceClass, useGridText, usePrintLayout, useRowDrag, useStateStoring, writeClipboardText };
|
|
2414
|
+
export { type AlignedGridsApi, BAND_ROW_HEIGHT, type BatchSaveError, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type CellTooltipOptions, DEFAULT_EDIT_FORM_LABELS, DEFAULT_HEADER_MENU_LABELS, DataGrid, type DataGridProps, type DistinctEntry, type EditFormField, type EditFormLabels, type EditModes, type EditorRenderContext, type ExportOutcome, type FilterRenderContext, GridCellEditor, type GridCellEditorProps, GridColumnChooser, type GridColumnChooserProps, GridContextMenu, type GridContextMenuProps, GridDateEditor, type GridDateEditorProps, GridDialog, type GridDialogProps, GridEditForm, type GridEditFormProps, GridFilterPanel, type GridFilterPanelProps, GridFilterRow, type GridFilterRowProps, GridFooterRow, type GridFooterRowProps, GridGroupPanel, type GridGroupPanelProps, GridHeader, GridHeaderBands, type GridHeaderBandsProps, GridHeaderFilterPopup, type GridHeaderFilterPopupProps, type GridHeaderProps, GridLoadingOverlay, type GridLoadingOverlayProps, GridLookupEditor, type GridLookupEditorProps, type GridMenuItem, GridNoteEditor, type GridNotesConfig, GridPager, type GridPagerProps, GridPinnedRows, type GridPinnedRowsProps, GridPopupPanel, type GridPopupPanelProps, GridPortal, type GridPortalProps, GridRow, GridRowEditor, type GridRowEditorProps, type GridRowProps, GridSummaryBar, type GridSummaryBarProps, GridSurfaceProvider, type GridSurfaceProviderProps, GridTextProvider, type GridTextProviderProps, GridToolbar, type GridToolbarProps, GridTooltip, type GridTooltipConfig, type GridTooltipProps, type HeaderMenuContext, type HeaderMenuDeps, type HeaderMenuLabels, type HeaderRenderContext, type NoteCellContext, PRINT_MAX_ROWS, type PendingDelete, type PrintLayoutOptions, type PrintLayoutState, ROW_DRAG_MIME, type RangeApi, type ReactColumnRuntime, type ReactGridColumnDef, type RowDragConfig, type RowDragHandlers, type RowDragPayload, type RowDropEvent, type RowLookupMap, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, SHORTCUT_COPY, SHORTCUT_CUT, SHORTCUT_PASTE, type SelectionStats, ToolbarIcon, type TooltipState, type UseDataGridOptions, type UseDataGridResult, type UseEditModesOptions, type UseGridEditingOptions, type UseGridEditingResult, buildCellMenuItems, buildHeaderMenu, copyToClipboard, editFormColumnIds, editFormLabels, headerMenuLabels, matchOptions, measureBestFitWidth, reconcileFilterInputs, runGridExport, useAlignedGrids, useAnchoredPopup, useCellTooltip, useDataGrid, useEditModes, useGridChartBoxData, useGridChartData, useGridChartXYData, useGridEditing, useGridSurfaceClass, useGridText, usePrintLayout, useRowDrag, useStateStoring, writeClipboardText };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, RefObject } from 'react';
|
|
3
|
-
import { GridRowData, DataGridController,
|
|
3
|
+
import { GridRowData, DataGridController, GridDataType, RowKey, LookupItem, GridDictionary, StateStoringConfig, RowNode, GridColumnDef, DataGridCoreConfig, FilterRenderContextBase, FilterNode, InferColumnsOptions, GridThemeName, GridPaletteName, DescribeFilterOptions, GridDensity, CardViewOptions, EditMode, RowChange, ColumnRuntime, ColumnLayout, SortDescriptor, ColumnModel, DataRowNode, ColSpanPlan, SummaryDef, ToolbarIconName, ColumnState, BusyPhase, VirtualWindow, ChartBoxSpec, ChartBoxModel, ChartSpec, ChartModel, ChartXYSpec, ChartXYModel, CellRange, RangeSelectionEngine, ColumnSelectMode, EditingEngine, ValidationRule, CrudHandlers, EditingPermissions, NewRowPosition, RowEditSession, LookupMatchMode } from '@kanunilabs/datagrid-core';
|
|
4
4
|
export { BusyChangedEvent, BusyPhase, ClientRowModel, ColumnLayout, ColumnLookup, ColumnModel, ColumnPin, ColumnRuntime, ColumnState, ColumnStateChangedEvent, ContentReadyEvent, CustomFilterOperator, CustomFilterOperatorId, DEFAULT_ROW_HEIGHT, DENSITY_ROW_HEIGHT, DataGridController, DataGridCoreConfig, DataRowNode, DataSource, FilterChangedEvent, FilterCondition, FilterGroupNode, FilterNode, FilterOperator, FocusedRowChangedEvent, GRID_COLOR_SCHEMES, GRID_PALETTES, GRID_THEMES, GridColorScheme, GridColumnDef, GridDataType, GridDensity, GridEventMap, GridPalette, GridPaletteName, GridRowData, GridStateStore, GridTheme, GridThemeName, GridViewState, GroupRowNode, GroupingConfig, HeaderBandCell, InferColumnsOptions, LoadOptions, LoadResult, LookupItem, NewRowPosition, RowDropPosition, RowKey, RowNode, SUMMARY_TYPE_LABEL, ScrollingConfig, SelectionDescriptor, SortChangedEvent, SortDescriptor, SortDirection, StateStoringConfig, SummaryDef, SummaryType, THEME_ROW_HEIGHT, ViewportChangedEvent, VirtualWindow, VirtualWindowEngine, allowedSummaryTypes, andFilters, attachStateStoring, bandDepth, bandPath, computeColumnLayout, computeHeaderBands, createRestDataSource, describeFilter, downloadBlob, fillText, filterInputFromNode, formatSummaryValue, humanizeField, importCsv, inferColumns, isDataRow, isDataSource, isFilterGroup, isGroupRow, isPackagedTheme, lookupLabel, moveRowInArray, parseCsv, parseFilterInput, sniffDelimiter, summaryKey, summaryLabel, summaryTypeLabels, themeClassName } from '@kanunilabs/datagrid-core';
|
|
5
5
|
|
|
6
6
|
/** Formats an export menu can offer. */
|
|
@@ -20,6 +20,86 @@ interface ExportOutcome {
|
|
|
20
20
|
*/
|
|
21
21
|
declare function runGridExport<TRow = GridRowData>(controller: DataGridController<TRow>, kind: ExportKind): Promise<ExportOutcome>;
|
|
22
22
|
|
|
23
|
+
/**
|
|
24
|
+
* Lookup items per column of the open row.
|
|
25
|
+
* `undefined` = not a lookup column · `null` = loading · array = ready.
|
|
26
|
+
*/
|
|
27
|
+
type RowLookupMap = Record<string, readonly LookupItem[] | null | undefined>;
|
|
28
|
+
interface EditFormField<TRow = GridRowData> {
|
|
29
|
+
columnId: string;
|
|
30
|
+
label: string;
|
|
31
|
+
dataType: GridDataType | undefined;
|
|
32
|
+
def: ReactGridColumnDef<TRow> | undefined;
|
|
33
|
+
/** False for a column the permissions do not allow on this row. */
|
|
34
|
+
editable: boolean;
|
|
35
|
+
}
|
|
36
|
+
interface GridEditFormProps<TRow = GridRowData> {
|
|
37
|
+
rowKey: RowKey;
|
|
38
|
+
fields: readonly EditFormField<TRow>[];
|
|
39
|
+
/** Current (pending) value per column. */
|
|
40
|
+
getValue: (columnId: string) => unknown;
|
|
41
|
+
/** Validation message per column id; only invalid columns appear. */
|
|
42
|
+
errors: Record<string, string>;
|
|
43
|
+
/**
|
|
44
|
+
* Lookup combos per column (Enterprise). A column absent from the map gets
|
|
45
|
+
* no list; omitted entirely, no field is a combo.
|
|
46
|
+
*/
|
|
47
|
+
lookups?: RowLookupMap;
|
|
48
|
+
/**
|
|
49
|
+
* Let a column's `renderEditor` draw its field (Enterprise). Default false:
|
|
50
|
+
* the field shows the value read-only instead.
|
|
51
|
+
*/
|
|
52
|
+
customEditors?: boolean;
|
|
53
|
+
/** The row with pending edits applied — what a custom editor should read. */
|
|
54
|
+
row: TRow | undefined;
|
|
55
|
+
/** True while the save is in flight; the form goes read-only. */
|
|
56
|
+
saving: boolean;
|
|
57
|
+
/** Shown above the fields when the last save was rejected. */
|
|
58
|
+
saveError?: string | null;
|
|
59
|
+
isNew: boolean;
|
|
60
|
+
dark?: boolean;
|
|
61
|
+
/** Rendered as a modal dialog rather than inline. */
|
|
62
|
+
popup?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Drawn INSIDE the grid, in the row flow (`mode: 'form'`, gap D5a).
|
|
65
|
+
*
|
|
66
|
+
* Only changes the chrome: a panel that already sits in a row slot needs no
|
|
67
|
+
* outer margin, drop shadow or rounded corners — those exist to lift a
|
|
68
|
+
* floating panel off the page, and here they would draw a second card
|
|
69
|
+
* inside the one the row already is.
|
|
70
|
+
*/
|
|
71
|
+
inline?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Reports the height the form WANTS, in px, once it is in the DOM.
|
|
74
|
+
*
|
|
75
|
+
* The in-grid form is given a slot measured in whole rows, so somebody has
|
|
76
|
+
* to decide how many. Measured here because this is where the DOM is, and
|
|
77
|
+
* measured through the scrolling field area — `scrollHeight` is the content,
|
|
78
|
+
* `clientHeight` the space it was given — so the answer does not depend on
|
|
79
|
+
* the slot already assigned. Reading the panel's own height instead would
|
|
80
|
+
* feed the current slot straight back in and never converge.
|
|
81
|
+
*/
|
|
82
|
+
onNaturalHeight?: (px: number) => void;
|
|
83
|
+
labels?: Partial<EditFormLabels>;
|
|
84
|
+
onChange: (columnId: string, value: unknown) => void;
|
|
85
|
+
onSave: () => void;
|
|
86
|
+
onCancel: () => void;
|
|
87
|
+
}
|
|
88
|
+
interface EditFormLabels {
|
|
89
|
+
save: string;
|
|
90
|
+
cancel: string;
|
|
91
|
+
editTitle: string;
|
|
92
|
+
addTitle: string;
|
|
93
|
+
saving: string;
|
|
94
|
+
/** Hint under the buttons. `{key}` is replaced with Ctrl or ⌘. */
|
|
95
|
+
shortcut: string;
|
|
96
|
+
}
|
|
97
|
+
/** The captions in one language. */
|
|
98
|
+
declare function editFormLabels(t: GridDictionary): EditFormLabels;
|
|
99
|
+
/** English, kept as the constant this package already exported. */
|
|
100
|
+
declare const DEFAULT_EDIT_FORM_LABELS: EditFormLabels;
|
|
101
|
+
declare function GridEditForm<TRow = GridRowData>({ rowKey, fields, getValue, errors, lookups, customEditors, row, saving, saveError, isNew, dark, popup, inline, onNaturalHeight, labels: labelOverrides, onChange, onSave, onCancel, }: GridEditFormProps<TRow>): react.JSX.Element;
|
|
102
|
+
|
|
23
103
|
declare function useStateStoring<TRow = GridRowData>(controller: DataGridController<TRow>, config: StateStoringConfig | undefined): void;
|
|
24
104
|
|
|
25
105
|
interface PrintLayoutOptions {
|
|
@@ -407,20 +487,43 @@ interface RowMenuContext<TRow = GridRowData> {
|
|
|
407
487
|
/** Selected row keys at the moment the menu opened. */
|
|
408
488
|
selectedKeys: RowKey[];
|
|
409
489
|
}
|
|
410
|
-
/**
|
|
490
|
+
/** Editing in the Community grid — see `DataGridProps.editing`. */
|
|
411
491
|
interface DataGridEditingOptions<TRow = GridRowData> {
|
|
412
492
|
/** Default true once `editing` is given. */
|
|
413
493
|
enabled?: boolean;
|
|
414
494
|
/**
|
|
415
|
-
*
|
|
416
|
-
*
|
|
495
|
+
* How edits are made and saved. Default `'cell'` here (`EnterpriseDataGrid`
|
|
496
|
+
* defaults to `'batch'`); all five are free since 2026-10-16.
|
|
497
|
+
*
|
|
498
|
+
* - `'cell'` — one cell at a time, saved on commit.
|
|
499
|
+
* - `'batch'` — edits collect (marked with a corner triangle) and are saved
|
|
500
|
+
* together from the Save button above the grid, or dropped with Cancel.
|
|
501
|
+
* - `'row'` — double-click (or "Edit row…" in the row menu) opens the whole
|
|
502
|
+
* row in place; Enter or Save saves it, Escape or Cancel drops it.
|
|
503
|
+
* - `'form'` — the row opens as a form under it, in the grid.
|
|
504
|
+
* - `'popup'` — the row opens as a form in a dialog over the grid.
|
|
505
|
+
*
|
|
506
|
+
* In every mode but `'cell'` the grid does not change your data itself:
|
|
507
|
+
* `onSave` receives the changes and the app writes them (then updates
|
|
508
|
+
* `dataSource`).
|
|
417
509
|
*/
|
|
418
|
-
mode?:
|
|
510
|
+
mode?: EditMode;
|
|
419
511
|
/**
|
|
420
|
-
* Persist one committed cell
|
|
421
|
-
*
|
|
512
|
+
* Persist changes: one committed cell in `'cell'` mode, every pending row in
|
|
513
|
+
* `'batch'`, the open row in `'row'`/`'form'`/`'popup'`. A rejected promise is
|
|
514
|
+
* reported in the grid and the edits stay.
|
|
422
515
|
*/
|
|
423
516
|
onSave?: (changes: RowChange<TRow>[]) => Promise<void> | void;
|
|
517
|
+
/**
|
|
518
|
+
* Wording for the form/popup editor (`mode: 'form' | 'popup'`) — the buttons,
|
|
519
|
+
* the title and the shortcut hint.
|
|
520
|
+
*/
|
|
521
|
+
formLabels?: Partial<EditFormLabels>;
|
|
522
|
+
/**
|
|
523
|
+
* Starting height in px for the in-grid form (`mode: 'form'`), before it has
|
|
524
|
+
* been measured. Only worth setting to stop the one-frame resize on open.
|
|
525
|
+
*/
|
|
526
|
+
formHeight?: number;
|
|
424
527
|
/** Typing a printable character on a focused cell opens its editor. Default true. */
|
|
425
528
|
editOnKeyPress?: boolean;
|
|
426
529
|
/** Tab moves between cells inside the grid instead of leaving it. Default true. */
|
|
@@ -823,19 +926,24 @@ interface DataGridProps<TRow = GridRowData> extends Omit<DataGridCoreConfig<TRow
|
|
|
823
926
|
*/
|
|
824
927
|
onReady?: (controller: DataGridController<TRow>) => void;
|
|
825
928
|
/**
|
|
826
|
-
* Edit
|
|
929
|
+
* Edit data in the grid — single cells free since 2026-10-12, batch, row,
|
|
930
|
+
* form and popup editing free since 2026-10-16 (owner decision).
|
|
827
931
|
*
|
|
828
932
|
* Off unless this object is given (`editing={{ onSave }}`); `enabled: false`
|
|
829
|
-
* turns it off again.
|
|
830
|
-
* an editable column; Enter commits and moves
|
|
831
|
-
* editable cell, Esc cancels. Each committed cell
|
|
832
|
-
* passed to `onSave` — one call per edit — and
|
|
933
|
+
* turns it off again. In the default `'cell'` mode double-click, F2 or
|
|
934
|
+
* typing opens the editor on an editable column; Enter commits and moves
|
|
935
|
+
* down, Tab moves to the next editable cell, Esc cancels. Each committed cell
|
|
936
|
+
* is written to its row and passed to `onSave` — one call per edit — and
|
|
937
|
+
* `cellValueChanged` fires. `mode` switches to collecting edits (`'batch'`,
|
|
938
|
+
* with a Save / Cancel strip above the grid) or to editing a whole row at a
|
|
939
|
+
* time (`'row'`, `'form'`, `'popup'` — opened by double-click or "Edit row…"
|
|
940
|
+
* in the row menu); see `DataGridEditingOptions.mode`.
|
|
833
941
|
* A column with `editable: false`, a `lookup` or a `renderEditor` stays
|
|
834
|
-
* read-only here.
|
|
942
|
+
* read-only here, in every mode.
|
|
835
943
|
*
|
|
836
|
-
*
|
|
837
|
-
*
|
|
838
|
-
* selection, fill and paste are `EnterpriseDataGrid`.
|
|
944
|
+
* Validation rules, `crud` handlers, adding and deleting rows, per-row
|
|
945
|
+
* permissions, lookup and custom editors, the command column, undo/redo,
|
|
946
|
+
* range selection, fill and paste are `EnterpriseDataGrid`.
|
|
839
947
|
*/
|
|
840
948
|
editing?: DataGridEditingOptions<TRow>;
|
|
841
949
|
/** Replace a cell's content (e.g. with an editor). Return undefined for default. */
|
|
@@ -888,8 +996,9 @@ interface DataGridProps<TRow = GridRowData> extends Omit<DataGridCoreConfig<TRow
|
|
|
888
996
|
renderDetail?: (row: TRow) => ReactNode;
|
|
889
997
|
/**
|
|
890
998
|
* Body of the in-grid edit form (`mode: 'form'`), rendered in the row flow
|
|
891
|
-
* under the record it edits. Set by `EnterpriseDataGrid`; the
|
|
892
|
-
*
|
|
999
|
+
* under the record it edits. Set by `EnterpriseDataGrid`; the free grid's own
|
|
1000
|
+
* `editing.mode: 'form'` fills it when this is left empty. The form's
|
|
1001
|
+
* position and height come from `controller.setEditFormRow`.
|
|
893
1002
|
*/
|
|
894
1003
|
renderEditForm?: (rowKey: RowKey, row: TRow | undefined) => ReactNode;
|
|
895
1004
|
}
|
|
@@ -1499,6 +1608,12 @@ interface GridToolbarProps<TRow = GridRowData> {
|
|
|
1499
1608
|
declare function GridToolbarImpl<TRow = GridRowData>({ controller, search, exportCsv, exportExcel, exportPdf, columnChooser, dark, onOpenColumnChooser, itemsBefore, itemsAfter, searchDebounce, labels, }: GridToolbarProps<TRow>): react.JSX.Element;
|
|
1500
1609
|
declare const GridToolbar: typeof GridToolbarImpl;
|
|
1501
1610
|
|
|
1611
|
+
/** A command button's icon — the shared paths of `toolbarIcons.ts` (see there for why). */
|
|
1612
|
+
declare function ToolbarIcon({ name, size }: {
|
|
1613
|
+
name: ToolbarIconName;
|
|
1614
|
+
size?: number;
|
|
1615
|
+
}): react.JSX.Element;
|
|
1616
|
+
|
|
1502
1617
|
interface GridColumnChooserProps<TRow = GridRowData> {
|
|
1503
1618
|
controller: DataGridController<TRow>;
|
|
1504
1619
|
/** Passed in so the panel re-renders when visibility changes. */
|
|
@@ -1509,7 +1624,7 @@ interface GridColumnChooserProps<TRow = GridRowData> {
|
|
|
1509
1624
|
};
|
|
1510
1625
|
onClose: () => void;
|
|
1511
1626
|
dark?: boolean;
|
|
1512
|
-
labels?: Partial<Record<'title' | 'empty' | 'showAll' | 'ok', string>>;
|
|
1627
|
+
labels?: Partial<Record<'title' | 'empty' | 'search' | 'showAll' | 'ok', string>>;
|
|
1513
1628
|
}
|
|
1514
1629
|
declare function GridColumnChooser<TRow = GridRowData>({ controller, columns, anchor, onClose, dark, labels, }: GridColumnChooserProps<TRow>): react.JSX.Element;
|
|
1515
1630
|
|
|
@@ -2095,6 +2210,94 @@ interface UseGridEditingResult<TRow = GridRowData> {
|
|
|
2095
2210
|
}
|
|
2096
2211
|
declare function useGridEditing<TRow = GridRowData>(options: UseGridEditingOptions<TRow>): UseGridEditingResult<TRow>;
|
|
2097
2212
|
|
|
2213
|
+
interface UseEditModesOptions<TRow = GridRowData> {
|
|
2214
|
+
controller: DataGridController<TRow> | null;
|
|
2215
|
+
/** The editing layer the modes draw (`useGridEditing`'s result). */
|
|
2216
|
+
editing: UseGridEditingResult<TRow>;
|
|
2217
|
+
/** The mode in force. */
|
|
2218
|
+
mode: EditMode;
|
|
2219
|
+
/** Editing is on AND drawn (not paused behind cards). */
|
|
2220
|
+
active: boolean;
|
|
2221
|
+
/** The element the row editors are looked up in, to focus one on open. */
|
|
2222
|
+
rootRef: RefObject<HTMLElement | null>;
|
|
2223
|
+
/** The grid's row height in px — a form re-measure smaller than a row is noise. */
|
|
2224
|
+
rowHeight: number;
|
|
2225
|
+
/** Wording for the form/popup editor. */
|
|
2226
|
+
formLabels?: Partial<EditFormLabels>;
|
|
2227
|
+
/** Starting height in px for the in-grid form, before it is measured. */
|
|
2228
|
+
formHeight?: number;
|
|
2229
|
+
dark?: boolean;
|
|
2230
|
+
/** Lookup combos for the open row (Enterprise). */
|
|
2231
|
+
rowLookups?: RowLookupMap;
|
|
2232
|
+
/** A column's `renderEditor` draws its form field (Enterprise). */
|
|
2233
|
+
customEditors?: boolean;
|
|
2234
|
+
/** Columns that are not fields of the record (the command column). */
|
|
2235
|
+
isFormColumn?: (columnId: string) => boolean;
|
|
2236
|
+
/**
|
|
2237
|
+
* Offer the batch Save/Cancel pair in the strip. Default true. The
|
|
2238
|
+
* Enterprise grid shows it only for an explicit `mode: 'batch'` (its
|
|
2239
|
+
* default batch mode saves from the command column) and passes that here.
|
|
2240
|
+
*/
|
|
2241
|
+
batchBar?: boolean;
|
|
2242
|
+
}
|
|
2243
|
+
interface EditModes<TRow = GridRowData> {
|
|
2244
|
+
/** A row mode (row / form / popup) is in force and drawn. */
|
|
2245
|
+
rowModeActive: boolean;
|
|
2246
|
+
/** The open row, in a row mode; null otherwise. */
|
|
2247
|
+
rowSession: RowEditSession | null;
|
|
2248
|
+
/** True for the row drawn as editors in `row` mode. */
|
|
2249
|
+
isRowEditing: (rowKey: RowKey) => boolean;
|
|
2250
|
+
/** A value drawn the way the grid draws it (renderCell → lookup → formatter → date). */
|
|
2251
|
+
defaultContent: (ctx: CellSlotContext<TRow>, value: unknown) => ReactNode;
|
|
2252
|
+
/** The open row's cell in `row` mode: its editor, or its value when read-only. Undefined otherwise. */
|
|
2253
|
+
renderRowCell: (ctx: CellSlotContext<TRow>) => ReactNode | undefined;
|
|
2254
|
+
/** A cell's PENDING value (batch), drawn; undefined when it has none. */
|
|
2255
|
+
renderPending: (ctx: CellSlotContext<TRow>) => ReactNode | undefined;
|
|
2256
|
+
/** The grid's `renderEditForm` slot in `form` mode; undefined otherwise. */
|
|
2257
|
+
renderEditForm: ((rowKey: RowKey) => ReactNode) | undefined;
|
|
2258
|
+
/** The popup form (`popup` mode, a row open), or null. Unportaled. */
|
|
2259
|
+
popup: ReactNode;
|
|
2260
|
+
/** The row strip (`row` mode) and the batch Save/Cancel, or null when there is nothing to show. */
|
|
2261
|
+
bar: ReactNode;
|
|
2262
|
+
/** What `data-row-session` on the grid's wrapper says, for the pointer lock. */
|
|
2263
|
+
rowSessionAttr: 'form' | 'popup' | undefined;
|
|
2264
|
+
/** "Edit row…" for the row menu, or null when no row can be opened now. */
|
|
2265
|
+
editRowMenuItem: <TContext>(rowKey: RowKey) => GridMenuItem<TContext> | null;
|
|
2266
|
+
/** Open a row (double-click in a row mode). False when not a row mode. */
|
|
2267
|
+
openRow: (rowKey: RowKey) => boolean;
|
|
2268
|
+
}
|
|
2269
|
+
/**
|
|
2270
|
+
* The columns a record's form offers, in the grid's own order.
|
|
2271
|
+
*
|
|
2272
|
+
* Derived from the LAYOUT rather than the raw column list, so a column the
|
|
2273
|
+
* user hid stays out of the form too — offering a field nobody chose to see,
|
|
2274
|
+
* and saving a value from it, is an invisible change. The grid's own columns
|
|
2275
|
+
* (selection, the group column, row numbers) are never fields: with grouping
|
|
2276
|
+
* shown as a column the form offered an empty, disabled "Region › Country"
|
|
2277
|
+
* (pre-release review, 2026-10-16; the plain-JavaScript form already left
|
|
2278
|
+
* them out).
|
|
2279
|
+
*/
|
|
2280
|
+
declare function editFormColumnIds<TRow>(controller: DataGridController<TRow> | null, isFormColumn?: (columnId: string) => boolean): string[];
|
|
2281
|
+
declare function useEditModes<TRow = GridRowData>({ controller, editing, mode, active, rootRef, rowHeight, formLabels, formHeight: formHeightOption, dark, rowLookups, customEditors, isFormColumn, batchBar, }: UseEditModesOptions<TRow>): EditModes<TRow>;
|
|
2282
|
+
|
|
2283
|
+
interface GridRowEditorProps<TRow = GridRowData> {
|
|
2284
|
+
controller: DataGridController<TRow>;
|
|
2285
|
+
engine: EditingEngine<TRow>;
|
|
2286
|
+
columnId: string;
|
|
2287
|
+
/** This field's validation message, or null. */
|
|
2288
|
+
message: string | null;
|
|
2289
|
+
/** True while the row's save is in flight; the fields go read-only. */
|
|
2290
|
+
saving: boolean;
|
|
2291
|
+
/**
|
|
2292
|
+
* The column's lookup items (Enterprise) — `null` while loading. Undefined
|
|
2293
|
+
* draws the plain input.
|
|
2294
|
+
*/
|
|
2295
|
+
lookupOptions?: readonly LookupItem[] | null;
|
|
2296
|
+
onSave: () => void;
|
|
2297
|
+
onCancel: () => void;
|
|
2298
|
+
}
|
|
2299
|
+
declare function GridRowEditor<TRow = GridRowData>({ controller, engine, columnId, message, saving, lookupOptions, onSave, onCancel, }: GridRowEditorProps<TRow>): react.JSX.Element;
|
|
2300
|
+
|
|
2098
2301
|
interface GridCellEditorProps {
|
|
2099
2302
|
value: unknown;
|
|
2100
2303
|
dataType: GridDataType | undefined;
|
|
@@ -2208,4 +2411,4 @@ interface GridDialogProps {
|
|
|
2208
2411
|
}
|
|
2209
2412
|
declare function GridDialog({ open, title, message, cancelLabel, confirmLabel, danger, dark, onConfirm, onCancel, }: GridDialogProps): react.ReactPortal | null;
|
|
2210
2413
|
|
|
2211
|
-
export { type AlignedGridsApi, BAND_ROW_HEIGHT, type BatchSaveError, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type CellTooltipOptions, DEFAULT_HEADER_MENU_LABELS, DataGrid, type DataGridProps, type DistinctEntry, type EditorRenderContext, type ExportOutcome, type FilterRenderContext, GridCellEditor, type GridCellEditorProps, GridColumnChooser, type GridColumnChooserProps, GridContextMenu, type GridContextMenuProps, GridDateEditor, type GridDateEditorProps, GridDialog, type GridDialogProps, GridFilterPanel, type GridFilterPanelProps, GridFilterRow, type GridFilterRowProps, GridFooterRow, type GridFooterRowProps, GridGroupPanel, type GridGroupPanelProps, GridHeader, GridHeaderBands, type GridHeaderBandsProps, GridHeaderFilterPopup, type GridHeaderFilterPopupProps, type GridHeaderProps, GridLoadingOverlay, type GridLoadingOverlayProps, GridLookupEditor, type GridLookupEditorProps, type GridMenuItem, GridNoteEditor, type GridNotesConfig, GridPager, type GridPagerProps, GridPinnedRows, type GridPinnedRowsProps, GridPopupPanel, type GridPopupPanelProps, GridPortal, type GridPortalProps, GridRow, type GridRowProps, GridSummaryBar, type GridSummaryBarProps, GridSurfaceProvider, type GridSurfaceProviderProps, GridTextProvider, type GridTextProviderProps, GridToolbar, type GridToolbarProps, GridTooltip, type GridTooltipConfig, type GridTooltipProps, type HeaderMenuContext, type HeaderMenuDeps, type HeaderMenuLabels, type HeaderRenderContext, type NoteCellContext, PRINT_MAX_ROWS, type PendingDelete, type PrintLayoutOptions, type PrintLayoutState, ROW_DRAG_MIME, type RangeApi, type ReactColumnRuntime, type ReactGridColumnDef, type RowDragConfig, type RowDragHandlers, type RowDragPayload, type RowDropEvent, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, SHORTCUT_COPY, SHORTCUT_CUT, SHORTCUT_PASTE, type SelectionStats, type TooltipState, type UseDataGridOptions, type UseDataGridResult, type UseGridEditingOptions, type UseGridEditingResult, buildCellMenuItems, buildHeaderMenu, copyToClipboard, headerMenuLabels, matchOptions, measureBestFitWidth, reconcileFilterInputs, runGridExport, useAlignedGrids, useAnchoredPopup, useCellTooltip, useDataGrid, useGridChartBoxData, useGridChartData, useGridChartXYData, useGridEditing, useGridSurfaceClass, useGridText, usePrintLayout, useRowDrag, useStateStoring, writeClipboardText };
|
|
2414
|
+
export { type AlignedGridsApi, BAND_ROW_HEIGHT, type BatchSaveError, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type CellTooltipOptions, DEFAULT_EDIT_FORM_LABELS, DEFAULT_HEADER_MENU_LABELS, DataGrid, type DataGridProps, type DistinctEntry, type EditFormField, type EditFormLabels, type EditModes, type EditorRenderContext, type ExportOutcome, type FilterRenderContext, GridCellEditor, type GridCellEditorProps, GridColumnChooser, type GridColumnChooserProps, GridContextMenu, type GridContextMenuProps, GridDateEditor, type GridDateEditorProps, GridDialog, type GridDialogProps, GridEditForm, type GridEditFormProps, GridFilterPanel, type GridFilterPanelProps, GridFilterRow, type GridFilterRowProps, GridFooterRow, type GridFooterRowProps, GridGroupPanel, type GridGroupPanelProps, GridHeader, GridHeaderBands, type GridHeaderBandsProps, GridHeaderFilterPopup, type GridHeaderFilterPopupProps, type GridHeaderProps, GridLoadingOverlay, type GridLoadingOverlayProps, GridLookupEditor, type GridLookupEditorProps, type GridMenuItem, GridNoteEditor, type GridNotesConfig, GridPager, type GridPagerProps, GridPinnedRows, type GridPinnedRowsProps, GridPopupPanel, type GridPopupPanelProps, GridPortal, type GridPortalProps, GridRow, GridRowEditor, type GridRowEditorProps, type GridRowProps, GridSummaryBar, type GridSummaryBarProps, GridSurfaceProvider, type GridSurfaceProviderProps, GridTextProvider, type GridTextProviderProps, GridToolbar, type GridToolbarProps, GridTooltip, type GridTooltipConfig, type GridTooltipProps, type HeaderMenuContext, type HeaderMenuDeps, type HeaderMenuLabels, type HeaderRenderContext, type NoteCellContext, PRINT_MAX_ROWS, type PendingDelete, type PrintLayoutOptions, type PrintLayoutState, ROW_DRAG_MIME, type RangeApi, type ReactColumnRuntime, type ReactGridColumnDef, type RowDragConfig, type RowDragHandlers, type RowDragPayload, type RowDropEvent, type RowLookupMap, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, SHORTCUT_COPY, SHORTCUT_CUT, SHORTCUT_PASTE, type SelectionStats, ToolbarIcon, type TooltipState, type UseDataGridOptions, type UseDataGridResult, type UseEditModesOptions, type UseGridEditingOptions, type UseGridEditingResult, buildCellMenuItems, buildHeaderMenu, copyToClipboard, editFormColumnIds, editFormLabels, headerMenuLabels, matchOptions, measureBestFitWidth, reconcileFilterInputs, runGridExport, useAlignedGrids, useAnchoredPopup, useCellTooltip, useDataGrid, useEditModes, useGridChartBoxData, useGridChartData, useGridChartXYData, useGridEditing, useGridSurfaceClass, useGridText, usePrintLayout, useRowDrag, useStateStoring, writeClipboardText };
|