@riil-frontend/component-topology 6.0.0-alpha.30 → 6.0.0-alpha.31

package/es/core/editor/components/EditorPlugin.js

@@ -4,13 +4,14 @@ import CustomIconPlugin from "./CustomIconPlugin";
 import SaveLoading from "./plugins/SaveLoading";
 import MultipleResourceSelectPlugin from "./plugins/MultipleResourceSelectPlugin";
 import GroupAddResourceDrawerPlugin from "./GroupAddResourceDrawerPlugin";
+import MetricPollingPlugin from "../../viewer/components/plugins/MetricPollingPlugin";
 export default function TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, CustomIconPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, CustomIconPlugin, MetricPollingPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

package/es/core/editor/components/Sidebar/Sidebar.js

@@ -26,7 +26,8 @@ function Sidebar(props) {
         resourceTabActiveKey: null
       });
     };
-  }, []);
+  }, []); // 通过url参数打开对应面板
+
   useEffect(function () {
     var _topo$viewProps$urlPa;
 

package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -45,7 +45,7 @@ export default function CanvasPanel(props) {
     topo.historyManager.beginTransaction();
     displayConfigDispatchers.update({
       canvasTheme: theme
-    }); // 设置资源标注
+    }); // 设置资源/链路标注样式
 
     var _topo$store$getModelS = topo.store.getModelState('displayConfig'),
         nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle,
@@ -65,8 +65,7 @@ export default function CanvasPanel(props) {
     displayConfigDispatchers.update({
       nodeLabelStyle: globalNodeLabelStyle,
       defaultEdgeLabelStyle: globalEdgeTagStyle
-    }); // 设置链路标注
-
+    });
     topo.historyManager.endTransaction();
   };
 

package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js

@@ -23,6 +23,7 @@ export default function HtImagePalette(props) {
       viewRef.current = htTopo.createImagePalette(container, {
         icons: icons
       });
+      console.error(viewRef.current);
     } catch (error) {
       rlog.error('初始化资源面板失败', error);
     } // 注销组件

package/es/core/editor/components/Toolbar/buttons.js

@@ -26,13 +26,14 @@ export default function getButtons(isNetworkTopo) {
   FontSizeWidget, // 字号
   FontStyleButton, // 文字样式
   FontColorButton, // 文字颜色
-  Divider, BoxBackgroundButton, // 框背景
-  Divider, EdgeColorButton, // 线条颜色
+  Divider, // BoxBackgroundButton, // 框背景
+  // Divider,
+  EdgeColorButton, // 线条颜色
   EdgeTypeButton, // 线形
   Divider, NodeImageButton, // 替换图片
   NodeSizeButton, // 图片尺寸
   Divider, Layout, // 布局方式
-  NodeAlignWidget, // 对齐方式
-  SearchWidget // 搜索
+  NodeAlignWidget // 对齐方式
+  // SearchWidget, // 搜索
   ]);
 }

package/es/core/editor/components/Toolbar/hooks/useFontStyleSetting.js

