drf-react-by-schema 0.2.2 → 0.3.1

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type FConfirmDialogProps = {
+    open: boolean;
+    onClose: (p: any) => void;
+    onConfirm: (p: any) => void;
+};
+export declare const ConfirmDialog: React.MemoExoticComponent<({ open, onClose, onConfirm }: FConfirmDialogProps) => JSX.Element>;
+export {};

package/dist/components/DataGridBySchemaEditable/ConfirmDialog.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialog = void 0;
+const react_1 = __importDefault(require("react"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const FConfirmDialog = ({ open, onClose, onConfirm }) => {
+    return (react_1.default.createElement(Dialog_1.default, { open: open, onClose: onClose },
+        react_1.default.createElement(DialogTitle_1.default, null, "Confirmar"),
+        react_1.default.createElement(DialogContent_1.default, null, "Tem certeza de que voc\u00EA quer remover este item?"),
+        react_1.default.createElement(DialogActions_1.default, null,
+            react_1.default.createElement(Button_1.default, { onClick: onClose }, "Cancelar"),
+            react_1.default.createElement(Button_1.default, { onClick: onConfirm }, "Remover"))));
+};
+exports.ConfirmDialog = react_1.default.memo(FConfirmDialog);

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

@@ -0,0 +1,16 @@
+import { GridEnrichedBySchemaColDef } from '../../utils';
+type CustomToolbarProps = {
+    preparedColumns: GridEnrichedBySchemaColDef[];
+    setPreparedColumns: (p: null | GridEnrichedBySchemaColDef[]) => void;
+};
+/**
+ *
+ *
+ * @param {CustomToolbarProps} {
+ *     preparedColumns,
+ *     setPreparedColumns
+ * }
+ * @returns Custom Toolbar for the grid
+ */
+export declare const CustomToolbar: ({ preparedColumns, setPreparedColumns }: CustomToolbarProps) => JSX.Element;
+export {};

package/dist/components/DataGridBySchemaEditable/CustomToolbar.js

@@ -0,0 +1,77 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomToolbar = void 0;
+const react_1 = __importStar(require("react"));
+const x_data_grid_1 = require("@mui/x-data-grid");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Expand_1 = __importDefault(require("@mui/icons-material/Expand"));
+const Menu_1 = __importDefault(require("@mui/material/Menu"));
+const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+const utils_1 = require("./utils");
+/**
+ *
+ *
+ * @param {CustomToolbarProps} {
+ *     preparedColumns,
+ *     setPreparedColumns
+ * }
+ * @returns Custom Toolbar for the grid
+ */
+const CustomToolbar = ({ preparedColumns, setPreparedColumns }) => {
+    const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const [resizeMenuAnchorEl, setResizeMenuAnchorEl] = (0, react_1.useState)(null);
+    const isResizeMenuOpen = Boolean(resizeMenuAnchorEl);
+    const openResizeMenu = (event) => {
+        setResizeMenuAnchorEl(event.currentTarget);
+    };
+    const closeResizeMenu = () => {
+        setResizeMenuAnchorEl(null);
+    };
+    return (react_1.default.createElement(x_data_grid_1.GridToolbarContainer, { sx: { justifyContent: 'space-between' } },
+        react_1.default.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+            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(Button_1.default, { onClick: openResizeMenu, sx: { ml: '0px', fontSize: '13px' } },
+                react_1.default.createElement(Expand_1.default, { sx: { transform: 'rotate(90deg)', mr: '6px' } }),
+                "Ajustar"),
+            react_1.default.createElement(Menu_1.default, { anchorEl: resizeMenuAnchorEl, open: isResizeMenuOpen, onClose: closeResizeMenu },
+                react_1.default.createElement(MenuItem_1.default, { onClick: () => {
+                        closeResizeMenu();
+                        setPreparedColumns((0, utils_1.resizeColumns)(preparedColumns, 'fitScreen', apiRef));
+                    } }, "Ajustar \u00E0 tela"),
+                react_1.default.createElement(MenuItem_1.default, { onClick: () => {
+                        closeResizeMenu();
+                        setPreparedColumns((0, utils_1.resizeColumns)(preparedColumns, 'maxContent', apiRef));
+                    } }, "Ajustar ao conte\u00FAdo")),
+            react_1.default.createElement(x_data_grid_1.GridToolbarExport, { sx: { ml: '0px', fontSize: '13px' } })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(x_data_grid_1.GridToolbarQuickFilter, null))));
+};
+exports.CustomToolbar = CustomToolbar;

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

@@ -0,0 +1,16 @@
+import { Item } from '../../utils';
+type FooterToolbarProps = {
+    name: string;
+    setRowModesModel: (p: any) => any;
+    dataGrid: {
+        data: Item[];
+    };
+    setDataGrid: (p: any) => any;
+    emptyItem: {
+        current: Record<string, any>;
+    };
+    indexField: string;
+    isEditable: boolean;
+};
+export declare const FooterToolbar: ({ name, setRowModesModel, dataGrid, setDataGrid, emptyItem, indexField, isEditable }: FooterToolbarProps) => JSX.Element;
+export {};

package/dist/components/DataGridBySchemaEditable/FooterToolbar.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const utils_1 = require("../../utils");
+const FooterToolbar = ({ name, setRowModesModel, dataGrid, setDataGrid, emptyItem, indexField, isEditable }) => {
+    const handleClick = () => {
+        const id = (0, utils_1.getTmpId)();
+        emptyItem.current.id = id;
+        const newData = [
+            Object.assign({}, emptyItem.current),
+            ...dataGrid.data
+        ];
+        setDataGrid({
+            data: newData
+        });
+        setRowModesModel((oldModel) => (Object.assign(Object.assign({}, oldModel), { [id]: { mode: x_data_grid_1.GridRowModes.Edit, fieldToFocus: indexField } })));
+        // 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(() => {
+                el.scrollTop = 0;
+            }, 10);
+        }
+    };
+    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: handleClick, sx: { ml: 2 } }, "Adicionar"),
+        react_1.default.createElement(x_data_grid_1.GridFooter, { sx: (isEditable)
+                ? { border: 'none' }
+                : { width: '100%' } })));
+};
+exports.FooterToolbar = FooterToolbar;

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

