drf-react-by-schema 0.22.3 → 0.23.0

package/dist/components/DataGridBySchemaEditable/DataGridMobile.js

@@ -75,7 +75,7 @@ const DataGridMobile = (0, react_1.forwardRef)(({ name, columns, schema, data, c
                     newItem[field] = {
                         title: column.headerName || '',
                         valueStr: column.valueFormatter
-                            ? column.valueFormatter({ value: item[field], field, api: null })
+                            ? column.valueFormatter(item[field], item, column, undefined)
                             : item[field],
                         value: item[field],
                     };

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

@@ -1,28 +1,11 @@
 import { JSX } from 'react';
+import { GridRenderEditCellParams } from '@mui/x-data-grid';
 import { SxProps, Theme } from '@mui/material/styles';
-import { GenericValue, GridEnrichedBySchemaColDef } from '../../@types';
-interface FileInputCellProps {
-    field: string;
-    id: number | string;
-    value?: GenericValue;
-    column: GridEnrichedBySchemaColDef;
+export declare function FileInputCell(props: GridRenderEditCellParams & {
     accept: string;
     fileType?: string;
     required?: boolean;
     sx?: SxProps<Theme>;
-}
-/**
- *
- *
- * @param {FileInputCellProps} {
- *     field,
- *     id,
- *     value,
- *     column,
- *     sx = {}
- * }
- * @returns {*}  {JSX.Element}
- */
-export declare function FileInputCell({ field, id, value, column, accept, fileType, required, sx, }: FileInputCellProps): JSX.Element;
-export {};
+    helperText?: string;
+}): JSX.Element;
 //# sourceMappingURL=FileInputCell.d.ts.map

package/dist/components/DataGridBySchemaEditable/FileInputCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInputCell.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/FileInputCell.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAU,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAU9D,OAAO,EAAE,YAAY,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAgBxE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,0BAA0B,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,EAAE,EACF,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,EAAO,GACR,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAqGlC"}
+{"version":3,"file":"FileInputCell.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/FileInputCell.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAwC,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,wBAAwB,EAAqB,MAAM,kBAAkB,CAAC;AAE/E,OAAO,EAAU,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA2B9D,wBAAgB,aAAa,CAC3B,KAAK,EAAE,wBAAwB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACA,GAAG,CAAC,OAAO,CAkIb"}

package/dist/components/DataGridBySchemaEditable/FileInputCell.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        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) {
@@ -8,12 +41,23 @@ 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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileInputCell = FileInputCell;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const x_data_grid_1 = require("@mui/x-data-grid");
 const styles_1 = require("@mui/material/styles");
 const Box_1 = __importDefault(require("@mui/material/Box"));
@@ -21,6 +65,7 @@ const Button_1 = __importDefault(require("@mui/material/Button"));
 const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
 const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
 const CloudUpload_1 = __importDefault(require("@mui/icons-material/CloudUpload"));
 const DRFReactBySchemaContext_1 = require("../../context/DRFReactBySchemaContext");
 const utils_1 = require("../../utils");
@@ -35,27 +80,24 @@ const VisuallyHiddenInput = (0, styles_1.styled)('input')({
     whiteSpace: 'nowrap',
     width: 1,
 });
-/**
- *
- *
- * @param {FileInputCellProps} {
- *     field,
- *     id,
- *     value,
- *     column,
- *     sx = {}
- * }
- * @returns {*}  {JSX.Element}
- */
-function FileInputCell({ field, id, value, column, accept, fileType, required, sx = {}, }) {
+function FileInputCell(props) {
+    const { field, id, value, accept, fileType, required, sx = {}, error, helperText, hasFocus } = props, other = __rest(props, ["field", "id", "value", "accept", "fileType", "required", "sx", "error", "helperText", "hasFocus"]);
+    const colDef = props.colDef;
     const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const inputCallbackRef = (0, react_1.useCallback)((node) => {
+        if (node !== null && hasFocus) {
+            requestAnimationFrame(() => {
+                node.focus();
+            });
+        }
+    }, [hasFocus]);
     const { serverEndPoint } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     const handleChange = (newValue) => __awaiter(this, void 0, void 0, function* () {
         yield apiRef.current.setEditCellValue({ id, field, value: newValue });
-        apiRef.current.stopCellEditMode({ id, field });
+        // apiRef.current.stopCellEditMode({ id, field });
     });
     const fileTypeStr = fileType === 'image upload' ? 'imagem' : 'documento';
-    return (react_1.default.createElement(FormControl_1.default, { component: "fieldset", sx: { width: '100%' } },
+    return (react_1.default.createElement(FormControl_1.default, { component: "fieldset", sx: { width: '100%' }, error: error },
         react_1.default.createElement(FormControlLabel_1.default, { control: react_1.default.createElement(Box_1.default, { sx: Object.assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }, sx) },
                 !(value === null || value === void 0 ? void 0 : value.name) ? null : ((value === null || value === void 0 ? void 0 : value.url) || (value === null || value === void 0 ? void 0 : value.src)) && fileType === 'image upload' ? (react_1.default.createElement("img", { src: value.url ? `${serverEndPoint === null || serverEndPoint === void 0 ? void 0 : serverEndPoint.url}${value.url}` : value.src, alt: value.name, title: value.name, style: {
                         width: '100%',
@@ -66,11 +108,9 @@ function FileInputCell({ field, id, value, column, accept, fileType, required, s
                     " (",
                     (0, utils_1.formatFileSize)(value.size),
                     ")")),
-                react_1.default.createElement(Button_1.default, { component: "label", variant: "outlined", startIcon: react_1.default.createElement(CloudUpload_1.default, null), disabled: column.disabled === true, fullWidth: true, sx: { mt: 1 }, 
-                    // color={error ? 'error' : 'primary'}
-                    color: "primary" },
+                react_1.default.createElement(Button_1.default, Object.assign({ component: "label", variant: "outlined", startIcon: react_1.default.createElement(CloudUpload_1.default, null), disabled: colDef.disabled === true, fullWidth: true, sx: { mt: 1 }, color: error ? 'error' : 'primary', autoFocus: hasFocus }, other),
                     value ? `Trocar ${fileTypeStr}` : `Enviar ${fileTypeStr}`,
-                    react_1.default.createElement(VisuallyHiddenInput, { type: "file", onChange: (e) => {
+                    react_1.default.createElement(VisuallyHiddenInput, { type: "file", ref: inputCallbackRef, onChange: (e) => {
                             var _a;
                             const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                             if (file) {
@@ -110,5 +150,6 @@ function FileInputCell({ field, id, value, column, accept, fileType, required, s
                 width: '100%',
                 alignItems: 'flex-start',
                 marginLeft: 0,
-            } })));
+            } }),
+        helperText && react_1.default.createElement(FormHelperText_1.default, null, helperText)));
 }

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

@@ -1,8 +1,12 @@
 import React from 'react';
+import { Id } from '../../@types';
 type FooterToolbarProps = {
     isEditable: boolean;
     handleAddItem: () => void;
+    isRowEditing?: Id;
+    handleSaveRow: (p: Id) => void;
+    handleCancelRow: (p: Id) => void;
 };
-export declare const FooterToolbar: ({ isEditable, handleAddItem }: FooterToolbarProps) => React.JSX.Element;
+export declare const FooterToolbar: ({ isEditable, handleAddItem, isRowEditing, handleSaveRow, handleCancelRow, }: FooterToolbarProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=FooterToolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FooterToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/FooterToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,sBAW9E,CAAC"}
+{"version":3,"file":"FooterToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/FooterToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAGlC,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC;IAC/B,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,8EAM3B,kBAAkB,sBA0DpB,CAAC"}

package/dist/components/DataGridBySchemaEditable/FooterToolbar.js

@@ -7,10 +7,30 @@ exports.FooterToolbar = void 0;
 const react_1 = __importDefault(require("react"));
 const x_data_grid_1 = require("@mui/x-data-grid");
 const Button_1 = __importDefault(require("@mui/material/Button"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
-const FooterToolbar = ({ isEditable, handleAddItem }) => {
-    return (react_1.default.createElement(x_data_grid_1.GridFooterContainer, null,
-        isEditable && (react_1.default.createElement(Button_1.default, { color: "primary", startIcon: react_1.default.createElement(Add_1.default, null), onClick: handleAddItem, sx: { ml: 2 } }, "Adicionar")),
-        react_1.default.createElement(x_data_grid_1.GridFooter, { sx: isEditable ? { border: 'none' } : { width: '100%' } })));
+const Check_1 = __importDefault(require("@mui/icons-material/Check"));
+const Cancel_1 = __importDefault(require("@mui/icons-material/Cancel"));
+const utils_1 = require("../../utils");
+const FooterToolbar = ({ isEditable, handleAddItem, isRowEditing, handleSaveRow, handleCancelRow, }) => {
+    const handleCancelThisRow = () => {
+        if (isRowEditing) {
+            handleCancelRow(isRowEditing);
+        }
+    };
+    const handleSaveThisRow = () => {
+        if (isRowEditing) {
+            handleSaveRow(isRowEditing);
+        }
+    };
+    return (react_1.default.createElement(x_data_grid_1.GridFooterContainer, { role: "rowgroup" },
+        react_1.default.createElement(Box_1.default, { role: "row", sx: { width: '100%' } },
+            react_1.default.createElement(Box_1.default, { role: "gridcell", sx: { width: '100%' } },
+                react_1.default.createElement(Box_1.default, { role: "region", "aria-label": "Rodap\u00E9 da tabela", sx: { display: 'flex', justifyContent: 'space-between', width: '100%' } },
+                    isEditable && (react_1.default.createElement(Box_1.default, { role: "region", "aria-label": "Bot\u00F5es para criar e editar linhas" },
+                        react_1.default.createElement(Button_1.default, { color: "primary", disabled: !!isRowEditing && (0, utils_1.isTmpId)(isRowEditing), startIcon: react_1.default.createElement(Add_1.default, null), onClick: handleAddItem, "aria-label": "Adicionar nova linha", sx: { ml: 2 } }, "Adicionar nova linha"),
+                        react_1.default.createElement(Button_1.default, { color: "secondary", variant: "text", disabled: !isRowEditing, startIcon: react_1.default.createElement(Check_1.default, null), onClick: () => handleSaveThisRow(), "aria-label": "Salvar linha", sx: { ml: 2 } }, "Salvar linha"),
+                        react_1.default.createElement(Button_1.default, { color: "secondary", variant: "text", disabled: !isRowEditing, startIcon: react_1.default.createElement(Cancel_1.default, null), onClick: handleCancelThisRow, "aria-label": "Cancelar edi\u00E7\u00E3o da linha", sx: { ml: 2 } }, "Cancelar edi\u00E7\u00E3o da linha"))),
+                    react_1.default.createElement(x_data_grid_1.GridFooter, { sx: isEditable ? { border: 'none' } : { width: '100%' } }))))));
 };
 exports.FooterToolbar = FooterToolbar;

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

@@ -1,13 +1,8 @@
 import React from 'react';
+import { GridRenderEditCellParams } from '@mui/x-data-grid';
 import { DateView } from '@mui/x-date-pickers';
-import { GenericValue } from '../../@types';
-type GridDateInputProps = {
-    field: string;
-    id: number | string;
-    value?: GenericValue;
-    column: object;
+export declare const GridDateInput: (props: GridRenderEditCellParams & {
     dateViews?: DateView[];
-};
-export declare const GridDateInput: ({ id, value, field, dateViews }: GridDateInputProps) => React.JSX.Element;
-export {};
+    helperText?: string;
+}) => React.JSX.Element;
 //# sourceMappingURL=GridDateInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridDateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/GridDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAa5C,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB,CAAC;AACF,eAAO,MAAM,aAAa,GAAI,iCAAiC,kBAAkB,sBAyBhF,CAAC"}
+{"version":3,"file":"GridDateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/GridDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,wBAAwB,EAAqB,MAAM,kBAAkB,CAAC;AAI/E,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAiB/C,eAAO,MAAM,aAAa,GACxB,OAAO,wBAAwB,GAAG;IAChC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,sBAiIF,CAAC"}

package/dist/components/DataGridBySchemaEditable/GridDateInput.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        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) {
@@ -13,13 +46,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridDateInput = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const x_data_grid_1 = require("@mui/x-data-grid");
 const DesktopDatePicker_1 = require("@mui/x-date-pickers/DesktopDatePicker");
 const LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
 const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
 const dayjs_1 = __importDefault(require("dayjs"));
 const utils_1 = require("../../utils");
+const grid_1 = require("../../styles/grid");
 function buildOpenTo(dateViews) {
     if (!dateViews || dateViews.includes('day')) {
         return 'day';
@@ -29,18 +63,104 @@ function buildOpenTo(dateViews) {
     }
     return 'year';
 }
-const GridDateInput = ({ id, value, field, dateViews }) => {
+const GridDateInput = (props) => {
+    const { id, value, field, dateViews, error, helperText, hasFocus, colDef } = props;
     const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const [openPicker, setOpenPicker] = (0, react_1.useState)(false);
+    const isShiftPressed = (0, react_1.useRef)(false);
+    // const inputRef = useRef<HTMLInputElement>(null);
+    // const buttonRef = useRef<HTMLButtonElement>(null);
+    const handleOpenPicker = () => {
+        setOpenPicker(true);
+    };
+    const handleCloseCalendar = () => {
+        setOpenPicker(false);
+    };
+    // useLayoutEffect(() => {
+    //   if (hasFocus) {
+    //     if (buttonRef.current) {
+    //       buttonRef.current.focus();
+    //     } else {
+    //       inputRef.current?.focus();
+    //     }
+    //   }
+    // }, [hasFocus, field, apiRef]);
+    const inputCallbackRef = (0, react_1.useCallback)((node) => {
+        if (node && hasFocus) {
+            // Scenario: Forward Tab OR API setCellFocus
+            if (!isShiftPressed.current) {
+                requestAnimationFrame(() => {
+                    node.focus();
+                    node.select();
+                });
+            }
+        }
+    }, [hasFocus]);
+    const buttonCallbackRef = (0, react_1.useCallback)((node) => {
+        if (node && hasFocus) {
+            // Scenario: Backward Tab (Shift + Tab)
+            if (isShiftPressed.current) {
+                requestAnimationFrame(() => {
+                    node.focus();
+                });
+            }
+        }
+    }, [hasFocus]);
     const inputFormat = (0, utils_1.buildDateFormatBySchema)(dateViews);
     const handleChange = (newValue) => __awaiter(void 0, void 0, void 0, function* () {
         yield apiRef.current.setEditCellValue({ id, field, value: newValue });
-        apiRef.current.stopCellEditMode({ id, field });
+        // apiRef.current.stopCellEditMode({ id, field });
     });
     const openTo = buildOpenTo(dateViews);
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Shift')
+                isShiftPressed.current = true;
+        };
+        const handleKeyUp = (e) => {
+            if (e.key === 'Shift')
+                isShiftPressed.current = false;
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
     return (react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterDayjs_1.AdapterDayjs, adapterLocale: "pt-br" },
-        react_1.default.createElement(DesktopDatePicker_1.DesktopDatePicker, { key: field, value: (0, dayjs_1.default)(value), onChange: handleChange, views: dateViews, openTo: openTo, format: inputFormat, slotProps: {
+        react_1.default.createElement(DesktopDatePicker_1.DesktopDatePicker, { key: field, open: openPicker, onOpen: handleOpenPicker, onClose: handleCloseCalendar, value: (0, dayjs_1.default)(value), onChange: handleChange, views: dateViews, openTo: openTo, format: inputFormat, slotProps: {
                 textField: {
-                    margin: 'normal',
+                    // margin: 'normal',
+                    inputRef: inputCallbackRef,
+                    sx: grid_1.seamlessTextFieldStyle,
+                    error,
+                    helperText,
+                    inputProps: {
+                        'aria-label': `Editar ${colDef.headerName || field}. Pressione Entre para escolher do calendário ou digite a data.`,
+                    },
+                    onKeyDown: (event) => {
+                        if (event.key === 'Tab' && !event.shiftKey) {
+                            // Force to go to the calendar icon menu
+                            event.stopPropagation();
+                        }
+                        if (event.key === 'Enter') {
+                            handleOpenPicker();
+                        }
+                    },
+                    // ...other,
+                },
+                openPickerButton: {
+                    ref: buttonCallbackRef,
+                    onKeyDown: (event) => {
+                        if (event.key === 'Tab' && event.shiftKey) {
+                            // Force to go back to Input
+                            event.stopPropagation();
+                        }
+                        if (event.key === 'Enter') {
+                            event.stopPropagation();
+                        }
+                    },
                 },
             } })));
 };

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

@@ -1,14 +1,10 @@
 import React from 'react';
-type GridDecimalInputProps = {
-    field: string;
-    id: number | string;
-    value?: string;
-    column: object;
+import { GridRenderEditCellParams } from '@mui/x-data-grid';
+export declare const GridDecimalInput: (props: GridRenderEditCellParams & {
     decimalPlaces?: number;
     prefix?: string;
     suffix?: string;
     isCurrency?: boolean;
-};
-export declare const GridDecimalInput: ({ id, value, field, decimalPlaces, prefix, suffix, isCurrency, }: GridDecimalInputProps) => React.JSX.Element;
-export {};
+    helperText?: string;
+}) => React.JSX.Element;
 //# sourceMappingURL=GridDecimalInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridDecimalInput.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/GridDecimalInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,eAAO,MAAM,gBAAgB,GAAI,kEAQ9B,qBAAqB,sBA2BvB,CAAC"}
+{"version":3,"file":"GridDecimalInput.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/GridDecimalInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAqB,MAAM,kBAAkB,CAAC;AAW/E,eAAO,MAAM,gBAAgB,GAC3B,OAAO,wBAAwB,GAAG;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,sBAiEF,CAAC"}

package/dist/components/DataGridBySchemaEditable/GridDecimalInput.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        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) {
@@ -13,21 +46,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridDecimalInput = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(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 GridDecimalInput = ({ id, value, field, decimalPlaces, prefix, suffix, isCurrency, }) => {
+const grid_1 = require("../../styles/grid");
+const GridDecimalInput = (props) => {
+    const { id, value, field, decimalPlaces, prefix, suffix, isCurrency, colDef, error, helperText, hasFocus, } = props;
     const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const inputCallbackRef = (0, react_1.useCallback)((node) => {
+        if (node !== null && hasFocus) {
+            requestAnimationFrame(() => {
+                node.focus();
+                node.select();
+            });
+        }
+    }, [hasFocus]);
     const prefixFinal = isCurrency ? 'R$ ' : prefix !== '' ? `${prefix} ` : '';
     const suffixFinal = suffix !== '' ? ` ${suffix}` : '';
     const decimalScale = decimalPlaces || 2;
     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.NumericFormat, { key: field, id: field, onValueChange: (values) => {
+    return (react_1.default.createElement(react_number_format_1.NumericFormat, { key: field, id: field, inputRef: inputCallbackRef, onValueChange: (values) => {
             handleChange(values.value);
-        }, value: value, thousandSeparator: ".", decimalSeparator: ",", decimalScale: decimalScale, fixedDecimalScale: true, valueIsNumericString: true, prefix: prefixFinal, suffix: suffixFinal, customInput: TextField_1.default }));
+        }, value: value, thousandSeparator: ".", decimalSeparator: ",", decimalScale: decimalScale, fixedDecimalScale: true, valueIsNumericString: true, prefix: prefixFinal, suffix: suffixFinal, customInput: TextField_1.default, slotProps: {
+            htmlInput: {
+                'aria-label': `Editar ${colDef.headerName || field}. Pressione Enter para salvar toda a linha.`,
+            },
+        }, error: error, helperText: helperText, sx: grid_1.seamlessTextFieldStyle }));
 };
 exports.GridDecimalInput = GridDecimalInput;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GridRenderCellParams } from '@mui/x-data-grid';
+export interface GridGenericInputProps extends GridRenderCellParams {
+    error?: boolean;
+    helperText?: string;
+}
+export declare function GridGenericInput(props: GridGenericInputProps): React.JSX.Element;
+//# sourceMappingURL=GridGenericInput.d.ts.map

package/dist/components/DataGridBySchemaEditable/GridGenericInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridGenericInput.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/GridGenericInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI3E,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAsB5D"}

package/dist/components/DataGridBySchemaEditable/GridGenericInput.js

@@ -0,0 +1,30 @@
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridGenericInput = GridGenericInput;
+const react_1 = __importDefault(require("react"));
+const x_data_grid_1 = require("@mui/x-data-grid");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+function GridGenericInput(props) {
+    const { error, helperText, hasFocus } = props, other = __rest(props, ["error", "helperText", "hasFocus"]);
+    return (react_1.default.createElement(Box_1.default, { sx: { width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' } },
+        react_1.default.createElement(x_data_grid_1.GridEditInputCell, Object.assign({}, other, { error: error, hasFocus: hasFocus, autoFocus: hasFocus, sx: {
+                '& .MuiInputBase-root': { height: '100%' },
+                '& .MuiInputBase-input': { py: helperText ? '4px' : 'inherit' },
+            } })),
+        helperText && (react_1.default.createElement(FormHelperText_1.default, { error: error, sx: { px: 1, pb: 0.5, lineHeight: 1.2, m: 0 } }, helperText))));
+}

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

@@ -1,10 +1,7 @@
 import React from 'react';
-type GridPatternInputProps = {
-    field: string;
-    id: number | string;
-    value?: string | number | null;
+import { GridRenderEditCellParams } from '@mui/x-data-grid';
+export declare const GridPatternInput: (props: GridRenderEditCellParams & {
     patternFormat?: string;
-};
-export declare const GridPatternInput: ({ id, value, field, patternFormat, }: GridPatternInputProps) => React.JSX.Element;
-export {};
+    helperText?: string;
+}) => React.JSX.Element;
 //# sourceMappingURL=GridPatternInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridPatternInput.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/GridPatternInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AACF,eAAO,MAAM,gBAAgB,GAAI,sCAK9B,qBAAqB,sBAoBvB,CAAC"}
+{"version":3,"file":"GridPatternInput.d.ts","sourceRoot":"","sources":["../../../src/components/DataGridBySchemaEditable/GridPatternInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAqB,MAAM,kBAAkB,CAAC;AAK/E,eAAO,MAAM,gBAAgB,GAC3B,OAAO,wBAAwB,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,sBA0DlF,CAAC"}