antd-mobile 5.12.4 → 5.12.7

package/cjs/components/action-sheet/action-sheet.css

@@ -8,19 +8,31 @@
   justify-content: center;
   color: var(--adm-color-weak);
   font-size: 15px;
-  padding: 18px 16px;
+  padding: 18px 12px;
+  border-bottom: 1px solid var(--adm-border-color);
+}
+.adm-action-sheet-button-list {
   border-bottom: 1px solid var(--adm-border-color);
 }
 .adm-action-sheet-button-item-wrapper {
-  background-color: #ffffff;
-  border-top: 1px solid var(--adm-border-color);
+  border-bottom: 1px solid var(--adm-border-color);
 }
-.adm-action-sheet-button-item-wrapper:first-child {
-  border-top: none;
+.adm-action-sheet-button-item-wrapper:last-child {
+  border-bottom: none;
 }
 .adm-action-sheet-button-item {
-  padding: 14px;
   text-align: center;
+  display: block;
+  background-color: #ffffff;
+  padding: 16px;
+}
+.adm-action-sheet-button-item:active {
+  background-color: #eeeeee;
+}
+.adm-action-sheet-button-item-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
 }
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);
@@ -29,7 +41,7 @@
 .adm-action-sheet-button-item-description {
   font-size: 12px;
   color: var(--adm-color-weak);
-  padding-top: 4px;
+  padding-top: 2px;
 }
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);

package/cjs/components/action-sheet/action-sheet.js

@@ -16,8 +16,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _popup = _interopRequireDefault(require("../popup"));
 
-var _button = _interopRequireDefault(require("../button"));
-
 var _safeArea = _interopRequireDefault(require("../safe-area"));
 
 var _renderImperatively = require("../../utils/render-imperatively");
