@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/select/select.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useState } from "react";
-import { useTaoConfig } from "../../provider/tao-provider.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
 import { MobileSelectDrawer } from "./mobile-select.js";
 import "./select.css";
 import { useIsMobile } from "./use-is-mobile.js";
@@ -10,411 +11,370 @@ const defaultFilter = (input, option)=>{
     const label = 'string' == typeof option.label ? option.label : String(option.label);
     return label.toLowerCase().includes(input.toLowerCase());
 };
+function flattenOptions(options) {
+    const out = [];
+    for (const o of options)if (o.options) out.push(...flattenOptions(o.options));
+    else out.push(o);
+    return out;
+}
+function filterTree(options, fn, input) {
+    const result = [];
+    for (const o of options)if (o.options) {
+        const kids = filterTree(o.options, fn, input);
+        if (kids.length) result.push({
+            ...o,
+            options: kids
+        });
+    } else if (fn(input, o)) result.push(o);
+    return result;
+}
+const PLACEMENT_MAP = {
+    bottomLeft: {
+        side: 'bottom',
+        align: 'start'
+    },
+    bottomRight: {
+        side: 'bottom',
+        align: 'end'
+    },
+    topLeft: {
+        side: 'top',
+        align: 'start'
+    },
+    topRight: {
+        side: 'top',
+        align: 'end'
+    }
+};
 function Select(props) {
-    const $ = c(95);
-    const { options, value, onChange, placeholder, size, variant, disabled, showSearch, filterOption, allowClear, loading, notFoundContent: t0, prefix, mobile } = props;
-    const notFoundContent = void 0 === t0 ? "No results" : t0;
+    const { options, value: valueProp, defaultValue, onChange, onSelect, onClear, placeholder, size, variant, disabled, status, showSearch, filterOption, searchValue: searchValueProp, onSearch, allowClear, loading, loadingIcon, notFoundContent = 'No results', prefix, suffixIcon, autoFocus, id, name, open: openProp, defaultOpen, onOpenChange, placement = 'bottomLeft', popupMatchSelectWidth = true, listHeight = 256, getPopupContainer, optionRender, labelRender, popupRender, mobile, className, style, classNames, styles } = props;
     const ctx = useTaoConfig();
     const resolvedSize = size ?? ctx.size;
     const resolvedVariant = variant ?? ctx.variant;
     const resolvedDisabled = disabled ?? ctx.disabled;
     const autoMobile = useIsMobile();
     const isMobile = mobile ?? autoMobile;
-    const [open, setOpen] = useState(false);
-    const [search, setSearch] = useState("");
+    const triggerRef = useRef(null);
+    const isValueControlled = void 0 !== valueProp;
+    const [valueInternal, setValueInternal] = useState(defaultValue);
+    const value = isValueControlled ? valueProp : valueInternal;
+    const isOpenControlled = void 0 !== openProp;
+    const [openInternal, setOpenInternal] = useState(defaultOpen ?? false);
+    const open = isOpenControlled ? openProp : openInternal;
+    const isSearchControlled = void 0 !== searchValueProp;
+    const [searchInternal, setSearchInternal] = useState('');
+    const search = isSearchControlled ? searchValueProp : searchInternal;
     const [hovering, setHovering] = useState(false);
-    let t1;
-    bb0: {
-        if (!showSearch || !search) {
-            t1 = options;
-            break bb0;
-        }
+    const allOptions = useMemo(()=>flattenOptions(options), [
+        options
+    ]);
+    const handleValueChange = useCallback((next)=>{
+        const opt = allOptions.find((o)=>o.value === next);
+        if (!isValueControlled) setValueInternal(next);
+        onChange?.(next, opt);
+        if (opt) onSelect?.(next, opt);
+    }, [
+        allOptions,
+        isValueControlled,
+        onChange,
+        onSelect
+    ]);
+    const handleOpenChange = useCallback((next_0)=>{
+        if (!isOpenControlled) setOpenInternal(next_0);
+        if (!next_0 && !isSearchControlled) setSearchInternal('');
+        onOpenChange?.(next_0);
+    }, [
+        isOpenControlled,
+        isSearchControlled,
+        onOpenChange
+    ]);
+    const handleSearchChange = useCallback((v)=>{
+        if (!isSearchControlled) setSearchInternal(v);
+        onSearch?.(v);
+    }, [
+        isSearchControlled,
+        onSearch
+    ]);
+    const handleClear = useCallback((e)=>{
+        e.stopPropagation();
+        if (!isValueControlled) setValueInternal(void 0);
+        onChange?.('', void 0);
+        onClear?.();
+    }, [
+        isValueControlled,
+        onChange,
+        onClear
+    ]);
+    const filteredOptions = useMemo(()=>{
+        if (!showSearch || !search) return options;
         const fn = filterOption ?? defaultFilter;
-        let t2;
-        if ($[0] !== fn || $[1] !== options || $[2] !== search) {
-            let t3;
-            if ($[4] !== fn || $[5] !== search) {
-                t3 = (o)=>fn(search, o);
-                $[4] = fn;
-                $[5] = search;
-                $[6] = t3;
-            } else t3 = $[6];
-            t2 = options.filter(t3);
-            $[0] = fn;
-            $[1] = options;
-            $[2] = search;
-            $[3] = t2;
-        } else t2 = $[3];
-        t1 = t2;
-    }
-    const filteredOptions = t1;
-    let t2;
-    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = (nextOpen)=>{
-            setOpen(nextOpen);
-            if (!nextOpen) setSearch("");
-        };
-        $[7] = t2;
-    } else t2 = $[7];
-    const handleOpenChange = t2;
-    let t3;
-    if ($[8] !== onChange) {
-        t3 = (e)=>{
-            e.stopPropagation();
-            onChange?.("");
-        };
-        $[8] = onChange;
-        $[9] = t3;
-    } else t3 = $[9];
-    const handleClear = t3;
-    const showClearBtn = allowClear && value && !resolvedDisabled;
-    let t4;
-    if ($[10] !== options || $[11] !== value) {
-        let t5;
-        if ($[13] !== value) {
-            t5 = (o_0)=>o_0.value === value;
-            $[13] = value;
-            $[14] = t5;
-        } else t5 = $[14];
-        t4 = options.find(t5);
-        $[10] = options;
-        $[11] = value;
-        $[12] = t4;
-    } else t4 = $[12];
-    const selectedOption = t4;
-    if (isMobile) {
-        const t5 = resolvedDisabled || void 0;
-        let t6;
-        let t7;
-        let t8;
-        if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-            t6 = ()=>setOpen(true);
-            t7 = ()=>setHovering(true);
-            t8 = ()=>setHovering(false);
-            $[15] = t6;
-            $[16] = t7;
-            $[17] = t8;
-        } else {
-            t6 = $[15];
-            t7 = $[16];
-            t8 = $[17];
-        }
-        let t9;
-        if ($[18] !== prefix) {
-            t9 = null != prefix && /*#__PURE__*/ jsx("span", {
-                "data-tao-select-prefix": "",
-                children: prefix
-            });
-            $[18] = prefix;
-            $[19] = t9;
-        } else t9 = $[19];
-        let t10;
-        if ($[20] !== placeholder || $[21] !== selectedOption) {
-            t10 = selectedOption ? selectedOption.label : /*#__PURE__*/ jsx("span", {
-                "data-tao-select-placeholder": "",
-                children: placeholder
-            });
-            $[20] = placeholder;
-            $[21] = selectedOption;
-            $[22] = t10;
-        } else t10 = $[22];
-        let t11;
-        if ($[23] !== t10) {
-            t11 = /*#__PURE__*/ jsx("span", {
-                "data-tao-select-value": "",
-                children: t10
-            });
-            $[23] = t10;
-            $[24] = t11;
-        } else t11 = $[24];
-        let t12;
-        if ($[25] !== loading) {
-            t12 = loading && /*#__PURE__*/ jsx(LoadingIcon, {});
-            $[25] = loading;
-            $[26] = t12;
-        } else t12 = $[26];
-        let t13;
-        if ($[27] !== handleClear || $[28] !== hovering || $[29] !== showClearBtn) {
-            t13 = showClearBtn && hovering ? /*#__PURE__*/ jsx("span", {
-                "data-tao-select-clear": "",
-                onClick: handleClear,
-                role: "button",
-                "aria-label": "Clear",
-                children: /*#__PURE__*/ jsx(CloseIcon, {})
-            }) : /*#__PURE__*/ jsx("span", {
-                "data-tao-select-icon": "",
-                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
-            });
-            $[27] = handleClear;
-            $[28] = hovering;
-            $[29] = showClearBtn;
-            $[30] = t13;
-        } else t13 = $[30];
-        let t14;
-        if ($[31] !== t12 || $[32] !== t13) {
-            t14 = /*#__PURE__*/ jsxs("span", {
-                "data-tao-select-icons": "",
-                children: [
-                    t12,
-                    t13
-                ]
-            });
-            $[31] = t12;
-            $[32] = t13;
-            $[33] = t14;
-        } else t14 = $[33];
-        let t15;
-        if ($[34] !== resolvedDisabled || $[35] !== resolvedSize || $[36] !== resolvedVariant || $[37] !== t11 || $[38] !== t14 || $[39] !== t5 || $[40] !== t9) {
-            t15 = /*#__PURE__*/ jsxs("button", {
+        return filterTree(options, fn, search);
+    }, [
+        options,
+        search,
+        showSearch,
+        filterOption
+    ]);
+    const allowClearEnabled = !!allowClear;
+    const clearIcon = 'object' == typeof allowClear && allowClear.clearIcon || /*#__PURE__*/ jsx(CloseIcon, {});
+    const showClearBtn = allowClearEnabled && !!value && !resolvedDisabled;
+    const selectedOption = allOptions.find((o_0)=>o_0.value === value);
+    const statusProps = {
+        'data-tao-error': 'error' === status || void 0,
+        'data-tao-warning': 'warning' === status || void 0
+    };
+    const triggerLabel = selectedOption ? labelRender ? labelRender(selectedOption) : selectedOption.label : /*#__PURE__*/ jsx("span", {
+        "data-tao-select-placeholder": "",
+        className: cx(classNames?.placeholder),
+        style: styles?.placeholder,
+        children: placeholder
+    });
+    const trailingIcons = /*#__PURE__*/ jsx("span", {
+        "data-tao-select-icons": "",
+        children: loading ? /*#__PURE__*/ jsx("span", {
+            "data-tao-select-icon": "",
+            "data-tao-select-loading-slot": "",
+            children: loadingIcon ?? /*#__PURE__*/ jsx(LoadingIcon, {})
+        }) : showClearBtn && hovering ? /*#__PURE__*/ jsx("span", {
+            "data-tao-select-clear": "",
+            className: cx(classNames?.clear),
+            style: styles?.clear,
+            onPointerDown: (e_0)=>e_0.stopPropagation(),
+            onClick: handleClear,
+            role: "button",
+            "aria-label": "Clear",
+            children: clearIcon
+        }) : /*#__PURE__*/ jsx("span", {
+            "data-tao-select-icon": "",
+            "data-tao-custom-suffix": null != suffixIcon || void 0,
+            className: cx(classNames?.suffix),
+            style: styles?.suffix,
+            children: suffixIcon ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
+        })
+    });
+    if (isMobile) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("button", {
                 type: "button",
+                id: id,
                 "data-tao-control": "",
                 "data-tao-select": "",
                 "data-tao-size": resolvedSize,
                 "data-tao-variant": resolvedVariant,
-                "data-tao-disabled": t5,
+                "data-tao-disabled": resolvedDisabled || void 0,
+                ...statusProps,
                 disabled: resolvedDisabled,
-                onClick: t6,
-                onMouseEnter: t7,
-                onMouseLeave: t8,
+                autoFocus: autoFocus,
+                className: cx(classNames?.root, className),
+                style: {
+                    ...styles?.root,
+                    ...style
+                },
+                onClick: ()=>handleOpenChange(true),
+                onMouseEnter: ()=>setHovering(true),
+                onMouseLeave: ()=>setHovering(false),
                 children: [
-                    t9,
-                    t11,
-                    t14
+                    null != prefix && /*#__PURE__*/ jsx("span", {
+                        "data-tao-select-prefix": "",
+                        className: cx(classNames?.prefix),
+                        style: styles?.prefix,
+                        children: prefix
+                    }),
+                    selectedOption?.icon != null && /*#__PURE__*/ jsx("span", {
+                        "data-tao-select-value-icon": "",
+                        children: selectedOption.icon
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        "data-tao-select-value": "",
+                        children: triggerLabel
+                    }),
+                    trailingIcons
                 ]
-            });
-            $[34] = resolvedDisabled;
-            $[35] = resolvedSize;
-            $[36] = resolvedVariant;
-            $[37] = t11;
-            $[38] = t14;
-            $[39] = t5;
-            $[40] = t9;
-            $[41] = t15;
-        } else t15 = $[41];
-        let t16;
-        if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-            t16 = ()=>handleOpenChange(false);
-            $[42] = t16;
-        } else t16 = $[42];
-        let t17;
-        if ($[43] !== filterOption || $[44] !== notFoundContent || $[45] !== onChange || $[46] !== open || $[47] !== options || $[48] !== placeholder || $[49] !== showSearch || $[50] !== value) {
-            t17 = /*#__PURE__*/ jsx(MobileSelectDrawer, {
+            }),
+            /*#__PURE__*/ jsx(MobileSelectDrawer, {
                 open: open,
-                onClose: t16,
+                onClose: ()=>handleOpenChange(false),
                 options: options,
                 value: value,
-                onChange: onChange,
+                onChange: handleValueChange,
                 placeholder: placeholder,
                 showSearch: showSearch,
                 filterOption: filterOption,
-                notFoundContent: notFoundContent
-            });
-            $[43] = filterOption;
-            $[44] = notFoundContent;
-            $[45] = onChange;
-            $[46] = open;
-            $[47] = options;
-            $[48] = placeholder;
-            $[49] = showSearch;
-            $[50] = value;
-            $[51] = t17;
-        } else t17 = $[51];
-        let t18;
-        if ($[52] !== t15 || $[53] !== t17) {
-            t18 = /*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    t15,
-                    t17
-                ]
-            });
-            $[52] = t15;
-            $[53] = t17;
-            $[54] = t18;
-        } else t18 = $[54];
-        return t18;
-    }
-    const t5 = resolvedDisabled || void 0;
-    let t6;
-    let t7;
-    if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-        t6 = ()=>setHovering(true);
-        t7 = ()=>setHovering(false);
-        $[55] = t6;
-        $[56] = t7;
-    } else {
-        t6 = $[55];
-        t7 = $[56];
-    }
-    let t8;
-    if ($[57] !== prefix) {
-        t8 = null != prefix && /*#__PURE__*/ jsx("span", {
-            "data-tao-select-prefix": "",
-            children: prefix
-        });
-        $[57] = prefix;
-        $[58] = t8;
-    } else t8 = $[58];
-    let t9;
-    if ($[59] !== placeholder) {
-        t9 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Value, {
-            placeholder: placeholder
-        });
-        $[59] = placeholder;
-        $[60] = t9;
-    } else t9 = $[60];
-    let t10;
-    if ($[61] !== loading) {
-        t10 = loading && /*#__PURE__*/ jsx(LoadingIcon, {});
-        $[61] = loading;
-        $[62] = t10;
-    } else t10 = $[62];
-    let t11;
-    if ($[63] !== handleClear || $[64] !== hovering || $[65] !== showClearBtn) {
-        t11 = showClearBtn && hovering ? /*#__PURE__*/ jsx("span", {
-            "data-tao-select-clear": "",
-            onClick: handleClear,
-            role: "button",
-            "aria-label": "Clear",
-            children: /*#__PURE__*/ jsx(CloseIcon, {})
-        }) : /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Icon, {
-            "data-tao-select-icon": "",
-            children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
-        });
-        $[63] = handleClear;
-        $[64] = hovering;
-        $[65] = showClearBtn;
-        $[66] = t11;
-    } else t11 = $[66];
-    let t12;
-    if ($[67] !== t10 || $[68] !== t11) {
-        t12 = /*#__PURE__*/ jsxs("span", {
-            "data-tao-select-icons": "",
-            children: [
-                t10,
-                t11
-            ]
-        });
-        $[67] = t10;
-        $[68] = t11;
-        $[69] = t12;
-    } else t12 = $[69];
-    let t13;
-    if ($[70] !== resolvedSize || $[71] !== resolvedVariant || $[72] !== t12 || $[73] !== t5 || $[74] !== t8 || $[75] !== t9) {
-        t13 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Trigger, {
-            "data-tao-control": "",
-            "data-tao-select": "",
-            "data-tao-size": resolvedSize,
-            "data-tao-variant": resolvedVariant,
-            "data-tao-disabled": t5,
-            onMouseEnter: t6,
-            onMouseLeave: t7,
-            children: [
-                t8,
-                t9,
-                t12
-            ]
-        });
-        $[70] = resolvedSize;
-        $[71] = resolvedVariant;
-        $[72] = t12;
-        $[73] = t5;
-        $[74] = t8;
-        $[75] = t9;
-        $[76] = t13;
-    } else t13 = $[76];
-    let t14;
-    if ($[77] !== search || $[78] !== showSearch) {
-        t14 = showSearch && /*#__PURE__*/ jsxs("div", {
-            "data-tao-select-search": "",
+                notFoundContent: notFoundContent,
+                optionRender: optionRender
+            })
+        ]
+    });
+    const { side, align } = PLACEMENT_MAP[placement];
+    const contentStyle = {
+        ...styles?.popup
+    };
+    if ('number' == typeof popupMatchSelectWidth) contentStyle.width = popupMatchSelectWidth;
+    const resultCount = flattenOptions(filteredOptions).length;
+    let optIndex = 0;
+    const renderItem = (opt_0)=>{
+        const index = optIndex++;
+        const textLabel = 'string' == typeof opt_0.label ? opt_0.label : String(opt_0.label);
+        return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Item, {
+            value: opt_0.value,
+            disabled: opt_0.disabled,
+            "data-tao-select-item": "",
+            "data-tao-has-desc": null != opt_0.description || void 0,
+            className: cx(classNames?.item),
+            style: styles?.item,
             children: [
-                /*#__PURE__*/ jsx(SearchIcon, {}),
-                /*#__PURE__*/ jsx("input", {
-                    "data-tao-select-search-input": "",
-                    value: search,
-                    onChange: (e_0)=>setSearch(e_0.target.value),
-                    placeholder: "Search...",
-                    autoFocus: true
+                optionRender ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        optionRender(opt_0, {
+                            index
+                        }),
+                        /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemText, {
+                            style: {
+                                display: 'none'
+                            },
+                            children: textLabel
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        null != opt_0.icon && /*#__PURE__*/ jsx("span", {
+                            "data-tao-select-item-icon": "",
+                            className: cx(classNames?.itemIcon),
+                            style: styles?.itemIcon,
+                            children: opt_0.icon
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            "data-tao-select-item-main": "",
+                            className: cx(classNames?.itemLabel),
+                            style: styles?.itemLabel,
+                            children: [
+                                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemText, {
+                                    children: opt_0.label
+                                }),
+                                null != opt_0.description && /*#__PURE__*/ jsx("span", {
+                                    "data-tao-select-item-desc": "",
+                                    className: cx(classNames?.itemDesc),
+                                    style: styles?.itemDesc,
+                                    children: opt_0.description
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemIndicator, {
+                    "data-tao-select-check": "",
+                    children: /*#__PURE__*/ jsx(CheckIcon, {})
                 })
             ]
-        });
-        $[77] = search;
-        $[78] = showSearch;
-        $[79] = t14;
-    } else t14 = $[79];
-    let t15;
-    if ($[80] !== filteredOptions || $[81] !== notFoundContent) {
-        t15 = filteredOptions.length > 0 ? filteredOptions.map(_temp) : /*#__PURE__*/ jsx("div", {
-            "data-tao-select-empty": "",
-            children: notFoundContent
-        });
-        $[80] = filteredOptions;
-        $[81] = notFoundContent;
-        $[82] = t15;
-    } else t15 = $[82];
-    let t16;
-    if ($[83] !== t15) {
-        t16 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Viewport, {
-            "data-tao-select-viewport": "",
-            children: t15
-        });
-        $[83] = t15;
-        $[84] = t16;
-    } else t16 = $[84];
-    let t17;
-    if ($[85] !== t14 || $[86] !== t16) {
-        t17 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Portal, {
-            children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Content, {
-                "data-tao-select-content": "",
-                position: "popper",
-                sideOffset: 4,
+        }, opt_0.value);
+    };
+    const renderTree = (opts)=>opts.map((o_1)=>o_1.options ? /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Group, {
+                "data-tao-select-group": "",
+                className: cx(classNames?.group),
+                style: styles?.group,
                 children: [
-                    t14,
-                    t16
+                    /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Label, {
+                        "data-tao-select-group-label": "",
+                        className: cx(classNames?.groupLabel),
+                        style: styles?.groupLabel,
+                        children: o_1.label
+                    }),
+                    o_1.options.map(renderItem)
                 ]
+            }, o_1.value) : renderItem(o_1));
+    const menuNode = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            showSearch && /*#__PURE__*/ jsxs("div", {
+                "data-tao-select-search": "",
+                className: cx(classNames?.search),
+                style: styles?.search,
+                children: [
+                    /*#__PURE__*/ jsx(SearchIcon, {}),
+                    /*#__PURE__*/ jsx("input", {
+                        "data-tao-select-search-input": "",
+                        value: search,
+                        onChange: (e_1)=>handleSearchChange(e_1.target.value),
+                        placeholder: "Search...",
+                        autoFocus: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Viewport, {
+                "data-tao-select-viewport": "",
+                style: {
+                    maxHeight: listHeight
+                },
+                children: resultCount > 0 ? renderTree(filteredOptions) : /*#__PURE__*/ jsx("div", {
+                    "data-tao-select-empty": "",
+                    className: cx(classNames?.empty),
+                    style: styles?.empty,
+                    children: notFoundContent
+                })
             })
-        });
-        $[85] = t14;
-        $[86] = t16;
-        $[87] = t17;
-    } else t17 = $[87];
-    let t18;
-    if ($[88] !== onChange || $[89] !== open || $[90] !== resolvedDisabled || $[91] !== t13 || $[92] !== t17 || $[93] !== value) {
-        t18 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Root, {
-            value: value,
-            onValueChange: onChange,
-            disabled: resolvedDisabled,
-            open: open,
-            onOpenChange: handleOpenChange,
-            children: [
-                t13,
-                t17
-            ]
-        });
-        $[88] = onChange;
-        $[89] = open;
-        $[90] = resolvedDisabled;
-        $[91] = t13;
-        $[92] = t17;
-        $[93] = value;
-        $[94] = t18;
-    } else t18 = $[94];
-    return t18;
-}
-function _temp(opt) {
-    return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Item, {
-        value: opt.value,
-        disabled: opt.disabled,
-        "data-tao-select-item": "",
+        ]
+    });
+    const container = getPopupContainer && triggerRef.current ? getPopupContainer(triggerRef.current) : void 0;
+    return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Root, {
+        value: value || void 0,
+        onValueChange: handleValueChange,
+        disabled: resolvedDisabled,
+        open: open,
+        onOpenChange: handleOpenChange,
+        name: name,
         children: [
-            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemText, {
-                children: opt.label
+            /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Trigger, {
+                ref: triggerRef,
+                id: id,
+                "data-tao-control": "",
+                "data-tao-select": "",
+                "data-tao-size": resolvedSize,
+                "data-tao-variant": resolvedVariant,
+                "data-tao-disabled": resolvedDisabled || void 0,
+                ...statusProps,
+                autoFocus: autoFocus,
+                className: cx(classNames?.root, className),
+                style: {
+                    ...styles?.root,
+                    ...style
+                },
+                onMouseEnter: ()=>setHovering(true),
+                onMouseLeave: ()=>setHovering(false),
+                children: [
+                    null != prefix && /*#__PURE__*/ jsx("span", {
+                        "data-tao-select-prefix": "",
+                        className: cx(classNames?.prefix),
+                        style: styles?.prefix,
+                        children: prefix
+                    }),
+                    selectedOption?.icon != null && /*#__PURE__*/ jsx("span", {
+                        "data-tao-select-value-icon": "",
+                        children: selectedOption.icon
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        "data-tao-select-value": "",
+                        children: triggerLabel
+                    }),
+                    trailingIcons
+                ]
             }),
-            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemIndicator, {
-                "data-tao-select-check": "",
-                children: /*#__PURE__*/ jsx(CheckIcon, {})
+            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Portal, {
+                container: container,
+                children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                    children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Content, {
+                        "data-tao-select-content": "",
+                        "data-tao-popup-width": false === popupMatchSelectWidth ? 'content' : void 0,
+                        className: cx(classNames?.popup),
+                        style: contentStyle,
+                        position: "popper",
+                        side: side,
+                        align: align,
+                        sideOffset: 4,
+                        children: popupRender ? popupRender(menuNode) : menuNode
+                    })
+                })
             })
         ]
-    }, opt.value);
+    });
 }
 function ChevronDownIcon() {
     const $ = c(1);
@@ -437,6 +397,28 @@ function ChevronDownIcon() {
     } else t0 = $[0];
     return t0;
 }
+function ChevronsUpDownIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "m7 15 5 5 5-5M7 9l5-5 5 5"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
 function CheckIcon() {
     const $ = c(1);
     let t0;
@@ -513,8 +495,8 @@ function LoadingIcon() {
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
             "data-tao-select-loading": "",
-            width: "14",
-            height: "14",
+            width: "16",
+            height: "16",
             viewBox: "0 0 24 24",
             fill: "none",
             stroke: "currentColor",
@@ -529,4 +511,4 @@ function LoadingIcon() {
     } else t0 = $[0];
     return t0;
 }
-export { Select };
+export { ChevronsUpDownIcon, Select };