@aloudata/aloudata-design 0.4.8-beta.4 → 0.4.8-beta.6

package/dist/Button/index.js

@@ -17,9 +17,9 @@ import { Button as AntdButton } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 var iconPrefixCls = 'aldicon';
-var ICON_LARGE = 24;
-var ICON_MIDDLE = 20;
-var ICON_SMALL = 16;
+var ICON_LARGE = 20;
+var ICON_MIDDLE = 16;
+var ICON_SMALL = 14;
 export var btnPrefix = 'ald-btn';
 export function getButtonType(buttonType) {
   if (!['primary', 'secondary', 'dangerous', 'text', 'link'].includes(buttonType)) {
@@ -44,7 +44,7 @@ export function getDangerStatus(buttonType) {
   return false;
 }
 export function getButtonSizeClass(ButtonSize) {
-  return ButtonSize === 'middle' || undefined ? "".concat(btnPrefix, "-middle") : "".concat(btnPrefix, "-").concat(ButtonSize);
+  return ['small', 'large'].includes(ButtonSize) ? "".concat(btnPrefix, "-").concat(ButtonSize) : "".concat(btnPrefix, "-middle");
 }
 export function getIconSize(ButtonSize) {
   if (ButtonSize === 'large') {
@@ -80,7 +80,7 @@ export var setIcon = function setIcon(iconNode, size, loading) {
   if (loading) {
     return /*#__PURE__*/React.createElement(LoadingLine, {
       spin: true,
-      size: ICON_LARGE,
+      size: getIconSize(size),
       className: classNames("".concat(iconPrefixCls, "-icon-left"), iconPrefixCls),
       fill: "currentColor"
     });

package/dist/Button/style/index.less

@@ -254,13 +254,14 @@
 
       .aldicon-icon-left {
         svg {
-          vertical-align: -2px;
+          vertical-align: -4px;
         }
       }
 
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-large;
-      }
+      gap:@button-left-icon-margin-right-large;
+      // .aldicon-icon-left + span {
+      //   margin-left: @button-left-icon-margin-right-large;
+      // }
     }
 
     &-middle {
@@ -284,13 +285,14 @@
 
       .aldicon-icon-left {
         svg {
-          vertical-align: -2px;
+          vertical-align: -3px;
         }
       }
 
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-middle;
-      }
+      gap:@button-left-icon-margin-right-middle;
+      // .aldicon-icon-left + span {
+      //   margin-left: @button-left-icon-margin-right-middle;
+      // }
     }
 
     &-small {
@@ -318,39 +320,41 @@
         }
       }
 
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-small;
-      }
+      gap:@button-left-icon-margin-right-small;
+      // .aldicon-icon-left + span {
+      //   margin-left: @button-left-icon-margin-right-small;
+      // }
     }
 
-    &-mini {
-      height: @button-height-mini;
-      padding: @button-border-padding-mini;
-      font-size: @button-text-size-mini;
-      line-height: 22px;
-      border-radius: @button-border-radius-mini;
-
-      &.ant-btn-icon-only {
-        min-width: @button-height-mini;
-        height: @button-height-mini;
-        border-radius: @button-border-radius-mini;
-      }
-
-      &.ant-btn-circle {
-        min-width: @button-height-mini;
-        height: @button-height-mini;
-        border-radius: 50%;
-      }
-
-      .aldicon-icon-left {
-        svg {
-          vertical-align: -2px;
-        }
-      }
-
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-mini;
-      }
-    }
+    // &-mini {
+    //   height: @button-height-mini;
+    //   padding: @button-border-padding-mini;
+    //   font-size: @button-text-size-mini;
+    //   line-height: 22px;
+    //   border-radius: @button-border-radius-mini;
+
+    //   &.ant-btn-icon-only {
+    //     min-width: @button-height-mini;
+    //     height: @button-height-mini;
+    //     border-radius: @button-border-radius-mini;
+    //   }
+
+    //   &.ant-btn-circle {
+    //     min-width: @button-height-mini;
+    //     height: @button-height-mini;
+    //     border-radius: 50%;
+    //   }
+
+    //   .aldicon-icon-left {
+    //     svg {
+    //       vertical-align: -2px;
+    //     }
+    //   }
+
+    //   gap:@button-left-icon-margin-right-mini;
+    //   // .aldicon-icon-left + span {
+    //   //   margin-left: @button-left-icon-margin-right-mini;
+    //   // }
+    // }
   }
 }

