@zauru-sdk/components 1.0.50 → 1.0.52

package/dist/Containers/index.d.ts

@@ -1,7 +0,0 @@
-export * from "./BodyContainer.js";
-export * from "./ButtonSectionContainer.js";
-export * from "./Container.js";
-export * from "./DoubleContainer.js";
-export * from "./MainContainer.js";
-export * from "./OutletContainer.js";
-export * from "./SubContainer.js";

package/dist/Containers/index.js

@@ -1,7 +0,0 @@
-export * from "./BodyContainer.js";
-export * from "./ButtonSectionContainer.js";
-export * from "./Container.js";
-export * from "./DoubleContainer.js";
-export * from "./MainContainer.js";
-export * from "./OutletContainer.js";
-export * from "./SubContainer.js";

package/dist/DynamicTable/BasicPrintDynamicTable.d.ts

@@ -1,10 +0,0 @@
-import { GenericDynamicTableColumn } from "@zauru-sdk/types";
-export declare const BasicTableHTML: (props: {
-    data: {
-        [key: string]: string;
-    }[];
-    headers: GenericDynamicTableColumn[];
-    footer: {
-        [key: string]: string;
-    };
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/DynamicTable/BasicPrintDynamicTable.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isNumeric } from "@zauru-sdk/common";
-//TABLA PARA LA IMPRESION:
-export const BasicTableHTML = (props) => {
-    const { data, footer, headers } = props;
-    return (_jsxs("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [_jsx("thead", { children: _jsx("tr", { children: headers?.map((titulo, index) => (_jsx("th", { style: {
-                            border: "1px solid black",
-                            padding: "10px",
-                            textAlign: "center",
-                            whiteSpace: "normal",
-                        }, children: titulo.label }, index))) }) }), _jsx("tbody", { children: data?.map((fila, index) => (_jsx("tr", { children: headers?.map((titulo, index) => (_jsx("td", { style: {
-                            border: "1px solid black",
-                            padding: "1px",
-                            textAlign: "center",
-                            whiteSpace: "normal",
-                            fontSize: isNumeric(fila[titulo.name])
-                                ? "2em"
-                                : "1em",
-                        }, children: fila[titulo.name] }, index))) }, index))) }), _jsx("tfoot", { children: _jsx("tr", { children: headers?.map((titulo, index) => (_jsx("td", { style: {
-                            padding: "10px",
-                            textAlign: "center",
-                            whiteSpace: "normal",
-                            fontSize: isNumeric(footer[titulo.name])
-                                ? "2em"
-                                : "1em",
-                        }, children: footer[titulo.name] }, index))) }) })] }));
-};

package/dist/DynamicTable/DynamicPrintTable.d.ts

