@progress/kendo-react-grid 9.0.0-develop.9 → 9.0.1-develop.1

package/index.d.ts

@@ -17,7 +17,6 @@ import { DataResult } from '@progress/kendo-data-query';
 import { DragClue } from '@progress/kendo-react-data-tools';
 import { DropClue } from '@progress/kendo-react-data-tools';
 import { FilterOperator } from '@progress/kendo-react-data-tools';
-import { ForwardRefExoticComponent } from 'react';
 import { getSelectedState } from '@progress/kendo-react-data-tools';
 import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
 import { GridClassStructure } from '@progress/kendo-react-common';
@@ -29,10 +28,8 @@ import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
 import { NavigatableSettings } from '@progress/kendo-react-data-tools';
 import { PagerProps } from '@progress/kendo-react-data-tools';
 import { PagerTargetEvent } from '@progress/kendo-react-data-tools';
-import PropTypes from 'prop-types';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
-import { RefAttributes } from 'react';
 import { setSelectedState } from '@progress/kendo-react-data-tools';
 import { SortDescriptor } from '@progress/kendo-data-query';
 import { SortSettings } from '@progress/kendo-react-data-tools';
@@ -41,7 +38,6 @@ import { SVGIcon } from '@progress/kendo-react-common';
 import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
 import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';
 import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools';
-import { TableKeyboardNavigationContextType } from '@progress/kendo-react-data-tools';
 import { TableKeyDownEvent } from '@progress/kendo-react-data-tools';
 import { TableSelectableMode } from '@progress/kendo-react-data-tools';
 import { TableSelectableSettings } from '@progress/kendo-react-data-tools';
@@ -109,8 +105,30 @@ export { getSelectedStateFromKeyDown }
  */
 export declare const getStatusData: (args: StatusDataArgs) => StatusItem[];
 
-/** @hidden */
-export declare const Grid: ForwardRefExoticComponent<GridProps & RefAttributes<any>>;
+/**
+ * Represents the [KendoReact Grid component]({% slug overview_grid %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *     const [data, setData] = useState([
+ *         { foo: 'A1', bar: 'B1' },
+ *         { foo: 'A2', bar: 'B2' },
+ *         { foo: 'A3', bar: 'B2' }
+ *     ]);
+ *
+ *     return (
+ *         <Grid data={data} reorderable={true}>
+ *             <GridColumn field="foo" />
+ *             <GridColumn field="bar" />
+ *         </Grid>
+ *     );
+ * };
+ *
+ * export default App;
+ * ```
+ */
+export declare const Grid: React_2.ForwardRefExoticComponent<GridProps & React_2.RefAttributes<GridHandle | null>>;
 
 /** The attribute required by the Grid selection on Grid `td` elements. */
 export declare const GRID_COL_INDEX_ATTRIBUTE = "data-grid-col-index";
@@ -223,280 +241,6 @@ export declare interface GridCellsSettings {
     };
 }
 
