amis-rev-ui 6.13.0

package/esm/components/AnchorNav.js

@@ -0,0 +1,153 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { themeable, autobind, uncontrollable } from 'amis-rev-core';
+import find from 'lodash/find';
+
+/**
+ * @file AnchorNav
+ * @description 锚点导航
+ * @author hsm-lv
+ */
+var AnchorNavSectionComponent = /** @class */ (function (_super) {
+    __extends(AnchorNavSectionComponent, _super);
+    function AnchorNavSectionComponent() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.contentRef = function (ref) { return (_this.contentDom = ref); };
+        return _this;
+    }
+    AnchorNavSectionComponent.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, children = _a.children, className = _a.className, name = _a.name;
+        return (React__default.createElement("div", { ref: this.contentRef, className: cx('AnchorNav-section', className), "data-id": name + '' }, children));
+    };
+    return AnchorNavSectionComponent;
+}(React__default.PureComponent));
+var AnchorNavSection = themeable(AnchorNavSectionComponent);
+var AnchorNav = /** @class */ (function (_super) {
+    __extends(AnchorNav, _super);
+    function AnchorNav() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        // 滚动区域DOM
+        _this.contentDom = React__default.createRef();
+        _this.sections = [];
+        _this.fromSelect = false;
+        return _this;
+    }
+    AnchorNav.prototype.componentDidMount = function () {
+        var _this = this;
+        this.observer = new IntersectionObserver(this.scrollToNav);
+        this.sections.forEach(function (item) {
+            _this.observer.observe(item.element);
+        });
+        if (this.props.active) {
+            this.scrollToSection(this.props.active);
+        }
+    };
+    AnchorNav.prototype.componentWillUnmount = function () {
+        this.observer.disconnect();
+    };
+    AnchorNav.prototype.scrollToNav = function (entries) {
+        var _this = this;
+        entries.forEach(function (entry) {
+            var key = entry.target.getAttribute('data-id');
+            var currentSection = _this.sections.find(function (item) { return item.key === key; });
+            if (currentSection) {
+                currentSection.isIntersecting = entry.isIntersecting;
+            }
+        });
+        // 找到第一个可见的区域
+        var firstIntersectingSection = this.sections.find(function (item) { return item.isIntersecting; });
+        if (!this.fromSelect) {
+            firstIntersectingSection && this.fireSelect(firstIntersectingSection.key);
+        }
+        else {
+            // 滚动结束后，重置fromSelect状态
+            if (this.fromSelectTimer) {
+                clearTimeout(this.fromSelectTimer);
+            }
+            this.fromSelectTimer = setTimeout(function () {
+                _this.fromSelect = false;
+            }, 300);
+        }
+    };
+    AnchorNav.prototype.scrollToSection = function (key) {
+        var _a, _b;
+        this.fromSelect = true;
+        var node = (_a = find(this.sections, function (item) { return item.key === key; })) === null || _a === void 0 ? void 0 : _a.element;
+        (_b = node === null || node === void 0 ? void 0 : node.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(node, { behavior: 'smooth' });
+    };
+    AnchorNav.prototype.handleSelect = function (key) {
+        this.scrollToSection(key);
+        this.fireSelect(key);
+    };
+    AnchorNav.prototype.fireSelect = function (key) {
+        var onSelect = this.props.onSelect;
+        onSelect && onSelect(key);
+    };
+    AnchorNav.prototype.renderLink = function (link, index) {
+        var _this = this;
+        var _a;
+        if (!link) {
+            return;
+        }
+        var _b = this.props, cx = _b.classnames, activeProp = _b.active;
+        var _c = link.props, title = _c.title, name = _c.name;
+        var active = activeProp === undefined && index === 0 ? name : activeProp;
+        // 判断是否为子节点，子节点key为 <父节点索引>-<子节点索引>
+        var isChild = ((_a = link.key) === null || _a === void 0 ? void 0 : _a.split('-').length) >= 2;
+        return (React__default.createElement("li", { className: cx('AnchorNav-link', isChild ? 'AnchorNav-link-child' : '', String(active) === String(name) ? 'is-active' : ''), key: link.key, onClick: function () { return _this.handleSelect(name); } },
+            React__default.createElement("a", { title: title }, title)));
+    };
+    AnchorNav.prototype.renderSection = function (section, index) {
+        var _this = this;
+        if (!section) {
+            return;
+        }
+        var _a = this.props, activeProp = _a.active, classnames = _a.classnames;
+        var name = section.props.name;
+        var key = section.key;
+        var active = activeProp === undefined && index === 0 ? name : activeProp;
+        return React__default.cloneElement(section, __assign(__assign({}, section.props), { key: key, classnames: classnames, active: active, ref: function (props) {
+                if (props && !_this.sections.find(function (item) { return item.key === name; })) {
+                    // 收集每个段落的真实dom节点
+                    _this.sections.push({ key: name, element: props.ref.contentDom });
+                }
+            } }));
+    };
+    AnchorNav.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var _b = this.props, cx = _b.classnames, className = _b.className, style = _b.style, linkClassName = _b.linkClassName, sectionClassName = _b.sectionClassName, children = _b.children, direction = _b.direction;
+        if (!Array.isArray(children)) {
+            return null;
+        }
+        return (React__default.createElement("div", { className: cx('AnchorNav', (_a = {},
+                _a["AnchorNav--".concat(direction)] = direction,
+                _a), className), style: style },
+            React__default.createElement("ul", { className: cx('AnchorNav-link-wrap', linkClassName), role: "anchorlist" }, children.map(function (link, index) { return _this.renderLink(link, index); })),
+            React__default.createElement("div", { className: cx('AnchorNav-section-wrap', sectionClassName), ref: this.contentDom }, children.map(function (section, index) {
+                return _this.renderSection(section, index);
+            }))));
+    };
+    AnchorNav.defaultProps = {
+        linkClassName: '',
+        sectionClassName: '',
+        direction: 'vertical'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], AnchorNav.prototype, "scrollToNav", null);
+    return AnchorNav;
+}(React__default.Component));
+var ThemedAnchorNav = themeable(uncontrollable(AnchorNav, {
+    active: 'onSelect'
+}));
+
+export { AnchorNav, AnchorNavSection, ThemedAnchorNav as default };

