drf-react-by-schema 0.15.2 → 0.15.3

package/dist/components/DataGridBySchemaEditable/ConfirmDialog.d.ts

@@ -4,5 +4,5 @@ type FConfirmDialogProps = {
     onClose: (p: any) => void;
     onConfirm: (p: any) => void;
 };
-export declare const ConfirmDialog: React.MemoExoticComponent<({ open, onClose, onConfirm }: FConfirmDialogProps) => JSX.Element>;
+export declare const ConfirmDialog: React.MemoExoticComponent<({ open, onClose, onConfirm }: FConfirmDialogProps) => React.JSX.Element>;
 export {};

package/dist/components/DataGridBySchemaEditable/CustomToolbar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { BulkDeleteData, BulkUpdateData, GridEnrichedBySchemaColDef, Id, Item, OnSelectActions } from '../../utils';
 type CustomToolbarProps = {
     preparedColumns: GridEnrichedBySchemaColDef[];
@@ -12,16 +12,7 @@ type CustomToolbarProps = {
 /**
  *
  *
- * @param {CustomToolbarProps} {
- *     preparedColumns,
- *     setPreparedColumns,
- *     onSelectActions,
- *     selectionModel,
- *     bulkUpdateData,
- *     bulkDeleteData,
- *     bulkCreateData,
- * }
  * @returns Custom Toolbar for the grid
  */
-export declare const CustomToolbar: ({ preparedColumns, setPreparedColumns, onSelectActions, selectionModel, bulkUpdateData, bulkDeleteData, bulkCreateData, }: CustomToolbarProps) => JSX.Element;
+export declare const CustomToolbar: ({ preparedColumns, setPreparedColumns, onSelectActions, selectionModel, bulkUpdateData, bulkDeleteData, bulkCreateData, }: CustomToolbarProps) => React.JSX.Element;
 export {};

package/dist/components/DataGridBySchemaEditable/CustomToolbar.js

@@ -38,15 +38,6 @@ const utils_1 = require("./utils");
 /**
  *
  *
- * @param {CustomToolbarProps} {
- *     preparedColumns,
- *     setPreparedColumns,
- *     onSelectActions,
- *     selectionModel,
- *     bulkUpdateData,
- *     bulkDeleteData,
- *     bulkCreateData,
- * }
  * @returns Custom Toolbar for the grid
  */
 const CustomToolbar = ({ preparedColumns, setPreparedColumns, onSelectActions, selectionModel, bulkUpdateData, bulkDeleteData, bulkCreateData, }) => {
@@ -90,9 +81,9 @@ const CustomToolbar = ({ preparedColumns, setPreparedColumns, onSelectActions, s
                         }
                         selectAction.action(selectionModel, bulkUpdateData);
                     } }, selectAction.title)))))),
-            react_1.default.createElement(x_data_grid_1.GridToolbarColumnsButton, { sx: { ml: '10px', fontSize: '13px' } }),
-            react_1.default.createElement(x_data_grid_1.GridToolbarFilterButton, { sx: { ml: '10px', fontSize: '13px' } }),
-            react_1.default.createElement(x_data_grid_1.GridToolbarDensitySelector, { sx: { ml: '10px', fontSize: '13px' } }),
+            react_1.default.createElement(x_data_grid_1.GridToolbarColumnsButton, { sx: { ml: '10px', fontSize: '13px' }, placeholder: '' }),
+            react_1.default.createElement(x_data_grid_1.GridToolbarFilterButton, { sx: { ml: '10px', fontSize: '13px' }, placeholder: '' }),
+            react_1.default.createElement(x_data_grid_1.GridToolbarDensitySelector, { sx: { ml: '10px', fontSize: '13px' }, placeholder: '' }),
             react_1.default.createElement(Button_1.default, { onClick: openResizeMenu, sx: { ml: '0px', fontSize: '13px' } },
                 react_1.default.createElement(Expand_1.default, { sx: { transform: 'rotate(90deg)', mr: '6px' } }),
                 "Ajustar"),

package/dist/components/DataGridBySchemaEditable/FooterToolbar.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 type FooterToolbarProps = {
     isEditable: boolean;
     handleAddItem: () => void;
 };
-export declare const FooterToolbar: ({ isEditable, handleAddItem }: FooterToolbarProps) => JSX.Element;
+export declare const FooterToolbar: ({ isEditable, handleAddItem }: FooterToolbarProps) => React.JSX.Element;
 export {};

