@v-c/menu 0.0.3 → 0.0.5

package/dist/Icon.cjs

@@ -5,15 +5,18 @@ let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
 var Icon = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
 	return () => {
 		const { icon, props: iconProps } = props;
+		const children = slots.default?.();
 		let iconNode;
 		if (icon === null || icon === false) return null;
 		if (typeof icon === "function") {
 			const childIcons = icon(iconProps);
-			const iconChild = (0, __v_c_util_dist_props_util.filterEmpty)(Array.isArray(childIcons) ? childIcons : [childIcons])?.[0];
-			if ((0, vue.isVNode)(iconChild)) iconNode = (0, vue.createVNode)(iconChild);
-			else iconNode = iconChild;
+			if (!childIcons) {
+				iconNode = null;
+				return children;
+			}
+			iconNode = (0, __v_c_util_dist_props_util.filterEmpty)(childIcons ? Array.isArray(childIcons) ? childIcons : [childIcons] : []);
 		} else if (typeof icon !== "boolean") iconNode = icon;
-		return iconNode || slots.default?.(iconProps) || null;
+		return iconNode || children || null;
 	};
 }, { props: {
 	icon: {

package/dist/Icon.js

@@ -1,17 +1,20 @@
-import { createVNode, defineComponent, isVNode } from "vue";
+import { defineComponent } from "vue";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 var Icon_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	return () => {
 		const { icon, props: iconProps } = props;
+		const children = slots.default?.();
 		let iconNode;
 		if (icon === null || icon === false) return null;
 		if (typeof icon === "function") {
 			const childIcons = icon(iconProps);
-			const iconChild = filterEmpty(Array.isArray(childIcons) ? childIcons : [childIcons])?.[0];
-			if (isVNode(iconChild)) iconNode = createVNode(iconChild);
-			else iconNode = iconChild;
+			if (!childIcons) {
+				iconNode = null;
+				return children;
+			}
+			iconNode = filterEmpty(childIcons ? Array.isArray(childIcons) ? childIcons : [childIcons] : []);
 		} else if (typeof icon !== "boolean") iconNode = icon;
-		return iconNode || slots.default?.(iconProps) || null;
+		return iconNode || children || null;
 	};
 }, { props: {
 	icon: {

package/dist/Menu.cjs

@@ -140,11 +140,11 @@ var Menu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, att
 		}
 		if (!props.multiple && mergedOpenKeys.value.length && internalMode.value !== "inline") triggerOpenKeys(EMPTY_LIST);
 	};
-	const onInternalClick = require_useMemoCallback.default((info) => {
+	const onInternalClick = (info) => {
 		props.onClick?.(require_warnUtil.warnItemProp(info));
 		triggerSelection(info);
-	});
-	const onInternalOpenChange = require_useMemoCallback.default((key, open) => {
+	};
+	const onInternalOpenChange = (key, open) => {
 		let newOpenKeys = mergedOpenKeys.value.filter((k) => k !== key);
 		if (open) newOpenKeys.push(key);
 		else if (internalMode.value !== "inline") {
@@ -152,7 +152,7 @@ var Menu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, att
 			newOpenKeys = newOpenKeys.filter((k) => !subPathKeys.has(k));
 		}
 		if (!(0, __v_c_util_dist_isEqual.default)(mergedOpenKeys.value, newOpenKeys, true)) triggerOpenKeys(newOpenKeys, true);
-	});
+	};
 	const triggerAccessibilityOpen = (key, open) => {
 		onInternalOpenChange(key, open ?? !mergedOpenKeys.value.includes(key));
 	};
@@ -181,8 +181,8 @@ var Menu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, att
 	require_MenuContext.useMenuContextProvider((0, vue.computed)(() => {
 		return {
 			prefixCls: props.prefixCls || defaults.prefixCls,
-			rootClassName: props.rootClassName,
-			classNames: props.classNames,
+			rootClass: props.rootClass,
+			classes: props.classes,
 			styles: props.styles,
 			mode: internalMode.value,
 			openKeys: mergedOpenKeys.value,
@@ -236,7 +236,7 @@ var Menu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, att
 		const wrappedChildList = internalMode.value !== "horizontal" || props?.disabledOverflow ? childList.value : childList.value.map((child, index) => (0, vue.createVNode)(require_MenuContext.default, {
 			"key": child.key,
 			"overflowDisabled": index > lastVisibleIndex.value,
-			"classNames": props.classNames,
+			"classes": props.classes,
 			"styles": props.styles
 		}, _isSlot(child) ? child : { default: () => [child] }));
 		const container = (0, vue.createVNode)(__v_c_overflow.default, (0, vue.mergeProps)({
@@ -247,7 +247,7 @@ var Menu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, att
 			"class": (0, __v_c_util.classNames)(props.prefixCls || defaults.prefixCls, `${props.prefixCls || defaults.prefixCls}-root`, `${props.prefixCls || defaults.prefixCls}-${internalMode.value}`, _attrs.class || "", {
 				[`${props.prefixCls || defaults.prefixCls}-inline-collapsed`]: internalInlineCollapsed.value,
 				[`${props.prefixCls || defaults.prefixCls}-rtl`]: isRtl.value
-			}, props.rootClassName),
+			}, props.rootClass),
 			"style": _attrs.style,
 			"data": wrappedChildList,
 			"renderRawItem": (node) => {
@@ -283,12 +283,12 @@ var Menu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, att
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0
 		},
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -505,7 +505,8 @@ var Menu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, att
 			default: void 0
 		}
 	}, defaults),
-	name: "VcMenu"
+	name: "VcMenu",
+	inheritAttrs: false
 });
 var Menu_default = Menu;
 exports.default = Menu_default;

package/dist/Menu.d.ts

@@ -5,8 +5,8 @@ import { BuiltinPlacements, Components, ItemType, MenuClickEventHandler, MenuMod
 import { SemanticName } from './SubMenu';
 export interface MenuProps {
     prefixCls?: string;
-    rootClassName?: string;
-    classNames?: Partial<Record<SemanticName, string>>;
+    rootClass?: string;
+    classes?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, CSSProperties>>;
     items?: ItemType[];
     disabled?: boolean;

package/dist/Menu.js

@@ -135,11 +135,11 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 		}
 		if (!props.multiple && mergedOpenKeys.value.length && internalMode.value !== "inline") triggerOpenKeys(EMPTY_LIST);
 	};
-	const onInternalClick = useMemoCallback((info) => {
+	const onInternalClick = (info) => {
 		props.onClick?.(warnItemProp(info));
 		triggerSelection(info);
-	});
-	const onInternalOpenChange = useMemoCallback((key, open) => {
+	};
+	const onInternalOpenChange = (key, open) => {
 		let newOpenKeys = mergedOpenKeys.value.filter((k) => k !== key);
 		if (open) newOpenKeys.push(key);
 		else if (internalMode.value !== "inline") {
@@ -147,7 +147,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			newOpenKeys = newOpenKeys.filter((k) => !subPathKeys.has(k));
 		}
 		if (!isEqual(mergedOpenKeys.value, newOpenKeys, true)) triggerOpenKeys(newOpenKeys, true);
-	});
+	};
 	const triggerAccessibilityOpen = (key, open) => {
 		onInternalOpenChange(key, open ?? !mergedOpenKeys.value.includes(key));
 	};
@@ -176,8 +176,8 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 	useMenuContextProvider(computed(() => {
 		return {
 			prefixCls: props.prefixCls || defaults.prefixCls,
-			rootClassName: props.rootClassName,
-			classNames: props.classNames,
+			rootClass: props.rootClass,
+			classes: props.classes,
 			styles: props.styles,
 			mode: internalMode.value,
 			openKeys: mergedOpenKeys.value,
@@ -231,7 +231,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 		const wrappedChildList = internalMode.value !== "horizontal" || props?.disabledOverflow ? childList.value : childList.value.map((child, index) => createVNode(MenuContext_default, {
 			"key": child.key,
 			"overflowDisabled": index > lastVisibleIndex.value,
-			"classNames": props.classNames,
+			"classes": props.classes,
 			"styles": props.styles
 		}, _isSlot(child) ? child : { default: () => [child] }));
 		const container = createVNode(Overflow, mergeProps({
@@ -242,7 +242,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			"class": classNames(props.prefixCls || defaults.prefixCls, `${props.prefixCls || defaults.prefixCls}-root`, `${props.prefixCls || defaults.prefixCls}-${internalMode.value}`, _attrs.class || "", {
 				[`${props.prefixCls || defaults.prefixCls}-inline-collapsed`]: internalInlineCollapsed.value,
 				[`${props.prefixCls || defaults.prefixCls}-rtl`]: isRtl.value
-			}, props.rootClassName),
+			}, props.rootClass),
 			"style": _attrs.style,
 			"data": wrappedChildList,
 			"renderRawItem": (node) => {
@@ -278,12 +278,12 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0
 		},
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -500,6 +500,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			default: void 0
 		}
 	}, defaults),
-	name: "VcMenu"
+	name: "VcMenu",
+	inheritAttrs: false
 });
 export { Menu_default as default };

package/dist/MenuItem.cjs

@@ -219,7 +219,7 @@ var MenuItem = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, attrs }
 		onCleanup(() => {
 			measure?.unregisterPath(eventKey.value, connectedKeyPath.value);
 		});
-	});
+	}, { immediate: true });
 	return () => {
 		if (measure) return null;
 		return (0, vue.createVNode)(InternalMenuItem, {

package/dist/MenuItem.js

@@ -214,7 +214,7 @@ var MenuItem_default = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 		onCleanup(() => {
 			measure?.unregisterPath(eventKey.value, connectedKeyPath.value);
 		});
-	});
+	}, { immediate: true });
 	return () => {
 		if (measure) return null;
 		return createVNode(InternalMenuItem, {

package/dist/MenuItemGroup.cjs

@@ -15,7 +15,7 @@ var InternalMenuItemGroup = /* @__PURE__ */ (0, vue.defineComponent)((props, { s
 	const context = require_MenuContext.useMenuContext();
 	return () => {
 		const { class: className, title, eventKey,...restProps } = props;
-		const { prefixCls, classNames: menuClassNames, styles } = context?.value ?? {};
+		const { prefixCls, classes: menuClassNames, styles } = context?.value ?? {};
 		const groupPrefixCls = `${prefixCls}-item-group`;
 		return (0, vue.createVNode)("li", (0, vue.mergeProps)({ "role": "presentation" }, restProps, {
 			"onClick": (e) => e.stopPropagation(),
@@ -31,33 +31,36 @@ var InternalMenuItemGroup = /* @__PURE__ */ (0, vue.defineComponent)((props, { s
 			"style": styles?.list
 		}, [slots?.default ? slots.default() : null])]);
 	};
-}, { props: {
-	title: {
-		type: null,
-		required: false,
-		default: void 0
-	},
-	eventKey: {
-		type: String,
-		required: false,
-		default: void 0
-	},
-	warnKey: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	style: {
-		type: null,
-		required: false,
-		default: void 0
+}, {
+	props: {
+		title: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		eventKey: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		warnKey: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		class: {
+			type: String,
+			required: false,
+			default: void 0
+		}
 	},
-	class: {
-		type: String,
-		required: false,
-		default: void 0
-	}
-} });
+	name: "InternalMenuItemGroup"
+});
 var MenuItemGroup = /* @__PURE__ */ (0, vue.defineComponent)((props, ctx) => {
 	const connectedKeyPath = require_PathContext.useFullPath((0, vue.computed)(() => props.eventKey));
 	const measure = require_PathContext.useMeasure();

package/dist/MenuItemGroup.js

@@ -12,7 +12,7 @@ var InternalMenuItemGroup = /* @__PURE__ */ defineComponent((props, { slots }) =
 	const context = useMenuContext();
 	return () => {
 		const { class: className, title, eventKey,...restProps } = props;
-		const { prefixCls, classNames: menuClassNames, styles } = context?.value ?? {};
+		const { prefixCls, classes: menuClassNames, styles } = context?.value ?? {};
 		const groupPrefixCls = `${prefixCls}-item-group`;
 		return createVNode("li", mergeProps({ "role": "presentation" }, restProps, {
 			"onClick": (e) => e.stopPropagation(),
@@ -28,33 +28,36 @@ var InternalMenuItemGroup = /* @__PURE__ */ defineComponent((props, { slots }) =
 			"style": styles?.list
 		}, [slots?.default ? slots.default() : null])]);
 	};
-}, { props: {
-	title: {
-		type: null,
-		required: false,
-		default: void 0
-	},
-	eventKey: {
-		type: String,
-		required: false,
-		default: void 0
-	},
-	warnKey: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	style: {
-		type: null,
-		required: false,
-		default: void 0
+}, {
+	props: {
+		title: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		eventKey: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		warnKey: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		class: {
+			type: String,
+			required: false,
+			default: void 0
+		}
 	},
-	class: {
-		type: String,
-		required: false,
-		default: void 0
-	}
-} });
+	name: "InternalMenuItemGroup"
+});
 var MenuItemGroup_default = /* @__PURE__ */ defineComponent((props, ctx) => {
 	const connectedKeyPath = useFullPath(computed(() => props.eventKey));
 	const measure = useMeasure();

package/dist/SubMenu/PopupTrigger.cjs

@@ -62,10 +62,10 @@ var PopupTrigger = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) =
 	});
 	return () => {
 		const { popupClassName, popup, popupStyle, popupOffset, disabled, onVisibleChange, prefixCls } = props;
-		const { rtl, rootClassName, mode, getPopupContainer, triggerSubMenuAction, subMenuCloseDelay, subMenuOpenDelay, forceSubMenuRender } = menuContext?.value ?? {};
+		const { rtl, rootClass, mode, getPopupContainer, triggerSubMenuAction, subMenuCloseDelay, subMenuOpenDelay, forceSubMenuRender } = menuContext?.value ?? {};
 		return (0, vue.createVNode)(__v_c_trigger.default, {
 			"prefixCls": prefixCls,
-			"popupClassName": (0, __v_c_util.clsx)(`${prefixCls}-popup`, { [`${prefixCls}-rtl`]: rtl }, popupClassName, rootClassName),
+			"popupClassName": (0, __v_c_util.clsx)(`${prefixCls}-popup`, { [`${prefixCls}-rtl`]: rtl }, popupClassName, rootClass),
 			"stretch": mode === "horizontal" ? "minWidth" : void 0,
 			"getPopupContainer": getPopupContainer,
 			"builtinPlacements": placement.value,

package/dist/SubMenu/PopupTrigger.js

@@ -58,10 +58,10 @@ var PopupTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 	});
 	return () => {
 		const { popupClassName, popup, popupStyle, popupOffset, disabled, onVisibleChange, prefixCls } = props;
-		const { rtl, rootClassName, mode, getPopupContainer, triggerSubMenuAction, subMenuCloseDelay, subMenuOpenDelay, forceSubMenuRender } = menuContext?.value ?? {};
+		const { rtl, rootClass, mode, getPopupContainer, triggerSubMenuAction, subMenuCloseDelay, subMenuOpenDelay, forceSubMenuRender } = menuContext?.value ?? {};
 		return createVNode(Trigger, {
 			"prefixCls": prefixCls,
-			"popupClassName": clsx(`${prefixCls}-popup`, { [`${prefixCls}-rtl`]: rtl }, popupClassName, rootClassName),
+			"popupClassName": clsx(`${prefixCls}-popup`, { [`${prefixCls}-rtl`]: rtl }, popupClassName, rootClass),
 			"stretch": mode === "horizontal" ? "minWidth" : void 0,
 			"getPopupContainer": getPopupContainer,
 			"builtinPlacements": placement.value,

package/dist/SubMenu/index.cjs

@@ -107,7 +107,7 @@ var InternalSubMenu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots,
 		else triggerModeRef.value = mode.value;
 	}, { immediate: true });
 	return () => {
-		const { style, title, class: className, popupClassName, popupOffset, popupStyle,...restProps } = props;
+		const { style, title, class: className, popupClassName, popupOffset, popupStyle, classes, styles,...restProps } = props;
 		const children = slots.default?.();
 		const popupId = domDataId.value && `${domDataId.value}-popup`;
 		const expandIconProps = {
@@ -140,8 +140,8 @@ var InternalSubMenu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots,
 		const popupContentTriggerMode = triggerModeRef.value;
 		const renderPopupContent = () => {
 			const originNode = (0, vue.createVNode)(require_MenuContext.default, {
-				"classNames": props.classNames,
-				"styles": props.styles,
+				"classes": classes,
+				"styles": styles,
 				"mode": popupContentTriggerMode === "horizontal" ? "vertical" : popupContentTriggerMode
 			}, { default: () => [(0, vue.createVNode)(require_SubMenuList.default, { "id": popupId }, _isSlot(children) ? children : { default: () => [children] })] });
 			const mergedPopupRender = props?.popupRender || contextPopupRender.value;
@@ -194,7 +194,7 @@ var InternalSubMenu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots,
 	};
 }, {
 	props: {
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -239,7 +239,7 @@ var InternalSubMenu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots,
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0
@@ -330,23 +330,27 @@ var InternalSubMenu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots,
 	inheritAttrs: false
 });
 var SubMenu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
-	const connectedKeyPath = require_PathContext.useFullPath((0, vue.computed)(() => props?.eventKey));
+	const eventKey = (0, vue.computed)(() => props?.eventKey);
+	const connectedKeyPath = require_PathContext.useFullPath(eventKey);
 	const measure = require_PathContext.useMeasure();
 	const validKeyPath = (0, vue.computed)(() => connectedKeyPath.value.filter((k) => k !== void 0));
-	(0, vue.watch)([validKeyPath, () => props.eventKey], () => {
-		if (measure && props.eventKey) measure.registerPath(props.eventKey, validKeyPath.value);
-	});
+	(0, vue.watch)([connectedKeyPath], (_n, _o, onCleanup) => {
+		if (measure) measure.registerPath(eventKey.value, connectedKeyPath.value);
+		onCleanup(() => {
+			measure?.unregisterPath(eventKey.value, connectedKeyPath.value);
+		});
+	}, { immediate: true });
 	return () => {
 		const children = slots.default?.();
 		const childList = require_commonUtil.parseChildren(children, validKeyPath.value);
 		let renderNode;
 		if (measure) renderNode = childList;
 		else renderNode = (0, vue.createVNode)(InternalSubMenu, props, _isSlot(childList) ? childList : { default: () => [childList] });
-		return (0, vue.createVNode)(require_PathContext.PathTrackerContext.Provider, { "value": validKeyPath.value }, _isSlot(renderNode) ? renderNode : { default: () => [renderNode] });
+		return (0, vue.createVNode)(require_PathContext.PathTrackerContext.Provider, { "value": connectedKeyPath.value }, _isSlot(renderNode) ? renderNode : { default: () => [renderNode] });
 	};
 }, {
 	props: {
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -391,7 +395,7 @@ var SubMenu = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0

package/dist/SubMenu/index.d.ts

@@ -3,7 +3,7 @@ import { CSSProperties } from 'vue';
 import { PopupRender, SubMenuType } from '../interface';
 export type SemanticName = 'list' | 'listTitle';
 export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children' | 'label'> {
-    classNames?: Partial<Record<SemanticName, string>>;
+    classes?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, CSSProperties>>;
     title?: VueNode;
     /** @private Used for rest popup. Do not use in your prod */

package/dist/SubMenu/index.js

@@ -103,7 +103,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 		else triggerModeRef.value = mode.value;
 	}, { immediate: true });
 	return () => {
-		const { style, title, class: className, popupClassName, popupOffset, popupStyle,...restProps } = props;
+		const { style, title, class: className, popupClassName, popupOffset, popupStyle, classes, styles,...restProps } = props;
 		const children = slots.default?.();
 		const popupId = domDataId.value && `${domDataId.value}-popup`;
 		const expandIconProps = {
@@ -136,8 +136,8 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 		const popupContentTriggerMode = triggerModeRef.value;
 		const renderPopupContent = () => {
 			const originNode = createVNode(MenuContext_default, {
-				"classNames": props.classNames,
-				"styles": props.styles,
+				"classes": classes,
+				"styles": styles,
 				"mode": popupContentTriggerMode === "horizontal" ? "vertical" : popupContentTriggerMode
 			}, { default: () => [createVNode(SubMenuList_default, { "id": popupId }, _isSlot(children) ? children : { default: () => [children] })] });
 			const mergedPopupRender = props?.popupRender || contextPopupRender.value;
@@ -190,7 +190,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 	};
 }, {
 	props: {
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -235,7 +235,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0
@@ -326,23 +326,27 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 	inheritAttrs: false
 });
 var SubMenu_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
-	const connectedKeyPath = useFullPath(computed(() => props?.eventKey));
+	const eventKey = computed(() => props?.eventKey);
+	const connectedKeyPath = useFullPath(eventKey);
 	const measure = useMeasure();
 	const validKeyPath = computed(() => connectedKeyPath.value.filter((k) => k !== void 0));
-	watch([validKeyPath, () => props.eventKey], () => {
-		if (measure && props.eventKey) measure.registerPath(props.eventKey, validKeyPath.value);
-	});
+	watch([connectedKeyPath], (_n, _o, onCleanup) => {
+		if (measure) measure.registerPath(eventKey.value, connectedKeyPath.value);
+		onCleanup(() => {
+			measure?.unregisterPath(eventKey.value, connectedKeyPath.value);
+		});
+	}, { immediate: true });
 	return () => {
 		const children = slots.default?.();
 		const childList = parseChildren(children, validKeyPath.value);
 		let renderNode;
 		if (measure) renderNode = childList;
 		else renderNode = createVNode(InternalSubMenu, props, _isSlot(childList) ? childList : { default: () => [childList] });
-		return createVNode(PathTrackerContext.Provider, { "value": validKeyPath.value }, _isSlot(renderNode) ? renderNode : { default: () => [renderNode] });
+		return createVNode(PathTrackerContext.Provider, { "value": connectedKeyPath.value }, _isSlot(renderNode) ? renderNode : { default: () => [renderNode] });
 	};
 }, {
 	props: {
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -387,7 +391,7 @@ var SubMenu_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0

package/dist/context/MenuContext.cjs

@@ -38,7 +38,7 @@ var InheritableContextProvider = /* @__PURE__ */ (0, vue.defineComponent)((props
 			required: false,
 			default: void 0
 		},
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -48,7 +48,7 @@ var InheritableContextProvider = /* @__PURE__ */ (0, vue.defineComponent)((props
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0

package/dist/context/MenuContext.d.ts

@@ -4,9 +4,9 @@ import { BuiltinPlacements, MenuClickEventHandler, MenuMode, PopupRender, Render
 import { SubMenuProps } from '../SubMenu';
 export interface MenuContextProps {
     prefixCls: string;
-    classNames?: SubMenuProps['classNames'];
+    classes?: SubMenuProps['classes'];
     styles?: SubMenuProps['styles'];
-    rootClassName?: string;
+    rootClass?: string;
     openKeys: string[];
     rtl?: boolean;
     mode: MenuMode;

package/dist/context/MenuContext.js

@@ -35,7 +35,7 @@ var MenuContext_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 			required: false,
 			default: void 0
 		},
-		classNames: {
+		classes: {
 			type: Object,
 			required: false,
 			default: void 0
@@ -45,7 +45,7 @@ var MenuContext_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 			required: false,
 			default: void 0
 		},
-		rootClassName: {
+		rootClass: {
 			type: String,
 			required: false,
 			default: void 0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { MenuDividerType, MenuItemGroupType, MenuItemType, MenuRef, RenderIconInfo, SubMenuType } from './interface';
+import { MenuClickEventHandler, MenuDividerType, MenuInfo, MenuItemGroupType, MenuItemType, MenuRef, RenderIconInfo, SelectEventHandler, SelectInfo, SubMenuType } from './interface';
 import { MenuProps, default as Menu } from './Menu';
 import { MenuItemProps, default as MenuItem } from './MenuItem';
 import { MenuItemGroupProps, default as MenuItemGroup } from './MenuItemGroup';
@@ -8,7 +8,7 @@ import { default as Divider } from './Divider';
 export { Divider, MenuItem as Item, MenuItemGroup as ItemGroup, MenuItem, MenuItemGroup, SubMenu, 
 /** @private Only used for antd internal. Do not use in your production. */
 useFullPath, };
-export type { MenuDividerType, MenuItemGroupProps, MenuItemGroupType, MenuItemProps, MenuItemType, MenuProps, MenuRef, RenderIconInfo, SubMenuProps, SubMenuType, };
+export type { MenuClickEventHandler, MenuDividerType, MenuInfo, MenuItemGroupProps, MenuItemGroupType, MenuItemProps, MenuItemType, MenuProps, MenuRef, RenderIconInfo, SelectEventHandler, SelectInfo, SubMenuProps, SubMenuType, };
 type MenuType = typeof Menu & {
     Item: typeof MenuItem;
     SubMenu: typeof SubMenu;

package/dist/interface.d.ts

@@ -11,7 +11,7 @@ export interface SubMenuType extends ItemSharedProps {
     children: ItemType[];
     disabled?: boolean;
     key: string;
-    rootClassName?: string;
+    rootClass?: string;
     itemIcon?: RenderIconType;
     expandIcon?: RenderIconType;
     onMouseEnter?: MenuHoverEventHandler;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/menu",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "menu ui component for vue",
   "exports": {
     ".": {
@@ -9,24 +9,25 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./dist/*": "./dist/*",
+    "./dist/*.js": "./dist/*.js",
+    "./dist/*.d.ts": "./dist/*.d.ts",
     "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
   },
+  "main": "./dist/index.js",
   "files": [
     "dist",
     "package.json"
   ],
-  "main": "./dist/index.js",
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/overflow": "0.0.1",
     "@v-c/trigger": "0.0.13",
-    "@v-c/util": "0.0.13"
+    "@v-c/util": "0.0.13",
+    "@v-c/overflow": "0.0.1"
   },
   "scripts": {
     "build": "vite build",