drf-react-by-schema 0.22.4 → 0.23.0

package/dist/components/DataGridBySchemaEditable/DataGridDesktop.js

@@ -32,776 +32,260 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const dayjs_1 = __importDefault(require("dayjs"));
 const x_data_grid_1 = require("@mui/x-data-grid");
-const string_mask_1 = __importDefault(require("string-mask"));
+const Check_1 = __importDefault(require("@mui/icons-material/Check"));
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
 const Box_1 = __importDefault(require("@mui/material/Box"));
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
-const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
-const Bolt_1 = __importDefault(require("@mui/icons-material/Bolt"));
-const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
-const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
-const Check_1 = __importDefault(require("@mui/icons-material/Check"));
-const Undo_1 = __importDefault(require("@mui/icons-material/Undo"));
 const styles_1 = require("../../styles");
-const api_1 = require("../../api");
-const utils_1 = require("../../utils");
-const utils_2 = require("./utils");
-const DRFReactBySchemaContext_1 = require("../../context/DRFReactBySchemaContext");
 const APIWrapperContext_1 = require("../../context/APIWrapperContext");
+const utils_1 = require("../../utils");
 const CustomToolbar_1 = require("./CustomToolbar");
-const SelectEditInputCell_1 = require("./SelectEditInputCell");
-const GridDateInput_1 = require("./GridDateInput");
-const GridDecimalInput_1 = require("./GridDecimalInput");
-const GridPatternInput_1 = require("./GridPatternInput");
-const BooleanInputCell_1 = require("./BooleanInputCell");
-const FileInputCell_1 = require("./FileInputCell");
 const FooterToolbar_1 = require("./FooterToolbar");
