antd-mobile 5.0.0-rc.0 → 5.0.0-rc.4

package/cjs/components/image-uploader/image-uploader.js

@@ -255,23 +255,25 @@ var ImageUploader = function ImageUploader(p) {
     className: classPrefix + "-space",
     wrap: true
   }, value.map(function (fileItem, index) {
+    var _a, _b;
+
     return /*#__PURE__*/_react["default"].createElement(_previewItem["default"], {
-      key: fileItem.url,
-      url: fileItem.url,
+      key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
+      url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
       deletable: props.deletable,
       onClick: function onClick() {
         return previewImage(index);
       },
       onDelete: function onDelete() {
         return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-          var _a, canDelete;
+          var _c, canDelete;
 
           return regeneratorRuntime.wrap(function _callee3$(_context3) {
             while (1) {
               switch (_context3.prev = _context3.next) {
                 case 0:
                   _context3.next = 2;
-                  return (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props, fileItem);
+                  return (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
 
                 case 2:
                   canDelete = _context3.sent;
@@ -284,8 +286,8 @@ var ImageUploader = function ImageUploader(p) {
                   return _context3.abrupt("return");
 
                 case 5:
-                  setValue(value.filter(function (x) {
-                    return x.url !== fileItem.url;
+                  setValue(value.filter(function (x, i) {
+                    return i !== index;
                   }));
 
                 case 6:

package/cjs/components/image-uploader/index.d.ts

@@ -1,4 +1,4 @@
 import { ImageUploader } from './image-uploader';
 import './image-uploader.less';
-export type { FileItem, ImageUploaderProps } from './image-uploader';
+export type { ImageUploadItem, ImageUploaderProps } from './image-uploader';
 export default ImageUploader;

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

@@ -1,5 +1,5 @@
-import { GetContainer } from '../../utils/render-to-container';
 import { FC } from 'react';
+import { GetContainer } from '../../utils/render-to-container';
 export declare type ImageViewerProps = {
     image?: string;
     maxZoom?: number;
@@ -15,9 +15,3 @@ export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
     onIndexChange?: (index: number) => void;
 };
 export declare const MultiImageViewer: FC<MultiImageViewerProps>;
-export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
-    close: () => void;
-};
-export declare function showMultiImageViewer(props: Omit<MultiImageViewerProps, 'visible'>): {
-    close: () => void;
-};

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiImageViewer = exports.ImageViewer = void 0;
-exports.showImageViewer = showImageViewer;
-exports.showMultiImageViewer = showMultiImageViewer;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -17,14 +17,6 @@ var _slide = require("./slide");
 
 var _slides = require("./slides");
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _renderToBody = require("../../utils/render-to-body");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-image-viewer";
@@ -87,94 +79,4 @@ var MultiImageViewer = function MultiImageViewer(p) {
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
 };
 
-exports.MultiImageViewer = MultiImageViewer;
-
-function showImageViewer(props) {
-  var Wrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
-    var _useState = (0, _react.useState)(false),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    (0, _react.useEffect)(function () {
-      setVisible(true);
-    }, []);
-    (0, _react.useImperativeHandle)(ref, function () {
-      return {
-        close: function close() {
-          setVisible(false);
-        }
-      };
-    });
-    return /*#__PURE__*/_react["default"].createElement(ImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: function onClose() {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      afterClose: function afterClose() {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
-    }));
-  });
-  var ref = /*#__PURE__*/(0, _react.createRef)();
-  var unmount = (0, _renderToBody.renderToBody)( /*#__PURE__*/_react["default"].createElement(Wrapper, {
-    ref: ref
-  }));
-  return {
-    close: function close() {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
-}
-
-function showMultiImageViewer(props) {
-  var Wrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
-    var _useState2 = (0, _react.useState)(false),
-        visible = _useState2[0],
-        setVisible = _useState2[1];
-
-    (0, _react.useEffect)(function () {
-      setVisible(true);
-    }, []);
-    (0, _react.useImperativeHandle)(ref, function () {
-      return {
-        close: function close() {
-          setVisible(false);
-        }
-      };
-    });
-    return /*#__PURE__*/_react["default"].createElement(MultiImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: function onClose() {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      afterClose: function afterClose() {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
-    }));
-  });
-  var ref = /*#__PURE__*/(0, _react.createRef)();
-  var unmount = (0, _renderToBody.renderToBody)( /*#__PURE__*/_react["default"].createElement(Wrapper, {
-    ref: ref
-  }));
-  return {
-    close: function close() {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
-}
+exports.MultiImageViewer = MultiImageViewer;

package/cjs/components/image-viewer/index.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import './image-viewer.less';
-import { showImageViewer, showMultiImageViewer } from './image-viewer';
+import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
 export type { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
     Multi: import("react").FC<import("./image-viewer").MultiImageViewerProps> & {
         show: typeof showMultiImageViewer;
     };
     show: typeof showImageViewer;
+    clear: typeof clearImageViewer;
 };
 export default _default;

package/cjs/components/image-viewer/index.js

@@ -11,13 +11,16 @@ var _attachPropertiesToComponent = require("../../utils/attach-properties-to-com
 
 var _imageViewer2 = require("./image-viewer");
 
+var _methods = require("./methods");
+
 var Multi = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_imageViewer2.MultiImageViewer, {
-  show: _imageViewer2.showMultiImageViewer
+  show: _methods.showMultiImageViewer
 });
 
 var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_imageViewer2.ImageViewer, {
   Multi: Multi,
-  show: _imageViewer2.showImageViewer
+  show: _methods.showImageViewer,
+  clear: _methods.clearImageViewer
 });
 
 exports["default"] = _default;

package/cjs/components/image-viewer/methods.d.ts

@@ -1 +1,8 @@
-
+import { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
+    close: () => void;
+};
+export declare function showMultiImageViewer(props: Omit<MultiImageViewerProps, 'visible'>): {
+    close: () => void;
+};
+export declare function clearImageViewer(): void;

package/cjs/components/image-viewer/methods.js

@@ -1 +1,129 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clearImageViewer = clearImageViewer;
+exports.showImageViewer = showImageViewer;
+exports.showMultiImageViewer = showMultiImageViewer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _renderToBody = require("../../utils/render-to-body");
+
+var _imageViewer = require("./image-viewer");
+
+var _ahooks = require("ahooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+var handlerSet = new Set();
+
+function showImageViewer(props) {
+  clearImageViewer();
+  var Wrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
+    var _useState = (0, _react.useState)(false),
+        visible = _useState[0],
+        setVisible = _useState[1];
+
+    (0, _react.useEffect)(function () {
+      setVisible(true);
+    }, []);
+    var isUnmountedRef = (0, _ahooks.useUnmountedRef)();
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        close: function close() {
+          if (isUnmountedRef.current) return;
+          setVisible(false);
+        }
+      };
+    });
+    return /*#__PURE__*/_react["default"].createElement(_imageViewer.ImageViewer, Object.assign({}, props, {
+      visible: visible,
+      onClose: function onClose() {
+        var _a;
+
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        setVisible(false);
+      },
+      afterClose: function afterClose() {
+        var _a;
+
+        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        unmount();
+      }
+    }));
+  });
+  var ref = /*#__PURE__*/(0, _react.createRef)();
+  var unmount = (0, _renderToBody.renderToBody)( /*#__PURE__*/_react["default"].createElement(Wrapper, {
+    ref: ref
+  }));
+  var handler = {
+    close: function close() {
+      var _a;
+
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+    }
+  };
+  handlerSet.add(handler);
+  return handler;
+}
+
+function showMultiImageViewer(props) {
+  clearImageViewer();
+  var Wrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
+    var _useState2 = (0, _react.useState)(false),
+        visible = _useState2[0],
+        setVisible = _useState2[1];
+
+    (0, _react.useEffect)(function () {
+      setVisible(true);
+    }, []);
+    var isUnmountedRef = (0, _ahooks.useUnmountedRef)();
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        close: function close() {
+          if (isUnmountedRef.current) return;
+          setVisible(false);
+        }
+      };
+    });
+    return /*#__PURE__*/_react["default"].createElement(_imageViewer.MultiImageViewer, Object.assign({}, props, {
+      visible: visible,
+      onClose: function onClose() {
+        var _a;
+
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        setVisible(false);
+      },
+      afterClose: function afterClose() {
+        var _a;
+
+        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        unmount();
+      }
+    }));
+  });
+  var ref = /*#__PURE__*/(0, _react.createRef)();
+  var unmount = (0, _renderToBody.renderToBody)( /*#__PURE__*/_react["default"].createElement(Wrapper, {
+    ref: ref
+  }));
+  var handler = {
+    close: function close() {
+      var _a;
+
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+    }
+  };
+  handlerSet.add(handler);
+  return handler;
+}
+
+function clearImageViewer() {
+  handlerSet.forEach(function (handler) {
+    handler.close();
+  });
+  handlerSet.clear();
+}

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

@@ -57,6 +57,9 @@
   position: relative;
   padding: 0 12px;
 }
+.adm-index-bar-sidebar-row > * {
+  pointer-events: none;
+}
 .adm-index-bar-sidebar-item {
   display: inline-flex;
   width: 16px;

package/cjs/components/index-bar/index-bar.js

@@ -17,10 +17,12 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _sidebar = require("./sidebar");
 
-var _context = require("./context");
-
 var _convertPx = require("../../utils/convert-px");
 
+var _panel = require("./panel");
+
+var _devLog = require("../../utils/dev-log");
+
 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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,14 +39,30 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   var titleHeight = (0, _convertPx.convertPx)(35);
   var bodyRef = (0, _react.useRef)(null);
+  var indexes = [];
+  var panels = [];
+
+  _react["default"].Children.forEach(props.children, function (child) {
+    if (! /*#__PURE__*/_react["default"].isValidElement(child)) return;
+
+    if (child.type !== _panel.Panel) {
+      (0, _devLog.devWarning)('IndexBar', 'The children of `IndexBar` must be `IndexBar.Panel` components.');
+      return;
+    }
 
-  var _useState = (0, _react.useState)([]),
-      indexes = _useState[0],
-      setIndexes = _useState[1];
+    indexes.push(child.props.index);
+    panels.push((0, _nativeProps.withNativeProps)(child.props, /*#__PURE__*/_react["default"].createElement("div", {
+      key: child.props.index,
+      "data-index": child.props.index,
+      className: classPrefix + "-anchor"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classPrefix + "-anchor-title"
+    }, child.props.title || child.props.index), child.props.children)));
+  });
 
-  var _useState2 = (0, _react.useState)(indexes[0]),
-      activeIndex = _useState2[0],
-      setActiveIndex = _useState2[1];
+  var _useState = (0, _react.useState)(indexes[0]),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {
@@ -74,10 +92,10 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     var body = bodyRef.current;
     if (!body) return;
     var scrollTop = body.scrollTop;
-    var children = body.getElementsByClassName(classPrefix + "-anchor");
+    var elements = body.getElementsByClassName(classPrefix + "-anchor");
 
-    for (var i = 0; i < children.length; i++) {
-      var panel = children.item(i);
+    for (var i = 0; i < elements.length; i++) {
+      var panel = elements.item(i);
       if (!panel) continue;
       var panelIndex = panel.dataset['index'];
       if (!panelIndex) continue;
@@ -94,11 +112,7 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
   }),
       checkActiveIndex = _useThrottleFn.run;
 
-  (0, _react.useEffect)(function () {
-    if (!indexes.length) return;
-    checkActiveIndex();
-  }, [indexes]);
-  var element = (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("" + classPrefix, (_classNames = {}, _classNames[classPrefix + "-sticky"] = props.sticky, _classNames))
   }, /*#__PURE__*/_react["default"].createElement(_sidebar.Sidebar, {
     indexes: indexes,
@@ -110,12 +124,6 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     className: classPrefix + "-body",
     ref: bodyRef,
     onScroll: checkActiveIndex
-  }, props.children)));
-  return /*#__PURE__*/_react["default"].createElement(_context.IndexBarContext.Provider, {
-    value: {
-      indexes: indexes,
-      setIndexes: setIndexes
-    }
-  }, element);
+  }, panels)));
 });
 exports.IndexBar = IndexBar;

