eai-frontend-components 2.0.79 → 2.0.81

package/dist/index.d.ts

@@ -80,7 +80,7 @@ declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitiv
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "outline" | "destructive" | "secondary" | "surface" | "green" | "red" | "gray" | "blue" | "orange" | "yellow" | null | undefined;
+    variant?: "default" | "secondary" | "surface" | "destructive" | "outline" | "green" | "red" | "gray" | "blue" | "orange" | "yellow" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
@@ -105,7 +105,7 @@ declare const BreadcrumbEllipsis: {
 };
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "primary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "primary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -208,7 +208,7 @@ declare const Command: React$1.ForwardRefExoticComponent<Omit<{
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -224,7 +224,7 @@ declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pic
     ref?: React$1.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
@@ -234,7 +234,7 @@ declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
@@ -243,14 +243,14 @@ declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
 } & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React$1.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -259,7 +259,7 @@ declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
@@ -268,7 +268,7 @@ declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -883,7 +883,7 @@ interface Props$8 {
 declare const FormInputMask: React.FC<Props$8>;
 
 declare const multiSelectVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "inverted" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "inverted" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface MultiSelectOption {
     value: string;
@@ -1234,6 +1234,7 @@ interface DataTableProps<TData> {
     textNoRecords?: string;
     heightRemainingScroll?: number;
     hideFilterField?: boolean;
+    defaultSearch?: string;
     multiRowSelection?: {
         callback: (selectedRows: any[]) => void;
     };
@@ -1246,7 +1247,7 @@ interface OriginalDataTableData {
     id: string;
     checked?: boolean;
 }
-declare function DataTable<TData>({ columns, data, className, title, rowsPage, actions, actionsRow, customFilters, setSearch, pageChanged, pageSizeChanged, totalRows, filtersActions, exportData, textNoRecords, heightRemainingScroll, hideFilterField, multiRowSelection, hidePagination, disablePagination, isLoading, fixedHeight, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData>({ columns, data, className, title, rowsPage, actions, actionsRow, customFilters, setSearch, pageChanged, pageSizeChanged, totalRows, filtersActions, exportData, textNoRecords, heightRemainingScroll, hideFilterField, defaultSearch, multiRowSelection, hidePagination, disablePagination, isLoading, fixedHeight, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface DataTableExportProps {
     exportData?: ExportDataTable;

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 = () => {
@@ -10487,7 +10505,7 @@ function DataTableRows({ table, isLoading, columns, actionsRow, textNoRecords, e
     return isLoading ? renderLoadingRows() : rows.length ? renderRows() : renderEmptyRows();
 }
 
-function DataTable({ columns, data, className, title, rowsPage, actions, actionsRow, customFilters, setSearch, pageChanged, pageSizeChanged, totalRows, filtersActions, exportData, textNoRecords, heightRemainingScroll, hideFilterField, multiRowSelection, hidePagination, disablePagination, isLoading, fixedHeight, }) {
+function DataTable({ columns, data, className, title, rowsPage, actions, actionsRow, customFilters, setSearch, pageChanged, pageSizeChanged, totalRows, filtersActions, exportData, textNoRecords, heightRemainingScroll, hideFilterField, defaultSearch, multiRowSelection, hidePagination, disablePagination, isLoading, fixedHeight, }) {
     const [sorting, setSorting] = useState([]);
     const [pagination, setPagination] = useState({
         pageIndex: 0,
@@ -10529,6 +10547,11 @@ function DataTable({ columns, data, className, title, rowsPage, actions, actions
             setPagination({ ...pagination, pageIndex: 0 });
         }
     }, [data]);
+    useEffect(() => {
+        if (defaultSearch) {
+            setSearch?.(defaultSearch);
+        }
+    }, []);
     useEffect(() => {
         handleResize();
         window.addEventListener('resize', handleResize);
@@ -10571,7 +10594,7 @@ function DataTable({ columns, data, className, title, rowsPage, actions, actions
             setPagination({ ...pagination, pageIndex: index });
         }
     };
-    return (jsxs("div", { className: 'flex flex-col flex-1', children: [(!hideFilterField || filtersActions || customFilters || actions) && (jsxs("div", { className: 'flex items-end justify-between mb-4 space-x-6', children: [jsxs("div", { className: 'flex items-center gap-x-4', children: [(!hideFilterField || customFilters) && (jsxs("div", { className: 'flex gap-x-4', children: [!hideFilterField && (jsxs("div", { className: 'flex bg-background items-center border border-slate-300 rounded-sm w-[350px] overflow-hidden focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 group', children: [jsx("div", { className: 'pl-3.5 transform transition-transform duration-300 group-hover:-translate-x-1', children: jsx(Search, { size: 18, className: 'w-5 h-5 stroke-zinc-500 dark:stroke-default' }) }), jsx("input", { placeholder: 'Buscar', onChange: (event) => {
+    return (jsxs("div", { className: 'flex flex-col flex-1', children: [(!hideFilterField || filtersActions || customFilters || actions) && (jsxs("div", { className: 'flex items-end justify-between mb-4 space-x-6', children: [jsxs("div", { className: 'flex items-center gap-x-4', children: [(!hideFilterField || customFilters) && (jsxs("div", { className: 'flex gap-x-4', children: [!hideFilterField && (jsxs("div", { className: 'flex bg-background items-center border border-slate-300 rounded-sm w-[350px] overflow-hidden focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 group', children: [jsx("div", { className: 'pl-3.5 transform transition-transform duration-300 group-hover:-translate-x-1', children: jsx(Search, { size: 18, className: 'w-5 h-5 stroke-zinc-500 dark:stroke-default' }) }), jsx("input", { placeholder: 'Buscar', defaultValue: defaultSearch, onChange: (event) => {
                                                     handleSearchChange(event);
                                                 }, className: 'w-full bg-background text-default border-none focus:ring-0 focus:outline-none px-3 py-2 transform transition-transform duration-300 group-hover:-translate-x-1 ' })] })), customFilters] })), filtersActions && (jsxs(Sheet, { open: filtersActions.filterOpen, onOpenChange: filtersActions.setFilterOpen, children: [jsx(SheetTrigger, { asChild: true, children: jsxs(Button, { variant: 'secondary', type: 'button', children: [jsx(Filter, { size: 20, className: 'h-4 w-4' }), " Filtros", filtersActions.countFilters > 0 && (jsx("div", { className: 'bg-background-primary text-white rounded-full h-5 w-5 flex items-center justify-center text-sm placeholder:text-muted-foreground', children: filtersActions.countFilters }))] }) }), jsxs(SheetContent, { children: [jsxs(SheetHeader, { children: [jsx(SheetTitle, { children: "Filtros" }), jsx(SheetDescription, {})] }), jsx("div", { className: 'flex flex-col py-6', children: filtersActions.fields })] })] }))] }), jsx("div", { className: 'flex space-x-4 content-end', children: actions?.map((action, index) => (jsx("div", { children: jsxs(Button, { type: 'button', onClick: () => action.onClick?.(selectedIds, selectedRows), className: cn(action.className, action.hideUnselectedRows && selectedRows.length === 0 ? 'hidden' : ''), variant: action.variant || 'default', disabled: action.disabled, children: [jsx("div", { className: '[&_svg]:size-5', children: action.icon }), action.label] }) }, `action-table-${index}`))) })] })), jsxs("div", { className: `flex-1 flex flex-col rounded-md border ${className}`, children: [jsx("div", { className: 'flex items-center justify-between', children: title && jsx("div", { className: 'text-h4 p-4', children: title }) }), jsx("div", { id: 'data-table', ref: tableContainerRef, style: fixedHeight ? { height: fixedHeight } : { height: tableHeight }, className: 'flex flex-col justify-between rounded-md overflow-x-auto overflow-y-auto', children: jsxs(Table, { children: [jsx(DataTableHeader, { table: table, canActionsRow: actionsRow && actionsRow.length > 0, enableMultiRowSelection: enableMultiRowSelection }), jsx(TableBody, { className: 'bg-background', children: jsx(DataTableRows, { table: table, columns: columns, isLoading: isLoading, actionsRow: actionsRow, textNoRecords: textNoRecords, enableMultiRowSelection: enableMultiRowSelection }) })] }) })] }), jsx(DataTableFooter, { hidePagination: hidePagination, disablePagination: disablePagination, isLoading: isLoading, totalRows: totalRows, totalPages: totalPages, currentPage: currentPage, pagination: pagination, handlePageSize: handlePageSize, handlePage: handlePage, previousPage: { action: () => table.previousPage(), disabled: !table.getCanPreviousPage() }, nextPage: { action: () => table.nextPage(), disabled: !table.getCanNextPage() }, exportData: exportData })] }));
 }