antd-mobile 5.0.0-rc.23 → 5.0.0-rc.24

package/2x/es/components/text-area/text-area.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur'> & {
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd'> & {
     onChange?: (val: string) => void;
     value?: string;
     defaultValue?: string;
@@ -20,7 +20,7 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/2x/es/components/text-area/text-area.js

@@ -1,6 +1,5 @@
-import { __rest } from "tslib";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = 'adm-text-area';
@@ -12,19 +11,11 @@ const defaultProps = {
 };
 export const TextArea = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-
   const {
-    className,
-    style,
-    defaultValue: outerDefaultValue,
-    value: outerValue,
-    onChange: outerOnChange,
-    rows: rows,
-    autoSize: autoSize,
-    showCount
-  } = props,
-        textAreaProps = __rest(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
-
+    autoSize,
+    showCount,
+    maxLength
+  } = props;
   const [value, setValue] = usePropsValue(props);
   const nativeTextAreaRef = useRef(null);
   useImperativeHandle(ref, () => ({
@@ -64,39 +55,57 @@ export const TextArea = forwardRef((p, ref) => {
 
     textArea.style.height = `${height}px`;
   }, [value, autoSize]);
+  const compositingRef = useRef(false);
   let count;
+  const valueLength = [...value].length;
 
   if (typeof showCount === 'function') {
-    count = showCount(value.length, props.maxLength);
+    count = showCount(valueLength, maxLength);
   } else if (showCount) {
     count = React.createElement("div", {
       className: `${classPrefix}-count`
-    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+    }, maxLength === undefined ? valueLength : valueLength + '/' + maxLength);
   }
 
-  return React.createElement("div", {
-    className: classNames(`${classPrefix}-wrapper`, className),
-    style: style
-  }, React.createElement("textarea", Object.assign({
-    ref: nativeTextAreaRef
-  }, textAreaProps, {
-    className: classPrefix,
-    rows: rows,
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("textarea", {
+    ref: nativeTextAreaRef,
+    className: `${classPrefix}-element`,
+    rows: props.rows,
     value: value,
     onChange: e => {
-      setValue(e.target.value);
+      let v = e.target.value;
+
+      if (maxLength && !compositingRef.current) {
+        v = [...v].slice(0, maxLength).join('');
+      }
+
+      setValue(v);
     },
-    onFocus: e => {
+    id: props.id,
+    onCompositionStart: e => {
       var _a;
 
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: e => {
+    onCompositionEnd: e => {
       var _a;
 
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = false;
+
+      if (maxLength) {
+        setValue([...value].slice(0, maxLength).join(''));
+      }
+
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    id: props.id
-  })), count);
+    autoComplete: props.autoComplete,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur
+  }), count));
 });
 TextArea.defaultProps = defaultProps;

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.23",
+  "version": "5.0.0-rc.24",
   "dependencies": {
     "@react-spring/web": "^9.4.2",
     "@types/resize-observer-browser": "^0.1.6",

package/README.md

@@ -1,8 +1,9 @@
-<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*1Ps5R4QVn28AAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
+<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*8HtNS4uMKkAAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
 
 ![npm (tag)](https://img.shields.io/npm/v/antd-mobile/next)
 ![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/ant-design/ant-design-mobile)
-![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count)
+![npm](https://img.shields.io/npm/dw/antd-mobile)
+![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count?label=downloads%285.x%29)
 ![gzip size](https://img.badgesize.io/https:/unpkg.com/antd-mobile@next/umd/antd-mobile.js?label=gzip%20size&compression=gzip)
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Average time to resolve an issue')
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Percentage of issues still open')
@@ -21,17 +22,16 @@ $ yarn add antd-mobile@next
 - **Atomic**: The function of each component, neither more nor less, is exactly what you need.
 - **Fluent**: With smooth gestures and delicate animation, it helps the product create the ultimate experience.
 
-v5(Poplar) is the next major version of antd-mobile, we recommend using it instead of v2.
-
 You can also play with antd-mobile just in browser with [Codesandbox](https://codesandbox.io/s/antd-mobile-snrxr?file=/package.json). No need to prepare development environment.
 
 If you found bugs or would like to request some new features, please consider opening an [issue](https://github.com/ant-design/ant-design-mobile/issues/new).
 
 If you have some question about how to use ant-mobile, you can start a [discussion thread](https://github.com/ant-design/ant-design-mobile/discussions).
 
-Feel free to join our DingDing group:
+And we also have some community groups here. Feel free to join us:
 
-<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="250" />
+- [DingDing](https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ)
+- [Discord](https://discord.gg/jmNvw4WFYn)
 
 ---
 

package/cjs/components/cascade-picker-view/cascade-picker-view.d.ts

@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { NativeProps } from '../../utils/native-props';
 import type { PickerViewProps } from '../picker-view';
 import type { CascadePickerOption } from '../cascade-picker';
 export declare type CascadePickerViewProps = Omit<PickerViewProps, 'columns'> & {
     options: CascadePickerOption[];
-} & NativeProps<'--height'>;
+};
 export declare const CascadePickerView: FC<CascadePickerViewProps>;

package/cjs/components/date-picker/date-picker.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerProps } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
-export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation'> & {
+export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style'> & {
     value?: Date | null;
     defaultValue?: Date | null;
     onSelect?: (value: Date) => void;

package/cjs/components/date-picker-view/date-picker-view.d.ts

@@ -1,7 +1,8 @@
 import { FC, ReactNode } from 'react';
+import type { PickerViewProps } from '../picker-view';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';
-export declare type DatePickerViewProps = {
+export declare type DatePickerViewProps = Pick<PickerViewProps, 'style'> & {
     value?: Date;
     defaultValue?: Date;
     onChange?: (value: Date) => void;
@@ -10,5 +11,5 @@ export declare type DatePickerViewProps = {
     precision?: Precision;
     renderLabel?: (type: Precision, data: number) => ReactNode;
     filter?: DatePickerFilter;
-} & NativeProps<'--height'>;
+} & NativeProps;
 export declare const DatePickerView: FC<DatePickerViewProps>;

package/cjs/components/form/form-item.css

@@ -11,7 +11,8 @@
 .adm-form-item-label-required {
   position: absolute;
   left: -0.6em;
-  top: 0.2em;
+  top: 0;
+  font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
   user-select: none;
 }
@@ -22,8 +23,8 @@
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {
-  margin-bottom: 4px;
   font-size: 15px;
+  margin-bottom: 4px;
 }
 .adm-form-vertical .adm-form-item-footer {
   margin-top: 4px;

package/cjs/components/form/form-item.d.ts

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemProps, 'style' | 'onClick' | 'extra'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;
@@ -17,6 +17,6 @@ export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemPr
     hidden?: boolean;
     layout?: FormLayout;
     children: ChildrenType;
-};
+} & NativeProps;
 export declare const FormItem: FC<FormItemProps>;
 export {};

package/cjs/components/form/form-item.js

@@ -48,7 +48,8 @@ const FormItemLayout = props => {
     children,
     htmlFor,
     hidden,
-    errors
+    errors,
+    arrow
   } = props;
   const context = (0, _react.useContext)(_context.FormContext);
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
@@ -77,7 +78,8 @@ const FormItemLayout = props => {
       [`${classPrefix}-hidden`]: hidden
     }),
     disabled: disabled,
-    onClick: props.onClick
+    onClick: props.onClick,
+    arrow: arrow
   }, children);
 };
 
@@ -105,9 +107,10 @@ const FormItem = props => {
     validateTrigger,
     onClick,
     shouldUpdate,
-    dependencies
+    dependencies,
+    arrow
   } = props,
-        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
+        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -166,7 +169,8 @@ const FormItem = props => {
       errors: errors,
       onClick: onClick,
       hidden: hidden,
-      layout: layout
+      layout: layout,
+      arrow: arrow
     }, _react.default.createElement(_context.NoStyleItemContext.Provider, {
       value: onSubMetaChange
     }, baseChildren));

package/cjs/components/form/form.css

@@ -1,6 +1,6 @@
 .adm-form .adm-list.adm-list {
-  --padding-left: 20px;
-  --padding-right: 20px;
+  --padding-left: 16px;
+  --padding-right: 12px;
 }
 .adm-form-horizontal .adm-list.adm-list {
   --prefix-width: 6em;
@@ -10,5 +10,5 @@
   align-self: center;
 }
 .adm-form .adm-form-footer {
-  padding: 12px;
+  padding: 20px 12px;
 }

package/cjs/components/form/form.d.ts

@@ -1,16 +1,17 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { ListProps } from '../list';
-import type { FormProps as RcFormProps, FormInstance } from 'rc-field-form';
+import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 import type { FormLayout } from '.';
-export declare type FormProps = RcFormProps & NativeProps & Partial<FormContextType> & {
+export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
+export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: FormLayout;
     mode?: ListProps['mode'];
 };
-export declare const Form: React.ForwardRefExoticComponent<RcFormProps<any> & NativeProps<never> & Partial<FormContextType> & {
+export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<never> & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
     mode?: ListProps['mode'];
-} & React.RefAttributes<FormInstance<any>>>;
+} & React.RefAttributes<Pick<RCFormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>>;

package/cjs/components/form/index.css

@@ -1,6 +1,6 @@
 .adm-form .adm-list.adm-list {
-  --padding-left: 20px;
-  --padding-right: 20px;
+  --padding-left: 16px;
+  --padding-right: 12px;
 }
 .adm-form-horizontal .adm-list.adm-list {
   --prefix-width: 6em;
@@ -10,7 +10,7 @@
   align-self: center;
 }
 .adm-form .adm-form-footer {
-  padding: 12px;
+  padding: 20px 12px;
 }
 .adm-form-item + .adm-form-item {
   border-top: none;
@@ -25,7 +25,8 @@
 .adm-form-item-label-required {
   position: absolute;
   left: -0.6em;
-  top: 0.2em;
+  top: 0;
+  font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
   user-select: none;
 }
@@ -36,8 +37,8 @@
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {
-  margin-bottom: 4px;
   font-size: 15px;
+  margin-bottom: 4px;
 }
 .adm-form-vertical .adm-form-item-footer {
   margin-top: 4px;

package/cjs/components/form/index.d.ts

@@ -2,13 +2,14 @@
 import './index.less';
 import { useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
-export type { FormProps } from './form';
-export type { FormInstance } from 'rc-field-form';
-declare const _default: import("react").ForwardRefExoticComponent<import("rc-field-form").FormProps<any> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
+export type { FormProps, FormInstance } from './form';
+export type { FormItemProps } from './form-item';
+export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
     mode?: "default" | "card" | undefined;
-} & import("react").RefAttributes<import("rc-field-form").FormInstance<any>>> & {
+} & import("react").RefAttributes<Pick<import("rc-field-form").FormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
     Header: import("react").FC<{}>;
     useForm: typeof useForm;

package/cjs/components/input/input.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -19,7 +19,7 @@ export declare type InputRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/cjs/components/input/input.js

@@ -105,7 +105,9 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     autoCapitalize: props.autoCapitalize,
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
-    onKeyUp: props.onKeyUp
+    onKeyUp: props.onKeyUp,
+    onCompositionStart: props.onCompositionStart,
+    onCompositionEnd: props.onCompositionEnd
   }), props.clearable && !!value && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {

package/cjs/components/list/list.css

@@ -83,10 +83,10 @@
   opacity: 0.4;
   pointer-events: none;
 }
-a.adm-list-item:active {
+a.adm-list-item:active:not(.adm-list-item-disabled) {
   background-color: var(--active-background-color);
 }
-a.adm-list-item:active::after {
+a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   content: ' ';
   display: block;
   position: absolute;
@@ -95,6 +95,3 @@ a.adm-list-item:active::after {
   left: 0;
   border-bottom: var(--border-inner);
 }
-a.adm-list-item.adm-list-item-disabled:active {
-  background-color: unset;
-}

package/cjs/components/picker/picker.css

@@ -1,10 +1,17 @@
 .adm-picker {
+  --header-button-font-size: 15px;
+  --title-font-size: 15px;
+  --item-font-size: 16px;
   width: 100%;
   height: 300px;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+}
+.adm-picker .adm-picker-view.adm-picker-view {
+  --item-font-size: var(---item-font-size);
 }
 .adm-picker-header {
   flex: none;
@@ -15,13 +22,13 @@
   padding: 4px 4px;
 }
 .adm-picker-header-button {
-  font-size: 15px;
+  font-size: var(--header-button-font-size);
   display: inline-block;
   padding: 8px 8px;
 }
 .adm-picker-header-title {
   padding: 4px 4px;
-  font-size: 15px;
+  font-size: var(--title-font-size);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;

package/cjs/components/picker/picker.d.ts

@@ -15,5 +15,5 @@ export declare type PickerProps = {
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size'>;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/cjs/components/picker-view/picker-view.css

@@ -1,5 +1,6 @@
 .adm-picker-view {
   --height: 240px;
+  --item-font-size: 16px;
   height: var(--height);
   width: 100%;
   display: flex;
@@ -39,7 +40,7 @@
   bottom: -100vh;
 }
 .adm-picker-view-column-item {
-  font-size: 16px;
+  font-size: var(--item-font-size);
   padding: 0 6px;
   height: 34px;
   display: flex;

package/cjs/components/picker-view/picker-view.d.ts

@@ -14,5 +14,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height'>;
+} & NativeProps<'--height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/cjs/components/popover/arrow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Arrow: React.NamedExoticComponent<NativeProps<never>>;

package/cjs/components/popover/arrow.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Arrow = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Arrow = (0, _react.memo)(props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    viewBox: '0 0 30 16'
+  }, _react.default.createElement("g", {
+    transform: 'translate(-1300.000000, -841.000000)',
+    fill: 'currentColor'
+  }, _react.default.createElement("path", {
+    d: 'M1300,841 L1330,841 L1318.07289,855.312538 C1316.65863,857.009645 1314.13637,857.238942 1312.43926,855.824685 C1312.25341,855.669808 1312.08199,855.49839 1311.92711,855.312538 L1300,841 L1300,841 Z'
+  }))));
+});
+exports.Arrow = Arrow;

package/cjs/components/popover/index.d.ts

@@ -1,27 +1,19 @@
 /// <reference types="react" />
 import './popover.less';
-export type { BasePopoverProps, PopoverRef } from './popover';
-export type { PopMenuProps, Action } from './pop-menu';
+import './popover-menu.less';
+export type { PopoverProps, PopoverRef } from './popover';
+export type { PopoverMenuProps, Action } from './popover-menu';
 declare const _default: import("react").ForwardRefExoticComponent<{
-    getContainer?: (() => HTMLElement) | undefined;
+    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
     destroyOnHide?: boolean | undefined;
     children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     stopPropagation?: "click"[] | undefined;
-} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
     content: import("react").ReactNode;
-} & import("react").RefAttributes<import("./popover").PopoverRef>> & {
-    Menu: <T extends import("./pop-menu").Action = import("./pop-menu").Action>(props: {
-        getContainer?: (() => HTMLElement) | undefined;
-        destroyOnHide?: boolean | undefined;
-        children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-        mode?: "dark" | "light" | undefined;
-        trigger?: "click" | undefined;
-        placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
-        stopPropagation?: "click"[] | undefined;
-    } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
+} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
+    Menu: <T extends import("./popover-menu").Action = import("./popover-menu").Action>(props: Pick<import("./popover").PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "trigger" | "defaultVisible" | "onVisibleChange" | "placement" | "destroyOnHide"> & {
         actions: T[];
         onAction?: ((text: T) => void) | undefined;
     } & {

package/cjs/components/popover/index.js

@@ -7,14 +7,16 @@ exports.default = void 0;
 
 require("./popover.css");
 
+require("./popover-menu.css");
+
 var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
 
-var _popMenu = require("./pop-menu");
+var _popoverMenu2 = require("./popover-menu");
 
 var _popover2 = require("./popover");
 
 var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_popover2.Popover, {
-  Menu: _popMenu.PopMenu
+  Menu: _popoverMenu2.PopoverMenu
 });
 
 exports.default = _default;