eai-frontend-components 2.0.83 → 2.0.85

package/dist/index.js

@@ -10184,19 +10184,38 @@ function NodeCard({ node, onNodeClick, isExpanded, hasChildren, onToggle }) {
                             onToggle();
                         }, children: isExpanded ? jsxRuntime.jsx(lucideReact.ChevronUp, { className: 'h-3 w-3' }) : jsxRuntime.jsx(lucideReact.ChevronDown, { className: 'h-3 w-3' }) }) }))] }) }));
 }
-function OrgChartTreeNode({ node, onNodeClick, defaultExpanded }) {
+function OrgChartTreeNode({ node, onNodeClick, defaultExpanded, renderNode }) {
     const [isExpanded, setIsExpanded] = React$1.useState(defaultExpanded);
     const children = node.children ?? [];
     const hasChildren = children.length > 0;
-    return (jsxRuntime.jsxs("div", { className: 'flex flex-col items-center', children: [jsxRuntime.jsx(NodeCard, { node: node, onNodeClick: onNodeClick, isExpanded: isExpanded, hasChildren: hasChildren, onToggle: () => setIsExpanded((prev) => !prev) }), hasChildren && isExpanded && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'h-4 w-px bg-border' }), jsxRuntime.jsx("div", { className: 'flex items-start', children: children.map((child, i) => {
+    const cardProps = {
+        node,
+        onNodeClick,
+        isExpanded,
+        hasChildren,
+        onToggle: () => setIsExpanded((prev) => !prev),
+    };
+    return (jsxRuntime.jsxs("div", { className: 'flex flex-col items-center', children: [renderNode ? renderNode(cardProps) : jsxRuntime.jsx(NodeCard, { ...cardProps }), hasChildren && isExpanded && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'h-4 w-px bg-border' }), jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.jsx("div", { className: 'h-4 w-px bg-border' }), jsxRuntime.jsx(OrgChartTreeNode, { node: child, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded })] }, child.id));
+                            return (jsxRuntime.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: [jsxRuntime.jsx("div", { className: 'h-4 w-px bg-border' }), jsxRuntime.jsx(OrgChartTreeNode, { node: child, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded, renderNode: renderNode })] }, child.id));
                         }) })] }))] }));
 }
-function OrgChart({ data, onNodeClick, defaultExpanded = true, className }) {
-    return (jsxRuntime.jsx("div", { className: cn('w-full overflow-x-auto', className), children: jsxRuntime.jsx("div", { className: 'flex justify-center px-4 py-6', children: jsxRuntime.jsx(OrgChartTreeNode, { node: data, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded }) }) }));
+function OrgChart({ defaultSearch, setSearch, actions, data, onNodeClick, defaultExpanded = true, className, renderNode }) {
+    const debounceTimeout = React$1.useRef(null);
+    const handleSearchChange = (event) => {
+        const value = event.currentTarget.value;
+        if (debounceTimeout.current) {
+            clearTimeout(debounceTimeout.current);
+        }
+        debounceTimeout.current = setTimeout(() => {
+            setSearch?.(value);
+        }, 300);
+    };
+    return (jsxRuntime.jsxs("div", { className: 'flex h-full flex-col gap-4 overflow-x-auto', children: [jsxRuntime.jsxs("div", { className: 'flex items-center gap-x-4', children: [jsxRuntime.jsx("div", { className: 'flex gap-x-4', children: jsxRuntime.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: [jsxRuntime.jsx("div", { className: 'pl-3.5 transform transition-transform duration-300 group-hover:-translate-x-1', children: jsxRuntime.jsx(lucideReact.Search, { size: 18, className: 'w-5 h-5 stroke-zinc-500 dark:stroke-default' }) }), jsxRuntime.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 ' })] }) }), jsxRuntime.jsx("div", { className: 'flex space-x-4 content-end', children: actions?.map((action, index) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Button, { type: 'button', onClick: () => action.onClick?.(), className: cn(action.className), variant: action.variant || 'default', disabled: action.disabled, children: [jsxRuntime.jsx("div", { className: '[&_svg]:size-5', children: action.icon }), action.label] }) }, `action-table-${index}`))) })] }), jsxRuntime.jsx(Card, { className: 'flex-1 overflow-hidden', children: jsxRuntime.jsx(CardContent, { className: 'h-full p-0', children: jsxRuntime.jsx("div", { className: cn('w-full overflow-x-auto', className), children: jsxRuntime.jsx("div", { className: 'flex justify-center px-4 py-6', children: jsxRuntime.jsx(OrgChartTreeNode, { node: data, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded, renderNode: renderNode }) }) }) }) })] }));
 }
 
 function useMediaQuery(queryInput) {