react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/components/TreeSelect/TreeSelect.js

@@ -1 +1,303 @@
-"use strict";"use client";import{jsx as a,jsxs as x,Fragment as Le}from"react/jsx-runtime";import sn,{forwardRef as on,useState as O,useRef as we,useCallback as C,useEffect as X,useMemo as ve}from"react";import{TreeSelectRoot as cn,Selector as dn,Prefix as un,SearchInput as hn,Placeholder as fn,SelectedValue as pn,Tag as gn,TagLabel as mn,TagClose as kn,MaxTagPlaceholder as bn,Suffix as xn,ArrowIcon as Cn,ClearButton as yn,Dropdown as $n,TreeContainer as Ln,TreeNode as wn,ExpandIcon as vn,LeafIndent as Nn,Checkbox as Sn,NodeIcon as Vn,NodeTitle as Tn,EmptyState as In}from"./elements";import{useExpandedState as En,useCheckedState as Mn,useAsyncLoading as Bn,filterTree as An,findNodeByValue as S,getFieldValue as p,getDescendantValues as Fn}from"./hooks";const zn=()=>a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:a("path",{d:"M6 9l6 6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})}),Dn=()=>a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:a("path",{d:"M9 6l6 6-6 6",strokeLinecap:"round",strokeLinejoin:"round"})}),Ne=()=>a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:a("path",{d:"M18 6L6 18M6 6l12 12",strokeLinecap:"round",strokeLinejoin:"round"})}),Pn=()=>a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:a("path",{d:"M5 12l5 5L20 7",strokeLinecap:"round",strokeLinejoin:"round"})}),On=()=>a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:a("path",{d:"M5 12h14",strokeLinecap:"round"})}),Rn=()=>x("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[a("circle",{cx:"12",cy:"12",r:"10",strokeOpacity:"0.25"}),a("path",{d:"M12 2a10 10 0 0 1 10 10",strokeLinecap:"round"})]}),Wn=()=>a("svg",{viewBox:"0 0 24 24",fill:"currentColor",children:a("path",{d:"M2 6a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6z"})}),jn=()=>x("svg",{viewBox:"0 0 24 24",fill:"currentColor",children:[a("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"}),a("path",{d:"M14 2v6h6",fill:"none",stroke:"currentColor",strokeWidth:"1"})]});export const TreeSelect=on(function(Se,A){const{treeData:i,value:g,defaultValue:V,mode:R="single",placeholder:Y="Please select",disabled:m=!1,showSearch:W=!1,filterTreeNode:Z,treeNodeFilterProp:ee="title",treeLine:ne=!1,showTreeIcon:Ve=!1,checkable:Te=!1,checkStrictly:j=!1,defaultExpandedKeys:Ie,expandedKeys:Ee,defaultExpandAll:Me=!1,loadData:F,allowClear:Be=!1,autoClearSearchValue:ae=!0,maxTagCount:T,maxTagPlaceholder:K,placement:Ae="bottomLeft",open:z,defaultOpen:Fe=!1,variant:le="outlined",size:$="medium",prefix:te,suffixIcon:ze,clearIcon:De,listHeight:Pe=256,popupMatchSelectWidth:Oe=!0,classNames:d={},styles:u={},className:Re,style:We,status:re,fieldNames:t,dropdownRender:se,tabIndex:je=0,autoFocus:oe=!1,onChange:k,onSelect:H,onSearch:ce,onDropdownVisibleChange:ie,onTreeExpand:de,onPopupScroll:Ke,onFocus:ue,onBlur:he,onClear:fe,...pe}=Se,_=we(null),D=we(null),[He,_e]=O(Fe),[w,q]=O(""),[qe,ge]=O(!1),b=z!==void 0?z:He,h=R==="multiple"||R==="checkable",I=R==="checkable"||Te,[s,L]=O(()=>g!==void 0?Array.isArray(g)?g:g?[g]:[]:V!==void 0?Array.isArray(V)?V:V?[V]:[]:[]);X(()=>{g!==void 0&&L(Array.isArray(g)?g:g?[g]:[])},[g]);const{expandedKeys:E,toggleExpand:me,setExpanded:Hn}=En(i,Ie,Me,Ee,t),{checkedKeys:v,halfCheckedKeys:Ge,toggleCheck:ke}=Mn(i,I?s:void 0,j,t),{isLoading:G,setLoading:J,markLoaded:be}=Bn(),xe=ve(()=>w?An(i,w,Z,ee,t):i,[i,w,Z,ee,t]),Ce=ve(()=>s.map(e=>{const n=S(i,e,t);return n?p(n,"label",t):e}),[s,i,t]),y=C(e=>{m||(z===void 0&&_e(e),ie?.(e))},[m,z,ie]);X(()=>{const e=n=>{_.current&&!_.current.contains(n.target)&&y(!1)};if(b)return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[b,y]);const Je=C(()=>{m||(y(!b),W&&D.current?.focus())},[m,b,W,y]),Qe=C(e=>{const n=e.target.value;q(n),ce?.(n)},[ce]),Ue=C(e=>{const n=p(e,"value",t),l=p(e,"label",t);if(!e.disabled){if(I){ke(n,e);const r=v.has(n)?Array.from(v).filter(o=>o!==n):[...Array.from(v),n];if(!j){const o=Fn(e,t),c=!v.has(n);o.forEach(f=>{if(c)r.includes(f)||r.push(f);else{const B=r.indexOf(f);B>-1&&r.splice(B,1)}})}L(r),k?.(r,r.map(o=>{const c=S(i,o,t);return c?p(c,"label",t):o}),{triggerValue:n,triggerNode:e})}else if(h){const r=s.includes(n),o=r?s.filter(c=>c!==n):[...s,n];L(o),H?.(n,e,{selected:!r}),k?.(o,o.map(c=>{const f=S(i,c,t);return f?p(f,"label",t):c}),{preValue:s,triggerValue:n,triggerNode:e})}else L([n]),H?.(n,e,{selected:!0}),k?.(n,l,{preValue:s[0],triggerValue:n,triggerNode:e}),y(!1);ae&&q("")}},[I,h,s,v,j,t,i,ke,ae,k,H,y]),Xe=C(async(e,n)=>{e.stopPropagation();const l=p(n,"value",t),r=p(n,"children",t);if(F&&!n.isLeaf&&(!r||r.length===0)&&!G(l)){J(l,!0);try{await F(n),be(l)}catch(c){console.error("Failed to load data:",c)}J(l,!1)}me(l);const o=E.has(l)?Array.from(E).filter(c=>c!==l):[...Array.from(E),l];de?.(o)},[t,F,G,J,be,me,E,de]),Ye=C((e,n)=>{e.stopPropagation();const l=s.filter(r=>r!==n);L(l),k?.(l,l.map(r=>{const o=S(i,r,t);return o?p(o,"label",t):r}),{triggerValue:n})},[s,i,t,k]),Ze=C(e=>{e.stopPropagation(),L([]),q(""),k?.(h?[]:"",h?[]:"",{}),fe?.()},[h,k,fe]),en=C(e=>{ge(!0),ue?.(e)},[ue]),nn=C(e=>{ge(!1),he?.(e)},[he]),an=C(e=>{switch(e.key){case"Enter":case" ":b||y(!0);break;case"Escape":y(!1);break;case"Backspace":if(!w&&h&&s.length>0){const n=s.slice(0,-1);L(n),k?.(n,n.map(l=>{const r=S(i,l,t);return r?p(r,"label",t):l}),{})}break}},[b,w,h,s,i,t,k,y]);X(()=>{oe&&D.current&&D.current.focus()},[oe]);const ye=(e,n=0)=>{const l=p(e,"value",t),r=p(e,"label",t),o=p(e,"children",t),c=o&&o.length>0,f=E.has(l),B=s.includes(l),N=v.has(l),P=Ge.has(l),$e=G(l),Q=e.isLeaf||!c&&!F,rn=!!ne;return x(sn.Fragment,{children:[x(wn,{$level:n,$isLeaf:Q,$disabled:!!e.disabled,$selected:B&&!I,$checked:N,$indeterminate:P,$showLine:rn,"data-disabled":e.disabled,className:d.node,style:u.node,onClick:()=>Ue(e),role:"treeitem","aria-selected":B,"aria-expanded":c?f:void 0,"aria-disabled":e.disabled,children:[Q?a(Nn,{}):a(vn,{$expanded:f,$loading:$e,onClick:U=>Xe(U,e),children:$e?a(Rn,{}):a(Dn,{})}),I&&e.checkable!==!1&&x(Sn,{$checked:N,$indeterminate:P&&!N,$disabled:!!e.disableCheckbox||!!e.disabled,className:d.nodeCheckbox,style:u.nodeCheckbox,role:"checkbox","aria-checked":P?"mixed":N,children:[N&&a(Pn,{}),P&&!N&&a(On,{})]}),Ve&&a(Vn,{children:e.icon||(Q?a(jn,{}):a(Wn,{}))}),a(Tn,{$disabled:!!e.disabled,className:d.nodeTitle,style:u.nodeTitle,children:r})]}),c&&f&&a(Le,{children:o.map(U=>ye(U,n+1))})]},e.key||l)},ln=()=>{if(!h)return null;let e=s,n=0;return T!==void 0&&T!=="responsive"&&(e=s.slice(0,T),n=s.length-T),x(Le,{children:[e.map((l,r)=>{const o=Ce[s.indexOf(l)],c=S(i,l,t);return x(gn,{$size:$,$disabled:c?.disabled,className:d.tag,style:u.tag,children:[a(mn,{children:o}),!m&&!c?.disabled&&a(kn,{onClick:f=>Ye(f,l),children:a(Ne,{})})]},l)}),n>0&&a(bn,{$size:$,children:typeof K=="function"?K(s.slice(T)):K||`+${n}`})]})},tn=()=>{const e=a(Ln,{$showLine:!!ne,className:d.tree,style:u.tree,role:"tree",onScroll:Ke,children:xe.length===0?a(In,{children:"No data"}):xe.map(n=>ye(n))});return se?se(e):e},M=s.length>0;return x(cn,{ref:e=>{_.current=e,typeof A=="function"?A(e):A&&(A.current=e)},$size:$,$variant:le,$status:re,$disabled:m,$focused:qe,"data-disabled":m,className:Re||d.root,style:{...u.root,...We},onKeyDown:an,tabIndex:m?-1:je,role:"combobox","aria-expanded":b,"aria-haspopup":"tree","aria-disabled":m,"aria-label":pe["aria-label"],"aria-labelledby":pe["aria-labelledby"],children:[x(dn,{$size:$,$variant:le,$status:re,$multiple:h,$hasValue:M,className:d.selector,style:u.selector,onClick:Je,onFocus:en,onBlur:nn,children:[te&&a(un,{$size:$,className:d.prefix,style:u.prefix,children:te}),ln(),W?a(hn,{ref:D,$size:$,value:w,onChange:Qe,placeholder:M&&!h?"":Y,disabled:m,className:d.search,style:u.search,"aria-label":"Search"}):!h||!M?M&&!h?a(pn,{children:Ce[0]}):a(fn,{className:d.placeholder,style:u.placeholder,children:Y}):null,x(xn,{$size:$,$open:b,className:d.suffix,style:u.suffix,children:[Be&&M&&!m&&a(yn,{onClick:Ze,"aria-label":"Clear",children:De||a(Ne,{})}),a(Cn,{$open:b,children:ze||a(zn,{})})]})]}),b&&a($n,{$placement:Ae,$maxHeight:Pe,$matchWidth:Oe,className:d.popup,style:u.popup,role:"listbox",children:tn()})]})});TreeSelect.displayName="TreeSelect";export default TreeSelect;
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo, } from 'react';
+import { TreeSelectRoot, Selector, Prefix, SearchInput, Placeholder, SelectedValue, Tag, TagLabel, TagClose, MaxTagPlaceholder, Suffix, ArrowIcon, ClearButton, Dropdown, TreeContainer, TreeNode, ExpandIcon, LeafIndent, Checkbox, NodeIcon, NodeTitle, EmptyState, } from './elements';
+import { useExpandedState, useCheckedState, useAsyncLoading, filterTree, findNodeByValue, getFieldValue, getDescendantValues, } from './hooks';
+// Icons
+const ChevronDownIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronRightIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M9 6l6 6-6 6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const CloseIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const CheckIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("path", { d: "M5 12l5 5L20 7", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const MinusIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("path", { d: "M5 12h14", strokeLinecap: "round" }) }));
+const LoadingIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }), _jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })] }));
+const FolderIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M2 6a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6z" }) }));
+const FileIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" }), _jsx("path", { d: "M14 2v6h6", fill: "none", stroke: "currentColor", strokeWidth: "1" })] }));
+export const TreeSelect = forwardRef(function TreeSelectComponent(props, ref) {
+    const { treeData, value, defaultValue, mode = 'single', placeholder = 'Please select', disabled = false, showSearch = false, filterTreeNode, treeNodeFilterProp = 'title', treeLine = false, showTreeIcon = false, checkable = false, checkStrictly = false, defaultExpandedKeys, expandedKeys: controlledExpandedKeys, defaultExpandAll = false, loadData, allowClear = false, autoClearSearchValue = true, maxTagCount, maxTagPlaceholder, placement = 'bottomLeft', open: controlledOpen, defaultOpen = false, variant = 'outlined', size = 'medium', prefix, suffixIcon, clearIcon, listHeight = 256, popupMatchSelectWidth = true, classNames = {}, styles = {}, className, style, status, fieldNames, dropdownRender, tabIndex = 0, autoFocus = false, onChange, onSelect, onSearch, onDropdownVisibleChange, onTreeExpand, onPopupScroll, onFocus, onBlur, onClear, ...rest } = props;
+    // Refs
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    // State
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const [searchValue, setSearchValue] = useState('');
+    const [focused, setFocused] = useState(false);
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const isMultiple = mode === 'multiple' || mode === 'checkable';
+    const isCheckable = mode === 'checkable' || checkable;
+    // Selection state
+    const [selectedValues, setSelectedValues] = useState(() => {
+        if (value !== undefined) {
+            return Array.isArray(value) ? value : value ? [value] : [];
+        }
+        if (defaultValue !== undefined) {
+            return Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : [];
+        }
+        return [];
+    });
+    // Update when controlled value changes
+    useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValues(Array.isArray(value) ? value : value ? [value] : []);
+        }
+    }, [value]);
+    // Expanded state
+    const { expandedKeys, toggleExpand, setExpanded } = useExpandedState(treeData, defaultExpandedKeys, defaultExpandAll, controlledExpandedKeys, fieldNames);
+    // Checked state (for checkable mode)
+    const { checkedKeys, halfCheckedKeys, toggleCheck } = useCheckedState(treeData, isCheckable ? selectedValues : undefined, checkStrictly, fieldNames);
+    // Async loading
+    const { isLoading, setLoading, markLoaded } = useAsyncLoading();
+    // Filter tree based on search
+    const filteredData = useMemo(() => {
+        if (!searchValue)
+            return treeData;
+        return filterTree(treeData, searchValue, filterTreeNode, treeNodeFilterProp, fieldNames);
+    }, [treeData, searchValue, filterTreeNode, treeNodeFilterProp, fieldNames]);
+    // Get selected labels
+    const selectedLabels = useMemo(() => {
+        return selectedValues.map((val) => {
+            const node = findNodeByValue(treeData, val, fieldNames);
+            return node ? getFieldValue(node, 'label', fieldNames) : val;
+        });
+    }, [selectedValues, treeData, fieldNames]);
+    // Toggle dropdown
+    const toggleOpen = useCallback((newOpen) => {
+        if (disabled)
+            return;
+        if (controlledOpen === undefined) {
+            setInternalOpen(newOpen);
+        }
+        onDropdownVisibleChange?.(newOpen);
+    }, [disabled, controlledOpen, onDropdownVisibleChange]);
+    // Handle click outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target)) {
+                toggleOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen, toggleOpen]);
+    // Handle selector click
+    const handleSelectorClick = useCallback(() => {
+        if (!disabled) {
+            toggleOpen(!isOpen);
+            if (showSearch) {
+                inputRef.current?.focus();
+            }
+        }
+    }, [disabled, isOpen, showSearch, toggleOpen]);
+    // Handle search
+    const handleSearchChange = useCallback((e) => {
+        const val = e.target.value;
+        setSearchValue(val);
+        onSearch?.(val);
+    }, [onSearch]);
+    // Handle node select
+    const handleNodeSelect = useCallback((node) => {
+        const nodeValue = getFieldValue(node, 'value', fieldNames);
+        const nodeLabel = getFieldValue(node, 'label', fieldNames);
+        if (node.disabled)
+            return;
+        if (isCheckable) {
+            toggleCheck(nodeValue, node);
+            const newChecked = checkedKeys.has(nodeValue)
+                ? Array.from(checkedKeys).filter((v) => v !== nodeValue)
+                : [...Array.from(checkedKeys), nodeValue];
+            if (!checkStrictly) {
+                // Handle descendants
+                const descendants = getDescendantValues(node, fieldNames);
+                const isChecking = !checkedKeys.has(nodeValue);
+                descendants.forEach((d) => {
+                    if (isChecking) {
+                        if (!newChecked.includes(d))
+                            newChecked.push(d);
+                    }
+                    else {
+                        const idx = newChecked.indexOf(d);
+                        if (idx > -1)
+                            newChecked.splice(idx, 1);
+                    }
+                });
+            }
+            setSelectedValues(newChecked);
+            onChange?.(newChecked, newChecked.map((v) => {
+                const n = findNodeByValue(treeData, v, fieldNames);
+                return n ? getFieldValue(n, 'label', fieldNames) : v;
+            }), { triggerValue: nodeValue, triggerNode: node });
+        }
+        else if (isMultiple) {
+            const isSelected = selectedValues.includes(nodeValue);
+            const newValues = isSelected
+                ? selectedValues.filter((v) => v !== nodeValue)
+                : [...selectedValues, nodeValue];
+            setSelectedValues(newValues);
+            onSelect?.(nodeValue, node, { selected: !isSelected });
+            onChange?.(newValues, newValues.map((v) => {
+                const n = findNodeByValue(treeData, v, fieldNames);
+                return n ? getFieldValue(n, 'label', fieldNames) : v;
+            }), { preValue: selectedValues, triggerValue: nodeValue, triggerNode: node });
+        }
+        else {
+            setSelectedValues([nodeValue]);
+            onSelect?.(nodeValue, node, { selected: true });
+            onChange?.(nodeValue, nodeLabel, {
+                preValue: selectedValues[0],
+                triggerValue: nodeValue,
+                triggerNode: node,
+            });
+            toggleOpen(false);
+        }
+        if (autoClearSearchValue) {
+            setSearchValue('');
+        }
+    }, [
+        isCheckable,
+        isMultiple,
+        selectedValues,
+        checkedKeys,
+        checkStrictly,
+        fieldNames,
+        treeData,
+        toggleCheck,
+        autoClearSearchValue,
+        onChange,
+        onSelect,
+        toggleOpen,
+    ]);
+    // Handle expand toggle
+    const handleExpandToggle = useCallback(async (e, node) => {
+        e.stopPropagation();
+        const nodeValue = getFieldValue(node, 'value', fieldNames);
+        const children = getFieldValue(node, 'children', fieldNames);
+        // Async loading
+        if (loadData &&
+            !node.isLeaf &&
+            (!children || children.length === 0) &&
+            !isLoading(nodeValue)) {
+            setLoading(nodeValue, true);
+            try {
+                await loadData(node);
+                markLoaded(nodeValue);
+            }
+            catch (err) {
+                console.error('Failed to load data:', err);
+            }
+            setLoading(nodeValue, false);
+        }
+        toggleExpand(nodeValue);
+        const newExpanded = expandedKeys.has(nodeValue)
+            ? Array.from(expandedKeys).filter((k) => k !== nodeValue)
+            : [...Array.from(expandedKeys), nodeValue];
+        onTreeExpand?.(newExpanded);
+    }, [fieldNames, loadData, isLoading, setLoading, markLoaded, toggleExpand, expandedKeys, onTreeExpand]);
+    // Handle tag remove
+    const handleTagRemove = useCallback((e, val) => {
+        e.stopPropagation();
+        const newValues = selectedValues.filter((v) => v !== val);
+        setSelectedValues(newValues);
+        onChange?.(newValues, newValues.map((v) => {
+            const n = findNodeByValue(treeData, v, fieldNames);
+            return n ? getFieldValue(n, 'label', fieldNames) : v;
+        }), { triggerValue: val });
+    }, [selectedValues, treeData, fieldNames, onChange]);
+    // Handle clear
+    const handleClear = useCallback((e) => {
+        e.stopPropagation();
+        setSelectedValues([]);
+        setSearchValue('');
+        onChange?.(isMultiple ? [] : '', isMultiple ? [] : '', {});
+        onClear?.();
+    }, [isMultiple, onChange, onClear]);
+    // Handle focus/blur
+    const handleFocus = useCallback((e) => {
+        setFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                if (!isOpen) {
+                    toggleOpen(true);
+                }
+                break;
+            case 'Escape':
+                toggleOpen(false);
+                break;
+            case 'Backspace':
+                if (!searchValue && isMultiple && selectedValues.length > 0) {
+                    const newValues = selectedValues.slice(0, -1);
+                    setSelectedValues(newValues);
+                    onChange?.(newValues, newValues.map((v) => {
+                        const n = findNodeByValue(treeData, v, fieldNames);
+                        return n ? getFieldValue(n, 'label', fieldNames) : v;
+                    }), {});
+                }
+                break;
+        }
+    }, [isOpen, searchValue, isMultiple, selectedValues, treeData, fieldNames, onChange, toggleOpen]);
+    // Auto focus
+    useEffect(() => {
+        if (autoFocus && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Render tree node
+    const renderTreeNode = (node, level = 0) => {
+        const nodeValue = getFieldValue(node, 'value', fieldNames);
+        const nodeLabel = getFieldValue(node, 'label', fieldNames);
+        const children = getFieldValue(node, 'children', fieldNames);
+        const hasChildren = children && children.length > 0;
+        const isExpanded = expandedKeys.has(nodeValue);
+        const isSelected = selectedValues.includes(nodeValue);
+        const isChecked = checkedKeys.has(nodeValue);
+        const isHalfChecked = halfCheckedKeys.has(nodeValue);
+        const loading = isLoading(nodeValue);
+        const isLeaf = node.isLeaf || (!hasChildren && !loadData);
+        const showLine = !!treeLine;
+        return (_jsxs(React.Fragment, { children: [_jsxs(TreeNode, { "$level": level, "$isLeaf": isLeaf, "$disabled": !!node.disabled, "$selected": isSelected && !isCheckable, "$checked": isChecked, "$indeterminate": isHalfChecked, "$showLine": showLine, "data-disabled": node.disabled, className: classNames.node, style: styles.node, onClick: () => handleNodeSelect(node), role: "treeitem", "aria-selected": isSelected, "aria-expanded": hasChildren ? isExpanded : undefined, "aria-disabled": node.disabled, children: [isLeaf ? (_jsx(LeafIndent, {})) : (_jsx(ExpandIcon, { "$expanded": isExpanded, "$loading": loading, onClick: (e) => handleExpandToggle(e, node), children: loading ? _jsx(LoadingIcon, {}) : _jsx(ChevronRightIcon, {}) })), isCheckable && node.checkable !== false && (_jsxs(Checkbox, { "$checked": isChecked, "$indeterminate": isHalfChecked && !isChecked, "$disabled": !!node.disableCheckbox || !!node.disabled, className: classNames.nodeCheckbox, style: styles.nodeCheckbox, role: "checkbox", "aria-checked": isHalfChecked ? 'mixed' : isChecked, children: [isChecked && _jsx(CheckIcon, {}), isHalfChecked && !isChecked && _jsx(MinusIcon, {})] })), showTreeIcon && (_jsx(NodeIcon, { children: node.icon || (isLeaf ? _jsx(FileIcon, {}) : _jsx(FolderIcon, {})) })), _jsx(NodeTitle, { "$disabled": !!node.disabled, className: classNames.nodeTitle, style: styles.nodeTitle, children: nodeLabel })] }), hasChildren && isExpanded && (_jsx(_Fragment, { children: children.map((child) => renderTreeNode(child, level + 1)) }))] }, node.key || nodeValue));
+    };
+    // Render selected tags
+    const renderTags = () => {
+        if (!isMultiple)
+            return null;
+        let visibleValues = selectedValues;
+        let hiddenCount = 0;
+        if (maxTagCount !== undefined && maxTagCount !== 'responsive') {
+            visibleValues = selectedValues.slice(0, maxTagCount);
+            hiddenCount = selectedValues.length - maxTagCount;
+        }
+        return (_jsxs(_Fragment, { children: [visibleValues.map((val, idx) => {
+                    const label = selectedLabels[selectedValues.indexOf(val)];
+                    const node = findNodeByValue(treeData, val, fieldNames);
+                    return (_jsxs(Tag, { "$size": size, "$disabled": node?.disabled, className: classNames.tag, style: styles.tag, children: [_jsx(TagLabel, { children: label }), !disabled && !node?.disabled && (_jsx(TagClose, { onClick: (e) => handleTagRemove(e, val), children: _jsx(CloseIcon, {}) }))] }, val));
+                }), hiddenCount > 0 && (_jsx(MaxTagPlaceholder, { "$size": size, children: typeof maxTagPlaceholder === 'function'
+                        ? maxTagPlaceholder(selectedValues.slice(maxTagCount))
+                        : maxTagPlaceholder || `+${hiddenCount}` }))] }));
+    };
+    // Render dropdown content
+    const renderDropdown = () => {
+        const content = (_jsx(TreeContainer, { "$showLine": !!treeLine, className: classNames.tree, style: styles.tree, role: "tree", onScroll: onPopupScroll, children: filteredData.length === 0 ? (_jsx(EmptyState, { children: "No data" })) : (filteredData.map((node) => renderTreeNode(node))) }));
+        return dropdownRender ? dropdownRender(content) : content;
+    };
+    const hasValue = selectedValues.length > 0;
+    return (_jsxs(TreeSelectRoot, { ref: (node) => {
+            rootRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, "$size": size, "$variant": variant, "$status": status, "$disabled": disabled, "$focused": focused, "data-disabled": disabled, className: className || classNames.root, style: { ...styles.root, ...style }, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : tabIndex, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "tree", "aria-disabled": disabled, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [_jsxs(Selector, { "$size": size, "$variant": variant, "$status": status, "$multiple": isMultiple, "$hasValue": hasValue, className: classNames.selector, style: styles.selector, onClick: handleSelectorClick, onFocus: handleFocus, onBlur: handleBlur, children: [prefix && (_jsx(Prefix, { "$size": size, className: classNames.prefix, style: styles.prefix, children: prefix })), renderTags(), showSearch ? (_jsx(SearchInput, { ref: inputRef, "$size": size, value: searchValue, onChange: handleSearchChange, placeholder: hasValue && !isMultiple ? '' : placeholder, disabled: disabled, className: classNames.search, style: styles.search, "aria-label": "Search" })) : !isMultiple || !hasValue ? (hasValue && !isMultiple ? (_jsx(SelectedValue, { children: selectedLabels[0] })) : (_jsx(Placeholder, { className: classNames.placeholder, style: styles.placeholder, children: placeholder }))) : null, _jsxs(Suffix, { "$size": size, "$open": isOpen, className: classNames.suffix, style: styles.suffix, children: [allowClear && hasValue && !disabled && (_jsx(ClearButton, { onClick: handleClear, "aria-label": "Clear", children: clearIcon || _jsx(CloseIcon, {}) })), _jsx(ArrowIcon, { "$open": isOpen, children: suffixIcon || _jsx(ChevronDownIcon, {}) })] })] }), isOpen && (_jsx(Dropdown, { "$placement": placement, "$maxHeight": listHeight, "$matchWidth": popupMatchSelectWidth, className: classNames.popup, style: styles.popup, role: "listbox", children: renderDropdown() }))] }));
+});
+TreeSelect.displayName = 'TreeSelect';
+export default TreeSelect;