flysoft-react-ui 1.2.3 → 1.2.5

package/dist/components/layout/Card.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { twMerge } from "tailwind-merge";
-export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", alwaysDisplayHeaderActions = false, headerClassName = "", contentClassName = "", footerClassName = "", compact = false, }) => {
-    const variantClasses = {
-        default: "border-[var(--color-border-default)]",
-        elevated: "border-[var(--color-border-default)] shadow-[var(--shadow-lg)]",
-        outlined: "border-[var(--color-gray-300)]",
-    };
-    // Unimos las clases usando twMerge para consistencia
-    const mergedClasses = twMerge("bg-[var(--color-bg-default)] rounded-lg border font-[var(--font-default)]", variantClasses[variant], className);
-    // Verificamos si existe alguna clase de ancho (w-*) que no sea w-auto.
-    // Es importante distinguir entre w-* (ancho) y max-w-*/min-w-* (límites),
-    // ya que un max-w-* sin un w-full puede hacer que la card colapse a su contenido.
-    const hasExplicitWidth = mergedClasses.split(/\s+/).some((cls) => {
-        const mainClass = cls.split(":").pop() || "";
-        return (mainClass.startsWith("w-") &&
-            mainClass !== "w-auto" &&
-            !mainClass.startsWith("max-w-") &&
-            !mainClass.startsWith("min-w-"));
-    });
-    // Si no hay un ancho explícito, forzamos w-full para que ocupe todo el espacio disponible
-    // (incluyendo el espacio limitado por un posible max-w- en la misma card o en su padre).
-    const classes = hasExplicitWidth ? mergedClasses : `${mergedClasses} w-full`;
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [isLargeScreen, setIsLargeScreen] = React.useState(false);
-    React.useEffect(() => {
-        const checkScreenSize = () => {
-            // md breakpoint en Tailwind es 768px, así que lg es 1024px
-            setIsLargeScreen(window.innerWidth >= 1024);
-        };
-        checkScreenSize();
-        window.addEventListener("resize", checkScreenSize);
-        return () => {
-            window.removeEventListener("resize", checkScreenSize);
-        };
-    }, []);
-    // Determinar la opacidad de las headerActions
-    const getHeaderActionsOpacity = () => {
-        if (!headerActions)
-            return 0;
-        // En pantallas pequeñas (md e inferiores) siempre se muestran
-        if (!isLargeScreen)
-            return 1;
-        // Si alwaysDisplayHeaderActions es true, siempre se muestran
-        if (alwaysDisplayHeaderActions)
-            return 1;
-        // Si es false y pantalla grande, solo al hacer hover
-        return isHovered ? 1 : 0;
-    };
-    return (_jsxs("div", { className: `${classes} relative`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(title || subtitle || headerActions) && (_jsx("div", { className: twMerge(compact ? "px-4 pt-2" : "px-6 pt-4", headerClassName), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("div", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center transition-opacity", style: {
-                                opacity: getHeaderActionsOpacity(),
-                            }, children: headerActions }))] }) })), children && (_jsx("div", { className: twMerge(compact ? "px-4 py-4" : "px-6 py-4", contentClassName), children: children })), footer && (_jsx("div", { className: twMerge(compact ? "px-4 pb-2" : "px-6 pb-4", "flex items-center justify-end", footerClassName), children: footer }))] }));
-};

package/dist/components/layout/Collection.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-export const Collection = ({ children, gap = "1rem", direction = "column", wrap = false, className = "", }) => {
-    const baseClasses = `
-    flex
-    font-[var(--font-default)]
-  `;
-    const directionClasses = {
-        column: "flex-col",
-        row: "flex-row",
-    };
-    const wrapClass = wrap ? "flex-wrap" : "flex-nowrap";
-    const classes = `${baseClasses} ${directionClasses[direction]} ${wrapClass} ${className}`.trim();
-    const style = {
-        gap: gap,
-    };
-    return (_jsx("div", { className: classes, style: style, children: children }));
-};

package/dist/components/layout/DataField.js

