tiny-ui 1.0.3 → 1.0.4

package/lib/select/select.js

@@ -1,312 +1,370 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const hooks_1 = require("../_utils/hooks");
-const useCombobox_1 = require("../_utils/useCombobox");
-const components_1 = require("../_utils/components");
-const select_context_1 = require("./select-context");
-const config_context_1 = require("../config-provider/config-context");
-const general_1 = require("../_utils/general");
-const popup_1 = tslib_1.__importDefault(require("../popup"));
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_components = require("../_utils/components.js");
+const require_hooks = require("../_utils/hooks.js");
+const require_useCombobox = require("../_utils/useCombobox.js");
+const require_index = require("../popup/index.js");
+const require_select_context = require("./select-context.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region components/select/select.tsx
 const Select = (props) => {
-    const { defaultOpen = false, disabled = false, defaultValue, prefixCls: customisedCls, value, mode, showSearch = false, filterOption = true, onSearch, allowClear = false, loading = false, size, maxTagCount, notFoundContent, options: optionsProp, onChange, onSelect, onDropdownVisibleChange, optionRender, labelRender, placeholder, className, children, dropdownStyle, ...otherProps } = props;
-    const isMultiple = mode === 'multiple' || mode === 'tags';
-    const defaultVal = defaultValue ?? (isMultiple ? [] : '');
-    const [selectVal, setSelectVal] = (0, react_1.useState)('value' in props ? value : defaultVal);
-    const [searchValue, setSearchValue] = (0, react_1.useState)('');
-    const ref = (0, react_1.useRef)(null);
-    const searchInputRef = (0, react_1.useRef)(null);
-    const listboxId = (0, react_1.useId)();
-    const configContext = (0, react_1.useContext)(config_context_1.ConfigContext);
-    const prefixCls = (0, general_1.getPrefixCls)('select', configContext.prefixCls, customisedCls);
-    const selectSize = size || configContext.componentSize || 'md';
-    const hasSomeValue = isMultiple
-        ? Array.isArray(selectVal) && selectVal.length > 0
-        : selectVal !== '' && selectVal !== undefined;
-    // Build flat option list from children or options prop
-    const flatOptions = (0, react_1.useMemo)(() => {
-        if (optionsProp)
-            return optionsProp;
-        const result = [];
-        const extractFromChildren = (nodes) => {
-            react_1.default.Children.forEach(nodes, (child) => {
-                const el = child;
-                if (!el?.type)
-                    return;
-                if (el.type.displayName === 'SelectOption') {
-                    result.push({
-                        value: el.props.value,
-                        label: el.props.label ?? el.props.children,
-                        disabled: !!el.props.disabled,
-                    });
-                }
-                else if (el.type.displayName === 'SelectOptGroup') {
-                    extractFromChildren(el.props.children);
-                }
-            });
-        };
-        extractFromChildren(children);
-        return result;
-    }, [optionsProp, children]);
-    // Handle option select
-    const handleSelect = (0, react_1.useCallback)((optValue) => {
-        if (isMultiple) {
-            const arr = Array.isArray(selectVal) ? selectVal : [];
-            let newVal;
-            if (arr.includes(optValue)) {
-                newVal = arr.filter((v) => v !== optValue);
-            }
-            else {
-                newVal = [...arr, optValue];
-            }
-            if (!('value' in props)) {
-                setSelectVal(newVal);
-            }
-            onChange?.(newVal, flatOptions.filter((o) => newVal.includes(o.value)));
-            onSelect?.(newVal);
-            setSearchValue('');
-        }
-        else {
-            if (!('value' in props)) {
-                setSelectVal(optValue);
-            }
-            onChange?.(optValue, flatOptions.find((o) => o.value === optValue));
-            onSelect?.(optValue);
-            combo.closeDropdown();
-            setSearchValue('');
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isMultiple, selectVal, flatOptions, onChange, onSelect, props]);
-    const handleComboSelect = (0, react_1.useCallback)((item) => {
-        if (!item.disabled)
-            handleSelect(item.value);
-    }, [handleSelect]);
-    const combo = (0, useCombobox_1.useCombobox)({
-        items: flatOptions,
-        searchValue,
-        filterOption,
-        isOpen: 'open' in props ? props.open : undefined,
-        defaultOpen,
-        disabled,
-        defaultActiveFirstOption: false,
-        onOpenChange: onDropdownVisibleChange,
-        onSelect: handleComboSelect,
-    });
-    const cls = (0, classnames_1.default)(prefixCls, className, `${prefixCls}_${selectSize}`, {
-        [`${prefixCls}_disabled`]: disabled,
-        [`${prefixCls}_open`]: combo.isOpen,
-        [`${prefixCls}_multiple`]: isMultiple,
-        [`${prefixCls}_showSearch`]: showSearch,
-        [`${prefixCls}_has-value`]: allowClear && hasSomeValue && !disabled,
-    });
-    const arrowCls = (0, classnames_1.default)(`${prefixCls}__arrow`, {
-        [`${prefixCls}__arrow_reverse`]: combo.isOpen,
-    });
-    (0, hooks_1.useClickOutside)(ref.current, () => {
-        if (!('open' in props)) {
-            combo.closeDropdown();
-        }
-        setSearchValue('');
-    });
-    // Get display label for a value
-    const getLabelForValue = (0, react_1.useCallback)((val) => {
-        const opt = flatOptions.find((o) => o.value === val);
-        const label = opt?.label ?? val;
-        if (labelRender && opt) {
-            return labelRender({ label, value: val });
-        }
-        return label;
-    }, [flatOptions, labelRender]);
-    // Remove tag
-    const handleRemoveTag = (val, e) => {
-        e.stopPropagation();
-        if (disabled)
-            return;
-        const arr = Array.isArray(selectVal) ? selectVal : [];
-        const newVal = arr.filter((v) => v !== val);
-        if (!('value' in props)) {
-            setSelectVal(newVal);
-        }
-        onChange?.(newVal, flatOptions.filter((o) => newVal.includes(o.value)));
-        onSelect?.(newVal);
-    };
-    // Clear all
-    const handleClear = (e) => {
-        e.stopPropagation();
-        if (disabled)
-            return;
-        const newVal = isMultiple ? [] : '';
-        if (!('value' in props)) {
-            setSelectVal(newVal);
-        }
-        onChange?.(newVal);
-        onSelect?.(newVal);
-        setSearchValue('');
-    };
-    // Search input change
-    const handleSearchChange = (e) => {
-        const val = e.target.value;
-        setSearchValue(val);
-        onSearch?.(val);
-        if (!combo.isOpen) {
-            combo.openDropdown();
-        }
-    };
-    // Selector click
-    const handleSelectorClick = () => {
-        if (disabled)
-            return;
-        if (combo.isOpen && !showSearch) {
-            combo.closeDropdown();
-        }
-        else {
-            combo.openDropdown();
-            setTimeout(() => searchInputRef.current?.focus(), 0);
-        }
-    };
-    // Keyboard — wrap hook's handler with Select-specific keys
-    const handleKeyDown = (e) => {
-        if (disabled)
-            return;
-        if (e.key === 'Backspace' && isMultiple && !searchValue) {
-            const arr = Array.isArray(selectVal) ? selectVal : [];
-            if (arr.length > 0) {
-                const newVal = arr.slice(0, -1);
-                if (!('value' in props))
-                    setSelectVal(newVal);
-                onChange?.(newVal, flatOptions.filter((o) => newVal.includes(o.value)));
-                onSelect?.(newVal);
-            }
-            return;
-        }
-        if (e.key === ' ') {
-            if (!combo.isOpen) {
-                e.preventDefault();
-                combo.openDropdown();
-            }
-            else if (combo.focusedIndex >= 0 && combo.focusedIndex < combo.filteredItems.length) {
-                e.preventDefault();
-                const opt = combo.filteredItems[combo.focusedIndex];
-                if (!opt.disabled)
-                    handleSelect(opt.value);
-            }
-            return;
-        }
-        combo.handleKeyDown(e);
-    };
-    // Controlled value
-    const hasValueProp = 'value' in props;
-    (0, react_1.useEffect)(() => {
-        if (hasValueProp)
-            setSelectVal(value);
-    }, [hasValueProp, value]);
-    // Reset focused index when search changes
-    (0, react_1.useEffect)(() => {
-        combo.setFocusedIndex(-1);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchValue]);
-    const hasValue = hasSomeValue;
-    // Context value
-    const contextValue = (0, react_1.useMemo)(() => ({
-        value: selectVal,
-        mode,
-        searchValue,
-        onSelect: handleSelect,
-        prefixCls,
-    }), [selectVal, mode, searchValue, handleSelect, prefixCls]);
-    // Filter children for dropdown
-    const filterChildren = (nodes) => {
-        return react_1.default.Children.map(nodes, (child) => {
-            const el = child;
-            if (!el?.type)
-                return null;
-            if (el.type.displayName === 'SelectOption') {
-                const opt = {
-                    value: el.props.value,
-                    label: el.props.label ?? el.props.children,
-                    disabled: !!el.props.disabled,
-                };
-                if (!combo.matchesFilter(opt))
-                    return null;
-                return react_1.default.cloneElement(el, el.props);
-            }
-            if (el.type.displayName === 'SelectOptGroup') {
-                const filteredGroupChildren = filterChildren(el.props.children);
-                const hasVisibleChildren = react_1.default.Children.toArray(filteredGroupChildren).some(Boolean);
-                if (!hasVisibleChildren)
-                    return null;
-                return react_1.default.cloneElement(el, { ...el.props, children: filteredGroupChildren });
-            }
-            return null;
-        });
-    };
-    // Render dropdown
-    const renderDropdownContent = () => {
-        if (loading) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: `${prefixCls}__loading`, children: (0, jsx_runtime_1.jsx)(components_1.LoadingCircle, { size: 20 }) }));
-        }
-        let content;
-        if (optionsProp) {
-            const filtered = combo.filteredItems;
-            if (filtered.length === 0) {
-                content = null;
-            }
-            else {
-                content = filtered.map((opt, index) => {
-                    const isSelected = isMultiple
-                        ? Array.isArray(selectVal) && selectVal.includes(opt.value)
-                        : selectVal === opt.value;
-                    const optCls = (0, classnames_1.default)(`${prefixCls}-option`, {
-                        [`${prefixCls}-option_selected`]: isSelected,
-                        [`${prefixCls}-option_active`]: index === combo.focusedIndex,
-                        [`${prefixCls}-option_disabled`]: opt.disabled,
-                    });
-                    const label = opt.label ?? opt.value;
-                    const renderedContent = optionRender ? optionRender(opt, { index }) : label;
-                    return ((0, jsx_runtime_1.jsxs)("li", { role: "option", className: optCls, "aria-selected": isSelected, "aria-disabled": opt.disabled, onClick: () => !opt.disabled && handleSelect(opt.value), onMouseEnter: () => combo.setFocusedIndex(index), children: [(0, jsx_runtime_1.jsx)("span", { className: `${prefixCls}-option__content`, children: renderedContent }), isMultiple && isSelected && ((0, jsx_runtime_1.jsx)("span", { className: `${prefixCls}-option__check`, children: (0, jsx_runtime_1.jsx)(components_1.Check, { size: 14 }) }))] }, opt.value));
-                });
-            }
-        }
-        else {
-            content = filterChildren(children);
-        }
-        const contentArray = react_1.default.Children.toArray(content);
-        if (!contentArray || contentArray.length === 0) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: `${prefixCls}__empty`, children: notFoundContent ?? 'No data' }));
-        }
-        return content;
-    };
-    const renderOverlay = () => {
-        const selectorWidth = ref.current?.offsetWidth;
-        return ((0, jsx_runtime_1.jsx)(select_context_1.SelectContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("ul", { className: `${prefixCls}__dropdown`, style: { minWidth: selectorWidth || undefined, ...dropdownStyle }, role: "listbox", id: listboxId, children: renderDropdownContent() }) }));
-    };
-    // Render selector content
-    const renderSelectorContent = () => {
-        if (isMultiple) {
-            const arr = Array.isArray(selectVal) ? selectVal : [];
-            const displayTags = maxTagCount !== undefined && arr.length > maxTagCount
-                ? arr.slice(0, maxTagCount)
-                : arr;
-            const remaining = maxTagCount !== undefined && arr.length > maxTagCount
-                ? arr.length - maxTagCount
-                : 0;
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayTags.map((val) => ((0, jsx_runtime_1.jsxs)("span", { className: `${prefixCls}__tag`, children: [(0, jsx_runtime_1.jsx)("span", { className: `${prefixCls}__tag-content`, children: getLabelForValue(val) }), (0, jsx_runtime_1.jsx)("span", { className: `${prefixCls}__tag-close`, onClick: (e) => handleRemoveTag(val, e), "aria-label": "Remove", children: (0, jsx_runtime_1.jsx)(components_1.Close, { size: 10 }) })] }, val))), remaining > 0 && ((0, jsx_runtime_1.jsxs)("span", { className: `${prefixCls}__tag ${prefixCls}__tag_max`, children: ["+", remaining, "..."] })), showSearch && ((0, jsx_runtime_1.jsx)("input", { ref: searchInputRef, className: `${prefixCls}__search`, value: searchValue, onChange: handleSearchChange, placeholder: arr.length === 0 ? placeholder : undefined, autoComplete: "off", disabled: disabled })), arr.length === 0 && !searchValue && !showSearch && ((0, jsx_runtime_1.jsx)("span", { className: `${prefixCls}__placeholder`, children: placeholder }))] }));
-        }
-        // Single mode
-        if (showSearch && combo.isOpen) {
-            return ((0, jsx_runtime_1.jsx)("input", { ref: searchInputRef, className: `${prefixCls}__search`, value: searchValue, onChange: handleSearchChange, placeholder: hasValue ? undefined : placeholder, autoComplete: "off", disabled: disabled }));
-        }
-        if (hasValue) {
-            return ((0, jsx_runtime_1.jsx)("span", { className: `${prefixCls}__selection-text`, children: getLabelForValue(Array.isArray(selectVal) ? selectVal[0] : selectVal) }));
-        }
-        return (0, jsx_runtime_1.jsx)("span", { className: `${prefixCls}__placeholder`, children: placeholder });
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { ...otherProps, ref: ref, className: cls, role: "combobox", "aria-expanded": combo.isOpen, "aria-haspopup": "listbox", "aria-owns": combo.isOpen ? listboxId : undefined, onKeyDown: handleKeyDown, tabIndex: disabled ? undefined : 0, children: (0, jsx_runtime_1.jsx)(popup_1.default, { trigger: "manual", placement: "bottom", arrow: false, visible: combo.isOpen, content: renderOverlay(), children: (0, jsx_runtime_1.jsxs)("div", { className: `${prefixCls}__selector`, onClick: handleSelectorClick, children: [(0, jsx_runtime_1.jsx)("div", { className: `${prefixCls}__selection`, children: renderSelectorContent() }), (0, jsx_runtime_1.jsxs)("div", { className: `${prefixCls}__suffix`, children: [(0, jsx_runtime_1.jsx)("span", { className: arrowCls, children: (0, jsx_runtime_1.jsx)(components_1.ArrowDown, { size: 10 }) }), allowClear && hasValue && !disabled && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: `${prefixCls}__clear`, onClick: handleClear, "aria-label": "Clear", children: (0, jsx_runtime_1.jsx)(components_1.CloseCircle, { size: 14, color: "currentColor" }) }))] })] }) }) }));
+	const { defaultOpen = false, disabled = false, defaultValue, prefixCls: customisedCls, value, mode, showSearch = false, filterOption = true, onSearch, allowClear = false, loading = false, size, maxTagCount, notFoundContent, options: optionsProp, onChange, onSelect, onDropdownVisibleChange, optionRender, labelRender, placeholder, className, children, dropdownStyle, ...otherProps } = props;
+	const isMultiple = mode === "multiple" || mode === "tags";
+	const defaultVal = defaultValue ?? (isMultiple ? [] : "");
+	const [selectVal, setSelectVal] = (0, react.useState)("value" in props ? value : defaultVal);
+	const [searchValue, setSearchValue] = (0, react.useState)("");
+	const ref = (0, react.useRef)(null);
+	const searchInputRef = (0, react.useRef)(null);
+	const listboxId = (0, react.useId)();
+	const configContext = (0, react.useContext)(require_config_context.ConfigContext);
+	const prefixCls = require_general.getPrefixCls("select", configContext.prefixCls, customisedCls);
+	const selectSize = size || configContext.componentSize || "md";
+	const hasSomeValue = isMultiple ? Array.isArray(selectVal) && selectVal.length > 0 : selectVal !== "" && selectVal !== void 0;
+	const flatOptions = (0, react.useMemo)(() => {
+		if (optionsProp) return optionsProp;
+		const result = [];
+		const extractFromChildren = (nodes) => {
+			react.default.Children.forEach(nodes, (child) => {
+				const el = child;
+				if (!el?.type) return;
+				if (el.type.displayName === "SelectOption") result.push({
+					value: el.props.value,
+					label: el.props.label ?? el.props.children,
+					disabled: !!el.props.disabled
+				});
+				else if (el.type.displayName === "SelectOptGroup") extractFromChildren(el.props.children);
+			});
+		};
+		extractFromChildren(children);
+		return result;
+	}, [optionsProp, children]);
+	const handleSelect = (0, react.useCallback)((optValue) => {
+		if (isMultiple) {
+			const arr = Array.isArray(selectVal) ? selectVal : [];
+			let newVal;
+			if (arr.includes(optValue)) newVal = arr.filter((v) => v !== optValue);
+			else newVal = [...arr, optValue];
+			if (!("value" in props)) setSelectVal(newVal);
+			onChange?.(newVal, flatOptions.filter((o) => newVal.includes(o.value)));
+			onSelect?.(newVal);
+			setSearchValue("");
+		} else {
+			if (!("value" in props)) setSelectVal(optValue);
+			onChange?.(optValue, flatOptions.find((o) => o.value === optValue));
+			onSelect?.(optValue);
+			combo.closeDropdown();
+			setSearchValue("");
+		}
+	}, [
+		isMultiple,
+		selectVal,
+		flatOptions,
+		onChange,
+		onSelect,
+		props
+	]);
+	const handleComboSelect = (0, react.useCallback)((item) => {
+		if (!item.disabled) handleSelect(item.value);
+	}, [handleSelect]);
+	const combo = require_useCombobox.useCombobox({
+		items: flatOptions,
+		searchValue,
+		filterOption,
+		isOpen: "open" in props ? props.open : void 0,
+		defaultOpen,
+		disabled,
+		defaultActiveFirstOption: false,
+		onOpenChange: onDropdownVisibleChange,
+		onSelect: handleComboSelect
+	});
+	const cls = (0, classnames.default)(prefixCls, className, `${prefixCls}_${selectSize}`, {
+		[`${prefixCls}_disabled`]: disabled,
+		[`${prefixCls}_open`]: combo.isOpen,
+		[`${prefixCls}_multiple`]: isMultiple,
+		[`${prefixCls}_showSearch`]: showSearch,
+		[`${prefixCls}_has-value`]: allowClear && hasSomeValue && !disabled
+	});
+	const arrowCls = (0, classnames.default)(`${prefixCls}__arrow`, { [`${prefixCls}__arrow_reverse`]: combo.isOpen });
+	require_hooks.useClickOutside(ref, () => {
+		if (!("open" in props)) combo.closeDropdown();
+		setSearchValue("");
+	});
+	const getLabelForValue = (0, react.useCallback)((val) => {
+		const opt = flatOptions.find((o) => o.value === val);
+		const label = opt?.label ?? val;
+		if (labelRender && opt) return labelRender({
+			label,
+			value: val
+		});
+		return label;
+	}, [flatOptions, labelRender]);
+	const handleRemoveTag = (val, e) => {
+		e.stopPropagation();
+		if (disabled) return;
+		const newVal = (Array.isArray(selectVal) ? selectVal : []).filter((v) => v !== val);
+		if (!("value" in props)) setSelectVal(newVal);
+		onChange?.(newVal, flatOptions.filter((o) => newVal.includes(o.value)));
+		onSelect?.(newVal);
+	};
+	const handleClear = (e) => {
+		e.stopPropagation();
+		if (disabled) return;
+		const newVal = isMultiple ? [] : "";
+		if (!("value" in props)) setSelectVal(newVal);
+		onChange?.(newVal);
+		onSelect?.(newVal);
+		setSearchValue("");
+	};
+	const handleSearchChange = (e) => {
+		const val = e.target.value;
+		setSearchValue(val);
+		onSearch?.(val);
+		if (!combo.isOpen) combo.openDropdown();
+	};
+	const handleSelectorClick = () => {
+		if (disabled) return;
+		if (combo.isOpen && !showSearch) combo.closeDropdown();
+		else {
+			combo.openDropdown();
+			setTimeout(() => searchInputRef.current?.focus(), 0);
+		}
+	};
+	const handleKeyDown = (e) => {
+		if (disabled) return;
+		if (e.key === "Backspace" && isMultiple && !searchValue) {
+			const arr = Array.isArray(selectVal) ? selectVal : [];
+			if (arr.length > 0) {
+				const newVal = arr.slice(0, -1);
+				if (!("value" in props)) setSelectVal(newVal);
+				onChange?.(newVal, flatOptions.filter((o) => newVal.includes(o.value)));
+				onSelect?.(newVal);
+			}
+			return;
+		}
+		if (e.key === " ") {
+			if (!combo.isOpen) {
+				e.preventDefault();
+				combo.openDropdown();
+			} else if (combo.focusedIndex >= 0 && combo.focusedIndex < combo.filteredItems.length) {
+				e.preventDefault();
+				const opt = combo.filteredItems[combo.focusedIndex];
+				if (!opt.disabled) handleSelect(opt.value);
+			}
+			return;
+		}
+		combo.handleKeyDown(e);
+	};
+	const hasValueProp = "value" in props;
+	(0, react.useEffect)(() => {
+		if (hasValueProp) setSelectVal(value);
+	}, [hasValueProp, value]);
+	(0, react.useEffect)(() => {
+		combo.setFocusedIndex(-1);
+	}, [searchValue]);
+	const hasValue = hasSomeValue;
+	const contextValue = (0, react.useMemo)(() => ({
+		value: selectVal,
+		mode,
+		searchValue,
+		onSelect: handleSelect,
+		prefixCls
+	}), [
+		selectVal,
+		mode,
+		searchValue,
+		handleSelect,
+		prefixCls
+	]);
+	const filterChildren = (nodes) => {
+		return react.default.Children.map(nodes, (child) => {
+			const el = child;
+			if (!el?.type) return null;
+			if (el.type.displayName === "SelectOption") {
+				const opt = {
+					value: el.props.value,
+					label: el.props.label ?? el.props.children,
+					disabled: !!el.props.disabled
+				};
+				if (!combo.matchesFilter(opt)) return null;
+				return react.default.cloneElement(el, el.props);
+			}
+			if (el.type.displayName === "SelectOptGroup") {
+				const filteredGroupChildren = filterChildren(el.props.children);
+				if (!react.default.Children.toArray(filteredGroupChildren).some(Boolean)) return null;
+				return react.default.cloneElement(el, {
+					...el.props,
+					children: filteredGroupChildren
+				});
+			}
+			return null;
+		});
+	};
+	const renderDropdownContent = () => {
+		if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `${prefixCls}__loading`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.LoadingCircle, { size: 20 })
+		});
+		let content;
+		if (optionsProp) {
+			const filtered = combo.filteredItems;
+			if (filtered.length === 0) content = null;
+			else content = filtered.map((opt, index) => {
+				const isSelected = isMultiple ? Array.isArray(selectVal) && selectVal.includes(opt.value) : selectVal === opt.value;
+				const optCls = (0, classnames.default)(`${prefixCls}-option`, {
+					[`${prefixCls}-option_selected`]: isSelected,
+					[`${prefixCls}-option_active`]: index === combo.focusedIndex,
+					[`${prefixCls}-option_disabled`]: opt.disabled
+				});
+				const label = opt.label ?? opt.value;
+				const renderedContent = optionRender ? optionRender(opt, { index }) : label;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					role: "option",
+					className: optCls,
+					"aria-selected": isSelected,
+					"aria-disabled": opt.disabled,
+					onClick: () => !opt.disabled && handleSelect(opt.value),
+					onMouseEnter: () => combo.setFocusedIndex(index),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${prefixCls}-option__content`,
+						children: renderedContent
+					}), isMultiple && isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${prefixCls}-option__check`,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.Check, { size: 14 })
+					})]
+				}, opt.value);
+			});
+		} else content = filterChildren(children);
+		const contentArray = react.default.Children.toArray(content);
+		if (!contentArray || contentArray.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `${prefixCls}__empty`,
+			children: notFoundContent ?? "No data"
+		});
+		return content;
+	};
+	const renderOverlay = () => {
+		const selectorWidth = ref.current?.offsetWidth;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select_context.SelectContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: `${prefixCls}__dropdown`,
+				style: {
+					minWidth: selectorWidth || void 0,
+					...dropdownStyle
+				},
+				role: "listbox",
+				id: listboxId,
+				children: renderDropdownContent()
+			})
+		});
+	};
+	const renderSelectorContent = () => {
+		if (isMultiple) {
+			const arr = Array.isArray(selectVal) ? selectVal : [];
+			const displayTags = maxTagCount !== void 0 && arr.length > maxTagCount ? arr.slice(0, maxTagCount) : arr;
+			const remaining = maxTagCount !== void 0 && arr.length > maxTagCount ? arr.length - maxTagCount : 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				displayTags.map((val) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: `${prefixCls}__tag`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${prefixCls}__tag-content`,
+						children: getLabelForValue(val)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${prefixCls}__tag-close`,
+						onClick: (e) => handleRemoveTag(val, e),
+						"aria-label": "Remove",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.Close, { size: 10 })
+					})]
+				}, val)),
+				remaining > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: `${prefixCls}__tag ${prefixCls}__tag_max`,
+					children: [
+						"+",
+						remaining,
+						"..."
+					]
+				}),
+				showSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: searchInputRef,
+					className: `${prefixCls}__search`,
+					value: searchValue,
+					onChange: handleSearchChange,
+					placeholder: arr.length === 0 ? placeholder : void 0,
+					autoComplete: "off",
+					disabled
+				}),
+				arr.length === 0 && !searchValue && !showSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `${prefixCls}__placeholder`,
+					children: placeholder
+				})
+			] });
+		}
+		if (showSearch && combo.isOpen) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref: searchInputRef,
+			className: `${prefixCls}__search`,
+			value: searchValue,
+			onChange: handleSearchChange,
+			placeholder: hasValue ? void 0 : placeholder,
+			autoComplete: "off",
+			disabled
+		});
+		if (hasValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `${prefixCls}__selection-text`,
+			children: getLabelForValue(Array.isArray(selectVal) ? selectVal[0] : selectVal)
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `${prefixCls}__placeholder`,
+			children: placeholder
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		role: "combobox",
+		"aria-expanded": combo.isOpen,
+		"aria-haspopup": "listbox",
+		"aria-owns": combo.isOpen ? listboxId : void 0,
+		onKeyDown: handleKeyDown,
+		tabIndex: disabled ? void 0 : 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+			trigger: "manual",
+			placement: "bottom",
+			arrow: false,
+			visible: combo.isOpen,
+			content: renderOverlay(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefixCls}__selector`,
+				onClick: handleSelectorClick,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefixCls}__selection`,
+					children: renderSelectorContent()
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `${prefixCls}__suffix`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: arrowCls,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ArrowDown, { size: 10 })
+					}), allowClear && hasValue && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: `${prefixCls}__clear`,
+						onClick: handleClear,
+						"aria-label": "Clear",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.CloseCircle, {
+							size: 14,
+							color: "currentColor"
+						})
+					})]
+				})]
+			})
+		})
+	});
 };
-Select.displayName = 'Select';
+Select.displayName = "Select";
+//#endregion
 exports.default = Select;
+
 //# sourceMappingURL=select.js.map