devextreme-react 23.2.6 → 24.1.2-beta

package/esm/data-grid.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.6
- * Build date: Wed May 01 2024
+ * Version: 24.1.2-beta
+ * Build date: Mon May 13 2024
  *
  * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -12,352 +12,161 @@
  */
 
 "use client";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from "react";
+import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
 import dxDataGrid from "devextreme/ui/data_grid";
-import * as PropTypes from "prop-types";
 import { Component as BaseComponent } from "./core/component";
 import NestedOption from "./core/nested-option";
-var DataGrid = /** @class */ (function (_super) {
-    __extends(DataGrid, _super);
-    function DataGrid() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._WidgetClass = dxDataGrid;
-        _this.useRequestAnimationFrameFlag = true;
-        _this.subscribableOptions = ["columns", "editing", "editing.changes", "editing.editColumnName", "editing.editRowKey", "filterPanel", "filterPanel.filterEnabled", "filterValue", "focusedColumnIndex", "focusedRowIndex", "focusedRowKey", "groupPanel", "groupPanel.visible", "paging", "paging.pageIndex", "paging.pageSize", "searchPanel", "searchPanel.text", "selectedRowKeys", "selectionFilter"];
-        _this.independentEvents = ["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"];
-        _this._defaults = {
-            defaultColumns: "columns",
-            defaultEditing: "editing",
-            defaultFilterPanel: "filterPanel",
-            defaultFilterValue: "filterValue",
-            defaultFocusedColumnIndex: "focusedColumnIndex",
-            defaultFocusedRowIndex: "focusedRowIndex",
-            defaultFocusedRowKey: "focusedRowKey",
-            defaultGroupPanel: "groupPanel",
-            defaultPaging: "paging",
-            defaultSearchPanel: "searchPanel",
-            defaultSelectedRowKeys: "selectedRowKeys",
-            defaultSelectionFilter: "selectionFilter"
-        };
-        _this._expectedChildren = {
-            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 }
-        };
-        _this._templateProps = [{
-                tmplOption: "dataRowTemplate",
-                render: "dataRowRender",
-                component: "dataRowComponent",
-                keyFn: "dataRowKeyFn"
-            }, {
-                tmplOption: "rowTemplate",
-                render: "rowRender",
-                component: "rowComponent",
-                keyFn: "rowKeyFn"
-            }];
-        return _this;
-    }
-    Object.defineProperty(DataGrid.prototype, "instance", {
-        get: function () {
-            return this._instance;
+var DataGrid = memo(forwardRef(function (props, ref) {
+    var baseRef = useRef(null);
+    useImperativeHandle(ref, function () { return ({
+        instance: function () {
+            var _a;
+            return (_a = baseRef.current) === null || _a === void 0 ? void 0 : _a.getInstance();
+        }
+    }); }, [baseRef.current]);
+    var subscribableOptions = useMemo(function () { return (["columns", "editing", "editing.changes", "editing.editColumnName", "editing.editRowKey", "filterPanel", "filterPanel.filterEnabled", "filterValue", "focusedColumnIndex", "focusedRowIndex", "focusedRowKey", "groupPanel", "groupPanel.visible", "paging", "paging.pageIndex", "paging.pageSize", "searchPanel", "searchPanel.text", "selectedRowKeys", "selectionFilter"]); }, []);
+    var independentEvents = useMemo(function () { return (["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"]); }, []);
+    var defaults = useMemo(function () { return ({
+        defaultColumns: "columns",
+        defaultEditing: "editing",
+        defaultFilterPanel: "filterPanel",
+        defaultFilterValue: "filterValue",
+        defaultFocusedColumnIndex: "focusedColumnIndex",
+        defaultFocusedRowIndex: "focusedRowIndex",
+        defaultFocusedRowKey: "focusedRowKey",
+        defaultGroupPanel: "groupPanel",
+        defaultPaging: "paging",
+        defaultSearchPanel: "searchPanel",
+        defaultSelectedRowKeys: "selectedRowKeys",
+        defaultSelectionFilter: "selectionFilter",
+    }); }, []);
+    var expectedChildren = useMemo(function () { return ({
+        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 }
+    }); }, []);
+    var templateProps = useMemo(function () { return ([
+        {
+            tmplOption: "dataRowTemplate",
+            render: "dataRowRender",
+            component: "dataRowComponent"
         },
-        enumerable: false,
-        configurable: true
-    });
-    return DataGrid;
-}(BaseComponent));
-DataGrid.propTypes = {
-    accessKey: PropTypes.string,
-    activeStateEnabled: PropTypes.bool,
-    allowColumnReordering: PropTypes.bool,
-    allowColumnResizing: PropTypes.bool,
-    autoNavigateToFocusedRow: PropTypes.bool,
-    cacheEnabled: PropTypes.bool,
-    cellHintEnabled: PropTypes.bool,
-    columnAutoWidth: PropTypes.bool,
-    columnChooser: PropTypes.object,
-    columnFixing: PropTypes.object,
-    columnHidingEnabled: PropTypes.bool,
-    columnMinWidth: PropTypes.number,
-    columnResizingMode: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.oneOf([
-            "nextColumn",
-            "widget"
-        ])
-    ]),
-    columns: PropTypes.array,
-    columnWidth: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.oneOf([
-                "auto"
-            ])
-        ])
-    ]),
-    customizeColumns: PropTypes.func,
-    dateSerializationFormat: PropTypes.string,
-    disabled: PropTypes.bool,
-    editing: PropTypes.object,
-    elementAttr: PropTypes.object,
-    errorRowEnabled: PropTypes.bool,
-    export: PropTypes.object,
-    filterBuilder: PropTypes.object,
-    filterBuilderPopup: PropTypes.object,
-    filterPanel: PropTypes.object,
-    filterRow: PropTypes.object,
-    filterSyncEnabled: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.oneOf([
-                "auto"
-            ])
-        ])
-    ]),
-    filterValue: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.func,
-        PropTypes.string
-    ]),
-    focusedColumnIndex: PropTypes.number,
-    focusedRowEnabled: PropTypes.bool,
-    focusedRowIndex: PropTypes.number,
-    grouping: PropTypes.object,
-    groupPanel: PropTypes.object,
-    headerFilter: PropTypes.object,
-    height: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.number,
-        PropTypes.string
-    ]),
-    highlightChanges: PropTypes.bool,
-    hint: PropTypes.string,
-    hoverStateEnabled: PropTypes.bool,
-    keyboardNavigation: PropTypes.object,
-    keyExpr: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.string
-    ]),
-    loadPanel: PropTypes.object,
-    masterDetail: PropTypes.object,
-    noDataText: PropTypes.string,
-    onAdaptiveDetailRowPreparing: PropTypes.func,
-    onCellClick: PropTypes.func,
-    onCellDblClick: PropTypes.func,
-    onCellHoverChanged: PropTypes.func,
-    onCellPrepared: PropTypes.func,
-    onContentReady: PropTypes.func,
-    onContextMenuPreparing: PropTypes.func,
-    onDataErrorOccurred: PropTypes.func,
-    onDisposing: PropTypes.func,
-    onEditCanceled: PropTypes.func,
-    onEditCanceling: PropTypes.func,
-    onEditingStart: PropTypes.func,
-    onEditorPrepared: PropTypes.func,
-    onEditorPreparing: PropTypes.func,
-    onExporting: PropTypes.func,
-    onFocusedCellChanged: PropTypes.func,
-    onFocusedCellChanging: PropTypes.func,
-    onFocusedRowChanged: PropTypes.func,
-    onFocusedRowChanging: PropTypes.func,
-    onInitialized: PropTypes.func,
-    onInitNewRow: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    onOptionChanged: PropTypes.func,
-    onRowClick: PropTypes.func,
-    onRowCollapsed: PropTypes.func,
-    onRowCollapsing: PropTypes.func,
-    onRowDblClick: PropTypes.func,
-    onRowExpanded: PropTypes.func,
-    onRowExpanding: PropTypes.func,
-    onRowInserted: PropTypes.func,
-    onRowInserting: PropTypes.func,
-    onRowPrepared: PropTypes.func,
-    onRowRemoved: PropTypes.func,
-    onRowRemoving: PropTypes.func,
-    onRowUpdated: PropTypes.func,
-    onRowUpdating: PropTypes.func,
-    onRowValidating: PropTypes.func,
-    onSaved: PropTypes.func,
-    onSaving: PropTypes.func,
-    onSelectionChanged: PropTypes.func,
-    onToolbarPreparing: PropTypes.func,
-    pager: PropTypes.object,
-    paging: PropTypes.object,
-    remoteOperations: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.object,
-        PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.oneOf([
-                "auto"
-            ])
-        ])
-    ]),
-    renderAsync: PropTypes.bool,
-    repaintChangesOnly: PropTypes.bool,
-    rowAlternationEnabled: PropTypes.bool,
-    rowDragging: PropTypes.object,
-    rtlEnabled: PropTypes.bool,
-    scrolling: PropTypes.object,
-    searchPanel: PropTypes.object,
-    selectedRowKeys: PropTypes.array,
-    selection: PropTypes.object,
-    selectionFilter: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.func,
-        PropTypes.string
-    ]),
-    showBorders: PropTypes.bool,
-    showColumnHeaders: PropTypes.bool,
-    showColumnLines: PropTypes.bool,
-    showRowLines: PropTypes.bool,
-    sortByGroupSummaryInfo: PropTypes.array,
-    sorting: PropTypes.object,
-    stateStoring: PropTypes.object,
-    summary: PropTypes.object,
-    syncLookupFilterValues: PropTypes.bool,
-    tabIndex: PropTypes.number,
-    toolbar: PropTypes.object,
-    twoWayBindingEnabled: PropTypes.bool,
-    visible: PropTypes.bool,
-    width: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.number,
-        PropTypes.string
-    ]),
-    wordWrapEnabled: PropTypes.bool
-};
-var Animation = /** @class */ (function (_super) {
-    __extends(Animation, _super);
-    function Animation() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Animation.OptionName = "animation";
-    Animation.ExpectedChildren = {
+        {
+            tmplOption: "rowTemplate",
+            render: "rowRender",
+            component: "rowComponent"
+        },
+    ]); }, []);
+    return (React.createElement((BaseComponent), __assign({ WidgetClass: dxDataGrid, ref: baseRef, useRequestAnimationFrameFlag: true, subscribableOptions: subscribableOptions, independentEvents: independentEvents, defaults: defaults, expectedChildren: expectedChildren, templateProps: templateProps }, props)));
+}));
+var _componentAnimation = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Animation = Object.assign(_componentAnimation, {
+    OptionName: "animation",
+    ExpectedChildren: {
         hide: { optionName: "hide", isCollectionItem: false },
         show: { optionName: "show", isCollectionItem: false }
-    };
-    return Animation;
-}(NestedOption));
-var AsyncRule = /** @class */ (function (_super) {
-    __extends(AsyncRule, _super);
-    function AsyncRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AsyncRule.OptionName = "validationRules";
-    AsyncRule.IsCollectionItem = true;
-    AsyncRule.PredefinedProps = {
+    },
+});
+var _componentAsyncRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var AsyncRule = Object.assign(_componentAsyncRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "async"
-    };
-    return AsyncRule;
-}(NestedOption));
-var At = /** @class */ (function (_super) {
-    __extends(At, _super);
-    function At() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    At.OptionName = "at";
-    return At;
-}(NestedOption));
-var BoundaryOffset = /** @class */ (function (_super) {
-    __extends(BoundaryOffset, _super);
-    function BoundaryOffset() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BoundaryOffset.OptionName = "boundaryOffset";
-    return BoundaryOffset;
-}(NestedOption));
-var Button = /** @class */ (function (_super) {
-    __extends(Button, _super);
-    function Button() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Button.OptionName = "buttons";
-    Button.IsCollectionItem = true;
-    Button.TemplateProps = [{
+    },
+});
+var _componentAt = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var At = Object.assign(_componentAt, {
+    OptionName: "at",
+});
+var _componentBoundaryOffset = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var BoundaryOffset = Object.assign(_componentBoundaryOffset, {
+    OptionName: "boundaryOffset",
+});
+var _componentButton = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Button = Object.assign(_componentButton, {
+    OptionName: "buttons",
+    IsCollectionItem: true,
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return Button;
-}(NestedOption));
-var Change = /** @class */ (function (_super) {
-    __extends(Change, _super);
-    function Change() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Change.OptionName = "changes";
-    Change.IsCollectionItem = true;
-    return Change;
-}(NestedOption));
-var ColCountByScreen = /** @class */ (function (_super) {
-    __extends(ColCountByScreen, _super);
-    function ColCountByScreen() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColCountByScreen.OptionName = "colCountByScreen";
-    return ColCountByScreen;
-}(NestedOption));
-var Collision = /** @class */ (function (_super) {
-    __extends(Collision, _super);
-    function Collision() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Collision.OptionName = "collision";
-    return Collision;
-}(NestedOption));
-var Column = /** @class */ (function (_super) {
-    __extends(Column, _super);
-    function Column() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Column.OptionName = "columns";
-    Column.IsCollectionItem = true;
-    Column.DefaultsProps = {
+            component: "component"
+        }],
+});
+var _componentChange = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Change = Object.assign(_componentChange, {
+    OptionName: "changes",
+    IsCollectionItem: true,
+});
+var _componentColCountByScreen = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColCountByScreen = Object.assign(_componentColCountByScreen, {
+    OptionName: "colCountByScreen",
+});
+var _componentCollision = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Collision = Object.assign(_componentCollision, {
+    OptionName: "collision",
+});
+var _componentColumn = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Column = Object.assign(_componentColumn, {
+    OptionName: "columns",
+    IsCollectionItem: true,
+    DefaultsProps: {
         defaultFilterValue: "filterValue",
         defaultFilterValues: "filterValues",
         defaultGroupIndex: "groupIndex",
@@ -366,8 +175,8 @@ var Column = /** @class */ (function (_super) {
         defaultSortOrder: "sortOrder",
         defaultVisible: "visible",
         defaultVisibleIndex: "visibleIndex"
-    };
-    Column.ExpectedChildren = {
+    },
+    ExpectedChildren: {
         AsyncRule: { optionName: "validationRules", isCollectionItem: true },
         button: { optionName: "buttons", isCollectionItem: true },
         columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
@@ -385,395 +194,323 @@ var Column = /** @class */ (function (_super) {
         RequiredRule: { optionName: "validationRules", isCollectionItem: true },
         StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
         validationRule: { optionName: "validationRules", isCollectionItem: true }
-    };
-    Column.TemplateProps = [{
+    },
+    TemplateProps: [{
             tmplOption: "cellTemplate",
             render: "cellRender",
-            component: "cellComponent",
-            keyFn: "cellKeyFn"
+            component: "cellComponent"
         }, {
             tmplOption: "editCellTemplate",
             render: "editCellRender",
-            component: "editCellComponent",
-            keyFn: "editCellKeyFn"
+            component: "editCellComponent"
         }, {
             tmplOption: "groupCellTemplate",
             render: "groupCellRender",
-            component: "groupCellComponent",
-            keyFn: "groupCellKeyFn"
+            component: "groupCellComponent"
         }, {
             tmplOption: "headerCellTemplate",
             render: "headerCellRender",
-            component: "headerCellComponent",
-            keyFn: "headerCellKeyFn"
-        }];
-    return Column;
-}(NestedOption));
-var ColumnChooser = /** @class */ (function (_super) {
-    __extends(ColumnChooser, _super);
-    function ColumnChooser() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnChooser.OptionName = "columnChooser";
-    ColumnChooser.ExpectedChildren = {
+            component: "headerCellComponent"
+        }],
+});
+var _componentColumnChooser = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnChooser = Object.assign(_componentColumnChooser, {
+    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 }
-    };
-    return ColumnChooser;
-}(NestedOption));
-var ColumnChooserSearch = /** @class */ (function (_super) {
-    __extends(ColumnChooserSearch, _super);
-    function ColumnChooserSearch() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnChooserSearch.OptionName = "search";
-    return ColumnChooserSearch;
-}(NestedOption));
-var ColumnChooserSelection = /** @class */ (function (_super) {
-    __extends(ColumnChooserSelection, _super);
-    function ColumnChooserSelection() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnChooserSelection.OptionName = "selection";
-    return ColumnChooserSelection;
-}(NestedOption));
-var ColumnFixing = /** @class */ (function (_super) {
-    __extends(ColumnFixing, _super);
-    function ColumnFixing() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnFixing.OptionName = "columnFixing";
-    ColumnFixing.ExpectedChildren = {
+    },
+});
+var _componentColumnChooserSearch = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnChooserSearch = Object.assign(_componentColumnChooserSearch, {
+    OptionName: "search",
+});
+var _componentColumnChooserSelection = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnChooserSelection = Object.assign(_componentColumnChooserSelection, {
+    OptionName: "selection",
+});
+var _componentColumnFixing = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnFixing = Object.assign(_componentColumnFixing, {
+    OptionName: "columnFixing",
+    ExpectedChildren: {
         columnFixingTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return ColumnFixing;
-}(NestedOption));
-var ColumnFixingTexts = /** @class */ (function (_super) {
-    __extends(ColumnFixingTexts, _super);
-    function ColumnFixingTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnFixingTexts.OptionName = "texts";
-    return ColumnFixingTexts;
-}(NestedOption));
-var ColumnHeaderFilter = /** @class */ (function (_super) {
-    __extends(ColumnHeaderFilter, _super);
-    function ColumnHeaderFilter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnHeaderFilter.OptionName = "headerFilter";
-    ColumnHeaderFilter.ExpectedChildren = {
+    },
+});
+var _componentColumnFixingTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnFixingTexts = Object.assign(_componentColumnFixingTexts, {
+    OptionName: "texts",
+});
+var _componentColumnHeaderFilter = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnHeaderFilter = Object.assign(_componentColumnHeaderFilter, {
+    OptionName: "headerFilter",
+    ExpectedChildren: {
         columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
         search: { optionName: "search", isCollectionItem: false }
-    };
-    return ColumnHeaderFilter;
-}(NestedOption));
-var ColumnHeaderFilterSearch = /** @class */ (function (_super) {
-    __extends(ColumnHeaderFilterSearch, _super);
-    function ColumnHeaderFilterSearch() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnHeaderFilterSearch.OptionName = "search";
-    return ColumnHeaderFilterSearch;
-}(NestedOption));
-var ColumnLookup = /** @class */ (function (_super) {
-    __extends(ColumnLookup, _super);
-    function ColumnLookup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnLookup.OptionName = "lookup";
-    return ColumnLookup;
-}(NestedOption));
-var CompareRule = /** @class */ (function (_super) {
-    __extends(CompareRule, _super);
-    function CompareRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CompareRule.OptionName = "validationRules";
-    CompareRule.IsCollectionItem = true;
-    CompareRule.PredefinedProps = {
+    },
+});
+var _componentColumnHeaderFilterSearch = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnHeaderFilterSearch = Object.assign(_componentColumnHeaderFilterSearch, {
+    OptionName: "search",
+});
+var _componentColumnLookup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ColumnLookup = Object.assign(_componentColumnLookup, {
+    OptionName: "lookup",
+});
+var _componentCompareRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var CompareRule = Object.assign(_componentCompareRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "compare"
-    };
-    return CompareRule;
-}(NestedOption));
-var CursorOffset = /** @class */ (function (_super) {
-    __extends(CursorOffset, _super);
-    function CursorOffset() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CursorOffset.OptionName = "cursorOffset";
-    return CursorOffset;
-}(NestedOption));
-var CustomOperation = /** @class */ (function (_super) {
-    __extends(CustomOperation, _super);
-    function CustomOperation() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CustomOperation.OptionName = "customOperations";
-    CustomOperation.IsCollectionItem = true;
-    CustomOperation.TemplateProps = [{
+    },
+});
+var _componentCursorOffset = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var CursorOffset = Object.assign(_componentCursorOffset, {
+    OptionName: "cursorOffset",
+});
+var _componentCustomOperation = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var CustomOperation = Object.assign(_componentCustomOperation, {
+    OptionName: "customOperations",
+    IsCollectionItem: true,
+    TemplateProps: [{
             tmplOption: "editorTemplate",
             render: "editorRender",
-            component: "editorComponent",
-            keyFn: "editorKeyFn"
-        }];
-    return CustomOperation;
-}(NestedOption));
-var CustomRule = /** @class */ (function (_super) {
-    __extends(CustomRule, _super);
-    function CustomRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CustomRule.OptionName = "validationRules";
-    CustomRule.IsCollectionItem = true;
-    CustomRule.PredefinedProps = {
+            component: "editorComponent"
+        }],
+});
+var _componentCustomRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var CustomRule = Object.assign(_componentCustomRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "custom"
-    };
-    return CustomRule;
-}(NestedOption));
-var DataGridHeaderFilter = /** @class */ (function (_super) {
-    __extends(DataGridHeaderFilter, _super);
-    function DataGridHeaderFilter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DataGridHeaderFilter.OptionName = "headerFilter";
-    DataGridHeaderFilter.ExpectedChildren = {
+    },
+});
+var _componentDataGridHeaderFilter = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var DataGridHeaderFilter = Object.assign(_componentDataGridHeaderFilter, {
+    OptionName: "headerFilter",
+    ExpectedChildren: {
         dataGridHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
         dataGridHeaderFilterTexts: { optionName: "texts", isCollectionItem: false },
         search: { optionName: "search", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return DataGridHeaderFilter;
-}(NestedOption));
-var DataGridHeaderFilterSearch = /** @class */ (function (_super) {
-    __extends(DataGridHeaderFilterSearch, _super);
-    function DataGridHeaderFilterSearch() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DataGridHeaderFilterSearch.OptionName = "search";
-    return DataGridHeaderFilterSearch;
-}(NestedOption));
-var DataGridHeaderFilterTexts = /** @class */ (function (_super) {
-    __extends(DataGridHeaderFilterTexts, _super);
-    function DataGridHeaderFilterTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DataGridHeaderFilterTexts.OptionName = "texts";
-    return DataGridHeaderFilterTexts;
-}(NestedOption));
-var DataGridSelection = /** @class */ (function (_super) {
-    __extends(DataGridSelection, _super);
-    function DataGridSelection() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DataGridSelection.OptionName = "selection";
-    return DataGridSelection;
-}(NestedOption));
-var Editing = /** @class */ (function (_super) {
-    __extends(Editing, _super);
-    function Editing() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Editing.OptionName = "editing";
-    Editing.DefaultsProps = {
+    },
+});
+var _componentDataGridHeaderFilterSearch = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var DataGridHeaderFilterSearch = Object.assign(_componentDataGridHeaderFilterSearch, {
+    OptionName: "search",
+});
+var _componentDataGridHeaderFilterTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var DataGridHeaderFilterTexts = Object.assign(_componentDataGridHeaderFilterTexts, {
+    OptionName: "texts",
+});
+var _componentDataGridSelection = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var DataGridSelection = Object.assign(_componentDataGridSelection, {
+    OptionName: "selection",
+});
+var _componentEditing = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Editing = Object.assign(_componentEditing, {
+    OptionName: "editing",
+    DefaultsProps: {
         defaultChanges: "changes",
         defaultEditColumnName: "editColumnName",
         defaultEditRowKey: "editRowKey"
-    };
-    Editing.ExpectedChildren = {
+    },
+    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 }
-    };
-    return Editing;
-}(NestedOption));
-var EditingTexts = /** @class */ (function (_super) {
-    __extends(EditingTexts, _super);
-    function EditingTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    EditingTexts.OptionName = "texts";
-    return EditingTexts;
-}(NestedOption));
-var EmailRule = /** @class */ (function (_super) {
-    __extends(EmailRule, _super);
-    function EmailRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    EmailRule.OptionName = "validationRules";
-    EmailRule.IsCollectionItem = true;
-    EmailRule.PredefinedProps = {
+    },
+});
+var _componentEditingTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var EditingTexts = Object.assign(_componentEditingTexts, {
+    OptionName: "texts",
+});
+var _componentEmailRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var EmailRule = Object.assign(_componentEmailRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "email"
-    };
-    return EmailRule;
-}(NestedOption));
-var Export = /** @class */ (function (_super) {
-    __extends(Export, _super);
-    function Export() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Export.OptionName = "export";
-    Export.ExpectedChildren = {
+    },
+});
+var _componentExport = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Export = Object.assign(_componentExport, {
+    OptionName: "export",
+    ExpectedChildren: {
         exportTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return Export;
-}(NestedOption));
-var ExportTexts = /** @class */ (function (_super) {
-    __extends(ExportTexts, _super);
-    function ExportTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ExportTexts.OptionName = "texts";
-    return ExportTexts;
-}(NestedOption));
-var Field = /** @class */ (function (_super) {
-    __extends(Field, _super);
-    function Field() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Field.OptionName = "fields";
-    Field.IsCollectionItem = true;
-    Field.ExpectedChildren = {
+    },
+});
+var _componentExportTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ExportTexts = Object.assign(_componentExportTexts, {
+    OptionName: "texts",
+});
+var _componentField = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Field = Object.assign(_componentField, {
+    OptionName: "fields",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         fieldLookup: { optionName: "lookup", isCollectionItem: false },
         format: { optionName: "format", isCollectionItem: false },
         lookup: { optionName: "lookup", isCollectionItem: false }
-    };
-    Field.TemplateProps = [{
+    },
+    TemplateProps: [{
             tmplOption: "editorTemplate",
             render: "editorRender",
-            component: "editorComponent",
-            keyFn: "editorKeyFn"
-        }];
-    return Field;
-}(NestedOption));
-var FieldLookup = /** @class */ (function (_super) {
-    __extends(FieldLookup, _super);
-    function FieldLookup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FieldLookup.OptionName = "lookup";
-    return FieldLookup;
-}(NestedOption));
-var FilterBuilder = /** @class */ (function (_super) {
-    __extends(FilterBuilder, _super);
-    function FilterBuilder() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterBuilder.OptionName = "filterBuilder";
-    FilterBuilder.DefaultsProps = {
+            component: "editorComponent"
+        }],
+});
+var _componentFieldLookup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FieldLookup = Object.assign(_componentFieldLookup, {
+    OptionName: "lookup",
+});
+var _componentFilterBuilder = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FilterBuilder = Object.assign(_componentFilterBuilder, {
+    OptionName: "filterBuilder",
+    DefaultsProps: {
         defaultValue: "value"
-    };
-    FilterBuilder.ExpectedChildren = {
+    },
+    ExpectedChildren: {
         customOperation: { optionName: "customOperations", isCollectionItem: true },
         field: { optionName: "fields", isCollectionItem: true },
         filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
         groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
-    };
-    return FilterBuilder;
-}(NestedOption));
-var FilterBuilderPopup = /** @class */ (function (_super) {
-    __extends(FilterBuilderPopup, _super);
-    function FilterBuilderPopup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterBuilderPopup.OptionName = "filterBuilderPopup";
-    FilterBuilderPopup.DefaultsProps = {
+    },
+});
+var _componentFilterBuilderPopup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FilterBuilderPopup = Object.assign(_componentFilterBuilderPopup, {
+    OptionName: "filterBuilderPopup",
+    DefaultsProps: {
         defaultHeight: "height",
         defaultPosition: "position",
         defaultVisible: "visible",
         defaultWidth: "width"
-    };
-    FilterBuilderPopup.TemplateProps = [{
+    },
+    TemplateProps: [{
             tmplOption: "contentTemplate",
             render: "contentRender",
-            component: "contentComponent",
-            keyFn: "contentKeyFn"
+            component: "contentComponent"
         }, {
             tmplOption: "titleTemplate",
             render: "titleRender",
-            component: "titleComponent",
-            keyFn: "titleKeyFn"
-        }];
-    return FilterBuilderPopup;
-}(NestedOption));
-var FilterOperationDescriptions = /** @class */ (function (_super) {
-    __extends(FilterOperationDescriptions, _super);
-    function FilterOperationDescriptions() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterOperationDescriptions.OptionName = "filterOperationDescriptions";
-    return FilterOperationDescriptions;
-}(NestedOption));
-var FilterPanel = /** @class */ (function (_super) {
-    __extends(FilterPanel, _super);
-    function FilterPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterPanel.OptionName = "filterPanel";
-    FilterPanel.DefaultsProps = {
+            component: "titleComponent"
+        }],
+});
+var _componentFilterOperationDescriptions = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FilterOperationDescriptions = Object.assign(_componentFilterOperationDescriptions, {
+    OptionName: "filterOperationDescriptions",
+});
+var _componentFilterPanel = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FilterPanel = Object.assign(_componentFilterPanel, {
+    OptionName: "filterPanel",
+    DefaultsProps: {
         defaultFilterEnabled: "filterEnabled"
-    };
-    FilterPanel.ExpectedChildren = {
+    },
+    ExpectedChildren: {
         filterPanelTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return FilterPanel;
-}(NestedOption));
-var FilterPanelTexts = /** @class */ (function (_super) {
-    __extends(FilterPanelTexts, _super);
-    function FilterPanelTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterPanelTexts.OptionName = "texts";
-    return FilterPanelTexts;
-}(NestedOption));
-var FilterRow = /** @class */ (function (_super) {
-    __extends(FilterRow, _super);
-    function FilterRow() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterRow.OptionName = "filterRow";
-    FilterRow.ExpectedChildren = {
+    },
+});
+var _componentFilterPanelTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FilterPanelTexts = Object.assign(_componentFilterPanelTexts, {
+    OptionName: "texts",
+});
+var _componentFilterRow = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FilterRow = Object.assign(_componentFilterRow, {
+    OptionName: "filterRow",
+    ExpectedChildren: {
         operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
-    };
-    return FilterRow;
-}(NestedOption));
-var Form = /** @class */ (function (_super) {
-    __extends(Form, _super);
-    function Form() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Form.OptionName = "form";
-    Form.DefaultsProps = {
+    },
+});
+var _componentForm = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Form = Object.assign(_componentForm, {
+    OptionName: "form",
+    DefaultsProps: {
         defaultFormData: "formData"
-    };
-    Form.ExpectedChildren = {
+    },
+    ExpectedChildren: {
         colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
-    };
-    return Form;
-}(NestedOption));
-var Format = /** @class */ (function (_super) {
-    __extends(Format, _super);
-    function Format() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Format.OptionName = "format";
-    return Format;
-}(NestedOption));
-var FormItem = /** @class */ (function (_super) {
-    __extends(FormItem, _super);
-    function FormItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FormItem.OptionName = "formItem";
-    FormItem.ExpectedChildren = {
+    },
+});
+var _componentFormat = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Format = Object.assign(_componentFormat, {
+    OptionName: "format",
+});
+var _componentFormItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var FormItem = Object.assign(_componentFormItem, {
+    OptionName: "formItem",
+    ExpectedChildren: {
         AsyncRule: { optionName: "validationRules", isCollectionItem: true },
         CompareRule: { optionName: "validationRules", isCollectionItem: true },
         CustomRule: { optionName: "validationRules", isCollectionItem: true },
@@ -785,504 +522,403 @@ var FormItem = /** @class */ (function (_super) {
         RequiredRule: { optionName: "validationRules", isCollectionItem: true },
         StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
         validationRule: { optionName: "validationRules", isCollectionItem: true }
-    };
-    FormItem.TemplateProps = [{
+    },
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return FormItem;
-}(NestedOption));
-var From = /** @class */ (function (_super) {
-    __extends(From, _super);
-    function From() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    From.OptionName = "from";
-    From.ExpectedChildren = {
+            component: "component"
+        }],
+});
+var _componentFrom = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var From = Object.assign(_componentFrom, {
+    OptionName: "from",
+    ExpectedChildren: {
         position: { optionName: "position", isCollectionItem: false }
-    };
-    return From;
-}(NestedOption));
-var Grouping = /** @class */ (function (_super) {
-    __extends(Grouping, _super);
-    function Grouping() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Grouping.OptionName = "grouping";
-    Grouping.ExpectedChildren = {
+    },
+});
+var _componentGrouping = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Grouping = Object.assign(_componentGrouping, {
+    OptionName: "grouping",
+    ExpectedChildren: {
         groupingTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return Grouping;
-}(NestedOption));
-var GroupingTexts = /** @class */ (function (_super) {
-    __extends(GroupingTexts, _super);
-    function GroupingTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GroupingTexts.OptionName = "texts";
-    return GroupingTexts;
-}(NestedOption));
-var GroupItem = /** @class */ (function (_super) {
-    __extends(GroupItem, _super);
-    function GroupItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GroupItem.OptionName = "groupItems";
-    GroupItem.IsCollectionItem = true;
-    GroupItem.ExpectedChildren = {
+    },
+});
+var _componentGroupingTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var GroupingTexts = Object.assign(_componentGroupingTexts, {
+    OptionName: "texts",
+});
+var _componentGroupItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var GroupItem = Object.assign(_componentGroupItem, {
+    OptionName: "groupItems",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-    };
-    return GroupItem;
-}(NestedOption));
-var GroupOperationDescriptions = /** @class */ (function (_super) {
-    __extends(GroupOperationDescriptions, _super);
-    function GroupOperationDescriptions() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GroupOperationDescriptions.OptionName = "groupOperationDescriptions";
-    return GroupOperationDescriptions;
-}(NestedOption));
-var GroupPanel = /** @class */ (function (_super) {
-    __extends(GroupPanel, _super);
-    function GroupPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GroupPanel.OptionName = "groupPanel";
-    GroupPanel.DefaultsProps = {
+    },
+});
+var _componentGroupOperationDescriptions = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var GroupOperationDescriptions = Object.assign(_componentGroupOperationDescriptions, {
+    OptionName: "groupOperationDescriptions",
+});
+var _componentGroupPanel = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var GroupPanel = Object.assign(_componentGroupPanel, {
+    OptionName: "groupPanel",
+    DefaultsProps: {
         defaultVisible: "visible"
-    };
-    return GroupPanel;
-}(NestedOption));
-var HeaderFilter = /** @class */ (function (_super) {
-    __extends(HeaderFilter, _super);
-    function HeaderFilter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    HeaderFilter.OptionName = "headerFilter";
-    return HeaderFilter;
-}(NestedOption));
-var Hide = /** @class */ (function (_super) {
-    __extends(Hide, _super);
-    function Hide() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Hide.OptionName = "hide";
-    Hide.ExpectedChildren = {
+    },
+});
+var _componentHeaderFilter = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var HeaderFilter = Object.assign(_componentHeaderFilter, {
+    OptionName: "headerFilter",
+});
+var _componentHide = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Hide = Object.assign(_componentHide, {
+    OptionName: "hide",
+    ExpectedChildren: {
         from: { optionName: "from", isCollectionItem: false },
         to: { optionName: "to", isCollectionItem: false }
-    };
-    return Hide;
-}(NestedOption));
-var Item = /** @class */ (function (_super) {
-    __extends(Item, _super);
-    function Item() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Item.OptionName = "items";
-    Item.IsCollectionItem = true;
-    Item.TemplateProps = [{
+    },
+});
+var _componentItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Item = Object.assign(_componentItem, {
+    OptionName: "items",
+    IsCollectionItem: true,
+    TemplateProps: [{
             tmplOption: "menuItemTemplate",
             render: "menuItemRender",
-            component: "menuItemComponent",
-            keyFn: "menuItemKeyFn"
+            component: "menuItemComponent"
         }, {
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return Item;
-}(NestedOption));
-var KeyboardNavigation = /** @class */ (function (_super) {
-    __extends(KeyboardNavigation, _super);
-    function KeyboardNavigation() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KeyboardNavigation.OptionName = "keyboardNavigation";
-    return KeyboardNavigation;
-}(NestedOption));
-var Label = /** @class */ (function (_super) {
-    __extends(Label, _super);
-    function Label() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Label.OptionName = "label";
-    Label.TemplateProps = [{
+            component: "component"
+        }],
+});
+var _componentKeyboardNavigation = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var KeyboardNavigation = Object.assign(_componentKeyboardNavigation, {
+    OptionName: "keyboardNavigation",
+});
+var _componentLabel = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Label = Object.assign(_componentLabel, {
+    OptionName: "label",
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return Label;
-}(NestedOption));
-var LoadPanel = /** @class */ (function (_super) {
-    __extends(LoadPanel, _super);
-    function LoadPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    LoadPanel.OptionName = "loadPanel";
-    return LoadPanel;
-}(NestedOption));
-var Lookup = /** @class */ (function (_super) {
-    __extends(Lookup, _super);
-    function Lookup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Lookup.OptionName = "lookup";
-    return Lookup;
-}(NestedOption));
-var MasterDetail = /** @class */ (function (_super) {
-    __extends(MasterDetail, _super);
-    function MasterDetail() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MasterDetail.OptionName = "masterDetail";
-    MasterDetail.TemplateProps = [{
+            component: "component"
+        }],
+});
+var _componentLoadPanel = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var LoadPanel = Object.assign(_componentLoadPanel, {
+    OptionName: "loadPanel",
+});
+var _componentLookup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Lookup = Object.assign(_componentLookup, {
+    OptionName: "lookup",
+});
+var _componentMasterDetail = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var MasterDetail = Object.assign(_componentMasterDetail, {
+    OptionName: "masterDetail",
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return MasterDetail;
-}(NestedOption));
-var My = /** @class */ (function (_super) {
-    __extends(My, _super);
-    function My() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    My.OptionName = "my";
-    return My;
-}(NestedOption));
-var NumericRule = /** @class */ (function (_super) {
-    __extends(NumericRule, _super);
-    function NumericRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    NumericRule.OptionName = "validationRules";
-    NumericRule.IsCollectionItem = true;
-    NumericRule.PredefinedProps = {
+            component: "component"
+        }],
+});
+var _componentMy = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var My = Object.assign(_componentMy, {
+    OptionName: "my",
+});
+var _componentNumericRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var NumericRule = Object.assign(_componentNumericRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "numeric"
-    };
-    return NumericRule;
-}(NestedOption));
-var Offset = /** @class */ (function (_super) {
-    __extends(Offset, _super);
-    function Offset() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Offset.OptionName = "offset";
-    return Offset;
-}(NestedOption));
-var OperationDescriptions = /** @class */ (function (_super) {
-    __extends(OperationDescriptions, _super);
-    function OperationDescriptions() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    OperationDescriptions.OptionName = "operationDescriptions";
-    return OperationDescriptions;
-}(NestedOption));
-var Pager = /** @class */ (function (_super) {
-    __extends(Pager, _super);
-    function Pager() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Pager.OptionName = "pager";
-    return Pager;
-}(NestedOption));
-var Paging = /** @class */ (function (_super) {
-    __extends(Paging, _super);
-    function Paging() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Paging.OptionName = "paging";
-    Paging.DefaultsProps = {
+    },
+});
+var _componentOffset = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Offset = Object.assign(_componentOffset, {
+    OptionName: "offset",
+});
+var _componentOperationDescriptions = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var OperationDescriptions = Object.assign(_componentOperationDescriptions, {
+    OptionName: "operationDescriptions",
+});
+var _componentPager = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Pager = Object.assign(_componentPager, {
+    OptionName: "pager",
+});
+var _componentPaging = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Paging = Object.assign(_componentPaging, {
+    OptionName: "paging",
+    DefaultsProps: {
         defaultPageIndex: "pageIndex",
         defaultPageSize: "pageSize"
-    };
-    return Paging;
-}(NestedOption));
-var PatternRule = /** @class */ (function (_super) {
-    __extends(PatternRule, _super);
-    function PatternRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PatternRule.OptionName = "validationRules";
-    PatternRule.IsCollectionItem = true;
-    PatternRule.PredefinedProps = {
+    },
+});
+var _componentPatternRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var PatternRule = Object.assign(_componentPatternRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "pattern"
-    };
-    return PatternRule;
-}(NestedOption));
-var Popup = /** @class */ (function (_super) {
-    __extends(Popup, _super);
-    function Popup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Popup.OptionName = "popup";
-    Popup.DefaultsProps = {
+    },
+});
+var _componentPopup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Popup = Object.assign(_componentPopup, {
+    OptionName: "popup",
+    DefaultsProps: {
         defaultHeight: "height",
         defaultPosition: "position",
         defaultVisible: "visible",
         defaultWidth: "width"
-    };
-    Popup.ExpectedChildren = {
+    },
+    ExpectedChildren: {
         animation: { optionName: "animation", isCollectionItem: false },
         position: { optionName: "position", isCollectionItem: false },
         toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-    };
-    Popup.TemplateProps = [{
+    },
+    TemplateProps: [{
             tmplOption: "contentTemplate",
             render: "contentRender",
-            component: "contentComponent",
-            keyFn: "contentKeyFn"
+            component: "contentComponent"
         }, {
             tmplOption: "titleTemplate",
             render: "titleRender",
-            component: "titleComponent",
-            keyFn: "titleKeyFn"
-        }];
-    return Popup;
-}(NestedOption));
-var Position = /** @class */ (function (_super) {
-    __extends(Position, _super);
-    function Position() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Position.OptionName = "position";
-    return Position;
-}(NestedOption));
-var RangeRule = /** @class */ (function (_super) {
-    __extends(RangeRule, _super);
-    function RangeRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RangeRule.OptionName = "validationRules";
-    RangeRule.IsCollectionItem = true;
-    RangeRule.PredefinedProps = {
+            component: "titleComponent"
+        }],
+});
+var _componentPosition = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Position = Object.assign(_componentPosition, {
+    OptionName: "position",
+});
+var _componentRangeRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var RangeRule = Object.assign(_componentRangeRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "range"
-    };
-    return RangeRule;
-}(NestedOption));
-var RemoteOperations = /** @class */ (function (_super) {
-    __extends(RemoteOperations, _super);
-    function RemoteOperations() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RemoteOperations.OptionName = "remoteOperations";
-    return RemoteOperations;
-}(NestedOption));
-var RequiredRule = /** @class */ (function (_super) {
-    __extends(RequiredRule, _super);
-    function RequiredRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RequiredRule.OptionName = "validationRules";
-    RequiredRule.IsCollectionItem = true;
-    RequiredRule.PredefinedProps = {
+    },
+});
+var _componentRemoteOperations = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var RemoteOperations = Object.assign(_componentRemoteOperations, {
+    OptionName: "remoteOperations",
+});
+var _componentRequiredRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var RequiredRule = Object.assign(_componentRequiredRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "required"
-    };
-    return RequiredRule;
-}(NestedOption));
-var RowDragging = /** @class */ (function (_super) {
-    __extends(RowDragging, _super);
-    function RowDragging() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RowDragging.OptionName = "rowDragging";
-    RowDragging.ExpectedChildren = {
+    },
+});
+var _componentRowDragging = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var RowDragging = Object.assign(_componentRowDragging, {
+    OptionName: "rowDragging",
+    ExpectedChildren: {
         cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
-    };
-    RowDragging.TemplateProps = [{
+    },
+    TemplateProps: [{
             tmplOption: "dragTemplate",
             render: "dragRender",
-            component: "dragComponent",
-            keyFn: "dragKeyFn"
-        }];
-    return RowDragging;
-}(NestedOption));
-var Scrolling = /** @class */ (function (_super) {
-    __extends(Scrolling, _super);
-    function Scrolling() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Scrolling.OptionName = "scrolling";
-    return Scrolling;
-}(NestedOption));
-var Search = /** @class */ (function (_super) {
-    __extends(Search, _super);
-    function Search() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Search.OptionName = "search";
-    return Search;
-}(NestedOption));
-var SearchPanel = /** @class */ (function (_super) {
-    __extends(SearchPanel, _super);
-    function SearchPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SearchPanel.OptionName = "searchPanel";
-    SearchPanel.DefaultsProps = {
+            component: "dragComponent"
+        }],
+});
+var _componentScrolling = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Scrolling = Object.assign(_componentScrolling, {
+    OptionName: "scrolling",
+});
+var _componentSearch = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Search = Object.assign(_componentSearch, {
+    OptionName: "search",
+});
+var _componentSearchPanel = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var SearchPanel = Object.assign(_componentSearchPanel, {
+    OptionName: "searchPanel",
+    DefaultsProps: {
         defaultText: "text"
-    };
-    return SearchPanel;
-}(NestedOption));
-var Selection = /** @class */ (function (_super) {
-    __extends(Selection, _super);
-    function Selection() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Selection.OptionName = "selection";
-    return Selection;
-}(NestedOption));
-var Show = /** @class */ (function (_super) {
-    __extends(Show, _super);
-    function Show() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Show.OptionName = "show";
-    return Show;
-}(NestedOption));
-var SortByGroupSummaryInfo = /** @class */ (function (_super) {
-    __extends(SortByGroupSummaryInfo, _super);
-    function SortByGroupSummaryInfo() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SortByGroupSummaryInfo.OptionName = "sortByGroupSummaryInfo";
-    SortByGroupSummaryInfo.IsCollectionItem = true;
-    return SortByGroupSummaryInfo;
-}(NestedOption));
-var Sorting = /** @class */ (function (_super) {
-    __extends(Sorting, _super);
-    function Sorting() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Sorting.OptionName = "sorting";
-    return Sorting;
-}(NestedOption));
-var StateStoring = /** @class */ (function (_super) {
-    __extends(StateStoring, _super);
-    function StateStoring() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    StateStoring.OptionName = "stateStoring";
-    return StateStoring;
-}(NestedOption));
-var StringLengthRule = /** @class */ (function (_super) {
-    __extends(StringLengthRule, _super);
-    function StringLengthRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    StringLengthRule.OptionName = "validationRules";
-    StringLengthRule.IsCollectionItem = true;
-    StringLengthRule.PredefinedProps = {
+    },
+});
+var _componentSelection = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Selection = Object.assign(_componentSelection, {
+    OptionName: "selection",
+});
+var _componentShow = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Show = Object.assign(_componentShow, {
+    OptionName: "show",
+});
+var _componentSortByGroupSummaryInfo = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var SortByGroupSummaryInfo = Object.assign(_componentSortByGroupSummaryInfo, {
+    OptionName: "sortByGroupSummaryInfo",
+    IsCollectionItem: true,
+});
+var _componentSorting = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Sorting = Object.assign(_componentSorting, {
+    OptionName: "sorting",
+});
+var _componentStateStoring = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var StateStoring = Object.assign(_componentStateStoring, {
+    OptionName: "stateStoring",
+});
+var _componentStringLengthRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var StringLengthRule = Object.assign(_componentStringLengthRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "stringLength"
-    };
-    return StringLengthRule;
-}(NestedOption));
-var Summary = /** @class */ (function (_super) {
-    __extends(Summary, _super);
-    function Summary() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Summary.OptionName = "summary";
-    Summary.ExpectedChildren = {
+    },
+});
+var _componentSummary = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Summary = Object.assign(_componentSummary, {
+    OptionName: "summary",
+    ExpectedChildren: {
         groupItem: { optionName: "groupItems", isCollectionItem: true },
         summaryTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false },
         totalItem: { optionName: "totalItems", isCollectionItem: true }
-    };
-    return Summary;
-}(NestedOption));
-var SummaryTexts = /** @class */ (function (_super) {
-    __extends(SummaryTexts, _super);
-    function SummaryTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SummaryTexts.OptionName = "texts";
-    return SummaryTexts;
-}(NestedOption));
-var Texts = /** @class */ (function (_super) {
-    __extends(Texts, _super);
-    function Texts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Texts.OptionName = "texts";
-    return Texts;
-}(NestedOption));
-var To = /** @class */ (function (_super) {
-    __extends(To, _super);
-    function To() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    To.OptionName = "to";
-    return To;
-}(NestedOption));
-var Toolbar = /** @class */ (function (_super) {
-    __extends(Toolbar, _super);
-    function Toolbar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Toolbar.OptionName = "toolbar";
-    Toolbar.ExpectedChildren = {
+    },
+});
+var _componentSummaryTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var SummaryTexts = Object.assign(_componentSummaryTexts, {
+    OptionName: "texts",
+});
+var _componentTexts = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Texts = Object.assign(_componentTexts, {
+    OptionName: "texts",
+});
+var _componentTo = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var To = Object.assign(_componentTo, {
+    OptionName: "to",
+});
+var _componentToolbar = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Toolbar = Object.assign(_componentToolbar, {
+    OptionName: "toolbar",
+    ExpectedChildren: {
         item: { optionName: "items", isCollectionItem: true }
-    };
-    return Toolbar;
-}(NestedOption));
-var ToolbarItem = /** @class */ (function (_super) {
-    __extends(ToolbarItem, _super);
-    function ToolbarItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ToolbarItem.OptionName = "toolbarItems";
-    ToolbarItem.IsCollectionItem = true;
-    ToolbarItem.TemplateProps = [{
+    },
+});
+var _componentToolbarItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ToolbarItem = Object.assign(_componentToolbarItem, {
+    OptionName: "toolbarItems",
+    IsCollectionItem: true,
+    TemplateProps: [{
             tmplOption: "menuItemTemplate",
             render: "menuItemRender",
-            component: "menuItemComponent",
-            keyFn: "menuItemKeyFn"
+            component: "menuItemComponent"
         }, {
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return ToolbarItem;
-}(NestedOption));
-var TotalItem = /** @class */ (function (_super) {
-    __extends(TotalItem, _super);
-    function TotalItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TotalItem.OptionName = "totalItems";
-    TotalItem.IsCollectionItem = true;
-    TotalItem.ExpectedChildren = {
+            component: "component"
+        }],
+});
+var _componentTotalItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var TotalItem = Object.assign(_componentTotalItem, {
+    OptionName: "totalItems",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-    };
-    return TotalItem;
-}(NestedOption));
-var ValidationRule = /** @class */ (function (_super) {
-    __extends(ValidationRule, _super);
-    function ValidationRule() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ValidationRule.OptionName = "validationRules";
-    ValidationRule.IsCollectionItem = true;
-    ValidationRule.PredefinedProps = {
+    },
+});
+var _componentValidationRule = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ValidationRule = Object.assign(_componentValidationRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "required"
-    };
-    return ValidationRule;
-}(NestedOption));
-var ValueFormat = /** @class */ (function (_super) {
-    __extends(ValueFormat, _super);
-    function ValueFormat() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ValueFormat.OptionName = "valueFormat";
-    return ValueFormat;
-}(NestedOption));
+    },
+});
+var _componentValueFormat = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ValueFormat = Object.assign(_componentValueFormat, {
+    OptionName: "valueFormat",
+});
 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, 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 };