perf: ts type, close #5044

components/_util/hooks/useConfigInject.ts

@@ -1,8 +1,9 @@
 import type { RequiredMark } from '../../form/Form';
-import type { ComputedRef, UnwrapRef, VNodeChild } from 'vue';
+import type { ComputedRef, UnwrapRef } from 'vue';
 import { computed, inject } from 'vue';
 import type { ConfigProviderProps, Direction, SizeType } from '../../config-provider';
 import { defaultConfigProvider } from '../../config-provider';
+import type { VueNode } from '../type';
 
 export default (
   name: string,
@@ -20,7 +21,7 @@ export default (
     requiredMark?: RequiredMark;
   }>;
   autoInsertSpaceInButton: ComputedRef<boolean>;
-  renderEmpty?: ComputedRef<(componentName?: string) => VNodeChild | JSX.Element>;
+  renderEmpty?: ComputedRef<(componentName?: string) => VueNode>;
   virtual: ComputedRef<boolean>;
   dropdownMatchSelectWidth: ComputedRef<boolean | number>;
   getPopupContainer: ComputedRef<ConfigProviderProps['getPopupContainer']>;

components/_util/type.ts

@@ -1,4 +1,4 @@
-import type { App, PropType, VNodeChild, Plugin, Ref } from 'vue';
+import type { App, PropType, Plugin, Ref, VNode } from 'vue';
 
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
 export const tuple = <T extends string[]>(...args: T) => args;
@@ -29,7 +29,8 @@ export interface PropOptions<T = any, D = T> {
   validator?(value: unknown): boolean;
 }
 
-export type VueNode = VNodeChild | JSX.Element;
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+export type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element;
 
 export const withInstall = <T>(comp: T) => {
   const c = comp as any;

components/_util/vue-types/index.ts

@@ -26,7 +26,7 @@ PropTypes.extend([
     default: undefined,
   },
   {
-    name: 'VNodeChild',
+    name: 'VueNode',
     getter: true,
     type: null,
   },
@@ -39,5 +39,5 @@ export function withUndefined<T extends { default?: any }>(type: T): T {
 export default PropTypes as VueTypesInterface & {
   readonly looseBool: VueTypeValidableDef<boolean>;
   readonly style: VueTypeValidableDef<CSSProperties>;
-  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+  readonly VueNode: VueTypeValidableDef<VueNode>;
 };

components/alert/index.tsx

@@ -45,19 +45,19 @@ const alertProps = {
   /** Whether Alert can be closed */
   closable: PropTypes.looseBool,
   /** Close text to show */
-  closeText: PropTypes.VNodeChild,
+  closeText: PropTypes.any,
   /** Content of Alert */
-  message: PropTypes.VNodeChild,
+  message: PropTypes.any,
   /** Additional content of Alert */
-  description: PropTypes.VNodeChild,
+  description: PropTypes.any,
   /** Trigger when animation ending of Alert */
   afterClose: PropTypes.func.def(noop),
   /** Whether to show icon */
   showIcon: PropTypes.looseBool,
   prefixCls: PropTypes.string,
   banner: PropTypes.looseBool,
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
-  onClose: PropTypes.VNodeChild,
+  onClose: PropTypes.any,
 };
 
 export type AlertProps = Partial<ExtractPropTypes<typeof alertProps>>;

components/anchor/AnchorLink.tsx

@@ -9,7 +9,7 @@ import { useInjectAnchor } from './context';
 const anchorLinkProps = {
   prefixCls: PropTypes.string,
   href: PropTypes.string.def('#'),
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
   target: PropTypes.string,
 };
 

components/avatar/Avatar.tsx

@@ -23,7 +23,7 @@ export const avatarProps = {
   src: PropTypes.string,
   /** Srcset of image avatar */
   srcset: PropTypes.string,
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
   alt: PropTypes.string,
   gap: PropTypes.number,
   draggable: PropTypes.bool,

components/badge/Badge.tsx

@@ -26,7 +26,7 @@ export const badgeProps = {
   // sync antd@4.6.0
   size: PropTypes.oneOf(tuple('default', 'small')).def('default'),
   color: PropTypes.string,
-  text: PropTypes.VNodeChild,
+  text: PropTypes.any,
   offset: PropTypes.arrayOf(PropTypes.oneOfType([String, Number])),
   numberStyle: PropTypes.style,
   title: PropTypes.string,

components/button/buttonTypes.ts

@@ -36,7 +36,7 @@ const buttonProps = () => ({
   ghost: PropTypes.looseBool,
   block: PropTypes.looseBool,
   danger: PropTypes.looseBool,
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
   href: PropTypes.string,
   target: PropTypes.string,
   title: PropTypes.string,

components/carousel/index.tsx

@@ -20,8 +20,8 @@ export const CarouselProps = {
   // style: PropTypes.React.CSSProperties,
   prefixCls: PropTypes.string,
   accessibility: PropTypes.looseBool,
-  nextArrow: PropTypes.VNodeChild,
+  nextArrow: PropTypes.any,
-  prevArrow: PropTypes.VNodeChild,
+  prevArrow: PropTypes.any,
   pauseOnHover: PropTypes.looseBool,
   // className: PropTypes.string,
   adaptiveHeight: PropTypes.looseBool,

components/cascader/index.tsx

@@ -133,7 +133,7 @@ const cascaderProps = {
     type: [Boolean, Object] as PropType<boolean | ShowSearchType | undefined>,
     default: undefined as PropType<boolean | ShowSearchType | undefined>,
   },
-  notFoundContent: PropTypes.VNodeChild,
+  notFoundContent: PropTypes.any,
   loadData: PropTypes.func,
   /** 次级菜单的展开方式，可选 'click' 和 'hover' */
   expandTrigger: PropTypes.oneOf(tuple('click', 'hover')),
@@ -147,7 +147,7 @@ const cascaderProps = {
   popupVisible: PropTypes.looseBool,
   fieldNames: { type: Object as PropType<FieldNamesType> },
   autofocus: PropTypes.looseBool,
-  suffixIcon: PropTypes.VNodeChild,
+  suffixIcon: PropTypes.any,
   showSearchRender: PropTypes.any,
   onChange: PropTypes.func,
   onPopupVisibleChange: PropTypes.func,

components/comment/index.tsx

@@ -1,22 +1,22 @@
 import type { ExtractPropTypes } from 'vue';
 import { defineComponent } from 'vue';
-import PropsTypes from '../_util/vue-types';
+import PropTypes from '../_util/vue-types';
 import { flattenChildren } from '../_util/props-util';
 import type { VueNode } from '../_util/type';
 import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 export const commentProps = {
-  actions: PropsTypes.array,
+  actions: PropTypes.array,
   /** The element to display as the comment author. */
-  author: PropsTypes.VNodeChild,
+  author: PropTypes.any,
   /** The element to display as the comment avatar - generally an antd Avatar */
-  avatar: PropsTypes.VNodeChild,
+  avatar: PropTypes.any,
   /** The main content of the comment */
-  content: PropsTypes.VNodeChild,
+  content: PropTypes.any,
   /** Comment prefix defaults to '.ant-comment' */
-  prefixCls: PropsTypes.string,
+  prefixCls: PropTypes.string,
   /** A datetime element containing the time to be displayed */
-  datetime: PropsTypes.VNodeChild,
+  datetime: PropTypes.any,
 };
 
 export type CommentProps = Partial<ExtractPropTypes<typeof commentProps>>;

components/config-provider/renderEmpty.tsx

@@ -1,7 +1,7 @@
-import type { VNodeChild } from 'vue';
 import { inject } from 'vue';
 import Empty from '../empty';
 import { defaultConfigProvider } from '.';
+import type { VueNode } from '../_util/type';
 
 export interface RenderEmptyProps {
   componentName?: string;
@@ -31,7 +31,7 @@ const RenderEmpty = (props: RenderEmptyProps) => {
   return renderHtml(props.componentName);
 };
 
-function renderEmpty(componentName?: string): VNodeChild | JSX.Element {
+function renderEmpty(componentName?: string): VueNode {
   return <RenderEmpty componentName={componentName} />;
 }
 

components/descriptions/index.tsx

@@ -28,7 +28,7 @@ export const DescriptionsItemProps = {
 
 const descriptionsItemProp = {
   prefixCls: PropTypes.string,
-  label: PropTypes.VNodeChild,
+  label: PropTypes.any,
   labelStyle: PropTypes.style,
   contentStyle: PropTypes.style,
   span: PropTypes.number.def(1),
@@ -125,8 +125,8 @@ const descriptionsProps = {
   prefixCls: PropTypes.string,
   bordered: PropTypes.looseBool,
   size: PropTypes.oneOf(tuple('default', 'middle', 'small')).def('default'),
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
-  extra: PropTypes.VNodeChild,
+  extra: PropTypes.any,
   column: {
     type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
     default: (): number | Partial<Record<Breakpoint, number>> => DEFAULT_COLUMN_MAP,

components/drawer/index.tsx

@@ -35,7 +35,7 @@ const defaultPushState: PushState = { distance: 180 };
 const drawerProps = () => ({
   autofocus: PropTypes.looseBool,
   closable: PropTypes.looseBool,
-  closeIcon: PropTypes.VNodeChild,
+  closeIcon: PropTypes.any,
   destroyOnClose: PropTypes.looseBool,
   forceRender: PropTypes.looseBool,
   getContainer: PropTypes.any,
@@ -55,7 +55,7 @@ const drawerProps = () => ({
   headerStyle: PropTypes.object,
   bodyStyle: PropTypes.object,
   contentWrapperStyle: PropTypes.object,
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
   visible: PropTypes.looseBool,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -64,12 +64,12 @@ const drawerProps = () => ({
   push: PropTypes.oneOfType([PropTypes.looseBool, { type: Object as PropType<PushState> }]),
   placement: PropTypes.oneOf(PlacementTypes),
   keyboard: PropTypes.looseBool,
-  extra: PropTypes.VNodeChild,
+  extra: PropTypes.any,
-  footer: PropTypes.VNodeChild,
+  footer: PropTypes.any,
   footerStyle: PropTypes.object,
   level: PropTypes.any,
   levelMove: PropTypes.any,
-  handle: PropTypes.VNodeChild,
+  handle: PropTypes.any,
   /** @deprecated Use `@afterVisibleChange` instead */
   afterVisibleChange: PropTypes.func,
 });

components/form/FormItem.tsx

@@ -76,9 +76,9 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
 export const formItemProps = {
   htmlFor: PropTypes.string,
   prefixCls: PropTypes.string,
-  label: PropTypes.VNodeChild,
+  label: PropTypes.any,
-  help: PropTypes.VNodeChild,
+  help: PropTypes.any,
-  extra: PropTypes.VNodeChild,
+  extra: PropTypes.any,
   labelCol: { type: Object as PropType<ColProps> },
   wrapperCol: { type: Object as PropType<ColProps> },
   hasFeedback: PropTypes.looseBool.def(false),

components/layout/Sider.tsx

@@ -30,7 +30,7 @@ export const siderProps = {
   defaultCollapsed: PropTypes.looseBool,
   reverseArrow: PropTypes.looseBool,
   zeroWidthTriggerStyle: PropTypes.style,
-  trigger: PropTypes.VNodeChild,
+  trigger: PropTypes.any,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl')),

components/menu/src/ItemGroup.tsx

@@ -6,7 +6,7 @@ import { useInjectMenu } from './hooks/useMenuContext';
 import { useMeasure } from './hooks/useKeyPath';
 
 const menuItemGroupProps = {
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
 };
 
 export type MenuItemGroupProps = Partial<ExtractPropTypes<typeof menuItemGroupProps>>;

components/menu/src/MenuItem.tsx

@@ -19,7 +19,7 @@ const menuItemProps = {
   disabled: Boolean,
   danger: Boolean,
   title: { type: [String, Boolean], default: undefined },
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
 };
 
 export type MenuItemProps = Partial<ExtractPropTypes<typeof menuItemProps>>;

components/menu/src/SubMenu.tsx

@@ -23,8 +23,8 @@ import isValid from '../../_util/isValid';
 let indexGuid = 0;
 
 const subMenuProps = {
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
   disabled: Boolean,
   level: Number,
   popupClassName: String,

components/page-header/index.tsx

@@ -14,14 +14,14 @@ import classNames from '../_util/classNames';
 import ResizeObserver from '../vc-resize-observer';
 
 export const pageHeaderProps = {
-  backIcon: PropTypes.VNodeChild,
+  backIcon: PropTypes.any,
   prefixCls: PropTypes.string,
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
-  subTitle: PropTypes.VNodeChild,
+  subTitle: PropTypes.any,
   breadcrumb: PropTypes.object,
   tags: PropTypes.any,
-  footer: PropTypes.VNodeChild,
+  footer: PropTypes.any,
-  extra: PropTypes.VNodeChild,
+  extra: PropTypes.any,
   avatar: PropTypes.object,
   ghost: PropTypes.looseBool,
   onBack: PropTypes.func,

components/progress/Steps.tsx

@@ -1,5 +1,6 @@
-import type { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
+import type { VueNode } from '../_util/type';
 import PropTypes from '../_util/vue-types';
 import type { ProgressSize } from './props';
 import { progressProps } from './props';
@@ -25,7 +26,7 @@ export default defineComponent({
     const styledSteps = computed(() => {
       const { steps, strokeWidth = 8, strokeColor, trailColor, prefixCls } = props;
 
-      const temp: VNodeChild[] = [];
+      const temp: VueNode[] = [];
       for (let i = 0; i < steps; i += 1) {
         const cls = {
           [`${prefixCls}-steps-item`]: true,

components/progress/progress.tsx

@@ -1,4 +1,3 @@
-import type { VNodeChild } from 'vue';
 import { computed, defineComponent } from 'vue';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
@@ -12,6 +11,7 @@ import { getSuccessPercent, validProgress } from './utils';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import devWarning from '../vc-util/devWarning';
 import { progressProps, progressStatuses } from './props';
+import type { VueNode } from '../_util/type';
 
 export default defineComponent({
   name: 'AProgress',
@@ -67,7 +67,7 @@ export default defineComponent({
       const successPercent = getSuccessPercent(props);
       if (!showInfo) return null;
 
-      let text: VNodeChild;
+      let text: VueNode;
       const textFormatter = format || slots?.format || ((val: number) => `${val}%`);
       const isLineType = type === 'line';
       if (
@@ -92,7 +92,7 @@ export default defineComponent({
       const { type, steps, strokeColor } = props;
       const progressInfo = renderProcessInfo();
 
-      let progress: VNodeChild;
+      let progress: VueNode;
       // Render progress shape
       if (type === 'line') {
         progress = steps ? (

components/progress/props.ts

@@ -1,6 +1,7 @@
 import PropTypes from '../_util/vue-types';
+import type { VueNode } from '../_util/type';
 import { tuple } from '../_util/type';
-import type { PropType, VNodeChild, ExtractPropTypes } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
 
 export const progressStatuses = tuple('normal', 'exception', 'active', 'success');
 export type ProgressStatusesType = typeof progressStatuses[number];
@@ -21,7 +22,7 @@ export const progressProps = () => ({
   prefixCls: PropTypes.string,
   type: PropTypes.oneOf(ProgressType),
   percent: PropTypes.number,
-  format: { type: Function as PropType<(percent?: number, successPercent?: number) => VNodeChild> },
+  format: { type: Function as PropType<(percent?: number, successPercent?: number) => VueNode> },
   status: PropTypes.oneOf(progressStatuses),
   showInfo: PropTypes.looseBool,
   strokeWidth: PropTypes.number,

components/statistic/Statistic.tsx

@@ -19,9 +19,9 @@ export const statisticProps = {
   valueRender: PropTypes.any,
   formatter: PropTypes.any,
   precision: PropTypes.number,
-  prefix: PropTypes.VNodeChild,
+  prefix: PropTypes.any,
-  suffix: PropTypes.VNodeChild,
+  suffix: PropTypes.any,
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
   onFinish: PropTypes.func,
   loading: PropTypes.looseBool,
 };

components/switch/index.tsx

@@ -18,8 +18,8 @@ const switchProps = {
   prefixCls: PropTypes.string,
   size: PropTypes.oneOf(SwitchSizes),
   disabled: PropTypes.looseBool,
-  checkedChildren: PropTypes.VNodeChild,
+  checkedChildren: PropTypes.any,
-  unCheckedChildren: PropTypes.VNodeChild,
+  unCheckedChildren: PropTypes.any,
   tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   autofocus: PropTypes.looseBool,
   loading: PropTypes.looseBool,

components/tag/index.tsx

@@ -19,12 +19,12 @@ const tagProps = {
     type: String as PropType<LiteralUnion<PresetColorType | PresetStatusColorType, string>>,
   },
   closable: PropTypes.looseBool.def(false),
-  closeIcon: PropTypes.VNodeChild,
+  closeIcon: PropTypes.any,
   visible: PropTypes.looseBool,
   onClose: {
     type: Function as PropType<(e: MouseEvent) => void>,
   },
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
 };
 
 export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<typeof tagProps>>;

components/vc-image/src/Image.tsx

@@ -34,7 +34,7 @@ export const imageProps = {
   wrapperStyle: PropTypes.style,
   prefixCls: PropTypes.string,
   previewPrefixCls: PropTypes.string,
-  placeholder: PropTypes.VNodeChild,
+  placeholder: PropTypes.any,
   fallback: PropTypes.string,
   preview: PropTypes.oneOfType([
     PropTypes.looseBool,

components/vc-picker/panels/PanelBody.tsx

@@ -14,7 +14,7 @@ export type PanelBodyProps<DateType> = {
   picker?: PanelMode;
 
   // By panel
-  headerCells?: VueNode;
+  headerCells?: VueNode[];
   rowNum: number;
   colNum: number;
   baseDate: DateType;

components/vc-select/SelectTrigger.tsx

@@ -3,11 +3,12 @@ import PropTypes from '../_util/vue-types';
 import { getSlot } from '../_util/props-util';
 import classNames from '../_util/classNames';
 import createRef from '../_util/createRef';
-import type { CSSProperties, VNodeChild } from 'vue';
+import type { CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
 import type { RenderDOMFunc } from './interface';
 import type { DropdownRender } from './interface/generator';
 import type { Placement } from './generate';
+import type { VueNode } from '../_util/type';
 
 const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
   // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
@@ -52,7 +53,7 @@ export interface SelectTriggerProps {
   prefixCls: string;
   disabled: boolean;
   visible: boolean;
-  popupElement: VNodeChild | JSX.Element;
+  popupElement: VueNode;
   animation?: string;
   transitionName?: string;
   containerWidth: number;

components/vc-select/Selector/Input.tsx

@@ -1,16 +1,17 @@
 import { cloneElement } from '../../_util/vnode';
-import type { VNode, VNodeChild } from 'vue';
+import type { VNode } from 'vue';
 import { defineComponent, getCurrentInstance, inject, onMounted, withDirectives } from 'vue';
 import PropTypes from '../../_util/vue-types';
 import type { RefObject } from '../../_util/createRef';
 import antInput from '../../_util/antInputDirective';
 import classNames from '../../_util/classNames';
 import type { EventHandler } from '../../_util/EventInterface';
+import type { VueNode } from '../../_util/type';
 
 interface InputProps {
   prefixCls: string;
   id: string;
-  inputElement: VNodeChild;
+  inputElement: VueNode;
   disabled: boolean;
   autofocus: boolean;
   autocomplete: string;

components/vc-select/Selector/MultipleSelector.tsx

@@ -9,7 +9,7 @@ import type {
 import type { RenderNode } from '../interface';
 import type { InnerSelectorProps } from './interface';
 import Input from './Input';
-import type { VNodeChild, Ref, PropType } from 'vue';
+import type { Ref, PropType } from 'vue';
 import { computed, defineComponent, onMounted, ref, watch } from 'vue';
 import classNames from '../../_util/classNames';
 import pickAttrs from '../../_util/pickAttrs';
@@ -24,9 +24,9 @@ type SelectorProps = InnerSelectorProps & {
   // Tags
   maxTagCount?: number | 'responsive';
   maxTagTextLength?: number;
-  maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
+  maxTagPlaceholder?: VueNode | ((omittedValues: LabelValueType[]) => VueNode);
   tokenSeparators?: string[];
-  tagRender?: (props: CustomTagProps) => VNodeChild;
+  tagRender?: (props: CustomTagProps) => VueNode;
   onToggleOpen: any;
 
   // Motion
@@ -52,7 +52,7 @@ const props = {
   accessibilityIndex: PropTypes.number,
   tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  removeIcon: PropTypes.VNodeChild,
+  removeIcon: PropTypes.any,
   choiceTransitionName: PropTypes.string,
 
   maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

components/vc-select/Selector/SingleSelector.tsx

@@ -1,13 +1,13 @@
 import pickAttrs from '../../_util/pickAttrs';
 import Input from './Input';
 import type { InnerSelectorProps } from './interface';
-import type { VNodeChild } from 'vue';
 import { Fragment, computed, defineComponent, ref, watch } from 'vue';
 import PropTypes from '../../_util/vue-types';
 import { useInjectTreeSelectContext } from '../../vc-tree-select/Context';
+import type { VueNode } from '../../_util/type';
 
 interface SelectorProps extends InnerSelectorProps {
-  inputElement: VNodeChild;
+  inputElement: VueNode;
   activeValue: string;
   backfill?: boolean;
 }

components/vc-select/Selector/index.tsx

@@ -14,7 +14,7 @@ import SingleSelector from './SingleSelector';
 import type { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator';
 import type { RenderNode, Mode } from '../interface';
 import useLock from '../hooks/useLock';
-import type { VNodeChild, PropType } from 'vue';
+import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import createRef from '../../_util/createRef';
 import PropTypes from '../../_util/vue-types';
@@ -38,14 +38,14 @@ export interface SelectorProps {
   accessibilityIndex: number;
   tabindex?: number | string;
   disabled?: boolean;
-  placeholder?: VNodeChild;
+  placeholder?: VueNode;
   removeIcon?: RenderNode;
 
   // Tags
   maxTagCount?: number | 'responsive';
   maxTagTextLength?: number;
-  maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
+  maxTagPlaceholder?: VueNode | ((omittedValues: LabelValueType[]) => VueNode);
-  tagRender?: (props: CustomTagProps) => VNodeChild;
+  tagRender?: (props: CustomTagProps) => VueNode;
 
   /** Check if `tokenSeparators` contains `\n` or `\r\n` */
   tokenWithEnter?: boolean;

components/vc-select/Selector/interface.ts

@@ -1,15 +1,15 @@
 import type { RefObject } from '../../_util/createRef';
-import type { VNodeChild } from 'vue';
 import type { Mode } from '../interface';
 import type { LabelValueType } from '../interface/generator';
 import type { EventHandler } from '../../_util/EventInterface';
+import type { VueNode } from '../../_util/type';
 
 export interface InnerSelectorProps {
   prefixCls: string;
   id: string;
   mode: Mode;
   inputRef: RefObject;
-  placeholder?: VNodeChild;
+  placeholder?: VueNode;
   disabled?: boolean;
   autofocus?: boolean;
   autocomplete?: string;

components/vc-select/TransBtn.tsx

@@ -1,9 +1,10 @@
-import type { FunctionalComponent, VNodeChild } from 'vue';
+import type { FunctionalComponent } from 'vue';
+import type { VueNode } from '../_util/type';
 import PropTypes from '../_util/vue-types';
 
 export interface TransBtnProps {
   class: string;
-  customizeIcon: VNodeChild | ((props?: any) => VNodeChild);
+  customizeIcon: VueNode | ((props?: any) => VueNode);
   customizeIconProps?: any;
   onMousedown?: (payload: MouseEvent) => void;
   onClick?: (payload: MouseEvent) => void;
@@ -15,7 +16,7 @@ export interface TransBtnType extends FunctionalComponent<TransBtnProps> {
 
 const TransBtn: TransBtnType = (props, { slots }) => {
   const { class: className, customizeIcon, customizeIconProps, onMousedown, onClick } = props;
-  let icon: VNodeChild;
+  let icon: VueNode;
 
   if (typeof customizeIcon === 'function') {
     icon = customizeIcon(customizeIconProps);

components/vc-select/generate.tsx

@@ -36,7 +36,7 @@ import { getSeparatedContent } from './utils/valueUtil';
 import useSelectTriggerControl from './hooks/useSelectTriggerControl';
 import useCacheDisplayValue from './hooks/useCacheDisplayValue';
 import useCacheOptions from './hooks/useCacheOptions';
-import type { CSSProperties, PropType, VNode, VNodeChild } from 'vue';
+import type { CSSProperties, PropType, VNode } from 'vue';
 import {
   getCurrentInstance,
   computed,
@@ -54,6 +54,7 @@ import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
 import isMobile from '../vc-util/isMobile';
 import { getTextFromElement } from '../_util/props-util';
+import type { VueNode } from '../_util/type';
 
 const DEFAULT_OMIT_PROPS = [
   'children',
@@ -116,9 +117,9 @@ export function selectBaseProps<OptionType, ValueType>() {
     allowClear: { type: Boolean, default: undefined },
     clearIcon: PropTypes.any,
     showArrow: { type: Boolean, default: undefined },
-    inputIcon: PropTypes.VNodeChild,
+    inputIcon: PropTypes.any,
-    removeIcon: PropTypes.VNodeChild,
+    removeIcon: PropTypes.any,
-    menuItemSelectedIcon: PropTypes.VNodeChild,
+    menuItemSelectedIcon: PropTypes.any,
 
     // Dropdown
     open: { type: Boolean, default: undefined },
@@ -232,7 +233,7 @@ export interface GenerateConfig<OptionType extends object> {
     // >;
   };
   /** Convert jsx tree into `OptionType[]` */
-  convertChildrenToData: (children: VNodeChild | JSX.Element) => OptionType[];
+  convertChildrenToData: (children: VueNode) => OptionType[];
   /** Flatten nest options into raw option list */
   flattenOptions: (options: OptionType[], props: any) => FlattenOptionsType<OptionType>;
   /** Convert single raw value into { label, value } format. Will be called by each value */
@@ -392,7 +393,7 @@ export default function generateSelector<
       const mergedOptions = computed((): OptionType[] => {
         let newOptions = props.options;
         if (newOptions === undefined) {
-          newOptions = convertChildrenToData(props.children as VNodeChild);
+          newOptions = convertChildrenToData(props.children as VueNode);
         }
 
         /**
@@ -1057,7 +1058,7 @@ export default function generateSelector<
         } = { ...props, ...attrs }; //as SelectProps<OptionType[], ValueType>;
         // ============================= Input ==============================
         // Only works in `combobox`
-        const customizeInputElement: VNodeChild | JSX.Element =
+        const customizeInputElement: VueNode =
           (mode === 'combobox' && getInputElement && getInputElement()) || null;
 
         const domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;

components/vc-select/interface/index.ts

@@ -1,9 +1,10 @@
-import type { VNode, VNodeChild, CSSProperties } from 'vue';
+import type { VueNode } from '../../_util/type';
+import type { VNode, CSSProperties } from 'vue';
 import type { Key, RawValueType } from './generator';
 
 export type RenderDOMFunc = (props: any) => HTMLElement;
 
-export type RenderNode = VNodeChild | ((props: any) => VNodeChild);
+export type RenderNode = VueNode | ((props: any) => VueNode);
 
 export type Mode = 'multiple' | 'tags' | 'combobox';
 
@@ -28,7 +29,7 @@ export interface OptionCoreData {
   title?: string;
   class?: string;
   style?: CSSProperties;
-  label?: VNodeChild;
+  label?: VueNode;
   /** @deprecated Only works when use `children` as option data */
   children?: VNode[] | JSX.Element[];
 }
@@ -40,7 +41,7 @@ export interface OptionData extends OptionCoreData {
 
 export interface OptionGroupData {
   key?: Key;
-  label?: VNodeChild;
+  label?: VueNode;
   options: OptionData[];
   class?: string;
   style?: CSSProperties;

components/vc-select/utils/legacyUtil.ts

@@ -1,6 +1,7 @@
 import { flattenChildren, isValidElement } from '../../_util/props-util';
-import type { VNode, VNodeChild } from 'vue';
+import type { VNode } from 'vue';
 import type { OptionData, OptionGroupData, OptionsType } from '../interface';
+import type { VueNode } from '../../_util/type';
 
 function convertNodeToOption(node: VNode): OptionData {
   const {
@@ -21,10 +22,7 @@ function convertNodeToOption(node: VNode): OptionData {
   };
 }
 
-export function convertChildrenToData(
+export function convertChildrenToData(nodes: VueNode, optionOnly = false): OptionsType {
-  nodes: VNodeChild | JSX.Element,
-  optionOnly = false,
-): OptionsType {
   const dd = flattenChildren(nodes as [])
     .map((node: VNode, index: number): OptionData | OptionGroupData | null => {
       if (!isValidElement(node) || !node.type) {

components/vc-select/utils/valueUtil.ts

@@ -1,5 +1,4 @@
 import { warning } from '../../vc-util/warning';
-import type { VNodeChild } from 'vue';
 import { cloneVNode, isVNode } from 'vue';
 import type {
   OptionsType as SelectOptionsType,
@@ -17,6 +16,7 @@ import type {
 } from '../interface/generator';
 
 import { toArray } from './commonUtil';
+import type { VueNode } from '../../_util/type';
 
 function getKey(data: OptionData | OptionGroupData, index: number) {
   const { key } = data;
@@ -184,7 +184,7 @@ export const getLabeledValue: GetLabeledValue<FlattenOptionData[]> = (
   return result;
 };
 
-function toRawString(content: VNodeChild): string {
+function toRawString(content: VueNode): string {
   return toArray(content)
     .map(item => {
       if (isVNode(item)) {

components/vc-tree-select/utils/legacyUtil.tsx

@@ -1,5 +1,4 @@
 import { filterEmpty } from '../../_util/props-util';
-import type { VNodeChild } from 'vue';
 import { camelize } from 'vue';
 import { warning } from '../../vc-util/warning';
 import type {
@@ -11,11 +10,12 @@ import type {
   LegacyCheckedNode,
 } from '../interface';
 import TreeNode from '../TreeNode';
+import type { VueNode } from '../../_util/type';
 
 function isTreeSelectNode(node: any) {
   return node && node.type && (node.type as any).isTreeSelectNode;
 }
-export function convertChildrenToData(rootNodes: VNodeChild): DataNode[] {
+export function convertChildrenToData(rootNodes: VueNode): DataNode[] {
   function dig(treeNodes: any[] = []): DataNode[] {
     return filterEmpty(treeNodes).map(treeNode => {
       // Filter invalidate node

components/vc-tree/props.ts

@@ -111,7 +111,7 @@ export const treeProps = () => ({
   prefixCls: String,
   focusable: { type: Boolean, default: undefined },
   tabindex: Number,
-  children: PropTypes.VNodeChild,
+  children: PropTypes.any,
   treeData: { type: Array as PropType<DataNode[]> }, // Generate treeNode by children
   fieldNames: { type: Object as PropType<FieldNames> },
   showLine: { type: Boolean, default: undefined },

components/vc-tree/utils/treeUtil.ts

@@ -10,11 +10,11 @@ import type {
 } from '../interface';
 import { getPosition, isTreeNode } from '../util';
 import { warning } from '../../vc-util/warning';
-import type { VNodeChild } from 'vue';
 import { camelize } from 'vue';
 import type { TreeNodeProps } from '../props';
 import { filterEmpty } from '../../_util/props-util';
 import omit from '../../_util/omit';
+import type { VueNode } from '../../_util/type';
 
 export function getKey(key: Key, pos: string) {
   if (key !== null && key !== undefined) {
@@ -65,8 +65,8 @@ export function warningWithoutKey(treeData: DataNode[], fieldNames: FieldNames)
 /**
  * Convert `children` of Tree into `treeData` structure.
  */
-export function convertTreeToData(rootNodes: VNodeChild): DataNode[] {
+export function convertTreeToData(rootNodes: VueNode): DataNode[] {
-  function dig(node: VNodeChild = []): DataNode[] {
+  function dig(node: VueNode = []): DataNode[] {
     const treeNodes = filterEmpty(node as NodeElement[]);
     return treeNodes.map(treeNode => {
       // Filter invalidate node