devextreme-react 25.1.7 → 25.2.2-beta

package/esm/data-grid.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 25.1.7
- * Build date: Mon Nov 10 2025
+ * Version: 25.2.2-beta
+ * Build date: Thu Nov 20 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -11,1376 +11,1487 @@
  * https://github.com/DevExpress/devextreme-react
  */
 
-"use client";
-import * as React from "react";
-import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
-import dxDataGrid from "devextreme/ui/data_grid";
-import { Component as BaseComponent } from "./core/component";
-import NestedOption from "./core/nested-option";
-const DataGrid = memo(forwardRef((props, ref) => {
-    const baseRef = useRef(null);
-    useImperativeHandle(ref, () => ({
-        instance() {
-            return baseRef.current?.getInstance();
-        }
-    }), []);
-    const subscribableOptions = useMemo(() => (["columns", "editing", "editing.changes", "editing.editColumnName", "editing.editRowKey", "filterValue", "focusedColumnIndex", "focusedRowIndex", "focusedRowKey", "groupPanel", "groupPanel.visible", "paging", "paging.pageIndex", "paging.pageSize", "selectedRowKeys", "selectionFilter", "filterBuilder.value", "filterBuilderPopup.height", "filterBuilderPopup.position", "filterBuilderPopup.visible", "filterBuilderPopup.width", "filterPanel.filterEnabled", "editing.form.formData", "editing.popup.height", "editing.popup.position", "editing.popup.visible", "editing.popup.width", "searchPanel.text"]), []);
-    const independentEvents = useMemo(() => (["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanging", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onToolbarPreparing"]), []);
-    const defaults = useMemo(() => ({
-        defaultColumns: "columns",
-        defaultEditing: "editing",
-        defaultFilterValue: "filterValue",
-        defaultFocusedColumnIndex: "focusedColumnIndex",
-        defaultFocusedRowIndex: "focusedRowIndex",
-        defaultFocusedRowKey: "focusedRowKey",
-        defaultGroupPanel: "groupPanel",
-        defaultPaging: "paging",
-        defaultSelectedRowKeys: "selectedRowKeys",
-        defaultSelectionFilter: "selectionFilter",
-    }), []);
-    const expectedChildren = useMemo(() => ({
-        column: { optionName: "columns", isCollectionItem: true },
-        columnChooser: { optionName: "columnChooser", isCollectionItem: false },
-        columnFixing: { optionName: "columnFixing", isCollectionItem: false },
-        dataGridHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
-        dataGridSelection: { optionName: "selection", isCollectionItem: false },
-        editing: { optionName: "editing", isCollectionItem: false },
-        export: { optionName: "export", isCollectionItem: false },
-        filterBuilder: { optionName: "filterBuilder", isCollectionItem: false },
-        filterBuilderPopup: { optionName: "filterBuilderPopup", isCollectionItem: false },
-        filterPanel: { optionName: "filterPanel", isCollectionItem: false },
-        filterRow: { optionName: "filterRow", isCollectionItem: false },
-        grouping: { optionName: "grouping", isCollectionItem: false },
-        groupPanel: { optionName: "groupPanel", isCollectionItem: false },
-        headerFilter: { optionName: "headerFilter", isCollectionItem: false },
-        keyboardNavigation: { optionName: "keyboardNavigation", isCollectionItem: false },
-        loadPanel: { optionName: "loadPanel", isCollectionItem: false },
-        masterDetail: { optionName: "masterDetail", isCollectionItem: false },
-        pager: { optionName: "pager", isCollectionItem: false },
-        paging: { optionName: "paging", isCollectionItem: false },
-        remoteOperations: { optionName: "remoteOperations", isCollectionItem: false },
-        rowDragging: { optionName: "rowDragging", isCollectionItem: false },
-        scrolling: { optionName: "scrolling", isCollectionItem: false },
-        searchPanel: { optionName: "searchPanel", isCollectionItem: false },
-        selection: { optionName: "selection", isCollectionItem: false },
-        sortByGroupSummaryInfo: { optionName: "sortByGroupSummaryInfo", isCollectionItem: true },
-        sorting: { optionName: "sorting", isCollectionItem: false },
-        stateStoring: { optionName: "stateStoring", isCollectionItem: false },
-        summary: { optionName: "summary", isCollectionItem: false },
-        toolbar: { optionName: "toolbar", isCollectionItem: false }
-    }), []);
-    const templateProps = useMemo(() => ([
-        {
-            tmplOption: "dataRowTemplate",
-            render: "dataRowRender",
-            component: "dataRowComponent"
-        },
-        {
-            tmplOption: "rowTemplate",
-            render: "rowRender",
-            component: "rowComponent"
-        },
-    ]), []);
-    return (React.createElement((BaseComponent), {
-        WidgetClass: dxDataGrid,
-        ref: baseRef,
-        useRequestAnimationFrameFlag: true,
-        subscribableOptions,
-        independentEvents,
-        defaults,
-        expectedChildren,
-        templateProps,
-        ...props,
-    }));
-}));
-const _componentAnimation = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "animation",
-            ExpectedChildren: {
-                hide: { optionName: "hide", isCollectionItem: false },
-                show: { optionName: "show", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Animation = Object.assign(_componentAnimation, {
-    componentType: "option",
-});
-const _componentAsyncRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "async"
-            },
-        },
-    });
-};
-const AsyncRule = Object.assign(_componentAsyncRule, {
-    componentType: "option",
-});
-const _componentAt = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "at",
-        },
-    });
-};
-const At = Object.assign(_componentAt, {
-    componentType: "option",
-});
-const _componentBoundaryOffset = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "boundaryOffset",
-        },
-    });
-};
-const BoundaryOffset = Object.assign(_componentBoundaryOffset, {
-    componentType: "option",
-});
-const _componentButton = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "buttons",
-            IsCollectionItem: true,
-            TemplateProps: [{
-                    tmplOption: "template",
-                    render: "render",
-                    component: "component"
-                }],
-        },
-    });
-};
-const Button = Object.assign(_componentButton, {
-    componentType: "option",
-});
-const _componentChange = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "changes",
-            IsCollectionItem: true,
-        },
-    });
-};
-const Change = Object.assign(_componentChange, {
-    componentType: "option",
-});
-const _componentColCountByScreen = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "colCountByScreen",
-        },
-    });
-};
-const ColCountByScreen = Object.assign(_componentColCountByScreen, {
-    componentType: "option",
-});
-const _componentCollision = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "collision",
-        },
-    });
-};
-const Collision = Object.assign(_componentCollision, {
-    componentType: "option",
-});
-const _componentColumn = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "columns",
-            IsCollectionItem: true,
-            DefaultsProps: {
-                defaultFilterValue: "filterValue",
-                defaultFilterValues: "filterValues",
-                defaultGroupIndex: "groupIndex",
-                defaultSelectedFilterOperation: "selectedFilterOperation",
-                defaultSortIndex: "sortIndex",
-                defaultSortOrder: "sortOrder",
-                defaultVisible: "visible",
-                defaultVisibleIndex: "visibleIndex"
-            },
-            ExpectedChildren: {
-                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
-                button: { optionName: "buttons", isCollectionItem: true },
-                columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
-                columnLookup: { optionName: "lookup", isCollectionItem: false },
-                CompareRule: { optionName: "validationRules", isCollectionItem: true },
-                CustomRule: { optionName: "validationRules", isCollectionItem: true },
-                EmailRule: { optionName: "validationRules", isCollectionItem: true },
-                format: { optionName: "format", isCollectionItem: false },
-                formItem: { optionName: "formItem", isCollectionItem: false },
-                headerFilter: { optionName: "headerFilter", isCollectionItem: false },
-                lookup: { optionName: "lookup", isCollectionItem: false },
-                NumericRule: { optionName: "validationRules", isCollectionItem: true },
-                PatternRule: { optionName: "validationRules", isCollectionItem: true },
-                RangeRule: { optionName: "validationRules", isCollectionItem: true },
-                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
-                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
-                validationRule: { optionName: "validationRules", isCollectionItem: true }
-            },
-            TemplateProps: [{
-                    tmplOption: "cellTemplate",
-                    render: "cellRender",
-                    component: "cellComponent"
-                }, {
-                    tmplOption: "editCellTemplate",
-                    render: "editCellRender",
-                    component: "editCellComponent"
-                }, {
-                    tmplOption: "groupCellTemplate",
-                    render: "groupCellRender",
-                    component: "groupCellComponent"
-                }, {
-                    tmplOption: "headerCellTemplate",
-                    render: "headerCellRender",
-                    component: "headerCellComponent"
-                }],
-        },
-    });
-};
-const Column = Object.assign(_componentColumn, {
-    componentType: "option",
-});
-const _componentColumnChooser = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "columnChooser",
-            ExpectedChildren: {
-                columnChooserSearch: { optionName: "search", isCollectionItem: false },
-                columnChooserSelection: { optionName: "selection", isCollectionItem: false },
-                position: { optionName: "position", isCollectionItem: false },
-                search: { optionName: "search", isCollectionItem: false },
-                selection: { optionName: "selection", isCollectionItem: false }
-            },
-        },
-    });
-};
-const ColumnChooser = Object.assign(_componentColumnChooser, {
-    componentType: "option",
-});
-const _componentColumnChooserSearch = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "search",
-        },
-    });
-};
-const ColumnChooserSearch = Object.assign(_componentColumnChooserSearch, {
-    componentType: "option",
-});
-const _componentColumnChooserSelection = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "selection",
-        },
-    });
-};
-const ColumnChooserSelection = Object.assign(_componentColumnChooserSelection, {
-    componentType: "option",
-});
-const _componentColumnFixing = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "columnFixing",
-            ExpectedChildren: {
-                columnFixingTexts: { optionName: "texts", isCollectionItem: false },
-                icons: { optionName: "icons", isCollectionItem: false },
-                texts: { optionName: "texts", isCollectionItem: false }
-            },
-        },
-    });
-};
-const ColumnFixing = Object.assign(_componentColumnFixing, {
-    componentType: "option",
-});
-const _componentColumnFixingTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const ColumnFixingTexts = Object.assign(_componentColumnFixingTexts, {
-    componentType: "option",
-});
-const _componentColumnHeaderFilter = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "headerFilter",
-            ExpectedChildren: {
-                columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-                search: { optionName: "search", isCollectionItem: false }
-            },
-        },
-    });
-};
-const ColumnHeaderFilter = Object.assign(_componentColumnHeaderFilter, {
-    componentType: "option",
-});
-const _componentColumnHeaderFilterSearch = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "search",
-        },
-    });
-};
-const ColumnHeaderFilterSearch = Object.assign(_componentColumnHeaderFilterSearch, {
-    componentType: "option",
-});
-const _componentColumnLookup = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "lookup",
-        },
-    });
-};
-const ColumnLookup = Object.assign(_componentColumnLookup, {
-    componentType: "option",
-});
-const _componentCompareRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "compare"
-            },
-        },
-    });
-};
-const CompareRule = Object.assign(_componentCompareRule, {
-    componentType: "option",
-});
-const _componentCursorOffset = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "cursorOffset",
-        },
-    });
-};
-const CursorOffset = Object.assign(_componentCursorOffset, {
-    componentType: "option",
-});
-const _componentCustomOperation = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "customOperations",
-            IsCollectionItem: true,
-            TemplateProps: [{
-                    tmplOption: "editorTemplate",
-                    render: "editorRender",
-                    component: "editorComponent"
-                }],
-        },
-    });
-};
-const CustomOperation = Object.assign(_componentCustomOperation, {
-    componentType: "option",
-});
-const _componentCustomRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "custom"
-            },
-        },
-    });
-};
-const CustomRule = Object.assign(_componentCustomRule, {
-    componentType: "option",
-});
-const _componentDataGridHeaderFilter = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "headerFilter",
-            ExpectedChildren: {
-                dataGridHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-                dataGridHeaderFilterTexts: { optionName: "texts", isCollectionItem: false },
-                search: { optionName: "search", isCollectionItem: false },
-                texts: { optionName: "texts", isCollectionItem: false }
-            },
-        },
-    });
-};
-const DataGridHeaderFilter = Object.assign(_componentDataGridHeaderFilter, {
-    componentType: "option",
-});
-const _componentDataGridHeaderFilterSearch = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "search",
-        },
-    });
-};
-const DataGridHeaderFilterSearch = Object.assign(_componentDataGridHeaderFilterSearch, {
-    componentType: "option",
-});
-const _componentDataGridHeaderFilterTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const DataGridHeaderFilterTexts = Object.assign(_componentDataGridHeaderFilterTexts, {
-    componentType: "option",
-});
-const _componentDataGridSelection = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "selection",
-        },
-    });
-};
-const DataGridSelection = Object.assign(_componentDataGridSelection, {
-    componentType: "option",
-});
-const _componentEditing = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "editing",
-            DefaultsProps: {
-                defaultChanges: "changes",
-                defaultEditColumnName: "editColumnName",
-                defaultEditRowKey: "editRowKey"
-            },
-            ExpectedChildren: {
-                change: { optionName: "changes", isCollectionItem: true },
-                editingTexts: { optionName: "texts", isCollectionItem: false },
-                form: { optionName: "form", isCollectionItem: false },
-                popup: { optionName: "popup", isCollectionItem: false },
-                texts: { optionName: "texts", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Editing = Object.assign(_componentEditing, {
-    componentType: "option",
-});
-const _componentEditingTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const EditingTexts = Object.assign(_componentEditingTexts, {
-    componentType: "option",
-});
-const _componentEmailRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "email"
-            },
-        },
-    });
-};
-const EmailRule = Object.assign(_componentEmailRule, {
-    componentType: "option",
-});
-const _componentExport = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "export",
-            ExpectedChildren: {
-                exportTexts: { optionName: "texts", isCollectionItem: false },
-                texts: { optionName: "texts", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Export = Object.assign(_componentExport, {
-    componentType: "option",
-});
-const _componentExportTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const ExportTexts = Object.assign(_componentExportTexts, {
-    componentType: "option",
-});
-const _componentField = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "fields",
-            IsCollectionItem: true,
-            ExpectedChildren: {
-                fieldLookup: { optionName: "lookup", isCollectionItem: false },
-                format: { optionName: "format", isCollectionItem: false },
-                lookup: { optionName: "lookup", isCollectionItem: false }
-            },
-            TemplateProps: [{
-                    tmplOption: "editorTemplate",
-                    render: "editorRender",
-                    component: "editorComponent"
-                }],
-        },
-    });
-};
-const Field = Object.assign(_componentField, {
-    componentType: "option",
-});
-const _componentFieldLookup = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "lookup",
-        },
-    });
-};
-const FieldLookup = Object.assign(_componentFieldLookup, {
-    componentType: "option",
-});
-const _componentFilterBuilder = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "filterBuilder",
-            DefaultsProps: {
-                defaultValue: "value"
-            },
-            ExpectedChildren: {
-                customOperation: { optionName: "customOperations", isCollectionItem: true },
-                field: { optionName: "fields", isCollectionItem: true },
-                filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
-                groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
-            },
-        },
-    });
-};
-const FilterBuilder = Object.assign(_componentFilterBuilder, {
-    componentType: "option",
-});
-const _componentFilterBuilderPopup = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "filterBuilderPopup",
-            DefaultsProps: {
-                defaultHeight: "height",
-                defaultPosition: "position",
-                defaultVisible: "visible",
-                defaultWidth: "width"
-            },
-            ExpectedChildren: {
-                animation: { optionName: "animation", isCollectionItem: false },
-                position: { optionName: "position", isCollectionItem: false },
-                toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-            },
-            TemplateProps: [{
-                    tmplOption: "contentTemplate",
-                    render: "contentRender",
-                    component: "contentComponent"
-                }, {
-                    tmplOption: "titleTemplate",
-                    render: "titleRender",
-                    component: "titleComponent"
-                }],
-        },
-    });
-};
-const FilterBuilderPopup = Object.assign(_componentFilterBuilderPopup, {
-    componentType: "option",
-});
-const _componentFilterOperationDescriptions = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "filterOperationDescriptions",
-        },
-    });
-};
-const FilterOperationDescriptions = Object.assign(_componentFilterOperationDescriptions, {
-    componentType: "option",
-});
-const _componentFilterPanel = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "filterPanel",
-            DefaultsProps: {
-                defaultFilterEnabled: "filterEnabled"
-            },
-            ExpectedChildren: {
-                filterPanelTexts: { optionName: "texts", isCollectionItem: false },
-                texts: { optionName: "texts", isCollectionItem: false }
-            },
-        },
-    });
-};
-const FilterPanel = Object.assign(_componentFilterPanel, {
-    componentType: "option",
-});
-const _componentFilterPanelTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const FilterPanelTexts = Object.assign(_componentFilterPanelTexts, {
-    componentType: "option",
-});
-const _componentFilterRow = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "filterRow",
-            ExpectedChildren: {
-                operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
-            },
-        },
-    });
-};
-const FilterRow = Object.assign(_componentFilterRow, {
-    componentType: "option",
-});
-const _componentForm = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "form",
-            DefaultsProps: {
-                defaultFormData: "formData"
-            },
-            ExpectedChildren: {
-                colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Form = Object.assign(_componentForm, {
-    componentType: "option",
-});
-const _componentFormat = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "format",
-        },
-    });
-};
-const Format = Object.assign(_componentFormat, {
-    componentType: "option",
-});
-const _componentFormItem = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "formItem",
-            ExpectedChildren: {
-                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
-                CompareRule: { optionName: "validationRules", isCollectionItem: true },
-                CustomRule: { optionName: "validationRules", isCollectionItem: true },
-                EmailRule: { optionName: "validationRules", isCollectionItem: true },
-                label: { optionName: "label", isCollectionItem: false },
-                NumericRule: { optionName: "validationRules", isCollectionItem: true },
-                PatternRule: { optionName: "validationRules", isCollectionItem: true },
-                RangeRule: { optionName: "validationRules", isCollectionItem: true },
-                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
-                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
-                validationRule: { optionName: "validationRules", isCollectionItem: true }
-            },
-            TemplateProps: [{
-                    tmplOption: "template",
-                    render: "render",
-                    component: "component"
-                }],
-        },
-    });
-};
-const FormItem = Object.assign(_componentFormItem, {
-    componentType: "option",
-});
-const _componentFrom = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "from",
-            ExpectedChildren: {
-                position: { optionName: "position", isCollectionItem: false }
-            },
-        },
-    });
-};
-const From = Object.assign(_componentFrom, {
-    componentType: "option",
-});
-const _componentGrouping = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "grouping",
-            ExpectedChildren: {
-                groupingTexts: { optionName: "texts", isCollectionItem: false },
-                texts: { optionName: "texts", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Grouping = Object.assign(_componentGrouping, {
-    componentType: "option",
-});
-const _componentGroupingTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const GroupingTexts = Object.assign(_componentGroupingTexts, {
-    componentType: "option",
-});
-const _componentGroupItem = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "groupItems",
-            IsCollectionItem: true,
-            ExpectedChildren: {
-                valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-            },
-        },
-    });
-};
-const GroupItem = Object.assign(_componentGroupItem, {
-    componentType: "option",
-});
-const _componentGroupOperationDescriptions = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "groupOperationDescriptions",
-        },
-    });
-};
-const GroupOperationDescriptions = Object.assign(_componentGroupOperationDescriptions, {
-    componentType: "option",
-});
-const _componentGroupPanel = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "groupPanel",
-            DefaultsProps: {
-                defaultVisible: "visible"
-            },
-        },
-    });
-};
-const GroupPanel = Object.assign(_componentGroupPanel, {
-    componentType: "option",
-});
-const _componentHeaderFilter = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "headerFilter",
-            ExpectedChildren: {
-                columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-                dataGridHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-                dataGridHeaderFilterTexts: { optionName: "texts", isCollectionItem: false }
-            },
-        },
-    });
-};
-const HeaderFilter = Object.assign(_componentHeaderFilter, {
-    componentType: "option",
-});
-const _componentHide = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "hide",
-            ExpectedChildren: {
-                from: { optionName: "from", isCollectionItem: false },
-                to: { optionName: "to", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Hide = Object.assign(_componentHide, {
-    componentType: "option",
-});
-const _componentIcons = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "icons",
-        },
-    });
-};
-const Icons = Object.assign(_componentIcons, {
-    componentType: "option",
-});
-const _componentItem = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "items",
-            IsCollectionItem: true,
-            TemplateProps: [{
-                    tmplOption: "menuItemTemplate",
-                    render: "menuItemRender",
-                    component: "menuItemComponent"
-                }, {
-                    tmplOption: "template",
-                    render: "render",
-                    component: "component"
-                }],
-        },
-    });
-};
-const Item = Object.assign(_componentItem, {
-    componentType: "option",
-});
-const _componentKeyboardNavigation = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "keyboardNavigation",
-        },
-    });
-};
-const KeyboardNavigation = Object.assign(_componentKeyboardNavigation, {
-    componentType: "option",
-});
-const _componentLabel = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "label",
-            TemplateProps: [{
-                    tmplOption: "template",
-                    render: "render",
-                    component: "component"
-                }],
-        },
-    });
-};
-const Label = Object.assign(_componentLabel, {
-    componentType: "option",
-});
-const _componentLoadPanel = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "loadPanel",
-        },
-    });
-};
-const LoadPanel = Object.assign(_componentLoadPanel, {
-    componentType: "option",
-});
-const _componentLookup = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "lookup",
-        },
-    });
-};
-const Lookup = Object.assign(_componentLookup, {
-    componentType: "option",
-});
-const _componentMasterDetail = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "masterDetail",
-            TemplateProps: [{
-                    tmplOption: "template",
-                    render: "render",
-                    component: "component"
-                }],
-        },
-    });
-};
-const MasterDetail = Object.assign(_componentMasterDetail, {
-    componentType: "option",
-});
-const _componentMy = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "my",
-        },
-    });
-};
-const My = Object.assign(_componentMy, {
-    componentType: "option",
-});
-const _componentNumericRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "numeric"
-            },
-        },
-    });
-};
-const NumericRule = Object.assign(_componentNumericRule, {
-    componentType: "option",
-});
-const _componentOffset = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "offset",
-        },
-    });
-};
-const Offset = Object.assign(_componentOffset, {
-    componentType: "option",
-});
-const _componentOperationDescriptions = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "operationDescriptions",
-        },
-    });
-};
-const OperationDescriptions = Object.assign(_componentOperationDescriptions, {
-    componentType: "option",
-});
-const _componentPager = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "pager",
-        },
-    });
-};
-const Pager = Object.assign(_componentPager, {
-    componentType: "option",
-});
-const _componentPaging = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "paging",
-            DefaultsProps: {
-                defaultPageIndex: "pageIndex",
-                defaultPageSize: "pageSize"
-            },
-        },
-    });
-};
-const Paging = Object.assign(_componentPaging, {
-    componentType: "option",
-});
-const _componentPatternRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "pattern"
-            },
-        },
-    });
-};
-const PatternRule = Object.assign(_componentPatternRule, {
-    componentType: "option",
-});
-const _componentPopup = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "popup",
-            DefaultsProps: {
-                defaultHeight: "height",
-                defaultPosition: "position",
-                defaultVisible: "visible",
-                defaultWidth: "width"
-            },
-            ExpectedChildren: {
-                animation: { optionName: "animation", isCollectionItem: false },
-                position: { optionName: "position", isCollectionItem: false },
-                toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-            },
-            TemplateProps: [{
-                    tmplOption: "contentTemplate",
-                    render: "contentRender",
-                    component: "contentComponent"
-                }, {
-                    tmplOption: "titleTemplate",
-                    render: "titleRender",
-                    component: "titleComponent"
-                }],
-        },
-    });
-};
-const Popup = Object.assign(_componentPopup, {
-    componentType: "option",
-});
-const _componentPosition = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "position",
-            ExpectedChildren: {
-                at: { optionName: "at", isCollectionItem: false },
-                boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
-                collision: { optionName: "collision", isCollectionItem: false },
-                my: { optionName: "my", isCollectionItem: false },
-                offset: { optionName: "offset", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Position = Object.assign(_componentPosition, {
-    componentType: "option",
-});
-const _componentRangeRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "range"
-            },
-        },
-    });
-};
-const RangeRule = Object.assign(_componentRangeRule, {
-    componentType: "option",
-});
-const _componentRemoteOperations = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "remoteOperations",
-        },
-    });
-};
-const RemoteOperations = Object.assign(_componentRemoteOperations, {
-    componentType: "option",
-});
-const _componentRequiredRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "required"
-            },
-        },
-    });
-};
-const RequiredRule = Object.assign(_componentRequiredRule, {
-    componentType: "option",
-});
-const _componentRowDragging = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "rowDragging",
-            ExpectedChildren: {
-                cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
-            },
-            TemplateProps: [{
-                    tmplOption: "dragTemplate",
-                    render: "dragRender",
-                    component: "dragComponent"
-                }],
-        },
-    });
-};
-const RowDragging = Object.assign(_componentRowDragging, {
-    componentType: "option",
-});
-const _componentScrolling = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "scrolling",
-        },
-    });
-};
-const Scrolling = Object.assign(_componentScrolling, {
-    componentType: "option",
-});
-const _componentSearch = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "search",
-        },
-    });
-};
-const Search = Object.assign(_componentSearch, {
-    componentType: "option",
-});
-const _componentSearchPanel = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "searchPanel",
-            DefaultsProps: {
-                defaultText: "text"
-            },
-        },
-    });
-};
-const SearchPanel = Object.assign(_componentSearchPanel, {
-    componentType: "option",
-});
-const _componentSelection = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "selection",
-        },
-    });
-};
-const Selection = Object.assign(_componentSelection, {
-    componentType: "option",
-});
-const _componentShow = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "show",
-            ExpectedChildren: {
-                from: { optionName: "from", isCollectionItem: false },
-                to: { optionName: "to", isCollectionItem: false }
-            },
-        },
-    });
-};
-const Show = Object.assign(_componentShow, {
-    componentType: "option",
-});
-const _componentSortByGroupSummaryInfo = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "sortByGroupSummaryInfo",
-            IsCollectionItem: true,
-        },
-    });
-};
-const SortByGroupSummaryInfo = Object.assign(_componentSortByGroupSummaryInfo, {
-    componentType: "option",
-});
-const _componentSorting = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "sorting",
-        },
-    });
-};
-const Sorting = Object.assign(_componentSorting, {
-    componentType: "option",
-});
-const _componentStateStoring = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "stateStoring",
-        },
-    });
-};
-const StateStoring = Object.assign(_componentStateStoring, {
-    componentType: "option",
-});
-const _componentStringLengthRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "stringLength"
-            },
-        },
-    });
-};
-const StringLengthRule = Object.assign(_componentStringLengthRule, {
-    componentType: "option",
-});
-const _componentSummary = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "summary",
-            ExpectedChildren: {
-                groupItem: { optionName: "groupItems", isCollectionItem: true },
-                summaryTexts: { optionName: "texts", isCollectionItem: false },
-                texts: { optionName: "texts", isCollectionItem: false },
-                totalItem: { optionName: "totalItems", isCollectionItem: true }
-            },
-        },
-    });
-};
-const Summary = Object.assign(_componentSummary, {
-    componentType: "option",
-});
-const _componentSummaryTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const SummaryTexts = Object.assign(_componentSummaryTexts, {
-    componentType: "option",
-});
-const _componentTexts = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "texts",
-        },
-    });
-};
-const Texts = Object.assign(_componentTexts, {
-    componentType: "option",
-});
-const _componentTo = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "to",
-            ExpectedChildren: {
-                position: { optionName: "position", isCollectionItem: false }
-            },
-        },
-    });
-};
-const To = Object.assign(_componentTo, {
-    componentType: "option",
-});
-const _componentToolbar = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "toolbar",
-            ExpectedChildren: {
-                item: { optionName: "items", isCollectionItem: true }
-            },
-        },
-    });
-};
-const Toolbar = Object.assign(_componentToolbar, {
-    componentType: "option",
-});
-const _componentToolbarItem = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "toolbarItems",
-            IsCollectionItem: true,
-            TemplateProps: [{
-                    tmplOption: "menuItemTemplate",
-                    render: "menuItemRender",
-                    component: "menuItemComponent"
-                }, {
-                    tmplOption: "template",
-                    render: "render",
-                    component: "component"
-                }],
-        },
-    });
-};
-const ToolbarItem = Object.assign(_componentToolbarItem, {
-    componentType: "option",
-});
-const _componentTotalItem = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "totalItems",
-            IsCollectionItem: true,
-            ExpectedChildren: {
-                valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-            },
-        },
-    });
-};
-const TotalItem = Object.assign(_componentTotalItem, {
-    componentType: "option",
-});
-const _componentValidationRule = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "validationRules",
-            IsCollectionItem: true,
-            PredefinedProps: {
-                type: "required"
-            },
-        },
-    });
-};
-const ValidationRule = Object.assign(_componentValidationRule, {
-    componentType: "option",
-});
-const _componentValueFormat = (props) => {
-    return React.createElement((NestedOption), {
-        ...props,
-        elementDescriptor: {
-            OptionName: "valueFormat",
-        },
-    });
-};
-const ValueFormat = Object.assign(_componentValueFormat, {
-    componentType: "option",
-});
-export default DataGrid;
-export { DataGrid, Animation, AsyncRule, At, BoundaryOffset, Button, Change, ColCountByScreen, Collision, Column, ColumnChooser, ColumnChooserSearch, ColumnChooserSelection, ColumnFixing, ColumnFixingTexts, ColumnHeaderFilter, ColumnHeaderFilterSearch, ColumnLookup, CompareRule, CursorOffset, CustomOperation, CustomRule, DataGridHeaderFilter, DataGridHeaderFilterSearch, DataGridHeaderFilterTexts, DataGridSelection, Editing, EditingTexts, EmailRule, Export, ExportTexts, Field, FieldLookup, FilterBuilder, FilterBuilderPopup, FilterOperationDescriptions, FilterPanel, FilterPanelTexts, FilterRow, Form, Format, FormItem, From, Grouping, GroupingTexts, GroupItem, GroupOperationDescriptions, GroupPanel, HeaderFilter, Hide, Icons, Item, KeyboardNavigation, Label, LoadPanel, Lookup, MasterDetail, My, NumericRule, Offset, OperationDescriptions, Pager, Paging, PatternRule, Popup, Position, RangeRule, RemoteOperations, RequiredRule, RowDragging, Scrolling, Search, SearchPanel, Selection, Show, SortByGroupSummaryInfo, Sorting, StateStoring, StringLengthRule, Summary, SummaryTexts, Texts, To, Toolbar, ToolbarItem, TotalItem, ValidationRule, ValueFormat };
+"use client";
+import * as React from "react";
+import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
+import dxDataGrid from "devextreme/ui/data_grid";
+import { Component as BaseComponent } from "./core/component";
+import NestedOption from "./core/nested-option";
+const DataGrid = memo(forwardRef((props, ref) => {
+    const baseRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        instance() {
+            return baseRef.current?.getInstance();
+        }
+    }), []);
+    const subscribableOptions = useMemo(() => (["columns", "editing", "editing.changes", "editing.editColumnName", "editing.editRowKey", "filterValue", "focusedColumnIndex", "focusedRowIndex", "focusedRowKey", "groupPanel", "groupPanel.visible", "paging", "paging.pageIndex", "paging.pageSize", "selectedRowKeys", "selectionFilter", "filterBuilder.value", "filterBuilderPopup.height", "filterBuilderPopup.position", "filterBuilderPopup.visible", "filterBuilderPopup.width", "filterPanel.filterEnabled", "editing.form.formData", "editing.popup.height", "editing.popup.position", "editing.popup.visible", "editing.popup.width", "searchPanel.text"]), []);
+    const independentEvents = useMemo(() => (["onAdaptiveDetailRowPreparing", "onAIColumnRequestCreating", "onCellClick", "onCellDblClick", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanging", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onToolbarPreparing"]), []);
+    const defaults = useMemo(() => ({
+        defaultColumns: "columns",
+        defaultEditing: "editing",
+        defaultFilterValue: "filterValue",
+        defaultFocusedColumnIndex: "focusedColumnIndex",
+        defaultFocusedRowIndex: "focusedRowIndex",
+        defaultFocusedRowKey: "focusedRowKey",
+        defaultGroupPanel: "groupPanel",
+        defaultPaging: "paging",
+        defaultSelectedRowKeys: "selectedRowKeys",
+        defaultSelectionFilter: "selectionFilter",
+    }), []);
+    const expectedChildren = useMemo(() => ({
+        column: { optionName: "columns", isCollectionItem: true },
+        columnChooser: { optionName: "columnChooser", isCollectionItem: false },
+        columnFixing: { optionName: "columnFixing", isCollectionItem: false },
+        dataGridHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
+        dataGridSelection: { optionName: "selection", isCollectionItem: false },
+        editing: { optionName: "editing", isCollectionItem: false },
+        export: { optionName: "export", isCollectionItem: false },
+        filterBuilder: { optionName: "filterBuilder", isCollectionItem: false },
+        filterBuilderPopup: { optionName: "filterBuilderPopup", isCollectionItem: false },
+        filterPanel: { optionName: "filterPanel", isCollectionItem: false },
+        filterRow: { optionName: "filterRow", isCollectionItem: false },
+        grouping: { optionName: "grouping", isCollectionItem: false },
+        groupPanel: { optionName: "groupPanel", isCollectionItem: false },
+        headerFilter: { optionName: "headerFilter", isCollectionItem: false },
+        keyboardNavigation: { optionName: "keyboardNavigation", isCollectionItem: false },
+        loadPanel: { optionName: "loadPanel", isCollectionItem: false },
+        masterDetail: { optionName: "masterDetail", isCollectionItem: false },
+        pager: { optionName: "pager", isCollectionItem: false },
+        paging: { optionName: "paging", isCollectionItem: false },
+        remoteOperations: { optionName: "remoteOperations", isCollectionItem: false },
+        rowDragging: { optionName: "rowDragging", isCollectionItem: false },
+        scrolling: { optionName: "scrolling", isCollectionItem: false },
+        searchPanel: { optionName: "searchPanel", isCollectionItem: false },
+        selection: { optionName: "selection", isCollectionItem: false },
+        sortByGroupSummaryInfo: { optionName: "sortByGroupSummaryInfo", isCollectionItem: true },
+        sorting: { optionName: "sorting", isCollectionItem: false },
+        stateStoring: { optionName: "stateStoring", isCollectionItem: false },
+        summary: { optionName: "summary", isCollectionItem: false },
+        toolbar: { optionName: "toolbar", isCollectionItem: false }
+    }), []);
+    const templateProps = useMemo(() => ([
+        {
+            tmplOption: "dataRowTemplate",
+            render: "dataRowRender",
+            component: "dataRowComponent"
+        },
+        {
+            tmplOption: "rowTemplate",
+            render: "rowRender",
+            component: "rowComponent"
+        },
+    ]), []);
+    return (React.createElement((BaseComponent), {
+        WidgetClass: dxDataGrid,
+        ref: baseRef,
+        useRequestAnimationFrameFlag: true,
+        subscribableOptions,
+        independentEvents,
+        defaults,
+        expectedChildren,
+        templateProps,
+        ...props,
+    }));
+}));
+const _componentAI = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "ai",
+            ExpectedChildren: {
+                editorOptions: { optionName: "editorOptions", isCollectionItem: false }
+            },
+        },
+    });
+};
+const AI = Object.assign(_componentAI, {
+    componentType: "option",
+});
+const _componentAIOptions = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "aiOptions",
+        },
+    });
+};
+const AIOptions = Object.assign(_componentAIOptions, {
+    componentType: "option",
+});
+const _componentAnimation = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "animation",
+            ExpectedChildren: {
+                hide: { optionName: "hide", isCollectionItem: false },
+                show: { optionName: "show", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Animation = Object.assign(_componentAnimation, {
+    componentType: "option",
+});
+const _componentAsyncRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "async"
+            },
+        },
+    });
+};
+const AsyncRule = Object.assign(_componentAsyncRule, {
+    componentType: "option",
+});
+const _componentAt = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "at",
+        },
+    });
+};
+const At = Object.assign(_componentAt, {
+    componentType: "option",
+});
+const _componentBoundaryOffset = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "boundaryOffset",
+        },
+    });
+};
+const BoundaryOffset = Object.assign(_componentBoundaryOffset, {
+    componentType: "option",
+});
+const _componentButton = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "buttons",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                options: { optionName: "options", isCollectionItem: false }
+            },
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const Button = Object.assign(_componentButton, {
+    componentType: "option",
+});
+const _componentChange = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "changes",
+            IsCollectionItem: true,
+        },
+    });
+};
+const Change = Object.assign(_componentChange, {
+    componentType: "option",
+});
+const _componentColCountByScreen = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "colCountByScreen",
+        },
+    });
+};
+const ColCountByScreen = Object.assign(_componentColCountByScreen, {
+    componentType: "option",
+});
+const _componentCollision = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "collision",
+        },
+    });
+};
+const Collision = Object.assign(_componentCollision, {
+    componentType: "option",
+});
+const _componentColumn = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "columns",
+            IsCollectionItem: true,
+            DefaultsProps: {
+                defaultFilterValue: "filterValue",
+                defaultFilterValues: "filterValues",
+                defaultGroupIndex: "groupIndex",
+                defaultSelectedFilterOperation: "selectedFilterOperation",
+                defaultSortIndex: "sortIndex",
+                defaultSortOrder: "sortOrder",
+                defaultVisible: "visible",
+                defaultVisibleIndex: "visibleIndex"
+            },
+            ExpectedChildren: {
+                ai: { optionName: "ai", isCollectionItem: false },
+                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+                button: { optionName: "buttons", isCollectionItem: true },
+                columnButton: { optionName: "buttons", isCollectionItem: true },
+                columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
+                columnLookup: { optionName: "lookup", isCollectionItem: false },
+                CompareRule: { optionName: "validationRules", isCollectionItem: true },
+                CustomRule: { optionName: "validationRules", isCollectionItem: true },
+                EmailRule: { optionName: "validationRules", isCollectionItem: true },
+                format: { optionName: "format", isCollectionItem: false },
+                formItem: { optionName: "formItem", isCollectionItem: false },
+                headerFilter: { optionName: "headerFilter", isCollectionItem: false },
+                lookup: { optionName: "lookup", isCollectionItem: false },
+                NumericRule: { optionName: "validationRules", isCollectionItem: true },
+                PatternRule: { optionName: "validationRules", isCollectionItem: true },
+                RangeRule: { optionName: "validationRules", isCollectionItem: true },
+                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+                validationRule: { optionName: "validationRules", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "cellTemplate",
+                    render: "cellRender",
+                    component: "cellComponent"
+                }, {
+                    tmplOption: "editCellTemplate",
+                    render: "editCellRender",
+                    component: "editCellComponent"
+                }, {
+                    tmplOption: "groupCellTemplate",
+                    render: "groupCellRender",
+                    component: "groupCellComponent"
+                }, {
+                    tmplOption: "headerCellTemplate",
+                    render: "headerCellRender",
+                    component: "headerCellComponent"
+                }],
+        },
+    });
+};
+const Column = Object.assign(_componentColumn, {
+    componentType: "option",
+});
+const _componentColumnButton = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "buttons",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const ColumnButton = Object.assign(_componentColumnButton, {
+    componentType: "option",
+});
+const _componentColumnChooser = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "columnChooser",
+            ExpectedChildren: {
+                columnChooserSearch: { optionName: "search", isCollectionItem: false },
+                columnChooserSelection: { optionName: "selection", isCollectionItem: false },
+                position: { optionName: "position", isCollectionItem: false },
+                search: { optionName: "search", isCollectionItem: false },
+                selection: { optionName: "selection", isCollectionItem: false }
+            },
+        },
+    });
+};
+const ColumnChooser = Object.assign(_componentColumnChooser, {
+    componentType: "option",
+});
+const _componentColumnChooserSearch = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const ColumnChooserSearch = Object.assign(_componentColumnChooserSearch, {
+    componentType: "option",
+});
+const _componentColumnChooserSelection = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "selection",
+        },
+    });
+};
+const ColumnChooserSelection = Object.assign(_componentColumnChooserSelection, {
+    componentType: "option",
+});
+const _componentColumnFixing = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "columnFixing",
+            ExpectedChildren: {
+                columnFixingTexts: { optionName: "texts", isCollectionItem: false },
+                icons: { optionName: "icons", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const ColumnFixing = Object.assign(_componentColumnFixing, {
+    componentType: "option",
+});
+const _componentColumnFixingTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const ColumnFixingTexts = Object.assign(_componentColumnFixingTexts, {
+    componentType: "option",
+});
+const _componentColumnHeaderFilter = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "headerFilter",
+            ExpectedChildren: {
+                columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                search: { optionName: "search", isCollectionItem: false }
+            },
+        },
+    });
+};
+const ColumnHeaderFilter = Object.assign(_componentColumnHeaderFilter, {
+    componentType: "option",
+});
+const _componentColumnHeaderFilterSearch = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const ColumnHeaderFilterSearch = Object.assign(_componentColumnHeaderFilterSearch, {
+    componentType: "option",
+});
+const _componentColumnLookup = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "lookup",
+        },
+    });
+};
+const ColumnLookup = Object.assign(_componentColumnLookup, {
+    componentType: "option",
+});
+const _componentCompareRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "compare"
+            },
+        },
+    });
+};
+const CompareRule = Object.assign(_componentCompareRule, {
+    componentType: "option",
+});
+const _componentCursorOffset = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "cursorOffset",
+        },
+    });
+};
+const CursorOffset = Object.assign(_componentCursorOffset, {
+    componentType: "option",
+});
+const _componentCustomOperation = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "customOperations",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "editorTemplate",
+                    render: "editorRender",
+                    component: "editorComponent"
+                }],
+        },
+    });
+};
+const CustomOperation = Object.assign(_componentCustomOperation, {
+    componentType: "option",
+});
+const _componentCustomRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "custom"
+            },
+        },
+    });
+};
+const CustomRule = Object.assign(_componentCustomRule, {
+    componentType: "option",
+});
+const _componentDataGridHeaderFilter = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "headerFilter",
+            ExpectedChildren: {
+                dataGridHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                dataGridHeaderFilterTexts: { optionName: "texts", isCollectionItem: false },
+                search: { optionName: "search", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const DataGridHeaderFilter = Object.assign(_componentDataGridHeaderFilter, {
+    componentType: "option",
+});
+const _componentDataGridHeaderFilterSearch = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const DataGridHeaderFilterSearch = Object.assign(_componentDataGridHeaderFilterSearch, {
+    componentType: "option",
+});
+const _componentDataGridHeaderFilterTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const DataGridHeaderFilterTexts = Object.assign(_componentDataGridHeaderFilterTexts, {
+    componentType: "option",
+});
+const _componentDataGridSelection = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "selection",
+        },
+    });
+};
+const DataGridSelection = Object.assign(_componentDataGridSelection, {
+    componentType: "option",
+});
+const _componentEditing = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "editing",
+            DefaultsProps: {
+                defaultChanges: "changes",
+                defaultEditColumnName: "editColumnName",
+                defaultEditRowKey: "editRowKey"
+            },
+            ExpectedChildren: {
+                change: { optionName: "changes", isCollectionItem: true },
+                editingTexts: { optionName: "texts", isCollectionItem: false },
+                form: { optionName: "form", isCollectionItem: false },
+                popup: { optionName: "popup", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Editing = Object.assign(_componentEditing, {
+    componentType: "option",
+});
+const _componentEditingTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const EditingTexts = Object.assign(_componentEditingTexts, {
+    componentType: "option",
+});
+const _componentEditorOptions = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "editorOptions",
+            DefaultsProps: {
+                defaultValue: "value"
+            },
+            ExpectedChildren: {
+                button: { optionName: "buttons", isCollectionItem: true },
+                editorOptionsButton: { optionName: "buttons", isCollectionItem: true }
+            },
+        },
+    });
+};
+const EditorOptions = Object.assign(_componentEditorOptions, {
+    componentType: "option",
+});
+const _componentEditorOptionsButton = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "buttons",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                options: { optionName: "options", isCollectionItem: false }
+            },
+        },
+    });
+};
+const EditorOptionsButton = Object.assign(_componentEditorOptionsButton, {
+    componentType: "option",
+});
+const _componentEmailRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "email"
+            },
+        },
+    });
+};
+const EmailRule = Object.assign(_componentEmailRule, {
+    componentType: "option",
+});
+const _componentExport = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "export",
+            ExpectedChildren: {
+                exportTexts: { optionName: "texts", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Export = Object.assign(_componentExport, {
+    componentType: "option",
+});
+const _componentExportTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const ExportTexts = Object.assign(_componentExportTexts, {
+    componentType: "option",
+});
+const _componentField = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "fields",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                fieldLookup: { optionName: "lookup", isCollectionItem: false },
+                format: { optionName: "format", isCollectionItem: false },
+                lookup: { optionName: "lookup", isCollectionItem: false }
+            },
+            TemplateProps: [{
+                    tmplOption: "editorTemplate",
+                    render: "editorRender",
+                    component: "editorComponent"
+                }],
+        },
+    });
+};
+const Field = Object.assign(_componentField, {
+    componentType: "option",
+});
+const _componentFieldLookup = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "lookup",
+        },
+    });
+};
+const FieldLookup = Object.assign(_componentFieldLookup, {
+    componentType: "option",
+});
+const _componentFilterBuilder = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterBuilder",
+            DefaultsProps: {
+                defaultValue: "value"
+            },
+            ExpectedChildren: {
+                customOperation: { optionName: "customOperations", isCollectionItem: true },
+                field: { optionName: "fields", isCollectionItem: true },
+                filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
+                groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
+            },
+        },
+    });
+};
+const FilterBuilder = Object.assign(_componentFilterBuilder, {
+    componentType: "option",
+});
+const _componentFilterBuilderPopup = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterBuilderPopup",
+            DefaultsProps: {
+                defaultHeight: "height",
+                defaultPosition: "position",
+                defaultVisible: "visible",
+                defaultWidth: "width"
+            },
+            ExpectedChildren: {
+                animation: { optionName: "animation", isCollectionItem: false },
+                position: { optionName: "position", isCollectionItem: false },
+                toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "contentTemplate",
+                    render: "contentRender",
+                    component: "contentComponent"
+                }, {
+                    tmplOption: "titleTemplate",
+                    render: "titleRender",
+                    component: "titleComponent"
+                }],
+        },
+    });
+};
+const FilterBuilderPopup = Object.assign(_componentFilterBuilderPopup, {
+    componentType: "option",
+});
+const _componentFilterOperationDescriptions = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterOperationDescriptions",
+        },
+    });
+};
+const FilterOperationDescriptions = Object.assign(_componentFilterOperationDescriptions, {
+    componentType: "option",
+});
+const _componentFilterPanel = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterPanel",
+            DefaultsProps: {
+                defaultFilterEnabled: "filterEnabled"
+            },
+            ExpectedChildren: {
+                filterPanelTexts: { optionName: "texts", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const FilterPanel = Object.assign(_componentFilterPanel, {
+    componentType: "option",
+});
+const _componentFilterPanelTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const FilterPanelTexts = Object.assign(_componentFilterPanelTexts, {
+    componentType: "option",
+});
+const _componentFilterRow = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterRow",
+            ExpectedChildren: {
+                operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
+            },
+        },
+    });
+};
+const FilterRow = Object.assign(_componentFilterRow, {
+    componentType: "option",
+});
+const _componentForm = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "form",
+            DefaultsProps: {
+                defaultFormData: "formData"
+            },
+            ExpectedChildren: {
+                colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Form = Object.assign(_componentForm, {
+    componentType: "option",
+});
+const _componentFormat = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "format",
+        },
+    });
+};
+const Format = Object.assign(_componentFormat, {
+    componentType: "option",
+});
+const _componentFormItem = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "formItem",
+            ExpectedChildren: {
+                aiOptions: { optionName: "aiOptions", isCollectionItem: false },
+                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+                CompareRule: { optionName: "validationRules", isCollectionItem: true },
+                CustomRule: { optionName: "validationRules", isCollectionItem: true },
+                EmailRule: { optionName: "validationRules", isCollectionItem: true },
+                label: { optionName: "label", isCollectionItem: false },
+                NumericRule: { optionName: "validationRules", isCollectionItem: true },
+                PatternRule: { optionName: "validationRules", isCollectionItem: true },
+                RangeRule: { optionName: "validationRules", isCollectionItem: true },
+                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+                validationRule: { optionName: "validationRules", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const FormItem = Object.assign(_componentFormItem, {
+    componentType: "option",
+});
+const _componentFrom = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "from",
+            ExpectedChildren: {
+                position: { optionName: "position", isCollectionItem: false }
+            },
+        },
+    });
+};
+const From = Object.assign(_componentFrom, {
+    componentType: "option",
+});
+const _componentGrouping = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "grouping",
+            ExpectedChildren: {
+                groupingTexts: { optionName: "texts", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Grouping = Object.assign(_componentGrouping, {
+    componentType: "option",
+});
+const _componentGroupingTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const GroupingTexts = Object.assign(_componentGroupingTexts, {
+    componentType: "option",
+});
+const _componentGroupItem = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "groupItems",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                valueFormat: { optionName: "valueFormat", isCollectionItem: false }
+            },
+        },
+    });
+};
+const GroupItem = Object.assign(_componentGroupItem, {
+    componentType: "option",
+});
+const _componentGroupOperationDescriptions = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "groupOperationDescriptions",
+        },
+    });
+};
+const GroupOperationDescriptions = Object.assign(_componentGroupOperationDescriptions, {
+    componentType: "option",
+});
+const _componentGroupPanel = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "groupPanel",
+            DefaultsProps: {
+                defaultVisible: "visible"
+            },
+        },
+    });
+};
+const GroupPanel = Object.assign(_componentGroupPanel, {
+    componentType: "option",
+});
+const _componentHeaderFilter = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "headerFilter",
+            ExpectedChildren: {
+                columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                dataGridHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                dataGridHeaderFilterTexts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const HeaderFilter = Object.assign(_componentHeaderFilter, {
+    componentType: "option",
+});
+const _componentHide = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "hide",
+            ExpectedChildren: {
+                from: { optionName: "from", isCollectionItem: false },
+                to: { optionName: "to", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Hide = Object.assign(_componentHide, {
+    componentType: "option",
+});
+const _componentIcons = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "icons",
+        },
+    });
+};
+const Icons = Object.assign(_componentIcons, {
+    componentType: "option",
+});
+const _componentIndicatorOptions = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "indicatorOptions",
+        },
+    });
+};
+const IndicatorOptions = Object.assign(_componentIndicatorOptions, {
+    componentType: "option",
+});
+const _componentItem = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "menuItemTemplate",
+                    render: "menuItemRender",
+                    component: "menuItemComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const Item = Object.assign(_componentItem, {
+    componentType: "option",
+});
+const _componentKeyboardNavigation = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "keyboardNavigation",
+        },
+    });
+};
+const KeyboardNavigation = Object.assign(_componentKeyboardNavigation, {
+    componentType: "option",
+});
+const _componentLabel = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "label",
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const Label = Object.assign(_componentLabel, {
+    componentType: "option",
+});
+const _componentLoadPanel = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "loadPanel",
+            ExpectedChildren: {
+                indicatorOptions: { optionName: "indicatorOptions", isCollectionItem: false }
+            },
+        },
+    });
+};
+const LoadPanel = Object.assign(_componentLoadPanel, {
+    componentType: "option",
+});
+const _componentLookup = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "lookup",
+        },
+    });
+};
+const Lookup = Object.assign(_componentLookup, {
+    componentType: "option",
+});
+const _componentMasterDetail = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "masterDetail",
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const MasterDetail = Object.assign(_componentMasterDetail, {
+    componentType: "option",
+});
+const _componentMy = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "my",
+        },
+    });
+};
+const My = Object.assign(_componentMy, {
+    componentType: "option",
+});
+const _componentNumericRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "numeric"
+            },
+        },
+    });
+};
+const NumericRule = Object.assign(_componentNumericRule, {
+    componentType: "option",
+});
+const _componentOffset = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "offset",
+        },
+    });
+};
+const Offset = Object.assign(_componentOffset, {
+    componentType: "option",
+});
+const _componentOperationDescriptions = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "operationDescriptions",
+        },
+    });
+};
+const OperationDescriptions = Object.assign(_componentOperationDescriptions, {
+    componentType: "option",
+});
+const _componentOptions = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "options",
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const Options = Object.assign(_componentOptions, {
+    componentType: "option",
+});
+const _componentPager = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "pager",
+        },
+    });
+};
+const Pager = Object.assign(_componentPager, {
+    componentType: "option",
+});
+const _componentPaging = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "paging",
+            DefaultsProps: {
+                defaultPageIndex: "pageIndex",
+                defaultPageSize: "pageSize"
+            },
+        },
+    });
+};
+const Paging = Object.assign(_componentPaging, {
+    componentType: "option",
+});
+const _componentPatternRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "pattern"
+            },
+        },
+    });
+};
+const PatternRule = Object.assign(_componentPatternRule, {
+    componentType: "option",
+});
+const _componentPopup = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "popup",
+            DefaultsProps: {
+                defaultHeight: "height",
+                defaultPosition: "position",
+                defaultVisible: "visible",
+                defaultWidth: "width"
+            },
+            ExpectedChildren: {
+                animation: { optionName: "animation", isCollectionItem: false },
+                position: { optionName: "position", isCollectionItem: false },
+                toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "contentTemplate",
+                    render: "contentRender",
+                    component: "contentComponent"
+                }, {
+                    tmplOption: "titleTemplate",
+                    render: "titleRender",
+                    component: "titleComponent"
+                }],
+        },
+    });
+};
+const Popup = Object.assign(_componentPopup, {
+    componentType: "option",
+});
+const _componentPosition = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "position",
+            ExpectedChildren: {
+                at: { optionName: "at", isCollectionItem: false },
+                boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
+                collision: { optionName: "collision", isCollectionItem: false },
+                my: { optionName: "my", isCollectionItem: false },
+                offset: { optionName: "offset", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Position = Object.assign(_componentPosition, {
+    componentType: "option",
+});
+const _componentRangeRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "range"
+            },
+        },
+    });
+};
+const RangeRule = Object.assign(_componentRangeRule, {
+    componentType: "option",
+});
+const _componentRemoteOperations = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "remoteOperations",
+        },
+    });
+};
+const RemoteOperations = Object.assign(_componentRemoteOperations, {
+    componentType: "option",
+});
+const _componentRequiredRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "required"
+            },
+        },
+    });
+};
+const RequiredRule = Object.assign(_componentRequiredRule, {
+    componentType: "option",
+});
+const _componentRowDragging = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "rowDragging",
+            ExpectedChildren: {
+                cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
+            },
+            TemplateProps: [{
+                    tmplOption: "dragTemplate",
+                    render: "dragRender",
+                    component: "dragComponent"
+                }],
+        },
+    });
+};
+const RowDragging = Object.assign(_componentRowDragging, {
+    componentType: "option",
+});
+const _componentScrolling = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "scrolling",
+        },
+    });
+};
+const Scrolling = Object.assign(_componentScrolling, {
+    componentType: "option",
+});
+const _componentSearch = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const Search = Object.assign(_componentSearch, {
+    componentType: "option",
+});
+const _componentSearchPanel = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "searchPanel",
+            DefaultsProps: {
+                defaultText: "text"
+            },
+        },
+    });
+};
+const SearchPanel = Object.assign(_componentSearchPanel, {
+    componentType: "option",
+});
+const _componentSelection = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "selection",
+        },
+    });
+};
+const Selection = Object.assign(_componentSelection, {
+    componentType: "option",
+});
+const _componentShow = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "show",
+            ExpectedChildren: {
+                from: { optionName: "from", isCollectionItem: false },
+                to: { optionName: "to", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Show = Object.assign(_componentShow, {
+    componentType: "option",
+});
+const _componentSortByGroupSummaryInfo = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "sortByGroupSummaryInfo",
+            IsCollectionItem: true,
+        },
+    });
+};
+const SortByGroupSummaryInfo = Object.assign(_componentSortByGroupSummaryInfo, {
+    componentType: "option",
+});
+const _componentSorting = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "sorting",
+        },
+    });
+};
+const Sorting = Object.assign(_componentSorting, {
+    componentType: "option",
+});
+const _componentStateStoring = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "stateStoring",
+        },
+    });
+};
+const StateStoring = Object.assign(_componentStateStoring, {
+    componentType: "option",
+});
+const _componentStringLengthRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "stringLength"
+            },
+        },
+    });
+};
+const StringLengthRule = Object.assign(_componentStringLengthRule, {
+    componentType: "option",
+});
+const _componentSummary = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "summary",
+            ExpectedChildren: {
+                groupItem: { optionName: "groupItems", isCollectionItem: true },
+                summaryTexts: { optionName: "texts", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false },
+                totalItem: { optionName: "totalItems", isCollectionItem: true }
+            },
+        },
+    });
+};
+const Summary = Object.assign(_componentSummary, {
+    componentType: "option",
+});
+const _componentSummaryTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const SummaryTexts = Object.assign(_componentSummaryTexts, {
+    componentType: "option",
+});
+const _componentTexts = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const Texts = Object.assign(_componentTexts, {
+    componentType: "option",
+});
+const _componentTo = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "to",
+            ExpectedChildren: {
+                position: { optionName: "position", isCollectionItem: false }
+            },
+        },
+    });
+};
+const To = Object.assign(_componentTo, {
+    componentType: "option",
+});
+const _componentToolbar = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "toolbar",
+            ExpectedChildren: {
+                item: { optionName: "items", isCollectionItem: true }
+            },
+        },
+    });
+};
+const Toolbar = Object.assign(_componentToolbar, {
+    componentType: "option",
+});
+const _componentToolbarItem = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "toolbarItems",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "menuItemTemplate",
+                    render: "menuItemRender",
+                    component: "menuItemComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const ToolbarItem = Object.assign(_componentToolbarItem, {
+    componentType: "option",
+});
+const _componentTotalItem = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "totalItems",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                valueFormat: { optionName: "valueFormat", isCollectionItem: false }
+            },
+        },
+    });
+};
+const TotalItem = Object.assign(_componentTotalItem, {
+    componentType: "option",
+});
+const _componentValidationRule = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "required"
+            },
+        },
+    });
+};
+const ValidationRule = Object.assign(_componentValidationRule, {
+    componentType: "option",
+});
+const _componentValueFormat = (props) => {
+    return React.createElement((NestedOption), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "valueFormat",
+        },
+    });
+};
+const ValueFormat = Object.assign(_componentValueFormat, {
+    componentType: "option",
+});
+export default DataGrid;
+export { DataGrid, AI, AIOptions, Animation, AsyncRule, At, BoundaryOffset, Button, Change, ColCountByScreen, Collision, Column, ColumnButton, ColumnChooser, ColumnChooserSearch, ColumnChooserSelection, ColumnFixing, ColumnFixingTexts, ColumnHeaderFilter, ColumnHeaderFilterSearch, ColumnLookup, CompareRule, CursorOffset, CustomOperation, CustomRule, DataGridHeaderFilter, DataGridHeaderFilterSearch, DataGridHeaderFilterTexts, DataGridSelection, Editing, EditingTexts, EditorOptions, EditorOptionsButton, EmailRule, Export, ExportTexts, Field, FieldLookup, FilterBuilder, FilterBuilderPopup, FilterOperationDescriptions, FilterPanel, FilterPanelTexts, FilterRow, Form, Format, FormItem, From, Grouping, GroupingTexts, GroupItem, GroupOperationDescriptions, GroupPanel, HeaderFilter, Hide, Icons, IndicatorOptions, Item, KeyboardNavigation, Label, LoadPanel, Lookup, MasterDetail, My, NumericRule, Offset, OperationDescriptions, Options, Pager, Paging, PatternRule, Popup, Position, RangeRule, RemoteOperations, RequiredRule, RowDragging, Scrolling, Search, SearchPanel, Selection, Show, SortByGroupSummaryInfo, Sorting, StateStoring, StringLengthRule, Summary, SummaryTexts, Texts, To, Toolbar, ToolbarItem, TotalItem, ValidationRule, ValueFormat };