antd-mobile 5.1.0 → 5.2.2

package/2x/README.md

@@ -1,6 +1,14 @@
 <img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
 
-[English Doc](https://mobile.ant.design) | [中文文档](https://mobile.ant.design/zh) | [Discord](https://discord.gg/jmNvw4WFYn) | [钉钉](https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ)
+<p align="center">
+  <a href="https://mobile.ant.design">English Doc</a>
+  |
+  <a href="https://mobile.ant.design/zh">中文文档</a>
+  |
+  <a href="https://discord.gg/jmNvw4WFYn">Discord</a>
+  |
+  <a href="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ">钉钉</a>
+</p>
 
 ![npm (tag)](https://img.shields.io/npm/v/antd-mobile)
 ![GitHub Release Date](https://img.shields.io/github/release-date/ant-design/ant-design-mobile)

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

@@ -1,5 +1,13 @@
-import { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type Page = {
+    month: number;
+    year: number;
+};
+export declare type CalenderRef = {
+    jumpTo: (page: Page | ((page: Page) => Page)) => void;
+    jumpToToday: () => void;
+};
 export declare type CalendarProps = {
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => string | null | undefined;
@@ -20,4 +28,5 @@ export declare type CalendarProps = {
     defaultValue?: [Date, Date] | null;
     onChange?: (val: [Date, Date]) => void;
 }) & NativeProps;
-export declare const Calendar: FC<CalendarProps>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
+export {};

package/2x/cjs/components/calendar/calendar.js

@@ -37,8 +37,7 @@ const classPrefix = 'adm-calendar';
 const defaultProps = {
   weekStartsOn: 'Sunday'
 };
-
-const Calendar = p => {
+const Calendar = (0, _react.forwardRef)((p, ref) => {
   const today = (0, _dayjs.default)();
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
@@ -57,6 +56,25 @@ const Calendar = p => {
 
     (_a = props.onPageChange) === null || _a === void 0 ? void 0 : _a.call(props, current.year(), current.month() + 1);
   }, [current]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    jumpTo: pageOrPageGenerator => {
+      let page;
+
+      if (typeof pageOrPageGenerator === 'function') {
+        page = pageOrPageGenerator({
+          year: current.year(),
+          month: current.month() + 1
+        });
+      } else {
+        page = pageOrPageGenerator;
+      }
+
+      setCurrent((0, _dayjs.default)().year(page.year).month(page.month - 1));
+    },
+    jumpToToday: () => {
+      setCurrent((0, _dayjs.default)().date(1));
+    }
+  }));
 
   const header = _react.default.createElement("div", {
     className: `${classPrefix}-header`
@@ -144,13 +162,18 @@ const Calendar = p => {
             (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate());
           } else if (props.selectionMode === 'range') {
             if (begin !== null && end === null) {
-              if (d.isBefore(begin)) {
-                setEnd(begin);
-                setBegin(d);
-                (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, [d.toDate(), begin.toDate()]);
+              if (begin.isSame(d.toDate())) {
+                setBegin(null);
+                setEnd(null);
               } else {
-                setEnd(d);
-                (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [begin.toDate(), d.toDate()]);
+                if (d.isBefore(begin)) {
+                  setEnd(begin);
+                  setBegin(d);
+                  (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, [d.toDate(), begin.toDate()]);
+                } else {
+                  setEnd(d);
+                  (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [begin.toDate(), d.toDate()]);
+                }
               }
             } else {
               setBegin(d);
@@ -187,6 +210,5 @@ const Calendar = p => {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, header, mark, body));
-};
-
+});
 exports.Calendar = Calendar;

package/2x/cjs/components/calendar/index.d.ts

@@ -1,4 +1,4 @@
 import './calendar.less';
 import { Calendar } from './calendar';
-export type { CalendarProps } from './calendar';
+export type { CalendarProps, CalenderRef } from './calendar';
 export default Calendar;

package/2x/cjs/components/capsule-tabs/capsule-tabs.d.ts

@@ -4,6 +4,7 @@ export declare type CapsuleTabProps = {
     title: ReactNode;
     disabled?: boolean;
     forceRender?: boolean;
+    destroyOnClose?: boolean;
 } & NativeProps;
 export declare const CapsuleTab: FC<CapsuleTabProps>;
 export declare type CapsuleTabsProps = {

package/2x/cjs/components/capsule-tabs/capsule-tabs.js

@@ -21,6 +21,8 @@ var _useTabListScroll = require("../../utils/use-tab-list-scroll");
 
 var _scrollMask = _interopRequireDefault(require("../scroll-mask"));
 
+var _shouldRender = require("../../utils/should-render");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -110,23 +112,18 @@ const CapsuleTabs = props => {
       return null;
     }
 
-    if (pane.key === activeKey) {
-      return _react.default.createElement("div", {
-        key: pane.key,
-        className: `${classPrefix}-content`
-      }, pane.props.children);
-    }
-
-    if (pane.props.forceRender) {
-      return _react.default.createElement("div", {
-        key: pane.key,
-        style: {
-          display: 'none'
-        }
-      }, pane.props.children);
-    }
-
-    return null;
+    const active = pane.key === activeKey;
+    return _react.default.createElement(_shouldRender.ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, _react.default.createElement("div", {
+      className: `${classPrefix}-content`,
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
   })));
 };
 

package/2x/cjs/components/cascade-picker/prompt.d.ts

@@ -1,2 +1,3 @@
 import { CascadePickerProps } from './cascade-picker';
-export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<(string | null)[] | null>;
+import type { PickerValue } from '../picker';
+export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<PickerValue[] | null>;

package/2x/cjs/components/collapse/collapse.js

@@ -21,7 +21,9 @@ var _usePropsValue = require("../../utils/use-props-value");
 
 var _ahooks = require("ahooks");
 
-var _useShouldRender = require("../../utils/use-should-render");
+var _shouldRender = require("../../utils/should-render");
+
+var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -42,7 +44,7 @@ const CollapsePanelContent = props => {
     visible
   } = props;
   const innerRef = (0, _react.useRef)(null);
-  const shouldRender = (0, _useShouldRender.useShouldRender)(visible, props.forceRender, props.destroyOnClose);
+  const shouldRender = (0, _shouldRender.useShouldRender)(visible, props.forceRender, props.destroyOnClose);
   const [{
     height
   }, api] = (0, _web.useSpring)(() => ({
@@ -59,7 +61,7 @@ const CollapsePanelContent = props => {
       immediate: true
     });
   });
-  (0, _ahooks.useUpdateLayoutEffect)(() => {
+  (0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
     const inner = innerRef.current;
     if (!inner) return;
 

package/2x/cjs/components/date-picker/date-picker.js

@@ -19,6 +19,8 @@ var _usePropsValue = require("../../utils/use-props-value");
 
 var _datePickerUtils = require("./date-picker-utils");
 
+var _bound = require("../../utils/bound");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,7 +49,15 @@ const DatePicker = p => {
     }
   });
   const now = (0, _react.useMemo)(() => new Date(), []);
-  const pickerValue = (0, _react.useMemo)(() => (0, _datePickerUtils.convertDateToStringArray)(value !== null && value !== void 0 ? value : now, props.precision), [value, props.precision]);
+  const pickerValue = (0, _react.useMemo)(() => {
+    let date = value;
+
+    if (date === null) {
+      date = new Date((0, _bound.bound)(now.getTime(), props.min.getTime(), props.max.getTime()));
+    }
+
+    return (0, _datePickerUtils.convertDateToStringArray)(date, props.precision);
+  }, [value, props.precision]);
   const onConfirm = (0, _react.useCallback)(val => {
     setValue((0, _datePickerUtils.convertStringArrayToDate)(val, props.precision));
   }, [setValue, props.precision]);

package/2x/cjs/components/dialog/clear.d.ts

@@ -0,0 +1 @@
+export declare function clear(): void;

package/2x/cjs/components/dialog/clear.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clear = clear;
+
+var _show = require("./show");
+
+function clear() {
+  _show.closeFnSet.forEach(close => {
+    close();
+  });
+}

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

@@ -18,7 +18,7 @@
   transform: translate(-50%, -50%);
 }
 
-.adm-dialog-main {
+.adm-dialog-body {
   width: 100%;
   max-height: 70vh;
   font-size: 28px;
@@ -29,35 +29,39 @@
   flex-direction: column;
 }
 
-.adm-dialog-main > * {
+.adm-dialog-body > * {
   flex: none;
 }
 
-.adm-dialog-main > .adm-dialog-image-container {
+.adm-dialog-body > .adm-dialog-content {
   flex: auto;
 }
 
-.adm-dialog-main > .adm-dialog-image-container + .adm-dialog-body {
-  padding-top: 24px;
+.adm-dialog-body:not(.adm-dialog-with-image) {
+  padding-top: 40px;
 }
 
-.adm-dialog-main .adm-dialog-body {
-  padding: 40px 24px;
+.adm-dialog-body .adm-dialog-image-container {
+  margin-bottom: 24px;
+  max-height: 40vh;
 }
 
-.adm-dialog-main .adm-dialog-body-header-wrapper {
-  display: flex;
-  justify-content: center;
+.adm-dialog-body .adm-dialog-header {
+  margin-bottom: 16px;
+  padding: 0 24px;
 }
 
-.adm-dialog-main .adm-dialog-body-title {
+.adm-dialog-body .adm-dialog-title {
+  margin-bottom: 16px;
+  padding: 0 24px;
   font-weight: bold;
   font-size: 36px;
   line-height: 50px;
   text-align: center;
 }
 
-.adm-dialog-main .adm-dialog-body-content {
+.adm-dialog-body .adm-dialog-content {
+  padding: 0 24px 40px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -66,21 +70,26 @@
   color: #333;
 }
 
-.adm-dialog-main .adm-dialog-footer {
+.adm-dialog-body .adm-dialog-content-empty {
+  padding: 0;
+  height: 24px;
+}
+
+.adm-dialog-body .adm-dialog-footer {
   user-select: none;
 }
 
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
   border-top: 1px solid var(--adm-border-color);
 }
 
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
 
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 20px;
   font-size: 36px;
   line-height: 50px;
@@ -88,11 +97,11 @@
   border-right: solid 1px var(--adm-border-color);
 }
 
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
 
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 

package/2x/cjs/components/dialog/dialog.js

@@ -21,8 +21,6 @@ var _dialogActionButton = require("./dialog-action-button");
 
 var _image = _interopRequireDefault(require("../image"));
 
-var _space = _interopRequireDefault(require("../space"));
-
 var _renderToContainer = require("../../utils/render-to-container");
 
 var _withStopPropagation = require("../../utils/with-stop-propagation");
@@ -39,7 +37,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const classPrefix = `adm-dialog`;
 const defaultProps = {
   visible: false,
   actions: [],
@@ -78,51 +75,28 @@ const Dialog = p => {
     }
   });
   const [active, setActive] = (0, _react.useState)(props.visible);
-  const node = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: classPrefix,
-    style: {
-      display: active ? 'unset' : 'none'
-    }
-  }, _react.default.createElement(_mask.default, {
-    visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: (0, _classnames.default)(`${classPrefix}-mask`, props.maskClassName)
-  }), _react.default.createElement("div", {
-    className: `${classPrefix}-wrap`,
-    style: {
-      pointerEvents: props.visible ? 'unset' : 'none'
-    }
-  }, _react.default.createElement(_web.animated.div, {
-    style: Object.assign({}, style),
-    onClick: e => e.stopPropagation(),
-    className: `${classPrefix}-main`
+
+  const body = _react.default.createElement("div", {
+    className: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    style: props.bodyStyle
   }, !!props.image && _react.default.createElement("div", {
-    className: `${classPrefix}-image-container`
+    className: cls('image-container')
   }, _react.default.createElement(_image.default, {
     src: props.image,
     alt: 'dialog header image',
     width: '100%'
-  })), _react.default.createElement("div", {
-    style: props.bodyStyle,
-    className: (0, _classnames.default)(`${classPrefix}-body`, props.bodyClassName)
-  }, _react.default.createElement(_space.default, {
-    direction: 'vertical',
-    block: true
-  }, !!props.header && _react.default.createElement("div", {
-    className: `${classPrefix}-body-header-wrapper`
-  }, _react.default.createElement("div", {
-    className: `${classPrefix}-body-header`
-  }, props.header)), !!props.title && _react.default.createElement("div", {
-    className: `${classPrefix}-body-title`
-  }, props.title), !!props.content && _react.default.createElement("div", {
-    className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content))), _react.default.createElement("div", {
-    className: `${classPrefix}-footer`
+  })), !!props.header && _react.default.createElement("div", {
+    className: cls('header')
+  }, _react.default.createElement(_autoCenter.default, null, props.header)), !!props.title && _react.default.createElement("div", {
+    className: cls('title')
+  }, props.title), _react.default.createElement("div", {
+    className: (0, _classnames.default)(cls('content'), !props.content && cls('content-empty'))
+  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content), _react.default.createElement("div", {
+    className: cls('footer')
   }, props.actions.map((row, index) => {
     const actions = Array.isArray(row) ? row : [row];
     return _react.default.createElement("div", {
-      className: `${classPrefix}-action-row`,
+      className: cls('action-row'),
       key: index
     }, actions.map((action, index) => _react.default.createElement(_dialogActionButton.DialogActionButton, {
       key: action.key,
@@ -137,8 +111,31 @@ const Dialog = p => {
         }
       })
     })));
-  }))))));
+  })));
+
+  const node = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: cls(),
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, _react.default.createElement(_mask.default, {
+    visible: props.visible,
+    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
+    style: props.maskStyle,
+    className: (0, _classnames.default)(cls('mask'), props.maskClassName)
+  }), _react.default.createElement("div", {
+    className: cls('wrap'),
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, _react.default.createElement(_web.animated.div, {
+    style: style
+  }, body))));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, node));
 };
 
