antd-mobile 5.17.2 → 5.20.0

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

@@ -27,4 +27,4 @@ export declare const ActionSheet: FC<ActionSheetProps>;
 export declare type ActionSheetShowHandler = {
     close: () => void;
 };
-export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): ActionSheetShowHandler;
+export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible' | 'destroyOnClose' | 'forceRender'>): ActionSheetShowHandler;

package/cjs/components/button/button.js

@@ -88,6 +88,6 @@ const Button = (0, _react.forwardRef)((p, ref) => {
     onTouchEnd: props.onTouchEnd
   }, loading ? _react.default.createElement("div", {
     className: `${classPrefix}-loading-wrapper`
-  }, props.loadingIcon, props.loadingText) : props.children));
+  }, props.loadingIcon, props.loadingText) : _react.default.createElement("span", null, props.children)));
 });
 exports.Button = Button;

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

@@ -4,7 +4,7 @@ declare type Page = {
     month: number;
     year: number;
 };
-export declare type CalenderRef = {
+export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
 };
@@ -15,7 +15,7 @@ export declare type CalendarProps = {
     nextYearButton?: React.ReactNode;
     onPageChange?: (year: number, month: number) => void;
     weekStartsOn?: 'Monday' | 'Sunday';
-    renderLabel?: (date: Date) => string | null | undefined;
+    renderLabel?: (date: Date) => React.ReactNode;
     allowClear?: boolean;
     max?: Date;
     min?: Date;
@@ -36,5 +36,5 @@ export declare type CalendarProps = {
     defaultValue?: [Date, Date] | null;
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
 export {};

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

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

package/cjs/components/cascader/cascader.d.ts

@@ -23,6 +23,7 @@ export declare type CascaderProps = {
     cancelText?: ReactNode;
     children?: (items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode;
     onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'destroyOnClose' | 'forceRender'> & NativeProps;
 export declare const Cascader: React.ForwardRefExoticComponent<{
     options: CascaderOption[];
@@ -39,6 +40,7 @@ export declare const Cascader: React.ForwardRefExoticComponent<{
     cancelText?: ReactNode;
     children?: ((items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode) | undefined;
     onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: ReactNode;
 } & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;

package/cjs/components/cascader/index.d.ts

@@ -18,6 +18,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     cancelText?: import("react").ReactNode;
     children?: ((items: (import("../cascader-view").CascaderOption | null)[], actions: import("./cascader").CascaderActions) => import("react").ReactNode) | undefined;
     onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: import("react").ReactNode;
 } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;

package/cjs/components/cascader-view/cascader-view.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CascaderValue = string;
 export declare type CascaderOption = {
@@ -18,5 +18,6 @@ export declare type CascaderViewProps = {
     onChange?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
     placeholder?: string;
     onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
 } & NativeProps<'--height'>;
 export declare const CascaderView: FC<CascaderViewProps>;

package/cjs/components/cascader-view/cascader-view.js

@@ -147,7 +147,8 @@ const CascaderView = p => {
       animated: true
     })) : _react.default.createElement(_checkList.default, {
       value: [value[index]],
-      onChange: selectValue => onItemSelect(selectValue[0], index)
+      onChange: selectValue => onItemSelect(selectValue[0], index),
+      activeIcon: props.activeIcon
     }, level.options.map(option => {
       const active = value[index] === option.value;
       return _react.default.createElement(_checkList.default.Item, {

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

@@ -1,5 +1,5 @@
 import { DialogProps } from './dialog';
-export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
+export declare type DialogShowProps = Omit<DialogProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type DialogShowHandler = {
     close: () => void;
 };

package/cjs/components/form/context.d.ts

@@ -5,7 +5,7 @@ export declare type FormContextType = {
     name?: string;
     hasFeedback: boolean;
     layout: FormLayout;
-    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional' | 'none';
     disabled: boolean;
 };
 export declare const defaultFormContext: FormContextType;

package/cjs/components/form/form-item.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _nativeProps = require("../../utils/native-props");
+
 var _rcFieldForm = require("rc-field-form");
 
 var _FieldContext = _interopRequireDefault(require("rc-field-form/lib/FieldContext"));
@@ -89,6 +91,9 @@ const FormItemLayout = props => {
           className: `${classPrefix}-required-text`
         }, "(", locale.Form.optional, ")");
 
+      case 'none':
+        return null;
+
       default:
         return null;
     }
@@ -114,7 +119,7 @@ const FormItemLayout = props => {
     key: `warning-${index}`,
     className: `${classPrefix}-feedback-warning`
   }, warning)))) : null;
-  return _react.default.createElement(_list.default.Item, {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_list.default.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
@@ -132,7 +137,7 @@ const FormItemLayout = props => {
     className: (0, _classnames.default)(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
   }, _react.default.createElement("div", {
     className: (0, _classnames.default)(`${classPrefix}-child-inner`)
-  }, children)));
+  }, children))));
 };
 
 const FormItem = props => {
@@ -223,7 +228,7 @@ const FormItem = props => {
 
       return subWarnings;
     }, curWarnings);
