rsuite 4.8.5 → 4.8.9

package/src/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/src/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/src/Overlay/Overlay.tsx

@@ -32,7 +32,7 @@ const Overlay = ({ animation = true, children, transition = Fade, ...rest }: Ove
 
 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/src/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/src/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/src/Panel/Panel.tsx

@@ -18,7 +18,6 @@ class Panel extends React.Component<PanelProps, PanelState> {
     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/src/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/src/Picker/DropdownMenu.tsx

@@ -194,7 +194,8 @@ class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState>
           className={classNames({
             folded: foldedGroupKeys.some(key => key === groupValue)
           })}
-          key={groupValue}
+          key={`group-${groupValue}`}
+          data-key={`group-${groupValue}`}
           onClick={this.handleGroupTitleClick.bind(null, groupValue)}
         >
           {renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue}
@@ -210,6 +211,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState>
 
     return (
       <DropdownMenuItem
+        data-key={itemKey}
         style={style}
         key={itemKey}
         disabled={disabled}

package/src/Picker/propTypes.ts

@@ -12,7 +12,7 @@ export const pickerPropTypes = {
   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/src/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/src/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/src/Picker/test/DropdownMenuSpec.js

@@ -207,4 +207,25 @@ describe('picker -  DropdownMenu', () => {
     );
     assert.ok(instance.className.match(/\bcustom-prefix\b/));
   });
+
+  it('Should have a unique key', () => {
+    const mockData = Array.from({ length: 20 }, (_v, i) => ({
+      value: i + 1,
+      name: `TEST${i + 1}`,
+      groupValue: i + 1
+    }));
+
+    const instance = getDOMNode(
+      <DropdownMenu
+        group
+        labelKey="name"
+        valueKey="value"
+        data={getDataGroupBy(mockData, 'groupValue')}
+        classPrefix={classPrefix}
+        dropdownMenuItemComponentClass={DropdownMenuItem}
+      />
+    );
+
+    assert.equal(instance.querySelectorAll('[data-key="1"]').length, 1);
+  });
 });

package/src/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/src/Popover/test/PopoverStylesSpec.js

@@ -38,7 +38,7 @@ describe('Popover styles', () => {
       createTestContainer()
     );
     const dom = document.querySelector('.popover-top-start');
-    assert.equal(getStyle(dom, 'marginTop'), '-6px', 'Popover margin value');
+    assert.equal(getStyle(dom, 'marginTop'), '-8px', 'Popover margin value');
     const arrowDom = dom.querySelector('.rs-popover-arrow');
     assert.equal(getStyle(arrowDom, 'bottom'), '-6px', 'Popover arrow bottom value');
     assert.equal(getStyle(arrowDom, 'marginLeft'), '-6px', 'Popover arrow bottom value');

package/src/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/src/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/src/Rate/styles/common.less

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

package/src/SelectPicker/SelectPicker.tsx

@@ -438,6 +438,7 @@ class SelectPicker extends React.Component<SelectPickerProps, SelectPickerState>
             cleanable={cleanable && !disabled}
             hasValue={hasValue}
             active={this.state.active}
+            aria-disabled={disabled}
           >
             {selectedElement || locale.placeholder}
           </PickerToggle>

package/src/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/src/SelectPicker/test/SelectPickerSpec.js

@@ -60,6 +60,7 @@ describe('SelectPicker', () => {
     const instance = getDOMNode(<Dropdown disabled />);
     const instanceDom = instance;
     assert.ok(instanceDom.className.match(/\bdisabled\b/));
+    assert.equal(instance.querySelector('[role=combobox]').getAttribute('aria-disabled'), 'true');
   });
 
   it('Should output a button', () => {

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