fix: types error

components/vc-select2/OptionList.tsx

@@ -72,7 +72,7 @@ const OptionListProps = {
  * Using virtual list of option display.
  * Will fallback to dom if use customize render.
  */
-const OptionList = defineComponent<OptionListProps>({
+const OptionList = defineComponent<OptionListProps, { state: any }>({
   name: 'OptionList',
   inheritAttrs: false,
   setup(props) {
@@ -251,7 +251,14 @@ const OptionList = defineComponent<OptionListProps>({
     };
   },
   render() {
-    const { renderItem, listRef, onListMouseDown, itemPrefixCls, setActive, onSelectValue } = this;
+    const {
+      renderItem,
+      listRef,
+      onListMouseDown,
+      itemPrefixCls,
+      setActive,
+      onSelectValue,
+    } = this as any;
     const {
       id,
       childrenAsData,
@@ -264,7 +271,7 @@ const OptionList = defineComponent<OptionListProps>({
       virtual,
       onScroll,
       onMouseenter,
-    } = this.$props;
+    } = this.$props as OptionListProps;
     const { activeIndex } = this.state;
     // ========================== Render ==========================
     if (flattenOptions.length === 0) {

components/vc-select2/SelectTrigger.tsx

@@ -57,13 +57,13 @@ export interface SelectTriggerProps {
   dropdownClassName: string;
   direction: string;
   dropdownMatchSelectWidth?: boolean | number;
-  dropdownRender?: (menu: VNodeChild) => VNodeChild;
+  dropdownRender?: (menu: VNodeChild | JSX.Element) => VNodeChild;
   getPopupContainer?: RenderDOMFunc;
   dropdownAlign: object;
   empty: boolean;
   getTriggerDOMNode: () => any;
 }
-const SelectTrigger = defineComponent<SelectTriggerProps>({
+const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
   name: 'SelectTrigger',
   inheritAttrs: false,
   created() {
@@ -90,6 +90,8 @@ const SelectTrigger = defineComponent<SelectTriggerProps>({
       dropdownRender,
       animation,
       transitionName,
+      direction,
+      getPopupContainer,
     } = props as SelectTriggerProps;
     const dropdownPrefixCls = `${prefixCls}-dropdown`;
 
@@ -114,20 +116,19 @@ const SelectTrigger = defineComponent<SelectTriggerProps>({
         {...props}
         showAction={[]}
         hideAction={[]}
-        popupPlacement={this.direction === 'rtl' ? 'bottomRight' : 'bottomLeft'}
+        popupPlacement={direction === 'rtl' ? 'bottomRight' : 'bottomLeft'}
         builtinPlacements={builtInPlacements}
         prefixCls={dropdownPrefixCls}
         popupTransitionName={mergedTransitionName}
-        onPopupVisibleChange={props.onDropdownVisibleChange}
         popup={<div ref={this.popupRef}>{popupNode}</div>}
         popupAlign={dropdownAlign}
         popupVisible={visible}
-        getPopupContainer={props.getPopupContainer}
+        getPopupContainer={getPopupContainer}
         popupClassName={classNames(dropdownClassName, {
           [`${dropdownPrefixCls}-empty`]: empty,
         })}
         popupStyle={popupStyle}
-        getTriggerDOMNode={this.getTriggerDOMNode}
+        // getTriggerDOMNode={getTriggerDOMNode}
       >
         {getSlot(this)[0]}
       </Trigger>

components/vc-select2/Selector/Input.tsx

@@ -27,7 +27,7 @@ interface InputProps {
   onCompositionend: EventHandlerNonNull;
 }
 
-const Input = defineComponent<InputProps>({
+const Input = defineComponent<InputProps, { VCSelectContainerEvent: any }>({
   name: 'Input',
   inheritAttrs: false,
   setup() {

components/vc-select2/generate.tsx

@@ -113,7 +113,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> {
   dropdownClassName?: string;
   dropdownMatchSelectWidth?: boolean | number;
   virtual?: boolean;
-  dropdownRender?: (menu: VNodeChild) => VNodeChild;
+  dropdownRender?: (menu: VNodeChild | JSX.Element) => VNodeChild;
   dropdownAlign?: any;
   animation?: string;
   transitionName?: string;

components/vc-select2/hooks/useCacheOptions.ts

@@ -11,7 +11,7 @@ export default function useCacheOptions<
 >(_values: RawValueType[], options: Ref) {
   const optionMap = computed(() => {
     const map: Map<RawValueType, FlattenOptionsType<OptionsType>[number]> = new Map();
-    options.value.forEach(item => {
+    options.value.forEach((item: any) => {
       const {
         data: { value },
       } = item;

components/vc-select2/utils/legacyUtil.ts

@@ -1,5 +1,5 @@
 import { flattenChildren, isValidElement } from '../../_util/props-util';
-import { VNode } from 'vue';
+import { VNode, VNodeChild } from 'vue';
 import { OptionData, OptionGroupData, OptionsType } from '../interface';
 
 function convertNodeToOption(node: VNode): OptionData {
@@ -14,8 +14,11 @@ function convertNodeToOption(node: VNode): OptionData {
   return { key, value: value !== undefined ? value : key, children: child, ...restProps };
 }
 
-export function convertChildrenToData(nodes: any[], optionOnly = false): OptionsType {
-  const dd = flattenChildren(nodes)
+export function convertChildrenToData(
+  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) {
         return null;

components/vc-select2/utils/valueUtil.ts

@@ -128,7 +128,7 @@ export const getLabeledValue: GetLabeledValue<FlattenOptionData[]> = (
   };
 
   let prevValItem: LabelValueType;
-  const prevValues = toArray<RawValueType | LabelValueType>(prevValue);
+  const prevValues = toArray<LabelValueType>(prevValue as LabelValueType);
   if (labelInValue) {
     prevValItem = prevValues.find((prevItem: LabelValueType) => {
       if (typeof prevItem === 'object' && 'value' in prevItem) {

components/vc-select2/utils/warningPropsUtil.ts

@@ -1,7 +1,7 @@
 import warning, { noteOnce } from '../../vc-util/warning';
 import { SelectProps } from '..';
 import { convertChildrenToData } from './legacyUtil';
-import { OptionData, OptionGroupData } from '../interface';
+import { OptionData } from '../interface';
 import { toArray } from './commonUtil';
 import { RawValueType, LabelValueType } from '../interface/generator';
 import { isValidElement } from '../../_util/props-util';
@@ -32,8 +32,7 @@ function warningProps(props: SelectProps) {
 
   // `tags` should not set option as disabled
   warning(
-    mode !== 'tags' ||
-      mergedOptions.every((opt: { disabled?: boolean } & OptionGroupData) => !opt.disabled),
+    mode !== 'tags' || mergedOptions.every((opt: any) => !opt.disabled),
     'Please avoid setting option to disabled in tags mode since user can always type text as tag.',
   );
 
@@ -102,44 +101,38 @@ function warningProps(props: SelectProps) {
   // Syntactic sugar should use correct children type
   if (children) {
     let invalidateChildType = null;
-    children.some(
-      (
-        node: VNode & {
-          children: { default?: () => any };
-        },
-      ) => {
-        if (!isValidElement(node) || !node.type) {
-          return false;
-        }
+    children.some((node: any) => {
+      if (!isValidElement(node) || !node.type) {
+        return false;
+      }
 
-        const { type } = node as { type: { isSelectOption?: boolean; isSelectOptGroup?: boolean } };
+      const { type } = node as { type: { isSelectOption?: boolean; isSelectOptGroup?: boolean } };
 
-        if (type.isSelectOption) {
-          return false;
-        }
-        if (type.isSelectOptGroup) {
-          const childs = node.children?.default() || [];
-          const allChildrenValid = childs.every((subNode: VNode) => {
-            if (
-              !isValidElement(subNode) ||
-              !node.type ||
-              (subNode.type as { isSelectOption?: boolean }).isSelectOption
-            ) {
-              return true;
-            }
-            invalidateChildType = subNode.type;
-            return false;
-          });
-
-          if (allChildrenValid) {
-            return false;
+      if (type.isSelectOption) {
+        return false;
+      }
+      if (type.isSelectOptGroup) {
+        const childs = node.children?.default() || [];
+        const allChildrenValid = childs.every((subNode: VNode) => {
+          if (
+            !isValidElement(subNode) ||
+            !node.type ||
+            (subNode.type as { isSelectOption?: boolean }).isSelectOption
+          ) {
+            return true;
           }
-          return true;
+          invalidateChildType = subNode.type;
+          return false;
+        });
+
+        if (allChildrenValid) {
+          return false;
         }
-        invalidateChildType = type;
         return true;
-      },
-    );
+      }
+      invalidateChildType = type;
+      return true;
+    });
 
     if (invalidateChildType) {
       warning(