devextreme-react 23.2.6 → 24.1.2-beta

package/cjs/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
  *
@@ -13,24 +13,24 @@
 
 "use client";
 "use strict";
-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);
+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 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 __());
-    };
-})();
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -53,346 +53,159 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Hide = exports.HeaderFilter = exports.GroupPanel = exports.GroupOperationDescriptions = exports.GroupItem = exports.GroupingTexts = exports.Grouping = exports.From = exports.FormItem = exports.Format = exports.Form = exports.FilterRow = exports.FilterPanelTexts = exports.FilterPanel = exports.FilterOperationDescriptions = exports.FilterBuilderPopup = exports.FilterBuilder = exports.FieldLookup = exports.Field = exports.ExportTexts = exports.Export = exports.EmailRule = exports.EditingTexts = exports.Editing = exports.DataGridSelection = exports.DataGridHeaderFilterTexts = exports.DataGridHeaderFilterSearch = exports.DataGridHeaderFilter = exports.CustomRule = exports.CustomOperation = exports.CursorOffset = exports.CompareRule = exports.ColumnLookup = exports.ColumnHeaderFilterSearch = exports.ColumnHeaderFilter = exports.ColumnFixingTexts = exports.ColumnFixing = exports.ColumnChooserSelection = exports.ColumnChooserSearch = exports.ColumnChooser = exports.Column = exports.Collision = exports.ColCountByScreen = exports.Change = exports.Button = exports.BoundaryOffset = exports.At = exports.AsyncRule = exports.Animation = exports.DataGrid = void 0;
 exports.ValueFormat = exports.ValidationRule = exports.TotalItem = exports.ToolbarItem = exports.Toolbar = exports.To = exports.Texts = exports.SummaryTexts = exports.Summary = exports.StringLengthRule = exports.StateStoring = exports.Sorting = exports.SortByGroupSummaryInfo = exports.Show = exports.Selection = exports.SearchPanel = exports.Search = exports.Scrolling = exports.RowDragging = exports.RequiredRule = exports.RemoteOperations = exports.RangeRule = exports.Position = exports.Popup = exports.PatternRule = exports.Paging = exports.Pager = exports.OperationDescriptions = exports.Offset = exports.NumericRule = exports.My = exports.MasterDetail = exports.Lookup = exports.LoadPanel = exports.Label = exports.KeyboardNavigation = exports.Item = void 0;
+var React = __importStar(require("react"));
+var react_1 = require("react");
 var data_grid_1 = __importDefault(require("devextreme/ui/data_grid"));
-var PropTypes = __importStar(require("prop-types"));
 var component_1 = require("./core/component");
 var nested_option_1 = __importDefault(require("./core/nested-option"));
-var DataGrid = /** @class */ (function (_super) {
-    __extends(DataGrid, _super);
-    function DataGrid() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._WidgetClass = data_grid_1.default;
-        _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 = (0, react_1.memo)((0, react_1.forwardRef)(function (props, ref) {
+    var baseRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        instance: function () {
+            var _a;
+            return (_a = baseRef.current) === null || _a === void 0 ? void 0 : _a.getInstance();
+        }
+    }); }, [baseRef.current]);
+    var subscribableOptions = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(function () { return ([
+        {
+            tmplOption: "dataRowTemplate",
+            render: "dataRowRender",
+            component: "dataRowComponent"
+        },
+        {
+            tmplOption: "rowTemplate",
+            render: "rowRender",
+            component: "rowComponent"
         },
-        enumerable: false,
-        configurable: true
-    });
-    return DataGrid;
-}(component_1.Component));
+    ]); }, []);
+    return (React.createElement((component_1.Component), __assign({ WidgetClass: data_grid_1.default, ref: baseRef, useRequestAnimationFrameFlag: true, subscribableOptions: subscribableOptions, independentEvents: independentEvents, defaults: defaults, expectedChildren: expectedChildren, templateProps: templateProps }, props)));
+}));
 exports.DataGrid = DataGrid;
-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 = {
+var _componentAnimation = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Animation = Object.assign(_componentAnimation, {
+    OptionName: "animation",
+    ExpectedChildren: {
         hide: { optionName: "hide", isCollectionItem: false },
         show: { optionName: "show", isCollectionItem: false }
-    };
-    return Animation;
-}(nested_option_1.default));
+    },
+});
 exports.Animation = Animation;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var AsyncRule = Object.assign(_componentAsyncRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "async"
-    };
-    return AsyncRule;
-}(nested_option_1.default));
+    },
+});
 exports.AsyncRule = AsyncRule;
