antd-mobile 5.30.0 → 5.31.1

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

@@ -15,7 +15,7 @@ const FormSubscribe = props => {
   const form = (0, _react.useContext)(_rcFieldForm.FieldContext);
   const value = form.getFieldsValue(props.to);
   // Memo to avoid useless render
-  const childNode = _react.default.useMemo(() => props.children(value, form), [JSON.stringify(value)]);
+  const childNode = _react.default.useMemo(() => props.children(value, form), [JSON.stringify(value), props.children]);
   return _react.default.createElement(_react.default.Fragment, null, childNode, props.to.map(namePath => _react.default.createElement(Watcher, {
     key: namePath.toString(),
     form: form,

package/cjs/components/image/image.d.ts

@@ -14,5 +14,5 @@ export declare type ImageProps = {
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
-} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
+} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap' | 'id'>;
 export declare const Image: React.FC<ImageProps>;

package/cjs/components/image/image.js

@@ -55,6 +55,7 @@ const Image = (0, _stagedComponents.staged)(p => {
     }
     const img = _react.default.createElement("img", {
       ref: imgRef,
+      id: props.id,
       className: `${classPrefix}-img`,
       src: src,
       alt: props.alt,

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

@@ -4,7 +4,7 @@ declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttribute
 declare type AriaProps = {
     role?: string;
 };
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -14,7 +14,6 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     clearable?: boolean;
     onlyShowClearWhenFocus?: boolean;
     onClear?: () => void;
-    id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
     min?: number;
@@ -26,7 +25,7 @@ export declare type InputRef = {
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoFocus" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength" | "step"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -36,7 +35,6 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProp
     clearable?: boolean | undefined;
     onlyShowClearWhenFocus?: boolean | undefined;
     onClear?: (() => void) | undefined;
-    id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
     enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     min?: number | undefined;

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

@@ -9,6 +9,6 @@ export declare type ListItemProps = {
     clickable?: boolean;
     arrow?: boolean | ReactNode;
     disabled?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 } & NativeProps<'--prefix-width' | '--align-items' | '--active-background-color'>;
 export declare const ListItem: FC<ListItemProps>;

package/cjs/components/notice-bar/notice-bar.css

@@ -58,6 +58,8 @@
   white-space: normal;
 }
 .adm-notice-bar .adm-notice-bar-right {
+  display: flex;
+  align-items: center;
   flex-shrink: 0;
   margin-left: 12px;
 }

package/cjs/components/notice-bar/notice-bar.d.ts

@@ -13,6 +13,8 @@ export declare type NoticeBarProps = {
     closeable?: boolean;
     /** Callback when closed */
     onClose?: () => void;
+    /** Event when click */
+    onClick?: () => void;
     /** Additional operating area, displayed to the left of the close button */
     extra?: React.ReactNode;
     /** Radio icon on the left */

package/cjs/components/notice-bar/notice-bar.js

@@ -73,7 +73,8 @@ const NoticeBar = (0, _react.memo)(p => {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.color}`, {
       [`${classPrefix}-wrap`]: props.wrap
-    })
+    }),
+    onClick: props.onClick
   }, props.icon && _react.default.createElement("span", {
     className: `${classPrefix}-left`
   }, props.icon), _react.default.createElement("span", {

package/cjs/components/popup/popup.d.ts

@@ -3,5 +3,6 @@ import { NativeProps } from '../../utils/native-props';
 import { PopupBaseProps } from './popup-base-props';
 export declare type PopupProps = PopupBaseProps & PropsWithChildren<{
     position?: 'bottom' | 'top' | 'left' | 'right';
+    closeOnSwipe?: boolean;
 }> & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

package/cjs/components/popup/popup.js

@@ -25,6 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const classPrefix = `adm-popup`;
 const defaultProps = Object.assign(Object.assign({}, _popupBaseProps.defaultPopupBaseProps), {
+  closeOnSwipe: false,
   position: 'bottom'
 });
 const Popup = p => {
@@ -67,6 +68,7 @@ const Popup = p => {
     swipe: [, swipeY]
   }) => {
     var _a;
+    if (!props.closeOnSwipe) return;
     if (swipeY === 1 && props.position === 'bottom' || swipeY === -1 && props.position === 'top') {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }

package/cjs/components/pull-to-refresh/pull-to-refresh.js

@@ -49,6 +49,7 @@ const PullToRefresh = p => {
     config: {
       tension: 300,
       friction: 30,
+      round: true,
       clamp: true
     }
   }));
@@ -108,7 +109,8 @@ const PullToRefresh = p => {
       return;
     }
     const [, y] = state.movement;
-    if (state.first && y > 0) {
+    const parsedY = Math.ceil(y);
+    if (state.first && parsedY > 0) {
       const target = state.event.target;
       if (!target || !(target instanceof Element)) return;
       let scrollParent = (0, _getScrollParent.getScrollParent)(target);
@@ -133,7 +135,7 @@ const PullToRefresh = p => {
       event.preventDefault();
     }
     event.stopPropagation();
-    const height = Math.max((0, _rubberband.rubberbandIfOutOfBounds)(y, 0, 0, headHeight * 5, 0.5), 0);
+    const height = Math.max((0, _rubberband.rubberbandIfOutOfBounds)(parsedY, 0, 0, headHeight * 5, 0.5), 0);
     api.start({
       height
     });

package/cjs/components/slider/slider.js

@@ -87,13 +87,14 @@ const Slider = p => {
   const pointList = (0, _react.useMemo)(() => {
     if (marks) {
       return Object.keys(marks).map(parseFloat).sort((a, b) => a - b);
-    } else {
+    } else if (ticks) {
       const points = [];
       for (let i = (0, _miniDecimal.default)(min); i.lessEquals((0, _miniDecimal.default)(max)); i = i.add(step)) {
         points.push(i.toNumber());
       }
       return points;
     }
+    return [];
   }, [marks, ticks, step, min, max]);
   function getValueByPosition(position) {
     const newPosition = position < min ? min : position > max ? max : position;
@@ -102,9 +103,10 @@ const Slider = p => {
     if (pointList.length) {
       value = (0, _nearest.nearest)(pointList, newPosition);
     } else {
-      const lengthPerStep = 100 / ((max - min) / step);
-      const steps = Math.round(newPosition / lengthPerStep);
-      value = steps * lengthPerStep * (max - min) * 0.01 + min;
+      // 使用 MiniDecimal 避免精度问题
+      const cell = Math.round((newPosition - min) / step);
+      const nextVal = (0, _miniDecimal.default)(cell).multi(step);
+      value = (0, _miniDecimal.default)(min).add(nextVal.toString()).toNumber();
     }
     return value;
   }

package/cjs/components/swiper/swiper.js

@@ -44,6 +44,7 @@ let currentUid;
 const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const [uid] = (0, _react.useState)({});
+  const timeoutRef = (0, _react.useRef)(null);
   const isVertical = props.direction === 'vertical';
   const slideRatio = props.slideSize / 100;
   const offsetRatio = props.trackOffset / 100;
@@ -82,7 +83,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
       const trackPixels = isVertical ? track.offsetHeight : track.offsetWidth;
       return trackPixels * props.slideSize / 100;
     }
-    const [current, setCurrent] = (0, _react.useState)(props.defaultIndex);
+    const [current, setCurrent, getCurrent] = (0, _ahooks.useGetState)(props.defaultIndex);
     const [dragging, setDragging, draggingRef] = (0, _useRefState.useRefState)(false);
     function boundIndex(current) {
       let min = 0;
@@ -180,10 +181,10 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
       var _a;
       const roundedIndex = Math.round(index);
       const targetIndex = loop ? modulus(roundedIndex, count) : (0, _bound.bound)(roundedIndex, 0, count - 1);
-      setCurrent(targetIndex);
-      if (targetIndex !== current) {
+      if (targetIndex !== getCurrent()) {
         (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, targetIndex);
       }
+      setCurrent(targetIndex);
       api.start({
         position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
         immediate
@@ -210,16 +211,17 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
       autoplay,
       autoplayInterval
     } = props;
+    const runTimeSwiper = () => {
+      timeoutRef.current = window.setTimeout(() => {
+        swipeNext();
+        runTimeSwiper();
+      }, autoplayInterval);
+    };
     (0, _react.useEffect)(() => {
       if (!autoplay || dragging) return;
-      let interval;
-      function tick() {
-        interval = window.setTimeout(tick, autoplayInterval);
-        swipeNext();
-      }
-      interval = window.setTimeout(tick, autoplayInterval);
+      runTimeSwiper();
       return () => {
-        if (interval) window.clearTimeout(interval);
+        if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
       };
     }, [autoplay, autoplayInterval, dragging, count]);
     function renderTrackInner() {
@@ -249,9 +251,11 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
-        }, _react.default.Children.map(validChildren, child => {
+        }, _react.default.Children.map(validChildren, (child, index) => {
           return _react.default.createElement("div", {
-            className: `${classPrefix}-slide`
+            className: (0, _classnames.default)(`${classPrefix}-slide`, {
+              [`${classPrefix}-slide-active`]: current === index
+            })
           }, child);
         }));
       }

package/cjs/components/text-area/text-area.d.ts

@@ -21,7 +21,7 @@ export declare type TextAreaRef = {
     blur: () => void;
     nativeElement: HTMLTextAreaElement | null;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "autoComplete" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "name" | "readOnly" | "autoComplete"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/cjs/utils/reduce-and-restore-motion.js

@@ -40,5 +40,5 @@ function subscribe(onStoreChange) {
   };
 }
 function useMotionReduced() {
-  return (0, _shim.useSyncExternalStore)(subscribe, isMotionReduced);
+  return (0, _shim.useSyncExternalStore)(subscribe, isMotionReduced, isMotionReduced);
 }

package/es/components/avatar/avatar.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import Image from '../image';
 import { mergeProps } from '../../utils/with-default-props';
 import { Fallback } from './fallback';
+import Image from '../image';
 const classPrefix = 'adm-avatar';
 const defaultProps = {
   fallback: React.createElement(Fallback, null),

package/es/components/button/button.d.ts

@@ -14,7 +14,7 @@ export declare type ButtonProps = {
     type?: 'submit' | 'reset' | 'button';
     shape?: 'default' | 'rounded' | 'rectangular';
     children?: React.ReactNode;
-} & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
+} & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd' | 'id'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
 export declare type ButtonRef = {
     nativeElement: HTMLButtonElement | null;
 };
@@ -31,7 +31,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     type?: "reset" | "submit" | "button" | undefined;
     shape?: "default" | "rounded" | "rectangular" | undefined;
     children?: React.ReactNode;
-} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & {
+} & Pick<NativeButtonProps, "id" | "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color", string>>) | undefined;
     tabIndex?: number | undefined;

package/es/components/cascader/cascader.js

@@ -56,12 +56,7 @@ export const Cascader = forwardRef((p, ref) => {
     if (!visible) {
       setInnerValue(value);
     }
-  }, [visible]);
-  useEffect(() => {
-    if (!visible) {
-      setInnerValue(value);
-    }
-  }, [value]);
+  }, [visible, value]);
   const cascaderElement = withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, React.createElement("div", {

package/es/components/cascader-view/cascader-view.d.ts

@@ -19,5 +19,6 @@ export declare type CascaderViewProps = {
     placeholder?: string | ((index: number) => string);
     onTabsChange?: (index: number) => void;
     activeIcon?: ReactNode;
+    loading?: boolean;
 } & NativeProps<'--height'>;
 export declare const CascaderView: FC<CascaderViewProps>;

package/es/components/cascader-view/cascader-view.js

@@ -72,6 +72,7 @@ export const CascaderView = p => {
     }
     setValue(next);
   };
+  const whetherLoading = options => props.loading || options === optionSkeleton;
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, React.createElement(Tabs, {
@@ -92,7 +93,7 @@ export const CascaderView = p => {
       forceRender: true
     }, React.createElement("div", {
       className: `${classPrefix}-content`
-    }, level.options === optionSkeleton ? React.createElement("div", {
+    }, whetherLoading(level.options) ? React.createElement("div", {
       className: `${classPrefix}-skeleton`
     }, React.createElement(Skeleton, {
       className: `${classPrefix}-skeleton-line-1`,

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

@@ -18,7 +18,7 @@ export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' |
     filter?: DatePickerFilter;
     tillNow?: boolean;
 } & NativeProps;
-export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
+export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "closeOnMaskClick" | "onClose" | "cancelText" | "loading" | "mouseWheel" | "loadingContent" | "onCancel" | "confirmText"> & {
     value?: PickerDate | null | undefined;
     defaultValue?: PickerDate | null | undefined;
     onSelect?: ((value: PickerDate) => void) | undefined;

package/es/components/date-picker/index.d.ts

@@ -2,7 +2,7 @@ import './date-picker.less';
 import { prompt } from './prompt';
 export type { DatePickerProps, DatePickerRef } from './date-picker';
 export type { DatePickerFilter } from './date-picker-utils';
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "closeOnMaskClick" | "onClose" | "cancelText" | "loading" | "mouseWheel" | "loadingContent" | "onCancel" | "confirmText"> & {
     value?: import("./util").PickerDate | null | undefined;
     defaultValue?: import("./util").PickerDate | null | undefined;
     onSelect?: ((value: import("./util").PickerDate) => void) | undefined;

package/es/components/ellipsis/ellipsis.d.ts

@@ -5,8 +5,8 @@ export declare type EllipsisProps = {
     content: string;
     direction?: 'start' | 'end' | 'middle';
     rows?: number;
-    expandText?: string;
-    collapseText?: string;
+    expandText?: React.ReactNode;
+    collapseText?: React.ReactNode;
     stopPropagationForActionButtons?: PropagationEvent[];
     onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     defaultExpanded?: boolean;

package/es/components/ellipsis/ellipsis.js

@@ -19,6 +19,8 @@ const defaultProps = {
 export const Ellipsis = p => {
   const props = mergeProps(defaultProps, p);
   const rootRef = useRef(null);
+  const expandElRef = useRef(null);
+  const collapseElRef = useRef(null);
   const [ellipsised, setEllipsised] = useState({});
   const [expanded, setExpanded] = useState(props.defaultExpanded);
   const [exceeded, setExceeded] = useState(false);
@@ -27,19 +29,18 @@ export const Ellipsis = p => {
     return chars.slice(start, end).join('');
   }
   function calcEllipsised() {
+    var _a, _b;
     const root = rootRef.current;
     if (!root) return;
-    if (!root.offsetParent) return;
+    const originDisplay = root.style.display;
+    root.style.display = 'block';
     const originStyle = window.getComputedStyle(root);
     const container = document.createElement('div');
     const styleNames = Array.prototype.slice.apply(originStyle);
     styleNames.forEach(name => {
       container.style.setProperty(name, originStyle.getPropertyValue(name));
     });
-    container.style.position = 'fixed';
-    container.style.left = '999999px';
-    container.style.top = '999999px';
-    container.style.zIndex = '-1000';
+    root.style.display = originDisplay;
     container.style.height = 'auto';
     container.style.minHeight = 'auto';
     container.style.maxHeight = 'auto';
@@ -56,7 +57,9 @@ export const Ellipsis = p => {
     } else {
       setExceeded(true);
       const end = props.content.length;
-      const actionText = expanded ? props.collapseText : props.expandText;
+      const collapseEl = typeof props.collapseText === 'string' ? props.collapseText : (_a = collapseElRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
+      const expandEl = typeof props.expandText === 'string' ? props.expandText : (_b = expandElRef.current) === null || _b === void 0 ? void 0 : _b.innerHTML;
+      const actionText = expanded ? collapseEl : expandEl;
       function check(left, right) {
         if (right - left <= 1) {
           if (props.direction === 'end') {
@@ -71,9 +74,9 @@ export const Ellipsis = p => {
         }
         const middle = Math.round((left + right) / 2);
         if (props.direction === 'end') {
-          container.innerText = getSubString(0, middle) + '...' + actionText;
+          container.innerHTML = getSubString(0, middle) + '...' + actionText;
         } else {
-          container.innerText = actionText + '...' + getSubString(middle, end);
+          container.innerHTML = actionText + '...' + getSubString(middle, end);
         }
         if (container.offsetHeight <= maxHeight) {
           if (props.direction === 'end') {
@@ -98,7 +101,7 @@ export const Ellipsis = p => {
         }
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
         const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
-        container.innerText = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
+        container.innerHTML = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
         if (container.offsetHeight <= maxHeight) {
           return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
         } else {
@@ -116,24 +119,21 @@ export const Ellipsis = p => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
   const expandActionElement = exceeded && props.expandText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
+    ref: expandElRef,
     onClick: () => {
       setExpanded(true);
     }
   }, props.expandText)) : null;
   const collapseActionElement = exceeded && props.collapseText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
+    ref: collapseElRef,
     onClick: () => {
       setExpanded(false);
     }
   }, props.collapseText)) : null;
   const renderContent = () => {
-    if (!exceeded) {
-      return props.content;
-    }
-    if (expanded) {
-      return React.createElement(React.Fragment, null, props.content, collapseActionElement);
-    } else {
-      return React.createElement(React.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
-    }
+    if (!exceeded) return props.content;
+    if (expanded) return React.createElement(React.Fragment, null, props.content, collapseActionElement);
+    return React.createElement(React.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
   };
   return withNativeProps(props, React.createElement("div", {
     ref: rootRef,

package/es/components/form/form-subscribe.js

@@ -7,7 +7,7 @@ export const FormSubscribe = props => {
   const form = useContext(FieldContext);
   const value = form.getFieldsValue(props.to);
   // Memo to avoid useless render
-  const childNode = React.useMemo(() => props.children(value, form), [JSON.stringify(value)]);
+  const childNode = React.useMemo(() => props.children(value, form), [JSON.stringify(value), props.children]);
   return React.createElement(React.Fragment, null, childNode, props.to.map(namePath => React.createElement(Watcher, {
     key: namePath.toString(),
     form: form,

package/es/components/image/image.d.ts

@@ -14,5 +14,5 @@ export declare type ImageProps = {
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
-} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
+} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap' | 'id'>;
 export declare const Image: React.FC<ImageProps>;

package/es/components/image/image.js

@@ -47,6 +47,7 @@ export const Image = staged(p => {
     }
     const img = React.createElement("img", {
       ref: imgRef,
+      id: props.id,
       className: `${classPrefix}-img`,
       src: src,
       alt: props.alt,

package/es/components/input/input.d.ts

@@ -4,7 +4,7 @@ declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttribute
 declare type AriaProps = {
     role?: string;
 };
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -14,7 +14,6 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     clearable?: boolean;
     onlyShowClearWhenFocus?: boolean;
     onClear?: () => void;
-    id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
     min?: number;
@@ -26,7 +25,7 @@ export declare type InputRef = {
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoFocus" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength" | "step"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -36,7 +35,6 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProp
     clearable?: boolean | undefined;
     onlyShowClearWhenFocus?: boolean | undefined;
     onClear?: (() => void) | undefined;
-    id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
     enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     min?: number | undefined;

package/es/components/list/list-item.d.ts

@@ -9,6 +9,6 @@ export declare type ListItemProps = {
     clickable?: boolean;
     arrow?: boolean | ReactNode;
     disabled?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 } & NativeProps<'--prefix-width' | '--align-items' | '--active-background-color'>;
 export declare const ListItem: FC<ListItemProps>;

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

@@ -58,6 +58,8 @@
   white-space: normal;
 }
 .adm-notice-bar .adm-notice-bar-right {
+  display: flex;
+  align-items: center;
   flex-shrink: 0;
   margin-left: 12px;
 }

package/es/components/notice-bar/notice-bar.d.ts

@@ -13,6 +13,8 @@ export declare type NoticeBarProps = {
     closeable?: boolean;
     /** Callback when closed */
     onClose?: () => void;
+    /** Event when click */
+    onClick?: () => void;
     /** Additional operating area, displayed to the left of the close button */
     extra?: React.ReactNode;
     /** Radio icon on the left */

package/es/components/notice-bar/notice-bar.js

@@ -64,7 +64,8 @@ export const NoticeBar = memo(p => {
   return withNativeProps(props, React.createElement("div", {
     className: classNames(classPrefix, `${classPrefix}-${props.color}`, {
       [`${classPrefix}-wrap`]: props.wrap
-    })
+    }),
+    onClick: props.onClick
   }, props.icon && React.createElement("span", {
     className: `${classPrefix}-left`
   }, props.icon), React.createElement("span", {

package/es/components/popup/popup.d.ts

@@ -3,5 +3,6 @@ import { NativeProps } from '../../utils/native-props';
 import { PopupBaseProps } from './popup-base-props';
 export declare type PopupProps = PopupBaseProps & PropsWithChildren<{
     position?: 'bottom' | 'top' | 'left' | 'right';
+    closeOnSwipe?: boolean;
 }> & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

package/es/components/popup/popup.js

@@ -16,6 +16,7 @@ import { useConfig } from '../config-provider';
 import { useDrag } from '@use-gesture/react';
 const classPrefix = `adm-popup`;
 const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
+  closeOnSwipe: false,
   position: 'bottom'
 });
 export const Popup = p => {
@@ -58,6 +59,7 @@ export const Popup = p => {
     swipe: [, swipeY]
   }) => {
     var _a;
+    if (!props.closeOnSwipe) return;
     if (swipeY === 1 && props.position === 'bottom' || swipeY === -1 && props.position === 'top') {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }

package/es/components/pull-to-refresh/pull-to-refresh.js

@@ -40,6 +40,7 @@ export const PullToRefresh = p => {
     config: {
       tension: 300,
       friction: 30,
+      round: true,
       clamp: true
     }
   }));
@@ -99,7 +100,8 @@ export const PullToRefresh = p => {
       return;
     }
     const [, y] = state.movement;
-    if (state.first && y > 0) {
+    const parsedY = Math.ceil(y);
+    if (state.first && parsedY > 0) {
       const target = state.event.target;
       if (!target || !(target instanceof Element)) return;
       let scrollParent = getScrollParent(target);
@@ -124,7 +126,7 @@ export const PullToRefresh = p => {
       event.preventDefault();
     }
     event.stopPropagation();
-    const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+    const height = Math.max(rubberbandIfOutOfBounds(parsedY, 0, 0, headHeight * 5, 0.5), 0);
     api.start({
       height
     });