antdv-next 1.5.6 → 1.7.0

package/dist/table/hooks/useSelection.js

@@ -3,7 +3,7 @@ import { useMultipleSelect } from "../../_util/hooks/useMultipleSelect.js";
 import Dropdown from "../../dropdown/index.js";
 import radio_default from "../../radio/index.js";
 import checkbox_default from "../../checkbox/index.js";
-import { computed, createVNode, mergeProps, shallowRef, unref, watch } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef, unref, watch } from "vue";
 import { clsx } from "@v-c/util";
 import { DownOutlined } from "@antdv-next/icons";
 import { INTERNAL_COL_DEFINE } from "@v-c/table";
@@ -14,6 +14,48 @@ const SELECTION_ALL = "SELECT_ALL";
 const SELECTION_INVERT = "SELECT_INVERT";
 const SELECTION_NONE = "SELECT_NONE";
 const EMPTY_LIST = [];
+const SelectionMenu = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const open = shallowRef(false);
+	const onKeydown = (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			event.currentTarget?.click();
+		}
+	};
+	return () => createVNode(Dropdown, {
+		"menu": props.menu,
+		"getPopupContainer": props.getPopupContainer,
+		"trigger": ["click", "hover"],
+		"onOpenChange": (nextOpen) => {
+			open.value = nextOpen;
+		},
+		"onMenuClick": (info) => emit("menuClick", info)
+	}, { default: () => [createVNode(DownOutlined, mergeProps({
+		"role": "button",
+		"aria-label": props.label,
+		"aria-haspopup": "menu",
+		"aria-expanded": open.value,
+		"onKeydown": onKeydown
+	}, { "tabIndex": 0 }), null)] });
+}, {
+	props: {
+		menu: {
+			type: Object,
+			required: true
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		label: {
+			type: String,
+			required: true
+		}
+	},
+	emits: ["menuClick"],
+	name: "TableSelectionMenu",
+	inheritAttrs: false
+});
 function flattenData(childrenColumnName, data, list = []) {
 	(data || []).forEach((record) => {
 		list.push(record);
@@ -60,6 +102,16 @@ function useSelection(config, rowSelection) {
 			preserveRecordsRef.value = newCache;
 		}
 	};
+	let lastClickEvent;
+	const takeClickEvent = (event) => {
+		const clickEvent = lastClickEvent;
+		lastClickEvent = void 0;
+		return clickEvent ?? event?.nativeEvent;
+	};
+	const getSelectedRecord = (key) => {
+		const record = getRecordByKey(key);
+		return !record && preserveSelectedRowKeys.value ? preserveRecordsRef.value.get(key) : record;
+	};
 	watch([
 		mergedSelectedKeys,
 		data,
@@ -134,7 +186,7 @@ function useSelection(config, rowSelection) {
 	};
 	const triggerSingleSelection = (key, selected, keys, event) => {
 		if (selectionConfig.value.onSelect) {
-			const rows = keys.map((k) => getRecordByKey(k));
+			const rows = keys.map((k) => getSelectedRecord(k));
 			selectionConfig.value.onSelect(getRecordByKey(key), selected, rows, event);
 		}
 		setSelectedKeys(keys, "single");
@@ -150,7 +202,7 @@ function useSelection(config, rowSelection) {
 				key: "all",
 				text: tableLocale.value.selectionAll,
 				onSelect() {
-					setSelectedKeys(data.value.reduce((keys, record, index) => {
+					setSelectedKeys(flattenData(childrenColumnName.value, data.value).reduce((keys, record, index) => {
 						const key = getRowKey.value(record, index);
 						if (!isCheckboxDisabled(record) || derivedSelectedKeySet.value.has(key)) keys.push(key);
 						return keys;
@@ -162,7 +214,7 @@ function useSelection(config, rowSelection) {
 				text: tableLocale.value.selectInvert,
 				onSelect() {
 					const keySet = new Set(derivedSelectedKeySet.value);
-					pageData.value.forEach((record, index) => {
+					flattedData.value.forEach((record, index) => {
 						const key = getRowKey.value(record, index);
 						if (!checkboxPropsMap.value.get(key)?.disabled) if (keySet.has(key)) keySet.delete(key);
 						else keySet.add(key);
@@ -181,7 +233,8 @@ function useSelection(config, rowSelection) {
 				onSelect() {
 					selectionConfig.value.onSelectNone?.();
 					setSelectedKeys(Array.from(derivedSelectedKeySet.value).filter((key) => {
-						return checkboxPropsMap.value.get(key)?.disabled;
+						const record = getSelectedRecord(key);
+						return record !== void 0 && isCheckboxDisabled(record);
 					}), "none");
 				}
 			};
@@ -217,10 +270,11 @@ function useSelection(config, rowSelection) {
 				}
 			});
 			const keys = Array.from(keySet);
-			selectionConfig.value.onSelectAll?.(!checkedCurrentAll, keys.map((k) => getRecordByKey(k)), changeKeys.map((k) => getRecordByKey(k)));
+			selectionConfig.value.onSelectAll?.(!checkedCurrentAll, keys.map((k) => getSelectedRecord(k)), changeKeys.map((k) => getRecordByKey(k)));
 			setSelectedKeys(keys, "all");
 			updatePrevSelectedIndex(null);
 		};
+		const { selectAll, selectRow = "Select row", selectedRow = "Row selected", selectionMenu: selectionMenuLabel = "Selection menu" } = tableLocale.value;
 		let title;
 		let columnTitleCheckbox;
 		if (selectionType.value !== "radio") {
@@ -234,16 +288,17 @@ function useSelection(config, rowSelection) {
 				mergedSelections.value.forEach((selection, index) => {
 					selectionMap.set(selection.key ?? index, selection);
 				});
-				customizeSelections = createVNode("div", { "class": `${prefixCls.value}-selection-extra` }, [createVNode(Dropdown, {
+				customizeSelections = createVNode("div", { "class": `${prefixCls.value}-selection-extra` }, [createVNode(SelectionMenu, {
 					"menu": {
 						getPopupContainer: getPopupContainer.value,
 						items: menuItems
 					},
 					"getPopupContainer": getPopupContainer.value,
+					"label": selectionMenuLabel,
 					"onMenuClick": (info) => {
 						selectionMap.get(info?.key)?.onSelect?.(recordKeys);
 					}
-				}, { default: () => [createVNode("span", null, [createVNode(DownOutlined, null, null)])] })]);
+				}, null)]);
 			}
 			const allDisabledData = flattedData.value.map((record, index) => {
 				const key = getRowKey.value(record, index);
@@ -258,7 +313,7 @@ function useSelection(config, rowSelection) {
 			const allDisabledSomeChecked = allDisabled && allDisabledData.some(({ checked }) => checked);
 			const customCheckboxProps = selectionConfig.value.getTitleCheckboxProps?.() || {};
 			const { onChange, disabled } = customCheckboxProps;
-			columnTitleCheckbox = createVNode(checkbox_default, mergeProps({ "aria-label": customizeSelections ? "Custom selection" : "Select all" }, customCheckboxProps, {
+			columnTitleCheckbox = createVNode(checkbox_default, mergeProps({ "aria-label": typeof selectAll === "string" && selectAll ? selectAll : "Select all" }, customCheckboxProps, {
 				"checked": !allDisabled ? !!flattedData.value.length && checkedCurrentAll : allDisabledAndChecked,
 				"indeterminate": !allDisabled ? !checkedCurrentAll && checkedCurrentSome : !allDisabledAndChecked && allDisabledSomeChecked,
 				"onChange": (e) => {
@@ -276,14 +331,16 @@ function useSelection(config, rowSelection) {
 			const checked = keySet.has(key);
 			const checkboxProps = checkboxPropsMap.value.get(key);
 			return {
-				node: createVNode(radio_default, mergeProps({ "aria-label": `Select row ${index + 1}` }, checkboxProps, {
+				node: createVNode(radio_default, mergeProps({ "aria-label": selectRow }, checkboxProps, {
 					"checked": checked,
 					"onClick": (e) => {
+						lastClickEvent = e;
 						e.stopPropagation();
 						checkboxProps?.onClick?.(e);
 					},
 					"onChange": (event) => {
-						if (!keySet.has(key)) triggerSingleSelection(key, true, [key], event.nativeEvent);
+						const nativeEvent = takeClickEvent(event);
+						if (!keySet.has(key)) triggerSingleSelection(key, true, [key], nativeEvent);
 						checkboxProps?.onChange?.(event);
 					}
 				}), null),
@@ -301,23 +358,24 @@ function useSelection(config, rowSelection) {
 				warning(typeof checkboxProps?.indeterminate !== "boolean", "usage", "set `indeterminate` using `rowSelection.getCheckboxProps` is not allowed with tree structured dataSource.");
 			} else mergedIndeterminate = checkboxProps?.indeterminate ?? indeterminate;
 			return {
-				node: createVNode(checkbox_default, mergeProps({ "aria-label": checked ? `Row ${index + 1} selected` : `Select row ${index + 1}` }, checkboxProps, {
+				node: createVNode(checkbox_default, mergeProps({ "aria-label": checked ? selectedRow : selectRow }, checkboxProps, {
 					"indeterminate": mergedIndeterminate,
 					"checked": checked,
 					"skipGroup": true,
 					"onClick": (e) => {
+						lastClickEvent = e;
 						e.stopPropagation();
 						checkboxProps?.onClick?.(e);
 					},
 					"onChange": (event) => {
-						const nativeEvent = event.nativeEvent;
-						const { shiftKey } = nativeEvent;
+						const nativeEvent = takeClickEvent(event);
+						const shiftKey = !!nativeEvent?.shiftKey;
 						const currentSelectedIndex = recordKeys.indexOf(key);
 						const isMultiple = derivedSelectedKeySet.value.size > 0 && recordKeys.some((key) => derivedSelectedKeySet.value.has(key));
 						if (shiftKey && checkStrictly.value && isMultiple) {
 							const changedKeys = multipleSelect(currentSelectedIndex, recordKeys, keySet);
 							const keys = Array.from(keySet);
-							selectionConfig.value.onSelectMultiple?.(!checked, keys.map((recordKey) => getRecordByKey(recordKey)), changedKeys.map((recordKey) => getRecordByKey(recordKey)));
+							selectionConfig.value.onSelectMultiple?.(!checked, keys.map((recordKey) => getSelectedRecord(recordKey)), changedKeys.map((recordKey) => getRecordByKey(recordKey)));
 							setSelectedKeys(keys, "multiple");
 						} else {
 							const originCheckedKeys = derivedSelectedKeys.value[0];

package/dist/table/interface.d.ts

@@ -31,9 +31,17 @@ interface TableLocale {
   selectNone?: VueNode;
   selectInvert?: VueNode;
   selectionAll?: VueNode;
+  /** Accessible label for a selectable row. */
+  selectRow?: string;
+  /** Accessible label for a selected row. */
+  selectedRow?: string;
+  /** Accessible label for the custom selection menu trigger. */
+  selectionMenu?: string;
   sortTitle?: string;
   expand?: string;
   collapse?: string;
+  expandAll?: string;
+  collapseAll?: string;
   triggerDesc?: string;
   triggerAsc?: string;
   cancelSort?: string;

package/dist/table/style/index.d.ts

@@ -1,4 +1,8 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
 import { FullToken, GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
 import "../../theme/internal.js";
 //#region src/table/style/index.d.ts
 interface ComponentToken {
@@ -211,6 +215,6 @@ interface TableToken extends FullToken<'Table'> {
   tableScrollBg: string;
 }
 declare const prepareComponentToken: GetDefaultToken<'Table'>;
-declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@antdv-next/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
 //#endregion
 export { ComponentToken, TableToken, _default as default, prepareComponentToken };

package/dist/table/style/index.js

@@ -25,7 +25,7 @@ const genTableStyle = (token) => {
 	return { [`${componentCls}-wrapper`]: {
 		clear: "both",
 		maxWidth: "100%",
-		["--rc-virtual-list-scrollbar-bg"]: token.tableScrollBg,
+		["--vc-virtual-list-scrollbar-bg"]: token.tableScrollBg,
 		...clearFix(),
 		[componentCls]: {
 			...resetComponent(token),

package/dist/table/style/selection.js

@@ -21,7 +21,7 @@ const genSelectionStyle = (token) => {
 			textAlign: "center",
 			[`${antCls}-radio-wrapper`]: { marginInlineEnd: 0 }
 		},
-		[`table tr th${componentCls}-selection-column${componentCls}-cell-fix-left`]: { zIndex: calc(token.zIndexTableFixed).add(1).equal({ unit: false }) },
+		[`table tr th${componentCls}-selection-column${componentCls}-cell-fix-start`]: { zIndex: `calc(var(--z-offset, 0) + ${token.zIndexTableFixed})` },
 		[`table tr th${componentCls}-selection-column::after`]: { backgroundColor: "transparent !important" },
 		[`${componentCls}-selection`]: {
 			position: "relative",

package/dist/table/style/sorter.js

@@ -12,8 +12,8 @@ const genSorterStyle = (token) => {
 			},
 			"&:focus-visible": { color: token.colorPrimary },
 			[`
-          &${componentCls}-cell-fix-left:hover,
-          &${componentCls}-cell-fix-right:hover
+          &${componentCls}-cell-fix-start:hover,
+          &${componentCls}-cell-fix-end:hover
         `]: { background: token.tableFixedHeaderSortActiveBg }
 		},
 		[`${componentCls}-thead th${componentCls}-column-sort`]: {

package/dist/table/util.d.ts

@@ -11,7 +11,7 @@ declare function renderColumnTitle<RecordType extends AnyObject = AnyObject>(tit
  * Should filter [object Object]
  */
 declare function safeColumnTitle<RecordType extends AnyObject = AnyObject>(title: ColumnTitle<RecordType>, props: ColumnTitleProps<RecordType>): any;
-declare function normalizePlacement(pos: TablePaginationPlacement | TablePaginationPosition): "start" | "end" | "center";
+declare function normalizePlacement(pos: TablePaginationPlacement | TablePaginationPosition): "center" | "end" | "start";
 declare function getPaginationSize(paginationSize: SizeType, mergedSize: SizeType): SizeType;
 //#endregion
 export { getColumnKey, getColumnPos, getPaginationSize, normalizePlacement, renderColumnTitle, safeColumnTitle };

package/dist/tabs/index.js

@@ -56,6 +56,9 @@ const InternalTabs = /* @__PURE__ */ defineComponent((props, { attrs, slots, emi
 		warning(!(attrs.onPrevClick || attrs.onNextClick), "breaking", "`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.");
 		warning.deprecated(!indicatorSize.value, "indicatorSize", "indicator");
 		warning.deprecated(!(props.destroyInactiveTabPane || props.items?.some((item) => "destroyInactiveTabPane" in item)), "destroyInactiveTabPane", "destroyOnHidden");
+		if (more.value) [["visible", "open"], ["onVisibleChange", "onOpenChange"]].forEach(([deprecatedName, newName]) => {
+			warning.deprecated(!(deprecatedName in more.value), `more.${deprecatedName}`, `more.${newName}`);
+		});
 	}
 	const rootCls = useCSSVarCls(prefixCls);
 	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
@@ -87,14 +90,18 @@ const InternalTabs = /* @__PURE__ */ defineComponent((props, { attrs, slots, emi
 		};
 		const mergedMoreFn = () => {
 			const rootPrefixCls = getPrefixCls();
+			const { visible: moreVisible, ...restMoreProps } = more.value ?? {};
+			const legacyMoreProps = more.value && !("open" in more.value) && "visible" in more.value ? { open: moreVisible } : {};
 			if (!rootPrefixCls) return {
 				icon: moreIcon,
-				...more.value
+				...restMoreProps,
+				...legacyMoreProps
 			};
 			return {
 				icon: moreIcon,
 				transitionName: `${rootPrefixCls}-slide-up`,
-				...more.value
+				...restMoreProps,
+				...legacyMoreProps
 			};
 		};
 		const mergedMore = mergedMoreFn();

package/dist/tabs/style/index.d.ts

@@ -1,4 +1,8 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
 import { FullToken, GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
 import "../../theme/internal.js";
 //#region src/tabs/style/index.d.ts
 interface ComponentToken {
@@ -143,6 +147,6 @@ interface TabsToken extends FullToken<'Tabs'> {
   tabsHorizontalItemMarginRTL: string;
 }
 declare const prepareComponentToken: GetDefaultToken<'Tabs'>;
-declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@antdv-next/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
 //#endregion
 export { ComponentToken, TabsToken, _default as default, prepareComponentToken };

package/dist/tabs/style/index.js

@@ -114,7 +114,7 @@ const genDropdownStyle = (token) => {
 				margin: 0,
 				padding: `${unit(token.paddingXXS)} ${unit(token.paddingSM)}`,
 				color: token.colorText,
-				fontWeight: "normal",
+				fontWeight: 400,
 				fontSize: token.fontSize,
 				lineHeight: token.lineHeight,
 				cursor: "pointer",

package/dist/tag/CheckableTagGroup.d.ts

@@ -43,7 +43,7 @@ interface CheckableTagGroupEmitsProps<CheckableTagValue = CheckableTagDefaultVal
   onChange?: CheckableTagGroupEmits<CheckableTagValue>['change'];
   'onUpdate:value'?: CheckableTagGroupEmits<CheckableTagValue>['update:value'];
 }
-interface InternalCheckableTagGroupProps extends CheckableTagGroupProps, CheckableTagGroupEmitsProps {}
-declare const CheckableTagGroup: import("vue").DefineSetupFnComponent<InternalCheckableTagGroupProps, CheckableTagGroupEmits<CheckableTagDefaultValue>, {}, InternalCheckableTagGroupProps, import("vue").PublicProps>;
+type InternalCheckableTagGroupProps = CheckableTagGroupProps & /* @vue-ignore */ CheckableTagGroupEmitsProps;
+declare const CheckableTagGroup: import("vue").DefineSetupFnComponent<InternalCheckableTagGroupProps, CheckableTagGroupEmits<CheckableTagDefaultValue>, {}, InternalCheckableTagGroupProps & {}, import("vue").PublicProps>;
 //#endregion
 export { CheckableTagGroupEmits, CheckableTagGroupEmitsProps, CheckableTagGroupProps, CheckableTagGroupRef, CheckableTagOption, SemanticName, CheckableTagGroup as default };

package/dist/tag/hooks/useColor.d.ts

@@ -9,6 +9,6 @@ declare function useColor(props: {
   color: Ref<TagProps['color']>;
   variant: Ref<TagProps['variant']>;
   bordered: Ref<TagProps['bordered']>;
-}, contextVariant?: Ref<TagProps['variant']>): readonly [import("vue").ComputedRef<"solid" | "filled" | "outlined">, import("vue").ComputedRef<string | undefined>, import("vue").ComputedRef<boolean>, import("vue").ComputedRef<boolean>, import("vue").ComputedRef<CSSProperties>];
+}, contextVariant?: Ref<TagProps['variant']>): readonly [import("vue").ComputedRef<"outlined" | "solid" | "filled">, import("vue").ComputedRef<string | undefined>, import("vue").ComputedRef<boolean>, import("vue").ComputedRef<boolean>, import("vue").ComputedRef<CSSProperties>];
 //#endregion
 export { useColor as default };

package/dist/tag/style/index.d.ts

@@ -1,4 +1,8 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
 import { FullToken, GenStyleFn, GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
 import "../../theme/internal.js";
 import { CSSProperties } from "vue";
 //#region src/tag/style/index.d.ts
@@ -28,6 +32,6 @@ interface TagToken extends FullToken<'Tag'> {
 }
 declare function prepareToken(token: Parameters<GenStyleFn<'Tag'>>[0]): TagToken;
 declare const prepareComponentToken: GetDefaultToken<'Tag'>;
-declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@antdv-next/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
 //#endregion
 export { ComponentToken, TagToken, _default as default, prepareComponentToken, prepareToken };

package/dist/theme/context.js

@@ -17,8 +17,9 @@ const DesignTokenProvider = defineComponent((props, { slots }) => {
 		return slots?.default?.();
 	};
 }, { props: ["value"] });
+const defaultDesignTokenRef = computed(() => defaultConfig);
 function useDesignToken() {
-	return inject(DesignTokenContextKey, computed(() => defaultConfig));
+	return inject(DesignTokenContextKey, defaultDesignTokenRef);
 }
 //#endregion
 export { DesignTokenContextKey, DesignTokenProvider, defaultConfig, defaultTheme, useDesignToken, useDesignTokenProvide };

package/dist/theme/useToken.d.ts

@@ -11,6 +11,10 @@ declare const ignore: { [key in keyof AliasToken]?: boolean; };
 declare function getComputedToken(originToken: SeedToken, overrideToken: DesignTokenProviderProps['components'] & {
   override?: Partial<AliasToken>;
 }, theme: Theme<any, any>): any;
-declare function useToken(): [theme: Ref<Theme<SeedToken, AliasToken>>, token: Ref<GlobalToken>, hashId: Ref<string>, realToken: Ref<GlobalToken>, cssVar: Ref<DesignTokenProviderProps['cssVar']>, zeroRuntime: Ref<boolean>];
+type UseTokenResult = [theme: Ref<Theme<SeedToken, AliasToken>>, token: Ref<GlobalToken>, hashId: Ref<string>, realToken: Ref<GlobalToken>, cssVar: Ref<{
+  prefix: string;
+  key: string;
+}>, zeroRuntime: Ref<boolean>];
+declare function useToken(): UseTokenResult;
 //#endregion
-export { useToken as default, getComputedToken, ignore, unitless };
+export { UseTokenResult, useToken as default, getComputedToken, ignore, unitless };

package/dist/theme/useToken.js

@@ -4,8 +4,8 @@ import { useDesignToken } from "./context.js";
 import { useConfig } from "../config-provider/context.js";
 import version_default from "../version/index.js";
 import formatToken from "./util/alias.js";
-import { computed } from "vue";
-import { useCacheToken } from "@antdv-next/cssinjs";
+import { computed, effectScope } from "vue";
+import { createCacheToken, useGlobalCacheEntry, useStyleContext } from "@antdv-next/cssinjs";
 //#region src/theme/useToken.ts
 const unitless = {
 	lineHeight: true,
@@ -67,9 +67,13 @@ function getComputedToken(originToken, overrideToken, theme) {
 	});
 	return mergedDerivativeToken;
 }
-function useToken() {
-	const designContext = useDesignToken();
-	const config = useConfig();
+/**
+* The derived token only depends on the three injected contexts, so compute it
+* once per (design token, config, style context) triple and let every component
+* instance under those providers reuse the same computeds. Each instance only
+* holds a reference on the cache entry (`useGlobalCacheEntry`).
+*/
+function createSharedToken(designContext, config, styleContext) {
 	const salt = computed(() => `${version_default}-${designContext.value.hashed || ""}`);
 	const mergedTheme = computed(() => designContext.value?.theme || defaultTheme);
 	const cssVar = computed(() => {
@@ -79,7 +83,7 @@ function useToken() {
 			key: cssVar?.key ?? "css-var-root"
 		};
 	});
-	const cachedToken = useCacheToken(mergedTheme, computed(() => [seedToken, designContext.value.token]), computed(() => {
+	const entry = createCacheToken(styleContext, mergedTheme, computed(() => [seedToken, designContext.value.token]), computed(() => {
 		return {
 			salt: salt.value,
 			override: designContext.value.override,
@@ -93,14 +97,42 @@ function useToken() {
 			nonce: designContext.value.csp?.nonce ?? config.value?.csp?.nonce
 		};
 	}));
-	return [
-		mergedTheme,
-		computed(() => cachedToken.value[2]),
-		computed(() => designContext.value.hashed ? cachedToken.value[1] : ""),
-		computed(() => cachedToken.value[0]),
-		cssVar,
-		computed(() => !!designContext.value?.zeroRuntime)
-	];
+	const cachedToken = entry.value;
+	return {
+		entry,
+		result: [
+			mergedTheme,
+			computed(() => cachedToken.value[2]),
+			computed(() => designContext.value.hashed ? cachedToken.value[1] : ""),
+			computed(() => cachedToken.value[0]),
+			cssVar,
+			computed(() => !!designContext.value?.zeroRuntime)
+		]
+	};
+}
+const sharedTokenMap = /* @__PURE__ */ new WeakMap();
+function getSharedToken(designContext, config, styleContext) {
+	let byConfig = sharedTokenMap.get(designContext);
+	if (!byConfig) {
+		byConfig = /* @__PURE__ */ new WeakMap();
+		sharedTokenMap.set(designContext, byConfig);
+	}
+	let byStyle = byConfig.get(config);
+	if (!byStyle) {
+		byStyle = /* @__PURE__ */ new WeakMap();
+		byConfig.set(config, byStyle);
+	}
+	let shared = byStyle.get(styleContext);
+	if (!shared) {
+		shared = effectScope(true).run(() => createSharedToken(designContext, config, styleContext));
+		byStyle.set(styleContext, shared);
+	}
+	return shared;
+}
+function useToken() {
+	const shared = getSharedToken(useDesignToken(), useConfig(), useStyleContext());
+	useGlobalCacheEntry(shared.entry);
+	return shared.result;
 }
 //#endregion
 export { useToken as default, getComputedToken, ignore, unitless };

package/dist/theme/util/genStyleUtils.d.ts

@@ -1,7 +1,17 @@
+import { SeedToken } from "../interface/seeds.js";
 import { AliasToken } from "../interface/alias.js";
 import { ComponentTokenMap } from "../interface/components.js";
 import "../interface/index.js";
+import { ComputedRef } from "vue";
+import { UseTokenReturn } from "@antdv-next/cssinjs";
 //#region src/theme/util/genStyleUtils.d.ts
+type StyleTokenResult = UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken>;
+/**
+ * `useToken()` in the shape the cssinjs style hooks consume. Components that
+ * need the token themselves (e.g. Wave) call this once and pass the result to
+ * their style hook so the token is resolved a single time per instance.
+ */
+declare function useStyleToken(): StyleTokenResult;
 declare const genComponentStyleHook: <C extends keyof ComponentTokenMap>(componentName: C | [C, string], styleFn: import("@antdv-next/cssinjs").GenStyleFn<ComponentTokenMap, AliasToken, C>, getDefaultToken?: import("@antdv-next/cssinjs").GetDefaultToken<ComponentTokenMap, AliasToken, C> | undefined, options?: {
   resetStyle?: boolean;
   resetFont?: boolean;
@@ -10,7 +20,7 @@ declare const genComponentStyleHook: <C extends keyof ComponentTokenMap>(compone
   order?: number;
   injectStyle?: boolean;
   unitless?: Partial<Record<keyof Exclude<import("@antdv-next/cssinjs").OverrideTokenMap<ComponentTokenMap, AliasToken>[C], undefined>, boolean>> | undefined;
-} | undefined) => (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => import("vue").Ref<string, string>, genStyleHooks: <C extends keyof ComponentTokenMap>(component: C | [C, string], styleFn: import("@antdv-next/cssinjs").GenStyleFn<ComponentTokenMap, AliasToken, C>, getDefaultToken?: import("@antdv-next/cssinjs").GetDefaultToken<ComponentTokenMap, AliasToken, C> | undefined, options?: {
+} | undefined) => (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => import("vue").Ref<string, string>, genStyleHooks: <C extends keyof ComponentTokenMap>(component: C | [C, string], styleFn: import("@antdv-next/cssinjs").GenStyleFn<ComponentTokenMap, AliasToken, C>, getDefaultToken?: import("@antdv-next/cssinjs").GetDefaultToken<ComponentTokenMap, AliasToken, C> | undefined, options?: {
   resetStyle?: boolean;
   resetFont?: boolean;
   deprecatedTokens?: [keyof Exclude<import("@antdv-next/cssinjs").OverrideTokenMap<ComponentTokenMap, AliasToken>[C], undefined>, keyof Exclude<import("@antdv-next/cssinjs").OverrideTokenMap<ComponentTokenMap, AliasToken>[C], undefined>][] | undefined;
@@ -22,7 +32,7 @@ declare const genComponentStyleHook: <C extends keyof ComponentTokenMap>(compone
     prefixCls: string;
     rootCls: string;
   }) => string[]);
-} | undefined) => (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>], genSubStyleComponent: <C extends keyof ComponentTokenMap>(componentName: C | [C, string], styleFn: import("@antdv-next/cssinjs").GenStyleFn<ComponentTokenMap, AliasToken, C>, getDefaultToken?: import("@antdv-next/cssinjs").GetDefaultToken<ComponentTokenMap, AliasToken, C> | undefined, options?: {
+} | undefined) => (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, ComputedRef<string | undefined>], genSubStyleComponent: <C extends keyof ComponentTokenMap>(componentName: C | [C, string], styleFn: import("@antdv-next/cssinjs").GenStyleFn<ComponentTokenMap, AliasToken, C>, getDefaultToken?: import("@antdv-next/cssinjs").GetDefaultToken<ComponentTokenMap, AliasToken, C> | undefined, options?: {
   resetStyle?: boolean;
   resetFont?: boolean;
   deprecatedTokens?: [keyof Exclude<import("@antdv-next/cssinjs").OverrideTokenMap<ComponentTokenMap, AliasToken>[C], undefined>, keyof Exclude<import("@antdv-next/cssinjs").OverrideTokenMap<ComponentTokenMap, AliasToken>[C], undefined>][] | undefined;
@@ -41,4 +51,4 @@ type CssVarName = (name: string) => `--${string}`;
 type CssVarRef = (name: string, fallback?: string | number) => `var(--${string})`;
 declare function genCssVar(antCls: string, component: string): readonly [varName: CssVarName, varRef: CssVarRef];
 //#endregion
-export { genComponentStyleHook, genCssVar, genStyleHooks, genSubStyleComponent };
+export { StyleTokenResult, genComponentStyleHook, genCssVar, genStyleHooks, genSubStyleComponent, useStyleToken };

package/dist/theme/util/genStyleUtils.js

@@ -1,38 +1,52 @@
 import { useConfig } from "../../config-provider/context.js";
 import useToken, { unitless } from "../useToken.js";
 import { genCommonStyle, genIconStyle, genLinkStyle } from "../../style/index.js";
-import { computed } from "vue";
+import { computed, effectScope } from "vue";
 import { genStyleUtils } from "@antdv-next/cssinjs/cssinjs-utils";
 //#region src/theme/util/genStyleUtils.ts
+/**
+* Derive a computed from the injected config ref once per ref instead of once
+* per component instance. The config ref is stable per ConfigProvider (and a
+* module singleton without one), so the WeakMap entry lives exactly as long
+* as the provider.
+*/
+function memoByConfig(cache, create) {
+	const config = useConfig();
+	let result = cache.get(config);
+	if (!result) {
+		result = effectScope(true).run(() => computed(() => create(config)));
+		cache.set(config, result);
+	}
+	return result;
+}
+const prefixCache = /* @__PURE__ */ new WeakMap();
+const cspCache = /* @__PURE__ */ new WeakMap();
+/**
+* `useToken()` in the shape the cssinjs style hooks consume. Components that
+* need the token themselves (e.g. Wave) call this once and pass the result to
+* their style hook so the token is resolved a single time per instance.
+*/
+function useStyleToken() {
+	const [theme, realToken, hashId, token, cssVar, zeroRuntime] = useToken();
+	return {
+		theme,
+		realToken,
+		hashId,
+		token,
+		cssVar,
+		zeroRuntime
+	};
+}
 const { genComponentStyleHook, genStyleHooks, genSubStyleComponent } = genStyleUtils({
-	usePrefix: () => {
-		const configCtx = useConfig();
-		return computed(() => {
-			const { getPrefixCls, iconPrefixCls } = configCtx.value;
-			return {
-				rootPrefixCls: getPrefixCls(),
-				iconPrefixCls
-			};
-		});
-	},
-	useToken() {
-		const [theme, realToken, hashId, token, cssVar, zeroRuntime] = useToken();
+	usePrefix: () => memoByConfig(prefixCache, (configCtx) => {
+		const { getPrefixCls, iconPrefixCls } = configCtx.value;
 		return {
-			theme,
-			realToken,
-			hashId: computed(() => hashId.value ?? ""),
-			token,
-			cssVar: computed(() => cssVar?.value ?? {
-				prefix: "",
-				key: ""
-			}),
-			zeroRuntime
+			rootPrefixCls: getPrefixCls(),
+			iconPrefixCls
 		};
-	},
-	useCSP: () => {
-		const configCtx = useConfig();
-		return computed(() => configCtx.value?.csp ?? {});
-	},
+	}),
+	useToken: useStyleToken,
+	useCSP: () => memoByConfig(cspCache, (configCtx) => configCtx.value?.csp ?? {}),
 	getResetStyles: (token, config) => {
 		const linkStyle = genLinkStyle(token);
 		const { prefix } = config ?? {};
@@ -56,4 +70,4 @@ function genCssVar(antCls, component) {
 	return [varName, varRef];
 }
 //#endregion
-export { genComponentStyleHook, genCssVar, genStyleHooks, genSubStyleComponent };
+export { genComponentStyleHook, genCssVar, genStyleHooks, genSubStyleComponent, useStyleToken };