-var At = /** @class */ (function (_super) {
-    __extends(At, _super);
-    function At() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    At.OptionName = "at";
-    return At;
-}(nested_option_1.default));
+var _componentAt = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var At = Object.assign(_componentAt, {
+    OptionName: "at",
+});
 exports.At = At;
-var BoundaryOffset = /** @class */ (function (_super) {
-    __extends(BoundaryOffset, _super);
-    function BoundaryOffset() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BoundaryOffset.OptionName = "boundaryOffset";
-    return BoundaryOffset;
-}(nested_option_1.default));
+var _componentBoundaryOffset = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var BoundaryOffset = Object.assign(_componentBoundaryOffset, {
+    OptionName: "boundaryOffset",
+});
 exports.BoundaryOffset = BoundaryOffset;
-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 _componentButton = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Button = Object.assign(_componentButton, {
+    OptionName: "buttons",
+    IsCollectionItem: true,
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return Button;
-}(nested_option_1.default));
+            component: "component"
+        }],
+});
 exports.Button = Button;
-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;
-}(nested_option_1.default));
+var _componentChange = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Change = Object.assign(_componentChange, {
+    OptionName: "changes",
+    IsCollectionItem: true,
+});
 exports.Change = Change;
-var ColCountByScreen = /** @class */ (function (_super) {
-    __extends(ColCountByScreen, _super);
-    function ColCountByScreen() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColCountByScreen.OptionName = "colCountByScreen";
-    return ColCountByScreen;
-}(nested_option_1.default));
+var _componentColCountByScreen = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColCountByScreen = Object.assign(_componentColCountByScreen, {
+    OptionName: "colCountByScreen",
+});
 exports.ColCountByScreen = ColCountByScreen;
-var Collision = /** @class */ (function (_super) {
-    __extends(Collision, _super);
-    function Collision() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Collision.OptionName = "collision";
-    return Collision;
-}(nested_option_1.default));
+var _componentCollision = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Collision = Object.assign(_componentCollision, {
+    OptionName: "collision",
+});
 exports.Collision = Collision;
-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 = {
+var _componentColumn = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Column = Object.assign(_componentColumn, {
+    OptionName: "columns",
+    IsCollectionItem: true,
+    DefaultsProps: {
         defaultFilterValue: "filterValue",
         defaultFilterValues: "filterValues",
         defaultGroupIndex: "groupIndex",
@@ -401,8 +214,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 },
@@ -420,427 +233,355 @@ 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;
-}(nested_option_1.default));
+            component: "headerCellComponent"
+        }],
+});
 exports.Column = Column;
-var ColumnChooser = /** @class */ (function (_super) {
-    __extends(ColumnChooser, _super);
-    function ColumnChooser() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnChooser.OptionName = "columnChooser";
-    ColumnChooser.ExpectedChildren = {
+var _componentColumnChooser = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+    },
+});
 exports.ColumnChooser = ColumnChooser;
-var ColumnChooserSearch = /** @class */ (function (_super) {
-    __extends(ColumnChooserSearch, _super);
-    function ColumnChooserSearch() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnChooserSearch.OptionName = "search";
-    return ColumnChooserSearch;
-}(nested_option_1.default));
+var _componentColumnChooserSearch = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColumnChooserSearch = Object.assign(_componentColumnChooserSearch, {
+    OptionName: "search",
+});
 exports.ColumnChooserSearch = ColumnChooserSearch;
-var ColumnChooserSelection = /** @class */ (function (_super) {
-    __extends(ColumnChooserSelection, _super);
-    function ColumnChooserSelection() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnChooserSelection.OptionName = "selection";
-    return ColumnChooserSelection;
-}(nested_option_1.default));
+var _componentColumnChooserSelection = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColumnChooserSelection = Object.assign(_componentColumnChooserSelection, {
+    OptionName: "selection",
+});
 exports.ColumnChooserSelection = ColumnChooserSelection;
