amis-rev-ui 6.13.0

package/esm/components/DiffEditor.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { EditorBaseProps } from './Editor';
+export interface DiffEditorProps extends EditorBaseProps {
+    originValue?: string;
+}
+export default class DiffEditor extends React.Component<DiffEditorProps> {
+    editor: any;
+    monaco: any;
+    originalEditor: any;
+    modifiedEditor: any;
+    toDispose: Array<Function>;
+    domRef: React.RefObject<any>;
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    prevHeight: number;
+    updateContainerSize(editor: any, monaco: any): void;
+    editorFactory(containerElement: any, monaco: any, options: any): any;
+    handleModifiedEditorChange(e: any): void;
+    editorDidMount(editor: any, monaco: any): void;
+    render(): React.JSX.Element;
+}

package/esm/components/DiffEditor.js

@@ -0,0 +1,119 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __rest, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import MonacoEditor from './Editor.js';
+import { autobind } from 'amis-rev-core';
+
+var DiffEditor = /** @class */ (function (_super) {
+    __extends(DiffEditor, _super);
+    function DiffEditor() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.toDispose = [];
+        _this.domRef = React__default.createRef();
+        _this.prevHeight = 0;
+        return _this;
+    }
+    DiffEditor.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        var _c = this.props, value = _c.value, originValue = _c.originValue;
+        if (this.originalEditor && originValue !== prevProps.originValue) {
+            this.originalEditor.getModel().setValue(originValue || '');
+        }
+        if (this.modifiedEditor && value !== prevProps.value) {
+            var editorValue = this.modifiedEditor.getModel().getValue();
+            editorValue !== value &&
+                this.modifiedEditor.getModel().setValue(value || '');
+        }
+        if (this.props.disabled !== prevProps.disabled && this.modifiedEditor) {
+            (_b = (_a = this.modifiedEditor).updateOptions) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                readOnly: this.props.disabled
+            });
+        }
+    };
+    DiffEditor.prototype.componentWillUnmount = function () {
+        this.toDispose.forEach(function (fn) { return fn(); });
+    };
+    DiffEditor.prototype.updateContainerSize = function (editor, monaco) {
+        var _a, _b;
+        var dom = (_a = this.domRef.current) === null || _a === void 0 ? void 0 : _a.getDom();
+        if (!dom) {
+            return;
+        }
+        var lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
+        var lineCount = ((_b = editor.getModel()) === null || _b === void 0 ? void 0 : _b.getLineCount()) || 1;
+        var height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
+        if (this.prevHeight !== height && dom.parentElement) {
+            this.prevHeight = height;
+            dom.parentElement.style.height = "".concat(height, "px");
+            editor.layout();
+        }
+    };
+    DiffEditor.prototype.editorFactory = function (containerElement, monaco, options) {
+        if (this.props.editorFactory) {
+            return this.props.editorFactory(containerElement, monaco, options);
+        }
+        return monaco.editor.createDiffEditor(containerElement, options);
+    };
+    DiffEditor.prototype.handleModifiedEditorChange = function (e) {
+        var onChange = this.props.onChange;
+        var value = this.modifiedEditor.getModel().getValue();
+        value !== this.props.value && (onChange === null || onChange === void 0 ? void 0 : onChange(value, e));
+    };
+    DiffEditor.prototype.editorDidMount = function (editor, monaco) {
+        var _this = this;
+        var _a = this.props, value = _a.value, originValue = _a.originValue, language = _a.language, onFocus = _a.onFocus, onBlur = _a.onBlur, editorDidMount = _a.editorDidMount;
+        editorDidMount === null || editorDidMount === void 0 ? void 0 : editorDidMount(editor, monaco);
+        this.monaco = monaco;
+        this.editor = editor;
+        this.modifiedEditor = editor.getModifiedEditor();
+        this.originalEditor = editor.getOriginalEditor();
+        onFocus &&
+            this.toDispose.push(this.modifiedEditor.onDidFocusEditorWidget(onFocus).dispose);
+        onBlur &&
+            this.toDispose.push(this.modifiedEditor.onDidBlurEditorWidget(onBlur).dispose);
+        this.toDispose.push(this.modifiedEditor.onDidChangeModelDecorations(function () {
+            _this.updateContainerSize(_this.modifiedEditor, monaco); // typing
+            requestAnimationFrame(_this.updateContainerSize.bind(_this, _this.modifiedEditor, monaco)); // folding
+        }).dispose);
+        this.toDispose.push(this.modifiedEditor.onDidChangeModelContent(this.handleModifiedEditorChange).dispose);
+        this.editor.setModel({
+            original: this.monaco.editor.createModel(originValue || '', language),
+            modified: this.monaco.editor.createModel(value, language)
+        });
+    };
+    DiffEditor.prototype.render = function () {
+        var _a = this.props; _a.value; _a.originValue; _a.options; var rest = __rest(_a, ["value", "originValue", "options"]);
+        return (React__default.createElement(MonacoEditor, __assign({}, rest, { ref: this.domRef, editorDidMount: this.editorDidMount, editorFactory: this.editorFactory, isDiffEditor: true })));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], DiffEditor.prototype, "updateContainerSize", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], DiffEditor.prototype, "editorFactory", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], DiffEditor.prototype, "handleModifiedEditorChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], DiffEditor.prototype, "editorDidMount", null);
+    return DiffEditor;
+}(React__default.Component));
+
+export { DiffEditor as default };

