eai-frontend-components 2.0.84 → 2.0.86

package/dist/index.js

@@ -10202,8 +10202,20 @@ function OrgChartTreeNode({ node, onNodeClick, defaultExpanded, renderNode }) {
                             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, renderNode }) {
-    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, renderNode: renderNode }) }) }));
+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-end justify-between mb-4 space-x-6', 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) {