rsuite 4.8.5 → 4.8.9

package/lib/Button/styles/mixin.less

@@ -12,7 +12,7 @@
   border: none;
   user-select: none;
 
-  .btn-md;
+  .btn-md();
 
   &:hover,
   &:focus {
@@ -57,7 +57,7 @@
 
 // Subtle  button style
 .btn-subtle() {
-  .btn-transition;
+  .btn-transition();
   .btn-subtle-variant(@btn-subtle-hover-bg);
   .btn-loading-reset(@btn-subtle-color);
 
@@ -155,8 +155,8 @@
 
 // Full button size
 .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
-  @icon-side-length: @padding-vertical*2 + floor(@font-size* @line-height);
-  @ghost-icon-side-length: @icon-side-length - @btn-ghost-border-width*2;
+  @icon-side-length: ((@padding-vertical*2) + floor(@font-size* @line-height));
+  @ghost-icon-side-length: (@icon-side-length - @btn-ghost-border-width*2);
   @svg-icon-height: @font-size;
 
   .button-size(
@@ -171,23 +171,23 @@
 
   // Button icon
   &.@{ns}btn-icon {
-    padding-left: @icon-side-length - @padding-horizontal;
+    padding-left: (@icon-side-length - @padding-horizontal);
     height: @icon-side-length;
     position: relative;
 
     // Ghost button need minus border-width.
     .@{ns}btn-ghost& {
-      padding-left: @icon-side-length - @padding-horizontal - @btn-ghost-border-width*2;
+      padding-left: (@icon-side-length - @padding-horizontal - @btn-ghost-border-width * 2);
     }
 
     &.@{ns}btn-icon-with-text {
       &.@{ns}btn-icon-placement-left {
-        padding-left: @icon-side-length + @padding-vertical;
+        padding-left: (@icon-side-length + @padding-vertical);
       }
 
       &.@{ns}btn-icon-placement-right {
         padding-left: @padding-base-input-horizontal;
-        padding-right: @icon-side-length + @padding-vertical;
+        padding-right: (@icon-side-length + @padding-vertical);
 
         > .@{ns}icon {
           left: auto;
@@ -231,7 +231,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     base; @padding-small-vertical; @padding-small-horizontal; @font-size-base; @line-height-base;
-    @btn-border-radius-small
+      @btn-border-radius-small
   );
   /* stylelint-enable */
 }
@@ -240,7 +240,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     base; @padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base;
-    @btn-border-radius-base
+      @btn-border-radius-base
   );
   /* stylelint-enable */
 }
@@ -249,7 +249,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     base; @padding-extra-small-vertical; @padding-extra-small-horizontal; @font-size-small;
-    @line-height-small; @btn-border-radius-small
+      @line-height-small; @btn-border-radius-small
   );
   /* stylelint-enable */
 }
@@ -258,7 +258,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     base; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large;
-    @btn-border-radius-large
+      @btn-border-radius-large
   );
   /* stylelint-enable */
 }
@@ -268,7 +268,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     @padding-small-vertical; @padding-small-horizontal; @font-size-base; @line-height-base;
-    @btn-border-radius-small
+      @btn-border-radius-small
   );
   /* stylelint-enable */
 }
@@ -277,7 +277,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     @padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base;
-    @btn-border-radius-base
+      @btn-border-radius-base
   );
   /* stylelint-enable */
 }
@@ -286,7 +286,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     @padding-extra-small-vertical; @padding-extra-small-horizontal; @font-size-small;
-    @line-height-small; @btn-border-radius-small
+      @line-height-small; @btn-border-radius-small
   );
   /* stylelint-enable */
 }
@@ -295,7 +295,7 @@
   /* stylelint-disable */ //Formatted by prettier
   .button-size(
     @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large;
-    @btn-border-radius-large
+      @btn-border-radius-large
   );
   /* stylelint-enable */
 }
@@ -305,7 +305,7 @@
   overflow: hidden;
   position: relative;
 