package/dist/components/DataGridBySchemaEditable/GridDateInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CalendarPickerView } from '@mui/x-date-pickers/CalendarPicker';
 type GridDateInputProps = {
     field: string;
@@ -7,5 +7,5 @@ type GridDateInputProps = {
     column: object;
     dateViews?: CalendarPickerView[] | undefined;
 };
-export declare const GridDateInput: ({ id, value, field, dateViews, }: GridDateInputProps) => JSX.Element;
+export declare const GridDateInput: ({ id, value, field, dateViews, }: GridDateInputProps) => React.JSX.Element;
 export {};

package/dist/components/DataGridBySchemaEditable/GridDecimalInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 type GridDecimalInputProps = {
     field: string;
     id: number | string;
@@ -9,5 +9,5 @@ type GridDecimalInputProps = {
     suffix?: string;
     isCurrency?: boolean;
 };
-export declare const GridDecimalInput: ({ id, value, field, decimalPlaces, prefix, suffix, isCurrency, }: GridDecimalInputProps) => JSX.Element;
+export declare const GridDecimalInput: ({ id, value, field, decimalPlaces, prefix, suffix, isCurrency, }: GridDecimalInputProps) => React.JSX.Element;
 export {};

package/dist/components/DataGridBySchemaEditable/GridPatternInput.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 type GridPatternInputProps = {
     field: string;
     id: number | string;
-    value?: any;
+    value?: string | number | null;
     patternFormat?: string;
 };
-export declare const GridPatternInput: ({ id, value, field, patternFormat }: GridPatternInputProps) => JSX.Element;
+export declare const GridPatternInput: ({ id, value, field, patternFormat, }: GridPatternInputProps) => React.JSX.Element;
 export {};

package/dist/components/DataGridBySchemaEditable/GridPatternInput.js

@@ -17,13 +17,13 @@ const react_1 = __importDefault(require("react"));
 const x_data_grid_1 = require("@mui/x-data-grid");
 const react_number_format_1 = require("react-number-format");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
-const GridPatternInput = ({ id, value, field, patternFormat = 'cpf' }) => {
+const GridPatternInput = ({ id, value, field, patternFormat = 'cpf', }) => {
     const apiRef = (0, x_data_grid_1.useGridApiContext)();
     const handleChange = (newValue) => __awaiter(void 0, void 0, void 0, function* () {
         yield apiRef.current.setEditCellValue({ id, field, value: newValue });
         apiRef.current.stopCellEditMode({ id, field });
     });
-    return (react_1.default.createElement(react_number_format_1.PatternFormat, { key: field, id: field, onValueChange: (values, sourceInfo) => {
+    return (react_1.default.createElement(react_number_format_1.PatternFormat, { key: field, id: field, onValueChange: (values) => {
             handleChange(values.value);
         }, value: value, valueIsNumericString: true, format: patternFormat, mask: "_", customInput: TextField_1.default }));
 };

package/dist/components/DataGridBySchemaEditable/InputInterval.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const InputNumberInterval: (props: any) => JSX.Element;
-export declare const InputDateInterval: (props: any) => JSX.Element;
-export declare const InputFloatInterval: (props: any) => JSX.Element;
+import React from 'react';
+export declare const InputNumberInterval: (props: any) => React.JSX.Element;
+export declare const InputDateInterval: (props: any) => React.JSX.Element;
+export declare const InputFloatInterval: (props: any) => React.JSX.Element;

package/dist/components/DataGridBySchemaEditable/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { GridApi } from '@mui/x-data-grid';
+import { GridApi, GridFilterOperator } from '@mui/x-data-grid';
 import { GridEnrichedBySchemaColDef } from '../../utils';
 export type ResizeType = 'condense' | 'maxContent' | 'fitScreen';
 /**
@@ -12,4 +12,4 @@ export type ResizeType = 'condense' | 'maxContent' | 'fitScreen';
 export declare function resizeColumns(columns: GridEnrichedBySchemaColDef[], resizeType: ResizeType, apiRef: React.MutableRefObject<GridApi>): GridEnrichedBySchemaColDef[];
 export declare const quantityOnlyOperators: ({ type }: {
     type: string;
-}) => GridFilterOperator[];
+}) => GridFilterOperator<any, any, any>[];

package/dist/components/DataGridBySchemaEditable.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Item, SchemaType, Id, GridEnrichedBySchemaColDef, PaginationModel, ActionType, OnSelectActions } from '../utils';
+import { GridRowId, GridRenderCellParams } from '@mui/x-data-grid';
 import { SxProps } from '@mui/material';
+import { Item, SchemaType, Id, GridEnrichedBySchemaColDef, PaginationModel, ActionType, OnSelectActions, OptionsAC } from '../utils';
 import { OnEditModelType } from '../context/APIWrapperContext';
 interface DataGridBySchemaEditableProps {
     schema: SchemaType;
@@ -22,11 +23,11 @@ interface DataGridBySchemaEditableProps {
     loading?: boolean;
     modelParentId?: Id;
     modelParent?: string;
-    customColumnOperations?: (p: any) => GridEnrichedBySchemaColDef;
-    customLinkDestination?: (p: any) => string;
+    customColumnOperations?: (p: GridEnrichedBySchemaColDef) => GridEnrichedBySchemaColDef | Promise<GridEnrichedBySchemaColDef>;
+    customLinkDestination?: (p: GridRenderCellParams) => string;
     LinkComponent?: any;
-    onProcessRow?: (p: any) => void;
-    onDataChange?: (p: any) => void;
+    onProcessRow?: (p: Item) => void;
+    onDataChange?: (p: Item[]) => void;
     onEditModel?: (p: OnEditModelType) => void;
     isEditable?: boolean;
     hasBulkSelect?: boolean;
@@ -35,14 +36,14 @@ interface DataGridBySchemaEditableProps {
     isAutoHeight?: boolean;
     defaultValues?: Item;
     hideFooterPagination?: boolean;
-    setVisibleRows?: (p: any) => void;
+    setVisibleRows?: (p: GridRowId[]) => void;
     paginationModel?: PaginationModel;
     setPaginationModel?: (x: PaginationModel) => void;
     hideFooterComponent?: boolean;
     hideToolbarComponent?: boolean;
     tableAutoHeight?: boolean;
     actions?: Partial<ActionType>[];
-    optionsAC?: Record<string, Item[]>;
+    optionsAC?: OptionsAC;
 }
 declare const DataGridBySchemaEditable: React.ForwardRefExoticComponent<DataGridBySchemaEditableProps & React.RefAttributes<unknown>>;
 export default DataGridBySchemaEditable;

package/dist/components/DataGridBySchemaEditable.js

@@ -31,17 +31,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -59,6 +48,7 @@ const Check_1 = __importDefault(require("@mui/icons-material/Check"));
 const Undo_1 = __importDefault(require("@mui/icons-material/Undo"));
 const Snackbar_1 = __importDefault(require("@mui/material/Snackbar"));
 const Alert_1 = __importDefault(require("@mui/material/Alert"));
+const string_mask_1 = __importDefault(require("string-mask"));
 const styles_1 = require("../styles");
 const api_1 = require("../api");
 const utils_1 = require("../utils");
@@ -73,9 +63,7 @@ const BooleanInputCell_1 = require("./DataGridBySchemaEditable/BooleanInputCell"
 const FooterToolbar_1 = require("./DataGridBySchemaEditable/FooterToolbar");
 const ConfirmDialog_1 = require("./DataGridBySchemaEditable/ConfirmDialog");
 const APIWrapperContext_1 = require("../context/APIWrapperContext");
-const stringMask = require('string-mask');
-const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
-    var { schema, data, rowCount = 0, columns, model, fieldKey, labelKey = 'nome', index, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, sx = { mr: 2 }, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], optionsAC: optionsACExternal } = _a, other = __rest(_a, ["schema", "data", "rowCount", "columns", "model", "fieldKey", "labelKey", "index", "name", "indexField", "addExistingModel", "indexFieldMinWidth", "indexFieldBasePath", "indexFieldViewBasePath", "stateToLink", "minWidth", "loading", "modelParent", "modelParentId", "customColumnOperations", "customLinkDestination", "LinkComponent", "onProcessRow", "onDataChange", "onEditModel", "isEditable", "hasBulkSelect", "onSelectActions", "sx", "isAutoHeight", "defaultValues", "hideFooterPagination", "setVisibleRows", "paginationModel", "setPaginationModel", "hideFooterComponent", "hideToolbarComponent", "tableAutoHeight", "actions", "optionsAC"]);
+const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, 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, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], optionsAC: optionsACExternal, }, ref) => {
     const { serverEndPoint } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     const apiContext = (0, APIWrapperContext_1.useAPIWrapper)();
     const initialSnackBar = {
@@ -89,7 +77,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
     });
     const [preparedColumns, setPreparedColumns] = (0, react_1.useState)(null);
     const [dataGridLoading, setDataGridLoading] = (0, react_1.useState)(false);
-    const [rowModesModel, setRowModesModel] = (0, react_1.useState)({});
+    const [rowModesModel, setRowModesModel] = (0, react_1.useState)();
     const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
     const [selectionModel, setSelectionModel] = (0, react_1.useState)([]);
     const [selectionModelIds, setSelectionModelIds] = (0, react_1.useState)([]);
@@ -141,30 +129,56 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             }
         }
     });
-    const initColumns = () => {
+    const initColumns = () => __awaiter(void 0, void 0, void 0, function* () {
         let cols = [];
         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 } }));
+                }
+            };
             cols.push({
                 field: 'actions',
                 headerName: '',
                 type: 'actions',
                 getActions: ({ id }) => {
-                    var _a;
-                    const isInEditMode = ((_a = rowModesModel[id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit;
+                    if (!id) {
+                        return [];
+                    }
+                    const isInEditMode = rowModesModel &&
+                        rowModesModel[id] &&
+                        rowModesModel[id].mode === x_data_grid_1.GridRowModes.Edit;
                     if (isInEditMode) {
                         return [
-                            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", onResize: () => null, onResizeCapture: () => null, showInMenu: false }),
-                            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", onResize: () => null, onResizeCapture: () => null, showInMenu: false }),
+                            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", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }),
+                            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", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }),
                         ];
                     }
                     const actionItems = [];
                     actions.map((action) => {
                         switch (action) {
                             case 'editInline':
-                                actionItems.push(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: "Edit inline", onClick: handleEditInlineClick(id), color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false }));
+                                actionItems.push(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: "Edit inline", onClick: handleEditInlineClick(id), color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }));
                                 break;
                             case 'remove':
-                                actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Delete", onClick: handleDeleteClick(id), color: "error", onResize: () => null, onResizeCapture: () => null, showInMenu: false }));
+                                actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Delete", onClick: handleDeleteClick(id), color: "error", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }));
                                 break;
                             case 'edit':
                                 if (!LinkComponent) {
@@ -172,7 +186,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                                     break;
                                 }
                                 actionItems.push(react_1.default.createElement(LinkComponent, { key: `edit_${id}`, to: `${indexFieldBasePath}${id}`, state: stateToLink },
-                                    react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Edit_1.default, null), label: "Edit", color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false })));
+                                    react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Edit_1.default, null), label: "Edit", color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' })));
                                 break;
                             case 'view':
                                 if (!LinkComponent) {
@@ -184,7 +198,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                                     break;
                                 }
                                 actionItems.push(react_1.default.createElement(LinkComponent, { key: `view_${id}`, to: `${indexFieldViewBasePath}${id}`, state: stateToLink },
-                                    react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Visibility_1.default, null), label: "View", color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false })));
+                                    react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Visibility_1.default, null), label: "View", color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' })));
                                 break;
                         }
                     });
@@ -193,7 +207,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             });
         }
         cols = [...cols, ...columns];
-        cols = cols.map((col) => {
+        const colsPromises = cols.map((col) => __awaiter(void 0, void 0, void 0, function* () {
             if (!schema[col.field]) {
                 return col;
             }
@@ -373,7 +387,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     if (!params.value || typeof params.value !== 'string') {
                         return params.value;
                     }
-                    const formattedValue = new stringMask(column.patternFormat, {}).apply(params.value);
+                    const formattedValue = new string_mask_1.default(column.patternFormat, {}).apply(params.value);
                     return formattedValue;
                 };
                 if (isEditable && !col.disabled) {
@@ -382,20 +396,23 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             }
             // Custom column operations:
             if (customColumnOperations) {
-                column = customColumnOperations(column);
+                column = yield customColumnOperations(column);
             }
             // Finally!
             return column;
-        });
+        }));
+        cols = yield Promise.all(colsPromises);
         setPreparedColumns(cols);
-    };
+    });
     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.current), { id }));
         }
-        const newData = [...newRows, ...dataGrid.data];
+        const newData = tableAutoHeight
+            ? [...dataGrid.data, ...newRows]
+            : [...newRows, ...dataGrid.data];
         setDataGrid({
             data: newData,
         });
@@ -406,14 +423,16 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             });
             return newModel;
         });
-        // Ugly hack to scroll to top, since scroll to cell is only available in Pro
-        const el = document.querySelector(`.dataGrid_${name} .MuiDataGrid-virtualScroller`);
-        // console.log(el, name);
-        if (el) {
-            el.scrollTop = 0;
-            setTimeout(() => {
+        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`);
+            // console.log(el, name);
+            if (el) {
                 el.scrollTop = 0;
-            }, 10);
+                setTimeout(() => {
+                    el.scrollTop = 0;
+                }, 10);
+            }
         }
     };
     const bulkUpdateData = (newData) => __awaiter(void 0, void 0, void 0, function* () {
@@ -443,7 +462,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
         return results.map((result, index) => {
             return {
                 id: ids[index],
-                success: typeof result !== 'object' && !isNaN(parseInt(result)),
+                success: 'isAxiosError' in result,
             };
         });
     });
@@ -468,7 +487,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
         return results.map((result, index) => {
             return {
                 id: ids[index],
-                success: result,
+                success: result === true,
             };
         });
     });
@@ -485,18 +504,6 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
     const handleDialogClose = () => {
         setDialogOpen(false);
     };
-    const handleRowEditStart = (params, event) => {
-        event.defaultMuiPrevented = true;
-    };
-    const handleRowEditStop = (params, event) => {
-        event.defaultMuiPrevented = true;
-    };
-    const handleEditInlineClick = (id) => () => {
-        setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.Edit } }));
-    };
-    const handleSaveClick = (id) => () => {
-        setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.View } }));
-    };
     const handleDeleteClick = (id) => () => {
         idToRemove.current = id;
         setDialogOpen(true);
@@ -523,13 +530,6 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
         idToRemove.current = null;
         setDialogOpen(false);
     };
-    const handleCancelClick = (id) => () => {
-        setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.View, ignoreModifications: true } }));
-        const editedRow = dataGrid.data.find((row) => row.id === id);
-        if (editedRow && editedRow.isNew) {
-            setDataGrid(Object.assign(Object.assign({}, dataGrid), { data: dataGrid.data.filter((row) => row.id !== id) }));
-        }
-    };
     (0, react_1.useEffect)(() => {
         if (!columns) {
             setDataGrid({ data: [] });
@@ -571,42 +571,42 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
         updateOptionsAC().then(() => {
             initColumns();
         });
-    }, [rowModesModel, columns]);
-    const processRowUpdate = (newRow) => __awaiter(void 0, void 0, void 0, function* () {
+    }, [rowModesModel]);
+    const processRowUpdate = (editedRow) => __awaiter(void 0, void 0, void 0, function* () {
         if (!preparedColumns || !yupValidationSchema.current) {
             return false;
         }
         setDataGridLoading(true);
         const indexCol = preparedColumns.find((col) => col.field === indexField);
-        processingRow.current = newRow.id;
-        yield yupValidationSchema.current.validate(newRow);
+        processingRow.current = editedRow.id;
+        yield yupValidationSchema.current.validate(editedRow);
         const onlyAddExisting = indexField &&
-            (0, utils_1.isTmpId)(newRow.id) &&
-            newRow[indexField] &&
-            !(0, utils_1.isTmpId)(newRow[indexField].id) &&
+            (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)(newRow.id) &&
-            newRow[indexField] &&
-            (0, utils_1.isTmpId)(newRow[indexField].id);
+            (0, utils_1.isTmpId)(editedRow.id) &&
+            editedRow[indexField] &&
+            (0, utils_1.isTmpId)(editedRow[indexField].id);
         if (onlyAddExisting) {
             const row = {};
-            row.id_to_add = newRow[indexField].id;
-            for (const [key, value] of Object.entries(newRow[indexField])) {
+            row.id_to_add = editedRow[indexField].id;
+            for (const [key, value] of Object.entries(editedRow[indexField])) {
                 if (key === 'id') {
-                    row[key] = newRow.id;
+                    row[key] = editedRow.id;
                     continue;
                 }
                 row[key] = value;
             }
-            newRow = Object.assign({}, row);
+            editedRow = Object.assign({}, row);
         }
-        if (createNewItem && newRow[indexField]) {
-            if (newRow[indexField].inputValue) {
-                newRow[indexField] = newRow[indexField].inputValue;
+        if (createNewItem && editedRow[indexField]) {
+            if (editedRow[indexField].inputValue) {
+                editedRow[indexField] = editedRow[indexField].inputValue;
             }
             if (addExistingModel) {
-                newRow[indexField] = newRow[indexField].label;
+                editedRow[indexField] = editedRow[indexField].label;
             }
         }
         if (modelParent && modelParentId && apiContext) {
@@ -614,23 +614,20 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                 model: modelParent,
                 id: modelParentId,
                 relatedModel: model,
-                relatedModelId: newRow.id,
-                newRow,
+                relatedModelId: editedRow.id,
+                newRow: editedRow,
                 schema,
                 onlyAddExisting,
             });
-            const responseAsData = response;
-            if ((onlyAddExisting && typeof response != 'boolean') ||
-                (parseInt(response) && (createNewItem || !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 === newRow.id) {
-                        data[i] = onlyAddExisting ? responseAsData.data : newRow;
-                        if ((0, utils_1.isTmpId)(newRow.id)) {
-                            const newId = parseInt(response);
-                            data[i].id = newId || responseAsData.data.id;
-                        }
+                    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) {
@@ -652,13 +649,32 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
         }
         const response = yield apiContext.onEditModelDataGridSave({
             model,
-            id: newRow.id,
-            newRow,
+            id: editedRow.id,
+            newRow: editedRow,
             schema,
         });
+        console.log(response);
         setDataGridLoading(false);
-        if (response) {
-            newRow.id = response;
+        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;
@@ -700,21 +716,24 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     return 'auto';
                 }
                 return null;
-            }, isCellEditable: (params) => {
-                var _a;
-                return (((_a = rowModesModel[params.row.id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit &&
-                    (!(0, utils_1.isTmpId)(params.row.id) ||
-                        ((0, utils_1.isTmpId)(params.row.id) &&
-                            (params.field === indexField ||
-                                !optionsAC.current ||
-                                !Object.prototype.hasOwnProperty.call(optionsAC.current, indexField) ||
-                                (preparedColumns.find((col) => col.field === indexField) &&
-                                    Object.prototype.hasOwnProperty.call(preparedColumns.find((col) => col.field === indexField), 'valueFormatter'))))));
-            }, checkboxSelection: checkboxSelection, onSelectionModelChange: (newSelectionModel) => {
+            }, isCellEditable: (params) => (rowModesModel &&
+                rowModesModel[params.row.id] &&
+                rowModesModel[params.row.id].mode === x_data_grid_1.GridRowModes.Edit &&
+                (!(0, utils_1.isTmpId)(params.row.id) ||
+                    ((0, utils_1.isTmpId)(params.row.id) &&
+                        (params.field === indexField ||
+                            !optionsAC.current ||
+                            !Object.prototype.hasOwnProperty.call(optionsAC.current, indexField) ||
+                            (preparedColumns.find((col) => col.field === indexField) &&
+                                Object.prototype.hasOwnProperty.call(preparedColumns.find((col) => col.field === indexField), 'valueFormatter')))))), checkboxSelection: checkboxSelection, onSelectionModelChange: (newSelectionModel) => {
                 const selectedData = dataGrid.data.filter((item) => newSelectionModel.includes(item.id));
                 setSelectionModel(selectedData);
                 setSelectionModelIds(newSelectionModel);
-            }, selectionModel: selectionModelIds, disableRowSelectionOnClick: disableRowSelectionOnClick, rowModesModel: rowModesModel, onRowEditStart: handleRowEditStart, onRowEditStop: handleRowEditStop, processRowUpdate: processRowUpdate, onProcessRowUpdateError: (e) => {
+            }, selectionModel: selectionModelIds, disableSelectionOnClick: disableRowSelectionOnClick, rowModesModel: rowModesModel, onRowEditStart: (params, event) => {
+                event.defaultMuiPrevented = true;
+            }, onRowEditStop: (params, event) => {
+                event.defaultMuiPrevented = true;
+            }, processRowUpdate: processRowUpdate, onProcessRowUpdateError: (e) => {
                 setDataGridLoading(false);
                 if (processingRow.current) {
                     setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [processingRow.current]: {
@@ -737,10 +756,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     setPreparedColumns,
                     showQuickFilter: true,
                     quickFilterProps: { debounceMs: 500 },
-                    getRowsToExport: (e) => {
-                        console.log(e);
-                        return [];
-                    },
+                    // getRowsToExport: () => {
+                    //     return [];
+                    // },
                     selectionModel,
                     onSelectActions,
                     bulkUpdateData,
@@ -749,7 +767,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                 },
                 footer: {
                     isEditable,
-                    handleAddItem: handleAddItems,
+                    handleAddItem: () => {
+                        handleAddItems();
+                    },
                 },
                 filterPanel: {
                     sx: {