@v-c/menu 1.0.12 → 1.0.14

package/dist/Divider.js

@@ -2,7 +2,8 @@ import { useMenuContext } from "./context/MenuContext.js";
 import { useMeasure } from "./context/PathContext.js";
 import { createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
-var Divider_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/Divider.tsx
+var Divider = /* @__PURE__ */ defineComponent((props) => {
 	const menuContext = useMenuContext();
 	const measure = useMeasure();
 	return () => {
@@ -29,4 +30,5 @@ var Divider_default = /* @__PURE__ */ defineComponent((props) => {
 	},
 	name: "Divider"
 });
-export { Divider_default as default };
+//#endregion
+export { Divider as default };

package/dist/Icon.js

@@ -1,6 +1,7 @@
 import { defineComponent } from "vue";
 import { filterEmpty } from "@v-c/util/dist/props-util";
-var Icon_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+//#region src/Icon.tsx
+var Icon = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	return () => {
 		const { icon, props: iconProps } = props;
 		const children = slots.default?.();
@@ -36,4 +37,5 @@ var Icon_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		default: void 0
 	}
 } });
-export { Icon_default as default };
+//#endregion
+export { Icon as default };

package/dist/Menu.js

@@ -1,4 +1,4 @@
-import MenuContext_default, { useMenuContextProvider } from "./context/MenuContext.js";
+import InheritableContextProvider, { useMenuContextProvider } from "./context/MenuContext.js";
 import { MeasureProvider, PathUserProvider } from "./context/PathContext.js";
 import { useIdContextProvide } from "./context/IdContext.js";
 import { PrivateContextProvider } from "./context/PrivateContext.js";
@@ -6,8 +6,8 @@ import useAccessibility, { getFocusableElements, refreshElements } from "./hooks
 import useKeyRecords, { OVERFLOW_KEY } from "./hooks/useKeyRecords.js";
 import useMemoCallback from "./hooks/useMemoCallback.js";
 import { warnItemProp } from "./utils/warnUtil.js";
-import MenuItem_default from "./MenuItem.js";
-import SubMenu_default from "./SubMenu/index.js";
+import MenuItem from "./MenuItem.js";
+import SubMenu from "./SubMenu/index.js";
 import { parseItems } from "./utils/nodeUtil.js";
 import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
 import { classNames } from "@v-c/util";
@@ -15,6 +15,19 @@ import { filterEmpty } from "@v-c/util/dist/props-util";
 import Overflow from "@v-c/overflow";
 import useId from "@v-c/util/dist/hooks/useId";
 import isEqual from "@v-c/util/dist/isEqual";
+//#region src/Menu.tsx
+/**
+* Menu modify after refactor:
+* ## Add
+* - disabled
+*
+* ## Remove
+* - openTransitionName
+* - openAnimation
+* - onDestroy
+* - siderCollapsed: Seems antd do not use this prop (Need test in antd)
+* - collapsedWidth: Seems this logic should be handle by antd Layout.Sider
+*/
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -30,7 +43,7 @@ var defaults = {
 	triggerSubMenuAction: "hover",
 	overflowedIndicator: "..."
 };
-var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs: _attrs }) => {
+var Menu = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs: _attrs }) => {
 	const containerRef = shallowRef();
 	const uuid = useId(props?.id ? `vc-menu-uuid-${props.id}` : "vc-menu-uuid");
 	const isRtl = computed(() => props?.direction === "rtl");
@@ -135,6 +148,9 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 		}
 		if (!props.multiple && mergedOpenKeys.value.length && internalMode.value !== "inline") triggerOpenKeys(EMPTY_LIST);
 	};
+	/**
+	* Click for item. SubMenu do not have selection status
+	*/
 	const onInternalClick = (info) => {
 		props.onClick?.(warnItemProp(info));
 		triggerSelection(info);
@@ -233,7 +249,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			iconRender: props?.iconRender
 		});
 		const measureChildList = parseItems(children, props?.items, EMPTY_LIST, {}, props?.prefixCls || defaults.prefixCls);
