/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ComponentType } from 'react';
import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
import { CSVExportOptions } from '@progress/kendo-csv';
import { GridGroupableSettings } from './GridGroupableSettings.js';
import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent, GridRowDoubleClickEvent, GridNavigationActionEvent, GridKeyDownEvent, GridContextMenuEvent, GridContextMenuItemClickEvent, GridEditChangeEvent, GridDetailExpandChangeEvent, GridGroupExpandChangeEvent, GridRowReorderEvent, GridSearchChangeEvent, GridColumnsStateChangeEvent, GridHighlightChangeEvent, GridRowPinChangeEvent } from './events.js';
import { ScrollMode } from '../ScrollMode.js';
import { GridSortSettings } from './GridSortSettings.js';
import { GridPagerSettings } from '../paging/GridPagerSettings.js';
import { GridDetailRowProps } from '../interfaces/GridDetailRowProps.js';
import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps.js';
import { GridFilterOperators } from './GridFilterOperators.js';
import { GridSelectableSettings } from './GridSelectableSettings.js';
import { ClipboardSettings, EditDescriptor, PagerProps, NavigatableSettings, SelectDescriptor, GroupExpandDescriptor, DetailExpandDescriptor, SearchField, GridClipboardEvent } from '@progress/kendo-react-data-tools';
import { GridClassStructure, KendoReactComponentBaseProps } from '@progress/kendo-react-common';
import { GridCellsSettings } from './GridCellsSettings.js';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { IntlService, LocalizationService } from '@progress/kendo-react-intl';
import { GridCellBaseOptions, GridContextMenuOptions } from '../contextMenu/GridContextMenu.js';
import { GridEditableSettings } from './GridEditableSettings.js';
import { GridRowReorderSettings } from './GridRowReorderSettings.js';
import { GridRowSpannableSettings } from './GridRowSpannableSettings.js';
import { GridRowsSettings } from './GridRowsSettings.js';
import { GridColumnState } from './GridColumnState.js';
import { GridEditDialogProps } from './GridEditDialogProps.js';
import { GridHighlightDescriptor } from './GridHighlightDescriptor.js';
import { GridDataLayoutMode, GridStackedLayoutSettings } from './GridStackedLayoutSettings.js';
/**
 * Represents the CSV export options for the Grid component.
 * Extends CSVExportOptions from @progress/kendo-csv with all properties optional.
 *
 * @example
 * ```tsx
 * <Grid csv={{
 *   fileName: 'export.csv',
 *   preventFormulaInjection: true,
 *   keys: ['ProductID', 'ProductName'],
 *   names: ['ID', 'Name']
 * }} />
 * ```
 */
export interface GridCSVExportOptions extends Omit<Partial<CSVExportOptions>, 'data'> {
    /**
     * Specifies the name of the exported CSV file.
     *
     * @default "grid-export.csv"
     *
     * @example
     * ```tsx
     * <Grid csv={{ fileName: 'my-data.csv' }} />
     * ```
     */
    fileName?: string;
    /**
     * Optional data to export to CSV instead of using the Grid's data prop.
     * Useful when you want to export different data than what's displayed in the Grid.
     *
     * @example
     * ```tsx
     * <Grid csv={{ data: customExportData, fileName: 'export.csv' }} />
     * ```
     */
    data?: any[] | DataResult | null;
    /**
     * Specifies whether to export all pages or only the current page when paging is enabled.
     * When `true`, exports all data ignoring pagination.
     * When `false`, exports only the current page of data.
     *
     * @default true
     *
     * @example
     * ```tsx
     * // Export only the current page
     * <Grid csv={{ allPages: false }} />
     *
     * // Export all pages (default behavior)
     * <Grid csv={{ allPages: true }} />
     * ```
     */
    allPages?: boolean;
}
/**
 * Represents the props of the [KendoReact Grid component](https://www.telerik.com/kendo-react-ui/components/grid).
 */
