antd-mobile 5.21.0 → 5.22.0

package/2x/bundle/style.css

@@ -140,15 +140,19 @@ div.adm-px-tester {
 }
 
 .adm-action-sheet-button-item-description {
-  font-size: var(--adm-font-size-4);
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-weak);
-  padding-top: 4px;
+  padding-top: 8px;
 }
 
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
 
+.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
+  font-weight: 700;
+}
+
 .adm-action-sheet-cancel {
   background-color: var(--adm-color-box);
   padding-top: 16px;
@@ -1090,7 +1094,7 @@ div.adm-px-tester {
 }
 
 .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);
 }
@@ -2482,7 +2486,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 84px;
+  right: 120px;
   width: 94px;
   height: 94px;
   color: var(--adm-color-white);
@@ -3106,7 +3110,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-page-indicator {
   display: flex;
   width: auto;
-  --dot-color: rgba(0, 0, 0, .2);
+  --dot-color: #dddddd;
   --active-dot-color: var(--adm-color-primary);
   --dot-size: 6px;
   --active-dot-size: 26px;
@@ -3779,6 +3783,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   --checked-border: none;
   --border-radius: 4px;
   --padding: 16px 32px;
+  --gap: 16px;
+  ---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;
@@ -3788,6 +3796,12 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   --gap: 24px;
 }
 
+.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;
@@ -4549,7 +4563,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 
 .adm-tab-bar-item {
   flex: 1;
-  color: var(--adm-color-weak);
+  color: var(--adm-color-text-secondary);
   white-space: nowrap;
   padding: 8px 16px;
   width: -webkit-min-content;
@@ -4569,7 +4583,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-tab-bar-item-title {
-  font-size: var(--adm-font-size-3);
+  font-size: var(--adm-font-size-2);
   line-height: 30px;
 }
 

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

@@ -48,15 +48,19 @@
 }
 
 .adm-action-sheet-button-item-description {
-  font-size: var(--adm-font-size-4);
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-weak);
-  padding-top: 4px;
+  padding-top: 8px;
 }
 
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
 
+.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
+  font-weight: bold;
+}
+
 .adm-action-sheet-cancel {
   background-color: var(--adm-color-box);
   padding-top: 16px;

package/2x/cjs/components/action-sheet/action-sheet.d.ts

@@ -7,6 +7,7 @@ export declare type Action = {
     disabled?: boolean;
     description?: ReactNode;
     danger?: boolean;
+    bold?: boolean;
     onClick?: () => void;
 };
 export declare type ActionSheetProps = {

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

@@ -65,7 +65,8 @@ const ActionSheet = p => {
   }, _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
+      [`${classPrefix}-button-item-disabled`]: action.disabled,
+      [`${classPrefix}-button-item-bold`]: action.bold
     }),
     onClick: () => {
       var _a, _b, _c;

package/2x/cjs/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/2x/cjs/components/ellipsis/ellipsis.js

@@ -41,6 +41,7 @@ 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/2x/cjs/components/floating-panel/floating-panel.js

@@ -133,8 +133,8 @@ const FloatingPanel = (0, _react.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.default.createElement("div", {
     className: 'adm-floating-panel-mask',

package/2x/cjs/components/image-viewer/image-viewer.js

@@ -41,7 +41,8 @@ const ImageViewer = p => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.image && _react.default.createElement(_slide.Slide, {
@@ -90,7 +91,8 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && _react.default.createElement(_slides.Slides, {

package/2x/cjs/components/index-bar/index-bar.css

@@ -45,7 +45,7 @@
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 84px;
+  right: 120px;
   width: 94px;
   height: 94px;
   color: var(--adm-color-white);

package/2x/cjs/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: 6px;
   --active-dot-size: 26px;

package/2x/cjs/components/selector/selector.css

@@ -7,6 +7,10 @@
   --checked-border: none;
   --border-radius: 4px;
   --padding: 16px 32px;
+  --gap: 16px;
+  ---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;
@@ -16,6 +20,12 @@
   --gap: 24px;
 }
 
+.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/2x/cjs/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/2x/cjs/components/selector/selector.js

@@ -17,8 +17,6 @@ var _space = _interopRequireDefault(require("../space"));
 
 var _grid = _interopRequireDefault(require("../grid"));
 
-var _convertPx = require("../../utils/convert-px");
-
 var _usePropsValue = require("../../utils/use-props-value");
 
 var _checkMark = require("./check-mark");
@@ -84,8 +82,7 @@ const Selector = p => {
   }, !props.columns && _react.default.createElement(_space.default, {
     wrap: true
   }, items), props.columns && _react.default.createElement(_grid.default, {
-    columns: props.columns,
-    gap: (0, _convertPx.convertPx)(8)
+    columns: props.columns
   }, items)));
 };
 

package/2x/cjs/components/tab-bar/tab-bar.css

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

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

@@ -48,15 +48,19 @@
 }
 
 .adm-action-sheet-button-item-description {
-  font-size: var(--adm-font-size-4);
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-weak);
-  padding-top: 4px;
+  padding-top: 8px;
 }
 
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
 
+.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
+  font-weight: bold;
+}
+
 .adm-action-sheet-cancel {
   background-color: var(--adm-color-box);
   padding-top: 16px;

package/2x/es/components/action-sheet/action-sheet.d.ts

@@ -7,6 +7,7 @@ export declare type Action = {
     disabled?: boolean;
     description?: ReactNode;
     danger?: boolean;
+    bold?: boolean;
     onClick?: () => void;
 };
 export declare type ActionSheetProps = {

package/2x/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/2x/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/2x/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/2x/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/2x/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/2x/es/components/index-bar/index-bar.css

@@ -45,7 +45,7 @@
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 84px;
+  right: 120px;
   width: 94px;
   height: 94px;
   color: var(--adm-color-white);

package/2x/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: 6px;
   --active-dot-size: 26px;

package/2x/es/components/selector/selector.css

@@ -7,6 +7,10 @@
   --checked-border: none;
   --border-radius: 4px;
   --padding: 16px 32px;
+  --gap: 16px;
+  ---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;
@@ -16,6 +20,12 @@
   --gap: 24px;
 }
 
+.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/2x/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/2x/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/2x/es/components/tab-bar/tab-bar.css

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

package/2x/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",