package/dist/Button/style/variables.less

@@ -6,27 +6,27 @@
 /** size控制 **/
 @button-height-large: 36px;
 @button-text-size-large: 16px;
-@button-border-radius-large: 8px;
-@button-border-padding-large: 6px 14px;
+@button-border-radius-large: 6px;
+@button-border-padding-large: 6px 24px;
 @button-left-icon-margin-right-large: 8px;
 
 @button-height-middle: 32px;
-@button-text-size-middle: 14px;
-@button-border-radius-middle: 8px;
-@button-border-padding-middle: 6px 12px;
-@button-left-icon-margin-right-middle: 8px;
+@button-text-size-middle: 13px;
+@button-border-radius-middle: 4px;
+@button-border-padding-middle: 6px 20px;
+@button-left-icon-margin-right-middle: 4px;
 
 @button-height-small: 28px;
 @button-text-size-small: 12px;
-@button-border-radius-small: 6px;
-@button-border-padding-small: 6px 10px;
+@button-border-radius-small: 4px;
+@button-border-padding-small: 6px 16px;
 @button-left-icon-margin-right-small: 4px;
 
-@button-height-mini: 24px;
-@button-text-size-mini: 12px;
-@button-border-radius-mini: 4px;
-@button-border-padding-mini: 0 7px;
-@button-left-icon-margin-right-mini: 4px;
+// @button-height-mini: 24px;
+// @button-text-size-mini: 12px;
+// @button-border-radius-mini: 4px;
+// @button-border-padding-mini: 0 7px;
+// @button-left-icon-margin-right-mini: 4px;
 
 /****  type控制  ****/
 @button-primary-bg-color: @B40;

package/dist/Menu/style/index.less

@@ -68,3 +68,74 @@
     }
   }
 }
+
+.ant-menu-submenu.ant-menu-submenu-popup.ant-menu{
+  .ant-menu-vertical {
+    border: none;
+  }
+
+  .ant-menu-item,
+  .ant-menu-submenu,
+  .ant-menu-item-selected {
+    margin: 0;
+    height: initial;
+    padding: 6px 12px;
+    line-height: 20px;
+    font-size: 13px;
+    width: 100%;
+    border-radius: 0;
+    border: none;
+    background-color: @BG100;
+    color: @NL0;
+    transition: none;
+
+    &:hover {
+      background-color: @BG90 !important;
+    }
+
+    &:active {
+      background-color: none;
+    }
+
+    &:not(.ant-menu-item-selected):active {
+      background-color: @BG90;
+    }
+
+    &.ant-menu-item-disabled {
+      color: @NL50 !important;
+      transition: none;
+      background-color: @BG100 !important;
+      cursor: default;
+    }
+
+    .ant-menu-submenu-title {
+      line-height: 20px;
+      font-size: 13px;
+      width: 100%;
+      padding:0;
+      height: initial;
+      margin:0;
+
+      &:hover{
+        background: none;
+      }
+    }
+  }
+
+  .ant-menu.ant-menu-sub{
+    padding:4px 0;
+  }
+
+  .ant-menu-title-content{
+    line-height: 20px;
+    font-size: 13px;
+    width: 100%;
+    padding:0;
+    height: initial;
+    margin:0;
+
+    &:hover{
+      background: none;
+    }
+  } 
+}

package/dist/Modal/index.js

@@ -1,9 +1,12 @@
-var _excluded = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "icon", "title"],
-    _excluded2 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
+var _excluded = ["className", "type", "loading", "size", "disabled", "shape"],
+    _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title"],
     _excluded3 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
     _excluded4 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
     _excluded5 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
