amis-ui 6.13.0-beta.8 → 6.13.0

package/lib/components/ConfirmBox.js

@@ -0,0 +1,141 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var Modal = require('./Modal.js');
+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');
+var ReactDOM = require('react-dom');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+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, mobileUI = _a.mobileUI, disabled = _a.disabled, testIdBuilder = _a.testIdBuilder, onEntered = _a.onEntered, onExited = _a.onExited;
+    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();
+    var bodyDomRef = React__default["default"].useRef();
+    var getPopOverContainer = React__default["default"].useCallback(function () {
+        var dom = bodyDomRef.current && !bodyDomRef.current.nodeType
+            ? ReactDOM.findDOMNode(bodyDomRef.current)
+            : null;
+        return dom === null || dom === void 0 ? void 0 : dom.parentElement;
+    }, []);
+    var handleConfirm = React__default["default"].useCallback(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
+        var ret, _a, e_1;
+        var _b, _c;
+        return tslib.__generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    setError('');
+                    setLoading(true);
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 7, 8, 9]);
+                    if (!beforeConfirm) return [3 /*break*/, 3];
+                    return [4 /*yield*/, (beforeConfirm === null || beforeConfirm === void 0 ? void 0 : beforeConfirm(bodyRef.current))];
+                case 2:
+                    _a = _d.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, ((_c = (_b = bodyRef.current) === null || _b === void 0 ? void 0 : _b.submit) === null || _c === void 0 ? void 0 : _c.call(_b))];
+                case 4:
+                    _a = _d.sent();
+                    _d.label = 5;
+                case 5:
+                    ret = _a;
+                    if (ret === false) {
+                        return [2 /*return*/];
+                    }
+                    else if (typeof ret === 'string') {
+                        setError(ret);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, (onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(ret))];
+                case 6:
+                    _d.sent();
+                    return [3 /*break*/, 9];
+                case 7:
+                    e_1 = _d.sent();
+                    setError(e_1.message);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setLoading(false);
+                    setTimeout(function () { return setError(''); }, 5000);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); }, [onConfirm, beforeConfirm]);
+    React__default["default"].useEffect(function () {
+        show && setError('');
+    }, [show]);
+    function renderDialog() {
+        return mobileUI ? (_J$X_(PopUp["default"], { isShow: show, showConfirm: true, onConfirm: handleConfirm, onHide: onCancel, container: popOverContainer, onEntered: onEntered, onExited: onExited }, typeof children === 'function'
+            ? children({
+                bodyRef: bodyRef,
+                loading: loading,
+                popOverContainer: getPopOverContainer,
+                onConfirm: handleConfirm
+            })
+            : children)) : (_J$X_(Modal["default"], { size: size, closeOnEsc: closeOnEsc, show: show, onHide: onCancel, container: popOverContainer, className: className, onEntered: onEntered, onExited: onExited },
+            showTitle !== false && title ? (_J$X_(Modal["default"].Header, { onClose: onCancel, className: headerClassName }, title)) : null,
+            _J$X_(Modal["default"].Body, { ref: bodyDomRef, className: bodyClassName }, typeof children === 'function'
+                ? children({
+                    bodyRef: bodyRef,
+                    loading: loading,
+                    onConfirm: handleConfirm,
+                    popOverContainer: getPopOverContainer
+                })
+                : children),
+            (showFooter !== null && showFooter !== void 0 ? showFooter : true) ? (_J$X_(Modal["default"].Footer, { className: footerClassName },
+                loading || error ? (_J$X_("div", { className: cx('Dialog-info') },
+                    _J$X_(Spinner["default"], { size: "sm", key: "info", show: loading }),
+                    error ? (_J$X_("span", { className: cx('Dialog-error') }, error)) : null)) : null,
+                _J$X_(Button["default"], { disabled: loading, onClick: onCancel, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('cancel') }, __('cancel')),
+                _J$X_(Button["default"], { disabled: loading || disabled, onClick: handleConfirm, level: "primary", testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('confirm') }, __('confirm')))) : null));
+    }
+    function renderDrawer() {
+        return (_J$X_(Drawer["default"], { size: size, closeOnEsc: closeOnEsc, show: show, onHide: onCancel, container: popOverContainer, position: position, resizable: resizable, showCloseButton: false, className: className },
+            showTitle !== false && title ? (_J$X_("div", { className: cx('Drawer-header', headerClassName) },
+                _J$X_("div", { className: cx('Drawer-title') }, title))) : null,
+            _J$X_("div", { ref: bodyDomRef, className: cx('Drawer-body', bodyClassName) }, typeof children === 'function'
+                ? children({
+                    bodyRef: bodyRef,
+                    loading: loading,
+                    popOverContainer: getPopOverContainer,
+                    onConfirm: handleConfirm
+                })
+                : children),
+            (showFooter !== null && showFooter !== void 0 ? showFooter : true) ? (_J$X_("div", { className: cx('Drawer-footer', footerClassName) },
+                loading || error ? (_J$X_("div", { className: cx('Drawer-info') },
+                    _J$X_(Spinner["default"], { size: "sm", key: "info", show: loading }),
+                    error ? (_J$X_("span", { className: cx('Drawer-error') }, error)) : null)) : null,
+                _J$X_(Button["default"], { onClick: handleConfirm, level: "primary" }, __('confirm')),
+                _J$X_(Button["default"], { onClick: onCancel }, __('cancel')))) : null));
+    }
+    return type === 'drawer' ? renderDrawer() : renderDialog();
+}
+ConfirmBox.defaultProps = {
+    type: 'dialog',
+    position: 'right'
+};
+var ConfirmBox$1 = amisCore.localeable(amisCore.themeable(ConfirmBox));
+
+exports.ConfirmBox = ConfirmBox;
+exports["default"] = ConfirmBox$1;