-function DataGridDesktop({ schema, dataGrid, setDataGrid, rowCount = 0, columns, model, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customFieldFormLayouts, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, isAutoHeight = false, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], customActions, hideColumnsButton, hideFilterButton, hideDensityButton, hideExportButton, hideQuickFilterBar, optionsAC: optionsACExternal, emptyItem, handleDeleteClick, setSnackBar, yupValidationSchema, }) {
-    const { serverEndPoint } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
-    const { onEditModel: APIOnEditModel, setDialog, onEditRelatedModelSave, onEditModelDataGridSave, } = (0, APIWrapperContext_1.useAPIWrapper)();
-    const [preparedColumns, setPreparedColumns] = (0, react_1.useState)(null);
+const useOptionsAC_1 = require("./hooks/useOptionsAC");
+const usePreparedColumns_1 = require("./hooks/usePreparedColumns");
+const useDataGridActions_1 = require("./hooks/useDataGridActions");
+const useProcessRowUpdate_1 = require("./hooks/useProcessRowUpdate");
+function DataGridDesktop({ schema, dataGrid, setDataGrid, rowCount = 0, columns, columnVisibilityModel, model, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customFieldFormLayouts, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect, onSelectActions, sx: sxProp, isAutoHeight, defaultValues, hideFooterPagination, setVisibleRows, paginationModel, setPaginationModel, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], customActions, hideColumnsButton, hideFilterButton, hideDensityButton, hideExportButton, hideQuickFilterBar, optionsAC: optionsACExternal, extraValidators, emptyItem, handleDeleteClick, setSnackBar, yupValidationSchema, }) {
     const [dataGridLoading, setDataGridLoading] = (0, react_1.useState)(false);
-    const [rowModesModel, setRowModesModel] = (0, react_1.useState)();
+    const [isRowEditing, setIsRowEditing] = (0, react_1.useState)();
+    const [validationErrors, setValidationErrors] = (0, react_1.useState)({});
     const [selectionModel, setSelectionModel] = (0, react_1.useState)([]);
     const [selectionModelIds, setSelectionModelIds] = (0, react_1.useState)([]);
-    const optionsAC = (0, react_1.useRef)(null);
     const processingRow = (0, react_1.useRef)(null);
-    const visibleRows = (0, react_1.useRef)('');
+    const apiRef = (0, x_data_grid_1.useGridApiRef)();
+    const handleStopEditing = () => {
+        setIsRowEditing(undefined);
+    };
+    const handleStartEditing = (id) => {
+        setIsRowEditing(id);
+    };
+    const { setDialog, onEditModel: APIOnEditModel } = (0, APIWrapperContext_1.useAPIWrapper)();
     if (!onEditModel) {
         onEditModel = APIOnEditModel;
     }
-    const updateOptionsAC = () => __awaiter(this, void 0, void 0, function* () {
-        var _a;
-        optionsAC.current = {};
-        for (const col of columns) {
-            if (optionsACExternal && col.field in optionsACExternal) {
-                optionsAC.current[col.field] = optionsACExternal[col.field];
-                continue;
-            }
-            if (!schema[col.field]) {
-                continue;
-            }
-            const fieldSchema = schema[col.field];
-            if (['field', 'nested object'].includes(fieldSchema.type) &&
-                !(col.field in optionsAC.current)) {
-                const options = yield (0, api_1.getAutoComplete)({
-                    model: col.field,
-                    serverEndPoint,
-                });
-                if (options) {
-                    optionsAC.current[col.field] = options;
-                    continue;
-                }
-                console.log(`Couldn't load autocomplete options from '${col.field}'`);
-                continue;
-            }
-            if (fieldSchema.type === 'choice' && !(col.field in optionsAC.current)) {
-                optionsAC.current[col.field] = fieldSchema.choices || [];
-                continue;
-            }
-            if (fieldSchema.type === 'list' && !(col.field in optionsAC.current)) {
-                optionsAC.current[col.field] = ((_a = fieldSchema.child) === null || _a === void 0 ? void 0 : _a.choices) || [];
-                continue;
-            }
-            if (col.field === indexField && addExistingModel && !optionsAC.current[col.field]) {
-                const options = yield (0, api_1.getAutoComplete)({
-                    model: addExistingModel,
-                    serverEndPoint,
-                });
-                if (options) {
-                    optionsAC.current[col.field] = options;
-                    continue;
-                }
-                if (!(col.field in optionsAC.current)) {
-                    delete optionsAC.current[col.field];
-                }
-            }
+    const handleSaveRow = (0, react_1.useCallback)((id) => {
+        if (id) {
+            apiRef.current.stopRowEditMode({ id });
         }
-    });
-    const ActionElement = ({ Icon, label }) => (
-    // @ts-expect-error - Ignore missing event handlers (they don't actually exist)
-    react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: Icon, label: label, color: "inherit", showInMenu: false, placeholder: "" }));
-    const initColumns = () => __awaiter(this, void 0, void 0, function* () {
-        const actionCols = [];
-        if (isEditable) {
-            const handleSaveClick = (id) => () => {
-                if (id) {
-                    setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.View } }));
-                }
-            };
-            const handleCancelClick = (id) => () => {
-                if (id) {
-                    setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.View, ignoreModifications: true } }));
-                }
-                setDataGrid((currentDataGrid) => {
-                    const editedRow = currentDataGrid.data.find((row) => row.id === id);
-                    if (editedRow && editedRow.isNew) {
-                        return Object.assign(Object.assign({}, currentDataGrid), { data: currentDataGrid.data.filter((row) => row.id !== id) });
-                    }
-                    return currentDataGrid;
-                });
-            };
-            const handleEditInlineClick = (id) => () => {
-                if (id) {
-                    setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.Edit } }));
-                }
-            };
-            actionCols.push({
-                field: 'actions',
-                headerName: '',
-                type: 'actions',
-                getActions: ({ id }) => {
-                    var _a;
-                    if (!id) {
-                        return [];
-                    }
-                    const isInEditMode = ((_a = rowModesModel === null || rowModesModel === void 0 ? void 0 : rowModesModel[id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit;
-                    if (isInEditMode) {
-                        return [
-                            // @ts-expect-error - Ignore missing event handlers (they don't actually exist)
-                            react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `save_${id}`, icon: react_1.default.createElement(Check_1.default, null), label: "Salvar", onClick: handleSaveClick(id), color: "success", showInMenu: false, placeholder: "" }),
-                            // @ts-expect-error - Ignore missing event handlers (they don't actually exist)
-                            react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `cancel_${id}`, icon: react_1.default.createElement(Undo_1.default, null), label: "Cancelar", onClick: handleCancelClick(id), color: "inherit", showInMenu: false, placeholder: "" }),
-                        ];
-                    }
-                    const actionItems = [];
-                    actions.forEach((action) => {
-                        switch (action) {
-                            case 'editInline':
-                                actionItems.push(
-                                // @ts-expect-error - Ignore missing event handlers (they don't actually exist)
-                                react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `editInline_${id}`, icon: actions.includes('edit') ? react_1.default.createElement(Bolt_1.default, null) : react_1.default.createElement(Edit_1.default, null), label: "Editar essa linha na tabela", onClick: handleEditInlineClick(id), color: "inherit", showInMenu: false, placeholder: "" }));
-                                break;
-                            case 'remove':
-                                actionItems.push(
-                                // @ts-expect-error - Ignore missing event handlers (they don't actually exist)
-                                react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Apagar essa linha", onClick: handleDeleteClick(id), color: "error", showInMenu: false, placeholder: "" }));
-                                break;
-                            case 'edit':
-                                if (!LinkComponent) {
-                                    console.log('you must pass LinkComponent prop to navigate externally');
-                                    break;
-                                }
-                                actionItems.push(react_1.default.createElement(LinkComponent, { key: `edit_${id}`, to: (0, utils_2.buildEditPath)(indexFieldBasePath, id), state: stateToLink },
-                                    react_1.default.createElement(ActionElement, { Icon: react_1.default.createElement(Edit_1.default, null), label: "Editar esse item em janela separada" })));
-                                break;
-                            case 'view':
-                                if (!LinkComponent) {
-                                    console.log('you must pass LinkComponent prop to navigate externally');
-                                    break;
-                                }
-                                if (!indexFieldViewBasePath) {
-                                    console.log('For view action to work, you must supply indexFieldViewBasePath prop!');
-                                    break;
-                                }
-                                actionItems.push(react_1.default.createElement(LinkComponent, { key: `view_${id}`, to: `${indexFieldViewBasePath}${id}`, state: stateToLink },
-                                    react_1.default.createElement(ActionElement, { Icon: react_1.default.createElement(Visibility_1.default, null), label: "Visualizar esse item em janela separada" })));
-                                break;
-                        }
-                    });
-                    // React.ReactElement<any, string | React.JSXElementConstructor<any>>
-                    // React.ReactElement<any, string | React.JSXElementConstructor<any>>
-                    if (customActions) {
-                        customActions.forEach((customAction) => {
-                            actionItems.push(
-                            // @ts-expect-error - Ignore missing event handlers (they don't actually exist)
-                            react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `${customAction.key}_${id}`, icon: customAction.icon, label: customAction.label, onClick: () => customAction.handleClick(dataGrid.data.find((row) => row.id === id)), showInMenu: false, placeholder: "" }));
-                        });
-                    }
-                    return actionItems;
-                },
-            });
-        }
-        const cols = [...actionCols, ...columns];
-        const colsPromises = cols.map((col) => __awaiter(this, void 0, void 0, function* () {
-            if (!schema[col.field]) {
-                return col;
-            }
-            const fieldSchema = schema[col.field];
-            const isIndexField = indexField !== '' && col.field === indexField;
-            let column = col;
-            if (isIndexField) {
-                col.isIndexField = true;
-            }
-            column.editable =
-                isEditable &&
-                    !col.disabled &&
-                    (!fieldSchema.read_only || ['field', 'nested object'].includes(fieldSchema.type));
-            if (['field', 'nested object'].includes(fieldSchema.type)) {
-                column.creatable =
-                    'related_editable' in fieldSchema ? fieldSchema.related_editable : column.creatable;
-            }
-            switch (fieldSchema.type) {
-                case 'date':
-                    column.type = 'date';
-                    const dateFormat = (0, utils_1.buildDateFormatBySchema)(fieldSchema.date_views);
-                    column.valueFormatter = (params) => params.value ? (0, dayjs_1.default)(params.value).format(dateFormat) : '';
-                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({
-                        type: 'date',
-                    });
-                    if (isEditable && !col.disabled) {
-                        column.renderEditCell = (params) => (react_1.default.createElement(GridDateInput_1.GridDateInput, Object.assign({}, params, { column: column, dateViews: fieldSchema.date_views })));
-                        break;
-                    }
-                    break;
-                case 'datetime':
-                    column.type = 'dateTime';
-                    column.minWidth = 180;
-                    column.valueFormatter = (params) => params.value ? (0, dayjs_1.default)(params.value).format('DD/MM/YYYY HH:mm') : '';
-                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({
-                        type: 'date',
-                    });
-                    break;
-                case 'nested object':
-                    column.minWidth = 150;
-                    if (isEditable && !col.disabled) {
-                        column.valueFormatter = (params) => {
-                            return !params.value ? '' : params.value.label;
-                        };
-                        // column.filterable = false;
-                        column.sortComparator = (v1, v2, param1, param2) => {
-                            return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2);
-                        };
-                        column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: fieldSchema.type, options: optionsAC.current && col.field in optionsAC.current
-                                ? optionsAC.current[col.field]
-                                : [], isIndexField: isIndexField, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts && col.field in customFieldFormLayouts
-                                ? customFieldFormLayouts[col.field]
-                                : undefined, setDialog: setDialog })));
-                        break;
-                    }
-                    column.valueGetter = (params) => {
-                        return !params.value ? '' : params.value.label;
-                    };
-                    break;
-                case 'field':
-                    column.orderable = false;
-                    if (isEditable && !col.disabled) {
-                        column.minWidth = 300;
-                        column.valueFormatter = (params) => {
-                            return !params.value || !Array.isArray(params.value)
-                                ? ''
-                                : params.value.map((val) => val.label).join(', ');
-                        };
-                        column.filterable = false;
-                        column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: fieldSchema.type, options: optionsAC.current && col.field in optionsAC.current
-                                ? optionsAC.current[col.field]
-                                : [], isIndexField: isIndexField, multiple: fieldSchema.many || false, setDialog: setDialog })));
-                        break;
-                    }
-                    column.valueGetter = (params) => {
-                        return !params.value || !Array.isArray(params.value)
-                            ? ''
-                            : params.value.map((val) => val.label).join(', ');
-                    };
-                    break;
-                case 'choice':
-                    if (isEditable && !col.disabled) {
-                        column.minWidth = 150;
-                        column.valueFormatter = (params) => {
-                            return !params.value ? '' : params.value.display_name;
-                        };
-                        column.filterable = false;
-                        column.sortComparator = (v1, v2, param1, param2) => {
-                            return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.display_name, v2.display_name, param1, param2);
-                        };
-                        column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: fieldSchema.type, options: optionsAC.current && col.field in optionsAC.current
-                                ? optionsAC.current[col.field]
-                                : [], isIndexField: isIndexField, setDialog: setDialog })));
-                        break;
-                    }
-                    column.valueGetter = (params) => {
-                        return !params.value ? '' : params.value.display_name;
-                    };
-                    break;
-                case 'list':
-                    column.orderable = false;
-                    if (isEditable && !col.disabled) {
-                        column.minWidth = 300;
-                        column.valueFormatter = (params) => {
-                            return !params.value || !Array.isArray(params.value)
-                                ? ''
-                                : params.value.map((val) => val.value.display_name).join(', ');
-                        };
-                        column.filterable = false;
-                        column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: fieldSchema.type, options: optionsAC.current && col.field in optionsAC.current
-                                ? optionsAC.current[col.field]
-                                : [], isIndexField: isIndexField, multiple: true, setDialog: setDialog })));
-                        break;
-                    }
-                    column.valueGetter = (params) => {
-                        return !params.value || !Array.isArray(params.value)
-                            ? ''
-                            : params.value.map((val) => val.label).join(', ');
-                    };
-                    break;
-                case 'boolean':
-                    if (isEditable && !col.disabled) {
-                        column.valueFormatter = (params) => {
-                            return params.value ? 'Sim' : 'Não';
-                        };
-                        column.renderEditCell = (params) => react_1.default.createElement(BooleanInputCell_1.BooleanInputCell, Object.assign({}, params, { column: column }));
-                        break;
-                    }
-                    column.valueGetter = (params) => {
-                        return params.value ? 'Sim' : 'Não';
-                    };
-                    break;
-                case 'decimal':
-                case 'float':
-                    const decimalScale = fieldSchema.decimal_places || 2;
-                    const prefix = fieldSchema.prefix || '';
-                    const suffix = fieldSchema.suffix || '';
-                    const isCurrency = fieldSchema.is_currency;
-                    column.type = 'number';
-                    column.valueFormatter = (params) => {
-                        return !params.value
-                            ? ''
-                            : parseFloat(params.value).toLocaleString('pt-BR', {
-                                minimumFractionDigits: decimalScale,
-                                maximumFractionDigits: decimalScale,
-                            });
-                    };
-                    if (isEditable && !col.disabled) {
-                        column.renderEditCell = (params) => (react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, params, { decimalPlaces: decimalScale, isCurrency: isCurrency, prefix: prefix, suffix: suffix, column: column })));
-                    }
-                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({
-                        type: 'float',
-                    });
-                    break;
-                case 'number':
-                case 'integer':
-                    column.type = 'number';
-                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({
-                        type: 'number',
-                    });
-                    break;
-                case 'image upload':
-                case 'file upload':
-                    column.filterable = false;
-                    column.orderable = false;
-                    const accept = fieldSchema.allowed_mime_types
-                        ? fieldSchema.allowed_mime_types.join(', ')
-                        : fieldSchema.type === 'image upload'
-                            ? '/image*'
-                            : '*';
-                    column.minWidth = 200;
-                    column.valueFormatter = (params) => {
-                        var _a;
-                        return !((_a = params.value) === null || _a === void 0 ? void 0 : _a.name)
-                            ? ''
-                            : `${params.value.name.split('/').pop()} (${(0, utils_1.formatFileSize)(params.value.size)})`;
-                    };
-                    column.renderCell = (params) => {
-                        var _a, _b;
-                        return (react_1.default.createElement(react_1.default.Fragment, null, !((_a = params.value) === null || _a === void 0 ? void 0 : _a.name) ? null : ((_b = params.value) === null || _b === void 0 ? void 0 : _b.url) &&
-                            fieldSchema.type === 'image upload' ? (react_1.default.createElement("img", { src: `${serverEndPoint === null || serverEndPoint === void 0 ? void 0 : serverEndPoint.url}${params.value.url}`, alt: params.value.name, title: params.value.name, style: {
-                                width: '100%',
-                                maxHeight: '100px',
-                                objectFit: 'cover',
-                            } })) : (react_1.default.createElement(Typography_1.default, { variant: "body2", sx: { mb: 1 } },
-                            params.value.name.split('/').pop(),
-                            " (",
-                            (0, utils_1.formatFileSize)(params.value.size),
-                            ")"))));
-                    };
-                    if (isEditable && !col.disabled) {
-                        column.renderEditCell = (params) => (react_1.default.createElement(FileInputCell_1.FileInputCell, Object.assign({ accept: accept, fileType: fieldSchema.type, column: column, required: (0, utils_1.isFieldRequired)(fieldSchema) }, params)));
-                    }
-                    break;
-            }
-            if (indexFieldMinWidth && !column.minWidth) {
-                column.minWidth = col.field === indexField ? indexFieldMinWidth : minWidth;
-            }
-            if (indexField) {
-                if (col.field === indexField) {
-                    column.flex = 1;
-                    column.renderCell = (params) => {
-                        if (LinkComponent && customLinkDestination && !actions.includes('edit')) {
-                            return (react_1.default.createElement(LinkComponent, { to: `${customLinkDestination(params)}`, state: stateToLink }, params.formattedValue));
-                        }
-                        if (!LinkComponent ||
-                            !indexFieldBasePath ||
-                            actions.includes('edit') ||
-                            (['field', 'nested object'].includes(fieldSchema.type) &&
-                                (!params.row[col.field] || !params.row[col.field].id))) {
-                            return react_1.default.createElement(react_1.default.Fragment, null, params.formattedValue);
-                        }
-                        const targetId = ['field', 'nested object'].includes(fieldSchema.type)
-                            ? params.row[col.field].id.toString()
-                            : params.row.id.toString();
-                        return (react_1.default.createElement(LinkComponent, { to: (0, utils_2.buildEditPath)(indexFieldBasePath, targetId), state: stateToLink }, params.formattedValue));
-                    };
-                    if (isEditable &&
-                        !col.disabled &&
-                        optionsAC.current &&
-                        col.field in optionsAC.current &&
-                        addExistingModel) {
-                        column.renderEditCell = (params) => {
-                            if (!(0, utils_1.isTmpId)(params.id)) {
-                                return react_1.default.createElement(x_data_grid_1.GridEditInputCell, Object.assign({}, params));
-                            }
-                            return (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: fieldSchema.type, options: optionsAC.current && col.field in optionsAC.current
-                                    ? optionsAC.current[col.field]
-                                    : [], isIndexField: true, setDialog: setDialog })));
-                        };
-                    }
-                }
-            }
-            // format numbers:
-            if (column.patternFormat) {
-                column.valueFormatter = (params) => {
-                    if (!params.value || typeof params.value !== 'string') {
-                        return params.value;
-                    }
-                    const formattedValue = new string_mask_1.default(column.patternFormat, {}).apply(params.value);
-                    return formattedValue;
-                };
-                if (isEditable && !col.disabled) {
-                    column.renderEditCell = (params) => (react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, params, { patternFormat: column.patternFormat })));
-                }
-            }
-            // Custom column operations:
-            if (customColumnOperations) {
-                column = yield customColumnOperations(column);
-            }
-            // Finally!
-            return column;
-        }));
-        const finalCols = yield Promise.all(colsPromises);
-        setPreparedColumns(finalCols);
-    });
-    const handleAddItems = (numberOfRows = 1) => {
-        const newRows = [];
-        for (let i = 0; i < numberOfRows; i++) {
-            const id = (0, utils_1.getTmpId)();
-            newRows.push(Object.assign(Object.assign({}, emptyItem), { id }));
-        }
-        const newData = tableAutoHeight
-            ? [...dataGrid.data, ...newRows]
-            : [...newRows, ...dataGrid.data];
-        if (onDataChange) {
-            onDataChange(newData);
-        }
-        setDataGrid({
-            data: newData,
-        });
-        setRowModesModel((oldModel) => {
-            const newModel = Object.assign({}, oldModel);
-            newRows.map((newRow) => {
-                newModel[newRow.id] = { mode: x_data_grid_1.GridRowModes.Edit, fieldToFocus: indexField };
-            });
-            return newModel;
-        });
-        if (!tableAutoHeight) {
-            // Ugly hack to scroll to top, since scroll to cell is only available in Pro
-            const el = document.querySelector(`.dataGrid_${name} .MuiDataGrid-virtualScroller`);
-            if (el) {
-                el.scrollTop = 0;
-                setTimeout(() => {
-                    el.scrollTop = 0;
-                }, 10);
+    }, [apiRef]);
+    const handleCancelRow = (0, react_1.useCallback)((id) => {
+        if (id) {
+            apiRef.current.stopRowEditMode({ id, ignoreModifications: true });
+            handleStopEditing();
+            if ((0, utils_1.isTmpId)(id)) {
+                const newData = dataGrid.data.filter(({ id: rowId }) => id !== rowId);
+                setDataGrid({ data: newData });
             }
         }
-    };
-    const bulkUpdateData = (newData) => __awaiter(this, void 0, void 0, function* () {
-        const promises = [];
-        const ids = [];
-        newData.map((item) => {
-            promises.push((0, api_1.updateDataBySchema)({
-                model,
-                modelObjectId: item.id,
-                serverEndPoint,
-                data: item,
-                schema,
-            }));
-            ids.push(item.id);
-        });
-        const results = yield Promise.all(promises);
-        setSelectionModel([]);
-        setSelectionModelIds([]);
-        const updatedData = dataGrid.data.map((item) => {
-            const index = ids.indexOf(item.id);
-            return index === -1 ? item : newData[index];
-        });
-        if (onDataChange) {
-            onDataChange(updatedData);
-        }
-        setDataGrid({
-            data: updatedData,
-        });
-        setSnackBar({
-            open: true,
-            severity: 'success',
-            msg: 'Alterações salvas com sucesso',
-        });
-        return results.map((result, index) => {
-            return {
-                id: ids[index],
-                success: 'isAxiosError' in result,
-            };
-        });
+    }, [apiRef, dataGrid.data]);
+    const { optionsAC, updateOptionsAC } = (0, useOptionsAC_1.useOptionsAC)({
+        columns,
+        schema,
+        optionsACExternal,
     });
-    const bulkDeleteData = (ids) => __awaiter(this, void 0, void 0, function* () {
-        const promises = [];
-        ids.map((id) => {
-            promises.push((0, api_1.deleteData)(model, serverEndPoint, id));
-        });
-        setDataGridLoading(true);
-        const results = yield Promise.all(promises);
-        setSelectionModel([]);
-        setSelectionModelIds([]);
-        const newData = dataGrid.data.filter(({ id }) => !ids.includes(id));
-        if (onDataChange) {
-            onDataChange(newData);
-        }
-        setDataGrid({
-            data: newData,
-        });
-        setDataGridLoading(false);
-        setSnackBar({
-            open: true,
-            severity: 'success',
-            msg: 'Itens apagados com sucesso',
-        });
-        return results.map((result, index) => {
-            return {
-                id: ids[index],
-                success: result === true,
-            };
-        });
+    const { handleAddItem, bulkUpdateData, bulkDeleteData, bulkCreateData } = (0, useDataGridActions_1.useDataGridActions)({
+        apiRef,
+        dataGrid,
+        setDataGrid,
+        setSnackBar,
+        emptyItem,
+        defaultValues,
+        model,
+        schema,
+        setSelectionModel,
+        setSelectionModelIds,
+        setDataGridLoading,
+        indexField,
+        handleStartEditing,
+        isRowEditing,
     });
-    const bulkCreateData = (ids) => __awaiter(this, void 0, void 0, function* () {
-        handleAddItems(ids.length);
-        setSelectionModel([]);
-        setSelectionModelIds([]);
-        setSnackBar({
-            open: true,
-            severity: 'success',
-            msg: 'Linhas adicionadas com sucesso',
-        });
+    const { preparedColumns, setPreparedColumns } = (0, usePreparedColumns_1.usePreparedColumns)({
+        schema,
+        columns,
+        isEditable,
+        actions,
+        customActions,
+        LinkComponent,
+        indexFieldBasePath,
+        indexFieldViewBasePath,
+        stateToLink,
+        validationErrors,
+        optionsAC,
+        onEditModel,
+        customFieldFormLayouts,
+        setDialog,
+        indexField,
+        addExistingModel,
+        indexFieldMinWidth,
+        minWidth,
+        customColumnOperations,
+        customLinkDestination,
     });
-    (0, react_1.useEffect)(() => {
-        updateOptionsAC().then(() => {
-            initColumns();
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rowModesModel, columns]);
-    const processRowUpdate = (editedRow) => __awaiter(this, void 0, void 0, function* () {
-        if (!preparedColumns || !yupValidationSchema) {
-            return false;
-        }
-        setDataGridLoading(true);
-        const indexCol = preparedColumns.find((col) => col.field === indexField);
-        processingRow.current = editedRow.id;
-        yield yupValidationSchema.validate(editedRow);
-        const onlyAddExisting = indexField &&
-            (0, utils_1.isTmpId)(editedRow.id) &&
-            editedRow[indexField] &&
-            !(0, utils_1.isTmpId)(editedRow[indexField].id) &&
-            (!indexCol || !indexCol.valueFormatter);
-        const createNewItem = indexField &&
-            (0, utils_1.isTmpId)(editedRow.id) &&
-            editedRow[indexField] &&
-            (0, utils_1.isTmpId)(editedRow[indexField].id);
-        if (onlyAddExisting) {
-            const row = {};
-            row.id_to_add = editedRow[indexField].id;
-            for (const [key, value] of Object.entries(editedRow[indexField])) {
-                if (key === 'id') {
-                    row[key] = editedRow.id;
-                    continue;
-                }
-                row[key] = value;
-            }
-            editedRow = Object.assign({}, row);
-        }
-        if (createNewItem && editedRow[indexField]) {
-            if (editedRow[indexField].inputValue) {
-                editedRow[indexField] = editedRow[indexField].inputValue;
-            }
-            if (addExistingModel) {
-                editedRow[indexField] = editedRow[indexField].label;
+    const { processRowUpdate } = (0, useProcessRowUpdate_1.useProcessRowUpdate)({
+        preparedColumns,
+        indexField,
+        schema,
+        model,
+        yupValidationSchema,
+        extraValidators,
+        onEditModel,
+        onProcessRow,
+        onDataChange,
+        updateOptionsAC,
+        dataGrid,
+        setDataGrid,
+        setDataGridLoading,
+        setValidationErrors,
+        processingRow,
+        modelParent,
+        modelParentId,
+        addExistingModel,
+        handleStopEditing,
+    });
+    const InternalToolbar = (0, react_1.useCallback)((_props) => (react_1.default.createElement(CustomToolbar_1.CustomToolbar, { preparedColumns: preparedColumns || [], setPreparedColumns: setPreparedColumns, selectionModel: selectionModel, onSelectActions: onSelectActions, bulkUpdateData: bulkUpdateData, bulkDeleteData: bulkDeleteData, bulkCreateData: bulkCreateData, hideColumnsButton: hideColumnsButton, hideFilterButton: hideFilterButton, hideDensityButton: hideDensityButton, hideExportButton: hideExportButton, hideQuickFilterBar: hideQuickFilterBar })), [
+        preparedColumns,
+        selectionModel,
+        onSelectActions,
+        bulkUpdateData,
+        bulkDeleteData,
+        bulkCreateData,
+        hideColumnsButton,
+        hideFilterButton,
+        hideDensityButton,
+        hideExportButton,
+        hideQuickFilterBar,
+    ]);
+    const actionColumn = (0, react_1.useMemo)(() => ({
+        field: 'actions',
+        type: 'actions',
+        headerName: '',
+        width: 100,
+        getActions: (params) => {
+            const { id } = params;
+            if (isRowEditing === id) {
+                return [
+                    react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: "save", icon: react_1.default.createElement(Check_1.default, null), label: "Salvar", onClick: () => handleSaveRow(id), color: "success" }),
+                    react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: "cancel", icon: react_1.default.createElement(Close_1.default, null), label: "Cancelar", onClick: () => {
+                            handleCancelRow(id);
+                        }, color: "inherit" }),
+                ];
             }
-        }
-        if (modelParent && modelParentId && onEditRelatedModelSave) {
-            const response = yield onEditRelatedModelSave({
-                model: modelParent,
-                id: modelParentId,
-                relatedModel: model,
-                relatedModelId: editedRow.id,
-                newRow: editedRow,
-                schema,
-                onlyAddExisting,
-            });
-            if (response !== false && (onlyAddExisting || createNewItem || !onlyAddExisting)) {
-                updateOptionsAC();
-                const data = [...dataGrid.data];
-                const newRow = 'data' in response && 'schema' in response ? response.data : response;
-                for (const i in data) {
-                    if (data[i].id === editedRow.id) {
-                        data[i] = newRow;
-                        // This is for cases where users want to do custom operations after saving the row,
-                        // like for example make calculations among columns.
-                        if (onProcessRow) {
-                            onProcessRow(data[i]);
+            return [
+                react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: "edit", icon: react_1.default.createElement(Edit_1.default, null), label: "Editar", onClick: () => {
+                        const visibleColumns = apiRef.current.getAllColumns();
+                        const firstEditableCol = visibleColumns.find((col) => col.editable && col.field !== 'actions');
+                        const fieldToFocus = firstEditableCol === null || firstEditableCol === void 0 ? void 0 : firstEditableCol.field;
+                        apiRef.current.startRowEditMode({ id, fieldToFocus });
+                        handleStartEditing(id);
+                    }, color: "inherit" }),
+                react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: "delete", icon: react_1.default.createElement(Delete_1.default, null), label: "Apagar", onClick: () => {
+                        if ((0, utils_1.isTmpId)(id)) {
+                            const newData = dataGrid.data.filter(({ id: rowId }) => id !== rowId);
+                            setDataGrid({ data: newData });
+                            return;
                         }
-                        // Reflect the changes to the outside, for example for global calculations over all data
-                        if (onDataChange) {
-                            onDataChange(data);
-                        }
-                        setDataGrid({ data });
-                        break;
-                    }
-                }
-                setDataGridLoading(false);
-                return newRow;
-            }
-            setDataGridLoading(false);
-            return false;
-        }
-        const response = yield onEditModelDataGridSave({
-            model,
-            id: editedRow.id,
-            newRow: editedRow,
-            schema,
-        });
-        setDataGridLoading(false);
-        if (response !== false) {
-            updateOptionsAC();
-            const data = [...dataGrid.data];
-            const newRow = response;
-            for (const i in data) {
-                if (data[i].id === editedRow.id) {
-                    data[i] = newRow;
-                    // This is for cases where users want to do custom operations after saving the row,
-                    // like for example make calculations among columns.
-                    if (onProcessRow) {
-                        onProcessRow(data[i]);
-                    }
-                    // Reflect the changes to the outside, for example for global calculations over all data
-                    if (onDataChange) {
-                        onDataChange(data);
-                    }
-                    setDataGrid({ data });
-                    break;
-                }
-            }
-            return newRow;
-        }
-        return false;
-    });
-    const customPaddings = isAutoHeight
-        ? {
-            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': {
-                py: '8px',
-            },
-            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': {
-                py: '15px',
-            },
-            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': {
-                py: '22px',
-            },
-        }
-        : undefined;
+                        handleDeleteClick(id);
+                    }, color: "error" }),
+            ];
+        },
+    }), [apiRef, handleDeleteClick, isRowEditing, dataGrid.data]);
+    const InternalFooter = (0, react_1.useCallback)(() => (react_1.default.createElement(FooterToolbar_1.FooterToolbar, { isEditable: isEditable, handleAddItem: handleAddItem, isRowEditing: isRowEditing, handleSaveRow: handleSaveRow, handleCancelRow: handleCancelRow })), [isEditable, handleAddItem, isRowEditing, handleSaveRow, handleCancelRow]);
     const checkboxSelection = hasBulkSelect ? true : undefined;
     const disableRowSelectionOnClick = hasBulkSelect ? true : undefined;
