amis 2.0.0-rc.14 → 2.0.0-rc.15

package/esm/renderers/DropDownButton.d.ts

@@ -0,0 +1,114 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaClassName, SchemaIcon } from '../Schema';
+import { ActionSchema } from './Action';
+import { DividerSchema } from './Divider';
+import type { TooltipObject, Trigger } from 'amis-ui/lib/components/TooltipWrapper';
+export declare type DropdownButton = (ActionSchema & {
+    children?: Array<DropdownButton>;
+}) | DividerSchema | 'divider';
+/**
+ * 下拉按钮渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/dropdown-button
+ */
+export interface DropdownButtonSchema extends BaseSchema {
+    /**
+     * 指定为 DropDown Button 类型
+     */
+    type: 'dropdown-button';
+    /**
+     * 是否独占一行 `display: block`
+     */
+    block?: boolean;
+    /**
+     * 给 Button 配置 className。
+     */
+    btnClassName?: SchemaClassName;
+    /**
+     * 按钮集合，支持分组
+     */
+    buttons?: Array<DropdownButton>;
+    /**
+     * 按钮文字
+     */
+    label?: string;
+    /**
+     * 按钮级别，样式
+     */
+    level?: 'info' | 'success' | 'danger' | 'warning' | 'primary' | 'link';
+    /**
+     * 按钮提示文字，hover 时显示
+     */
+    /**
+     * 点击外部是否关闭
+     */
+    closeOnOutside?: boolean;
+    /**
+     * 点击内容是否关闭
+     */
+    closeOnClick?: boolean;
+    /**
+     * 按钮大小
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * 对齐方式
+     */
+    align?: 'left' | 'right';
+    /**
+     * 是否只显示图标。
+     */
+    iconOnly?: boolean;
+    /**
+     * 右侧图标
+     */
+    rightIcon?: SchemaIcon;
+    /**
+     * 触发条件，默认是 click
+     */
+    trigger?: 'click' | 'hover';
+    /**
+     * 是否显示下拉按钮
+     */
+    hideCaret?: boolean;
+    /**
+     * 菜单 CSS 样式
+     */
+    menuClassName?: string;
+}
+export interface DropDownButtonProps extends RendererProps, Omit<DropdownButtonSchema, 'type' | 'className'> {
+    disabledTip?: string | TooltipObject;
+    /**
+     * 按钮提示文字，hover focus 时显示
+     */
+    tooltip?: string | TooltipObject;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    tooltipContainer?: any;
+    tooltipTrigger?: Trigger | Array<Trigger>;
+    tooltipRootClose?: boolean;
+    defaultIsOpened?: boolean;
+    label?: any;
+    isActived?: boolean;
+    menuClassName?: string;
+}
+export interface DropDownButtonState {
+    isOpened: boolean;
+}
+export default class DropDownButton extends React.Component<DropDownButtonProps, DropDownButtonState> {
+    state: DropDownButtonState;
+    static defaultProps: Pick<DropDownButtonProps, 'placement' | 'tooltipTrigger' | 'tooltipRootClose'>;
+    target: any;
+    timer: ReturnType<typeof setTimeout>;
+    constructor(props: DropDownButtonProps);
+    componentDidMount(): void;
+    domRef(ref: any): void;
+    toogle(e: React.MouseEvent<any>): void;
+    open(): void;
+    close(): void;
+    keepOpen(): void;
+    renderButton(button: DropdownButton, index: number | string): React.ReactNode;
+    renderOuter(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class DropDownButtonRenderer extends DropDownButton {
+}

package/esm/renderers/DropDownButton.js

@@ -0,0 +1,151 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { generateIcon, isVisible, isDisabled, RootClose, noop, Overlay, PopOver, filter, Renderer } from 'amis-core';
+import { TooltipWrapper, Icon } from 'amis-ui';
+
+var DropDownButton = /** @class */ (function (_super) {
+    __extends(DropDownButton, _super);
+    function DropDownButton(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false
+        };
+        _this.open = _this.open.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this.toogle = _this.toogle.bind(_this);
+        _this.keepOpen = _this.keepOpen.bind(_this);
+        _this.domRef = _this.domRef.bind(_this);
+        return _this;
+    }
+    DropDownButton.prototype.componentDidMount = function () {
+        if (this.props.defaultIsOpened) {
+            this.setState({
+                isOpened: true
+            });
+        }
+    };
+    DropDownButton.prototype.domRef = function (ref) {
+        this.target = ref;
+    };
+    DropDownButton.prototype.toogle = function (e) {
+        e.preventDefault();
+        this.setState({
+            isOpened: !this.state.isOpened
+        });
+    };
+    DropDownButton.prototype.open = function () {
+        this.setState({
+            isOpened: true
+        });
+    };
+    DropDownButton.prototype.close = function () {
+        var _this = this;
+        this.timer = setTimeout(function () {
+            _this.setState({
+                isOpened: false
+            });
+        }, 200);
+    };
+    DropDownButton.prototype.keepOpen = function () {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+    };
+    DropDownButton.prototype.renderButton = function (button, index) {
+        var _a;
+        var _this = this;
+        var _b = this.props, render = _b.render, cx = _b.classnames, data = _b.data;
+        index = typeof index === 'number' ? index.toString() : index;
+        if (typeof button !== 'string' && Array.isArray(button === null || button === void 0 ? void 0 : button.children)) {
+            return (React.createElement("div", { key: index, className: cx('DropDown-menu') },
+                React.createElement("li", { key: "".concat(index, "/0"), className: cx('DropDown-groupTitle') },
+                    button.icon ? generateIcon(cx, button.icon, 'm-r-xs') : null,
+                    React.createElement("span", null, button.label)),
+                button.children.map(function (child, childIndex) {
+                    return _this.renderButton(child, "".concat(index, "/").concat(childIndex + 1));
+                })));
+        }
+        if (typeof button !== 'string' && !isVisible(button, data)) {
+            return null;
+        }
+        else if (button === 'divider' || button.type === 'divider') {
+            return React.createElement("li", { key: index, className: cx('DropDown-divider') });
+        }
+        else {
+            return (React.createElement("li", { key: index, className: cx('DropDown-button', (_a = {},
+                    _a['is-disabled'] = isDisabled(button, data),
+                    _a)) }, render("button/".concat(index), __assign(__assign({ type: 'button' }, button), { isMenuItem: true }))));
+        }
+    };
+    DropDownButton.prototype.renderOuter = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props; _b.render; var buttons = _b.buttons; _b.data; var popOverContainer = _b.popOverContainer, cx = _b.classnames, ns = _b.classPrefix, children = _b.children; _b.align; var closeOnClick = _b.closeOnClick, closeOnOutside = _b.closeOnOutside, menuClassName = _b.menuClassName;
+        var body = (React.createElement(RootClose, { disabled: !this.state.isOpened, onRootClose: closeOnOutside !== false ? this.close : noop }, function (ref) {
+            return (React.createElement("ul", { className: cx('DropDown-menu-root', 'DropDown-menu', menuClassName), onClick: closeOnClick ? _this.close : noop, onMouseEnter: _this.keepOpen, ref: ref }, children
+                ? children
+                : Array.isArray(buttons)
+                    ? buttons.map(function (button, index) {
+                        return _this.renderButton(button, index);
+                    })
+                    : null));
+        }));
+        if (popOverContainer) {
+            return (React.createElement(Overlay, { container: popOverContainer, target: function () { return _this.target; }, show: true },
+                React.createElement(PopOver, { overlay: true, onHide: this.close, classPrefix: ns, className: cx('DropDown-popover', menuClassName), style: { minWidth: (_a = this.target) === null || _a === void 0 ? void 0 : _a.offsetWidth } }, body)));
+        }
+        return body;
+    };
+    DropDownButton.prototype.render = function () {
+        var _a = this.props, tooltip = _a.tooltip, placement = _a.placement, tooltipContainer = _a.tooltipContainer, tooltipTrigger = _a.tooltipTrigger, tooltipRootClose = _a.tooltipRootClose, disabledTip = _a.disabledTip, block = _a.block, disabled = _a.disabled, btnDisabled = _a.btnDisabled, btnClassName = _a.btnClassName, size = _a.size, label = _a.label, level = _a.level, primary = _a.primary, className = _a.className, cx = _a.classnames, align = _a.align, iconOnly = _a.iconOnly, icon = _a.icon, rightIcon = _a.rightIcon, isActived = _a.isActived, trigger = _a.trigger, data = _a.data, hideCaret = _a.hideCaret;
+        var iconElement = generateIcon(cx, icon, 'm-r-xs');
+        var rightIconElement = generateIcon(cx, rightIcon, 'm-l-xs');
+        return (React.createElement("div", { className: cx('DropDown ', {
+                'DropDown--block': block,
+                'DropDown--alignRight': align === 'right',
+                'is-opened': this.state.isOpened,
+                'is-actived': isActived
+            }, className), onMouseEnter: trigger === 'hover' ? this.open : function () { }, onMouseLeave: trigger === 'hover' ? this.close : function () { }, ref: this.domRef },
+            React.createElement(TooltipWrapper, { placement: placement, tooltip: disabled ? disabledTip : tooltip, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose },
+                React.createElement("button", { onClick: this.toogle, disabled: disabled || btnDisabled, className: cx('Button', btnClassName, typeof level === 'undefined'
+                        ? 'Button--default'
+                        : level
+                            ? "Button--".concat(level)
+                            : '', {
+                        'Button--block': block,
+                        'Button--primary': primary,
+                        'Button--iconOnly': iconOnly
+                    }, size ? "Button--".concat(size) : '') },
+                    iconElement,
+                    typeof label === 'string' ? filter(label, data) : label,
+                    rightIconElement,
+                    !hideCaret ? (React.createElement("span", { className: cx('DropDown-caret') },
+                        React.createElement(Icon, { icon: "caret", className: "icon" }))) : null)),
+            this.state.isOpened ? this.renderOuter() : null));
+    };
+    DropDownButton.defaultProps = {
+        placement: 'top',
+        tooltipTrigger: ['hover', 'focus'],
+        tooltipRootClose: false
+    };
+    return DropDownButton;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(DropDownButtonRenderer, _super);
+    function DropDownButtonRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DropDownButtonRenderer = __decorate([
+        Renderer({
+            type: 'dropdown-button'
+        })
+    ], DropDownButtonRenderer);
+    return DropDownButtonRenderer;
+})(DropDownButton));
+
+export { DropDownButton as default };

