shineout 1.7.0-rc.9 → 1.7.0

package/css/Button/styles/button.css

@@ -69,12 +69,42 @@ fieldset[disabled] a.so-button {
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-default {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+}
+@keyframes btn-focus-default {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+}
 .so-button-default:focus,
 .so-button-default:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: #fff;
   color: var(--button-default-text-color, #333);
 }
 .so-button-default:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-default 0.4s ease-out;
           animation: btn-focus-default 0.4s ease-out;
   background-color: #fff;
@@ -148,12 +178,42 @@ fieldset[disabled] .so-button-default.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
+@keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
 .so-button-primary:focus,
 .so-button-primary:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: var(--primary-color-dark-btn-hover, #007fff);
   color: #fff;
 }
 .so-button-primary:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-primary 0.4s ease-out;
           animation: btn-focus-primary 0.4s ease-out;
   background-color: var(--primary-color-dark-btn-hover, #007fff);
@@ -242,10 +302,12 @@ fieldset[disabled] .so-button-primary.so-button-outline:not(.so-button-disabled)
 }
 .so-button-secondary:focus,
 .so-button-secondary:hover {
+  border-color: var(--secondary-color, #999999);
   background-color: var(--secondary-color-dark-btn-hover, #808080);
   color: #fff;
 }
 .so-button-secondary:active {
+  border-color: var(--secondary-color, #999999);
   -webkit-animation: btn-focus-secondary 0.4s ease-out;
           animation: btn-focus-secondary 0.4s ease-out;
   background-color: var(--secondary-color-dark-btn-hover, #808080);
@@ -304,12 +366,42 @@ fieldset[disabled] .so-button-secondary.so-button-outline:not(.so-button-disable
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-success {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+}
+@keyframes btn-focus-success {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+}
 .so-button-success:focus,
 .so-button-success:hover {
+  border-color: var(--success-color, #00cc66);
   background-color: var(--success-color-dark-btn-hover, #00994d);
   color: #fff;
 }
 .so-button-success:active {
+  border-color: var(--success-color, #00cc66);
   -webkit-animation: btn-focus-success 0.4s ease-out;
           animation: btn-focus-success 0.4s ease-out;
   background-color: var(--success-color-dark-btn-hover, #00994d);
@@ -368,12 +460,42 @@ fieldset[disabled] .so-button-success.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-info {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+}
+@keyframes btn-focus-info {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+}
 .so-button-info:focus,
 .so-button-info:hover {
+  border-color: var(--info-color, #17a2b8);
   background-color: var(--info-color-dark-btn-hover, #117a8b);
   color: #fff;
 }
 .so-button-info:active {
+  border-color: var(--info-color, #17a2b8);
   -webkit-animation: btn-focus-info 0.4s ease-out;
           animation: btn-focus-info 0.4s ease-out;
   background-color: var(--info-color-dark-btn-hover, #117a8b);
@@ -432,12 +554,42 @@ fieldset[disabled] .so-button-info.so-button-outline:not(.so-button-disabled):ac
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-warning {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+}
+@keyframes btn-focus-warning {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+}
 .so-button-warning:focus,
 .so-button-warning:hover {
+  border-color: var(--warning-color, #ff9900);
   background-color: var(--warning-color-dark-btn-hover, #cc7a00);
   color: #fff;
 }
 .so-button-warning:active {
+  border-color: var(--warning-color, #ff9900);
   -webkit-animation: btn-focus-warning 0.4s ease-out;
           animation: btn-focus-warning 0.4s ease-out;
   background-color: var(--warning-color-dark-btn-hover, #cc7a00);
@@ -497,15 +649,45 @@ fieldset[disabled] .so-button-warning.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-danger {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+}
+@keyframes btn-focus-danger {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+}
 .so-button-error:focus,
 .so-button-danger:focus,
 .so-button-error:hover,
 .so-button-danger:hover {
+  border-color: var(--danger-color, #f85555);
   background-color: var(--danger-color-dark-btn-hover, #f62424);
   color: #fff;
 }
 .so-button-error:active,
 .so-button-danger:active {
+  border-color: var(--danger-color, #f85555);
   -webkit-animation: btn-focus-danger 0.4s ease-out;
           animation: btn-focus-danger 0.4s ease-out;
   background-color: var(--danger-color-dark-btn-hover, #f62424);
@@ -774,6 +956,13 @@ fieldset[disabled] .so-button-link:focus {
 .so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus:before {
   border-left-color: inherit;
 }
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):hover + .so-button:not(.so-button-disabled):before,
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):active + .so-button:not(.so-button-disabled):before,
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus + .so-button:not(.so-button-disabled):before {
+  height: 0;
+  -webkit-transition: none;
+  transition: none;
+}
 .so-button-from-input-group .so-button:before {
   border-left: none;
 }

package/css/Carousel/index.js

@@ -67,6 +67,15 @@ function (_PureComponent) {
     }
   };
 
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    if (this.$timeout) {
+      clearTimeout(this.$timeout);
+      this.$timeout = null;
+    }
+  };
+
   _proto.setNext = function setNext(next) {
     var _this2 = this;
 

package/css/Cascader/FilterList.js

@@ -190,6 +190,7 @@ function (_Component2) {
         others = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["focus", "getRef", "fixed", "data", "childrenKey", "renderItem", "datum", "expandTrigger", "onChange", "onPathChange", "filterText", "onFilter", "height"]);
     if (!focus) return null;
     return _react.default.createElement("div", (0, _extends2.default)({}, others, {
+      ref: getRef,
       className: (0, _classnames.default)((0, _styles.selectClass)('options'), (0, _styles2.cascaderClass)('filter', expandTrigger === 'hover-only' && 'leaf-only'))
     }), this.renderList());
   };

package/css/Checkbox/styles/checkinput.css

@@ -215,12 +215,42 @@ fieldset[disabled] .so-checkinput-button .so-checkinput.so-checkinput-radio:acti
 .so-checkinput-button .so-checkinput.so-checkinput-checked:not(.so-checkinput-disabled) {
   z-index: 1;
 }
+@-webkit-keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
+@keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
 .so-checkinput-button .so-checkinput.so-checkinput-checked:focus,
 .so-checkinput-button .so-checkinput.so-checkinput-checked:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: var(--primary-color-dark-btn-hover, #007fff);
   color: #fff;
 }
 .so-checkinput-button .so-checkinput.so-checkinput-checked:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-primary 0.4s ease-out;
           animation: btn-focus-primary 0.4s ease-out;
   background-color: var(--primary-color-dark-btn-hover, #007fff);

package/css/DatePicker/utils.js

@@ -189,9 +189,15 @@ function toDateWithFormat(dirtyDate, fmt, def) {
     date = parse(dirtyDate, fmt, new Date(), {
       weekStartsOn: (0, _locale.getLocale)('startOfWeek')
     });
+    var str = format(date, fmt, {
+      weekStartsOn: (0, _locale.getLocale)('startOfWeek')
+    });
+
+    if (str !== dirtyDate) {
+      date = toDate(dirtyDate);
+    }
   } else date = toDate(dirtyDate);
 
-  if (isInvalid(date)) date = toDate(dirtyDate);
   if (isInvalid(date)) date = def;
   return date;
 }

package/css/EditableArea/EditableArea.js

@@ -45,7 +45,6 @@ function (_React$PureComponent) {
 
     _this = _React$PureComponent.call(this, props) || this;
     _this.state = {
-      value: props.value,
       showTextarea: false
     };
     _this.bindContainer = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'container');
@@ -65,26 +64,16 @@ function (_React$PureComponent) {
   var _proto = Editable.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var value = this.props.value;
     var showTextarea = this.state.showTextarea;
 
     if (prevState.showTextarea !== showTextarea && showTextarea) {
       this.autoFocus();
     }
-
-    if (value !== prevProps.value) {
-      this.setState({
-        value: value
-      });
-    }
   };
 
   _proto.onChange = function onChange(value) {
     var onChange = this.props.onChange;
     if (typeof onChange === 'function') onChange(value);
-    this.setState({
-      value: value
-    });
   };
 
   _proto.onBlur = function onBlur(e) {
@@ -119,13 +108,12 @@ function (_React$PureComponent) {
   };
 
   _proto.renderTextarea = function renderTextarea() {
-    var _this$state = this.state,
-        showTextarea = _this$state.showTextarea,
-        value = _this$state.value;
+    var showTextarea = this.state.showTextarea;
     var _this$props = this.props,
         delay = _this$props.delay,
         placeholder = _this$props.placeholder,
-        maxHeight = _this$props.maxHeight;
+        maxHeight = _this$props.maxHeight,
+        value = _this$props.value;
     if (!showTextarea) return null;
     return _react.default.createElement("div", {
       ref: this.bindContainer
@@ -144,10 +132,10 @@ function (_React$PureComponent) {
   };
 
   _proto.renderInput = function renderInput() {
-    var value = this.state.value;
     var _this$props2 = this.props,
         placeholder = _this$props2.placeholder,
-        disabled = _this$props2.disabled;
+        disabled = _this$props2.disabled,
+        value = _this$props2.value;
     return _react.default.createElement(_Input.default, {
       forwardedRef: this.bindInput,
       placeholder: placeholder,
@@ -159,16 +147,15 @@ function (_React$PureComponent) {
   };
 
   _proto.render = function render() {
-    var _this$state2 = this.state,
-        showTextarea = _this$state2.showTextarea,
-        value = _this$state2.value;
+    var showTextarea = this.state.showTextarea;
     var _this$props3 = this.props,
         width = _this$props3.width,
         style = _this$props3.style,
         className = _this$props3.className,
         bordered = _this$props3.bordered,
         clearable = _this$props3.clearable,
-        getPopupContainer = _this$props3.getPopupContainer;
+        getPopupContainer = _this$props3.getPopupContainer,
+        value = _this$props3.value;
     var cls = (0, _classnames.default)(className, (0, _styles.editableAreaClass)('_', !bordered && 'none-bordered'));
     var ms = Object.assign({
       width: width

package/css/Form/inputable.js

@@ -121,6 +121,8 @@ var _default = (0, _func.curry)(function (Origin) {
           formDatum.bind(name, this.handleUpdate, defaultValue, this.validate);
           this.state.value = formDatum.get(name);
         }
+
+        this.lastValue = this.state.value;
       }
 
       if (bindInputToItem && name && !popover) bindInputToItem(this.errorName);
@@ -181,7 +183,7 @@ var _default = (0, _func.curry)(function (Origin) {
       }
 
       var hasValue = 'value' in this.props || 'checked' in this.props;
-      return !hasValue && !formDatum ? this.state.value : value;
+      return !hasValue ? this.state.value : value;
     };
 
     _proto.getError = function getError() {

package/css/Menu/styles/menu.css

@@ -35,15 +35,15 @@
   color: var(--menu-item-light-hover-color, var(--primary-color, #3399ff));
   background-color: var(--menu-item-light-hover-bgc, rgba(51, 153, 255, 0.05));
 }
-.so-menu-item a:hover .so-menu-expand::after {
-  border-color: var(--menu-item-light-hover-color, var(--primary-color, #3399ff));
+.so-menu-item a:hover .so-menu-expand:after {
+  border-top-color: var(--menu-item-light-hover-color, var(--primary-color, #3399ff));
 }
 .so-menu .so-menu-item.so-menu-disabled > a {
   color: rgba(0, 0, 0, 0.25);
   cursor: not-allowed;
 }
-.so-menu .so-menu-item.so-menu-disabled > a .so-menu-expand::after {
-  border-color: rgba(0, 0, 0, 0.25);
+.so-menu .so-menu-item.so-menu-disabled > a .so-menu-expand:after {
+  border-top-color: rgba(0, 0, 0, 0.25);
 }
 .so-menu .so-menu-item.so-menu-disabled.so-menu-caret-solid > a.so-menu-title .so-menu-caret {
   border-top-color: rgba(0, 0, 0, 0.25);
@@ -71,6 +71,18 @@
   bottom: 0;
   width: 32px;
 }
+.so-menu-has-children > .so-menu-title .so-menu-expand:after {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 4px;
+  content: '';
+  border-top: 4px solid;
+  border-right: 4px solid transparent;
+  border-bottom: 0;
+  border-left: 4px solid transparent;
+  vertical-align: 3.4px;
+}
 .so-menu-has-children > .so-menu-title .so-menu-expand:after {
   position: absolute;
   top: 50%;
@@ -193,19 +205,27 @@ ul.so-menu-root {
 }
 .so-menu-inline .so-menu-in-path.so-menu-has-children > a,
 .so-menu-horizontal .so-menu-in-path.so-menu-has-children > a {
+  color: var(--primary-color, #3399ff);
+}
+.so-menu-inline .so-menu-in-path.so-menu-has-children > a .so-menu-expand:after,
+.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a .so-menu-expand:after {
+  border-top-color: var(--primary-color, #3399ff);
+}
+.so-menu-inline .so-menu-in-path.so-menu-has-children.so-menu-active > a,
+.so-menu-horizontal .so-menu-in-path.so-menu-has-children.so-menu-active > a {
   color: var(--menu-item-active-color, #fff);
 }
-.so-menu-inline .so-menu-in-path.so-menu-has-children > a .so-menu-expand::after,
-.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a .so-menu-expand::after {
-  border-color: var(--menu-item-active-color, #fff);
+.so-menu-inline .so-menu-in-path.so-menu-has-children.so-menu-active > a .so-menu-expand:after,
+.so-menu-horizontal .so-menu-in-path.so-menu-has-children.so-menu-active > a .so-menu-expand:after {
+  border-top-color: var(--menu-item-active-color, #fff);
 }
 .so-menu-inline .so-menu-in-path.so-menu-caret-solid.so-menu-has-children > a .so-menu-caret,
 .so-menu-horizontal .so-menu-in-path.so-menu-caret-solid.so-menu-has-children > a .so-menu-caret {
-  border-top-color: var(--menu-item-active-color, #fff);
+  border-top-color: var(--primary-color, #3399ff);
 }
 .so-menu-inline .so-menu-in-path.so-menu-caret-hollow.so-menu-has-children > a .so-menu-caret::after,
 .so-menu-horizontal .so-menu-in-path.so-menu-caret-hollow.so-menu-has-children > a .so-menu-caret::after {
-  border-color: var(--menu-item-active-color, #fff);
+  border-color: var(--primary-color, #3399ff);
 }
 .so-menu ul.so-menu-horizontal.so-menu-root {
   margin-left: 0;
@@ -279,6 +299,10 @@ ul.so-menu-root {
   background-color: var(--menu-item-has-children-active-bgc, var(--primary-color, #3399ff));
   color: var(--menu-item-has-children-active-color, #fff);
 }
+.so-menu-vertical .so-menu-in-path.so-menu-no-children.so-menu-active > a .so-menu-expand:after,
+.so-menu-vertical .so-menu-in-path.so-menu-has-children.so-menu-active > a .so-menu-expand:after {
+  border-top-color: var(--menu-item-has-children-active-color, #fff);
+}
 .so-menu-dark,
 .so-menu-dark .so-menu-list {
   background-color: var(--menu-dark-bg, #001529);
@@ -287,10 +311,16 @@ ul.so-menu-root {
 .so-menu-dark .so-menu-item a {
   color: var(--menu-dark-color, #bfbfbf);
 }
+.so-menu-dark .so-menu-item a .so-menu-expand:after {
+  border-top-color: var(--menu-dark-color, #bfbfbf);
+}
 .so-menu-dark .so-menu-item a:hover {
   color: var(--menu-item-dark-hover-color, #fff);
   background-color: var(--menu-item-dark-hover-bgc, rgba(51, 153, 255, 0.5));
 }
+.so-menu-dark .so-menu-item a:hover .so-menu-expand:after {
+  border-top-color: var(--menu-item-dark-hover-color, #fff);
+}
 .so-menu-dark.so-menu-horizontal,
 .so-menu-dark.so-menu-vertical {
   border-color: var(--menu-dark-bg, #001529);
@@ -364,6 +394,9 @@ ul.so-menu-root {
   background-color: var(--menu-vertical-dark-parent-active-bgc, #020B18);
   color: #fff;
 }
+.so-menu-dark.so-menu-vertical .so-menu-in-path.so-menu-has-children > a .so-menu-expand:after {
+  border-top-color: #fff;
+}
 .so-menu-dark.so-menu-vertical .so-menu-in-path.so-menu-has-children > a::before {
   width: var(--menu-vertical-in-path-bar-width, 4px);
   right: auto;
@@ -377,6 +410,9 @@ ul.so-menu-root {
   background: var(--menu-dark-acitve-bg, #3399ff);
   color: #fff;
 }
+.so-menu-dark.so-menu-vertical .so-menu-in-path.so-menu-has-children.so-menu-active > a .so-menu-expand:after {
+  border-top-color: #fff;
+}
 .so-menu-dark.so-menu-vertical .so-menu-item > a {
   background-color: var(--menu-root-node-bgc, transparent);
 }
@@ -413,10 +449,18 @@ ul.so-menu-root {
 .so-menu-dark.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a {
   color: var(--menu-dark-color, #bfbfbf);
 }
+.so-menu-dark.so-menu-inline .so-menu-in-path.so-menu-has-children > a .so-menu-expand:after,
+.so-menu-dark.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a .so-menu-expand:after {
+  border-top-color: var(--menu-dark-color, #bfbfbf);
+}
 .so-menu-dark.so-menu-inline .so-menu-in-path.so-menu-has-children > a:hover,
 .so-menu-dark.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a:hover {
   color: var(--menu-item-dark-hover-color, #fff);
 }
+.so-menu-dark.so-menu-inline .so-menu-in-path.so-menu-has-children > a:hover:after,
+.so-menu-dark.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a:hover:after {
+  border-top-color: var(--menu-item-dark-hover-color, #fff);
+}
 .so-menu .so-menu-has-children.so-menu-caret-solid.so-menu-open > .so-menu-title .so-menu-caret {
   -webkit-transform: rotate(180deg);
       -ms-transform: rotate(180deg);

package/css/Message/styles/message.css

@@ -102,6 +102,9 @@
   color: var(--message-text-color, #333);
   font-weight: var(--message-font-weight, 400);
 }
+.so-message-msg .so-alert-icon {
+  margin-top: var(--message-icon-margin-top, var(--alert-icon-margin-top, 2px));
+}
 .so-message-top-right,
 .so-message-top-bottom {
   right: 20px;

package/css/Rate/Rate.js

@@ -60,7 +60,8 @@ function (_PureComponent) {
     var parsed = Math.max(MIN_SIZE, parseFloat(size));
     return {
       width: parsed,
-      fontSize: parsed
+      fontSize: parsed,
+      position: 'relative'
     };
   };
 
@@ -154,8 +155,7 @@ function (_PureComponent) {
     var _this$props3 = this.props,
         background = _this$props3.background,
         max = _this$props3.max,
-        disabled = _this$props3.disabled,
-        allowHalf = _this$props3.allowHalf;
+        disabled = _this$props3.disabled;
     var style = this.getStyle();
     var value = this.getValue();
     return _react.default.createElement("div", {
@@ -188,11 +188,19 @@ function (_PureComponent) {
       return _react.default.createElement("span", {
         key: v,
         onClick: _this4.handleClick.bind(_this4, v + 1),
-        onMouseLeave: _this4.handleHover.bind(_this4, 0),
         onMouseMove: allowHalf ? _this4.handleMove.bind(_this4, v + 1) : undefined,
         onMouseEnter: !allowHalf ? _this4.handleHover.bind(_this4, v + 1) : undefined,
         style: style
-      }, value > v ? _this4.getIcon(front, v) : _react.default.createElement("span", null, "\xA0"), highlight === v + 1 && _react.default.createElement("i", {
+      }, _react.default.createElement("div", {
+        style: {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          left: 0,
+          bottom: 0
+        },
+        onMouseLeave: _this4.handleHover.bind(_this4, 0)
+      }), value > v ? _this4.getIcon(front, v) : _react.default.createElement("span", null, "\xA0"), highlight === v + 1 && _react.default.createElement("i", {
         className: (0, _styles.rateClass)('highlight')
       }, _this4.getIcon(front, v)));
     }), _react.default.createElement("span", {