rsuite 4.8.5 → 4.8.9

package/es/Dropdown/Dropdown.js

@@ -7,12 +7,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { setStatic } from 'recompose';
+import { contains } from 'dom-lib';
 import RootCloseWrapper from '../Overlay/RootCloseWrapper';
 import shallowEqual from '../utils/shallowEqual';
 import DropdownToggle from './DropdownToggle';
 import DropdownMenu from './DropdownMenu';
 import DropdownMenuItem from './DropdownMenuItem';
-import { createChainedFunction, prefix, isOneOf, getUnhandledProps, defaultProps, placementPolyfill } from '../utils';
+import { createChainedFunction, prefix, isOneOf, getUnhandledProps, defaultProps, placementPolyfill, getDOMNode } from '../utils';
 import { SidenavContext } from '../Sidenav/Sidenav';
 import { PLACEMENT_8 } from '../constants';
 
@@ -25,6 +26,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,
@@ -45,8 +47,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 (contains(getDOMNode(_this.rootRef.current), event.target)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
 
       _this.setState({
         open: false
@@ -102,6 +108,7 @@ function (_React$Component) {
     _this.state = {
       open: props.open
     };
+    _this.rootRef = React.createRef();
     return _this;
   }
 
@@ -221,7 +228,9 @@ function (_React$Component) {
       componentClass: toggleComponentClass
     }), title);
     var classes = classNames(classPrefix, className, (_classNames = {}, _classNames[addPrefix("placement-" + _kebabCase(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, _extends({}, dropdownProps, {
+    return React.createElement(Component, _extends({
+      ref: this.rootRef
+    }, dropdownProps, {
       style: style,
       className: classes,
       role: "menu"

package/es/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/es/FlexboxGrid/styles/common.less

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

package/es/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/es/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/es/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/es/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;

package/es/Grid/styles/common.less

@@ -76,4 +76,4 @@
 // Hiddens
 //
 // All hidden styles.
-.make-hidden;
+.make-hidden();

package/es/Grid/styles/mixin.less

@@ -8,14 +8,14 @@
   margin-left: auto;
   padding-left: floor((@gutter / 2));
   padding-right: ceil((@gutter / 2));
-  .clearfix;
+  .clearfix();
 }
 
 // Creates a wrapper for a series of columns
 .make-row(@gutter: @grid-gutter-width) {
   margin-left: ceil((@gutter / -2));
   margin-right: floor((@gutter / -2));
-  .clearfix;
+  .clearfix();
 }
 
 // Generate the extra small columns

package/es/HelpBlock/styles/common.less

@@ -20,7 +20,7 @@
     margin-top: @padding-base-vertical;
 
     .@{ns}icon::before {
-      .icon-font;
+      .icon-font();
 
       content: @icon-help-o;
     }

package/es/IconButton/styles/common.less

@@ -13,23 +13,25 @@
 .@{ns}btn-default {
   .btn-icon-with-text(@btn-icon-with-text-bg);
 
-  &:focus {
-    .btn-icon-with-text(@btn-icon-with-text-focus-bg);
-  }
-
-  &:hover {
-    .btn-icon-with-text(@btn-icon-with-text-hover-bg);
-  }
+  &:not(.@{ns}btn-disabled) {
+    &:focus {
+      .btn-icon-with-text(@btn-icon-with-text-focus-bg);
+    }
 
-  &:active,
-  &.@{ns}btn-active,
-  .@{ns}open > .@{ns}dropdown-toggle& {
-    .btn-icon-with-text(@btn-icon-with-text-active-bg);
+    &:hover {
+      .btn-icon-with-text(@btn-icon-with-text-hover-bg);
+    }
 
-    &:hover,
-    &:focus,
-    &.focus {
+    &:active,
+    &.@{ns}btn-active,
+    .@{ns}open > .@{ns}dropdown-toggle& {
       .btn-icon-with-text(@btn-icon-with-text-active-bg);
+
+      &:hover,
+      &:focus,
+      &.focus {
+        .btn-icon-with-text(@btn-icon-with-text-active-bg);
+      }
     }
   }
 }

package/es/Input/styles/common.less

@@ -7,28 +7,24 @@
 
 // Common form controls
 .@{ns}input {
-  .default-input;
+  .default-input();
 
   // Reset height for `textarea`
   textarea& {
-    resize: none;
-    // Set textarea valid size
-    min-width: 300px;
-    min-height: 76px;
-    max-width: 100%;
-    max-height: 200px;
+    overflow: auto;
+    resize: vertical;
   }
 }
 
 // Form control sizing
 .@{ns}input-xs {
-  .input-xs;
+  .input-xs();
 }
 
 .@{ns}input-lg {
-  .input-lg;
+  .input-lg();
 }
 
 .@{ns}input-sm {
-  .input-sm;
+  .input-sm();
 }

package/es/InputGroup/styles/common.less

@@ -131,7 +131,7 @@
     }
 
     .@{ns}input-group-btn {
-      .btn-subtle;
+      .btn-subtle();
 
       color: @input-color;
       position: absolute;

package/es/InputNumber/styles/mixin.less

@@ -1,11 +1,11 @@
 .input-touchspin(@size) {
   @size-name: ~'input-height-@{size}';
-  @height: (@@size-name - 2px) / 2;
+  @height: ((@@size-name - 2px) / 2);
 
   height: @height;
 
   > .@{ns}icon {
     height: @height;
-    line-height: unit(@height / @number-input-touchspin-font-size);
+    line-height: unit((@height / @number-input-touchspin-font-size));
   }
 }

package/es/InputPicker/InputAutosize.js

@@ -34,7 +34,13 @@ function (_React$Component) {
     _this.inputRef = void 0;
     _this.sizerRef = void 0;
     _this.placeHolderSizerRef = void 0;
+
+    _this.getInputId = function () {
+      return _this.props.inputId || _this.state.inputId;
+    };
+
     _this.state = {
+      inputId: '_' + Math.random().toString(36).substr(2, 12),
       inputWidth: props.minWidth
     };
     _this.inputRef = React.createRef();
@@ -115,7 +121,7 @@ function (_React$Component) {
   };
 
   _proto.renderStyles = function renderStyles() {
-    var inputId = this.props.inputId;
+    var inputId = this.getInputId();
     return isIE() ? React.createElement("style", {
       dangerouslySetInnerHTML: {
         __html: "input#" + inputId + "::-ms-clear {display: none;}"
@@ -132,8 +138,8 @@ function (_React$Component) {
         className = _this$props3.className,
         placeholder = _this$props3.placeholder,
         inputClassName = _this$props3.inputClassName,
-        inputStyle = _this$props3.inputStyle,
-        inputId = _this$props3.inputId;
+        inputStyle = _this$props3.inputStyle;
+    var inputId = this.getInputId();
     var sizerValue = [defaultValue, value, ''].reduce(function (previousValue, currentValue) {
       if (previousValue !== null && previousValue !== undefined) {
         return previousValue;
@@ -157,7 +163,7 @@ function (_React$Component) {
         htmlInputProps = _partitionHTMLProps[0];
 
     htmlInputProps.className = inputClassName;
-    htmlInputProps.id = inputId;
+    htmlInputProps.id = inputId || inputId;
     htmlInputProps.style = nextInputStyle;
     return React.createElement("div", {
       className: className,
@@ -191,7 +197,6 @@ InputAutosize.propTypes = {
   onAutosize: PropTypes.func
 };
 InputAutosize.defaultProps = {
-  minWidth: 1,
-  inputId: '_' + Math.random().toString(36).substr(2, 12)
+  minWidth: 1
 };
 export default InputAutosize;

package/es/InputPicker/styles/common.less

@@ -29,7 +29,7 @@
     position: absolute !important;
   }
 
-  .input-picker-input-sizes;
+  .input-picker-input-sizes();
 
   .@{ns}picker-toggle.@{ns}btn-xs ~ .@{ns}picker-tag-wrapper .@{ns}tag {
     padding-top: 0;
@@ -43,10 +43,10 @@
 }
 
 .@{ns}picker-tag-wrapper {
-  padding-right: @dropdown-toggle-padding-right;
+  margin-right: @dropdown-toggle-padding-right;
 
   .@{ns}picker-cleanable & {
-    padding-right: @dropdown-toggle-padding-right + @picker-toggle-clean-width;
+    margin-right: @dropdown-toggle-padding-right + @picker-toggle-clean-width;
   }
 }
 
@@ -55,7 +55,7 @@
   width: 100%;
 
   &-input {
-    .input-md;
+    .input-md();
 
     .@{tag-picker} & {
       font-size: @font-size-base;

package/es/Loader/styles/common.less

@@ -2,7 +2,7 @@
 @import 'mixin';
 
 .@{ns}loader {
-  .clearfix;
+  .clearfix();
   .loader-size(@loader-default-diameter, @loader-default-content-font-size);
 
   height: @loader-default-diameter;
@@ -14,7 +14,7 @@
     display: inline-block;
     float: left;
 
-    .loader-spin;
+    .loader-spin();
   }
 
   //Loader spin
@@ -57,7 +57,7 @@
     }
 
     .@{ns}loader-content {
-      line-height: unit(@line-height-computed / @loader-default-content-font-size);
+      line-height: unit((@line-height-computed / @loader-default-content-font-size));
       text-align: center;
     }
 

package/es/Loader/styles/mixin.less

@@ -17,7 +17,7 @@
 
     &-content {
       font-size: @font-size;
-      line-height: unit(@diameter / @font-size);
+      line-height: unit((@diameter / @font-size));
     }
 
     &-vertical & {
@@ -25,7 +25,7 @@
     }
 
     &-vertical &-content {
-      line-height: unit(@line-height-computed / @font-size);
+      line-height: unit((@line-height-computed / @font-size));
     }
   }
 }

package/es/Message/styles/common.less

@@ -40,7 +40,7 @@
     h5 {
       margin-top: 0;
       margin-bottom: 0;
-      .ellipsis;
+      .ellipsis();
 
       // When title and description all exist , additional a margin
       & + .@{ns}message-description {
@@ -63,7 +63,7 @@
   // Header
   .@{ns}message-header {
     color: @message-header-color;
-    line-height: unit(round(@message-icon-large-size / @message-title-size, 16));
+    line-height: unit((round(@message-icon-large-size / @message-title-size, 16)));
   }
 
   // Description
@@ -97,7 +97,7 @@
     border: none;
     outline: none !important;
 
-    .icon-font;
+    .icon-font();
 
     &::before {
       content: @default-close-btn-content;

package/es/Modal/BaseModal.js

@@ -296,7 +296,7 @@ function (_React$Component2) {
       container: container
     }, React.createElement("div", {
       ref: this.modalNodeRef,
-      role: rest.role || 'dialog',
+      role: rest.role,
       style: style,
       className: className
     }, backdrop && this.renderBackdrop(), React.createElement(RefHolder, {

package/es/Modal/Modal.js

@@ -55,7 +55,7 @@ function (_React$Component) {
     };
 
     _this.handleShowing = function () {
-      _this.updateModalStyles(_this.dialogElement);
+      _this.updateModalStyles(_this.dialogElement, true);
     };
 
     _this.handleHide = function () {
@@ -93,7 +93,7 @@ function (_React$Component) {
     this.destroyEvent();
   };
 
-  _proto.getBodyStylesByDialog = function getBodyStylesByDialog(dialogElement) {
+  _proto.getBodyStylesByDialog = function getBodyStylesByDialog(dialogElement, entering) {
     var _this$props2 = this.props,
         overflow = _this$props2.overflow,
         drawer = _this$props2.drawer;
@@ -126,7 +126,7 @@ function (_React$Component) {
         /**
          * Header height + Footer height + Dialog margin
          */
-        var excludeHeight = headerHeight + footerHeight + 60;
+        var excludeHeight = headerHeight + footerHeight + (entering ? 76 : 60);
         var bodyHeight = getHeight(window) - excludeHeight;
         var maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
         bodyStyles.maxHeight = maxHeight;
@@ -146,9 +146,9 @@ function (_React$Component) {
     }
   };
 
-  _proto.updateModalStyles = function updateModalStyles(dialogElement) {
+  _proto.updateModalStyles = function updateModalStyles(dialogElement, entering) {
     this.setState({
-      bodyStyles: this.getBodyStylesByDialog(dialogElement)
+      bodyStyles: this.getBodyStylesByDialog(dialogElement, entering)
     });
   };
 

package/es/Modal/ModalDialog.js

@@ -14,7 +14,9 @@ export var modalDialogPropTypes = {
   style: PropTypes.object,
   dialogStyle: PropTypes.object,
   children: PropTypes.node,
-  dialogRef: refType
+  dialogRef: refType,
+  id: PropTypes.string,
+  'aria-labelledby': PropTypes.string
 };
 
 var ModalDialog =

package/es/Modal/styles/common.less

@@ -94,18 +94,18 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .@{ns}modal-header {
-  .clearfix;
+  .clearfix();
 
   padding-right: @line-height-computed;
 
   .@{ns}modal-title {
     font-size: @modal-title-font-size;
-    line-height: unit(@line-height-computed / @modal-title-font-size);
+    line-height: unit((@line-height-computed / @modal-title-font-size));
     width: 100%;
     display: block;
     color: @modal-title-color;
     margin: 0;
-    .ellipsis;
+    .ellipsis();
   }
 }
 
@@ -128,7 +128,7 @@
   border-style: none;
 
   &::before {
-    .icon-font;
+    .icon-font();
 
     content: @default-close-btn-content;
   }
@@ -159,7 +159,7 @@
 .@{ns}modal-footer {
   text-align: right; // right align buttons
   border-top: none;
-  .clearfix; // clear it in case folks use .pull-* classes on buttons
+  .clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
   .@{ns}btn + .@{ns}btn {

package/es/MultiCascader/MultiCascader.js

@@ -524,7 +524,8 @@ function (_React$Component) {
       onClean: createChainedFunction(this.handleClean, onClean),
       cleanable: cleanable && !disabled,
       hasValue: hasValue,
-      active: this.state.active
+      active: this.state.active,
+      "aria-disabled": disabled
     }), selectedElement || locale.placeholder)));
   };
 

package/es/MultiCascader/styles/common.less

@@ -17,7 +17,7 @@
   &-menu .@{ns}check-item.@{ns}check-item-focus,
   &-menu .@{ns}check-item.@{ns}checkbox-checked {
     .@{ns}checkbox-checker > label {
-      .picker-item-active;
+      .picker-item-active();
     }
   }
 

package/es/Nav/styles/common.less

@@ -49,9 +49,9 @@
       cursor: pointer;
       color: @nav-item-font-default-color;
       transition: @nav-item-transition;
-      .ellipsis-basic;
+      .ellipsis-basic();
 
-      .safari-border-radius-overflow-hidden;
+      .safari-border-radius-overflow-hidden();
 
       > .@{ns}icon {
         margin-right: @nav-item-icon-spacing;

package/es/Navbar/styles/common.less

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 .@{ns}navbar {
-  .clearfix;
+  .clearfix();
 }
 
 .@{ns}navbar-header {
@@ -59,7 +59,7 @@
 
   .@{ns}dropdown .@{ns}dropdown-toggle,
   .@{ns}nav-item > .@{ns}nav-item-content {
-    .navbar-default-item-content;
+    .navbar-default-item-content();
   }
 
   .@{ns}nav-item-active > .@{ns}nav-item-content,

package/es/Notification/styles/common.less

@@ -52,12 +52,12 @@
 
   // Title
   &-title {
-    .ellipsis;
+    .ellipsis();
     .ie-text-align(left);
 
     color: @notify-title-font-color;
     font-size: @notify-title-font-size;
-    line-height: unit(@notify-title-icon-size / @notify-title-font-size);
+    line-height: unit((@notify-title-icon-size / @notify-title-font-size));
 
     > p {
       margin: 0;
@@ -72,7 +72,7 @@
   }
 
   &-title-with-icon {
-    .ellipsis;
+    .ellipsis();
   }
 
   // Description
@@ -99,7 +99,7 @@
     cursor: pointer;
 
     &-x::before {
-      .icon-font;
+      .icon-font();
 
       content: @default-close-btn-content;
     }

package/es/Overlay/Overlay.js

@@ -35,7 +35,7 @@ var Overlay = function Overlay(_ref) {
 
 Overlay.propTypes = {
   animation: PropTypes.bool,
-  container: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  container: PropTypes.any,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   onRendered: PropTypes.func,
   className: PropTypes.string,

package/es/Pagination/styles/common.less

@@ -19,12 +19,12 @@
 
     &:not(.@{ns}pagination-btn-disabled) > a {
       transition: @pagination-transition;
-      .button-ripple;
+      .button-ripple();
     }
 
     > a {
       .btn-sm(base);
-      .btn-transition;
+      .btn-transition();
       .btn-subtle-variant(@pagination-hover-bg);
 
       position: relative;