Merge pull request #48661 from ant-design/feature-merge-master

chore: feature merge master
ant-design · Apr 26, 2024 · 97b8913 · 97b8913
2 parents 8567e55 + d70de6c
commit 97b8913
Show file tree

Hide file tree

Showing 50 changed files with 1,238 additions and 1,045 deletions.
diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx
@@ -43,7 +43,7 @@ const useStyle = createStyles(({ token }) => ({
     align-items: center;
     column-gap: ${token.paddingXXS}px;
     border-radius: ${token.borderRadiusSM}px;
-    padding-inline: ${token.paddingXS}px;
+    padding-inline: ${token.paddingXXS}px;
     transition: all ${token.motionDurationSlow} !important;
     font-family: ${token.codeFamily};
     color: ${token.colorTextSecondary} !important;
@@ -62,6 +62,7 @@ const useStyle = createStyles(({ token }) => ({
   `,
   from: css`
     color: ${token.magenta8};
+    margin-inline-end: 0.5em;
   `,
   antd: css`
     color: ${token.green8};
@@ -144,19 +145,17 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           {
             label: locale.import,
             children: (
-              <Tooltip
-                placement="right"
-                title={copied ? locale.copied : locale.copy}
-                onOpenChange={onOpenChange}
-              >
-                <span>
-                  <CopyToClipboard text={`import { ${component} } from "antd";`} onCopy={onCopy}>
-                    <Typography.Text className={styles.code} onClick={onCopy}>
-                      {importList}
-                    </Typography.Text>
-                  </CopyToClipboard>
-                </span>
-              </Tooltip>
+              <CopyToClipboard text={`import { ${component} } from "antd";`} onCopy={onCopy}>
+                <Tooltip
+                  placement="right"
+                  title={copied ? locale.copied : locale.copy}
+                  onOpenChange={onOpenChange}
+                >
+                  <Typography.Text className={styles.code} onClick={onCopy}>
+                    {importList}
+                  </Typography.Text>
+                </Tooltip>
+              </CopyToClipboard>
             ),
           },
           filledSource && {

diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts
@@ -7,14 +7,16 @@ import type { IApi, IRoute } from 'dumi';
 import ReactTechStack from 'dumi/dist/techStacks/react';
 import sylvanas from 'sylvanas';
 
-import localPackage from '../../package.json';
+import { dependencies, devDependencies } from '../../package.json';
 
 function extractEmotionStyle(html: string) {
   // copy from emotion ssr
   // https://github.com/vercel/next.js/blob/deprecated-main/examples/with-emotion-vanilla/pages/_document.js
   const styles = global.__ANTD_STYLE_CACHE_MANAGER_FOR_SSR__.getCacheList().map((cache) => {
     const result = createEmotionServer(cache).extractCritical(html);
-    if (!result.css) return null;
+    if (!result.css) {
+      return null;
+    }
 
     const { css, ids } = result;
 
@@ -46,10 +48,7 @@ class AntdReactTechStack extends ReactTechStack {
       const codePath = opts.fileAbsPath!.replace(/\.\w+$/, '.tsx');
       const code = fs.existsSync(codePath) ? fs.readFileSync(codePath, 'utf-8') : '';
 
-      props.pkgDependencyList = {
-        ...localPackage.devDependencies,
-        ...localPackage.dependencies,
-      };
+      props.pkgDependencyList = { ...devDependencies, ...dependencies };
       props.jsx = sylvanas.parseText(code);
 
       if (md) {

diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx
@@ -46,7 +46,7 @@ const useStyle = createStyles(({ token }) => {
       height: 100%;
       font-size: ${fontSize}px;
       font-family: Avenir, ${fontFamily}, sans-serif;
-      border: 0;
+      border: 0 !important;
 
       &${antCls}-menu-horizontal {
         border-bottom: none;
@@ -93,25 +93,6 @@ const useStyle = createStyles(({ token }) => {
         text-align: center;
       }
     `,
-    popoverMenuNav: css`
-      ${antCls}-menu-item,
-      ${antCls}-menu-submenu {
-        text-align: left;
-      }
-
-      ${antCls}-menu-item-group-title {
-        padding-inline-start: ${token.paddingLG}px;
-      }
-
-      ${antCls}-menu-item-group-list {
-        padding: 0 ${token.paddingLG}px;
-      }
-
-      ${antCls}-menu-item,
-      a {
-        color: #333;
-      }
-    `,
   };
 });
 

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
@@ -51,6 +51,7 @@ const useStyle = createStyles(({ token, css }) => {
 
       @media only screen and (max-width: ${token.mobileMaxWidth}px) {
         text-align: center;
+        border: none;
       }
 
       .nav-search-wrapper {
@@ -175,9 +176,6 @@ const Header: React.FC = () => {
   const onWindowResize = useCallback(() => {
     setHeaderState((prev) => ({ ...prev, windowWidth: window.innerWidth }));
   }, []);
-  const handleShowMenu = useCallback(() => {
-    setHeaderState((prev) => ({ ...prev, menuVisible: true }));
-  }, []);
   const onMenuVisibleChange = useCallback((visible: boolean) => {
     setHeaderState((prev) => ({ ...prev, menuVisible: visible }));
   }, []);
@@ -362,7 +360,7 @@ const Header: React.FC = () => {
           arrow={{ pointAtCenter: true }}
           onOpenChange={onMenuVisibleChange}
         >
-          <MenuOutlined className="nav-phone-icon" onClick={handleShowMenu} />
+          <MenuOutlined className="nav-phone-icon" />
         </Popover>
       )}
       {isZhCN && bannerVisible && (

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1,5 +1,6 @@
 # These are supported funding model platforms
 
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: ant-design
 open_collective: ant-design
 issuehunt: ant-design/ant-design
+buy_me_a_coffee: antdesign
diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
@@ -136,6 +136,8 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
       lineHeight: 1,
 
       [`${componentCls}-count`]: {
+        display: 'inline-flex',
+        justifyContent: 'center',
         zIndex: token.indicatorZIndex,
         minWidth: indicatorHeight,
         height: indicatorHeight,

diff --git a/components/collapse/style/index.ts b/components/collapse/style/index.ts
@@ -75,7 +75,6 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
       ...resetComponent(token),
       backgroundColor: headerBg,
       border: borderBase,
-      borderBottom: 0,
       borderRadius: collapsePanelBorderRadius,
 
       [`&-rtl`]: {
@@ -199,6 +198,8 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
       },
 
       [`${componentCls}-item:last-child`]: {
+        borderBottom: 0,
+
         [`> ${componentCls}-content`]: {
           borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)}`,
         },

diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
@@ -700,21 +700,37 @@ describe('ColorPicker', () => {
   });
 
   describe('default clearValue should be changed', () => {
-    const Demo = () => {
-      const [color, setColor] = useState<string>('');
+    const Demo = ({ defaultValue }: { defaultValue?: string }) => {
+      const [color, setColor] = useState<string | undefined>(defaultValue);
       useEffect(() => {
         setColor('#1677ff');
       }, []);
       return <ColorPicker value={color} allowClear />;
     };
 
     it('normal', () => {
-      const { container } = render(<Demo />);
+      const { container } = render(<Demo defaultValue="" />);
 
       expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
     });
 
     it('strict', () => {
+      const { container } = render(
+        <React.StrictMode>
+          <Demo defaultValue="" />
+        </React.StrictMode>,
+      );
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+
+    it('default undefined, normal', () => {
+      const { container } = render(<Demo />);
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+
+    it('default undefined, strict', () => {
       const { container } = render(
         <React.StrictMode>
           <Demo />

diff --git a/components/color-picker/hooks/useColorState.ts b/components/color-picker/hooks/useColorState.ts
@@ -43,13 +43,11 @@ const useColorState = (
       return;
     }
     prevValue.current = value;
-    if (hasValue(value)) {
-      const newColor = generateColor(value || '');
-      if (prevColor.current.cleared === true) {
-        newColor.cleared = 'controlled';
-      }
-      setColorValue(newColor);
+    const newColor = generateColor(hasValue(value) ? value || '' : prevColor.current);
+    if (prevColor.current.cleared === true) {
+      newColor.cleared = 'controlled';
     }
+    setColorValue(newColor);
   }, [value]);
 
   return [colorValue, setColorValue, prevColor] as const;

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -77,7 +77,7 @@ export interface ThemeConfig {
    * @descCN 是否开启 `hashed` 属性。如果你的应用中只存在一个版本的 antd，你可以设置为 `false` 来进一步减小样式体积。
    * @descEN Whether to enable the `hashed` attribute. If there is only one version of antd in your application, you can set `false` to reduce the bundle size.
    * @default true
-   * @since 5.12.0
+   * @since 5.0.0
    */
   hashed?: boolean;
   /**

diff --git a/components/date-picker/locale/de_DE.ts b/components/date-picker/locale/de_DE.ts
@@ -8,6 +8,21 @@ const locale: PickerLocale = {
   lang: {
     placeholder: 'Datum auswählen',
     rangePlaceholder: ['Startdatum', 'Enddatum'],
+    shortWeekDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    shortMonths: [
+      'Jan',
+      'Feb',
+      'Mär',
+      'Apr',
+      'Mai',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Okt',
+      'Nov',
+      'Dez',
+    ],
     ...CalendarLocale,
   },
   timePickerLocale: {

diff --git a/components/date-picker/locale/es_ES.ts b/components/date-picker/locale/es_ES.ts
@@ -8,6 +8,21 @@ const locale: PickerLocale = {
   lang: {
     placeholder: 'Seleccionar fecha',
     rangePlaceholder: ['Fecha inicial', 'Fecha final'],
+    shortWeekDays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
+    shortMonths: [
+      'Ene',
+      'Feb',
+      'Mar',
+      'Abr',
+      'May',
+      'Jun',
+      'Jul',
+      'Ago',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dic',
+    ],
     ...CalendarLocale,
   },
   timePickerLocale: {