antdv-next 1.6.0 → 1.7.0

package/dist/date-picker/util.d.ts

@@ -11,6 +11,8 @@ declare function useIcons(props: Pick<PickerProps$1, 'allowClear' | 'clearIcon'
   clearIcon?: VueNode;
 }): readonly [false, string | number | boolean | import("vue/jsx-runtime").JSX.Element | RenderNodeFn<any[]> | null] | readonly [{
   readonly disabled?: boolean;
+  readonly tabIndex?: number;
+  readonly label?: string;
   readonly clearIcon: any;
 }, string | number | boolean | import("vue/jsx-runtime").JSX.Element | RenderNodeFn<any[]> | null];
 //#endregion

package/dist/descriptions/hooks/useItems.d.ts

@@ -8,21 +8,21 @@ declare function useItems(screens: Ref<ScreenMap>, items: Ref<DescriptionsItemTy
   filled: boolean;
   _$index: number;
   key?: import("@v-c/util/dist/type").Key;
-  label?: VueNode;
-  style?: import("vue").CSSProperties | undefined;
   class?: string | undefined;
-  styles?: CellSemanticStyles | undefined;
+  style?: import("vue").CSSProperties | undefined;
+  label?: VueNode;
   classes?: CellSemanticClassNames | undefined;
+  styles?: CellSemanticStyles | undefined;
   rootClass?: string | undefined;
   content?: VueNode;
 } | {
   span: number | undefined;
   key?: import("@v-c/util/dist/type").Key;
-  label?: VueNode;
-  style?: import("vue").CSSProperties | undefined;
   class?: string | undefined;
-  styles?: CellSemanticStyles | undefined;
+  style?: import("vue").CSSProperties | undefined;
+  label?: VueNode;
   classes?: CellSemanticClassNames | undefined;
+  styles?: CellSemanticStyles | undefined;
   rootClass?: string | undefined;
   content?: VueNode;
   _$index: number;

package/dist/descriptions/style/index.js

@@ -5,11 +5,12 @@ import { unit } from "@antdv-next/cssinjs";
 //#region src/descriptions/style/index.ts
 const genBorderedStyle = (token) => {
 	const { componentCls, labelBg } = token;
+	const rowSelector = `> ${componentCls}-view > table > tbody > ${componentCls}-row`;
 	return { [`&${componentCls}-bordered`]: {
 		[`> ${componentCls}-view`]: {
 			border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
 			"> table": { tableLayout: "auto" },
-			[`${componentCls}-row`]: {
+			[`> table > tbody > ${componentCls}-row`]: {
 				borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
 				"&:first-child": { "> th:first-child, > td:first-child": { borderStartStartRadius: token.borderRadiusLG } },
 				"&:last-child": {
@@ -28,12 +29,13 @@ const genBorderedStyle = (token) => {
 				}
 			}
 		},
-		[`&${componentCls}-medium`]: { [`${componentCls}-row`]: { [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: { padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}` } } },
-		[`&${componentCls}-small`]: { [`${componentCls}-row`]: { [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: { padding: `${unit(token.paddingXS)} ${unit(token.padding)}` } } }
+		[`&${componentCls}-medium`]: { [rowSelector]: { [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: { padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}` } } },
+		[`&${componentCls}-small`]: { [rowSelector]: { [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: { padding: `${unit(token.paddingXS)} ${unit(token.padding)}` } } }
 	} };
 };
 const genDescriptionStyles = (token) => {
 	const { componentCls, extraColor, itemPaddingBottom, itemPaddingEnd, colonMarginRight, colonMarginLeft, titleMarginBottom } = token;
+	const rowSelector = `> ${componentCls}-view > table > tbody > ${componentCls}-row`;
 	return { [componentCls]: {
 		...resetComponent(token),
 		...genBorderedStyle(token),
@@ -65,7 +67,7 @@ const genDescriptionStyles = (token) => {
 				borderCollapse: "collapse"
 			}
 		},
-		[`${componentCls}-row`]: {
+		[rowSelector]: {
 			"> th, > td": {
 				paddingBottom: itemPaddingBottom,
 				paddingInlineEnd: itemPaddingEnd
@@ -78,7 +80,7 @@ const genDescriptionStyles = (token) => {
 		},
 		[`${componentCls}-item-label`]: {
 			color: token.labelColor,
-			fontWeight: "normal",
+			fontWeight: 400,
 			fontSize: token.fontSize,
 			lineHeight: token.lineHeight,
 			textAlign: "start",
@@ -90,10 +92,6 @@ const genDescriptionStyles = (token) => {
 			},
 			[`&${componentCls}-item-no-colon::after`]: { content: "\"\"" }
 		},
-		[`${componentCls}-item-no-label`]: { "&::after": {
-			margin: 0,
-			content: "\"\""
-		} },
 		[`${componentCls}-item-content`]: {
 			display: "table-cell",
 			flex: 1,
@@ -108,19 +106,19 @@ const genDescriptionStyles = (token) => {
 			verticalAlign: "top",
 			"&-container": {
 				display: "flex",
-				[`${componentCls}-item-label`]: {
+				[`> ${componentCls}-item-label`]: {
 					display: "inline-flex",
 					alignItems: "baseline"
 				},
-				[`${componentCls}-item-content`]: {
+				[`> ${componentCls}-item-content`]: {
 					display: "inline-flex",
 					alignItems: "baseline",
 					minWidth: "1em"
 				}
 			}
 		},
-		"&-medium": { [`${componentCls}-row`]: { "> th, > td": { paddingBottom: token.paddingSM } } },
-		"&-small": { [`${componentCls}-row`]: { "> th, > td": { paddingBottom: token.paddingXS } } }
+		"&-medium": { [rowSelector]: { "> th, > td": { paddingBottom: token.paddingSM } } },
+		"&-small": { [rowSelector]: { "> th, > td": { paddingBottom: token.paddingXS } } }
 	} };
 };
 const prepareComponentToken = (token) => ({

package/dist/divider/style/index.js

@@ -95,7 +95,7 @@ const genSharedDividerStyle = (token) => {
 		},
 		[`&-plain${componentCls}-with-text`]: {
 			color: token.colorText,
-			fontWeight: "normal",
+			fontWeight: 400,
 			fontSize: token.fontSize
 		},
 		[`&-horizontal${componentCls}-with-text-start${componentCls}-no-default-orientation-margin-start`]: {

package/dist/drawer/DrawerPanel.js

@@ -81,7 +81,7 @@ const DrawerPanel = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			]);
 		};
 		const renderFooter = () => {
-			if (!footer) return null;
+			if (!isRenderable(footer)) return null;
 			return createVNode("div", {
 				"class": clsx(`${prefixCls}-footer`, mergedClassNames.value.footer),
 				"style": [mergedStyles.value.footer, footerStyle]

package/dist/dropdown/dropdown.d.ts

@@ -16,6 +16,7 @@ interface DropdownArrowOptions {
 type DropdownSemanticName = keyof DropdownSemanticClassNames & keyof DropdownSemanticStyles;
 interface DropdownSemanticClassNames {
   root?: string;
+  menu?: string;
   item?: string;
   itemTitle?: string;
   itemIcon?: string;
@@ -23,6 +24,7 @@ interface DropdownSemanticClassNames {
 }
 interface DropdownSemanticStyles {
   root?: CSSProperties;
+  menu?: CSSProperties;
   item?: CSSProperties;
   itemTitle?: CSSProperties;
   itemIcon?: CSSProperties;

package/dist/dropdown/dropdown.js

@@ -95,8 +95,13 @@ const Dropdown = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs })
 			disabled: child?.props?.disabled ?? props?.disabled
 		});
 		const renderOverlay = () => {
-			const menuClassNames = omit(mergedClassNames.value, ["root"]);
-			const menuStyles = omit(mergedStyles.value, ["root"]);
+			const menuClassNames = omit(mergedClassNames.value, ["root", "menu"]);
+			const menuStyles = omit(mergedStyles.value, ["root", "menu"]);
+			const menuRootClassName = clsx(menu?.classes?.root, mergedClassNames.value.menu) || void 0;
+			const menuRootStyle = mergedStyles.value.menu ? {
+				...menu?.styles?.root,
+				...mergedStyles.value.menu
+			} : menu?.styles?.root;
 			let overlayNode;
 			if (menu?.items) overlayNode = createVNode(Menu, mergeProps(omit(menu, [
 				"classes",
@@ -109,11 +114,13 @@ const Dropdown = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs })
 				"rootClass": clsx(menu?.rootClass),
 				"classes": {
 					...menu?.classes,
+					root: menuRootClassName,
 					...menuClassNames,
 					subMenu: { ...menuClassNames }
 				},
 				"styles": {
 					...menu?.styles,
+					root: menuRootStyle,
 					...menuStyles,
 					subMenu: { ...menuStyles }
 				}

package/dist/dropdown/style/index.js

@@ -157,7 +157,7 @@ const genBaseStyle = (token) => {
 						margin: 0,
 						padding: `${unit(paddingBlock)} ${unit(controlPaddingHorizontal)}`,
 						color: token.colorText,
-						fontWeight: "normal",
+						fontWeight: 400,
 						fontSize,
 						lineHeight: token.lineHeight,
 						cursor: "pointer",

package/dist/form/ErrorList.js

@@ -1,9 +1,9 @@
+import { useFormItemPrefixContext } from "./context.js";
 import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
 import { getSlotPropsFnRun } from "../_util/tools.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
 import initCollapseMotion from "../_util/motion.js";
 import isNonNullable from "../_util/isNonNullable.js";
-import { useFormItemPrefixContext } from "./context.js";
 import style_default from "./style/index.js";
 import { Transition, TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
 import { clsx } from "@v-c/util";

package/dist/form/Form.js

@@ -1,4 +1,5 @@
 import warning from "../_util/warning.js";
+import { NoFormStyle, useFormContextProvider, useVariantContextProvider } from "./context.js";
 import { useComponentBaseConfig } from "../config-provider/context.js";
 import { useSizeProvider } from "../config-provider/SizeContext.js";
 import { useSize } from "../config-provider/hooks/useSize.js";
@@ -7,7 +8,6 @@ import { toPropsRefs } from "../_util/tools.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
 import { useDisabledContext, useDisabledContextProvider } from "../config-provider/DisabledContext.js";
 import useLocale from "../locale/useLocale.js";
-import { NoFormStyle, useFormContextProvider, useVariantContextProvider } from "./context.js";
 import { getFieldId, toArray, toNamePathStr } from "./util.js";
 import { FormHookRegistryKey, FormInstanceContextKey } from "./hooks/useForm.js";
 import style_default from "./style/index.js";

package/dist/form/FormItem/ItemHolder.js

@@ -1,6 +1,6 @@
+import { NoStyleItemContextProvider, useFormContext } from "../context.js";
 import { getAttrStyleAndClass } from "../../_util/hooks/useMergeSemantic.js";
 import isNonNullable from "../../_util/isNonNullable.js";
-import { NoStyleItemContextProvider, useFormContext } from "../context.js";
 import { getStatus } from "../util.js";
 import Row from "../../grid/row.js";
 import FormItemInput from "../FormItemInput.js";

package/dist/form/FormItem/index.js

@@ -1,8 +1,8 @@
+import { useFormContext, useFormItemProvider, useNoStyleItemContext } from "../context.js";
 import { useComponentBaseConfig } from "../../config-provider/context.js";
 import { getSlotPropsFnRun } from "../../_util/tools.js";
 import useCSSVarCls from "../../config-provider/hooks/useCSSVarCls.js";
 import { isRenderable } from "../../_util/is.js";
-import { useFormContext, useFormItemProvider, useNoStyleItemContext } from "../context.js";
 import { getFieldId, initialValueFormat, toArray, toNamePathStr } from "../util.js";
 import { useFormInstance } from "../hooks/useForm.js";
 import style_default from "../style/index.js";
@@ -355,7 +355,7 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 			const { errors: itemErrors, warnings: itemWarnings } = mergedErrorList.value;
 			if (currentFieldId && (helpNode || itemErrors.length > 0 || itemWarnings.length > 0 || hasExtra)) {
 				const describedbyArr = [];
-				if (helpNode || itemErrors.length > 0) describedbyArr.push(`${currentFieldId}_help`);
+				if (helpNode || itemErrors.length > 0 || itemWarnings.length > 0) describedbyArr.push(`${currentFieldId}_help`);
 				if (hasExtra) describedbyArr.push(`${currentFieldId}_extra`);
 				newChildProps["aria-describedby"] = describedbyArr.join(" ");
 			}

package/dist/form/FormItemInput.js

@@ -1,6 +1,6 @@
+import { FormItemPrefixContextProvider, useFormContext, useFormContextProvider } from "./context.js";
 import { getSlotPropsFnRun } from "../_util/tools.js";
 import { isRenderable } from "../_util/is.js";
-import { FormItemPrefixContextProvider, useFormContext, useFormContextProvider } from "./context.js";
 import { responsiveArrayReversed } from "../_util/responsiveObserver.js";
 import Col from "../grid/col.js";
 import ErrorList from "./ErrorList.js";

package/dist/form/FormItemLabel.js

@@ -1,9 +1,9 @@
+import { useFormContext } from "./context.js";
 import { getSlotPropsFnRun } from "../_util/tools.js";
 import InternalTooltip from "../tooltip/index.js";
 import { isRenderable } from "../_util/is.js";
 import localeValues from "../locale/en_US.js";
 import useLocale from "../locale/useLocale.js";
-import { useFormContext } from "./context.js";
 import Col from "../grid/col.js";
 import convertToTooltipProps from "../_util/convertToTooltipProps.js";
 import { Fragment, createVNode, defineComponent, mergeProps } from "vue";

package/dist/form/hooks/useVariant.js

@@ -1,5 +1,5 @@
-import { Variants, useConfig } from "../../config-provider/context.js";
 import { useVariantContext } from "../context.js";
+import { Variants, useConfig } from "../../config-provider/context.js";
 import { computed } from "vue";
 //#region src/form/hooks/useVariant.ts
 function useVariant(component, variant, legacyBordered, fallbackComponent) {

package/dist/image/hooks/useMergedPreviewConfig.d.ts

@@ -11,6 +11,7 @@ declare function useMergedPreviewConfig<T extends PreviewConfig | GroupPreviewCo
   closeIcon: import("@v-c/util").VueNode;
   rootClassName: string;
   mask: boolean;
+  maskClosable: boolean;
   blurClassName: string | undefined;
   cover?: any;
 }>;

package/dist/image/hooks/useMergedPreviewConfig.js

@@ -6,7 +6,7 @@ import { getTransitionName } from "@v-c/util/dist/utils/transition";
 //#region src/image/hooks/useMergedPreviewConfig.ts
 function useMergedPreviewConfig(previewConfig, contextPreviewConfig, prefixCls, mergedRootClassName, getContextPopupContainer, icons, defaultCover) {
 	const [zIndex] = useZIndex("ImagePreview", computed(() => previewConfig.value?.zIndex));
-	const [mergedPreviewMask, blurClassName] = useMergedMask(computed(() => previewConfig.value?.mask), computed(() => contextPreviewConfig.value?.mask), computed(() => `${prefixCls.value}-preview`));
+	const [mergedPreviewMask, blurClassName, mergedMaskClosable] = useMergedMask(computed(() => previewConfig.value?.mask), computed(() => contextPreviewConfig.value?.mask), computed(() => `${prefixCls.value}-preview`));
 	return computed(() => {
 		if (!previewConfig.value) return previewConfig.value;
 		const { cover, getContainer, closeIcon, rootClassName: previewRootClassName } = previewConfig.value;
@@ -21,6 +21,7 @@ function useMergedPreviewConfig(previewConfig, contextPreviewConfig, prefixCls,
 			closeIcon: closeIcon ?? contextCloseIcon,
 			rootClassName: clsx(mergedRootClassName.value, previewRootClassName),
 			mask: mergedPreviewMask.value,
+			maskClosable: mergedMaskClosable.value,
 			blurClassName: blurClassName.value?.mask
 		};
 	});

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import Pagination from "./pagination/Pagination.js";
 import { PaginationProps } from "./pagination/index.js";
 import Popover, { PopoverEmits, PopoverProps, PopoverRef, PopoverSlots } from "./popover/index.js";
 import Popconfirm, { PopconfirmEmits, PopconfirmProps, PopconfirmSlots } from "./popconfirm/index.js";
+import { SplitterEmits, SplitterSlots } from "./splitter/interface.js";
 import _default$11, { SpinProps, SpinRef, SpinSlots } from "./spin/index.js";
 import InternalCheckbox, { CheckboxEmits, CheckboxProps, CheckboxSlots } from "./checkbox/Checkbox.js";
 import CheckboxGroup, { CheckboxGroupEmits, CheckboxGroupProps, CheckboxGroupSlots, CheckboxOptionType } from "./checkbox/Group.js";
@@ -104,7 +105,6 @@ import SkeletonWithSubComponents, { SkeletonProps, SkeletonRef } from "./skeleto
 import Slider, { SliderEmits, SliderProps, SliderRef } from "./slider/index.js";
 import { SpaceCompactProps, SpaceCompactRef } from "./space/Compact.js";
 import Space, { SpaceAddon, SpaceCompact, SpaceProps, SpaceSize, SpaceSlots } from "./space/index.js";
-import { SplitterEmits, SplitterSlots } from "./splitter/interface.js";
 import Splitter, { SplitterRef } from "./splitter/Splitter.js";
 import { SplitterPanel, SplitterProps } from "./splitter/index.js";
 import { StatisticRef } from "./statistic/Statistic.js";

package/dist/input/Group.js

@@ -1,8 +1,8 @@
 import { devUseWarning, isDev } from "../_util/warning.js";
+import { useFormItemInputContext, useFormItemInputContextProvider } from "../form/context.js";
 import { useComponentBaseConfig } from "../config-provider/context.js";
 import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
-import { useFormItemInputContext, useFormItemInputContextProvider } from "../form/context.js";
 import style_default, { useSharedStyle } from "./style/index.js";
 import { SpaceCompact } from "../space/index.js";
 import { computed, createVNode, defineComponent, mergeProps } from "vue";

package/dist/input/Input.d.ts

@@ -3,6 +3,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import "../_util/hooks/index.js";
 import { SizeType } from "../config-provider/SizeContext.js";
 import { InputStatus } from "../_util/statusUtils.js";
+import { AllowClear } from "../_util/hooks/useAllowClear.js";
 import { ComponentBaseProps, Variant } from "../config-provider/context.js";
 import { CSSProperties, SlotsType } from "vue";
 import { InputProps as InputProps$1, InputRef as InputRef$1 } from "@v-c/input";
@@ -44,7 +45,7 @@ interface BaseVcInputProps {
   components?: InputProps$1['components'];
   prefix?: VueNode;
   suffix?: VueNode;
-  allowClear?: InputProps$1['allowClear'];
+  allowClear?: AllowClear;
   changeOnComposing?: InputProps$1['changeOnComposing'];
   autoFocus?: boolean;
   inputMode?: string;

package/dist/input/Input.js

@@ -1,4 +1,5 @@
 import { devUseWarning, isDev } from "../_util/warning.js";
+import { useFormItemInputContext } from "../form/context.js";
 import { useComponentBaseConfig } from "../config-provider/context.js";
 import { useSize } from "../config-provider/hooks/useSize.js";
 import { useCompactItemContext } from "../space/Compact.js";
@@ -8,10 +9,9 @@ import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
 import { useDisabledContext } from "../config-provider/DisabledContext.js";
 import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils.js";
-import { useFormItemInputContext } from "../form/context.js";
 import useVariant from "../form/hooks/useVariant.js";
 import style_default, { useSharedStyle } from "./style/index.js";
-import getAllowClear from "../_util/getAllowClear.js";
+import useAllowClear, { useAllowClearLabel } from "../_util/hooks/useAllowClear.js";
 import useRemovePasswordTimeout from "./hooks/useRemovePasswordTimeout.js";
 import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
@@ -83,9 +83,12 @@ const InternalInput = /* @__PURE__ */ defineComponent((props, { slots, expose, e
 	const mergedStatus = computed(() => getMergedStatus(contextStatus.value, customStatus.value));
 	const [mergedVariant, enableVariantCls] = useVariant("input", customVariant, bordered);
 	const removePasswordTimeout = useRemovePasswordTimeout(inputRef, true);
-	const mergedAllowClear = computed(() => {
-		return getAllowClear(props.allowClear ?? contextAllowClear.value);
-	});
+	const getClearLabel = useAllowClearLabel();
+	const mergedAllowClear = computed(() => useAllowClear({
+		allowClear: props.allowClear,
+		contextAllowClear: contextAllowClear.value,
+		defaultLabel: getClearLabel()
+	}));
 	const mergedAutoComplete = computed(() => props.autoComplete ?? props.autocomplete ?? contextAutoComplete.value ?? contextAutocomplete.value);
 	const mergedChangeOnComposing = computed(() => props.changeOnComposing ?? contextChangeOnComposing.value);
 	expose({

package/dist/input/OTP/OTPInput.d.ts

@@ -1,5 +1,5 @@
 import { EmptyEmit } from "../../_util/type.js";
-import { InputProps } from "../Input.js";
+import { InputEmits, InputProps } from "../Input.js";
 import { SlotsType } from "vue";
 //#region src/input/OTP/OTPInput.d.ts
 interface OTPInputProps extends Omit<InputProps, 'onChange'> {
@@ -8,6 +8,7 @@ interface OTPInputProps extends Omit<InputProps, 'onChange'> {
   value?: string;
   onChange: (index: number, value: string) => void;
   onActiveChange: (nextIndex: number) => void;
+  onFocus?: InputEmits['focus'];
   mask?: boolean | string;
 }
 declare const OTPInput: import("vue").DefineSetupFnComponent<OTPInputProps, EmptyEmit, SlotsType<{

package/dist/input/OTP/OTPInput.js

@@ -1,6 +1,6 @@
 import { getAttrStyleAndClass } from "../../_util/hooks/useMergeSemantic.js";
 import InternalInput from "../Input.js";
-import { createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
 import raf from "@v-c/util/dist/raf";
 import { omit } from "es-toolkit";
@@ -11,7 +11,7 @@ const OTPInput = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots
 	expose({
 		focus: (...args) => inputRef.value?.focus?.(...args),
 		blur: () => inputRef.value?.blur?.(),
-		input: inputRef
+		input: computed(() => inputRef.value?.input ?? null)
 	});
 	const syncSelection = () => {
 		raf(() => {
@@ -22,6 +22,10 @@ const OTPInput = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots
 	const handleChange = (e) => {
 		props.onChange(props.index, e?.target?.value ?? "");
 	};
+	const handleInternalFocus = (e) => {
+		props.onFocus?.(e);
+		syncSelection();
+	};
 	const handleKeyDown = (event) => {
 		const { key, ctrlKey, metaKey } = event;
 		if (key === "ArrowLeft") props.onActiveChange(props.index - 1);
@@ -36,6 +40,7 @@ const OTPInput = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots
 		"index",
 		"onChange",
 		"onActiveChange",
+		"onFocus",
 		"mask"
 	]);
 	return () => createVNode("span", {
@@ -53,7 +58,7 @@ const OTPInput = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots
 		"onChange": handleChange,
 		"htmlSize": 1,
 		"onKeydown": handleKeyDown,
-		"onFocus": () => syncSelection(),
+		"onFocus": handleInternalFocus,
 		"onMousedown": () => syncSelection(),
 		"onMouseup": () => syncSelection(),
 		"aria-label": `OTP Input ${props.index + 1}`
@@ -80,6 +85,10 @@ const OTPInput = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots
 			type: Function,
 			required: true
 		},
+		onFocus: {
+			type: Function,
+			required: false
+		},
 		mask: {
 			type: [Boolean, String],
 			required: false,

package/dist/input/OTP/index.d.ts

@@ -18,7 +18,7 @@ interface OTPSemanticStyles {
 }
 type OTPClassNamesType = SemanticClassNamesType<OTPProps, OTPSemanticClassNames>;
 type OTPStylesType = SemanticStylesType<OTPProps, OTPSemanticStyles>;
-interface OTPProps extends ComponentBaseProps, Omit<HTMLAttributes, 'onChange' | 'onInput'>, OTPEmitsProps {
+interface OTPProps extends ComponentBaseProps, Omit<HTMLAttributes, 'onChange' | 'onInput' | 'onFocus'>, OTPEmitsProps {
   length?: number;
   variant?: Variant;
   size?: SizeType;
@@ -39,9 +39,11 @@ interface OTPEmits {
   'change': (value: string) => void;
   'input': (cells: string[]) => void;
   'update:value': (value: string) => void;
+  'focus': (ev: FocusEvent) => void;
 }
 interface OTPEmitsProps {
   onChange?: OTPEmits['change'];
+  onFocus?: OTPEmits['focus'];
   onInput?: OTPEmits['input'];
   'onUpdate:value'?: OTPEmits['update:value'];
 }

package/dist/input/OTP/index.js

@@ -1,10 +1,11 @@
 import { devUseWarning, isDev } from "../../_util/warning.js";
+import { useFormItemInputContext, useFormItemInputContextProvider } from "../../form/context.js";
 import { useComponentBaseConfig } from "../../config-provider/context.js";
 import { useSize } from "../../config-provider/hooks/useSize.js";
 import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../../_util/hooks/useMergeSemantic.js";
 import { toPropsRefs } from "../../_util/tools.js";
+import { isRenderable } from "../../_util/is.js";
 import { getMergedStatus } from "../../_util/statusUtils.js";
-import { useFormItemInputContext, useFormItemInputContextProvider } from "../../form/context.js";
 import useVariant from "../../form/hooks/useVariant.js";
 import otp_default from "../style/otp.js";
 import OTPInput from "./OTPInput.js";
@@ -55,7 +56,6 @@ const OTP = /* @__PURE__ */ defineComponent((props, { attrs, emit, slots }) => {
 		for (let i = 0; i < index; i += 1) if (!nextCells[i]) nextCells[i] = "";
 		if (txt.length <= 1) nextCells[index] = txt;
 		else nextCells = nextCells.slice(0, index).concat(strToArr(txt));
-		nextCells = nextCells.slice(0, mergedLength.value);
 		for (let i = nextCells.length - 1; i >= 0; i -= 1) {
 			if (nextCells[i]) break;
 			nextCells.pop();
@@ -64,21 +64,28 @@ const OTP = /* @__PURE__ */ defineComponent((props, { attrs, emit, slots }) => {
 		return strToArr(formattedValue).map((cell, i) => {
 			if (cell === " " && !nextCells[i]) return nextCells[i];
 			return cell;
-		});
+		}).slice(0, mergedLength.value);
 	};
 	const handleInputChange = (index, txt) => {
 		const nextCells = patchValue(index, txt);
+		triggerValueCellsChange(nextCells);
 		const nextIndex = Math.min(index + txt.length, mergedLength.value - 1);
 		if (nextIndex !== index && nextCells[index] !== void 0) inputRefs.value[nextIndex]?.focus?.();
-		triggerValueCellsChange(nextCells);
 	};
 	const handleActiveChange = (nextIndex) => {
 		inputRefs.value[nextIndex]?.focus?.();
 	};
+	const handleInputFocus = (event, index) => {
+		for (let i = 0; i < index; i += 1) if (!valueCells.value[i]) {
+			inputRefs.value[i]?.focus();
+			break;
+		}
+		emit("focus", event);
+	};
 	const renderSeparator = (index) => {
 		const separator = slots.separator || props.separator;
 		const separatorNode = typeof separator === "function" ? separator({ index }) : separator;
-		if (!separatorNode) return null;
+		if (!isRenderable(separatorNode)) return null;
 		return createVNode("span", {
 			"key": `otp-sep-${index}`,
 			"class": clsx(`${prefixCls.value}-separator`, mergedClassNames.value.separator),
@@ -105,6 +112,7 @@ const OTP = /* @__PURE__ */ defineComponent((props, { attrs, emit, slots }) => {
 			"value": valueCells.value[index] || "",
 			"onChange": handleInputChange,
 			"onActiveChange": handleActiveChange,
+			"onFocus": (event) => handleInputFocus(event, index),
 			"autoFocus": index === 0 ? props.autoFocus : void 0,
 			"mask": props.mask,
 			"type": props.type,
@@ -202,7 +210,8 @@ const OTP = /* @__PURE__ */ defineComponent((props, { attrs, emit, slots }) => {
 	emits: [
 		"change",
 		"input",
-		"update:value"
+		"update:value",
+		"focus"
 	],
 	name: "AInputOtp",
 	inheritAttrs: false

package/dist/input/Password.js

@@ -21,10 +21,10 @@ const InternalPassword = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 	const inputRef = shallowRef();
 	const removePasswordTimeout = useRemovePasswordTimeout(inputRef);
 	const visibilityToggle = computed(() => props.visibilityToggle ?? true);
-	const visibilityControlled = computed(() => typeof visibilityToggle.value === "object" && visibilityToggle.value.visible !== void 0);
-	const visible = shallowRef(visibilityControlled.value ? Boolean(visibilityToggle.value.visible) : false);
-	watch(visibilityToggle, (next) => {
-		if (visibilityControlled.value) visible.value = Boolean(next.visible);
+	const visibilityControlled = computed(() => props.iconVisible !== void 0 || typeof visibilityToggle.value === "object" && visibilityToggle.value.visible !== void 0);
+	const visible = shallowRef(props.iconVisible ?? (visibilityControlled.value ? Boolean(visibilityToggle.value.visible) : false));
+	watch([visibilityToggle, () => props.iconVisible], ([toggle, iconVisible]) => {
+		if (visibilityControlled.value) visible.value = iconVisible ?? Boolean(toggle.visible);
 	});
 	const triggerVisibleChange = () => {
 		if (mergedDisabled.value || visibilityToggle.value === false) return;
@@ -32,6 +32,7 @@ const InternalPassword = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 		const next = !visible.value;
 		if (!visibilityControlled.value) visible.value = next;
 		if (typeof visibilityToggle.value === "object") visibilityToggle.value.onVisibleChange?.(next);
+		emit("update:iconVisible", next);
 	};
 	const action = computed(() => props.action ?? "click");
 	const iconRender = (visible) => {
@@ -84,7 +85,8 @@ const InternalPassword = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 			"suffix",
 			"inputPrefixCls",
 			"rootClass",
-			"prefixCls"
+			"prefixCls",
+			"iconVisible"
 		]);
 		const suffixSlot = getSlotPropsFnRun(slots, props, "suffix");
 		const visibilityIcon = getIcon();

package/dist/input/Search.js

@@ -2,6 +2,7 @@ import { useComponentBaseConfig } from "../config-provider/context.js";
 import { useSize } from "../config-provider/hooks/useSize.js";
 import { useCompactItemContext } from "../space/Compact.js";
 import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import fallbackProp from "../_util/fallbackProp.js";
 import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
 import { useDisabledContext } from "../config-provider/DisabledContext.js";
 import button_default from "../button/index.js";
@@ -31,7 +32,7 @@ const omitInputKeys = [
 const InternalSearch = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
 	const composedRef = shallowRef(false);
 	const inputRef = shallowRef();
-	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, getPrefixCls } = useComponentBaseConfig("inputSearch", props, void 0, "input-search");
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, searchIcon: contextSearchIcon, getPrefixCls } = useComponentBaseConfig("inputSearch", props, ["searchIcon"], "input-search");
 	const inputPrefixCls = computed(() => getPrefixCls("input", props.inputPrefixCls));
 	const { classes, styles, size: customizeSize, disabled: customDisabled, variant: customizeVariant, bordered } = toPropsRefs(props, "classes", "styles", "size", "disabled", "variant", "bordered");
 	const contextDisabled = useDisabledContext();
@@ -102,7 +103,7 @@ const InternalSearch = /* @__PURE__ */ defineComponent((props, { slots, attrs, e
 		const enterButtonValue = props.enterButton ?? false;
 		const isBooleanEnterButton = typeof enterButtonValue === "boolean";
 		const searchIconFromSlot = getSlotPropsFnRun(slots, props, "searchIcon", false);
-		const searchIcon = isBooleanEnterButton ? searchIconFromSlot ?? props.searchIcon ?? createVNode(SearchOutlined, null, null) : null;
+		const searchIcon = isBooleanEnterButton ? fallbackProp(searchIconFromSlot, contextSearchIcon.value, createVNode(SearchOutlined, null, null)) : null;
 		const buttonChildren = isBooleanEnterButton ? void 0 : enterButtonValue;
 		let buttonNode;
 		const enterButtonNode = buttonChildren;
@@ -140,6 +141,7 @@ const InternalSearch = /* @__PURE__ */ defineComponent((props, { slots, attrs, e
 			"class": mergedClassName,
 			"style": mergedRootStyle
 		}, { hidden: props.hidden }, rootAttrs, { "size": mergedSize.value }), { default: () => [createVNode(InternalInput, mergeProps(inputAttrs, restInputProps, {
+			"type": "search",
 			"ref": inputRef,
 			"prefixCls": inputPrefixCls.value,
 			"size": mergedSize.value,