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

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

@@ -11,22 +11,21 @@
 .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;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);
+  margin-top: 4px;
 }
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {
-  margin-bottom: 4px;
   font-size: 15px;
-}
-.adm-form-vertical .adm-form-item-footer {
-  margin-top: 4px;
+  margin-bottom: 4px;
 }
 .adm-form-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;

package/es/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' | 'initialValue'> & 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/es/components/form/form-item.js

@@ -25,7 +25,8 @@ const FormItemLayout = props => {
     children,
     htmlFor,
     hidden,
-    errors
+    errors,
+    arrow
   } = props;
   const context = useContext(FormContext);
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
@@ -52,7 +53,8 @@ const FormItemLayout = props => {
       [`${classPrefix}-hidden`]: hidden
     }),
     disabled: disabled,
-    onClick: props.onClick
+    onClick: props.onClick,
+    arrow: arrow
   }, children);
 };
 
@@ -80,9 +82,10 @@ export const FormItem = props => {
     validateTrigger,
     onClick,
     shouldUpdate,
-    dependencies
+    dependencies,
+    arrow
   } = props,
-        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
+        fieldProps = __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
@@ -138,7 +141,8 @@ export const FormItem = props => {
       errors: errors,
       onClick: onClick,
       hidden: hidden,
-      layout: layout
+      layout: layout,
+      arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
     }, baseChildren));

package/es/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/es/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/es/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,22 +25,21 @@
 .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;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);
+  margin-top: 4px;
 }
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {
-  margin-bottom: 4px;
   font-size: 15px;
-}
-.adm-form-vertical .adm-form-item-footer {
-  margin-top: 4px;
+  margin-bottom: 4px;
 }
 .adm-form-horizontal .adm-list-item-content-prefix {
   padding-top: 12px;

package/es/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/es/components/image-uploader/image-uploader.js

@@ -1,11 +1,11 @@
 import { __awaiter } from "tslib";
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { AddOutline } from 'antd-mobile-icons';
 import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useMemoizedFn, useUnmount } from 'ahooks';
