rsuite 5.3.0 → 5.4.0

package/esm/@types/common.d.ts

@@ -134,12 +134,12 @@ export interface SVGIcon {
     viewBox: string;
     id: string;
 }
-export interface ItemDataType extends Record<string, any> {
+export interface ItemDataType<T = number | string> extends Record<string, any> {
     label?: string | React.ReactNode;
-    value?: string | number;
+    value?: T;
     groupBy?: string;
-    parent?: ItemDataType;
-    children?: ItemDataType[];
+    parent?: ItemDataType<T>;
+    children?: ItemDataType<T>[];
     loading?: boolean;
 }
 export interface Offset {

package/esm/Cascader/utils.d.ts

@@ -2,16 +2,16 @@
 import { CascaderProps } from './Cascader';
 import { ItemDataType } from '../@types/common';
 export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
-    columns: ItemDataType[][];
+    columns: ItemDataType<string | number>[][];
     paths: T[];
 };
 export declare function usePaths(props: CascaderProps): {
     enforceUpdate: (nextValue: any, isAttachChildren?: boolean | undefined) => void;
-    columnData: ItemDataType[][];
-    valueToPaths: ItemDataType[];
-    selectedPaths: ItemDataType[];
-    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType[][]>>;
-    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
+    columnData: ItemDataType<string | number>[][];
+    valueToPaths: ItemDataType<string | number>[];
+    selectedPaths: ItemDataType<string | number>[];
+    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
+    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
     addColumn: (column: ItemDataType[], index: number) => void;
 };

package/esm/CheckPicker/CheckPicker.d.ts

@@ -1,13 +1,18 @@
+import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker';
+import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, SelectProps<T> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */
     countable?: boolean;
 }
-declare const CheckPicker: PickerComponent<CheckPickerProps>;
+export interface CheckPickerComponent {
+    <T>(props: CheckPickerProps<T>): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
+}
+declare const CheckPicker: CheckPickerComponent;
 export default CheckPicker;

package/esm/CheckPicker/test/CheckPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/CheckPicker/test/CheckPicker.test.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { expectType } from 'ts-expect';
+import CheckPicker from '../CheckPicker'; // Infer value and onChange types from data
+
+var numberValuedData = [{
+  label: 'One',
+  value: 1
+}];
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: [1]
+}); // @ts-expect-error should not accept single value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: 1
+}); // @ts-expect-error should not accept string value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: ['1']
+});
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});
+var stringValuedData = [{
+  label: 'One',
+  value: 'One'
+}];
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: stringValuedData,
+  value: ['1']
+}); // @ts-expect-error should not accept single value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: "1"
+}); // @ts-expect-error should not accept number value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: stringValuedData,
+  value: [1]
+});
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: stringValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});

package/esm/CheckTree/index.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useRef } from 'react';
+import React from 'react';
 import CheckTreePicker from '../CheckTreePicker';
 import TreeContext from '../Tree/TreeContext';
 var CheckTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var dragNodeRef = useRef();
   return /*#__PURE__*/React.createElement(TreeContext.Provider, {
     value: {
-      inline: true,
-      dragNodeRef: dragNodeRef
+      inline: true
     }
   }, /*#__PURE__*/React.createElement(CheckTreePicker, _extends({
     ref: ref

package/esm/DatePicker/DatePicker.js

@@ -408,7 +408,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
-  var caretComponent = useMemo(function () {
+  var caretAs = useMemo(function () {
     return DateUtils.shouldOnlyTime(formatStr) ? IconClockO : IconCalendar;
   }, [formatStr]);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
@@ -444,7 +444,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     active: active,
     placement: placement,
     disabled: disabled,
-    caretComponent: caretComponent
+    caretAs: caretAs
   }), renderDate())));
 });
 DatePicker.displayName = 'DatePicker';

package/esm/DateRangePicker/DateRangePicker.js

@@ -268,6 +268,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setHoverDateRange(nextHoverDateRange);
     }
   }, [getHoverRangeValue, hoverRange]);
