chore: auto merge branches (#38255)

chore: sync master into feature

components/anchor/Anchor.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import memoizeOne from 'memoize-one';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import * as React from 'react';
 import Affix from '../affix';
@@ -88,87 +87,68 @@ export interface AntAnchor {
   ) => void;
 }
 
-class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigConsumerProps> {
+const AnchorContent: React.FC<InternalAnchorProps> = props => {
-  static contextType = ConfigContext;
+  const {
+    anchorPrefixCls: prefixCls,
+    className = '',
+    style,
+    offsetTop,
+    affix = true,
+    showInkInFixed = false,
+    children,
+    bounds,
+    targetOffset,
+    onClick,
+    onChange,
+    getContainer,
+    getCurrentAnchor,
+  } = props;
 
-  state = {
+  const [links, setLinks] = React.useState<string[]>([]);
-    activeLink: null,
+  const [activeLink, setActiveLink] = React.useState<string | null>(null);
-  };
+  const activeLinkRef = React.useRef<string | null>(activeLink);
 
-  context: ConfigConsumerProps;
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const spanLinkNode = React.useRef<HTMLSpanElement>(null);
+  const animating = React.useRef<boolean>(false);
 
-  private wrapperRef = React.createRef<HTMLDivElement>();
+  const { direction, getTargetContainer } = React.useContext<ConfigConsumerProps>(ConfigContext);
 
-  private inkNode: HTMLSpanElement;
+  const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
 
-  // scroll scope's container
+  const dependencyListItem: React.DependencyList[number] = JSON.stringify(links);
-  private scrollContainer: HTMLElement | Window;
 
-  private links: string[] = [];
+  const registerLink = React.useCallback<AntAnchor['registerLink']>(
-
+    link => {
-  private scrollEvent: ReturnType<typeof addEventListener>;
+      if (!links.includes(link)) {
-
+        setLinks(prev => [...prev, link]);
-  private animating: boolean;
-
-  private prefixCls?: string;
-
-  // Context
-  registerLink: AntAnchor['registerLink'] = link => {
-    if (!this.links.includes(link)) {
-      this.links.push(link);
-    }
-  };
-
-  unregisterLink: AntAnchor['unregisterLink'] = link => {
-    const index = this.links.indexOf(link);
-    if (index !== -1) {
-      this.links.splice(index, 1);
-    }
-  };
-
-  getContainer = () => {
-    const { getTargetContainer } = this.context;
-    const { getContainer } = this.props;
-
-    const getFunc = getContainer ?? getTargetContainer ?? getDefaultContainer;
-
-    return getFunc();
-  };
-
-  componentDidMount() {
-    this.scrollContainer = this.getContainer();
-    this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
-    this.handleScroll();
-  }
-
-  componentDidUpdate() {
-    const { getCurrentAnchor } = this.props;
-    const { activeLink } = this.state;
-    if (this.scrollEvent) {
-      const currentContainer = this.getContainer();
-      if (this.scrollContainer !== currentContainer) {
-        this.scrollContainer = currentContainer;
-        this.scrollEvent.remove();
-        this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
-        this.handleScroll();
       }
-    }
+    },
-    if (typeof getCurrentAnchor === 'function') {
+    [dependencyListItem],
-      this.setCurrentActiveLink(getCurrentAnchor(activeLink || ''), false);
+  );
-    }
-    this.updateInk();
-  }
 
-  componentWillUnmount() {
+  const unregisterLink = React.useCallback<AntAnchor['unregisterLink']>(
-    if (this.scrollEvent) {
+    link => {
-      this.scrollEvent.remove();
+      if (links.includes(link)) {
-    }
+        setLinks(prev => prev.filter(i => i !== link));
-  }
+      }
+    },
+    [dependencyListItem],
+  );
 
-  getCurrentAnchor(offsetTop = 0, bounds = 5): string {
+  const updateInk = () => {
-    const linkSections: Array<Section> = [];
+    const linkNode = wrapperRef.current?.querySelector<HTMLElement>(
-    const container = this.getContainer();
+      `.${prefixCls}-link-title-active`,
-    this.links.forEach(link => {
+    );
+    if (linkNode && spanLinkNode.current) {
+      spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+    }
+  };
+
+  const getInternalCurrentAnchor = (_links: string[], _offsetTop = 0, _bounds = 5): string => {
+    const linkSections: Section[] = [];
+    const container = getCurrentContainer();
+    _links.forEach(link => {
       const sharpLinkMatch = sharpMatcherRegx.exec(link?.toString());
       if (!sharpLinkMatch) {
         return;
@@ -176,7 +156,7 @@ class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigCon
       const target = document.getElementById(sharpLinkMatch[1]);
       if (target) {
         const top = getOffsetTop(target, container);
-        if (top < offsetTop + bounds) {
+        if (top < _offsetTop + _bounds) {
           linkSections.push({ link, top });
         }
       }
@@ -187,161 +167,149 @@ class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigCon
       return maxSection.link;
     }
     return '';
-  }
-
-  handleScrollTo = (link: string) => {
-    const { offsetTop, targetOffset } = this.props;
-
-    this.setCurrentActiveLink(link);
-    const container = this.getContainer();
-    const scrollTop = getScroll(container, true);
-    const sharpLinkMatch = sharpMatcherRegx.exec(link);
-    if (!sharpLinkMatch) {
-      return;
-    }
-    const targetElement = document.getElementById(sharpLinkMatch[1]);
-    if (!targetElement) {
-      return;
-    }
-
-    const eleOffsetTop = getOffsetTop(targetElement, container);
-    let y = scrollTop + eleOffsetTop;
-    y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
-    this.animating = true;
-
-    scrollTo(y, {
-      callback: () => {
-        this.animating = false;
-      },
-      getContainer: this.getContainer,
-    });
   };
 
-  saveInkNode = (node: HTMLSpanElement) => {
+  const setCurrentActiveLink = (link: string) => {
-    this.inkNode = node;
+    if (activeLinkRef.current === link) {
-  };
-
-  setCurrentActiveLink = (link: string, triggerChange = true) => {
-    const { activeLink } = this.state;
-    const { onChange, getCurrentAnchor } = this.props;
-    if (activeLink === link) {
       return;
     }
+
     // https://github.com/ant-design/ant-design/issues/30584
-    this.setState({
+    const newLink = typeof getCurrentAnchor === 'function' ? getCurrentAnchor(link) : link;
-      activeLink: typeof getCurrentAnchor === 'function' ? getCurrentAnchor(link) : link,
+    setActiveLink(newLink);
-    });
+    activeLinkRef.current = newLink;
-    if (triggerChange) {
+
-      onChange?.(link);
+    // onChange should respect the original link (which may caused by
-    }
+    // window scroll or user click), not the new link
+    onChange?.(link);
   };
 
-  handleScroll = () => {
+  const handleScroll = React.useCallback(() => {
-    if (this.animating) {
+    if (animating.current) {
       return;
     }
-    const { offsetTop, bounds, targetOffset } = this.props;
+    if (typeof getCurrentAnchor === 'function') {
-    const currentActiveLink = this.getCurrentAnchor(
+      return;
+    }
+    const currentActiveLink = getInternalCurrentAnchor(
+      links,
       targetOffset !== undefined ? targetOffset : offsetTop || 0,
       bounds,
     );
-    this.setCurrentActiveLink(currentActiveLink);
+    setCurrentActiveLink(currentActiveLink);
-  };
+  }, [dependencyListItem, targetOffset, offsetTop]);
 
-  updateInk = () => {
+  const handleScrollTo = React.useCallback<(link: string) => void>(
-    const { prefixCls, wrapperRef } = this;
+    link => {
-    const anchorNode = wrapperRef.current;
+      setCurrentActiveLink(link);
-    const linkNode = anchorNode?.querySelector<HTMLElement>(`.${prefixCls}-link-title-active`);
+      const container = getCurrentContainer();
-    if (linkNode) {
+      const scrollTop = getScroll(container, true);
-      this.inkNode.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+      const sharpLinkMatch = sharpMatcherRegx.exec(link);
-    }
+      if (!sharpLinkMatch) {
-  };
+        return;
+      }
+      const targetElement = document.getElementById(sharpLinkMatch[1]);
+      if (!targetElement) {
+        return;
+      }
 
-  getMemoizedContextValue = memoizeOne(
+      const eleOffsetTop = getOffsetTop(targetElement, container);
-    (link: AntAnchor['activeLink'], onClickFn: AnchorProps['onClick']): AntAnchor => ({
+      let y = scrollTop + eleOffsetTop;
-      registerLink: this.registerLink,
+      y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
-      unregisterLink: this.unregisterLink,
+      animating.current = true;
-      scrollTo: this.handleScrollTo,
+      scrollTo(y, {
-      activeLink: link,
+        getContainer: getCurrentContainer,
-      onClick: onClickFn,
+        callback() {
-    }),
+          animating.current = false;
+        },
+      });
+    },
+    [targetOffset, offsetTop],
   );
 
-  render() {
+  const inkClass = classNames(
-    const { direction } = this.context;
+    {
-    const {
+      [`${prefixCls}-ink-ball-visible`]: activeLink,
-      anchorPrefixCls: prefixCls,
+    },
-      className = '',
+    `${prefixCls}-ink-ball`,
-      style,
+  );
-      offsetTop,
-      affix = true,
-      showInkInFixed = false,
-      children,
-      onClick,
-    } = this.props;
-    const { activeLink } = this.state;
 
-    // To support old version react.
+  const wrapperClass = classNames(
-    // Have to add prefixCls on the instance.
+    `${prefixCls}-wrapper`,
-    // https://github.com/facebook/react/issues/12397
+    {
-    this.prefixCls = prefixCls;
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
-    const inkClass = classNames(`${prefixCls}-ink-ball`, {
+  const anchorClass = classNames(prefixCls, {
-      visible: activeLink,
+    [`${prefixCls}-fixed`]: !affix && !showInkInFixed,
-    });
+  });
 
-    const wrapperClass = classNames(
+  const wrapperStyle: React.CSSProperties = {
-      `${prefixCls}-wrapper`,
+    maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
-      {
+    ...style,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
+  };
-      },
-      className,
-    );
 
-    const anchorClass = classNames(prefixCls, {
+  const anchorContent = (
-      [`${prefixCls}-fixed`]: !affix && !showInkInFixed,
+    <div ref={wrapperRef} className={wrapperClass} style={wrapperStyle}>
-    });
+      <div className={anchorClass}>
-
+        <div className={`${prefixCls}-ink`}>
-    const wrapperStyle: React.CSSProperties = {
+          <span className={inkClass} ref={spanLinkNode} />
-      maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
-      ...style,
-    };
-
-    const anchorContent = (
-      <div ref={this.wrapperRef} className={wrapperClass} style={wrapperStyle}>
-        <div className={anchorClass}>
-          <div className={`${prefixCls}-ink`}>
-            <span className={inkClass} ref={this.saveInkNode} />
-          </div>
-          {children}
         </div>
+        {children}
       </div>
-    );
+    </div>
+  );
 
-    const contextValue = this.getMemoizedContextValue(activeLink, onClick);
+  React.useEffect(() => {
+    const scrollContainer = getCurrentContainer();
+    const scrollEvent = addEventListener(scrollContainer, 'scroll', handleScroll);
+    handleScroll();
+    return () => {
+      scrollEvent?.remove();
+    };
+  }, [dependencyListItem]);
 
-    return (
+  React.useEffect(() => {
-      <AnchorContext.Provider value={contextValue}>
+    if (typeof getCurrentAnchor === 'function') {
-        {affix ? (
+      setCurrentActiveLink(getCurrentAnchor(activeLinkRef.current || ''));
-          <Affix offsetTop={offsetTop} target={this.getContainer}>
+    }
-            {anchorContent}
+  }, [getCurrentAnchor]);
-          </Affix>
-        ) : (
-          anchorContent
-        )}
-      </AnchorContext.Provider>
-    );
-  }
-}
 
-// just use in test
+  React.useEffect(() => {
-export type InternalAnchorClass = Anchor;
+    updateInk();
+  }, [getCurrentAnchor, dependencyListItem, activeLink]);
 
-const AnchorFC = React.forwardRef<Anchor, AnchorProps>((props, ref) => {
+  const memoizedContextValue = React.useMemo<AntAnchor>(
+    () => ({
+      registerLink,
+      unregisterLink,
+      scrollTo: handleScrollTo,
+      activeLink,
+      onClick,
+    }),
+    [activeLink, onClick, handleScrollTo],
+  );
+
+  return (
+    <AnchorContext.Provider value={memoizedContextValue}>
+      {affix ? (
+        <Affix offsetTop={offsetTop} target={getCurrentContainer}>
+          {anchorContent}
+        </Affix>
+      ) : (
+        anchorContent
+      )}
+    </AnchorContext.Provider>
+  );
+};
+
+const Anchor: React.FC<AnchorProps> = props => {
   const { prefixCls: customizePrefixCls } = props;
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
   const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls);
-  return <Anchor {...props} ref={ref} anchorPrefixCls={anchorPrefixCls} />;
+  return <AnchorContent {...props} anchorPrefixCls={anchorPrefixCls} />;
-});
+};
 
-export default AnchorFC;
+export default Anchor;

components/anchor/AnchorLink.tsx

@@ -26,7 +26,7 @@ const AnchorLink: React.FC<AnchorLinkProps> = props => {
     return () => {
       unregisterLink?.(href);
     };
-  }, [href]);
+  }, [href, registerLink, unregisterLink]);
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     onClick?.(e, { title, href });

components/anchor/__tests__/Anchor.test.tsx

@@ -1,20 +1,9 @@
 import React from 'react';
 import Anchor from '..';
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
-import type { InternalAnchorClass } from '../Anchor';
 
 const { Link } = Anchor;
 
-function createGetContainer(id: string) {
-  return () => {
-    const container = document.getElementById(id);
-    if (container == null) {
-      throw new Error();
-    }
-    return container;
-  };
-}
-
 function createDiv() {
   const root = document.createElement('div');
   document.body.appendChild(root);
@@ -57,122 +46,77 @@ describe('Anchor Render', () => {
     getClientRectsMock.mockRestore();
   });
 
-  it('Anchor render perfectly', () => {
+  it('renders correctly', () => {
     const hash = getHashUrl();
-    let anchorInstance: InternalAnchorClass;
     const { container } = render(
-      <Anchor
+      <Anchor>
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href={`#${hash}`} title={hash} />
       </Anchor>,
     );
-
+    expect(container.querySelector(`a[href="#${hash}"]`)).not.toBe(null);
-    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
-    anchorInstance!.handleScroll();
-    expect(anchorInstance!.state).not.toBe(null);
   });
 
-  it('Anchor render perfectly for complete href - click', async () => {
+  it('actives the target when clicking a link', async () => {
     const hash = getHashUrl();
-    let anchorInstance: InternalAnchorClass;
     const { container } = render(
-      <Anchor
+      <Anchor prefixCls="ant-anchor">
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href={`http://www.example.com/#${hash}`} title={hash} />
       </Anchor>,
     );
-    fireEvent.click(container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!);
+    const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!;
+    fireEvent.click(link);
     await waitFakeTimer();
-    expect(anchorInstance!.state!.activeLink).toBe(`http://www.example.com/#${hash}`);
+    expect(link.classList).toContain('ant-anchor-link-title-active');
   });
 
-  it('Anchor render perfectly for complete href - hash router', async () => {
+  it('scrolls the page when clicking a link', async () => {
     const root = createDiv();
     const scrollToSpy = jest.spyOn(window, 'scrollTo');
     render(<div id="/faq?locale=en#Q1">Q1</div>, { container: root });
-    let anchorInstance: InternalAnchorClass;
+    const { container } = render(
-    render(
+      <Anchor>
-      <Anchor
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href="/#/faq?locale=en#Q1" title="Q1" />
       </Anchor>,
     );
-    anchorInstance!.handleScrollTo('/#/faq?locale=en#Q1');
+    const link = container.querySelector(`a[href="/#/faq?locale=en#Q1"]`)!;
+    fireEvent.click(link);
     await waitFakeTimer();
-    expect(anchorInstance!.state.activeLink).toBe('/#/faq?locale=en#Q1');
     expect(scrollToSpy).toHaveBeenCalled();
   });
 
-  it('Anchor render perfectly for complete href - scroll', async () => {
+  it('handleScroll should not be triggered when scrolling caused by clicking a link', async () => {
-    const hash = getHashUrl();
+    const hash1 = getHashUrl();
+    const hash2 = getHashUrl();
     const root = createDiv();
-    render(<div id={hash}>Hello</div>, { container: root });
+    const onChange = jest.fn();
-    let anchorInstance: InternalAnchorClass;
     render(
-      <Anchor
+      <div>
-        ref={node => {
+        <div id={hash1}>Hello</div>
-          anchorInstance = node as InternalAnchorClass;
+        <div id={hash2}>World</div>
-        }}
+      </div>,
-      >
+      { container: root },
-        <Link href={`http://www.example.com/#${hash}`} title={hash} />
+    );
+    const { container } = render(
+      <Anchor onChange={onChange}>
+        <Link href={`#${hash1}`} title={hash1} />
+        <Link href={`#${hash2}`} title={hash2} />
       </Anchor>,
     );
-    anchorInstance!.handleScroll();
+    onChange.mockClear();
+
+    const link = container.querySelector(`a[href="#${hash2}"]`)!;
+    // this will trigger 1 onChange
+    fireEvent.click(link);
+    // smooth scroll caused by clicking needs time to finish.
+    // we scroll the window before it finish, the scroll listener should not be triggered,
+    fireEvent.scroll(window);
+
     await waitFakeTimer();
-    expect(anchorInstance!.state!.activeLink).toBe(`http://www.example.com/#${hash}`);
+    // if the scroll listener is triggered, we will get 2 onChange, now we expect only 1.
+    expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it('Anchor render perfectly for complete href - scrollTo', async () => {
+  it('should update DOM when children are unmounted', () => {
-    const hash = getHashUrl();
-    const scrollToSpy = jest.spyOn(window, 'scrollTo');
-    const root = createDiv();
-    render(<div id={`#${hash}`}>Hello</div>, { container: root });
-    let anchorInstance: InternalAnchorClass;
-    render(
-      <Anchor
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`##${hash}`} title={hash} />
-      </Anchor>,
-    );
-
-    anchorInstance!.handleScrollTo(`##${hash}`);
-    await waitFakeTimer();
-    expect(anchorInstance!.state.activeLink).toBe(`##${hash}`);
-    const calls = scrollToSpy.mock.calls.length;
-    expect(scrollToSpy.mock.calls.length).toBe(calls);
-  });
-
-  it('should remove listener when unmount', async () => {
-    const hash = getHashUrl();
-    let anchorInstance: InternalAnchorClass;
-    const { unmount } = render(
-      <Anchor
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`#${hash}`} title={hash} />
-      </Anchor>,
-    );
-
-    const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
-    unmount();
-    expect(removeListenerSpy).toHaveBeenCalled();
-  });
-
-  it('should unregister link when unmount children', () => {
     const hash = getHashUrl();
     const { container, rerender } = render(
       <Anchor>
@@ -187,32 +131,94 @@ describe('Anchor Render', () => {
     expect(container.querySelector('.ant-anchor-link-title')).toBeFalsy();
   });
 
-  it('should update links when link href update', async () => {
+  it('should update DOM when link href is changed', async () => {
     const hash = getHashUrl();
-    let anchorInstance: InternalAnchorClass;
     function AnchorUpdate({ href }: { href: string }) {
       return (
-        <Anchor
+        <Anchor>
-          ref={node => {
-            anchorInstance = node as InternalAnchorClass;
-          }}
-        >
           <Link href={href} title={hash} />
         </Anchor>
       );
     }
-    const { rerender } = render(<AnchorUpdate href={`#${hash}`} />);
+    const { container, rerender } = render(<AnchorUpdate href={`#${hash}`} />);
 
-    if (anchorInstance! == null) {
+    expect(container.querySelector(`a[href="#${hash}"]`)).toBeTruthy();
-      throw new Error('anchorInstance should not be null');
-    }
-
-    expect((anchorInstance as any)!.links).toEqual([`#${hash}`]);
     rerender(<AnchorUpdate href={`#${hash}_1`} />);
-    expect((anchorInstance as any)!.links).toEqual([`#${hash}_1`]);
+    expect(container.querySelector(`a[href="#${hash}_1"]`)).toBeTruthy();
   });
 
-  it('Anchor onClick event', () => {
+  it('targetOffset prop', async () => {
+    const hash = getHashUrl();
+
+    const scrollToSpy = jest.spyOn(window, 'scrollTo');
+    const root = createDiv();
+    render(<h1 id={hash}>Hello</h1>, { container: root });
+    const { container, rerender } = render(
+      <Anchor>
+        <Link href={`#${hash}`} title={hash} />
+      </Anchor>,
+    );
+
+    const setProps = (props: Record<string, any>) =>
+      rerender(
+        <Anchor {...props}>
+          <Link href={`#${hash}`} title={hash} />
+        </Anchor>,
+      );
+
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
+    await waitFakeTimer();
+    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
+
+    setProps({ offsetTop: 100 });
+
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
+    await waitFakeTimer();
+    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
+
+    setProps({ targetOffset: 200 });
+
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
+    await waitFakeTimer();
+    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
+  });
+
+  // https://github.com/ant-design/ant-design/issues/31941
+  it('targetOffset prop when contain spaces', async () => {
+    const hash = `${getHashUrl()} s p a c e s`;
+
+    const scrollToSpy = jest.spyOn(window, 'scrollTo');
+    const root = createDiv();
+    render(<h1 id={hash}>Hello</h1>, { container: root });
+    const { container, rerender } = render(
+      <Anchor>
+        <Link href={`#${hash}`} title={hash} />
+      </Anchor>,
+    );
+
+    const setProps = (props: Record<string, any>) =>
+      rerender(
+        <Anchor {...props}>
+          <Link href={`#${hash}`} title={hash} />
+        </Anchor>,
+      );
+
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
+    await waitFakeTimer();
+    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
+
+    setProps({ offsetTop: 100 });
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
+    await waitFakeTimer();
+    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
+
+    setProps({ targetOffset: 200 });
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
+    await waitFakeTimer();
+    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
+  });
+
+  it('onClick event', () => {
     const hash = getHashUrl();
     let event;
     let link;
@@ -226,297 +232,23 @@ describe('Anchor Render', () => {
 
     const href = `#${hash}`;
     const title = hash;
-    let anchorInstance: InternalAnchorClass;
     const { container } = render(
-      <Anchor
+      <Anchor onClick={handleClick}>
-        onClick={handleClick}
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href={href} title={title} />
       </Anchor>,
     );
 
     fireEvent.click(container.querySelector(`a[href="${href}"]`)!);
-    anchorInstance!.handleScroll();
     expect(event).not.toBe(undefined);
     expect(link).toEqual({ href, title });
   });
 
-  it('Different function returns the same DOM', async () => {
+  it('onChange event', () => {
-    const hash = getHashUrl();
-    const root = createDiv();
-    render(<div id={hash}>Hello</div>, { container: root });
-    const getContainerA = createGetContainer(hash);
-    const getContainerB = createGetContainer(hash);
-    let anchorInstance: InternalAnchorClass;
-    const { rerender } = render(
-      <Anchor
-        getContainer={getContainerA}
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`#${hash}`} title={hash} />
-      </Anchor>,
-    );
-
-    const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
-    await waitFakeTimer();
-    rerender(
-      <Anchor getContainer={getContainerB}>
-        <Link href={`#${hash}`} title={hash} />
-      </Anchor>,
-    );
-    expect(removeListenerSpy).not.toHaveBeenCalled();
-  });
-
-  it('Different function returns different DOM', async () => {
-    const hash1 = getHashUrl();
-    const hash2 = getHashUrl();
-    const root = createDiv();
-    render(
-      <div>
-        <div id={hash1}>Hello</div>
-        <div id={hash2}>World</div>
-      </div>,
-      { container: root },
-    );
-    const getContainerA = createGetContainer(hash1);
-    const getContainerB = createGetContainer(hash2);
-    let anchorInstance: InternalAnchorClass;
-    const { rerender } = render(
-      <Anchor
-        getContainer={getContainerA}
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`#${hash1}`} title={hash1} />
-        <Link href={`#${hash2}`} title={hash2} />
-      </Anchor>,
-    );
-
-    const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
-    expect(removeListenerSpy).not.toHaveBeenCalled();
-    await waitFakeTimer();
-    rerender(
-      <Anchor getContainer={getContainerB}>
-        <Link href={`#${hash1}`} title={hash1} />
-        <Link href={`#${hash2}`} title={hash2} />
-      </Anchor>,
-    );
-    expect(removeListenerSpy).toHaveBeenCalled();
-  });
-
-  it('Same function returns the same DOM', () => {
-    const hash = getHashUrl();
-    const root = createDiv();
-    render(<div id={hash}>Hello</div>, { container: root });
-    const getContainer = createGetContainer(hash);
-    let anchorInstance: InternalAnchorClass;
-    const { container } = render(
-      <Anchor
-        getContainer={getContainer}
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`#${hash}`} title={hash} />
-      </Anchor>,
-    );
-
-    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
-
-    anchorInstance!.handleScroll();
-    expect(anchorInstance!.state).not.toBe(null);
-  });
-
-  it('Same function returns different DOM', async () => {
-    const hash1 = getHashUrl();
-    const hash2 = getHashUrl();
-    const root = createDiv();
-    render(
-      <div>
-        <div id={hash1}>Hello</div>
-        <div id={hash2}>World</div>
-      </div>,
-      { container: root },
-    );
-    const holdContainer = {
-      container: document.getElementById(hash1),
-    };
-    const getContainer = () => {
-      if (holdContainer.container == null) {
-        throw new Error('container should not be null');
-      }
-      return holdContainer.container;
-    };
-    let anchorInstance: InternalAnchorClass;
-    const { rerender } = render(
-      <Anchor
-        getContainer={getContainer}
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`#${hash1}`} title={hash1} />
-        <Link href={`#${hash2}`} title={hash2} />
-      </Anchor>,
-    );
-    const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
-    expect(removeListenerSpy).not.toHaveBeenCalled();
-    await waitFakeTimer();
-    holdContainer.container = document.getElementById(hash2);
-    rerender(
-      <Anchor getContainer={getContainer}>
-        <Link href={`#${hash1}`} title={hash1} />
-        <Link href={`#${hash2}`} title={hash2} />
-      </Anchor>,
-    );
-    expect(removeListenerSpy).toHaveBeenCalled();
-  });
-
-  it('Anchor targetOffset prop', async () => {
-    const hash = getHashUrl();
-    let dateNowMock: jest.SpyInstance;
-
-    function dataNowMockFn() {
-      let start = 0;
-
-      const handler = () => {
-        start += 1000;
-        return start;
-      };
-
-      return jest.spyOn(Date, 'now').mockImplementation(handler);
-    }
-
-    dateNowMock = dataNowMockFn();
-
-    const scrollToSpy = jest.spyOn(window, 'scrollTo');
-    const root = createDiv();
-    render(<h1 id={hash}>Hello</h1>, { container: root });
-    let anchorInstance: InternalAnchorClass;
-    const { rerender } = render(
-      <Anchor
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`#${hash}`} title={hash} />
-      </Anchor>,
-    );
-
-    const setProps = (props: Record<string, any>) =>
-      rerender(
-        <Anchor
-          ref={node => {
-            anchorInstance = node as InternalAnchorClass;
-          }}
-          {...props}
-        >
-          <Link href={`#${hash}`} title={hash} />
-        </Anchor>,
-      );
-
-    anchorInstance!.handleScrollTo(`#${hash}`);
-    await waitFakeTimer();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
-    dateNowMock = dataNowMockFn();
-
-    setProps({ offsetTop: 100 });
-
-    anchorInstance!.handleScrollTo(`#${hash}`);
-    await waitFakeTimer();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
-    dateNowMock = dataNowMockFn();
-
-    setProps({ targetOffset: 200 });
-
-    anchorInstance!.handleScrollTo(`#${hash}`);
-    await waitFakeTimer();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
-
-    dateNowMock.mockRestore();
-  });
-
-  // https://github.com/ant-design/ant-design/issues/31941
-  it('Anchor targetOffset prop when contain spaces', async () => {
-    const hash = `${getHashUrl()} s p a c e s`;
-    let dateNowMock: jest.SpyInstance;
-
-    function dataNowMockFn() {
-      let start = 0;
-
-      const handler = () => {
-        start += 1000;
-        return start;
-      };
-
-      return jest.spyOn(Date, 'now').mockImplementation(handler);
-    }
-
-    dateNowMock = dataNowMockFn();
-
-    const scrollToSpy = jest.spyOn(window, 'scrollTo');
-    const root = createDiv();
-    render(<h1 id={hash}>Hello</h1>, { container: root });
-    let anchorInstance: InternalAnchorClass;
-    const { rerender } = render(
-      <Anchor
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
-        <Link href={`#${hash}`} title={hash} />
-      </Anchor>,
-    );
-
-    const setProps = (props: Record<string, any>) =>
-      rerender(
-        <Anchor
-          ref={node => {
-            anchorInstance = node as InternalAnchorClass;
-          }}
-          {...props}
-        >
-          <Link href={`#${hash}`} title={hash} />
-        </Anchor>,
-      );
-
-    anchorInstance!.handleScrollTo(`#${hash}`);
-    await waitFakeTimer();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
-    dateNowMock = dataNowMockFn();
-
-    setProps({ offsetTop: 100 });
-    anchorInstance!.handleScrollTo(`#${hash}`);
-    await waitFakeTimer();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
-    dateNowMock = dataNowMockFn();
-
-    setProps({ targetOffset: 200 });
-    anchorInstance!.handleScrollTo(`#${hash}`);
-    await waitFakeTimer();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
-
-    dateNowMock.mockRestore();
-  });
-
-  it('Anchor onChange prop', async () => {
     const hash1 = getHashUrl();
     const hash2 = getHashUrl();
     const onChange = jest.fn();
-    let anchorInstance: InternalAnchorClass;
+    const { container } = render(
-    render(
+      <Anchor onChange={onChange}>
-      <Anchor
-        onChange={onChange}
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href={`#${hash1}`} title={hash1} />
         <Link href={`#${hash2}`} title={hash2} />
       </Anchor>,
@@ -526,89 +258,57 @@ describe('Anchor Render', () => {
     );
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    anchorInstance!.handleScrollTo(hash2);
+    fireEvent.click(container.querySelector(`a[href="#${hash2}"]`)!);
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveBeenCalledWith(hash2);
+    expect(onChange).toHaveBeenLastCalledWith(`#${hash2}`);
   });
 
-  it('invalid hash', async () => {
+  it('handles invalid hash correctly', () => {
-    let anchorInstance: InternalAnchorClass;
     const { container } = render(
-      <Anchor
+      <Anchor>
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href="notexsited" title="title" />
       </Anchor>,
     );
 
-    fireEvent.click(container.querySelector(`a[href="notexsited"]`)!);
+    const link = container.querySelector(`a[href="notexsited"]`)!;
-
+    fireEvent.click(link);
-    anchorInstance!.handleScrollTo('notexsited');
+    expect(container.querySelector(`.ant-anchor-link-title-active`)?.textContent).toBe('title');
-    expect(anchorInstance!.state).not.toBe(null);
   });
 
   it('test edge case when getBoundingClientRect return zero size', async () => {
     getBoundingClientRectMock.mockReturnValue({ width: 0, height: 0, top: 1000 } as DOMRect);
     const hash = getHashUrl();
-    let dateNowMock: jest.SpyInstance;
-
-    function dataNowMockFn() {
-      let start = 0;
-
-      const handler = () => {
-        start += 1000;
-        return start;
-      };
-
-      return jest.spyOn(Date, 'now').mockImplementation(handler);
-    }
-
-    dateNowMock = dataNowMockFn();
 
     const scrollToSpy = jest.spyOn(window, 'scrollTo');
     const root = createDiv();
     render(<h1 id={hash}>Hello</h1>, { container: root });
-    let anchorInstance: InternalAnchorClass;
+    const { container, rerender } = render(
-    const { rerender } = render(
+      <Anchor>
-      <Anchor
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href={`#${hash}`} title={hash} />
       </Anchor>,
     );
 
     const setProps = (props: Record<string, any>) =>
       rerender(
-        <Anchor
+        <Anchor {...props}>
-          ref={node => {
-            anchorInstance = node as InternalAnchorClass;
-          }}
-          {...props}
-        >
           <Link href={`#${hash}`} title={hash} />
         </Anchor>,
       );
-    anchorInstance!.handleScrollTo(`#${hash}`);
+
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
     await waitFakeTimer();
     expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
-    dateNowMock = dataNowMockFn();
 
     setProps({ offsetTop: 100 });
-    anchorInstance!.handleScrollTo(`#${hash}`);
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
     await waitFakeTimer();
     expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
-    dateNowMock = dataNowMockFn();
 
     setProps({ targetOffset: 200 });
-    anchorInstance!.handleScrollTo(`#${hash}`);
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
     await waitFakeTimer();
     expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
 
-    dateNowMock.mockRestore();
     getBoundingClientRectMock.mockReturnValue({
       width: 100,
       height: 100,
@@ -618,102 +318,61 @@ describe('Anchor Render', () => {
 
   it('test edge case when container is not windows', async () => {
     const hash = getHashUrl();
-    let dateNowMock: jest.SpyInstance;
-
-    function dataNowMockFn() {
-      let start = 0;
-
-      const handler = () => {
-        start += 1000;
-        return start;
-      };
-
-      return jest.spyOn(Date, 'now').mockImplementation(handler);
-    }
-
-    dateNowMock = dataNowMockFn();
 
     const scrollToSpy = jest.spyOn(window, 'scrollTo');
     const root = createDiv();
     render(<h1 id={hash}>Hello</h1>, { container: root });
 
-    let anchorInstance: InternalAnchorClass;
+    const { container, rerender } = render(
-    const { rerender } = render(
+      <Anchor getContainer={() => document.body}>
-      <Anchor
-        getContainer={() => document.body}
-        ref={node => {
-          anchorInstance = node as InternalAnchorClass;
-        }}
-      >
         <Link href={`#${hash}`} title={hash} />
       </Anchor>,
     );
 
     const setProps = (props: Record<string, any>) =>
       rerender(
-        <Anchor
+        <Anchor getContainer={() => document.body} {...props}>
-          getContainer={() => document.body}
-          ref={node => {
-            anchorInstance = node as InternalAnchorClass;
-          }}
-          {...props}
-        >
           <Link href={`#${hash}`} title={hash} />
         </Anchor>,
       );
-    anchorInstance!.handleScrollTo(`#${hash}`);
+
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
     await waitFakeTimer();
     expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
-    dateNowMock = dataNowMockFn();
 
     setProps({ offsetTop: 100 });
-    anchorInstance!.handleScrollTo(`#${hash}`);
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
     await waitFakeTimer();
     expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
-    dateNowMock = dataNowMockFn();
+
     setProps({ targetOffset: 200 });
-    anchorInstance!.handleScrollTo(`#${hash}`);
+    fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
     await waitFakeTimer();
     expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
-
-    dateNowMock.mockRestore();
   });
 
   describe('getCurrentAnchor', () => {
-    it('Anchor getCurrentAnchor prop', () => {
+    it('getCurrentAnchor prop', () => {
       const hash1 = getHashUrl();
       const hash2 = getHashUrl();
       const getCurrentAnchor = () => `#${hash2}`;
-      let anchorInstance: InternalAnchorClass;
+      const { container } = render(
-      render(
+        <Anchor getCurrentAnchor={getCurrentAnchor}>
-        <Anchor
-          getCurrentAnchor={getCurrentAnchor}
-          ref={node => {
-            anchorInstance = node as InternalAnchorClass;
-          }}
-        >
           <Link href={`#${hash1}`} title={hash1} />
           <Link href={`#${hash2}`} title={hash2} />
         </Anchor>,
       );
 
-      expect(anchorInstance!.state.activeLink).toBe(`#${hash2}`);
+      expect(container.querySelector(`.ant-anchor-link-title-active`)?.textContent).toBe(hash2);
     });
 
     // https://github.com/ant-design/ant-design/issues/30584
-    it('should trigger onChange when have getCurrentAnchor', async () => {
+    it('should trigger onChange when have getCurrentAnchor', () => {
       const hash1 = getHashUrl();
       const hash2 = getHashUrl();
       const onChange = jest.fn();
-      let anchorInstance: InternalAnchorClass;
+      const { container } = render(
-      render(
+        <Anchor onChange={onChange} getCurrentAnchor={() => hash1}>
-        <Anchor
-          onChange={onChange}
-          getCurrentAnchor={() => hash1}
-          ref={node => {
-            anchorInstance = node as InternalAnchorClass;
-          }}
-        >
           <Link href={`#${hash1}`} title={hash1} />
           <Link href={`#${hash2}`} title={hash2} />
         </Anchor>,
@@ -723,13 +382,13 @@ describe('Anchor Render', () => {
       );
 
       expect(onChange).toHaveBeenCalledTimes(1);
-      anchorInstance!.handleScrollTo(hash2);
+      fireEvent.click(container.querySelector(`a[href="#${hash2}"]`)!);
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith(hash2);
+      expect(onChange).toHaveBeenLastCalledWith(`#${hash2}`);
     });
 
     // https://github.com/ant-design/ant-design/issues/34784
-    it('getCurrentAnchor have default link as argument', async () => {
+    it('getCurrentAnchor have default link as argument', () => {
       const hash1 = getHashUrl();
       const hash2 = getHashUrl();
       const getCurrentAnchor = jest.fn();
@@ -747,7 +406,7 @@ describe('Anchor Render', () => {
     });
 
     // https://github.com/ant-design/ant-design/issues/37627
-    it('should update anchorLink when component is rerender', async () => {
+    it('should update active link when getCurrentAnchor changes', async () => {
       const hash1 = getHashUrl();
       const hash2 = getHashUrl();
       const Demo: React.FC<{ current: string }> = ({ current }) => (
@@ -761,7 +420,8 @@ describe('Anchor Render', () => {
       rerender(<Demo current={hash2} />);
       expect(container.querySelector(`.ant-anchor-link-title-active`)?.textContent).toBe(hash2);
     });
-    it('should correct render when href is null', () => {
+
+    it('should render correctly when href is null', () => {
       expect(() => {
         render(
           <Anchor>

components/anchor/style/index.less

@@ -44,7 +44,7 @@
       transform: translateX(-50%);
       transition: top 0.3s ease-in-out;
 
-      &.visible {
+      &.@{ant-prefix}-ink-ball-visible {
         display: inline-block;
       }
     }

components/carousel/style/index.less

@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 
 @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
+@carousel-dot-margin: 4px;
 
 .@{carousel-prefix-cls} {
   .reset-component();
@@ -201,9 +202,7 @@
       box-sizing: content-box;
       width: @carousel-dot-width;
       height: @carousel-dot-height;
-      margin: 0 2px;
+      margin: 0 @carousel-dot-margin;
-      margin-right: 3px;
-      margin-left: 3px;
       padding: 0;
       text-align: center;
       text-indent: -999px;
@@ -211,6 +210,7 @@
       transition: all 0.5s;
 
       button {
+        position: relative;
         display: block;
         width: 100%;
         height: @carousel-dot-height;
@@ -229,6 +229,15 @@
         &:focus {
           opacity: 0.75;
         }
+
+        &::after {
+          position: absolute;
+          top: -@carousel-dot-margin;
+          right: -@carousel-dot-margin;
+          bottom: -@carousel-dot-margin;
+          left: -@carousel-dot-margin;
+          content: '';
+        }
       }
 
       &.slick-active {
@@ -271,7 +280,7 @@
     li {
       width: @carousel-dot-height;
       height: @carousel-dot-width;
-      margin: 4px 2px;
+      margin: @carousel-dot-margin 0;
       vertical-align: baseline;
 
       button {

components/form/__tests__/index.test.tsx

@@ -179,15 +179,15 @@ describe('Form', () => {
       const { container } = render(<Demo />);
 
       await changeValue(0, '1');
-      await waitFakeTimer();
+      await waitFakeTimer(2000);
       expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('aaa');
 
       await changeValue(0, '2');
-      await waitFakeTimer();
+      await waitFakeTimer(2000);
       expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('ccc');
 
       await changeValue(0, '1');
-      await waitFakeTimer();
+      await waitFakeTimer(2000);
       expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('aaa');
     });
   });

components/menu/style/index.less

@@ -665,8 +665,8 @@
 
     a {
       color: @disabled-color !important;
-      pointer-events: none;
     }
+
     > .@{menu-prefix-cls}-submenu-title {
       color: @disabled-color !important;
       cursor: not-allowed;

package.json

@@ -122,7 +122,6 @@
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.21",
-    "memoize-one": "^6.0.0",
     "moment": "^2.29.2",
     "rc-cascader": "~3.7.0",
     "rc-checkbox": "~2.3.0",
@@ -132,7 +131,7 @@
     "rc-dropdown": "~4.0.0",
     "rc-field-form": "~1.27.0",
     "rc-image": "~5.9.0",
-    "rc-input": "~0.1.3",
+    "rc-input": "~0.1.4",
     "rc-input-number": "~7.3.9",
     "rc-mentions": "~1.10.0",
     "rc-menu": "~9.6.3",
@@ -255,7 +254,7 @@
     "qs": "^6.10.1",
     "rc-footer": "^0.6.6",
     "rc-tween-one": "^3.0.3",
-    "rc-virtual-list": "^3.4.2",
+    "rc-virtual-list": "^3.4.11",
     "react": "^17.0.0",
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",