@@ -1,38 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { Button } from "../form-controls";
-export const DataField = ({ label, value, inline = false, align = "left", title, link, className = "", labelClassName = "", }) => {
-    const handleLinkClick = () => {
-        if (link) {
-            window.open(link, "_blank", "noopener,noreferrer");
-        }
-    };
-    const alignClasses = {
-        left: "text-left",
-        right: "text-right",
-        center: "text-center",
-    };
-    const justifyClasses = {
-        left: "justify-start",
-        right: "justify-end",
-        center: "justify-center",
-    };
-    const baseContainerClasses = `
-    font-[var(--font-default)]
-    ${alignClasses[align]}
-    ${className}
-  `.trim();
-    const baseLabelClasses = `
-    text-sm text-[var(--color-text-primary)]
-    ${labelClassName}
-  `.trim();
-    const baseValueClasses = `
-    text-base text-[var(--color-text-primary)]
-  `;
-    if (inline) {
-        // Modo inline: label y value en la misma línea
-        return (_jsx("div", { className: baseContainerClasses, title: title, children: _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [label && _jsxs("span", { className: baseLabelClasses, children: [label, ":"] }), _jsx("span", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] }) }));
-    }
-    // Modo vertical: label arriba, value abajo
-    return (_jsxs("div", { className: baseContainerClasses, title: title, children: [label && _jsx("div", { className: baseLabelClasses, children: label }), _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [_jsx("div", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] })] }));
-};

package/dist/components/layout/DataTable.js