-var ColumnFixing = /** @class */ (function (_super) {
-    __extends(ColumnFixing, _super);
-    function ColumnFixing() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnFixing.OptionName = "columnFixing";
-    ColumnFixing.ExpectedChildren = {
+var _componentColumnFixing = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColumnFixing = Object.assign(_componentColumnFixing, {
+    OptionName: "columnFixing",
+    ExpectedChildren: {
         columnFixingTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return ColumnFixing;
-}(nested_option_1.default));
+    },
+});
 exports.ColumnFixing = ColumnFixing;
-var ColumnFixingTexts = /** @class */ (function (_super) {
-    __extends(ColumnFixingTexts, _super);
-    function ColumnFixingTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnFixingTexts.OptionName = "texts";
-    return ColumnFixingTexts;
-}(nested_option_1.default));
+var _componentColumnFixingTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColumnFixingTexts = Object.assign(_componentColumnFixingTexts, {
+    OptionName: "texts",
+});
 exports.ColumnFixingTexts = ColumnFixingTexts;
-var ColumnHeaderFilter = /** @class */ (function (_super) {
-    __extends(ColumnHeaderFilter, _super);
-    function ColumnHeaderFilter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnHeaderFilter.OptionName = "headerFilter";
-    ColumnHeaderFilter.ExpectedChildren = {
+var _componentColumnHeaderFilter = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColumnHeaderFilter = Object.assign(_componentColumnHeaderFilter, {
+    OptionName: "headerFilter",
+    ExpectedChildren: {
         columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
         search: { optionName: "search", isCollectionItem: false }
-    };
-    return ColumnHeaderFilter;
-}(nested_option_1.default));
+    },
+});
 exports.ColumnHeaderFilter = ColumnHeaderFilter;
-var ColumnHeaderFilterSearch = /** @class */ (function (_super) {
-    __extends(ColumnHeaderFilterSearch, _super);
-    function ColumnHeaderFilterSearch() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnHeaderFilterSearch.OptionName = "search";
-    return ColumnHeaderFilterSearch;
-}(nested_option_1.default));
+var _componentColumnHeaderFilterSearch = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColumnHeaderFilterSearch = Object.assign(_componentColumnHeaderFilterSearch, {
+    OptionName: "search",
+});
 exports.ColumnHeaderFilterSearch = ColumnHeaderFilterSearch;
-var ColumnLookup = /** @class */ (function (_super) {
-    __extends(ColumnLookup, _super);
-    function ColumnLookup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ColumnLookup.OptionName = "lookup";
-    return ColumnLookup;
-}(nested_option_1.default));
+var _componentColumnLookup = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ColumnLookup = Object.assign(_componentColumnLookup, {
+    OptionName: "lookup",
+});
 exports.ColumnLookup = ColumnLookup;
-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 _componentCompareRule = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var CompareRule = Object.assign(_componentCompareRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "compare"
-    };
-    return CompareRule;
-}(nested_option_1.default));
+    },
+});
 exports.CompareRule = CompareRule;
-var CursorOffset = /** @class */ (function (_super) {
-    __extends(CursorOffset, _super);
-    function CursorOffset() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CursorOffset.OptionName = "cursorOffset";
-    return CursorOffset;
-}(nested_option_1.default));
+var _componentCursorOffset = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var CursorOffset = Object.assign(_componentCursorOffset, {
+    OptionName: "cursorOffset",
+});
 exports.CursorOffset = CursorOffset;
-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 _componentCustomOperation = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var CustomOperation = Object.assign(_componentCustomOperation, {
+    OptionName: "customOperations",
+    IsCollectionItem: true,
+    TemplateProps: [{
             tmplOption: "editorTemplate",
             render: "editorRender",
-            component: "editorComponent",
-            keyFn: "editorKeyFn"
-        }];
-    return CustomOperation;
-}(nested_option_1.default));
+            component: "editorComponent"
+        }],
+});
 exports.CustomOperation = CustomOperation;
-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 = {
+var _componentCustomRule = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var CustomRule = Object.assign(_componentCustomRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "custom"
-    };
-    return CustomRule;
-}(nested_option_1.default));
+    },
+});
 exports.CustomRule = CustomRule;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+    },
+});
 exports.DataGridHeaderFilter = DataGridHeaderFilter;
-var DataGridHeaderFilterSearch = /** @class */ (function (_super) {
-    __extends(DataGridHeaderFilterSearch, _super);
-    function DataGridHeaderFilterSearch() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DataGridHeaderFilterSearch.OptionName = "search";
-    return DataGridHeaderFilterSearch;
-}(nested_option_1.default));
+var _componentDataGridHeaderFilterSearch = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var DataGridHeaderFilterSearch = Object.assign(_componentDataGridHeaderFilterSearch, {
+    OptionName: "search",
+});
 exports.DataGridHeaderFilterSearch = DataGridHeaderFilterSearch;
