>,
alignPropName?: 'align' | 'dropdownAlign' | 'popupAlign',
postProps?: (props: ComponentProps) => ComponentProps,
defaultPrefixCls?: string,
diff --git a/components/_util/__tests__/responsiveObserve.test.tsx b/components/_util/__tests__/responsiveObserve.test.tsx
index effc2570ec..f8b4d3ce4b 100644
--- a/components/_util/__tests__/responsiveObserve.test.tsx
+++ b/components/_util/__tests__/responsiveObserve.test.tsx
@@ -5,23 +5,20 @@ import useResponsiveObserver from '../responsiveObserver';
describe('Test ResponsiveObserve', () => {
it('test ResponsiveObserve subscribe and unsubscribe', () => {
- let responsiveObserveRef: any;
- const Demo = () => {
+ let responsiveRef: any = null;
+ const Demo: React.FC = () => {
const responsiveObserver = useResponsiveObserver();
- responsiveObserveRef = responsiveObserver;
+ responsiveRef = responsiveObserver;
return null;
};
render();
const subscribeFunc = jest.fn();
- const token = responsiveObserveRef.subscribe(subscribeFunc);
- expect(
- responsiveObserveRef.matchHandlers[responsiveObserveRef.responsiveMap.xs].mql.matches,
- ).toBeTruthy();
+ const token = responsiveRef.subscribe(subscribeFunc);
+ expect(responsiveRef.matchHandlers[responsiveRef.responsiveMap.xs].mql.matches).toBeTruthy();
expect(subscribeFunc).toHaveBeenCalledTimes(1);
-
- responsiveObserveRef.unsubscribe(token);
+ responsiveRef.unsubscribe(token);
expect(
- responsiveObserveRef.matchHandlers[responsiveObserveRef.responsiveMap.xs].mql.removeListener,
+ responsiveRef.matchHandlers[responsiveRef.responsiveMap.xs].mql?.removeEventListener,
).toHaveBeenCalled();
});
});
diff --git a/components/_util/__tests__/util.test.tsx b/components/_util/__tests__/util.test.tsx
index 067c9aa518..ec3693f627 100644
--- a/components/_util/__tests__/util.test.tsx
+++ b/components/_util/__tests__/util.test.tsx
@@ -1,6 +1,7 @@
import { waitFakeTimer } from '../../../tests/utils';
import { isStyleSupport } from '../styleChecker';
import throttleByAnimationFrame from '../throttleByAnimationFrame';
+import toList from '../toList';
describe('Test utils function', () => {
describe('throttle', () => {
@@ -56,4 +57,12 @@ describe('Test utils function', () => {
spy.mockRestore();
});
});
+ describe('toList', () => {
+ it('toList should work', () => {
+ expect(toList(123)).toEqual([123]);
+ expect(toList([123])).toEqual([123]);
+ expect(toList(null, true)).toEqual([]);
+ expect(toList(undefined, true)).toEqual([]);
+ });
+ });
});
diff --git a/components/_util/convertToTooltipProps.ts b/components/_util/convertToTooltipProps.ts
new file mode 100644
index 0000000000..29d8d7ca5e
--- /dev/null
+++ b/components/_util/convertToTooltipProps.ts
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { isValidElement } from 'react';
+import type { TooltipProps } from '../tooltip';
+
+function convertToTooltipProps(tooltip: P | ReactNode): P | null {
+ // isNil
+ if (tooltip === undefined || tooltip === null) {
+ return null;
+ }
+
+ if (typeof tooltip === 'object' && !isValidElement(tooltip)) {
+ return tooltip as P;
+ }
+
+ return {
+ title: tooltip,
+ } as P;
+}
+
+export default convertToTooltipProps;
diff --git a/components/_util/extendsObject.ts b/components/_util/extendsObject.ts
index f956840637..1c9d90906f 100644
--- a/components/_util/extendsObject.ts
+++ b/components/_util/extendsObject.ts
@@ -1,21 +1,19 @@
-import type { AnyObject } from './type';
-
-const extendsObject = (...list: T[]) => {
- const result: AnyObject = { ...list[0] };
-
- for (let i = 1; i < list.length; i++) {
- const obj = list[i];
- if (obj) {
- Object.keys(obj).forEach((key) => {
- const val = obj[key];
- if (val !== undefined) {
- result[key] = val;
+// copied https://github.com/ant-design/ant-design-mobile/blob/d3b3bae/src/utils/with-default-props.tsx
+function mergeProps(a: A, b: B): B & A;
+function mergeProps(a: A, b: B, c: C): C & B & A;
+function mergeProps(a: A, b: B, c: C, d: D): D & C & B & A;
+function mergeProps(...items: any[]) {
+ const ret: any = {};
+ items.forEach((item) => {
+ if (item) {
+ Object.keys(item).forEach((key) => {
+ if (item[key] !== undefined) {
+ ret[key] = item[key];
}
});
}
- }
+ });
+ return ret;
+}
- return result;
-};
-
-export default extendsObject;
+export default mergeProps;
diff --git a/components/_util/hooks/useClosable.tsx b/components/_util/hooks/useClosable.tsx
index 044a74f8ac..020c2bc7ec 100644
--- a/components/_util/hooks/useClosable.tsx
+++ b/components/_util/hooks/useClosable.tsx
@@ -4,6 +4,11 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
import type { DialogProps } from 'rc-dialog';
import pickAttrs from 'rc-util/lib/pickAttrs';
+import { useLocale } from '../../locale';
+import defaultLocale from '../../locale/en_US';
+import type { HTMLAriaDataAttributes } from '../aria-data-attrs';
+import extendsObject from '../extendsObject';
+
export type ClosableType = DialogProps['closable'];
export type BaseContextClosable = { closable?: ClosableType; closeIcon?: ReactNode };
@@ -58,56 +63,42 @@ function useClosableConfig(closableCollection?: ClosableCollection | null) {
...closable,
};
}
-
return closableConfig;
}, [closable, closeIcon]);
}
-/**
- * Assign object without `undefined` field. Will skip if is `false`.
- * This helps to handle both closableConfig or false
- */
-function assignWithoutUndefined(
- ...objList: (Partial | false | null | undefined)[]
-): Partial {
- const target: Partial = {};
-
- objList.forEach((obj) => {
- if (obj) {
- (Object.keys(obj) as (keyof T)[]).forEach((key) => {
- if (obj[key] !== undefined) {
- target[key] = obj[key];
- }
- });
- }
- });
-
- return target;
-}
-
/** Collection contains the all the props related with closable. e.g. `closable`, `closeIcon` */
interface ClosableCollection {
closable?: ClosableType;
closeIcon?: ReactNode;
}
+interface FallbackCloseCollection extends ClosableCollection {
+ /**
+ * Some components need to wrap CloseIcon twice,
+ * this method will be executed once after the final CloseIcon is calculated
+ */
+ closeIconRender?: (closeIcon: ReactNode) => ReactNode;
+}
+
/** Use same object to support `useMemo` optimization */
-const EmptyFallbackCloseCollection: ClosableCollection = {};
+const EmptyFallbackCloseCollection: FallbackCloseCollection = {};
export default function useClosable(
propCloseCollection?: ClosableCollection,
contextCloseCollection?: ClosableCollection | null,
- fallbackCloseCollection: ClosableCollection & {
- /**
- * Some components need to wrap CloseIcon twice,
- * this method will be executed once after the final CloseIcon is calculated
- */
- closeIconRender?: (closeIcon: ReactNode) => ReactNode;
- } = EmptyFallbackCloseCollection,
-): [closable: boolean, closeIcon: React.ReactNode, closeBtnIsDisabled: boolean] {
+ fallbackCloseCollection: FallbackCloseCollection = EmptyFallbackCloseCollection,
+): [
+ closable: boolean,
+ closeIcon: React.ReactNode,
+ closeBtnIsDisabled: boolean,
+ ariaOrDataProps?: HTMLAriaDataAttributes,
+] {
// Align the `props`, `context` `fallback` to config object first
const propCloseConfig = useClosableConfig(propCloseCollection);
const contextCloseConfig = useClosableConfig(contextCloseCollection);
+
+ const [contextLocale] = useLocale('global', defaultLocale.global);
const closeBtnIsDisabled =
typeof propCloseConfig !== 'boolean' ? !!propCloseConfig?.disabled : false;
const mergedFallbackCloseCollection = React.useMemo(
@@ -127,11 +118,7 @@ export default function useClosable(
}
if (propCloseConfig) {
- return assignWithoutUndefined(
- mergedFallbackCloseCollection,
- contextCloseConfig,
- propCloseConfig,
- );
+ return extendsObject(mergedFallbackCloseCollection, contextCloseConfig, propCloseConfig);
}
// =============== Context Second ==============
@@ -141,7 +128,7 @@ export default function useClosable(
}
if (contextCloseConfig) {
- return assignWithoutUndefined(mergedFallbackCloseCollection, contextCloseConfig);
+ return extendsObject(mergedFallbackCloseCollection, contextCloseConfig);
}
// ============= Fallback Default ==============
@@ -151,30 +138,34 @@ export default function useClosable(
// Calculate the final closeIcon
return React.useMemo(() => {
if (mergedClosableConfig === false) {
- return [false, null, closeBtnIsDisabled];
+ return [false, null, closeBtnIsDisabled, {}];
}
const { closeIconRender } = mergedFallbackCloseCollection;
const { closeIcon } = mergedClosableConfig;
let mergedCloseIcon: ReactNode = closeIcon;
+
+ // Wrap the closeIcon with aria props
+ const ariaOrDataProps = pickAttrs(mergedClosableConfig, true);
+
if (mergedCloseIcon !== null && mergedCloseIcon !== undefined) {
// Wrap the closeIcon if needed
if (closeIconRender) {
mergedCloseIcon = closeIconRender(closeIcon);
}
-
- // Wrap the closeIcon with aria props
- const ariaProps = pickAttrs(mergedClosableConfig, true);
- if (Object.keys(ariaProps).length) {
- mergedCloseIcon = React.isValidElement(mergedCloseIcon) ? (
- React.cloneElement(mergedCloseIcon, ariaProps)
- ) : (
- {mergedCloseIcon}
- );
- }
+ mergedCloseIcon = React.isValidElement(mergedCloseIcon) ? (
+ React.cloneElement(mergedCloseIcon, {
+ 'aria-label': contextLocale.close,
+ ...ariaOrDataProps,
+ } as HTMLAriaDataAttributes)
+ ) : (
+
+ {mergedCloseIcon}
+
+ );
}
- return [true, mergedCloseIcon, closeBtnIsDisabled];
+ return [true, mergedCloseIcon, closeBtnIsDisabled, ariaOrDataProps];
}, [mergedClosableConfig, mergedFallbackCloseCollection]);
}
diff --git a/components/_util/hooks/useMergeSemantic/index.ts b/components/_util/hooks/useMergeSemantic/index.ts
new file mode 100644
index 0000000000..03c3ba43f9
--- /dev/null
+++ b/components/_util/hooks/useMergeSemantic/index.ts
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import { ValidChar } from './interface';
+
+type TemplateSemanticClassNames = Partial>;
+
+export type SemanticSchema = {
+ _default?: string;
+} & {
+ [key: `${ValidChar}${string}`]: SemanticSchema;
+};
+
+// ========================= ClassNames =========================
+export function mergeClassNames<
+ T extends string,
+ SemanticClassNames extends Partial> = TemplateSemanticClassNames,
+>(schema: SemanticSchema | undefined, ...classNames: (SemanticClassNames | undefined)[]) {
+ const mergedSchema = schema || {};
+
+ return classNames.reduce((acc: any, cur) => {
+ // Loop keys of the current classNames
+ Object.keys(cur || {}).forEach((key) => {
+ const keySchema = mergedSchema[key as keyof SemanticSchema] as SemanticSchema;
+ const curVal = (cur as SemanticClassNames)[key as keyof SemanticClassNames];
+
+ if (keySchema && typeof keySchema === 'object') {
+ if (curVal && typeof curVal === 'object') {
+ // Loop fill
+ acc[key] = mergeClassNames(keySchema, acc[key], curVal);
+ } else {
+ // Covert string to object structure
+ const { _default: defaultField } = keySchema;
+ acc[key] = acc[key] || {};
+ acc[key][defaultField!] = classnames(acc[key][defaultField!], curVal);
+ }
+ } else {
+ // Flatten fill
+ acc[key] = classnames(acc[key], curVal);
+ }
+ });
+ return acc;
+ }, {} as SemanticClassNames) as SemanticClassNames;
+}
+
+function useSemanticClassNames(
+ schema: SemanticSchema | undefined,
+ ...classNames: (Partial | undefined)[]
+): Partial {
+ return React.useMemo(
+ () => mergeClassNames(schema, ...classNames),
+ [classNames],
+ ) as ClassNamesType;
+}
+
+// =========================== Styles ===========================
+function useSemanticStyles(
+ ...styles: (Partial | undefined)[]
+) {
+ return React.useMemo(() => {
+ return styles.reduce(
+ (acc, cur = {}) => {
+ Object.keys(cur).forEach((key) => {
+ acc[key] = { ...acc[key], ...(cur as Record)[key] };
+ });
+ return acc;
+ },
+ {} as Record,
+ );
+ }, [styles]) as StylesType;
+}
+
+// =========================== Export ===========================
+function fillObjectBySchema(obj: T, schema: SemanticSchema): T {
+ const newObj: any = { ...obj };
+
+ Object.keys(schema).forEach((key) => {
+ if (key !== '_default') {
+ const nestSchema = (schema as any)[key] as SemanticSchema;
+ const nextValue = newObj[key] || {};
+
+ newObj[key] = nestSchema ? fillObjectBySchema(nextValue, nestSchema) : nextValue;
+ }
+ });
+
+ return newObj;
+}
+
+/**
+ * Merge classNames and styles from multiple sources.
+ * When `schema` is provided, it will **must** provide the nest object structure.
+ */
+export default function useMergeSemantic(
+ classNamesList: (ClassNamesType | undefined)[],
+ stylesList: (StylesType | undefined)[],
+ schema?: SemanticSchema,
+) {
+ const mergedClassNames = useSemanticClassNames(schema, ...classNamesList) as ClassNamesType;
+ const mergedStyles = useSemanticStyles(...stylesList) as StylesType;
+
+ return React.useMemo(() => {
+ return [
+ fillObjectBySchema(mergedClassNames, schema!) as ClassNamesType,
+ fillObjectBySchema(mergedStyles, schema!) as StylesType,
+ ] as const;
+ }, [mergedClassNames, mergedStyles]);
+}
diff --git a/components/_util/hooks/useMergeSemantic/interface.ts b/components/_util/hooks/useMergeSemantic/interface.ts
new file mode 100644
index 0000000000..380229477e
--- /dev/null
+++ b/components/_util/hooks/useMergeSemantic/interface.ts
@@ -0,0 +1,27 @@
+export type ValidChar =
+ | 'a'
+ | 'b'
+ | 'c'
+ | 'd'
+ | 'e'
+ | 'f'
+ | 'g'
+ | 'h'
+ | 'i'
+ | 'j'
+ | 'k'
+ | 'l'
+ | 'm'
+ | 'n'
+ | 'o'
+ | 'p'
+ | 'q'
+ | 'r'
+ | 's'
+ | 't'
+ | 'u'
+ | 'v'
+ | 'w'
+ | 'x'
+ | 'y'
+ | 'z';
diff --git a/components/_util/isNumeric.ts b/components/_util/isNumeric.ts
deleted file mode 100644
index b1aeed28f1..0000000000
--- a/components/_util/isNumeric.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-const isNumeric = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value);
-
-export default isNumeric;
diff --git a/components/_util/mediaQueryUtil.ts b/components/_util/mediaQueryUtil.ts
new file mode 100644
index 0000000000..17ca441504
--- /dev/null
+++ b/components/_util/mediaQueryUtil.ts
@@ -0,0 +1,19 @@
+type MQListenerHandler = (mql: MediaQueryList, handler: (e: MediaQueryListEvent) => void) => void;
+
+export const addMediaQueryListener: MQListenerHandler = (mql, handler) => {
+ // Don't delete here, please keep the code compatible
+ if (typeof mql?.addEventListener !== 'undefined') {
+ mql.addEventListener('change', handler);
+ } else if (typeof mql?.addListener !== 'undefined') {
+ mql.addListener(handler);
+ }
+};
+
+export const removeMediaQueryListener: MQListenerHandler = (mql, handler) => {
+ // Don't delete here, please keep the code compatible
+ if (typeof mql?.removeEventListener !== 'undefined') {
+ mql.removeEventListener('change', handler);
+ } else if (typeof mql?.removeListener !== 'undefined') {
+ mql.removeListener(handler);
+ }
+};
diff --git a/components/_util/responsiveObserver.ts b/components/_util/responsiveObserver.ts
index 998fc777eb..01766678c3 100644
--- a/components/_util/responsiveObserver.ts
+++ b/components/_util/responsiveObserver.ts
@@ -2,6 +2,7 @@ import React from 'react';
import type { GlobalToken } from '../theme/internal';
import { useToken } from '../theme/internal';
+import { addMediaQueryListener, removeMediaQueryListener } from './mediaQueryUtil';
export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type BreakpointMap = Record;
@@ -28,7 +29,7 @@ const validateBreakpoints = (token: GlobalToken) => {
const indexableToken: any = token;
const revBreakpoints = [...responsiveArray].reverse();
- revBreakpoints.forEach((breakpoint: Breakpoint, i: number) => {
+ revBreakpoints.forEach((breakpoint, i) => {
const breakpointUpper = breakpoint.toUpperCase();
const screenMin = `screen${breakpointUpper}Min`;
const screen = `screen${breakpointUpper}`;
@@ -48,7 +49,7 @@ const validateBreakpoints = (token: GlobalToken) => {
);
}
- const nextBreakpointUpperMin: string = revBreakpoints[i + 1].toUpperCase();
+ const nextBreakpointUpperMin = revBreakpoints[i + 1].toUpperCase();
const nextScreenMin = `screen${nextBreakpointUpperMin}Min`;
if (!(indexableToken[screenMax] <= indexableToken[nextScreenMin])) {
@@ -61,23 +62,45 @@ const validateBreakpoints = (token: GlobalToken) => {
return token;
};
-export default function useResponsiveObserver() {
+export const matchScreen = (screens: ScreenMap, screenSizes?: ScreenSizeMap) => {
+ if (!screenSizes) {
+ return;
+ }
+ for (const breakpoint of responsiveArray) {
+ if (screens[breakpoint] && screenSizes?.[breakpoint] !== undefined) {
+ return screenSizes[breakpoint];
+ }
+ }
+};
+
+interface ResponsiveObserverType {
+ responsiveMap: BreakpointMap;
+ dispatch: (map: ScreenMap) => boolean;
+ subscribe: (func: SubscribeFunc) => number;
+ unsubscribe: (token: number) => void;
+ register: () => void;
+ unregister: () => void;
+ matchHandlers: Record<
+ PropertyKey,
+ {
+ mql: MediaQueryList;
+ listener: (this: MediaQueryList, ev: MediaQueryListEvent) => void;
+ }
+ >;
+}
+
+const useResponsiveObserver = () => {
const [, token] = useToken();
- const responsiveMap: BreakpointMap = getResponsiveMap(validateBreakpoints(token));
+ const responsiveMap = getResponsiveMap(validateBreakpoints(token));
// To avoid repeat create instance, we add `useMemo` here.
- return React.useMemo(() => {
+ return React.useMemo(() => {
const subscribers = new Map();
let subUid = -1;
let screens: Partial> = {};
-
return {
- matchHandlers: {} as {
- [prop: string]: {
- mql: MediaQueryList;
- listener: (this: MediaQueryList, ev: MediaQueryListEvent) => void;
- };
- },
+ responsiveMap,
+ matchHandlers: {},
dispatch(pointMap: ScreenMap) {
screens = pointMap;
subscribers.forEach((func) => func(screens));
@@ -98,44 +121,26 @@ export default function useResponsiveObserver() {
this.unregister();
}
},
- unregister() {
- Object.keys(responsiveMap).forEach((screen) => {
- const matchMediaQuery = responsiveMap[screen as Breakpoint];
- const handler = this.matchHandlers[matchMediaQuery];
- handler?.mql.removeListener(handler?.listener);
- });
- subscribers.clear();
- },
register() {
- Object.keys(responsiveMap).forEach((screen) => {
- const matchMediaQuery = responsiveMap[screen as Breakpoint];
+ Object.entries(responsiveMap).forEach(([screen, mediaQuery]) => {
const listener = ({ matches }: { matches: boolean }) => {
- this.dispatch({
- ...screens,
- [screen]: matches,
- });
- };
- const mql = window.matchMedia(matchMediaQuery);
- mql.addListener(listener);
- this.matchHandlers[matchMediaQuery] = {
- mql,
- listener,
+ this.dispatch({ ...screens, [screen]: matches });
};
+ const mql = window.matchMedia(mediaQuery);
+ addMediaQueryListener(mql, listener);
+ this.matchHandlers[mediaQuery] = { mql, listener };
listener(mql);
});
},
- responsiveMap,
+ unregister() {
+ Object.values(responsiveMap).forEach((mediaQuery) => {
+ const handler = this.matchHandlers[mediaQuery];
+ removeMediaQueryListener(handler?.mql, handler?.listener);
+ });
+ subscribers.clear();
+ },
};
}, [token]);
-}
-
-export const matchScreen = (screens: ScreenMap, screenSizes?: ScreenSizeMap) => {
- if (screenSizes && typeof screenSizes === 'object') {
- for (let i = 0; i < responsiveArray.length; i++) {
- const breakpoint = responsiveArray[i];
- if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) {
- return screenSizes[breakpoint];
- }
- }
- }
};
+
+export default useResponsiveObserver;
diff --git a/components/_util/toList.ts b/components/_util/toList.ts
index ae29f448c7..ebb536cd9b 100644
--- a/components/_util/toList.ts
+++ b/components/_util/toList.ts
@@ -1,5 +1,8 @@
-export default function toList(candidate: T | T[], skipEmpty = false): T[] {
- if (skipEmpty && (candidate === undefined || candidate === null)) return [];
-
+const toList = (candidate: T | T[], skipEmpty = false): T[] => {
+ if (skipEmpty && (candidate === undefined || candidate === null)) {
+ return [];
+ }
return Array.isArray(candidate) ? candidate : [candidate];
-}
+};
+
+export default toList;
diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx
index 542bea3f2b..c701817a7e 100644
--- a/components/_util/wave/WaveEffect.tsx
+++ b/components/_util/wave/WaveEffect.tsx
@@ -4,7 +4,8 @@ import CSSMotion from 'rc-motion';
import raf from 'rc-util/lib/raf';
import { composeRef } from 'rc-util/lib/ref';
-import { getReactRender, type UnmountType } from '../../config-provider/UnstableContext';
+import { unstableSetRender } from '../../config-provider/UnstableContext';
+import type { UnmountType } from '../../config-provider/UnstableContext';
import { TARGET_CLS } from './interface';
import type { ShowWaveEffect } from './interface';
import { getTargetWaveColor } from './util';
@@ -40,14 +41,12 @@ const WaveEffect = (props: WaveEffectProps) => {
const [height, setHeight] = React.useState(0);
const [enabled, setEnabled] = React.useState(false);
- const waveStyle = {
+ const waveStyle: React.CSSProperties = {
left,
top,
width,
height,
borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
- } as React.CSSProperties & {
- [name: string]: number | string;
};
if (color) {
@@ -161,7 +160,7 @@ const showWaveEffect: ShowWaveEffect = (target, info) => {
holder.style.top = '0px';
target?.insertBefore(holder, target?.firstChild);
- const reactRender = getReactRender();
+ const reactRender = unstableSetRender();
let unmountCallback: UnmountType | null = null;
diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx
index 7a1b0cbd17..2b97f0d3d7 100644
--- a/components/affix/__tests__/Affix.test.tsx
+++ b/components/affix/__tests__/Affix.test.tsx
@@ -116,6 +116,12 @@ describe('Affix Render', () => {
expect(onChange).toHaveBeenLastCalledWith(true);
expect(container.querySelector('.ant-affix')).toHaveStyle({ top: 0 });
+ await movePlaceholder(100);
+ expect(onChange).toHaveBeenLastCalledWith(false);
+
+ await movePlaceholder(-100);
+ expect(onChange).toHaveBeenLastCalledWith(true);
+
rerender();
await waitFakeTimer();
expect(container.querySelector('.ant-affix')).toHaveStyle({ top: `10px` });
diff --git a/components/affix/__tests__/a11y.test.ts b/components/affix/__tests__/a11y.test.ts
index f8bd0be946..31de84f996 100644
--- a/components/affix/__tests__/a11y.test.ts
+++ b/components/affix/__tests__/a11y.test.ts
@@ -1,5 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
-describe('affix demo a11y', () => {
- accessibilityDemoTest('affix');
-});
+accessibilityDemoTest('affix');
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 42562a3cf1..ed8a7618d8 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
-import omit from 'rc-util/lib/omit';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import type { ConfigConsumerProps } from '../config-provider';
@@ -56,7 +55,8 @@ export interface AffixRef {
updatePosition: ReturnType;
}
-const Affix = React.forwardRef((props, ref) => {
+type InternalAffixProps = AffixProps & { onTestUpdatePosition?: any };
+const Affix = React.forwardRef((props, ref) => {
const {
style,
offsetTop,
@@ -67,6 +67,8 @@ const Affix = React.forwardRef((props, ref) => {
children,
target,
onChange,
+ onTestUpdatePosition,
+ ...restProps
} = props;
const { getPrefixCls, getTargetContainer } = React.useContext(ConfigContext);
@@ -162,7 +164,7 @@ const Affix = React.forwardRef((props, ref) => {
status.current = AFFIX_STATUS_PREPARE;
measure();
if (process.env.NODE_ENV === 'test') {
- (props as any)?.onTestUpdatePosition?.();
+ onTestUpdatePosition?.();
}
};
@@ -236,7 +238,8 @@ const Affix = React.forwardRef((props, ref) => {
React.useEffect(() => {
addListeners();
- }, [target, affixStyle]);
+ return () => removeListeners();
+ }, [target, affixStyle, lastAffix, offsetTop, offsetBottom]);
React.useEffect(() => {
updatePosition();
@@ -248,22 +251,9 @@ const Affix = React.forwardRef((props, ref) => {
const mergedCls = classNames({ [rootCls]: affixStyle });
- let otherProps = omit(props, [
- 'prefixCls',
- 'offsetTop',
- 'offsetBottom',
- 'target',
- 'onChange',
- 'rootClassName',
- ]);
-
- if (process.env.NODE_ENV === 'test') {
- otherProps = omit(otherProps, ['onTestUpdatePosition' as any]);
- }
-
return wrapCSSVar(
-
+
{affixStyle &&
}
{children}
diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
index bb6ca7ade6..0113f1fc93 100644
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -12,7 +12,7 @@ group:
order: 7
---
-## 何时使用
+## 何时使用 {#when-to-use}
当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
index f53c5cd4dd..51fd514714 100644
--- a/components/alert/Alert.tsx
+++ b/components/alert/Alert.tsx
@@ -13,7 +13,7 @@ import { composeRef } from 'rc-util/lib/ref';
import type { ClosableType } from '../_util/hooks/useClosable';
import { replaceElement } from '../_util/reactNode';
import { devUseWarning } from '../_util/warning';
-import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
import useStyle from './style';
export interface AlertRef {
@@ -149,7 +149,14 @@ const Alert = React.forwardRef
((props, ref) => {
nativeElement: internalRef.current!,
}));
- const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
+ const {
+ getPrefixCls,
+ direction,
+ closable: contextClosable,
+ closeIcon: contextCloseIcon,
+ className: contextClassName,
+ style: contextStyle,
+ } = useComponentConfig('alert');
const prefixCls = getPrefixCls('alert', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -181,8 +188,8 @@ const Alert = React.forwardRef((props, ref) => {
return true;
}
- return !!alert?.closable;
- }, [closeText, closeIcon, closable, alert?.closable]);
+ return !!contextClosable;
+ }, [closeText, closeIcon, closable, contextClosable]);
// banner mode defaults to Icon
const isShowIcon = banner && showIcon === undefined ? true : showIcon;
@@ -196,7 +203,7 @@ const Alert = React.forwardRef((props, ref) => {
[`${prefixCls}-banner`]: !!banner,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
- alert?.className,
+ contextClassName,
className,
rootClassName,
cssVarCls,
@@ -215,20 +222,20 @@ const Alert = React.forwardRef((props, ref) => {
if (closeIcon !== undefined) {
return closeIcon;
}
- if (typeof alert?.closable === 'object' && alert?.closable?.closeIcon) {
- return alert?.closable?.closeIcon;
+ if (typeof contextClosable === 'object' && contextClosable.closeIcon) {
+ return contextClosable.closeIcon;
}
- return alert?.closeIcon;
- }, [closeIcon, closable, closeText, alert?.closeIcon]);
+ return contextCloseIcon;
+ }, [closeIcon, closable, closeText, contextCloseIcon]);
const mergedAriaProps = React.useMemo(() => {
- const merged = closable ?? alert?.closable;
+ const merged = closable ?? contextClosable;
if (typeof merged === 'object') {
const { closeIcon: _, ...ariaProps } = merged;
return ariaProps;
}
return {};
- }, [closable, alert?.closable]);
+ }, [closable, contextClosable]);
return wrapCSSVar(
((props, ref) => {
ref={composeRef(internalRef, setRef)}
data-show={!closed}
className={classNames(alertCls, motionClassName)}
- style={{ ...alert?.style, ...style, ...motionStyle }}
+ style={{ ...contextStyle, ...style, ...motionStyle }}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx
index 995f7de8eb..75aa28323f 100644
--- a/components/alert/ErrorBoundary.tsx
+++ b/components/alert/ErrorBoundary.tsx
@@ -44,7 +44,7 @@ class ErrorBoundary extends React.Component{errorDescription}
}
/>
- );
+ ) as React.ReactNode;
}
return children;
}
diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8df25c4730..0cabcf072d 100644
--- a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -579,7 +579,7 @@ Array [
width="1em"
>
diff --git a/components/alert/__tests__/__snapshots__/demo.test.ts.snap b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
index 1508ecc8aa..ebfa809c97 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
@@ -573,7 +573,7 @@ Array [
width="1em"
>
diff --git a/components/alert/__tests__/a11y.test.ts b/components/alert/__tests__/a11y.test.ts
index 563f233ed3..51912fa342 100644
--- a/components/alert/__tests__/a11y.test.ts
+++ b/components/alert/__tests__/a11y.test.ts
@@ -1,5 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
-describe('alert demo a11y', () => {
- accessibilityDemoTest('alert', { disabledRules: ['button-name'] });
-});
+accessibilityDemoTest('alert', { disabledRules: ['button-name'] });
diff --git a/components/alert/demo/closable.tsx b/components/alert/demo/closable.tsx
index 46b5557340..5ecf488eb2 100644
--- a/components/alert/demo/closable.tsx
+++ b/components/alert/demo/closable.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { CloseSquareFilled } from '@ant-design/icons';
+import { CloseSquareOutlined } from '@ant-design/icons';
import { Alert } from 'antd';
const onClose = (e: React.MouseEvent) => {
@@ -27,11 +27,11 @@ const App: React.FC = () => (
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
type="error"
+ onClose={onClose}
closable={{
'aria-label': 'close',
- closeIcon: ,
+ closeIcon: ,
}}
- onClose={onClose}
/>
);
diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
index e587661ada..58b3a18beb 100644
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -12,7 +12,7 @@ group:
order: 6
---
-## 何时使用
+## 何时使用 {#when-to-use}
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 452836fa36..80b3d9aff8 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -8,8 +8,7 @@ import scrollTo from '../_util/scrollTo';
import { devUseWarning } from '../_util/warning';
import Affix from '../affix';
import type { AffixProps } from '../affix';
-import type { ConfigConsumerProps } from '../config-provider';
-import { ConfigContext } from '../config-provider';
+import { ConfigContext, useComponentConfig } from '../config-provider/context';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import type { AnchorLinkBaseProps } from './AnchorLink';
import AnchorLink from './AnchorLink';
@@ -147,8 +146,14 @@ const Anchor: React.FC = (props) => {
const spanLinkNode = React.useRef(null);
const animating = React.useRef(false);
- const { direction, anchor, getTargetContainer, getPrefixCls } =
- React.useContext(ConfigContext);
+ const {
+ direction,
+ getPrefixCls,
+ className: anchorClassName,
+ style: anchorStyle,
+ } = useComponentConfig('anchor');
+
+ const { getTargetContainer } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('anchor', customPrefixCls);
@@ -282,7 +287,7 @@ const Anchor: React.FC = (props) => {
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
- anchor?.className,
+ anchorClassName,
);
const anchorClass = classNames(prefixCls, {
@@ -295,7 +300,7 @@ const Anchor: React.FC = (props) => {
const wrapperStyle: React.CSSProperties = {
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
- ...anchor?.style,
+ ...anchorStyle,
...style,
};
diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx
index 2aaf4f6d5f..1cfd2b1979 100644
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -44,10 +44,26 @@ const AnchorLink: React.FC = (props) => {
const handleClick = (e: React.MouseEvent) => {
onClick?.(e, { title, href });
scrollTo?.(href);
- if (replace) {
- e.preventDefault();
- window.location.replace(href);
+
+ // Support clicking on an anchor does not record history.
+ if (e.defaultPrevented) {
+ return;
}
+
+ const isExternalLink = href.startsWith('http://') || href.startsWith('https://');
+ // Support external link
+ if (isExternalLink) {
+ if (replace) {
+ e.preventDefault();
+ window.location.replace(href);
+ }
+ return;
+ }
+
+ // Handling internal anchor link
+ e.preventDefault();
+ const historyMethod = replace ? 'replaceState' : 'pushState';
+ window.history[historyMethod](null, '', href);
};
// =================== Warning =====================
diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx
index 02e3b0ed45..6247cc7512 100644
--- a/components/anchor/__tests__/Anchor.test.tsx
+++ b/components/anchor/__tests__/Anchor.test.tsx
@@ -268,6 +268,27 @@ describe('Anchor Render', () => {
expect(container.querySelector(`a[href="#${hash}_1"]`)).toBeTruthy();
});
+ it('should not proceed when event is default prevented', () => {
+ const hash = getHashUrl();
+ const handleClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ };
+ const scrollToSpy = jest.spyOn(window, 'scrollTo');
+ const pushStateSpy = jest.spyOn(window.history, 'pushState');
+ const replaceStateSpy = jest.spyOn(window.history, 'replaceState');
+ const { container } = render(
+ ,
+ );
+
+ const link = container.querySelector(`a[href="#${hash}"]`)!;
+
+ fireEvent.click(link);
+
+ expect(scrollToSpy).toHaveBeenCalled();
+ expect(pushStateSpy).not.toHaveBeenCalled();
+ expect(replaceStateSpy).not.toHaveBeenCalled();
+ });
+
it('targetOffset prop', async () => {
const hash = getHashUrl();
@@ -350,13 +371,27 @@ describe('Anchor Render', () => {
expect(link).toEqual({ href, title });
});
- it('replaces item href in browser history', () => {
+ it('replaces item href in browser history (hash href)', () => {
const hash = getHashUrl();
const href = `#${hash}`;
const title = hash;
const { container } = render();
+ jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
+
+ fireEvent.click(container.querySelector(`a[href="${href}"]`)!);
+
+ expect(window.history.replaceState).toHaveBeenCalledWith(null, '', href);
+ });
+
+ it('replaces item href in browser history (external href)', () => {
+ const hash = getHashUrl();
+
+ const href = `http://www.example.com/#${hash}`;
+ const title = hash;
+ const { container } = render();
+
fireEvent.click(container.querySelector(`a[href="${href}"]`)!);
expect(window.location.replace).toHaveBeenCalledWith(href);
});
diff --git a/components/anchor/__tests__/a11y.test.ts b/components/anchor/__tests__/a11y.test.ts
index 279baa3edd..324ee7d533 100644
--- a/components/anchor/__tests__/a11y.test.ts
+++ b/components/anchor/__tests__/a11y.test.ts
@@ -1,5 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
-describe('anchor demo a11y', () => {
- accessibilityDemoTest('anchor');
-});
+accessibilityDemoTest('anchor');
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index 733f3ade86..0f9fbd99a6 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -11,7 +11,7 @@ group:
order: 3
---
-## 何时使用
+## 何时使用 {#when-to-use}
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
diff --git a/components/app/App.tsx b/components/app/App.tsx
new file mode 100644
index 0000000000..d44d2ed825
--- /dev/null
+++ b/components/app/App.tsx
@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react';
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+
+import type { AnyObject, CustomComponent } from '../_util/type';
+import { devUseWarning } from '../_util/warning';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import useMessage from '../message/useMessage';
+import useModal from '../modal/useModal';
+import useNotification from '../notification/useNotification';
+import type { AppConfig, useAppProps } from './context';
+import AppContext, { AppConfigContext } from './context';
+import useStyle from './style';
+
+export interface AppProps extends AppConfig {
+ style?: React.CSSProperties;
+ className?: string;
+ rootClassName?: string;
+ prefixCls?: string;
+ children?: ReactNode;
+ component?: CustomComponent
| false;
+}
+
+const App: React.FC = (props) => {
+ const {
+ prefixCls: customizePrefixCls,
+ children,
+ className,
+ rootClassName,
+ message,
+ notification,
+ style,
+ component = 'div',
+ } = props;
+ const { direction, getPrefixCls } = useContext(ConfigContext);
+ const prefixCls = getPrefixCls('app', customizePrefixCls);
+ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
+ const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls, {
+ [`${prefixCls}-rtl`]: direction === 'rtl',
+ });
+
+ const appConfig = useContext(AppConfigContext);
+
+ const mergedAppConfig = React.useMemo(
+ () => ({
+ message: { ...appConfig.message, ...message },
+ notification: { ...appConfig.notification, ...notification },
+ }),
+ [message, notification, appConfig.message, appConfig.notification],
+ );
+
+ const [messageApi, messageContextHolder] = useMessage(mergedAppConfig.message);
+ const [notificationApi, notificationContextHolder] = useNotification(
+ mergedAppConfig.notification,
+ );
+ const [ModalApi, ModalContextHolder] = useModal();
+
+ const memoizedContextValue = React.useMemo(
+ () => ({
+ message: messageApi,
+ notification: notificationApi,
+ modal: ModalApi,
+ }),
+ [messageApi, notificationApi, ModalApi],
+ );
+
+ // https://github.com/ant-design/ant-design/issues/48802#issuecomment-2097813526
+ devUseWarning('App')(
+ !(cssVarCls && component === false),
+ 'usage',
+ 'When using cssVar, ensure `component` is assigned a valid React component string.',
+ );
+
+ // ============================ Render ============================
+ const Component = component === false ? React.Fragment : component;
+
+ const rootProps: AppProps = {
+ className: customClassName,
+ style,
+ };
+
+ return wrapCSSVar(
+
+
+
+ {ModalContextHolder}
+ {messageContextHolder}
+ {notificationContextHolder}
+ {children}
+
+
+ ,
+ );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+ App.displayName = 'App';
+}
+
+export default App;
diff --git a/components/app/__tests__/a11y.test.ts b/components/app/__tests__/a11y.test.ts
index a7563c3867..6f8c9d2de2 100644
--- a/components/app/__tests__/a11y.test.ts
+++ b/components/app/__tests__/a11y.test.ts
@@ -1,5 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
-describe('app demo a11y', () => {
- accessibilityDemoTest('app');
-});
+accessibilityDemoTest('app');
diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md
index 9b6c9e43f7..30bc61b1c4 100644
--- a/components/app/index.en-US.md
+++ b/components/app/index.en-US.md
@@ -143,4 +143,4 @@ Common props ref：[Common props](/docs/react/common-props)
### CSS Var doesn't work inside ``
-Make sure the App `component` is a legit React component string, so when you're turning on CSS variables, there's a container to hold the CSS class name.
+Make sure the App `component` is a valid html tag, so when you're turning on CSS variables, there's a container to hold the CSS class name. If not set, it defaults to the `div` tag. If set to `false`, no additional DOM nodes will be created, and no default styles will be provided.
diff --git a/components/app/index.tsx b/components/app/index.tsx
index 4c74eec667..db4963d2f1 100644
--- a/components/app/index.tsx
+++ b/components/app/index.tsx
@@ -1,105 +1,14 @@
-import type { ReactNode } from 'react';
-import React, { useContext } from 'react';
-import classNames from 'classnames';
+import type { AppProps } from './App';
+import App_ from './App';
+import useApp from './useApp';
-import type { AnyObject, CustomComponent } from '../_util/type';
-import { devUseWarning } from '../_util/warning';
-import type { ConfigConsumerProps } from '../config-provider';
-import { ConfigContext } from '../config-provider';
-import useMessage from '../message/useMessage';
-import useModal from '../modal/useModal';
-import useNotification from '../notification/useNotification';
-import type { AppConfig, useAppProps } from './context';
-import AppContext, { AppConfigContext } from './context';
-import useStyle from './style';
+export type { AppProps };
-export interface AppProps extends AppConfig {
- style?: React.CSSProperties;
- className?: string;
- rootClassName?: string;
- prefixCls?: string;
- children?: ReactNode;
- component?: CustomComponent
| false;
-}
-
-const useApp = () => React.useContext(AppContext);
-
-const App: React.FC & { useApp: () => useAppProps } = (props) => {
- const {
- prefixCls: customizePrefixCls,
- children,
- className,
- rootClassName,
- message,
- notification,
- style,
- component = 'div',
- } = props;
- const { direction, getPrefixCls } = useContext(ConfigContext);
- const prefixCls = getPrefixCls('app', customizePrefixCls);
- const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
-
- const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls, {
- [`${prefixCls}-rtl`]: direction === 'rtl',
- });
-
- const appConfig = useContext(AppConfigContext);
-
- const mergedAppConfig = React.useMemo(
- () => ({
- message: { ...appConfig.message, ...message },
- notification: { ...appConfig.notification, ...notification },
- }),
- [message, notification, appConfig.message, appConfig.notification],
- );
-
- const [messageApi, messageContextHolder] = useMessage(mergedAppConfig.message);
- const [notificationApi, notificationContextHolder] = useNotification(
- mergedAppConfig.notification,
- );
- const [ModalApi, ModalContextHolder] = useModal();
-
- const memoizedContextValue = React.useMemo(
- () => ({
- message: messageApi,
- notification: notificationApi,
- modal: ModalApi,
- }),
- [messageApi, notificationApi, ModalApi],
- );
-
- // https://github.com/ant-design/ant-design/issues/48802#issuecomment-2097813526
- devUseWarning('App')(
- !(cssVarCls && component === false),
- 'usage',
- 'When using cssVar, ensure `component` is assigned a valid React component string.',
- );
-
- // ============================ Render ============================
- const Component = component === false ? React.Fragment : component;
-
- const rootProps: AppProps = {
- className: customClassName,
- style,
- };
-
- return wrapCSSVar(
-
-
-
- {ModalContextHolder}
- {messageContextHolder}
- {notificationContextHolder}
- {children}
-
-
- ,
- );
+type CompoundedComponent = typeof App_ & {
+ useApp: typeof useApp;
};
-if (process.env.NODE_ENV !== 'production') {
- App.displayName = 'App';
-}
+const App = App_ as CompoundedComponent;
App.useApp = useApp;
diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md
index 74f04ae9b2..28281e5f6d 100644
--- a/components/app/index.zh-CN.md
+++ b/components/app/index.zh-CN.md
@@ -11,7 +11,7 @@ demo:
tag: 5.1.0
---
-## 何时使用
+## 何时使用 {#when-to-use}
- 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
- 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。
@@ -144,4 +144,4 @@ export default () => {
### CSS Var 在 `` 内不起作用
-请确保 App 的 `component` 是一个有效的 React 组件字符串，以便在启用 CSS 变量时，有一个容器来承载 CSS 类名。
+请确保 App 的 `component` 是一个有效的 html 标签名，以便在启用 CSS 变量时有一个容器来承载 CSS 类名。如果不设置，则默认为 `div` 标签，如果设置为 `false`，则不会创建额外的 DOM 节点，也不会提供默认样式。
diff --git a/components/app/useApp.ts b/components/app/useApp.ts
new file mode 100644
index 0000000000..6abc2bd0c5
--- /dev/null
+++ b/components/app/useApp.ts
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import type { useAppProps } from './context';
+import AppContext from './context';
+
+const useApp = () => React.useContext(AppContext);
+
+export default useApp;
diff --git a/components/auto-complete/AutoComplete.tsx b/components/auto-complete/AutoComplete.tsx
new file mode 100644
index 0000000000..0fc8a50032
--- /dev/null
+++ b/components/auto-complete/AutoComplete.tsx
@@ -0,0 +1,215 @@
+import * as React from 'react';
+import cls from 'classnames';
+import type { BaseSelectRef } from 'rc-select';
+import toArray from 'rc-util/lib/Children/toArray';
+import omit from 'rc-util/lib/omit';
+
+import { useZIndex } from '../_util/hooks/useZIndex';
+import type { InputStatus } from '../_util/statusUtils';
+import { devUseWarning } from '../_util/warning';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import type {
+ BaseOptionType,
+ DefaultOptionType,
+ InternalSelectProps,
+ RefSelectProps,
+ SelectProps,
+} from '../select';
+import Select from '../select';
+
+const { Option } = Select;
+
+export interface DataSourceItemObject {
+ value: string;
+ text: string;
+}
+export type DataSourceItemType = DataSourceItemObject | React.ReactNode;
+
+export interface AutoCompleteProps<
+ ValueType = any,
+ OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+> extends Omit<
+ InternalSelectProps,
+ 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'
+ > {
+ /** @deprecated Please use `options` instead */
+ dataSource?: DataSourceItemType[];
+ status?: InputStatus;
+ /** @deprecated Please use `classNames.popup.root` instead */
+ popupClassName?: string;
+ /** @deprecated Please use `classNames.popup.root` instead */
+ dropdownClassName?: string;
+ /** @deprecated Please use `popupMatchSelectWidth` instead */
+ dropdownMatchSelectWidth?: boolean | number;
+ popupMatchSelectWidth?: boolean | number;
+ /** @deprecated Please use `popupRender` instead */
+ dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
+ popupRender?: (menu: React.ReactElement) => React.ReactElement;
+ /** @deprecated Please use `styles.popup.root` instead */
+ dropdownStyle?: React.CSSProperties;
+ /** @deprecated Please use `onOpenChange` instead */
+ onDropdownVisibleChange?: (visible: boolean) => void;
+ onOpenChange?: (visible: boolean) => void;
+}
+
+function isSelectOptionOrSelectOptGroup(child: any): boolean {
+ return child?.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
+}
+
+const AutoComplete: React.ForwardRefRenderFunction = (
+ props,
+ ref,
+) => {
+ const {
+ prefixCls: customizePrefixCls,
+ className,
+ popupClassName,
+ dropdownClassName,
+ children,
+ dataSource,
+ dropdownStyle,
+ dropdownRender,
+ popupRender,
+ onDropdownVisibleChange,
+ onOpenChange,
+ styles,
+ classNames,
+ } = props;
+ const childNodes: React.ReactElement[] = toArray(children);
+
+ const mergedPopupStyle = styles?.popup?.root || dropdownStyle;
+ const mergedPopupClassName = classNames?.popup?.root || popupClassName || dropdownClassName;
+ const mergedPopupRender = popupRender || dropdownRender;
+ const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
+
+ // ============================= Input =============================
+ let customizeInput: React.ReactElement | undefined;
+
+ if (
+ childNodes.length === 1 &&
+ React.isValidElement(childNodes[0]) &&
+ !isSelectOptionOrSelectOptGroup(childNodes[0])
+ ) {
+ [customizeInput] = childNodes;
+ }
+
+ const getInputElement = customizeInput ? (): React.ReactElement => customizeInput! : undefined;
+
+ // ============================ Options ============================
+ let optionChildren: React.ReactNode;
+
+ // [Legacy] convert `children` or `dataSource` into option children
+ if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) {
+ optionChildren = children;
+ } else {
+ optionChildren = dataSource
+ ? dataSource.map((item) => {
+ if (React.isValidElement(item)) {
+ return item;
+ }
+ switch (typeof item) {
+ case 'string':
+ return (
+
+ );
+ case 'object': {
+ const { value: optionValue } = item as DataSourceItemObject;
+ return (
+
+ );
+ }
+ default:
+ return undefined;
+ }
+ })
+ : [];
+ }
+
+ if (process.env.NODE_ENV !== 'production') {
+ const warning = devUseWarning('AutoComplete');
+
+ warning(
+ !customizeInput || !('size' in props),
+ 'usage',
+ 'You need to control style self instead of setting `size` when using customize input.',
+ );
+
+ const deprecatedProps = {
+ dropdownMatchSelectWidth: 'popupMatchSelectWidth',
+ dropdownStyle: 'styles.popup.root',
+ dropdownClassName: 'classNames.popup.root',
+ popupClassName: 'classNames.popup.root',
+ dropdownRender: 'popupRender',
+ onDropdownVisibleChange: 'onOpenChange',
+ dataSource: 'options',
+ };
+
+ Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
+ warning.deprecated(!(oldProp in props), oldProp, newProp);
+ });
+ }
+
+ const { getPrefixCls } = React.useContext(ConfigContext);
+
+ const prefixCls = getPrefixCls('select', customizePrefixCls);
+
+ // ============================ zIndex ============================
+ const [zIndex] = useZIndex('SelectLike', mergedPopupStyle?.zIndex as number);
+
+ return (
+
+ );
+};
+
+const RefAutoComplete = React.forwardRef(
+ AutoComplete,
+) as unknown as (<
+ ValueType = any,
+ OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+>(
+ props: React.PropsWithChildren> &
+ React.RefAttributes,
+) => React.ReactElement) & {
+ displayName?: string;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+ RefAutoComplete.displayName = 'AutoComplete';
+}
+
+export default RefAutoComplete;
diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
index 503b74fe43..30f4ccf059 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,5 +1,525 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+ centered
+
+
+
+
+
+
+
+
+
+
+
+ No data
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ centered
+
+
+
+
+
+
+
+
+
+
+
+ No data
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ centered
+
+
+
+
+
+
+
+
+
+
+
+ No data
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
- openHituCodeBlock(JSON.stringify(codeBlockPrefillConfig));
- }}
- />
+ {loading ? (
+ 
+我们使用 [Issuehunt](https://issuehunt.io/repos/3452688) 来推动您希望看到的针对 antd 的修复和改进，请查看我们的赞助列表：
[](https://issuehunt.io/repos/34526884)
diff --git a/README.md b/README.md
index 43e154a3ad..8c712f254e 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ An enterprise-class UI design language and React UI library.
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url]
+[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url] [![DeepWiki][deepwiki-image]][deepwiki-url]
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
@@ -20,8 +20,8 @@ An enterprise-class UI design language and React UI library.
[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
[npm-url]: https://npmjs.org/package/antd
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
+[github-action-image]: https://github.com/ant-design/ant-design/actions/workflows/test.yml/badge.svg
+[github-action-url]: https://github.com/ant-design/ant-design/actions/workflows/test.yml
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
@@ -43,6 +43,8 @@ An enterprise-class UI design language and React UI library.
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
[dumi-url]: https://github.com/umijs/dumi
[github-issues-url]: https://new-issue.ant.design
+[deepwiki-url]: https://deepwiki.com/ant-design/ant-design
+[deepwiki-image]: https://img.shields.io/badge/Chat%20with-DeepWiki%20🤖-20B2AA?style=flat-square