@@ -1,164 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { twMerge } from "tailwind-merge";
-import { DropdownMenu } from "./DropdownMenu";
-export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es-AR", isLoading = false, loadingRows = 5, rowClassName, headerClassName = "", footerClassName = "", headerCellClassName = "", footerCellClassName = "", cellClassName = "", compact = false, }) => {
-    // Calcular si necesitamos scroll
-    const displayRows = isLoading ? loadingRows : rows.length;
-    const needsScroll = maxRows !== undefined && displayRows > maxRows;
-    // Altura aproximada de una fila (px-4 py-3 = ~48px por fila, compact es menos)
-    const rowHeight = compact ? 32 : 48;
-    const maxHeight = maxRows ? `${maxRows * rowHeight}px` : undefined;
-    const cellPadding = compact ? "px-2 py-1" : "px-4 py-3";
-    // Verificar si alguna columna tiene footer
-    const hasFooter = columns.some((column) => column.footer !== undefined);
-    const getCellValue = (column, row) => {
-        if (!column.value)
-            return null;
-        if (typeof column.value === "function") {
-            return column.value(row);
-        }
-        // Si es string o number, puede ser un nombre de propiedad o un valor directo
-        if (typeof column.value === "string" || typeof column.value === "number") {
-            // Intentar obtener la propiedad del objeto si existe
-            if (typeof column.value === "string" &&
-                typeof row === "object" &&
-                row !== null) {
-                const value = row[column.value];
-                if (value !== undefined) {
-                    return value;
-                }
-            }
-            // Si no es una propiedad, retornar el valor directo
-            return column.value;
-        }
-        return column.value;
-    };
-    const formatValue = (value, type) => {
-        if (React.isValidElement(value)) {
-            return value;
-        }
-        // Convertir string a número si es necesario para currency o numeric
-        let numericValue = null;
-        if (typeof value === "number") {
-            numericValue = value;
-        }
-        else if (typeof value === "string" &&
-            (type === "currency" || type === "numeric")) {
-            const parsed = parseFloat(value);
-            if (!isNaN(parsed)) {
-                numericValue = parsed;
-            }
-        }
-        if (numericValue !== null) {
-            if (type === "currency") {
-                // Formatear usando el locale proporcionado sin símbolo de moneda
-                const parts = new Intl.NumberFormat(locale, {
-                    style: "currency",
-                    currency: "EUR",
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2,
-                }).formatToParts(numericValue);
-                // Construir el string sin el símbolo de moneda
-                return parts
-                    .filter((part) => part.type !== "currency")
-                    .map((part) => part.value)
-                    .join("");
-            }
-            if (type === "numeric") {
-                // Formatear usando el locale proporcionado
-                const hasDecimals = numericValue % 1 !== 0;
-                return new Intl.NumberFormat(locale, {
-                    minimumFractionDigits: hasDecimals ? 2 : 0,
-                    maximumFractionDigits: hasDecimals ? 2 : 0,
-                }).format(numericValue);
-            }
-        }
-        if (typeof value === "string" && type === "date") {
-            try {
-                const date = new Date(value);
-                return date.toLocaleDateString(locale);
-            }
-            catch {
-                return value;
-            }
-        }
-        return value;
-    };
-    const getAlignmentClass = (align, type) => {
-        // Las columnas de tipo 'date' siempre se alinean a la izquierda
-        // Las columnas de tipo 'currency' y 'numeric' siempre se alinean a la derecha
-        let effectiveAlign = align;
-        if (type === "date") {
-            effectiveAlign = "left";
-        }
-        else if (type === "currency" || type === "numeric") {
-            effectiveAlign = "right";
-        }
-        switch (effectiveAlign) {
-            case "right":
-                return "text-right";
-            case "center":
-                return "text-center";
-            case "left":
-            default:
-                return "text-left";
-        }
-    };
-    // Convertir array de ReactNode a array de ActionItem para DropdownMenu
-    const convertActionsToOptions = (actions) => {
-        return actions.map((action, index) => ({
-            id: index,
-            content: (_jsx("div", { onClick: (e) => {
-                    // Detener la propagación para que el onClick del DropdownMenu no interfiera
-                    e.stopPropagation();
-                }, children: action })),
-        }));
-    };
-    // Componente Skeleton para celdas de carga
-    const SkeletonCell = () => (_jsx("div", { className: "h-4 bg-[var(--color-border-default)]/40 rounded animate-pulse w-full" }));
-    return (_jsx("div", { className: `overflow-x-auto ${className}`, children: _jsx("div", { className: needsScroll ? "relative overflow-y-auto" : "", style: needsScroll && maxHeight ? { maxHeight: maxHeight } : undefined, children: _jsxs("table", { className: "w-full border-collapse font-[var(--font-default)]", children: [_jsx("thead", { className: needsScroll ? "sticky top-0 z-10" : "", children: _jsx("tr", { className: twMerge("border-b border-[var(--color-border-default)] text-[var(--color-text-primary)]", headerClassName), children: columns.map((column, index) => {
-                                const headerActions = column.headerActions?.();
-                                const hasHeaderActions = headerActions && headerActions.length > 0;
-                                const headerBgClasses = headerClassName
-                                    .split(/\s+/)
-                                    .filter((cls) => cls.split(":").pop()?.startsWith("bg-"))
-                                    .join(" ");
-                                return (_jsx("th", { className: twMerge(cellPadding, "text-sm font-semibold", headerBgClasses || "bg-[var(--color-bg-secondary)]", getAlignmentClass(column.align, column.type), hasHeaderActions ? "relative" : "", headerCellClassName), style: {
-                                        ...(column.width ? { width: column.width } : {}),
-                                    }, children: isLoading ? (_jsx(SkeletonCell, {})) : hasHeaderActions ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { children: column.header || "" }), _jsx(DropdownMenu, { options: convertActionsToOptions(headerActions), onOptionSelected: () => {
-                                                    // Las acciones ya manejan sus propios eventos
-                                                }, renderOption: (item) => item.content, replaceOnSingleOption: true })] })) : (column.header || "") }, index));
-                            }) }) }), _jsx("tbody", { children: isLoading
-                            ? Array.from({ length: loadingRows }).map((_, rowIndex) => (_jsx("tr", { className: "border-b border-[var(--color-border-default)] text-[var(--color-text-primary)]", children: columns.map((column, colIndex) => (_jsx("td", { className: twMerge(cellPadding, "text-sm", getAlignmentClass(column.align, column.type)), style: {
-                                        ...(column.width ? { width: column.width } : {}),
-                                    }, children: _jsx(SkeletonCell, {}) }, colIndex))) }, `skeleton-${rowIndex}`)))
-                            : rows.map((row, rowIndex) => (_jsx("tr", { className: twMerge("group/row border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-secondary)] text-[var(--color-text-primary)]", rowClassName?.(row)), children: columns.map((column, colIndex) => {
-                                    const cellValue = getCellValue(column, row);
-                                    const formattedValue = formatValue(cellValue, column.type);
-                                    const tooltip = column.tooltip
-                                        ? column.tooltip(row)
-                                        : undefined;
-                                    const rowActions = column.actions?.(row);
-                                    const hasRowActions = rowActions && rowActions.length > 0;
-                                    return (_jsx("td", { className: twMerge(cellPadding, "text-sm", getAlignmentClass(column.align, column.type), typeof cellClassName === "function"
-                                            ? cellClassName(row, column)
-                                            : cellClassName), style: {
-                                            ...(column.width ? { width: column.width } : {}),
-                                        }, title: tooltip
-                                            ? typeof tooltip === "string"
-                                                ? tooltip
-                                                : undefined
-                                            : undefined, children: hasRowActions ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { children: formattedValue }), _jsx("div", { className: "lg:opacity-0 lg:group-hover/row:opacity-100 transition-opacity", children: _jsx(DropdownMenu, { options: convertActionsToOptions(rowActions), onOptionSelected: () => {
-                                                            // Las acciones ya manejan sus propios eventos
-                                                        }, renderOption: (item) => item.content, replaceOnSingleOption: true }) })] })) : (formattedValue) }, colIndex));
-                                }) }, rowIndex))) }), hasFooter && (_jsx("tfoot", { className: needsScroll ? "sticky bottom-0 z-10" : "", children: _jsx("tr", { className: twMerge("border-t border-[var(--color-border-default)] text-[var(--color-text-primary)]", footerClassName), children: columns.map((column, index) => {
-                                const footerBgClasses = footerClassName
-                                    .split(/\s+/)
-                                    .filter((cls) => cls.split(":").pop()?.startsWith("bg-"))
-                                    .join(" ");
-                                return (_jsx("td", { className: twMerge(cellPadding, "text-sm font-semibold", footerBgClasses || "bg-[var(--color-bg-secondary)]", getAlignmentClass(column.align, column.type), footerCellClassName), style: {
-                                        ...(column.width ? { width: column.width } : {}),
-                                    }, children: isLoading ? _jsx(SkeletonCell, {}) : column.footer || "" }, index));
-                            }) }) }))] }) }) }));
-};