package/esm/renderers/Each.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { Schema } from 'amis-core';
+import { BaseSchema, SchemaCollection } from '../Schema';
+/**
+ * Each 循环功能渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/each
+ */
+export interface EachSchema extends BaseSchema {
+    /**
+     * 指定为each展示类型
+     */
+    type: 'each';
+    /**
+     * 关联字段名
+     */
+    name?: string;
+    /**
+     * 关联字段名 支持数据映射
+     */
+    source?: string;
+    items?: SchemaCollection;
+    placeholder?: string;
+}
+export interface EachProps extends RendererProps {
+    name: string;
+    items: Schema;
+}
+export default class Each extends React.Component<EachProps> {
+    static propsList: Array<string>;
+    static defaultProps: {
+        className: string;
+        placeholder: string;
+    };
+    render(): JSX.Element;
+}
+export declare class EachRenderer extends Each {
+}

package/esm/renderers/Each.js

@@ -0,0 +1,59 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { getPropValue, resolveVariableAndFilter, isObject, createObject, Renderer } from 'amis-core';
+
+var Each = /** @class */ (function (_super) {
+    __extends(Each, _super);
+    function Each() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Each.prototype.render = function () {
+        var _a = this.props, data = _a.data, name = _a.name, className = _a.className, render = _a.render, items = _a.items, placeholder = _a.placeholder, cx = _a.classnames, __ = _a.translate;
+        var value = getPropValue(this.props, function (props) {
+            return props.source && !props.name
+                ? resolveVariableAndFilter(props.source, props.data, '| raw')
+                : undefined;
+        });
+        var arr = isObject(value)
+            ? Object.keys(value).map(function (key) { return ({
+                key: key,
+                value: value[key]
+            }); })
+            : Array.isArray(value)
+                ? value
+                : [];
+        return (React.createElement("div", { className: cx('Each', className) }, Array.isArray(arr) && arr.length && items ? (arr.map(function (item, index) {
+            var _a;
+            return render("item/".concat(index), items, {
+                data: createObject(data, isObject(item)
+                    ? __assign({ index: index }, item) : (_a = {}, _a[name] = item, _a.item = item, _a.index = index, _a)),
+                key: index
+            });
+        })) : (React.createElement("div", { className: cx('Each-placeholder') }, render('placeholder', __(placeholder))))));
+    };
+    Each.propsList = ['name', 'items', 'value'];
+    Each.defaultProps = {
+        className: '',
+        placeholder: 'placeholder.noData'
+    };
+    return Each;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(EachRenderer, _super);
+    function EachRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    EachRenderer = __decorate([
+        Renderer({
+            type: 'each'
+        })
+    ], EachRenderer);
+    return EachRenderer;
+})(Each));
+
+export { Each as default };