package/esm/components/DndContainer.js

@@ -0,0 +1,25 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import React__default from 'react';
+import Draggable from 'react-draggable';
+import { localeable, themeable } from 'amis-rev-core';
+
+/**
+ * @file DndContainer
+ * @desc 可拖拽容器
+ */
+var DndContainer = function (props) {
+    var className = props.className, cx = props.classnames, children = props.children, axis = props.axis, position = props.position, defaultPosition = props.defaultPosition, bounds = props.bounds, grid = props.grid, handle = props.handle, cancel = props.cancel, draggable = props.draggable, scale = props.scale, enableUserSelect = props.enableUserSelect, nodeRef = props.nodeRef, onDrag = props.onDrag, onStart = props.onStart, onStop = props.onStop;
+    return (React__default.createElement(Draggable, { axis: axis, position: position, defaultPosition: defaultPosition, bounds: bounds, grid: grid, handle: handle, cancel: cancel, disabled: !draggable, scale: scale, enableUserSelectHack: !enableUserSelect, nodeRef: nodeRef, defaultClassName: cx(className), defaultClassNameDragging: cx('DndContainer--dragging'), defaultClassNameDragged: cx('DndContainer--dragged'), onStart: onStart, onDrag: onDrag, onStop: onStop }, children));
+};
+DndContainer.defaultProps = {
+    axis: 'both',
+    scale: 1,
+    enableUserSelect: false
+};
+var DndContainer$1 = localeable(themeable(DndContainer));
+
+export { DndContainer$1 as default };

package/esm/components/Drawer.js

