eai-frontend-components 2.0.83 → 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> {
@@ -1113,13 +1113,32 @@ interface OrgChartNodeData {
     children?: OrgChartNodeData[];
     data?: Record<string, unknown>;
 }
+interface NodeCardProps {
+    node: OrgChartNodeData;
+    onNodeClick?: (node: OrgChartNodeData) => void;
+    isExpanded: boolean;
+    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 }: 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;
@@ -1800,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

@@ -10144,19 +10144,38 @@ function NodeCard({ node, onNodeClick, isExpanded, hasChildren, onToggle }) {
                             onToggle();
                         }, children: isExpanded ? jsx(ChevronUp, { className: 'h-3 w-3' }) : jsx(ChevronDown, { className: 'h-3 w-3' }) }) }))] }) }));
 }
-function OrgChartTreeNode({ node, onNodeClick, defaultExpanded }) {
+function OrgChartTreeNode({ node, onNodeClick, defaultExpanded, renderNode }) {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const children = node.children ?? [];
     const hasChildren = children.length > 0;
-    return (jsxs("div", { className: 'flex flex-col items-center', children: [jsx(NodeCard, { node: node, onNodeClick: onNodeClick, isExpanded: isExpanded, hasChildren: hasChildren, onToggle: () => setIsExpanded((prev) => !prev) }), hasChildren && isExpanded && (jsxs(Fragment, { children: [jsx("div", { className: 'h-4 w-px bg-border' }), jsx("div", { className: 'flex items-start', children: children.map((child, i) => {
+    const cardProps = {
+        node,
+        onNodeClick,
+        isExpanded,
+        hasChildren,
+        onToggle: () => setIsExpanded((prev) => !prev),
+    };
+    return (jsxs("div", { className: 'flex flex-col items-center', children: [renderNode ? renderNode(cardProps) : jsx(NodeCard, { ...cardProps }), hasChildren && isExpanded && (jsxs(Fragment, { children: [jsx("div", { className: 'h-4 w-px bg-border' }), jsx("div", { className: 'flex items-start', children: children.map((child, i) => {
                             const isOnly = children.length === 1;
                             const isFirst = i === 0;
                             const isLast = i === children.length - 1;
-                            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 })] }, child.id));
+                            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 }) {
-    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 }) }) }));
+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) {