rsuite 4.8.5 → 4.8.9

package/lib/Grid/styles/common.less

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

package/lib/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/lib/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/lib/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/lib/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/lib/InputGroup/styles/common.less

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

package/lib/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/lib/InputPicker/InputAutosize.js

@@ -48,7 +48,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();
@@ -129,7 +135,7 @@ function (_React$Component) {
   };
 
   _proto.renderStyles = function renderStyles() {
-    var inputId = this.props.inputId;
+    var inputId = this.getInputId();
     return (0, _utils.isIE)() ? React.createElement("style", {
       dangerouslySetInnerHTML: {
         __html: "input#" + inputId + "::-ms-clear {display: none;}"
@@ -146,8 +152,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;
@@ -170,7 +176,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,
@@ -204,8 +210,7 @@ InputAutosize.propTypes = {
   onAutosize: _propTypes.default.func
 };
 InputAutosize.defaultProps = {
-  minWidth: 1,
-  inputId: '_' + Math.random().toString(36).substr(2, 12)
+  minWidth: 1
 };
 var _default = InputAutosize;
 exports.default = _default;

package/lib/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/lib/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/lib/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/lib/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/lib/Modal/BaseModal.js

@@ -315,7 +315,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/lib/Modal/Modal.js

@@ -85,7 +85,7 @@ function (_React$Component) {
     };
 
     _this.handleShowing = function () {
-      _this.updateModalStyles(_this.dialogElement);
+      _this.updateModalStyles(_this.dialogElement, true);
     };
 
     _this.handleHide = function () {
@@ -123,7 +123,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;
@@ -156,7 +156,7 @@ function (_React$Component) {
         /**
          * Header height + Footer height + Dialog margin
          */
-        var excludeHeight = headerHeight + footerHeight + 60;
+        var excludeHeight = headerHeight + footerHeight + (entering ? 76 : 60);
         var bodyHeight = (0, _domLib.getHeight)(window) - excludeHeight;
         var maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
         bodyStyles.maxHeight = maxHeight;
@@ -176,9 +176,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/lib/Modal/ModalDialog.js

@@ -32,7 +32,9 @@ var modalDialogPropTypes = {
   style: _propTypes.default.object,
   dialogStyle: _propTypes.default.object,
   children: _propTypes.default.node,
-  dialogRef: _utils.refType
+  dialogRef: _utils.refType,
+  id: _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string
 };
 exports.modalDialogPropTypes = modalDialogPropTypes;
 

package/lib/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/lib/MultiCascader/MultiCascader.js

@@ -550,7 +550,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
     }), selectedElement || locale.placeholder)));
   };
 

package/lib/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/lib/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/lib/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/lib/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/lib/Overlay/Overlay.js

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

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

package/lib/Pagination/styles/mixin.less

@@ -1,14 +1,12 @@
 .pagination-active(@font-color) {
-  .active() {
-    color: @font-color;
-    background-color: transparent;
-  }
-  .active;
+  color: @font-color;
+  background-color: transparent;
 
   &:hover,
   &:focus,
   &.focus {
-    .active;
+    color: @font-color;
+    background-color: transparent;
   }
 
   &:active {
@@ -16,7 +14,8 @@
     &:hover,
     &:focus,
     &.focus {
-      .active;
+      color: @font-color;
+      background-color: transparent;
     }
   }
 }

package/lib/Panel/Panel.js

@@ -186,7 +186,6 @@ Panel.propTypes = {
   shaded: _propTypes.default.bool,
   bodyFill: _propTypes.default.bool,
   header: _propTypes.default.any,
-  id: _propTypes.default.oneOf([_propTypes.default.number, _propTypes.default.string]),
   defaultExpanded: _propTypes.default.bool,
   expanded: _propTypes.default.bool,
   eventKey: _propTypes.default.any,

package/lib/Panel/styles/common.less

@@ -29,7 +29,7 @@
   &-heading {
     color: @panel-heading-color;
     font-size: @panel-heading-font-size;
-    line-height: unit(@line-height-computed / @panel-heading-font-size);
+    line-height: unit((@line-height-computed / @panel-heading-font-size));
   }
 
   &-title {

package/lib/Picker/DropdownMenu.js

@@ -214,7 +214,8 @@ function (_React$Component) {
             return key === groupValue;
           })
         }),
-        key: groupValue,
+        key: "group-" + groupValue,
+        "data-key": "group-" + groupValue,
         onClick: this.handleGroupTitleClick.bind(null, groupValue)
       }, renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue);
     } else if ((0, _isUndefined2.default)(value) && !(0, _isUndefined2.default)(item[_getDataGroupBy.KEY_GROUP])) {
@@ -229,6 +230,7 @@ function (_React$Component) {
     });
     var focus = !(0, _isUndefined2.default)(focusItemValue) && (0, _shallowEqual.default)(focusItemValue, value);
     return React.createElement(DropdownMenuItem, {
+      "data-key": itemKey,
       style: style,
       key: itemKey,
       disabled: disabled,

package/lib/Picker/propTypes.js

@@ -23,7 +23,7 @@ var pickerPropTypes = (0, _extends2.default)({}, _propTypes2.animationPropTypes,
   appearance: _propTypes.default.oneOf(['default', 'subtle']),
   block: _propTypes.default.bool,
   containerPadding: _propTypes.default.number,
-  container: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  container: _propTypes.default.any,
   disabled: _propTypes.default.bool,
   toggleComponentClass: _propTypes.default.elementType,
   menuClassName: _propTypes.default.string,