package/esm/renderers/Flex.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @file 简化版 Flex 布局，主要用于不熟悉 CSS 的开发者
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaCollection } from '../Schema';
+/**
+ * Flex 布局
+ * 文档：https://baidu.gitee.io/amis/docs/components/flex
+ */
+export interface FlexSchema extends BaseSchema {
+    /**
+     * 指定为 flex 展示类型
+     */
+    type: 'flex';
+    /**
+     * 水平分布
+     */
+    justify?: 'start' | 'flex-start' | 'center' | 'end' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
+    /**
+     * 垂直布局
+     */
+    alignItems?: 'stretch' | 'start' | 'flex-start' | 'flex-end' | 'end' | 'center' | 'baseline';
+    /**
+     * 多行情况下的垂直分布
+     */
+    alignContent?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+    /**
+     * 方向
+     */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * 每个 flex 的设置
+     */
+    items: SchemaCollection;
+    /**
+     * 自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+}
+export interface FlexProps extends RendererProps, Omit<FlexSchema, 'type' | 'className'> {
+}
+export default class Flex extends React.Component<FlexProps, object> {
+    static defaultProps: Partial<FlexProps>;
+    constructor(props: FlexProps);
+    render(): JSX.Element;
+}
+export interface FlexItemSchema extends BaseSchema {
+    /**
+     * 功能和 wrapper 类似，主要是给 flex 子节点用的
+     */
+    type: 'flex-item';
+    /**
+     * 内容
+     */
+    body: SchemaCollection;
+    /**
+     * 自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+}
+export interface FlexItemProps extends RendererProps, Omit<FlexItemSchema, 'className'> {
+    children?: JSX.Element | ((props?: any) => JSX.Element);
+}
+export declare class FlexItem extends React.Component<FlexItemProps, object> {
+    static propsList: Array<string>;
+    renderBody(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class FlexRenderer extends Flex {
+}
+export declare class FlexItemRenderer extends FlexItem {
+}

package/esm/renderers/Flex.js

@@ -0,0 +1,83 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer } from 'amis-core';
+
+/**
+ * @file 简化版 Flex 布局，主要用于不熟悉 CSS 的开发者
+ */
+var Flex = /** @class */ (function (_super) {
+    __extends(Flex, _super);
+    function Flex(props) {
+        return _super.call(this, props) || this;
+    }
+    Flex.prototype.render = function () {
+        var _a = this.props, items = _a.items, direction = _a.direction, justify = _a.justify, alignItems = _a.alignItems, alignContent = _a.alignContent, style = _a.style, className = _a.className, render = _a.render, disabled = _a.disabled;
+        var flexStyle = __assign({ display: 'flex', flexDirection: direction, justifyContent: justify, alignItems: alignItems, alignContent: alignContent }, style);
+        return (React.createElement("div", { style: flexStyle, className: className }, (Array.isArray(items) ? items : items ? [items] : []).map(function (item, key) {
+            return render("flexItem/".concat(key), item, {
+                key: "flexItem/".concat(key),
+                disabled: disabled
+            });
+        })));
+    };
+    Flex.defaultProps = {
+        direction: 'row',
+        justify: 'center',
+        alignItems: 'center',
+        alignContent: 'center'
+    };
+    return Flex;
+}(React.Component));
+var FlexItem = /** @class */ (function (_super) {
+    __extends(FlexItem, _super);
+    function FlexItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FlexItem.prototype.renderBody = function () {
+        var _a = this.props, children = _a.children, body = _a.body, render = _a.render, disabled = _a.disabled;
+        return children
+            ? typeof children === 'function'
+                ? children(this.props)
+                : children
+            : body
+                ? render('body', body, { disabled: disabled })
+                : null;
+    };
+    FlexItem.prototype.render = function () {
+        var _a = this.props, className = _a.className; _a.size; _a.classnames; var style = _a.style;
+        return (React.createElement("div", { className: className, style: style }, this.renderBody()));
+    };
+    FlexItem.propsList = ['body', 'className', 'children'];
+    return FlexItem;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(FlexRenderer, _super);
+    function FlexRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FlexRenderer = __decorate([
+        Renderer({
+            type: 'flex'
+        })
+    ], FlexRenderer);
+    return FlexRenderer;
+})(Flex));
+/** @class */ ((function (_super) {
+    __extends(FlexItemRenderer, _super);
+    function FlexItemRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FlexItemRenderer = __decorate([
+        Renderer({
+            type: 'flex-item'
+        })
+    ], FlexItemRenderer);
+    return FlexItemRenderer;
+})(FlexItem));
+
+export { FlexItem, Flex as default };

