antd-mobile 5.33.0 → 5.33.1

package/2x/bundle/style.css

@@ -5228,7 +5228,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 16px 0 calc(var(--height) - var(--border-width) + 8px);
+  margin: 0 16px 0 calc(var(--height) - var(--border-width) + 10px);
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin .2s;
@@ -5248,7 +5248,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-switch.adm-switch-checked .adm-switch-inner {
-  margin: 0 calc(var(--height) - var(--border-width) + 10px) 0 20px;
+  margin: 0 calc(var(--height) - var(--border-width) + 10px) 0 16px;
   color: var(--adm-color-text-light-solid);
 }
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type GetContainer } from '../../utils/render-to-container';
 import { CalendarPickerViewProps, CalendarPickerViewRef } from '../calendar-picker-view';
 export declare type CalendarPickerRef = CalendarPickerViewRef;
 export declare type CalendarPickerProps = CalendarPickerViewProps & {
@@ -11,6 +12,7 @@ export declare type CalendarPickerProps = CalendarPickerViewProps & {
     closeOnMaskClick?: boolean;
     onClose?: () => void;
     onMaskClick?: () => void;
+    getContainer?: GetContainer;
 } & ({
     selectionMode?: undefined;
     onConfirm?: undefined;
@@ -51,6 +53,7 @@ export declare const CalendarPicker: React.ForwardRefExoticComponent<(({
     closeOnMaskClick?: boolean | undefined;
     onClose?: (() => void) | undefined;
     onMaskClick?: (() => void) | undefined;
+    getContainer?: GetContainer | undefined;
 } & {
     selectionMode?: undefined;
     onConfirm?: undefined;
@@ -84,6 +87,7 @@ export declare const CalendarPicker: React.ForwardRefExoticComponent<(({
     closeOnMaskClick?: boolean | undefined;
     onClose?: (() => void) | undefined;
     onMaskClick?: (() => void) | undefined;
+    getContainer?: GetContainer | undefined;
 } & {
     selectionMode: 'single';
     onConfirm?: ((val: Date | null) => void) | undefined;
@@ -117,6 +121,7 @@ export declare const CalendarPicker: React.ForwardRefExoticComponent<(({
     closeOnMaskClick?: boolean | undefined;
     onClose?: (() => void) | undefined;
     onMaskClick?: (() => void) | undefined;
+    getContainer?: GetContainer | undefined;
 } & {
     selectionMode: 'range';
     onConfirm?: ((val: [Date, Date] | null) => void) | undefined;

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

@@ -41,9 +41,10 @@ const CalendarPicker = (0, _react.forwardRef)((p, ref) => {
       closeOnMaskClick,
       onClose,
       onConfirm,
-      onMaskClick
+      onMaskClick,
+      getContainer
     } = props,
-    calendarViewProps = (0, _tslib.__rest)(props, ["visible", "confirmText", "popupClassName", "popupStyle", "popupBodyStyle", "forceRender", "closeOnMaskClick", "onClose", "onConfirm", "onMaskClick"]);
+    calendarViewProps = (0, _tslib.__rest)(props, ["visible", "confirmText", "popupClassName", "popupStyle", "popupBodyStyle", "forceRender", "closeOnMaskClick", "onClose", "onConfirm", "onMaskClick", "getContainer"]);
   const footer = _react.default.createElement("div", {
     className: `${classPrefix}-footer`
   }, _react.default.createElement(_divider.default, null), _react.default.createElement("div", {
@@ -81,7 +82,8 @@ const CalendarPicker = (0, _react.forwardRef)((p, ref) => {
       if (closeOnMaskClick) {
         onClose === null || onClose === void 0 ? void 0 : onClose();
       }
-    }
+    },
+    getContainer: getContainer
   }, _react.default.createElement(_calendarPickerView.default, Object.assign({
     ref: calendarRef
   }, calendarViewProps)), footer)));

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

@@ -12,6 +12,7 @@ var _usePropsValue = require("../../utils/use-props-value");
 var _cascaderView = _interopRequireDefault(require("../cascader-view"));
 var _configProvider = require("../config-provider");
 var _useCascaderValueExtend = require("../cascader-view/use-cascader-value-extend");
+var _hooks = require("../../hooks");
 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); }
 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; }
@@ -59,7 +60,11 @@ const Cascader = (0, _react.forwardRef)((p, ref) => {
       (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
   }));
-  const generateValueExtend = (0, _useCascaderValueExtend.useCascaderValueExtend)(props.options);
+  const [, valueName, childrenName] = (0, _hooks.useFieldNames)(props.fieldNames);
+  const generateValueExtend = (0, _useCascaderValueExtend.useCascaderValueExtend)(props.options, {
+    valueName,
+    childrenName
+  });
   const [innerValue, setInnerValue] = (0, _react.useState)(value);
   (0, _react.useEffect)(() => {
     if (!visible) {

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

@@ -29,8 +29,11 @@ const CascaderView = p => {
   const {
     locale
   } = (0, _configProvider.useConfig)();
-  const generateValueExtend = (0, _useCascaderValueExtend.useCascaderValueExtend)(props.options);
   const [labelName, valueName, childrenName, disabledName] = (0, _hooks.useFieldNames)(props.fieldNames);
+  const generateValueExtend = (0, _useCascaderValueExtend.useCascaderValueExtend)(props.options, {
+    valueName,
+    childrenName
+  });
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(Object.assign(Object.assign({}, props), {
     onChange: val => {
       var _a;

package/2x/cjs/components/cascader-view/use-cascader-value-extend.d.ts

@@ -1,2 +1,3 @@
-import { CascaderValue, CascaderValueExtend, CascaderOption } from './cascader-view';
-export declare function useCascaderValueExtend(options: CascaderOption[]): (val: CascaderValue[]) => CascaderValueExtend;
+import { CascaderValue, CascaderValueExtend } from './cascader-view';
+import type { CascaderOption } from './cascader-view';
+export declare function useCascaderValueExtend(options: CascaderOption[], fieldNames: CascaderOption): (val: CascaderValue[]) => CascaderValueExtend;

package/2x/cjs/components/cascader-view/use-cascader-value-extend.js

@@ -7,19 +7,23 @@ exports.useCascaderValueExtend = useCascaderValueExtend;
 var _react = require("react");
 var _memoize = _interopRequireDefault(require("lodash/memoize"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function useCascaderValueExtend(options) {
+function useCascaderValueExtend(options, fieldNames) {
+  const {
+    valueName,
+    childrenName
+  } = fieldNames;
   const generateItems = (0, _react.useMemo)(() => {
     return (0, _memoize.default)(val => {
       const ret = [];
       let currentOptions = options;
       for (const v of val) {
-        const target = currentOptions.find(option => option.value === v);
+        const target = currentOptions.find(option => option[valueName] === v);
         if (!target) {
           break;
         }
         ret.push(target);
-        if (!target.children) break;
-        currentOptions = target.children;
+        if (!target[childrenName]) break;
+        currentOptions = target[childrenName];
       }
       return ret;
     }, val => JSON.stringify(val));
@@ -28,7 +32,7 @@ function useCascaderValueExtend(options) {
     return (0, _memoize.default)(val => {
       const children = val.reduce((currentOptions, v) => {
         var _a;
-        return ((_a = currentOptions.find(option => option.value === v)) === null || _a === void 0 ? void 0 : _a.children) || [];
+        return ((_a = currentOptions.find(option => option[valueName] === v)) === null || _a === void 0 ? void 0 : _a[childrenName]) || [];
       }, options);
       return children.length === 0;
     }, val => JSON.stringify(val));

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

@@ -10,6 +10,10 @@ export declare type ImageViewerProps = {
     onClose?: () => void;
     afterClose?: () => void;
     renderFooter?: (image: string) => ReactNode;
+    classNames?: {
+        mask?: string;
+        body?: string;
+    };
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;

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

@@ -11,6 +11,7 @@ var _mask = _interopRequireDefault(require("../mask"));
 var _safeArea = _interopRequireDefault(require("../safe-area"));
 var _slide = require("./slide");
 var _slides = require("./slides");
+var _classnames = _interopRequireDefault(require("classnames"));
 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); }
 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; }
@@ -21,23 +22,24 @@ const defaultProps = {
   visible: false
 };
 const ImageViewer = p => {
-  var _a;
+  var _a, _b, _c;
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const node = _react.default.createElement(_mask.default, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, _react.default.createElement("div", {
-    className: `${classPrefix}-content`
+    className: (0, _classnames.default)(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.image && _react.default.createElement(_slide.Slide, {
     image: props.image,
     onTap: props.onClose,
     maxZoom: props.maxZoom
   })), props.image && _react.default.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), _react.default.createElement(_safeArea.default, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   })));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
@@ -47,7 +49,7 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
-  var _a;
+  var _a, _b, _c;
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
   const [index, setIndex] = (0, _react.useState)(props.defaultIndex);
   const slidesRef = (0, _react.useRef)(null);
@@ -69,9 +71,10 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, _react.default.createElement("div", {
-    className: `${classPrefix}-content`
+    className: (0, _classnames.default)(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.images && _react.default.createElement(_slides.Slides, {
     ref: slidesRef,
     defaultIndex: index,
@@ -81,7 +84,7 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
     maxZoom: props.maxZoom
   })), props.images && _react.default.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), _react.default.createElement(_safeArea.default, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   })));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);

package/2x/cjs/components/number-keyboard/number-keyboard.js

@@ -97,7 +97,7 @@ const NumberKeyboard = p => {
       className: (0, _classnames.default)(`${classPrefix}-header`, {
         [`${classPrefix}-header-with-title`]: !!title
       })
-    }, 'title' && _react.default.createElement("div", {
+    }, !!title && _react.default.createElement("div", {
       className: `${classPrefix}-title`,
       "aria-label": title
     }, title), showCloseButton && _react.default.createElement("span", {
@@ -172,6 +172,10 @@ const NumberKeyboard = p => {
       onKeyPress(e, 'BACKSPACE');
       onBackspacePressEnd();
     },
+    onContextMenu: e => {
+      // Long press should not trigger native context menu
+      e.preventDefault();
+    },
     title: 'BACKSPACE',
     role: 'grid',
     tabIndex: -1

package/2x/cjs/components/popover/popover-menu.js

@@ -41,7 +41,9 @@ const PopoverMenu = (0, _react.forwardRef)((props, ref) => {
       var _a;
       return _react.default.createElement("a", {
         key: (_a = action.key) !== null && _a !== void 0 ? _a : index,
-        className: (0, _classnames.default)(`${classPrefix}-item`, 'adm-plain-anchor', action.disabled && `${classPrefix}-item-disabled`),
+        className: (0, _classnames.default)(`${classPrefix}-item`, 'adm-plain-anchor', {
+          [`${classPrefix}-item-disabled`]: action.disabled
+        }),
         onClick: () => {
           var _a;
           if (action.disabled) return;

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

@@ -27,13 +27,11 @@ const defaultProps = {
   placement: 'top',
   defaultVisible: false,
   stopPropagation: ['click'],
-  getContainer: () => document.body
+  getContainer: () => document.body,
+  mode: 'light'
 };
 const Popover = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  const {
-    mode = 'light'
-  } = props;
   const placement = (0, _normalizePlacement.normalizePlacement)(props.placement);
   const [visible, setVisible] = (0, _usePropsValue.usePropsValue)({
     value: props.visible,
@@ -49,7 +47,9 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
   const floatingRef = (0, _react.useRef)(null);
   const arrowRef = (0, _react.useRef)(null);
   const floating = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.mode}`, {
+      [`${classPrefix}-hidden`]: !visible
+    }),
     ref: floatingRef
   }, _react.default.createElement("div", {
     className: `${classPrefix}-arrow`,

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

@@ -102,6 +102,7 @@ const Popup = p => {
   }), _react.default.createElement(_web.animated.div, {
     className: bodyCls,
     style: Object.assign(Object.assign({}, props.bodyStyle), {
+      pointerEvents: percent.to(v => v === 0 ? 'unset' : 'none'),
       transform: percent.to(v => {
         if (props.position === 'bottom') {
           return `translate(0, ${v}%)`;

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

@@ -72,7 +72,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 16px 0 calc(var(--height) - var(--border-width) + 8px);
+  margin: 0 16px 0 calc(var(--height) - var(--border-width) + 10px);
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
@@ -92,7 +92,7 @@
 }
 
 .adm-switch.adm-switch-checked .adm-switch-inner {
-  margin: 0 calc(var(--height) - var(--border-width) + 10px) 0 20px;
+  margin: 0 calc(var(--height) - var(--border-width) + 10px) 0 16px;
   color: var(--adm-color-text-light-solid);
 }
 

package/2x/cjs/components/virtual-input/virtual-input.js

@@ -80,9 +80,16 @@ const VirtualInput = (0, _react.forwardRef)((p, ref) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b, _c;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+      var _a, _b, _c, _d;
+      const activeElement = document.activeElement;
+      // Long press makes `activeElement` to be the child of rootRef
+      // We will trigger blur on the child element instead
+      if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+        activeElement.blur();
+      } else {
+        (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+      (_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
     },
     getContainer: null
   });

package/2x/es/components/calendar-picker/calendar-picker.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type GetContainer } from '../../utils/render-to-container';
 import { CalendarPickerViewProps, CalendarPickerViewRef } from '../calendar-picker-view';
 export declare type CalendarPickerRef = CalendarPickerViewRef;
 export declare type CalendarPickerProps = CalendarPickerViewProps & {
@@ -11,6 +12,7 @@ export declare type CalendarPickerProps = CalendarPickerViewProps & {
     closeOnMaskClick?: boolean;
     onClose?: () => void;
     onMaskClick?: () => void;
+    getContainer?: GetContainer;
 } & ({
     selectionMode?: undefined;
     onConfirm?: undefined;
@@ -51,6 +53,7 @@ export declare const CalendarPicker: React.ForwardRefExoticComponent<(({
     closeOnMaskClick?: boolean | undefined;
     onClose?: (() => void) | undefined;
     onMaskClick?: (() => void) | undefined;
+    getContainer?: GetContainer | undefined;
 } & {
     selectionMode?: undefined;
     onConfirm?: undefined;
@@ -84,6 +87,7 @@ export declare const CalendarPicker: React.ForwardRefExoticComponent<(({
     closeOnMaskClick?: boolean | undefined;
     onClose?: (() => void) | undefined;
     onMaskClick?: (() => void) | undefined;
+    getContainer?: GetContainer | undefined;
 } & {
     selectionMode: 'single';
     onConfirm?: ((val: Date | null) => void) | undefined;
@@ -117,6 +121,7 @@ export declare const CalendarPicker: React.ForwardRefExoticComponent<(({
     closeOnMaskClick?: boolean | undefined;
     onClose?: (() => void) | undefined;
     onMaskClick?: (() => void) | undefined;
+    getContainer?: GetContainer | undefined;
 } & {
     selectionMode: 'range';
     onConfirm?: ((val: [Date, Date] | null) => void) | undefined;

package/2x/es/components/calendar-picker/calendar-picker.js

@@ -32,9 +32,10 @@ export const CalendarPicker = forwardRef((p, ref) => {
       closeOnMaskClick,
       onClose,
       onConfirm,
-      onMaskClick
+      onMaskClick,
+      getContainer
     } = props,
-    calendarViewProps = __rest(props, ["visible", "confirmText", "popupClassName", "popupStyle", "popupBodyStyle", "forceRender", "closeOnMaskClick", "onClose", "onConfirm", "onMaskClick"]);
+    calendarViewProps = __rest(props, ["visible", "confirmText", "popupClassName", "popupStyle", "popupBodyStyle", "forceRender", "closeOnMaskClick", "onClose", "onConfirm", "onMaskClick", "getContainer"]);
   const footer = React.createElement("div", {
     className: `${classPrefix}-footer`
   }, React.createElement(Divider, null), React.createElement("div", {
@@ -72,7 +73,8 @@ export const CalendarPicker = forwardRef((p, ref) => {
       if (closeOnMaskClick) {
         onClose === null || onClose === void 0 ? void 0 : onClose();
       }
-    }
+    },
+    getContainer: getContainer
   }, React.createElement(CalendarPickerView, Object.assign({
     ref: calendarRef
   }, calendarViewProps)), footer)));

package/2x/es/components/cascader/cascader.js

@@ -6,6 +6,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import CascaderView from '../cascader-view';
 import { useConfig } from '../config-provider';
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend';
+import { useFieldNames } from '../../hooks';
 const classPrefix = `adm-cascader`;
 const defaultProps = {
   defaultValue: [],
@@ -50,7 +51,11 @@ export const Cascader = forwardRef((p, ref) => {
       (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
   }));
-  const generateValueExtend = useCascaderValueExtend(props.options);
+  const [, valueName, childrenName] = useFieldNames(props.fieldNames);
+  const generateValueExtend = useCascaderValueExtend(props.options, {
+    valueName,
+    childrenName
+  });
   const [innerValue, setInnerValue] = useState(value);
   useEffect(() => {
     if (!visible) {

package/2x/es/components/cascader-view/cascader-view.js

@@ -20,8 +20,11 @@ export const CascaderView = p => {
   const {
     locale
   } = useConfig();
-  const generateValueExtend = useCascaderValueExtend(props.options);
   const [labelName, valueName, childrenName, disabledName] = useFieldNames(props.fieldNames);
+  const generateValueExtend = useCascaderValueExtend(props.options, {
+    valueName,
+    childrenName
+  });
   const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
     onChange: val => {
       var _a;

package/2x/es/components/cascader-view/use-cascader-value-extend.d.ts

@@ -1,2 +1,3 @@
-import { CascaderValue, CascaderValueExtend, CascaderOption } from './cascader-view';
-export declare function useCascaderValueExtend(options: CascaderOption[]): (val: CascaderValue[]) => CascaderValueExtend;
+import { CascaderValue, CascaderValueExtend } from './cascader-view';
+import type { CascaderOption } from './cascader-view';
+export declare function useCascaderValueExtend(options: CascaderOption[], fieldNames: CascaderOption): (val: CascaderValue[]) => CascaderValueExtend;

package/2x/es/components/cascader-view/use-cascader-value-extend.js

@@ -1,18 +1,22 @@
 import { useMemo } from 'react';
 import memoize from 'lodash/memoize';
-export function useCascaderValueExtend(options) {
+export function useCascaderValueExtend(options, fieldNames) {
+  const {
+    valueName,
+    childrenName
+  } = fieldNames;
   const generateItems = useMemo(() => {
     return memoize(val => {
       const ret = [];
       let currentOptions = options;
       for (const v of val) {
-        const target = currentOptions.find(option => option.value === v);
+        const target = currentOptions.find(option => option[valueName] === v);
         if (!target) {
           break;
         }
         ret.push(target);
-        if (!target.children) break;
-        currentOptions = target.children;
+        if (!target[childrenName]) break;
+        currentOptions = target[childrenName];
       }
       return ret;
     }, val => JSON.stringify(val));
@@ -21,7 +25,7 @@ export function useCascaderValueExtend(options) {
     return memoize(val => {
       const children = val.reduce((currentOptions, v) => {
         var _a;
-        return ((_a = currentOptions.find(option => option.value === v)) === null || _a === void 0 ? void 0 : _a.children) || [];
+        return ((_a = currentOptions.find(option => option[valueName] === v)) === null || _a === void 0 ? void 0 : _a[childrenName]) || [];
       }, options);
       return children.length === 0;
     }, val => JSON.stringify(val));

package/2x/es/components/image-viewer/image-viewer.d.ts

@@ -10,6 +10,10 @@ export declare type ImageViewerProps = {
     onClose?: () => void;
     afterClose?: () => void;
     renderFooter?: (image: string) => ReactNode;
+    classNames?: {
+        mask?: string;
+        body?: string;
+    };
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;

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

@@ -5,6 +5,7 @@ import Mask from '../mask';
 import SafeArea from '../safe-area';
 import { Slide } from './slide';
 import { Slides } from './slides';
+import classNames from 'classnames';
 const classPrefix = `adm-image-viewer`;
 const defaultProps = {
   maxZoom: 3,
@@ -12,23 +13,24 @@ const defaultProps = {
   visible: false
 };
 export const ImageViewer = p => {
-  var _a;
+  var _a, _b, _c;
   const props = mergeProps(defaultProps, p);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, React.createElement("div", {
-    className: `${classPrefix}-content`
+    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.image && React.createElement(Slide, {
     image: props.image,
     onTap: props.onClose,
     maxZoom: props.maxZoom
   })), props.image && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), React.createElement(SafeArea, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
@@ -37,7 +39,7 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
-  var _a;
+  var _a, _b, _c;
   const props = mergeProps(multiDefaultProps, p);
   const [index, setIndex] = useState(props.defaultIndex);
   const slidesRef = useRef(null);
@@ -59,9 +61,10 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, React.createElement("div", {
-    className: `${classPrefix}-content`
+    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.images && React.createElement(Slides, {
     ref: slidesRef,
     defaultIndex: index,
@@ -71,7 +74,7 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     maxZoom: props.maxZoom
   })), props.images && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), React.createElement(SafeArea, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);

package/2x/es/components/number-keyboard/number-keyboard.js

@@ -88,7 +88,7 @@ export const NumberKeyboard = p => {
       className: classNames(`${classPrefix}-header`, {
         [`${classPrefix}-header-with-title`]: !!title
       })
-    }, 'title' && React.createElement("div", {
+    }, !!title && React.createElement("div", {
       className: `${classPrefix}-title`,
       "aria-label": title
     }, title), showCloseButton && React.createElement("span", {
@@ -163,6 +163,10 @@ export const NumberKeyboard = p => {
       onKeyPress(e, 'BACKSPACE');
       onBackspacePressEnd();
     },
+    onContextMenu: e => {
+      // Long press should not trigger native context menu
+      e.preventDefault();
+    },
     title: 'BACKSPACE',
     role: 'grid',
     tabIndex: -1

package/2x/es/components/popover/popover-menu.js

@@ -32,7 +32,9 @@ export const PopoverMenu = forwardRef((props, ref) => {
       var _a;
       return React.createElement("a", {
         key: (_a = action.key) !== null && _a !== void 0 ? _a : index,
-        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', action.disabled && `${classPrefix}-item-disabled`),
+        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', {
+          [`${classPrefix}-item-disabled`]: action.disabled
+        }),
         onClick: () => {
           var _a;
           if (action.disabled) return;

package/2x/es/components/popover/popover.js

@@ -18,13 +18,11 @@ const defaultProps = {
   placement: 'top',
   defaultVisible: false,
   stopPropagation: ['click'],
-  getContainer: () => document.body
+  getContainer: () => document.body,
+  mode: 'light'
 };
 export const Popover = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-  const {
-    mode = 'light'
-  } = props;
   const placement = normalizePlacement(props.placement);
   const [visible, setVisible] = usePropsValue({
     value: props.visible,
@@ -40,7 +38,9 @@ export const Popover = forwardRef((p, ref) => {
   const floatingRef = useRef(null);
   const arrowRef = useRef(null);
   const floating = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
+    className: classNames(classPrefix, `${classPrefix}-${props.mode}`, {
+      [`${classPrefix}-hidden`]: !visible
+    }),
     ref: floatingRef
   }, React.createElement("div", {
     className: `${classPrefix}-arrow`,

package/2x/es/components/popup/popup.js

@@ -93,6 +93,7 @@ export const Popup = p => {
   }), React.createElement(animated.div, {
     className: bodyCls,
     style: Object.assign(Object.assign({}, props.bodyStyle), {
+      pointerEvents: percent.to(v => v === 0 ? 'unset' : 'none'),
       transform: percent.to(v => {
         if (props.position === 'bottom') {
           return `translate(0, ${v}%)`;