@progress/kendo-react-data-tools 13.3.0 → 13.4.0-develop.2

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 (105) hide show
  1. package/clipboard/clipboard.service.d.ts +20 -0
  2. package/clipboard/common.d.ts +188 -0
  3. package/columnmenu/ColumnMenu.d.ts +90 -0
  4. package/columnmenu/ColumnMenuFilterForm.d.ts +25 -0
  5. package/columnmenu/ColumnMenuFilterLogic.d.ts +10 -0
  6. package/columnmenu/ColumnMenuFilterLogic.mjs +4 -4
  7. package/columnmenu/ColumnMenuFilters.d.ts +31 -0
  8. package/columnmenu/ColumnMenuItem.d.ts +39 -0
  9. package/columnmenu/ColumnMenuOperators.d.ts +72 -0
  10. package/columnmenu/index.d.ts +13 -0
  11. package/data-source/use-data-source.d.ts +224 -0
  12. package/data-source/use-odata-data-source.d.ts +41 -0
  13. package/data-source/use-remote-data-source.d.ts +411 -0
  14. package/detail-expansion/TableExpandableSettings.d.ts +12 -0
  15. package/detail-expansion/expandReducer.d.ts +31 -0
  16. package/detail-expansion/utils.d.ts +10 -0
  17. package/dist/cdn/js/kendo-react-datatools.js +1 -1
  18. package/drag/ColumnDraggable.d.ts +37 -0
  19. package/drag/ColumnResize.d.ts +39 -0
  20. package/drag/ColumnResizer.d.ts +35 -0
  21. package/drag/CommonDragLogic.d.ts +45 -0
  22. package/drag/DragClue.d.ts +29 -0
  23. package/drag/DropClue.d.ts +26 -0
  24. package/editing/TableEditableSettings.d.ts +24 -0
  25. package/editing/editReducer.d.ts +62 -0
  26. package/editing/utils.d.ts +12 -0
  27. package/filter/Expression.d.ts +53 -0
  28. package/filter/Expression.js +1 -1
  29. package/filter/Expression.mjs +10 -11
  30. package/filter/FieldSettings.d.ts +37 -0
  31. package/filter/Filter.d.ts +139 -0
  32. package/filter/Group.d.ts +64 -0
  33. package/filter/Group.js +1 -1
  34. package/filter/Group.mjs +7 -7
  35. package/filter/filters/BooleanFilter.d.ts +50 -0
  36. package/filter/filters/DateFilter.d.ts +33 -0
  37. package/filter/filters/EnumFilter.d.ts +50 -0
  38. package/filter/filters/NumericFilter.d.ts +40 -0
  39. package/filter/filters/TextFilter.d.ts +47 -0
  40. package/filter/filters/index.d.ts +12 -0
  41. package/filter/index.d.ts +13 -0
  42. package/filter/operators.d.ts +80 -0
  43. package/filteringCells/BooleanFilter.d.ts +15 -0
  44. package/filteringCells/DateFilter.d.ts +15 -0
  45. package/filteringCells/FilterCellProps.d.ts +42 -0
  46. package/filteringCells/FilterComponent.d.ts +24 -0
  47. package/filteringCells/FilterComponentProps.d.ts +30 -0
  48. package/filteringCells/FilterOperator.d.ts +20 -0
  49. package/filteringCells/NumericFilter.d.ts +15 -0
  50. package/filteringCells/TextFilter.d.ts +15 -0
  51. package/filteringCells/index.d.ts +15 -0
  52. package/group-expansion/TableGroupExpandableSettings.d.ts +12 -0
  53. package/group-expansion/groupExpandReducer.d.ts +46 -0
  54. package/header/CellProps.d.ts +83 -0
  55. package/header/ColumnProps.d.ts +167 -0
  56. package/header/FilterRow.d.ts +32 -0
  57. package/header/Header.d.ts +26 -0
  58. package/header/HeaderCell.d.ts +54 -0
  59. package/header/HeaderRow.d.ts +44 -0
  60. package/header/HeaderSelectionCell.d.ts +19 -0
  61. package/header/HeaderTdElement.d.ts +42 -0
  62. package/header/HeaderThElement.d.ts +42 -0
  63. package/header/SortSettings.d.ts +33 -0
  64. package/header/index.d.ts +18 -0
  65. package/header/utils/index.d.ts +90 -0
  66. package/index.d.mts +43 -3741
  67. package/index.d.ts +43 -3741
  68. package/messages/index.d.ts +397 -0
  69. package/navigation/NavigatableSettings.d.ts +25 -0
  70. package/navigation/TableKeyboardNavigation.d.ts +95 -0
  71. package/navigation/TableKeyboardNavigation.mjs +13 -13
  72. package/navigation/TableKeyboardNavigationContext.d.ts +13 -0
  73. package/navigation/TableKeyboardNavigationContextType.d.ts +14 -0
  74. package/navigation/TableKeyboardNavigationStateType.d.ts +17 -0
  75. package/navigation/constants.d.ts +61 -0
  76. package/navigation/hooks.d.ts +19 -0
  77. package/navigation/hooks.mjs +3 -3
  78. package/navigation/stackedKeyboardNavigation.d.ts +217 -0
  79. package/navigation/utils.d.ts +329 -0
  80. package/navigation/utils.mjs +5 -5
  81. package/package-metadata.d.ts +12 -0
  82. package/package-metadata.js +1 -1
  83. package/package-metadata.mjs +10 -16
  84. package/package.json +10 -10
  85. package/pager/Pager.d.ts +10 -0
  86. package/pager/Pager.js +1 -1
  87. package/pager/Pager.mjs +64 -66
  88. package/pager/PagerInput.d.ts +29 -0
  89. package/pager/PagerNumericButtons.d.ts +28 -0
  90. package/pager/PagerNumericButtons.js +1 -1
  91. package/pager/PagerNumericButtons.mjs +15 -17
  92. package/pager/PagerPageSizes.d.ts +36 -0
  93. package/pager/models/index.d.ts +178 -0
  94. package/pager/utils.d.ts +66 -0
  95. package/selection/TableSelectableSettings.d.ts +38 -0
  96. package/selection/TableSelection.d.ts +25 -0
  97. package/selection/constants.d.ts +13 -0
  98. package/selection/events.d.ts +101 -0
  99. package/selection/utils.d.ts +70 -0
  100. package/utils/DataItemWrapper.d.ts +17 -0
  101. package/utils/SearchField.d.ts +24 -0
  102. package/utils/data-operations.d.ts +107 -0
  103. package/utils/group-operations.d.ts +36 -0
  104. package/virtualization/columns.d.ts +24 -0
  105. package/virtualization/index.d.ts +8 -0
