chore: bump trigger to move click to mouseDown (#47775)

* chore: bump trigger

* chore: bump trigger

* chore: bump trigger

* chore: bump trigger

* chore: fix logic

* fix: context tour config

* test: coverage

components/tour/PurePanel.tsx

@@ -1,11 +1,15 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import classNames from 'classnames';
+
+import useClosable from '../_util/hooks/useClosable';
+import { withPureRenderTheme } from '../_util/PurePanel';
+import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import { RawPurePanel as PopoverRawPurePanel } from '../popover/PurePanel';
 import type { TourStepProps } from './interface';
 import TourPanel from './panelRender';
 import useStyle from './style';
-import { withPureRenderTheme } from '../_util/PurePanel';
 
 export interface PurePanelProps extends TourStepProps {}
 
@@ -17,6 +21,8 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
     className,
     style,
     type,
+    closable,
+    closeIcon,
     ...restProps
   } = props;
 
@@ -25,6 +31,19 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
+  const [mergedClosable, mergedCloseIcon] = useClosable({
+    closable,
+    closeIcon,
+    customCloseIconRender: (icon) =>
+      React.isValidElement(icon)
+        ? cloneElement(icon, {
+            className: classNames(icon.props.className, `${prefixCls}-close-icon`),
+          })
+        : icon,
+    defaultCloseIcon: <CloseOutlined />,
+    defaultClosable: true,
+  });
+
   return wrapCSSVar(
     <PopoverRawPurePanel
       prefixCls={prefixCls}
@@ -37,7 +56,16 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
       )}
       style={style}
     >
-      <TourPanel stepProps={{ ...restProps, prefixCls, total }} current={current} type={type} />
+      <TourPanel
+        stepProps={{
+          ...restProps,
+          prefixCls,
+          total,
+          closable: mergedClosable ? { closeIcon: mergedCloseIcon } : undefined,
+        }}
+        current={current}
+        type={type}
+      />
     </PopoverRawPurePanel>,
   );
 };

components/tour/__tests__/index.test.tsx

@@ -564,4 +564,24 @@ describe('Tour', () => {
     expect(document.querySelector('.should-be-primary')).toBeTruthy();
     expect(document.querySelector('.should-be-primary')).toHaveClass('ant-tour-primary');
   });
+
+  // This test is for PurePanel which means safe to remove.
+  describe('PurePanel', () => {
+    const PurePanel = Tour._InternalPanelDoNotUseOrYouWillBeFired;
+
+    it('closeIcon', () => {
+      const { container } = render(
+        <PurePanel
+          closeIcon={[
+            <span className="bamboo" key="bamboo" />,
+            <span className="little" key="little" />,
+          ]}
+          title="a"
+        />,
+      );
+
+      expect(container.querySelector('.bamboo')).toBeTruthy();
+      expect(container.querySelector('.little')).toBeTruthy();
+    });
+  });
 });

components/tour/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import RCTour from '@rc-component/tour';
+import RCTour, { type TourProps as RcTourProps } from '@rc-component/tour';
 import classNames from 'classnames';
 
 import { useZIndex } from '../_util/hooks/useZIndex';
@@ -8,7 +8,7 @@ import zIndexContext from '../_util/zindexContext';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import { useToken } from '../theme/internal';
-import type { TourProps, TourStepProps } from './interface';
+import type { TourProps } from './interface';
 import TourPanel from './panelRender';
 import PurePanel from './PurePanel';
 import useStyle from './style';
@@ -22,6 +22,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     rootClassName,
     indicatorsRender,
     steps,
+    closeIcon,
     ...restProps
   } = props;
   const { getPrefixCls, direction, tour } = useContext<ConfigConsumerProps>(ConfigContext);
@@ -58,12 +59,11 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     rootClassName,
   );
 
