@bluemarble/bm-components 0.0.25 → 0.0.28

package/dist/esm/index.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import { TableHead, TableRow, TableCell, TableSortLabel, Chip, Tooltip, IconButton, Paper, LinearProgress, TableContainer, Table, TableBody, TablePagination, Popover, Box as Box$2, Typography, Autocomplete as Autocomplete$1, TextField, Button, FormControl, Select as Select$1, InputLabel, FormControlLabel, Checkbox as Checkbox$1, Switch as Switch$1, FormLabel, RadioGroup, Radio as Radio$1, CircularProgress, MenuItem, ClickAwayListener } from '@mui/material';
+import { TableHead, TableRow, TableCell, TableSortLabel, Chip, Tooltip, IconButton, Paper, LinearProgress, TableContainer, Table, TableBody, TablePagination, Popover, Box as Box$2, Typography, Autocomplete as Autocomplete$1, TextField, Button, FormControl, Select as Select$1, InputLabel, FormControlLabel, Checkbox as Checkbox$1, Switch as Switch$1, FormLabel, RadioGroup, Radio as Radio$1, CircularProgress } from '@mui/material';
 import emStyled from '@emotion/styled';
 import '@emotion/react';
 import { Field, useField } from 'formik';
-import { red } from '@mui/material/colors';
 
 const GridHeader = ({ setOrder, setOrderBy, order, orderBy, titles = [], }) => {
     function onRequestSort(title) {
@@ -3834,16 +3833,6 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
-
-function __awaiter(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());
-    });
 }
 
 const CustomTableCell = (_a) => {
@@ -14781,10 +14770,10 @@ const BaseInput$1 = (props) => {
     return React__default.createElement(TextField, Object.assign({ fullWidth: true }, props));
 };
 const FormikInput = (_a) => {
-    var { name } = _a, rest = __rest(_a, ["name"]);
+    var { name, shrink } = _a, rest = __rest(_a, ["name", "shrink"]);
     return (React__default.createElement(Field, { name: name }, (_a) => {
         var _b = _a.field, { value } = _b, field = __rest(_b, ["value"]);
-        return (React__default.createElement(BaseInput$1, Object.assign({}, field, rest, { defaultValue: value })));
+        return (React__default.createElement(BaseInput$1, Object.assign({ defaultValue: value }, field, rest, { InputLabelProps: Object.assign({ shrink }, rest.InputLabelProps) })));
     }));
 };
 
@@ -14978,415 +14967,20 @@ const FormikRadio = (_a) => {
 };
 
 const LargeButton = (_a) => {
-    var { loading, children, CircularProgressProps } = _a, rest = __rest(_a, ["loading", "children", "CircularProgressProps"]);
-    return (React__default.createElement(Button, Object.assign({ variant: "contained", fullWidth: true, sx: Object.assign({ color: "#fff", fontWeight: "bold" }, rest.sx), disabled: rest.disabled || loading }, rest), loading ? (React__default.createElement(CircularProgress, Object.assign({ size: 25, color: "inherit" }, CircularProgressProps))) : (children)));
-};
-
-/* eslint no-undef: "off" */
-function useEvent(event, handler, passive = false) {
-    useEffect(() => {
-        window.addEventListener(event, handler, passive);
-        return function cleanup() {
-            window.removeEventListener(event, handler);
-        };
-    });
-}
-
-const InputAutocompleteCell = ({ options, label, value, onInputChange, currentValue, defaultValue: ExternalDefaultValue, }) => {
-    const defaultValue = options.find((option) => String(option[value]) ===
-        (String(currentValue) || String(ExternalDefaultValue)));
-    const onChange = (_, newValue, reason) => {
-        if (reason === "clear")
-            return;
-        onInputChange(newValue[value]);
-    };
-    return (React__default.createElement(Autocomplete$1, { defaultValue: defaultValue, options: options, onChange: onChange, getOptionLabel: (option) => option[label], renderInput: (params) => React__default.createElement(RenderInput, Object.assign({}, params)), isOptionEqualToValue: (a, b) => (a === null || a === void 0 ? void 0 : a[value]) === (b === null || b === void 0 ? void 0 : b[value]) }));
-};
-const RenderInput = (params) => {
-    return (React__default.createElement(TextField, Object.assign({}, params, { autoFocus: true, focused: true, sx: {
-            width: "100%",
-            height: "100%",
-            position: "absolute",
-            left: 0,
-            top: 0,
-            borderRadius: 0,
-            color: "primary.main",
-            p: 0,
-        }, inputProps: Object.assign(Object.assign({}, params.inputProps), { sx: Object.assign(Object.assign({}, params.inputProps.sx), { width: "100%", height: "100%", p: "0!important", pl: 2 }) }), InputProps: Object.assign(Object.assign({}, params.InputProps), { sx: Object.assign(Object.assign({}, params.inputProps.sx), { height: "100%", borderRadius: 0 }) }) })));
-};
-
-const InputTextCell = ({ defaultValue, currentValue, inputProps = {}, onInputChange, }) => {
-    const { onDefaultValue } = inputProps, rest = __rest(inputProps, ["onDefaultValue"]);
-    const formattedDefaultValue = onDefaultValue
-        ? onDefaultValue(currentValue || defaultValue)
-        : currentValue || defaultValue;
-    return (React__default.createElement(TextField, Object.assign({ focused: true, autoFocus: true, onChange: ({ target }) => onInputChange(target.value), sx: {
-            width: "100%",
-            height: "100%",
-            position: "absolute",
-            left: 0,
-            top: 0,
-            borderRadius: 0,
-            color: "primary.main",
-        }, InputProps: { sx: { width: "100%", height: "100%", borderRadius: 0 } }, inputProps: {
-            sx: { width: "100%", height: "100%", pl: 1, borderRadius: 0 },
-        }, defaultValue: formattedDefaultValue }, rest)));
-};
-
-const InputSelectCell = ({ options, label, value, setCanSave, onInputChange, currentValue, }) => {
-    var _a;
-    const defaultValue = (_a = options.find((option) => option[value] === currentValue)) === null || _a === void 0 ? void 0 : _a[value];
-    const onChange = (_, { props }) => {
-        onInputChange(props.value);
-    };
-    return (React__default.createElement(TextField, { defaultValue: defaultValue, autoFocus: true, focused: true, onChange: onChange, sx: {
-            width: "100%",
-            height: "100%",
-            position: "absolute",
-            left: 0,
-            top: 0,
-            borderRadius: 0,
-            color: "primary.main",
-        }, inputProps: {
-            sx: { width: "100%", height: "100%", p: 0, pl: 2 },
-        }, InputProps: {
-            sx: { height: "100%", borderRadius: 0 },
-        }, SelectProps: {
-        // onOpen: () => setCanSave(false),
-        // onClose: () => setCanSave(true)
-        }, select: true }, options.map((option) => (React__default.createElement(MenuItem, { key: option[value], value: option[value] }, option[label])))));
-};
-
-const InputCell = (props) => {
-    if (props.type === "select" && props.select)
-        return (React__default.createElement(InputSelectCell, Object.assign({}, props.select, { setCanSave: props.setCanSave, onInputChange: props.onInputChange, currentValue: props.currentValue })));
-    else if (props.type === "autocomplete")
-        return (React__default.createElement(InputAutocompleteCell, Object.assign({}, props.select, { setCanSave: props.setCanSave, onInputChange: props.onInputChange, defaultValue: props.defaultValue, currentValue: props.currentValue })));
-    else {
-        return React__default.createElement(InputTextCell, Object.assign({}, props));
-    }
-};
-
-const GridCell = ({ value, focusedIndex, canEditTable, columnIndex, rowIndex, isEditing, onInputChange, bordered, onClick, onDoubleClick, setCanSave, tableCellProps, validationErrors, column, }) => {
-    var _a;
-    const formattedValue = (column === null || column === void 0 ? void 0 : column.formatLabelValue)
-        ? column === null || column === void 0 ? void 0 : column.formatLabelValue(value)
-        : value;
-    const isFocused = focusedIndex.y === rowIndex && focusedIndex.x === columnIndex;
-    const canEdit = isEditing && isFocused;
-    const withOthersStyles = () => {
-        let result = {};
-        if (bordered) {
-            result = {
-                border: "1px solid",
-                borderColor: "divider",
-            };
-        }
-        if (isFocused && !canEdit && canEditTable) {
-            result = Object.assign(Object.assign({}, result), { outline: "2px solid", color: "primary.main", outlineColor: "inherit" });
-        }
-        if (canEdit) {
-            result = Object.assign(Object.assign({}, result), { p: 0 });
-        }
-        if (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.includes(column === null || column === void 0 ? void 0 : column.name)) {
-            result = {
-                bgcolor: red[100],
-            };
-        }
-        return result;
-    };
-    return (React__default.createElement(TableCell, Object.assign({ onClick: onClick, onDoubleClick: onDoubleClick }, tableCellProps, { sx: Object.assign(Object.assign({ position: "relative" }, tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx), withOthersStyles()) }), canEdit ? (React__default.createElement(InputCell, { select: column === null || column === void 0 ? void 0 : column.select, type: column === null || column === void 0 ? void 0 : column.type, inputProps: column === null || column === void 0 ? void 0 : column.inputProps, defaultValue: (_a = column === null || column === void 0 ? void 0 : column.newRow) === null || _a === void 0 ? void 0 : _a.defaultValue, currentValue: value, onInputChange: onInputChange, setCanSave: setCanSave })) : (React__default.createElement(Typography, { variant: "body2", color: "initial" }, formattedValue))));
-};
-
-const NewRow = ({ columns, hasCheckbox, maxPositions, onSaveNewRow, }) => {
-    const [focusedIndex, setFocusedIndex] = useState({ x: 0, y: 0 });
-    const newRowValues = useRef({});
-    const [validationError, setValidationError] = useState([]);
-    const onInputChange = (prop, value) => {
-        newRowValues.current = Object.assign(Object.assign({}, newRowValues.current), { [prop]: value });
-    };
-    const getDefaultRowValues = () => {
-        const defaultNewRow = {};
-        columns.forEach((column) => {
-            var _a;
-            defaultNewRow[column.name] =
-                ((_a = column === null || column === void 0 ? void 0 : column.newRow) === null || _a === void 0 ? void 0 : _a.defaultValue) || undefined;
-        });
-        return defaultNewRow;
-    };
-    const saveRow = () => {
-        const requiredColumns = columns.filter((column) => column.required);
-        let isRequiredsFilled = true;
-        requiredColumns.forEach((column) => {
-            var _a, _b, _c;
-            if (!((_a = newRowValues.current) === null || _a === void 0 ? void 0 : _a[column.name]) ||
-                ((_c = (_b = newRowValues.current) === null || _b === void 0 ? void 0 : _b[column.name]) === null || _c === void 0 ? void 0 : _c.trim()) === "")
-                isRequiredsFilled = false;
-        });
-        if (!isRequiredsFilled) {
-            setValidationError(requiredColumns.map((column) => column === null || column === void 0 ? void 0 : column.name));
-            return;
-        }
-        if (onSaveNewRow)
-            onSaveNewRow(newRowValues.current);
-        newRowValues.current = getDefaultRowValues();
-        setFocusedIndex({ x: 0, y: 0 });
-        setValidationError([]);
-    };
-    const onKeyDown = (event) => {
-        const canMoveRight = focusedIndex.x + 1 <= maxPositions.x;
-        const canMoveLeft = focusedIndex.x - 1 >= 0;
-        const { key, shiftKey } = event;
-        if (key === "Enter") {
-            event.preventDefault();
-            saveRow();
-        }
-        else if (shiftKey && key === "Tab") {
-            event.preventDefault();
-            setFocusedIndex({
-                y: 0,
-                x: canMoveLeft ? focusedIndex.x - 1 : focusedIndex.x,
-            });
-        }
-        else if (key === "Tab") {
-            event.preventDefault();
-            setFocusedIndex({
-                y: 0,
-                x: canMoveRight ? focusedIndex.x + 1 : focusedIndex.x,
-            });
-        }
-    };
-    useEffect(() => {
-        newRowValues.current = getDefaultRowValues();
-    }, []);
-    return (React__default.createElement(TableRow, { onKeyDown: onKeyDown },
-        hasCheckbox && React__default.createElement(TableCell, { padding: "checkbox" }),
-        columns
-            .filter((columns) => columns.visible !== false)
-            .map((column, columnIndex) => {
-            var _a, _b;
-            const key = String(column.name || column.label || columnIndex);
-            return (React__default.createElement(GridCell, { canEditTable: true, bordered: true, key: key, isEditing: true, focusedIndex: focusedIndex, rowIndex: 0, columnIndex: columnIndex, value: ((_a = newRowValues.current) === null || _a === void 0 ? void 0 : _a[column.name]) ||
-                    ((_b = column === null || column === void 0 ? void 0 : column.newRow) === null || _b === void 0 ? void 0 : _b.defaultValue), onInputChange: (value) => onInputChange(column.name, value), column: column, onClick: () => setFocusedIndex({ x: columnIndex, y: 0 }), onDoubleClick: () => { }, setCanSave: () => { }, tableCellProps: { sx: { height: 31 } }, validationErrors: validationError }));
-        })));
+    var { loading, children, CircularProgressProps, sx } = _a, rest = __rest(_a, ["loading", "children", "CircularProgressProps", "sx"]);
+    return (React__default.createElement(Button, Object.assign({ variant: "contained", fullWidth: true, sx: Object.assign({ color: "#fff", fontWeight: "bold" }, sx), disabled: rest.disabled || loading }, rest), loading ? (React__default.createElement(CircularProgress, Object.assign({ size: 25, color: "inherit" }, CircularProgressProps))) : (children)));
 };
 
-function EditableGrid({ columns, data, primaryKey, onSave, setFocusedIndex, setIsEditing, focusedIndex, isEditing, bordered, canEditTable, setCanEditTable, selectedRows, setSelectedRows, checkbox = false, checkMultiple = false, onSaveNewRow, canInsertNewRow, }) {
-    var _a;
-    const [canSave, setCanSave] = useState(true);
-    const checkboxOffset = checkbox ? 1 : 0;
-    const inputValue = useRef("");
-    const maxPositions = {
-        x: columns.length - 1 - checkboxOffset,
-        y: data.length - 1,
-    };
-    const focusedRow = data === null || data === void 0 ? void 0 : data[focusedIndex === null || focusedIndex === void 0 ? void 0 : focusedIndex.y];
-    const focusedProp = (_a = columns === null || columns === void 0 ? void 0 : columns[(focusedIndex === null || focusedIndex === void 0 ? void 0 : focusedIndex.x) + checkboxOffset]) === null || _a === void 0 ? void 0 : _a.name;
-    const gridRef = useRef(null);
-    const [isShiftPressed, setIsShiftPressed] = useState(false);
-    const onInputChange = (value) => {
-        inputValue.current = value;
-    };
-    const moveIndexPosition = (x = 0, y = 0, ignoreEditing) => {
-        let xPosition = focusedIndex.x + x;
-        let yPosition = focusedIndex.y + y;
-        if (isEditing && !ignoreEditing)
-            return;
-        if (xPosition > maxPositions.x && yPosition < maxPositions.y) {
-            xPosition = 0;
-            yPosition += 1;
-        }
-        else if (xPosition < 0 && yPosition > 0) {
-            xPosition = maxPositions.x;
-            yPosition -= 1;
-        }
-        else if (xPosition < 0) {
-            xPosition = 0;
-        }
-        else if (yPosition < 0) {
-            yPosition = 0;
-        }
-        else if (xPosition > maxPositions.x) {
-            xPosition = maxPositions.x;
-        }
-        else if (yPosition > maxPositions.y) {
-            yPosition = maxPositions.y;
-        }
-        setFocusedIndex({
-            x: xPosition,
-            y: yPosition,
-        });
-    };
-    const handleSaveChanges = () => __awaiter(this, void 0, void 0, function* () {
-        const previousValue = focusedRow[focusedProp];
-        if (previousValue !== inputValue.current)
-            onSave(updateRowData(), {
-                prop: focusedProp,
-                newValue: inputValue.current,
-                index: focusedIndex.y,
-            });
-    });
-    const updateRowData = () => {
-        const updatedRow = Object.assign(Object.assign({}, focusedRow), { [focusedProp]: inputValue.current });
-        return updatedRow;
-    };
-    const startEditOrSave = () => {
-        if (!canSave)
-            return;
-        if (!isEditing) {
-            setIsEditing(true);
-        }
-        else {
-            handleSaveChanges();
-            setIsEditing(false);
-        }
-    };
-    const saveAndMove = (event) => {
-        event.preventDefault();
-        if (isEditing)
-            handleSaveChanges();
-        moveIndexPosition(1, 0, true);
-    };
-    const keyMaps = {
-        ArrowRight: (event) => moveIndexPosition(1, 0),
-        ArrowLeft: (event) => moveIndexPosition(-1, 0),
-        ArrowDown: (event) => moveIndexPosition(0, 1),
-        ArrowUp: (event) => moveIndexPosition(0, -1),
-        Enter: (event) => startEditOrSave(),
-        Tab: (event) => saveAndMove(event),
-        Escape: (event) => {
-            event.preventDefault();
-            setIsEditing(false);
-            if (!isEditing)
-                setCanEditTable(false);
-        },
-    };
-    const handleKeyDown = (event) => {
-        if (event.key === "Shift")
-            setIsShiftPressed(true);
-        if (!canEditTable)
-            return;
-        const movement = keyMaps[event.key];
-        if (event.shiftKey && event.key === "Tab") {
-            event.preventDefault();
-            if (isEditing)
-                handleSaveChanges();
-            moveIndexPosition(-1, 0, true);
-        }
-        else if (movement) {
-            movement(event);
-        }
-    };
-    const handleKeyUp = (event) => {
-        if (event.key === "Shift")
-            setIsShiftPressed(false);
-    };
-    const onClick = (x, y) => {
-        if (!canEditTable)
-            setCanEditTable(true);
-        if (focusedIndex.x === x && focusedIndex.y === y && canEditTable)
-            setIsEditing(true);
-        else {
-            if (isEditing)
-                handleSaveChanges();
-            setFocusedIndex({ x, y });
-        }
-    };
-    const onDoubleClickCell = (x, y) => {
-        if (!canEditTable)
-            return;
-        setIsEditing(true);
-        setFocusedIndex({ x, y });
-    };
-    const onClickAwayTable = () => {
-        if (!canSave)
-            return;
-        if (isEditing)
-            handleSaveChanges();
-        setCanEditTable(false);
-        setIsEditing(false);
-    };
-    const isSelectedRow = (row) => selectedRows.includes(row);
-    const onChangeSelectRow = (row) => {
-        if (isSelectedRow(row))
-            setSelectedRows(selectedRows.filter((selectedRow) => selectedRow !== row));
-        else if (selectedRows.length > 0 && checkMultiple && isShiftPressed) {
-            const lastRowIndex = data.findIndex((each) => each[primaryKey] === selectedRows[selectedRows.length - 1]);
-            const currentRowIndex = data.findIndex((each) => each[primaryKey] === row);
-            const sortedIndexes = [lastRowIndex, currentRowIndex].sort((a, b) => a - b);
-            const filteredRows = data.filter((_, index) => index >= sortedIndexes[0] && index <= sortedIndexes[1]);
-            const filteredRowsId = filteredRows.map((data) => data[primaryKey]);
-            setSelectedRows([...selectedRows, ...filteredRowsId]);
-        }
-        else {
-            if (!checkMultiple)
-                setSelectedRows([row]);
-            else
-                setSelectedRows([...selectedRows, row]);
-        }
-    };
-    useEvent("keydown", handleKeyDown);
-    useEvent("keyup", handleKeyUp);
-    useEffect(() => {
-        if (isEditing) {
-            inputValue.current = focusedRow[focusedProp];
-        }
-    }, [isEditing, focusedIndex]);
-    return (React__default.createElement(ClickAwayListener, { onClickAway: onClickAwayTable },
-        React__default.createElement(Paper, null,
-            React__default.createElement(Table, { ref: gridRef, size: "small" },
-                React__default.createElement(TableHead, null,
-                    React__default.createElement(TableRow, null, columns.map((column, index) => {
-                        var _a;
-                        const key = column.name === ""
-                            ? column.id || column.label || index
-                            : String(column.name);
-                        return (React__default.createElement(TableCell, Object.assign({ key: key }, column === null || column === void 0 ? void 0 : column.TableCellProps, { sx: Object.assign({ border: "1px solid", borderColor: "divider" }, (_a = column === null || column === void 0 ? void 0 : column.TableCellProps) === null || _a === void 0 ? void 0 : _a.sx) }),
-                            React__default.createElement(Typography, { variant: "body2", fontWeight: "bold", fontSize: "inherit" }, column.label)));
-                    }))),
-                React__default.createElement(TableBody, null,
-                    canInsertNewRow && (React__default.createElement(NewRow, { columns: columns, hasCheckbox: checkbox, maxPositions: maxPositions, onSaveNewRow: onSaveNewRow })),
-                    data.map((row, rowIndex) => {
-                        return (React__default.createElement(TableRow, { key: row[primaryKey] },
-                            checkbox && (React__default.createElement(TableCell, { padding: "checkbox" },
-                                React__default.createElement(Checkbox$1, { checked: isSelectedRow(row[primaryKey]), onChange: () => onChangeSelectRow(row[primaryKey]), size: "small", sx: { m: 0 } }))),
-                            columns
-                                .filter((columns) => columns.visible !== false)
-                                .map((column, columnIndex) => {
-                                const key = String(column.name || column.label || columnIndex);
-                                return (React__default.createElement(GridCell, { canEditTable: canEditTable, bordered: bordered, key: key, isEditing: isEditing, focusedIndex: focusedIndex, rowIndex: rowIndex, columnIndex: columnIndex, value: row[column.name], onInputChange: onInputChange, column: column, onClick: () => onClick(columnIndex, rowIndex), onDoubleClick: () => onDoubleClickCell(columnIndex, rowIndex), setCanSave: setCanSave }));
-                            })));
-                    }))))));
-}
-
-function useEditableGrid() {
-    const [focusedIndex, setFocusedIndex] = useState({ x: 0, y: 0 });
-    const [isEditing, setIsEditing] = useState(false);
-    const [data, setData] = useState([]);
-    const [canEditTable, setCanEditTable] = useState(false);
-    const [selectedRows, setSelectedRows] = useState([]);
-    const [canInsertNewRow, setCanInsertNewRow] = useState(false);
-    const onSave = (newItem) => {
-        const updatedData = data.filter((_, index) => index !== focusedIndex.y);
-        updatedData.splice(focusedIndex.y, 0, newItem);
-        setData(updatedData);
-    };
+function getTabProps(index) {
     return {
-        data,
-        focusedIndex,
-        isEditing,
-        setData,
-        setIsEditing,
-        setFocusedIndex,
-        onSave,
-        canEditTable,
-        setCanEditTable,
-        selectedRows,
-        setSelectedRows,
-        canInsertNewRow,
-        setCanInsertNewRow,
+        id: `tab-${index}`,
+        "aria-controls": `tabpanel-${index}`,
     };
-}
+}
+const TabPanel = (props) => {
+    const { children, value, index } = props, other = __rest(props, ["children", "value", "index"]);
+    return (React__default.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}` }, other), value === index && React__default.createElement(React__default.Fragment, null, children)));
+};
 
-export { Autocomplete, Checkbox, EditableGrid, EditableTableCell, Grid, Input, InputMask, LargeButton, Radio, Select, Switch, Td, Tr, filterData, useEditableGrid, useEvent };
+export { Autocomplete, Checkbox, EditableTableCell, Grid, Input, InputMask, LargeButton, Radio, Select, Switch, TabPanel, Td, Tr, filterData, getTabProps };
 //# sourceMappingURL=index.js.map