-var DataGridHeaderFilterTexts = /** @class */ (function (_super) {
-    __extends(DataGridHeaderFilterTexts, _super);
-    function DataGridHeaderFilterTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DataGridHeaderFilterTexts.OptionName = "texts";
-    return DataGridHeaderFilterTexts;
-}(nested_option_1.default));
+var _componentDataGridHeaderFilterTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var DataGridHeaderFilterTexts = Object.assign(_componentDataGridHeaderFilterTexts, {
+    OptionName: "texts",
+});
 exports.DataGridHeaderFilterTexts = DataGridHeaderFilterTexts;
-var DataGridSelection = /** @class */ (function (_super) {
-    __extends(DataGridSelection, _super);
-    function DataGridSelection() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DataGridSelection.OptionName = "selection";
-    return DataGridSelection;
-}(nested_option_1.default));
+var _componentDataGridSelection = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var DataGridSelection = Object.assign(_componentDataGridSelection, {
+    OptionName: "selection",
+});
 exports.DataGridSelection = DataGridSelection;
-var Editing = /** @class */ (function (_super) {
-    __extends(Editing, _super);
-    function Editing() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Editing.OptionName = "editing";
-    Editing.DefaultsProps = {
+var _componentEditing = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+    },
+});
 exports.Editing = Editing;
-var EditingTexts = /** @class */ (function (_super) {
-    __extends(EditingTexts, _super);
-    function EditingTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    EditingTexts.OptionName = "texts";
-    return EditingTexts;
-}(nested_option_1.default));
+var _componentEditingTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var EditingTexts = Object.assign(_componentEditingTexts, {
+    OptionName: "texts",
+});
 exports.EditingTexts = EditingTexts;
-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 _componentEmailRule = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var EmailRule = Object.assign(_componentEmailRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "email"
-    };
-    return EmailRule;
-}(nested_option_1.default));
+    },
+});
 exports.EmailRule = EmailRule;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Export = Object.assign(_componentExport, {
+    OptionName: "export",
+    ExpectedChildren: {
         exportTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return Export;
-}(nested_option_1.default));
+    },
+});
 exports.Export = Export;
-var ExportTexts = /** @class */ (function (_super) {
-    __extends(ExportTexts, _super);
-    function ExportTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ExportTexts.OptionName = "texts";
-    return ExportTexts;
-}(nested_option_1.default));
+var _componentExportTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ExportTexts = Object.assign(_componentExportTexts, {
+    OptionName: "texts",
+});
 exports.ExportTexts = ExportTexts;
-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 _componentField = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+            component: "editorComponent"
+        }],
+});
 exports.Field = Field;
-var FieldLookup = /** @class */ (function (_super) {
-    __extends(FieldLookup, _super);
-    function FieldLookup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FieldLookup.OptionName = "lookup";
-    return FieldLookup;
-}(nested_option_1.default));
+var _componentFieldLookup = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var FieldLookup = Object.assign(_componentFieldLookup, {
+    OptionName: "lookup",
+});
 exports.FieldLookup = FieldLookup;
-var FilterBuilder = /** @class */ (function (_super) {
-    __extends(FilterBuilder, _super);
-    function FilterBuilder() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterBuilder.OptionName = "filterBuilder";
-    FilterBuilder.DefaultsProps = {
+var _componentFilterBuilder = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+    },
+});
 exports.FilterBuilder = FilterBuilder;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+            component: "titleComponent"
+        }],
+});
 exports.FilterBuilderPopup = FilterBuilderPopup;
-var FilterOperationDescriptions = /** @class */ (function (_super) {
-    __extends(FilterOperationDescriptions, _super);
-    function FilterOperationDescriptions() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterOperationDescriptions.OptionName = "filterOperationDescriptions";
-    return FilterOperationDescriptions;
-}(nested_option_1.default));
+var _componentFilterOperationDescriptions = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var FilterOperationDescriptions = Object.assign(_componentFilterOperationDescriptions, {
+    OptionName: "filterOperationDescriptions",
+});
 exports.FilterOperationDescriptions = FilterOperationDescriptions;
-var FilterPanel = /** @class */ (function (_super) {
-    __extends(FilterPanel, _super);
-    function FilterPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterPanel.OptionName = "filterPanel";
-    FilterPanel.DefaultsProps = {
+var _componentFilterPanel = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+    },
+});
 exports.FilterPanel = FilterPanel;
