rsuite 4.10.2 → 4.10.6

package/src/Cascader/Cascader.tsx

@@ -69,9 +69,11 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     }
   };
 
+  toggleRef: React.RefObject<any>;
   triggerRef: React.RefObject<any>;
   containerRef: React.RefObject<any>;
   positionRef: React.RefObject<any>;
+  menuWrapperRef: React.RefObject<any>;
   menuContainerRef: React.RefObject<any>;
   isControlled: boolean;
 
@@ -97,20 +99,22 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     this.state = {
       ...initState,
       ...getDerivedStateForCascade(props, initState),
-      flattenData: flattenTree(props.data)
+      flattenData: flattenTree(props.data, props.childrenKey)
     };
 
     this.isControlled = !_.isUndefined(props.value);
     this.triggerRef = React.createRef();
     this.containerRef = React.createRef();
     this.positionRef = React.createRef();
+    this.toggleRef = React.createRef();
 
     // for test
+    this.menuWrapperRef = React.createRef();
     this.menuContainerRef = React.createRef();
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { value, data, labelKey, valueKey } = nextProps;
+    const { value, data, labelKey, valueKey, childrenKey } = nextProps;
     if (data !== prevState.data) {
       // First get the value of the clicked node `selectNodeValue`, and then get the new `newChildren`.
       const selectNodeValue = prevState?.selectNode?.[valueKey];
@@ -127,13 +131,13 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
             newChildren.map(item => stringToObject(item, labelKey, valueKey))
           ),
           data,
-          flattenData: flattenTree(data)
+          flattenData: flattenTree(data, childrenKey)
         };
       }
 
       return {
         ...getDerivedStateForCascade(nextProps, prevState),
-        flattenData: flattenTree(data),
+        flattenData: flattenTree(data, childrenKey),
         data
       };
     }
@@ -397,6 +401,14 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     return items;
   }
 
+  getPositionInstance = () => {
+    return this.positionRef.current;
+  };
+
+  getToggleInstance = () => {
+    return this.toggleRef.current;
+  };
+
   renderSearchResultPanel() {
     const { locale } = this.props;
     const { searchKeyword } = this.state;
@@ -439,7 +451,13 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     );
 
     return (
-      <MenuWrapper className={classes} style={menuStyle}>
+      <MenuWrapper
+        ref={this.menuWrapperRef}
+        className={classes}
+        style={menuStyle}
+        getToggleInstance={this.getToggleInstance}
+        getPositionInstance={this.getPositionInstance}
+      >
         {searchable && (
           <SearchBar
             placeholder={locale.searchPlaceholder}
@@ -538,6 +556,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
           >
             <PickerToggle
               {...unhandled}
+              ref={this.toggleRef}
               componentClass={toggleComponentClass}
               onClean={createChainedFunction(this.handleClean, onClean)}
               cleanable={cleanable && !disabled}

package/src/Cascader/test/CascaderSpec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
+import ReactTestUtils, { act } from 'react-dom/test-utils';
 import Cascader from '../Cascader';
 import Button from '../../Button';
 import { getDOMNode, getInstance } from '@test/testUtils';
@@ -214,4 +214,59 @@ describe('Cascader', () => {
     assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
   });
+
+  it('Should show search items with childrenKey', () => {
+    const itemsWithChildrenKey = {
+      childrenKey: 'sub',
+      data: [
+        {
+          value: 't',
+          label: 't'
+        },
+        {
+          value: 'h',
+          label: 'h'
+        },
+        {
+          value: 'g',
+          label: 'g',
+          sub: [
+            {
+              value: 'g-m',
+              label: 'g-m'
+            },
+            {
+              value: 'g-b',
+              label: 'g-b'
+            }
+          ]
+        }
+      ]
+    };
+
+    const instance = getInstance(
+      <Cascader
+        defaultOpen
+        data={itemsWithChildrenKey.data}
+        childrenKey={itemsWithChildrenKey.childrenKey}
+      />
+    );
+
+    const overlay = getDOMNode(instance.menuWrapperRef.current);
+
+    ReactTestUtils.act(() => {
+      const input = overlay.querySelector('.rs-picker-search-bar-input');
+
+      ReactTestUtils.Simulate.focus(input);
+
+      input.value = 'g';
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    ReactTestUtils.act(() => {
+      const searchResult = overlay.querySelectorAll('.rs-picker-cascader-row');
+
+      assert.equal(searchResult.length, 2);
+    });
+  });
 });

package/src/DatePicker/test/DatePickerSpec.js

@@ -293,4 +293,24 @@ describe('DatePicker', () => {
     );
     assert.equal(picker.querySelector('.rs-calendar-time-dropdown-column li').innerText, '12');
   });
+
+  it('Should keep AM PM unchanged', () => {
+    const instance = getInstance(
+      <DatePicker
+        value={parse('2017-08-14 13:00:00')}
+        format="hh:mm:ss A"
+        defaultOpen
+        showMeridian
+      />
+    );
+
+    const picker = instance.menuContainerRef.current;
+
+    assert.equal(picker.querySelector('.rs-calendar-header-title-time').innerText, '01:00:00');
+
+    ReactTestUtils.Simulate.click(picker.querySelector('.rs-calendar-time-dropdown-cell'));
+
+    assert.equal(picker.querySelector('.rs-calendar-header-meridian').innerText, 'PM');
+    assert.equal(picker.querySelector('.rs-calendar-header-title-time').innerText, '12:00:00');
+  });
 });