-/**
- * Represents the [KendoReact Grid component]({% slug overview_grid %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    constructor(props) {
- *        super(props);
- *        this.state = {
- *            data: [
- *                { 'foo': 'A1', 'bar': 'B1' },
- *                { 'foo': 'A2', 'bar': 'B2' },
- *                { 'foo': 'A3', 'bar': 'B2' }
- *            ]
- *        };
- *    }
- *    render() {
- *        return (
- *            <Grid
- *                data={this.state.data}
- *                reorderable={true}
- *            >
- *                <GridColumn field="foo" />
- *                <GridColumn field="bar" />
- *            </Grid>
- *        );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare class GridClassComponent extends React_2.Component<GridProps> {
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static defaultProps: {};
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        data: PropTypes.Requireable<NonNullable<any[] | PropTypes.InferProps<{
-            data: PropTypes.Requireable<any[]>;
-            total: PropTypes.Requireable<number>;
-        }> | null | undefined>>;
-        sortable: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-            mode: PropTypes.Requireable<string>;
-            allowUnsort: PropTypes.Requireable<boolean>;
-        }> | null | undefined>>;
-        onSortChange: PropTypes.Requireable<(...args: any[]) => any>;
-        sort: PropTypes.Requireable<any[]>;
-        filterable: PropTypes.Requireable<boolean>;
-        filter: PropTypes.Requireable<any>;
-        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        pageable: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-            buttonCount: PropTypes.Requireable<number>;
-            responsive: PropTypes.Requireable<boolean>;
-            info: PropTypes.Requireable<boolean>;
-            type: PropTypes.Requireable<string>;
-            pageSizes: PropTypes.Requireable<NonNullable<boolean | (NonNullable<string | number | null | undefined> | null | undefined)[] | null | undefined>>;
-            previousNext: PropTypes.Requireable<boolean>;
-        }> | null | undefined>>;
-        pageSize: PropTypes.Requireable<number>;
-        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
-        total: PropTypes.Requireable<number>;
-        skip: PropTypes.Requireable<number>;
-        take: PropTypes.Requireable<number>;
-        fixedScroll: PropTypes.Requireable<boolean>;
-        onExpandChange: PropTypes.Requireable<(...args: any[]) => any>;
-        expandField: PropTypes.Requireable<string>;
-        selectedField: PropTypes.Requireable<string>;
-        onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onHeaderSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
-        resizable: PropTypes.Requireable<boolean>;
-        reorderable: PropTypes.Requireable<boolean>;
-        group: PropTypes.Requireable<any>;
-        groupable: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-            enabled: PropTypes.Requireable<boolean>;
-            footer: PropTypes.Requireable<string>;
-        }> | null | undefined>>;
-        onGroupChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onRowClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onRowDoubleClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onItemChange: PropTypes.Requireable<(...args: any[]) => any>;
-        editField: PropTypes.Requireable<string>;
-        scrollable: PropTypes.Requireable<string>;
-        rowHeight: PropTypes.Requireable<number>;
-        detailRowHeight: PropTypes.Requireable<number>;
-        detail: PropTypes.Requireable<any>;
-        style: PropTypes.Requireable<object>;
-        onDataStateChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onColumnResize: PropTypes.Requireable<(...args: any[]) => any>;
-        onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
-        dataItemKey: PropTypes.Requireable<string>;
-        navigatable: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-            mode: PropTypes.Requireable<string>;
-        }> | null | undefined>>;
-        size: PropTypes.Requireable<string>;
-    };
-    /** @hidden */
-    static contextType: React_2.Context<TableKeyboardNavigationContextType | undefined>;
-    protected dragLogic: GridCommonDragLogic;
-    private _columns;
-    private _columnsMap;
-    private _columnsMutations;
-    private _resized;
-    private _focusFirst;
-    private _newEditableRow?;
-    private _singleEditRow?;
-    private _lastActiveElement?;
-    private _shouldUpdateLeftRight;
-    private _scrollbarWidth?;
-    private contextStateRef;
-    private navigationStateRef;
-    private _data;
-    private _slicedData;
-    private wrapperScrollTop;
-    private showLicenseWatermark;
-    private resizeObserver?;
-    /**
-     * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
-     *
-     * @example
-     * ```jsx
-     * class App extends React.Component {
-     *     constructor(props) {
-     *         super(props);
-     *         this.state = {
-     *             data: [
-     *                 { 'foo': 'A1', 'bar': 'B1' },
-     *                 { 'foo': 'A2', 'bar': 'B2' },
-     *                 { 'foo': 'A3', 'bar': 'B2' }
-     *             ]
-     *         };
-     *         this.grid = null;
-     *     }
-     *     render() {
-     *         return (
-     *             <div>
-     *                 <Grid
-     *                     data={this.state.data}
-     *                     reorderable={true}
-     *                     ref={(g) => { this.grid = g; }}
-     *                 >
-     *                     <GridColumn field="foo" />
-     *                     <GridColumn field="bar" />
-     *                 </Grid>
-     *                 <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
-     *                     log current properties into browser console.
-     *                 </button>
-     *             </div>
-     *         );
-     *     }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
-     * ```
-     */
-    get columns(): GridColumnProps[];
-    /**
-     * Returns the HTML element of the Grid component.
-     */
-    get element(): HTMLDivElement | null;
-    private get document();
-    private clipboardService?;
-    private headerRef;
-    private headerElementRef;
-    private _element;
-    private tableElement;
-    private containerRef;
-    private tableBodyRef;
-    private vs;
-    private columnResize;
-    private _footer;
-    private forceUpdateTimeout;
-    private isRtl;
-    private rowIndex;
-    private headTable;
-    private rowsInEdit;
-    private get _header();
-    private get _gridId();
-    private observer;
-    constructor(props: GridProps);
-    private handleIntersection;
-    private setCurrentOnTop;
-    /**
-     * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
-     *
-     * @param options - Object, containing the rowIndex to which is going to be scrolled.
-     */
-    scrollIntoView: (options: {
-        rowIndex: number;
-    }) => void;
-    /**
-     * Method to fit columns according to their content.
-     *
-     * @param columnIds - Array of column ids to be fitted.
-     */
-    fitColumns: (columnIds: string[]) => void;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    getSnapshotBeforeUpdate(): null;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private getColumnsEssentialProps;
-    private checkMatchMediaColumnsDifferece;
-    private calculateMedia;
-    private onContextMenu;
-    private getVirtualScroll;
-    private isAllData;
-    private initializeVirtualization;
-    private getCachedScrollbarWidth;
-    private scrollHandler;
-    private onKeyDown;
-    private onFocus;
-    private onNavigationAction;
-    private rowClick;
-    private rowDblClick;
-    private itemChange;
-    private selectionChange;
-    private onHeaderSelectionChange;
-    private selectionRelease;
-    private pageChange;
-    private getTotal;
-    private moveToNextPage;
-    private moveToPrevPage;
-    private pagerPageChange;
-    private sortChange;
-    private filterChange;
-    private groupChange;
-    private raiseDataEvent;
-    private columnReorder;
-    private groupReorder;
-    private columnToGroup;
-    private columnGroupChange;
-    private resetTableWidth;
-    private onClipboard;
-    private inActiveElement;
-    private onResize;
-    private reInitVirtualization;
-    private flatData;
-    private rowHeightService;
-    private childrenToArray;
-    private readColumns;
-    private mapColumns;
-    private filterColumnsByMediaProp;
-    private initColumns;
-    private configureColumns;
-    private getHeaderRow;
-    private resolveTitle;
-    private getDataState;
-    private getArguments;
-    private getLeafDataItems;
-    private getSlicedLeafDataItems;
-    private handleFocusInEditableRows;
-}
-
 /**
  * @hidden
  */