-var FilterPanelTexts = /** @class */ (function (_super) {
-    __extends(FilterPanelTexts, _super);
-    function FilterPanelTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterPanelTexts.OptionName = "texts";
-    return FilterPanelTexts;
-}(nested_option_1.default));
+var _componentFilterPanelTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var FilterPanelTexts = Object.assign(_componentFilterPanelTexts, {
+    OptionName: "texts",
+});
 exports.FilterPanelTexts = FilterPanelTexts;
-var FilterRow = /** @class */ (function (_super) {
-    __extends(FilterRow, _super);
-    function FilterRow() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterRow.OptionName = "filterRow";
-    FilterRow.ExpectedChildren = {
+var _componentFilterRow = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var FilterRow = Object.assign(_componentFilterRow, {
+    OptionName: "filterRow",
+    ExpectedChildren: {
         operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
-    };
-    return FilterRow;
-}(nested_option_1.default));
+    },
+});
 exports.FilterRow = FilterRow;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Form = Object.assign(_componentForm, {
+    OptionName: "form",
+    DefaultsProps: {
         defaultFormData: "formData"
-    };
-    Form.ExpectedChildren = {
+    },
+    ExpectedChildren: {
         colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
-    };
-    return Form;
-}(nested_option_1.default));
+    },
+});
 exports.Form = Form;
-var Format = /** @class */ (function (_super) {
-    __extends(Format, _super);
-    function Format() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Format.OptionName = "format";
-    return Format;
-}(nested_option_1.default));
+var _componentFormat = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Format = Object.assign(_componentFormat, {
+    OptionName: "format",
+});
 exports.Format = Format;
-var FormItem = /** @class */ (function (_super) {
-    __extends(FormItem, _super);
-    function FormItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FormItem.OptionName = "formItem";
-    FormItem.ExpectedChildren = {
+var _componentFormItem = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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 },
@@ -852,549 +593,448 @@ 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;
-}(nested_option_1.default));
+            component: "component"
+        }],
+});
 exports.FormItem = FormItem;
-var From = /** @class */ (function (_super) {
-    __extends(From, _super);
-    function From() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    From.OptionName = "from";
-    From.ExpectedChildren = {
+var _componentFrom = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var From = Object.assign(_componentFrom, {
+    OptionName: "from",
+    ExpectedChildren: {
         position: { optionName: "position", isCollectionItem: false }
-    };
-    return From;
-}(nested_option_1.default));
+    },
+});
 exports.From = From;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Grouping = Object.assign(_componentGrouping, {
+    OptionName: "grouping",
+    ExpectedChildren: {
         groupingTexts: { optionName: "texts", isCollectionItem: false },
         texts: { optionName: "texts", isCollectionItem: false }
-    };
-    return Grouping;
-}(nested_option_1.default));
+    },
+});
 exports.Grouping = Grouping;
-var GroupingTexts = /** @class */ (function (_super) {
-    __extends(GroupingTexts, _super);
-    function GroupingTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GroupingTexts.OptionName = "texts";
-    return GroupingTexts;
-}(nested_option_1.default));
+var _componentGroupingTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var GroupingTexts = Object.assign(_componentGroupingTexts, {
+    OptionName: "texts",
+});
 exports.GroupingTexts = GroupingTexts;
-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 _componentGroupItem = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var GroupItem = Object.assign(_componentGroupItem, {
+    OptionName: "groupItems",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-    };
-    return GroupItem;
-}(nested_option_1.default));
+    },
+});
 exports.GroupItem = GroupItem;
-var GroupOperationDescriptions = /** @class */ (function (_super) {
-    __extends(GroupOperationDescriptions, _super);
-    function GroupOperationDescriptions() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GroupOperationDescriptions.OptionName = "groupOperationDescriptions";
-    return GroupOperationDescriptions;
-}(nested_option_1.default));
+var _componentGroupOperationDescriptions = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var GroupOperationDescriptions = Object.assign(_componentGroupOperationDescriptions, {
+    OptionName: "groupOperationDescriptions",
+});
 exports.GroupOperationDescriptions = GroupOperationDescriptions;
-var GroupPanel = /** @class */ (function (_super) {
-    __extends(GroupPanel, _super);
-    function GroupPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GroupPanel.OptionName = "groupPanel";
-    GroupPanel.DefaultsProps = {
+var _componentGroupPanel = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var GroupPanel = Object.assign(_componentGroupPanel, {
+    OptionName: "groupPanel",
+    DefaultsProps: {
         defaultVisible: "visible"
-    };
-    return GroupPanel;
-}(nested_option_1.default));
+    },
+});
 exports.GroupPanel = GroupPanel;