@@ -0,0 +1,272 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import Transition, { ENTERING, ENTERED, EXITED } from 'react-transition-group/Transition';
+import Portal from 'react-overlays/Portal';
+import { Icon } from './icons.js';
+import cx from 'classnames';
+import { addModal, current, removeModal } from './ModalManager.js';
+import { getScrollbarWidth, autobind, themeable } from 'amis-rev-core';
+import { getContainerWithFullscreen } from './Modal.js';
+
+/**
+ * @file Drawer
+ * @description
+ * @author fex
+ */
+var _a;
+var fadeStyles = (_a = {},
+    _a[ENTERING] = 'in',
+    _a[ENTERED] = 'in',
+    _a);
+var Drawer = /** @class */ (function (_super) {
+    __extends(Drawer, _super);
+    function Drawer() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.isRootClosed = false;
+        _this.resizer = React__default.createRef();
+        _this.resizeCoord = 0;
+        _this.contentRef = function (ref) { return (_this.contentDom = ref); };
+        _this.handleEnter = function () {
+            document.body.classList.add("is-modalOpened");
+            if (window.innerWidth - document.documentElement.clientWidth > 0 ||
+                document.body.scrollHeight > document.body.clientHeight) {
+                var scrollbarWidth = getScrollbarWidth();
+                if (scrollbarWidth) {
+                    document.body.style.width = "calc(100% - ".concat(scrollbarWidth, "px)");
+                }
+            }
+        };
+        _this.handleEntered = function () {
+            var onEntered = _this.props.onEntered;
+            document.body.addEventListener('mousedown', _this.handleRootMouseDownCapture, true);
+            document.body.addEventListener('mouseup', _this.handleRootMouseUpCapture, true);
+            document.body.addEventListener('mouseup', _this.handleRootMouseUp);
+            onEntered && onEntered();
+        };
+        _this.handleExited = function () {
+            var _a, _b;
+            var onExited = _this.props.onExited;
+            document.activeElement && ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a));
+            document.body.removeEventListener('mouseup', _this.handleRootMouseUp);
+            document.body.removeEventListener('mouseup', _this.handleRootMouseUpCapture, true);
+            document.body.removeEventListener('mousedown', _this.handleRootMouseDownCapture, true);
+            onExited && onExited();
+            setTimeout(function () {
+                if (!document.querySelector('.amis-dialog-widget')) {
+                    document.body.classList.remove("is-modalOpened");
+                    document.body.style.width = '';
+                }
+            }, 200);
+        };
+        _this.modalRef = function (ref) {
+            _this.modalDom = ref;
+            if (ref) {
+                addModal(_this);
+                ref.classList.add("".concat(_this.props.classPrefix, "Modal--").concat(current(), "th"));
+            }
+            else {
+                removeModal(_this);
+            }
+        };
+        return _this;
+    }
+    Drawer.prototype.componentDidMount = function () {
+        if (this.props.show) {
+            this.handleEntered();
+        }
+    };
+    Drawer.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        // jest 里面没有触发 entered 导致后续的逻辑错误，
+        // 所以直接 300 ms 后触发
+        if (typeof jest !== 'undefined' &&
+            prevProps.show !== this.props.show &&
+            this.props.show) {
+            setTimeout(function () {
+                _this.handleEntered();
+            }, 300);
+        }
+    };
+    Drawer.prototype.componentWillUnmount = function () {
+        if (this.props.show) {
+            this.handleExited();
+        }
+    };
+    Drawer.prototype.handleRootMouseDownCapture = function (e) {
+        var target = e.target;
+        var _a = this.props, closeOnOutside = _a.closeOnOutside, ns = _a.classPrefix, mobileUI = _a.mobileUI;
+        var isLeftButton = (e.button === 1 && window.event !== null) || e.button === 0;
+        this.isRootClosed = !!(isLeftButton &&
+            closeOnOutside &&
+            target &&
+            this.modalDom &&
+            ((!mobileUI &&
+                !this.modalDom.contains(target) &&
+                !target.closest('[role=dialog]')) ||
+                (target.matches(".".concat(ns, "Drawer-overlay")) &&
+                    target.parentElement === this.modalDom))); // 干脆过滤掉来自弹框里面的点击
+    };
+    Drawer.prototype.handleRootMouseUpCapture = function (e) {
+        // mousedown 的时候不在弹窗里面，则不需要判断了
+        if (!this.isRootClosed) {
+            return;
+        }
+        // 再判断 mouseup 的时候是不是在弹窗里面
+        this.handleRootMouseDownCapture(e);
+    };
+    Drawer.prototype.handleRootMouseUp = function (e) {
+        var onHide = this.props.onHide;
+        this.isRootClosed && !e.defaultPrevented && onHide(e);
+    };
+    Drawer.prototype.getDrawerStyle = function () {
+        var _a = this.props, width = _a.width, height = _a.height, position = _a.position;
+        var offsetStyle = {};
+        if ((position === 'left' || position === 'right') && width !== undefined) {
+            offsetStyle.width = width;
+        }
+        else if ((position === 'top' || position === 'bottom') &&
+            height !== undefined) {
+            offsetStyle.height = height;
+        }
+        return offsetStyle;
+    };
+    Drawer.prototype.resizeMouseDown = function (e) {
+        var _a = this.props, position = _a.position; _a.classPrefix; var onDragging = _a.onDragging;
+        onDragging && onDragging(true);
+        var drawer = this.contentDom;
+        var resizer = this.resizer.current;
+        var drawerWidth = getComputedStyle(drawer).width;
+        var drawerHeight = getComputedStyle(drawer).height;
+        this.resizeCoord =
+            (position === 'left' &&
+                e.clientX -
+                    resizer.offsetWidth -
+                    parseInt(drawerWidth.substring(0, drawerWidth.length - 2))) ||
+                (position === 'right' &&
+                    document.body.offsetWidth -
+                        e.clientX -
+                        resizer.offsetWidth -
+                        parseInt(drawerWidth.substring(0, drawerWidth.length - 2))) ||
+                (position === 'top' &&
+                    e.clientY -
+                        resizer.offsetHeight -
+                        parseInt(drawerHeight.substring(0, drawerHeight.length - 2))) ||
+                (position === 'bottom' &&
+                    document.body.offsetHeight -
+                        e.clientY -
+                        resizer.offsetHeight -
+                        parseInt(drawerHeight.substring(0, drawerHeight.length - 2))) ||
+                0;
+        document.body.addEventListener('mousemove', this.bindResize);
+        document.body.addEventListener('mouseup', this.removeResize);
+    };
+    Drawer.prototype.bindResize = function (e) {
+        var position = this.props.position;
+        var maxWH = 'calc(100% - 50px)';
+        var drawer = this.contentDom;
+        var drawerStyle = drawer.style;
+        var wh = (position === 'left' && e.clientX) ||
+            (position === 'right' && document.body.offsetWidth - e.clientX) ||
+            (position === 'top' && e.clientY) ||
+            (position === 'bottom' && document.body.offsetHeight - e.clientY) ||
+            0;
+        wh = wh - this.resizeCoord + 'px';
+        if (position === 'left' || position === 'right') {
+            drawerStyle.maxWidth = maxWH;
+            drawerStyle.width = wh;
+        }
+        if (position === 'top' || position === 'bottom') {
+            drawerStyle.maxHeight = maxWH;
+            drawerStyle.height = wh;
+        }
+    };
+    Drawer.prototype.removeResize = function () {
+        var onDragging = this.props.onDragging;
+        onDragging && onDragging(false);
+        document.body.removeEventListener('mousemove', this.bindResize);
+        document.body.removeEventListener('mouseup', this.removeResize);
+    };
+    Drawer.prototype.renderResizeCtrl = function () {
+        var cx = this.props.classnames;
+        return (React__default.createElement("div", { className: cx('Drawer-resizeCtrl'), ref: this.resizer, onMouseDown: this.resizeMouseDown },
+            React__default.createElement("div", { className: cx('Drawer-resizeIcon') }, "\u00B7\u00B7\u00B7")));
+    };
+    Drawer.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, ns = _a.classPrefix, className = _a.className, children = _a.children, container = _a.container, show = _a.show, showCloseButton = _a.showCloseButton, position = _a.position, size = _a.size, onHide = _a.onHide, disabled = _a.disabled, overlay = _a.overlay, bodyClassName = _a.bodyClassName, resizable = _a.resizable, drawerClassName = _a.drawerClassName, drawerMaskClassName = _a.drawerMaskClassName;
+        var bodyStyle = this.getDrawerStyle();
+        return (React__default.createElement(Portal, { container: getContainerWithFullscreen(container) },
+            React__default.createElement(Transition, { mountOnEnter: true, unmountOnExit: true, appear: true, in: show, timeout: 500, onEnter: this.handleEnter, onExited: this.handleExited, onEntered: this.handleEntered }, function (status) {
+                var _a;
+                if (status === ENTERING) {
+                    // force reflow
+                    // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
+                    // 否则看不到动画。
+                    _this.contentDom.offsetWidth;
+                }
+                return (React__default.createElement("div", { ref: _this.modalRef, role: "dialog", className: cx("amis-dialog-widget ".concat(ns, "Drawer"), (_a = {},
+                        _a["".concat(ns, "Drawer--").concat(position)] = position,
+                        _a["".concat(ns, "Drawer--").concat(size)] = size,
+                        _a["".concat(ns, "Drawer--noOverlay")] = !overlay,
+                        _a), className) },
+                    overlay ? (React__default.createElement("div", { className: cx("".concat(ns, "Drawer-overlay"), fadeStyles[status], drawerMaskClassName) })) : null,
+                    React__default.createElement("div", { ref: _this.contentRef, style: bodyStyle, className: cx("".concat(ns, "Drawer-content"), bodyClassName, fadeStyles[status], drawerClassName) },
+                        show && showCloseButton ? (React__default.createElement("a", { onClick: disabled ? undefined : onHide, className: "".concat(ns, "Drawer-close") },
+                            React__default.createElement(Icon, { icon: "close", className: "icon", iconContent: "Drawer-close" }))) : null,
+                        status === EXITED ? null : children,
+                        resizable ? _this.renderResizeCtrl() : null)));
+            })));
+    };
+    Drawer.defaultProps = {
+        container: document.body,
+        position: 'left',
+        size: 'md',
+        showCloseButton: true,
+        overlay: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [MouseEvent]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleRootMouseDownCapture", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [MouseEvent]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleRootMouseUpCapture", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [MouseEvent]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleRootMouseUp", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "resizeMouseDown", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "bindResize", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "removeResize", null);
+    return Drawer;
+}(React__default.Component));
+var Drawer$1 = themeable(Drawer);
+
+export { Drawer, Drawer$1 as default };

