rsuite 4.10.0 → 4.10.4

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/Overlay/OverlayTrigger.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AnimationEventProps, StandardProps, TypeAttributes } from '../@types/common';
 
-export type OverlayTriggerTrigger = 'click' | 'hover' | 'focus' | 'active' | 'none';
+export type OverlayTriggerTrigger = 'click' | 'contextMenu' | 'hover' | 'focus' | 'active' | 'none';
 
 export interface TriggerProps extends AnimationEventProps, StandardProps {
   /** Triggering events */

package/src/Overlay/OverlayTrigger.tsx

@@ -26,6 +26,7 @@ interface TriggerProps {
   onMouseOut?: React.MouseEventHandler;
   onBlur?: React.MouseEventHandler;
   onClick?: React.MouseEventHandler;
+  onContextMenu?: React.MouseEventHandler;
   onFocus?: React.MouseEventHandler;
 }
 
@@ -81,7 +82,11 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
   handleSpeakerMouseLeave = () => {
     const { trigger } = this.props;
     this.mouseEnteredToSpeaker = false;
-    if (!isOneOf('click', trigger) && !isOneOf('active', trigger)) {
+    if (
+      !isOneOf('click', trigger) &&
+      !isOneOf('active', trigger) &&
+      !isOneOf('contextMenu', trigger)
+    ) {
       this.hideWithCheck();
     }
   };
@@ -130,6 +135,10 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
     }
   };
 
