Merge branch 'next' into alias-token

components/cascader/__tests__/index.test.tsx

@@ -413,7 +413,7 @@ describe('Cascader', () => {
     const { container } = render(<Cascader options={customOptions} placement="topRight" />);
     toggleOpen(container);
 
-    // Inject in tests/__mocks__/rc-trigger.js
+    // Inject in tests/__mocks__/@rc-component/trigger.tsx
     expect((global as any)?.triggerProps.popupPlacement).toEqual('topRight');
   });
 
@@ -531,14 +531,14 @@ describe('Cascader', () => {
     const { container } = render(<Cascader options={options} direction="rtl" />);
     toggleOpen(container);
 
-    // Inject in tests/__mocks__/rc-trigger.js
+    // Inject in tests/__mocks__/@rc-component/trigger.tsx
     expect((global as any).triggerProps.popupPlacement).toEqual('bottomRight');
   });
 
   describe('legacy props', () => {
     it('popupPlacement', () => {
       render(<Cascader open popupPlacement="bottomLeft" />);
-      // Inject in tests/__mocks__/rc-trigger.js
+      // Inject in tests/__mocks__/@rc-component/trigger.tsx
       expect((global as any).triggerProps.popupPlacement).toEqual('bottomLeft');
     });
 

components/popconfirm/index.en-US.md

@@ -61,14 +61,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 <ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
 
-## FAQ
-
-### Why does the warning `findDOMNode is deprecated` sometimes appear in strict mode?
-
-This is due to the implementation of `rc-trigger`. `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags.
-
-- `findDOMNode is deprecated` reproduce: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
-- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+<!-- ## FAQ -->
 
 ## Note
 

components/popconfirm/index.zh-CN.md

@@ -62,14 +62,7 @@ demo:
 
 <ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
 
-## FAQ
-
-### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告？
-
-这是由于 `rc-trigger` 的实现方式导致的，`rc-trigger` 强制要求 children 能够接受 ref，否则就会 fallback 到 findDOMNode，所以 children 需要是原生 html 标签，如果不是，则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。
-
-- `findDOMNode is deprecated` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
-- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+<!-- ## FAQ -->
 
 ## 注意
 

components/popover/PurePanel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Popup } from 'rc-tooltip';
+import { Popup } from '@rc-component/tooltip';
 
 import type { PopoverProps } from '.';
 import { getRenderPropValue } from '../_util/getRenderPropValue';

components/popover/index.en-US.md

@@ -57,13 +57,6 @@ Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseL
 
 ## FAQ
 
-### Why does the warning `findDOMNode is deprecated` sometimes appear in strict mode?
-
-This is due to the implementation of `rc-trigger`. `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags.
-
-- `findDOMNode is deprecated` reproduce: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
-- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
-
 ### Why sometime not work on HOC?
 
 Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onPointerLeave`, `onFocus`, `onClick` events.

components/popover/index.tsx

@@ -38,6 +38,7 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
     overlayStyle = {},
     styles,
     classNames: popoverClassNames,
+    motion,
     ...otherProps
   } = props;
   const { popover, getPrefixCls } = React.useContext(ConfigContext);
@@ -110,7 +111,13 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
           <Overlay prefixCls={prefixCls} title={titleNode} content={contentNode} />
         ) : null
       }
-      transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
+      motion={{
+        motionName: getTransitionName(
+          rootPrefixCls,
+          'zoom-big',
+          typeof motion?.motionName === 'string' ? motion?.motionName : undefined,
+        ),
+      }}
       data-popover-inject
     >
       {cloneElement(children, {

components/popover/index.zh-CN.md

@@ -58,13 +58,6 @@ demo:
 
 ## FAQ
 
-### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告？
-
-这是由于 `rc-trigger` 的实现方式导致的，`rc-trigger` 强制要求 children 能够接受 ref，否则就会 fallback 到 findDOMNode，所以 children 需要是原生 html 标签，如果不是，则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。
-
-- `findDOMNode is deprecated` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
-- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
-
 ### 为何有时候 HOC 组件无法生效？
 
 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。

components/splitter/SplitBar.tsx

@@ -6,13 +6,17 @@ import UpOutlined from '@ant-design/icons/UpOutlined';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
 import classNames from 'classnames';
 
+import type { SplitterProps } from './interface';
+
 export interface SplitBarProps {
   index: number;
   active: boolean;
   prefixCls: string;
   resizable: boolean;
   startCollapsible: boolean;
   endCollapsible: boolean;
+  draggerIcon?: SplitterProps['draggerIcon'];
+  collapsibleIcon?: SplitterProps['collapsibleIcon'];
   onOffsetStart: (index: number) => void;
   onOffsetUpdate: (index: number, offsetX: number, offsetY: number) => void;
   onOffsetEnd: VoidFunction;
@@ -39,6 +43,8 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     ariaMin,
     ariaMax,
     resizable,
+    draggerIcon,
+    collapsibleIcon,
     startCollapsible,
     endCollapsible,
     onOffsetStart,
@@ -160,8 +166,22 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
   };
 
   // ======================== Render ========================
-  const StartIcon = vertical ? UpOutlined : LeftOutlined;
-  const EndIcon = vertical ? DownOutlined : RightOutlined;
+  const [startIcon, endIcon, startCustomize, endCustomize] = React.useMemo(() => {
+    let startIcon = null;
+    let endIcon = null;
+    const startCustomize = collapsibleIcon?.start !== undefined;
+    const endCustomize = collapsibleIcon?.end !== undefined;
+
+    if (vertical) {
+      startIcon = startCustomize ? collapsibleIcon.start : <UpOutlined />;
+      endIcon = endCustomize ? collapsibleIcon.end : <DownOutlined />;
+    } else {
+      startIcon = startCustomize ? collapsibleIcon.start : <LeftOutlined />;
+      endIcon = endCustomize ? collapsibleIcon.end : <RightOutlined />;
+    }
+
+    return [startIcon, endIcon, startCustomize, endCustomize];
+  }, [collapsibleIcon, vertical]);
 
   return (
     <div
@@ -184,26 +204,36 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
         className={classNames(`${splitBarPrefixCls}-dragger`, {
           [`${splitBarPrefixCls}-dragger-disabled`]: !resizable,
           [`${splitBarPrefixCls}-dragger-active`]: active,
+          [`${splitBarPrefixCls}-dragger-customize`]: !!draggerIcon,
         })}
         onMouseDown={onMouseDown}
         onTouchStart={onTouchStart}
-      />
+      >
+        {draggerIcon ? (
+          <div className={classNames(`${splitBarPrefixCls}-dragger-icon`)}>{draggerIcon}</div>
+        ) : null}
+      </div>
 
       {/* Start Collapsible */}
       {startCollapsible && (
         <div
           className={classNames(
             `${splitBarPrefixCls}-collapse-bar`,
             `${splitBarPrefixCls}-collapse-bar-start`,
+            {
+              [`${splitBarPrefixCls}-collapse-bar-customize`]: startCustomize,
+            },
           )}
           onClick={() => onCollapse(index, 'start')}
         >
-          <StartIcon
+          <span
             className={classNames(
               `${splitBarPrefixCls}-collapse-icon`,
               `${splitBarPrefixCls}-collapse-start`,
             )}
-          />
+          >
+            {startIcon}
+          </span>
         </div>
       )}
 
@@ -213,15 +243,20 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
           className={classNames(
             `${splitBarPrefixCls}-collapse-bar`,
             `${splitBarPrefixCls}-collapse-bar-end`,
+            {
+              [`${splitBarPrefixCls}-collapse-bar-customize`]: endCustomize,
+            },
           )}
           onClick={() => onCollapse(index, 'end')}
         >
-          <EndIcon
+          <span
             className={classNames(
               `${splitBarPrefixCls}-collapse-icon`,
               `${splitBarPrefixCls}-collapse-end`,
             )}
-          />
+          >
+            {endIcon}
+          </span>
         </div>
       )}
     </div>

components/splitter/Splitter.tsx

@@ -24,6 +24,8 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
     style,
     layout = 'horizontal',
     children,
+    draggerIcon,
+    collapsibleIcon,
     rootClassName,
     onResizeStart,
     onResize,
@@ -177,6 +179,8 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
                 prefixCls={prefixCls}
                 vertical={isVertical}
                 resizable={resizableInfo.resizable}
+                draggerIcon={draggerIcon}
+                collapsibleIcon={collapsibleIcon}
                 ariaNow={stackSizes[idx] * 100}
                 ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
                 ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}