@@ -60,11 +58,11 @@ const ActionSheet = p => {
   }, props.actions.map((action, index) => _react.default.createElement("div", {
     key: action.key,
     className: `${classPrefix}-button-item-wrapper`
-  }, _react.default.createElement(_button.default, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    disabled: action.disabled,
+  }, _react.default.createElement("a", {
+    className: (0, _classnames.default)('adm-plain-anchor', `${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger,
+      [`${classPrefix}-button-item-disabled`]: action.disabled
+    }),
     onClick: () => {
       var _a, _b, _c;
 
@@ -74,10 +72,7 @@ const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    },
-    className: (0, _classnames.default)(`${classPrefix}-button-item`, {
-      [`${classPrefix}-button-item-danger`]: action.danger
-    })
+    }
   }, _react.default.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && _react.default.createElement("div", {
@@ -86,11 +81,8 @@ const ActionSheet = p => {
     className: `${classPrefix}-cancel`
   }, _react.default.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
-  }, _react.default.createElement(_button.default, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    className: `${classPrefix}-button-item`,
+  }, _react.default.createElement("a", {
+    className: (0, _classnames.default)('adm-plain-anchor', `${classPrefix}-button-item`),
     onClick: () => {
       var _a;
 

package/cjs/components/button/button.d.ts

@@ -31,5 +31,5 @@ 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"> & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & NativeProps<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
 export {};

package/cjs/components/calendar/calendar.css

@@ -71,6 +71,9 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+.adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected {
+  color: var(--adm-color-light);
+}
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
   font-size: 18px;

package/cjs/components/calendar/calendar.d.ts

@@ -19,6 +19,7 @@ export declare type CalendarProps = {
     allowClear?: boolean;
     max?: Date;
     min?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
 } & ({
     selectionMode?: undefined;
     value?: undefined;

package/cjs/components/calendar/calendar.js

@@ -153,7 +153,7 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
       }
 
       const inThisMonth = d.month() === current.month();
-      const disabled = maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
       cells.push(_react.default.createElement("div", {
         key: d.valueOf(),
         className: (0, _classnames.default)(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {

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

@@ -256,10 +256,7 @@ const FormItem = props => {
   }
 
   let Variables = {};
-
-  if (typeof label === 'string') {
-    Variables.label = label;
-  }
+  Variables.label = typeof label === 'string' ? label : '';
 
   if (messageVariables) {
     Variables = Object.assign(Object.assign({}, Variables), messageVariables);

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

@@ -9,6 +9,7 @@ export declare type ImageProps = {
     placeholder?: ReactNode;
     fallback?: ReactNode;
     lazy?: boolean;
+    draggable?: boolean;
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;

package/cjs/components/image/image.js

@@ -36,7 +36,8 @@ const defaultProps = {
   fallback: _react.default.createElement("div", {
     className: `${classPrefix}-tip`
   }, _react.default.createElement(_brokenImageIcon.BrokenImageIcon, null)),
-  lazy: false
+  lazy: false,
+  draggable: false
 };
 const Image = (0, _stagedComponents.staged)(p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
@@ -85,7 +86,8 @@ const Image = (0, _stagedComponents.staged)(p => {
       referrerPolicy: props.referrerPolicy,
       sizes: props.sizes,
       srcSet: srcSet,
-      useMap: props.useMap
+      useMap: props.useMap,
+      draggable: props.draggable
     });
 
     return _react.default.createElement(_react.default.Fragment, null, !loaded && props.placeholder, img);

package/cjs/components/popover/popover.css

@@ -35,6 +35,7 @@
   border-radius: 8px;
   box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
   font-size: 15px;
+  width: max-content;
   min-width: 32px;
   max-width: calc(100vw - 24px);
   overflow-y: hidden;

package/cjs/components/popover/popover.js

@@ -160,7 +160,9 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
   (0, _react.useEffect)(() => {
     const floatingElement = floatingRef.current;
     if (!targetElement || !floatingElement) return;
-    return (0, _dom.autoUpdate)(targetElement, floatingElement, update);
+    return (0, _dom.autoUpdate)(targetElement, floatingElement, update, {
+      elementResize: typeof ResizeObserver !== 'undefined'
+    });
   }, [targetElement]);
   (0, _ahooks.useClickAway)(() => {
     if (!props.trigger) return;

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

@@ -31,4 +31,4 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
     onCancel?: (() => void) | undefined;
-} & NativeProps<"--border-radius" | "--height" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;
+} & NativeProps<"--height" | "--border-radius" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;

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

@@ -16,7 +16,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
-} & import("../../utils/native-props").NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & import("../../utils/native-props").NativeProps<"--width" | "--height" | "--border-radius" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
         children?: import("react").ReactNode;

package/cjs/components/swiper/swiper.d.ts

@@ -37,4 +37,4 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
-} & NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & NativeProps<"--width" | "--height" | "--border-radius" | "--track-padding"> & React.RefAttributes<SwiperRef>>;

package/cjs/components/text-area/text-area.js

@@ -123,7 +123,8 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
       compositingRef.current = false;
 
       if (maxLength) {
-        setValue([...value].slice(0, maxLength).join(''));
+        const v = e.target.value;
+        setValue([...v].slice(0, maxLength).join(''));
       }
 
       (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);

package/es/components/action-sheet/action-sheet.css

@@ -8,19 +8,31 @@
   justify-content: center;
   color: var(--adm-color-weak);
   font-size: 15px;
-  padding: 18px 16px;
+  padding: 18px 12px;
+  border-bottom: 1px solid var(--adm-border-color);
+}
+.adm-action-sheet-button-list {
   border-bottom: 1px solid var(--adm-border-color);
 }
 .adm-action-sheet-button-item-wrapper {
-  background-color: #ffffff;
-  border-top: 1px solid var(--adm-border-color);
+  border-bottom: 1px solid var(--adm-border-color);
 }
-.adm-action-sheet-button-item-wrapper:first-child {
-  border-top: none;
+.adm-action-sheet-button-item-wrapper:last-child {
+  border-bottom: none;
 }
 .adm-action-sheet-button-item {
-  padding: 14px;
   text-align: center;
+  display: block;
+  background-color: #ffffff;
+  padding: 16px;
+}
+.adm-action-sheet-button-item:active {
+  background-color: #eeeeee;
+}
+.adm-action-sheet-button-item-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
 }
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);
@@ -29,7 +41,7 @@
 .adm-action-sheet-button-item-description {
   font-size: 12px;
   color: var(--adm-color-weak);
-  padding-top: 4px;
+  padding-top: 2px;
 }
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);

package/es/components/action-sheet/action-sheet.js

@@ -3,7 +3,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
 import Popup from '../popup';
-import Button from '../button';
 import SafeArea from '../safe-area';
 import { renderImperatively } from '../../utils/render-imperatively';
 const classPrefix = `adm-action-sheet`;
@@ -41,11 +40,11 @@ export const ActionSheet = p => {
   }, props.actions.map((action, index) => React.createElement("div", {
     key: action.key,
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    disabled: action.disabled,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger,
+      [`${classPrefix}-button-item-disabled`]: action.disabled
+    }),
     onClick: () => {
       var _a, _b, _c;
 
@@ -55,10 +54,7 @@ export const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    },
-    className: classNames(`${classPrefix}-button-item`, {
-      [`${classPrefix}-button-item-danger`]: action.danger
-    })
+    }
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && React.createElement("div", {
@@ -67,11 +63,8 @@ export const ActionSheet = p => {
     className: `${classPrefix}-cancel`
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    className: `${classPrefix}-button-item`,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`),
     onClick: () => {
       var _a;
 

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

@@ -31,5 +31,5 @@ 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"> & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & NativeProps<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
 export {};

package/es/components/calendar/calendar.css

@@ -71,6 +71,9 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+.adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected {
+  color: var(--adm-color-light);
+}
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
   font-size: 18px;

package/es/components/calendar/calendar.d.ts

@@ -19,6 +19,7 @@ export declare type CalendarProps = {
     allowClear?: boolean;
     max?: Date;
     min?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
 } & ({
     selectionMode?: undefined;
     value?: undefined;

package/es/components/calendar/calendar.js

@@ -125,7 +125,7 @@ export const Calendar = forwardRef((p, ref) => {
       }
 
       const inThisMonth = d.month() === current.month();
-      const disabled = maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
       cells.push(React.createElement("div", {
         key: d.valueOf(),
         className: classNames(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {

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

@@ -228,10 +228,7 @@ export const FormItem = props => {
   }
 
   let Variables = {};
-
-  if (typeof label === 'string') {
-    Variables.label = label;
-  }
+  Variables.label = typeof label === 'string' ? label : '';
 
   if (messageVariables) {
     Variables = Object.assign(Object.assign({}, Variables), messageVariables);

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

@@ -9,6 +9,7 @@ export declare type ImageProps = {
     placeholder?: ReactNode;
     fallback?: ReactNode;
     lazy?: boolean;
+    draggable?: boolean;
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;

package/es/components/image/image.js

@@ -16,7 +16,8 @@ const defaultProps = {
   fallback: React.createElement("div", {
     className: `${classPrefix}-tip`
   }, React.createElement(BrokenImageIcon, null)),
-  lazy: false
+  lazy: false,
+  draggable: false
 };
 export const Image = staged(p => {
   const props = mergeProps(defaultProps, p);
@@ -65,7 +66,8 @@ export const Image = staged(p => {
       referrerPolicy: props.referrerPolicy,
       sizes: props.sizes,
       srcSet: srcSet,
-      useMap: props.useMap
+      useMap: props.useMap,
+      draggable: props.draggable
     });
     return React.createElement(React.Fragment, null, !loaded && props.placeholder, img);
   }

package/es/components/popover/popover.css

@@ -35,6 +35,7 @@
   border-radius: 8px;
   box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
   font-size: 15px;
+  width: max-content;
   min-width: 32px;
   max-width: calc(100vw - 24px);
   overflow-y: hidden;

package/es/components/popover/popover.js

@@ -132,7 +132,9 @@ export const Popover = forwardRef((p, ref) => {
   useEffect(() => {
     const floatingElement = floatingRef.current;
     if (!targetElement || !floatingElement) return;
-    return autoUpdate(targetElement, floatingElement, update);
+    return autoUpdate(targetElement, floatingElement, update, {
+      elementResize: typeof ResizeObserver !== 'undefined'
+    });
   }, [targetElement]);
   useClickAway(() => {
     if (!props.trigger) return;

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

@@ -31,4 +31,4 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
     onCancel?: (() => void) | undefined;
-} & NativeProps<"--border-radius" | "--height" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;
+} & NativeProps<"--height" | "--border-radius" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;

package/es/components/swiper/index.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
-} & import("../../utils/native-props").NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & import("../../utils/native-props").NativeProps<"--width" | "--height" | "--border-radius" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
         children?: import("react").ReactNode;

package/es/components/swiper/swiper.d.ts

@@ -37,4 +37,4 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
-} & NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & NativeProps<"--width" | "--height" | "--border-radius" | "--track-padding"> & React.RefAttributes<SwiperRef>>;

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

@@ -106,7 +106,8 @@ export const TextArea = forwardRef((p, ref) => {
       compositingRef.current = false;
 
       if (maxLength) {
-        setValue([...value].slice(0, maxLength).join(''));
+        const v = e.target.value;
+        setValue([...v].slice(0, maxLength).join(''));
       }
 
       (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "antd-mobile",
-  "version": "5.12.4",
+  "version": "5.12.7",
   "dependencies": {
-    "@floating-ui/dom": "^0.4.5",
+    "@floating-ui/dom": "^0.5.1",
     "@react-spring/web": "^9.4.5",
-    "@use-gesture/react": "10.2.14",
-    "ahooks": "^3.3.10",
+    "@use-gesture/react": "10.2.12",
+    "ahooks": "^3.3.12",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "big.js": "^6.1.1",
@@ -15,7 +15,7 @@
     "rc-field-form": "^1.26.4",
     "react-is": "^17.0.2",
     "staged-components": "^1.1.2",
-    "tslib": "^2.3.1"
+    "tslib": "^2.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"