antd-mobile 5.33.0 → 5.33.2

package/es/components/dropdown/dropdown.js

@@ -51,8 +51,10 @@ const Dropdown = forwardRef((p, ref) => {
   const navs = React.Children.map(props.children, child => {
     if (isValidElement(child)) {
       const childProps = Object.assign(Object.assign({}, child.props), {
-        onClick: () => {
+        onClick: event => {
+          var _a, _b;
           changeActive(child.key);
+          (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         },
         active: child.key === value,
         arrow: child.props.arrow === undefined ? props.arrow : child.props.arrow

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

@@ -10,6 +10,10 @@ export declare type ImageViewerProps = {
     onClose?: () => void;
     afterClose?: () => void;
     renderFooter?: (image: string) => ReactNode;
+    classNames?: {
+        mask?: string;
+        body?: string;
+    };
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;

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

@@ -5,6 +5,7 @@ import Mask from '../mask';
 import SafeArea from '../safe-area';
 import { Slide } from './slide';
 import { Slides } from './slides';
+import classNames from 'classnames';
 const classPrefix = `adm-image-viewer`;
 const defaultProps = {
   maxZoom: 3,
@@ -12,23 +13,24 @@ const defaultProps = {
   visible: false
 };
 export const ImageViewer = p => {
-  var _a;
+  var _a, _b, _c;
   const props = mergeProps(defaultProps, p);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, React.createElement("div", {
-    className: `${classPrefix}-content`
+    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.image && React.createElement(Slide, {
     image: props.image,
     onTap: props.onClose,
     maxZoom: props.maxZoom
   })), props.image && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), React.createElement(SafeArea, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
@@ -37,7 +39,7 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
-  var _a;
+  var _a, _b, _c;
   const props = mergeProps(multiDefaultProps, p);
   const [index, setIndex] = useState(props.defaultIndex);
   const slidesRef = useRef(null);
@@ -59,9 +61,10 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, React.createElement("div", {
-    className: `${classPrefix}-content`
+    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.images && React.createElement(Slides, {
     ref: slidesRef,
     defaultIndex: index,
@@ -71,7 +74,7 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     maxZoom: props.maxZoom
   })), props.images && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), React.createElement(SafeArea, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);

package/es/components/mask/mask.js

@@ -71,6 +71,7 @@ export const Mask = p => {
   const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement(animated.div, {
     className: classPrefix,
     ref: ref,
+    "aria-hidden": true,
     style: Object.assign(Object.assign({}, props.style), {
       background,
       opacity,

package/es/components/number-keyboard/number-keyboard.js

@@ -7,6 +7,7 @@ import Popup from '../popup';
 import { withNativeProps } from '../../utils/native-props';
 import SafeArea from '../safe-area';
 import { useMemoizedFn } from 'ahooks';
+import { useConfig } from '../config-provider';
 const classPrefix = 'adm-number-keyboard';
 const defaultProps = {
   defaultVisible: false,
@@ -30,6 +31,9 @@ export const NumberKeyboard = p => {
     showCloseButton,
     onInput
   } = props;
+  const {
+    locale
+  } = useConfig();
   const keyboardRef = useRef(null);
   const keys = useMemo(() => {
     const defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -88,7 +92,7 @@ export const NumberKeyboard = p => {
       className: classNames(`${classPrefix}-header`, {
         [`${classPrefix}-header-with-title`]: !!title
       })
-    }, 'title' && React.createElement("div", {
+    }, !!title && React.createElement("div", {
       className: `${classPrefix}-title`,
       "aria-label": title
     }, title), showCloseButton && React.createElement("span", {
@@ -97,8 +101,8 @@ export const NumberKeyboard = p => {
         var _a;
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
       },
-      role: 'grid',
-      title: 'CLOSE',
+      role: 'button',
+      title: locale.common.close,
       tabIndex: -1
     }, React.createElement(DownOutline, null)));
   };
@@ -110,7 +114,7 @@ export const NumberKeyboard = p => {
       [`${classPrefix}-key-mid`]: index === 9 && !!confirmText && keys.length < 12
     });
     const ariaProps = key ? {
-      role: 'grid',
+      role: 'button',
       title: key,
       tabIndex: -1
     } : undefined;
@@ -163,13 +167,17 @@ export const NumberKeyboard = p => {
       onKeyPress(e, 'BACKSPACE');
       onBackspacePressEnd();
     },
-    title: 'BACKSPACE',
-    role: 'grid',
+    onContextMenu: e => {
+      // Long press should not trigger native context menu
+      e.preventDefault();
+    },
+    title: locale.Input.clear,
+    role: 'button',
     tabIndex: -1
   }, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
     onTouchEnd: e => onKeyPress(e, 'OK'),
-    role: 'grid',
+    role: 'button',
     tabIndex: -1,
     "aria-label": confirmText
   }, confirmText))), props.safeArea && React.createElement("div", {

package/es/components/popover/popover-menu.js

@@ -32,7 +32,9 @@ export const PopoverMenu = forwardRef((props, ref) => {
       var _a;
       return React.createElement("a", {
         key: (_a = action.key) !== null && _a !== void 0 ? _a : index,
-        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', action.disabled && `${classPrefix}-item-disabled`),
+        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', {
+          [`${classPrefix}-item-disabled`]: action.disabled
+        }),
         onClick: () => {
           var _a;
           if (action.disabled) return;

package/es/components/popover/popover.js

@@ -18,13 +18,11 @@ const defaultProps = {
   placement: 'top',
   defaultVisible: false,
   stopPropagation: ['click'],
-  getContainer: () => document.body
+  getContainer: () => document.body,
+  mode: 'light'
 };
 export const Popover = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-  const {
-    mode = 'light'
-  } = props;
   const placement = normalizePlacement(props.placement);
   const [visible, setVisible] = usePropsValue({
     value: props.visible,
@@ -40,7 +38,9 @@ export const Popover = forwardRef((p, ref) => {
   const floatingRef = useRef(null);
   const arrowRef = useRef(null);
   const floating = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
+    className: classNames(classPrefix, `${classPrefix}-${props.mode}`, {
+      [`${classPrefix}-hidden`]: !visible
+    }),
     ref: floatingRef
   }, React.createElement("div", {
     className: `${classPrefix}-arrow`,

package/es/components/popup/popup.js

@@ -93,6 +93,7 @@ export const Popup = p => {
   }), React.createElement(animated.div, {
     className: bodyCls,
     style: Object.assign(Object.assign({}, props.bodyStyle), {
+      pointerEvents: percent.to(v => v === 0 ? 'unset' : 'none'),
       transform: percent.to(v => {
         if (props.position === 'bottom') {
           return `translate(0, ${v}%)`;

package/es/components/switch/switch.css

@@ -66,7 +66,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 8px 0 calc(var(--height) - var(--border-width) + 4px);
+  margin: 0 8px 0 calc(var(--height) - var(--border-width) + 5px);
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
@@ -82,7 +82,7 @@
   left: calc(100% - (var(--height) - var(--border-width)));
 }
 .adm-switch.adm-switch-checked .adm-switch-inner {
-  margin: 0 calc(var(--height) - var(--border-width) + 5px) 0 10px;
+  margin: 0 calc(var(--height) - var(--border-width) + 5px) 0 8px;
   color: var(--adm-color-text-light-solid);
 }
 .adm-switch.adm-switch-disabled {

package/es/components/tabs/tabs.d.ts

@@ -16,5 +16,11 @@ export declare type TabsProps = {
     onChange?: (key: string) => void;
     children?: ReactNode;
     direction?: 'ltr' | 'rtl';
+    /**
+     * @experimental Support disabled auto scroll when Tabs header content change.
+     * This API name or function may change in the future.
+     * Please lock the version if you want to use it.
+     */
+    autoScroll?: boolean;
 } & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding' | '--active-title-color' | '--active-line-color'>;
 export declare const Tabs: FC<TabsProps>;

package/es/components/tabs/tabs.js

@@ -51,7 +51,7 @@ export const Tabs = p => {
   const [{
     x,
     width
-  }, api] = useSpring(() => ({
+  }, inkApi] = useSpring(() => ({
     x: 0,
     width: 0,
     config: {
@@ -78,12 +78,12 @@ export const Tabs = p => {
       clamp: true
     }
   }));
-  function animate(immediate = false) {
+  function animate(immediate = false, fromMutation = false) {
     const container = tabListContainerRef.current;
     if (!container) return;
     const activeIndex = keyToIndexRecord[activeKey];
     if (activeIndex === undefined) {
-      api.start({
+      inkApi.start({
         x: 0,
         width: 0,
         immediate: true
@@ -121,7 +121,7 @@ export const Tabs = p => {
       const w = ['auto', 'full'].includes(props.activeLineMode) ? width : activeLineWidth;
       x = -(containerWidth - x - w);
     }
-    api.start({
+    inkApi.start({
       x,
       width,
       immediate
@@ -138,13 +138,15 @@ export const Tabs = p => {
     } else {
       nextScrollLeft = bound(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, maxScrollDistance);
     }
-    scrollApi.start({
-      scrollLeft: nextScrollLeft,
-      from: {
-        scrollLeft: containerScrollLeft
-      },
-      immediate
-    });
+    if (!fromMutation || props.autoScroll !== false) {
+      scrollApi.start({
+        scrollLeft: nextScrollLeft,
+        from: {
+          scrollLeft: containerScrollLeft
+        },
+        immediate
+      });
+    }
   }
   useIsomorphicLayoutEffect(() => {
     animate(!x.isAnimating);
@@ -156,7 +158,7 @@ export const Tabs = p => {
     animate(!x.isAnimating);
   }, tabListContainerRef);
   useMutationEffect(() => {
-    animate(!x.isAnimating);
+    animate(!x.isAnimating, true);
   }, tabListContainerRef, {
     subtree: true,
     childList: true,

package/es/components/virtual-input/virtual-input.js

@@ -71,9 +71,16 @@ export const VirtualInput = forwardRef((p, ref) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b, _c;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+      var _a, _b, _c, _d;
+      const activeElement = document.activeElement;
+      // Long press makes `activeElement` to be the child of rootRef
+      // We will trigger blur on the child element instead
+      if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+        activeElement.blur();
+      } else {
+        (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+      (_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
     },
     getContainer: null
   });
@@ -83,7 +90,7 @@ export const VirtualInput = forwardRef((p, ref) => {
       [`${classPrefix}-disabled`]: props.disabled
     }),
     tabIndex: props.disabled ? undefined : 0,
-    role: 'option',
+    role: 'textbox',
     onFocus: onFocus,
     onBlur: onBlur,
     onClick: props.onClick

package/es/global/global.css

@@ -92,8 +92,8 @@ div.adm-px-tester {
   height: calc(var(--size) / 2 * 2px);
   width: 0;
   position: fixed;
-  right: -100vw;
-  bottom: -100vh;
+  left: -100vw;
+  top: -100vh;
   -webkit-user-select: none;
           user-select: none;
   pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.33.0",
+  "version": "5.33.2",
   "license": "MIT",
   "dependencies": {
     "@floating-ui/dom": "^1.4.2",