package/esm/renderers/Form/ButtonGroupSelect.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { OptionsControlProps, FormOptionsControl } from 'amis-core';
+import type { Option } from 'amis-core';
+import { ActionObject } from 'amis-core';
+import { ButtonGroupSchema } from '../ButtonGroup';
+/**
+ * 按钮组控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/button-group
+ */
+export interface ButtonGroupControlSchema extends Omit<ButtonGroupSchema, 'type'>, Omit<FormOptionsControl, 'size'> {
+    type: 'button-group-select';
+}
+export interface ButtonGroupProps extends OptionsControlProps, Omit<ButtonGroupControlSchema, 'size' | 'source' | 'type' | 'className' | 'descriptionClassName' | 'inputClassName' | 'btnClassName'> {
+    options: Array<Option>;
+}
+export default class ButtonGroupControl extends React.Component<ButtonGroupProps, any> {
+    static defaultProps: Partial<ButtonGroupProps>;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    handleToggle(option: Option): void;
+    reload(): void;
+    render(props?: Readonly<ButtonGroupProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): JSX.Element;
+}
+export declare class ButtonGroupControlRenderer extends ButtonGroupControl {
+}

package/esm/renderers/Form/ButtonGroupSelect.js

@@ -0,0 +1,114 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { getLevelFromClassName, autobind, OptionsControl } from 'amis-core';
+
+var ButtonGroupControl = /** @class */ (function (_super) {
+    __extends(ButtonGroupControl, _super);
+    function ButtonGroupControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ButtonGroupControl.prototype.doAction = function (action, data, throwErrors) {
+        var _a = this.props, resetValue = _a.resetValue, onChange = _a.onChange;
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        if (actionType === 'clear') {
+            onChange('');
+        }
+        else if (actionType === 'reset') {
+            onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
+        }
+    };
+    ButtonGroupControl.prototype.handleToggle = function (option) {
+        var _a = this.props, onToggle = _a.onToggle; _a.multiple; _a.autoFill; _a.onBulkChange;
+        onToggle(option);
+    };
+    ButtonGroupControl.prototype.reload = function () {
+        var reload = this.props.reloadOptions;
+        reload && reload();
+    };
+    ButtonGroupControl.prototype.render = function (props) {
+        var _a;
+        var _this = this;
+        if (props === void 0) { props = this.props; }
+        var render = props.render, ns = props.classPrefix, cx = props.classnames, className = props.className, disabled = props.disabled, options = props.options; props.value; var labelField = props.labelField, placeholder = props.placeholder, btnClassName = props.btnClassName, btnActiveClassName = props.btnActiveClassName, selectedOptions = props.selectedOptions, buttons = props.buttons, size = props.size, block = props.block, vertical = props.vertical, tiled = props.tiled, __ = props.translate;
+        var body = [];
+        var btnLevel = props.btnLevel;
+        var btnActiveLevel = props.btnActiveLevel;
+        btnClassName && (btnLevel = getLevelFromClassName(btnClassName));
+        btnActiveClassName &&
+            (btnActiveLevel = getLevelFromClassName(btnActiveClassName));
+        if (options && options.length) {
+            body = options.map(function (option, key) {
+                var active = !!~selectedOptions.indexOf(option);
+                return render("option/".concat(key), {
+                    label: option[labelField || 'label'],
+                    icon: option.icon,
+                    size: option.size || size,
+                    type: 'button',
+                    block: block
+                }, {
+                    key: key,
+                    active: active,
+                    level: (active ? btnActiveLevel : '') || option.level || btnLevel,
+                    className: cx(option.className, btnClassName),
+                    disabled: option.disabled || disabled,
+                    onClick: function (e) {
+                        if (disabled) {
+                            return;
+                        }
+                        _this.handleToggle(option);
+                        e.preventDefault(); // 禁止 onAction 触发
+                    }
+                });
+            });
+        }
+        else if (Array.isArray(buttons)) {
+            body = buttons.map(function (button, key) {
+                return render("button/".concat(key), __assign({ size: size, block: block, activeLevel: btnActiveLevel, level: btnLevel, disabled: disabled }, button), {
+                    key: key,
+                    className: cx(button.className, btnClassName)
+                });
+            });
+        }
+        return (React.createElement("div", { className: cx("ButtonGroup", (_a = {
+                    'ButtonGroup--block': block,
+                    'ButtonGroup--vertical': vertical,
+                    'ButtonGroup--tiled': tiled
+                },
+                _a["ButtonGroup--".concat(size)] = size,
+                _a), className) }, body.length ? (body) : (React.createElement("span", { className: "".concat(ns, "ButtonGroup-placeholder") }, __(placeholder)))));
+    };
+    ButtonGroupControl.defaultProps = {
+        btnLevel: 'default',
+        btnActiveLevel: 'primary',
+        clearable: false,
+        vertical: false
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ButtonGroupControl.prototype, "handleToggle", null);
+    return ButtonGroupControl;
+}(React.Component));
+var ButtonGroupControlRenderer = /** @class */ (function (_super) {
+    __extends(ButtonGroupControlRenderer, _super);
+    function ButtonGroupControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ButtonGroupControlRenderer = __decorate([
+        OptionsControl({
+            type: 'button-group-select',
+            sizeMutable: false,
+            strictMode: false
+        })
+    ], ButtonGroupControlRenderer);
+    return ButtonGroupControlRenderer;
+}(ButtonGroupControl));
+
+export { ButtonGroupControlRenderer, ButtonGroupControl as default };