-exports.Dialog = Dialog;
+exports.Dialog = Dialog;
+
+function cls(name = '') {
+  return 'adm-dialog' + (name && '-') + name;
+}

package/2x/cjs/components/dialog/index.d.ts

@@ -3,6 +3,7 @@ import './dialog.less';
 import { show } from './show';
 import { alert } from './alert';
 import { confirm } from './confirm';
+import { clear } from './clear';
 export type { DialogProps } from './dialog';
 export type { Action } from './dialog-action-button';
 export type { DialogShowProps, DialogShowRef } from './show';
@@ -12,5 +13,6 @@ declare const _default: import("react").FC<import("./dialog").DialogProps> & {
     show: typeof show;
     alert: typeof alert;
     confirm: typeof confirm;
+    clear: typeof clear;
 };
 export default _default;

package/2x/cjs/components/dialog/index.js

@@ -13,6 +13,8 @@ var _alert = require("./alert");
 
 var _confirm = require("./confirm");
 
+var _clear = require("./clear");
+
 var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
 
 var _dialog2 = require("./dialog");
@@ -20,7 +22,8 @@ var _dialog2 = require("./dialog");
 var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_dialog2.Dialog, {
   show: _show.show,
   alert: _alert.alert,
-  confirm: _confirm.confirm
+  confirm: _confirm.confirm,
+  clear: _clear.clear
 });
 
 exports.default = _default;

