feat: prepend use-client directive for with Next.js App Router (#43573)

* fix: prepend use-client directive for with Next.js App Router

* Update components/affix/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: lijianan <574980606@qq.com>

* Update components/badge/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: lijianan <574980606@qq.com>

* Update components/divider/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: lijianan <574980606@qq.com>

* Update components/cascader/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/list/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/mentions/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/mentions/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/mentions/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/mentions/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/qrcode/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/spin/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/select/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/spin/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/spin/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/steps/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/time-picker/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/transfer/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update components/tree-select/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>

components/affix/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import omit from 'rc-util/lib/omit';

components/alert/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import type { AlertProps } from './Alert';
 import InternalAlert from './Alert';
 import ErrorBoundary from './ErrorBoundary';

components/anchor/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import InternalAnchor from './Anchor';
 import AnchorLink from './AnchorLink';
 

components/app/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import React, { useContext } from 'react';

components/auto-complete/index.tsx

@@ -1,10 +1,4 @@
-/**
- * TODO: 4.0
- *
- * - Remove `dataSource`
- * - `size` not work with customizeInput
- * - CustomizeInput not feedback `ENTER` key since accessibility enhancement
- */
+'use client';
 
 import classNames from 'classnames';
 import type { BaseSelectRef } from 'rc-select';

components/avatar/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { AvatarProps } from './avatar';
 import InternalAvatar from './avatar';

components/back-top/index.tsx

@@ -1,15 +1,17 @@
+'use client';
+
 import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
-import type { ConfigConsumerProps } from '../config-provider';
-import { ConfigContext } from '../config-provider';
 import getScroll from '../_util/getScroll';
 import { cloneElement } from '../_util/reactNode';
 import scrollTo from '../_util/scrollTo';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import warning from '../_util/warning';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
 export interface BackTopProps {

components/badge/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classnames from 'classnames';
 import CSSMotion from 'rc-motion';
 import * as React from 'react';

components/breadcrumb/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Breadcrumb from './Breadcrumb';
 
 export type { BreadcrumbProps } from './Breadcrumb';

components/button/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Button from './button';
 
 export type { SizeType as ButtonSize } from '../config-provider/SizeContext';

components/calendar/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Dayjs } from 'dayjs';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import type { CalendarProps } from './generateCalendar';

components/card/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import InternalCard from './Card';
 import Grid from './Grid';
 import Meta from './Meta';

components/carousel/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Settings } from '@ant-design/react-slick';
 import SlickCarousel from '@ant-design/react-slick';
 import classNames from 'classnames';

components/cascader/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';

components/checkbox/index.ts

@@ -1,11 +1,13 @@
+'use client';
+
 import type * as React from 'react';
 import type { CheckboxProps } from './Checkbox';
 import InternalCheckbox from './Checkbox';
 import Group from './Group';
 
+export type { CheckboxRef } from 'rc-checkbox';
 export type { CheckboxChangeEvent, CheckboxProps } from './Checkbox';
 export type { CheckboxGroupProps, CheckboxOptionType } from './Group';
-export type { CheckboxRef } from 'rc-checkbox';
 
 type CompoundedComponent = React.ForwardRefExoticComponent<
   CheckboxProps & React.RefAttributes<HTMLInputElement>

components/col/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { Col, type ColProps, type ColSize } from '../grid';
 
 export type { ColProps, ColSize };

components/collapse/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Collapse from './Collapse';
 
 export type { CollapseProps } from './Collapse';

components/color-picker/index.ts

@@ -1,6 +1,8 @@
+'use client';
+
 import ColorPicker from './ColorPicker';
 
-export type { Color } from './color';
 export type { ColorPickerProps } from './ColorPicker';
+export type { Color } from './color';
 
 export default ColorPicker;

components/config-provider/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { createTheme } from '@ant-design/cssinjs';
 import IconContext from '@ant-design/icons/lib/components/Context';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';

components/date-picker/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Dayjs } from 'dayjs';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import genPurePanel from '../_util/PurePanel';

components/descriptions/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable react/no-array-index-key */
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';

components/divider/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import * as React from 'react';
 import warning from '../_util/warning';

components/drawer/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import type { DrawerProps as RcDrawerProps } from 'rc-drawer';
 import RcDrawer from 'rc-drawer';
@@ -15,7 +17,7 @@ import { NoCompactStyle } from '../space/Compact';
 import useStyle from './style';
 
 const SizeTypes = ['default', 'large'] as const;