@@ -1,23 +0,0 @@
-import React, { type ReactNode } from "react";
-export type TableStateItem = {
-    item_id: string | undefined;
-    quantity: number | undefined;
-};
-export type FormatedItem = {
-    label: string;
-    value: number;
-    template: string;
-};
-type Props = {
-    name: string;
-    formName?: string;
-    className?: string;
-    items: FormatedItem[];
-    onChange?: (tableState?: TableStateItem[]) => void;
-    forwardedRef?: React.RefObject<{
-        insertItems: (items: FormatedItem[]) => void;
-        getTableState: (updatedData?: ReactNode[][]) => TableStateItem[] | undefined;
-    }>;
-};
-export declare const DynamicPrintTable: ({ forwardedRef, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/DynamicTable/DynamicPrintTable.js

@@ -1,131 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useCallback, useState } from "react";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { SelectFieldWithoutValidation } from "../Form/SelectField/index.js";
-import { useAppSelector } from "@zauru-sdk/redux";
-const errorAnimation = {
-    hidden: { opacity: 0, y: -10 },
-    visible: { opacity: 1, y: 0 },
-};
-export const DynamicPrintTable = ({ forwardedRef, ...props }) => {
-    const { items, onChange, className } = props;
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const createItemSelect = (rowIndex, defaultValue) => (_jsx(SelectFieldWithoutValidation, { name: "item_select", isClearable: true, onChange: (value) => {
-            const selectedItem = items?.find((x) => x.value === value?.value);
-            updateRow(rowIndex, selectedItem);
-        }, options: items, defaultValue: defaultValue }, rowIndex));
-    const createItemQuantity = (rowIndex, defaultValue) => (_jsx(TextFieldWithoutValidation, { name: "item_quantity", type: "number", integer: true, defaultValue: defaultValue ?? 1, min: 1, onChange: (value) => {
-            updateRow(rowIndex, undefined, Number(value));
-        } }, rowIndex));
-    const createTemplateName = (rowIndex, defaultValue) => (_jsx("div", { children: defaultValue != "" ? defaultValue : "No hay etiqueta" }, rowIndex));
-    const createRow = (rowIndex, item, quantity) => {
-        const itemCreated = createItemSelect(rowIndex, item ?? undefined);
-        const quantityCreated = createItemQuantity(rowIndex, quantity ?? 1);
-        const templateCreated = createTemplateName(rowIndex, item ? item.template : "Seleccione un item para visualizar su etiqueta.");
-        return [itemCreated, quantityCreated, templateCreated];
-    };
-    const [tableData, setTableData] = useState([]);
-    const [isInitialItemAdded, setIsInitialItemAdded] = useState(false);
-    const insertItems = useCallback((newItems) => {
-        setTableData((prevData) => [
-            ...(prevData ?? []),
-            ...newItems.map((item, index) => {
-                const rowIndex = (prevData?.length ?? 0) + index;
-                const [itemCreated, quantityCreated, templateCreated] = createRow(rowIndex, item);
-                updateRow(rowIndex, item, 1);
-                return [itemCreated, quantityCreated, templateCreated];
-            }),
-        ]);
-    }, [items]);
-    const getTableState = (temp) => {
-        const updatedData = temp ?? tableData;
-        const tableState = updatedData?.map((rowData) => {
-            const firstElement = rowData[0];
-            const item_id = React.isValidElement(firstElement)
-                ? firstElement.props.defaultValue?.value
-                : undefined;
-            const secondElement = rowData[1];
-            const quantity = React.isValidElement(secondElement)
-                ? secondElement.props.defaultValue
-                : undefined;
-            return {
-                item_id,
-                quantity,
-            };
-        });
-        return tableState;
-    };
-    const updateRow = (rowIndex, item, quantity) => {
-        setTableData((prevData) => {
-            const updatedData = prevData?.map((_, index) => {
-                if (index === rowIndex) {
-                    const firstElement = prevData[index][0];
-                    const selectedItem = item ??
-                        (React.isValidElement(firstElement)
-                            ? items?.find((x) => x.value === firstElement.props.defaultValue?.value)
-                            : undefined);
-                    const secondElement = prevData[index][1];
-                    const newQuantity = quantity
-                        ? quantity
-                        : React.isValidElement(secondElement)
-                            ? secondElement.props.defaultValue
-                            : undefined;
-                    return createRow(rowIndex, selectedItem, newQuantity);
-                }
-                else {
-                    return prevData[index];
-                }
-            });
-            if (onChange) {
-                const tableState = getTableState(updatedData);
-                onChange(tableState);
-            }
-            return updatedData;
-        });
-    };
-    const addRow = () => {
-        setTableData((prevData) => [
-            ...(prevData ?? []),
-            createRow(prevData?.length ?? 0),
-        ]);
-    };
-    const removeRow = (rowIndex) => {
-        setTableData((prevData) => prevData?.filter((_, index) => index !== rowIndex));
-    };
-    React.useImperativeHandle(forwardedRef, () => ({
-        insertItems,
-        getTableState,
-    }));
-    const pastelGrayBackground = {
-        backgroundColor: "#B69E99",
-    };
-    const renderHeader = () => (_jsxs("tr", { style: { ...pastelGrayBackground }, children: [_jsx("th", { className: "text-left align-middle p-2", children: "Item" }), _jsx("th", { className: "text-left align-middle p-2", children: "Cantidad" }), _jsx("th", { className: "text-left align-middle p-2", children: "Etiqueta" }), _jsx("th", { className: "w-16" })] }));
-    const renderRow = (rowData, rowIndex) => (_jsxs("tr", { children: [rowData.map((cellData, cellIndex) => (_jsx("td", { className: "align-middle p-2", children: cellData }, cellIndex))), rowIndex !== 0 && (_jsx("td", { className: "align-middle w-16", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        removeRow(rowIndex);
-                    }, type: "button", children: "x" }) }))] }, rowIndex));
-    const renderRows = () => {
-        return tableData?.map((rowData, rowIndex) => renderRow(rowData, rowIndex));
-    };
-    const error = formValidations[props.formName ?? "-1"][props.name];
-    const borderColor = error ? "border-red-500" : "border-transparent";
-    useEffect(() => {
-        if (!isInitialItemAdded && items?.length > 0) {
-            insertItems([items[0]]);
-            setIsInitialItemAdded(true);
-        }
-    }, [isInitialItemAdded, items, insertItems]);
-    return (_jsxs("div", { className: `${className} ${borderColor} border-2`, style: { overflowX: "auto" }, children: [!!error && _jsx("div", { className: "text-red-500 text-sm mb-2", children: error }), _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "align-middle", children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
-                                            event.preventDefault();
-                                            event.stopPropagation();
-                                            addRow();
-                                        }, type: "button", children: "+" }) }), _jsxs("td", { colSpan: 2, children: ["Total de etiquetas a imprimir:", " ", tableData?.reduce((sum, x) => {
-                                            const val = React.isValidElement(x[1])
-                                                ? x[1]?.props?.defaultValue
-                                                : undefined;
-                                            if (!sum)
-                                                return val;
-                                            return sum + val;
-                                        }, 0)] })] }) })] })] }));
-};

