chore: update @rc-component/tabs

docs/examples/animated.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Tabs from '../../src';
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
 import '../../assets/index.less';
 import './animated.less';
 

jest.config.js

@@ -13,12 +13,13 @@ const compileModules = [
 const ignoreList = [];
 
 // cnpm use `_` as prefix
-['', '_'].forEach((prefix) => {
-  compileModules.forEach((module) => {
+['', '_'].forEach(prefix => {
+  compileModules.forEach(module => {
     ignoreList.push(`${prefix}${module}`);
   });
 });
 
 module.exports = {
   transformIgnorePatterns: [`/node_modules/(?!${ignoreList.join('|')})[^/]+?/(?!(es)/)`],
+  setupFiles: ['./tests/setup.ts'],
 };

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-tabs",
-  "version": "15.5.0",
+  "name": "@rc-component/tabs",
+  "version": "1.0.0",
   "description": "tabs ui component for react",
   "keywords": [
     "react",
@@ -38,12 +38,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "classnames": "2.x",
+    "@rc-component/motion": "^1.0.0",
+    "@rc-component/resize-observer": "^1.0.0",
+    "@rc-component/util": "^1.2.0",
+    "classnames": "^2.5.1",
     "rc-dropdown": "~4.2.0",
-    "rc-menu": "~9.16.0",
-    "rc-motion": "^2.6.2",
-    "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.34.1"
+    "rc-menu": "~9.16.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
@@ -55,8 +55,9 @@
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^29.4.0",
     "@types/keyv": "4.2.0",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^22.12.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@umijs/fabric": "^4.0.1",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",

src/TabNavList/OperationNode.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import Dropdown from 'rc-dropdown';
 import Menu, { MenuItem } from 'rc-menu';
-import KeyCode from 'rc-util/lib/KeyCode';
+import KeyCode from '@rc-component/util/lib/KeyCode';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';

src/TabNavList/index.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import classNames from 'classnames';
-import ResizeObserver from 'rc-resize-observer';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import { useComposeRef } from 'rc-util/lib/ref';
+import ResizeObserver from '@rc-component/resize-observer';
+import useEvent from '@rc-component/util/lib/hooks/useEvent';
+import { useComposeRef } from '@rc-component/util/lib/ref';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import TabContext from '../TabContext';

src/TabPanelList/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/motion';
 import * as React from 'react';
 import type { AnimatedConfig, TabPosition } from '../interface';
 import TabContext from '../TabContext';

src/Tabs.tsx

@@ -1,7 +1,7 @@
 // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
 import classNames from 'classnames';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import isMobile from 'rc-util/lib/isMobile';
+import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import isMobile from '@rc-component/util/lib/isMobile';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import TabContext from './TabContext';

src/hooks/useAnimateConfig.ts

@@ -1,4 +1,4 @@
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import type { TabsProps } from '..';
 import type { AnimatedConfig } from '../interface';
 

src/hooks/useIndicator.ts

@@ -1,4 +1,4 @@
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import React, { useEffect, useRef, useState } from 'react';
 import type { TabOffset } from '../interface';
 
@@ -20,7 +20,8 @@ const useIndicator = (options: UseIndicatorOptions) => {
   const { size, align = 'center' } = indicator;
 
   const [inkStyle, setInkStyle] = useState<React.CSSProperties>();
-  const inkBarRafRef = useRef<number>();
+
+  const inkBarRafRef = useRef<number>(undefined);
 
   const getLength = React.useCallback(
     (origin: number) => {

src/hooks/useTouchMove.ts

@@ -18,7 +18,7 @@ export default function useTouchMove(
   const [lastTimestamp, setLastTimestamp] = useState<number>(0);
   const [lastTimeDiff, setLastTimeDiff] = useState<number>(0);
   const [lastOffset, setLastOffset] = useState<{ x: number; y: number }>();
-  const motionRef = useRef<number>();
+  const motionRef = useRef<number>(undefined);
 
   // ========================= Events =========================
   // >>> Touch events
@@ -76,7 +76,7 @@ export default function useTouchMove(
   }
 
   // >>> Wheel event
-  const lastWheelDirectionRef = useRef<'x' | 'y'>();
+  const lastWheelDirectionRef = useRef<'x' | 'y'>(undefined);
 
   function onWheel(e: WheelEvent) {
     const { deltaX, deltaY } = e;

src/hooks/useUpdate.ts

@@ -1,14 +1,14 @@
-import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect';
+import { useLayoutUpdateEffect } from '@rc-component/util/lib/hooks/useLayoutEffect';
 import { useRef, useState } from 'react';
 
 /**
  * Help to merge callback with `useLayoutEffect`.
  * One time will only trigger once.
  */
-export default function useUpdate(callback: VoidFunction): () => void {
+function useUpdate(callback: VoidFunction): () => void {
   const [count, setCount] = useState(0);
   const effectRef = useRef(0);
-  const callbackRef = useRef<VoidFunction>();
+  const callbackRef = useRef<VoidFunction>(undefined);
   callbackRef.current = callback;
 
   // Trigger on `useLayoutEffect`
@@ -56,3 +56,5 @@ export function useUpdateState<T>(
 
   return [state.current, updater];
 }
+
+export default useUpdate;

src/interface.ts

@@ -1,15 +1,17 @@
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
 import type React from 'react';
 import type { TabNavListProps } from './TabNavList';
 import type { TabPaneProps } from './TabPanelList/TabPane';
-import { DropdownProps } from 'rc-dropdown/lib/Dropdown';
+import type { DropdownProps } from 'rc-dropdown/lib/Dropdown';
 
 export type TriggerProps = {
   trigger?: 'hover' | 'click';
-}
+};
+
 export type moreIcon = React.ReactNode;
+
 export type MoreProps = {
-  icon?: moreIcon,
+  icon?: moreIcon;
 } & Omit<DropdownProps, 'children'>;
 
 export type SizeInfo = [width: number, height: number];
@@ -45,7 +47,7 @@ type RenderTabBarProps = {
   mobile: boolean;
   editable: EditableConfig;
   locale: TabsLocale;
-  more: MoreProps,
+  more: MoreProps;
   tabBarGutter: number;
   onTabClick: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
   onTabScroll: OnTabScroll;

tests/common/util.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-invalid-this */
 import { act } from '@testing-library/react';
-import { _rs as onEsResize } from 'rc-resize-observer/es/utils/observerUtil';
-import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
+import { _rs as onEsResize } from '@rc-component/resize-observer/es/utils/observerUtil';
+import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';
 import React from 'react';
 import Tabs from '../../src';
 import type { TabsProps } from '../../src/Tabs';

tests/index.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/dom';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import Tabs from '../src';
 import type { TabsProps } from '../src/Tabs';

tests/mobile.test.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import type { TabsProps } from '../src';
 import Tabs from '../src';
 import { btnOffsetPosition, getOffsetSizeFunc, getTransformX } from './common/util';
 
-jest.mock('rc-util/lib/isMobile', () => () => true);
+jest.mock('@rc-component/util/lib/isMobile', () => () => true);
 
 describe('Tabs.Mobile', () => {
   const tabCount = 100;

tests/operation-overflow.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-invalid-this */
 import { render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import { act } from 'react-dom/test-utils';
 import { getOffsetSizeFunc, getTabs, triggerResize } from './common/util';
 

tests/overflow.test.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render } from '@testing-library/react';
-import KeyCode from 'rc-util/lib/KeyCode';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import KeyCode from '@rc-component/util/lib/KeyCode';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import type { TabsProps } from '../src';
 import Tabs from '../src';
@@ -95,12 +95,14 @@ describe('Tabs.Overflow', () => {
   it('should open dropdown on click when moreTrigger is set to click', () => {
     jest.useFakeTimers();
     const onChange = jest.fn();
-    const { container, unmount } = render(getTabs({ onChange, more: {icon: '...', trigger: 'click'} }));
+    const { container, unmount } = render(
+      getTabs({ onChange, more: { icon: '...', trigger: 'click' } }),
+    );
     triggerResize(container);
     act(() => {
       jest.runAllTimers();
     });
-    const button = container.querySelector('.rc-tabs-nav-more')
+    const button = container.querySelector('.rc-tabs-nav-more');
     fireEvent.click(button);
     act(() => {
       jest.runAllTimers();

tests/rtl.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { act } from 'react-dom/test-utils';
+import { render, act } from '@testing-library/react';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import { getOffsetSizeFunc, getTabs, getTransformX, triggerResize } from './common/util';
 
 // Same as `overflow.test.tsx` but use in RTL

tests/setup.ts

@@ -0,0 +1,6 @@
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};