-type sizeType = (typeof SizeTypes)[number];
+type sizeType = typeof SizeTypes[number];
 
 export interface PushState {
   distance: string | number;

components/dropdown/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import InternalDropdown from './dropdown';
 import DropdownButton from './dropdown-button';
 

components/empty/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';

components/float-button/index.ts

@@ -1,6 +1,8 @@
+'use client';
+
+import BackTop from './BackTop';
 import FloatButton from './FloatButton';
 import FloatButtonGroup from './FloatButtonGroup';
-import BackTop from './BackTop';
 import PurePanel from './PurePanel';
 
 FloatButton.BackTop = BackTop;

components/form/index.ts

@@ -1,14 +1,16 @@
+'use client';
+
 import type { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface';
 import warning from '../_util/warning';
-import { FormProvider } from './context';
 import ErrorList, { type ErrorListProps } from './ErrorList';
-import InternalForm, { type FormInstance, type FormProps, useForm, useWatch } from './Form';
+import InternalForm, { useForm, useWatch, type FormInstance, type FormProps } from './Form';
 import Item, { type FormItemProps } from './FormItem';
 import List, {
   type FormListFieldData,
   type FormListOperation,
   type FormListProps,
 } from './FormList';
+import { FormProvider } from './context';
 import useFormInstance from './hooks/useFormInstance';
 
 type InternalFormType = typeof InternalForm;
@@ -44,16 +46,16 @@ Form.create = () => {
 };
 
 export type {
+  ErrorListProps,
   FormInstance,
-  FormProps,
   FormItemProps,
-  ErrorListProps,
+  FormListFieldData,
+  FormListOperation,
+  FormListProps,
+  FormProps,
   Rule,
   RuleObject,
   RuleRender,
-  FormListProps,
-  FormListFieldData,
-  FormListOperation,
 };
 
 export default Form;

components/grid/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Col from './col';
 import useInternalBreakpoint from './hooks/useBreakpoint';
 import Row from './row';
@@ -9,6 +11,6 @@ function useBreakpoint() {
 
 export type { ColProps, ColSize } from './col';
 export type { RowProps } from './row';
-export { Row, Col };
+export { Col, Row };
 
 export default { useBreakpoint };

components/image/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import classNames from 'classnames';
 import RcImage, { type ImageProps } from 'rc-image';

components/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export type { Breakpoint } from './_util/responsiveObserver';
 export { default as Affix } from './affix';
 export type { AffixProps } from './affix';

components/input-number/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import type { ValueType } from '@rc-component/mini-decimal';

components/input/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import type * as React from 'react';
 import Group from './Group';
 import type { InputProps, InputRef } from './Input';

components/layout/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import InternalLayout, { Content, Footer, Header } from './layout';
 import Sider from './Sider';
 

components/list/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 // eslint-disable-next-line import/no-named-as-default
 import * as React from 'react';

components/locale/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
 import * as React from 'react';
 import warning from '../_util/warning';

components/mentions/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import RcMentions from 'rc-mentions';
 import type {

components/menu/index.tsx

@@ -1,19 +1,21 @@
+'use client';
+
 import type { MenuRef as RcMenuRef } from 'rc-menu';
 import { ItemGroup } from 'rc-menu';
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
-import type { MenuProps } from './menu';
-import InternalMenu from './menu';
 import { SiderContext } from '../layout/Sider';
 import type { MenuTheme } from './MenuContext';
 import MenuDivider from './MenuDivider';
 import Item, { type MenuItemProps } from './MenuItem';
 import SubMenu, { type SubMenuProps } from './SubMenu';
 import type { ItemType, MenuItemType } from './hooks/useItems';
+import type { MenuProps } from './menu';
+import InternalMenu from './menu';
 
 export type { MenuItemGroupProps } from 'rc-menu';
 export type { MenuDividerProps } from './MenuDivider';
-export type { MenuTheme, SubMenuProps, MenuItemProps, MenuProps };
+export type { MenuItemProps, MenuProps, MenuTheme, SubMenuProps };
 
 export type MenuRef = {
   menu: RcMenuRef | null;

components/message/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { render } from 'rc-util/lib/React/render';
 import * as React from 'react';
 import ConfigProvider, { globalConfig, warnContext } from '../config-provider';

components/modal/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ModalStaticFunctions } from './confirm';
 import confirm, {
   modalGlobalConfig,

components/notification/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { render } from 'rc-util/lib/React/render';
 import * as React from 'react';
 import ConfigProvider, { globalConfig, warnContext } from '../config-provider';

components/pagination/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Pagination from './Pagination';
 
 export type { PaginationConfig, PaginationProps } from './Pagination';

components/popconfirm/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';

components/popover/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import * as React from 'react';
 import type { RenderFunction } from '../_util/getRenderPropValue';

components/progress/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Progress from './progress';
 
 export type { ProgressAriaProps, ProgressProps } from './progress';

components/qrcode/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ReloadOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';

components/radio/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type * as React from 'react';
 import Group from './group';
 import type { RadioProps } from './interface';

components/rate/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import StarFilled from '@ant-design/icons/StarFilled';
 import classNames from 'classnames';
 import RcRate from 'rc-rate';

components/result/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';

components/row/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Row, type RowProps } from '../grid';
 
 export type { RowProps };

components/segmented/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import type {
   SegmentedLabeledOption as RcSegmentedLabeledOption,

components/select/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 // TODO: 4.0 - codemod should help to change `filterOption` to support node props.
 import classNames from 'classnames';
 import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';

components/skeleton/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Skeleton from './Skeleton';
 
 export type { SkeletonProps } from './Skeleton';

components/slider/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import type { SliderProps as RcSliderProps } from 'rc-slider';
 import RcSlider from 'rc-slider';

components/space/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import * as React from 'react';

components/spin/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
@@ -9,7 +11,7 @@ import { ConfigContext } from '../config-provider';
 import useStyle from './style/index';
 
 const SpinSizes = ['small', 'default', 'large'] as const;
-export type SpinSize = (typeof SpinSizes)[number];
+export type SpinSize = typeof SpinSizes[number];
 export type SpinIndicator = React.ReactElement<HTMLElement>;
 
 export interface SpinProps {

components/statistic/index.tsx

@@ -1,9 +1,11 @@
+'use client';
+
 import type { CountdownProps } from './Countdown';
 import Countdown from './Countdown';
 import type { StatisticProps } from './Statistic';
 import Statistic from './Statistic';
 
-export type { StatisticProps, CountdownProps };
+export type { CountdownProps, StatisticProps };
 
 type CompoundedComponent = {
   Countdown: typeof Countdown;

components/steps/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';

components/style/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { AliasToken, DerivativeToken } from '../theme/internal';

components/switch/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 import RcSwitch from 'rc-switch';

components/table/index.ts

@@ -1,8 +1,10 @@
+'use client';
+
 import { type TablePaginationConfig, type TableProps } from './InternalTable';
 import Table from './Table';
 
 export type { ColumnProps } from './Column';
-export type { ColumnGroupType, ColumnsType, ColumnType } from './interface';
-export type { TableProps, TablePaginationConfig };
+export type { ColumnGroupType, ColumnType, ColumnsType } from './interface';
+export type { TablePaginationConfig, TableProps };
 
 export default Table;

components/tabs/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';

components/tag/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import * as React from 'react';

components/theme/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable import/prefer-default-export */
 import getDesignToken from './getDesignToken';
 import type { GlobalToken } from './interface';

components/time-picker/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Dayjs } from 'dayjs';
 import * as React from 'react';
 import genPurePanel from '../_util/PurePanel';

components/timeline/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Timeline from './Timeline';
 
 export type { TimelineProps } from './Timeline';

components/tooltip/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { BuildInPlacements } from '@rc-component/trigger';
 import classNames from 'classnames';
 import RcTooltip from 'rc-tooltip';

components/tour/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import RCTour from '@rc-component/tour';
 import classNames from 'classnames';
 import React, { useContext } from 'react';

components/transfer/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import type { ChangeEvent, CSSProperties } from 'react';
 import React, { useCallback, useContext } from 'react';

components/tree-select/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import type { BaseSelectRef } from 'rc-select';
 import type { Placement } from 'rc-select/lib/BaseSelect';

components/tree/index.ts

@@ -1,28 +1,30 @@
+'use client';
+
 import type RcTree from 'rc-tree';
-import { TreeNode } from 'rc-tree';
 import type { BasicDataNode } from 'rc-tree';
+import { TreeNode } from 'rc-tree';
 import type { DataNode } from 'rc-tree/lib/interface';
 
+import DirectoryTree from './DirectoryTree';
 import type { TreeProps } from './Tree';
 import TreePure from './Tree';
-import DirectoryTree from './DirectoryTree';
 
-export type { DataNode };
 export type { EventDataNode } from 'rc-tree/lib/interface';
 export type {
-  DirectoryTreeProps,
   ExpandAction as DirectoryTreeExpandAction,
+  DirectoryTreeProps,
 } from './DirectoryTree';
 export type {
-  AntdTreeNodeAttribute,
   AntTreeNode,
   AntTreeNodeCheckedEvent,
   AntTreeNodeExpandedEvent,
   AntTreeNodeMouseEvent,
   AntTreeNodeProps,
   AntTreeNodeSelectedEvent,
+  AntdTreeNodeAttribute,
   TreeProps,
 } from './Tree';
+export type { DataNode };
 
 type CompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(
   props: React.PropsWithChildren<TreeProps<T>> & { ref?: React.Ref<RcTree> },

components/typography/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Link from './Link';
 import Paragraph from './Paragraph';
 import Text from './Text';

components/upload/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import Dragger from './Dragger';
 import type { UploadProps } from './Upload';
 import InternalUpload, { LIST_IGNORE } from './Upload';