package/dist/DynamicTable/DynamicTable.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-type Props = {
-    cellInputs?: boolean;
-    intersectionTitle?: string;
-    className?: string;
-    onChange?: (data: string) => void;
-    defaultValue?: string;
-    onValidate?: (headerValue: string, rowValue: string) => boolean;
-    onRemove?: () => void;
-    margins?: {
-        marginLeft?: number;
-        marginTop?: number;
-        verticalGap?: number;
-        horizontalGap?: number;
-    };
-    forwardedRef?: React.RefObject<{
-        getTotalForRows: () => number;
-        getTotalForColumns: () => number;
-        getColumnsCount: () => number;
-        getRowsCount: () => number;
-    }>;
-};
-export declare const DynamicTable: ({ forwardedRef, ...props }: Props, ref: React.ForwardedRef<any>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/DynamicTable/DynamicTable.js

@@ -1,192 +0,0 @@
-import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
-import { TextAreaWithoutValidation } from "../Form/TextArea/index.js";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { CheckboxWithoutValidation } from "../Form/Checkbox/index.js";
-export const DynamicTable = ({ forwardedRef, ...props }, ref) => {
-    const [tableData, setTableData] = useState({});
-    const { cellInputs, intersectionTitle, className, onChange, defaultValue, margins, } = props;
-    useEffect(() => {
-        if (onChange) {
-            onChange(JSON.stringify(tableData));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tableData]);
-    useEffect(() => {
-        if (defaultValue) {
-            initializeTable(defaultValue);
-        }
-        else {
-            initializeTableWithDefaults();
-        }
-    }, [defaultValue]);
-    const getRows = () => {
-        const rowsIds = Object.keys(tableData)
-            .filter((key) => key.startsWith("row"))
-            .map((key) => parseInt(key.slice(3)));
-        return rowsIds.sort().map((id) => ({ id }));
-    };
-    const getCols = () => {
-        const colsIds = Object.keys(tableData)
-            .filter((key) => key.startsWith("column"))
-            .map((key) => parseInt(key.slice(6)));
-        return colsIds.sort().map((id) => ({ id }));
-    };
-    const addRow = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const rows = getRows();
-        const lastId = rows[rows.length - 1].id;
-        handleInputChange(`row${lastId + 1}`, 1);
-    };
-    const addCol = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const cols = getCols();
-        const lastId = cols[cols.length - 1].id;
-        handleInputChange(`column${lastId + 1}`, 1);
-    };
-    const removeRow = (rowId) => {
-        const newRowData = { ...tableData };
-        for (const key in newRowData) {
-            if (key.startsWith(`row${rowId}`) || key.startsWith(`cell-${rowId}-`)) {
-                delete newRowData[key];
-            }
-        }
-        setTableData(newRowData);
-    };
-    const removeCol = (colId) => {
-        const newRowData = { ...tableData };
-        for (const key in newRowData) {
-            if (key.startsWith(`column${colId}`) || key.endsWith(`-${colId}`)) {
-                delete newRowData[key];
-            }
-        }
-        setTableData(newRowData);
-    };
-    const getTotalForRow = (rowId) => {
-        return Number(tableData[`row${rowId}`] ?? 0) ?? 0;
-    };
-    const getTotalForColumn = (colId) => {
-        return Number(tableData[`column${colId}`] ?? 0) ?? 0;
-    };
-    const getTotalForRows = () => {
-        return getRows()
-            .map((row) => getTotalForRow(row.id))
-            .reduce((a, b) => a + b, 0);
-    };
-    const getTotalForColumns = () => {
-        return getCols()
-            .map((col) => getTotalForColumn(col.id))
-            .reduce((a, b) => a + b, 0);
-    };
-    const getRowsCount = () => {
-        return getRows().length;
-    };
-    const getColumnsCount = () => {
-        return getCols().length;
-    };
-    const handleInputChange = (name, value) => {
-        setTableData((prevData) => ({ ...prevData, [name]: value }));
-    };
-    const handleValidation = (cellId, colId, rowId) => {
-        const headerValue = tableData[`column${colId}`];
-        const rowValue = tableData[`row${rowId}`];
-        if (props.onValidate && props.onValidate(headerValue, rowValue)) {
-            return handleInputChange(cellId, true);
-        }
-        return { stopUIChange: true };
-    };
-    const handleRemoveValidation = (cellId) => {
-        handleInputChange(cellId, false);
-    };
-    const initializeTableWithDefaults = () => {
-        const initialData = { row0: 1, column0: 1 };
-        setTableData(initialData);
-    };
-    const initializeTable = (tableJson) => {
-        try {
-            const initialData = JSON.parse(tableJson);
-            setTableData(initialData);
-        }
-        catch (error) {
-            console.error("Error al inicializar la tabla:", error);
-        }
-    };
-    const cellBordered = {
-        border: "1px solid #ccc",
-    };
-    const pastelGrayBackground = {
-        backgroundColor: "#B69E99",
-    };
-    const cellCenteredContent = {
-        textAlign: "center",
-        verticalAlign: "middle",
-    };
-    const renderTotalHeight = () => {
-        const sumaFilas = getRows()
-            .map((row) => getTotalForRow(row.id))
-            .reduce((a, b) => a + b, 0);
-        const sumTotalFilas = sumaFilas +
-            (margins?.marginTop ?? 0) +
-            (getRows().length - 1) * (margins?.verticalGap ?? 0);
-        return (_jsxs("div", { className: "ml-4 inline-block", children: [_jsxs("strong", { children: ["Total alto: ", sumTotalFilas, " "] }), margins && (_jsxs(_Fragment, { children: ["(Celdas: ", sumaFilas, " + M\u00E1rgen superior: ", margins?.marginTop ?? 0, " +", " ", getRows().length - 1, " Brechas verticales:", " ", Math.round((getRows().length - 1) * (margins?.verticalGap ?? 0)), ")"] }))] }));
-    };
-    const renderTotalWidth = () => {
-        const cols = getCols();
-        const sumaColumnas = cols
-            .map((col) => getTotalForColumn(col.id))
-            .reduce((a, b) => a + b, 0);
-        const sumaTotal = sumaColumnas +
-            (margins?.marginLeft ?? 0) +
-            (getCols().length - 1) * (margins?.horizontalGap ?? 0);
-        return (_jsxs("div", { className: "ml-4 inline-block", children: [_jsxs("strong", { children: ["Total ancho: ", sumaTotal, " "] }), margins && (_jsxs(_Fragment, { children: ["(Celdas: ", sumaColumnas, " + M\u00E1rgen izquierdo:", " ", margins?.marginLeft ?? 0, " + ", getCols().length - 1, " Brechas horizontales:", " ", Math.round((getCols().length - 1) * (margins?.horizontalGap ?? 0)), ")"] }))] }));
-    };
-    const renderHeader = () => {
-        const cols = getCols();
-        return (_jsxs("tr", { children: [_jsx("th", { className: "align-middle py-2 text-center", style: {
-                        ...cellBordered,
-                        ...pastelGrayBackground,
-                    }, children: intersectionTitle ?? "" }), cols.map((col) => (_jsx("th", { className: "align-middle py-2 text-center", style: { ...cellBordered, ...pastelGrayBackground }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextFieldWithoutValidation, { style: { maxWidth: "45%", minWidth: "45%" }, name: `column${col.id}`, defaultValue: tableData[`column${col.id}`] || 1, type: "number", onChange: (value) => handleInputChange(`column${col.id}`, value) }), col.id > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => removeCol(col.id), children: "x" }))] }) }, col.id))), _jsx("th", { children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addCol, children: "+" }) })] }));
-    };
-    const renderRow = (rowId) => {
-        const cols = getCols();
-        return (_jsxs("tr", { children: [_jsx("td", { className: "align-middle", style: {
-                        ...cellBordered,
-                        ...pastelGrayBackground,
-                        textOverflow: "ellipsis",
-                        msTextOverflow: "ellipsis",
-                        maxWidth: "200px",
-                    }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextFieldWithoutValidation, { style: { maxWidth: "45%", minWidth: "45%" }, name: `row${rowId}`, defaultValue: tableData[`row${rowId}`] || 1, type: "number", onChange: (value) => handleInputChange(`row${rowId}`, value) }), rowId > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => {
-                                    removeRow(rowId);
-                                }, children: "x" }))] }) }), cols.map((col) => {
-                    const cellId = `cell-${rowId}-${col.id}`;
-                    const cellValidation = tableData[cellId] === true;
-                    if (!cellInputs)
-                        tableData[cellId] = cellValidation;
-                    return (_jsx("td", { id: cellId, style: { ...cellBordered, ...cellCenteredContent }, children: cellInputs ? (_jsx(TextAreaWithoutValidation, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : (_jsx(CheckboxWithoutValidation, { name: cellId, defaultValue: cellValidation, onChange: (value) => {
-                                if (value) {
-                                    return handleValidation(cellId, col.id, rowId);
-                                }
-                                else {
-                                    handleRemoveValidation(cellId);
-                                }
-                            } })) }, col.id));
-                }), rowId === 0 && (_jsx("td", { rowSpan: getRows().length, style: { maxWidth: "100px" }, children: renderTotalHeight() }))] }, rowId));
-    };
-    const renderRows = () => {
-        const rows = getRows();
-        return rows.map((row) => renderRow(row.id));
-    };
-    // Use el "useImperativeHandle" para que el componente padre pueda acceder a los métodos deseados
-    React.useImperativeHandle(forwardedRef, () => ({
-        getTotalForRows,
-        getTotalForColumns,
-        getColumnsCount,
-        getRowsCount,
-    }));
-    return (_jsx("div", { className: `${className}`, children: _jsxs("table", { className: "border-collapse", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addRow, children: "+" }) }), _jsx("td", { colSpan: getCols().length + 1, className: "text-left align-middle", style: {
-                                    textOverflow: "ellipsis",
-                                    msTextOverflow: "ellipsis",
-                                }, children: renderTotalWidth() })] }) })] }) }));
-};

