@bluemarble/bm-components 0.0.20 → 0.0.23

package/dist/esm/index.js

@@ -1,9 +1,10 @@
 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 } 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, MenuItem, ClickAwayListener } 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) {
@@ -3833,6 +3834,16 @@ 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) => {
@@ -3922,7 +3933,7 @@ const Grid = (props) => {
     function handleFilterBySearch(text) {
         const newArray = defaultData.filter((item) => {
             for (const [, value] of Object.entries(item)) {
-                if (`${value}`.includes(text))
+                if (`${value}`.toLocaleLowerCase().includes(text.toLocaleLowerCase()))
                     return true;
             }
             return false;
@@ -14849,7 +14860,7 @@ const FormikSelect = (_a) => {
 
 function Autocomplete(_a) {
     var { withFormik = true, name, getOptionValue } = _a, rest = __rest(_a, ["withFormik", "name", "getOptionValue"]);
-    if (withFormik && !!getOptionValue) {
+    if (withFormik) {
         return (React__default.createElement(FormikAutocomplete, Object.assign({ name: name, getOptionValue: getOptionValue }, rest)));
     }
     else
@@ -14859,11 +14870,17 @@ function BaseInput(props) {
     return (React__default.createElement(Autocomplete$1, Object.assign({ fullWidth: true, renderInput: (params) => React__default.createElement(TextField, Object.assign({ label: props.label }, params)) }, props)));
 }
 function FormikAutocomplete(_a) {
-    var { getOptionValue } = _a, props = __rest(_a, ["getOptionValue"]);
+    var { getOptionValue, option } = _a, props = __rest(_a, ["getOptionValue", "option"]);
     const [_b, , { setValue }] = useField({
         name: props.name,
     }), { value: defaultValue } = _b, field = __rest(_b, ["value"]);
-    const defaultOption = useRef();
+    const defaultOption = useMemo(() => {
+        const key = option === null || option === void 0 ? void 0 : option.key;
+        if (key)
+            return props.options.find((option) => option[key] === defaultValue);
+        else
+            return props.options.find((option) => Object.values(option)[0] === defaultValue);
+    }, []);
     const onChange = (_, newValue) => {
         if (getOptionValue) {
             setValue(getOptionValue(newValue));
@@ -14871,11 +14888,22 @@ function FormikAutocomplete(_a) {
         else
             setValue(newValue);
     };
-    useEffect(() => {
-        if (!defaultOption.current)
-            defaultOption.current = props.options.find((option) => String(Object.values(option)[0]) === String(defaultValue));
-    }, []);
-    return (React__default.createElement(Autocomplete$1, Object.assign({}, props, { renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, field, { label: props.label }))), defaultValue: defaultOption.current, onChange: onChange })));
+    const getOptionLabel = (item) => {
+        if (props === null || props === void 0 ? void 0 : props.getOptionLabel)
+            return props.getOptionLabel(item);
+        else if (option === null || option === void 0 ? void 0 : option.label)
+            return String(item[option.label]);
+        return "[getOptionLabel] error";
+    };
+    const isOptionEqualToValue = (a, b) => {
+        const key = option === null || option === void 0 ? void 0 : option.key;
+        if (props === null || props === void 0 ? void 0 : props.isOptionEqualToValue)
+            return props.isOptionEqualToValue(a, b);
+        else if (key)
+            return a[key] === b[key];
+        return Object.values(a)[0] === Object.values(b)[0];
+    };
+    return (React__default.createElement(Autocomplete$1, Object.assign({ getOptionLabel: getOptionLabel, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, field, { label: props.label }))), defaultValue: defaultOption, onChange: onChange, isOptionEqualToValue: isOptionEqualToValue }, props)));
 }
 
 const Checkbox = (_a) => {
@@ -14950,5 +14978,411 @@ const LargeButton = (_a) => {
     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)));
 };
 
-export { Autocomplete, Checkbox, EditableTableCell, Grid, Input, InputMask, LargeButton, Radio, Select, Switch, Td, Tr, filterData };
+/* 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 }));
+        })));
+};
+
+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);
+    };
+    return {
+        data,
+        focusedIndex,
+        isEditing,
+        setData,
+        setIsEditing,
+        setFocusedIndex,
+        onSave,
+        canEditTable,
+        setCanEditTable,
+        selectedRows,
+        setSelectedRows,
+        canInsertNewRow,
+        setCanInsertNewRow,
+    };
+}
+
+export { Autocomplete, Checkbox, EditableGrid, EditableTableCell, Grid, Input, InputMask, LargeButton, Radio, Select, Switch, Td, Tr, filterData, useEditableGrid, useEvent };
 //# sourceMappingURL=index.js.map