package/2x/cjs/components/dialog/show.d.ts

@@ -3,6 +3,7 @@ export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
 export declare type DialogShowRef = {
     close: () => void;
 };
+export declare const closeFnSet: Set<() => void>;
 export declare function show(props: DialogShowProps): {
     close: () => void;
 };

package/2x/cjs/components/dialog/show.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.closeFnSet = void 0;
 exports.show = show;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -15,6 +16,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const closeFnSet = new Set();
+exports.closeFnSet = closeFnSet;
+
 function show(props) {
   const Wrapper = (0, _react.forwardRef)((_, ref) => {
     const [visible, setVisible] = (0, _react.useState)(false);
@@ -32,26 +36,34 @@ function show(props) {
     (0, _react.useImperativeHandle)(ref, () => ({
       close: handleClose
     }));
+
+    function handleAfterClose() {
+      var _a;
+
+      (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      unmount();
+      closeFnSet.delete(close);
+    }
+
     return _react.default.createElement(_dialog.Dialog, Object.assign({}, props, {
       visible: visible,
       onClose: handleClose,
-      afterClose: () => {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
+      afterClose: handleAfterClose
     }));
   });
   const ref = (0, _react.createRef)();
   const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
     ref: ref
   }));
-  return {
-    close: () => {
-      var _a;
 
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
+  const close = () => {
+    var _a;
+
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+  };
+
+  closeFnSet.add(close);
+  return {
+    close
   };
 }

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

@@ -4,10 +4,11 @@
 
 .adm-dropdown .adm-dropdown-nav {
   display: flex;
+  border-bottom: 2px solid transparent;
 }
 
 .adm-dropdown-open .adm-dropdown-nav {
-  border-bottom: 2px solid var(--adm-border-color);
+  border-bottom-color: var(--adm-border-color);
 }
 
 .adm-dropdown-item {

package/2x/cjs/components/dropdown/item.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
-var _useShouldRender = require("../../utils/use-should-render");
+var _shouldRender = require("../../utils/should-render");
 
 var _antdMobileIcons = require("antd-mobile-icons");
 
@@ -47,7 +47,7 @@ const ItemChildrenWrap = props => {
   const {
     active = false
   } = props;
-  const shouldRender = (0, _useShouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
+  const shouldRender = (0, _shouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
   const cls = (0, _classnames.default)(`${classPrefix}-content`, {
     [`${classPrefix}-content-hidden`]: !active
   });

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

@@ -1,6 +1,18 @@
+.adm-form {
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  ---border-inner: var(--border-inner);
+  ---border-top: var(--border-top);
+  ---border-bottom: var(--border-bottom);
+}
+
 .adm-form .adm-list.adm-list {
   --padding-left: 32px;
   --padding-right: 24px;
+  --border-inner: var(---border-inner);
+  --border-top: var(---border-top);
+  --border-bottom: var(---border-bottom);
 }
 
 .adm-form .adm-form-footer {

package/2x/cjs/components/form/form.d.ts

@@ -5,13 +5,13 @@ import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'r
 import { FormContextType } from './context';
 import type { FormLayout } from '.';
 export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
-export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps & Partial<FormContextType> & {
+export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom'> & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: FormLayout;
     mode?: ListProps['mode'];
 };
-export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<never> & Partial<FormContextType> & {
+export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
     footer?: ReactNode;
-    layout?: "horizontal" | "vertical" | undefined;
+    layout?: FormLayout | undefined;
     mode?: ListProps['mode'];
-} & React.RefAttributes<Pick<RCFormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>>;
+} & React.RefAttributes<FormInstance>>;