rsuite 4.8.5 → 4.8.9

package/src/Dropdown/Dropdown.tsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
 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';
@@ -15,7 +16,8 @@ import {
   isOneOf,
   getUnhandledProps,
   defaultProps,
-  placementPolyfill
+  placementPolyfill,
+  getDOMNode
 } from '../utils';
 import { SidenavContext } from '../Sidenav/Sidenav';
 import { PLACEMENT_8 } from '../constants';
@@ -72,12 +74,13 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     trigger: 'click',
     tabIndex: 0
   };
-
+  rootRef: React.RefObject<any>;
   constructor(props: DropdownProps) {
     super(props);
     this.state = {
       open: props.open
     };
+    this.rootRef = React.createRef();
   }
 
   getOpen() {
@@ -99,8 +102,13 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
   };
 
   handleRootClose = (event: React.SyntheticEvent) => {
-    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 });
     this.props.onToggle?.(false);
     this.props.onClose?.();
@@ -250,7 +258,13 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     });
 
     return (
-      <Component {...dropdownProps} style={style} className={classes} role="menu">
+      <Component
+        ref={this.rootRef}
+        {...dropdownProps}
+        style={style}
+        className={classes}
+        role="menu"
+      >
         {menu}
         {toggle}
       </Component>

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

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

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

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

package/src/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/src/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/src/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/src/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/src/Input/test/InputStylesSpec.js

@@ -13,12 +13,4 @@ describe('Input styles', () => {
     inChrome &&
       assert.equal(getStyle(dom, 'border'), `1px solid ${toRGB('#e5e5ea')}`, 'Input border');
   });
-
-  it('Textarea should render the correct styles', () => {
-    const instanceRef = React.createRef();
-    ReactDOM.render(<Input ref={instanceRef} componentClass="textarea" />, createTestContainer());
-    const dom = getDOMNode(instanceRef.current);
-    assert.equal(getStyle(dom, 'minWidth'), '300px', 'Textarea min-width');
-    assert.equal(getStyle(dom, 'minHeight'), '76px', 'Textarea min-height');
-  });
 });

package/src/InputGroup/styles/common.less

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

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

@@ -36,6 +36,7 @@ export interface InputAutosizeProps {
 }
 
 interface InputAutosizeState {
+  inputId: string;
   inputWidth: number;
 }
 
@@ -54,12 +55,7 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
     onAutosize: PropTypes.func
   };
   static defaultProps = {
-    minWidth: 1,
-    inputId:
-      '_' +
-      Math.random()
-        .toString(36)
-        .substr(2, 12)
+    minWidth: 1
   };
 
   inputRef: React.RefObject<any>;
@@ -69,6 +65,11 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
   constructor(props) {
     super(props);
     this.state = {
+      inputId:
+        '_' +
+        Math.random()
+          .toString(36)
+          .substr(2, 12),
       inputWidth: props.minWidth
     };
 
@@ -81,6 +82,10 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
     return this.inputRef.current;
   }
 