+  /**
+   * Callback for selecting a date cell in the calendar grid
+   */
+
   var handleSelectDate = useCallback(function (date, event) {
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
@@ -303,7 +307,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       nextSelectDates.reverse();
     }
 
-    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : null);
+    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
     updateCalendarDate(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
@@ -602,7 +606,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretComponent: IconCalendar,
+    caretAs: IconCalendar,
     disabled: disabled
   }), getDisplayString(value))));
 });

package/esm/Dropdown/DropdownToggle.js

@@ -6,6 +6,7 @@ import Button from '../Button';
 import { useClassNames } from '../utils';
 import useToggleCaret from '../utils/useToggleCaret';
 import { SidenavContext } from '../Sidenav/Sidenav';
+import NavContext from '../Nav/NavContext';
 var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? Button : _props$as,
@@ -22,6 +23,9 @@ var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var sidenav = useContext(SidenavContext);
 
+  var _useContext = useContext(NavContext),
+      withinNav = _useContext.withinNav;
+
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -33,7 +37,9 @@ var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var inSidenav = !!sidenav; // Caret icon is down by default, when Dropdown is used in Sidenav.
 
   var Caret = useToggleCaret(inSidenav ? 'bottomStart' : placement);
-  var toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  var toggle = /*#__PURE__*/React.createElement(Component, _extends({
+    appearance: withinNav ? 'subtle' : undefined
+  }, rest, {
     ref: ref,
     className: classes
   }), icon && /*#__PURE__*/React.cloneElement(icon, {

package/esm/MultiCascader/utils.d.ts

@@ -39,16 +39,16 @@ export declare const removeAllChildrenValue: <T>(value: T[], item: ItemType, ite
  */
 export declare function useFlattenData(data: ItemDataType[], itemKeys: ItemKeys): {
     addFlattenData: (children: ItemDataType[], parent: ItemDataType) => void;
-    flattenData: ItemDataType[];
+    flattenData: ItemDataType<string | number>[];
 };
 /**
  * A hook for column data
  * @param flattenData
  */
 export declare function useColumnData(flattenData: ItemType[]): {
-    columnData: ItemDataType[][];
+    columnData: ItemDataType<string | number>[][];
     addColumn: (column: ItemDataType[], index: number) => void;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType[][]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
     enforceUpdateColumnData: (nextData: ItemDataType[]) => void;
 };
 /**

package/esm/Nav/Nav.js

@@ -59,6 +59,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/React.createElement(NavContext.Provider, {
       value: {
+        withinNav: true,
         activeKey: activeKey,
         onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
       }
@@ -73,6 +74,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (sidenav) {
     return /*#__PURE__*/React.createElement(NavContext.Provider, {
       value: {
+        withinNav: true,
         activeKey: activeKey,
         onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
       }
@@ -89,6 +91,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   return /*#__PURE__*/React.createElement(NavContext.Provider, {
     value: {
+      withinNav: true,
       activeKey: activeKey,
       onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
     }

package/esm/Nav/NavContext.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 export interface NavContextProps {
+    /**
+     * Whether component is rendered within a <Nav>
+     *
+     * FIXME: Bad design. Should use NavContextProps | null to determin whether within a <Nav>
+     */
+    withinNav: boolean;
     activeKey: string | null;
     onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
 }

package/esm/Nav/NavContext.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import noop from 'lodash/noop';
 var NavContext = /*#__PURE__*/React.createContext({
+  withinNav: false,
   activeKey: null,
   onSelect: noop
 });

package/esm/Overlay/Modal.js

@@ -3,14 +3,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import canUseDOM from 'dom-lib/canUseDOM';
 import contains from 'dom-lib/contains';
 import getContainer from 'dom-lib/getContainer';
 import on from 'dom-lib/on';
 import ModalManager from './ModalManager';
 import Fade from '../Animation/Fade';
 import { animationPropTypes } from '../Animation/utils';
-import { mergeRefs, usePortal, createChainedFunction, useWillUnmount, KEY_VALUES } from '../utils';
+import { mergeRefs, usePortal, createChainedFunction, useWillUnmount, useEventCallback, KEY_VALUES } from '../utils';
+import OverlayContext from './OverlayContext';
 var manager;
 
 function getManager() {
@@ -103,12 +103,12 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var mountModal = open || Transition && !exited;
   var lastFocus = useRef(null);
-  var handleDocumentKeyDown = useCallback(function (event) {
+  var handleDocumentKeyDown = useEventCallback(function (event) {
     if (keyboard && event.key === KEY_VALUES.ESC && modal.isTopModal()) {
       onEsc === null || onEsc === void 0 ? void 0 : onEsc(event);
       onClose === null || onClose === void 0 ? void 0 : onClose(event);
     }
-  }, [keyboard, modal, onEsc, onClose]);
+  });
   var restoreLastFocus = useCallback(function () {
     if (lastFocus.current) {
       var _lastFocus$current$fo, _lastFocus$current;
@@ -117,19 +117,29 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       lastFocus.current = null;
     }
   }, []);
-  var handleEnforceFocus = useCallback(function () {
-    if (!enforceFocus || !modal.isTopModal()) {
-      return;
-    }
+  /**
+   * Determines if the currently focused element is inside the dialog,
+   * and if not, returns the focus to the dialog.
+   *
+   */
 
+  var handleFocusDialog = useEventCallback(function (onBeforeFocusCallback) {
     var currentActiveElement = document.activeElement;
     var dialog = modal.dialog;
 
-    if (dialog && dialog !== currentActiveElement && !contains(dialog, currentActiveElement)) {
+    if (dialog && currentActiveElement && !contains(dialog, currentActiveElement)) {
+      onBeforeFocusCallback === null || onBeforeFocusCallback === void 0 ? void 0 : onBeforeFocusCallback();
       dialog.focus();
     }
-  }, [enforceFocus, modal]);
-  var handleBackdropClick = useCallback(function (event) {
+  });
+  var handleEnforceFocus = useEventCallback(function () {
+    if (!enforceFocus || !modal.isTopModal()) {
+      return;
+    }
+
+    handleFocusDialog();
+  });
+  var handleBackdropClick = useEventCallback(function (event) {
     if (event.target !== event.currentTarget) {
       return;
     }
@@ -139,10 +149,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (backdrop === true) {
       onClose === null || onClose === void 0 ? void 0 : onClose(event);
     }
-  }, [backdrop, onBackdropClick, onClose]);
+  });
   var documentKeyDownListener = useRef();
   var documentFocusListener = useRef();
-  var handleOpen = useCallback(function () {
+  var handleOpen = useEventCallback(function () {
     var containerElement = getContainer(container, document.body);
     modal.add(containerElement, containerClassName);
 
@@ -154,19 +164,15 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       documentFocusListener.current = on(document, 'focus', handleEnforceFocus, true);
     }
 
-    if (canUseDOM) {
-      lastFocus.current = document.activeElement;
-    }
-
     if (autoFocus) {
-      var _modal$dialog;
-
-      (_modal$dialog = modal.dialog) === null || _modal$dialog === void 0 ? void 0 : _modal$dialog.focus();
+      handleFocusDialog(function () {
+        lastFocus.current = document.activeElement;
+      });
     }
 
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [autoFocus, container, containerClassName, handleDocumentKeyDown, handleEnforceFocus, modal, onOpen]);
-  var handleClose = useCallback(function () {
+  });
+  var handleClose = useEventCallback(function () {
     var _documentKeyDownListe, _documentFocusListene;
 
     modal.remove();
@@ -175,7 +181,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_documentFocusListene = documentFocusListener.current) === null || _documentFocusListene === void 0 ? void 0 : _documentFocusListene.off();
     documentFocusListener.current = null;
     restoreLastFocus();
-  }, [modal, restoreLastFocus]);
+  });
   useEffect(function () {
     if (!open) {
       return;
@@ -244,12 +250,18 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntering: onEntering,
     onEntered: onEntered
   }), children) : children;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(OverlayContext.Provider, {
+    value: {
+      overlayContainer: function overlayContainer() {
+        return modal.dialog;
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: mergeRefs(modal.setDialogRef, ref),
     style: style,
     className: className,
     tabIndex: -1
-  }), backdrop && renderBackdrop(), dialogElement));
+  }), backdrop && renderBackdrop(), dialogElement)));
 });
 export var modalPropTypes = {
   as: PropTypes.elementType,

package/esm/Overlay/Overlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
 export interface OverlayProps extends AnimationEventProps {
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
     children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
     childrenProps?: React.HTMLAttributes<HTMLElement>;
     className?: string;

package/esm/Overlay/Overlay.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Position from './Position';
 import { mergeRefs, useRootClose } from '../utils';
 import Fade from '../Animation/Fade';
+import OverlayContext from './OverlayContext';
 export var overlayPropTypes = {
   container: PropTypes.any,
   children: PropTypes.any,
@@ -26,7 +27,11 @@ export var overlayPropTypes = {
   onExited: PropTypes.func
 };
 var Overlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var container = props.container,
+  var _useContext = useContext(OverlayContext),
+      overlayContainer = _useContext.overlayContainer;
+
+  var _props$container = props.container,
+      container = _props$container === void 0 ? overlayContainer : _props$container,
       containerPadding = props.containerPadding,
       placement = props.placement,
       rootClose = props.rootClose,

package/esm/Overlay/OverlayContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface OverlayContextProps {
+    overlayContainer?: () => HTMLElement | null;
+}
+declare const OverlayContext: React.Context<OverlayContextProps>;
+export default OverlayContext;

package/esm/Overlay/OverlayContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+var OverlayContext = /*#__PURE__*/React.createContext({});
+OverlayContext.displayName = 'OverlayContext';
+export default OverlayContext;

package/esm/Overlay/OverlayTrigger.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _isUndefined from "lodash/isUndefined";
-import React, { useRef, useEffect, useImperativeHandle, useCallback } from 'react';
+import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext } from 'react';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import contains from 'dom-lib/contains';
 import Overlay from './Overlay';
 import { createChainedFunction, usePortal, useControlled } from '../utils';
 import isOneOf from '../utils/isOneOf';
+import OverlayContext from './OverlayContext';
 
 function mergeEvents(events, props) {
   if (events === void 0) {
@@ -47,8 +48,12 @@ function onMouseEventHandler(handler, event, delay) {
 
 var defaultTrigger = ['hover', 'focus'];
 var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useContext = useContext(OverlayContext),
+      overlayContainer = _useContext.overlayContainer;
+
   var children = props.children,
-      container = props.container,
+      _props$container = props.container,
+      container = _props$container === void 0 ? overlayContainer : _props$container,
       controlId = props.controlId,
       defaultOpen = props.defaultOpen,
       _props$trigger = props.trigger,

package/esm/Overlay/Position.d.ts

@@ -8,7 +8,7 @@ export interface PositionChildProps {
 export interface PositionProps {
     children: (props: PositionChildProps, ref: any) => React.ReactElement;
     className?: string;
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
     containerPadding?: number;
     placement?: TypeAttributes.Placement;
     preventOverflow?: boolean;

package/esm/Picker/propTypes.d.ts

@@ -9,7 +9,6 @@ export declare const pickerPropTypes: {
     containerPadding: PropTypes.Requireable<number>;
     container: PropTypes.Requireable<any>;
     disabled: PropTypes.Requireable<boolean>;
-    toggleAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     menuClassName: PropTypes.Requireable<string>;
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -26,7 +25,7 @@ export declare const pickerPropTypes: {
     onOpen: PropTypes.Requireable<(...args: any[]) => any>;
     onClose: PropTypes.Requireable<(...args: any[]) => any>;
     onClean: PropTypes.Requireable<(...args: any[]) => any>;
-    listProps: PropTypes.Requireable<object>;
+    listProps: PropTypes.Requireable<any>;
     onEnter: PropTypes.Requireable<(...args: any[]) => any>;
     onEntering: PropTypes.Requireable<(...args: any[]) => any>;
     onEntered: PropTypes.Requireable<(...args: any[]) => any>;
@@ -35,7 +34,7 @@ export declare const pickerPropTypes: {
     onExited: PropTypes.Requireable<(...args: any[]) => any>;
 };
 export declare const listPickerPropTypes: {
-    data: PropTypes.Requireable<any[]>;
+    data: PropTypes.Validator<any[]>;
     valueKey: PropTypes.Requireable<string>;
     labelKey: PropTypes.Requireable<string>;
     childrenKey: PropTypes.Requireable<string>;
@@ -52,7 +51,6 @@ export declare const listPickerPropTypes: {
     containerPadding: PropTypes.Requireable<number>;
     container: PropTypes.Requireable<any>;
     disabled: PropTypes.Requireable<boolean>;
-    toggleAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     menuClassName: PropTypes.Requireable<string>;
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -69,7 +67,7 @@ export declare const listPickerPropTypes: {
     onOpen: PropTypes.Requireable<(...args: any[]) => any>;
     onClose: PropTypes.Requireable<(...args: any[]) => any>;
     onClean: PropTypes.Requireable<(...args: any[]) => any>;
-    listProps: PropTypes.Requireable<object>;
+    listProps: PropTypes.Requireable<any>;
     onEnter: PropTypes.Requireable<(...args: any[]) => any>;
     onEntering: PropTypes.Requireable<(...args: any[]) => any>;
     onEntered: PropTypes.Requireable<(...args: any[]) => any>;

package/esm/Picker/propTypes.js

@@ -12,7 +12,8 @@ export var pickerPropTypes = _extends({}, animationPropTypes, {
   containerPadding: PropTypes.number,
   container: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
   disabled: PropTypes.bool,
-  toggleAs: PropTypes.elementType,
+  // PropTypes.elementType conflictin with React.ElementType
+  // toggleAs: PropTypes.elementType,
   menuClassName: PropTypes.string,
   menuStyle: PropTypes.object,
   placeholder: PropTypes.node,
@@ -30,10 +31,10 @@ export var pickerPropTypes = _extends({}, animationPropTypes, {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   onClean: PropTypes.func,
-  listProps: PropTypes.object
+  listProps: PropTypes.any
 });
 export var listPickerPropTypes = _extends({}, pickerPropTypes, {
-  data: PropTypes.array,
+  data: PropTypes.array.isRequired,
   valueKey: PropTypes.string,
   labelKey: PropTypes.string,
   childrenKey: PropTypes.string,

package/esm/Picker/utils.d.ts

@@ -56,13 +56,13 @@ interface FocusItemValueProps {
  * @param defaultFocusItemValue
  * @param props
  */
-export declare const useFocusItemValue: <T extends string | number>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
+export declare const useFocusItemValue: <T>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
     focusItemValue: T | null | undefined;
     setFocusItemValue: React.Dispatch<React.SetStateAction<T | null | undefined>>;
     layer: number;
     setLayer: React.Dispatch<React.SetStateAction<number>>;
-    keys: (string | undefined)[];
-    setKeys: React.Dispatch<React.SetStateAction<(string | undefined)[]>>;
+    keys: any[];
+    setKeys: React.Dispatch<React.SetStateAction<any[]>>;
     onKeyDown: (event: any) => void;
 };
 interface ToggleKeyDownEventProps {

package/esm/SelectPicker/SelectPicker.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
-export declare type ValueType = number | string;
-export interface SelectProps<T = ValueType> {
+export interface SelectProps<T> {
     /** Set group condition key in data */
     groupBy?: string;
     /** Whether dispaly search input box */
@@ -37,7 +35,16 @@ export interface SelectProps<T = ValueType> {
     /** Called when clean */
     onClean?: (event: React.SyntheticEvent) => void;
 }
-export interface SelectPickerProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, SelectProps<T> {
+export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValue'> {
+    /** Custom render selected items */
+    renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
+}
+export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
+}
+export interface SelectPickerComponent {
+    <T>(props: SelectPickerProps<T>): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;
 }
-declare const SelectPicker: PickerComponent<SelectPickerProps>;
+declare const SelectPicker: SelectPickerComponent;
 export default SelectPicker;