@@ -0,0 +1,8 @@
+type GridDecimalInputProps = {
+    field: string;
+    id: number | string;
+    value?: any;
+    column: object;
+};
+export declare const GridDecimalInput: ({ id, value, field }: GridDecimalInputProps) => JSX.Element;
+export {};

package/dist/components/DataGridBySchemaEditable/GridDecimalInput.js

@@ -0,0 +1,32 @@
+"use strict";
+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 });
+exports.GridDecimalInput = void 0;
+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 GridDecimalInput = ({ id, value, field }) => {
+    const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const decimalScale = 2;
+    const disableCurrency = true;
+    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, sourceInfo) => {
+            handleChange(values.value);
+        }, value: value, thousandSeparator: '.', decimalSeparator: ',', decimalScale: decimalScale, fixedDecimalScale: true, valueIsNumericString: true, prefix: disableCurrency ? '' : 'R$ ', customInput: TextField_1.default }));
+};
+exports.GridDecimalInput = GridDecimalInput;

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

@@ -0,0 +1,8 @@
+type GridPatternInputProps = {
+    field: string;
+    id: number | string;
+    value?: any;
+    patternFormat?: string;
+};
+export declare const GridPatternInput: ({ id, value, field, patternFormat }: GridPatternInputProps) => JSX.Element;
+export {};

package/dist/components/DataGridBySchemaEditable/GridPatternInput.js

@@ -0,0 +1,30 @@
+"use strict";
+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 });
+exports.GridPatternInput = void 0;
+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 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) => {
+            handleChange(values.value);
+        }, value: value, valueIsNumericString: true, format: patternFormat, mask: "_", customInput: TextField_1.default }));
+};
+exports.GridPatternInput = GridPatternInput;

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

@@ -0,0 +1,3 @@
+export declare const InputNumberInterval: (props: any) => JSX.Element;
+export declare const InputDateInterval: (props: any) => JSX.Element;
+export declare const InputFloatInterval: (props: any) => JSX.Element;

package/dist/components/DataGridBySchemaEditable/InputInterval.js

