Merge branch 'master' into task/add-file-metadata

.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx

@@ -15,6 +15,12 @@ interface MatchDeprecatedResult {
   reason: string[];
 }
 
+interface ChangelogInfo {
+  version: string;
+  changelog: string;
+  refs: string[];
+}
+
 function matchDeprecated(v: string): MatchDeprecatedResult {
   const match = Object.keys(deprecatedVersions).find((depreciated) =>
     semver.satisfies(v, depreciated),
@@ -89,8 +95,8 @@ const locales = {
   },
 };
 
-const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any }> = (props) => {
-  const { changelog = '', refs = [], styles } = props;
+const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
+  const { changelog = '' } = props;
 
   const parsedChangelog = React.useMemo(() => {
     const nodes: React.ReactNode[] = [];
@@ -124,21 +130,48 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any
     <>
       {/* Changelog */}
       <span>{parsedChangelog}</span>
-      {/* Refs */}
-      {refs?.map((ref) => (
-        <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
-          #{ref.match(/^.*\/(\d+)$/)?.[1]}
-        </a>
-      ))}
     </>
   );
 };
 
-interface ChangelogInfo {
-  version: string;
-  changelog: string;
-  refs: string[];
-}
+const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[]; styles: any }> = ({
+  changelogList,
+  styles,
+}) => {
+  const elements = [];
+  for (let i = 0; i < changelogList.length; i += 1) {
+    const { refs, changelog } = changelogList[i];
+    // Check if the next line is an image link and append it to the current line
+    if (i + 1 < changelogList.length && changelogList[i + 1].changelog.trim().startsWith('<img')) {
+      const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
+      const imgElement = imgDom.querySelector('img');
+      elements.push(
+        <li key={i}>
+          <ParseChangelog changelog={changelog} />
+          {refs?.map((ref) => (
+            <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
+              #{ref.match(/^.*\/(\d+)$/)?.[1]}
+            </a>
+          ))}
+          <br />
+          <img
+            src={imgElement?.getAttribute('src') || ''}
+            alt={imgElement?.getAttribute('alt') || ''}
+            width={imgElement?.getAttribute('width') || ''}
+          />
+        </li>,
+      );
+      i += 1; // Skip the next line
+    } else {
+      elements.push(
+        <li key={i}>
+          <ParseChangelog changelog={changelog} />
+        </li>,
+      );
+    }
+  }
+  return <ul>{elements}</ul>;
+};
 
 const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
   const logFileName = `components-changelog-${lang}.json`;
@@ -210,13 +243,7 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
                 </Popover>
               )}
             </Typography.Title>
-            <ul>
-              {changelogList.map<React.ReactNode>((info, index) => (
-                <li key={index}>
-                  <ParseChangelog {...info} styles={styles} />
-                </li>
-              ))}
-            </ul>
+            <RenderChangelogList changelogList={changelogList} styles={styles} />
           </Typography>
         ),
       };

components/input/style/index.ts

@@ -659,6 +659,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       },
 
       [`${componentCls}-affix-wrapper`]: {
+        height: token.controlHeight,
         borderRadius: 0,
       },
 
@@ -713,12 +714,16 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
         },
       },
 