package/lib/components/ContextMenu.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="hoist-non-react-statics" />
+import { ClassNamesFn } from 'amis-core';
+import React from 'react';
+import type { DebouncedFunc } from 'lodash';
+interface ContextMenuProps {
+    className?: string;
+    classPrefix: string;
+    classnames: ClassNamesFn;
+    container?: HTMLElement | null | (() => HTMLElement);
+}
+export type MenuItem = {
+    id?: string;
+    label: string | React.ReactNode;
+    icon?: string;
+    disabled?: boolean;
+    children?: Array<MenuItem | MenuDivider>;
+    data?: any;
+    className?: string;
+    selected?: boolean;
+    onSelect?: (data: any) => void;
+    onHighlight?: (isHiglight: boolean, data: any) => void;
+};
+export type MenuDivider = '|';
+interface ContextMenuState {
+    isOpened: boolean;
+    menus: Array<MenuItem | MenuDivider> | (() => JSX.Element);
+    x: number;
+    y: number;
+    cursorX: number;
+    cursorY: number;
+    align?: 'left' | 'right';
+    onClose?: (ctx: ContextMenu) => void;
+    contentClassName?: string;
+    preventClose?: (e?: Event) => boolean;
+}
+export declare class ContextMenu extends React.Component<ContextMenuProps, ContextMenuState> {
+    static instance: any;
+    debounceCalculatePosition: DebouncedFunc<(menu: HTMLElement) => void>;
+    static getInstance(): Promise<any>;
+    state: ContextMenuState;
+    menuRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    originInstance: this | null;
+    prevInfo: {
+        x: number;
+        y: number;
+    } | null;
+    unmount: boolean;
+    menuEntered: boolean;
+    constructor(props: ContextMenuProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    openContextMenus(info: {
+        x: number;
+        y: number;
+    }, menus: Array<MenuItem>, onClose?: (ctx: ContextMenu) => void, options?: {
+        contentClassName?: string;
+        preventClose?: (e?: Event) => boolean;
+    }): void;
+    close(e?: Event): void;
+    handleOutClick(e: Event): void;
+    handleClick(item: MenuItem): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleMouseEnter(item: MenuItem): void;
+    handleMouseLeave(item: MenuItem): void;
+    resizeObserver: null | ResizeObserver;
+    handleEnter(menu: HTMLElement): void;
+    handleEntered(menu: HTMLElement): void;
+    autoCalculatePosition(menu: HTMLElement): void;
+    handleSelfContextMenu(e: React.MouseEvent): void;
+    renderMenus(menus: Array<MenuItem | MenuDivider>): React.JSX.Element[];
+    render(): React.JSX.Element;
+}
+export declare const ThemedContextMenu: {
+    new (props: Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<ContextMenuProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof ContextMenu>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof ContextMenu, {}> & {
+    ComposedComponent: typeof ContextMenu;
+};
+export default ThemedContextMenu;
+export declare function openContextMenus(info: Event | {
+    x: number;
+    y: number;
+}, menus: Array<MenuItem | MenuDivider> | (() => React.ReactNode), onClose?: (ctx: ContextMenu) => void, options?: {
+    contentClassName?: string;
+    preventClose?: (e?: Event) => boolean;
+}): Promise<any>;
+export declare function closeContextMenus(): Promise<any>;

package/lib/components/ContextMenu.js

@@ -0,0 +1,327 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var amisCore = require('amis-core');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Transition = require('react-transition-group/Transition');
+var debounce = require('lodash/debounce');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var _a;
+// import {createRoot} from 'react-dom/client';
+var fadeStyles = (_a = {},
+    _a[Transition.ENTERING] = 'in',
+    _a[Transition.ENTERED] = 'in',
+    _a[Transition.EXITING] = 'out',
+    _a);
+var ContextMenu = /** @class */ (function (_super) {
+    tslib.__extends(ContextMenu, _super);
+    function ContextMenu(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false,
+            menus: [],
+            x: -99999,
+            y: -99999,
+            cursorX: -99999,
+            cursorY: -99999
+        };
+        _this.menuRef = React__default["default"].createRef();
+        _this.contentRef = React__default["default"].createRef();
+        _this.unmount = false;
+        _this.menuEntered = false;
+        _this.resizeObserver = null;
+        _this.originInstance = ContextMenu.instance;
+        ContextMenu.instance = _this;
+        _this.debounceCalculatePosition = debounce__default["default"](_this.autoCalculatePosition.bind(_this), 200);
+        return _this;
+    }
+    ContextMenu.getInstance = function () {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var container, div;
+            return tslib.__generator(this, function (_a) {
+                if (!ContextMenu.instance || ContextMenu.instance.unmount) {
+                    container = document.body;
+                    div = document.createElement('div');
+                    container.appendChild(div);
+                    // if (parseInt(version.split('.')[0], 10) >= 18) {
+                    //   const root = createRoot(div);
+                    //   await new Promise<void>(resolve =>
+                    //     root.render(<ThemedContextMenu ref={() => resolve()} />)
+                    //   );
+                    // } else {
+                    ReactDOM.render(_J$X_(ThemedContextMenu, null), div);
+                    // }
+                }
+                return [2 /*return*/, ContextMenu.instance];
+            });
+        });
+    };
+    ContextMenu.prototype.componentDidMount = function () {
+        document.body.addEventListener('click', this.handleOutClick, true);
+        document.addEventListener('keydown', this.handleKeyDown);
+    };
+    ContextMenu.prototype.componentWillUnmount = function () {
+        this.unmount = true;
+        this.debounceCalculatePosition.cancel();
+        ContextMenu.instance = this.originInstance;
+        document.body.removeEventListener('click', this.handleOutClick, true);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        // @ts-ignore
+        delete this.originInstance;
+    };
+    ContextMenu.prototype.openContextMenus = function (info, menus, onClose, options) {
+        var _this = this;
+        if (this.state.isOpened) {
+            var _a = this.state, x = _a.x, y = _a.y;
+            var cursorX = x + (info.x - (this.prevInfo && this.prevInfo.x ? this.prevInfo.x : 0));
+            var cursorY = y + (info.y - (this.prevInfo && this.prevInfo.y ? this.prevInfo.y : 0));
+            // 避免 二次触发未进行智能定位 导致遮挡问题
+            this.setState({
+                x: cursorX,
+                y: cursorY,
+                cursorX: cursorX,
+                cursorY: cursorY,
+                menus: menus,
+                onClose: onClose,
+                contentClassName: options === null || options === void 0 ? void 0 : options.contentClassName,
+                preventClose: options === null || options === void 0 ? void 0 : options.preventClose
+            }, function () {
+                _this.handleEnter(_this.menuRef.current);
+            });
+        }
+        else {
+            this.setState({
+                isOpened: true,
+                x: info.x,
+                y: info.y,
+                cursorX: info.x,
+                cursorY: info.y,
+                menus: menus,
+                onClose: onClose,
+                contentClassName: options === null || options === void 0 ? void 0 : options.contentClassName,
+                preventClose: options === null || options === void 0 ? void 0 : options.preventClose
+            });
+        }
+        this.prevInfo = info;
+    };
+    ContextMenu.prototype.close = function (e) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        if ((_b = (_a = this.state).preventClose) === null || _b === void 0 ? void 0 : _b.call(_a, e)) {
+            return;
+        }
+        (_c = e === null || e === void 0 ? void 0 : e.preventDefault) === null || _c === void 0 ? void 0 : _c.call(e);
+        this.menuEntered = false;
+        (_d = this.resizeObserver) === null || _d === void 0 ? void 0 : _d.disconnect();
+        var onClose = this.state.onClose;
+        this.setState({
+            isOpened: false,
+            x: -99999,
+            y: -99999,
+            cursorX: -99999,
+            cursorY: -99999,
+            menus: [],
+            contentClassName: '',
+            preventClose: undefined
+        }, function () {
+            onClose === null || onClose === void 0 ? void 0 : onClose(_this);
+        });
+    };
+    ContextMenu.prototype.handleOutClick = function (e) {
+        if (!this.menuEntered ||
+            !e.target ||
+            !this.menuRef.current ||
+            this.menuRef.current.contains(e.target)) {
+            return;
+        }
+        if (this.state.isOpened) {
+            this.close(e);
+        }
+    };
+    ContextMenu.prototype.handleClick = function (item) {
+        var _this = this;
+        var onClose = this.state.onClose;
+        item.disabled ||
+            (Array.isArray(item.children) && item.children.length) ||
+            this.setState({
+                isOpened: false,
+                x: -99999,
+                y: -99999,
+                cursorX: -99999,
+                cursorY: -99999,
+                menus: []
+            }, function () {
+                var _a;
+                (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item, item.data);
+                onClose === null || onClose === void 0 ? void 0 : onClose(_this);
+            });
+    };
+    ContextMenu.prototype.handleKeyDown = function (e) {
+        if (e.keyCode === 27 && this.state.isOpened) {
+            this.close(e);
+        }
+    };
+    ContextMenu.prototype.handleMouseEnter = function (item) {
+        item.disabled || !item.onHighlight || item.onHighlight(true, item.data);
+    };
+    ContextMenu.prototype.handleMouseLeave = function (item) {
+        item.disabled || !item.onHighlight || item.onHighlight(false, item.data);
+    };
+    ContextMenu.prototype.handleEnter = function (menu) {
+        this.autoCalculatePosition(menu);
+    };
+    ContextMenu.prototype.handleEntered = function (menu) {
+        var _this = this;
+        this.menuEntered = true;
+        if (!this.contentRef.current || !window.ResizeObserver) {
+            return;
+        }
+        // 监听菜单大小变化，并自动重新计算位置
+        this.resizeObserver = new ResizeObserver(function (entries) {
+            entries.length && _this.debounceCalculatePosition(menu);
+        });
+        this.resizeObserver.observe(this.contentRef.current);
+    };
+    ContextMenu.prototype.autoCalculatePosition = function (menu) {
+        var lastChild = menu.lastChild;
+        // 因为 debounce 的原因，可能menu 已经被卸载了。
+        if (!(lastChild === null || lastChild === void 0 ? void 0 : lastChild.offsetWidth)) {
+            return;
+        }
+        // 智能定位，选择一个合适的对齐方式。
+        var info = amisCore.calculatePosition('asContextMenu', lastChild, menu.children[1], menu.children[0]);
+        var align = info.positionLeft + 300 < window.innerWidth ? 'right' : 'left';
+        this.setState({
+            x: info.positionLeft,
+            y: info.positionTop,
+            align: align
+        });
+    };
+    ContextMenu.prototype.handleSelfContextMenu = function (e) {
+        e.preventDefault();
+    };
+    ContextMenu.prototype.renderMenus = function (menus) {
+        var _this = this;
+        var cx = this.props.classnames;
+        return menus.map(function (item, index) {
+            if (item === '|') {
+                return _J$X_("li", { key: index, className: cx('ContextMenu-divider') });
+            }
+            var hasChildren = Array.isArray(item.children) && item.children.length;
+            return (_J$X_("li", { key: "".concat(item.label, "-").concat(index), className: cx('ContextMenu-item', item.className, {
+                    'has-child': hasChildren,
+                    'is-disabled': item.disabled,
+                    'is-active': item.selected
+                }) },
+                _J$X_("a", { onClick: _this.handleClick.bind(_this, item), onMouseEnter: _this.handleMouseEnter.bind(_this, item), onMouseLeave: _this.handleMouseLeave.bind(_this, item) },
+                    item.icon ? (_J$X_("span", { className: cx('ContextMenu-itemIcon', item.icon) })) : null,
+                    item.label,
+                    hasChildren ? _J$X_("i", { className: "fas fa-chevron-right" }) : null,
+                    item.selected ? _J$X_("i", { className: "fas fa-check" }) : null),
+                hasChildren ? (_J$X_("ul", { className: cx('ContextMenu-subList') }, _this.renderMenus(item.children))) : null));
+        });
+    };
+    ContextMenu.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className; _a.container; var cx = _a.classnames;
+        return (_J$X_(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, onEnter: this.handleEnter, in: this.state.isOpened, timeout: 500, onEntered: this.handleEntered }, function (status) { return (_J$X_("div", { ref: _this.menuRef, role: "contextmenu", className: cx('ContextMenu', {
+                'ContextMenu--left': _this.state.align === 'left'
+            }, className, _this.state.contentClassName), onContextMenu: _this.handleSelfContextMenu },
+            _J$X_("div", { className: cx("ContextMenu-overlay", fadeStyles[status]) }),
+            _J$X_("div", { className: cx("ContextMenu-cursor"), style: {
+                    left: "".concat(_this.state.cursorX, "px"),
+                    top: "".concat(_this.state.cursorY, "px")
+                } }),
+            _J$X_("div", { ref: _this.contentRef, style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") }, className: cx("ContextMenu-menu", fadeStyles[status]) }, typeof _this.state.menus === 'function' ? (_this.state.menus()) : (_J$X_("ul", { className: cx('ContextMenu-list') }, _this.renderMenus(_this.state.menus)))))); }));
+    };
+    ContextMenu.instance = null;
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Array, Function, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "openContextMenus", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Event]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "close", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Event]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "handleOutClick", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [KeyboardEvent]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "handleKeyDown", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [HTMLElement]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "handleEnter", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [HTMLElement]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "handleEntered", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [HTMLElement]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "autoCalculatePosition", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "handleSelfContextMenu", null);
+    return ContextMenu;
+}(React__default["default"].Component));
+var ThemedContextMenu = amisCore.themeable(ContextMenu);
+function openContextMenus(info, menus, onClose, options) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            return [2 /*return*/, ContextMenu.getInstance().then(function (instance) {
+                    return instance.openContextMenus(info, menus, onClose, options);
+                })];
+        });
+    });
+}
+function closeContextMenus() {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            return [2 /*return*/, ContextMenu.getInstance().then(function (instance) { return instance === null || instance === void 0 ? void 0 : instance.close(); })];
+        });
+    });
+}
+
+exports.ContextMenu = ContextMenu;
+exports.ThemedContextMenu = ThemedContextMenu;
+exports.closeContextMenus = closeContextMenus;
+exports["default"] = ThemedContextMenu;
+exports.openContextMenus = openContextMenus;