eai-frontend-components 2.0.80 → 2.0.81

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown, MoreHorizontal, ChevronRight, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ArrowLeft, ArrowRight, Check, X, Search, Circle, CalendarIcon, ChevronLeft, ChevronUp, PanelLeft, CircleX, CalendarDays, CircleHelp, Paintbrush, ChevronsUpDown, LoaderCircle, CheckIcon, EyeOff, Eye, Copy, BarChart2, LogOut, MoveUp, MoveDown, ArrowUpDown, Filter } from 'lucide-react';
 import * as React$1 from 'react';
-import React__default, { useState, useEffect, createContext, useContext, useRef, forwardRef, useImperativeHandle } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
 import clsx$1, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -10104,6 +10104,24 @@ const Header = ({ splittedPath, modules, pages, isLoading, combobox, }) => {
     return (jsxs("header", { className: 'flex flex-col justify-between items-center w-full', children: [jsxs("div", { className: 'flex justify-between items-center py-3 px-5 w-full', children: [jsxs("div", { className: 'flex items-center gap-x-2 h-[40px]', children: [jsx(SidebarTrigger, { className: 'p-5' }), jsx("div", { className: 'p-2', children: jsx(Breadcrumb, { children: jsx(BreadcrumbList, { children: renderBreadcrumbItens() }) }) })] }), jsx("div", { className: 'flex items-center', children: combobox })] }), jsx(LoadingBar, { ref: refProgressLoading, color: getColorLoadingBar(), height: 7 })] }));
 };
 
+const TruncatedText = ({ text }) => {
+    const ref = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const check = () => setIsTruncated(el.scrollWidth > el.clientWidth);
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [text]);
+    const inner = (jsx("div", { ref: ref, className: 'text-zinc-500 truncate', children: text }));
+    if (!isTruncated)
+        return inner;
+    return (jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: inner }), jsx(TooltipContent, { children: text })] }) }));
+};
 const LabelWithTitle = ({ title, value, value2, required, showCopyIcon = false, className, isLoading, hoverAction, }) => {
     const handleCopy = () => {
         if (showCopyIcon && value) {
@@ -10114,7 +10132,7 @@ const LabelWithTitle = ({ title, value, value2, required, showCopyIcon = false,
             });
         }
     };
-    return (jsx("div", { className: cn('flex group', className), children: jsx("div", { className: cn('flex flex-col text-sm w-full', showCopyIcon || hoverAction ? 'p-1 rounded-md transition-colors group-hover:bg-sidebar-accent' : 'p-1'), children: jsxs("div", { className: 'relative', children: [jsxs("div", { className: 'flex items-center text-sm font-medium gap-0.5', children: [jsx("span", { className: 'text-default truncate', children: title }), required && jsx("div", { className: 'text-red-500 truncate', children: "*" })] }), jsx("div", { className: 'grid flex-1 items-center pt-1', children: isLoading ? jsx(Skeleton, { className: 'h-5 w-full rounded-lg' }) : jsx("div", { className: 'text-zinc-500 truncate', children: value }) }), value2 && (jsx("div", { className: 'grid flex-1 items-center pt-1', children: isLoading ? jsx(Skeleton, { className: 'h-5 w-full rounded-lg' }) : jsx("div", { className: 'text-zinc-500 truncate', children: value2 }) })), showCopyIcon && (jsx("div", { className: cn('absolute top-1/2 right-0 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100'), children: jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: 'ghost', type: 'button', className: cn('p-1 h-10 w-8 bg-sidebar-accent'), onClick: handleCopy, children: jsx(Copy, { size: 16 }) }) }), jsx(TooltipContent, { children: "Copiar" })] }) }) })), hoverAction && (jsx("div", { className: cn('absolute top-1/2 right-0 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100'), children: jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: 'ghost', type: 'button', className: cn('p-1 h-10 w-8 bg-sidebar-accent'), onClick: hoverAction.onClick, children: hoverAction.icon }) }), jsx(TooltipContent, { children: hoverAction.tooltip })] }) }) }))] }) }) }));
+    return (jsx("div", { className: cn('flex group', className), children: jsx("div", { className: cn('flex flex-col text-sm w-full', showCopyIcon || hoverAction ? 'p-1 rounded-md transition-colors group-hover:bg-sidebar-accent' : 'p-1'), children: jsxs("div", { className: 'relative', children: [jsxs("div", { className: 'flex items-center text-sm font-medium gap-0.5', children: [jsx("span", { className: 'text-default truncate', children: title }), required && jsx("div", { className: 'text-red-500 truncate', children: "*" })] }), jsx("div", { className: 'grid flex-1 items-center pt-1', children: isLoading ? jsx(Skeleton, { className: 'h-5 w-full rounded-lg' }) : jsx(TruncatedText, { text: value }) }), value2 && (jsx("div", { className: 'grid flex-1 items-center pt-1', children: isLoading ? jsx(Skeleton, { className: 'h-5 w-full rounded-lg' }) : jsx(TruncatedText, { text: value2 }) })), showCopyIcon && (jsx("div", { className: cn('absolute top-1/2 right-0 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100'), children: jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: 'ghost', type: 'button', className: cn('p-1 h-10 w-8 bg-sidebar-accent'), onClick: handleCopy, children: jsx(Copy, { size: 16 }) }) }), jsx(TooltipContent, { children: "Copiar" })] }) }) })), hoverAction && (jsx("div", { className: cn('absolute top-1/2 right-0 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100'), children: jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: 'ghost', type: 'button', className: cn('p-1 h-10 w-8 bg-sidebar-accent'), onClick: hoverAction.onClick, children: hoverAction.icon }) }), jsx(TooltipContent, { children: hoverAction.tooltip })] }) }) }))] }) }) }));
 };
 
 const NotFound = () => {