eai-frontend-components 2.0.84 → 2.0.85

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" | "secondary" | "surface" | "destructive" | "outline" | "green" | "red" | "gray" | "blue" | "orange" | "yellow" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "surface" | "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" | "secondary" | "destructive" | "outline" | "primary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "primary" | "secondary" | "destructive" | "outline" | "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> {
@@ -1120,14 +1120,25 @@ interface NodeCardProps {
     hasChildren: boolean;
     onToggle: () => void;
 }
+type ActionOrgChart = {
+    label: string;
+    icon?: JSX.Element;
+    variant?: string;
+    onClick?: () => void;
+    className?: string;
+    disabled?: boolean;
+};
 interface OrgChartProps {
+    defaultSearch?: string;
+    setSearch?: (value?: string) => void;
+    actions?: ActionOrgChart[];
     data: OrgChartNodeData;
     onNodeClick?: (node: OrgChartNodeData) => void;
     defaultExpanded?: boolean;
     className?: string;
     renderNode?: (props: NodeCardProps) => ReactNode;
 }
-declare function OrgChart({ data, onNodeClick, defaultExpanded, className, renderNode }: OrgChartProps): react_jsx_runtime.JSX.Element;
+declare function OrgChart({ defaultSearch, setSearch, actions, data, onNodeClick, defaultExpanded, className, renderNode }: OrgChartProps): react_jsx_runtime.JSX.Element;
 
 type ResponsiveDialogAction = {
     label: string;
@@ -1808,4 +1819,4 @@ declare function isUUIDv4(str: string): boolean;
 declare function cn(...inputs: ClassValue[]): string;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_THEME_DATA, DataTable, DataTableExport, DataTableFooter, DataTableHeader, DataTableRows, DatePickerWithRange as DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormCombobox, FormControl, FormDataRange, FormDescription, FormField, FormInput, FormInputCheckbox, FormInputColor, FormInputCpfCnpj, FormInputCurrency, FormInputDate, FormInputDecimal, FormInputFile, FormInputGhost, FormInputMask, FormInputPassWord, FormInputPercent, FormInputPhone, FormInputSwitch, FormInputText, FormItem, FormLabel, FormMessage, FormRadioGroup, FormSelect, FormTextarea, Header, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, LabelWithTitle, ModuleSwitcher, MultiSelect, NavFooter, NavMain, NavSubmenuCollapsible, NavSubmenuDropdown, NavUser, NotFound, OrgChart, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResponsiveDialog, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarItem, SidebarItemTwoLines, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSubmenuType, SidebarTrigger, Skeleton, Slider, StepNewForm, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toast$1 as Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UseCalendar, aYearAgo, addDaysToToday, badgeVariants, buttonVariants, cn, convertBytesToMB, convertDaysToMonth, convertGbToMb, convertInternetToDisplay, convertMbToGb, convertMonthToDays, convertSecondsToMinutes, formHelpText, formLabel, formLabelAndSubLabel, formMessage, formatCEP, formatCpfCnpj, formatCurrency, formatDate, formatDateCalendar, formatDateTime, formatDecimal, formatMsisdn, formatNumber, formatPercent, formatPhone, getFirstDayOf90DaysAgo, getFirstDayOfCurrentMonth, getTailwindColorShades, invertDate, isDateRangeValid, isInvalidCurrencyValue, isUUIDv4, isValidDate, maskCpfCnpj, maskPhone, modifyCpfCnpj, modifyPhone, removeMaskNumber, replaceThemeTailwindColors, roundNumber, stringDateToDate, stringToDate, stringToNumber, toast, useDownload, useFormField, useSidebar, useTheme, useToast };
-export type { ActionRow, ActionTable, ButtonProps, CalendarProps, CarouselApi, ChartConfig, ComboboxOption, DataTableProps, ExportDataTable, FiltersActions, MaskModifyFunction, Module, MultiSelectOption, OrgChartNodeBadge, OrgChartNodeData, OrgChartProps, OriginalDataTableData, PropsStepNewForm, RadioOption, ResponsiveDialogAction, ResponsiveDialogRef, SelectOption, SidebarPage, TailwindColorName };
+export type { ActionOrgChart, ActionRow, ActionTable, ButtonProps, CalendarProps, CarouselApi, ChartConfig, ComboboxOption, DataTableProps, ExportDataTable, FiltersActions, MaskModifyFunction, Module, MultiSelectOption, OrgChartNodeBadge, OrgChartNodeData, OrgChartProps, OriginalDataTableData, PropsStepNewForm, RadioOption, ResponsiveDialogAction, ResponsiveDialogRef, SelectOption, SidebarPage, TailwindColorName };

package/dist/index.esm.js

@@ -10162,8 +10162,20 @@ function OrgChartTreeNode({ node, onNodeClick, defaultExpanded, renderNode }) {
                             return (jsxs("div", { className: cn('relative flex flex-col items-center px-4', !isOnly && "after:absolute after:top-0 after:h-px after:bg-border after:content-['']", !isOnly && isFirst && 'after:-right-4 after:left-1/2', !isOnly && isLast && 'after:-left-4 after:right-1/2', !isOnly && !isFirst && !isLast && 'after:-left-4 after:-right-4'), children: [jsx("div", { className: 'h-4 w-px bg-border' }), jsx(OrgChartTreeNode, { node: child, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded, renderNode: renderNode })] }, child.id));
                         }) })] }))] }));
 }
-function OrgChart({ data, onNodeClick, defaultExpanded = true, className, renderNode }) {
-    return (jsx("div", { className: cn('w-full overflow-x-auto', className), children: jsx("div", { className: 'flex justify-center px-4 py-6', children: jsx(OrgChartTreeNode, { node: data, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded, renderNode: renderNode }) }) }));
+function OrgChart({ defaultSearch, setSearch, actions, data, onNodeClick, defaultExpanded = true, className, renderNode }) {
+    const debounceTimeout = useRef(null);
+    const handleSearchChange = (event) => {
+        const value = event.currentTarget.value;
+        if (debounceTimeout.current) {
+            clearTimeout(debounceTimeout.current);
+        }
+        debounceTimeout.current = setTimeout(() => {
+            setSearch?.(value);
+        }, 300);
+    };
+    return (jsxs("div", { className: 'flex h-full flex-col gap-4 overflow-x-auto', children: [jsxs("div", { className: 'flex items-center gap-x-4', children: [jsx("div", { className: 'flex gap-x-4', children: 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 ' })] }) }), jsx("div", { className: 'flex space-x-4 content-end', children: actions?.map((action, index) => (jsx("div", { children: jsxs(Button, { type: 'button', onClick: () => action.onClick?.(), className: cn(action.className), variant: action.variant || 'default', disabled: action.disabled, children: [jsx("div", { className: '[&_svg]:size-5', children: action.icon }), action.label] }) }, `action-table-${index}`))) })] }), jsx(Card, { className: 'flex-1 overflow-hidden', children: jsx(CardContent, { className: 'h-full p-0', children: jsx("div", { className: cn('w-full overflow-x-auto', className), children: jsx("div", { className: 'flex justify-center px-4 py-6', children: jsx(OrgChartTreeNode, { node: data, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded, renderNode: renderNode }) }) }) }) })] }));
 }
 
 function useMediaQuery(queryInput) {