-		const wrappedChildList = internalMode.value !== "horizontal" || props?.disabledOverflow ? childList.value : childList.value.map((child, index) => createVNode(MenuContext_default, {
+		const wrappedChildList = internalMode.value !== "horizontal" || props?.disabledOverflow ? childList.value : childList.value.map((child, index) => createVNode(InheritableContextProvider, {
 			"key": child.key,
 			"overflowDisabled": index > lastVisibleIndex.value,
 			"classes": props.classes,
@@ -243,7 +259,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			"ref": containerRef,
 			"prefixCls": `${prefixCls}-overflow`,
 			"component": "ul",
-			"itemComponent": MenuItem_default,
+			"itemComponent": MenuItem,
 			"class": classNames(prefixCls, `${prefixCls}-root`, `${prefixCls}-${internalMode.value}`, _attrs.class || "", {
 				[`${prefixCls}-inline-collapsed`]: internalInlineCollapsed.value,
 				[`${prefixCls}-rtl`]: isRtl.value
@@ -261,7 +277,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			"renderRawRest": (omitItems) => {
 				const len = omitItems.length;
 				const originOmitItems = len ? childList.value.slice(-len) : null;
-				return createVNode(SubMenu_default, {
+				return createVNode(SubMenu, {
 					"eventKey": OVERFLOW_KEY,
 					"title": mergedOverflowIndicator.value,
 					"disabled": allVisible.value,
@@ -526,4 +542,5 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 	name: "VcMenu",
 	inheritAttrs: false
 });
-export { Menu_default as default };
+//#endregion
+export { Menu as default };

package/dist/MenuItem.js

@@ -1,6 +1,6 @@
 import { useMenuContext } from "./context/MenuContext.js";
 import { useFullPath, useMeasure } from "./context/PathContext.js";
-import Icon_default from "./Icon.js";
+import Icon from "./Icon.js";
 import { useMenuId } from "./context/IdContext.js";
 import { usePrivateContext } from "./context/PrivateContext.js";
 import useActive from "./hooks/useActive.js";
@@ -12,6 +12,7 @@ import omit from "@v-c/util/dist/omit";
 import { toPropsRefs } from "@v-c/util/dist/props-util";
 import Overflow from "@v-c/overflow";
 import KeyCode from "@v-c/util/dist/KeyCode";
+//#region src/MenuItem.tsx
 var LegacyMenuItem = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	return () => {
 		const { title, attribute, ...restProps } = attrs;
@@ -33,6 +34,9 @@ var LegacyMenuItem = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 	name: "LegacyMenuItem",
 	inheritAttrs: false
 });
+/**
+* Real Menu Item component
+*/
 var InternalMenuItem = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const { eventKey } = toPropsRefs(props, "eventKey");
 	const domDataId = useMenuId(eventKey);
@@ -69,6 +73,10 @@ var InternalMenuItem = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			menuContext?.value?.onItemClick?.(info);
 		}
 	};
+	/**
+	* Used for accessibility. Helper will focus element without key board.
+	* We should manually trigger an active
+	*/
 	const onInternalFocus = (e) => {
 		menuContext?.value?.onActive?.(eventKey.value);
 		props?.onFocus?.(e);
@@ -105,7 +113,7 @@ var InternalMenuItem = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			"onClick": onInternalClick,
 			"onKeydown": onInternalKeyDown,
 			"onFocus": onInternalFocus
-		}), { default: () => [slots?.default?.(), createVNode(Icon_default, {
+		}), { default: () => [slots?.default?.(), createVNode(Icon, {
 			"props": {
 				...props,
 				isSelected: selected.value
@@ -212,7 +220,7 @@ var InternalMenuItem = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 	name: "InternalMenuItem",
 	inheritAttrs: false
 });
-var MenuItem_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+var MenuItem = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const { eventKey } = toPropsRefs(props, "eventKey");
 	const measure = useMeasure();
 	const connectedKeyPath = useFullPath(eventKey);
@@ -326,4 +334,5 @@ var MenuItem_default = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 	name: "MenuItem",
 	inheritAttrs: false
 });
-export { MenuItem_default as default };
+//#endregion
+export { MenuItem as default };

package/dist/MenuItemGroup.js

@@ -5,6 +5,7 @@ import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue
 import { clsx } from "@v-c/util";
 import omit from "@v-c/util/dist/omit";
 import { filterEmpty } from "@v-c/util/dist/props-util";
+//#region src/MenuItemGroup.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -66,7 +67,7 @@ var InternalMenuItemGroup = /* @__PURE__ */ defineComponent((props, { slots }) =
 	},
 	name: "InternalMenuItemGroup"
 });
-var MenuItemGroup_default = /* @__PURE__ */ defineComponent((props, ctx) => {
+var MenuItemGroup = /* @__PURE__ */ defineComponent((props, ctx) => {
 	const connectedKeyPath = useFullPath(computed(() => props.eventKey));
 	const measure = useMeasure();
 	return () => {
@@ -114,4 +115,5 @@ var MenuItemGroup_default = /* @__PURE__ */ defineComponent((props, ctx) => {
 	name: "MenuItemGroup",
 	inheritAttrs: false
 });
-export { MenuItemGroup_default as default };
+//#endregion
+export { MenuItemGroup as default };

package/dist/SubMenu/InlineSubMenuList.js

@@ -1,9 +1,10 @@
-import MenuContext_default, { useMenuContext } from "../context/MenuContext.js";
+import InheritableContextProvider, { useMenuContext } from "../context/MenuContext.js";
 import { getMotion } from "../utils/motionUtil.js";
-import SubMenuList_default from "./SubMenuList.js";
-import { Transition, computed, createVNode, defineComponent, shallowRef, watch, watchEffect } from "vue";
+import InternalSubMenuList from "./SubMenuList.js";
+import { Transition, computed, createVNode, defineComponent, shallowRef, vShow, watch, watchEffect, withDirectives } from "vue";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
-var InlineSubMenuList_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+//#region src/SubMenu/InlineSubMenuList.tsx
+var InlineSubMenuList = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const fixedMode = "inline";
 	const menuContext = useMenuContext();
 	const sameModeRef = shallowRef(false);
@@ -28,10 +29,10 @@ var InlineSubMenuList_default = /* @__PURE__ */ defineComponent((props, { slots
 	});
 	return () => {
 		if (destroy.value) return null;
-		return createVNode(MenuContext_default, {
+		return createVNode(InheritableContextProvider, {
 			"mode": fixedMode,
 			"locked": !sameModeRef.value
-		}, { default: () => [createVNode(Transition, getTransitionProps(mergedMotion.value?.name, mergedMotion.value), { default: () => [mergedOpen.value && createVNode(SubMenuList_default, { "id": props.id }, { default: () => [slots?.default?.()] })] })] });
+		}, { default: () => [createVNode(Transition, getTransitionProps(mergedMotion.value?.name, mergedMotion.value), { default: () => [withDirectives(createVNode(InternalSubMenuList, { "id": props.id }, { default: () => [slots?.default?.()] }), [[vShow, mergedOpen.value]])] })] });
 	};
 }, {
 	props: {
@@ -42,16 +43,15 @@ var InlineSubMenuList_default = /* @__PURE__ */ defineComponent((props, { slots
 		},
 		open: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		keyPath: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "InlineSubMenuList",
 	inheritAttrs: false
 });
-export { InlineSubMenuList_default as default };
+//#endregion
+export { InlineSubMenuList as default };

package/dist/SubMenu/PopupTrigger.js

@@ -1,17 +1,18 @@
 import { useMenuContext } from "../context/MenuContext.js";
 import { getMotion } from "../utils/motionUtil.js";
-import placements_default, { placementsRtl } from "../placements.js";
+import placements, { placementsRtl } from "../placements.js";
 import { computed, createVNode, defineComponent, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
 import Trigger from "@v-c/trigger";
 import raf from "@v-c/util/dist/raf";
+//#region src/SubMenu/PopupTrigger.tsx
 var popupPlacementMap = {
 	"horizontal": "bottomLeft",
 	"vertical": "rightTop",
 	"vertical-left": "rightTop",
 	"vertical-right": "leftTop"
 };
-var PopupTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var PopupTrigger = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const menuContext = useMenuContext();
 	const innerVisible = shallowRef(props.visible ?? false);
 	const placement = computed(() => {
@@ -21,7 +22,7 @@ var PopupTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 			...placementsRtl,
 			...builtinPlacements
 		} : {
-			...placements_default,
+			...placements,
 			...builtinPlacements
 		};
 	});
@@ -36,7 +37,12 @@ var PopupTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 	});
 	const targetMotionRef = shallowRef(targetMotion.value);
 	watch(triggerMode, (mode) => {
-		if (mode !== "inline") targetMotionRef.value = targetMotion.value;
+		if (mode !== "inline")
+ /**
+		* PopupTrigger is only used for vertical and horizontal types.
+		* When collapsed is unfolded, the inline animation will destroy the vertical animation.
+		*/
+		targetMotionRef.value = targetMotion.value;
 	}, { immediate: true });
 	watch([motion, defaultMotions], () => {
 		if (triggerMode.value !== "inline") targetMotionRef.value = targetMotion.value;
@@ -82,18 +88,15 @@ var PopupTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 }, { props: {
 	prefixCls: {
 		type: String,
-		required: true,
-		default: void 0
+		required: true
 	},
 	mode: {
 		type: String,
-		required: true,
-		default: void 0
+		required: true
 	},
 	visible: {
 		type: Boolean,
-		required: true,
-		default: void 0
+		required: true
 	},
 	popup: {
 		type: [
@@ -105,8 +108,7 @@ var PopupTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 			Boolean,
 			Array
 		],
-		required: true,
-		default: void 0
+		required: true
 	},
 	popupStyle: {
 		type: Object,
@@ -125,13 +127,12 @@ var PopupTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 	},
 	disabled: {
 		type: Boolean,
-		required: true,
-		default: void 0
+		required: true
 	},
 	onVisibleChange: {
 		type: Function,
-		required: true,
-		default: void 0
+		required: true
 	}
 } });
-export { PopupTrigger_default as default };
+//#endregion
+export { PopupTrigger as default };

package/dist/SubMenu/SubMenuList.js

@@ -1,7 +1,8 @@
 import { useMenuContext } from "../context/MenuContext.js";
 import { createVNode, defineComponent, mergeProps } from "vue";
 import { clsx } from "@v-c/util";
-var SubMenuList_default = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
+//#region src/SubMenu/SubMenuList.tsx
+var InternalSubMenuList = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
 	const menuContext = useMenuContext();
 	return () => {
 		const { prefixCls, mode, rtl } = menuContext?.value ?? {};
@@ -14,4 +15,5 @@ var SubMenuList_default = /* @__PURE__ */ defineComponent((_, { attrs, slots })
 	name: "InlineSubMenuList",
 	inheritAttrs: false
 });
-export { SubMenuList_default as default };
+//#endregion
+export { InternalSubMenuList as default };

package/dist/SubMenu/index.js

@@ -1,6 +1,6 @@
-import MenuContext_default, { useMenuContext } from "../context/MenuContext.js";
+import InheritableContextProvider, { useMenuContext } from "../context/MenuContext.js";
 import { PathTrackerContext, useFullPath, useMeasure, usePathUserContext } from "../context/PathContext.js";
-import Icon_default from "../Icon.js";
+import Icon from "../Icon.js";
 import { useMenuId } from "../context/IdContext.js";
 import { usePrivateContext } from "../context/PrivateContext.js";
 import useMemoCallback from "../hooks/useMemoCallback.js";
@@ -8,13 +8,14 @@ import useActive from "../hooks/useActive.js";
 import useDirectionStyle from "../hooks/useDirectionStyle.js";
 import { warnItemProp } from "../utils/warnUtil.js";
 import { parseChildren } from "../utils/commonUtil.js";
-import SubMenuList_default from "./SubMenuList.js";
-import InlineSubMenuList_default from "./InlineSubMenuList.js";
-import PopupTrigger_default from "./PopupTrigger.js";
+import InternalSubMenuList from "./SubMenuList.js";
+import InlineSubMenuList from "./InlineSubMenuList.js";
+import PopupTrigger from "./PopupTrigger.js";
 import { computed, createVNode, defineComponent, isVNode, mergeProps, ref, watch } from "vue";
 import { classNames } from "@v-c/util";
 import Overflow from "@v-c/overflow";
 import warning$1 from "@v-c/util/dist/warning";
+//#region src/SubMenu/index.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -34,8 +35,8 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 	const selectedKeys = computed(() => menuContext?.value?.selectedKeys || []);
 	const contextExpandIcon = computed(() => menuContext?.value?.expandIcon);
 	const contextPopupRender = computed(() => menuContext?.value?.popupRender);
-	const onOpenChange = (key, open$1) => {
-		menuContext?.value?.onOpenChange?.(key, open$1);
+	const onOpenChange = (key, open) => {
+		menuContext?.value?.onOpenChange?.(key, open);
 	};
 	const onActive = (key) => {
 		menuContext?.value?.onActive?.(key);
@@ -119,7 +120,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			isSubMenu: true,
 			disabled: mergedDisabled.value
 		};
-		const expandIconNode = createVNode(Icon_default, {
+		const expandIconNode = createVNode(Icon, {
 			"icon": mode.value !== "horizontal" ? mergedExpandIcon.value : void 0,
 			"props": {
 				...props,
@@ -142,11 +143,11 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 		}, activeProps), [title, expandIconNode]);
 		const popupContentTriggerMode = triggerModeRef.value;
 		const renderPopupContent = () => {
-			const originNode = createVNode(MenuContext_default, {
+			const originNode = createVNode(InheritableContextProvider, {
 				"classes": classes,
 				"styles": styles,
 				"mode": popupContentTriggerMode === "horizontal" ? "vertical" : popupContentTriggerMode
-			}, { default: () => [createVNode(SubMenuList_default, { "id": popupId }, _isSlot(children) ? children : { default: () => [children] })] });
+			}, { default: () => [createVNode(InternalSubMenuList, { "id": popupId }, _isSlot(children) ? children : { default: () => [children] })] });
 			const mergedPopupRender = props?.popupRender || contextPopupRender.value;
 			if (mergedPopupRender) return mergedPopupRender(originNode, {
 				item: props,
@@ -159,7 +160,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			const _titleNode = function() {
 				return titleNode;
 			}();
-			titleNode = createVNode(PopupTrigger_default, {
+			titleNode = createVNode(PopupTrigger, {
 				"mode": triggerMode,
 				"prefixCls": subMenuPrefixCls.value,
 				"visible": !props?.internalPopupClose && open.value && mode.value !== "inline",
@@ -182,7 +183,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			}),
 			"onMouseenter": onInternalMouseEnter,
 			"onMouseleave": onInternalMouseLeave
-		}), { default: () => [titleNode, !overflowDisabled.value && createVNode(InlineSubMenuList_default, {
+		}), { default: () => [titleNode, !overflowDisabled.value && createVNode(InlineSubMenuList, {
 			"id": popupId,
 			"open": open.value,
 			"keyPath": validConnectedPath.value
@@ -193,7 +194,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			open: open.value,
 			disabled: mergedDisabled.value
 		});
-		return createVNode(MenuContext_default, {
+		return createVNode(InheritableContextProvider, {
 			"classes": classes,
 			"styles": styles,
 			"onItemClick": onMergedItemClick,
@@ -347,7 +348,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 	name: "InternalSubMenu",
 	inheritAttrs: false
 });
-var SubMenu_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var SubMenu = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const eventKey = computed(() => props?.eventKey);
 	const connectedKeyPath = useFullPath(eventKey);
 	const measure = useMeasure();
@@ -511,4 +512,5 @@ var SubMenu_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	name: "SubMenu",
 	inheritAttrs: false
 });
-export { SubMenu_default as default };
+//#endregion
+export { SubMenu as default };

package/dist/context/IdContext.js

@@ -1,21 +1,25 @@
 import { computed, defineComponent, inject, provide, ref } from "vue";
+//#region src/context/IdContext.tsx
 var IdContextKey = Symbol("IdContext");
 function useIdContextProvide(id) {
 	provide(IdContextKey, id);
 }
-const IdContextProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var IdContextProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	useIdContextProvide(computed(() => props.id));
 	return () => slots?.default?.();
 }, { props: { id: {
 	type: String,
-	required: true,
-	default: void 0
+	required: true
 } } });
 function getMenuId(uuid, eventKey) {
 	return `${uuid}-${eventKey}`;
 }
+/**
+* Get `data-menu-id`
+*/
 function useMenuId(eventKey) {
 	const id = inject(IdContextKey, ref(""));
 	return computed(() => getMenuId(id.value, eventKey.value));
 }
+//#endregion
 export { IdContextProvider, getMenuId, useIdContextProvide, useMenuId };

package/dist/context/MenuContext.js

@@ -1,5 +1,6 @@
 import { computed, defineComponent, inject, provide } from "vue";
 import omit from "@v-c/util/dist/omit";
+//#region src/context/MenuContext.tsx
 var MenuContextKey = Symbol("MenuContextKey");
 function mergeProps$1(origin, target) {
 	const clone = { ...origin };
@@ -15,7 +16,7 @@ function useMenuContext() {
 function useMenuContextProvider(context) {
 	provide(MenuContextKey, context);
 }
-var MenuContext_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var InheritableContextProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const context = useMenuContext();
 	useMenuContextProvider(computed(() => {
 		return mergeProps$1(context?.value ?? {}, omit(props, ["locked"]));
@@ -184,4 +185,5 @@ var MenuContext_default = /* @__PURE__ */ defineComponent((props, { slots }) =>
 	},
 	inheritAttrs: false
 });
-export { MenuContext_default as default, useMenuContext, useMenuContextProvider };
+//#endregion
+export { InheritableContextProvider as default, useMenuContext, useMenuContextProvider };

package/dist/context/PathContext.js

@@ -1,4 +1,5 @@
 import { computed, defineComponent, inject, provide, ref } from "vue";
+//#region src/context/PathContext.tsx
 var EmptyList = [];
 var PathRegisterContextKey = Symbol("PathRegisterContext");
 function useMeasure() {
@@ -7,7 +8,7 @@ function useMeasure() {
 function useMeasureProvider(context) {
 	provide(PathRegisterContextKey, context);
 }
-const MeasureProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var MeasureProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	useMeasureProvider(props);
 	return () => {
 		return slots?.default?.();
@@ -15,13 +16,11 @@ const MeasureProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
 }, { props: {
 	registerPath: {
 		type: Function,
-		required: true,
-		default: void 0
+		required: true
 	},
 	unregisterPath: {
 		type: Function,
-		required: true,
-		default: void 0
+		required: true
 	}
 } });
 var PathTrackerContextKey = Symbol("PathTrackerContext");
@@ -31,15 +30,14 @@ function useFullPath(eventKey) {
 		return eventKey !== void 0 ? [...parentKeyPath.value, eventKey.value] : parentKeyPath.value;
 	});
 }
-const PathTrackerProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var PathTrackerProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	provide(PathTrackerContextKey, computed(() => props.value));
 	return () => {
 		return slots?.default?.();
 	};
 }, { props: { value: {
 	type: Array,
-	required: true,
-	default: void 0
+	required: true
 } } });
 var PathUserContextKey = Symbol("PathUserContext");
 function usePathUserContextProvider(context) {
@@ -48,17 +46,17 @@ function usePathUserContextProvider(context) {
 function usePathUserContext() {
 	return inject(PathUserContextKey, { isSubPathKey: () => false });
 }
-const PathUserProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var PathUserProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	usePathUserContextProvider(props);
 	return () => {
 		return slots?.default?.();
 	};
 }, { props: { isSubPathKey: {
 	type: Function,
-	required: true,
-	default: void 0
+	required: true
 } } });
-const PathTrackerContext = { Provider: PathTrackerProvider };
-const PathRegisterContext = { Provider: MeasureProvider };
-const PathUserContext = { Provider: PathUserProvider };
+var PathTrackerContext = { Provider: PathTrackerProvider };
+var PathRegisterContext = { Provider: MeasureProvider };
+var PathUserContext = { Provider: PathUserProvider };
+//#endregion
 export { MeasureProvider, PathRegisterContext, PathTrackerContext, PathTrackerProvider, PathUserContext, PathUserProvider, useFullPath, useMeasure, useMeasureProvider, usePathUserContext, usePathUserContextProvider };

package/dist/context/PrivateContext.js

@@ -1,4 +1,5 @@
 import { defineComponent, inject, provide } from "vue";
+//#region src/context/PrivateContext.ts
 var PrivateContextKey = Symbol("PrivateContext");
 function usePrivateProvider(context) {
 	provide(PrivateContextKey, context);
@@ -6,10 +7,11 @@ function usePrivateProvider(context) {
 function usePrivateContext() {
 	return inject(PrivateContextKey, {});
 }
-const PrivateContextProvider = defineComponent((props, { slots }) => {
+var PrivateContextProvider = defineComponent((props, { slots }) => {
 	usePrivateProvider(props);
 	return () => {
 		return slots?.default?.();
 	};
 }, { props: ["_internalRenderMenuItem", "_internalRenderSubMenuItem"] });
+//#endregion
 export { PrivateContextProvider, usePrivateContext, usePrivateProvider };

package/dist/hooks/useAccessibility.js

@@ -1,6 +1,7 @@
 import { getMenuId } from "../context/IdContext.js";
 import { onBeforeUnmount, shallowRef } from "vue";
 import KeyCode from "@v-c/util/dist/KeyCode";
+//#region src/hooks/useAccessibility.ts
 var { LEFT, RIGHT, UP, DOWN, ENTER, ESC, HOME, END } = KeyCode;
 var ArrowKeys = [
 	UP,
@@ -67,10 +68,16 @@ function findContainerUL(element) {
 	}
 	return null;
 }
+/**
+* Get focusable node list from container
+*/
 function getFocusNodeList(container, includeDisabled) {
 	const selector = includeDisabled ? "[tabindex]" : "[tabindex]:not([tabindex=\"-1\"]):not([disabled]):not([aria-disabled=\"true\"])";
 	return Array.from(container.querySelectorAll(selector));
 }
+/**
+* Find focused element within element set provided
+*/
 function getFocusElement(activeElement, elements) {
 	let current = activeElement || document.activeElement;
 	while (current) {
@@ -79,6 +86,9 @@ function getFocusElement(activeElement, elements) {
 	}
 	return null;
 }
+/**
+* Get focusable elements from the element set under provided container
+*/
 function getFocusableElements(container, elements) {
 	if (!container) return [];
 	return getFocusNodeList(container, true).filter((ele) => elements.has(ele));
@@ -146,6 +156,11 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
 					if (link?.getAttribute("href")) focusTargetElement = link;
 					const targetKey = element2key.get(menuElement);
 					if (targetKey) triggerActiveKey(targetKey);
+					/**
+					* Do not use immediate here since `tryFocus` may trigger async
+					* which makes Vue sync update the `activeKey`
+					* that force render before `ref` set the next activeKey
+					*/
 					cleanRaf();
 					rafRef.value = requestAnimationFrame(() => {
 						if (activeRef.value === targetKey) focusTargetElement.focus();
@@ -182,4 +197,5 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
 		originOnKeyDown?.(e);
 	};
 }
+//#endregion
 export { useAccessibility as default, getFocusableElements, refreshElements };

package/dist/hooks/useActive.js

@@ -1,5 +1,6 @@
 import { useMenuContext } from "../context/MenuContext.js";
 import { computed, watchEffect } from "vue";
+//#region src/hooks/useActive.ts
 function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
 	const menuContext = useMenuContext();
 	const ret = { active: computed(() => menuContext?.value?.activeKey === eventKey.value) };
@@ -23,4 +24,5 @@ function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
 	});
 	return ret;
 }
+//#endregion
 export { useActive as default };

package/dist/hooks/useDirectionStyle.js

@@ -1,5 +1,6 @@
 import { useMenuContext } from "../context/MenuContext.js";
 import { computed } from "vue";
+//#region src/hooks/useDirectionStyle.ts
 function useDirectionStyle(level) {
 	const menuContext = useMenuContext();
 	return computed(() => {
@@ -9,4 +10,5 @@ function useDirectionStyle(level) {
 		return rtl ? { paddingRight: `${len * inlineIndent}px` } : { paddingLeft: `${len * inlineIndent}px` };
 	});
 }
+//#endregion
 export { useDirectionStyle as default };

package/dist/hooks/useKeyRecords.js

@@ -1,9 +1,10 @@
 import { nextSlice } from "../utils/timeUtil.js";
 import { onBeforeUnmount, ref, shallowRef, triggerRef } from "vue";
+//#region src/hooks/useKeyRecords.ts
 var PATH_SPLIT = "__VC_UTIL_PATH_SPLIT__";
 var getPathStr = (keyPath) => keyPath.join(PATH_SPLIT);
 var getPathKeys = (keyPathStr) => keyPathStr.split(PATH_SPLIT);
-const OVERFLOW_KEY = "vc-menu-more";
+var OVERFLOW_KEY = "vc-menu-more";
 function useKeyRecords() {
 	const key2pathRef = shallowRef(/* @__PURE__ */ new Map());
 	const path2keyRef = shallowRef(/* @__PURE__ */ new Map());
@@ -51,6 +52,9 @@ function useKeyRecords() {
 		if (overflowKeys.value.length) keys.push(OVERFLOW_KEY);
 		return keys;
 	};
+	/**
+	* Find current key related child path keys
+	*/
 	const getSubPathKeys = (key) => {
 		const connectedPath = `${key2pathRef.value.get(key)}${PATH_SPLIT}`;
 		const pathKeys = /* @__PURE__ */ new Set();
@@ -72,4 +76,5 @@ function useKeyRecords() {
 		getSubPathKeys
 	};
 }
+//#endregion
 export { OVERFLOW_KEY, useKeyRecords as default };

package/dist/hooks/useMemoCallback.js

@@ -1,4 +1,8 @@
 import { ref } from "vue";
+//#region src/hooks/useMemoCallback.ts
+/**
+* Memoize a callback function to keep reference stable
+*/
 function useMemoCallback(callback) {
 	const fnRef = ref(callback);
 	fnRef.value = callback;
@@ -7,4 +11,5 @@ function useMemoCallback(callback) {
 	});
 	return memoFn;
 }
+//#endregion
 export { useMemoCallback as default };

package/dist/index.js

@@ -1,13 +1,14 @@
 import { useFullPath } from "./context/PathContext.js";
-import Divider_default from "./Divider.js";
-import MenuItem_default from "./MenuItem.js";
-import SubMenu_default from "./SubMenu/index.js";
-import MenuItemGroup_default from "./MenuItemGroup.js";
-import Menu_default from "./Menu.js";
-var ExportMenu = Menu_default;
-ExportMenu.Item = MenuItem_default;
-ExportMenu.SubMenu = SubMenu_default;
-ExportMenu.ItemGroup = MenuItemGroup_default;
-ExportMenu.Divider = Divider_default;
-var src_default = ExportMenu;
-export { Divider_default as Divider, MenuItem_default as Item, MenuItem_default as MenuItem, MenuItemGroup_default as ItemGroup, MenuItemGroup_default as MenuItemGroup, SubMenu_default as SubMenu, src_default as default, useFullPath };
+import Divider from "./Divider.js";
+import MenuItem from "./MenuItem.js";
+import SubMenu from "./SubMenu/index.js";
+import MenuItemGroup from "./MenuItemGroup.js";
+import Menu from "./Menu.js";
+//#region src/index.ts
+var ExportMenu = Menu;
+ExportMenu.Item = MenuItem;
+ExportMenu.SubMenu = SubMenu;
+ExportMenu.ItemGroup = MenuItemGroup;
+ExportMenu.Divider = Divider;
+//#endregion
+export { Divider, MenuItem as Item, MenuItem, MenuItemGroup as ItemGroup, MenuItemGroup, SubMenu, ExportMenu as default, useFullPath };

package/dist/placements.js

@@ -1,8 +1,9 @@
+//#region src/placements.ts
 var autoAdjustOverflow = {
 	adjustX: 1,
 	adjustY: 1
 };
-const placements = {
+var placements = {
 	topLeft: {
 		points: ["bl", "tl"],
 		overflow: autoAdjustOverflow
@@ -36,7 +37,7 @@ const placements = {
 		overflow: autoAdjustOverflow
 	}
 };
-const placementsRtl = {
+var placementsRtl = {
 	topLeft: {
 		points: ["bl", "tl"],
 		overflow: autoAdjustOverflow
@@ -70,5 +71,5 @@ const placementsRtl = {
 		overflow: autoAdjustOverflow
 	}
 };
-var placements_default = placements;
-export { placements_default as default, placements, placementsRtl };
+//#endregion
+export { placements as default, placements, placementsRtl };

package/dist/utils/commonUtil.js

@@ -1,5 +1,6 @@
 import { cloneVNode, isVNode } from "vue";
 import { toArray } from "@v-c/util/dist/Children/toArray";
+//#region src/utils/commonUtil.ts
 function parseChildren(children, keyPath) {
 	return toArray(children).map((child, index) => {
 		if (isVNode(child)) {
@@ -17,4 +18,5 @@ function parseChildren(children, keyPath) {
 		return child;
 	});
 }
+//#endregion
 export { parseChildren };

package/dist/utils/motionUtil.js

@@ -1,5 +1,7 @@
+//#region src/utils/motionUtil.ts
 function getMotion(mode, motion, defaultMotions) {
 	if (motion) return motion;
 	if (defaultMotions) return defaultMotions?.[mode] || defaultMotions?.other;
 }
+//#endregion
 export { getMotion };

package/dist/utils/nodeUtil.js

@@ -1,10 +1,11 @@
-import Divider_default from "../Divider.js";
-import MenuItem_default from "../MenuItem.js";
+import Divider from "../Divider.js";
+import MenuItem from "../MenuItem.js";
 import { parseChildren } from "./commonUtil.js";
-import SubMenu_default from "../SubMenu/index.js";
-import MenuItemGroup_default from "../MenuItemGroup.js";
+import SubMenu from "../SubMenu/index.js";
+import MenuItemGroup from "../MenuItemGroup.js";
 import { createVNode, isVNode, mergeProps } from "vue";
 import { filterEmpty } from "@v-c/util/dist/props-util";
+//#region src/utils/nodeUtil.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -55,13 +56,14 @@ function convertItemsToNodes(list, components, prefixCls, slots) {
 function parseItems(children, items, keyPath, components, prefixCls, slots) {
 	let childNodes = children;
 	const mergedComponents = {
-		divider: Divider_default,
-		item: MenuItem_default,
-		group: MenuItemGroup_default,
-		submenu: SubMenu_default,
+		divider: Divider,
+		item: MenuItem,
+		group: MenuItemGroup,
+		submenu: SubMenu,
 		...components
 	};
 	if (items) childNodes = convertItemsToNodes(items, mergedComponents, prefixCls, slots);
 	return parseChildren(childNodes, keyPath);
 }
+//#endregion
 export { parseItems };

package/dist/utils/timeUtil.js

@@ -1,5 +1,7 @@
+//#region src/utils/timeUtil.ts
 function nextSlice(callback) {
 	/* istanbul ignore next */
 	Promise.resolve().then(callback);
 }
+//#endregion
 export { nextSlice };

package/dist/utils/warnUtil.js

@@ -1,4 +1,9 @@
 import { warning } from "@v-c/util";
+//#region src/utils/warnUtil.ts
+/**
+* `onClick` event return `info.item` which point to react node directly.
+* We should warning this since it will not work on FC.
+*/
 function warnItemProp({ item, ...restInfo }) {
 	Object.defineProperty(restInfo, "item", { get: () => {
 		warning(false, "`info.item` is deprecated since we will move to function component that not provides React Node instance in future.");
@@ -6,4 +11,5 @@ function warnItemProp({ item, ...restInfo }) {
 	} });
 	return restInfo;
 }
+//#endregion
 export { warnItemProp };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/menu",
   "type": "module",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "menu ui component for vue",
   "exports": {
     ".": {
@@ -25,9 +25,9 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/overflow": "^1.0.4",
-    "@v-c/trigger": "^1.0.14",
-    "@v-c/util": "^1.0.19"
+    "@v-c/overflow": "^1.0.5",
+    "@v-c/util": "^1.0.19",
+    "@v-c/trigger": "^1.0.14"
   },
   "scripts": {
     "build": "vite build",