+  getInputId = () => {
+    return this.props.inputId || this.state.inputId;
+  };
+
   componentDidMount() {
     this.copyInputStyles();
     this.updateInputWidth();
@@ -135,7 +140,7 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
   }
 
   renderStyles() {
-    const { inputId } = this.props;
+    const inputId = this.getInputId();
     return isIE() ? (
       <style
         dangerouslySetInnerHTML={{
@@ -153,10 +158,10 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
       className,
       placeholder,
       inputClassName,
-      inputStyle,
-      inputId
+      inputStyle
     } = this.props;
 
+    const inputId = this.getInputId();
     const sizerValue = [defaultValue, value, ''].reduce((previousValue, currentValue) => {
       if (previousValue !== null && previousValue !== undefined) {
         return previousValue;
@@ -178,7 +183,7 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
     const [htmlInputProps] = partitionHTMLProps(this.props);
 
     htmlInputProps.className = inputClassName;
-    htmlInputProps.id = inputId;
+    htmlInputProps.id = inputId || inputId;
     htmlInputProps.style = nextInputStyle;
 
     return (

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

@@ -269,12 +269,7 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
 
     return (
       <Portal ref={this.setMountNodeRef} container={container}>
-        <div
-          ref={this.modalNodeRef}
-          role={rest.role || 'dialog'}
-          style={style}
-          className={className}
-        >
+        <div ref={this.modalNodeRef} role={rest.role} style={style} className={className}>
           {backdrop && this.renderBackdrop()}
           <RefHolder ref={this.dialogRef}>{dialog}</RefHolder>
         </div>

package/src/Modal/Modal.tsx

@@ -94,7 +94,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
     this.destroyEvent();
   }
 
-  getBodyStylesByDialog(dialogElement?: HTMLElement) {
+  getBodyStylesByDialog(dialogElement?: HTMLElement, entering?: boolean) {
     const { overflow, drawer } = this.props;
     const node = dialogElement || this.dialogElement;
     const scrollHeight = node ? node.scrollHeight : 0;
@@ -127,7 +127,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         /**
          * Header height + Footer height + Dialog margin
          */
-        const excludeHeight = headerHeight + footerHeight + 60;
+        const excludeHeight = headerHeight + footerHeight + (entering ? 76 : 60);
         const bodyHeight = getHeight(window) - excludeHeight;
         const maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
         bodyStyles.maxHeight = maxHeight;
@@ -155,7 +155,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
     bindElementResize(this.contentElement, this.handleResize);
   };
   handleShowing = () => {
-    this.updateModalStyles(this.dialogElement);
+    this.updateModalStyles(this.dialogElement, true);
   };
   handleHide = () => {
     this.destroyEvent();
@@ -179,8 +179,8 @@ class Modal extends React.Component<ModalProps, ModalState> {
     }
   }
 
-  updateModalStyles(dialogElement: HTMLElement) {
-    this.setState({ bodyStyles: this.getBodyStylesByDialog(dialogElement) });
+  updateModalStyles(dialogElement: HTMLElement, entering?: boolean) {
+    this.setState({ bodyStyles: this.getBodyStylesByDialog(dialogElement, entering) });
   }
 
   addPrefix = (name: string) => prefix(this.props.classPrefix)(name);

package/src/Modal/ModalDialog.tsx

@@ -14,7 +14,9 @@ export const modalDialogPropTypes = {
   style: PropTypes.object,
   dialogStyle: PropTypes.object,
   children: PropTypes.node,
-  dialogRef: refType
+  dialogRef: refType,
+  id: PropTypes.string,
+  'aria-labelledby': PropTypes.string
 };
 
 class ModalDialog extends React.Component<ModalDialogProps> {

package/src/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/src/Modal/test/ModalSpec.js

@@ -5,6 +5,19 @@ import { getInstance } from '@test/testUtils';
 import Modal from '../Modal';
 
 describe('Modal', () => {
+  it('Should render exactly one element with dialog role', () => {
+    const instance = getInstance(
+      <Modal show>
+        <p>message</p>
+      </Modal>
+    );
+
+    assert.notOk(
+      instance.modalRef.current.getDialogElement().parentNode.closest('[role="dialog"]')
+    );
+    assert.equal(instance.modalRef.current.getDialogElement().getAttribute('role'), 'dialog');
+  });
+
   it('Should render the modal content', () => {
     const instance = getInstance(
       <Modal show>

package/src/MultiCascader/MultiCascader.tsx

@@ -536,6 +536,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
             cleanable={cleanable && !disabled}
             hasValue={hasValue}
             active={this.state.active}
+            aria-disabled={disabled}
           >
             {selectedElement || locale.placeholder}
           </PickerToggle>

package/src/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/src/MultiCascader/test/MultiCascaderSpec.js

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

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