-var HeaderFilter = /** @class */ (function (_super) {
-    __extends(HeaderFilter, _super);
-    function HeaderFilter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    HeaderFilter.OptionName = "headerFilter";
-    return HeaderFilter;
-}(nested_option_1.default));
+var _componentHeaderFilter = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var HeaderFilter = Object.assign(_componentHeaderFilter, {
+    OptionName: "headerFilter",
+});
 exports.HeaderFilter = HeaderFilter;
-var Hide = /** @class */ (function (_super) {
-    __extends(Hide, _super);
-    function Hide() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Hide.OptionName = "hide";
-    Hide.ExpectedChildren = {
+var _componentHide = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Hide = Object.assign(_componentHide, {
+    OptionName: "hide",
+    ExpectedChildren: {
         from: { optionName: "from", isCollectionItem: false },
         to: { optionName: "to", isCollectionItem: false }
-    };
-    return Hide;
-}(nested_option_1.default));
+    },
+});
 exports.Hide = Hide;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+            component: "component"
+        }],
+});
 exports.Item = Item;
-var KeyboardNavigation = /** @class */ (function (_super) {
-    __extends(KeyboardNavigation, _super);
-    function KeyboardNavigation() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KeyboardNavigation.OptionName = "keyboardNavigation";
-    return KeyboardNavigation;
-}(nested_option_1.default));
+var _componentKeyboardNavigation = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var KeyboardNavigation = Object.assign(_componentKeyboardNavigation, {
+    OptionName: "keyboardNavigation",
+});
 exports.KeyboardNavigation = KeyboardNavigation;
-var Label = /** @class */ (function (_super) {
-    __extends(Label, _super);
-    function Label() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Label.OptionName = "label";
-    Label.TemplateProps = [{
+var _componentLabel = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Label = Object.assign(_componentLabel, {
+    OptionName: "label",
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return Label;
-}(nested_option_1.default));
+            component: "component"
+        }],
+});
 exports.Label = Label;
-var LoadPanel = /** @class */ (function (_super) {
-    __extends(LoadPanel, _super);
-    function LoadPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    LoadPanel.OptionName = "loadPanel";
-    return LoadPanel;
-}(nested_option_1.default));
+var _componentLoadPanel = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var LoadPanel = Object.assign(_componentLoadPanel, {
+    OptionName: "loadPanel",
+});
 exports.LoadPanel = LoadPanel;
-var Lookup = /** @class */ (function (_super) {
-    __extends(Lookup, _super);
-    function Lookup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Lookup.OptionName = "lookup";
-    return Lookup;
-}(nested_option_1.default));
+var _componentLookup = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Lookup = Object.assign(_componentLookup, {
+    OptionName: "lookup",
+});
 exports.Lookup = Lookup;
-var MasterDetail = /** @class */ (function (_super) {
-    __extends(MasterDetail, _super);
-    function MasterDetail() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MasterDetail.OptionName = "masterDetail";
-    MasterDetail.TemplateProps = [{
+var _componentMasterDetail = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var MasterDetail = Object.assign(_componentMasterDetail, {
+    OptionName: "masterDetail",
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
-        }];
-    return MasterDetail;
-}(nested_option_1.default));
+            component: "component"
+        }],
+});
 exports.MasterDetail = MasterDetail;
-var My = /** @class */ (function (_super) {
-    __extends(My, _super);
-    function My() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    My.OptionName = "my";
-    return My;
-}(nested_option_1.default));
+var _componentMy = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var My = Object.assign(_componentMy, {
+    OptionName: "my",
+});
 exports.My = My;
-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 = {
+var _componentNumericRule = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var NumericRule = Object.assign(_componentNumericRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "numeric"
-    };
-    return NumericRule;
-}(nested_option_1.default));
+    },
+});
 exports.NumericRule = NumericRule;
-var Offset = /** @class */ (function (_super) {
-    __extends(Offset, _super);
-    function Offset() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Offset.OptionName = "offset";
-    return Offset;
-}(nested_option_1.default));
+var _componentOffset = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Offset = Object.assign(_componentOffset, {
+    OptionName: "offset",
+});
 exports.Offset = Offset;
-var OperationDescriptions = /** @class */ (function (_super) {
-    __extends(OperationDescriptions, _super);
-    function OperationDescriptions() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    OperationDescriptions.OptionName = "operationDescriptions";
-    return OperationDescriptions;
-}(nested_option_1.default));
+var _componentOperationDescriptions = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var OperationDescriptions = Object.assign(_componentOperationDescriptions, {
+    OptionName: "operationDescriptions",
+});
 exports.OperationDescriptions = OperationDescriptions;