package/esm/components/DropDownSelection.js

@@ -0,0 +1,77 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends } from 'tslib';
+import React__default from 'react';
+import { filterTree, findDomCompat, findTree, noop, themeable, localeable } from 'amis-rev-core';
+import { BaseSelection } from './Selection.js';
+import { PopOverContainer } from './PopOverContainer.js';
+import GroupedSelection from './GroupedSelection.js';
+import TreeSelection from './TreeSelection.js';
+import ResultBox from './ResultBox.js';
+import { matchSorter } from 'match-sorter';
+import { Icon } from './icons.js';
+import SearchBox from './SearchBox.js';
+
+var DropDownSelection = /** @class */ (function (_super) {
+    __extends(DropDownSelection, _super);
+    function DropDownSelection(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            searchText: ''
+        };
+        _this.onSearch = _this.onSearch.bind(_this);
+        _this.filterOptions = _this.filterOptions.bind(_this);
+        return _this;
+    }
+    DropDownSelection.prototype.onSearch = function (text) {
+        this.setState({ searchText: text });
+    };
+    DropDownSelection.prototype.filterOptions = function (options) {
+        var _a = this.props, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, labelField = _a.labelField;
+        var text = this.state.searchText;
+        if (!text) {
+            return this.props.options;
+        }
+        return filterTree(options, function (option, key, level, paths) {
+            return !!((Array.isArray(option.children) && option.children.length) ||
+                !!matchSorter([option].concat(paths), text, {
+                    keys: [labelField || 'label', valueField || 'value'],
+                    threshold: matchSorter.rankings.CONTAINS
+                }).length);
+        }, 0, true);
+    };
+    // 选了值，还原options
+    DropDownSelection.prototype.onPopClose = function (onClose) {
+        this.setState({ searchText: '' });
+        onClose();
+    };
+    DropDownSelection.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, options = _a.options, onChange = _a.onChange, value = _a.value, cx = _a.classnames, disabled = _a.disabled, __ = _a.translate, searchable = _a.searchable, _b = _a.mode, mode = _b === void 0 ? 'list' : _b, _c = _a.valueField, valueField = _c === void 0 ? 'value' : _c, option2value = _a.option2value, loadingConfig = _a.loadingConfig, popOverContainer = _a.popOverContainer, testIdBuilder = _a.testIdBuilder, mobileUI = _a.mobileUI, ns = _a.classPrefix;
+        return (React__default.createElement(PopOverContainer, { mobileUI: mobileUI, overlayWidthField: "width", popOverContainer: popOverContainer || (function () { return findDomCompat(_this); }), popOverRender: function (_a) {
+                var onClose = _a.onClose;
+                return (React__default.createElement("div", null,
+                    searchable ? (React__default.createElement(SearchBox, { className: cx("".concat(ns, "DropDownSelection-searchbox")), mini: false, onSearch: _this.onSearch, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('searchbox') })) : null,
+                    mode === 'list' ? (React__default.createElement(GroupedSelection, { multiple: false, onClick: function () { return _this.onPopClose(onClose); }, options: _this.filterOptions(_this.props.options), value: value, option2value: option2value, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection'), onChange: function (value) {
+                            onChange(Array.isArray(value) ? value[0] : value);
+                        } })) : (React__default.createElement(TreeSelection, { className: 'is-scrollable', multiple: false, options: _this.filterOptions(_this.props.options), value: value, loadingConfig: loadingConfig, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection'), onChange: function (value) {
+                            _this.onPopClose(onClose);
+                            onChange(value[valueField]);
+                        } }))));
+            } }, function (_a) {
+            var onClick = _a.onClick, ref = _a.ref, isOpened = _a.isOpened;
+            return (React__default.createElement("div", { className: cx('DropDownSelection') },
+                React__default.createElement(ResultBox, { className: cx('DropDownSelection-input', isOpened ? 'is-active' : ''), ref: ref, allowInput: false, result: value
+                        ? findTree(options, function (item) { return item[valueField] === value; })
+                        : '', onResultChange: noop, onResultClick: onClick, placeholder: __('Condition.field_placeholder'), disabled: disabled, mobileUI: mobileUI, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('resultbox') }, !mobileUI ? (React__default.createElement("span", { className: cx('DropDownSelection-caret') },
+                    React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : null)));
+        }));
+    };
+    return DropDownSelection;
+}(BaseSelection));
+var DropDownSelection$1 = themeable(localeable(DropDownSelection));
+
+export { DropDownSelection$1 as default };