@@ -9,21 +9,38 @@ function useFontStyleSetting(props) {
   var buttonEnabled = true; // 全局配置
 
   var _topo$store$useModel = topo.store.useModel('displayConfig'),
-      nodeLabelStyle = _topo$store$useModel[0].nodeLabelStyle,
+      displayConfigState = _topo$store$useModel[0],
       displayConfigDispatchers = _topo$store$useModel[1];
 
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+
+  var setGlobalTagStyle = function setGlobalTagStyle(styleData) {
+    var globalNodeLabelStyle = _extends({}, nodeLabelStyle, styleData);
+
+    topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+
+    var globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, styleData);
+
+    topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+    displayConfigDispatchers.update({
+      nodeLabelStyle: globalNodeLabelStyle,
+      defaultEdgeLabelStyle: globalEdgeTagStyle
+    });
+  };
+
   var setStyle = function setStyle(styleData) {
-    // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
+    topo.historyManager.beginTransaction(); // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
+
     if (!selectionElements.length) {
-      topo.getHtTopo().setGlobalNodeLabelStyle(styleData);
-      displayConfigDispatchers.update({
-        nodeLabelStyle: _extends({}, nodeLabelStyle, styleData)
-      });
+      setGlobalTagStyle(styleData);
     } else {
       selectionElements.forEach(function (element) {
         if (isNode(element)) {} else if (isGroup(element)) {} else if (isText(element)) {} else if (isLayer(element)) {}
       });
     }
+
+    topo.historyManager.endTransaction();
   };
 
   return {

package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js

@@ -1,7 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useEffect, useState } from 'react';
-import { getEdgesBySelection, setEdgesAndChildren, loopEdgesAndChildren } from "../../../../utils/edgeTypeStyleUtil";
+import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import Content from "./Content";
@@ -31,10 +32,16 @@ function EdgeColorButton(props) {
 
   var selection = topo.selectionManager.useHtSelection();
 
+  var loopEdges = function loopEdges(edges, operateEdgeFn) {
+    edges.forEach(function (edge) {
+      operateEdgeFn(edge);
+    });
+  };
+
   var getLines = function getLines(list) {
     // eslint-disable-next-line prefer-const
     var arr = [];
-    loopEdgesAndChildren(topo, list, function (edge) {
+    loopEdges(list, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
         arr.push(edge);
@@ -49,7 +56,7 @@ function EdgeColorButton(props) {
       var list = getLines(edges);
       setLineWidth(0); // eslint-disable-next-line eqeqeq
 
-      if (selection.length == 1 && selection[0].getAttrObject().type == 'line') {
+      if (selection.length == 1 && selection[0].a('type') == 'line') {
         setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
       }
 
@@ -57,14 +64,20 @@ function EdgeColorButton(props) {
     }
   }, [selection, graphLoaded]);
 
-  var colorOnChange = function colorOnChange(color, type) {
+  var colorOnChange = function colorOnChange(colors, type) {
     // eslint-disable-next-line eqeqeq
     if (type == 'select') topo.historyManager.beginTransaction();
     var edges = getEdgesBySelection(topo);
-    loopEdgesAndChildren(topo, edges, function (edge) {
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.color', color.hex);
+        var color = colors.hex;
+        edge.s('edge.color', color);
+        edge.s('edge.dash.color', color);
+        var style = edge.a('styles') || {};
+        edge.a('styles', _extends({}, style, {
+          color: color
+        }));
       }
     }); // eslint-disable-next-line eqeqeq
 
@@ -80,14 +93,21 @@ function EdgeColorButton(props) {
     topo.historyManager.endTransaction();
   };
 
-  var lineSizeChange = function lineSizeChange(value) {
+  var lineSizeChange = function lineSizeChange(width) {
     var edges = getEdgesBySelection(topo);
-    setEdgesAndChildren(topo, edges, function (edge) {
+    topo.historyManager.beginTransaction();
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.width', value); // 设置
+        edge.s('edge.dash.width', width);
+        edge.s('edge.width', width);
+        var style = edge.a('styles') || {};
+        edge.a('styles', _extends({}, style, {
+          width: width
+        }));
       }
     });
+    topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -67,8 +67,23 @@ function EdgeTypeButton(props) {
         edge.s('icons', _extends({}, edge.s('icons')));
         edge.addStyleIcon(value, EDGE_END_POINT_TYPE_MAP[value]);
       } else if (name === 'lineMold') {
+        // 修改实线虚线
         edge.a('lineMode', value);
         htTopo.setElementStyle(edge, LINE_MOLD_MAP[value]);
+
+        if (value !== 'solid') {
+          var edgeWidth = edge.s('edge.width');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.width', edgeWidth);
+          }
+
+          var color = edge.s('edge.color');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.color', color);
+          }
+        }
       }
     });
   };

package/es/core/editor/components/Toolbar/widgets/FontColorButton.js

@@ -5,6 +5,7 @@ import WidgetBox from "./WidgetBox";
 import ColorPanel from "../../../../../components/ColorPanel";
 import FontColorRange from "../../../../../components/ColorPanel/components/FontColorRange";
 import styles from "./FontColorButton.module.scss";
+import useFontStyleSetting from "../hooks/useFontStyleSetting";
 
 function FontFamilySelect(props) {
   var value = props.value,
@@ -15,6 +16,9 @@ function FontFamilySelect(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
+  var fontStyleSetting = useFontStyleSetting({
+    topo: topo
+  });
   console.log(topo, 'topo这里需要处理颜色改变的事情');
 
   var backOpacityChange = function backOpacityChange(value) {

package/es/core/editor/components/Toolbar/widgets/FontStyleButton.js

@@ -1,41 +1,38 @@
 import React, { useState, useEffect } from 'react';
+import { isText } from "../../../../../utils/htElementUtils";
+import fontStyleUtil from "../../settings/common/text/fontStyleUtil";
+import useFontStyleSetting from "../hooks/useFontStyleSetting";
 import DropdownMenu from "./components/DropdownMenu";
 import WidgetBox from "./WidgetBox";
+var items = [{
+  key: 'bold',
+  label: '加粗',
+  icon: 'bold'
+}, {
+  key: 'italic',
+  label: '斜体',
+  icon: 'Italics'
+}, {
+  key: 'underline',
+  label: '下划线',
+  icon: 'Underline'
+}];
 
-function FontFamilySelect(props) {
-  var value = props.value,
-      disabled = props.disabled,
-      onChange = props.onChange;
-  var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
-  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value,
-    valueRender: function valueRender() {
-      return icon;
-    },
-    onChange: onChange
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      key: item
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontFamily: item
-      }
-    }, item));
-  }));
+function getTextFontStyle(textElement) {
+  var underline = textElement.s('text.decoration') === 'underline';
+  var fontStyle = fontStyleUtil.toMap(textElement.s('text.font'));
+  return {
+    underline: underline,
+    bold: fontStyle.bold,
+    italic: fontStyle.italic
+  };
 }
 
 function FontStyleButton(props) {
   var topo = props.topo,
       showLabel = props.showLabel;
 
-  var _useState = useState('微软雅黑'),
+  var _useState = useState(['bold']),
       value = _useState[0],
       setValue = _useState[1];
 
@@ -44,19 +41,71 @@ function FontStyleButton(props) {
       setDisabled = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionManager.useHtSelection();
+  var fontStyleSetting = useFontStyleSetting({
+    topo: topo
+  });
   useEffect(function () {
     setDisabled(false);
+    var fontObj = {};
+
+    if (selection.length === 1) {
+      var element = selection[0];
+
+      if (isText(element)) {
+        fontObj = getTextFontStyle(element);
+      }
+    }
+
+    var newValue = Object.keys(fontObj).reduce(function (result, key) {
+      if (fontObj[key]) {
+        return [].concat(result, [key]);
+      }
+
+      return result;
+    }, []);
+    setValue(newValue);
   }, [selection]);
+  /**
+   * 
+   * @param {Array} selectedKeys 
+   */
+
+  var handleChange = function handleChange(selectedKeys) {
+    setValue(selectedKeys);
+    var style = {
+      fontBold: selectedKeys.includes('bold')
+    };
+    fontStyleSetting.setStyle(style);
+  };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6587\u5B57\u6837\u5F0F",
     tooltip: "\u6587\u5B57\u6837\u5F0F",
     showLabel: showLabel
-  }, /*#__PURE__*/React.createElement(FontFamilySelect, {
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
     value: value,
-    disabled: disabled,
-    onChange: setValue
-  }));
+    valueRender: function valueRender() {
+      return /*#__PURE__*/React.createElement("img", {
+        src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
+        alt: ""
+      });
+    },
+    multiple: true,
+    onChange: handleChange
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+      key: item.key
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/toolbar/" + item.icon + "/Normal.svg",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", null, item.label)));
+  })));
 }
 
 export default FontStyleButton;

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js