-    return (react_1.default.createElement(Box_1.default, { className: `dataGrid_${name}`, sx: { height: '100%' } }, preparedColumns === null ? (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.loadingBox },
-        react_1.default.createElement(CircularProgress_1.default, null))) : (react_1.default.createElement(x_data_grid_1.DataGrid, { rows: dataGrid.data, columns: preparedColumns, autoHeight: tableAutoHeight, onStateChange: (state) => {
-            if (setVisibleRows) {
-                const newVisibleRows = Object.entries(state.filter.visibleRowsLookup)
-                    .filter((entry) => {
-                    return entry[1] === true;
-                })
-                    .map((entry) => {
-                    return entry[0];
-                });
-                const newVisibleRowsJSON = JSON.stringify(newVisibleRows);
-                if (newVisibleRowsJSON !== visibleRows.current) {
-                    setVisibleRows(newVisibleRows);
-                    visibleRows.current = newVisibleRowsJSON;
-                }
+    const sx = Object.assign(Object.assign({}, sxProp), (isAutoHeight || tableAutoHeight
+        ? {
+            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '8px' },
+            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
+            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
+        }
+        : {}));
+    return (react_1.default.createElement(Box_1.default, { className: `dataGrid_${name}`, sx: Object.assign({ height: '100%', width: '100%', maxWidth: '100%', display: 'grid' }, sxProp) }, preparedColumns === null ? (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.loadingBox },
+        react_1.default.createElement(CircularProgress_1.default, null))) : (react_1.default.createElement(x_data_grid_1.DataGrid, { apiRef: apiRef, rows: dataGrid.data, columns: isEditable ? [actionColumn, ...(preparedColumns || [])] : preparedColumns || [], getCellClassName: ({ id, cellMode, field }) => {
+            if (cellMode !== 'edit') {
+                return '';
             }
-        }, editMode: "row", loading: dataGridLoading || loading, hideFooterPagination: hideFooterPagination, getRowHeight: () => {
-            if (isAutoHeight) {
+            const rowError = validationErrors[id];
+            return rowError && rowError[field] ? 'cell--error' : '';
+        }, editMode: "row", loading: dataGridLoading || loading, hideFooterPagination: hideFooterPagination, getRowHeight: ({ id }) => {
+            if (isRowEditing === id || isAutoHeight || tableAutoHeight) {
                 return 'auto';
             }
             return null;
-        }, isCellEditable: (params) => {
-            var _a;
-            const isRowInEditMode = ((_a = rowModesModel === null || rowModesModel === void 0 ? void 0 : rowModesModel[params.row.id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit;
-            const isPermanentRow = !(0, utils_1.isTmpId)(params.row.id);
-            const isIndexField = params.field === indexField;
-            const indexColumn = preparedColumns.find((col) => col.field === indexField);
+        }, isCellEditable: ({ row, field }) => {
+            // const isRowEditing = apiRef.current.getRowMode(row.id) === 'edit';
+            const isPermanentRow = !(0, utils_1.isTmpId)(row.id);
+            const isIndexField = field === indexField;
+            const indexColumn = preparedColumns === null || preparedColumns === void 0 ? void 0 : preparedColumns.find((col) => col.field === indexField);
             const hasValueFormatter = (indexColumn === null || indexColumn === void 0 ? void 0 : indexColumn.valueFormatter) !== undefined;
-            const isIndexFieldEditable = !optionsAC.current || !(indexField in optionsAC.current) || hasValueFormatter;
-            return (isRowInEditMode &&
-                (isPermanentRow || ((0, utils_1.isTmpId)(params.row.id) && (isIndexField || isIndexFieldEditable))));
-        }, checkboxSelection: checkboxSelection, onSelectionModelChange: (newSelectionModel) => {
+            const isIndexFieldEditable = !(indexField in optionsAC) || hasValueFormatter;
+            return (
+            // isRowEditing &&
+            isPermanentRow || ((0, utils_1.isTmpId)(row.id) && (isIndexField || isIndexFieldEditable)));
+        }, checkboxSelection: checkboxSelection, onRowSelectionModelChange: (newSelectionModel) => {
             const selectedData = dataGrid.data.filter((item) => newSelectionModel.includes(item.id));
             setSelectionModel(selectedData);
-            setSelectionModelIds(newSelectionModel);
-        }, selectionModel: selectionModelIds, disableSelectionOnClick: disableRowSelectionOnClick, rowModesModel: rowModesModel, onRowEditStart: (params, event) => {
-            event.defaultMuiPrevented = true;
+            setSelectionModelIds([...newSelectionModel]);
+        }, rowSelectionModel: selectionModelIds, disableRowSelectionOnClick: disableRowSelectionOnClick, onRowEditStart: (params) => {
+            console.log({ onRowEditStart: params.reason, id: params.id, isRowEditing });
+            if (isRowEditing) {
+                handleSaveRow(isRowEditing);
+            }
+            handleStartEditing(params.id);
         }, onRowEditStop: (params, event) => {
-            event.defaultMuiPrevented = true;
+            console.log({ onRowEditStop: params.reason });
+            if (params.reason === 'rowFocusOut') {
+                const isInsideGrid = !('target' in event);
+                if (!isInsideGrid) {
+                    event.defaultMuiPrevented = true;
+                }
+                return;
+            }
+            const fieldSchema = params.field ? schema[params.field] : undefined;
+            if (params.reason === 'enterKeyDown' &&
+                ['date', 'datetime', 'nested object', 'field', 'choice', 'list'].includes((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) || '')) {
+                event.defaultMuiPrevented = true;
+                return;
+            }
+            // Escape key prevents saving:
+            if (params.reason === 'escapeKeyDown') {
+                handleCancelRow(params.id);
+            }
         }, processRowUpdate: processRowUpdate, onProcessRowUpdateError: (e) => {
             setDataGridLoading(false);
-            if (processingRow.current) {
-                setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [processingRow.current]: {
-                        mode: x_data_grid_1.GridRowModes.Edit,
-                    } }));
+            if (e.message === 'CANCEL_TMP_ROW') {
+                return;
+            }
+            // if (processingRow.current) {
+            //   apiRef.current.startRowEditMode({ id: processingRow.current });
+            // }
+            let msg = 'Ocorreu um erro desconhecido ao salvar.';
+            if (e.message === 'Validation Error') {
+                msg = 'Não foi possível salvar os dados. Confira os erros nos campos.';
+            }
+            else if (e.message) {
+                msg = e.message;
             }
-            const msg = `Erro em "${e.path}": ${e.errors}`;
             setSnackBar({
                 open: true,
                 severity: 'error',
                 msg,
             });
             console.log(e);
-        }, components: {
-            Toolbar: hideToolbarComponent ? () => react_1.default.createElement(react_1.default.Fragment, null) : CustomToolbar_1.CustomToolbar,
-            Footer: hideFooterComponent ? () => react_1.default.createElement(react_1.default.Fragment, null) : FooterToolbar_1.FooterToolbar,
-        }, componentsProps: {
+        }, slots: {
+            toolbar: hideToolbarComponent ? () => react_1.default.createElement(react_1.default.Fragment, null) : InternalToolbar,
+            footer: hideFooterComponent ? () => react_1.default.createElement(react_1.default.Fragment, null) : InternalFooter,
+        }, slotProps: {
             toolbar: {
-                preparedColumns,
-                setPreparedColumns,
                 showQuickFilter: true,
                 quickFilterProps: { debounceMs: 500 },
-                // getRowsToExport: () => {
-                //     return [];
-                // },
-                selectionModel,
-                onSelectActions,
-                bulkUpdateData,
-                bulkDeleteData,
-                bulkCreateData,
-                hideColumnsButton,
-                hideFilterButton,
-                hideDensityButton,
-                hideExportButton,
-                hideQuickFilterBar,
-            },
-            footer: {
-                isEditable,
-                handleAddItem: () => {
-                    handleAddItems();
-                },
             },
             filterPanel: {
                 sx: {
@@ -810,26 +294,39 @@ function DataGridDesktop({ schema, dataGrid, setDataGrid, rowCount = 0, columns,
                     },
                 },
             },
-        }, experimentalFeatures: { newEditingApi: isEditable }, sx: customPaddings, paginationMode: paginationModel ? 'server' : 'client', onPageChange: (newPage) => {
+        }, 
+        // sx={sx}
+        sx: Object.assign(Object.assign({}, sx), { width: '100%', minWidth: 0 }), paginationMode: paginationModel ? 'server' : 'client', paginationModel: paginationModel
+            ? { page: paginationModel.page, pageSize: paginationModel.pageSize }
+            : undefined, onPaginationModelChange: (newModel) => {
             if (setPaginationModel && paginationModel) {
-                setPaginationModel(Object.assign(Object.assign({}, paginationModel), { page: newPage }));
+                setPaginationModel(Object.assign(Object.assign({}, paginationModel), { page: newModel.page, pageSize: newModel.pageSize }));
             }
-        }, onPageSizeChange: (newPageSize) => {
+        }, initialState: {
+            columns: { columnVisibilityModel },
+            pagination: !paginationModel ? { paginationModel: { pageSize: 100 } } : undefined,
+        }, rowCount: paginationModel && typeof rowCount !== 'undefined' ? rowCount : undefined, pageSizeOptions: paginationModel ? [paginationModel.pageSize] : [5, 10, 25, 50, 100], filterMode: paginationModel ? 'server' : 'client', onFilterModelChange: (newFilter) => {
             if (setPaginationModel && paginationModel) {
-                setPaginationModel(Object.assign(Object.assign({}, paginationModel), { pageSize: newPageSize }));
+                setPaginationModel(Object.assign(Object.assign({}, paginationModel), { filter: newFilter }));
             }
-        }, rowCount: paginationModel && typeof rowCount !== 'undefined' ? rowCount : undefined, pageSize: paginationModel ? paginationModel.pageSize : 100, rowsPerPageOptions: paginationModel ? [paginationModel.pageSize] : [5, 10, 25, 50, 100], filterMode: paginationModel ? 'server' : 'client', onFilterModelChange: paginationModel
-            ? (newFilter) => {
-                if (setPaginationModel && paginationModel) {
-                    setPaginationModel(Object.assign(Object.assign({}, paginationModel), { filter: newFilter }));
-                }
+        }, sortingMode: paginationModel ? 'server' : 'client', onSortModelChange: (newSorting) => {
+            if (setPaginationModel && paginationModel) {
+                setPaginationModel(Object.assign(Object.assign({}, paginationModel), { sort: newSorting }));
             }
-            : undefined, sortingMode: paginationModel ? 'server' : 'client', onSortModelChange: paginationModel
-            ? (newSorting) => {
-                if (setPaginationModel && paginationModel) {
-                    setPaginationModel(Object.assign(Object.assign({}, paginationModel), { sort: newSorting }));
-                }
+        }, onStateChange: (state) => {
+            if (setVisibleRows) {
+                const visibleRows = (0, x_data_grid_1.gridFilteredSortedRowIdsSelector)(state, apiRef.current.instanceId);
+                setVisibleRows(visibleRows);
             }
-            : undefined }))));
+        } }))));
 }
-exports.default = react_1.default.memo(DataGridDesktop, utils_1.shouldMemoUpdate);
+// const shouldMemoUpdate = (prevProps: DataGridDesktopProps, nextProps: DataGridDesktopProps) => {
+//   return (
+//     prevProps.dataGrid === nextProps.dataGrid &&
+//     prevProps.loading === nextProps.loading &&
+//     prevProps.schema === nextProps.schema &&
+//     prevProps.columns === nextProps.columns
+//   );
+// };
+// export default React.memo(DataGridDesktop, shouldMemoUpdate);
+exports.default = DataGridDesktop;