package/esm/components/DropdownContextMenus.js

@@ -0,0 +1,93 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __read, __awaiter, __generator } from 'tslib';
+import React__default from 'react';
+import { themeable } from 'amis-rev-core';
+import { Icon } from './icons.js';
+import { PopOverContainer } from './PopOverContainer.js';
+
+/**
+ * @file DropdownContextMenus
+ * @desc 下拉菜单组件,用于展示上下文菜单
+ */
+/**
+ * 下拉菜单组件
+ * 用于展示上下文菜单的弹出层组件
+ */
+function DropdownContextMenus(_a) {
+    var _this = this;
+    var context = _a.context, contextMenus = _a.contextMenus, cx = _a.classnames, onContextMenu = _a.onContextMenu, popOverContainer = _a.popOverContainer, getTargetElement = _a.getTargetElement, style = _a.style, className = _a.className;
+    var _b = __read(React__default.useState([]), 2), menus = _b[0], setMenus = _b[1];
+    var domRef = React__default.useRef();
+    /** 处理菜单项点击事件 */
+    var handleItemClick = React__default.useCallback(function (e) {
+        var _a;
+        e.preventDefault();
+        var index = e.currentTarget.getAttribute('data-index') || '';
+        var menu = menus[parseInt(index, 10)];
+        if (menu) {
+            (_a = menu.onClick) === null || _a === void 0 ? void 0 : _a.call(menu, context);
+            onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(context, menu);
+        }
+    }, [menus, onContextMenu, context]);
+    /** 渲染弹出层内容 */
+    var popOverRender = React__default.useMemo(function () {
+        return function (_a) {
+            var onClose = _a.onClose;
+            return (React__default.createElement("ul", { className: cx('ContextMenu-list'), onClick: onClose }, Array.isArray(menus) && menus.length ? (menus.map(function (menu, index) {
+                var _a;
+                return (React__default.createElement("li", { key: "".concat(index), className: cx('ContextMenu-item', menu.className, (_a = {},
+                        _a["is-".concat(menu.level)] = menu.level && menu.level !== 'normal',
+                        _a['is-disabled'] = menu.disabled,
+                        _a)) },
+                    React__default.createElement("a", { "data-index": index, onClick: handleItemClick },
+                        menu.icon ? (React__default.createElement("span", { className: cx('ContextMenu-itemIcon', menu.icon) })) : null,
+                        menu.label)));
+            })) : (React__default.createElement("li", { onClick: handleItemClick, className: cx('ContextMenu-item is-disabled is-placeholder') },
+                React__default.createElement("a", null, "\u65E0")))));
+        };
+    }, [menus]);
+    /** 处理弹出层打开事件 */
+    var handleOpen = React__default.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!(typeof contextMenus === 'function')) return [3 /*break*/, 2];
+                    _a = setMenus;
+                    return [4 /*yield*/, contextMenus(context)];
+                case 1:
+                    _a.apply(void 0, [_b.sent()]);
+                    return [3 /*break*/, 3];
+                case 2:
+                    setMenus(contextMenus);
+                    _b.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [context, contextMenus]);
+    /** 获取弹出层容器 */
+    var getContainer = React__default.useCallback(function () {
+        return typeof popOverContainer === 'function'
+            ? popOverContainer()
+            : popOverContainer || domRef.current;
+    }, [popOverContainer]);
+    return (React__default.createElement(PopOverContainer, { popOverRender: popOverRender, popOverContainer: getContainer, onOpen: handleOpen }, function (_a) {
+        var onClick = _a.onClick, targetRef = _a.ref, isOpened = _a.isOpened;
+        var filterRef = function (ref) {
+            domRef.current = ref;
+            if (ref && getTargetElement) {
+                ref = getTargetElement(ref);
+            }
+            targetRef(ref);
+        };
+        return (React__default.createElement("a", { ref: filterRef, className: cx('DropdownContextMenus', className, isOpened ? 'is-open' : ''), onClick: onClick, style: style },
+            React__default.createElement(Icon, { icon: "ellipsis-v" })));
+    }));
+}
+var DropdownContextMenus$1 = themeable(DropdownContextMenus);
+
+export { DropdownContextMenus, DropdownContextMenus$1 as default };