+import { useIsomorphicLayoutEffect, useMemoizedFn, useUnmount } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-image-uploader`;
@@ -26,7 +26,7 @@ export const ImageUploader = p => {
     setValue(updater(value));
   });
   const [tasks, setTasks] = useState([]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
       return !value.some(fileItem => fileItem.url === task.url);

package/es/components/image-viewer/image-viewer.css

@@ -10,6 +10,7 @@
   position: relative;
   z-index: 1;
   cursor: grab;
+  touch-action: none;
 }
 .adm-image-viewer-slides-inner {
   height: 100%;
@@ -32,6 +33,7 @@
   width: 100%;
   height: 100%;
   cursor: grab;
+  touch-action: none;
 }
 .adm-image-viewer-image-wrapper {
   width: 100%;

package/es/components/image-viewer/image-viewer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { renderToContainer } from '../../utils/render-to-container';
 import Mask from '../mask';
@@ -35,6 +35,16 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
   const props = mergeProps(multiDefaultProps, p);
+  const [defaultIndex, setDefaultIndex] = useState(props.defaultIndex);
+  const slidesRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    swipeTo: (index, immediate) => {
+      var _a;
+
+      setDefaultIndex(index);
+      (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
+    }
+  }));
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
@@ -43,8 +53,8 @@ export const MultiImageViewer = forwardRef((p, ref) => {
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {
-    ref: ref,
-    defaultIndex: props.defaultIndex,
+    ref: slidesRef,
+    defaultIndex: defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
     onTap: () => {

package/es/components/image-viewer/slide.js

@@ -22,7 +22,7 @@ export const Slide = props => {
   const pinchLockRef = useRef(false);
   useGesture({
     onDrag: state => {
-      if (state.tap && state.elapsedTime > 0) {
+      if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
         props.onTap();
         return;
@@ -81,13 +81,16 @@ export const Slide = props => {
     target: controlRef,
     drag: {
       // filterTaps: true,
-      from: () => [x.get(), y.get()]
+      from: () => [x.get(), y.get()],
+      pointer: {
+        touch: true
+      }
     },
     pinch: {
-      from: () => [zoom.get(), 0]
-    },
-    pointer: {
-      touch: true
+      from: () => [zoom.get(), 0],
+      pointer: {
+        touch: true
+      }
     }
   });
   return React.createElement("div", {
@@ -109,6 +112,7 @@ export const Slide = props => {
     }
   }, React.createElement("img", {
     src: props.image,
-    draggable: false
+    draggable: false,
+    alt: props.image
   }))));
 };

package/es/components/image-viewer/slides.d.ts

@@ -7,6 +7,6 @@ export declare type SlidesType = {
     onIndexChange?: (index: number) => void;
 };
 export declare type SlidesRef = {
-    swipeTo: (index: number, immediate: boolean) => void;
+    swipeTo: (index: number, immediate?: boolean) => void;
 };
 export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;

package/es/components/index-bar/index-bar.css

@@ -29,7 +29,7 @@
   top: 50%;
   right: 0;
   transform: translateY(-50%);
-  z-index: 3;
+  z-index: 910;
   overflow: visible;
   color: var(--adm-color-weak);
   font-size: 12px;
@@ -78,6 +78,7 @@
 }
 .adm-index-bar-sticky .adm-index-bar-anchor-title {
   position: sticky;
+  z-index: 900;
   top: var(--sticky-offset-top);
   left: 0;
 }

package/es/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' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -13,13 +13,15 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    min?: number;
+    max?: number;
 } & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'>;
 export declare type InputRef = {
     clear: () => void;
     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" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -31,5 +33,7 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedH
     id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
     enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
 } & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align"> & React.RefAttributes<InputRef>>;
 export {};

package/es/components/input/input.js

@@ -1,9 +1,11 @@
-import React, { useState, forwardRef, useImperativeHandle, useRef, useLayoutEffect } from 'react';
+import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CloseCircleFill } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
+import { useIsomorphicLayoutEffect } from 'ahooks';
+import { bound } from '../../utils/bound';
 const classPrefix = `adm-input`;
 const defaultProps = {
   defaultValue: ''
@@ -39,7 +41,7 @@ export const Input = forwardRef((p, ref) => {
     (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     var _a;
 
     if (!props.enterKeyHint) return;
@@ -50,6 +52,19 @@ export const Input = forwardRef((p, ref) => {
       (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('enterkeyhint');
     };
   }, [props.enterKeyHint]);
+
+  function checkValue() {
+    let nextValue = value;
+
+    if (props.type === 'number') {
+      nextValue = bound(parseFloat(nextValue), props.min, props.max).toString();
+    }
+
+    if (nextValue !== value) {
+      setValue(nextValue);
+    }
+  }
+
   return withNativeProps(props, React.createElement("div", {
     className: classNames(`${classPrefix}`, props.disabled && `${classPrefix}-disabled`)
   }, React.createElement("input", {
@@ -69,6 +84,7 @@ export const Input = forwardRef((p, ref) => {
       var _a;
 
       setHasFocus(false);
+      checkValue();
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     id: props.id,
@@ -86,8 +102,10 @@ export const Input = forwardRef((p, ref) => {
     autoCapitalize: props.autoCapitalize,
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
-    onKeyUp: props.onKeyUp
-  }), props.clearable && !!value && React.createElement("div", {
+    onKeyUp: props.onKeyUp,
+    onCompositionStart: props.onCompositionStart,
+    onCompositionEnd: props.onCompositionEnd
+  }), props.clearable && !!value && !props.readOnly && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/es/components/list/list.css

@@ -1,5 +1,5 @@
 .adm-list {
-  --header-font-size: 14px;
+  --header-font-size: 15px;
   --prefix-width: 'auto';
   --prefix-padding-right: 12px;
   --align-items: center;
@@ -14,9 +14,7 @@
 .adm-list-header {
   color: var(--adm-color-weak);
   font-size: var(--header-font-size);
-  padding-left: var(--padding-left);
-  padding-right: var(--padding-right);
-  margin: 16px 0 4px;
+  padding: 8px var(--padding-right) 8px var(--padding-left);
 }
 .adm-list-body {
   background-color: #ffffff;
@@ -36,6 +34,9 @@
 .adm-list-card .adm-list-body {
   border-radius: 8px;
 }
+.adm-list-card .adm-list-header {
+  padding-left: 0;
+}
 .adm-list-item {
   display: block;
   padding-left: var(--padding-left);
@@ -83,10 +84,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 +96,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/es/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/es/components/picker/picker.d.ts

@@ -10,10 +10,11 @@ export declare type PickerProps = {
     onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
     onCancel?: () => void;
     onClose?: () => void;
+    closeOnMaskClick?: boolean;
     visible?: boolean;
     title?: ReactNode;
     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/es/components/picker/picker.js

@@ -11,7 +11,8 @@ import { useMemoizedFn } from 'ahooks';
 import SafeArea from '../safe-area';
 const classPrefix = `adm-picker`;
 const defaultProps = {
-  defaultValue: []
+  defaultValue: [],
+  closeOnMaskClick: true
 };
 export const Picker = memo(p => {
   var _a;
@@ -89,6 +90,7 @@ export const Picker = memo(p => {
     onMaskClick: () => {
       var _a, _b;
 
+      if (!props.closeOnMaskClick) return;
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
       (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
     },

package/es/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/es/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/es/components/picker-view/wheel.js

@@ -1,10 +1,11 @@
-import React, { memo, useLayoutEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
 import isEqual from 'lodash/isEqual';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = `adm-picker-view`;
 export const Wheel = memo(props => {
   const itemHeight = convertPx(34);
@@ -29,7 +30,7 @@ export const Wheel = memo(props => {
     }
   }));
   const draggingRef = useRef(false);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
     if (!value) return;
     const targetIndex = column.findIndex(item => item.value === value);
@@ -40,7 +41,7 @@ export const Wheel = memo(props => {
       immediate: y.goal !== finalPosition
     });
   }, [value, column]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (column.length === 0) {
       if (value !== null) {
         onSelect(null);

package/es/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/es/components/popover/arrow.js

@@ -0,0 +1,12 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Arrow = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 30 16'
+  }, React.createElement("g", {
+    transform: 'translate(-1300.000000, -841.000000)',
+    fill: 'currentColor'
+  }, React.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'
+  }))));
+});