@v-c/select 0.0.1

package/dist/OptGroup.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+var OptGroup = () => null;
+OptGroup.isSelectOptGroup = true;
+var OptGroup_default = OptGroup;
+exports.default = OptGroup_default;

package/dist/OptGroup.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from 'vue';
+import { DefaultOptionType } from './Select.tsx';
+export interface OptGroupProps extends Omit<DefaultOptionType, 'options'> {
+}
+declare const OptGroup: FunctionalComponent<OptGroupProps>;
+export default OptGroup;

package/dist/OptGroup.js

@@ -0,0 +1,4 @@
+var OptGroup = () => null;
+OptGroup.isSelectOptGroup = true;
+var OptGroup_default = OptGroup;
+export { OptGroup_default as default };

package/dist/Option.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+var Option = () => null;
+Option.isSelectOption = true;
+var Option_default = Option;
+exports.default = Option_default;

package/dist/Option.d.ts

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from 'vue';
+import { DefaultOptionType } from './Select.tsx';
+export interface OptionProps extends Omit<DefaultOptionType, 'label'> {
+    /** Save for customize data */
+    [prop: string]: any;
+}
+declare const Option: FunctionalComponent<OptionProps>;
+export default Option;

package/dist/Option.js

@@ -0,0 +1,4 @@
+var Option = () => null;
+Option.isSelectOption = true;
+var Option_default = Option;
+export { Option_default as default };

package/dist/OptionList.cjs