@@ -0,0 +1,105 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputFloatInterval = exports.InputDateInterval = exports.InputNumberInterval = void 0;
+const react_1 = __importStar(require("react"));
+const Box_1 = __importDefault(require("@mui/system/Box"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const react_number_format_1 = require("react-number-format");
+const Sync_1 = __importDefault(require("@mui/icons-material/Sync"));
+const SUBMIT_FILTER_STROKE_TIME = 500;
+const InputInterval = ({ item, applyValue, focusElementRef = null, type }) => {
+    var _a;
+    const filterTimeout = (0, react_1.useRef)();
+    const [filterValueState, setFilterValueState] = react_1.default.useState((_a = item.value) !== null && _a !== void 0 ? _a : '');
+    const [applying, setIsApplying] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        return () => {
+            clearTimeout(filterTimeout.current);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        var _a;
+        const itemValue = (_a = item.value) !== null && _a !== void 0 ? _a : [undefined, undefined];
+        setFilterValueState(itemValue);
+    }, [item.value]);
+    const updateFilterValue = (lowerBound, upperBound) => {
+        clearTimeout(filterTimeout.current);
+        setFilterValueState([lowerBound, upperBound]);
+        setIsApplying(true);
+        filterTimeout.current = setTimeout(() => {
+            setIsApplying(false);
+            applyValue(Object.assign(Object.assign({}, item), { value: [lowerBound, upperBound] }));
+        }, SUBMIT_FILTER_STROKE_TIME);
+    };
+    const handleUpperFilterChange = (event) => {
+        var _a;
+        const newUpperBound = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value;
+        updateFilterValue(filterValueState[0], newUpperBound);
+    };
+    const handleLowerFilterChange = (event) => {
+        var _a;
+        const newLowerBound = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value;
+        updateFilterValue(newLowerBound, filterValueState[1]);
+    };
+    return (react_1.default.createElement(Box_1.default, { sx: {
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'end',
+            height: 48,
+            pl: '20px'
+        } },
+        type === 'number' &&
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(TextField_1.default, { name: "lower-bound-input", placeholder: "De", label: "De", variant: "standard", value: Number(filterValueState[0]), onChange: handleLowerFilterChange, type: "number", inputRef: focusElementRef, sx: { mr: 2, minWidth: 130 } }),
+                react_1.default.createElement(TextField_1.default, { name: "upper-bound-input", placeholder: "At\u00E9", label: "At\u00E9", variant: "standard", value: Number(filterValueState[1]), onChange: handleUpperFilterChange, type: "number", sx: { minWidth: 130 }, InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {} })),
+        type === 'float' &&
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_number_format_1.NumericFormat, { name: "lower-bound-input", placeholder: "De", label: "De", variant: "standard", value: Number(filterValueState[0]), onValueChange: (values, sourceInfo) => {
+                        handleLowerFilterChange({ target: { value: values.value } });
+                    }, thousandSeparator: '.', decimalSeparator: ',', decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, inputRef: focusElementRef, sx: { mr: 2, minWidth: 130 }, customInput: TextField_1.default }),
+                react_1.default.createElement(react_number_format_1.NumericFormat, { name: "upper-bound-input", placeholder: "At\u00E9", label: "At\u00E9", variant: "standard", value: Number(filterValueState[1]), onValueChange: (values, sourceInfo) => {
+                        handleUpperFilterChange({ target: { value: values.value } });
+                    }, thousandSeparator: '.', decimalSeparator: ',', decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {}, sx: { minWidth: 130 }, customInput: TextField_1.default })),
+        type === 'date' &&
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(TextField_1.default, { name: "lower-bound-input", label: "De", variant: "standard", value: filterValueState[0] || '', onChange: handleLowerFilterChange, type: "date", inputRef: focusElementRef, InputLabelProps: { shrink: true }, sx: { mr: 2, minWidth: 130 } }),
+                react_1.default.createElement(TextField_1.default, { name: "upper-bound-input", label: "At\u00E9", variant: "standard", value: filterValueState[1] || '', onChange: handleUpperFilterChange, type: "date", InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {}, InputLabelProps: { shrink: true }, sx: { minWidth: 130 } }))));
+};
+const InputNumberInterval = (props) => {
+    return (react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "number" })));
+};
+exports.InputNumberInterval = InputNumberInterval;
+const InputDateInterval = (props) => {
+    return (react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "date" })));
+};
+exports.InputDateInterval = InputDateInterval;
+const InputFloatInterval = (props) => {
+    return (react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "float" })));
+};
+exports.InputFloatInterval = InputFloatInterval;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+import { GridEnrichedBySchemaColDef } from '../../utils';
+import { OptionsACType } from '../../context/APIWrapperContext';
+interface SelectEditInputCellProps {
+    field: string;
+    id: number | string;
+    value?: any;
+    column: GridEnrichedBySchemaColDef;
+    type: string;
+    optionsAC: React.MutableRefObject<OptionsACType | null>;
+    isIndexField: boolean;
+    multiple?: boolean;
+    sx?: SxProps;
+}
+/**
+ *
+ *
+ * @param {SelectEditInputCellProps} {
+ *     field,
+ *     id,
+ *     value,
+ *     column,
+ *     type,
+ *     optionsAC,
+ *     isIndexField,
+ *     multiple = false,
+ *     sx = {}
+ * }
+ * @returns {*}  {JSX.Element}
+ */
+export declare function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple, sx }: SelectEditInputCellProps): JSX.Element;
+export {};