package/dist/DynamicTable/GenericDynamicTable.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import { GenericDynamicTableColumn, RowDataType, SelectFieldOption } from "@zauru-sdk/types";
-type Props = {
-    name?: string;
-    className?: string;
-    columns: GenericDynamicTableColumn[];
-    onChange?: (tableState?: any[]) => void;
-    defaultValue?: RowDataType[];
-    footerRow?: RowDataType;
-    thCSSProperties?: React.CSSProperties;
-    thElementsClassName?: string;
-    editable?: boolean;
-    searcheables?: SelectFieldOption[];
-    loading?: boolean;
-    paginated?: boolean;
-    defaultItemsPerPage?: number;
-    itemsPerPageOptions?: number[];
-    withoutBg?: boolean;
-};
-export declare const GenericDynamicTable: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/DynamicTable/GenericDynamicTable.js

@@ -1,196 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { SelectFieldWithoutValidation } from "../Form/SelectField/index.js";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { CheckboxWithoutValidation } from "../Form/Checkbox/index.js";
-import { createModal } from "../Modal/index.js";
-import { Button } from "../Buttons/index.js";
-import { useAppSelector } from "@zauru-sdk/redux";
-import { generateClientUUID } from "@zauru-sdk/common";
-import { LoadingInputSkeleton } from "../Skeletons/index.js";
-import { WithTooltip } from "../WithTooltip/index.js";
-import { TrashSvg } from "@zauru-sdk/icons";
-const GenericDynamicTableErrorComponent = ({ name, formName, }) => {
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const error = formValidations[formName ?? "-1"]?.[name ?? "-1"];
-    return error ? (_jsxs("p", { className: `mt-2 text-sm text-red-600 dark:text-red-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })) : (_jsx(_Fragment, {}));
-};
-export const GenericDynamicTable = (props) => {
-    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, } = props;
-    const [tableData, setTableData] = useState(defaultValue);
-    const [deletedData, setDeletedData] = useState([]);
-    const [search, setSearch] = useState("");
-    const [filteredTableData, setFilteredTableData] = useState(tableData);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
-    useEffect(() => {
-        if (defaultValue.length) {
-            setTableData(defaultValue);
-        }
-    }, []);
-    useEffect(() => {
-        setFilteredTableData(tableData);
-    }, [tableData]);
-    useEffect(() => {
-        changeFilteredData();
-    }, [tableData, search]);
-    const totalPages = () => {
-        return Math.ceil(filteredTableData.length / itemsPerPage);
-    };
-    const addRow = () => {
-        const defs = {};
-        columns.forEach((x) => {
-            defs[`${x.name}`] =
-                x.type == "label" || x.type == "textField"
-                    ? ""
-                    : x.type == "selectField"
-                        ? 0
-                        : x.type == "checkbox"
-                            ? false
-                            : 0;
-        });
-        setTableData((prevData) => [
-            ...prevData,
-            { id: generateClientUUID(), ...defs },
-        ]);
-    };
-    const removeRow = (rowId) => {
-        const newDeletedData = [...deletedData];
-        const deletedItem = tableData?.find((x) => x.id === rowId);
-        if (deletedItem && !isNaN(deletedItem.id)) {
-            newDeletedData.push(deletedItem);
-        }
-        setDeletedData(newDeletedData);
-        setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
-    };
-    const handleChange = (name, value, rowId) => {
-        // Encontrar el índice de la fila que está cambiando
-        const rowIndex = tableData.findIndex((x) => x.id === rowId);
-        // Crear una copia del objeto en esa fila
-        const updatedRow = { ...tableData[rowIndex], [name]: value };
-        // Copiar todo el array
-        const updatedData = [...tableData];
-        // Reemplazar el objeto en la fila que cambió
-        updatedData[rowIndex] = updatedRow;
-        // Actualizar el estado con el nuevo array
-        setTableData(updatedData);
-        onChange && onChange(updatedData);
-    };
-    const renderHeader = () => (_jsxs("tr", { style: { ...thCSSProperties }, children: [columns.map((column, index) => {
-                const ancho = column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
-                return (_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName}`, style: { width: `${ancho}%` }, children: column.label }, index));
-            }), editable && _jsx("th", { style: { width: "4%" } })] }));
-    const renderRow = (rowData, index) => {
-        return (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [columns.map((column) => {
-                    if (loading) {
-                        return (_jsx("td", { className: "align-middle p-1", children: _jsx(LoadingInputSkeleton, {}) }, `${rowData.id}-${column.name}`));
-                    }
-                    const tempVal = rowData[column.name];
-                    const defaultVal = column.type === "selectField"
-                        ? column.options?.find((x) => x.value === tempVal)
-                        : tempVal;
-                    if (column.type === "label") {
-                        return (_jsx("td", { className: "align-middle p-1", children: _jsx("div", { children: defaultVal }) }, `${rowData.id}-${column.name}`));
-                    }
-                    const FieldComponent = column.type === "textField"
-                        ? TextFieldWithoutValidation
-                        : column.type === "checkbox"
-                            ? CheckboxWithoutValidation
-                            : SelectFieldWithoutValidation;
-                    const setTableValue = (columnName, newValue) => {
-                        setTableData((prevState) => {
-                            // Encontrar el índice de la fila que está cambiando
-                            const rowIndex = prevState.findIndex((x) => x.id === rowData.id);
-                            // Crear una copia del objeto en esa fila
-                            const updatedRow = {
-                                ...prevState[rowIndex],
-                                [columnName]: newValue,
-                            };
-                            // Copiar todo el array
-                            const updatedData = [...prevState];
-                            // Reemplazar el objeto en la fila que cambió
-                            updatedData[rowIndex] = updatedRow;
-                            return updatedData;
-                        });
-                    };
-                    return (_jsx("td", { className: "align-middle p-1", children: column.loadingOptions ? (_jsx(LoadingInputSkeleton, {})) : (_jsx(FieldComponent, { 
-                            //name={column.name}
-                            type: column.textFieldType, integer: !!column.integer, disabled: column.disabled, isClearable: true, onChange: (value) => {
-                                const sendValue = value?.value ?? value;
-                                handleChange(column.name, sendValue, rowData.id);
-                                column.onChange &&
-                                    column.onChange(rowData, sendValue, setTableValue);
-                            }, defaultValue: defaultVal, options: column.options ?? [] }, `${rowData.id}-${column.name}`)) }, `${rowData.id}-${column.name}`));
-                }), editable && (_jsx("td", { className: "align-middle w-16", children: _jsx(WithTooltip, { text: "Eliminar", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                createModal({
-                                    title: "¿Está seguro que quiere eliminar este registro?",
-                                    description: "Una vez eliminada la información no podrá ser recuperada.",
-                                }).then((response) => {
-                                    if (response === "OK") {
-                                        removeRow(rowData.id);
-                                    }
-                                });
-                            }, type: "button", children: _jsx(TrashSvg, {}) }) }) }))] }, rowData.id));
-    };
-    const renderRows = () => {
-        let mapeable = filteredTableData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
-        if (loading) {
-            mapeable = [
-                { id: 1 },
-                { id: 2 },
-                { id: 3 },
-                { id: 4 },
-                { id: 5 },
-                { id: 6 },
-                { id: 7 },
-                { id: 8 },
-                { id: 9 },
-                { id: 10 },
-            ];
-        }
-        return mapeable.map((rowData, index) => renderRow(rowData, index));
-    };
-    const handleChangeSearch = (newSearch) => {
-        setSearch(newSearch);
-    };
-    const changeFilteredData = () => {
-        if (search) {
-            const filteredData = tableData.filter((rowData) => {
-                for (const searchable of searcheables) {
-                    const column = columns.find((col) => col.name === searchable.value);
-                    if (column) {
-                        const tempVal = rowData[column.name];
-                        const defaultVal = column.type === "selectField"
-                            ? column.options?.find((x) => x.value === tempVal)?.label
-                            : tempVal;
-                        if (defaultVal
-                            ?.toString()
-                            .toLowerCase()
-                            .includes(search.toLowerCase())) {
-                            return true;
-                        }
-                    }
-                }
-                return false;
-            });
-            setFilteredTableData(filteredData);
-        }
-        else {
-            setFilteredTableData(tableData);
-        }
-    };
-    return (_jsxs(_Fragment, { children: [name && (_jsxs(_Fragment, { children: [_jsx(GenericDynamicTableErrorComponent, { name: name }), _jsx("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), _jsx("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), _jsxs("div", { className: `${className}`, children: [searcheables.length > 0 && (_jsx("div", { children: _jsx(TextFieldWithoutValidation, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
-                                .map((x) => x.label)
-                                .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), footerRow && !editable ? (_jsx("tfoot", { className: "border-t-2 border-black", children: _jsx("tr", { children: Object.keys(footerRow ?? {})?.map((x, indx) => {
-                                        return (_jsx("td", { className: "align-middle", children: footerRow[x] }, indx));
-                                    }) }) })) : editable ? (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { className: "align-middle", children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
-                                                event.preventDefault();
-                                                event.stopPropagation();
-                                                addRow();
-                                            }, type: "button", children: "+" }) }) }) })) : (_jsx(_Fragment, {}))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages(), onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
-                                        setItemsPerPage(Number(e.target.value));
-                                        setCurrentPage(1); // resetear la página al cambiar los elementos por página
-                                    }, children: itemsPerPageOptions.map((option) => (_jsxs("option", { value: option, children: [option, " elementos por p\u00E1gina"] }, option))) }) })] }))] })] }));
-};

package/dist/DynamicTable/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./BasicPrintDynamicTable.js";
-export * from "./DynamicPrintTable.js";
-export * from "./DynamicTable.js";
-export * from "./GenericDynamicTable.js";