-  .safari-border-radius-overflow-hidden;
+  .safari-border-radius-overflow-hidden();
 
   &:not(.@{prefix}disabled) {
     .@{ns}ripple {

package/lib/ButtonGroup/styles/common.less

@@ -29,15 +29,15 @@
 // Force change the size of the button in the button group.
 .@{ns}btn {
   .@{ns}btn-group-lg & {
-    .btn-lg;
+    .btn-lg();
   }
 
   .@{ns}btn-group-sm & {
-    .btn-sm;
+    .btn-sm();
   }
 
   .@{ns}btn-group-xs & {
-    .btn-xs;
+    .btn-xs();
   }
 }
 
@@ -241,7 +241,7 @@
 
   // Clear floats so dropdown menus can be properly placed
   > .@{ns}btn-group {
-    .clearfix;
+    .clearfix();
 
     > .@{ns}btn {
       float: none;
@@ -267,7 +267,7 @@
   > .@{ns}btn,
   > .@{ns}btn-group {
     flex: 1 1 1%;
-    .ellipsis-basic;
+    .ellipsis-basic();
   }
 
   > .@{ns}btn-group .@{ns}btn {

package/lib/Calendar/styles/common.less

@@ -30,7 +30,7 @@
   &-panel &-header {
     width: 100%;
     padding-bottom: 6px;
-    .clearfix;
+    .clearfix();
   }
 
   &-panel &-header &-btn-today {
@@ -40,7 +40,7 @@
   &-panel &-header-forward,
   &-panel &-header-title,
   &-panel &-header-backward {
-    .btn-md;
+    .btn-md();
   }
 
   &-panel &-header-forward,
@@ -167,7 +167,7 @@
   }
 
   .@{clpns}-header-title-date {
-    .picker-calendar-title-show;
+    .picker-calendar-title-show();
 
     &.@{clpns}-header-error {
       color: @error-color;
@@ -183,7 +183,7 @@
 // Show time dropdown
 .@{clpns}-show-time-dropdown {
   .@{clpns}-header-title-time {
-    .picker-calendar-title-show;
+    .picker-calendar-title-show();
 
     &.@{clpns}-header-error {
       color: @error-color;
@@ -230,7 +230,7 @@
   width: @calendar-header-width;
   padding-left: @calendar-picker-padding;
   padding-right: @calendar-picker-padding;
-  .clearfix;
+  .clearfix();
 
   // Month toolbar && Time toolbar
   &-month-toolbar,
@@ -252,7 +252,7 @@
   &-backward,
   &-forward {
     .btn(base);
-    .btn-subtle;
+    .btn-subtle();
     .btn-xs(base);
 
     padding: 2px 2px;
@@ -303,7 +303,7 @@
   &-backward,
   &-forward {
     font-size: 0;
-    width: @padding-extra-small-vertical * 2 + @font-size-small * @line-height-small;
+    width: (@padding-extra-small-vertical * 2 + @font-size-small * @line-height-small);
 
     &::before {
       font-family: @font-family-icon;
@@ -331,7 +331,7 @@
     display: block;
     text-align: center;
     width: 100%;
-    .clearfix;
+    .clearfix();
   }
 
   &-has-month:not(&-has-time) &-backward {
@@ -425,7 +425,7 @@
 
   &-disabled&-is-today&-selected &-content {
     &:hover {
-      .picker-calendar-cell-content-selected;
+      .picker-calendar-cell-content-selected();
     }
   }
 
@@ -436,7 +436,7 @@
 }
 
 .@{clpns}-table-cell-content {
-  .picker-calendar-cell-content;
+  .picker-calendar-cell-content();
 
   .@{clpns}-table-cell-is-today & {
     border: @calendar-table-cell-content-today-border-width solid
@@ -445,7 +445,7 @@
   }
 
   .@{clpns}-table-cell-selected & {
-    .picker-calendar-cell-content-selected;
+    .picker-calendar-cell-content-selected();
   }
 }
 
@@ -527,7 +527,7 @@
 
   &-list {
     display: block;
-    .clearfix;
+    .clearfix();
   }
 
   &-cell {
@@ -545,7 +545,7 @@
   }
 
   &-cell-content {
-    .picker-calendar-cell-content;
+    .picker-calendar-cell-content();
   }
 
   &-cell:not(&-cell-active).disabled &-cell-content {
@@ -561,7 +561,7 @@
   }
 
   &-cell-active &-cell-content {
-    .picker-calendar-cell-content-selected;
+    .picker-calendar-cell-content-selected();
   }
 }
 

package/lib/Carousel/styles/common.less

@@ -104,7 +104,7 @@
   }
 
   &-shape-bar &-label {
-    border-radius: @carousel-bar-height / 2;
+    border-radius: (@carousel-bar-height / 2);
   }
 
   &-placement-top&-shape-bar &-label,

package/lib/Cascader/Cascader.js

@@ -557,7 +557,8 @@ function (_React$Component) {
       onClean: (0, _utils2.createChainedFunction)(this.handleClean, onClean),
       cleanable: cleanable && !disabled,
       hasValue: hasValue,
-      active: active
+      active: active,
+      "aria-disabled": disabled
     }), activeItemLabel || React.createElement(_FormattedMessage.default, {
       id: "placeholder"
     })))));

package/lib/Cascader/styles/common.less

@@ -9,7 +9,7 @@
 @cspns: ~'@{ns}@{cascader-picker-prefix}';
 
 .@{cspns}-menu-items > div {
-  .clearfix;
+  .clearfix();
 }
 
 // Search panel
@@ -99,14 +99,14 @@
   &:not(&-disabled):hover,
   &:not(&-disabled):focus,
   &.@{ns}picker-select-menu-item-focus {
-    .picker-item-hover;
+    .picker-item-hover();
 
     text-decoration: none;
   }
 
   &&-focus,
   &&-active {
-    .picker-item-active;
+    .picker-item-active();
 
     &,
     &:hover,
@@ -144,7 +144,7 @@
 }
 
 .@{cspns}-menu-caret {
-  .dropdown-toggle-caret-common;
+  .dropdown-toggle-caret-common();
 
   &::before {
     content: @drop-right-caret-content ~'/* rtl: "@{drop-left-caret-content}" */';

package/lib/CheckPicker/CheckPicker.js

@@ -557,7 +557,8 @@ function (_React$Component) {
       componentClass: toggleComponentClass,
       cleanable: cleanable && !disabled,
       hasValue: hasValue,
-      active: this.state.active
+      active: this.state.active,
+      "aria-disabled": disabled
     }), selectedElement || React.createElement(_FormattedMessage.default, {
       id: "placeholder"
     })))));

package/lib/CheckPicker/styles/common.less

@@ -5,12 +5,12 @@
 
 // Menu Items
 .@{ckpns}-menu-items {
-  .picker-menu-items-reset;
+  .picker-menu-items-reset();
   .picker-menu-group-common(@check-picker-prefix);
   .picker-menu-group-title(@check-picker-prefix);
   .picker-menu-group-closed(@check-picker-prefix);
 
   .@{ns}check-item.@{ns}checkbox-checked .@{ns}checkbox-checker > label {
-    .picker-item-active;
+    .picker-item-active();
   }
 }

package/lib/CheckTreePicker/CheckTreePicker.js

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

package/lib/CheckTreePicker/styles/common.less

@@ -35,11 +35,11 @@
     }
 
     &:focus .@{ns}check-item .@{ns}checkbox-checker > label {
-      .picker-item-hover;
+      .picker-item-hover();
     }
 
     .@{ns}check-item.@{ns}checkbox-checked .@{ns}checkbox-checker > label {
-      .picker-item-active;
+      .picker-item-active();
     }
 
     .@{ns}check-item .@{ns}checkbox-checker > label {
@@ -54,7 +54,7 @@
       &::before {
         content: '';
         position: absolute;
-        width: @picker-tree-arrow-down-width+ @picker-tree-arrow-down-gap + 30px; // checkbox-spacing = 30
+        width: (@picker-tree-arrow-down-width+ @picker-tree-arrow-down-gap + 30px); // checkbox-spacing = 30
         height: 100%;
         background-color: @picker-tree-bg;
         top: 0;
@@ -136,7 +136,7 @@
   }
 
   > .@{ctpns}-node-custom-icon {
-    .node-item-prepend-icon;
+    .node-item-prepend-icon();
   }
 }
 
@@ -164,7 +164,7 @@
     padding: 0 @picker-menu-padding @picker-menu-padding 0;
 
     &-node > .@{ctpns}-node-label .@{ctpns}-node-text-wrapper {
-      .ellipsis;
+      .ellipsis();
 
       display: inline-block;
       vertical-align: top;

package/lib/Checkbox/styles/common.less

@@ -2,14 +2,14 @@
 @import 'mixin';
 
 .@{ns}checkbox {
-  .radio-checkbox-common;
+  .radio-checkbox-common();
 }
 
 .@{ns}checkbox-checker {
   padding-top: 10px;
   padding-bottom: 10px;
-  padding-left: @checkbox-sense-width*2 + @checkbox-width-height;
-  min-height: @checkbox-sense-width*2 + @checkbox-width-height;
+  padding-left: (@checkbox-sense-width*2 + @checkbox-width-height);
+  min-height: (@checkbox-sense-width*2 + @checkbox-width-height);
   line-height: 1;
   position: relative;
 }

package/lib/Checkbox/styles/mixin.less

@@ -21,7 +21,7 @@
   }
 
   label {
-    line-height: unit(@checkbox-width-height / @font-size-base);
+    line-height: unit((@checkbox-width-height / @font-size-base));
     margin-bottom: 0;
     font-weight: normal;
     cursor: pointer;

package/lib/DatePicker/DatePicker.js

@@ -474,7 +474,8 @@ function (_React$Component) {
       onClean: (0, _utils.createChainedFunction)(this.handleClean, onClean),
       cleanable: cleanable && !disabled,
       hasValue: hasValue,
-      active: this.state.active
+      active: this.state.active,
+      "aria-disabled": disabled
     }), this.getDateString()))));
   };
 

