antd-mobile 5.21.0 → 5.22.0

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

@@ -47,7 +47,8 @@ export const ActionSheet = p => {
   }, React.createElement("a", {
     className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
       [`${classPrefix}-button-item-danger`]: action.danger,
-      [`${classPrefix}-button-item-disabled`]: action.disabled
+      [`${classPrefix}-button-item-disabled`]: action.disabled,
+      [`${classPrefix}-button-item-bold`]: action.bold
     }),
     onClick: () => {
       var _a, _b, _c;

package/es/components/check-list/check-list.css

@@ -1,5 +1,5 @@
 .adm-check-list-item-extra {
-  font-size: var(--adm-font-size-8);
+  font-size: var(--adm-font-size-10);
   line-height: 1;
   color: var(--adm-color-primary);
 }

package/es/components/ellipsis/ellipsis.js

@@ -23,6 +23,7 @@ export const Ellipsis = p => {
   function calcEllipsised() {
     const root = rootRef.current;
     if (!root) return;
+    if (!root.offsetParent) return;
     const originStyle = window.getComputedStyle(root);
     const container = document.createElement('div');
     const styleNames = Array.prototype.slice.apply(originStyle);

package/es/components/floating-panel/floating-panel.js

@@ -113,8 +113,8 @@ export const FloatingPanel = forwardRef((p, ref) => {
     ref: elementRef,
     className: 'adm-floating-panel',
     style: {
-      height: maxHeight,
-      translateY: y.to(y => `calc(100% + (${y}px))`)
+      height: Math.round(maxHeight),
+      translateY: y.to(y => `calc(100% + (${Math.round(y)}px))`)
     }
   }, React.createElement("div", {
     className: 'adm-floating-panel-mask',

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

@@ -19,7 +19,8 @@ export const ImageViewer = p => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.image && React.createElement(Slide, {
@@ -64,7 +65,8 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {

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

@@ -40,7 +40,7 @@
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 42px;
+  right: 60px;
   width: 47px;
   height: 47px;
   color: var(--adm-color-white);

package/es/components/page-indicator/page-indicator.css

@@ -1,7 +1,7 @@
 .adm-page-indicator {
   display: flex;
   width: auto;
-  --dot-color: rgba(0, 0, 0, 0.2);
+  --dot-color: #dddddd;
   --active-dot-color: var(--adm-color-primary);
   --dot-size: 3px;
   --active-dot-size: 13px;

package/es/components/selector/selector.css

@@ -7,6 +7,10 @@
   --checked-border: none;
   --border-radius: 2px;
   --padding: 8px 16px;
+  --gap: 8px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
   font-size: var(--adm-font-size-7);
   line-height: 1.4;
@@ -14,6 +18,11 @@
 .adm-selector .adm-space.adm-space {
   --gap: 12px;
 }
+.adm-selector .adm-grid {
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
+}
 .adm-selector-item {
   padding: var(--padding);
   position: relative;

package/es/components/selector/selector.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
 declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
@@ -9,7 +10,7 @@ export interface SelectorOption<V> {
 }
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
-    columns?: number;
+    columns?: GridProps['columns'];
     multiple?: boolean;
     disabled?: boolean;
     defaultValue?: V[];
@@ -18,6 +19,6 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
-} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/es/components/selector/selector.js

@@ -4,7 +4,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import Space from '../space';
 import Grid from '../grid';
-import { convertPx } from '../../utils/convert-px';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
@@ -65,7 +64,6 @@ export const Selector = p => {
   }, !props.columns && React.createElement(Space, {
     wrap: true
   }, items), props.columns && React.createElement(Grid, {
-    columns: props.columns,
-    gap: convertPx(8)
+    columns: props.columns
   }, items)));
 };

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

@@ -8,7 +8,7 @@
 }
 .adm-tab-bar-item {
   flex: 1;
-  color: var(--adm-color-weak);
+  color: var(--adm-color-text-secondary);
   white-space: nowrap;
   padding: 4px 8px;
   width: -webkit-min-content;
@@ -26,7 +26,7 @@
   line-height: 1;
 }
 .adm-tab-bar-item-title {
-  font-size: var(--adm-font-size-3);
+  font-size: var(--adm-font-size-2);
   line-height: 15px;
 }
 .adm-tab-bar-item-title-with-icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.21.0",
+  "version": "5.22.0",
   "dependencies": {
     "@floating-ui/dom": "^1.0.0",
     "@react-spring/web": "^9.4.5",