-    _excluded6 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"];
+    _excluded6 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "className", "width"],
+    _excluded7 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -11,8 +14,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -31,6 +32,7 @@ var DEFAULT_WIDTH = 552;
 
 function getButtonProps(buttonProps, defaultBtnType, okType) {
   var btnType = okType || defaultBtnType;
+
   var buttonClassName = buttonProps.className,
       _buttonProps$type = buttonProps.type,
       type = _buttonProps$type === void 0 ? btnType : _buttonProps$type,
@@ -39,15 +41,17 @@ function getButtonProps(buttonProps, defaultBtnType, okType) {
       size = _buttonProps$size === void 0 ? 'middle' : _buttonProps$size,
       disabled = buttonProps.disabled,
       _buttonProps$shape = buttonProps.shape,
-      shape = _buttonProps$shape === void 0 ? 'default' : _buttonProps$shape;
-  return {
+      shape = _buttonProps$shape === void 0 ? 'default' : _buttonProps$shape,
+      restProps = _objectWithoutProperties(buttonProps, _excluded);
+
+  return _objectSpread(_objectSpread({}, restProps), {}, {
     disabled: loading ? true : disabled,
     loading: loading,
     type: getButtonType(type),
     className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), buttonClassName, getButtonSizeClass(size)),
     danger: getDangerStatus(type),
     shape: getShape(shape)
-  };
+  });
 }
 
 var OriginModal = function OriginModal(props) {
@@ -61,9 +65,13 @@ var OriginModal = function OriginModal(props) {
       okButtonProps = _props$okButtonProps === void 0 ? {} : _props$okButtonProps,
       _props$cancelButtonPr = props.cancelButtonProps,
       cancelButtonProps = _props$cancelButtonPr === void 0 ? {} : _props$cancelButtonPr,
+      _props$okText = props.okText,
+      okText = _props$okText === void 0 ? "确定" : _props$okText,
+      _props$cancelText = props.cancelText,
+      cancelText = _props$cancelText === void 0 ? "取消" : _props$cancelText,
       icon = props.icon,
       title = props.title,
-      restProps = _objectWithoutProperties(props, _excluded);
+      restProps = _objectWithoutProperties(props, _excluded2);
 
   return /*#__PURE__*/React.createElement(AntdModal, _extends({}, restProps, {
     title: /*#__PURE__*/React.createElement("div", {
@@ -78,6 +86,8 @@ var OriginModal = function OriginModal(props) {
     className: classNames('ald-modal', className),
     okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
     cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
+    okText: okText,
+    cancelText: cancelText,
     width: width || DEFAULT_WIDTH,
     closeIcon: closeIcon || /*#__PURE__*/React.createElement(CloseLLine, {
       size: 16,
@@ -97,7 +107,7 @@ Modal.info = function infoFn(props) {
       cancelButtonProps = _props$cancelButtonPr2 === void 0 ? {} : _props$cancelButtonPr2,
       okType = props.okType,
       width = props.width,
-      restProps = _objectWithoutProperties(props, _excluded2);
+      restProps = _objectWithoutProperties(props, _excluded3);
 
   return AntdModal.success(_objectSpread({
     okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
@@ -119,7 +129,7 @@ Modal.success = function successFn(props) {
       cancelButtonProps = _props$cancelButtonPr3 === void 0 ? {} : _props$cancelButtonPr3,
       okType = props.okType,
       width = props.width,
-      restProps = _objectWithoutProperties(props, _excluded3);
+      restProps = _objectWithoutProperties(props, _excluded4);
 
   return AntdModal.success(_objectSpread({
     okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
@@ -141,7 +151,7 @@ Modal.error = function errorFn(props) {
       cancelButtonProps = _props$cancelButtonPr4 === void 0 ? {} : _props$cancelButtonPr4,
       okType = props.okType,
       width = props.width,
-      restProps = _objectWithoutProperties(props, _excluded4);
+      restProps = _objectWithoutProperties(props, _excluded5);
 
   return AntdModal.success(_objectSpread({
     okButtonProps: getButtonProps(okButtonProps, 'dangerous', okType),
@@ -162,13 +172,15 @@ Modal.warning = function modalWarn(props) {
       _props$cancelButtonPr5 = props.cancelButtonProps,
       cancelButtonProps = _props$cancelButtonPr5 === void 0 ? {} : _props$cancelButtonPr5,
       okType = props.okType,
+      className = props.className,
       width = props.width,
-      restProps = _objectWithoutProperties(props, _excluded5);
+      restProps = _objectWithoutProperties(props, _excluded6);
 
   return AntdModal.success(_objectSpread({
     okButtonProps: getButtonProps(okButtonProps, 'dangerous', okType),
     cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
     width: width || DEFAULT_WIDTH,
+    className: classNames('ald-modal-warning', className),
     icon: icon || /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
       fill: [theme.SB40, theme.ND0],
       theme: "multi-color",
@@ -185,7 +197,7 @@ Modal.confirm = function confirmFn(props) {
       cancelButtonProps = _props$cancelButtonPr6 === void 0 ? {} : _props$cancelButtonPr6,
       okType = props.okType,
       width = props.width,
-      restProps = _objectWithoutProperties(props, _excluded6);
+      restProps = _objectWithoutProperties(props, _excluded7);
 
   return AntdModal.success(_objectSpread({
     okButtonProps: getButtonProps(okButtonProps, 'primary', okType),

package/dist/Modal/style/index.less

@@ -17,9 +17,10 @@
   .ald-modal-title-container {
     display: flex;
     align-items: center;
+    gap: 12px;
 
     .ald-modal-text-container {
-      margin-left: 12px;
+      // margin-left: 12px;
       flex: 1;
     }
 
@@ -61,12 +62,12 @@
     font-size: 13px;
   }
 
-  .ant-modal-footer{
+  .ant-modal-footer {
     .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
       margin-bottom: 0;
       margin-inline-start: 12px;
     }
-  } 
+  }
 }
 
 .ant-modal-confirm {
@@ -75,15 +76,31 @@
       flex: 1;
       overflow: initial;
       margin-inline-start: 12px;
-  
+
       & + .ant-modal-confirm-content {
         margin-block-start: 16px;
-        margin-left:28px;
+        margin-left: 28px;
       }
     }
   }
 
-  .ant-modal-confirm-btns{
+  .ant-modal-confirm-btns {
     margin-block-start: 16px;
   }
 }
+
+.ald-modal-warning {
+  .ant-modal-confirm-btns {
+    .ald-btn {
+      background-color: @SB40;
+      border-color: @SB40;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: @SB40;
+        border-color: @SB40;
+      }
+    }
+  }
+}

package/dist/Radio/components/Radio/index.js

@@ -43,8 +43,10 @@ export default function Radio(props) {
     } else if (groupContext.type === 'iconButton') {
       if (groupContext.radioGroupStyle === 'filled') {
         otherClass = 'ald-radio-icon-button-wrapper-filled';
-      } else {
+      } else if (groupContext.radioGroupStyle === 'border') {
         otherClass = 'ald-radio-icon-button-wrapper-border';
+      } else {
+        otherClass = 'ald-radio-icon-button-wrapper-border-primary';
       }
     } else {
       // 当type未设置或者是radio时

package/dist/Radio/style/index.less

@@ -1,8 +1,8 @@
 @import '../../style/index.less';
 
-@radio-icon-button-padding-large: 10px;
+@radio-icon-button-padding-large: 8px;
 @radio-icon-button-padding-middle: 9px;
-@radio-icon-button-padding-small: 8px;
+@radio-icon-button-padding-small: 7px;
 @radio-group-height-large: 36px;
 @radio-group-height-middle: 32px;
 @radio-group-height-small: 28px;
@@ -114,7 +114,9 @@
 }
 
 .ald-radio-button-wrapper-border-primary,
-.ald-radio-button-wrapper-border {
+.ald-radio-button-wrapper-border,
+.ald-radio-icon-button-wrapper-border,
+.ald-radio-icon-button-wrapper-border-primary {
   &.ald-radio-label.ald-radio-wrapper-disabled {
     opacity: 0.5;
 
@@ -191,7 +193,8 @@
 
   .ald-radio-button-wrapper-border,
   .ald-radio-button-wrapper-border-primary,
-  .ald-radio-icon-button-wrapper-border {
+  .ald-radio-icon-button-wrapper-border,
+  .ald-radio-icon-button-wrapper-border-primary {
     position: relative;
     display: flex;
     align-items: center;
@@ -231,7 +234,8 @@
   // button选中状态下的样式
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
-  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border {
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
     background: @BG80;
     transition: background 0.5s ease;
 
@@ -242,7 +246,8 @@
     }
   }
 
-  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary {
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
     background: @B40;
     transition: background 0.5s ease;
 
@@ -310,6 +315,12 @@
   &.ald-radio-group-middle {
     height: @radio-group-height-middle;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-middle;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-middle;
     }
@@ -319,13 +330,17 @@
       padding: 0 @radio-button-padding-middle - 1;
     }
 
-    .ald-radio-icon-button-wrapper-border {
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
       padding: 0 @radio-icon-button-padding-middle - 1;
-    }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-middle;
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 14px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-middle 0
+          @radio-icon-button-padding-middle - 1;
       }
     }
   }
@@ -333,6 +348,12 @@
   &.ald-radio-group-small {
     height: @radio-group-height-small;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-small;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-small;
     }
@@ -342,19 +363,24 @@
       padding: 0 @radio-button-padding-small - 1;
     }
 
-    .ald-radio-icon-button-wrapper-border {
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
       padding: 0 @radio-icon-button-padding-small - 1;
-    }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-small;
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 14px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-small 0
+          @radio-icon-button-padding-small - 1;
       }
     }
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
     .ald-radio-button-wrapper-border-primary,
+    .ald-radio-icon-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {
@@ -374,6 +400,12 @@
   &.ald-radio-group.ald-radio-group-large {
     height: @radio-group-height-large;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-large;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-large;
     }
@@ -383,19 +415,24 @@
       padding: 0 @radio-button-padding-large - 1;
     }
 
-    .ald-radio-icon-button-wrapper-border {
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
       padding: 0 @radio-icon-button-padding-large - 1;
-    }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-large;
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 20px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-large 0
+          @radio-icon-button-padding-large - 1;
       }
     }
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
     .ald-radio-button-wrapper-border-primary,
+    .ald-radio-icon-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {

package/dist/Select/index.js

@@ -28,6 +28,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+import { FoldDownFill } from '@aloudata/icons-react';
 import { Select as AntdSelect } from 'antd';
 import classNames from 'classnames';
 import List from 'rc-virtual-list';
@@ -35,6 +36,12 @@ import React, { forwardRef, useEffect, useLayoutEffect, useMemo } from 'react';
 import Empty from "../Empty";
 import MultipleOption from "./components/MultipleOption";
 import SingleOption from "./components/SingleOption";
+import theme from "../style/themes/default/themeColor.module.less";
+var suffixIconSizeMap = {
+  large: 20,
+  middle: 16,
+  small: 14
+};
 
 var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue) {
   if (typeof value !== 'undefined') {
@@ -92,7 +99,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       popupClassName = props.popupClassName,
       listHeight = props.listHeight,
-      listItemHeight = props.listItemHeight,
+      _props$listItemHeight = props.listItemHeight,
+      listItemHeight = _props$listItemHeight === void 0 ? 36 : _props$listItemHeight,
       _props$notFoundConten = props.notFoundContent,
       notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, null) : _props$notFoundConten,
       value = props.value,
@@ -147,14 +155,24 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }), newOptions);
   };
 
+  var getListHeight = function getListHeight() {
+    if (typeof listHeight === 'number' && options !== null && options !== void 0 && options.length) {
+      if (listHeight <= options.length * listItemHeight) {
+        return listHeight;
+      }
+    }
+
+    return 0;
+  };
+
   var multipleRender = function multipleRender() {
     return /*#__PURE__*/React.createElement("div", {
       className: "ald-multiple-option-list"
     }, /*#__PURE__*/React.createElement(List, {
       data: options || [],
       "data-id": "list",
-      height: listHeight,
-      itemHeight: listItemHeight || 36,
+      height: getListHeight(),
+      itemHeight: listItemHeight,
       itemKey: "value"
     }, function (option) {
       var isSelected = selectedOptions.some(function (selectedOption) {
@@ -191,8 +209,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }, /*#__PURE__*/React.createElement(List, {
       data: options || [],
       "data-id": "list",
-      height: listHeight,
-      itemHeight: listItemHeight || 36,
+      height: getListHeight(),
+      itemHeight: listItemHeight,
       itemKey: "value"
     }, function (option) {
       var isSelected = selectedOptions.some(function (selectedOption) {
@@ -314,6 +332,10 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       width: '100%'
     },
+    suffixIcon: /*#__PURE__*/React.createElement(FoldDownFill, {
+      size: suffixIconSizeMap[props.size || 'middle'],
+      fill: theme.NL50
+    }),
     onDropdownVisibleChange: function onDropdownVisibleChange(open) {
       setIsOpen(open);
 

package/dist/Select/style/index.less

@@ -23,6 +23,7 @@
   box-sizing: border-box;
   border: 1px solid @BG60;
   border-radius: 4px;
+  background-color: @BG100;
   // padding: 0 4px;
   cursor: pointer;
   width:100%;

package/dist/Select/style/multiple.less

@@ -15,6 +15,8 @@
   // height: 20px;
   margin-left: 0;
   display: flex;
+  height: 36px;
+  box-sizing: border-box;
 
   &:hover{
     background-color: @BG90;

package/dist/Select/style/single.less

@@ -8,6 +8,8 @@
     display: flex;
     align-items: center;
     margin-left: 0;
+    height: 36px;
+    box-sizing: border-box;
 
     &:hover{
       background-color: @BG90;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.4.8-beta.4",
+  "version": "0.4.8-beta.6",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",