package/lib/DatePicker/styles/common.less

@@ -18,7 +18,7 @@
 
 // Toolbar
 .@{ns}picker-toolbar {
-  .clearfix;
+  .clearfix();
 
   padding: @calendar-picker-padding;
   border-top: 1px solid @calendar-toolbar-border-color;

package/lib/DateRangePicker/DateRangePicker.js

@@ -584,7 +584,8 @@ function (_React$Component) {
       onClean: (0, _utils2.createChainedFunction)(this.handleClean, onClean),
       cleanable: cleanable && !disabled,
       hasValue: hasValue,
-      active: this.state.active
+      active: this.state.active,
+      "aria-disabled": disabled
     }), this.getDateString()))));
   };
 

package/lib/Drawer/styles/common.less

@@ -164,7 +164,7 @@
 // Drawer header
 // Top section of the modal title.
 .@{ns}drawer-header {
-  .clearfix;
+  .clearfix();
 
   padding-right: @line-height-computed;
   position: relative;
@@ -172,12 +172,12 @@
 
   .@{ns}drawer-title {
     font-size: @drawer-title-font-size;
-    line-height: unit(@line-height-computed / @drawer-title-font-size);
+    line-height: unit((@line-height-computed / @drawer-title-font-size));
     width: 100%;
     display: block;
     color: @drawer-title-color;
     margin: 0;
-    .ellipsis;
+    .ellipsis();
   }
 }
 