-    return _react.default.createElement(FormItemLayout, {
+    return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
@@ -244,7 +249,7 @@ const FormItem = props => {
       arrow: arrow
     }, _react.default.createElement(_context.NoStyleItemContext.Provider, {
       value: onSubMetaChange
-    }, baseChildren));
+    }, baseChildren)));
   }
 
   const isRenderProps = typeof children === 'function';

package/cjs/components/image/test/image.test.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _tslib = require("tslib");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _testing = require("testing");
@@ -10,13 +8,9 @@ var _index = _interopRequireDefault(require("../index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const classPrefix = `adm-image`;
 const demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60';
-describe('image', () => {
-  test('a11y', () => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
-    yield (0, _testing.testA11y)(_react.default.createElement(_index.default, {
-      src: demoSrc
-    }));
-  }));
+describe('Image', () => {
   test('onContainerClick can work', () => {
     const onContainerClick = jest.fn();
     const {
@@ -31,4 +25,59 @@ describe('image', () => {
 
     expect(onContainerClick).toBeCalledTimes(1);
   });
+  test('load successfully', () => {
+    (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: demoSrc
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+
+    _testing.fireEvent.load(img);
+
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('load failed', () => {
+    (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: '404'
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+
+    _testing.fireEvent.error(img);
+
+    expect(img).not.toBeInTheDocument();
+    expect(document.querySelectorAll(`.${classPrefix}-tip`)[0]).toBeInTheDocument();
+  });
+  test('lazy load should be work', () => {
+    // mock useInViewport
+    // https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useInViewport/__tests__/index.test.ts
+    const mockIntersectionObserver = jest.fn().mockReturnValue({
+      observe: () => null,
+      disconnect: () => null
+    });
+    window.IntersectionObserver = mockIntersectionObserver;
+    (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: demoSrc,
+      lazy: true
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    expect(img).not.toHaveAttribute('src');
+    const calls = mockIntersectionObserver.mock.calls;
+    const [onChange] = calls[calls.length - 1];
+    (0, _testing.act)(() => {
+      onChange([{
+        isIntersecting: true
+      }]);
+    });
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('renders with width and height', () => {
+    const {
+      getByTestId
+    } = (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: demoSrc,
+      width: 100,
+      height: 100,
+      "data-testid": 'image'
+    }));
+    expect(getByTestId('image')).toHaveStyle('--width: 100px;--height: 100px');
+  });
 });

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

@@ -9,12 +9,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _web = require("@react-spring/web");
 
+var _ahooks = require("ahooks");
+
 var _rubberband = require("../../utils/rubberband");
 
 var _useDragAndPinch = require("../../utils/use-drag-and-pinch");
 
 var _bound = require("../../utils/bound");
 
+var mat = _interopRequireWildcard(require("../../utils/matrix"));
+
 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); }
 
 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; }
@@ -28,54 +32,71 @@ const Slide = props => {
   const controlRef = (0, _react.useRef)(null);
   const imgRef = (0, _react.useRef)(null);
   const [{
-    zoom,
-    x,
-    y
+    matrix
   }, api] = (0, _web.useSpring)(() => ({
-    zoom: 1,
-    x: 0,
-    y: 0,
+    matrix: mat.create(),
     config: {
       tension: 200
     }
   }));
+  const controlSize = (0, _ahooks.useSize)(controlRef);
+  const imgSize = (0, _ahooks.useSize)(imgRef);
   const pinchLockRef = (0, _react.useRef)(false);
 
-  function boundXY([x, y], rubberband) {
-    const currentZoom = zoom.get();
-    let xOffset = 0,
-        yOffset = 0;
+  const boundMatrix = (nextMatrix, type, last = false) => {
+    if (!controlSize || !imgSize) return nextMatrix;
+    const controlLeft = -controlSize.width / 2;
+    const controlTop = -controlSize.height / 2;
+    const imgLeft = -imgSize.width / 2;
+    const imgTop = -imgSize.height / 2;
+    const zoom = mat.getScaleX(nextMatrix);
+    const scaledImgWidth = zoom * imgSize.width;
+    const scaledImgHeight = zoom * imgSize.height;
+    const [x, y] = mat.apply(nextMatrix, [imgLeft, imgTop]);
+
+    if (type === 'translate') {
+      let boundedX = x;
+      let boundedY = y;
+
+      if (scaledImgWidth > controlSize.width) {
+        const minX = controlLeft - (scaledImgWidth - controlSize.width);
+        const maxX = controlLeft;
+        boundedX = last ? (0, _bound.bound)(x, minX, maxX) : (0, _rubberband.rubberbandIfOutOfBounds)(x, minX, maxX, zoom * 50);
+      } else {
+        boundedX = -scaledImgWidth / 2;
+      }
+
+      if (scaledImgHeight > controlSize.height) {
+        const minY = controlTop - (scaledImgHeight - controlSize.height);
+        const maxY = controlTop;
+        boundedY = last ? (0, _bound.bound)(y, minY, maxY) : (0, _rubberband.rubberbandIfOutOfBounds)(y, minY, maxY, zoom * 50);
+      } else {
+        boundedY = -scaledImgHeight / 2;
+      }
 
-    if (imgRef.current && controlRef.current) {
-      xOffset = ((currentZoom * imgRef.current.width || 0) - controlRef.current.clientWidth) / 2;
-      yOffset = ((currentZoom * imgRef.current.height || 0) - controlRef.current.clientHeight) / 2;
+      return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
 
-    xOffset = xOffset > 0 ? xOffset : 0;
-    yOffset = yOffset > 0 ? yOffset : 0;
-    const bounds = {
-      left: -xOffset,
-      right: xOffset,
-      top: -yOffset,
-      bottom: yOffset
-    };
-
-    if (rubberband) {
-      return [(0, _rubberband.rubberbandIfOutOfBounds)(x, bounds.left, bounds.right, currentZoom * 50), (0, _rubberband.rubberbandIfOutOfBounds)(y, bounds.top, bounds.bottom, currentZoom * 50)];
-    } else {
-      return [(0, _bound.bound)(x, bounds.left, bounds.right), (0, _bound.bound)(y, bounds.top, bounds.bottom)];
+    if (type === 'scale' && last) {
+      const [boundedX, boundedY] = [scaledImgWidth > controlSize.width ? (0, _bound.bound)(x, controlLeft - (scaledImgWidth - controlSize.width), controlLeft) : -scaledImgWidth / 2, scaledImgHeight > controlSize.height ? (0, _bound.bound)(y, controlTop - (scaledImgHeight - controlSize.height), controlTop) : -scaledImgHeight / 2];
+      return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
-  }
+
+    return nextMatrix;
+  };
 
   (0, _useDragAndPinch.useDragAndPinch)({
     onDrag: state => {
+      if (state.first) return;
+      if (state.pinching) return state.cancel();
+
       if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
         props.onTap();
         return;
       }
 
-      const currentZoom = zoom.get();
+      const currentZoom = mat.getScaleX(matrix.get());
 
       if (dragLockRef) {
         dragLockRef.current = currentZoom !== 1;
@@ -83,24 +104,16 @@ const Slide = props => {
 
       if (!pinchLockRef.current && currentZoom <= 1) {
         api.start({
-          x: 0,
-          y: 0
+          matrix: mat.create()
         });
       } else {
-        if (state.last) {
-          const [x, y] = boundXY([state.offset[0] + state.velocity[0] * state.direction[0] * 200, state.offset[1] + state.velocity[1] * state.direction[1] * 200], false);
-          api.start({
-            x,
-            y
-          });
-        } else {
-          const [x, y] = boundXY(state.offset, true);
-          api.start({
-            x,
-            y,
-            immediate: true
-          });
-        }
+        const currentMatrix = matrix.get();
+        const offset = [state.offset[0] - mat.getTranslateX(currentMatrix), state.offset[1] - mat.getTranslateY(currentMatrix)];
+        const nextMatrix = mat.translate(currentMatrix, ...(state.last ? [offset[0] + state.velocity[0] * state.direction[0] * 200, offset[1] + state.velocity[1] * state.direction[1] * 200] : offset));
+        api.start({
+          matrix: boundMatrix(nextMatrix, 'translate', state.last),
+          immediate: !state.last
+        });
       }
     },
     onPinch: state => {
@@ -110,22 +123,30 @@ const Slide = props => {
       const [d] = state.offset;
       if (d < 0) return;
       const nextZoom = state.last ? (0, _bound.bound)(d, 1, props.maxZoom) : d;
-      api.start({
-        zoom: nextZoom,
-        immediate: !state.last
-      });
       (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, nextZoom);
 
       if (state.last && nextZoom <= 1) {
         api.start({
-          x: 0,
-          y: 0
+          matrix: mat.create()
         });
 
         if (dragLockRef) {
           dragLockRef.current = false;
         }
       } else {
+        if (!controlSize) return;
+        const currentMatrix = matrix.get();
+        const currentZoom = mat.getScaleX(currentMatrix);
+        const originOffsetX = state.origin[0] - controlSize.width / 2;
+        const originOffsetY = state.origin[1] - controlSize.height / 2;
+        let nextMatrix = mat.translate(currentMatrix, -originOffsetX, -originOffsetY);
+        nextMatrix = mat.scale(nextMatrix, nextZoom / currentZoom);
+        nextMatrix = mat.translate(nextMatrix, originOffsetX, originOffsetY);
+        api.start({
+          matrix: boundMatrix(nextMatrix, 'scale', state.last),
+          immediate: !state.last
+        });
+
         if (dragLockRef) {
           dragLockRef.current = true;
         }
@@ -135,13 +156,13 @@ const Slide = props => {
     target: controlRef,
     drag: {
       // filterTaps: true,
-      from: () => [x.get(), y.get()],
+      from: () => [mat.getTranslateX(matrix.get()), mat.getTranslateY(matrix.get())],
       pointer: {
         touch: true
       }
     },
     pinch: {
-      from: () => [zoom.get(), 0],
+      from: () => [mat.getScaleX(matrix.get()), 0],
       pointer: {
         touch: true
       }
@@ -150,7 +171,7 @@ const Slide = props => {
   return _react.default.createElement("div", {
     className: `${classPrefix}-slide`,
     onPointerMove: e => {
-      if (zoom.get() !== 1) {
+      if (mat.getScaleX(matrix.get()) !== 1) {
         e.stopPropagation();
       }
     }
@@ -160,9 +181,7 @@ const Slide = props => {
   }, _react.default.createElement(_web.animated.div, {
     className: `${classPrefix}-image-wrapper`,
     style: {
-      translateX: x,
-      translateY: y,
-      scale: zoom
+      matrix
     }
   }, _react.default.createElement("img", {
     ref: imgRef,

package/cjs/components/input/input.js

@@ -23,6 +23,8 @@ var _bound = require("../../utils/bound");
 
 var _validate = require("../../utils/validate");
 
+var _configProvider = require("../config-provider");
+
 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); }
@@ -40,6 +42,9 @@ const Input = (0, _react.forwardRef)((p, ref) => {
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const compositionStartRef = (0, _react.useRef)(false);
   const nativeInputRef = (0, _react.useRef)(null);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {
       setValue('');
@@ -161,7 +166,8 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     role: props.role,
     "aria-valuenow": props['aria-valuenow'],
     "aria-valuemax": props['aria-valuemax'],
-    "aria-valuemin": props['aria-valuemin']
+    "aria-valuemin": props['aria-valuemin'],
+    "aria-label": props['aria-label']
   }), shouldShowClear && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
@@ -177,7 +183,8 @@ const Input = (0, _react.forwardRef)((p, ref) => {
         compositionStartRef.current = false;
         (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
       }
-    }
+    },
+    "aria-label": locale.Input.clear
   }, _react.default.createElement(_antdMobileIcons.CloseCircleFill, null))));
 });
 exports.Input = Input;

package/cjs/components/modal/show.d.ts

@@ -1,5 +1,5 @@
 import { ModalProps } from './modal';
-export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
+export declare type ModalShowProps = Omit<ModalProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type ModalShowHandler = {
     close: () => void;
 };

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

@@ -61,6 +61,14 @@
   flex-shrink: 0;
   margin-left: 12px;
 }
+.adm-notice-bar-close {
+  width: 24px;
+  height: 24px;
+  margin-right: -3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .adm-notice-bar-close-icon {
   font-size: var(--adm-font-size-10);
 }

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

@@ -103,14 +103,16 @@ const NoticeBar = (0, _react.memo)(p => {
     className: `${classPrefix}-content-inner`
   }, props.content)), (props.closeable || props.extra) && _react.default.createElement("span", {
     className: `${classPrefix}-right`
-  }, props.extra, props.closeable && _react.default.createElement(_antdMobileIcons.CloseOutline, {
-    className: `${classPrefix}-close-icon`,
+  }, props.extra, props.closeable && _react.default.createElement("div", {
+    className: `${classPrefix}-close`,
     onClick: () => {
       var _a;
 
       setVisible(false);
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }))));
+  }, _react.default.createElement(_antdMobileIcons.CloseOutline, {
+    className: `${classPrefix}-close-icon`
+  })))));
 });
 exports.NoticeBar = NoticeBar;

package/cjs/components/number-keyboard/number-keyboard.css

@@ -3,7 +3,7 @@
   flex-wrap: wrap;
   flex: 1;
 }
-.adm-number-keyboard-main.confirmed-style .sign-key {
+.adm-number-keyboard-main.adm-number-keyboard-main-confirmed-style .adm-number-keyboard-key-sign {
   background-color: var(--adm-color-white);
 }
 .adm-number-keyboard-popup.adm-popup {
@@ -33,10 +33,10 @@
   padding: 0 12px;
   font-size: 16px;
 }
-.adm-number-keyboard-header.with-title {
+.adm-number-keyboard-header.adm-number-keyboard-header-with-title {
   justify-content: space-between;
 }
-.adm-number-keyboard-header.with-title .adm-number-keyboard-header-close-button {
+.adm-number-keyboard-header.adm-number-keyboard-header-with-title .adm-number-keyboard-header-close-button {
   padding-right: 0;
 }
 .adm-number-keyboard-footer {
@@ -82,31 +82,28 @@
   content: ' ';
   box-sizing: content-box;
 }
-.adm-number-keyboard-key.mid-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-mid {
   flex-basis: 66.67%;
 }
-.adm-number-keyboard-key.sign-key:active::before {
+.adm-number-keyboard-key.adm-number-keyboard-key-sign:active::before {
   opacity: 0.1;
 }
-.adm-number-keyboard-key.extra-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-extra {
   border-left: solid 1px var(--adm-color-border);
   border-right: none;
 }
-.adm-number-keyboard-key.extra-key,
-.adm-number-keyboard-key.number-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-extra,
+.adm-number-keyboard-key.adm-number-keyboard-key-number {
   background-color: var(--adm-color-background);
 }
-.adm-number-keyboard-key.extra-key:active::before,
-.adm-number-keyboard-key.number-key:active::before {
+.adm-number-keyboard-key.adm-number-keyboard-key-extra:active::before,
+.adm-number-keyboard-key.adm-number-keyboard-key-number:active::before {
   opacity: 0.1;
 }
-.adm-number-keyboard-key.ok-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-ok {
   background-color: var(--adm-color-primary);
   color: var(--adm-color-white);
   height: 144px;
   font-size: 16px;
   border: none;
 }
-.adm-number-keyboard-bs-key {
-  height: 20px;
-}

package/cjs/components/number-keyboard/number-keyboard.d.ts

@@ -5,7 +5,7 @@ export declare type NumberKeyboardProps = {
     visible?: boolean;
     title?: string;
     confirmText?: string | null;
-    customKey?: '-' | '.' | 'X';
+    customKey?: string | [string, string];
     randomOrder?: boolean;
     showCloseButton?: boolean;
     onInput?: (v: string) => void;