rsuite 4.8.5 → 4.8.9

package/lib/Toggle/styles/mixin.less

@@ -1,27 +1,27 @@
 .toggle-size-variant(@toogle-height,@min-width,@toggle-handle-gap,@toggle-inner-margin,@toggle-inner-font-size) {
-  @handle-diameter: @toogle-height - @toggle-handle-gap*2;
+  @handle-diameter: (@toogle-height - @toggle-handle-gap*2);
 
   height: @toogle-height;
   min-width: @min-width;
-  border-radius: @toogle-height / 2;
+  border-radius: (@toogle-height / 2);
 
   &::after {
     width: @handle-diameter;
     height: @handle-diameter;
     left: @toggle-handle-gap;
     top: @toggle-handle-gap;
-    border-radius: @handle-diameter / 2;
+    border-radius: (@handle-diameter / 2);
   }
 
   &:active::after {
-    width: @handle-diameter * @toggle-active-scale;
+    width: (@handle-diameter * @toggle-active-scale);
   }
 
   .@{ns}btn-toggle-inner {
     margin-left: @toogle-height;
     margin-right: @toggle-inner-margin;
     height: @toogle-height;
-    line-height: unit(@toogle-height / @toggle-inner-font-size);
+    line-height: unit((@toogle-height / @toggle-inner-font-size));
     font-size: @toggle-inner-font-size;
 
     .@{ns}icon {

package/lib/Tooltip/styles/common.less

@@ -45,7 +45,7 @@
 
 // Common style for .placement-top*
 .@{ns}tooltip[class*='placement-top'] {
-  margin-top: -@tooltip-arrow-width;
+  margin-top: -(@tooltip-arrow-width + 2px);
   .set-translate-transition(0, -@tooltip-translate-distance);
 
   .@{ns}tooltip-arrow {
@@ -62,7 +62,7 @@
 
 // Common style for .placement-bottom*
 .@{ns}tooltip[class*='placement-bottom'] {
-  margin-top: @tooltip-arrow-width;
+  margin-top: (@tooltip-arrow-width + 2px);
   .set-translate-transition(0, @tooltip-translate-distance);
 
   .@{ns}tooltip-arrow {
@@ -80,7 +80,7 @@
 /* rtl:begin:ignore */
 // Common style for .placement-right*
 .@{ns}tooltip[class*='placement-right'] {
-  margin-left: @tooltip-arrow-width;
+  margin-left: (@tooltip-arrow-width + 2px);
   .set-translate-transition(@tooltip-translate-distance, 0);
 
   .@{ns}tooltip-arrow {
@@ -97,7 +97,7 @@
 
 // Common style for .placement-lef*
 .@{ns}tooltip[class*='placement-left'] {
-  margin-left: -@tooltip-arrow-width;
+  margin-left: -(@tooltip-arrow-width + 2px);
   .set-translate-transition(-@tooltip-translate-distance, 0);
 
   .@{ns}tooltip-arrow {

package/lib/TreePicker/TreePicker.js

@@ -1302,7 +1302,8 @@ function (_React$Component) {
       cleanable: cleanable && !disabled,
       componentClass: toggleComponentClass,
       hasValue: hasValidValue,
-      active: this.state.active
+      active: this.state.active,
+      "aria-disabled": disabled
     }), selectedElement || locale.placeholder)));
   };
 

package/lib/TreePicker/styles/common.less

@@ -43,7 +43,7 @@
   margin: 0 0 4px 0;
 
   &-active > .@{tpns}-node-label > .@{tpns}-node-label-content {
-    .picker-item-active;
+    .picker-item-active();
 
     color: @picker-tree-node-active-color;
     background-color: @picker-tree-node-active-bg;
@@ -197,7 +197,7 @@
   }
 
   > .@{tpns}-node-custom-icon {
-    .node-item-prepend-icon;
+    .node-item-prepend-icon();
   }
 }
 
@@ -228,7 +228,7 @@
       margin: 0;
 
       > .@{tpns}-node-label > .@{tpns}-node-label-content {
-        .ellipsis;
+        .ellipsis();
 
         display: block;
       }

package/lib/Uploader/styles/common.less

@@ -83,7 +83,7 @@
     &-icon-loading {
       .@{uplns}-file-item-icon {
         .set-side-length(@loader-default-diameter);
-        .loader-spin;
+        .loader-spin();
       }
     }
 
@@ -94,7 +94,7 @@
         font-style: normal;
         color: @uploader-default-font-color;
         font-size: @uploader-file-item-icon-font-size;
-        line-height: unit(@line-height-computed / @uploader-file-item-icon-font-size);
+        line-height: unit((@line-height-computed / @uploader-file-item-icon-font-size));
       }
     }
 
@@ -117,7 +117,7 @@
     }
 
     &-title {
-      .ellipsis;
+      .ellipsis();
 
       flex: 1 1 auto;
     }
@@ -134,7 +134,7 @@
       .ie-display(table);
 
       > a {
-        .reset-link-text-decoration;
+        .reset-link-text-decoration();
       }
     }
 
@@ -146,7 +146,7 @@
       right: @padding-base-horizontal;
       color: @uploader-light-font-color;
       cursor: pointer;
-      .icon-font;
+      .icon-font();
 
       &:hover,
       &:focus {
@@ -154,7 +154,7 @@
       }
 
       &::before {
-        .icon-font;
+        .icon-font();
 
         content: @default-close-btn-content;
       }
@@ -192,12 +192,12 @@
 
 .@{uplns}-picture {
   display: inline-block;
-  .clearfix;
+  .clearfix();
 
   .@{uplns}-trigger-btn {
     .btn(base);
-    .button-ripple;
-    .btn-subtle;
+    .button-ripple();
+    .btn-subtle();
 
     width: @uploader-picture-side-length;
     height: @uploader-picture-side-length;
@@ -244,7 +244,7 @@
       z-index: @zindex-uploader-picture-preview;
 
       > img {
-        .img-cover;
+        .img-cover();
       }
     }
 
@@ -297,7 +297,7 @@
       }
 
       &::before {
-        .icon-font;
+        .icon-font();
 
         content: @default-close-btn-content;
       }
@@ -326,7 +326,7 @@
 
       .@{uplns}-file-item-icon {
         .set-side-length(@loader-default-diameter);
-        .loader-spin;
+        .loader-spin();
 
         display: inline-block;
         position: relative;
@@ -355,7 +355,7 @@
   }
 
   .@{uplns}-trigger:not(.@{uplns}-trigger-disabled) .@{uplns}-trigger-btn {
-    .button-ripple;
+    .button-ripple();
 
     &:focus,
     &.focus {
@@ -417,7 +417,7 @@
       border-radius: @border-radius-base 0 0 @border-radius-base;
 
       > img {
-        .img-cover;
+        .img-cover();
       }
     }
 
@@ -430,7 +430,7 @@
       }
 
       .@{uplns}-file-item-title {
-        .ellipsis;
+        .ellipsis();
 
         color: @uploader-default-font-color;
 
@@ -461,7 +461,7 @@
       }
 
       &::before {
-        .icon-font;
+        .icon-font();
 
         content: @default-close-btn-content;
       }
@@ -499,7 +499,7 @@
 
       .@{uplns}-file-item-icon {
         .set-side-length(@loader-default-diameter);
-        .loader-spin;
+        .loader-spin();
 
         display: inline-block;
         position: relative;

package/lib/styles/mixins/utilities.less

@@ -42,7 +42,7 @@
 }
 
 .ellipsis-basic() {
-  .text-overflow;
+  .text-overflow();
 }
 
 .ellipsis(@substract:0) {

package/lib/styles/variables.less

@@ -102,11 +102,11 @@
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 @line-height-large-computed: 22px;
 //** Unit-less `line-height` for use in components like buttons.
-@line-height-large: unit(@line-height-large-computed / @font-size-large); // ~1.375
-@line-height-base: unit(@line-height-computed / @font-size-base); // ~1.4285714285714286
-@line-height-small: unit(@line-height-computed / @font-size-small); // ~1.6666666666666667
+@line-height-large: unit((@line-height-large-computed / @font-size-large)); // ~1.375
+@line-height-base: unit((@line-height-computed / @font-size-base)); // ~1.4285714285714286
+@line-height-small: unit((@line-height-computed / @font-size-small)); // ~1.6666666666666667
 @line-height-extra-small: unit(
-  @line-height-computed / @font-size-extra-small
+  (@line-height-computed / @font-size-extra-small)
 ); // ~1.6666666666666667
 
 //** By default, this inherits from the `<body>`.
@@ -315,13 +315,13 @@
 @input-color-placeholder: @B600;
 
 //** Default `.input` height
-@input-height-base: @line-height-computed + (@padding-base-vertical * 2);
+@input-height-base: (@line-height-computed + (@padding-base-vertical * 2));
 //** Large `.input` height
-@input-height-large: @line-height-large-computed + (@padding-large-vertical * 2);
+@input-height-large: (@line-height-large-computed + (@padding-large-vertical * 2));
 //** Small `.input` height
-@input-height-small: @line-height-computed + (@padding-small-vertical * 2);
+@input-height-small: (@line-height-computed + (@padding-small-vertical * 2));
 //** Extra small `.input` height
-@input-height-extra-small: @line-height-computed + (@padding-extra-small-vertical * 2);
+@input-height-extra-small: (@line-height-computed + (@padding-extra-small-vertical * 2));
 
 //** `.form-group` margin
 @form-group-margin-bottom: 24px;
@@ -346,13 +346,12 @@
 @help-block-inline-gap: 10px;
 @control-label-width: 170px;
 @control-label-margin-right: 12px;
-@form-control-margin-left: 12px;
 // == Error Message
 @error-message-padding-vertical: 4px;
 @error-message-padding-horizontal: 8px;
 @error-message-background-color: @B000;
 @error-message-border-color: @B200;
-@error-message-height: @error-message-padding-vertical*2 + @line-height-computed;
+@error-message-height: (@error-message-padding-vertical*2 + @line-height-computed);
 @error-message-font-color: @error-color;
 @error-message-font-size: @font-size-small;
 @error-message-triangle-width: 6px;
@@ -409,8 +408,9 @@
 @dropdown-item-content-submenu-icon-angle-width: 5px;
 @dropdown-item-content-submenu-icon-angle-line-height: @line-height-base;
 @dropdown-item-content-submenu-icon-angle-size: @font-size-base;
-@dropdown-toggle-padding-right: @padding-base-horizontal+ @dropdown-caret-width+
-  @dropdown-caret-padding;
+@dropdown-toggle-padding-right: (
+  @padding-base-horizontal+ @dropdown-caret-width+ @dropdown-caret-padding
+);
 //** Dropdown Caret Font Family
 @dropdown-caret-font-family: @font-family-icon;
 
@@ -438,11 +438,11 @@
 @toggle-md-handle-gap: 3px;
 @toggle-md-min-width: 44px;
 @toggle-md-inner-font-size: @font-size-small;
-@toggle-md-handle-diameter: @toggle-md-height - @toggle-md-handle-gap*2;
+@toggle-md-handle-diameter: (@toggle-md-height - @toggle-md-handle-gap*2);
 @toggle-md-handle-bg: @B000;
 @toggle-md-inner-line-height-computed: @toggle-md-height;
 @toggle-md-inner-line-height: unit(
-  @toggle-md-inner-line-height-computed / @toggle-md-inner-font-size
+  (@toggle-md-inner-line-height-computed / @toggle-md-inner-font-size)
 );
 // The same to button
 @toggle-md-inner-margin: @padding-base-vertical;
@@ -452,7 +452,7 @@
 @toggle-sm-min-width: 26px;
 @toggle-sm-handle-gap: 2px;
 @toggle-sm-inner-margin: 6px;
-@toggle-sm-inner-font-size: @font-size-small - 2;
+@toggle-sm-inner-font-size: (@font-size-small - 2);
 
 //# Large size
 @toggle-lg-height: 30px;
@@ -475,8 +475,8 @@
 @zindex-input-group-icon: 4;
 @zindex-dropdown: 5;
 @zindex-picker-toggle: 5; // The same with zindex-dropdown
-@zindex-picker-input: @zindex-picker-toggle + 1; // Greater than picker toggle
-@zindex-picker-menu: @zindex-picker-toggle+2; // Greater than picker toggle and input
+@zindex-picker-input: (@zindex-picker-toggle + 1); // Greater than picker toggle
+@zindex-picker-menu: (@zindex-picker-toggle + 2); // Greater than picker toggle and input
 @zindex-dropdown-a: 10;
 @zindex-list-helper: 99;
 @zindex-navbar: 1000;
@@ -562,7 +562,7 @@
 @nav-item-padding-vertical: 8px;
 @nav-item-padding-horizontal: 12px;
 @nav-item-spacing: 6px;
-@nav-base-height: @line-height-computed+ @nav-item-padding-vertical*2;
+@nav-base-height: (@line-height-computed+ @nav-item-padding-vertical*2);
 @nav-item-icon-spacing: 6px;
 @nav-item-font-default-color: @B600;
 @nav-item-font-active-color: @H600;
@@ -599,7 +599,7 @@
 //##
 @nav-bar-padding-vertical: 18px;
 @nav-bar-padding-horizontal: 16px;
-@nav-bar-height: @nav-bar-padding-vertical * 2 + @line-height-computed;
+@nav-bar-height: (@nav-bar-padding-vertical * 2 + @line-height-computed);
 //** Default
 @nav-bar-default-bg: @B050;
 @nav-bar-default-active-color: @H700;
@@ -629,20 +629,20 @@
 @sidenav-padding-horizonal: 20px;
 @sidenav-collapse-in-width: 100%;
 @sidenav-default-width: 56px;
-@sidenav-item-height: @sidenav-padding-vertical*2 + @line-height-computed;
+@sidenav-item-height: (@sidenav-padding-vertical*2 + @line-height-computed);
 @sidenav-menu-max-height: @sidenav-item-height*40;
 @sidenav-menu-animation-time: 1.5s;
 @sidenav-level1-item-font-size: @font-size-large;
-@sidenav-level1-item-line-height: unit(@line-height-computed / @font-size-large);
+@sidenav-level1-item-line-height: unit((@line-height-computed / @font-size-large));
 @sidenav-icon-spacing: 20px;
 @sidenav-icon-width: @sidenav-level1-item-font-size;
 @sidenav-dropdown-toggle-caret-width: 20px;
 @sidenav-level-retract: 9px;
-@sidenav-level2-retract: @sidenav-padding-horizonal + @sidenav-icon-width + @sidenav-icon-spacing;
-@sidenav-level3-retract: @sidenav-level2-retract + @sidenav-level-retract; //60 px
-@sidenav-level4-retract: @sidenav-level2-retract + @sidenav-level-retract*2;
-@sidenav-level5-retract: @sidenav-level2-retract + @sidenav-level-retract*3;
-@sidenav-level6-retract: @sidenav-level2-retract + @sidenav-level-retract*4;
+@sidenav-level2-retract: (@sidenav-padding-horizonal + @sidenav-icon-width + @sidenav-icon-spacing);
+@sidenav-level3-retract: (@sidenav-level2-retract + @sidenav-level-retract); //60 px
+@sidenav-level4-retract: (@sidenav-level2-retract + @sidenav-level-retract*2);
+@sidenav-level5-retract: (@sidenav-level2-retract + @sidenav-level-retract*3);
+@sidenav-level6-retract: (@sidenav-level2-retract + @sidenav-level-retract*4);
 @sidenav-collapse-transition-config: 0.2s ease-in;
 // ** Sidenav default
 @sidenav-default-bg: @nav-bar-default-bg;
@@ -694,17 +694,17 @@
 @steps-icon-spacing: 10px;
 @steps-item-spacing: 10px;
 // This space place the steps-icon
-@steps-icon-space-width: @steps-icon-diameter+ @steps-icon-spacing;
+@steps-icon-space-width: (@steps-icon-diameter + @steps-icon-spacing);
 @steps-icon-size: @font-size-large;
-@steps-icon-line-height: unit((@steps-icon-diameter - 2px) / @font-size-large);
+@steps-icon-line-height: unit(((@steps-icon-diameter - 2px) / @font-size-large));
 @steps-title-font-size: @font-size-large;
-@steps-title-line-height: unit(@steps-icon-diameter / @font-size-large);
+@steps-title-line-height: unit((@steps-icon-diameter / @font-size-large));
 @steps-description-margin-top: 12px;
 // Small
 @small-steps-icon-diameter: 24px;
-@small-steps-icon-space-width: @small-steps-icon-diameter + @steps-icon-spacing;
-@small-steps-icon-line-height: unit((@small-steps-icon-diameter - 2px) / @font-size-base);
-@small-steps-title-line-height: unit(@small-steps-icon-diameter / @font-size-base);
+@small-steps-icon-space-width: (@small-steps-icon-diameter + @steps-icon-spacing);
+@small-steps-icon-line-height: unit(((@small-steps-icon-diameter - 2px) / @font-size-base));
+@small-steps-title-line-height: unit((@small-steps-icon-diameter / @font-size-base));
 @small-steps-icon-size: @font-size-base;
 @small-steps-description-font-size: @font-size-small;
 @small-steps-description-line-height: @line-height-small;
@@ -1041,17 +1041,22 @@
 //##
 @time-line-item-content-margin-left: 12px;
 @time-line-dot-side-length: 10px;
-@time-line-item-padding-left: @time-line-item-content-margin-left + @time-line-dot-side-length;
+@time-line-item-padding-left: (@time-line-item-content-margin-left + @time-line-dot-side-length);
 @time-line-dot-default-background-color: @B300;
 @time-line-last-dot-default-background-color: @H500;
 @time-line-tail-width: 2px;
 @time-line-tail-default-background-color: @B300;
 @time-line-item-content-padding-bottom: 18px;
-@time-line-dot-center-gap: (@line-height-computed - @time-line-dot-side-length)/2;
-@time-line-content-side-offset: @time-line-dot-side-length / 2 + @time-line-item-content-margin-left;
-@time-line-alternate-time-offset: @time-line-dot-side-length / 2 +
-  @time-line-item-content-margin-left;
-@time-line-tail-min-height: @line-height-computed + @time-line-item-content-padding-bottom; // 20 + 18 = 38
+@time-line-dot-center-gap: ((@line-height-computed - @time-line-dot-side-length)/2);
+@time-line-content-side-offset: (
+  @time-line-dot-side-length / 2 + @time-line-item-content-margin-left
+);
+@time-line-alternate-time-offset: (
+  @time-line-dot-side-length / 2 + @time-line-item-content-margin-left
+);
+@time-line-tail-min-height: (
+  @line-height-computed + @time-line-item-content-padding-bottom
+); // 20 + 18 = 38
 
 //== Tags
 //
@@ -1146,8 +1151,9 @@
 // Check Picker
 @picker-check-checkbox-gap: 10px;
 @picker-children-check-item-padding-left: 14px;
-@picker-check-item-content-padding-left: @picker-item-content-padding-horizontal+
-  @checkbox-width-height+ @picker-check-checkbox-gap;
+@picker-check-item-content-padding-left: (
+  @picker-item-content-padding-horizontal+ @checkbox-width-height+ @picker-check-checkbox-gap
+);
 
 // Tree Picker
 @picker-tree-bg: @dropdown-bg;
@@ -1160,7 +1166,7 @@
 @picker-select-menu-item-selected-bg: fade(@H900, 20);
 @picker-tree-node-active-bg: @picker-select-menu-item-selected-bg;
 @picker-tree-node-line-height: @line-height-base;
-@picker-tree-node-height: @line-height-computed + @picker-tree-node-padding-vertical*2;
+@picker-tree-node-height: (@line-height-computed + @picker-tree-node-padding-vertical*2);
 @picker-tree-arrow-down-width: 8px;
 @picker-tree-arrow-down-gap: 8px;
 @picker-tree-node-hover-bg: @H050;
@@ -1224,18 +1230,22 @@
 @date-range-picker-header-font-size: @font-size-base;
 @date-range-picker-header-line-height: @line-height-base;
 @date-range-picker-inner-border: 1px solid @B200;
-@date-range-picker-calendar-default-width:255px;
+@date-range-picker-calendar-default-width: 255px;
 
 //== Input Picker
-@input-picker-toggle-height: @line-height-computed + @padding-base-vertical*2; // 20px + 8px*2 = 36px  the same with md button
-@input-picker-toggle-content-height: @input-picker-toggle-height -
-  @picker-default-toggle-border-width*2;
+@input-picker-toggle-height: (
+  @line-height-computed + @padding-base-vertical*2
+); // 20px + 8px*2 = 36px  the same with md button
+@input-picker-toggle-content-height: (
+  @input-picker-toggle-height - @picker-default-toggle-border-width*2
+);
 
 // == TagPicker
 @tag-picker-toggle-content-height: @input-height-extra-small;
-@tag-picker-content-padding-vertical-all: @input-picker-toggle-content-height -
-  @tag-picker-toggle-content-height;
-@tag-picker-content-padding-vertical: @tag-picker-content-padding-vertical-all / 2; // (34 -24)/2
+@tag-picker-content-padding-vertical-all: (
+  @input-picker-toggle-content-height - @tag-picker-toggle-content-height
+);
+@tag-picker-content-padding-vertical: (@tag-picker-content-padding-vertical-all / 2); // (34 -24)/2
 @tag-picker-content-padding-horizontal: 6px;
 @tag-picker: ~'@{ns}@{multi-input-picker-prefix}';
 

package/lib/utils/index.js

@@ -25,11 +25,12 @@ var _exportNames = {
   isRTL: true,
   refType: true,
   mergeRefs: true,
+  getDOMNode: true,
   defaultClassPrefix: true,
   getClassNamePrefix: true,
   globalKey: true
 };
-exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.mergeRefs = exports.refType = exports.isRTL = exports.getMonthView = exports.placementPolyfill = exports.createContext = exports.findNodesOfTree = exports.clone = exports.getDataGroupBy = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.getUnhandledProps = exports.defaultProps = exports.createChainedFunction = exports.prefix = exports.withStyleProps = void 0;
+exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.getDOMNode = exports.mergeRefs = exports.refType = exports.isRTL = exports.getMonthView = exports.placementPolyfill = exports.createContext = exports.findNodesOfTree = exports.clone = exports.getDataGroupBy = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.getUnhandledProps = exports.defaultProps = exports.createChainedFunction = exports.prefix = exports.withStyleProps = void 0;
 
 var _BrowserDetection = require("./BrowserDetection");
 
@@ -124,4 +125,8 @@ exports.refType = _refType.default;
 
 var _mergeRefs = _interopRequireDefault(require("./mergeRefs"));
 
-exports.mergeRefs = _mergeRefs.default;
+exports.mergeRefs = _mergeRefs.default;
+
+var _getDOMNode = _interopRequireDefault(require("./getDOMNode"));
+
+exports.getDOMNode = _getDOMNode.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.8.5",
+  "version": "4.8.9",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -9,6 +9,7 @@
     "lib": "lib/"
   },
   "scripts": {
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "format": "prettier --write \"{src,test}/**/*.{tsx,ts,js}\"",
     "format:style": "stylelint \"src/**/*.less\" --fix",
     "format:check": "prettier --list-different \"{src,test}/**/*.{tsx,ts,js}\"",
@@ -62,7 +63,7 @@
     "react-lifecycles-compat": "^3.0.4",
     "react-virtualized": "^9.21.0",
     "recompose": "^0.30.0",
-    "rsuite-table": "^3.14.1",
+    "rsuite-table": "^3.14.3",
     "schema-typed": "^1.5.1"
   },
   "peerDependencies": {
@@ -72,10 +73,10 @@
   "devDependencies": {
     "@babel/cli": "^7.7.0",
     "@babel/core": "^7.7.2",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-export-default-from": "^7.0.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-proto-to-assign": "^7.0.0",
@@ -106,6 +107,7 @@
     "babel-plugin-transform-dev": "^2.0.1",
     "brfs": "^1.6.1",
     "chai": "^4.1.0",
+    "conventional-changelog-cli": "^2.1.1",
     "coveralls": "^2.13.1",
     "cross-env": "^6.0.3",
     "css-loader": "^0.28.11",
@@ -123,7 +125,7 @@
     "glob": "^7.1.4",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
-    "gulp-less": "^4.0.0",
+    "gulp-less": "^4.0.1",
     "gulp-postcss": "^7.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-rtlcss": "^1.4.0",
@@ -141,7 +143,7 @@
     "karma-sinon-chai": "^1.2.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.0-rc.6",
-    "less-loader": "^4.1.0",
+    "less-loader": "^7.2.1",
     "lodash-webpack-plugin": "^0.11.5",
     "make-dir": "^1.3.0",
     "mocha": "^2.5.3",

package/src/Alert/styles/common.less

@@ -81,7 +81,7 @@
     cursor: pointer;
 
     &-x::before {
-      .icon-font;
+      .icon-font();
 
       content: @default-close-btn-content;
     }

package/src/AutoComplete/styles/common.less

@@ -4,14 +4,14 @@
 .@{ns}auto-complete {
   &-menu > {
     // Auto complete items style the same to Picker menu items
-    .picker-menu-items-reset;
+    .picker-menu-items-reset();
 
     margin-top: @border-radius-base;
   }
 
   // The same to Picker select menu item
   &-item {
-    .picker-select-item;
+    .picker-select-item();
 
     &,
     &:hover,
@@ -22,7 +22,7 @@
 
     &-focus,
     &:hover {
-      .picker-item-hover;
+      .picker-item-hover();
     }
   }
 

package/src/Avatar/styles/common.less

@@ -9,7 +9,7 @@
   align-items: center;
   border-radius: @avatar-border-radius;
   overflow: hidden;
-  .avatar-md;
+  .avatar-md();
 
   & > .@{ns}icon {
     vertical-align: middle;
@@ -29,7 +29,7 @@
     background: @avatar-background;
     text-align: center;
     padding: 0 2px;
-    .ellipsis-basic;
+    .ellipsis-basic();
   }
 
   &-circle {
@@ -37,14 +37,14 @@
   }
 
   &-lg {
-    .avatar-lg;
+    .avatar-lg();
   }
 
   &-sm {
-    .avatar-sm;
+    .avatar-sm();
   }
 
   &-xs {
-    .avatar-xs;
+    .avatar-xs();
   }
 }

package/src/Avatar/styles/mixin.less

@@ -4,7 +4,7 @@
   font-size: @font-size;
 
   & > .@{ns}icon {
-    @icon-font-size: (@side-length - @font-size)/2 + @font-size;
+    @icon-font-size: ((@side-length - @font-size)/2 + @font-size);
 
     font-size: @icon-font-size;