@@ -200,7 +200,7 @@
   border-style: none;
 
   &::before {
-    .icon-font;
+    .icon-font();
 
     content: @default-close-btn-content;
   }
@@ -220,7 +220,7 @@
 
 // Footer (for actions)
 .@{ns}drawer-footer {
-  .clearfix; // clear it in case folks use .pull-* classes on buttons
+  .clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   text-align: right; // right align buttons
   border-top: none;

package/lib/Dropdown/Dropdown.js

@@ -25,6 +25,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _recompose = require("recompose");
 
+var _domLib = require("dom-lib");
+
 var _RootCloseWrapper = _interopRequireDefault(require("../Overlay/RootCloseWrapper"));
 
 var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
@@ -50,6 +52,7 @@ function (_React$Component) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
+    _this.rootRef = void 0;
 
     _this.toggle = function (isOpen) {
       var _this$props = _this.props,
@@ -70,8 +73,12 @@ function (_React$Component) {
     _this.handleRootClose = function (event) {
       var _this$props$onToggle, _this$props2, _this$props$onClose, _this$props3;
 
-      event.preventDefault();
-      event.stopPropagation();
+      // Prevent the event from bubbling when closing the overlay is triggered by its own element.
+      // fix#1435
+      if ((0, _domLib.contains)((0, _utils.getDOMNode)(_this.rootRef.current), event.target)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
 
       _this.setState({
         open: false
@@ -127,6 +134,7 @@ function (_React$Component) {
     _this.state = {
       open: props.open
     };
+    _this.rootRef = React.createRef();
     return _this;
   }
 
@@ -244,7 +252,9 @@ function (_React$Component) {
       componentClass: toggleComponentClass
     }), title);
     var classes = (0, _classnames.default)(classPrefix, className, (_classNames = {}, _classNames[addPrefix("placement-" + (0, _kebabCase2.default)((0, _utils.placementPolyfill)(placement)))] = placement, _classNames[addPrefix('disabled')] = disabled, _classNames[addPrefix('no-caret')] = noCaret, _classNames[addPrefix('open')] = open, _classNames[addPrefix(menuExpanded ? 'expand' : 'collapse')] = sidenav, _classNames));
-    return React.createElement(Component, (0, _extends2.default)({}, dropdownProps, {
+    return React.createElement(Component, (0, _extends2.default)({
+      ref: this.rootRef
+    }, dropdownProps, {
       style: style,
       className: classes,
       role: "menu"

package/lib/Dropdown/styles/common.less

@@ -6,7 +6,7 @@
 // --------------------------------------------------
 
 .@{ns}dropdown-toggle-caret {
-  .dropdown-toggle-caret-common;
+  .dropdown-toggle-caret-common();
   .set-dropdown-caret(~'@{ns}dropdown');
 }
 
@@ -86,12 +86,12 @@
 }
 
 .@{ns}dropdown-toggle {
-  .dropdown-toggle-size;
+  .dropdown-toggle-size();
 
   &,
   &.@{ns}btn {
     // Force set style even if has `.btn`.
-    .dropdown-toggle;
+    .dropdown-toggle();
   }
 }
 

package/lib/FlexboxGrid/styles/common.less

@@ -59,4 +59,4 @@
 }
 
 // Generate the flex grid.
-.make-flex-box-grid;
+.make-flex-box-grid();

package/lib/Form/styles/common.less

@@ -6,7 +6,7 @@
 .@{ns}form-inline {
   > *,
   > .@{ns}btn {
-    margin-right: 30px;
+    margin-right: 20px;
     margin-bottom: 24px;
     vertical-align: top;
   }
@@ -14,6 +14,7 @@
   .rs-control-label {
     vertical-align: top;
     margin-bottom: auto;
+    margin-right: @control-label-margin-right;
     margin-top: @padding-base-vertical;
     display: inline-block;
   }

package/lib/Form/styles/mixin.less

@@ -7,7 +7,7 @@
   border: @input-border-width solid @input-border;
   transition: @input-transition;
   border-radius: @border-radius-base;
-  .input-base;
+  .input-base();
 
   // Placeholder
   &::placeholder {
@@ -81,7 +81,7 @@
 }
 
 .input-base() {
-  .input-md;
+  .input-md();
 }
 
 .reset-input-group-addon-size(@size-name) {
@@ -90,7 +90,7 @@
   @width: @@padding-horizontal-name * 2 - @input-border-width*2 + @font-size-base;
   @padding-horizontal: (@width - @font-size-base)/2;
 
-  width: @width;
+  min-width: @width;
   padding-left: @padding-horizontal;
   padding-right: @padding-horizontal;
 }
@@ -123,7 +123,7 @@
     padding-right: @@add-on-padding;
   }
 
-  &.@{ns}input-group:not(.@{ns}input-group-inside) {
+  &.@{ns}input-group {
     > .@{ns}input {
       height: @useable-height;
     }

package/lib/FormControl/styles/common.less

@@ -63,7 +63,6 @@
 .@{ns}form-inline .@{ns}form-group {
   .@{ns}form-control-wrapper {
     display: inline-block;
-    margin-left: @form-control-margin-left;
   }
 
   // Form control wrapper behind Screen only dom no need margin left.

package/lib/FormGroup/styles/common.less

@@ -37,7 +37,7 @@
 // labels on the left and inputs on the right.
 
 .@{ns}form-horizontal .@{ns}form-group {
-  .clearfix;
+  .clearfix();
 
   .@{ns}control-label {
     float: left;