rsuite 4.8.8 → 4.8.9

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

@@ -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;
   }
 }
 

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/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/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/Table/styles/common.less

@@ -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 */;

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

@@ -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;
   }
 }
 

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/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/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,

package/lib/Table/styles/common.less

@@ -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 */;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.8.8",
+  "version": "4.8.9",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -63,7 +63,7 @@
     "react-lifecycles-compat": "^3.0.4",
     "react-virtualized": "^9.21.0",
     "recompose": "^0.30.0",
-    "rsuite-table": "^3.14.2",
+    "rsuite-table": "^3.14.3",
     "schema-typed": "^1.5.1"
   },
   "peerDependencies": {

package/src/Drawer/test/DrawerSpec.js

@@ -11,6 +11,7 @@ describe('Drawer', () => {
       </Drawer>
     );
     assert.ok(instance.querySelectorAll('.rs-drawer.rs-drawer-right'));
+    assert.ok(instance.querySelector('[role="dialog"]'));
   });
 
   it('Should be full', () => {
@@ -36,6 +37,19 @@ describe('Drawer', () => {
     assert.ok(instance.querySelector('.rs-drawer.custom'));
   });
 
+  it('Should accept id and aria-labelledby attribute', () => {
+    const instance = getDOMNode(
+      <Drawer show id="drawer" aria-labelledby="drawer-title">
+        <h4 id="drawer-title">My Drawer</h4>
+        <p>message</p>
+      </Drawer>
+    );
+
+    const dialog = instance.querySelector('[role="dialog"]');
+    assert.equal(dialog.getAttribute('id'), 'drawer');
+    assert.equal(dialog.getAttribute('aria-labelledby'), 'drawer-title');
+  });
+
   it('Should have a custom style', () => {
     const fontSize = '12px';
     const instance = getDOMNode(<Drawer style={{ fontSize }} show />);

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

@@ -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;
   }
 }
 

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/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/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/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/Table/styles/common.less

@@ -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 */;