package/dist/components/layout/DropdownMenu.js

@@ -1,176 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, useCallback, useMemo, } from "react";
-import { createPortal } from "react-dom";
-import { Button } from "../form-controls/Button";
-export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption = false, openOnHover = false, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [menuPosition, setMenuPosition] = useState("bottom");
-    const [scrollUpdate, setScrollUpdate] = useState(0);
-    const triggerRef = useRef(null);
-    const menuRef = useRef(null);
-    const hoverTimeoutRef = useRef(null);
-    // Calcular posición del menú
-    const calculatePosition = useCallback(() => {
-        if (isOpen && triggerRef.current) {
-            const triggerRect = triggerRef.current.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            // Estimar altura del menú (aproximadamente 40px por opción + padding)
-            const estimatedMenuHeight = options.length * 40 + 16;
-            const menuMargin = 4;
-            // Calcular espacio disponible arriba y abajo
-            const spaceBelow = viewportHeight - triggerRect.bottom - menuMargin;
-            const spaceAbove = triggerRect.top - menuMargin;
-            // Si no hay suficiente espacio abajo pero sí arriba, mostrar arriba
-            // Usamos un margen de seguridad para asegurar que el menú quepa
-            if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {
-                setMenuPosition("top");
-            }
-            else {
-                setMenuPosition("bottom");
-            }
-        }
-    }, [isOpen, options.length]);
-    useEffect(() => {
-        calculatePosition();
-    }, [calculatePosition]);
-    // Recalcular posición al hacer scroll o redimensionar
-    useEffect(() => {
-        if (isOpen) {
-            const handleScroll = () => {
-                calculatePosition();
-                // Forzar actualización del estilo del menú
-                setScrollUpdate((prev) => prev + 1);
-            };
-            window.addEventListener("scroll", handleScroll, true);
-            window.addEventListener("resize", handleScroll);
-            return () => {
-                window.removeEventListener("scroll", handleScroll, true);
-                window.removeEventListener("resize", handleScroll);
-            };
-        }
-    }, [isOpen, calculatePosition]);
-    // Cerrar menú al hacer click fuera
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (isOpen &&
-                triggerRef.current &&
-                menuRef.current &&
-                !triggerRef.current.contains(event.target) &&
-                !menuRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    // Cerrar menú al presionar Escape
-    useEffect(() => {
-        const handleEscape = (event) => {
-            if (event.key === "Escape" && isOpen) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("keydown", handleEscape);
-        }
-        return () => {
-            document.removeEventListener("keydown", handleEscape);
-        };
-    }, [isOpen]);
-    // Limpiar timeout al desmontar
-    useEffect(() => {
-        return () => {
-            if (hoverTimeoutRef.current) {
-                window.clearTimeout(hoverTimeoutRef.current);
-            }
-        };
-    }, []);
-    const labelGetter = useCallback((item) => {
-        if (getOptionLabel)
-            return getOptionLabel(item);
-        const anyItem = item;
-        return (anyItem.label ?? "").toString();
-    }, [getOptionLabel]);
-    const handleToggle = () => {
-        setIsOpen(!isOpen);
-    };
-    const handleMouseEnter = () => {
-        if (!openOnHover)
-            return;
-        if (hoverTimeoutRef.current) {
-            window.clearTimeout(hoverTimeoutRef.current);
-            hoverTimeoutRef.current = null;
-        }
-        setIsOpen(true);
-    };
-    const handleMouseLeave = () => {
-        if (!openOnHover)
-            return;
-        hoverTimeoutRef.current = window.setTimeout(() => {
-            setIsOpen(false);
-        }, 150); // Pequeño delay para permitir mover el mouse al menú
-    };
-    const handleOptionClick = (item) => {
-        setIsOpen(false);
-        onOptionSelected(item);
-    };
-    // Si replaceOnSingleOption es true y hay una sola opción, mostrar directamente la opción
-    const shouldReplace = replaceOnSingleOption && options.length === 1;
-    const singleOption = shouldReplace ? options[0] : null;
-    const menuStyles = useMemo(() => {
-        if (!isOpen || !triggerRef.current) {
-            return {};
-        }
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const menuMargin = 4;
-        // Asegurar que el menú no se salga de la pantalla horizontalmente
-        let leftPosition = triggerRect.left;
-        const menuMinWidth = 160;
-        const viewportWidth = window.innerWidth;
-        // Si el menú se sale por la derecha, ajustar la posición
-        if (leftPosition + menuMinWidth > viewportWidth) {
-            leftPosition = viewportWidth - menuMinWidth - 8; // 8px de margen
-        }
-        // Asegurar que no se salga por la izquierda
-        if (leftPosition < 8) {
-            leftPosition = 8;
-        }
-        if (menuPosition === "top") {
-            return {
-                position: "fixed",
-                bottom: window.innerHeight - triggerRect.top + menuMargin,
-                left: leftPosition,
-                minWidth: Math.max(triggerRect.width, menuMinWidth),
-            };
-        }
-        else {
-            return {
-                position: "fixed",
-                top: triggerRect.bottom + menuMargin,
-                left: leftPosition,
-                minWidth: Math.max(triggerRect.width, menuMinWidth),
-            };
-        }
-        // scrollUpdate se usa intencionalmente para forzar el recálculo en scroll
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen, menuPosition, scrollUpdate]);
-    // Si debe reemplazar con la opción única, mostrar directamente la opción
-    if (shouldReplace && singleOption) {
-        return (_jsx("div", { onClick: () => handleOptionClick(singleOption), className: "cursor-pointer", children: renderOption ? renderOption(singleOption) : labelGetter(singleOption) }));
-    }
-    return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
-                (typeof document !== "undefined" && document.body
-                    ? createPortal(_jsx("div", { ref: menuRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: (e) => e.stopPropagation(), className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: options.map((option, index) => {
-                            const key = String(option?.id ??
-                                labelGetter(option) ??
-                                index);
-                            return (_jsx("div", { onClick: () => handleOptionClick(option), className: "px-4 py-2 text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer transition-colors flex items-center", children: renderOption
-                                    ? renderOption(option)
-                                    : labelGetter(option) }, key));
-                        }) }), document.body)
-                    : null)] }));
-};