@@ -522,71 +266,7 @@ declare interface GridColumnMenuBaseProps {
     onCloseMenu?: Function;
 }
 
-export declare class GridColumnMenuCheckboxFilter extends React_2.Component<GridColumnMenuCheckboxFilterProps, GridColumnMenuFilterStateProps_2> {
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        uniqueData: boolean;
-    };
-    /**
-     * @hidden
-     */
-    compositeFilterIndex: number;
-    constructor(props: GridColumnMenuCheckboxFilterProps);
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
-    /**
-     * @hidden
-     */
-    defaultFilter: () => any;
-    /**
-     * @hidden
-     */
-    isControlled: () => boolean;
-    /**
-     * @hidden
-     */
-    parseData: (originalData: any, isUnique: any) => any;
-    /**
-     * @hidden
-     */
-    getFilterIndex: () => any;
-    /**
-     * @hidden
-     */
-    onFilterExpand: () => void;
-    /**
-     * @hidden
-     */
-    handleSearchChange: (e: any) => void;
-    /**
-     * @hidden
-     */
-    handleClear: () => void;
-    /**
-     * @hidden
-     */
-    clear: (e: React_2.SyntheticEvent<any>) => void;
-    /**
-     * @hidden
-     */
-    submit: (e: React_2.SyntheticEvent<any>) => void;
-    /**
-     * @hidden
-     */
-    handleCheckBoxChange: (e: any, value: any) => void;
-    /**
-     * @hidden
-     */
-    isAllSelected: () => boolean;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuCheckboxFilter: (props: GridColumnMenuCheckboxFilterProps) => JSX_2.Element;
 
 /**
  * The props of the GridColumnMenuFilter component.
@@ -738,64 +418,7 @@ export declare interface GridColumnMenuColumnsListProps {
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare class GridColumnMenuFilter extends React_2.Component<GridColumnMenuFilterProps, GridColumnMenuFilterStateProps> {
-    /**
-     * Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
-     */
-    static active: (field: string, filter?: CompositeFilterDescriptor) => boolean;
-    constructor(props: GridColumnMenuFilterProps);
-    /**
-     * @hidden
-     */
-    removeGroup: (group: CompositeFilterDescriptor, rootFilter: CompositeFilterDescriptor) => CompositeFilterDescriptor;
-    /**
-     * @hidden
-     */
-    insertGroup: (group: CompositeFilterDescriptor, rootFilter: CompositeFilterDescriptor) => CompositeFilterDescriptor;
-    /**
-     * @hidden
-     */
-    isControlled: () => boolean;
-    /**
-     * @hidden
-     */
-    onFilterExpand: () => void;
-    /**
-     * @hidden
-     */
-    firstFilterChange: (event: any) => void;
-    /**
-     * @hidden
-     */
-    secondFilterChange: (event: any) => void;
-    /**
-     * @hidden
-     */
-    filterChange: (filterIndex: number, e: {
-        value: number;
-        operator: string;
-    }) => void;
-    /**
-     * @hidden
-     */
-    logicChange: (event: any) => void;
-    /**
-     * @hidden
-     */
-    clear: (event: React_2.SyntheticEvent<any>) => void;
-    /**
-     * @hidden
-     */
-    currentFilterGroup: () => CompositeFilterDescriptor;
-    /**
-     * @hidden
-     */
-    submit: (event: React_2.SyntheticEvent<any>) => void;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuFilter: (props: GridColumnMenuFilterProps) => JSX_2.Element;
 
 /**
  * The props passed to the ColumnMenu filter component.
@@ -822,18 +445,7 @@ declare interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps
 /**
  * @hidden
  */