package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js

@@ -0,0 +1,140 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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) {
+        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 });
+exports.SelectEditInputCell = void 0;
+const react_1 = __importDefault(require("react"));
+const x_data_grid_1 = require("@mui/x-data-grid");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const Autocomplete_1 = __importStar(require("@mui/material/Autocomplete"));
+const utils_1 = require("../../utils");
+const filter = (0, Autocomplete_1.createFilterOptions)();
+/**
+ *
+ *
+ * @param {SelectEditInputCellProps} {
+ *     field,
+ *     id,
+ *     value,
+ *     column,
+ *     type,
+ *     optionsAC,
+ *     isIndexField,
+ *     multiple = false,
+ *     sx = {}
+ * }
+ * @returns {*}  {JSX.Element}
+ */
+function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple = false, sx = {} }) {
+    // TODO: allow edit option label, as in formautocomplete!
+    const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const handleChange = (newValue) => __awaiter(this, void 0, void 0, function* () {
+        yield apiRef.current.setEditCellValue({ id, field, value: newValue });
+        apiRef.current.stopCellEditMode({ id, field });
+    });
+    const labelKey = (['field', 'nested object'].includes(type) || isIndexField)
+        ? 'label'
+        : 'display_name';
+    const valueKey = (['field', 'nested object'].includes(type) || isIndexField)
+        ? 'id'
+        : 'value';
+    let creatableProps = {};
+    if (column.creatable || isIndexField) {
+        creatableProps = {
+            freesolo: 'true',
+            filterOptions: (options, params) => {
+                const filtered = filter(options, params);
+                const inputValue = (params.inputValue)
+                    ? params.inputValue
+                    : '';
+                const inputValueLower = inputValue.trim().toLowerCase();
+                // Suggest the creation of a new value
+                const isExisting = options.some(option => inputValueLower === option[labelKey].trim().toLowerCase());
+                if (inputValue !== '' && !isExisting) {
+                    filtered.push({
+                        inputValue,
+                        [labelKey]: `Criar "${inputValue}"`
+                    });
+                }
+                return filtered;
+            },
+            handleHomeEndKeys: true,
+            getOptionLabel: (option) => {
+                // Value selected with enter, right from the input
+                if (typeof option === 'string') {
+                    return option;
+                }
+                // Criar "xxx" option created dynamically
+                if (option.inputValue) {
+                    return option.inputValue;
+                }
+                // Regular option
+                return option[labelKey];
+            },
+            renderOption: (props, option) => {
+                return (react_1.default.createElement("li", Object.assign({ key: option[valueKey] }, props), option[labelKey]));
+            }
+        };
+    }
+    ;
+    return (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: field, id: field, value: value, options: optionsAC.current && optionsAC.current[field] ? optionsAC.current[field] : [], selectOnFocus: true, autoHighlight: true, multiple: multiple, isOptionEqualToValue: (option, value) => {
+            return (option[labelKey] === value[labelKey]);
+        }, getOptionLabel: (option) => {
+            return option[labelKey];
+        }, onChange: (e, value) => {
+            if (!column.creatable && !isIndexField) {
+                handleChange(value);
+                return;
+            }
+            let newValue = value;
+            if (typeof newValue === 'string') {
+                const tmpId = (0, utils_1.getTmpId)();
+                newValue = {
+                    [valueKey]: tmpId,
+                    [labelKey]: newValue
+                };
+            }
+            if (newValue && newValue.inputValue) {
+                const tmpId = (0, utils_1.getTmpId)();
+                newValue = {
+                    [valueKey]: tmpId,
+                    [labelKey]: newValue.inputValue
+                };
+            }
+            handleChange(newValue);
+        }, fullWidth: true, renderInput: params => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { sx: sx }))) }, creatableProps)));
+}
+exports.SelectEditInputCell = SelectEditInputCell;

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

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