package/index.d.mts CHANGED
@@ -5,3744 +5,46 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import { BaseEvent } from '@progress/kendo-react-common';
9
- import { ComponentType } from 'react';
10
- import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
11
- import { default as default_2 } from 'prop-types';
12
- import { DropDownListProps } from '@progress/kendo-react-dropdowns';
13
- import { FilterComponentProps as FilterComponentProps_2 } from './FilterComponentProps';
14
- import { FilterDescriptor } from '@progress/kendo-data-query';
15
- import { GroupDescriptor } from '@progress/kendo-data-query';
16
- import { JSX } from 'react/jsx-runtime';
17
- import * as React_2 from 'react';
18
- import { SortDescriptor } from '@progress/kendo-data-query';
19
- import { State } from '@progress/kendo-data-query';
20
- import { SVGIcon } from '@progress/kendo-react-common';
21
-
22
- /**
23
- * @hidden
24
- */
25
- export declare const addHeaders: (initialData: string, cols: string[], event: ClipboardDataEvent) => string;
26
-
27
- /**
28
- * Represents the base object of the `onPageChange` event. It is usually used
29
- * in custom pager scenarios in cases when we don't need any of the events or the target.
30
- */
31
- export declare interface BasePageChangeEvent {
32
- /**
33
- * The number of records that will be skipped.
34
- */
35
- skip: number;
36
- /**
37
- * The number of records that will be taken.
38
- */
39
- take: number;
40
- /**
41
- * A React Synthetic Event.
42
- */
43
- syntheticEvent?: React.SyntheticEvent<any>;
44
- /**
45
- * A native DOM event.
46
- */
47
- nativeEvent?: any;
48
- /**
49
- * A target change event.
50
- */
51
- targetEvent?: PagerTargetEvent;
52
- }
53
-
54
- /**
55
- * The BooleanFilter component used for editing boolean value of FilterDescriptor object.
56
- */
57
- export declare class BooleanFilter extends React_2.Component<BooleanFilterProps> {
58
- /**
59
- * @hidden
60
- */
61
- static propTypes: {
62
- filter: default_2.Validator<object>;
63
- onFilterChange: default_2.Validator<(...args: any[]) => any>;
64
- data: default_2.Requireable<(default_2.InferProps<{
65
- text: default_2.Requireable<string>;
66
- value: default_2.Requireable<any>;
67
- }> | null | undefined)[]>;
68
- ariaLabel: default_2.Requireable<string>;
69
- defaultItem: default_2.Requireable<any>;
70
- };
71
- private data;
72
- /**
73
- * @hidden
74
- */
75
- render(): JSX.Element;
76
- }
77
-
78
- /**
79
- * @hidden
80
- */
81
- export declare class BooleanFilterCell extends BooleanFilterCell_base {
82
- }
83
-
84
- declare const BooleanFilterCell_base: React_2.ComponentClass<FilterComponentProps_2, any>;
85
-
86
- /**
87
- * The props of the BooleanFilter component.
88
- */
89
- export declare interface BooleanFilterProps extends TextFilterProps {
90
- /**
91
- * A collection of text-value pairs passed to the BooleanFilter DropDownList.
92
- * Defaults to [ { text: 'True', value: true }, { text: 'False', value: false } ]
93
- */
94
- data?: Array<{
95
- text: string;
96
- value: any;
97
- }>;
98
- /**
99
- * The defaultItem passed to the BooleanFilter DropDownList.
100
- */
101
- defaultItem?: any;
102
- }
103
-
104
- export declare interface CellProps {
105
- /**
106
- * @hidden
107
- */
108
- id: string;
109
- /**
110
- * The index applied to the `aria-colindex` attribute.
111
- */
112
- ariaColumnIndex: number;
113
- /**
114
- * Indicates if the cell is selected.
115
- */
116
- isSelected: boolean;
117
- /** @hidden */
118
- isHighlighted?: boolean;
119
- /** @hidden */
120
- isInEdit?: boolean;
121
- /**
122
- * Indicates if the cell is sorted.
123
- */
124
- isSorted?: boolean;
125
- /**
126
- * Indicates if the cell is alt.
127
- */
128
- isAlt?: boolean;
129
- /**
130
- * Indicates if the cell is expanded.
131
- */
132
- expanded?: boolean;
133
- /**
134
- * Custom CSS classes for the cell.
135
- */
136
- className?: string;
137
- /**
138
- * Inline styles for the cell.
139
- */
140
- style?: React_2.CSSProperties;
141
- /**
142
- * The data field that the cell binds to.
143
- */
144
- field?: string;
145
- /**
146
- * The data item for the current row.
147
- */
148
- dataItem: any;
149
- /**
150
- * The format applied to the value before display.
151
- * Takes the `{0:format}` form where `format` is a standard number format, a custom number format,
152
- * a standard date format, or a custom date format.
153
- */
154
- format?: string;
155
- /**
156
- * The column span of the cell.
157
- */
158
- colSpan?: number;
159
- /**
160
- * Fires when the cell is selected.
161
- */
162
- selectionChange?: (event: {
163
- syntheticEvent: React_2.SyntheticEvent<any>;
164
- }) => void;
165
- /**
166
- * Fires when the cell value changes.
167
- */
168
- onChange?: (event: {
169
- dataItem: any;
170
- syntheticEvent: React_2.SyntheticEvent<any>;
171
- field?: string;
172
- value?: any;
173
- }) => void;
174
- /**
175
- * Overrides the default cell rendering.
176
- */
177
- render?: (defaultRendering: React_2.ReactElement<HTMLTableCellElement> | null, props: CellProps) => React_2.ReactElement<HTMLTableCellElement> | null;
178
- }
179
-
180
- /**
181
- * The possible values of the `type` property.
182
- */
183
- export declare enum ClipboardActionType {
184
- copy = "copy",
185
- cut = "cut",
186
- paste = "paste"
187
- }
188
-
189
- /**
190
- * Represents the object that is returned form the `populateClipboardData` function.
191
- */
192
- export declare interface ClipboardData {
193
- /**
194
- * A collection of the ClipboardItem that are selected.
195
- */
196
- copiedItems: ClipboardItem_2[];
197
- /**
198
- * A collection of the ClipboardItem that are pasted.
199
- */
200
- pastedItems: ClipboardItem_2[];
201
- /**
202
- * When the action is `copy` or `cut` - the Grid data, copied to the clipboard, in Excel-compatible format.
203
- * When the action is `paste` - the current clipboard data, available in the original DOM event.
204
- */
205
- clipboardData: string;
206
- }
207
-
208
- /**
209
- * Represents the object of the `ClipboardDataEvent` event.
210
- */
211
- export declare interface ClipboardDataEvent {
212
- /**
213
- * Represents the type of the clipboard action.
214
- */
215
- type: ClipboardActionType;
216
- /**
217
- * Represents the native [ClipboardEvent](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcellssettings)
218
- */
219
- nativeEvent?: ClipboardEvent;
220
- /**
221
- * All the Grid columns. It takes value of type of [ColumnBaseProps](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnbaseprops)&lt;[CellProps](https://www.telerik.com/kendo-react-ui/components/datatools/api/cellprops)&gt;[]
222
- */
223
- columns: ColumnBaseProps[];
224
- /**
225
- * Passes the dataItemKey prop in the clipboard action.
226
- */
227
- dataItemKey: string;
228
- /**
229
- * Passes the clipboard prop copyHeaders value in the clipboard action.
230
- */
231
- copyHeaders?: boolean;
232
- /**
233
- * Sets the cell delimiter used when manipulating the clipboard data Defaults to `\t`.
234
- */
235
- cellDelimiter?: string;
236
- /**
237
- * Sets the row delimiter used when manipulating the clipboard data Defaults to `\r\n`.
238
- */
239
- newLineDelimiter?: string;
240
- /**
241
- * This is the item that is clicked if the action is raised from the contextMenu.
242
- */
243
- dataItem?: any;
244
- /**
245
- * This is the column field that is clicked if the action is raised from the contextMenu.
246
- */
247
- field?: string;
248
- }
249
-
250
- /**
251
- * Represents the aria that is copied - the dataItem and the fields.
252
- */
253
- declare interface ClipboardItem_2 {
254
- /**
255
- * Represents the dataItem used in the clipboard action.
256
- */
257
- dataItem: any;
258
- /**
259
- * Represents the fields used in the clipboard action.
260
- */
261
- fields: string[];
262
- }
263
- export { ClipboardItem_2 as ClipboardItem }
264
-
265
- /**
266
- * @hidden
267
- */
268
- export declare class ClipboardService {
269
- private clipboardEvent;
270
- constructor(ClipboardEventHandler: (clipboardType: ClipboardActionType, event: ClipboardEvent) => void);
271
- private copyHandler;
272
- private cutHandler;
273
- private pasteHandler;
274
- addEventListeners: (document: Document | undefined) => void;
275
- removeEventListeners: (document: Document | undefined) => void;
276
- }
277
-
278
- /**
279
- * Represents settings that can be added to the clipboard behavior.
280
- */
281
- export declare interface ClipboardSettings {
282
- /**
283
- * Determines whether column titles or field names will be included in the generated data
284
- * during the `copy` and `cut` actions.
285
- * Defaults to `false`.
286
- */
287
- copyHeaders: boolean;
288
- /**
289
- * Determines what is the delimiter used to separate the cells.
290
- * Defaults to `\t`.
291
- */
292
- cellDelimiter?: string;
293
- /**
294
- * Determines what is the delimiter used to separate the rows.
295
- * Defaults to `'\r\n'`.
296
- */
297
- newLineDelimiter?: string;
298
- }
299
-
300
- /** @hidden */
301
- export declare const closestTagName: (target: HTMLElement | null, tagName: 'TD' | 'TR' | 'TABLE') => HTMLElement | null;
302
-
303
- export declare interface ColumnBaseProps<C = CellProps> {
304
- /**
305
- * Sets the data field that the column binds to.
306
- */
307
- field?: string;
308
- /**
309
- * Sets the column header text.
310
- */
311
- title?: string;
312
- /**
313
- * Enables header click to emit the `sortChange` event. Handle `sortChange` to sort the data.
314
- *
315
- * @default true
316
- */
317
- sortable?: boolean | ColumnSortSettings;
318
- /**
319
- * Sets the width of the column (in pixels).
320
- */
321
- width?: string | number;
322
- /**
323
- * Indicates that the header selection checkbox is checked when `true`.
324
- */
325
- headerSelectionValue?: boolean;
326
- /**
327
- * Applies a format to the value before display.
328
- * Takes the `{0:format}` form where `format` is a standard number format, a custom number format,
329
- * a standard date format, or a custom date format. For more information on supported formats see the
330
- * [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
331
- */
332
- format?: string;
333
- /**
334
- * Sets custom CSS classes on the header cell.
335
- */
336
- headerClassName?: string;
337
- /**
338
- * Sets custom CSS classes on the column cells.
339
- */
340
- className?: string;
341
- /**
342
- * Enables column resizing when `true`.
343
- *
344
- * @default true
345
- */
346
- resizable?: boolean;
347
- /**
348
- * Enables column reordering when `true`.
349
- *
350
- * @default true
351
- */
352
- reorderable?: boolean;
353
- /**
354
- * Disables the ability to reorder when another column is dragged over it or tried to be reordered with keyboard.
355
- *
356
- * @default false
357
- */
358
- disableReorder?: boolean;
359
- /**
360
- * Sets the minimum resize width (in pixels).
361
- *
362
- * @default 10
363
- */
364
- minResizableWidth?: number;
365
- /**
366
- * Determines the column position. Smaller `orderIndex` values render first.
367
- *
368
- * @default 0
369
- */
370
- orderIndex?: number;
371
- /**
372
- * Sets the column id for distinguishing columns (multi header, resize, or keyboard navigation scenarios).
373
- * Also used as the unique key for rendering cells. If not set, a unique id is generated.
374
- */
375
- id?: string;
376
- /**
377
- * Defines the component rendered as a cell. If not set, a `Cell` renders.
378
- */
379
- cell?: ComponentType<C>;
380
- /**
381
- * @hidden
382
- */
383
- navigatable?: boolean;
384
- /**
385
- * @hidden
386
- */
387
- locked?: boolean;
388
- }
389
-
390
- /**
391
- * @hidden
392
- */
393
- export declare const ColumnDefaultProps: {
394
- filterable: boolean;
395
- editable: boolean;
396
- sortable: boolean;
397
- resizable: boolean;
398
- reorderable: boolean;
399
- groupable: boolean;
400
- };
401
-
402
- /**
403
- * @hidden
404
- */
405
- declare interface ColumnDraggableProps {
406
- pressHandler?: (draggableEvent: any, element: HTMLTableRowElement | HTMLDivElement) => void;
407
- dragHandler?: (draggableEvent: any, element: HTMLTableRowElement | HTMLDivElement) => void;
408
- releaseHandler?: (draggableEvent: any) => void;
409
- ariaRowIndex?: number;
410
- children?: React_2.ReactNode;
411
- }
412
-
413
- /**
414
- * Represents the ColumnMenuBooleanColumn component. Use it for `boolean` type columns.
415
- */
416
- export declare const ColumnMenuBooleanColumn: React_2.FunctionComponent<ColumnMenuProps>;
417
-
418
- export declare const ColumnMenuBooleanFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;
419
-
420
- /**
421
- * Represents the ColumnMenuDateColumn component. Use it for `Date` type columns.
422
- */
423
- export declare const ColumnMenuDateColumn: React_2.FunctionComponent<ColumnMenuProps>;
424
-
425
- export declare const ColumnMenuDateFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;
426
-
427
- /**
428
- * @hidden
429
- */
430
- export declare const ColumnMenuFilterForm: React_2.FunctionComponent<ColumnMenuFormProps>;
431
-
432
- export declare const ColumnMenuFilterLogic: React_2.FunctionComponent<DropDownListProps>;
433
-
434
- export declare interface ColumnMenuFilterProps {
435
- /** The current filter descriptor for the column */
436
- filter: FilterDescriptor;
437
- /** Event handler for filter changes */
438
- onFilterChange: (event: React_2.SyntheticEvent<any>, nextFilter: FilterDescriptor, prevFilter: FilterDescriptor) => void;
439
- /** Available filter operators for the column */
440
- operators?: {
441
- text: string;
442
- operator: string;
443
- }[];
444
- /** Initial filter descriptor when creating a new filter */
445
- initialFilter?: FilterDescriptor;
446
- /** Custom input component for filter value entry */
447
- input?: React_2.ComponentType<{
448
- value: any;
449
- onChange: any;
450
- }>;
451
- }
452
-
453
- export declare const ColumnMenuForm: React_2.FunctionComponent<ColumnMenuFormProps>;
454
-
455
- export declare interface ColumnMenuFormProps {
456
- /** Whether to show the form */
457
- show?: boolean;
458
- /** Event handler for form submission */
459
- onSubmit?: React_2.FormEventHandler<HTMLFormElement>;
460
- /** Event handler for form reset */
461
- onReset?: React_2.FormEventHandler<HTMLFormElement>;
462
- /** Action buttons or custom action elements */
463
- actions?: React_2.ReactNode;
464
- /** Form content and child elements */
465
- children?: React_2.ReactNode;
466
- }
467
-
468
- export declare const ColumnMenuItem: React_2.FunctionComponent<ColumnMenuItemProps>;
469
-
470
- /**
471
- * Defines the props of the ColumnMenuItem component.
472
- */
473
- export declare interface ColumnMenuItemProps {
474
- /**
475
- * Fires when the item is clicked.
476
- */
477
- onClick?: (event: React_2.MouseEvent<HTMLDivElement>) => void;
478
- /**
479
- * Indicates that the item is selected when `true`.
480
- */
481
- selected?: boolean;
482
- /**
483
- * Disables the item when `true`.
484
- */
485
- disabled?: boolean;
486
- /**
487
- * Sets the font icon CSS class.
488
- */
489
- iconClass?: string;
490
- /**
491
- * Sets the SVG icon definition.
492
- */
493
- svgIcon?: SVGIcon;
494
- /**
495
- * Sets the item title text.
496
- */
497
- title: string;
498
- }
499
-
500
- /**
501
- * Represents the ColumnMenuNumericColumn component. Use it for `number` type columns.
502
- */
503
- export declare const ColumnMenuNumericColumn: React_2.FunctionComponent<ColumnMenuProps>;
504
-
505
- export declare const ColumnMenuNumericFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;
506
-
507
- /**
508
- * Represents the operators for the ColumnMenuTextFilter, ColumnMenuNumericFilter,
509
- * ColumnMenuDateFilter and ColumnMenuBooleanFilter components.
510
- *
511
- * The text field of each operator object will be resolved according to the
512
- * [localization messages](https://www.telerik.com/kendo-react-ui/components/datatools/globalization#toc-messages).
513
- */
514
- export declare class ColumnMenuOperators {
515
- /**
516
- * An array containing the operators for the ColumnMenuTextFilter component.
517
- *
518
- * The operators are:
519
- *
520
- * - { text: 'columnMenu.filterContainsOperator', operator: 'contains' }
521
- * - { text: 'columnMenu.filterNotContainsOperator', operator: 'doesnotcontain' }
522
- * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
523
- * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
524
- * - { text: 'columnMenu.filterStartsWithOperator', operator: 'startswith' }
525
- * - { text: 'columnMenu.filterEndsWithOperator', operator: 'endswith' }
526
- * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
527
- * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
528
- * - { text: 'columnMenu.filterIsEmptyOperator', operator: 'isempty' }
529
- * - { text: 'columnMenu.filterIsNotEmptyOperator', operator: 'isnotempty' }
530
- */
531
- static get text(): FilterOperator[];
532
- /**
533
- * An array containing the operators for the ColumnMenuNumericFilter component.
534
- *
535
- * The operators are:
536
- *
537
- * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
538
- * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
539
- * - { text: 'columnMenu.filterGteOperator', operator: 'gte' }
540
- * - { text: 'columnMenu.filterGtOperator', operator: 'gt' }
541
- * - { text: 'columnMenu.filterLteOperator', operator: 'lte' }
542
- * - { text: 'columnMenu.filterLtOperator', operator: 'lt' }
543
- * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
544
- * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
545
- */
546
- static get numeric(): FilterOperator[];
547
- /**
548
- * An array containing the operators for the ColumnMenuDateFilter component.
549
- *
550
- * The operators are:
551
- *
552
- * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
553
- * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
554
- * - { text: 'columnMenu.filterAfterOrEqualOperator', operator: 'gte' }
555
- * - { text: 'columnMenu.filterAfterOperator', operator: 'gt' }
556
- * - { text: 'columnMenu.filterBeforeOperator', operator: 'lt' }
557
- * - { text: 'columnMenu.filterBeforeOrEqualOperator', operator: 'lte' }
558
- * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
559
- * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
560
- */
561
- static get date(): FilterOperator[];
562
- /**
563
- * An array containing the operators for the ColumnMenuBooleanFilter component.
564
- *
565
- * The operators are:
566
- *
567
- * - { text: 'columnMenu.filterIsTrue', operator: '' }
568
- */
569
- static get boolean(): FilterOperator[];
570
- }
571
-
572
- /**
573
- * Defines the props of the ColumnMenu component.
574
- */
575
- export declare interface ColumnMenuProps {
576
- /**
577
- * Sets the `SortDescriptor[]` applied to the data.
578
- */
579
- sort?: SortDescriptor[];
580
- /**
581
- * Fires when sorting changes. Receives the browser event, the new `SortDescriptor[]`, and the column `field`.
582
- */
583
- onSortChange?: (event: React_2.SyntheticEvent<any>, sort: SortDescriptor[], field: string) => void;
584
- /**
585
- * Sets the `CompositeFilterDescriptor[]` applied to the data.
586
- */
587
- filter?: CompositeFilterDescriptor[];
588
- /**
589
- * Fires when filtering changes. Receives the browser event, the new `CompositeFilterDescriptor[]`, and the column `field`.
590
- */
591
- onFilterChange?: (event: React_2.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field: string) => void;
592
- /**
593
- * Sets the column `field` the menu operates on.
594
- */
595
- field?: string;
596
- /**
597
- * Shows the ascending sort button when `true`.
598
- *
599
- * @default false
600
- */
601
- sortAsc?: boolean;
602
- /**
603
- * Shows the descending sort button when `true`.
604
- *
605
- * @default false
606
- */
607
- sortDesc?: boolean;
608
- /**
609
- * Provides the filtering UI components in render order. Supply up to three components: first filter, logic, second filter.
610
- */
611
- filterContent?: any[];
612
- /**
613
- * Sets the initial expand state of the filters.
614
- *
615
- * @default false
616
- */
617
- expandFilters?: boolean;
618
- /**
619
- * Returns the initial `CompositeFilterDescriptor` based on the current `field`. Use to customize starting filter values.
620
- */
621
- initialFilter?: (field: string) => CompositeFilterDescriptor;
622
- /**
623
- * Fires before the ColumnMenu items render. Use to add or remove items.
624
- * `defaultRendering` holds sorting and filtering elements.
625
- * `props` exposes the column `field` and `closeMenu()` helper.
626
- */
627
- itemsRender?: (defaultRendering: (React_2.ReactElement<HTMLDivElement> | null)[], props: {
628
- field?: string;
629
- closeMenu: () => void;
630
- }) => React_2.ReactNode;
631
- /**
632
- * Fires before the ColumnMenu renders. Use to override the entire rendering.
633
- * `defaultRendering` contains the menu button and popup elements (and license watermark when present).
634
- */
635
- render?: (defaultRendering: React_2.ReactElement<any>[]) => React_2.ReactNode;
636
- }
637
-
638
- /**
639
- * Represents the ColumnMenuTextColumn component. Use it for `string` type columns.
640
- */
641
- export declare const ColumnMenuTextColumn: React_2.FunctionComponent<ColumnMenuProps>;
642
-
643
- export declare const ColumnMenuTextFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;
644
-
645
- /**
646
- * @hidden
647
- */
648
- export declare class ColumnResize<C = CellProps, H = HeaderCellProps, F = FilterCellProps> {
649
- /**
650
- * The main `colgroup` of the Grid.
651
- */
652
- colGroupMain: any | null;
653
- /**
654
- * The header `colgroup` of the Grid (if any).
655
- */
656
- colGroupHeader: any | null;
657
- /**
658
- * The footer `colgroup` of the Grid (if any).
659
- */
660
- colGroupFooter: any | null;
661
- columns: ExtendedColumnProps<C, H, F>[];
662
- /**
663
- * The settings for resizing the Grid.
664
- */
665
- resizable: boolean;
666
- onResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void;
667
- private isRtl;
668
- constructor(triggerResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void);
669
- setIsRtl: (isRtl: boolean) => void;
670
- dragHandler(event: any, column: ExtendedColumnProps<C, H, F>, dragCue: HTMLSpanElement, end: boolean): void;
671
- private setWidths;
672
- private updateColElements;
673
- private setColWidth;
674
- }
675
-
676
- /**
677
- * @hidden
678
- */
679
- export declare class ColumnResizer extends React_2.Component<ColumnResizerResizerProps, {}> {
680
- private draggable;
681
- private isDragged;
682
- /**
683
- * @hidden
684
- */
685
- onDrag: (data: any) => void;
686
- /**
687
- * @hidden
688
- */
689
- onRelease: (data: any) => void;
690
- /**
691
- * @hidden
692
- */
693
- onDoubleClick: (event: React_2.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
694
- render(): JSX.Element;
695
- }
696
-
697
- /**
698
- * @hidden
699
- */
700
- declare interface ColumnResizerResizerProps {
701
- resize: (event: any, dragCue: HTMLSpanElement, end: boolean) => void;
702
- autofit?: (event: React_2.MouseEvent<HTMLSpanElement, MouseEvent>, dragCue: HTMLSpanElement) => void;
703
- }
704
-
705
- /**
706
- * The settings for sorting the columns of the component.
707
- */
708
- export declare interface ColumnSortSettings {
709
- /**
710
- * Enables the removal of the column sorting functionality.
711
- */
712
- allowUnsort?: boolean;
713
- }
714
-
715
- /** @hidden */
716
- export declare const combineFilters: (first?: CompositeFilterDescriptor, second?: CompositeFilterDescriptor) => CompositeFilterDescriptor | undefined;
717
-
718
- /**
719
- * @hidden
720
- */
721
- export declare class CommonDragLogic<C = CellProps, H = HeaderCellProps, F = FilterCellProps> {
722
- columns: ExtendedColumnProps<C, H, F>[];
723
- reorderable: boolean;
724
- groupable: boolean;
725
- private startColumn;
726
- private startGroup;
727
- private currentColumn;
728
- private currentGroup;
729
- private columnReorder;
730
- private groupReorder;
731
- private columnToGroup;
732
- private dropElementClue;
733
- private dragElementClue;
734
- private groupPanelDivElement;
735
- constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);
736
- refGroupPanelDiv: (e: HTMLDivElement | null) => void;
737
- refDropElementClue: (e: DropClue | null) => void;
738
- refDragElementClue: (e: DragClue | null) => void;
739
- pressHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
740
- dragHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
741
- releaseHandler: (event: any) => void;
742
- private getColumnIndex;
743
- private getGroupIndex;
744
- private isValid;
745
- private updateDragElementClue;
746
- private updateDropElementClue;
747
- }
748
-
749
- /**
750
- * Creates a tree from the passed dataset.
751
- *
752
- * @param {object[]} dataset - The source dataset of data items.
753
- * @param {(item: object) => any} getId - A function which will return the id of the data item.
754
- * @param {(item: object) => any} getParentId - A function which will return the data item id of its parent data item.
755
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
756
- * @returns {object[]} - A collection of the generated data items that are structured in a tree.
757
- */
758
- export declare const createDataTree: (dataset: any[], getId: (item: any) => any, getParentId: (item: any) => any, subItemsField: string) => any[];
759
-
760
- /**
761
- * @hidden
762
- */
763
- export declare const createFilterComponent: (settings: FilterComponentSettings) => React_2.ComponentClass<FilterComponentProps, any>;
764
-
765
- /**
766
- * @hidden
767
- */
768
- declare interface DataItemWrapper {
769
- dataItem: any;
770
- level: number[];
771
- height: number;
772
- offsetTop: number;
773
- levelCount: number;
774
- }
775
-
776
- /**
777
- * Represents a data source with data presentation operations (filtering, sorting, paging, grouping).
778
- *
779
- * @template T - The type of data items in the data source. Defaults to any.
780
- */
781
- export declare type DataSource<T extends object = any> = {
782
- /** The array of data items. */
783
- data: T[];
784
- /**
785
- * Sets the data items in the data source.
786
- *
787
- * @param value - The array of new data items.
788
- */
789
- setData: (value: T[]) => void;
790
- /** The total number of data items. */
791
- total: number;
792
- /** The schema used for data validation and transformation. */
793
- schema: DataSourceProps<T>['schema'];
794
- /** The current sort descriptors applied to the data. */
795
- sort: SortDescriptor[] | undefined;
796
- /**
797
- * Sets the sort descriptors for the data.
798
- *
799
- * @param value - The new sort descriptors.
800
- */
801
- setSort: (value: SortDescriptor[] | undefined) => void;
802
- /** The current filter descriptor applied to the data. */
803
- filter: CompositeFilterDescriptor | undefined;
804
- /**
805
- * Sets the filter descriptor for the data.
806
- *
807
- * @param value - The new filter descriptor.
808
- */
809
- setFilter: (value: CompositeFilterDescriptor | undefined) => void;
810
- /** The current skip value for pagination. */
811
- skip: number | undefined;
812
- /**
813
- * Sets the skip value for pagination.
814
- *
815
- * @param value - The new skip value.
816
- */
817
- setSkip: (value: number | undefined) => void;
818
- /** The current take value for pagination. */
819
- take: number | undefined;
820
- /**
821
- * Sets the take value for pagination.
822
- *
823
- * @param value - The new take value.
824
- */
825
- setTake: (value: number | undefined) => void;
826
- /** The current group descriptors applied to the data. */
827
- group: GroupDescriptor[] | undefined;
828
- /**
829
- * Sets the group descriptors for the data.
830
- *
831
- * @param value - The new group descriptors.
832
- */
833
- setGroup: (value: GroupDescriptor[] | undefined) => void;
834
- /** The current data state, including sorting, filtering, and pagination. */
835
- dataState: Partial<DataSourceProps<T>>;
836
- /**
837
- * Sets the data state, including sorting, filtering, and pagination.
838
- *
839
- * @param dataState - The new data state.
840
- */
841
- setDataState: (dataState: Partial<DataSourceProps<T>>) => void;
842
- /**
843
- * Sets the total number of data items.
844
- *
845
- * @param value - The new total value.
846
- */
847
- setTotal: (value: number | undefined) => void;
848
- };
849
-
850
- /**
851
- * Describes the options for configuring the useDataSource hook.
852
- *
853
- * @template T - The type of data items in the data source. Defaults to any.
854
- */
855
- export declare type DataSourceProps<T extends object = any> = {
856
- /**
857
- * The total number of records in the data source.
858
- */
859
- total?: number;
860
- /**
861
- * The initial total number of records in the data source.
862
- */
863
- defaultTotal?: number;
864
- /**
865
- * The current data array to be managed by the hook.
866
- * This represents the data items that are currently available in the data source.
867
- * If not provided, the `defaultData` will be used as the initial value.
868
- */
869
- data?: T[];
870
- /**
871
- * The initial data array to be managed by the hook.
872
- */
873
- defaultData?: T[];
874
- /**
875
- * The current sorting configuration.
876
- */
877
- sort?: SortDescriptor[];
878
- /**
879
- * The initial sorting configuration.
880
- */
881
- defaultSort?: SortDescriptor[];
882
- /**
883
- * The current filter configuration.
884
- */
885
- filter?: CompositeFilterDescriptor;
886
- /**
887
- * The initial filter configuration.
888
- */
889
- defaultFilter?: CompositeFilterDescriptor;
890
- /**
891
- * The current number of records to skip (for paging).
892
- */
893
- skip?: number;
894
- /**
895
- * The initial number of records to skip (for paging).
896
- */
897
- defaultSkip?: number;
898
- /**
899
- * The current number of records to take per page.
900
- */
901
- take?: number;
902
- /**
903
- * The initial number of records to take per page.
904
- */
905
- defaultTake?: number;
906
- /**
907
- * The current grouping configuration.
908
- */
909
- group?: GroupDescriptor[];
910
- /**
911
- * The initial grouping configuration.
912
- */
913
- defaultGroup?: GroupDescriptor[];
914
- /**
915
- * Specifies whether filtering is enabled.
916
- *
917
- * @default true
918
- */
919
- filterable?: boolean;
920
- /**
921
- * Specifies whether sorting is enabled.
922
- *
923
- * @default true
924
- */
925
- sortable?: boolean;
926
- /**
927
- * Specifies whether paging is enabled.
928
- *
929
- * @default true
930
- */
931
- pageable?: boolean;
932
- /**
933
- * Specifies whether grouping is enabled.
934
- *
935
- * @default true
936
- */
937
- groupable?: boolean;
938
- /**
939
- * Configuration for the data schema, including model definition.
940
- */
941
- schema: {
942
- model: {
943
- /**
944
- * The field that serves as the unique identifier for records.
945
- */
946
- id: string;
947
- };
948
- };
949
- };
950
-
951
- /**
952
- * The DateFilter component used for editing date value of FilterDescriptor object.
953
- */
954
- export declare class DateFilter extends React_2.Component<DateFilterProps> {
955
- /**
956
- * @hidden
957
- */
958
- static propTypes: {
959
- filter: default_2.Validator<object>;
960
- onFilterChange: default_2.Validator<(...args: any[]) => any>;
961
- ariaLabel: default_2.Requireable<string>;
962
- };
963
- /**
964
- * @hidden
965
- */
966
- render(): JSX.Element;
967
- private onChange;
968
- }
969
-
970
- /**
971
- * @hidden
972
- */
973
- export declare class DateFilterCell extends DateFilterCell_base {
974
- }
975
-
976
- declare const DateFilterCell_base: React_2.ComponentClass<FilterComponentProps_2, any>;
977
-
978
- /**
979
- * The props of the DateFilter component.
980
- */
981
- export declare interface DateFilterProps extends TextFilterProps {
982
- }
983
-
984
- /** @hidden */
985
- export declare enum DETAIL_EXPAND_ACTION {
986
- DETAIL_EXPAND = "DETAIL_EXPAND_DETAIL_EXPAND",
987
- COLLAPSE = "DETAIL_EXPAND_COLLAPSE",
988
- TOGGLE = "DETAIL_EXPAND_TOGGLE",
989
- SET = "DETAIL_EXPAND_SET"
990
- }
991
-
992
- /** @hidden */
993
- export declare type DetailExpandAction = {
994
- type: DETAIL_EXPAND_ACTION.TOGGLE | DETAIL_EXPAND_ACTION.DETAIL_EXPAND | DETAIL_EXPAND_ACTION.COLLAPSE;
995
- id: string;
996
- } | {
997
- type: DETAIL_EXPAND_ACTION.SET;
998
- id: string;
999
- payload: boolean;
1000
- };
1001
-
1002
- /**
1003
- * The descriptor used to define the expanded state of the detail-row.
1004
- */
1005
- export declare type DetailExpandDescriptor = {
1006
- [id: string]: boolean;
1007
- };
1008
-
1009
- /** @hidden */
1010
- export declare const detailExpandReducer: (state: DetailExpandDescriptor, action: DetailExpandAction) => DetailExpandDescriptor;
1011
-
1012
- /**
1013
- * @hidden
1014
- */
1015
- export declare class DragClue extends React_2.PureComponent<any, DragClueState> {
1016
- private elementRef;
1017
- readonly state: DragClueState;
1018
- hiddenElementRef: React_2.RefObject<HTMLDivElement | null>;
1019
- get element(): HTMLDivElement | null;
1020
- constructor(props: any);
1021
- render(): JSX.Element;
1022
- }
1023
-
1024
- /**
1025
- * @hidden
1026
- */
1027
- declare interface DragClueState {
1028
- visible: boolean;
1029
- top: number;
1030
- left: number;
1031
- innerText: string;
1032
- status: 'k-i-cancel' | 'k-i-plus';
1033
- }
1034
-
1035
- /**
1036
- * @hidden
1037
- */
1038
- export declare class DropClue extends React_2.PureComponent<any, DropClueState> {
1039
- readonly state: DropClueState;
1040
- hiddenElementRef: React_2.RefObject<HTMLDivElement | null>;
1041
- constructor(props: any);
1042
- render(): JSX.Element;
1043
- }
1044
-
1045
- /**
1046
- * @hidden
1047
- */
1048
- declare interface DropClueState {
1049
- visible: boolean;
1050
- top: number;
1051
- left: number;
1052
- height: number;
1053
- }
1054
-
1055
- /**
1056
- * @hidden
1057
- */
1058
- export declare enum EDIT_ACTION {
1059
- ENTER_EDIT = "EDITING_ENTER_EDIT",
1060
- ENTER_FIELD_EDIT = "EDITING_ENTER_FIELD_EDIT",
1061
- ADD_EDIT = "EDITING_ADD_EDIT",
1062
- ADD_FIELD_EDIT = "EDITING_ADD_FIELD_EDIT",
1063
- EXIT_EDIT = "EDITING_EXIT_EDIT",
1064
- EXIT_FIELD_EDIT = "EDITING_EXIT_FIELD_EDIT",
1065
- TOGGLE_EDIT = "EDITING_TOGGLE_EDIT",
1066
- TOGGLE_FIELD_EDIT = "EDITING_TOGGLE_FIELD_EDIT"
1067
- }
1068
-
1069
- /**
1070
- * @hidden
1071
- */
1072
- export declare type EditAction = {
1073
- type: EDIT_ACTION.ENTER_EDIT | EDIT_ACTION.ADD_EDIT | EDIT_ACTION.EXIT_EDIT | EDIT_ACTION.TOGGLE_EDIT;
1074
- payload: {
1075
- id: string;
1076
- };
1077
- } | {
1078
- type: EDIT_ACTION.ENTER_FIELD_EDIT | EDIT_ACTION.ADD_FIELD_EDIT | EDIT_ACTION.EXIT_FIELD_EDIT | EDIT_ACTION.TOGGLE_FIELD_EDIT;
1079
- payload: {
1080
- id: string;
1081
- field: string;
1082
- };
1083
- };
1084
-
1085
- /**
1086
- * The `edit` descriptor used to identify which data-items are in edit mode.
1087
- *
1088
- * @example
1089
- * ```ts
1090
- * const data = [
1091
- * { id: 0, name: 'Jane Doe' },
1092
- * { id: 1, name: 'John Doe' }
1093
- * ]
1094
- *
1095
- * const edit = {
1096
- * 1: true
1097
- * }
1098
- * ```
1099
- */
1100
- export declare type EditDescriptor = {
1101
- /**
1102
- * The data-item id is in edit mode.
1103
- * If the value is `true` if the whole item (row) is in edit mode.
1104
- * If the value is an array of strings if only specific fields (cells) are in edit mode.
1105
- */
1106
- [id: string]: boolean | string[];
1107
- };
1108
-
1109
- /**
1110
- * @hidden
1111
- */
1112
- export declare const editReducer: (state: EditDescriptor | undefined, action: EditAction) => EditDescriptor;
1113
-
1114
- /**
1115
- * The EnumFilter component used for editing the value of FilterDescriptor object.
1116
- * It renders a DropDownList and allows you to choose a value from the predefined list.
1117
- */
1118
- export declare class EnumFilter extends React_2.Component<EnumFilterProps> {
1119
- /**
1120
- * @hidden
1121
- */
1122
- static propTypes: {
1123
- filter: default_2.Validator<object>;
1124
- onFilterChange: default_2.Validator<(...args: any[]) => any>;
1125
- data: default_2.Requireable<(default_2.InferProps<{
1126
- text: default_2.Requireable<string>;
1127
- value: default_2.Requireable<any>;
1128
- }> | null | undefined)[]>;
1129
- defaultItem: default_2.Requireable<any>;
1130
- ariaLabel: default_2.Requireable<string>;
1131
- };
1132
- /**
1133
- * @hidden
1134
- */
1135
- render(): JSX.Element;
1136
- private onChange;
1137
- }
1138
-
1139
- /**
1140
- * The props of the EnumFilter component.
1141
- */
1142
- export declare interface EnumFilterProps extends TextFilterProps {
1143
- /**
1144
- * A collection of text-value pairs passed to the EnumFilter DropDownList.
1145
- */
1146
- data?: Array<{
1147
- text: string;
1148
- value: any;
1149
- }>;
1150
- /**
1151
- * The defaultItem passed to the EnumFilter DropDownList.
1152
- */
1153
- defaultItem?: any;
1154
- }
1155
-
1156
- /**
1157
- * @hidden
1158
- */
1159
- export declare class Expression extends React_2.Component<ExpressionProps> {
1160
- static propTypes: {
1161
- filter: default_2.Validator<object>;
1162
- fields: default_2.Validator<any[]>;
1163
- ariaLabel: default_2.Requireable<string>;
1164
- onChange: default_2.Validator<(...args: any[]) => any>;
1165
- onRemove: default_2.Validator<(...args: any[]) => any>;
1166
- };
1167
- render(): JSX.Element;
1168
- private onFieldChange;
1169
- private onOperatorChange;
1170
- private onInputChange;
1171
- private triggerOnFilterChange;
1172
- private onFilterRemove;
1173
- }
1174
-
1175
- /**
1176
- * @hidden
1177
- */
1178
- export declare interface ExpressionChangeEvent extends BaseEvent<Expression> {
1179
- prevFilter: FilterDescriptor;
1180
- nextFilter: FilterDescriptor;
1181
- }
1182
-
1183
- /**
1184
- * @hidden
1185
- */
1186
- export declare interface ExpressionProps {
1187
- filter: FilterDescriptor;
1188
- fields: Array<FieldSettings>;
1189
- ariaLabel?: string;
1190
- onChange: (event: ExpressionChangeEvent) => void;
1191
- onRemove: (event: ExpressionRemoveEvent) => void;
1192
- }
1193
-
1194
- /**
1195
- * @hidden
1196
- */
1197
- export declare interface ExpressionRemoveEvent extends BaseEvent<Expression> {
1198
- filter: FilterDescriptor;
1199
- }
1200
-
1201
- /**
1202
- * Similar to the `Object.assign` function. Additionally, creates a new array for the subitems.
1203
- *
1204
- * @param {object} item - The source data item.
1205
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
1206
- * @param {object} propsToExtend - The props with which the source data item will be extended.
1207
- * @returns {object} - The target data item.
1208
- */
1209
- export declare const extendDataItem: (item: any, subItemsField: string, propsToExtend?: any) => any;
1210
-
1211
- /**
1212
- * @hidden
1213
- */
1214
- export declare interface ExtendedColumnProps<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends TreeColumnBaseProps<C, H, F> {
1215
- declarationIndex: number;
1216
- parentIndex: number;
1217
- colSpan: number;
1218
- rowSpan: number;
1219
- depth: number;
1220
- kFirst?: boolean;
1221
- index: number;
1222
- children: ExtendedColumnProps<C, H, F>[];
1223
- left: number;
1224
- right: number;
1225
- rightBorder: boolean;
1226
- groupable: boolean;
1227
- ariaColumnIndex: number;
1228
- isAccessible: boolean;
1229
- }
1230
-
1231
- /**
1232
- * The FieldSettings object.
1233
- */
1234
- export declare interface FieldSettings {
1235
- /**
1236
- * The field name.
1237
- */
1238
- name: string;
1239
- /**
1240
- * The field label, which will be shown in the fields DropDownList.
1241
- */
1242
- label: string;
1243
- /**
1244
- * The filter editor component. Could be any of the built-in TextFilter, NumericFilter, DateFilter, BooleanFilter or a custom component.
1245
- */
1246
- filter: any;
1247
- /**
1248
- * The collection of operators which will be passed to the operators DropDownList.
1249
- */
1250
- operators: Array<FilterOperator>;
1251
- /**
1252
- * Specifies the smallest value that can be entered.
1253
- */
1254
- min?: number;
1255
- /**
1256
- * Specifies the greatest value that can be entered.
1257
- */
1258
- max?: number;
1259
- }
1260
-
1261
- /**
1262
- * Represents the [KendoReact Filter component](https://www.telerik.com/kendo-react-ui/components/datatools/filter).
1263
- */
1264
- export declare class Filter extends React_2.Component<FilterProps> {
1265
- /**
1266
- * @hidden
1267
- */
1268
- static propTypes: {
1269
- className: default_2.Requireable<string>;
1270
- style: default_2.Requireable<object>;
1271
- fields: (props: FilterProps, propName: string) => Error | null;
1272
- ariaLabelGroup: default_2.Requireable<string>;
1273
- ariaLabelExpression: default_2.Requireable<string>;
1274
- value: default_2.Validator<object>;
1275
- onChange: default_2.Validator<(...args: any[]) => any>;
1276
- };
1277
- /**
1278
- * @hidden
1279
- */
1280
- wrapperRef: React_2.RefObject<HTMLDivElement | null>;
1281
- private navigation?;
1282
- private readonly showLicenseWatermark;
1283
- private readonly licenseMessage?;
1284
- constructor(props: FilterProps);
1285
- /**
1286
- * @hidden
1287
- */
1288
- componentDidMount(): void;
1289
- /**
1290
- * @hidden
1291
- */
1292
- render(): JSX.Element;
1293
- private onFilterChange;
1294
- private onGroupRemove;
1295
- /**
1296
- * @hidden
1297
- * Shared vertical navigation logic for ArrowUp / ArrowDown keys.
1298
- */
1299
- private navigateVertical;
1300
- private onKeyDown;
1301
- /**
1302
- * Classifies the currently active element for navigation decisions.
1303
- */
1304
- private classifyActive;
1305
- }
1306
-
1307
- /**
1308
- * @hidden
1309
- */
1310
- export declare const FILTER_ROW_CLASS = "k-table-row k-filter-row";
1311
-
1312
- /**
1313
- * Filters the provided data tree according to the specified `Array<FilterDescriptor|CompositeFilterDescriptor>`.
1314
- *
1315
- * @param {T[]} data - The data that will be filtered.
1316
- * @param {FilterDescriptor[]|CompositeFilterDescriptor[]} descriptors - The filter criteria that will be applied.
1317
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
1318
- * @returns {T[]} - The filtered data.
1319
- */
1320
- export declare function filterBy(data: any[], descriptors: FilterDescriptor[] | CompositeFilterDescriptor[], subItemsField: string): any[];
1321
-
1322
- /**
1323
- * @hidden
1324
- */
1325
- export declare interface FilterCellProps {
1326
- /**
1327
- * The column field in which the cell is located.
1328
- */
1329
- field?: string;
1330
- /**
1331
- * The function that will be called if the cell needs to notify its parent TreeList about a change.
1332
- */
1333
- onFilterChange?: (event: {
1334
- filter: Array<FilterDescriptor>;
1335
- field: string;
1336
- syntheticEvent: React.SyntheticEvent<any>;
1337
- }) => void;
1338
- /**
1339
- * The collection of `FilterDescriptor` objects that is passed by the TreeList component.
1340
- */
1341
- filter?: FilterDescriptor[];
1342
- /**
1343
- * @hidden
1344
- */
1345
- components?: {
1346
- DatePicker?: any;
1347
- DropDownList?: any;
1348
- Input?: any;
1349
- NumericTextBox?: any;
1350
- };
1351
- /**
1352
- * @hidden
1353
- */
1354
- clearButtonTitle?: string;
1355
- }
1356
-
1357
- /**
1358
- * The FilterChangeEvent object.
1359
- */
1360
- export declare interface FilterChangeEvent extends BaseEvent<Filter> {
1361
- /**
1362
- * The changed composite filter descriptor.
1363
- */
1364
- filter: CompositeFilterDescriptor;
1365
- }
1366
-
1367
- /**
1368
- * @hidden
1369
- */
1370
- export declare interface FilterComponentProps extends FilterCellProps {
1371
- /**
1372
- * The list of the operators.
1373
- */
1374
- operators?: FilterOperator[];
1375
- /**
1376
- * The accessible label of the component.
1377
- */
1378
- ariaLabel?: string;
1379
- /**
1380
- * @ hidden
1381
- */
1382
- min?: number;
1383
- /**
1384
- * @hidden
1385
- */
1386
- max?: number;
1387
- }
1388
-
1389
- /**
1390
- * @hidden
1391
- */
1392
- export declare interface FilterComponentSettings {
1393
- inputComponent: (props: any) => React_2.ReactNode;
1394
- operatorComponent: (props: any, cellProps: FilterComponentProps) => React_2.ReactNode;
1395
- emptyFilter: FilterDescriptor;
1396
- operators?: FilterOperator[];
1397
- }
1398
-
1399
- /**
1400
- * A filter operator object.
1401
- */
1402
- export declare interface FilterOperator {
1403
- /**
1404
- * The label of the operator.
1405
- */
1406
- text: string;
1407
- /**
1408
- * The operator value.
1409
- */
1410
- operator: any;
1411
- }
1412
-
1413
- /**
1414
- * The props of the Filter component.
1415
- */
1416
- export declare interface FilterProps {
1417
- /**
1418
- * Adds custom CSS classes to the Filter's root element.
1419
- */
1420
- className?: string;
1421
- /**
1422
- * Applies custom styles to the Filter's root element.
1423
- */
1424
- style?: React_2.CSSProperties;
1425
- /**
1426
- * Defines the field settings for the Filter. Each field represents a filterable column.
1427
- *
1428
- * @example
1429
- * fields: [
1430
- * { name: "ProductName", label: "Product Name", type: "string" },
1431
- * { name: "Price", label: "Price", type: "number" }
1432
- * ]
1433
- */
1434
- fields: Array<FieldSettings>;
1435
- /**
1436
- * Specifies the composite filter descriptor value.
1437
- * This object defines the current state of the applied filters.
1438
- *
1439
- * @example
1440
- * value: {
1441
- * logic: "and",
1442
- * filters: [
1443
- * { field: "ProductName", operator: "contains", value: "Chai" },
1444
- * { field: "Price", operator: "gte", value: 20 }
1445
- * ]
1446
- * }
1447
- */
1448
- value: CompositeFilterDescriptor;
1449
- /**
1450
- * Provides an accessible label for the Filter's container component.
1451
- * Similar to the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute.
1452
- */
1453
- ariaLabel?: string;
1454
- /**
1455
- * Provides an accessible label for the Filter's underlying Group component.
1456
- */
1457
- ariaLabelGroup?: string;
1458
- /**
1459
- * Provides an accessible label for the Filter's underlying Expression component.
1460
- */
1461
- ariaLabelExpression?: string;
1462
- /**
1463
- * The Filter onChange event.
1464
- *
1465
- * @param event - The event object containing the updated filter descriptor.
1466
- */
1467
- onChange: (event: FilterChangeEvent) => void;
1468
- /**
1469
- * Specifies the initial composite filter descriptor used when a new group is created.
1470
- *
1471
- * @example
1472
- * defaultGroupFilter: {
1473
- * logic: "and",
1474
- * filters: []
1475
- * }
1476
- */
1477
- defaultGroupFilter?: CompositeFilterDescriptor;
1478
- }
1479
-
1480
- /**
1481
- * @hidden
1482
- */
1483
- export declare const FilterRow: (props: FilterRowProps) => JSX.Element;
1484
-
1485
- /**
1486
- * @hidden
1487
- */
1488
- export declare interface FilterRowProps {
1489
- columns: ExtendedColumnProps[];
1490
- filter?: FilterDescriptor[];
1491
- filterChange: (event: {
1492
- filter: FilterDescriptor[];
1493
- field: string;
1494
- syntheticEvent: React_2.SyntheticEvent<any>;
1495
- }) => void;
1496
- sort?: SortDescriptor[];
1497
- ariaRowIndex?: number;
1498
- }
1499
-
1500
- /** @hidden */
1501
- export declare const findGroupExpand: (groupExpand: GroupExpandDescriptor[], group: GroupState) => GroupExpandDescriptor | undefined;
1502
-
1503
- /**
1504
- * @hidden
1505
- */
1506
- export declare function flatData(data: any[], getChildren: (dataItem: any) => any[], itemMap: (item: any) => any): DataItemWrapper[];
1507
-
1508
- /** @hidden */
1509
- export declare const flatToTree: (flat: GroupState[]) => GroupExpandDescriptor[];
1510
-
1511
- /**
1512
- * @hidden
1513
- */
1514
- export declare const getClipboardData: (event: ClipboardDataEvent, copiedItems: ClipboardItem_2[]) => string;
1515
-
1516
- /**
1517
- * @hidden
1518
- */
1519
- export declare const getClipboardItemsToPaste: (args: PopulateClipboardArgs, clipboardText: string) => string[][];
1520
-
1521
- /**
1522
- * @hidden
1523
- */
1524
- export declare const getClipboardText: (copiedItems: ClipboardItem_2[], event: ClipboardDataEvent) => string;
1525
-
1526
- /** @hidden */
1527
- export declare const getColumnIndex: (element: HTMLTableCellElement) => number | undefined;
1528
-
1529
- /** @hidden */
1530
- export declare const getDetailExpandableOptions: (expandable?: boolean | TableExpandableSettings) => TableExpandableSettings;
1531
-
1532
- /**
1533
- * @hidden
1534
- */
1535
- export declare const getEditableOptions: (editable?: boolean | TableEditableSettings) => Required<TableEditableSettings>;
1536
-
1537
- /** @hidden */
1538
- export declare const getGroupExpandableOptions: (groupExpandable?: boolean | TableGroupExpandableSettings) => TableGroupExpandableSettings;
1539
-
1540
- /**
1541
- * Get all group ids from the data.
1542
- *
1543
- * @param {{data: any[]}} options - The options to be processed.
1544
- * @returns {string[]} - Collection of all group ids from the data.
1545
- */
1546
- export declare const getGroupIds: (options: {
1547
- data: any;
1548
- }) => string[];
1549
-
1550
- /**
1551
- * @hidden
1552
- */
1553
- export declare function getIndex(event: any, parent: HTMLTableRowElement | HTMLDivElement | null): number;
1554
-
1555
- /**
1556
- * Returns the data item path in the tree based on the level parameter.
1557
- *
1558
- * @param {any[]} tree - The data tree.
1559
- * @param {number[]} level - The level of the target tree item.
1560
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
1561
- * @returns {any[]} - The path of the data item.
1562
- */
1563
- export declare const getItemPath: (tree: any[], level: number[], subItemsField?: string) => any[];
1564
-
1565
- /**
1566
- * @hidden
1567
- */
1568
- export declare const getItemsToPaste: (args: PopulateClipboardArgs, clipboardText: string) => any[][];
1569
-
1570
- /**
1571
- * @hidden
1572
- */
1573
- export declare const getItemsToUpdateOnPaste: (args: PopulateClipboardArgs, selectedItems: ClipboardItem_2[], dataLength: number, dataItemKey: string) => any[];
1574
-
1575
- /** @hidden */
1576
- export declare const getOffset: (offsetParent: any) => any;
1577
-
1578
- /**
1579
- * @hidden
1580
- */
1581
- export declare const getPastedItems: (args: PopulateClipboardArgs, clipboardText: string) => ClipboardItem_2[];
1582
-
1583
- /**
1584
- * @hidden
1585
- */
1586
- export declare const getPreviouslyCopiedItemsData: (previousCopiedItems?: ClipboardItem_2[]) => any[][];
1587
-
1588
- /** @hidden */
1589
- export declare const getRowIndex: (element: HTMLTableRowElement) => number | undefined;
1590
-
1591
- /** @hidden */
1592
- export declare const getSearchFromString: (search: CompositeFilterDescriptor, value: string) => CompositeFilterDescriptor;
1593
-
1594
- /**
1595
- * @hidden
1596
- */
1597
- export declare const getSelectedItems: (args: PopulateClipboardArgs) => ClipboardItem_2[];
1598
-
1599
- /**
1600
- * Get selected state from the component selection event.
1601
- *
1602
- * @param {{event: TableSelectionChangeEvent, selectedState: {[id: string]: boolean | number[]}, dataItemKey: string}} options
1603
- * @returns {{[id: string]: boolean | number[]}} - The new selected state.
1604
- */
1605
- export declare const getSelectedState: (options: {
1606
- event: TableSelectionChangeEvent<any>;
1607
- selectedState: {
1608
- [id: string]: boolean | number[];
1609
- };
1610
- dataItemKey: string;
1611
- }) => {
1612
- [id: string]: boolean | number[];
1613
- };
1614
-
1615
- /**
1616
- * Get selected state from the component KeyDown event.
1617
- *
1618
- * @param {{event: TableKeyDownEvent, selectedState: {[id: string]: boolean | number[]}, dataItemKey: string}} options
1619
- * @returns {{[id: string]: boolean | number[]}} - The new selected state.
1620
- */
1621
- export declare const getSelectedStateFromKeyDown: (options: {
1622
- event: TableKeyDownEvent<any>;
1623
- selectedState: {
1624
- [id: string]: boolean | number[];
1625
- };
1626
- dataItemKey: string;
1627
- }) => {
1628
- [id: string]: boolean | number[];
1629
- };
1630
-
1631
- /** @hidden */
1632
- export declare const getSelectionOptions: (selectable?: boolean | TableSelectableSettings) => Required<TableSelectableSettings>;
1633
-
1634
- /** @hidden */
1635
- export declare const getStringFromSearch: (search: CompositeFilterDescriptor | undefined) => string;
1636
-
1637
- /**
1638
- * Represents the object of the `GridClipboardEvent` event.
1639
- */
1640
- export declare interface GridClipboardEvent extends ClipboardDataEvent, ClipboardData {
1641
- }
1642
-
1643
- /**
1644
- * @hidden
1645
- */
1646
- export declare class Group extends React_2.Component<GroupProps> {
1647
- static propTypes: {
1648
- filter: default_2.Validator<object>;
1649
- fields: default_2.Validator<any[]>;
1650
- ariaLabel: default_2.Requireable<string>;
1651
- ariaLabelExpression: default_2.Requireable<string>;
1652
- onChange: default_2.Validator<(...args: any[]) => any>;
1653
- onRemove: default_2.Validator<(...args: any[]) => any>;
1654
- defaultGroupFilter: default_2.Validator<object>;
1655
- };
1656
- private static filterIdCounter;
1657
- private static filterIdMap;
1658
- private getFilterKey;
1659
- render(): JSX.Element;
1660
- private onGroupRemove;
1661
- private onAddExpression;
1662
- private onAddGroup;
1663
- private onLogicAnd;
1664
- private onLogicOr;
1665
- private changeLogic;
1666
- private replaceFilter;
1667
- private onChange;
1668
- private onRemove;
1669
- }
1670
-
1671
- /** @hidden */
1672
- export declare enum GROUP_EXPAND_ACTION {
1673
- TOGGLE = "GROUP-EXPAND_TOGGLE",
1674
- EXPAND = "GROUP-EXPAND_EXPAND",
1675
- COLLAPSE = "GROUP-EXPAND_COLLAPSE",
1676
- RESET = "GROUP-EXPAND_RESET"
1677
- }
1678
-
1679
- /**
1680
- * @hidden
1681
- */
1682
- export declare interface GroupChangeEvent extends BaseEvent<Group> {
1683
- prevFilter: CompositeFilterDescriptor;
1684
- nextFilter: CompositeFilterDescriptor;
1685
- }
1686
-
1687
- /** @hidden */
1688
- export declare type GroupExpandAction = {
1689
- type: GROUP_EXPAND_ACTION;
1690
- group: GroupState;
1691
- };
1692
-
1693
- /**
1694
- * The descriptor used to define the expanded state of a group.
1695
- */
1696
- export declare type GroupExpandDescriptor = {
1697
- value: any;
1698
- field: string;
1699
- expanded?: boolean;
1700
- groups?: GroupExpandDescriptor[];
1701
- };
1702
-
1703
- /** @hidden */
1704
- export declare const groupExpandReducer: (state: GroupExpandDescriptor[], action: GroupExpandAction, options?: TableGroupExpandableSettings) => GroupExpandDescriptor[];
1705
-
1706
- /**
1707
- * @hidden
1708
- */
1709
- export declare interface GroupProps {
1710
- filter: CompositeFilterDescriptor;
1711
- fields: Array<FieldSettings>;
1712
- ariaLabel?: string;
1713
- ariaLabelExpression?: string;
1714
- onChange: (event: GroupChangeEvent) => void;
1715
- onRemove: (event: GroupRemoveEvent) => void;
1716
- defaultGroupFilter: CompositeFilterDescriptor;
1717
- }
1718
-
1719
- /**
1720
- * @hidden
1721
- */
1722
- export declare interface GroupRemoveEvent extends BaseEvent<Group> {
1723
- filter: CompositeFilterDescriptor;
1724
- }
1725
-
1726
- /** @hidden */
1727
- export declare type GroupState = {
1728
- value: any;
1729
- field: string;
1730
- expanded?: boolean;
1731
- parents?: GroupState[];
1732
- };
1733
-
1734
- /**
1735
- * Handles navigation keys (arrows, PageUp/Down, Home/End) during editing.
1736
- * Blocks ALL navigation keys during incell editing per specification.
1737
- *
1738
- * Edit Mode Behaviors (EDIT_MODE_KEYBOARD_NAVIGATION.md):
1739
- * - **Incell**: ALL navigation keys are BLOCKED
1740
- * - **Inline**: Arrow Up/Down are blocked (can't navigate to other rows)
1741
- * - **Not editing**: Navigation keys work normally
1742
- *
1743
- * Based on specification: "ALL navigation keys are blocked when cell is editing"
1744
- *
1745
- * @param event - The keyboard event
1746
- * @param isInEdit - Whether the cell/row is in edit mode
1747
- * @param editMode - The edit mode ('incell', 'inline', or 'dialog')
1748
- * @returns true if the event was blocked
1749
- *
1750
- * @hidden
1751
- */
1752
- export declare const handleNavigationKeysInEditMode: (event: React.KeyboardEvent<HTMLElement>, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog') => boolean;
1753
-
1754
- /**
1755
- * @hidden
1756
- */
1757
- declare type handler = (prevIndex: number, nextIndex: number, nativeEvent: any) => void;
1758
-
1759
- /**
1760
- * Handles Enter key press on a stacked cell.
1761
- * Behavior varies based on edit mode.
1762
- *
1763
- * Edit Mode Behaviors (EDIT_MODE_KEYBOARD_NAVIGATION.md):
1764
- * - **Incell**: Enter confirms edit, saves changes, and closes cell
1765
- * - **Inline**: Enter moves to next field (does NOT save)
1766
- * - **Not editing**: Transitions from Cursor mode to Content mode
1767
- *
1768
- * Based on specification: "Enter or F2 while in Cursor Mode: Activates Content mode for the current cell"
1769
- *
1770
- * @param event - The keyboard event
1771
- * @param cellElement - The stacked cell wrapper element
1772
- * @param target - The event target element
1773
- * @param isInEdit - Whether the cell/row is in edit mode
1774
- * @param editMode - The edit mode ('incell', 'inline', or 'dialog')
1775
- * @returns true if the event was handled
1776
- *
1777
- * @hidden
1778
- */
1779
- export declare const handleStackedCellEnterKey: (event: React.KeyboardEvent<HTMLElement>, cellElement: HTMLElement, target: HTMLElement, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog') => boolean;
1780
-
1781
- /**
1782
- * Handles Escape key press on a stacked cell.
1783
- * Behavior varies based on edit mode.
1784
- *
1785
- * Edit Mode Behaviors (EDIT_MODE_KEYBOARD_NAVIGATION.md):
1786
- * - **Incell**: Escape cancels edit, discards changes, and closes cell
1787
- * - **Inline**: Escape cancels editing, closes row, and discards changes
1788
- * - **Not editing**: Exits Content mode and returns to Cursor mode
1789
- *
1790
- * Based on specification: "Escape Key: Exits Content mode and returns to Cursor mode"
1791
- *
1792
- * @param event - The keyboard event
1793
- * @param cellElement - The stacked cell wrapper element
1794
- * @param onEscape - Optional callback to invoke when Escape is handled (resets cell entered state)
1795
- * @param isInEdit - Whether the cell/row is in edit mode
1796
- * @param editMode - The edit mode ('incell', 'inline', or 'dialog')
1797
- * @returns true if the event was handled
1798
- *
1799
- * @hidden
1800
- */
1801
- export declare const handleStackedCellEscapeKey: (event: React.KeyboardEvent<HTMLElement>, cellElement: HTMLElement, onEscape?: () => void, onExitEdit?: () => void, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog') => boolean;
1802
-
1803
- /**
1804
- * Handles Tab key navigation within a stacked cell row.
1805
- * Implements focus trap pattern to keep navigation within the current row card.
1806
- * Tab/Shift+Tab navigates between stacked cells, stopping at row boundaries.
1807
- *
1808
- * Edit Mode Behaviors (EDIT_MODE_KEYBOARD_NAVIGATION.md):
1809
- * - **Incell**: Tab saves current cell and moves to next editable cell
1810
- * - **Inline**: Tab navigates between fields within the editing row
1811
- * - **Not editing**: Standard stacked cell navigation with focus trap
1812
- *
1813
- * Based on specification: "Tab is THE mechanism for navigating between stacked cells within a row"
1814
- * and "Trap focus within the current row card: Prevent Tab from leaving the row at boundaries"
1815
- *
1816
- * @param event - The keyboard event
1817
- * @param cellElement - The stacked cell wrapper element
1818
- * @param target - The event target element
1819
- * @param isInEdit - Whether the cell/row is in edit mode
1820
- * @param editMode - The edit mode ('incell', 'inline', or 'dialog')
1821
- * @returns true if the event was handled and should stop propagation
1822
- *
1823
- * @hidden
1824
- */
1825
- export declare const handleStackedCellTabNavigation: (event: React.KeyboardEvent<HTMLElement>, cellElement: HTMLElement, target: HTMLElement, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog', onTabToNextCell?: ((direction: number) => void) | undefined) => boolean;
1826
-
1827
- /**
1828
- * Main handler for stacked cell keyboard navigation.
1829
- * Implements the navigation pattern described in the specifications:
1830
- *
1831
- * Specifications:
1832
- * - STACKED_LAYOUT_KEYBOARD_NAVIGATION.md: Navigation modes and focus trap
1833
- * - EDIT_MODE_KEYBOARD_NAVIGATION.md: Edit mode behaviors
1834
- *
1835
- * Navigation Flow:
1836
- * - Tab/Shift+Tab: Navigate between stacked cells within the row (focus trapped)
1837
- * - Enter/F2: Transition from Cursor mode to Content mode (focus first element)
1838
- * - Escape: Exit Content mode, return to Cursor mode (focus row container)
1839
- *
1840
- * Mode Transitions:
1841
- * - Cursor Mode: Cell wrapper is focused, arrow keys navigate rows
1842
- * - Content Mode: Focusable element inside cell is focused, Tab navigates cells
1843
- *
1844
- * Focus Trap:
1845
- * Tab navigation is trapped within the current row card. At boundaries:
1846
- * - First cell + Shift+Tab: Stay on first cell (stopPropagation)
1847
- * - Last cell + Tab: Stay on last cell (stopPropagation)
1848
- *
1849
- * Edit Mode Behaviors:
1850
- * - **Incell**: All navigation keys blocked, Tab saves and moves, Enter saves, Escape cancels
1851
- * - **Inline**: Up/Down blocked, Tab between fields, Enter to next field, Escape cancels
1852
- * - **Not editing**: Normal navigation
1853
- *
1854
- * @param options - Navigation options
1855
- *
1856
- * @hidden
1857
- */
1858
- export declare const handleStackedKeyboardNavigation: (options: StackedKeyboardNavigationOptions) => void;
1859
-
1860
- /**
1861
- * @hidden
1862
- */
1863
- export declare class Header extends React_2.Component<HeaderProps> {
1864
- private element;
1865
- componentDidMount(): void;
1866
- render(): JSX.Element;
1867
- }
1868
-
1869
- /**
1870
- * @hidden
1871
- */
1872
- export declare function HeaderCell(props: HeaderCellProps): JSX.Element;
1873
-
1874
- /**
1875
- * @hidden
1876
- */
1877
- export declare interface HeaderCellBaseProps {
1878
- /**
1879
- * The column field in which the cell is located.
1880
- */
1881
- field?: string;
1882
- /**
1883
- * The title of the column in which the cell is located.
1884
- */
1885
- title?: string;
1886
- /**
1887
- * The `click` event handler of the cell.
1888
- */
1889
- onClick?: any;
1890
- /**
1891
- * The `selectionChange` event handler of the cell.
1892
- */
1893
- selectionChange: any;
1894
- /**
1895
- * The `selectionValue` event handler of the column in which the cell is located.
1896
- */
1897
- selectionValue: any;
1898
- /**
1899
- * A function for overriding the default rendering of the header cell.
1900
- */
1901
- render?: (defaultRendering: React_2.ReactNode | null, props: HeaderCellBaseProps) => React_2.ReactNode;
1902
- /**
1903
- * The current sort icons.
1904
- */
1905
- children: React_2.ReactNode;
1906
- }
1907
-
1908
- /**
1909
- * @hidden
1910
- */
1911
- export declare interface HeaderCellProps extends HeaderCellBaseProps {
1912
- /**
1913
- * A function for overriding the default rendering of the header cell.
1914
- */
1915
- render?: (defaultRendering: React_2.ReactNode | null, props: HeaderCellProps) => React_2.ReactNode;
1916
- }
1917
-
1918
- /**
1919
- * @hidden
1920
- */
1921
- export declare interface HeaderProps {
1922
- headerRow: React_2.ReactElement<any>;
1923
- filterRow?: React_2.ReactElement<any>;
1924
- columnResize?: ColumnResize;
1925
- reorderable?: boolean;
1926
- }
1927
-
1928
- /**
1929
- * @hidden
1930
- */
1931
- export declare class HeaderRow<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends React_2.Component<HeaderRowProps<C, H, F>, {}> {
1932
- cellClick: (e: React_2.MouseEvent<HTMLSpanElement> | React_2.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
1933
- cellKeyDown: (event: React_2.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
1934
- sortIcon(sortIndex: number): (false | JSX.Element)[] | null;
1935
- render(): JSX.Element[];
1936
- private cells;
1937
- }
1938
-
1939
- /**
1940
- * @hidden
1941
- */
1942
- export declare interface HeaderRowProps<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends ColumnDraggableProps {
1943
- sortable?: SortSettings;
1944
- sortChange?: (e: React_2.SyntheticEvent<any>, descriptors: SortDescriptor[], field?: string) => void;
1945
- filterChange?: (e: React_2.SyntheticEvent<any>, descriptors: FilterDescriptor[], field?: string) => void;
1946
- sort?: SortDescriptor[];
1947
- columns: ExtendedColumnProps<C, H, F>[];
1948
- columnsMap: number[][];
1949
- selectionChange: (e: any) => void;
1950
- cellRender?: (defaultRendering: React_2.ReactNode | null, props: HeaderCellProps) => React_2.ReactNode;
1951
- columnResize?: ColumnResize<C, H, F>;
1952
- columnMenu?: React_2.ComponentType<ColumnMenuProps>;
1953
- columnMenuFilter?: CompositeFilterDescriptor[];
1954
- columnMenuFilterChange?: (e: React_2.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field?: string) => void;
1955
- }
1956
-
1957
- /**
1958
- * @hidden
1959
- */
1960
- export declare function HeaderSelectionCell(props: HeaderSelectionCellProps): JSX.Element;
1961
-
1962
- /**
1963
- * @hidden
1964
- */
1965
- export declare interface HeaderSelectionCellProps extends HeaderCellProps {
1966
- inputId: string;
1967
- }
1968
-
1969
- export declare const HeaderTdElement: {
1970
- (props: HeaderTdElementProps): JSX.Element;
1971
- displayName: string;
1972
- };
1973
-
1974
- export declare interface HeaderTdElementProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
1975
- /** ARIA sort state indicating column sorting direction */
1976
- ariaSort?: 'none' | 'ascending' | 'descending';
1977
- /** ARIA label for accessibility */
1978
- ariaLabel?: string;
1979
- /** ARIA column index for screen readers */
1980
- ariaColumnIndex?: number;
1981
- /** ARIA selected state for the header cell */
1982
- ariaSelected?: boolean;
1983
- /** ARIA description for additional context */
1984
- ariaDescription?: string;
1985
- /** Number of columns the cell spans */
1986
- colSpan?: number;
1987
- /** Number of rows the cell spans */
1988
- rowSpan?: number;
1989
- /** ARIA role for the element */
1990
- role?: string;
1991
- /** Unique identifier for the column */
1992
- columnId: string;
1993
- /** CSS class names for styling */
1994
- className?: string;
1995
- /** Inline styles for the element */
1996
- style?: any;
1997
- /** Child elements to render inside the header cell */
1998
- children?: any;
1999
- /** Keyboard event handler */
2000
- onKeyDown?: any;
2001
- /** Whether the cell supports keyboard navigation */
2002
- navigatable?: boolean;
2003
- }
2004
-
2005
- export declare const HeaderThElement: {
2006
- (props: HeaderThElementProps): JSX.Element;
2007
- displayName: string;
2008
- };
2009
-
2010
- export declare interface HeaderThElementProps extends React_2.ThHTMLAttributes<HTMLTableCellElement> {
2011
- /** ARIA sort state indicating column sorting direction */
2012
- ariaSort?: 'none' | 'ascending' | 'descending';
2013
- /** ARIA label for accessibility */
2014
- ariaLabel?: string;
2015
- /** ARIA column index for screen readers */
2016
- ariaColumnIndex?: number;
2017
- /** ARIA selected state for the header cell */
2018
- ariaSelected?: boolean;
2019
- /** ARIA description for additional context */
2020
- ariaDescription?: string;
2021
- /** Number of columns the cell spans */
2022
- colSpan?: number;
2023
- /** Number of rows the cell spans */
2024
- rowSpan?: number;
2025
- /** ARIA role for the element */
2026
- role?: string;
2027
- /** Unique identifier for the column */
2028
- columnId: string;
2029
- /** CSS class names for styling */
2030
- className?: string;
2031
- /** Inline styles for the element */
2032
- style?: any;
2033
- /** Child elements to render inside the header cell */
2034
- children?: any;
2035
- /** Keyboard event handler */
2036
- onKeyDown?: any;
2037
- /** Whether the cell supports keyboard navigation */
2038
- navigatable?: boolean;
2039
- }
2040
-
2041
- /** @hidden */
2042
- export declare const isExpanded: (groupExpand: GroupExpandDescriptor[], group: GroupState) => boolean;
2043
-
2044
- /** @hidden */
2045
- export declare const isInNonSelectable: (target: HTMLElement | null) => boolean;
2046
-
2047
- /**
2048
- * @hidden
2049
- */
2050
- export declare function isRtl(element: HTMLElement | null): boolean;
2051
-
2052
- /**
2053
- * @hidden
2054
- */
2055
- export declare const itemToString: (item: any, cols: string[]) => string | null;
2056
-
2057
- /**
2058
- * @hidden
2059
- */
2060
- export declare const KEYBOARD_NAV_CANCEL_BUTTON_CLASS = "k-grid-cancel-command";
2061
-
2062
- /**
2063
- * @hidden
2064
- */
2065
- export declare const KEYBOARD_NAV_DATA_BODY = "data-keyboardnavbody";
2066
-
2067
- /**
2068
- * @hidden
2069
- */
2070
- export declare const KEYBOARD_NAV_DATA_HEADER = "data-keyboardnavheader";
2071
-
2072
- /**
2073
- * @hidden
2074
- */
2075
- export declare const KEYBOARD_NAV_DATA_ID = "data-keyboardnavid";
2076
-
2077
- /**
2078
- * @hidden
2079
- */
2080
- export declare const KEYBOARD_NAV_DATA_LEVEL = "data-keyboardnavlevel";
2081
-
2082
- /**
2083
- * @hidden
2084
- */
2085
- export declare const KEYBOARD_NAV_DATA_SCOPE = "data-keyboardnavscope";
2086
-
2087
- /**
2088
- * @hidden
2089
- */
2090
- export declare const KEYBOARD_NAV_DATA_ZONE = "data-keyboardnavzone";
2091
-
2092
- /**
2093
- * @hidden
2094
- */
2095
- export declare const KEYBOARD_NAV_EDIT_BUTTON_CLASS = "k-grid-edit-command";
2096
-
2097
- /**
2098
- * @hidden
2099
- */
2100
- export declare const KEYBOARD_NAV_FILTER_COL_SUFFIX = "_filter";
2101
-
2102
- /**
2103
- * @hidden
2104
- */
2105
- export declare function mapColumns(columns: Array<{
2106
- parentIndex: number;
2107
- colSpan: number;
2108
- rowSpan: number;
2109
- depth: number;
2110
- kFirst?: boolean;
2111
- children: any[];
2112
- width?: string | number;
2113
- locked?: boolean;
2114
- index: number;
2115
- left: number;
2116
- right: number;
2117
- rightBorder: boolean;
2118
- ariaColumnIndex: number;
2119
- }>, changedColumnLength?: boolean): number[][];
2120
-
2121
- /**
2122
- * Changes the `subItems` collection of each data item which matches the passed `condition`.
2123
- *
2124
- * @param {any[]} data - The data tree.
2125
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
2126
- * @param {(item: object) => Boolean} condition - A function that will be executed for each data item and
2127
- * will return `true` for items that have to change the subitems collection.
2128
- * @param {(subItems: object[]) => object[]} change - A function which
2129
- * has as a parameter the subitems collection of the matched items and which will return the new subitems collection.
2130
- * @returns {any[]} - The new data tree.
2131
- */
2132
- export declare const modifySubItems: (data: any[], subItemsField: string, condition: (item: any) => boolean, change: (subItems: any[]) => any[]) => any[];
2133
-
2134
- /**
2135
- * Moves the targeted item in the tree to another position.
2136
- *
2137
- * @param {any[]} data - The data tree.
2138
- * @param {number[]} target - The level of the target tree item which will be moved.
2139
- * @param {number[] | null} destination - The level of the destination tree item where the target item will be moved in.
2140
- * If it is null, the target item will be added at the root level.
2141
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
2142
- * @returns {any[]} - The new data tree.
2143
- */
2144
- export declare const moveTreeItem: (data: any[], target: number[], destination: number[] | null, subItemsField: string) => any[];
2145
-
2146
- /**
2147
- * The navigatable modes
2148
- */
2149
- export declare enum NavigatableMode {
2150
- incell = "incell",
2151
- inline = "inline"
2152
- }
2153
-
2154
- /**
2155
- * The navigatable additional settings
2156
- */
2157
- export declare interface NavigatableSettings {
2158
- /**
2159
- * The available values are:
2160
- * * `incell`
2161
- * * `inline`
2162
- */
2163
- mode?: NavigatableMode;
2164
- }
2165
-
2166
- /**
2167
- * @hidden
2168
- */
2169
- export declare function nextColumn(columns: {
2170
- depth: number;
2171
- locked?: boolean;
2172
- }[], current: number): {
2173
- depth: number;
2174
- locked?: boolean | undefined;
2175
- } | null;
2176
-
2177
- /**
2178
- * @hidden
2179
- */
2180
- export declare const normalize: (...settings: (SortSettings | ColumnSortSettings)[]) => any;
2181
-
2182
- /**
2183
- * The NumericFilter component used for editing numeric value of FilterDescriptor object.
2184
- */
2185
- export declare class NumericFilter extends React_2.Component<NumericFilterProps> {
2186
- /**
2187
- * @hidden
2188
- */
2189
- static propTypes: {
2190
- filter: default_2.Validator<object>;
2191
- onFilterChange: default_2.Validator<(...args: any[]) => any>;
2192
- };
2193
- /**
2194
- * @hidden
2195
- */
2196
- render(): JSX.Element;
2197
- private onChange;
2198
- }
2199
-
2200
- /**
2201
- * @hidden
2202
- */
2203
- export declare class NumericFilterCell extends NumericFilterCell_base {
2204
- }
2205
-
2206
- declare const NumericFilterCell_base: React_2.ComponentClass<FilterComponentProps_2, any>;
2207
-
2208
- /**
2209
- * The props of the NumericFilter component.
2210
- */
2211
- export declare interface NumericFilterProps extends TextFilterProps {
2212
- /**
2213
- * Specifies the smallest value that can be entered.
2214
- */
2215
- min?: number;
2216
- /**
2217
- * Specifies the greatest value that can be entered.
2218
- */
2219
- max?: number;
2220
- }
2221
-
2222
- /**
2223
- * Represents the operators for the TextFilter, NumericFilter, DateFilter and BooleanFilter components.
2224
- *
2225
- * The text field of each operator object will be resolved according to the
2226
- * [localization messages](https://www.telerik.com/kendo-react-ui/components/datatools/globalization#toc-messages).
2227
- */
2228
- export declare class Operators {
2229
- /**
2230
- * An array containing the operators for the TextFilter component.
2231
- *
2232
- * The operators are:
2233
- *
2234
- * - { text: 'filter.containsOperator', operator: 'contains' }
2235
- * - { text: 'filter.notContainsOperator', operator: 'doesnotcontain' }
2236
- * - { text: 'filter.eqOperator', operator: 'eq' }
2237
- * - { text: 'filter.notEqOperator', operator: 'neq' }
2238
- * - { text: 'filter.startsWithOperator', operator: 'startswith' }
2239
- * - { text: 'filter.endsWithOperator', operator: 'endswith' }
2240
- * - { text: 'filter.isNullOperator', operator: 'isnull' }
2241
- * - { text: 'filter.isNotNullOperator', operator: 'isnotnull' }
2242
- * - { text: 'filter.isEmptyOperator', operator: 'isempty' }
2243
- * - { text: 'filter.isNotEmptyOperator', operator: 'isnotempty' }
2244
- */
2245
- static get text(): FilterOperator[];
2246
- /**
2247
- * An array containing the operators for the NumericFilter component.
2248
- *
2249
- * The operators are:
2250
- *
2251
- * - { text: 'filter.eqOperator', operator: 'eq' }
2252
- * - { text: 'filter.notEqOperator', operator: 'neq' }
2253
- * - { text: 'filter.gteOperator', operator: 'gte' }
2254
- * - { text: 'filter.gtOperator', operator: 'gt' }
2255
- * - { text: 'filter.lteOperator', operator: 'lte' }
2256
- * - { text: 'filter.ltOperator', operator: 'lt' }
2257
- * - { text: 'filter.isNullOperator', operator: 'isnull' }
2258
- * - { text: 'filter.isNotNullOperator', operator: 'isnotnull' }
2259
- */
2260
- static get numeric(): FilterOperator[];
2261
- /**
2262
- * An array containing the operators for the DateFilter component.
2263
- *
2264
- * The operators are:
2265
- *
2266
- * - { text: 'filter.eqOperator', operator: 'eq' }
2267
- * - { text: 'filter.notEqOperator', operator: 'neq' }
2268
- * - { text: 'filter.afterOrEqualOperator', operator: 'gte' }
2269
- * - { text: 'filter.afterOperator', operator: 'gt' }
2270
- * - { text: 'filter.beforeOperator', operator: 'lt' }
2271
- * - { text: 'filter.beforeOrEqualOperator', operator: 'lte' }
2272
- * - { text: 'filter.isNullOperator', operator: 'isnull' }
2273
- * - { text: 'filter.isNotNullOperator', operator: 'isnotnull' }
2274
- */
2275
- static get date(): FilterOperator[];
2276
- /**
2277
- * An array containing the operators for the BooleanFilter component.
2278
- *
2279
- * The operators are:
2280
- *
2281
- * - { text: 'filter.eqOperator', operator: 'eq' }
2282
- * - { text: 'filter.notEqOperator', operator: 'neq' }
2283
- */
2284
- static get boolean(): FilterOperator[];
2285
- }
2286
-
2287
- /**
2288
- * Orders the specified tree according to the provided sort descriptors.
2289
- *
2290
- * @param {T[]} data - The data that will be sorted.
2291
- * @param {SortDescriptor[]} descriptors - The descriptors by which the data will be sorted.
2292
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
2293
- * @returns {T[]} - The sorted data.
2294
- */
2295
- export declare function orderBy(data: any[], descriptors: SortDescriptor[], subItemsField: string): any[];
2296
-
2297
- /**
2298
- * Represents the object of the `onPageChange` event.
2299
- */
2300
- export declare interface PageChangeEvent extends BasePageChangeEvent {
2301
- /**
2302
- * An event target.
2303
- */
2304
- target: PagerHandle;
2305
- /**
2306
- * A React Synthetic Event.
2307
- */
2308
- syntheticEvent: React.SyntheticEvent<any>;
2309
- /**
2310
- * A native DOM event.
2311
- */
2312
- nativeEvent: any;
2313
- /**
2314
- * A target change event.
2315
- */
2316
- targetEvent: PagerTargetEvent;
2317
- }
2318
-
2319
- export declare const Pager: React_2.ForwardRefExoticComponent<PagerProps & React_2.RefAttributes<PagerHandle>>;
2320
-
2321
- export declare interface PagerHandle {
2322
- /**
2323
- * Represents the element of the Pager component.
2324
- */
2325
- element: HTMLDivElement | null;
2326
- /**
2327
- * Represents the props of the Pager component.
2328
- */
2329
- props: Readonly<PagerProps>;
2330
- }
2331
-
2332
- export declare interface PagerProps {
2333
- /**
2334
- * The total number of records.
2335
- */
2336
- total: number;
2337
- /**
2338
- * The number of records that will be skipped.
2339
- */
2340
- skip: number;
2341
- /**
2342
- * The number of records that will be taken.
2343
- */
2344
- take: number;
2345
- /**
2346
- * Sets additional classes to the Pager.
2347
- */
2348
- className?: string;
2349
- /**
2350
- * The styles that are applied to the Pager.
2351
- */
2352
- style?: React.CSSProperties;
2353
- /**
2354
- * Sets the maximum numeric buttons count before the buttons are collapsed.
2355
- */
2356
- buttonCount?: number;
2357
- /**
2358
- * Toggles the information about the current page and the total number of records.
2359
- */
2360
- info?: boolean;
2361
- /**
2362
- * Defines the type of the pager.
2363
- * * (Default) `numeric` — Renders buttons with numbers.
2364
- * * `input` — Renders an input field for typing the page number.
2365
- */
2366
- type?: 'numeric' | 'input';
2367
- /**
2368
- * Displays a menu for selecting the page size.
2369
- */
2370
- pageSizes?: Array<number> | Array<number | string>;
2371
- /**
2372
- * Sets the selected value of the page size Dropdownlist.
2373
- * It is useful when the selected value could also be a string not only a number.
2374
- */
2375
- pageSizeValue?: string | number;
2376
- /**
2377
- * Toggles the **Previous** and **Next** buttons.
2378
- */
2379
- previousNext?: boolean;
2380
- /**
2381
- * Defines if the pager will be responsive.
2382
- * If true, hides the tools that do not fit to the available space.
2383
- *
2384
- * @default `true`
2385
- */
2386
- responsive?: boolean;
2387
- /**
2388
- * Configures the `size` of the Pager.
2389
- *
2390
- * The available options are:
2391
- * - small
2392
- * - medium
2393
- * - large
2394
- * - null&mdash;Does not set a size `className`.
2395
- *
2396
- * @default `medium`
2397
- */
2398
- size?: null | 'small' | 'medium' | 'large';
2399
- /**
2400
- * Fires when the page of the Pager is changed. You have to handle the event yourself and page the data.
2401
- */
2402
- onPageChange?: ((event: PageChangeEvent) => void) | ((event: BasePageChangeEvent) => void);
2403
- /**
2404
- * Useful for modifying the Pager messages.
2405
- */
2406
- messagesMap?: (messageKey: string) => {
2407
- messageKey: string;
2408
- defaultMessage: string;
2409
- };
2410
- /**
2411
- * Sets the direction of the component.
2412
- */
2413
- dir?: string;
2414
- /**
2415
- * If set to `true`, the user can use dedicated shortcuts to interact with the Pager.
2416
- * By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
2417
- */
2418
- navigatable?: boolean;
2419
- /**
2420
- * Controls the disabled state of the Pager. Defaults to `false`.
2421
- */
2422
- disabled?: boolean;
2423
- /**
2424
- * Providing different rendering of the page sizes select element based on the screen dimensions.
2425
- */
2426
- adaptive?: boolean;
2427
- /**
2428
- * Specifies the text that is rendered as title in the adaptive page sizes select element.
2429
- */
2430
- adaptiveTitle?: string;
2431
- }
2432
-
2433
- /**
2434
- * A Pager target event.
2435
- */
2436
- export declare interface PagerTargetEvent {
2437
- [key: string]: any;
2438
- /**
2439
- * An event target.
2440
- */
2441
- target?: any;
2442
- /**
2443
- * An event value.
2444
- */
2445
- value?: any;
2446
- }
2447
-
2448
- /**
2449
- * Represents the `PopulateClipboardArgs` event argument.
2450
- */
2451
- export declare interface PopulateClipboardArgs {
2452
- /**
2453
- * Represents the base object of the `ClipboardDataEvent` event.
2454
- */
2455
- event: ClipboardDataEvent;
2456
- /**
2457
- * Represents the current selected state of the data.
2458
- */
2459
- selectedState: SelectDescriptor;
2460
- /**
2461
- * Passes the data currently displayed.
2462
- */
2463
- data: any[];
2464
- /**
2465
- * Passes dataItemKey name of the field that could be used to make difference between dataItems.
2466
- */
2467
- dataItemKey?: string;
2468
- /**
2469
- * Passes subItemsField that will be used in grouping cases.
2470
- */
2471
- subItemsField?: string;
2472
- /**
2473
- * Previous copied items.
2474
- */
2475
- previousCopiedItems?: ClipboardItem_2[];
2476
- }
2477
-
2478
- /**
2479
- * A function used to populate the Clipboard data.
2480
- */
2481
- export declare const populateClipboardData: (args: PopulateClipboardArgs) => ClipboardData;
2482
-
2483
- /**
2484
- * @hidden
2485
- */
2486
- export declare function readColumns<C = CellProps, H = HeaderCellProps, F = FilterCellProps>(elements: TreeColumnBaseProps<C, H, F>[], idInfo: {
2487
- prevId: number;
2488
- idPrefix: string;
2489
- }, depth?: number): ExtendedColumnProps<C, H, F>[];
2490
-
2491
- /** @hidden */
2492
- export declare const relativeContextElement: (element: any) => any;
2493
-
2494
- /**
2495
- * Represents a remote data source with CRUD operations (Create, Read, Update, Delete).
2496
- *
2497
- * @template T - The type of data items in the data source. Defaults to any.
2498
- */
2499
- export declare type RemoteDataSource<T extends object = any> = DataSource<T> & {
2500
- /** Set of original data items read from the remote source, indexed by ID */
2501
- reads: Map<string | number | symbol | null, T>;
2502
- /** Map of created items that need to be synced */
2503
- creates: Map<string | number | symbol | null, T>;
2504
- /** Map of updated items that need to be synced */
2505
- updates: Map<string | number | symbol | null, T>;
2506
- /** Map of items marked for deletion that need to be synced */
2507
- deletes: Map<string | number | symbol | null, T>;
2508
- /** Map of dirty fields for each item */
2509
- dirty: Map<string | number | symbol | null, Set<string>>;
2510
- /** Map of errors for each item */
2511
- errors: Map<string | number | symbol | null, any[]>;
2512
- /** Adds an error to an item */
2513
- addError: (params: {
2514
- error: any;
2515
- data?: T;
2516
- }) => void;
2517
- /** Removes an error from an item */
2518
- removeError: (params: {
2519
- error: any;
2520
- }) => void;
2521
- /** Removes all errors for an item */
2522
- removeErrors: (params: {
2523
- data: T;
2524
- }) => void;
2525
- /** Removes all errors */
2526
- removeAllErrors: () => void;
2527
- /** Reads data from the remote source */
2528
- read: (state?: State) => Promise<T[]>;
2529
- /** Creates a new item */
2530
- create: (params: {
2531
- data: T;
2532
- }) => void;
2533
- /** Updates an existing item */
2534
- update: (params: {
2535
- data: T;
2536
- field?: string;
2537
- }) => void;
2538
- /** Deletes an item */
2539
- delete: (params: {
2540
- data: T;
2541
- }) => void;
2542
- /** Syncs all pending changes with the remote source */
2543
- sync: () => Promise<void>;
2544
- /** Syncs a single item with the remote source */
2545
- syncItem: (params: {
2546
- data: T;
2547
- }) => Promise<void>;
2548
- /** Removes an item from creates */
2549
- removeCreate: (params: {
2550
- data: T;
2551
- }) => void;
2552
- /** Removes an item from updates */
2553
- removeUpdate: (params: {
2554
- data: T;
2555
- }) => void;
2556
- /** Removes an item from deletes */
2557
- removeDelete: (params: {
2558
- data: T;
2559
- }) => void;
2560
- /** Adds an item to reads */
2561
- pushCreate: (params: {
2562
- data: T;
2563
- }) => void;
2564
- /** Updates an item in reads */
2565
- pushUpdate: (params: {
2566
- data: T;
2567
- }) => void;
2568
- /** Removes an item from reads */
2569
- pushDelete: (params: {
2570
- data: T;
2571
- }) => void;
2572
- /** Discards all pending changes */
2573
- discard: () => void;
2574
- };
2575
-
2576
- /**
2577
- * Configuration properties for the remote data source.
2578
- * Extends the basic DataSourceProps with remote data operations capabilities.
2579
- *
2580
- * @template T - The type of data items in the data source. Defaults to any object.
2581
- */
2582
- export declare interface RemoteDataSourceProps<T extends object = any> extends DataSourceProps<T> {
2583
- /**
2584
- * Map of original data items read from the remote source, indexed by ID.
2585
- */
2586
- reads?: Map<string | number | symbol | null, T>;
2587
- /**
2588
- * Map of created items that need to be synced with the remote source.
2589
- */
2590
- creates?: Map<string | number | symbol | null, T>;
2591
- /**
2592
- * Map of updated items that need to be synced with the remote source.
2593
- */
2594
- updates?: Map<string | number | symbol | null, T>;
2595
- /**
2596
- * Map of items marked for deletion that need to be synced with the remote source.
2597
- */
2598
- deletes?: Map<string | number | symbol | null, T>;
2599
- /**
2600
- * Determines if filtering operations should be performed on the server.
2601
- * When true, filter parameters are sent to the server during read operations.
2602
- *
2603
- * @default true
2604
- */
2605
- serverFiltering?: boolean;
2606
- /**
2607
- * Determines if sorting operations should be performed on the server.
2608
- * When true, sort parameters are sent to the server during read operations.
2609
- *
2610
- * @default true
2611
- */
2612
- serverSorting?: boolean;
2613
- /**
2614
- * Determines if paging operations should be performed on the server.
2615
- * When true, skip and take parameters are sent to the server during read operations.
2616
- *
2617
- * @default true
2618
- */
2619
- serverPaging?: boolean;
2620
- /**
2621
- * Determines if grouping operations should be performed on the server.
2622
- * When true, group parameters are sent to the server during read operations.
2623
- *
2624
- * @default true
2625
- */
2626
- serverGrouping?: boolean;
2627
- /**
2628
- * Configuration for CRUD operations transport.
2629
- * Defines how data is sent to and received from the server.
2630
- */
2631
- transport?: {
2632
- /**
2633
- * Configuration for create operations.
2634
- * Can be either an object specifying the endpoint configuration or a function for custom implementation.
2635
- */
2636
- create?: {
2637
- /**
2638
- * URL for the create operation. Can be a string or a function that returns a string based on the data item.
2639
- */
2640
- url: string | ((dataItem: T) => string);
2641
- /**
2642
- * HTTP method to use for the create operation.
2643
- *
2644
- * @default "POST"
2645
- */
2646
- method?: string;
2647
- /**
2648
- * Content-Type header to use for the request.
2649
- *
2650
- * @default "application/json"
2651
- */
2652
- contentType?: string;
2653
- /**
2654
- * Additional data to include in the request.
2655
- */
2656
- data?: {
2657
- [key: string]: any;
2658
- };
2659
- /**
2660
- * Function that transforms the request data before sending it to the server.
2661
- *
2662
- * @param data - The data item to transform
2663
- * @returns Transformed data
2664
- */
2665
- parameterMap?: (data: T) => any;
2666
- /**
2667
- * Callback executed when the create operation is successful.
2668
- *
2669
- * @param data - The created data item
2670
- */
2671
- onSuccess?: (data: T) => void;
2672
- /**
2673
- * Function to process the server response.
2674
- *
2675
- * @param response - The server response
2676
- * @returns Processed data item or null
2677
- */
2678
- onResponse?: (response: any) => T | null;
2679
- /**
2680
- * Callback executed when the create operation fails.
2681
- *
2682
- * @param error - The error from the server
2683
- */
2684
- onError?: (error: any) => void;
2685
- } | ((options: {
2686
- data: T;
2687
- }) => Promise<T>);
2688
- /**
2689
- * Configuration for read operations.
2690
- * Can be either an object specifying the endpoint configuration or a function for custom implementation.
2691
- */
2692
- read?: {
2693
- /**
2694
- * URL for the read operation. Can be a string or a function that returns a string.
2695
- */
2696
- url: string | (() => string);
2697
- /**
2698
- * HTTP method to use for the read operation.
2699
- *
2700
- * @default "GET"
2701
- */
2702
- method?: string;
2703
- /**
2704
- * Content-Type header to use for the request.
2705
- */
2706
- contentType?: string;
2707
- /**
2708
- * Additional data to include in the request.
2709
- */
2710
- data?: {
2711
- [key: string]: any;
2712
- };
2713
- /**
2714
- * Function that transforms the request data before sending it to the server.
2715
- *
2716
- * @param data - The request parameters including filter, paging, sorting, and grouping info
2717
- * @returns Transformed request parameters
2718
- */
2719
- parameterMap?: (data: {
2720
- filter?: CompositeFilterDescriptor;
2721
- skip?: number;
2722
- take?: number;
2723
- sort?: SortDescriptor[];
2724
- group?: GroupDescriptor[];
2725
- }) => any;
2726
- /**
2727
- * Callback executed when the read operation is successful.
2728
- *
2729
- * @param data - The retrieved data items
2730
- */
2731
- onSuccess?: (data: T[]) => void;
2732
- /**
2733
- * Function to process the server response.
2734
- *
2735
- * @param response - The server response
2736
- * @returns Processed data item or null
2737
- */
2738
- onResponse?: (response: any) => T | null;
2739
- /**
2740
- * Callback executed when the read operation fails.
2741
- *
2742
- * @param error - The error from the server
2743
- */
2744
- onError?: (error: any) => void;
2745
- } | ((options: {
2746
- filter?: CompositeFilterDescriptor;
2747
- skip?: number;
2748
- take?: number;
2749
- sort?: SortDescriptor[];
2750
- group?: GroupDescriptor[];
2751
- onSuccess?: (data: T[]) => void;
2752
- onResponse?: (response: any) => T | null;
2753
- onError?: (error: any) => void;
2754
- }) => Promise<T[]>);
2755
- /**
2756
- * Configuration for update operations.
2757
- * Can be either an object specifying the endpoint configuration or a function for custom implementation.
2758
- */
2759
- update?: {
2760
- /**
2761
- * URL for the update operation. Can be a string or a function that returns a string based on the data item.
2762
- */
2763
- url: string | ((dataItem: T) => string);
2764
- /**
2765
- * HTTP method to use for the update operation.
2766
- *
2767
- * @default "PUT"
2768
- */
2769
- method?: string;
2770
- /**
2771
- * Content-Type header to use for the request.
2772
- *
2773
- * @default "application/json"
2774
- */
2775
- contentType?: string;
2776
- /**
2777
- * Additional data to include in the request.
2778
- */
2779
- data?: {
2780
- [key: string]: any;
2781
- };
2782
- /**
2783
- * Function that transforms the request data before sending it to the server.
2784
- *
2785
- * @param data - The data item to transform
2786
- * @returns Transformed data
2787
- */
2788
- parameterMap?: (data: T) => any;
2789
- /**
2790
- * Callback executed when the update operation is successful.
2791
- *
2792
- * @param data - The updated data item
2793
- */
2794
- onSuccess?: (data: T) => void;
2795
- /**
2796
- * Function to process the server response.
2797
- *
2798
- * @param response - The server response
2799
- * @returns Processed data item or null
2800
- */
2801
- onResponse?: (response: any) => T | null;
2802
- /**
2803
- * Callback executed when the update operation fails.
2804
- *
2805
- * @param error - The error from the server
2806
- */
2807
- onError?: (error: any) => void;
2808
- } | ((options: {
2809
- data: T;
2810
- }) => Promise<T>);
2811
- /**
2812
- * Configuration for delete operations.
2813
- * Can be either an object specifying the endpoint configuration or a function for custom implementation.
2814
- */
2815
- delete?: {
2816
- /**
2817
- * URL for the delete operation. Can be a string or a function that returns a string based on the data item.
2818
- */
2819
- url: string | ((dataItem: T) => string);
2820
- /**
2821
- * HTTP method to use for the delete operation.
2822
- *
2823
- * @default "DELETE"
2824
- */
2825
- method?: string;
2826
- /**
2827
- * Content-Type header to use for the request.
2828
- */
2829
- contentType?: string;
2830
- /**
2831
- * Additional data to include in the request.
2832
- */
2833
- data?: {
2834
- [key: string]: any;
2835
- };
2836
- /**
2837
- * Function that transforms the request data before sending it to the server.
2838
- *
2839
- * @param data - The data item to transform
2840
- * @returns Transformed data
2841
- */
2842
- parameterMap?: (data: T) => any;
2843
- /**
2844
- * Callback executed when the delete operation is successful.
2845
- *
2846
- * @param data - The deleted data item
2847
- */
2848
- onSuccess?: (data: T) => void;
2849
- /**
2850
- * Function to process the server response.
2851
- *
2852
- * @param response - The server response
2853
- * @returns Processed data item or null
2854
- */
2855
- onResponse?: (response: any) => T | null;
2856
- /**
2857
- * Callback executed when the delete operation fails.
2858
- *
2859
- * @param error - The error from the server
2860
- */
2861
- onError?: (error: any) => void;
2862
- } | ((options: {
2863
- data: T;
2864
- }) => Promise<T>);
2865
- };
2866
- /**
2867
- * Schema configuration for parsing and mapping server responses.
2868
- * Extends the base DataSourceProps schema with additional properties for remote data.
2869
- */
2870
- schema: DataSourceProps['schema'] & {
2871
- /**
2872
- * Specifies the field in the response that contains the data items,
2873
- * or a function that extracts the data items from the response.
2874
- */
2875
- data?: string | ((data: any) => T[]);
2876
- /**
2877
- * Specifies the field in the response that contains the total count,
2878
- * or a function that extracts the total count from the response.
2879
- */
2880
- total?: string | ((data: any) => number);
2881
- /**
2882
- * Specifies the field in the response that contains error information,
2883
- * or a function that extracts error information from the response.
2884
- */
2885
- errors?: string | ((data: any) => any);
2886
- };
2887
- }
2888
-
2889
- /**
2890
- * Removes the items from the passed `data` which match the passed `condition`.
2891
- *
2892
- * @param {any[]} data - The data tree.
2893
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
2894
- * @param {(item: object) => Boolean} condition - A function that will be executed for each data item
2895
- * in the tree data and the items for which returns true will be removed.
2896
- * @returns {any[]} - The new data tree.
2897
- */
2898
- export declare const removeItems: (data: any[], subItemsField: string, condition: (item: any) => boolean) => any[];
2899
-
2900
- /**
2901
- * Represents the SearchField that configures the way a data field is searched.
2902
- */
2903
- export declare interface SearchField {
2904
- /**
2905
- * The name of the searched field.
2906
- */
2907
- field: string;
2908
- /**
2909
- * The string operator that will be used for search.
2910
- */
2911
- operator?: string;
2912
- /**
2913
- * Defines if the search is case sensitive.
2914
- */
2915
- ignoreCase?: boolean;
2916
- }
2917
-
2918
- /**
2919
- * The descriptor used to define the selected state of a data-item.
2920
- */
2921
- export declare type SelectDescriptor = {
2922
- [id: string]: boolean | number[];
2923
- };
2924
-
2925
- /**
2926
- * @hidden
2927
- * CSS selectors for keyboard navigation.
2928
- * Uses only structural CSS classes - no data attributes or title attributes
2929
- * to ensure stability across localizations and DOM changes.
2930
- */
2931
- export declare const selectors: any;
2932
-
2933
- /**
2934
- * Apply the `expanded` prop to the group items in data based on the provided collection of group ids.
2935
- *
2936
- * @param {{data: any[], collapsedIds: string[]}} options - The options to be processed.
2937
- * @returns {string[]} - Collection of all group ids from the data.
2938
- */
2939
- export declare const setExpandedState: (options: {
2940
- data: any;
2941
- collapsedIds: string[];
2942
- }) => any[];
2943
-
2944
- /**
2945
- * Add unique ids to the group items inside data.
2946
- *
2947
- * @param {{data: any[], group: GroupDescriptor[]}} options - The options to be processed.
2948
- */
2949
- export declare const setGroupIds: (options: {
2950
- data: any;
2951
- group?: Array<GroupDescriptor>;
2952
- }) => void;
2953
-
2954
- /**
2955
- * @hidden
2956
- *
2957
- * Apply the selected field to the data items based on the selected state.
2958
- *
2959
- * @param {{data: any, selectedState: {[id: string]: boolean | number[]}, dataItemKey: string; selectedField: string; subItemsField?: string; }} options
2960
- * @returns {any[]}
2961
- */
2962
- export declare const setSelectedState: (options: {
2963
- data: any;
2964
- selectedState: {
2965
- [id: string]: boolean | number[];
2966
- };
2967
- dataItemKey: string;
2968
- selectedField: string;
2969
- subItemsField?: string | undefined;
2970
- }) => any[];
2971
-
2972
- /**
2973
- * The settings for sorting the component data.
2974
- */
2975
- export declare type SortSettings = boolean | (ColumnSortSettings & {
2976
- /**
2977
- * The sort mode of the component.
2978
- *
2979
- * The available modes are:
2980
- * - `single`
2981
- * - `multiple`
2982
- */
2983
- mode?: 'single' | 'multiple';
2984
- });
2985
-
2986
- /**
2987
- * Keyboard navigation utilities for stacked layout cells.
2988
- *
2989
- * Implements the navigation pattern specified in STACKED_LAYOUT_KEYBOARD_NAVIGATION.md:
2990
- *
2991
- * ## Key Behaviors
2992
- *
2993
- * 1. **Tab Navigation** - PRIMARY mechanism for navigating between stacked cells:
2994
- * - Tab: Move to next stacked cell in the row
2995
- * - Shift+Tab: Move to previous stacked cell in the row
2996
- * - Focus is TRAPPED within the row card (stopPropagation at boundaries)
2997
- *
2998
- * 2. **Enter/F2 Keys** - Transition from Cursor mode to Content mode:
2999
- * - Focuses the first focusable element within the cell
3000
- * - Enables interaction with cell content (inputs, buttons, etc.)
3001
- *
3002
- * 3. **Escape Key** - Exit Content mode, return to Cursor mode:
3003
- * - Returns focus to the row-level container
3004
- * - Resets cell entered state
3005
- *
3006
- * ## Navigation Modes
3007
- *
3008
- * - **Cursor Mode**: Cell wrapper is focused, user can navigate rows with arrow keys
3009
- * - **Content Mode**: Focusable element inside cell is focused, user can interact with content
3010
- *
3011
- * ## Critical Notes
3012
- *
3013
- * - Horizontal (Left/Right) arrow navigation is DISABLED in stacked mode
3014
- * - Vertical (Up/Down) arrow navigation moves between rows, not cells
3015
- * - Tab/Shift+Tab stops at row boundaries (prevents leaving the row)
3016
- * - Each row card is treated as a single navigable unit
3017
- *
3018
- * @module stackedKeyboardNavigation
3019
- * @see STACKED_LAYOUT_KEYBOARD_NAVIGATION.md for complete specification
3020
- *
3021
- * @hidden
3022
- */
3023
- /**
3024
- * Options for handling stacked cell keyboard navigation.
3025
- *
3026
- * @hidden
3027
- */
3028
- export declare interface StackedKeyboardNavigationOptions {
3029
- /**
3030
- * The keyboard event to handle.
3031
- */
3032
- event: React.KeyboardEvent<HTMLElement>;
3033
- /**
3034
- * The cell element (the stacked cell wrapper div).
3035
- */
3036
- cellElement: HTMLElement;
3037
- /**
3038
- * Optional callback to invoke after handling the keyboard event.
3039
- */
3040
- onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
3041
- /**
3042
- * Optional callback to invoke when Escape is pressed (to update row entered state).
3043
- */
3044
- onEscape?: () => void;
3045
- /**
3046
- * Optional callback to invoke when exiting edit mode (e.g., on Escape in incell mode).
3047
- * This should trigger the Grid's onEditChange to update the edit descriptor.
3048
- */
3049
- onExitEdit?: () => void;
3050
- /**
3051
- * Optional callback to invoke when Tab is pressed in incell edit mode.
3052
- * Called with the direction (1 for Tab, -1 for Shift+Tab) to move to next/previous cell.
3053
- * Should handle transitioning edit state from current cell to next/previous cell.
3054
- */
3055
- onTabToNextCell?: (direction: number) => void;
3056
- /**
3057
- * Whether the cell is currently in edit mode.
3058
- * When true, applies edit mode keyboard navigation rules.
3059
- */
3060
- isInEdit?: boolean;
3061
- /**
3062
- * The edit mode of the grid: 'incell', 'inline', or 'dialog'.
3063
- * Determines which keyboard navigation rules apply during editing.
3064
- */
3065
- editMode?: 'incell' | 'inline' | 'dialog';
3066
- }
3067
-
3068
- /**
3069
- * Exported stacked keyboard navigation utilities.
3070
- *
3071
- * @hidden
3072
- */
3073
- export declare const stackedKeyboardNavigationTools: {
3074
- handleStackedKeyboardNavigation: (options: StackedKeyboardNavigationOptions) => void;
3075
- handleStackedCellTabNavigation: (event: React.KeyboardEvent<HTMLElement>, cellElement: HTMLElement, target: HTMLElement, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog', onTabToNextCell?: ((direction: number) => void) | undefined) => boolean;
3076
- handleStackedCellEnterKey: (event: React.KeyboardEvent<HTMLElement>, cellElement: HTMLElement, target: HTMLElement, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog') => boolean;
3077
- handleStackedCellEscapeKey: (event: React.KeyboardEvent<HTMLElement>, cellElement: HTMLElement, onEscape?: () => void, onExitEdit?: () => void, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog') => boolean;
3078
- handleNavigationKeysInEditMode: (event: React.KeyboardEvent<HTMLElement>, isInEdit?: boolean, editMode?: 'incell' | 'inline' | 'dialog') => boolean;
3079
- isNavigationKey: (key: string) => boolean;
3080
- };
3081
-
3082
- /**
3083
- * @hidden
3084
- */
3085
- export declare const stringOperator: (operator: any) => boolean;
3086
-
3087
- /** @hidden */
3088
- export declare const TABLE_COL_INDEX_ATTRIBUTE = "data-grid-col-index";
3089
-
3090
- /** @hidden */
3091
- export declare const TABLE_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";
3092
-
3093
- /** @hidden */
3094
- export declare const TABLE_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
3095
-
3096
- /**
3097
- * @hidden
3098
- */
3099
- export declare function tableColumnsVirtualization(args: {
3100
- enabled?: boolean;
3101
- columns: {
3102
- width?: string | number;
3103
- locked?: boolean;
3104
- }[];
3105
- tableViewPortWidth: number;
3106
- scrollLeft: number;
3107
- getColSpan?: any;
3108
- dataItem?: any;
3109
- }): {
3110
- colSpans: number[];
3111
- hiddenColumns: boolean[];
3112
- };
3113
-
3114
- /** @hidden */
3115
- export declare interface TableDragSelectionReleaseEvent {
3116
- /**
3117
- * Selection start row index.
3118
- */
3119
- startRowIndex: number;
3120
- /**
3121
- * Selection start column index.
3122
- */
3123
- startColIndex: number;
3124
- /**
3125
- * Selection end row index.
3126
- */
3127
- endRowIndex: number;
3128
- /**
3129
- * Selection end column index.
3130
- */
3131
- endColIndex: number;
3132
- /**
3133
- * A native DOM event.
3134
- */
3135
- nativeEvent: any;
3136
- /**
3137
- * Is ctrl key modifier pressed.
3138
- */
3139
- ctrlKey: boolean;
3140
- /**
3141
- * Is alt key modifier pressed.
3142
- */
3143
- altKey: boolean;
3144
- /**
3145
- * Is meta key modifier pressed.
3146
- */
3147
- metaKey: boolean;
3148
- /**
3149
- * Is shift key modifier pressed.
3150
- */
3151
- shiftKey: boolean;
3152
- /**
3153
- * Selection mode.
3154
- */
3155
- mode: 'single' | 'multiple';
3156
- /**
3157
- * Indicates if cell selection mode is enabled.
3158
- */
3159
- cell: boolean;
3160
- /**
3161
- * Indicates if current event is created from drag.
3162
- */
3163
- isDrag: boolean;
3164
- }
3165
-
3166
- export declare interface TableEditableSettings {
3167
- /**
3168
- * Determines if the editing is enabled.
3169
- *
3170
- * @default false
3171
- */
3172
- enabled?: boolean;
3173
- /**
3174
- * Determines the editing mode.
3175
- * The available values are:
3176
- * * `inline`
3177
- * * `incell`
3178
- *
3179
- * @default 'incell
3180
- */
3181
- mode?: 'inline' | 'incell' | 'dialog';
3182
- }
3183
-
3184
- /** @hidden */
3185
- export declare type TableExpandableSettings = {
3186
- enabled?: boolean;
3187
- column?: string;
3188
- };
3189
-
3190
- /** @hidden */
3191
- export declare type TableGroupExpandableSettings = {
3192
- enabled?: boolean;
3193
- defaultExpand?: boolean;
3194
- };
3195
-
3196
- /**
3197
- * @hidden
3198
- */
3199
- export declare const tableKeyboardNavigation: {
3200
- onConstructor: (options: {
3201
- navigatable?: boolean | undefined | NavigatableSettings;
3202
- contextStateRef: {
3203
- current?: TableKeyboardNavigationContextType;
3204
- };
3205
- navigationStateRef: {
3206
- current?: TableKeyboardNavigationStateType;
3207
- };
3208
- idPrefix?: string;
3209
- }) => void;
3210
- onComponentDidMount: (options: {
3211
- scope?: HTMLElement;
3212
- contextStateRef: {
3213
- current?: TableKeyboardNavigationContextType;
3214
- };
3215
- navigationStateRef: {
3216
- current?: TableKeyboardNavigationStateType;
3217
- };
3218
- }) => void;
3219
- onGetSnapshotBeforeUpdate: (options: {
3220
- document?: Document;
3221
- contextStateRef: {
3222
- current?: TableKeyboardNavigationContextType;
3223
- };
3224
- navigationStateRef: {
3225
- current?: TableKeyboardNavigationStateType;
3226
- };
3227
- }) => void;
3228
- onComponentDidUpdate: (options: {
3229
- scope?: HTMLElement;
3230
- contextStateRef: {
3231
- current?: TableKeyboardNavigationContextType;
3232
- };
3233
- navigationStateRef: {
3234
- current?: TableKeyboardNavigationStateType;
3235
- };
3236
- focusFirst?: boolean;
3237
- newEditableRow?: Element;
3238
- singleEditRow?: boolean;
3239
- lastActiveElement?: Element;
3240
- navigatable?: boolean | NavigatableSettings;
3241
- userInitiatedEdit?: boolean;
3242
- }) => void;
3243
- onFocus: (event: React_2.FocusEvent<HTMLDivElement>, options: {
3244
- navigatable?: boolean | NavigatableSettings;
3245
- contextStateRef: {
3246
- current?: TableKeyboardNavigationContextType;
3247
- };
3248
- }) => void;
3249
- onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>, options: {
3250
- navigatable: boolean | NavigatableSettings;
3251
- contextStateRef: {
3252
- current?: TableKeyboardNavigationContextType;
3253
- };
3254
- navigationStateRef: {
3255
- current?: TableKeyboardNavigationStateType;
3256
- };
3257
- onNavigationAction?: ((options: {
3258
- event: React_2.KeyboardEvent<HTMLElement>;
3259
- focusElement: any;
3260
- action?: "select" | "moveToNextPage" | "moveToPrevPage" | "reorderToLeft" | "reorderToRight" | undefined;
3261
- }) => void) | undefined;
3262
- columns?: object[] | undefined;
3263
- }) => Promise<void>;
3264
- generateMatrix: (options: {
3265
- scope?: HTMLElement;
3266
- navigationStateRef: {
3267
- current?: TableKeyboardNavigationStateType;
3268
- };
3269
- }) => void;
3270
- focusFirstDataElement: (options: {
3271
- scope?: HTMLElement | undefined;
3272
- contextStateRef: {
3273
- current?: TableKeyboardNavigationContextType | undefined;
3274
- };
3275
- navigationStateRef: {
3276
- current?: TableKeyboardNavigationStateType | undefined;
3277
- };
3278
- }, event?: any) => void;
3279
- };
3280
-
3281
- /**
3282
- * @hidden
3283
- */
3284
- export declare const tableKeyboardNavigationBodyAttributes: {
3285
- "data-keyboardnavbody": boolean;
3286
- };
3287
-
3288
- /**
3289
- * @hidden
3290
- */
3291
- export declare const TableKeyboardNavigationContext: React_2.Context<TableKeyboardNavigationContextType | undefined>;
3292
-
3293
- /**
3294
- * @hidden
3295
- */
3296
- export declare interface TableKeyboardNavigationContextType {
3297
- activeId: string | undefined;
3298
- level: number;
3299
- }
3300
-
3301
- /**
3302
- * @hidden
3303
- */
3304
- export declare const tableKeyboardNavigationHeaderAttributes: {
3305
- "data-keyboardnavheader": boolean;
3306
- };
3307
-
3308
- /**
3309
- * @hidden
3310
- */
3311
- export declare const tableKeyboardNavigationScopeAttributes: {
3312
- "data-keyboardnavscope": boolean;
3313
- };
3314
-
3315
- /**
3316
- * @hidden
3317
- */
3318
- export declare interface TableKeyboardNavigationStateType {
3319
- activeElementIsFocused: boolean;
3320
- prevNavigationIndexes?: [number, number];
3321
- idPrefix: string;
3322
- navigationMatrix: string[][];
3323
- lastHeaderIndex: number;
3324
- }
3325
-
3326
- /**
3327
- * @hidden
3328
- */
3329
- export declare const tableKeyboardNavigationTools: {
3330
- generateNavigatableId: (navigationId: string, idPrefix: string, type?: 'column' | 'cell' | 'group' | 'expand' | 'nodata') => string;
3331
- getNavigatableId: (element: Element | null) => string | undefined;
3332
- getNavigatableLevel: (element: Element | null) => number | undefined;
3333
- getNavigatableElement: (scope: HTMLElement, options?: {
3334
- level: number;
3335
- }) => HTMLElement;
3336
- getClosestNavigatableElement: (target: HTMLElement) => Element | null;
3337
- getActiveNavDataElement: (scope: HTMLElement, activeId?: string) => HTMLElement;
3338
- getClosestScope: (target: HTMLElement) => Element | null;
3339
- getHeaderElement: (scope: HTMLElement) => Element | null;
3340
- getBodyElement: (scope: HTMLElement) => Element | null;
3341
- getFocusableElements: (scope: HTMLElement, options?: {
3342
- focusable: boolean;
3343
- }) => Element[];
3344
- getNavigatableElements: (scope: HTMLElement | null, options?: {
3345
- level: number;
3346
- }) => any[];
3347
- filterNavigatableElements: (options?: {
3348
- level: number;
3349
- }) => (element: HTMLElement) => boolean;
3350
- focusElement: (options: {
3351
- elementForFocus: HTMLElement;
3352
- prevElement?: HTMLElement;
3353
- contextStateRef: {
3354
- current?: TableKeyboardNavigationContextType;
3355
- };
3356
- event?: any;
3357
- }) => void;
3358
- getIdPrefix: (navigationStateRef: {
3359
- current?: TableKeyboardNavigationStateType;
3360
- }) => string;
3361
- isNavigatable: (element: Element | null) => boolean;
3362
- findNextIdByRowIndex: (initialRowIndex: number, cellIndex: number, elementId: string | undefined, matrix: string[][], isReverse: boolean) => [
3363
- string,
3364
- [
3365
- number,
3366
- number
3367
- ]
3368
- ] | [
3369
- ];
3370
- findNextIdByCellIndex: (rowIndex: number, initialCellIndex: number, elementId: string | undefined, matrix: string[][], isReverse: boolean) => [
3371
- string,
3372
- [
3373
- number,
3374
- number
3375
- ]
3376
- ] | [
3377
- ];
3378
- findId: (navigationMatrix: string[][], cellId?: string) => number[] | undefined;
3379
- getNextNavigationIndex: (navigationStateRef: {
3380
- current?: TableKeyboardNavigationStateType;
3381
- }) => number;
3382
- getFilterColumnId: (columnId: string) => string;
3383
- focusFirstDataElement: (options: {
3384
- scope?: HTMLElement;
3385
- contextStateRef: {
3386
- current?: TableKeyboardNavigationContextType;
3387
- };
3388
- navigationStateRef: {
3389
- current?: TableKeyboardNavigationStateType;
3390
- };
3391
- }, event?: any) => void;
3392
- getClosestCancelButton: (target: HTMLElement) => Element | null | undefined;
3393
- getClosestEditButton: (target: HTMLElement) => Promise<boolean | Element>;
3394
- getRowAriaRowIndex: (target: HTMLElement) => undefined;
3395
- getRemoveButtonByAriaRowIndex: (ariaRowIndex: number) => Element | null;
3396
- getTableCellByKeyboardNavId: (navId: string) => Element | null;
3397
- getParentCell: (target: HTMLElement) => Element | null;
3398
- waitForElementToBeVisible: typeof waitForElementToBeVisible;
3399
- getNextEditableCell: (currentIdIndexes: number[], columns: any[], elementId: string | undefined, matrix: string[][]) => {
3400
- nextCell: "" | Element | null | undefined;
3401
- elementToFocus: string | null | undefined;
3402
- };
3403
- getPrevEditableCell: (currentIdIndexes: number[], columns: any[], elementId: string | undefined, matrix: string[][]) => {
3404
- prevCell: "" | Element | null | undefined;
3405
- elementToFocus: string | null | undefined;
3406
- };
3407
- getClosestCellNavId: (element: HTMLElement) => string | null;
3408
- getStackedCellWrapper: (target: HTMLElement) => HTMLElement | null;
3409
- getStackedCellFocusableElements: (cellElement: HTMLElement) => HTMLElement[];
3410
- getNextStackedCell: (currentCell: HTMLElement, direction: 'next' | 'prev') => HTMLElement | null;
3411
- getStackedCellContainer: (stackedCell: HTMLElement) => HTMLElement | null;
3412
- focusStackedCellElement: (cellElement: HTMLElement, preferredIndex?: number) => void;
3413
- };
3414
-
3415
- /** @hidden */
3416
- export declare interface TableKeyDownEvent<T> extends BaseEvent<T> {
3417
- /**
3418
- * The current leaf data items.
3419
- */
3420
- dataItems: any[];
3421
- /**
3422
- * Selection mode.
3423
- */
3424
- mode: 'single' | 'multiple';
3425
- /**
3426
- * Indicates if cell selection mode is enabled.
3427
- */
3428
- cell: boolean;
3429
- /**
3430
- * The `selectedField` prop of the component.
3431
- */
3432
- selectedField: string;
3433
- /**
3434
- * The component unique identifier.
3435
- */
3436
- componentId: string;
3437
- }
3438
-
3439
- /** @hidden */
3440
- export declare type TableSelectableMode = 'single' | 'multiple';
3441
-
3442
- /** @hidden */
3443
- export declare interface TableSelectableSettings {
3444
- /**
3445
- * Determines if selection is allowed.
3446
- *
3447
- * @default true
3448
- */
3449
- enabled?: boolean;
3450
- /**
3451
- * The available values are:
3452
- * * `single`
3453
- * * `multiple`
3454
- *
3455
- * @default "multiple"
3456
- */
3457
- mode?: TableSelectableMode;
3458
- /**
3459
- * Determines if cell selection is allowed.
3460
- *
3461
- * @default false
3462
- */
3463
- cell?: boolean;
3464
- /**
3465
- * Determines if drag selection is allowed.
3466
- *
3467
- * @default false
3468
- */
3469
- drag?: boolean;
3470
- }
3471
-
3472
- /** @hidden */
3473
- export declare const TableSelection: (props: TableSelectionProps) => JSX.Element;
3474
-
3475
- /** @hidden */
3476
- export declare interface TableSelectionChangeEvent<T> extends BaseEvent<T>, TableDragSelectionReleaseEvent {
3477
- /**
3478
- * The data item which was selected or deselected when the checkbox selection column is used. It will be `null` when the row or cell selection is used.
3479
- */
3480
- dataItem: any;
3481
- /**
3482
- * The `selectedField` prop of the component.
3483
- */
3484
- selectedField: string;
3485
- /**
3486
- * The component unique identifier.
3487
- */
3488
- componentId: string;
3489
- /**
3490
- * The current component leaf data items.
3491
- */
3492
- dataItems: any[];
3493
- }
3494
-
3495
- /** @hidden */
3496
- export declare interface TableSelectionProps {
3497
- children: any;
3498
- selectable?: TableSelectableSettings;
3499
- onRelease: (options: TableDragSelectionReleaseEvent) => void;
3500
- childRef?: (childElement: HTMLElement) => void;
3501
- }
3502
-
3503
- /**
3504
- * The TextFilter component used for editing text value of FilterDescriptor object.
3505
- */
3506
- export declare class TextFilter extends React_2.Component<TextFilterProps> {
3507
- /**
3508
- * @hidden
3509
- */
3510
- static propTypes: {
3511
- filter: default_2.Validator<object>;
3512
- onFilterChange: default_2.Validator<(...args: any[]) => any>;
3513
- ariaLabel: default_2.Requireable<string>;
3514
- };
3515
- /**
3516
- * @hidden
3517
- */
3518
- render(): JSX.Element;
3519
- private onChange;
3520
- }
3521
-
3522
- /**
3523
- * @hidden
3524
- */
3525
- export declare class TextFilterCell extends TextFilterCell_base {
3526
- }
3527
-
3528
- declare const TextFilterCell_base: React_2.ComponentClass<FilterComponentProps_2, any>;
3529
-
3530
- /**
3531
- * The props of the TextFilter component.
3532
- */
3533
- export declare interface TextFilterProps {
3534
- /**
3535
- * The FilterDescriptor object which will be edited.
3536
- */
3537
- filter: FilterDescriptor;
3538
- /**
3539
- * The FilterChange event, triggered while editing the FilterOperator.
3540
- */
3541
- onFilterChange: (event: {
3542
- nextFilter: FilterDescriptor;
3543
- }) => void;
3544
- /**
3545
- * The accessible label of the component.
3546
- */
3547
- ariaLabel?: string;
3548
- }
3549
-
3550
- /**
3551
- * @hidden
3552
- */
3553
- export declare interface TreeColumnBaseProps<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends ColumnBaseProps<C> {
3554
- /**
3555
- * A collection of child columns.
3556
- */
3557
- children?: TreeColumnBaseProps<C, H, F>[];
3558
- /**
3559
- * The column menu component. Pass the [ColumnMenuTextColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenutextcolumn),
3560
- * [ColumnMenuNumericColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenunumericcolumn),
3561
- * [ColumnMenuDateColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenudatecolumn),
3562
- * [ColumnMenuBooleanColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenubooleancolumn)
3563
- * or a custom component base on the type of the column data.
3564
- */
3565
- columnMenu?: React.ComponentType<ColumnMenuProps>;
3566
- /**
3567
- * If set to `true`, the column will render the icons that are used for expanding and collapsing child rows.
3568
- */
3569
- expandable?: boolean;
3570
- /**
3571
- * Defines the component that will be rendered as an edit cell.
3572
- */
3573
- editCell?: ComponentType<C>;
3574
- /**
3575
- * Defines the component that will be rendered as a header cell.
3576
- * If not set, a `HeaderCell` will be rendered by default.
3577
- */
3578
- headerCell?: ComponentType<H>;
3579
- /**
3580
- * **Deprecated**. Use `filterCell` prop instead.
3581
- */
3582
- filter?: ComponentType<F>;
3583
- /**
3584
- * Defines the component that will be rendered as a filter cell.
3585
- */
3586
- filterCell?: ComponentType<F>;
3587
- }
3588
-
3589
- /**
3590
- * Creates a flat data array from the passed tree dataset.
3591
- *
3592
- * @param {object[]} dataset - The source dataset of data items.
3593
- * @param {string} expandField - The field which points to the expanded value of each data item.
3594
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
3595
- * @returns {object[]} - A collection of the generated data items that are in a flat structure.
3596
- */
3597
- export declare const treeToFlat: (data: any[], expandField: string, subItemsField: string) => any[];
3598
-
3599
- /**
3600
- * @hidden
3601
- */
3602
- export declare const unaryOperator: (operator: any) => boolean;
3603
-
3604
- /**
3605
- * @hidden
3606
- */
3607
- export declare function updateLeft(columnsMap: number[][], columns: Array<{
3608
- parentIndex: number;
3609
- colSpan?: number;
3610
- rowSpan: number;
3611
- depth: number;
3612
- kFirst?: boolean;
3613
- children: any[];
3614
- width?: string | number;
3615
- locked?: boolean;
3616
- index: number;
3617
- left: number;
3618
- right: number;
3619
- rightBorder: boolean;
3620
- ariaColumnIndex: number;
3621
- }>, generateLeft?: boolean): void;
3622
-
3623
- /**
3624
- * @hidden
3625
- */
3626
- export declare function updateRight(columnsMap: number[][], columns: Array<{
3627
- parentIndex: number;
3628
- colSpan?: number;
3629
- rowSpan: number;
3630
- depth: number;
3631
- kFirst?: boolean;
3632
- children: any[];
3633
- width?: string | number;
3634
- locked?: boolean;
3635
- index: number;
3636
- left: number;
3637
- right: number;
3638
- rightBorder: boolean;
3639
- ariaColumnIndex: number;
3640
- }>, generateRight?: boolean): void;
3641
-
3642
- /**
3643
- * A hook that provides functionality for managing local data with built-in support for filtering, sorting, paging, and grouping.
3644
- *
3645
- * @template T - The type of data items in the data source. Defaults to any.
3646
- * @param {DataSourceProps<T>} props - The configuration options for the data source.
3647
- * @returns {DataSource<T>} An object containing data management methods and properties.
3648
- *
3649
- * @example
3650
- * ```tsx
3651
- * interface Product {
3652
- * ProductID: number;
3653
- * ProductName: string;
3654
- * UnitPrice: number;
3655
- * }
3656
- *
3657
- * const dataSource = useDataSource<Product>({
3658
- * defaultData: products,
3659
- * defaultSort: [{ field: 'UnitPrice', dir: 'desc' }],
3660
- * defaultSkip: 0,
3661
- * take: 10,
3662
- * schema: {
3663
- * model: {
3664
- * id: 'ProductID'
3665
- * }
3666
- * }
3667
- * });
3668
- *
3669
- * return (
3670
- * <Grid
3671
- * data={dataSource.data}
3672
- * total={dataSource.total}
3673
- * {...dataSource.dataState}
3674
- * onDataStateChange={(event) => {
3675
- * dataSource.setDataState(event.dataState);
3676
- * }}
3677
- * >
3678
- * <GridColumn field="ProductID" title="ID" />
3679
- * <GridColumn field="ProductName" title="Product Name" />
3680
- * </Grid>
3681
- * );
3682
- * ```
3683
- */
3684
- export declare const useDataSource: <T extends object = any>(props: DataSourceProps<T>) => DataSource<T>;
3685
-
3686
- /**
3687
- * A specialized version of useRemoteDataSource tailored for working with OData services.
3688
- * It automatically handles the construction of OData queries and the processing of OData responses.
3689
- *
3690
- * @template T - The type of data items in the data source. Defaults to any.
3691
- * @param {RemoteDataSourceProps<T>} props - The configuration options for the OData data source.
3692
- * @returns {RemoteDataSource<T>} An object containing all the properties and methods from useRemoteDataSource with OData-specific defaults for transport and schema configurations.
3693
- *
3694
- * @example
3695
- * ```tsx
3696
- * interface Product {
3697
- * ProductID: number;
3698
- * ProductName: string;
3699
- * UnitPrice: number;
3700
- * }
3701
- *
3702
- * const dataSource = useODataDataSource<Product>({
3703
- * take: 10,
3704
- * skip: 0,
3705
- * transport: {
3706
- * read: {
3707
- * url: 'https://demos.telerik.com/service/v2/odata/Products'
3708
- * }
3709
- * },
3710
- * schema: {
3711
- * model: {
3712
- * id: 'ProductID'
3713
- * }
3714
- * }
3715
- * });
3716
- * ```
3717
- */
3718
- export declare const useODataDataSource: <T extends object = any>(props: RemoteDataSourceProps<T>) => RemoteDataSource<T>;
3719
-
3720
- /**
3721
- * A hook that extends the functionality of useDataSource by adding support for remote data operations.
3722
- * It enables you to connect to remote endpoints and perform CRUD operations while managing the data state locally.
3723
- *
3724
- * @template T - The type of data items in the data source
3725
- * @param {RemoteDataSourceProps<T>} props - The configuration options for the remote data source.
3726
- * @returns {RemoteDataSource<T>} An object containing all the properties and methods from useDataSource plus additional methods for interacting with remote data.
3727
- */
3728
- export declare const useRemoteDataSource: <T extends object = any>(props: RemoteDataSourceProps<T>) => RemoteDataSource<T>;
3729
-
3730
- /**
3731
- * @hidden
3732
- */
3733
- export declare const useTableKeyboardNavigation: (elementId: string, navigatable?: boolean) => {
3734
- tabIndex?: undefined;
3735
- "data-keyboardnavlevel"?: undefined;
3736
- "data-keyboardnavid"?: undefined;
3737
- } | {
3738
- tabIndex: number;
3739
- "data-keyboardnavlevel": number;
3740
- "data-keyboardnavid": string;
3741
- };
3742
-
3743
- /**
3744
- * @hidden
3745
- */
3746
- declare function waitForElementToBeVisible(selector: string, parentElement: Element | null, timeout?: number): Promise<boolean | Element>;
3747
-
3748
- export { }
8
+ export { Pager } from './pager/Pager.js';
9
+ export { type PagerProps, type PageChangeEvent, type BasePageChangeEvent, type PagerTargetEvent, type PagerHandle } from './pager/models/index.js';
10
+ export * from './filteringCells/index.js';
11
+ export * from './header/index.js';
12
+ export * from './virtualization/index.js';
13
+ export { ColumnResize } from './drag/ColumnResize.js';
14
+ export { ColumnResizer } from './drag/ColumnResizer.js';
15
+ export { CommonDragLogic } from './drag/CommonDragLogic.js';
16
+ export { DragClue } from './drag/DragClue.js';
17
+ export { DropClue } from './drag/DropClue.js';
18
+ export * from './filter/index.js';
19
+ export * from './columnmenu/index.js';
20
+ export * from './utils/data-operations.js';
21
+ export * from './utils/group-operations.js';
22
+ export * from './utils/SearchField.js';
23
+ export * from './navigation/hooks.js';
24
+ export * from './navigation/constants.js';
25
+ export { type NavigatableSettings, NavigatableMode } from './navigation/NavigatableSettings.js';
26
+ export * from './navigation/TableKeyboardNavigation.js';
27
+ export * from './navigation/TableKeyboardNavigationContext.js';
28
+ export * from './navigation/TableKeyboardNavigationContextType.js';
29
+ export * from './navigation/TableKeyboardNavigationStateType.js';
30
+ export { tableKeyboardNavigationScopeAttributes } from './navigation/constants.js';
31
+ export { tableKeyboardNavigationTools } from './navigation/utils.js';
32
+ export * from './navigation/stackedKeyboardNavigation.js';
33
+ export * from './selection/TableSelection.js';
34
+ export * from './selection/TableSelectableSettings.js';
35
+ export * from './selection/events.js';
36
+ export * from './selection/constants.js';
37
+ export * from './selection/utils.js';
38
+ export * from './editing/TableEditableSettings.js';
39
+ export * from './editing/utils.js';
40
+ export * from './editing/editReducer.js';
41
+ export * from './detail-expansion/TableExpandableSettings.js';
42
+ export * from './detail-expansion/utils.js';
43
+ export * from './detail-expansion/expandReducer.js';
44
+ export * from './group-expansion/groupExpandReducer.js';
45
+ export * from './group-expansion/TableGroupExpandableSettings.js';
46
+ export * from './clipboard/clipboard.service.js';
47
+ export * from './clipboard/common.js';
48
+ export * from './data-source/use-data-source.js';
49
+ export * from './data-source/use-remote-data-source.js';
50
+ export * from './data-source/use-odata-data-source.js';