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';
 

package.json

@@ -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",

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';
 

src/hooks/useUpdate.ts

@@ -1,4 +1,4 @@
-import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect';
+import { useLayoutUpdateEffect } from '@rc-component/util/lib/hooks/useLayoutEffect';
 import { useRef, useState } from 'react';
 
 /**

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