-      [`&-large ${searchPrefixCls}-button`]: {
-        height: token.controlHeightLG,
+      '&-large': {
+        [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: {
+          height: token.controlHeightLG,
+        },
       },
 
-      [`&-small ${searchPrefixCls}-button`]: {
-        height: token.controlHeightSM,
+      '&-small': {
+        [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: {
+          height: token.controlHeightSM,
+        },
       },
 
       '&-rtl': {

components/select/style/variants.ts

@@ -146,7 +146,7 @@ const genFilledStyle = (token: SelectToken): CSSObject => ({
     ...genBaseFilledStyle(token, {
       bg: token.colorFillTertiary,
       hoverBg: token.colorFillSecondary,
-      activeBorderColor: token.colorPrimary,
+      activeBorderColor: token.activeBorderColor,
       color: token.colorText,
     }),
 

components/splitter/SplitBar.tsx

@@ -52,6 +52,14 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     }
   };
 
+  const onTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => {
+    if (resizable && e.touches.length === 1) {
+      const touch = e.touches[0];
+      setStartPos([touch.pageX, touch.pageY]);
+      onOffsetStart(index);
+    }
+  };
+
   React.useEffect(() => {
     if (startPos) {
       const onMouseMove = (e: MouseEvent) => {
@@ -67,12 +75,31 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
         onOffsetEnd();
       };
 
+      const handleTouchMove = (e: TouchEvent) => {
+        if (e.touches.length === 1) {
+          const touch = e.touches[0];
+          const offsetX = touch.pageX - startPos[0];
+          const offsetY = touch.pageY - startPos[1];
+
+          onOffsetUpdate(index, offsetX, offsetY);
+        }
+      };
+
+      const handleTouchEnd = () => {
+        setStartPos(null);
+        onOffsetEnd();
+      };
+
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
       window.addEventListener('mousemove', onMouseMove);
       window.addEventListener('mouseup', onMouseUp);
 
       return () => {
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
+        window.removeEventListener('touchmove', handleTouchMove);
+        window.removeEventListener('touchend', handleTouchEnd);
       };
     }
   }, [startPos]);
@@ -95,6 +122,7 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
           [`${splitBarPrefixCls}-dragger-active`]: active,
         })}
         onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
       />
 
       {/* Start Collapsible */}

components/splitter/__tests__/index.test.tsx

@@ -113,6 +113,27 @@ describe('Splitter', () => {
       fireEvent.mouseUp(draggerEle);
     }
 
+    function mockTouchDrag(draggerEle: HTMLElement, offset: number) {
+      // Down
+      const touchStart = createEvent.touchStart(draggerEle, {
+        touches: [{}],
+      });
+      (touchStart as any).touches[0].pageX = 0;
+      (touchStart as any).touches[0].pageY = 0;
+      fireEvent(draggerEle, touchStart);
+
+      // Move
+      const touchMove = createEvent.touchMove(draggerEle, {
+        touches: [{}],
+      });
+      (touchMove as any).touches[0].pageX = offset;
+      (touchMove as any).touches[0].pageY = offset;
+      fireEvent(draggerEle, touchMove);
+
+      // Up
+      fireEvent.touchEnd(draggerEle);
+    }
+
     it('The mousemove should work fine', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
@@ -132,6 +153,25 @@ describe('Splitter', () => {
       expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
     });
 
+    it('The touchMove should work fine', async () => {
+      const onResize = jest.fn();
+      const onResizeEnd = jest.fn();
+
+      const { container } = render(
+        <SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
+      );
+
+      // Right
+      mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
+      expect(onResize).toHaveBeenCalledWith([90, 10]);
+      expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
+
+      // Left
+      mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, -200);
+      expect(onResize).toHaveBeenCalledWith([0, 100]);
+      expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
+    });
+
     it('with min', () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();

components/splitter/style/index.ts

@@ -80,6 +80,8 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
   } = token;
 
   const splitBarCls = `${componentCls}-bar`;
+  const splitMaskCls = `${componentCls}-mask`;
+  const splitPanelCls = `${componentCls}-panel`;
 
   const halfTriggerSize = token.calc(splitTriggerSize).div(2).equal();
 
@@ -186,7 +188,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
 
       // =========================== Mask =========================
       // Util dom for handle cursor
-      '&-mask': {
+      [splitMaskCls]: {
         position: 'fixed',
         zIndex: token.zIndexPopupBase,
         inset: 0,
@@ -302,13 +304,13 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
       },
 
       // ========================= Panels =========================
-      '&-panel': {
+      [splitPanelCls]: {
         overflow: 'auto',
         padding: '0 1px',
         scrollbarWidth: 'thin',
         boxSizing: 'border-box',
       },
-      '&-panel-hidden': {
+      [`${splitPanelCls}-hidden`]: {
         padding: 0,
       },
 

components/tour/interface.ts

@@ -6,7 +6,6 @@ import type {
 
 export interface TourProps extends Omit<RCTourProps, 'renderPanel'> {
   steps?: TourStepProps[];
-  className?: string;
   prefixCls?: string;
   current?: number;
   indicatorsRender?: (current: number, total: number) => ReactNode;

package.json

@@ -129,7 +129,7 @@
     "rc-mentions": "~2.16.1",
     "rc-menu": "~9.15.1",
     "rc-motion": "^2.9.3",
-    "rc-notification": "~5.6.1",
+    "rc-notification": "~5.6.2",
     "rc-pagination": "~4.3.0",
     "rc-picker": "~4.6.15",
     "rc-progress": "~4.0.0",