-export declare class GridColumnMenuFilterCell extends React_2.Component<GridColumnMenuFilterCellProps, {}> {
-    constructor(props: GridColumnMenuFilterCellProps);
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private renderOperatorEditor;
-    private inputChange;
-    private operatorChange;
-    private boolDropdownChange;
-    private filterComponent;
-}
+export declare const GridColumnMenuFilterCell: (props: GridColumnMenuFilterCellProps) => JSX_2.Element;
 
 /**
  * @hidden
@@ -883,28 +495,7 @@ export declare interface GridColumnMenuFilterProps extends GridColumnMenuFilterB
 /**
  * @hidden
  */
-declare interface GridColumnMenuFilterStateProps {
-    expanded: boolean;
-    filterGroup: CompositeFilterDescriptor;
-}
-
-/**
- * @hidden
- */
-declare interface GridColumnMenuFilterStateProps_2 {
-    expanded: boolean;
-    value: string;
-    data: Array<string | object>;
-    dataFromProps: Array<string | object>;
-    currentFilter: CompositeFilterDescriptor;
-}
-
-/**
- * @hidden
- */
-export declare class GridColumnMenuFilterUI extends React_2.Component<GridColumnMenuFilterUIProps, {}> {
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuFilterUI: (props: GridColumnMenuFilterUIProps) => JSX_2.Element;
 
 /**
  * The props that will be passed to the UI of the ColumnMenu filter component.
@@ -939,69 +530,50 @@ export declare interface GridColumnMenuFilterUIProps {
 /**
  * @example
  * ```jsx-no-run
- * class TextColumnMenu extends React.Component {
- *     render() {
- *         return (
+ * const TextColumnMenu = (props) => {
+ *     return (
  *         <div>
- *             <GridColumnMenuSort {...this.props} />
- *             <GridColumnMenuGroup {...this.props} />
- *         </div>);
- *     }
- * }
+ *             <GridColumnMenuSort {...props} />
+ *             <GridColumnMenuGroup {...props} />
+ *         </div>
+ *     );
+ * };
  *
- * class App extends React.PureComponent {
- *     constructor(props) {
- *         super(props);
+ * const initialState = {
+ *     take: 10,
+ *     skip: 0
+ * };
  *
- *         this.state = this.createAppState({
- *             take: 10,
- *             skip: 0
- *         });
- *     }
+ * const App = () => {
+ *     const [dataState, setDataState] = useState(initialState);
+ *     const [result, setResult] = useState(process(products.slice(0), initialState));
  *
- *     createAppState(dataState) {
- *         return {
- *             result: process(products.slice(0), dataState),
- *             dataState: dataState
- *         };
- *     }
- *
- *     dataStateChange = (event) => {
- *         this.setState(this.createAppState(event.dataState));
+ *     const dataStateChange = (event) => {
+ *         setDataState(event.dataState);
+ *         setResult(process(products.slice(0), event.dataState));
  *     }
  *
- *     render() {
- *         return (
- *             <div>
- *                 <Grid
- *                     data={this.state.result}
- *                     {...this.state.dataState}
- *                     onDataStateChange={this.dataStateChange}
- *                     sortable={true}
- *                     pageable={true}
- *                 >
- *                     <Column field="ProductID" title="Product ID" />
- *                     <Column field="ProductName" columnMenu={TextColumnMenu} />
- *                 </Grid>
- *                 <br />
- *             </div>
- *         );
- *     }
- * }
+ *     return (
+ *         <div>
+ *             <Grid
+ *                 data={result}
+ *                 {...dataState}
+ *                 onDataStateChange={dataStateChange}
+ *                 sortable={true}
+ *                 pageable={true}
+ *             >
+ *                 <Column field="ProductID" title="Product ID" />
+ *                 <Column field="ProductName" columnMenu={TextColumnMenu} />
+ *             </Grid>
+ *             <br />
+ *         </div>
+ *     );
+ * };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * export default App;
  * ```
  */
-export declare class GridColumnMenuGroup extends React_2.Component<GridColumnMenuGroupProps, {}> {
-    /**
-     * @hidden
-     */
-    onGroupClick: (event: React_2.MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuGroup: (props: GridColumnMenuGroupProps) => JSX_2.Element;
 
 /**
  *  The props passed to the ColumnMenu group component.
@@ -1035,12 +607,7 @@ export declare const GridColumnMenuItem: (props: GridColumnMenuItemProps) => JSX
 /**
  * The GridColumnMenuItemContent that will be used inside the Grid ColumnMenu.
  */
-export declare class GridColumnMenuItemContent extends React_2.Component<GridColumnMenuItemContentProps, {}> {
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuItemContent: (props: GridColumnMenuItemContentProps) => JSX_2.Element;
 
 /**
  * The props of the GridColumnMenuItemContent component.
@@ -1055,12 +622,7 @@ declare interface GridColumnMenuItemContentProps extends KendoReactComponentBase
 /**
  * The GridColumnMenuItemGroup that will be used inside the Grid ColumnMenu.
  */
-export declare class GridColumnMenuItemGroup extends React_2.Component<GridColumnMenuItemGroupProps, {}> {
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuItemGroup: (props: GridColumnMenuItemGroupProps) => JSX_2.Element;
 
 /**
  * The props of the GridColumnMenuItemGroup component.
@@ -1068,6 +630,9 @@ export declare class GridColumnMenuItemGroup extends React_2.Component<GridColum
 declare interface GridColumnMenuItemGroupProps extends KendoReactComponentBaseProps {
 }
 
+declare interface GridColumnMenuItemGroupProps extends KendoReactComponentBaseProps {
+}
+
 /**
  * The props of the GridColumnMenuItem component.
  */
@@ -1105,80 +670,51 @@ export declare interface GridColumnMenuProps extends GridColumnMenuFilterBasePro
 /**
  * @example
  * ```jsx-no-run
- * class ColumnMenu extends React.Component {
- *     render() {
- *         return (
+ * const ColumnMenu = (props) => {
+ *     return (
  *         <div>
- *             <GridColumnMenuSort {...this.props} />
- *         </div>);
- *     }
- * }
- *
- * class App extends React.PureComponent {
- *     constructor(props) {
- *         super(props);
+ *             <GridColumnMenuSort {...props} />
+ *         </div>
+ *     );
+ * };
  *
- *         this.state = this.createAppState({
- *             take: 10,
- *             skip: 0
- *         });
- *     }
+ * const initialState = {
+ *     take: 10,
+ *     skip: 0
+ * };
  *
- *     createAppState(dataState) {
- *         return {
- *             result: process(products.slice(0), dataState),
- *             dataState: dataState
- *         };
- *     }
+ * const App = () => {
+ *     const [dataState, setDataState] = useState(initialState);
+ *     const [result, setResult] = useState(process(products.slice(0), initialState));
  *
- *     dataStateChange = (event) => {
- *         this.setState(this.createAppState(event.dataState));
- *     }
+ *     const dataStateChange = (event) => {
+ *         setDataState(event.dataState);
+ *         setResult(process(products.slice(0), event.dataState));
+ *     };
  *
- *     render() {
- *         return (
+ *     return (
+ *         <div>
  *             <div>
  *                 <Grid
- *                     data={this.state.result}
- *                     {...this.state.dataState}
- *                     onDataStateChange={this.dataStateChange}
+ *                     data={result}
+ *                     {...dataState}
+ *                     onDataStateChange={dataStateChange}
  *                     sortable={true}
  *                     pageable={true}
  *                 >
- *                     <Column field="ProductID" title="Product ID" columnMenu={ColumnMenu}/>
+ *                     <Column field="ProductID" title="Product ID" columnMenu={ColumnMenu} />
  *                     <Column field="ProductName" />
  *                 </Grid>
  *                 <br />
  *             </div>
- *         );
- *     }
- * }
+ *         </div>
+ *     );
+ * };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * export default App;
  * ```
  */
-export declare class GridColumnMenuSort extends React_2.Component<GridColumnMenuSortProps, {}> {
-    /**
-     * Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
-     */
-    static active: (field: string, sort?: SortDescriptor[]) => boolean;
-    /**
-     * @hidden
-     */
-    onAscClick: (event: any) => void;
-    /**
-     * @hidden
-     */
-    onDescClick: (event: any) => void;
-    /**
-     * @hidden
-     */
-    onSort: (event: React_2.MouseEvent<HTMLAnchorElement>, selectedDir: 'asc' | 'desc') => void;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuSort: (props: GridColumnMenuSortProps) => JSX_2.Element;
 
 /**
  *  The props passed to the ColumnMenu sort component.
@@ -1322,7 +858,7 @@ export declare interface GridColumnReorderEvent {
     /**
      * An event target.
      */
-    target: GridClassComponent;
+    target: GridHandle;
     /**
      * A native DOM event.
      */
@@ -1344,7 +880,7 @@ export declare interface GridColumnResizeEvent {
     /**
      * An event target.
      */
-    target: GridClassComponent;
+    target: GridHandle;
     /**
      * A native DOM event.
      * Can be `null` when the callback source is not user action (e.g.: method call).
@@ -1465,7 +1001,7 @@ export declare interface GridCustomFilterCellProps extends GridFilterCellProps {
     /**
      * The props and attributes that are applied to the td element by default.
      */
-    thProps?: GridThAttributes | null;
+    tdProps?: GridTdAttributes | null;
     /**
      * The default children of the table cell.
      */
@@ -1524,50 +1060,34 @@ export declare interface GridDataStateChangeEvent extends GridEvent {
  *
  * @example
  * ```jsx
- * class CustomGridDetailRow extends GridDetailRow {
- *     render() {
- *         const detailData = this.props.dataItem.MasterField2;
- *         return (
- *             <div>
- *               This is detail template with another grid inside it
- *               <Grid scrollable="none" data={detailData} />
- *             </div>
- *         );
- *     }
- * }
+ * const CustomGridDetailRow = (props) => {
+ *     const detailData = props.dataItem.MasterField2;
+ *     return (
+ *         <div>
+ *             This is detail template with another grid inside it
+ *             <Grid scrollable="none" data={detailData} />
+ *         </div>
+ *     );
+ * };
  *
- * class App extends React.Component {
- *     constructor(props) {
- *         super(props);
- *         this.state = {
- *             data: [{MasterField1:'A1', MasterField2: [{DetailField1: 1, DetailField2: 2}]},
- *                   {MasterField1:'B1', MasterField2: [{DetailField1: 3, DetailField2: 4}]},
- *                   {MasterField1:'C1', MasterField2: [{DetailField1: 5, DetailField2: 6}]}]
- *         };
- *     }
- *     render() {
- *         return (
- *             <Grid
- *                  data={this.state.data}
- *                  detail={CustomGridDetailRow}
- *              >
- *              <GridColumn field="MasterField1" />
- *             </Grid>
- *         );
- *     }
- * }
- * ReactDOM.render(
- *     <App />,
- *     document.querySelector('my-app')
- * );
+ * const App = () => {
+ *     const [data, setData] = useState([
+ *         { MasterField1: 'A1', MasterField2: [{ DetailField1: 1, DetailField2: 2 }] },
+ *         { MasterField1: 'B1', MasterField2: [{ DetailField1: 3, DetailField2: 4 }] },
+ *         { MasterField1: 'C1', MasterField2: [{ DetailField1: 5, DetailField2: 6 }] }
+ *     ]);
+ *
+ *     return (
+ *         <Grid data={data} detail={CustomGridDetailRow}>
+ *             <GridColumn field="MasterField1" />
+ *         </Grid>
+ *     );
+ * };
+ *
+ * export default App;
  * ```
  */
-export declare class GridDetailRow extends React_2.Component<GridDetailRowProps, {}> {
-    /**
-     * @hidden
-     */
-    render(): JSX.Element | null;
-}
+export declare const GridDetailRow: (props: GridDetailRowProps) => null;
 
 /**
  * The props of the GridDetailRow component ([see example]({% slug detailrow_grid %})).
@@ -1595,7 +1115,7 @@ export declare const GridEditCell: (props: GridCellProps) => JSX_2.Element | nul
 /**
  * Represents the base event object of the Grid.
  */
-export declare interface GridEvent extends BaseEvent<GridClassComponent> {
+export declare interface GridEvent extends BaseEvent<GridHandle> {
 }
 
 /**
@@ -1616,20 +1136,7 @@ export declare interface GridExpandChangeEvent extends GridEvent {
     dataIndex: number;
 }
 
-export declare class GridFilterCell extends React_2.Component<GridFilterCellProps, {}> {
-    private _inputRef;
-    constructor(props: GridFilterCellProps);
-    /**
-     * @hidden
-     */
-    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
-    private renderOperatorEditor;
-    private inputChange;
-    private operatorChange;
-    private boolDropdownChange;
-    private clear;
-    private filterComponent;
-}
+export declare const GridFilterCell: (props: GridFilterCellProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
 
 /**
  * The props of the GridFilterCell component
@@ -1815,51 +1322,95 @@ export declare interface GridGroupChangeEvent extends GridEvent {
 /**
  * Represent the `ref` of the Grid component.
  */
-export declare interface GridHandle extends Pick<GridClassComponent, keyof GridClassComponent> {
+export declare interface GridHandle {
+    /**
+     * Returns the HTML element of the Grid component.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Spreadsheet.
+     */
+    props: GridProps;
+    /**
+     * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
+     *
+     * @example
+     * ```jsx
+     * const App = () => {
+     *     const [data, setData] = useState([
+     *         { foo: 'A1', bar: 'B1' },
+     *         { foo: 'A2', bar: 'B2' },
+     *         { foo: 'A3', bar: 'B2' }
+     *     ]);
+     *
+     *     const grid = useRef<GridHandle>();
+     *
+     *     return (
+     *         <div>
+     *             <Grid data={data} reorderable={true} ref={grid}>
+     *                 <GridColumn field="foo" />
+     *                 <GridColumn field="bar" />
+     *             </Grid>
+     *             <button onClick={() => console.log(JSON.stringify(grid.current?.columns))}>
+     *                 log current properties into browser console.
+     *             </button>
+     *         </div>
+     *     );
+     * };
+     *
+     * export default App;
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    columns: GridColumnProps[];
+    /**
+     * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
+     *
+     * @param options - Object, containing the rowIndex to which is going to be scrolled.
+     */
+    scrollIntoView: (options: {
+        rowIndex: number;
+    }) => void;
+    /**
+     * Method to fit columns according to their content.
+     *
+     * @param columnIds - Array of column ids to be fitted.
+     */
+    fitColumns: (columnIds: string[]) => void;
 }
 
 /**
  * @example
  * ```jsx
- * class App extends React.PureComponent {
- *    state = {
- *        details: false,
- *        data: [
- *               { foo: 'A1', bar: 'B1', b1: 1, b2:2 },
- *               { foo: 'A2', bar: 'B2', b1: 3, b2:4 },
- *               { foo: 'A3', bar: 'B2', b1: 5, b2:6 }
- *           ]
- *    };
+ * const App = () => {
+ *     const [data, setData] = useState([
+ *         { foo: 'A1', bar: 'B1', b1: 1, b2: 2 },
+ *         { foo: 'A2', bar: 'B2', b1: 3, b2: 4 },
+ *         { foo: 'A3', bar: 'B2', b1: 5, b2: 6 }
+ *     ]);
+ *     const [barDetails, setBarDetails] = useState(false);
  *
- *    CustomHeaderCell = (props) =>
- *        <span>
- *            {props.title || props.field + ' '}
- *            <button onClick={() => this.setState({ barDetails: !this.state.barDetails })}>
- *                {this.state.barDetails ? 'collapse' : 'expand'}
- *            </button>
- *            {props.children}
- *        </span>
+ *     const CustomHeaderCell = (props) => (
+ *         <span>
+ *             {props.title || props.field + ' '}
+ *             <button onClick={() => setBarDetails(!barDetails)}>
+ *                 {barDetails ? 'collapse' : 'expand'}
+ *             </button>
+ *             {props.children}
+ *         </span>
+ *     );
  *
- *    render() {
- *        return (
- *            <Grid
- *                style={{ height: '420px' }}
- *                data={this.state.data}
- *                reorderable={true}
- *            >
- *                <GridColumn field="foo" />
- *                <GridColumn field="bar" headerCell={this.CustomHeaderCell}>
- *                    {this.state.barDetails && [
- *                        <GridColumn field="b1" />,
- *                        <GridColumn field="b2" />
- *                    ]}
- *                </GridColumn>
- *            </Grid>
- *        );
- *    }
- * }
+ *     return (
+ *         <Grid style={{ height: '420px' }} data={data} reorderable={true}>
+ *             <GridColumn field="foo" />
+ *             <GridColumn field="bar" headerCell={CustomHeaderCell}>
+ *                 {barDetails && [<GridColumn field="b1" />, <GridColumn field="b2" />]}
+ *             </GridColumn>
+ *         </Grid>
+ *     );
+ * };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * export default App;
  * ```
  */
 export declare const GridHeaderCell: (props: GridHeaderCellProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
@@ -1931,7 +1482,7 @@ export declare interface GridItemChangeEvent extends GridEvent {
 /**
  * Represents the object of the `GridKeyDownEvent` Grid event.
  */
-export declare interface GridKeyDownEvent extends GridEvent, TableKeyDownEvent<GridClassComponent> {
+export declare interface GridKeyDownEvent extends GridEvent, TableKeyDownEvent<GridHandle> {
 }
 
 /**
@@ -2014,35 +1565,23 @@ export declare interface GridNavigationActionEvent extends GridEvent {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return (
- *             <Grid data={[]}>
- *                 <GridNoRecords>
- *                     There is no data available
- *                 </GridNoRecords>
- *                 <GridColumn field="id" />
- *                 <GridColumn field="name" />
- *             </Grid>
- *         );
- *     }
- * }
- * ReactDOM.render(
- *     <App />,
- *     document.querySelector('my-app')
- * );
+ * const App = () => {
+ *     return (
+ *         <Grid data={[]}>
+ *             <GridNoRecords>There is no data available</GridNoRecords>
+ *             <GridColumn field="id" />
+ *             <GridColumn field="name" />
+ *         </Grid>
+ *     );
+ * };
+ *
+ * export default App;
  * ```
  */
-export declare class GridNoRecords extends React_2.Component<GridNoRecordsProps, {}> {
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    render(): any;
-}
+export declare const GridNoRecords: {
+    (props: GridNoRecordsProps): string | number | true | React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode>;
+    displayName: string;
+};
 
 /**
  * The props of the GridNoRecords component.
@@ -2537,7 +2076,7 @@ export declare const GridSelectionCell: (props: GridCellProps) => JSX_2.Element
 /**
  * Represents the object of the `onSelectionChange` Grid event.
  */
-export declare interface GridSelectionChangeEvent extends GridEvent, TableSelectionChangeEvent<GridClassComponent> {
+export declare interface GridSelectionChangeEvent extends GridEvent, TableSelectionChangeEvent<GridHandle> {
     /**
      * The dataItem from which the selection starts(Valid for scenarios without checkbox selection).
      */
@@ -2574,6 +2113,7 @@ export declare type GridSortSettings = SortSettings;
 
 export declare interface GridTdAttributes extends React.TdHTMLAttributes<HTMLTableCellElement> {
     [TABLE_COL_INDEX_ATTRIBUTE]?: number;
+    columnId?: string;
     key?: string;
 }
 
@@ -2587,49 +2127,35 @@ export declare interface GridThAttributes extends HeaderThElementProps {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    state = {
- *       data: [
- *            {'Column1':'A1', 'Column2':'A2'},
- *            {'Column1':'B1', 'Column2':'B2'},
- *            {'Column1':'C1', 'Column2':'C2'}
- *        ]
- *    }
+ * const App = () => {
+ *     const [data, setData] = useState([
+ *         { Column1: 'A1', Column2: 'A2' },
+ *         { Column1: 'B1', Column2: 'B2' },
+ *         { Column1: 'C1', Column2: 'C2' }
+ *     ]);
  *
- *    customClick = () => {
- *        alert("Custom handler in custom toolbar");
- *    }
- *    render() {
- *        return (
- *           <Grid data={this.state.data}>
- *                <GridToolbar>
- *                    <button
- *                        title="Click"
- *                        className="k-button k-primary"
- *                        onClick={this.customClick}
- *                    >Click
- *                    </button>
- *                </GridToolbar>
- *            </Grid>
- *        );
- *    }
- * }
- * ReactDOM.render(
- *    <App />,
- *    document.querySelector('my-app')
- * );
+ *     const customClick = () => {
+ *         alert('Custom handler in custom toolbar');
+ *     };
+ *
+ *     return (
+ *         <Grid data={data}>
+ *             <GridToolbar>
+ *                 <button title="Click" className="k-button k-primary" onClick={customClick}>
+ *                     Click
+ *                 </button>
+ *             </GridToolbar>
+ *         </Grid>
+ *     );
+ * };
+ *
+ * export default App;
  * ```
  */
-export declare class GridToolbar extends React_2.Component<GridToolbarProps, {}> {
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridToolbar: {
+    (props: GridToolbarProps): JSX_2.Element;
+    displayName: string;
+};
 
 /**
  * The properties of the GridToolbar component.
@@ -2670,6 +2196,16 @@ export declare interface GridToolbarProps {
  */
 declare type handler = (prevIndex: number, nextIndex: number, nativeEvent: any) => void;
 
+/**
+ * Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
+ */
+export declare const isColumnMenuFilterActive: (field: string, filter?: CompositeFilterDescriptor) => boolean;
+
+/**
+ * Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
+ */
+export declare const isColumnMenuSortActive: (field: string, sort?: SortDescriptor[]) => boolean;
+
 /**
  * @hidden
  */