fix: tabs hotreload error

components/_util/hooks/useRef.ts

@@ -1,11 +1,12 @@
-import type { Ref } from 'vue';
+import type { Ref, ComponentPublicInstance } from 'vue';
 import { onBeforeUpdate, ref } from 'vue';
 
-export type UseRef = [(el: any, key: string | number) => void, Ref<any>];
+type RefType = HTMLElement | ComponentPublicInstance;
-export type Refs = Record<string | number, any>;
+export type Refs = Record<string | number, RefType>;
+export type UseRef = [(el: RefType, key: string | number) => void, Ref<Refs>];
 export const useRef = (): UseRef => {
   const refs = ref<Refs>({});
-  const setRef = (el: any, key: string | number) => {
+  const setRef = (el: RefType, key: string | number) => {
     refs.value[key] = el;
   };
   onBeforeUpdate(() => {

components/tabs/src/TabNavList/TabNode.tsx

@@ -1,6 +1,6 @@
 import type { Tab, EditableConfig } from '../interface';
 import type { PropType } from 'vue';
-import { onBeforeUnmount, defineComponent, computed, ref } from 'vue';
+import { defineComponent, computed, ref } from 'vue';
 import type { FocusEventHandler } from '../../../_util/EventInterface';
 import KeyCode from '../../../_util/KeyCode';
 import classNames from '../../../_util/classNames';
@@ -37,7 +37,7 @@ export default defineComponent({
     },
     renderWrapper: { type: Function as PropType<(node: any) => any> },
     removeAriaLabel: { type: String },
-    onRemove: { type: Function as PropType<() => void> },
+    // onRemove: { type: Function as PropType<() => void> },
     onFocus: { type: Function as PropType<FocusEventHandler> },
   },
   emits: ['click', 'resize', 'remove', 'focus'],
@@ -52,9 +52,9 @@ export default defineComponent({
     expose({
       domRef,
     });
-    onBeforeUnmount(() => {
+    // onBeforeUnmount(() => {
-      props.onRemove();
+    //   props.onRemove();
-    });
+    // });
     function onRemoveTab(event: MouseEvent | KeyboardEvent) {
       event.preventDefault();
       event.stopPropagation();

components/tabs/src/TabNavList/index.tsx

@@ -15,7 +15,6 @@ import useOffsets from '../hooks/useOffsets';
 import OperationNode from './OperationNode';
 import { useInjectTabs } from '../TabContext';
 import useTouchMove from '../hooks/useTouchMove';
-import useRefs from '../hooks/useRefs';
 import AddButton from './AddButton';
 import type { Key } from '../../../_util/type';
 import type { ExtractPropTypes, PropType, CSSProperties } from 'vue';
@@ -27,6 +26,7 @@ import wrapperRaf from '../../../_util/raf';
 import classNames from '../../../_util/classNames';
 import ResizeObserver from '../../../vc-resize-observer';
 import { toPx } from '../../../_util/util';
+import useRef from '../../../_util/hooks/useRef';
 const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 };
 const tabNavListProps = () => {
   return {
@@ -34,7 +34,6 @@ const tabNavListProps = () => {
     tabPosition: { type: String as PropType<TabPosition> },
     activeKey: { type: [String, Number] },
     rtl: { type: Boolean },
-    panes: PropTypes.any,
     animated: { type: Object as PropType<AnimatedConfig>, default: undefined as AnimatedConfig },
     extra: PropTypes.any,
     editable: { type: Object as PropType<EditableConfig> },
@@ -63,7 +62,7 @@ export default defineComponent({
   name: 'TabNavList',
   inheritAttrs: false,
   props: tabNavListProps(),
-  slots: ['panes', 'moreIcon', 'extra'],
+  slots: ['moreIcon', 'extra'],
   emits: ['tabClick', 'tabScroll'],
   setup(props, { attrs, slots }) {
     const { tabs, prefixCls } = useInjectTabs();
@@ -71,8 +70,7 @@ export default defineComponent({
     const tabListRef = ref<HTMLDivElement>();
     const operationsRef = ref<{ $el: HTMLDivElement }>();
     const innerAddButtonRef = ref<HTMLButtonElement>();
-    const [getBtnRef, removeBtnRef] = useRefs();
+    const [setRef, btnRefs] = useRef();
-
     const tabPositionTopOrBottom = computed(
       () => props.tabPosition === 'top' || props.tabPosition === 'bottom',
     );
@@ -315,8 +313,8 @@ export default defineComponent({
       setTabSizes(() => {
         const newSizes: TabSizeMap = new Map();
         tabs.value.forEach(({ key }) => {
-          const btnRef = getBtnRef(key).value;
+          const btnRef = btnRefs.value[key];
-          const btnNode = (btnRef as any).$el || btnRef;
+          const btnNode = (btnRef as any)?.$el || btnRef;
           if (btnNode) {
             newSizes.set(key, {
               width: btnNode.offsetWidth,
@@ -459,13 +457,10 @@ export default defineComponent({
             editable={editable}
             active={key === activeKey}
             removeAriaLabel={locale?.removeAriaLabel}
-            ref={getBtnRef(key)}
+            ref={r => setRef(r, key)}
             onClick={e => {
               onTabClick(key, e);
             }}
-            onRemove={() => {
-              removeBtnRef(key);
-            }}
             onFocus={() => {
               scrollToTab(key);
               doLockAnimation();
@@ -537,7 +532,6 @@ export default defineComponent({
               </ResizeObserver>
             </div>
           </ResizeObserver>
-
           <OperationNode
             {...props}
             ref={operationsRef}

components/tabs/src/Tabs.tsx

@@ -256,7 +256,6 @@ const InternalTabs = defineComponent({
         onTabClick: onInternalTabClick,
         onTabScroll,
         style: tabBarStyle,
-        panes: flattenChildren(slots.default?.()),
       };
 
       if (renderTabBar) {

components/tabs/src/hooks/useTouchMove.ts

@@ -130,8 +130,8 @@ export default function useTouchMove(
     document.addEventListener('touchend', onProxyTouchEnd, { passive: false });
 
     // No need to clean up since element removed
-    domRef.value.addEventListener('touchstart', onProxyTouchStart, { passive: false });
+    domRef.value?.addEventListener('touchstart', onProxyTouchStart, { passive: false });
-    domRef.value.addEventListener(
+    domRef.value?.addEventListener(
       'wheel',
       onProxyWheel,
       supportsPassive ? { passive: true } : false,