@@ -1,4 +1,4 @@
-import _Input from "@alifd/next/es/input";
+import _NumberPicker from "@alifd/next/es/number-picker";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useState, useEffect } from 'react';
@@ -51,27 +51,13 @@ function NodeAlignWidget(props) {
   };
 
   var leftInputChange = function leftInputChange(v) {
-    if (v * 1 < 0) {
-      setLeftInputVal(0);
-    } else if (v * 1 > 10000) {
-      setLeftInputVal(10000);
-    } else {
-      setLeftInputVal(v);
-    }
-
-    setSpace('v', leftInputVal);
+    setLeftInputVal(v);
+    setSpace('h', v);
   };
 
   var rightInputChange = function rightInputChange(v) {
-    if (v * 1 < 0) {
-      setRightInputVal(0);
-    } else if (v * 1 > 10000) {
-      setRightInputVal(10000);
-    } else {
-      setRightInputVal(v);
-    }
-
-    setSpace('h', rightInputVal);
+    setRightInputVal(v);
+    setSpace('v', v);
   };
 
   useEffect(function () {
@@ -82,10 +68,17 @@ function NodeAlignWidget(props) {
       });
       setDisabled(nodes.length <= 1);
       getClickType('none');
+      setLeftInputVal();
+      setRightInputVal();
     }
   }, [graphLoaded, selection]);
 
   var getClickType = function getClickType(type) {
+    if (leftInputVal || rightInputVal) {
+      setLeftInputVal();
+      setRightInputVal();
+    }
+
     setLeftDisable(true);
     setRightDisable(true);
 
@@ -116,23 +109,25 @@ function NodeAlignWidget(props) {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlignSetting, {
     topo: topo,
     getClickType: getClickType
-  }), /*#__PURE__*/React.createElement(_Input, {
+  }), /*#__PURE__*/React.createElement(_NumberPicker, {
     disabled: leftDisable,
     size: "small",
+    hasTrigger: false,
     placeholder: "\u591A\u4E2A\u503C",
     className: styles.leftInput,
     value: leftInputVal,
-    htmlType: "number",
-    maxLength: 5,
+    min: 0,
+    max: 10000,
     onChange: leftInputChange
-  }), /*#__PURE__*/React.createElement(_Input, {
+  }), /*#__PURE__*/React.createElement(_NumberPicker, {
     disabled: rightDisable,
     size: "small",
+    hasTrigger: false,
     placeholder: "\u591A\u4E2A\u503C",
     className: styles.rightInput,
     value: rightInputVal,
-    htmlType: "number",
-    maxLength: 5,
+    min: 0,
+    max: 10000,
     onChange: rightInputChange
   }))));
 }

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss

@@ -1,12 +1,28 @@
 .leftInput{
-  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
-  background-position: right center;
-  width: 100px;
+  width: 100px !important;
   margin-right: 10px;
   margin-left: 5px;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_disable.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+  }
 }
 .rightInput{
-  width: 100px;
-  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
-  background-position: right center;
+  width: 100px !important;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距_disable.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+  }
 }

package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js

@@ -1,12 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from "react"; // import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+import React, { useEffect, useState } from 'react'; // import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
 
 import BatchSetNodeSize from "../../../settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize";
 import NodeSizeInput from "../../../settings/common/NodeSizeInput/NodeSizeInput";
 import useSettingRuntimeState from "../../../settings/useSettingRuntimeState";
 import WidgetBox from "../WidgetBox";
-import BoxBackgroundSetting from "./BoxBackgroundSetting";
 import styles from "./NodeSizeButton.module.scss";
 import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
 /**
@@ -29,10 +28,15 @@ function NodeSizeButton(props) {
       setSize = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionManager.useSelection();
   var settingRuntimeState = useSettingRuntimeState();
   useEffect(function () {
-    var nodes = selection.filter(function (ele) {
+    var elements = selection.map(function (item) {
+      return item.id;
+    }).map(function (id) {
+      return topo.getDataModel().getDataById(id);
+    });
+    var nodes = elements.filter(function (ele) {
       return isGroup(ele) || isNode(ele);
     });
 
@@ -57,12 +61,11 @@ function NodeSizeButton(props) {
   var _onChange = function onChange(prop) {
     var name = prop.name,
         value = prop.value;
-    var gv = topo.view.topoClient.getGraphView();
     var element = topo.getSelectionModel().getFirstData();
 
-    if (name === "width") {
+    if (name === 'width') {
       element.setWidth(value);
-    } else if (name === "height") {
+    } else if (name === 'height') {
       element.setHeight(value);
     }
   };
@@ -106,12 +109,12 @@ function NodeSizeButton(props) {
       topo.historyManager.beginTransaction();
 
       _onChange({
-        name: "width",
+        name: 'width',
         value: size.width
       });
 
       _onChange({
-        name: "height",
+        name: 'height',
         value: size.height
       });
 

package/es/core/editor/components/Toolbar/widgets/components/DropdownButton.js

@@ -14,21 +14,34 @@ function DropdownButton(props) {
       children = props.children;
 
   var _useState = useState(false),
-      active = _useState[0],
-      setActive = _useState[1];
+      visible = _useState[0],
+      setVisible = _useState[1];
 
   var button = /*#__PURE__*/React.createElement(ButtonBox, {
-    active: active,
+    active: visible,
     disabled: disabled,
     showArrow: showArrow
   }, trigger);
+
+  var renderContent = function renderContent() {
+    if (!visible) {
+      return /*#__PURE__*/React.createElement("div", null);
+    }
+
+    if (showContainer) {
+      return /*#__PURE__*/React.createElement(PopupCard, null, children);
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/React.createElement(_Dropdown, {
-    visible: active,
+    visible: visible,
     disabled: disabled,
     trigger: button,
     triggerType: "click",
-    onVisibleChange: setActive
-  }, !showContainer ? children : /*#__PURE__*/React.createElement(PopupCard, null, children));
+    onVisibleChange: setVisible
+  }, renderContent());
 }
 
 DropdownButton.propTypes = {

package/es/core/editor/components/Toolbar/widgets/components/DropdownMenu.js

@@ -6,18 +6,21 @@ import DropdownButton from "./DropdownButton";
 function DropdownMenu(props) {
   var value = props.value,
       children = props.children,
+      multiple = props.multiple,
       onChange = props.onChange,
       valueRender = props.valueRender;
   var selectedKeys = Array.isArray(value) ? value : [value];
   var valueDisplay = valueRender ? valueRender(value) : value;
+  var selectMode = multiple ? 'multiple' : 'single';
+  var menu = /*#__PURE__*/React.createElement(_Menu, {
+    selectMode: selectMode,
+    selectedKeys: selectedKeys,
+    onSelect: onChange
+  }, children);
   return /*#__PURE__*/React.createElement(DropdownButton, {
     trigger: valueDisplay,
     showContainer: false
-  }, /*#__PURE__*/React.createElement(_Menu, {
-    selectMode: "single",
-    selectedKeys: selectedKeys,
-    onSelect: onChange
-  }, children));
+  }, multiple ? /*#__PURE__*/React.createElement("div", null, menu) : menu);
 }
 
 DropdownButton.propTypes = {