package/cjs/components/index-bar/panel.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type IndexBarAnchorProps = {
     index: string;
     title?: string;
 } & NativeProps;
-export declare const Panel: React.FC<IndexBarAnchorProps>;
+export declare const Panel: FC<IndexBarAnchorProps>;

package/cjs/components/index-bar/panel.js

@@ -5,40 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Panel = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _nativeProps = require("../../utils/native-props");
-
-var _context = require("./context");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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; }
-
-var classPrefix = "adm-index-bar-anchor";
-
-var Panel = function Panel(props) {
-  var _useContext = (0, _react.useContext)(_context.IndexBarContext),
-      setIndexes = _useContext.setIndexes;
-
-  (0, _react.useEffect)(function () {
-    setIndexes(function (val) {
-      return val.concat([props.index]);
-    });
-    return function () {
-      setIndexes(function (val) {
-        return val.filter(function (x) {
-          return x !== props.index;
-        });
-      });
-    };
-  }, [props.index]);
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    "data-index": props.index,
-    className: classPrefix
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-title"
-  }, props.title || props.index), props.children));
+var Panel = function Panel() {
+  return null;
 };
 
 exports.Panel = Panel;

package/cjs/components/input/input.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare type EnterKeyHintProps = NativeInputProps extends {
-    enterKeyHint?: unknown;
-} ? {
-    enterKeyHint?: NativeInputProps['enterKeyHint'];
-} : {};
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & EnterKeyHintProps & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -17,6 +12,7 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     onClear?: () => void;
     id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 } & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align'>;
 export declare type InputRef = {
     clear: () => void;
@@ -24,8 +20,6 @@ export declare type InputRef = {
     blur: () => void;
 };
 export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "autoComplete" | "maxLength" | "minLength"> & {
-    enterKeyHint?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>["enterKeyHint"] | undefined;
-} & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -36,5 +30,6 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedH
     onClear?: (() => void) | undefined;
     id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "previous" | "send" | undefined;
 } & NativeProps<"--font-size" | "--color" | "--placeholder-color" | "--disabled-color" | "--text-align"> & React.RefAttributes<InputRef>>;
 export {};

