rsuite 4.8.5 → 4.8.9

package/es/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/es/Panel/Panel.js

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

package/es/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/es/Picker/DropdownMenu.js

@@ -187,7 +187,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 (_isUndefined(value) && !_isUndefined(item[KEY_GROUP])) {
@@ -202,6 +203,7 @@ function (_React$Component) {
     });
     var focus = !_isUndefined(focusItemValue) && shallowEqual(focusItemValue, value);
     return React.createElement(DropdownMenuItem, {
+      "data-key": itemKey,
       style: style,
       key: itemKey,
       disabled: disabled,

package/es/Picker/propTypes.js

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

package/es/Picker/styles/common.less

@@ -52,7 +52,7 @@
 
   &-value-list {
     flex: 0 1 auto;
-    .ellipsis-basic;
+    .ellipsis-basic();
     .ie-display(block);
     .ie-max-width(100%);
   }
@@ -96,7 +96,7 @@
   }
 
   .@{ns}picker-subtle & {
-    .btn-subtle;
+    .btn-subtle();
 
     transition: none;
 
@@ -109,16 +109,16 @@
 
 /* stylelint-disable-next-line */ // Custom button sizes
 .@{ns}picker-toggle.@{ns}btn {
-  .picker-button-caret-md;
-  .tag-picker-search-input-md;
-  .date-picker-button-caret-md;
+  .picker-button-caret-md();
+  .tag-picker-search-input-md();
+  .date-picker-button-caret-md();
   .date-picker-button-size(base);
 
   &-lg {
-    .picker-button-caret-lg;
+    .picker-button-caret-lg();
     .picker-default-button-reset-padding-left(large);
-    .tag-picker-search-input-lg;
-    .date-picker-button-caret-lg;
+    .tag-picker-search-input-lg();
+    .date-picker-button-caret-lg();
     .date-picker-button-size(large);
 
     .btn-lg(base);
@@ -129,46 +129,46 @@
   }
 
   &-md {
-    .picker-button-caret-md;
+    .picker-button-caret-md();
     .picker-default-button-reset-padding-left(base);
-    .tag-picker-search-input-md;
-    .date-picker-button-caret-md;
+    .tag-picker-search-input-md();
+    .date-picker-button-caret-md();
     .date-picker-button-size(base);
   }
 
   &-sm {
     .btn-sm(base);
 
-    .picker-button-caret-sm;
+    .picker-button-caret-sm();
     .picker-default-button-reset-padding-left(small);
-    .tag-picker-search-input-sm;
-    .date-picker-button-caret-sm;
+    .tag-picker-search-input-sm();
+    .date-picker-button-caret-sm();
     .date-picker-button-size(small);
   }
 
   &-xs {
     .btn-xs(base);
 
-    .picker-button-caret-xs;
+    .picker-button-caret-xs();
     .picker-default-button-reset-padding-left(extra-small);
-    .tag-picker-search-input-xs;
-    .date-picker-button-caret-xs;
+    .tag-picker-search-input-xs();
+    .date-picker-button-caret-xs();
     .date-picker-button-size(extra-small);
   }
 }
 
 /* stylelint-disable-next-line */ // Custom button
 .@{ns}picker-toggle {
-  .picker-default-toggle;
-  .picker-subtle-toggle;
+  .picker-default-toggle();
+  .picker-subtle-toggle();
 
   width: 100%;
   text-align: left;
-  .ellipsis;
+  .ellipsis();
 
   &-value {
     display: block;
-    .ellipsis;
+    .ellipsis();
   }
 
   .@{ns}picker-cleanable & {
@@ -206,7 +206,7 @@
 // Picker toggle caret
 .@{ns}picker-toggle-caret {
   // Extend  Dropdown toggle caret style
-  .dropdown-toggle-caret-common;
+  .dropdown-toggle-caret-common();
   .set-dropdown-caret(~'@{ns}picker');
 
   color: @picker-default-toggle-caret-color;
@@ -251,7 +251,7 @@
     padding: (@picker-menu-padding - @border-radius-base) @picker-menu-padding @picker-menu-padding;
 
     .@{ns}picker-search-bar-input {
-      .default-input;
+      .default-input();
 
       min-width: @picker-content-min-width;
       padding-right: @picker-search-bar-icon-width +
@@ -266,9 +266,9 @@
       width: @picker-search-bar-icon-width;
       color: @B400;
       font-size: @font-size-base;
-      line-height: unit(@line-height-computed / @font-size-base);
-      top: @picker-menu-padding - @border-radius-base + @padding-base-input-vertical;
-      right: @picker-menu-padding + @padding-base-input-horizontal;
+      line-height: unit((@line-height-computed / @font-size-base));
+      top: (@picker-menu-padding - @border-radius-base + @padding-base-input-vertical);
+      right: (@picker-menu-padding + @padding-base-input-horizontal);
 
       .@{ns}@{tree-picker-prefix}-menu&,
       .@{ns}@{check-tree-picker-prefix}-menu& {
@@ -306,7 +306,7 @@
 .@{ns}check-item {
   &:not(.@{ns}checkbox-disabled):hover,
   &-focus {
-    .picker-item-hover;
+    .picker-item-hover();
   }
 
   .@{ns}checkbox-checker {
@@ -323,7 +323,7 @@
 
       /* stylelint-disable-next-line */ // This class name provide by Virtualized.
       .ReactVirtualized__Grid & {
-        .ellipsis-basic;
+        .ellipsis-basic();
       }
 
       .@{ns}checkbox-disabled& {

package/es/Picker/styles/mixin.less

@@ -76,7 +76,7 @@
 
   /* stylelint-disable-next-line */ // This class name provide by Virtualized.
   .ReactVirtualized__Grid & {
-    .ellipsis-basic;
+    .ellipsis-basic();
   }
 }
 
@@ -353,7 +353,7 @@
 // Default picker toggle
 .picker-default-toggle() {
   .@{ns}picker-default & {
-    .dropdown-toggle;
+    .dropdown-toggle();
 
     color: @picker-default-toggle-font-color;
     border: @picker-default-toggle-border-width solid @picker-default-toggle-border-color;
@@ -374,7 +374,7 @@
 // Subtle picker toggle
 .picker-subtle-toggle {
   .@{ns}picker-subtle & {
-    .dropdown-toggle;
+    .dropdown-toggle();
   }
 
   .@{ns}picker-subtle.@{ns}picker-disabled & {

package/es/Popover/styles/common.less

@@ -66,7 +66,7 @@
 
 // Common style for .placement-top*
 .@{ns}popover[class*='placement-top'] {
-  margin-top: -@popover-arrow-width;
+  margin-top: -(@popover-arrow-width + 2px);
   .set-translate-transition(0, -@popover-translate-distance);
 
   > .@{ns}popover-arrow {
@@ -86,7 +86,7 @@
 /* rtl:begin:ignore */
 // Common style for .placement-right*
 .@{ns}popover[class*='placement-right'] {
-  margin-left: @popover-arrow-width;
+  margin-left: (@popover-arrow-width + 2px);
   .set-translate-transition(@popover-translate-distance, 0);
 
   > .@{ns}popover-arrow {
@@ -105,7 +105,7 @@
 
 // Common style for .placement-left*
 .@{ns}popover[class*='placement-left'] {
-  margin-left: -@popover-arrow-width;
+  margin-left: -(@popover-arrow-width + 2px);
   .set-translate-transition(-@popover-translate-distance, 0);
 
   > .@{ns}popover-arrow {
@@ -126,7 +126,7 @@
 
 // Common style for .placement-bottom*
 .@{ns}popover[class*='placement-bottom'] {
-  margin-top: @popover-arrow-width;
+  margin-top: (@popover-arrow-width + 2px);
   .set-translate-transition(0, @popover-translate-distance);
 
   > .@{ns}popover-arrow {

package/es/Progress/styles/common.less

@@ -12,7 +12,7 @@
   &-icon-fail,
   &-info-status {
     font-size: @progress-font-size;
-    line-height: unit(@line-height-computed / @progress-font-size);
+    line-height: unit((@line-height-computed / @progress-font-size));
   }
 }
 
@@ -48,7 +48,7 @@
     bottom: 0;
     text-align: center;
     font-size: @progress-font-size;
-    line-height: unit(@info-height / @progress-font-size);
+    line-height: unit((@info-height / @progress-font-size));
     height: @info-height;
     color: @progress-info-text-color;
   }
@@ -112,7 +112,7 @@
 
   &-outer {
     flex: 1 1 auto;
-    border-radius: @progress-bar-height / 2;
+    border-radius: (@progress-bar-height / 2);
     overflow: hidden;
     // Make sure outer vertical-align:center;
     vertical-align: middle;
@@ -120,12 +120,12 @@
 
   &-inner {
     background: @progress-bar-bg;
-    border-radius: @progress-bar-height / 2;
+    border-radius: (@progress-bar-height / 2);
   }
 
   &-bg {
     background-color: @progress-bar-fill-bg;
-    border-radius: @progress-bar-height / 2;
+    border-radius: (@progress-bar-height / 2);
     transition: @progress-bg-transition;
     transition-property: width, color;
   }

package/es/Radio/styles/common.less

@@ -4,7 +4,7 @@
 @import 'mixin';
 
 .@{ns}radio {
-  .radio-checkbox-common;
+  .radio-checkbox-common();
 
   &-group-inline {
     display: inline-block;
@@ -63,8 +63,8 @@
 .@{ns}radio-checker {
   padding-top: 10px;
   padding-bottom: 10px;
-  padding-left: @radio-sense-width * 2 + @radio-width-height;
-  min-height: @radio-sense-width * 2 + @radio-width-height;
+  padding-left: (@radio-sense-width * 2 + @radio-width-height);
+  min-height: (@radio-sense-width * 2 + @radio-width-height);
   line-height: 1;
   position: relative;
 }
@@ -153,8 +153,8 @@
     width: @radio-inner-width-height;
     height: @radio-inner-width-height;
     background: @radio-inner-checked-color;
-    margin-top: (@radio-width-height - @radio-inner-width-height) / 2;
-    margin-left: (@radio-width-height - @radio-inner-width-height) / 2;
+    margin-top: ((@radio-width-height - @radio-inner-width-height) / 2);
+    margin-left: ((@radio-width-height - @radio-inner-width-height) / 2);
     border-radius: @radio-border-radius;
     opacity: 0;
     transform: scale(0);

package/es/Rate/styles/common.less

@@ -85,5 +85,5 @@
   }
 }
 
-.generate-spectrum-rates;
-.generate-sizes-rate;
+.generate-spectrum-rates();
+.generate-sizes-rate();

package/es/SelectPicker/SelectPicker.js

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

package/es/SelectPicker/styles/common.less

@@ -9,7 +9,7 @@
 
 // Menu Items
 .@{slns}-menu-items {
-  .picker-menu-items-reset;
+  .picker-menu-items-reset();
   .picker-menu-group-common(@select-picker-prefix);
   .picker-menu-group-title(@select-picker-prefix);
   .picker-menu-group-closed(@select-picker-prefix);
@@ -17,17 +17,17 @@
 
 // Menu item
 .@{slns}-menu-item {
-  .picker-select-item;
+  .picker-select-item();
 
   &:not(&-disabled):hover,
   &&-focus {
-    .picker-item-hover;
+    .picker-item-hover();
 
     text-decoration: none;
   }
 
   &&-active {
-    .picker-item-active;
+    .picker-item-active();
 
     &,
     &:hover {

package/es/Sidenav/styles/common.less

@@ -98,7 +98,7 @@
     // Set  the ripple effect of items.
     &-item:not(.@{ns}dropdown-item-submenu) > .@{ns}dropdown-item-content,
     &-item-submenu > .@{ns}dropdown-item-content > .@{ns}dropdown-menu-toggle {
-      .button-ripple;
+      .button-ripple();
     }
 
     // Remove the ripple effect of disabled items.
@@ -125,7 +125,7 @@
 
     // Dropdown menu
     > .@{ns}dropdown-menu {
-      .reset-sidenav-dropdown-menu;
+      .reset-sidenav-dropdown-menu();
 
       // Submenu
       .@{ns}dropdown-item-submenu > .@{ns}dropdown-item-content {
@@ -137,7 +137,7 @@
         }
 
         > .@{ns}dropdown-menu {
-          .reset-sidenav-dropdown-menu;
+          .reset-sidenav-dropdown-menu();
         }
 
         &:hover {

package/es/Slider/styles/common.less

@@ -28,14 +28,14 @@
 
   &-with-mark:not(&-vertical) {
     //White space for mark
-    margin-bottom: @line-height-computed + @slider-mark-margin-top;
+    margin-bottom: (@line-height-computed + @slider-mark-margin-top);
   }
 }
 
 // Mark
 .@{ns}slider-mark {
   position: absolute;
-  top: @slider-bar-side-length + @slider-mark-margin-top;
+  top: (@slider-bar-side-length + @slider-mark-margin-top);
   left: -2px;
   white-space: nowrap;
 
@@ -56,7 +56,7 @@
 // Bar
 .@{ns}slider-bar {
   height: @slider-bar-side-length;
-  border-radius: @slider-bar-side-length / 2;
+  border-radius: (@slider-bar-side-length / 2);
   background-color: @slider-bar-default-bg;
   cursor: pointer;
 
@@ -155,12 +155,12 @@
 .@{ns}slider-progress-bar {
   position: absolute;
   height: @slider-bar-side-length;
-  border-radius: @slider-bar-side-length / 2 0 0 @slider-bar-side-length / 2;
+  border-radius: (@slider-bar-side-length / 2) 0 0 (@slider-bar-side-length / 2);
   background-color: @slider-progress-bar-bg;
 
   .@{ns}slider-vertical & {
     width: @slider-bar-side-length;
-    border-radius: @slider-bar-side-length / 2 @slider-bar-side-length / 2 0 0;
+    border-radius: (@slider-bar-side-length / 2) (@slider-bar-side-length / 2) 0 0;
   }
 }
 
@@ -177,7 +177,7 @@
     border-radius: 50%;
     border: @slider-handle-border-width solid @slider-handle-default-border-color;
     background-color: @slider-handle-default-bg;
-    margin-left: -@slider-handle-diameter / 2;
+    margin-left: -(@slider-handle-diameter / 2);
     cursor: pointer;
     /* stylelint-disable */ //Formatted by prettier
     transition: box-shadow @slider-handle-transition, background-color @slider-handle-transition,
@@ -195,8 +195,8 @@
   }
 
   .@{ns}slider-vertical &::before {
-    left: (@slider-handle-diameter - @slider-bar-side-length)/2;
-    margin-top: -@slider-handle-diameter / 2;
+    left: ((@slider-handle-diameter - @slider-bar-side-length)/2);
+    margin-top: -(@slider-handle-diameter / 2);
   }
 }
 
@@ -220,7 +220,7 @@
   // Reset all setting
   .@{ns}slider-mark {
     top: -8px;
-    left: @slider-bar-side-length + @slider-mark-margin-top;
+    left: (@slider-bar-side-length + @slider-mark-margin-top);
 
     &-content {
       margin-left: auto;

package/es/Steps/styles/common.less

@@ -41,13 +41,13 @@
         text-indent: -9999px;
 
         &::before {
-          .icon-font;
+          .icon-font();
 
-          width: @steps-icon-diameter - 2px;
-          height: @steps-icon-diameter - 2px;
+          width: (@steps-icon-diameter - 2px);
+          height: (@steps-icon-diameter - 2px);
           font-size: @steps-icon-size-default-font-size;
           // Minus 2px border width;
-          line-height: unit((@steps-icon-diameter - 2px)/12);
+          line-height: unit(((@steps-icon-diameter - 2px)/12));
           display: block;
           position: absolute;
           top: 0;
@@ -189,7 +189,7 @@
 
     // There is a 10px spacing between each item.
     &:not(:first-child) {
-      padding-left: @steps-icon-space-width + @steps-item-spacing;
+      padding-left: (@steps-icon-space-width + @steps-item-spacing);
 
       .@{ns}steps-item-icon-wrapper {
         left: @steps-item-spacing;
@@ -198,13 +198,13 @@
   }
 
   .@{ns}steps-item-content {
-    height: @steps-title-font-size * @steps-title-line-height;
+    height: (@steps-title-font-size * @steps-title-line-height);
   }
 
   .@{ns}steps-item-title {
     &::after {
       content: '';
-      top: @steps-icon-diameter / 2;
+      top: (@steps-icon-diameter / 2);
       left: 100%;
       width: 9999px;
       border-top-width: 1px;
@@ -231,7 +231,7 @@
   .@{ns}steps-item-tail {
     top: @steps-icon-space-width;
     bottom: 0;
-    left: @steps-icon-diameter / 2;
+    left: (@steps-icon-diameter / 2);
     border-left-width: 1px;
     border-left-style: solid;
   }
@@ -247,11 +247,11 @@
   }
 
   &.@{ns}steps-horizontal .@{ns}steps-item:not(:first-child) {
-    padding-left: @small-steps-icon-space-width + @steps-icon-spacing;
+    padding-left: (@small-steps-icon-space-width + @steps-icon-spacing);
   }
 
   &.@{ns}steps-vertical .@{ns}steps-item-tail {
-    left: @small-steps-icon-diameter / 2;
+    left: (@small-steps-icon-diameter / 2);
   }
 
   &.@{ns}steps-horizontal .@{ns}steps-item-title::after {
@@ -283,8 +283,8 @@
   // Finish status show check mark.
   .@{ns}steps-item-status-finish .@{ns}steps-item-icon-wrapper:not(.@{ns}steps-item-custom-icon) .@{ns}steps-item-icon::before,
   .@{ns}steps-item-status-error .@{ns}steps-item-icon-wrapper:not(.@{ns}steps-item-custom-icon) .@{ns}steps-item-icon::before {
-    width: @small-steps-icon-diameter - 2px;
-    height: @small-steps-icon-diameter - 2px;
-    line-height: unit((@small-steps-icon-diameter - 2px)/12);
+    width: (@small-steps-icon-diameter - 2px);
+    height: (@small-steps-icon-diameter - 2px);
+    line-height: unit(((@small-steps-icon-diameter - 2px)/12));
   }
 }

package/es/Table/styles/common.less

@@ -27,7 +27,7 @@
     border-bottom: 1px solid @table-border-color;
 
     &.virtualized {
-      .pointer-event-none;
+      .pointer-event-none();
     }
   }
 
@@ -130,7 +130,7 @@
     background-color: @table-loader-backdrop-color;
     opacity: 0;
     transition: opacity @table-loader-transition;
-    .pointer-event-none;
+    .pointer-event-none();
   }
 
   &-loader {
@@ -143,7 +143,7 @@
 
     &-icon {
       .set-side-length(@loader-default-diameter);
-      .loader-spin;
+      .loader-spin();
 
       display: inline-block;
       position: relative;
@@ -192,7 +192,7 @@
     &-content {
       padding: @table-body-content-padding-vertical @table-content-padding-horizontal;
 
-      .ellipsis;
+      .ellipsis();
     }
 
     &-header &-content {
@@ -239,7 +239,7 @@
   }
 
   &-column-resize-spanner {
-    .column-resize-spanner;
+    .column-resize-spanner();
 
     border-left: @table-column-resize-spanner-gap-width solid @table-spanner-background;
     box-sizing: content-box;
@@ -291,10 +291,6 @@
       background: @table-body-background;
     }
 
-    &-fixed-right {
-      margin-left: @table-scrollbar-width;
-    }
-
     &-shadow,
     &-left-shadow {
       box-shadow: 3px @table-table-cell-fixed-shadow /* rtl:ignore */;
@@ -315,7 +311,7 @@
     z-index: @zindex-table-mouse-area;
 
     > span {
-      .column-resize-spanner;
+      .column-resize-spanner();
 
       background-color: @table-resize-mouse-color;
       position: absolute;

package/es/Tag/styles/common.less

@@ -29,7 +29,7 @@
     font-size: 12px;
 
     &::after {
-      .icon-font;
+      .icon-font();
 
       content: @default-close-btn-content;
     }
@@ -53,4 +53,4 @@
   margin-left: @tag-gap;
 }
 
-.generate-spectrum-tags;
+.generate-spectrum-tags();

package/es/TagPicker/styles/common.less

@@ -18,12 +18,9 @@
   }
 
   .@{ns}tag {
-    position: relative;
-    // make sure tag in front of toggle
-    z-index: @zindex-picker-toggle + 1;
     max-width: ~'calc(100% - @{tag-picker-content-padding-horizontal})';
     vertical-align: top;
-    .ellipsis-basic;
+    .ellipsis-basic();
   }
 
   .@{ns}picker-search-input,
@@ -41,6 +38,9 @@
   }
 
   .@{ns}picker-tag-wrapper {
+    position: relative;
+    // make sure tag in front of toggle
+    z-index: @zindex-picker-toggle + 1;
     padding-bottom: @tag-picker-content-padding-vertical;
   }