@@ -0,0 +1,255 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_useBaseProps = require("./hooks/useBaseProps.cjs");
+const require_SelectContext = require("./SelectContext.cjs");
+const require_TransBtn = require("./TransBtn.cjs");
+const require_platformUtil = require("./utils/platformUtil.cjs");
+const require_valueUtil = require("./utils/valueUtil.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
+let __v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
+__v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(__v_c_util_dist_pickAttrs);
+let __v_c_virtual_list = require("@v-c/virtual-list");
+__v_c_virtual_list = require_rolldown_runtime.__toESM(__v_c_virtual_list);
+function isTitleType(content) {
+	return typeof content === "string" || typeof content === "number";
+}
+var OptionList = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "OptionList",
+	inheritAttrs: false,
+	setup(_, { expose }) {
+		const baseProps = require_useBaseProps.default();
+		const context = require_SelectContext.useSelectContext();
+		const itemPrefixCls = (0, vue.computed)(() => `${baseProps.value?.prefixCls}-item`);
+		const memoFlattenOptions = (0, vue.computed)(() => {
+			if (!baseProps.value?.open) return context.value?.flattenOptions || [];
+			return context.value?.flattenOptions || [];
+		});
+		const listRef = (0, vue.shallowRef)(null);
+		const overMaxCount = (0, vue.computed)(() => {
+			const { maxCount, rawValues } = context.value || {};
+			return !!(baseProps.value?.multiple && require_valueUtil.isValidCount(maxCount) && rawValues && rawValues.size >= maxCount);
+		});
+		const onListMouseDown = (event) => {
+			event.preventDefault();
+		};
+		const scrollIntoView = (args) => {
+			listRef.value?.scrollTo(typeof args === "number" ? { index: args } : args);
+		};
+		const isSelected = (value) => {
+			if (baseProps.value?.mode === "combobox") return false;
+			return context.value?.rawValues?.has(value) || false;
+		};
+		const getEnabledActiveIndex = (index, offset = 1) => {
+			const len = memoFlattenOptions.value.length;
+			for (let i = 0; i < len; i += 1) {
+				const current = (index + i * offset + len) % len;
+				const { group, data } = memoFlattenOptions.value[current] || {};
+				if (!group && !data?.disabled && (isSelected(data?.value) || !overMaxCount.value)) return current;
+			}
+			return -1;
+		};
+		const activeIndex = (0, vue.shallowRef)(-1);
+		const setActive = (index, fromKeyboard = false) => {
+			activeIndex.value = index;
+			const info = { source: fromKeyboard ? "keyboard" : "mouse" };
+			const flattenItem = memoFlattenOptions.value[index];
+			if (!flattenItem) {
+				context.value?.onActiveValue?.(null, -1, info);
+				return;
+			}
+			context.value?.onActiveValue?.(flattenItem.value, index, info);
+		};
+		(0, vue.watch)([() => memoFlattenOptions.value.length, () => baseProps.value?.searchValue], () => {
+			setActive(context.value?.defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
+		}, { immediate: true });
+		const isAriaSelected = (value) => {
+			if (baseProps.value?.mode === "combobox") return String(value).toLowerCase() === (baseProps.value?.searchValue || "").toLowerCase();
+			return context.value?.rawValues?.has(value) || false;
+		};
+		(0, vue.watch)([() => baseProps.value?.open, () => baseProps.value?.searchValue], () => {
+			let timeoutId;
+			const rawValues = context.value?.rawValues;
+			if (!baseProps.value?.multiple && baseProps.value?.open && rawValues?.size === 1) {
+				const value = Array.from(rawValues)[0];
+				const searchValue = baseProps.value?.searchValue;
+				const index = memoFlattenOptions.value.findIndex(({ data }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
+				if (index !== -1) {
+					setActive(index);
+					timeoutId = setTimeout(() => {
+						scrollIntoView(index);
+					});
+				}
+			}
+			if (baseProps.value?.open) listRef.value?.scrollTo(void 0);
+			return () => {
+				if (timeoutId) clearTimeout(timeoutId);
+			};
+		});
+		const onSelectValue = (value) => {
+			if (value !== void 0) context.value?.onSelect?.(value, { selected: !context.value?.rawValues?.has(value) });
+			if (!baseProps.value?.multiple) baseProps.value?.toggleOpen?.(false);
+		};
+		const onKeyDown = (event) => {
+			const { which, ctrlKey } = event;
+			switch (which) {
+				case __v_c_util_dist_KeyCode.default.N:
+				case __v_c_util_dist_KeyCode.default.P:
+				case __v_c_util_dist_KeyCode.default.UP:
+				case __v_c_util_dist_KeyCode.default.DOWN: {
+					let offset = 0;
+					if (which === __v_c_util_dist_KeyCode.default.UP) offset = -1;
+					else if (which === __v_c_util_dist_KeyCode.default.DOWN) offset = 1;
+					else if (require_platformUtil.isPlatformMac() && ctrlKey) {
+						if (which === __v_c_util_dist_KeyCode.default.N) offset = 1;
+						else if (which === __v_c_util_dist_KeyCode.default.P) offset = -1;
+					}
+					if (offset !== 0) {
+						const nextActiveIndex = getEnabledActiveIndex(activeIndex.value + offset, offset);
+						scrollIntoView(nextActiveIndex);
+						setActive(nextActiveIndex, true);
+					}
+					break;
+				}
+				case __v_c_util_dist_KeyCode.default.TAB:
+				case __v_c_util_dist_KeyCode.default.ENTER: {
+					const item = memoFlattenOptions.value[activeIndex.value];
+					if (!item || item.data.disabled) {
+						onSelectValue(void 0);
+						return;
+					}
+					if (!overMaxCount.value || context.value?.rawValues?.has(item.value)) onSelectValue(item.value);
+					else onSelectValue(void 0);
+					if (baseProps.value?.open) event.preventDefault();
+					break;
+				}
+				case __v_c_util_dist_KeyCode.default.ESC:
+					baseProps.value?.toggleOpen?.(false);
+					if (baseProps.value?.open) event.stopPropagation();
+			}
+		};
+		const onKeyUp = () => {};
+		expose({
+			onKeyDown,
+			onKeyUp,
+			scrollTo: (index) => {
+				scrollIntoView(index);
+			}
+		});
+		return () => {
+			const { id, notFoundContent, onPopupScroll } = baseProps.value || {};
+			const { menuItemSelectedIcon, fieldNames, virtual, direction, listHeight, listItemHeight, optionRender, classNames: contextClassNames, styles: contextStyles } = context.value || {};
+			if (memoFlattenOptions.value.length === 0) return (0, vue.createVNode)("div", {
+				"role": "listbox",
+				"id": `${id}_list`,
+				"class": `${itemPrefixCls.value}-empty`,
+				"onMousedown": onListMouseDown
+			}, [notFoundContent]);
+			const omitFieldNameList = Object.keys(fieldNames || {}).map((key) => fieldNames?.[key]);
+			const getLabel = (item) => item.label;
+			function getItemAriaProps(item, index) {
+				const { group } = item;
+				return {
+					role: group ? "presentation" : "option",
+					id: `${id}_list_${index}`
+				};
+			}
+			const renderItem = (index) => {
+				const item = memoFlattenOptions.value[index];
+				if (!item) return null;
+				const itemData = item.data || {};
+				const { value } = itemData;
+				const { group } = item;
+				const attrs = (0, __v_c_util_dist_pickAttrs.default)(itemData, true);
+				const mergedLabel = getLabel(item);
+				return item ? (0, vue.createVNode)("div", (0, vue.mergeProps)({ "aria-label": typeof mergedLabel === "string" && !group ? mergedLabel : void 0 }, attrs, { "key": index }, getItemAriaProps(item, index), { "aria-selected": isAriaSelected(value) }), [value]) : null;
+			};
+			const a11yProps = {
+				role: "listbox",
+				id: `${id}_list`
+			};
+			return (0, vue.createVNode)(vue.Fragment, null, [virtual && (0, vue.createVNode)("div", (0, vue.mergeProps)(a11yProps, { "style": {
+				height: 0,
+				width: 0,
+				overflow: "hidden"
+			} }), [
+				renderItem(activeIndex.value - 1),
+				renderItem(activeIndex.value),
+				renderItem(activeIndex.value + 1)
+			]), (0, vue.createVNode)(__v_c_virtual_list.default, (0, vue.mergeProps)({
+				"itemKey": "key",
+				"ref": (el) => {
+					listRef.value = el;
+				},
+				"data": memoFlattenOptions.value,
+				"height": listHeight,
+				"itemHeight": listItemHeight,
+				"fullHeight": false
+			}, { onMousedown: onListMouseDown }, {
+				"onScroll": onPopupScroll,
+				"virtual": virtual,
+				"direction": direction,
+				"innerProps": virtual ? void 0 : a11yProps,
+				"class": contextClassNames?.popup?.list,
+				"style": contextStyles?.popup?.list
+			}), { default: ({ item, index: itemIndex }) => {
+				const { group, groupOption, data, label, value } = item;
+				const { key } = data;
+				if (group) {
+					const groupTitle = data.title ?? (isTitleType(label) ? label.toString() : void 0);
+					return (0, vue.createVNode)("div", {
+						"class": (0, __v_c_util.clsx)(itemPrefixCls.value, `${itemPrefixCls.value}-group`, data.className),
+						"title": groupTitle
+					}, [label !== void 0 ? label : key]);
+				}
+				const { disabled, title, children, style, className,...otherProps } = data;
+				const passedProps = {};
+				Object.keys(otherProps).forEach((propKey) => {
+					if (!omitFieldNameList.includes(propKey)) passedProps[propKey] = otherProps[propKey];
+				});
+				const selected = isSelected(value);
+				const mergedDisabled = disabled || !selected && overMaxCount.value;
+				const optionPrefixCls = `${itemPrefixCls.value}-option`;
+				const optionClassName = (0, __v_c_util.clsx)(itemPrefixCls.value, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
+					[`${optionPrefixCls}-grouped`]: groupOption,
+					[`${optionPrefixCls}-active`]: activeIndex.value === itemIndex && !mergedDisabled,
+					[`${optionPrefixCls}-disabled`]: mergedDisabled,
+					[`${optionPrefixCls}-selected`]: selected
+				});
+				const mergedLabel = getLabel(item);
+				const iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === "function" || selected;
+				const content = typeof mergedLabel === "number" ? mergedLabel : mergedLabel || value;
+				let optionTitle = isTitleType(content) ? content.toString() : void 0;
+				if (title !== void 0) optionTitle = title;
+				return (0, vue.createVNode)("div", (0, vue.mergeProps)((0, __v_c_util_dist_pickAttrs.default)(passedProps), !virtual ? getItemAriaProps(item, itemIndex) : {}, {
+					"aria-selected": virtual ? void 0 : isAriaSelected(value),
+					"class": optionClassName,
+					"title": optionTitle,
+					"onMousemove": () => {
+						if (activeIndex.value === itemIndex || mergedDisabled) return;
+						setActive(itemIndex);
+					},
+					"onClick": () => {
+						if (!mergedDisabled) onSelectValue(value);
+					},
+					"style": {
+						...contextStyles?.popup?.listItem,
+						...style
+					}
+				}), [(0, vue.createVNode)("div", { "class": `${optionPrefixCls}-content` }, [typeof optionRender === "function" ? optionRender(item, { index: itemIndex }) : content]), iconVisible && (0, vue.createVNode)(require_TransBtn.default, {
+					"className": `${itemPrefixCls.value}-option-state`,
+					"customizeIcon": menuItemSelectedIcon,
+					"customizeIconProps": {
+						value,
+						disabled: mergedDisabled,
+						isSelected: selected
+					}
+				}, { default: () => [selected ? "✓" : null] })]);
+			} })]);
+		};
+	}
+});
+var OptionList_default = OptionList;
+exports.default = OptionList_default;

package/dist/OptionList.d.ts

@@ -0,0 +1,17 @@
+export interface ScrollConfig {
+    index?: number;
+    key?: string | number;
+    align?: 'top' | 'bottom' | 'auto';
+    offset?: number;
+}
+export interface RefOptionListProps {
+    onKeyDown: (event: KeyboardEvent) => void;
+    onKeyUp: (event: KeyboardEvent) => void;
+    scrollTo?: (args: number | ScrollConfig) => void;
+}
+/**
+ * Using virtual list of option display.
+ * Will fallback to dom if use customize render.
+ */
+declare const OptionList: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default OptionList;

package/dist/OptionList.js

@@ -0,0 +1,249 @@
+import useBaseProps from "./hooks/useBaseProps.js";
+import { useSelectContext } from "./SelectContext.js";
+import TransBtn_default from "./TransBtn.js";
+import { isPlatformMac } from "./utils/platformUtil.js";
+import { isValidCount } from "./utils/valueUtil.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import KeyCode from "@v-c/util/dist/KeyCode";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+import List from "@v-c/virtual-list";
+function isTitleType(content) {
+	return typeof content === "string" || typeof content === "number";
+}
+var OptionList_default = /* @__PURE__ */ defineComponent({
+	name: "OptionList",
+	inheritAttrs: false,
+	setup(_, { expose }) {
+		const baseProps = useBaseProps();
+		const context = useSelectContext();
+		const itemPrefixCls = computed(() => `${baseProps.value?.prefixCls}-item`);
+		const memoFlattenOptions = computed(() => {
+			if (!baseProps.value?.open) return context.value?.flattenOptions || [];
+			return context.value?.flattenOptions || [];
+		});
+		const listRef = shallowRef(null);
+		const overMaxCount = computed(() => {
+			const { maxCount, rawValues } = context.value || {};
+			return !!(baseProps.value?.multiple && isValidCount(maxCount) && rawValues && rawValues.size >= maxCount);
+		});
+		const onListMouseDown = (event) => {
+			event.preventDefault();
+		};
+		const scrollIntoView = (args) => {
+			listRef.value?.scrollTo(typeof args === "number" ? { index: args } : args);
+		};
+		const isSelected = (value) => {
+			if (baseProps.value?.mode === "combobox") return false;
+			return context.value?.rawValues?.has(value) || false;
+		};
+		const getEnabledActiveIndex = (index, offset = 1) => {
+			const len = memoFlattenOptions.value.length;
+			for (let i = 0; i < len; i += 1) {
+				const current = (index + i * offset + len) % len;
+				const { group, data } = memoFlattenOptions.value[current] || {};
+				if (!group && !data?.disabled && (isSelected(data?.value) || !overMaxCount.value)) return current;
+			}
+			return -1;
+		};
+		const activeIndex = shallowRef(-1);
+		const setActive = (index, fromKeyboard = false) => {
+			activeIndex.value = index;
+			const info = { source: fromKeyboard ? "keyboard" : "mouse" };
+			const flattenItem = memoFlattenOptions.value[index];
+			if (!flattenItem) {
+				context.value?.onActiveValue?.(null, -1, info);
+				return;
+			}
+			context.value?.onActiveValue?.(flattenItem.value, index, info);
+		};
+		watch([() => memoFlattenOptions.value.length, () => baseProps.value?.searchValue], () => {
+			setActive(context.value?.defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
+		}, { immediate: true });
+		const isAriaSelected = (value) => {
+			if (baseProps.value?.mode === "combobox") return String(value).toLowerCase() === (baseProps.value?.searchValue || "").toLowerCase();
+			return context.value?.rawValues?.has(value) || false;
+		};
+		watch([() => baseProps.value?.open, () => baseProps.value?.searchValue], () => {
+			let timeoutId;
+			const rawValues = context.value?.rawValues;
+			if (!baseProps.value?.multiple && baseProps.value?.open && rawValues?.size === 1) {
+				const value = Array.from(rawValues)[0];
+				const searchValue = baseProps.value?.searchValue;
+				const index = memoFlattenOptions.value.findIndex(({ data }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
+				if (index !== -1) {
+					setActive(index);
+					timeoutId = setTimeout(() => {
+						scrollIntoView(index);
+					});
+				}
+			}
+			if (baseProps.value?.open) listRef.value?.scrollTo(void 0);
+			return () => {
+				if (timeoutId) clearTimeout(timeoutId);
+			};
+		});
+		const onSelectValue = (value) => {
+			if (value !== void 0) context.value?.onSelect?.(value, { selected: !context.value?.rawValues?.has(value) });
+			if (!baseProps.value?.multiple) baseProps.value?.toggleOpen?.(false);
+		};
+		const onKeyDown = (event) => {
+			const { which, ctrlKey } = event;
+			switch (which) {
+				case KeyCode.N:
+				case KeyCode.P:
+				case KeyCode.UP:
+				case KeyCode.DOWN: {
+					let offset = 0;
+					if (which === KeyCode.UP) offset = -1;
+					else if (which === KeyCode.DOWN) offset = 1;
+					else if (isPlatformMac() && ctrlKey) {
+						if (which === KeyCode.N) offset = 1;
+						else if (which === KeyCode.P) offset = -1;
+					}
+					if (offset !== 0) {
+						const nextActiveIndex = getEnabledActiveIndex(activeIndex.value + offset, offset);
+						scrollIntoView(nextActiveIndex);
+						setActive(nextActiveIndex, true);
+					}
+					break;
+				}
+				case KeyCode.TAB:
+				case KeyCode.ENTER: {
+					const item = memoFlattenOptions.value[activeIndex.value];
+					if (!item || item.data.disabled) {
+						onSelectValue(void 0);
+						return;
+					}
+					if (!overMaxCount.value || context.value?.rawValues?.has(item.value)) onSelectValue(item.value);
+					else onSelectValue(void 0);
+					if (baseProps.value?.open) event.preventDefault();
+					break;
+				}
+				case KeyCode.ESC:
+					baseProps.value?.toggleOpen?.(false);
+					if (baseProps.value?.open) event.stopPropagation();
+			}
+		};
+		const onKeyUp = () => {};
+		expose({
+			onKeyDown,
+			onKeyUp,
+			scrollTo: (index) => {
+				scrollIntoView(index);
+			}
+		});
+		return () => {
+			const { id, notFoundContent, onPopupScroll } = baseProps.value || {};
+			const { menuItemSelectedIcon, fieldNames, virtual, direction, listHeight, listItemHeight, optionRender, classNames: contextClassNames, styles: contextStyles } = context.value || {};
+			if (memoFlattenOptions.value.length === 0) return createVNode("div", {
+				"role": "listbox",
+				"id": `${id}_list`,
+				"class": `${itemPrefixCls.value}-empty`,
+				"onMousedown": onListMouseDown
+			}, [notFoundContent]);
+			const omitFieldNameList = Object.keys(fieldNames || {}).map((key) => fieldNames?.[key]);
+			const getLabel = (item) => item.label;
+			function getItemAriaProps(item, index) {
+				const { group } = item;
+				return {
+					role: group ? "presentation" : "option",
+					id: `${id}_list_${index}`
+				};
+			}
+			const renderItem = (index) => {
+				const item = memoFlattenOptions.value[index];
+				if (!item) return null;
+				const itemData = item.data || {};
+				const { value } = itemData;
+				const { group } = item;
+				const attrs = pickAttrs(itemData, true);
+				const mergedLabel = getLabel(item);
+				return item ? createVNode("div", mergeProps({ "aria-label": typeof mergedLabel === "string" && !group ? mergedLabel : void 0 }, attrs, { "key": index }, getItemAriaProps(item, index), { "aria-selected": isAriaSelected(value) }), [value]) : null;
+			};
+			const a11yProps = {
+				role: "listbox",
+				id: `${id}_list`
+			};
+			return createVNode(Fragment, null, [virtual && createVNode("div", mergeProps(a11yProps, { "style": {
+				height: 0,
+				width: 0,
+				overflow: "hidden"
+			} }), [
+				renderItem(activeIndex.value - 1),
+				renderItem(activeIndex.value),
+				renderItem(activeIndex.value + 1)
+			]), createVNode(List, mergeProps({
+				"itemKey": "key",
+				"ref": (el) => {
+					listRef.value = el;
+				},
+				"data": memoFlattenOptions.value,
+				"height": listHeight,
+				"itemHeight": listItemHeight,
+				"fullHeight": false
+			}, { onMousedown: onListMouseDown }, {
+				"onScroll": onPopupScroll,
+				"virtual": virtual,
+				"direction": direction,
+				"innerProps": virtual ? void 0 : a11yProps,
+				"class": contextClassNames?.popup?.list,
+				"style": contextStyles?.popup?.list
+			}), { default: ({ item, index: itemIndex }) => {
+				const { group, groupOption, data, label, value } = item;
+				const { key } = data;
+				if (group) {
+					const groupTitle = data.title ?? (isTitleType(label) ? label.toString() : void 0);
+					return createVNode("div", {
+						"class": clsx(itemPrefixCls.value, `${itemPrefixCls.value}-group`, data.className),
+						"title": groupTitle
+					}, [label !== void 0 ? label : key]);
+				}
+				const { disabled, title, children, style, className,...otherProps } = data;
+				const passedProps = {};
+				Object.keys(otherProps).forEach((propKey) => {
+					if (!omitFieldNameList.includes(propKey)) passedProps[propKey] = otherProps[propKey];
+				});
+				const selected = isSelected(value);
+				const mergedDisabled = disabled || !selected && overMaxCount.value;
+				const optionPrefixCls = `${itemPrefixCls.value}-option`;
+				const optionClassName = clsx(itemPrefixCls.value, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
+					[`${optionPrefixCls}-grouped`]: groupOption,
+					[`${optionPrefixCls}-active`]: activeIndex.value === itemIndex && !mergedDisabled,
+					[`${optionPrefixCls}-disabled`]: mergedDisabled,
+					[`${optionPrefixCls}-selected`]: selected
+				});
+				const mergedLabel = getLabel(item);
+				const iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === "function" || selected;
+				const content = typeof mergedLabel === "number" ? mergedLabel : mergedLabel || value;
+				let optionTitle = isTitleType(content) ? content.toString() : void 0;
+				if (title !== void 0) optionTitle = title;
+				return createVNode("div", mergeProps(pickAttrs(passedProps), !virtual ? getItemAriaProps(item, itemIndex) : {}, {
+					"aria-selected": virtual ? void 0 : isAriaSelected(value),
+					"class": optionClassName,
+					"title": optionTitle,
+					"onMousemove": () => {
+						if (activeIndex.value === itemIndex || mergedDisabled) return;
+						setActive(itemIndex);
+					},
+					"onClick": () => {
+						if (!mergedDisabled) onSelectValue(value);
+					},
+					"style": {
+						...contextStyles?.popup?.listItem,
+						...style
+					}
+				}), [createVNode("div", { "class": `${optionPrefixCls}-content` }, [typeof optionRender === "function" ? optionRender(item, { index: itemIndex }) : content]), iconVisible && createVNode(TransBtn_default, {
+					"className": `${itemPrefixCls.value}-option-state`,
+					"customizeIcon": menuItemSelectedIcon,
+					"customizeIconProps": {
+						value,
+						disabled: mergedDisabled,
+						isSelected: selected
+					}
+				}, { default: () => [selected ? "✓" : null] })]);
+			} })]);
+		};
+	}
+});
+export { OptionList_default as default };