+  preventDefault = (event: React.MouseEvent<Element, MouseEvent>) => {
+    event.preventDefault();
+  };
+
   handleDelayedShow = () => {
     const { delayShow, enterable } = this.props;
     const delay = isNil(delayShow) ? this.props.delay : delayShow;
@@ -197,6 +206,8 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
 
     if (isOneOf('click', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
+    } else if (isOneOf('contextMenu', trigger)) {
+      overlayProps.onHide = createChainedFunction(this.hide, onHide);
     } else if (isOneOf('active', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
     }
@@ -228,6 +239,7 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
       children,
       speaker,
       onClick,
+      onContextMenu,
       trigger,
       onMouseOver,
       onMouseOut,
@@ -254,6 +266,15 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
         props.onClick = createChainedFunction(this.toggleHideAndShow, props.onClick);
       }
 
+      if (isOneOf('contextMenu', trigger)) {
+        props.onContextMenu = createChainedFunction(
+          this.preventDefault,
+          this.toggleHideAndShow,
+          triggerProps.onContextMenu,
+          onContextMenu
+        );
+      }
+
       if (isOneOf('active', trigger)) {
         props.onClick = createChainedFunction(this.handleDelayedShow, props.onClick);
       }

package/src/Overlay/test/OverlayTriggerSpec.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import ReactTestUtils from 'react-dom/test-utils';
+import { getDOMNode } from '@test/testUtils';
+
+import OverlayTrigger from '../OverlayTrigger';
+import Tooltip from '../../Tooltip';
+
+describe('OverlayTrigger', () => {
+  it('Should create Whisper element', () => {
+    const instance = getDOMNode(
+      <OverlayTrigger speaker={<Tooltip>tooltip</Tooltip>}>
+        <button type="button">button</button>
+      </OverlayTrigger>
+    );
+    assert.equal(instance.nodeName, 'BUTTON');
+  });
+
+  it('Should maintain overlay classname when trigger click', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="click"
+        speaker={<Tooltip className="test-whisper_click">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+    ReactTestUtils.Simulate.click(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_click').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger contextMenu', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="contextMenu"
+        speaker={<Tooltip className="test-whisper_context-menu">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+    ReactTestUtils.Simulate.contextMenu(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_context-menu').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger focus', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="focus"
+        speaker={<Tooltip className="test-whisper_focus">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.focus(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_focus').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger mouseOver and setting [trigger="hover"]', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="hover"
+        speaker={<Tooltip className="test-whisper_hover">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.mouseOver(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_hover').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger click and setting [trigger="active"]  ', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="active"
+        speaker={<Tooltip className="test-whisper_active">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.click(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_active').length, 1);
+  });
+
+  it('Should call onClick callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onClick={doneOp} trigger="click" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.click(whisper);
+  });
+
+  it('Should call onContextMenu callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onContextMenu={doneOp} trigger="contextMenu" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.contextMenu(whisper);
+  });
+
+  it('Should call onFocus callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onFocus={doneOp} trigger="focus" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.focus(whisper);
+  });
+
+  it('Should call onMouseOver callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onMouseOver={doneOp} trigger="hover" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.mouseOver(whisper);
+  });
+
+  it('Should call onMouseOut callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onMouseOut={doneOp} trigger="hover" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.mouseOut(whisper);
+  });
+});

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> {

package/src/Timeline/TimelineItem.tsx

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

package/src/Toggle/Toggle.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { prefix, withStyleProps, defaultProps, getUnhandledProps } from '../utils';
+import { compose, prefix, withStyleProps, defaultProps, getUnhandledProps } from '../utils';
 import { ToggleProps } from './Toggle.d';
 
 interface ToggleState {

package/src/TreePicker/test/TreePickerSpec.js

@@ -2,13 +2,22 @@ import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { findDOMNode } from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import { getDOMNode, getInstance } from '@test/testUtils';
 import TreePicker from '../TreePicker';
 
 Enzyme.configure({ adapter: new Adapter() });
+let container;
 
-export const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
 
 const data = [
   {
@@ -157,7 +166,7 @@ describe('TreePicker', () => {
   });
 
   it('Should call `onChange` callback', done => {
-    const doneOp = values => {
+    const doneOp = () => {
       done();
     };
     const instance = getDOMNode(<TreePicker inline onChange={doneOp} data={data} />);
@@ -243,7 +252,7 @@ describe('TreePicker', () => {
   });
 
   it('Should focus item by keyCode=13 ', done => {
-    const doneOp = values => {
+    const doneOp = () => {
       done();
     };
     const instance = mount(<TreePicker data={data} onChange={doneOp} inline defaultExpandAll />);
@@ -271,8 +280,6 @@ describe('TreePicker', () => {
   });
 
   it('Should load data async', () => {
-    let activeNode = null;
-    let layer = 0;
     const data = [
       {
         label: 'Master',
@@ -293,8 +300,6 @@ describe('TreePicker', () => {
 
     let newData = [];
     const mockOnExpand = (node, l, concat) => {
-      activeNode = node;
-      layer = l;
       newData = concat(data, children);
     };
 
@@ -391,13 +396,36 @@ describe('TreePicker', () => {
     assert.ok(list[0].innerText, 'Louisa');
   });
 
-  it('Should call renderValue', () => {
-    const instance1 = getDOMNode(<TreePicker value="Test" renderValue={() => '1'} />);
-    const instance2 = getDOMNode(<TreePicker value="Test" renderValue={() => null} />);
-    const instance3 = getDOMNode(<TreePicker value="Test" renderValue={() => undefined} />);
+  it('Should controlled by expandItemValues', () => {
+    const TestApp = React.forwardRef((props, ref) => {
+      const [expandItemValues, setExpandItemValues] = React.useState();
+      const pickerRef = React.useRef();
+      React.useImperativeHandle(ref, () => ({
+        picker: pickerRef.current,
+        setExpandItemValues
+      }));
+
+      return <TreePicker data={data} ref={pickerRef} expandItemValues={expandItemValues} open />;
+    });
+
+    TestApp.displayName = 'TestCheckTreePicker';
+
+    const ref = React.createRef();
+    ReactTestUtils.act(() => {
+      ReactDOM.render(<TestApp ref={ref} />, container);
+    });
 
-    assert.equal(instance1.querySelector('.rs-picker-toggle-value').innerText, '1');
-    assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
-    assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-tree-node-expanded').length,
+      0
+    );
+
+    ReactTestUtils.act(() => {
+      ref.current.setExpandItemValues(['Master']);
+    });
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-tree-node-expanded').length,
+      1
+    );
   });
 });

package/src/Uploader/Uploader.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { compose } from 'recompose';
 
 import IntlContext from '../IntlProvider/IntlContext';
 import withLocale from '../IntlProvider/withLocale';
 import FileItem from './UploadFileItem';
 import UploadTrigger from './UploadTrigger';
-import { prefix, ajaxUpload, defaultProps, getUnhandledProps } from '../utils';
+import { compose, prefix, ajaxUpload, defaultProps, getUnhandledProps } from '../utils';
 import { getFiles, guid } from './utils';
 import { UploaderProps, FileType } from './Uploader.d';
 

package/src/utils/defaultProps.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { setDisplayName, wrapDisplayName } from 'recompose';
+import { setDisplayName, wrapDisplayName } from './recompose';
 import { getClassNamePrefix } from './prefix';
 import { StandardProps } from '../@types/common';
 import extendReactStatics from './extendReactStatics';

package/src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './htmlPropsUtils';
 
 export { default as withStyleProps } from './withStyleProps';
 
+export * from './recompose';
 export { default as prefix, defaultClassPrefix, getClassNamePrefix, globalKey } from './prefix';
 export { default as createChainedFunction } from './createChainedFunction';
 export { default as defaultProps } from './defaultProps';

package/src/utils/recompose.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface ComponentEnhancer<TInner, TOutter> {
+  (component: React.ComponentType<TInner>): React.ComponentClass<TOutter>;
+}
+
+export function compose<TInner, TOutter>(...funcs: Function[]): ComponentEnhancer<TInner, TOutter> {
+  return funcs.reduce(
+    (a, b) => (...args) => a(b(...args)),
+    arg => arg
+  ) as ComponentEnhancer<TInner, TOutter>;
+}
+
+export function setStatic(
+  key: string,
+  value: any
+): <T extends React.ComponentType<any>>(component: T) => T {
+  return BaseComponent => {
+    /* eslint-disable no-param-reassign */
+    BaseComponent[key] = value;
+    /* eslint-enable no-param-reassign */
+    return BaseComponent;
+  };
+}
+
+export function setDisplayName(
+  displayName: string
+): <T extends React.ComponentType<any>>(component: T) => T {
+  return setStatic('displayName', displayName);
+}
+
+export function getDisplayName(component: React.ComponentType<any>): string {
+  if (typeof component === 'string') {
+    return component;
+  }
+
+  if (!component) {
+    return undefined;
+  }
+
+  return component.displayName || component.name || 'Component';
+}
+
+export function wrapDisplayName(component: React.ComponentType<any>, wrapperName: string): string {
+  return `${wrapperName}(${getDisplayName(component)})`;
+}
+
+export function setPropTypes<P>(
+  propTypes: React.ValidationMap<P>
+): <T extends React.ComponentType<P>>(component: T) => T {
+  return setStatic('propTypes', propTypes);
+}