chore: auto merge branches (#6133)

chore: master merge feature

src/components/cascade-picker-view/tests/cascade-picker-view.test.tsx

@@ -12,7 +12,10 @@ describe('CascadePickerView', () => {
 
   test('controlled mode', async () => {
     const App = () => {
-      const [value, setValue] = useState<(string | null)[]>(['浙江', '杭州'])
+      const [value, setValue] = useState<(string | number | null)[]>([
+        '浙江',
+        '杭州',
+      ])
       return (
         <>
           <CascadePickerView

src/components/collapse/collapse.tsx

@@ -81,7 +81,9 @@ const CollapsePanelContent: FC<{
 
   return (
     <animated.div
-      className={`${classPrefix}-panel-content`}
+      className={classNames(`${classPrefix}-panel-content`, {
+        [`${classPrefix}-panel-content-active`]: visible,
+      })}
       style={{
         height: height.to(v => {
           if (height.idle && visible) {

src/components/date-picker/date-picker-date-utils.ts

@@ -210,21 +210,21 @@ export function convertDateToStringArray(
   ]
 }
 
-export function convertStringArrayToDate(
-  value: (string | null | undefined)[]
-): Date {
+export function convertStringArrayToDate<
+  T extends string | number | null | undefined
+>(value: T[]): Date {
   const yearString = value[0] ?? '1900'
   const monthString = value[1] ?? '1'
   const dateString = value[2] ?? '1'
   const hourString = value[3] ?? '0'
   const minuteString = value[4] ?? '0'
   const secondString = value[5] ?? '0'
   return new Date(
-    parseInt(yearString),
-    parseInt(monthString) - 1,
-    parseInt(dateString),
-    parseInt(hourString),
-    parseInt(minuteString),
-    parseInt(secondString)
+    parseInt(yearString as string),
+    parseInt(monthString as string) - 1,
+    parseInt(dateString as string),
+    parseInt(hourString as string),
+    parseInt(minuteString as string),
+    parseInt(secondString as string)
   )
 }

src/components/date-picker/date-picker-utils.ts

@@ -42,8 +42,10 @@ export const convertDateToStringArray = (
   }
 }
 
-export const convertStringArrayToDate = (
-  value: (string | null | undefined)[],
+export const convertStringArrayToDate = <
+  T extends string | number | null | undefined
+>(
+  value: T[],
   precision: Precision
 ) => {
   // Special case for DATE_NOW

src/components/date-picker/date-picker-week-utils.ts

@@ -128,16 +128,16 @@ export function convertDateToStringArray(
   ]
 }
 
-export function convertStringArrayToDate(
-  value: (string | null | undefined)[]
-): Date {
+export function convertStringArrayToDate<
+  T extends string | number | null | undefined
+>(value: T[]): Date {
   const yearString = value[0] ?? '1900'
   const weekString = value[1] ?? '1'
   const weekdayString = value[2] ?? '1'
   const day = dayjs()
-    .year(parseInt(yearString))
-    .isoWeek(parseInt(weekString))
-    .isoWeekday(parseInt(weekdayString))
+    .year(parseInt(yearString as string))
+    .isoWeek(parseInt(weekString as string))
+    .isoWeekday(parseInt(weekdayString as string))
     .hour(0)
     .minute(0)
     .second(0)

src/components/dropdown/dropdown.tsx

@@ -10,11 +10,12 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react'
-import Popup from '../popup'
+import Popup, { PopupProps } from '../popup'
 import Item, { ItemChildrenWrap } from './item'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import { usePropsValue } from '../../utils/use-props-value'
+import { defaultPopupBaseProps } from '../popup/popup-base-props'
 
 const classPrefix = `adm-dropdown`
 
@@ -26,12 +27,14 @@ export type DropdownProps = {
   onChange?: (key: string | null) => void
   // mask?: boolean;
   arrow?: React.ReactNode
+  getContainer?: PopupProps['getContainer']
 } & NativeProps
 
 const defaultProps = {
   defaultActiveKey: null,
   closeOnMaskClick: true,
   closeOnClickAway: false,
+  getContainer: defaultPopupBaseProps['getContainer'],
 }
 
 export type DropdownRef = {
@@ -123,6 +126,7 @@ const Dropdown = forwardRef<
       <Popup
         visible={!!value}
         position='top'
+        getContainer={props.getContainer}
         className={`${classPrefix}-popup`}
         maskClassName={`${classPrefix}-popup-mask`}
         bodyClassName={`${classPrefix}-popup-body`}

src/components/dropdown/index.en.md

@@ -22,6 +22,7 @@ It is suitable for filtering, sorting and changing the display range or order of
 | closeOnMaskClick | Whether to automatically close after clicking on the mask | `boolean` | `true` |
 | defaultActiveKey | The default active `Item` key | `string \| null` | `null` |
 | onChange | Triggered when `activeKey` changes | `(activeKey: string \| null)=> void` | - |
+| getContainer | The parent container of the custom popup | `HTMLElement \| (() => HTMLElement) \| null` | `document.body` |
 
 ### Ref
 

src/components/dropdown/index.zh.md

@@ -22,6 +22,7 @@
 | closeOnMaskClick | 是否在点击遮罩后自动隐藏 | `boolean` | `true` |
 | defaultActiveKey | 默认激活的 `Item` `key` | `string \| null` | `null` |
 | onChange | `activeKey` 变化时触发 | `(activeKey: string \| null)=> void` | - |
+| getContainer | 自定义弹窗的父容器 | `HTMLElement \| (() => HTMLElement) \| null` | `document.body` |
 
 ### Ref
 

src/components/dropdown/tests/dropdown.test.tsx

@@ -55,6 +55,24 @@ describe('Dropdown', () => {
     expect(screen.getByText(1)).toBeInTheDocument()
   })
 
+  test('rendered to the current node', async () => {
+    const { getByText, container } = render(
+      <Dropdown getContainer={null}>
+        <Dropdown.Item key='bizop' title='Item'>
+          <div style={{ padding: 12 }}>内容</div>
+        </Dropdown.Item>
+      </Dropdown>
+    )
+
+    fireEvent.click(getByText('Item'))
+
+    await waitFor(() => {
+      expect(
+        container.querySelectorAll(`.${classPrefix} .${classPrefix}-popup`)[0]
+      ).toBeTruthy()
+    })
+  })
+
   test('forceRender should be work', () => {
     render(
       <Dropdown data-testid='dropdown'>

src/components/form/index.tsx

@@ -15,6 +15,9 @@ export type {
   ValidateMessages,
   FieldData,
   NamePath,
+  Rule,
+  RuleObject,
+  RuleRender,
 } from 'rc-field-form/es/interface'
 export type {
   FormArrayField,

src/components/picker-view/picker-view.tsx

@@ -10,7 +10,7 @@ import SpinLoading from '../spin-loading'
 
 const classPrefix = `adm-picker-view`
 
-export type PickerValue = string | null
+export type PickerValue = string | number | null
 
 export type PickerValueExtend = {
   columns: PickerColumnItem[][]
@@ -19,7 +19,7 @@ export type PickerValueExtend = {
 
 export type PickerColumnItem = {
   label: ReactNode
-  value: string
+  value: string | number
   key?: string | number
 }
 

src/components/picker-view/tests/picker-view.test.tsx

@@ -22,7 +22,10 @@ describe('PickerView', () => {
 
   test('controlled mode', async () => {
     const App = () => {
-      const [value, setValue] = useState<(string | null)[]>(['Mon', 'am'])
+      const [value, setValue] = useState<(string | number | null)[]>([
+        'Mon',
+        'am',
+      ])
       return (
         <>
           <PickerView

src/components/popup/demos/demo1.tsx

@@ -29,6 +29,9 @@ export default () => {
               onMaskClick={() => {
                 setVisible1(false)
               }}
+              onClose={() => {
+                setVisible1(false)
+              }}
               bodyStyle={{ height: '40vh' }}
             >
               {mockContent}
@@ -47,6 +50,9 @@ export default () => {
               onMaskClick={() => {
                 setVisible2(false)
               }}
+              onClose={() => {
+                setVisible2(false)
+              }}
               position='top'
               bodyStyle={{ height: '40vh' }}
             >

src/components/popup/popup.less

@@ -11,7 +11,6 @@
   position: fixed;
   background-color: var(--adm-color-background);
   z-index: calc(var(--z-index) + 10);
-
   .@{class-prefix-popup}-close-icon {
     position: absolute;
     z-index: 100;

src/components/popup/popup.tsx

@@ -13,6 +13,7 @@ import { CloseOutline } from 'antd-mobile-icons'
 import { defaultPopupBaseProps, PopupBaseProps } from './popup-base-props'
 import { useInnerVisible } from '../../utils/use-inner-visible'
 import { useConfig } from '../config-provider'
+import { useDrag } from '@use-gesture/react'
 
 const classPrefix = `adm-popup`
 
@@ -67,6 +68,21 @@ export const Popup: FC<PopupProps> = p => {
     },
   })
 
+  const bind = useDrag(
+    ({ swipe: [, swipeY] }) => {
+      if (
+        (swipeY === 1 && props.position === 'bottom') ||
+        (swipeY === -1 && props.position === 'top')
+      ) {
+        props.onClose?.()
+      }
+    },
+    {
+      axis: 'y',
+      enabled: ['top', 'bottom'].includes(props.position),
+    }
+  )
+
   const maskVisible = useInnerVisible(active && props.visible)
 
   const node = withStopPropagation(
@@ -76,7 +92,13 @@ export const Popup: FC<PopupProps> = p => {
       <div
         className={classPrefix}
         onClick={props.onClick}
-        style={{ display: active ? undefined : 'none' }}
+        style={{
+          display: active ? undefined : 'none',
+          touchAction: ['top', 'bottom'].includes(props.position)
+            ? 'none'
+            : 'auto',
+        }}
+        {...bind()}
       >
         {props.mask && (
           <Mask

src/components/popup/tests/popup.test.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { render, cleanup, fireEvent, mockDrag } from 'testing'
+import Popup from '..'
+
+describe('Popup', () => {
+  test('top swipe should be closed', () => {
+    const onClose = jest.fn()
+    render(
+      <Popup visible={true} onClose={onClose} position='top'>
+        <div style={{ height: '400px', width: '400px' }}></div>
+      </Popup>
+    )
+
+    mockDrag(
+      document.querySelector('.adm-popup') as Element,
+      new Array(8).fill(0).map((_, i) => {
+        return {
+          clientY: 400 - 50 * i,
+        }
+      })
+    )
+
+    expect(onClose).toBeCalledTimes(1)
+  })
+
+  test('bottom swipe should be closed', () => {
+    const onClose = jest.fn()
+    render(
+      <Popup visible={true} onClose={onClose} position='bottom'>
+        <div style={{ height: '400px', width: '400px' }}></div>
+      </Popup>
+    )
+
+    mockDrag(
+      document.querySelector('.adm-popup') as Element,
+      new Array(8).fill(0).map((_, i) => {
+        return {
+          clientY: 50 * i,
+        }
+      })
+    )
+
+    expect(onClose).toBeCalledTimes(1)
+  })
+})

src/components/search-bar/index.en.md

@@ -34,6 +34,8 @@ Narrow down the information pool to get targeted information quickly and easily.
 | showCancelButton | Whether to display the cancel button on the right side of the search input | `boolean \| ((focus: boolean, value: string) => boolean)` | `false` |
 | value | Input value | `string` | - |
 
+In addition, the following native attributes are supported: `onCompositionStart` `onCompositionEnd`
+
 ### CSS Variables
 
 | Name                | Description              | Default                 |

src/components/search-bar/index.zh.md

@@ -34,6 +34,8 @@
 | showCancelButton | 是否在搜索框右侧显示取消按钮 | `boolean \| ((focus: boolean, value: string) => boolean)` | `false` |
 | value | 输入值 | `string` | - |
 
+此外还支持以下原生属性：`onCompositionStart` `onCompositionEnd`
+
 ### CSS 变量
 
 | 属性                | 说明                   | 默认值                  |

src/components/search-bar/search-bar.tsx

@@ -20,7 +20,7 @@ export type SearchBarRef = InputRef
 
 export type SearchBarProps = Pick<
   InputProps,
-  'onFocus' | 'onBlur' | 'onClear'
+  'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd'
 > & {
   value?: string
   defaultValue?: string
@@ -148,11 +148,13 @@ export const SearchBar = forwardRef<SearchBarRef, SearchBarProps>((p, ref) => {
             }
           }}
           aria-label={locale.SearchBar.name}
-          onCompositionStart={() => {
+          onCompositionStart={e => {
             composingRef.current = true
+            props.onCompositionStart?.(e)
           }}
-          onCompositionEnd={() => {
+          onCompositionEnd={e => {
             composingRef.current = false
+            props.onCompositionEnd?.(e)
           }}
         />
       </div>