package/src/Drawer/index.tsx

@@ -1,6 +1,4 @@
-import { setStatic, setDisplayName } from 'recompose';
-
-import { defaultProps } from '../utils';
+import { setStatic, setDisplayName, defaultProps } from '../utils';
 import Drawer from './Drawer';
 import ModalBody from '../Modal/ModalBody';
 import ModalHeader from '../Modal/ModalHeader';

package/src/Dropdown/Dropdown.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 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';
@@ -11,6 +10,7 @@ import DropdownToggle from './DropdownToggle';
 import DropdownMenu from './DropdownMenu';
 import DropdownMenuItem from './DropdownMenuItem';
 import {
+  setStatic,
   createChainedFunction,
   prefix,
   isOneOf,

package/src/FlexboxGrid/FlexboxGrid.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 
-import { defaultProps, prefix } from '../utils';
+import { setStatic, defaultProps, prefix } from '../utils';
 import FlexboxGridItem from './FlexboxGridItem';
 import { FlexboxGridProps } from './FlexboxGrid.d';
 

package/src/FormGroup/FormGroup.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { compose } from 'recompose';
-import { withStyleProps, defaultProps, prefix, createContext } from '../utils';
+import { compose, withStyleProps, defaultProps, prefix, createContext } from '../utils';
 import { FormGroupProps } from './FormGroup.d';
 
 export const FormGroupContext = createContext(null);

package/src/Input/Input.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 import _ from 'lodash';
 
 import {
+  compose,
   withStyleProps,
   defaultProps,
   createChainedFunction,

package/src/InputGroup/InputGroup.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic, compose } from 'recompose';
 import InputGroupAddon from './InputGroupAddon';
 import InputGroupButton from './InputGroupButton';
-import { prefix, withStyleProps, defaultProps, createContext } from '../utils';
+import { setStatic, compose, prefix, withStyleProps, defaultProps, createContext } from '../utils';
 import { InputGroupProps } from './InputGroup.d';
 
 export const InputGroupContext = createContext(null);

package/src/IntlProvider/withLocale.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import _ from 'lodash';
-import { setDisplayName, wrapDisplayName } from 'recompose';
+import { setDisplayName, wrapDisplayName } from '../utils';
 import format from 'date-fns/format';
 import defaultLocale from './locales/default';
 import extendReactStatics from '../utils/extendReactStatics';

package/src/List/List.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { setStatic } from 'recompose';
 import classNames from 'classnames';
 import { on } from 'dom-lib';
 import {
@@ -12,7 +11,7 @@ import {
   getEdgeOffset,
   getScrollingParent
 } from './utils';
-import { prefix, defaultProps, getUnhandledProps } from '../utils';
+import { setStatic, prefix, defaultProps, getUnhandledProps } from '../utils';
 import ListItem from './ListItem';
 import { ListProps } from './List.d';
 import Manager from './Manager';

package/src/List/ListItem.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { setDisplayName } from 'recompose';
 import classNames from 'classnames';
-import { defaultProps, getUnhandledProps, prefix } from '../utils';
+import { setDisplayName, defaultProps, getUnhandledProps, prefix } from '../utils';
 import ListContext from './ListContext';
 import { ListItemProps } from './ListItem.d';
 import { ManagerRef } from './Manager';

package/src/Loader/Loader.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { withStyleProps, defaultProps, prefix } from '../utils';
+import { compose, withStyleProps, defaultProps, prefix } from '../utils';
 import { LoaderProps } from './Loader.d';
 
 class Loader extends React.Component<LoaderProps> {

package/src/Modal/BaseModal.tsx

@@ -50,6 +50,7 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
   lastFocus = null;
   onDocumentKeyupListener = null;
   onFocusinListener = null;
+  _isMounted = null;
 
   constructor(props: BaseModalProps) {
     super(props);
@@ -59,6 +60,7 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
     this.dialogRef = React.createRef();
   }
   componentDidMount() {
+    this._isMounted = true;
     if (this.props.show) {
       this.onShow();
     }
@@ -95,6 +97,8 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
   componentWillUnmount() {
     const { show, transition } = this.props;
 
+    this._isMounted = false;
+
     if (show || (transition && !this.state.exited)) {
       this.onHide();
     }
@@ -173,14 +177,28 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
   enforceFocus = () => {
     const { enforceFocus } = this.props;
 
-    if (!enforceFocus || !this.isTopModal()) {
+    if (!enforceFocus || !this._isMounted || !this.isTopModal()) {
+      return;
+    }
+
+    const currentActiveElement = activeElement(ownerDocument(this));
+    const modal = this.getDialogElement();
+
+    if (modal && modal !== currentActiveElement && !contains(modal, currentActiveElement)) {
+      modal.focus();
+    }
+  };
+
+  handlePortalRendered = () => {
+    if (!this.props.autoFocus) {
       return;
     }
 
-    const active = activeElement(ownerDocument(this));
     const modal = this.getDialogElement();
+    const currentActiveElement = activeElement(ownerDocument(this));
 
-    if (modal && modal !== active && !contains(modal, active)) {
+    if (modal && modal !== currentActiveElement && !contains(modal, currentActiveElement)) {
+      this.lastFocus = currentActiveElement;
       modal.focus();
     }
   };
@@ -268,7 +286,11 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
     }
 
     return (
-      <Portal ref={this.setMountNodeRef} container={container}>
+      <Portal
+        ref={this.setMountNodeRef}
+        container={container}
+        onRendered={this.handlePortalRendered}
+      >
         <div ref={this.modalNodeRef} role={rest.role} style={style} className={className}>
           {backdrop && this.renderBackdrop()}
           <RefHolder ref={this.dialogRef}>{dialog}</RefHolder>

package/src/Modal/Modal.tsx

@@ -2,12 +2,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { setStatic } from 'recompose';
 import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
 import BaseModal from './BaseModal';
 import Bounce from '../Animation/Bounce';
 import { on, getHeight } from 'dom-lib';
-import { prefix, defaultProps, createChainedFunction } from '../utils';
+import { setStatic, prefix, defaultProps, createChainedFunction } from '../utils';
 import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
 import ModalBody from './ModalBody';
 import ModalHeader from './ModalHeader';

package/src/Modal/ModalDialog.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { withStyleProps, defaultProps, prefix, refType } from '../utils';
+import { compose, withStyleProps, defaultProps, prefix, refType } from '../utils';
 import { ModalDialogProps } from './ModalDialog.d';
 import mergeRefs from '../utils/mergeRefs';
 
@@ -54,6 +53,7 @@ class ModalDialog extends React.Component<ModalDialogProps> {
         {...props}
         title={null}
         role="dialog"
+        tabIndex={-1}
         ref={mergeRefs(this.bindHtmlRef, dialogRef)}
         className={classNames(classPrefix, className)}
         style={modalStyle}

package/src/Modal/test/ModalSpec.js

@@ -124,4 +124,9 @@ describe('Modal', () => {
     const instance = getInstance(<Modal classPrefix="custom-prefix" show />);
     assert.ok(instance.dialogElement.className.match(/\bcustom-prefix\b/));
   });
+
+  it('Should be forced to focus on Modal', () => {
+    const instance = getInstance(<Modal className="custom" show />);
+    assert.equal(instance.dialogElement, document.activeElement);
+  });
 });

package/src/MultiCascader/MultiCascader.tsx

@@ -80,6 +80,8 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
   menuContainerRef: React.RefObject<any>;
   positionRef: React.RefObject<any>;
   triggerRef: React.RefObject<any>;
+  toggleRef: React.RefObject<any>;
+
   constructor(props) {
     super(props);
 
@@ -115,6 +117,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     this.menuContainerRef = React.createRef();
     this.positionRef = React.createRef();
     this.triggerRef = React.createRef();
+    this.toggleRef = React.createRef();
   }
 
   static getCascadeState(nextProps: MultiCascaderProps, flattenData: any[], nextValue?: any[]) {
@@ -321,6 +324,13 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     }
     return items;
   }
+  getPositionInstance = () => {
+    return this.positionRef.current;
+  };
+
+  getToggleInstance = () => {
+    return this.toggleRef.current;
+  };
 
   renderSearchRow = (item: any, key: number) => {
     const { labelKey, valueKey, cascade, disabledItemValues = [] } = this.props;
@@ -422,7 +432,12 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     const menuProps = _.pick(this.props, Object.keys(dropdownMenuPropTypes));
 
     return (
-      <MenuWrapper className={classes} style={menuStyle}>
+      <MenuWrapper
+        className={classes}
+        style={menuStyle}
+        getToggleInstance={this.getToggleInstance}
+        getPositionInstance={this.getPositionInstance}
+      >
         {searchable && (
           <SearchBar
             placeholder={locale.searchPlaceholder}
@@ -533,6 +548,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
         >
           <PickerToggle
             {...unhandled}
+            ref={this.toggleRef}
             componentClass={toggleComponentClass}
             onClean={createChainedFunction(this.handleClean, onClean)}
             cleanable={cleanable && !disabled}

package/src/Nav/Nav.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 import shallowEqual from '../utils/shallowEqual';
 
 import NavItem from './NavItem';
 import {
+  setStatic,
   prefix,
   getUnhandledProps,
   defaultProps,

package/src/Navbar/Navbar.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 import NavbarBody from './NavbarBody';
 import NavbarHeader from './NavbarHeader';
-import { prefix, defaultProps, createContext } from '../utils';
+import { setStatic, prefix, defaultProps, createContext } from '../utils';
 import { NavbarProps } from './Navbar.d';
 
 export const NavbarContext = createContext(null);

package/src/Pagination/Pagination.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 import PaginationButton from './PaginationButton';
 import SafeAnchor from '../SafeAnchor';
 import Icon from '../Icon';
 
-import { withStyleProps, defaultProps, getUnhandledProps } from '../utils';
+import { compose, withStyleProps, defaultProps, getUnhandledProps } from '../utils';
 import { PAGINATION_ICON_NAMES } from '../constants';
 import { PaginationProps } from './Pagination.d';
 

package/src/Rate/Rate.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { defaultProps, prefix, getUnhandledProps, withStyleProps } from '../utils';
+import { compose, defaultProps, prefix, getUnhandledProps, withStyleProps } from '../utils';
 import { transformValueToCharacterMap, transformCharacterMapToValue } from './utils';
 import shallowEqualArray from '../utils/shallowEqualArray';
 import Icon from '../Icon';

package/src/Sidenav/Sidenav.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 import Transition from '../Animation/Transition';
 import shallowEqual from '../utils/shallowEqual';
 import _ from 'lodash';
 import SidenavBody from './SidenavBody';
 import SidenavHeader from './SidenavHeader';
 import SidenavToggle from './SidenavToggle';
-import { prefix, defaultProps, getUnhandledProps, createContext } from '../utils';
+import { setStatic, prefix, defaultProps, getUnhandledProps, createContext } from '../utils';
 import { SidenavProps } from './Sidenav.d';
 
 export const SidenavContext = createContext(null);

package/src/Slider/Slider.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { StandardProps } from '../@types/common';
+import { StandardProps, FormControlBaseProps } from '../@types/common';
 
-export interface SliderProps<ValueType = number> extends StandardProps {
+export interface SliderProps<ValueType = number>
+  extends StandardProps,
+    FormControlBaseProps<ValueType> {
   /** Minimum value of sliding range */
   min?: number;
 
@@ -11,12 +13,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Slide the value of one step */
   step?: number;
 
-  /** Value (Controlled) */
-  value?: ValueType;
-
-  /** Default value */
-  defaultValue?: ValueType;
-
   /** A css class to apply to the Handle node. */
   handleClassName?: string;
 
@@ -44,9 +40,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Vertical Slide */
   vertical?: boolean;
 
-  /** Callback function that changes data */
-  onChange?: (value: ValueType, event: React.MouseEvent) => void;
-
   /** Customize labels on the render ruler */
   renderMark?: (mark: number) => React.ReactNode;
 }

package/src/Steps/Steps.tsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 
 import StepItem from './StepItem';
-import { prefix, defaultProps, ReactChildren, isIE10 } from '../utils';
+import { setStatic, prefix, defaultProps, ReactChildren, isIE10 } from '../utils';
 import { StepsProps } from './Steps.d';
 
 class Steps extends React.Component<StepsProps> {

package/src/Table/Table.tsx

@@ -1,7 +1,6 @@
-import { setStatic, compose } from 'recompose';
 import { Table, Column, Cell, HeaderCell, ColumnGroup } from 'rsuite-table';
 
-import { defaultProps } from '../utils';
+import { setStatic, compose, defaultProps } from '../utils';
 import withLocale from '../IntlProvider/withLocale';
 import TablePagination from './TablePagination';
 

package/src/Table/TablePagination.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
 import Pagination from '../Pagination';
 import SelectPicker from '../SelectPicker';
 import Divider from '../Divider';
 
-import { prefix, tplTransform, getUnhandledProps, defaultProps } from '../utils';
+import { compose, prefix, tplTransform, getUnhandledProps, defaultProps } from '../utils';
 import withLocale from '../IntlProvider/withLocale';
 import { TablePaginationProps } from './TablePagination.d';
 

package/src/Tag/Tag.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { compose } from 'recompose';
-import { prefix, withStyleProps, defaultProps } from '../utils';
+import { compose, prefix, withStyleProps, defaultProps } from '../utils';
 import { TagProps } from './Tag.d';
 
 class Tag extends React.Component<TagProps> {

package/src/TagPicker/index.tsx

@@ -1,6 +1,4 @@
-import { compose } from 'recompose';
-
-import { defaultProps } from '../utils';
+import { compose, defaultProps } from '../utils';
 import InputPicker from '../InputPicker/InputPicker';
 import withLocale from '../IntlProvider/withLocale';
 

package/src/Timeline/Timeline.tsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { setStatic } from 'recompose';
 
 import TimelineItem from './TimelineItem';
-import { defaultProps, prefix, ReactChildren } from '../utils';
+import { setStatic, defaultProps, prefix, ReactChildren } from '../utils';
 import { TimelineProps } from './Timeline.d';
 
 class Timeline extends React.Component<TimelineProps> {