export interface GridProps extends KendoReactComponentBaseProps {
    /**
     * Enables data-processing inside the GridComponent based on its state.
     * Provides an easy, built-in way to handle data operations like sorting, filtering, grouping, and paging.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Grid
     *   autoProcessData={{
     *     filter: true,
     *     search: true,
     *     sort: true,
     *     group: true,
     *     page: true
     *   }}
     * />
     * ```
     */
    autoProcessData?: boolean | {
        filter?: boolean;
        search?: boolean;
        sort?: boolean;
        group?: boolean;
        page?: boolean;
    };
    /**
     * Sets the Grid row key prop to the value of this field in the dataItem.
     * If not set, the dataItem index will be used for the row key, which might lead to rows not updating during paging or scrolling.
     *
     * @example
     * ```jsx
     * <Grid dataItemKey="ID" />
     * ```
     */
    dataItemKey?: string;
    /**
     * Sets a class for the Grid DOM element.
     *
     * @example
     * ```jsx
     * <Grid className="custom-grid-class" />
     * ```
     */
    className?: string;
    /**
     * Defines a set of custom cell components that the Grid will render instead of the default cells.
     *
     * @example
     * ```jsx
     * import { GridCustomCellProps } from '@progress/kendo-react-grid';
     *
     * const CustomCell = (props: GridCustomCellProps) => (
     *   <td {...props.tdProps}>
     *     {props.dataItem[props.field]}
     *   </td>
     * );
     *
     * <Grid
     *   cells={{
     *     data: CustomCell
     *   }}
     * />
     * ```
     */
    cells?: GridCellsSettings;
    /**
     *
     * @example
     * ```jsx
     * import { GridCustomRowProps } from '@progress/kendo-react-grid';
     *
     * const CustomRow = (props: GridCustomRowProps) => (
     *   <tr {...props.trProps} style={{ backgroundColor: props.dataItem?.highlight ? 'yellow' : 'white' }}>
     *     {props.children}
     *   </tr>
     * );
     *
     * <Grid
     *   rows={{
     *     data: CustomRow
     *   }}
     * />
     * ```
     */
    rows?: GridRowsSettings;
    /**
     * Sets the data of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging)). If you use paging, the `data` option has to contain only the items for the current page. It takes values of type null, any or [DataResult](https://www.telerik.com/kendo-react-ui/components/datatools/api/dataresult)
     * Accepts values of type `null`, `any[]`, or `DataResult`.
     *
     * @example
     * ```jsx
     * <Grid data={data} />
     * ```
     */
    data?: any[] | DataResult | null;
    /**
     * Enables sorting for the columns with their `field` option set.
     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
     *
     * @example
     * ```jsx
     * <Grid sortable={true} />
     * ```
     */
    sortable?: GridSortSettings;
    /**
     * Enables clipboard copy, cut, and paste manipulations. Accepts `ClipboardSettings` or a boolean value.
     *
     * @example
     * ```jsx
     * <Grid clipboard={true}  />
     * ```
     */
    clipboard?: ClipboardSettings | boolean;
    /**
     * Fires when clipboard support is enabled, and one of the actions (e.g., copy) is triggered.
     * Accepts a `GridClipboardEvent` object.
     *
     * @example
     * ```jsx
     * <Grid
     *   clipboard={true}
     *   onClipboard={(event) => console.log('Clipboard action:', event.action)}
     * />
     * ```
     */
    onClipboard?: (event: GridClipboardEvent) => void;
    /**
     * Fires when the sorting of the Grid is changed. You must handle the event and sort the data.
     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
     *
     * @example
     * ```jsx
     * <Grid
     *   sortable={true}
     *   onSortChange={(event) => console.log('Sort changed:', event.sort)}
     * />
     * ```
     */
    onSortChange?: (event: GridSortChangeEvent) => void;
    /**
     * The ([descriptors](https://www.telerik.com/kendo-react-ui/components/datatools/api/sortdescriptor)) by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
     *
     * @example
     * ```jsx
     * <Grid sort={[{ field: 'name', dir: 'asc' }]} />
     * ```
     */
    sort?: SortDescriptor[];
    /**
     * The default `sort` state applied to the Grid when using uncontrolled mode.
     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
     *
     * @example
     * ```jsx
     * <Grid defaultSort={[{ field: 'name', dir: 'asc' }]} />
     * ```
     */
    defaultSort?: SortDescriptor[];
    /**
     * Enables the row pinning feature.
     * When `false` or omitted, the row pinning feature is inactive.
     *
     * @example
     * ```tsx
     * <Grid pinnable={true} pinnedTopRows={pinnedTop} onRowPinChange={handlePinChange} />
     * ```
     */
    pinnable?: boolean;
    /**
     * The array of data items pinned to the top of the Grid.
     * Pinned rows remain visible while the body scrolls and are immune to filtering and pagination.
     * Requires `pinnable={true}`.
     *
     * @example
     * ```tsx
     * <Grid pinnable={true} pinnedTopRows={[products[0], products[1]]} />
     * ```
     */
    pinnedTopRows?: any[];
    /**
     * The array of data items pinned to the bottom of the Grid.
     * Pinned rows remain visible while the body scrolls and are immune to filtering and pagination.
     * Requires `pinnable={true}`.
     *
     * @example
     * ```tsx
     * <Grid pinnable={true} pinnedBottomRows={[products[9]]} />
     * ```
     */
    pinnedBottomRows?: any[];
    /**
     * The default `pinnedTopRows` state applied to the Grid when using uncontrolled mode.
     * Requires `pinnable={true}`.
     *
     * @example
     * ```tsx
     * <Grid pinnable={true} defaultPinnedTopRows={[products[0]]} />
     * ```
     */
    defaultPinnedTopRows?: any[];
    /**
     * The default `pinnedBottomRows` state applied to the Grid when using uncontrolled mode.
     * Requires `pinnable={true}`.
     *
     * @example
     * ```tsx
     * <Grid pinnable={true} defaultPinnedBottomRows={[products[9]]} />
     * ```
     */
    defaultPinnedBottomRows?: any[];
    /**
     * Fires when a row is pinned, unpinned, or moved between pinned zones.
     * Requires `pinnable={true}`.
     *
     * @example
     * ```tsx
     * <Grid pinnable={true} onRowPinChange={(e) => {
     *   setPinnedTop(e.pinnedTopRows);
     *   setPinnedBottom(e.pinnedBottomRows);
     * }} />
     * ```
     */
    onRowPinChange?: (event: GridRowPinChangeEvent) => void;
    /**
     * Enables filtering for the columns with their `field` option set.
     *
     * @example
     * ```jsx
     * <Grid filterable={true} />
     * ```
     */
    filterable?: boolean;
    /**
     * The [descriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/compositefilterdescriptor) by which
     * the data is filtered ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/filtering)). This affects
     * the values and buttons in the `FilterRow` of the Grid.
     *
     * @example
     * ```jsx
     * <Grid filter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
     * ```
     */
    filter?: CompositeFilterDescriptor;
    /**
     * The default `filter` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultFilter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
     * ```
     */
    defaultFilter?: CompositeFilterDescriptor;
    /**
     * The filter operators for the Grid filters.
     *
     * @example
     * ```jsx
     * <Grid filterOperators={{ text: [{ text: 'grid.filterContainsOperator', operator: 'contains' }] }} />
     * ```
     */
    filterOperators?: GridFilterOperators;
    /**
     * Fires when the Grid filter is modified through the UI. You must handle the event and filter the data.
     *
     * @example
     * ```jsx
     * <Grid
     *   filterable={true}
     *   onFilterChange={(event) => console.log('Filter changed:', event.filter)}
     * />
     * ```
     */
    onFilterChange?: (event: GridFilterChangeEvent) => void;
    /**
     * Fires when the Grid highlight is modified. You must handle the event and filter the data.
     *
     * @example
     * ```jsx
     * <Grid
     *   onHighlightChange={(event) => console.log('Highlight changed:', event.highlight)}
     * />
     * ```
     */
    onHighlightChange?: (event: GridHighlightChangeEvent) => void;
    /**
     * Specifies whether the loader of the Grid will be displayed.
     *
     * @example
     * ```jsx
     * <Grid
     *   showLoader={true}
     *   loader={<div>Loading...</div>}
     * />
     * ```
     */
    showLoader?: boolean;
    /**
     * A custom component that the Grid will render instead of the built-in loader.
     *
     * @example
     * ```jsx
     * <Grid loader={<div>Custom Loader...</div>} />
     * ```
     */
    loader?: React.ReactNode;
    /**
     * Fires when the user reorders a row.
     *
     * @example
     * ```jsx
     * <Grid onRowReorder={(event) => console.log('Row reordered:', event)} />
     * ```
     */
    onRowReorder?: (event: GridRowReorderEvent) => void;
    /**
     * Specifies a React element that will be cloned and rendered inside the column menu of the Grid.
     *
     * @example
     * ```jsx
     * <Grid columnMenu={() => <div>Custom Column Menu</div>} />
     * ```
     */
    columnMenu?: null | ComponentType<GridColumnMenuProps>;
    /**
     * Specifies the context menu settings applied to the Grid.
     *
     * @example
     * ```jsx
     * <Grid contextMenu={true} />
     * ```
     */
    contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions);
    /**
     * Globally overrides the default (three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level
     *  using the ([menuIcon](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#toc-menuicon)) property.
     */
    columnMenuIcon?: SVGIcon;
    /**
     * Providing different rendering of the popup element based on the screen dimensions.
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup.
     */
    adaptiveTitle?: string;
    /**
     * The [descriptors](https://www.telerik.com/kendo-react-ui/components/datatools/api/groupdescriptor)[] by which the data will be grouped
     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
     *
     * @example
     * ```jsx
     * <Grid group={[{ field: 'CategoryName' }]} />
     * ```
     */
    group?: GroupDescriptor[];
    /**
     * The default `group` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultGroup={[{ field: 'CategoryName' }]} />
     * ```
     */
    defaultGroup?: GroupDescriptor[];
    /**
     * Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
     *
     * @example
     * ```jsx
     * <Grid onGroupChange={(event) => console.log('Group changed:', event.group)} />
     * ```
     */
    onGroupChange?: (event: GridGroupChangeEvent) => void;
    /**
     * Configures the pager of the Grid. Accepts `GridPagerSettings` or a boolean value.([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging))
     *
     * The available options are:
     * - `buttonCount: Number`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed.
     * - `info: Boolean`&mdash;Toggles the information about the current page and the total number of records.
     * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values.
     * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size.
     * - `pageSizeValue: String or Number`&mdash;Sets the selected value of the page size Dropdownlist. It is useful when the selected value could also be a string not only a number.
     * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons.
     * - `navigatable: Boolean`&mdash;Defines if the pager will be navigatable.
     * - `responsive: Boolean`&mdash;Defines if the pager will be responsive. If true, hides the tools that do not fit to the available space.
     * - `adaptive: Boolean`&mdash;Providing different rendering of the page sizes select element based on the screen dimensions.
     * - `adaptiveTitle: String`&mdash;Specifies the text that is rendered as title in the adaptive page sizes select element.
     *
     * @example
     * ```jsx
     * <Grid pageable={{ pageSizes: true }} />
     * ```
     */
    pageable?: GridPagerSettings | boolean;
    /**
     * Defines the page size used by the Grid pager. Required for paging functionality.
     *
     * @example
     * ```jsx
     * <Grid pageSize={10} />
     * ```
     */
    pageSize?: number;
    /**
     * The pager component that the Grid will render instead of the built-in pager.
     *  It takes values of type null and ComponentType&lt;[PagerProps](https://www.telerik.com/kendo-react-ui/components/datatools/api/pagerprops)&gt
     *
     * @example
     * ```jsx
     * <Grid pager={() => <div>Custom Pager</div>} />
     * ```
     */
    pager?: null | ComponentType<PagerProps>;
    /**
     * When set to true the Grid pdf export will be enabled.
     * If set to an object, the Grid will use the provided settings to export the PDF.
     *
     * @example
     * ```jsx
     * <Grid pdf={true} />
     * ```
     */
    pdf?: boolean | GridProps;
    /**
     * Fires when the user clicks the PDF export button.
     *
     * @example
     * ```jsx
     *
     * <Grid onPdfExport={async (event) => {
     *        const pdf = await import('@progress/kendo-react-pdf');
     *        await pdf.saveGridPDF(event.target);
     *  }} />
     * ```
     */
    onPdfExport?: (event: {
        target: HTMLDivElement;
    }) => Promise<void>;
    /**
     * Enables CSV export functionality when set to `true` or provides CSV export configuration options.
     *
     * @example
     * ```jsx
     * <Grid csv={true} />
     * ```
     *
     * @example
     * ```jsx
     * <Grid csv={{ delimiter: ';', includeUTF8BOM: true, preventFormulaInjection: true }} />
     * ```
     */
    csv?: boolean | GridCSVExportOptions;
    /**
     * Fires when the user clicks the CSV export button.
     * Allows custom data transformation before export.
     *
     * @example
     * ```jsx
     * <Grid onCsvExport={(data) => {
     *     return data.filter(item => item.active);
     * }} />
     * ```
     */
    onCsvExport?: (data: any[]) => any[];
    /**
     * Alias for the `pageSize` property. If `take` is set, `pageSize` will be ignored.
     *
     * @example
     * ```jsx
     * <Grid take={20} />
     * ```
     */
    take?: number;
    /**
     * The default `take` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultTake={20} />
     * ```
     */
    defaultTake?: number;
    /**
     * Fires when the page of the Grid is changed.
     *
     * @example
     * ```jsx
     * <Grid onPageChange={(event) => console.log('Page changed:', event.page)} />
     * ```
     */
    onPageChange?: (event: GridPageChangeEvent) => void;
    /**
     * Defines the total number of data items in all pages. Required for paging functionality.
     *
     * @example
     * ```jsx
     * <Grid total={100} />
     * ```
     */
    total?: number;
    /**
     * Defines the number of records that will be skipped by the pager ([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging)). Required by the paging functionality.
     *
     * @example
     * ```jsx
     * <Grid skip={10} />
     * ```
     */
    skip?: number;
    /**
     * The default `skip` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultSkip={10} />
     * ```
     */
    defaultSkip?: number;
    /**
     * Determines if the scroll position will be updated after a data change.
     * If set to `true`, the scroll will remain in the same position.
     */
    fixedScroll?: boolean;
    /**
     * The descriptor by which the detail row is expanded.
     *
     * @example
     * ```jsx
     * <Grid detailExpand={{ ['item-data-key-id']: true }} />
     * ```
     */
    detailExpand?: DetailExpandDescriptor;
    /**
     * Sets a custom edit dialog component that the Grid will render instead of the built-in edit dialog.
     */
    editDialog?: (props: GridEditDialogProps) => React.ReactNode;
    /**
     * The default `detailExpand` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultDetailExpand={{ ['item-data-key-id']: true }} />
     * ```
     */
    defaultDetailExpand?: DetailExpandDescriptor;
    /**
     * Fires when the user expands or collapses a detail row.
     *
     * @example
     * ```jsx
     * <Grid onDetailExpandChange={(event) => console.log('Detail expand changed:', event)} />
     * ```
     */
    onDetailExpandChange?: (event: GridDetailExpandChangeEvent) => void;
    /**
     * The descriptor by which the group is expanded.
     *
     * @example
     * ```jsx
     * <Grid groupExpand={[{ field: 'CategoryName', expanded: true }]} />
     * ```
     */
    groupExpand?: GroupExpandDescriptor[];
    /**
     * The default `groupExpand` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultGroupExpand={[{ field: 'CategoryName', expanded: true }]} />
     * ```
     */
    defaultGroupExpand?: GroupExpandDescriptor[];
    /**
     * Fires when the user expands or collapses a group.
     *
     * @example
     * ```jsx
     * <Grid onGroupExpandChange={(event) => console.log('Group expand changed:', event)} />
     * ```
     */
    onGroupExpandChange?: (event: GridGroupExpandChangeEvent) => void;
    /**
     * The [descriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/selectdescriptor) by which the selected state of an item is defined.
     * Passing a boolean value will select the whole row, while passing an array of strings will select individual.
     *
     * @example
     * ```jsx
     * <Grid select={{ ['item-data-key-id']: true }} />
     * ```
     */
    select?: SelectDescriptor;
    /**
     *  The descriptor by which the highlight state of an item is defined.
     * Passing a boolean value will highlight the whole row, while passing an object will highlight individual cells by their field.
     *
     * @example
     * ```jsx
     * <Grid highlight={{ ['item-data-key-id']: true }} />
     * <Grid highlight={{ ['item-data-key-id']: [2, 3] }} />
     * ```
     */
    highlight?: GridHighlightDescriptor;
    /**
     * The default `select` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultSelect={{ ['item-data-key-id']: true }} />
     * ```
     */
    defaultSelect?: SelectDescriptor;
    /**
     * The Grid selectable settings.
     *
     * @example
     * ```jsx
     * <Grid selectable={{ enabled: true, mode: 'single' }} />
     * ```
     */
    selectable?: boolean | GridSelectableSettings;
    /**
     * Fires when the user tries to select or deselect a row or cell.
     *
     * @example
     * ```jsx
     * <Grid onSelectionChange={(event) => console.log('Selection changed:', event)} />
     * ```
     */
    onSelectionChange?: (event: GridSelectionChangeEvent) => void;
    /**
     * Fires when the user clicks the checkbox of a column header whose type is set to `checkbox`.
     *
     * @example
     * ```jsx
     * <Grid onHeaderSelectionChange={(event) => console.log('Header selection changed:', event)} />
     * ```
     */
    onHeaderSelectionChange?: (event: GridHeaderSelectionChangeEvent) => void;
    /**
     * Fires when the user clicks a row.
     *
     * @example
     * ```jsx
     * <Grid onRowClick={(event) => console.log('Row clicked:', event)} />
     * ```
     */
    onRowClick?: (event: GridRowClickEvent) => void;
    /**
     * Fires when the user double clicks a row.
     *
     * @example
     * ```jsx
     * <Grid onRowDoubleClick={(event) => console.log('Row double clicked:', event)} />
     * ```
     */
    onRowDoubleClick?: (event: GridRowDoubleClickEvent) => void;
    /**
     * Fires when the user changes the values of the item.
     *
     * @example
     * ```jsx
     * <Grid onItemChange={(event) => console.log('Item changed:', event)} />
     * ```
     */
    onItemChange?: (event: GridItemChangeEvent) => void;
    /**
     * The descriptor by which the in-edit mode of an item is defined.
     *
     * @example
     * ```jsx
     * <Grid edit={{ ['item-data-key-id']: true }} />
     * ```
     */
    edit?: EditDescriptor;
    /**
     * The default `edit` state applied to the Grid when using uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Grid defaultEdit={{ ['item-data-key-id']: true }} />
     * ```
     */
    defaultEdit?: EditDescriptor;
    /**
     * The Grid editable settings.
     *
     * @example
     * ```jsx
     * <Grid editable={{ enabled: true, mode: 'inline' }} />
     * ```
     */
    editable?: boolean | GridEditableSettings;
    /**
     * Fires when the user enters or exits an in-edit mode of a row or cell.
     *
     * @example
     * ```jsx
     * <Grid onEditChange={(event) => console.log('Edit changed:', event)} />
     * ```
     */
    onEditChange?: (event: GridEditChangeEvent) => void;
    /**
     * Defines the scroll mode that is used by the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes)).
     *
     *  The available options are:
     *  - `none`&mdash;Renders no scrollbar.
     *  - `scrollable`&mdash;This is the default scroll mode. It requires the setting of the `height` option.
     *  - `virtual`&mdash;Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.
     *
     * @example
     * ```jsx
     * <Grid scrollable="virtual" />
     * ```
     */
    scrollable?: ScrollMode;
    /**
     * Defines the row height and forces an equal height to all rows ([see example](https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes)).
     *
     * @example
     * ```jsx
     * <Grid rowHeight={50} />
     * ```
     */
    rowHeight?: number;
    /**
     * Defines the detail row height and forces an equal height to all detail rows.
     *
     * @example
     * ```jsx
     * <Grid detailRowHeight={100} />
     * ```
     */
    detailRowHeight?: number;
    /**
     * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example](https://www.telerik.com/kendo-react-ui/components/grid/hierarchy)).
     *
     * @example
     * ```jsx
     * <Grid detail={()=>(<div>Detail Content</div>)} />
     * ```
     */
    detail?: null | ComponentType<GridDetailRowProps>;
    /**
     * The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.
     *
     * @example
     * ```jsx
     * <Grid search={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'test' }] }} />
     * ```
     */
    search?: CompositeFilterDescriptor;
    /**
     * The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.
     *
     * @example
     * ```jsx
     * <Grid defaultSearch={{ logic: 'or', filters: [{ field: 'category', operator: 'eq', value: 'electronics' }] }} />
     * ```
     */
    defaultSearch?: CompositeFilterDescriptor;
    /**
     * Defines the fields of the data that are filtered by the GridSearchBox.
     *
     * @example
     * ```jsx
     * <Grid searchFields={['name', 'category']} />
     * ```
     */
    searchFields?: (string | SearchField)[];
    /**
     * Fires when the search value of the GridSearchBox is changed.
     *
     * @example
     * ```jsx
     * <Grid onSearchChange={(event) => console.log('Search changed:', event)} />
     * ```
     */
    onSearchChange?: (event: GridSearchChangeEvent) => void;
    /**
     * Represents the `style` HTML attribute.
     *
     * @example
     * ```jsx
     * <Grid style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Fires when the data state of the Grid is changed ([more information](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations) and [example](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations)).
     *
     * @example
     * ```jsx
     * <Grid onDataStateChange={(event) => console.log('Data state changed:', event)} />
     * ```
     */
    onDataStateChange?: (event: GridDataStateChangeEvent) => void;
    /**
     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/resizing)).
     *
     * @example
     * ```jsx
     * <Grid resizable={true} />
     * ```
     */
    resizable?: boolean;
    /**
     * If set to `true`, the user can reorder columns by dragging their header cells ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/reordering)).
     *
     * @example
     * ```jsx
     * <Grid reorderable={true} />
     * ```
     */
    reorderable?: boolean;
    /**
     * Defines the row reorder settings.
     *
     * @example
     * ```jsx
     * <Grid rowReorderable={true} />
     * ```
     */
    rowReorderable?: boolean | GridRowReorderSettings;
    /**
     * Determines if grouping by dragging and dropping the column headers is allowed ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
     *
     * @example
     * ```jsx
     * <Grid groupable={true} />
     * ```
     */
    groupable?: GridGroupableSettings | boolean;
    /**
     * Fires when a column is resized. Only fired when the Grid is run as a client component.
     *
     * @example
     * ```jsx
     * <Grid onColumnResize={(event) => console.log('Column resized:', event)} />
     * ```
     */
    onColumnResize?: (event: GridColumnResizeEvent) => void;
    /**
     * Fires when the columns are reordered.
     *
     * @example
     * ```jsx
     * <Grid onColumnReorder={(event) => console.log('Column reordered:', event)} />
     * ```
     */
    onColumnReorder?: (event: GridColumnReorderEvent) => void;
    /**
     * Fires when Grid is scrolled. Only fired when the Grid is run as a client component.
     *
     * @example
     * ```jsx
     * <Grid onScroll={(event) => console.log('Grid scrolled:', event)} />
     * ```
     */
    onScroll?: (event: GridEvent) => void;
    /**
     * Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.
     *
     * @example
     * ```jsx
     * <Grid columnVirtualization={true} />
     * ```
     */
    columnVirtualization?: boolean;
    /**
     * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
     * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
     *
     * @example
     * ```jsx
     * <Grid navigatable={true} />
     * ```
     */
    navigatable?: boolean | NavigatableSettings;
    /**
     * Fires when Grid keyboard navigation position is changed. Only fired when the Grid is run as a client component.
     *
     * @example
     * ```jsx
     * <Grid onNavigationAction={(event) => console.log('Navigation action:', event)} />
     * ```
     */
    onNavigationAction?: (event: GridNavigationActionEvent) => void;
    /**
     * Fires when the user press keyboard key. Only fired when the Grid is run as a client component.
     *
     * @example
     * ```jsx
     * <Grid onKeyDown={(event) => console.log('Key pressed:', event)} />
     * ```
     */
    onKeyDown?: (event: GridKeyDownEvent) => void;
    /**
     * Defines if the group descriptor columns are locked (frozen or sticky).
     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
     * Defaults to `false`.
     *
     * @example
     * ```jsx
     * <Grid lockGroups={true} />
     * ```
     */
    lockGroups?: boolean;
    /**
     * Configures the `size` of the Grid.
     *
     * The available options are:
     * - small
     * - medium
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <Grid size="small" />
     * ```
     */
    size?: 'small' | 'medium';
    /**
     * The event that is fired when the ContextMenu is activated. Only fired when the Grid is run as a client component.
     *
     * @example
     * ```jsx
     * <Grid onContextMenu={(event) => console.log('Context menu activated:', event)} />
     * ```
     */
    onContextMenu?: (event: GridContextMenuEvent) => void;
    /**
     * The event that is fired when the ContextMenu item is clicked. Only fired when the Grid is run as a client component.
     *
     * @example
     * ```jsx
     * <Grid onContextMenuItemClick={(event) => console.log('Context menu item clicked:', event)} />
     * ```
     */
    onContextMenuItemClick?: (event: GridContextMenuItemClickEvent) => void;
    /**
     * Sets the `id` property of the top div element of the component.
     *
     * @example
     * ```jsx
     * <Grid id="custom-grid-id" />
     * ```
     */
    id?: string;
    /**
     * @hidden
     */
    unstyled?: GridClassStructure;
    /**
     * Enables the built-in row span feature of the Grid.
     *
     * @example
     * ```jsx
     * <Grid rowSpannable={true} />
     * ```
     */
    rowSpannable?: boolean | GridRowSpannableSettings;
    /**
     * The collection of column states of the grid.
     *
     * @example
     * ```jsx
     * <Grid columnsState={[{ field: 'ProductName', locked: true }]} />
     * ```
     */
    columnsState?: GridColumnState[];
    /**
     * The default columns state, used only for the initial load.
     *
     * @example
     * ```jsx
     * <Grid defaultColumnsState={[{ field: 'ProductName', locked: false }]} />
     * ```
     */
    defaultColumnsState?: GridColumnState[];
    /**
     * Fires when the columns state of the Grid is changed.
     *
     * @example
     * ```jsx
     * <Grid onColumnsStateChange={(event) => console.log('Columns state changed:', event)} />
     * ```
     */
    onColumnsStateChange?: (event: GridColumnsStateChangeEvent) => void;
    /**
     * Sets the locale of the Grid when used as a server component.
     * Have not effect when the Grid is used as a client component.
     *
     * @example
     * ```jsx
     * <Grid locale="en-US" />
     * ```
     */
    locale?: string;
    /**
     * Sets the language of the Grid when used as a server component.
     * Have not effect when the Grid is used as a client component.
     *
     * @example
     * ```jsx
     * <Grid language="en" />
     * ```
     */
    language?: string;
    /**
     * Specifies the data layout mode for the Grid.
     *
     * - `"columns"`: Traditional column-based table layout (default).
     * - `"stacked"`: Card-based layout where each row displays as a vertical
     *   stack of field label/value pairs. Useful for responsive layouts
     *   and mobile devices.
     *
     * The stacked mode is independent of `adaptiveMode` and can be used separately.
     *
     * > Note: Row/column spanning is not supported in stacked mode.
     *
     * @default "columns"
     *
     * @example
     * ```tsx
     * // Traditional column layout (default)
     * <Grid dataLayoutMode="columns" data={data}>
     *   <GridColumn field="name" title="Name" />
     *   <GridColumn field="email" title="Email" />
     * </Grid>
     *
     * // Stacked card layout
     * <Grid dataLayoutMode="stacked" data={data}>
     *   <GridColumn field="name" title="Name" />
     *   <GridColumn field="email" title="Email" />
     * </Grid>
     * ```
     */
    dataLayoutMode?: GridDataLayoutMode;
    /**
     * Configuration for the stacked layout mode.
     * Only applicable when `dataLayoutMode="stacked"`.
     *
     * The `cols` property defines how stacked cells are arranged:
     * - As a number: Creates that many equal-width columns
     * - As an array: The length defines column count, values define widths
     *
     * @example
     * ```tsx
     * // Two-column stacked layout with equal widths
     * <Grid
     *   dataLayoutMode="stacked"
     *   stackedLayoutSettings={{ cols: 2 }}
     *   data={data}
     * >
     *   <GridColumn field="name" title="Name" />
     *   <GridColumn field="email" title="Email" />
     * </Grid>
     *
     * // Three columns with custom widths using fr units
     * <Grid
     *   dataLayoutMode="stacked"
     *   stackedLayoutSettings={{ cols: ['1fr', '2fr', '1fr'] }}
     *   data={data}
     * >
     *   ...
     * </Grid>
     *
     * // Custom widths with pixel and fraction units
     * <Grid
     *   dataLayoutMode="stacked"
     *   stackedLayoutSettings={{ cols: [{ width: 200 }, { width: '1fr' }] }}
     *   data={data}
     * >
     *   ...
     * </Grid>
     * ```
     */
    stackedLayoutSettings?: GridStackedLayoutSettings;
}
/**
 * @hidden
 */
export interface GridComponentProps extends GridProps {
    /**
     * @hidden
     */
    localization?: LocalizationService;
    /**
     * @hidden
     */
    intl?: IntlService;
    /**
     * @hidden
     */
    scrollLeftRef?: {
        current: number;
    };
    /**
     * @hidden
     */
    widthRef?: {
        current: number;
    };
    /**
     * @hidden
     */
    containerHeightRef?: {
        current: number;
    };
    /**
     * @hidden
     */
    minRowHeightRef?: {
        current: number;
    };
    /**
     * @hidden
     */
    virtualSkipRef?: {
        current: number;
    };
    /**
     * @hidden
     */
    editZoneRef?: React.RefObject<'body' | 'pinned'>;
    /**
     * @hidden
     */
    forceUpdate?: React.DispatchWithoutAction;
    /**
     * @hidden
     */
    isClient?: boolean;
    /**
     * @hidden
     */
    innerGrid?: any;
}