amis-ui 3.1.0 → 3.2.0

package/lib/components/ColorPicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -31,13 +31,16 @@ var ColorControl = /** @class */ (function (_super) {
         _this.state = {
             isOpened: false,
             isFocused: false,
-            inputValue: _this.props.value || ''
+            inputValue: _this.props.value || '',
+            tempValue: _this.props.value || ''
         };
         _this.open = _this.open.bind(_this);
         _this.close = _this.close.bind(_this);
         _this.focus = _this.focus.bind(_this);
         _this.blur = _this.blur.bind(_this);
         _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleTempChange = _this.handleTempChange.bind(_this);
+        _this.handleConfirm = _this.handleConfirm.bind(_this);
         _this.handleFocus = _this.handleFocus.bind(_this);
         _this.handleBlur = _this.handleBlur.bind(_this);
         _this.clearValue = _this.clearValue.bind(_this);
@@ -145,12 +148,36 @@ var ColorControl = /** @class */ (function (_super) {
         }
         // closeOnSelect && this.close();
     };
+    ColorControl.prototype.handleTempChange = function (color) {
+        var tempValue = this.state.tempValue;
+        var format = this.props.format;
+        if (format === 'rgba') {
+            tempValue = "rgba(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ", ").concat(color.rgb.a, ")");
+        }
+        else if (format === 'rgb') {
+            tempValue = "rgb(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ")");
+        }
+        else if (format === 'hsl') {
+            tempValue = "hsl(".concat(Math.round(color.hsl.h), ", ").concat(Math.round(color.hsl.s * 100), "%, ").concat(Math.round(color.hsl.l * 100), "%)");
+        }
+        else {
+            tempValue = color.hex;
+        }
+        this.setState({ tempValue: tempValue });
+    };
+    ColorControl.prototype.handleConfirm = function () {
+        var onChange = this.props.onChange;
+        var tempValue = this.state.tempValue;
+        onChange(tempValue);
+        this.close();
+    };
     ColorControl.prototype.render = function () {
         var _this = this;
         var _a = this.props, ns = _a.classPrefix, className = _a.className, popoverClassName = _a.popoverClassName, value = _a.value, placeholder = _a.placeholder, disabled = _a.disabled, popOverContainer = _a.popOverContainer, format = _a.format, clearable = _a.clearable, placement = _a.placement, cx = _a.classnames, presetColors = _a.presetColors, allowCustomColor = _a.allowCustomColor, useMobileUI = _a.useMobileUI;
         var __ = this.props.translate;
         var isOpened = this.state.isOpened;
         var isFocused = this.state.isFocused;
+        var tempValue = this.state.tempValue;
         var mobileUI = useMobileUI && amisCore.isMobile();
         return (React__default["default"].createElement("div", { className: cx("ColorPicker", {
                 'is-disabled': disabled,
@@ -163,7 +190,7 @@ var ColorControl = /** @class */ (function (_super) {
             clearable && !disabled && value ? (React__default["default"].createElement("a", { onClick: this.clearValue, className: cx('ColorPicker-clear') },
                 React__default["default"].createElement(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
             React__default["default"].createElement("span", { className: cx('ColorPicker-arrow') },
-                React__default["default"].createElement(icons.Icon, { icon: "caret", className: "icon", onClick: this.handleClick })),
+                React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold", className: "icon", onClick: this.handleClick })),
             !mobileUI && isOpened ? (React__default["default"].createElement(amisCore.Overlay, { placement: placement || 'auto', target: function () { return ReactDOM.findDOMNode(_this); }, onHide: this.close, container: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), rootClose: false, show: true },
                 React__default["default"].createElement(amisCore.PopOver, { classPrefix: ns, className: cx('ColorPicker-popover', popoverClassName), onHide: this.close, overlay: true }, allowCustomColor ? (React__default["default"].createElement(reactColor.SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (React__default["default"].createElement(reactColor.GithubPicker, { color: value, colors: Array.isArray(presetColors)
                         ? presetColors
@@ -176,7 +203,7 @@ var ColorControl = /** @class */ (function (_super) {
                                     : item;
                         })
                         : undefined, onChangeComplete: this.handleChange }))))) : null,
-            mobileUI && (React__default["default"].createElement(PopUp["default"], { className: cx("".concat(ns, "ColorPicker-popup")), container: popOverContainer, isShow: isOpened, onHide: this.handleClick }, allowCustomColor ? (React__default["default"].createElement(reactColor.SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (React__default["default"].createElement(reactColor.GithubPicker, { color: value, colors: Array.isArray(presetColors)
+            mobileUI && (React__default["default"].createElement(PopUp["default"], { className: cx("".concat(ns, "ColorPicker-popup")), container: popOverContainer, isShow: isOpened, onHide: this.handleClick, showConfirm: true, onConfirm: this.handleConfirm }, allowCustomColor ? (React__default["default"].createElement(reactColor.SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: tempValue, presetColors: presetColors, onChangeComplete: this.handleTempChange })) : (React__default["default"].createElement(reactColor.GithubPicker, { color: tempValue, colors: Array.isArray(presetColors)
                     ? presetColors
                         .filter(function (item) { return typeof item === 'string' || amisCore.isObject(item); })
                         .map(function (item) {
@@ -186,7 +213,7 @@ var ColorControl = /** @class */ (function (_super) {
                                 ? item === null || item === void 0 ? void 0 : item.color
                                 : item;
                     })
-                    : undefined, onChangeComplete: this.handleChange }))))));
+                    : undefined, onChangeComplete: this.handleTempChange }))))));
     };
     ColorControl.defaultProps = {
         format: 'hex',

package/lib/components/Combo.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 

package/lib/components/ConfirmBox.d.ts

@@ -25,8 +25,9 @@ export interface ConfirmBoxProps extends LocaleProps, ThemeProps {
     headerClassName?: string;
     bodyClassName?: string;
     footerClassName?: string;
+    useMobileUI?: boolean;
 }
-export declare function ConfirmBox({ type, size, closeOnEsc, show, onCancel, title, showTitle, headerClassName, translate: __, children, showFooter, onConfirm, beforeConfirm, popOverContainer, position, resizable, classnames: cx, className, bodyClassName, footerClassName }: ConfirmBoxProps): React.JSX.Element;
+export declare function ConfirmBox({ type, size, closeOnEsc, show, onCancel, title, showTitle, headerClassName, translate: __, children, showFooter, onConfirm, beforeConfirm, popOverContainer, position, resizable, classnames: cx, className, bodyClassName, footerClassName, useMobileUI }: ConfirmBoxProps): React.JSX.Element;
 export declare namespace ConfirmBox {
     var defaultProps: {
         type: "dialog";
@@ -34,9 +35,9 @@ export declare namespace ConfirmBox {
     };
 }
 declare const _default: {
-    new (props: Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+    new (props: Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
         type?: "dialog" | "drawer" | undefined;
-        position?: "left" | "right" | "top" | "bottom" | undefined;
+        position?: "left" | "right" | "bottom" | "top" | undefined;
     } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
         locale?: string | undefined;
         translate?: ((str: string, ...args: any[]) => string) | undefined;
@@ -46,17 +47,17 @@ declare const _default: {
         getWrappedInstance(): any;
         render(): React.JSX.Element;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
         }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        readonly props: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
@@ -66,55 +67,55 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        shouldComponentUpdate?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
         }>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        componentDidUpdate?(prevProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
         }>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        componentWillReceiveProps?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
         }>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
         }>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        componentWillUpdate?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
         }>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
             translate?: ((str: string, ...args: any[]) => string) | undefined;
@@ -123,60 +124,60 @@ declare const _default: {
     displayName: string;
     contextType: React.Context<string>;
     ComposedComponent: React.ComponentType<{
-        new (props: Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        new (props: Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps): {
             ref: any;
             childRef(ref: any): void;
             getWrappedInstance(): any;
             render(): React.JSX.Element;
             context: unknown;
-            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            readonly props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>;
             state: Readonly<{}>;
             refs: {
                 [key: string]: React.ReactInstance;
             };
             componentDidMount?(): void;
-            shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentWillUnmount?(): void;
             componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-            componentDidUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            componentDidUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
-            componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-            componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-            UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
         };
         displayName: string;
@@ -186,60 +187,60 @@ declare const _default: {
         ComposedComponent: typeof ConfirmBox;
     }>;
 } & import("hoist-non-react-statics").NonReactStatics<{
-    new (props: Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+    new (props: Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
         type?: "dialog" | "drawer" | undefined;
-        position?: "left" | "right" | "top" | "bottom" | undefined;
+        position?: "left" | "right" | "bottom" | "top" | undefined;
     } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps): {
         ref: any;
         childRef(ref: any): void;
         getWrappedInstance(): any;
         render(): React.JSX.Element;
         context: unknown;
-        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        readonly props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
@@ -249,60 +250,60 @@ declare const _default: {
     ComposedComponent: typeof ConfirmBox;
 }, {}> & {
     ComposedComponent: {
-        new (props: Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+        new (props: Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
             type?: "dialog" | "drawer" | undefined;
-            position?: "left" | "right" | "top" | "bottom" | undefined;
+            position?: "left" | "right" | "bottom" | "top" | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps): {
             ref: any;
             childRef(ref: any): void;
             getWrappedInstance(): any;
             render(): React.JSX.Element;
             context: unknown;
-            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            readonly props: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>;
             state: Readonly<{}>;
             refs: {
                 [key: string]: React.ReactInstance;
             };
             componentDidMount?(): void;
-            shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentWillUnmount?(): void;
             componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-            componentDidUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            componentDidUpdate?(prevProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
-            componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-            componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-            UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "title" | "children" | "popOverContainer" | "locale" | "translate" | "closeOnEsc" | "size" | "show" | "bodyClassName" | "resizable" | "headerClassName" | "onCancel" | "onConfirm" | "beforeConfirm" | "showTitle" | "showFooter" | "footerClassName"> & {
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<ConfirmBoxProps, keyof ThemeProps>, "children" | "title" | "locale" | "translate" | "size" | "closeOnEsc" | "show" | "bodyClassName" | "onCancel" | "useMobileUI" | "onConfirm" | "popOverContainer" | "resizable" | "headerClassName" | "showTitle" | "showFooter" | "beforeConfirm" | "footerClassName"> & {
                 type?: "dialog" | "drawer" | undefined;
-                position?: "left" | "right" | "top" | "bottom" | undefined;
+                position?: "left" | "right" | "bottom" | "top" | undefined;
             } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
         };
         displayName: string;

package/lib/components/ConfirmBox.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -14,6 +14,7 @@ var Button = require('./Button.js');
 var Drawer = require('./Drawer.js');
 var amisCore = require('amis-core');
 var Spinner = require('./Spinner.js');
+var PopUp = require('./PopUp.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,7 +22,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ConfirmBox(_a) {
     var _this = this;
-    var type = _a.type, size = _a.size, closeOnEsc = _a.closeOnEsc, show = _a.show, onCancel = _a.onCancel, title = _a.title, showTitle = _a.showTitle, headerClassName = _a.headerClassName, __ = _a.translate, children = _a.children, showFooter = _a.showFooter, onConfirm = _a.onConfirm, beforeConfirm = _a.beforeConfirm, popOverContainer = _a.popOverContainer, position = _a.position, resizable = _a.resizable, cx = _a.classnames, className = _a.className, bodyClassName = _a.bodyClassName, footerClassName = _a.footerClassName;
+    var type = _a.type, size = _a.size, closeOnEsc = _a.closeOnEsc, show = _a.show, onCancel = _a.onCancel, title = _a.title, showTitle = _a.showTitle, headerClassName = _a.headerClassName, __ = _a.translate, children = _a.children, showFooter = _a.showFooter, onConfirm = _a.onConfirm, beforeConfirm = _a.beforeConfirm, popOverContainer = _a.popOverContainer, position = _a.position, resizable = _a.resizable, cx = _a.classnames, className = _a.className, bodyClassName = _a.bodyClassName, footerClassName = _a.footerClassName, useMobileUI = _a.useMobileUI;
     var _b = tslib.__read(React__default["default"].useState(), 2), loading = _b[0], setLoading = _b[1];
     var _c = tslib.__read(React__default["default"].useState(), 2), error = _c[0], setError = _c[1];
     var bodyRef = React__default["default"].useRef();
@@ -73,7 +74,13 @@ function ConfirmBox(_a) {
         show && setError('');
     }, [show]);
     function renderDialog() {
-        return (React__default["default"].createElement(Modal["default"], { size: size, closeOnEsc: closeOnEsc, show: show, onHide: onCancel, container: popOverContainer, className: className },
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return mobileUI ? (React__default["default"].createElement(PopUp["default"], { isShow: show, showConfirm: true, onConfirm: handleConfirm, onHide: onCancel, container: popOverContainer }, typeof children === 'function'
+            ? children({
+                bodyRef: bodyRef,
+                loading: loading
+            })
+            : children)) : (React__default["default"].createElement(Modal["default"], { size: size, closeOnEsc: closeOnEsc, show: show, onHide: onCancel, container: popOverContainer, className: className },
             showTitle !== false && title ? (React__default["default"].createElement(Modal["default"].Header, { onClose: onCancel, className: headerClassName }, title)) : null,
             React__default["default"].createElement(Modal["default"].Body, { className: bodyClassName }, typeof children === 'function'
                 ? children({