package/esm/components/AnchorNavSection.d.ts

@@ -0,0 +1,2 @@
+import { AnchorNavSection } from './AnchorNav';
+export default AnchorNavSection;

package/esm/components/AnchorNavSection.js

@@ -0,0 +1,7 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { AnchorNavSection } from './AnchorNav.js';
+export { AnchorNavSection as default } from './AnchorNav.js';

package/esm/components/ArrayInput.js

@@ -0,0 +1,146 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { guid, findDomCompat, autobind, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import InputBox from './InputBox.js';
+import { Icon } from './icons.js';
+import Button from './Button.js';
+import Sortable from 'sortablejs';
+
+var ArrayInput = /** @class */ (function (_super) {
+    __extends(ArrayInput, _super);
+    function ArrayInput() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.id = guid();
+        return _this;
+    }
+    ArrayInput.prototype.handleItemOnChange = function (index, itemValue) {
+        var onChange = this.props.onChange;
+        var value = this.props.value;
+        var newValue = Array.isArray(value) ? value.concat() : [];
+        newValue.splice(index, 1, itemValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    ArrayInput.prototype.dragTipRef = function (ref) {
+        if (!this.dragTip && ref) {
+            this.initDragging();
+        }
+        else if (this.dragTip && !ref) {
+            this.destroyDragging();
+        }
+        this.dragTip = ref;
+    };
+    ArrayInput.prototype.handleAdd = function () {
+        var _a = this.props, value = _a.value, onChange = _a.onChange, itemInitalValue = _a.itemInitalValue;
+        var newValue = Array.isArray(value) ? value.concat() : [];
+        newValue.push(itemInitalValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    ArrayInput.prototype.handleRemove = function (e) {
+        var indx = parseInt(e.currentTarget.getAttribute('data-index'), 10);
+        var _a = this.props, value = _a.value, onChange = _a.onChange; _a.itemInitalValue;
+        var newValue = Array.isArray(value) ? value.concat() : [];
+        newValue.splice(indx, 1);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    ArrayInput.prototype.initDragging = function () {
+        var _this = this;
+        var onChange = this.props.onChange;
+        var ns = this.props.classPrefix;
+        var dom = findDomCompat(this);
+        this.sortable = new Sortable(dom.querySelector(".drag-group"), {
+            group: "array-input-".concat(this.id),
+            animation: 150,
+            handle: ".drag-bar",
+            ghostClass: "".concat(ns, "ArrayInput-item--dragging"),
+            onEnd: function (e) {
+                // 没有移动
+                if (e.newIndex === e.oldIndex) {
+                    return;
+                }
+                // 换回来
+                var parent = e.to;
+                if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                var value = _this.props.value;
+                if (!Array.isArray(value)) {
+                    return;
+                }
+                var newValue = value.concat();
+                newValue.splice(e.newIndex, 0, newValue.splice(e.oldIndex, 1)[0]);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
+        });
+    };
+    ArrayInput.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    ArrayInput.prototype.renderItem = function (value, index, collection) {
+        var _a = this.props, itemRender = _a.itemRender, disabled = _a.disabled, cx = _a.classnames, sortable = _a.sortable, removable = _a.removable, minLength = _a.minLength;
+        return (React__default.createElement("div", { className: cx('ArrayInput-item'), key: index },
+            sortable && collection.length > 1 && !disabled ? (React__default.createElement("a", { className: cx('ArrayInput-itemDrager drag-bar') },
+                React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
+            itemRender({
+                value: value,
+                onChange: this.handleItemOnChange.bind(this, index),
+                index: index,
+                disabled: disabled
+            }),
+            removable !== false &&
+                !disabled &&
+                (!minLength || collection.length > minLength) ? (React__default.createElement("a", { "data-index": index, className: cx('ArrayInput-itemRemove'), onClick: this.handleRemove },
+                React__default.createElement(Icon, { icon: "close", className: "icon" }))) : null));
+    };
+    ArrayInput.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, value = _a.value, placeholder = _a.placeholder, __ = _a.translate, maxLength = _a.maxLength, sortable = _a.sortable, sortTip = _a.sortTip, disabled = _a.disabled;
+        return (React__default.createElement("div", { className: cx('ArrayInput') },
+            Array.isArray(value) && value.length ? (React__default.createElement("div", { className: cx('ArrayInput-items drag-group') }, value.map(function (item, index) { return _this.renderItem(item, index, value); }))) : (React__default.createElement("div", { className: cx('ArrayInput-placeholder') }, __(placeholder))),
+            React__default.createElement("div", { className: cx('ArrayInput-toolbar', sortable && Array.isArray(value) && value.length > 1
+                    ? 'ArrayInput-toolbar--dnd'
+                    : '') },
+                !Array.isArray(value) || !maxLength || value.length < maxLength ? (React__default.createElement(Button, { className: cx('ArrayInput-addBtn'), onClick: this.handleAdd, level: "", disabled: disabled },
+                    React__default.createElement(Icon, { icon: "plus", className: "icon" }),
+                    React__default.createElement("span", null, __('add')))) : null,
+                sortable && Array.isArray(value) && value.length ? (React__default.createElement("span", { className: cx("ArrayInput-sortTip"), ref: this.dragTipRef }, Array.isArray(value) && value.length > 1 ? __(sortTip) : '')) : null)));
+    };
+    ArrayInput.defaultProps = {
+        placeholder: 'empty',
+        itemRender: function (_a) {
+            var value = _a.value, onChange = _a.onChange;
+            return React__default.createElement(InputBox, { value: value, onChange: onChange });
+        }
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ArrayInput.prototype, "dragTipRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ArrayInput.prototype, "handleAdd", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ArrayInput.prototype, "handleRemove", null);
+    return ArrayInput;
+}(React__default.Component));
+var ArrayInput$1 = themeable(localeable(uncontrollable(ArrayInput, {
+    value: 'onChange'
+})));
+
+export { ArrayInput, ArrayInput$1 as default };

package/esm/components/AsideNav.js

@@ -0,0 +1,133 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __assign, __rest } from 'tslib';
+import React__default from 'react';
+import { mapTree, themeable } from 'amis-rev-core';
+
+/**
+ * @file AsideNav
+ * @description 左侧导航。
+ * @author fex
+ */
+var AsideNav = /** @class */ (function (_super) {
+    __extends(AsideNav, _super);
+    function AsideNav(props) {
+        var _this = _super.call(this, props) || this;
+        var isOpen = props.isOpen;
+        var id = 1;
+        _this.state = {
+            navigations: mapTree(props.navigations, function (item) {
+                var isActive = typeof item.active === 'undefined'
+                    ? props.isActive(item)
+                    : item.active;
+                return __assign(__assign({}, item), { id: id++, active: isActive, open: isActive || isOpen(item) });
+            }, 1, true)
+        };
+        _this.renderLink = _this.renderLink.bind(_this);
+        _this.toggleExpand = _this.toggleExpand.bind(_this);
+        return _this;
+    }
+    AsideNav.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        var isOpen = prevProps.isOpen;
+        if (prevProps.navigations !== props.navigations ||
+            prevProps.isActive !== props.isActive) {
+            var id_1 = 1;
+            this.setState({
+                navigations: mapTree(props.navigations, function (item) {
+                    var isActive = typeof item.active === 'undefined'
+                        ? props.isActive(item)
+                        : item.active;
+                    return __assign(__assign({}, item), { id: id_1++, active: isActive, open: isActive || isOpen(item) });
+                }, 1, true)
+            });
+        }
+    };
+    AsideNav.prototype.toggleExpand = function (link, e) {
+        if (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        this.setState({
+            navigations: mapTree(this.state.navigations, function (item) { return (__assign(__assign({}, item), { open: link.id === item.id ? !item.open : item.open })); }, 1, true)
+        });
+    };
+    AsideNav.prototype.renderLink = function (link, key, props, depth) {
+        var _a;
+        if (props === void 0) { props = {}; }
+        if (depth === void 0) { depth = 1; }
+        var _b = this.props, renderLink = _b.renderLink; _b.isActive; var renderSubLinks = _b.renderSubLinks, cx = _b.classnames, others = __rest(_b, ["renderLink", "isActive", "renderSubLinks", "classnames"]);
+        var dom = renderLink(__assign({ link: link, active: link.active, open: link.open, toggleExpand: this.toggleExpand, depth: depth, classnames: cx, subHeader: key === 'subHeader' }, others));
+        if (!dom) {
+            return;
+        }
+        else if (key === 'subHeader') {
+            return React__default.cloneElement(dom, {
+                key: key
+            });
+        }
+        return (React__default.createElement("li", __assign({}, props, { key: key, className: cx("AsideNav-item", link.className, (_a = {},
+                _a["is-open"] = link.open,
+                _a["is-active"] = link.active,
+                _a)) }),
+            dom,
+            renderSubLinks(link, this.renderLink, depth, this.props)));
+    };
+    AsideNav.prototype.render = function () {
+        var _this = this;
+        var navigations = this.state.navigations;
+        var links = [];
+        var _a = this.props, className = _a.className, cx = _a.classnames;
+        navigations.forEach(function (navigation, index) {
+            if (!Array.isArray(navigation.children)) {
+                return;
+            }
+            if (navigation.prefix) {
+                var prefix = typeof navigation.prefix === 'function'
+                    ? navigation.prefix(_this.props)
+                    : navigation.prefix;
+                links.push(React__default.cloneElement(prefix, __assign(__assign({}, prefix.props), { key: "".concat(index, "-prefix") })));
+            }
+            navigation.label &&
+                links.push(React__default.createElement("li", { key: "".concat(index, "-label"), className: cx("AsideNav-label", navigation.className) },
+                    React__default.createElement("span", null, navigation.label)));
+            navigation.children.forEach(function (item, key) {
+                var link = _this.renderLink(item, "".concat(index, "-").concat(key));
+                link && links.push(link);
+            });
+            if (navigation.affix) {
+                var affix = typeof navigation.affix === 'function'
+                    ? navigation.affix(_this.props)
+                    : navigation.affix;
+                links.push(React__default.cloneElement(affix, __assign(__assign({}, affix.props), { key: "".concat(index, "-affix") })));
+            }
+        });
+        return (React__default.createElement("nav", { className: cx("AsideNav", className) },
+            React__default.createElement("ul", { className: cx("AsideNav-list") }, links)));
+    };
+    AsideNav.defaultProps = {
+        renderLink: function (item) {
+            var _a;
+            return (React__default.createElement("a", __assign({}, (_a = item.testIdBuilder) === null || _a === void 0 ? void 0 : _a.getTestId()), item.label));
+        },
+        renderSubLinks: function (link, renderLink, depth, _a) {
+            var cx = _a.classnames;
+            return link.children && link.children.length ? (React__default.createElement("ul", { className: cx('AsideNav-subList') },
+                link.label ? (React__default.createElement("li", { key: "subHeader", className: cx('AsideNav-subHeader') }, renderLink(__assign(__assign({}, link), { children: undefined }), 'subHeader', {}, depth))) : null,
+                link.children.map(function (link, key) {
+                    return renderLink(link, key, {}, depth + 1);
+                }))) : link.label && depth === 1 ? (React__default.createElement("div", { className: cx('AsideNav-tooltip') }, link.label)) : null;
+        },
+        isActive: function (link) { return link.open; },
+        isOpen: function (item) {
+            return item.children ? item.children.some(function (item) { return item.open; }) : false;
+        }
+    };
+    return AsideNav;
+}(React__default.Component));
+var AsideNav$1 = themeable(AsideNav);
+
+export { AsideNav, AsideNav$1 as default };

package/esm/components/AssociatedSelection.js

@@ -0,0 +1,107 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { BaseSelection } from './Selection.js';
+import { autobind, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import GroupedSelection from './GroupedSelection.js';
+import TableCheckboxes from './TableSelection.js';
+import ChainedCheckboxes from './ChainedSelection.js';
+import { Icon } from './icons.js';
+import Tree from './Tree.js';
+
+/**
+ * 关联多选框，仅支持两层关联选择。
+ * 左边先点选，然后右边再次点选。
+ * 可以满足，先从 tree 中选中一个元素，然后查出来一个列表再次勾选。
+ */
+var AssociatedSelection = /** @class */ (function (_super) {
+    __extends(AssociatedSelection, _super);
+    function AssociatedSelection() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            leftValue: _this.props.leftDefaultValue
+        };
+        return _this;
+    }
+    AssociatedSelection.prototype.componentDidMount = function () {
+        var leftValue = this.state.leftValue;
+        var _a = this.props, options = _a.options, onDeferLoad = _a.onDeferLoad, _b = _a.deferField, deferField = _b === void 0 ? 'defer' : _b;
+        if (leftValue) {
+            var selectdOption = BaseSelection.resolveSelected(leftValue, options, function (option) { return option.ref; });
+            if (selectdOption && onDeferLoad && selectdOption[deferField]) {
+                onDeferLoad(selectdOption);
+            }
+        }
+    };
+    AssociatedSelection.prototype.leftOption2Value = function (option) {
+        return option.value;
+    };
+    AssociatedSelection.prototype.handleLeftSelect = function (value) {
+        var _a = this.props, options = _a.options, onDeferLoad = _a.onDeferLoad, _b = _a.deferField, deferField = _b === void 0 ? 'defer' : _b;
+        this.setState({ leftValue: value });
+        var selectdOption = BaseSelection.resolveSelected(value, options, function (option) { return option.ref; });
+        if (selectdOption && onDeferLoad && selectdOption[deferField]) {
+            onDeferLoad(selectdOption);
+        }
+    };
+    AssociatedSelection.prototype.handleLeftDeferLoad = function (option) {
+        var _a = this.props, leftOptions = _a.leftOptions, onLeftDeferLoad = _a.onLeftDeferLoad, onDeferLoad = _a.onDeferLoad;
+        if (typeof onLeftDeferLoad === 'function') {
+            // TabsTransfer
+            return onLeftDeferLoad === null || onLeftDeferLoad === void 0 ? void 0 : onLeftDeferLoad(option, leftOptions);
+        }
+        else if (typeof onDeferLoad === 'function') {
+            // Select
+            return onDeferLoad === null || onDeferLoad === void 0 ? void 0 : onDeferLoad(option);
+        }
+    };
+    AssociatedSelection.prototype.handleRetry = function (option) {
+        var onDeferLoad = this.props.onDeferLoad;
+        onDeferLoad === null || onDeferLoad === void 0 ? void 0 : onDeferLoad(option);
+    };
+    AssociatedSelection.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, className = _a.className, leftOptions = _a.leftOptions, options = _a.options, option2value = _a.option2value, rightMode = _a.rightMode, onChange = _a.onChange, columns = _a.columns, value = _a.value, disabled = _a.disabled, leftMode = _a.leftMode, cellRender = _a.cellRender, multiple = _a.multiple, itemRender = _a.itemRender, labelField = _a.labelField, virtualThreshold = _a.virtualThreshold, itemHeight = _a.itemHeight, loadingConfig = _a.loadingConfig, checkAll = _a.checkAll, checkAllLabel = _a.checkAllLabel, _b = _a.deferField, deferField = _b === void 0 ? 'defer' : _b, testIdBuilder = _a.testIdBuilder;
+        var selectdOption = BaseSelection.resolveSelected(this.state.leftValue, options, function (option) { return option.ref; });
+        var __ = this.props.translate;
+        return (React__default.createElement("div", { className: cx('AssociatedSelection', className) },
+            React__default.createElement("div", { className: cx('AssociatedSelection-left') }, leftMode === 'tree' ? (React__default.createElement(Tree, { multiple: false, disabled: disabled, value: this.state.leftValue, options: leftOptions, onChange: this.handleLeftSelect, onDeferLoad: this.handleLeftDeferLoad, virtualThreshold: virtualThreshold, 
+                // itemHeight={itemHeight}
+                loadingConfig: loadingConfig, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('left-selection') })) : (React__default.createElement(GroupedSelection, { option2value: this.leftOption2Value, options: leftOptions, value: this.state.leftValue, disabled: disabled, onChange: this.handleLeftSelect, multiple: false, clearable: false, virtualThreshold: virtualThreshold, itemHeight: itemHeight, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('left-selection') }))),
+            React__default.createElement("div", { className: cx('AssociatedSelection-right') }, this.state.leftValue ? (selectdOption ? (selectdOption[deferField] && !selectdOption.loaded ? (React__default.createElement("div", { className: cx('AssociatedSelection-box') },
+                React__default.createElement("div", { className: cx('AssociatedSelection-reload', selectdOption.loading ? 'is-spin' : 'is-clickable'), onClick: selectdOption.loading
+                        ? undefined
+                        : this.handleRetry.bind(this, selectdOption) },
+                    React__default.createElement(Icon, { icon: "reload", className: "icon" })),
+                selectdOption.loading ? (React__default.createElement("p", null, __('loading'))) : (React__default.createElement("p", null, __('Transfer.refreshIcon'))))) : rightMode === 'table' ? (React__default.createElement(TableCheckboxes, { columns: columns, value: value, disabled: disabled, options: selectdOption.children || [], onChange: onChange, option2value: option2value, cellRender: cellRender, multiple: multiple, virtualThreshold: virtualThreshold, itemHeight: itemHeight, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('right-selection') })) : rightMode === 'tree' ? (React__default.createElement(Tree, { value: value, disabled: disabled, options: selectdOption.children || [], onChange: onChange, multiple: multiple, labelField: labelField, virtualThreshold: virtualThreshold, 
+                // itemHeight={itemHeight}
+                loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('right-selection') })) : rightMode === 'chained' ? (React__default.createElement(ChainedCheckboxes, { value: value, disabled: disabled, options: selectdOption.children || [], onChange: onChange, option2value: option2value, multiple: multiple, itemRender: itemRender, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('right-selection') })) : (React__default.createElement(GroupedSelection, { value: value, disabled: disabled, options: selectdOption.children || [], onChange: onChange, option2value: option2value, multiple: multiple, itemRender: itemRender, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('right-selection') }))) : (React__default.createElement("div", { className: cx('AssociatedSelection-box') }, __('Transfer.configError')))) : (React__default.createElement("div", { className: cx('AssociatedSelection-box') }, __('Transfer.selectFromLeft'))))));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], AssociatedSelection.prototype, "leftOption2Value", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], AssociatedSelection.prototype, "handleLeftSelect", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], AssociatedSelection.prototype, "handleLeftDeferLoad", null);
+    return AssociatedSelection;
+}(BaseSelection));
+var AssociatedCheckboxes = themeable(localeable(uncontrollable(AssociatedSelection, {
+    value: 'onChange'
+})));
+
+export { AssociatedSelection, AssociatedCheckboxes as default };