package/dist/components/layout/DropdownPanel.js

@@ -1,162 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, useCallback, useMemo, } from "react";
-import { createPortal } from "react-dom";
-import { Button } from "../form-controls/Button";
-export const DropdownPanel = ({ renderNode, children, openOnHover = false, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [menuPosition, setMenuPosition] = useState("bottom");
-    const [scrollUpdate, setScrollUpdate] = useState(0);
-    const triggerRef = useRef(null);
-    const menuRef = useRef(null);
-    const hoverTimeoutRef = useRef(null);
-    // Calcular posición del menú
-    const calculatePosition = useCallback(() => {
-        if (isOpen && triggerRef.current) {
-            const triggerRect = triggerRef.current.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            // Intentar obtener la altura real del menú, o usar una estimación si no está montado aún
-            let menuHeight = 200; // valor por defecto
-            if (menuRef.current) {
-                menuHeight = menuRef.current.getBoundingClientRect().height;
-            }
-            const menuMargin = 4;
-            // Calcular espacio disponible arriba y abajo
-            const spaceBelow = viewportHeight - triggerRect.bottom - menuMargin;
-            const spaceAbove = triggerRect.top - menuMargin;
-            // Si no hay suficiente espacio abajo pero sí arriba, mostrar arriba
-            if (spaceBelow < menuHeight && spaceAbove > spaceBelow) {
-                setMenuPosition("top");
-            }
-            else {
-                setMenuPosition("bottom"); // Preferir abajo si cabe o si es el que más espacio tiene, o por defecto
-            }
-        }
-    }, [isOpen]);
-    // Recalcular posición cuando cambia isOpen (y cuando el contenido podría haber cambiado el tamaño)
-    useEffect(() => {
-        calculatePosition();
-        // Podríamos necesitar un ResizeObserver para ser más robustos si el contenido cambia
-    }, [calculatePosition]);
-    // Recalcular posición al hacer scroll o redimensionar
-    useEffect(() => {
-        if (isOpen) {
-            const handleScroll = () => {
-                calculatePosition();
-                // Forzar actualización del estilo del menú
-                setScrollUpdate((prev) => prev + 1);
-            };
-            window.addEventListener("scroll", handleScroll, true);
-            window.addEventListener("resize", handleScroll);
-            return () => {
-                window.removeEventListener("scroll", handleScroll, true);
-                window.removeEventListener("resize", handleScroll);
-            };
-        }
-    }, [isOpen, calculatePosition]);
-    // Cerrar menú al hacer click fuera
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (isOpen &&
-                triggerRef.current &&
-                menuRef.current &&
-                !triggerRef.current.contains(event.target) &&
-                !menuRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    // Cerrar menú al presionar Escape
-    useEffect(() => {
-        const handleEscape = (event) => {
-            if (event.key === "Escape" && isOpen) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("keydown", handleEscape);
-        }
-        return () => {
-            document.removeEventListener("keydown", handleEscape);
-        };
-    }, [isOpen]);
-    // Limpiar timeout al desmontar
-    useEffect(() => {
-        return () => {
-            if (hoverTimeoutRef.current) {
-                window.clearTimeout(hoverTimeoutRef.current);
-            }
-        };
-    }, []);
-    const handleToggle = () => {
-        setIsOpen(!isOpen);
-    };
-    const handleMouseEnter = () => {
-        if (!openOnHover)
-            return;
-        if (hoverTimeoutRef.current) {
-            window.clearTimeout(hoverTimeoutRef.current);
-            hoverTimeoutRef.current = null;
-        }
-        setIsOpen(true);
-    };
-    const handleMouseLeave = () => {
-        if (!openOnHover)
-            return;
-        hoverTimeoutRef.current = window.setTimeout(() => {
-            setIsOpen(false);
-        }, 150); // Pequeño delay para permitir mover el mouse al panel
-    };
-    const menuStyles = useMemo(() => {
-        if (!isOpen || !triggerRef.current) {
-            return {};
-        }
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const menuMargin = 4;
-        // Asegurar que el menú no se salga de la pantalla horizontalmente
-        let leftPosition = triggerRect.left;
-        const menuMinWidth = 160;
-        const viewportWidth = window.innerWidth;
-        // Si el menú se sale por la derecha, ajustar la posición
-        // Nota: Como el ancho es dinámico (basado en children), idealmente deberíamos medirlo.
-        // Usaremos menuRef si está disponible o un estimado.
-        let currentMenuWidth = menuMinWidth;
-        if (menuRef.current) {
-            currentMenuWidth = menuRef.current.getBoundingClientRect().width;
-        }
-        if (leftPosition + currentMenuWidth > viewportWidth) {
-            leftPosition = viewportWidth - currentMenuWidth - 8; // 8px de margen
-        }
-        // Asegurar que no se salga por la izquierda
-        if (leftPosition < 8) {
-            leftPosition = 8;
-        }
-        if (menuPosition === "top") {
-            return {
-                position: "fixed",
-                bottom: window.innerHeight - triggerRect.top + menuMargin,
-                left: leftPosition,
-                minWidth: Math.max(triggerRect.width, menuMinWidth), // Mantener el minWidth del trigger o 160
-            };
-        }
-        else {
-            return {
-                position: "fixed",
-                top: triggerRect.bottom + menuMargin,
-                left: leftPosition,
-                minWidth: Math.max(triggerRect.width, menuMinWidth),
-            };
-        }
-        // scrollUpdate se usa intencionalmente para forzar el recálculo en scroll
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen, menuPosition, scrollUpdate]);
-    return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
-                (typeof document !== "undefined" && document.body
-                    ? createPortal(_jsx("div", { ref: menuRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: (e) => e.stopPropagation(), className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: children }), document.body)
-                    : null)] }));
-};