-var Pager = /** @class */ (function (_super) {
-    __extends(Pager, _super);
-    function Pager() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Pager.OptionName = "pager";
-    return Pager;
-}(nested_option_1.default));
+var _componentPager = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Pager = Object.assign(_componentPager, {
+    OptionName: "pager",
+});
 exports.Pager = Pager;
-var Paging = /** @class */ (function (_super) {
-    __extends(Paging, _super);
-    function Paging() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Paging.OptionName = "paging";
-    Paging.DefaultsProps = {
+var _componentPaging = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Paging = Object.assign(_componentPaging, {
+    OptionName: "paging",
+    DefaultsProps: {
         defaultPageIndex: "pageIndex",
         defaultPageSize: "pageSize"
-    };
-    return Paging;
-}(nested_option_1.default));
+    },
+});
 exports.Paging = Paging;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var PatternRule = Object.assign(_componentPatternRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "pattern"
-    };
-    return PatternRule;
-}(nested_option_1.default));
+    },
+});
 exports.PatternRule = PatternRule;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+            component: "titleComponent"
+        }],
+});
 exports.Popup = Popup;
-var Position = /** @class */ (function (_super) {
-    __extends(Position, _super);
-    function Position() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Position.OptionName = "position";
-    return Position;
-}(nested_option_1.default));
+var _componentPosition = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Position = Object.assign(_componentPosition, {
+    OptionName: "position",
+});
 exports.Position = Position;
-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 = {
+var _componentRangeRule = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var RangeRule = Object.assign(_componentRangeRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "range"
-    };
-    return RangeRule;
-}(nested_option_1.default));
+    },
+});
 exports.RangeRule = RangeRule;
-var RemoteOperations = /** @class */ (function (_super) {
-    __extends(RemoteOperations, _super);
-    function RemoteOperations() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RemoteOperations.OptionName = "remoteOperations";
-    return RemoteOperations;
-}(nested_option_1.default));
+var _componentRemoteOperations = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var RemoteOperations = Object.assign(_componentRemoteOperations, {
+    OptionName: "remoteOperations",
+});
 exports.RemoteOperations = RemoteOperations;
-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 _componentRequiredRule = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var RequiredRule = Object.assign(_componentRequiredRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "required"
-    };
-    return RequiredRule;
-}(nested_option_1.default));
+    },
+});
 exports.RequiredRule = RequiredRule;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+            component: "dragComponent"
+        }],
+});
 exports.RowDragging = RowDragging;
-var Scrolling = /** @class */ (function (_super) {
-    __extends(Scrolling, _super);
-    function Scrolling() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Scrolling.OptionName = "scrolling";
-    return Scrolling;
-}(nested_option_1.default));
+var _componentScrolling = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Scrolling = Object.assign(_componentScrolling, {
+    OptionName: "scrolling",
+});
 exports.Scrolling = Scrolling;
-var Search = /** @class */ (function (_super) {
-    __extends(Search, _super);
-    function Search() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Search.OptionName = "search";
-    return Search;
-}(nested_option_1.default));
+var _componentSearch = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Search = Object.assign(_componentSearch, {
+    OptionName: "search",
+});
 exports.Search = Search;
-var SearchPanel = /** @class */ (function (_super) {
-    __extends(SearchPanel, _super);
-    function SearchPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SearchPanel.OptionName = "searchPanel";
-    SearchPanel.DefaultsProps = {
+var _componentSearchPanel = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var SearchPanel = Object.assign(_componentSearchPanel, {
+    OptionName: "searchPanel",
+    DefaultsProps: {
         defaultText: "text"
-    };
-    return SearchPanel;
-}(nested_option_1.default));
+    },
+});
 exports.SearchPanel = SearchPanel;
-var Selection = /** @class */ (function (_super) {
-    __extends(Selection, _super);
-    function Selection() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Selection.OptionName = "selection";
-    return Selection;
-}(nested_option_1.default));
+var _componentSelection = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Selection = Object.assign(_componentSelection, {
+    OptionName: "selection",
+});
 exports.Selection = Selection;
-var Show = /** @class */ (function (_super) {
-    __extends(Show, _super);
-    function Show() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Show.OptionName = "show";
-    return Show;
-}(nested_option_1.default));
+var _componentShow = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Show = Object.assign(_componentShow, {
+    OptionName: "show",
+});
 exports.Show = Show;
