chore: feature merge master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.31.1",
+  "version": "5.32.0",
   "scripts": {
     "start": "dumi dev",
     "build": "gulp",

src/components/action-sheet/action-sheet.less

@@ -31,7 +31,7 @@
     background-color: var(--adm-color-background);
     padding: 16px;
     &:active {
-      background-color: #eeeeee;
+      background-color: var(--adm-color-border);
     }
     &-disabled {
       cursor: not-allowed;

src/components/button/button.less

@@ -42,8 +42,9 @@
     );
     width: 100%;
     height: 100%;
-    background-color: #000;
-    border: var(--border-width) var(--border-style) #000;
+    background-color: var(--adm-color-text-dark-solid);
+    border: var(--border-width) var(--border-style)
+      var(--adm-color-text-dark-solid);
     border-radius: var(--border-radius);
     opacity: 0;
     content: ' ';

src/components/calendar/calendar.tsx

@@ -15,6 +15,7 @@ import { useConfig } from '../config-provider'
 import isoWeek from 'dayjs/plugin/isoWeek'
 import { useUpdateEffect } from 'ahooks'
 import { usePropsValue } from '../../utils/use-props-value'
+import { replaceMessage } from '../../utils/replace-message'
 import {
   convertValueToRange,
   convertPageToDayjs,
@@ -171,10 +172,10 @@ export const Calendar = forwardRef<CalendarRef, CalendarProps>((p, ref) => {
         {props.prevMonthButton}
       </a>
       <div className={`${classPrefix}-title`}>
-        {locale.Calendar.renderYearAndMonth(
-          current.year(),
-          current.month() + 1
-        )}
+        {replaceMessage(locale.Calendar.yearAndMonth, {
+          year: current.year().toString(),
+          month: (current.month() + 1).toString(),
+        })}
       </div>
       <a
         className={classNames(

src/components/center-popup/center-popup.tsx

@@ -16,6 +16,8 @@ import {
   PopupBaseProps,
 } from '../popup/popup-base-props'
 
+const classPrefix = 'adm-center-popup'
+
 export type CenterPopupProps = PopupBaseProps &
   PropsWithChildren<{
     // These props currently are only used internally. They are not exported to users:
@@ -72,7 +74,7 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
 
   const body = (
     <div
-      className={classNames('adm-center-popup-body', props.bodyClassName)}
+      className={classNames(`${classPrefix}-body`, props.bodyClassName)}
       style={props.bodyStyle}
     >
       {props.children}
@@ -84,7 +86,7 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
     withNativeProps(
       props,
       <div
-        className='adm-center-popup'
+        className={classPrefix}
         style={{
           display: active ? undefined : 'none',
           pointerEvents: active ? undefined : 'none',
@@ -102,21 +104,21 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
               }
             }}
             style={props.maskStyle}
-            className={classNames('adm-center-popup-mask', props.maskClassName)}
+            className={classNames(`${classPrefix}-mask`, props.maskClassName)}
             disableBodyScroll={false}
             stopPropagation={props.stopPropagation}
           />
         )}
         <div
-          className='adm-center-popup-wrap'
+          className={`${classPrefix}-wrap`}
           role={props.role}
           aria-label={props['aria-label']}
         >
           <animated.div style={style} ref={ref}>
             {props.showCloseButton && (
               <a
                 className={classNames(
-                  'adm-center-popup-close',
+                  `${classPrefix}-close`,
                   'adm-plain-anchor'
                 )}
                 onClick={() => {

src/components/checkbox/index.en.md

@@ -28,7 +28,7 @@ type CheckboxValue = string | number
 | block | Whether to render as a block-level element | `boolean` | `false` |
 | checked | To specify whether selected or not currently | `boolean` | `false` |
 | defaultChecked | Selected or not initially | `boolean` | `false` |
-| disabled | Failure state | `boolean` | `false` |
+| disabled | Disabled state | `boolean` | `false` |
 | icon | The customized `icon` | `(checked: boolean, indeterminate: boolean) => React.ReactNode` | - |
 | id | The id of the input element, often used in conjunction with the label | `string` | - |
 | indeterminate | To set the `indeterminate` state, only responsible for style control | `boolean` | `false` |

src/components/checkbox/index.zh.md

@@ -28,7 +28,7 @@ type CheckboxValue = string | number
 | block | 是否渲染为块级元素 | `boolean` | `false` |
 | checked | 指定当前是否选中 | `boolean` | `false` |
 | defaultChecked | 初始是否选中 | `boolean` | `false` |
-| disabled | 失效状态 | `boolean` | `false` |
+| disabled | 禁用状态 | `boolean` | `false` |
 | icon | 自定义 `icon` 图标 | `(checked: boolean, indeterminate: boolean) => React.ReactNode` | - |
 | id | `input` 元素的 `id`，常用来配合 `label` 使用 | `string` | - |
 | indeterminate | 设置 `indeterminate` 状态，只负责样式控制 | `boolean` | `false` |

src/components/collapse/collapse.tsx

@@ -129,30 +129,44 @@ export const Collapse: FC<CollapseProps> = props => {
     panels.push(child)
   })
 
-  const [activeKey, setActiveKey] = usePropsValue<string[]>(
-    props.accordion
-      ? {
-          value:
-            props.activeKey === undefined
-              ? undefined
-              : props.activeKey === null
-              ? []
-              : [props.activeKey],
-          defaultValue:
-            props.defaultActiveKey === undefined ||
-            props.defaultActiveKey === null
-              ? []
-              : [props.defaultActiveKey],
-          onChange: v => {
-            props.onChange?.(v[0] ?? null)
-          },
-        }
-      : {
-          value: props.activeKey,
-          defaultValue: props.defaultActiveKey ?? [],
-          onChange: props.onChange,
-        }
-  )
+  const handlePropsValue = () => {
+    if (!props.accordion) {
+      return {
+        value: props.activeKey,
+        defaultValue: props.defaultActiveKey ?? [],
+        onChange: props.onChange,
+      }
+    }
+
+    const initValue: {
+      value?: string[]
+      defaultValue: string[]
+      onChange: (v: string[]) => void
+    } = {
+      value: [],
+      defaultValue: [],
+      onChange: v => {
+        props.onChange?.(v[0] ?? null)
+      },
+    }
+
+    if (props.activeKey === undefined) {
+      initValue.value = undefined
+    } else if (props.activeKey !== null) {
+      initValue.value = [props.activeKey]
+    }
+
+    if (
+      ![null, undefined].includes(props.defaultActiveKey as null | undefined)
+    ) {
+      initValue.defaultValue = [props.defaultActiveKey as string]
+    }
+
+    return initValue
+  }
+
+  const [activeKey, setActiveKey] = usePropsValue<string[]>(handlePropsValue())
+
   const activeKeyList =
     activeKey === null ? [] : Array.isArray(activeKey) ? activeKey : [activeKey]
 

src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap

@@ -8618,7 +8618,7 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
       <div
         class="adm-calendar-title"
       >
-         2022年3月
+        2022年3月
       </div>
       <a
         class="adm-calendar-arrow-button adm-calendar-arrow-button-right adm-calendar-arrow-button-right-month"

src/components/ellipsis/ellipsis.tsx

@@ -194,34 +194,32 @@ export const Ellipsis: FC<EllipsisProps> = p => {
   ])
 
   const expandActionElement =
-    exceeded && props.expandText
-      ? withStopPropagation(
-          props.stopPropagationForActionButtons,
-          <a
-            ref={expandElRef}
-            onClick={() => {
-              setExpanded(true)
-            }}
-          >
-            {props.expandText}
-          </a>
-        )
-      : null
+    !!props.expandText &&
+    withStopPropagation(
+      props.stopPropagationForActionButtons,
+      <a
+        ref={expandElRef}
+        onClick={() => {
+          setExpanded(true)
+        }}
+      >
+        {props.expandText}
+      </a>
+    )
 
   const collapseActionElement =
-    exceeded && props.collapseText
-      ? withStopPropagation(
-          props.stopPropagationForActionButtons,
-          <a
-            ref={collapseElRef}
-            onClick={() => {
-              setExpanded(false)
-            }}
-          >
-            {props.collapseText}
-          </a>
-        )
-      : null
+    !!props.collapseText &&
+    withStopPropagation(
+      props.stopPropagationForActionButtons,
+      <a
+        ref={collapseElRef}
+        onClick={() => {
+          setExpanded(false)
+        }}
+      >
+        {props.collapseText}
+      </a>
+    )
 
   const renderContent = () => {
     if (!exceeded) return props.content

src/components/error-block/create-error-block.tsx

@@ -30,9 +30,10 @@ export function createErrorBlock(imageRecord: ImageRecord) {
     const props = mergeProps(defaultProps, p)
     const { locale } = useConfig()
     const contentPack = locale.ErrorBlock[props.status]
-    const des =
+    const desc =
       'description' in props ? props.description : contentPack.description
     const title = 'title' in props ? props.title : contentPack.title
+
     const image: ReactNode = props.image ?? imageRecord[props.status]
     const imageNode =
       typeof image === 'string' ? (
@@ -50,11 +51,12 @@ export function createErrorBlock(imageRecord: ImageRecord) {
       >
         <div className={`${classPrefix}-image`}>{imageNode}</div>
         <div className={`${classPrefix}-description`}>
-          {title && (
+          {![undefined, null].includes(title as null) && (
             <div className={`${classPrefix}-description-title`}>{title}</div>
           )}
-          {des && (
-            <div className={`${classPrefix}-description-subtitle`}>{des}</div>
+
+          {![undefined, null].includes(desc as null) && (
+            <div className={`${classPrefix}-description-subtitle`}>{desc}</div>
           )}
         </div>
 

src/components/error-block/error-block.less

@@ -26,7 +26,7 @@
 
   &-description {
     font-size: var(--adm-font-size-4);
-    color: #999;
+    color: var(--adm-color-weak);
     line-height: 1.4;
     margin-top: 12px;
     &-title {

src/components/error-block/tests/error-block.test.tsx

@@ -60,4 +60,24 @@ describe('ErrorBlock', () => {
 
     expect(container).toMatchSnapshot()
   })
+  test('renders when description and title', async () => {
+    const title = 0
+    const description = 0
+
+    const { container } = render(
+      <ErrorBlock title={title} description={description} />
+    )
+
+    const titleElement = container.querySelector(
+      `.${classPrefix}-description-title`
+    )
+    expect(titleElement).toBeInTheDocument()
+    expect(titleElement?.textContent).toBe(title + '')
+
+    const descElement = container.querySelector(
+      `.${classPrefix}-description-subtitle`
+    )
+    expect(descElement).toBeInTheDocument()
+    expect(descElement?.textContent).toBe(description + '')
+  })
 })

src/components/floating-panel/floating-panel.tsx

@@ -14,6 +14,8 @@ import { mergeProps } from '../../utils/with-default-props'
 import { useLockScroll } from '../../utils/use-lock-scroll'
 import { useMemoizedFn } from 'ahooks'
 
+const classPrefix = 'adm-floating-panel'
+
 export type FloatingPanelRef = {
   setHeight: (
     height: number,
@@ -88,7 +90,7 @@ export const FloatingPanel = forwardRef<FloatingPanelRef, FloatingPanelProps>(
         setPulling(pullingRef.current)
         if (!pullingRef.current) return
         const { event } = state
-        if (event.cancelable) {
+        if (event.cancelable && supportsPassive) {
           event.preventDefault()
         }
         event.stopPropagation()
@@ -109,9 +111,7 @@ export const FloatingPanel = forwardRef<FloatingPanelRef, FloatingPanelProps>(
         from: () => [0, y.get()],
         pointer: { touch: true },
         target: elementRef,
-        eventOptions: supportsPassive
-          ? { passive: false }
-          : (false as unknown as AddEventListenerOptions),
+        eventOptions: supportsPassive ? { passive: false } : undefined,
       }
     )
 
@@ -139,22 +139,22 @@ export const FloatingPanel = forwardRef<FloatingPanelRef, FloatingPanelProps>(
       props,
       <animated.div
         ref={elementRef}
-        className='adm-floating-panel'
+        className={classPrefix}
         style={{
           height: Math.round(maxHeight),
           translateY: y.to(y => `calc(100% + (${Math.round(y)}px))`),
         }}
       >
         <div
-          className='adm-floating-panel-mask'
+          className={`${classPrefix}-mask`}
           style={{
             display: pulling ? 'block' : 'none',
           }}
         />
-        <div className='adm-floating-panel-header' ref={headerRef}>
-          <div className='adm-floating-panel-bar' />
+        <div className={`${classPrefix}-header`} ref={headerRef}>
+          <div className={`${classPrefix}-bar`} />
         </div>
-        <div className='adm-floating-panel-content' ref={contentRef}>
+        <div className={`${classPrefix}-content`} ref={contentRef}>
           {props.children}
         </div>
       </animated.div>