package/cjs/components/input/input.js

@@ -63,6 +63,17 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    var _a;
+
+    if (!props.enterKeyHint) return;
+    (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('enterkeyhint', props.enterKeyHint);
+    return function () {
+      var _a;
+
+      (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('enterkeyhint');
+    };
+  }, [props.enterKeyHint]);
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -93,7 +104,6 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     max: props.max,
     min: props.min,
     autoComplete: props.autoComplete,
-    enterKeyHint: props.enterKeyHint,
     pattern: props.pattern,
     type: props.type,
     autoCapitalize: props.autoCapitalize,

package/cjs/components/list/list.css

@@ -2,6 +2,10 @@
   --prefix-width: 'auto';
   --align-items: center;
   --active-background-color: var(--adm-border-color);
+  --border-inner: solid 1px var(--adm-border-color);
+  --border-top: solid 1px var(--adm-border-color);
+  --border-bottom: solid 1px var(--adm-border-color);
+  --padding-left: 12px;
   background-color: #ffffff;
   overflow: hidden;
   font-size: 17px;
@@ -10,9 +14,8 @@
   margin-bottom: -1px;
 }
 .adm-list-default {
-  border: solid 1px var(--adm-border-color);
-  border-right: none;
-  border-left: none;
+  border-top: var(--border-top);
+  border-bottom: var(--border-bottom);
 }
 .adm-list-card {
   margin: 12px;
@@ -20,7 +23,7 @@
 }
 .adm-list-item {
   display: block;
-  padding-left: 12px;
+  padding-left: var(--padding-left);
 }
 .adm-list-item-title,
 .adm-list-item-description {
@@ -32,7 +35,7 @@
   align-items: var(--align-items);
   justify-content: flex-start;
   padding: 12px 12px 12px 0;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: var(--border-inner);
 }
 .adm-list-item-content-prefix {
   width: var(--prefix-width);

package/cjs/components/list/list.d.ts

@@ -2,5 +2,5 @@ import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ListProps = {
     mode?: 'default' | 'card';
-} & NativeProps<'--prefix-width' | '--align-items' | '--active-background-color'>;
+} & NativeProps<'--prefix-width' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left'>;
 export declare const List: FC<ListProps>;

package/cjs/components/mask/mask.js

@@ -9,6 +9,8 @@ var _nativeProps = require("../../utils/native-props");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _ahooks = require("ahooks");
+
 var _useLockScroll = require("../../utils/use-lock-scroll");
 
 var _web = require("@react-spring/web");
@@ -64,13 +66,16 @@ var Mask = function Mask(p) {
       active = _useState[0],
       setActive = _useState[1];
 
+  var unmountedRef = (0, _ahooks.useUnmountedRef)();
+
   var _useSpring = (0, _web.useSpring)({
     opacity: props.visible ? 1 : 0,
     config: {
       precision: 0.01,
       mass: 1,
       tension: 200,
-      friction: 30
+      friction: 30,
+      clamp: true
     },
     onStart: function onStart() {
       setActive(true);
@@ -78,6 +83,7 @@ var Mask = function Mask(p) {
     onRest: function onRest() {
       var _a, _b;
 
+      if (unmountedRef.current) return;
       setActive(props.visible);
 
       if (props.visible) {