-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;
-}(nested_option_1.default));
+var _componentSortByGroupSummaryInfo = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var SortByGroupSummaryInfo = Object.assign(_componentSortByGroupSummaryInfo, {
+    OptionName: "sortByGroupSummaryInfo",
+    IsCollectionItem: true,
+});
 exports.SortByGroupSummaryInfo = SortByGroupSummaryInfo;
-var Sorting = /** @class */ (function (_super) {
-    __extends(Sorting, _super);
-    function Sorting() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Sorting.OptionName = "sorting";
-    return Sorting;
-}(nested_option_1.default));
+var _componentSorting = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Sorting = Object.assign(_componentSorting, {
+    OptionName: "sorting",
+});
 exports.Sorting = Sorting;
-var StateStoring = /** @class */ (function (_super) {
-    __extends(StateStoring, _super);
-    function StateStoring() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    StateStoring.OptionName = "stateStoring";
-    return StateStoring;
-}(nested_option_1.default));
+var _componentStateStoring = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var StateStoring = Object.assign(_componentStateStoring, {
+    OptionName: "stateStoring",
+});
 exports.StateStoring = StateStoring;
-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 _componentStringLengthRule = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var StringLengthRule = Object.assign(_componentStringLengthRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "stringLength"
-    };
-    return StringLengthRule;
-}(nested_option_1.default));
+    },
+});
 exports.StringLengthRule = StringLengthRule;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+    },
+});
 exports.Summary = Summary;
-var SummaryTexts = /** @class */ (function (_super) {
-    __extends(SummaryTexts, _super);
-    function SummaryTexts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SummaryTexts.OptionName = "texts";
-    return SummaryTexts;
-}(nested_option_1.default));
+var _componentSummaryTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var SummaryTexts = Object.assign(_componentSummaryTexts, {
+    OptionName: "texts",
+});
 exports.SummaryTexts = SummaryTexts;
-var Texts = /** @class */ (function (_super) {
-    __extends(Texts, _super);
-    function Texts() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Texts.OptionName = "texts";
-    return Texts;
-}(nested_option_1.default));
+var _componentTexts = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Texts = Object.assign(_componentTexts, {
+    OptionName: "texts",
+});
 exports.Texts = Texts;
-var To = /** @class */ (function (_super) {
-    __extends(To, _super);
-    function To() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    To.OptionName = "to";
-    return To;
-}(nested_option_1.default));
+var _componentTo = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var To = Object.assign(_componentTo, {
+    OptionName: "to",
+});
 exports.To = To;
-var Toolbar = /** @class */ (function (_super) {
-    __extends(Toolbar, _super);
-    function Toolbar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Toolbar.OptionName = "toolbar";
-    Toolbar.ExpectedChildren = {
+var _componentToolbar = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var Toolbar = Object.assign(_componentToolbar, {
+    OptionName: "toolbar",
+    ExpectedChildren: {
         item: { optionName: "items", isCollectionItem: true }
-    };
-    return Toolbar;
-}(nested_option_1.default));
+    },
+});
 exports.Toolbar = Toolbar;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __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;
-}(nested_option_1.default));
+            component: "component"
+        }],
+});
 exports.ToolbarItem = ToolbarItem;
-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 = {
+var _componentTotalItem = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var TotalItem = Object.assign(_componentTotalItem, {
+    OptionName: "totalItems",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-    };
-    return TotalItem;
-}(nested_option_1.default));
+    },
+});
 exports.TotalItem = TotalItem;
-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 = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ValidationRule = Object.assign(_componentValidationRule, {
+    OptionName: "validationRules",
+    IsCollectionItem: true,
+    PredefinedProps: {
         type: "required"
-    };
-    return ValidationRule;
-}(nested_option_1.default));
+    },
+});
 exports.ValidationRule = ValidationRule;
-var ValueFormat = /** @class */ (function (_super) {
-    __extends(ValueFormat, _super);
-    function ValueFormat() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ValueFormat.OptionName = "valueFormat";
-    return ValueFormat;
-}(nested_option_1.default));
+var _componentValueFormat = (0, react_1.memo)(function (props) {
+    return React.createElement((nested_option_1.default), __assign({}, props));
+});
+var ValueFormat = Object.assign(_componentValueFormat, {
+    OptionName: "valueFormat",
+});
 exports.ValueFormat = ValueFormat;
 exports.default = DataGrid;