-  const mergedRenderPanel = (stepProps: TourStepProps, stepCurrent: number): React.ReactNode => (
+  const mergedRenderPanel: RcTourProps['renderPanel'] = (stepProps, stepCurrent) => (
     <TourPanel
       type={type}
       stepProps={stepProps}
       current={stepCurrent}
-      closeIcon={tour?.closeIcon}
       indicatorsRender={indicatorsRender}
     />
   );
@@ -75,6 +75,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     <zIndexContext.Provider value={contextZIndex}>
       <RCTour
         {...restProps}
+        closeIcon={closeIcon ?? tour?.closeIcon}
         zIndex={zIndex}
         rootClassName={customClassName}
         prefixCls={prefixCls}

components/tour/interface.ts

@@ -1,8 +1,8 @@
+import type { ReactNode } from 'react';
 import type {
   TourProps as RCTourProps,
   TourStepProps as RCTourStepProps,
 } from '@rc-component/tour';
-import type { ReactNode } from 'react';
 
 export interface TourProps extends Omit<RCTourProps, 'renderPanel'> {
   steps?: TourStepProps[];

components/tour/panelRender.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 
-import useClosable from '../_util/hooks/useClosable';
 import type { ButtonProps } from '../button';
 import Button from '../button';
 import { useLocale } from '../locale';
@@ -15,17 +14,18 @@ function isValidNode(node: ReactNode): boolean {
 }
 
 interface TourPanelProps {
-  stepProps: TourStepProps;
+  stepProps: Omit<TourStepProps, 'closable'> & {
+    closable?: Exclude<TourStepProps['closable'], boolean>;
+  };
   current: number;
   type: TourStepProps['type'];
   indicatorsRender?: TourStepProps['indicatorsRender'];
-  closeIcon?: ReactNode;
 }
 
 // Due to the independent design of Panel, it will be too coupled to put in rc-tour,
 // so a set of Panel logic is implemented separately in antd.
 const TourPanel: React.FC<TourPanelProps> = (props) => {
-  const { stepProps, current, type, closeIcon, indicatorsRender } = props;
+  const { stepProps, current, type, indicatorsRender } = props;
   const {
     prefixCls,
     total = 1,
@@ -39,27 +39,24 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
     nextButtonProps,
     prevButtonProps,
     type: stepType,
-    closeIcon: stepCloseIcon,
+    closable,
   } = stepProps;
 
   const mergedType = stepType ?? type;
 
-  const mergedCloseIcon = stepCloseIcon ?? closeIcon;
+  const mergedCloseIcon = React.useMemo(() => {
+    let defaultCloseIcon: React.ReactNode = <CloseOutlined className={`${prefixCls}-close-icon`} />;
 
-  const mergedClosable = mergedCloseIcon !== false && mergedCloseIcon !== null;
+    if (closable && closable.closeIcon) {
+      defaultCloseIcon = closable.closeIcon;
+    }
 
-  const [closable, mergedDisplayCloseIcon] = useClosable({
-    closable: mergedClosable,
-    closeIcon: mergedCloseIcon,
-    // eslint-disable-next-line react/no-unstable-nested-components
-    customCloseIconRender: (icon) => (
+    return (
       <span onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
-        {icon}
+        {defaultCloseIcon}
       </span>
-    ),
-    defaultCloseIcon: <CloseOutlined className={`${prefixCls}-close-icon`} />,
-    defaultClosable: true,
-  });
+    );
+  }, [closable]);
 
   const isLastStep = current === total - 1;
 
@@ -119,7 +116,7 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
   return (
     <div className={`${prefixCls}-content`}>
       <div className={`${prefixCls}-inner`}>
-        {closable && mergedDisplayCloseIcon}
+        {closable && mergedCloseIcon}
         {coverNode}
         {headerNode}
         {descriptionNode}

package.json

@@ -123,42 +123,42 @@
     "@ctrl/tinycolor": "^3.6.1",
     "@rc-component/color-picker": "~1.5.2",
     "@rc-component/mutate-observer": "^1.1.0",
-    "@rc-component/tour": "~1.12.3",
-    "@rc-component/trigger": "^1.18.3",
+    "@rc-component/tour": "~1.14.2",
+    "@rc-component/trigger": "^2.0.0",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "qrcode.react": "^3.1.0",
-    "rc-cascader": "~3.22.0",
+    "rc-cascader": "~3.24.0",
     "rc-checkbox": "~3.2.0",
     "rc-collapse": "~3.7.2",
     "rc-dialog": "~9.4.0",
     "rc-drawer": "~7.1.0",
-    "rc-dropdown": "~4.1.0",
+    "rc-dropdown": "~4.2.0",
     "rc-field-form": "~1.42.1",
     "rc-image": "~7.6.0",
     "rc-input": "~1.4.3",
     "rc-input-number": "~9.0.0",
-    "rc-mentions": "~2.10.1",
-    "rc-menu": "~9.12.4",
+    "rc-mentions": "~2.11.1",
+    "rc-menu": "~9.13.0",
     "rc-motion": "^2.9.0",
     "rc-notification": "~5.3.0",
     "rc-pagination": "~4.0.4",
-    "rc-picker": "~4.2.1",
+    "rc-picker": "~4.3.0",
     "rc-progress": "~3.5.1",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.4.0",
     "rc-segmented": "~2.3.0",
-    "rc-select": "~14.12.1",
+    "rc-select": "~14.13.0",
     "rc-slider": "~10.5.0",
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.42.0",
-    "rc-tabs": "~14.0.0",
+    "rc-tabs": "~14.1.1",
     "rc-textarea": "~1.6.3",
-    "rc-tooltip": "~6.1.3",
+    "rc-tooltip": "~6.2.0",
     "rc-tree": "~5.8.5",
-    "rc-tree-select": "~5.18.0",
+    "rc-tree-select": "~5.19.0",
     "rc-upload": "~4.5.2",
     "rc-util": "^5.39.1",
     "scroll-into-view-if-needed": "^3.1.0",