rsuite 5.0.0-beta.5 → 5.0.0

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

@@ -72,6 +72,8 @@ export interface PickerBaseProps<LocaleType = any> extends WithAsProps, Animatio
     defaultOpen?: boolean;
     /** A picker that can clear values */
     cleanable?: boolean;
+    /** A picker can have different sizes */
+    size?: TypeAttributes.Size;
     /** Called when Modal is displayed */
     onOpen?: () => void;
     /** Called when Modal is closed */

package/esm/Animation/Bounce.js

@@ -2,19 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Transition from './Transition';
+import { useClassNames } from '../utils';
 var Bounce = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
       props = _objectWithoutPropertiesLoose(_ref, ["timeout"]);
 
+  var _useClassNames = useClassNames('anim'),
+      prefix = _useClassNames.prefix;
+
   return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {
     ref: ref,
     animation: true,
     timeout: timeout,
-    enteringClassName: "bounce-in animated",
-    enteredClassName: "bounce-in animated",
-    exitingClassName: "bounce-out animated",
-    exitedClassName: "bounce-out animated"
+    enteringClassName: prefix('bounce-in'),
+    enteredClassName: prefix('bounce-in'),
+    exitingClassName: prefix('bounce-out'),
+    exitedClassName: prefix('bounce-out')
   }));
 });
 Bounce.displayName = 'Bounce';

package/esm/Animation/Collapse.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { TransitionProps } from './Transition';
 export declare enum DIMENSION {
     HEIGHT = "height",
@@ -10,52 +9,6 @@ export interface CollapseProps extends TransitionProps {
     dimension?: DIMENSION | (() => DIMENSION);
     /** Function that returns the height or width of the animating DOM node */
     getDimensionValue?: (dimension: DIMENSION, elem: Element) => number;
-    /** ARIA role of collapsible element */
-    role?: string;
-}
-declare function defaultGetDimensionValue(dimension: DIMENSION, elem: HTMLElement): number;
-declare class Collapse extends React.Component<CollapseProps> {
-    static propTypes: {
-        dimension: PropTypes.Requireable<any>;
-        getDimensionValue: PropTypes.Requireable<(...args: any[]) => any>;
-        role: PropTypes.Requireable<string>;
-        animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        in: PropTypes.Requireable<boolean>;
-        unmountOnExit: PropTypes.Requireable<boolean>;
-        transitionAppear: PropTypes.Requireable<boolean>;
-        timeout: PropTypes.Requireable<number>;
-        exitedClassName: PropTypes.Requireable<string>;
-        exitingClassName: PropTypes.Requireable<string>;
-        enteredClassName: PropTypes.Requireable<string>;
-        enteringClassName: PropTypes.Requireable<string>;
-        onEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onEntering: PropTypes.Requireable<(...args: any[]) => any>;
-        onEntered: PropTypes.Requireable<(...args: any[]) => any>;
-        onExit: PropTypes.Requireable<(...args: any[]) => any>;
-        onExiting: PropTypes.Requireable<(...args: any[]) => any>;
-        onExited: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static displayName: string;
-    static defaultProps: {
-        timeout: number;
-        dimension: DIMENSION;
-        exitedClassName: string;
-        exitingClassName: string;
-        enteredClassName: string;
-        enteringClassName: string;
-        getDimensionValue: typeof defaultGetDimensionValue;
-    };
-    transitionRef: React.RefObject<any>;
-    constructor(props: any);
-    getTransitionInstance(): any;
-    handleEnter: (elem: HTMLElement) => void;
-    handleEntering: (elem: HTMLElement) => void;
-    handleEntered: (elem: HTMLElement) => void;
-    handleExit: (elem: HTMLElement) => void;
-    handleExiting: (elem: HTMLElement) => void;
-    dimension(): DIMENSION;
-    render(): JSX.Element;
 }
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<any>>;
 export default Collapse;

package/esm/Animation/Collapse.js

@@ -1,14 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import React from 'react';
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { getStyle, addStyle } from 'dom-lib';
 import get from 'lodash/get';
 import capitalize from 'lodash/capitalize';
-import pick from 'lodash/pick';
 import Transition, { transitionPropTypes } from './Transition';
-import createChainedFunction from '../utils/createChainedFunction';
+import { useClassNames, createChainedFunction } from '../utils';
 export var DIMENSION;
 
 (function (DIMENSION) {
@@ -36,110 +34,67 @@ function getScrollDimensionValue(elem, dimension) {
   return value + "px";
 }
 
-var Collapse = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Collapse, _React$Component);
-
-  function Collapse(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.transitionRef = void 0;
-
-    _this.handleEnter = function (elem) {
-      var dimension = _this.dimension();
-
-      addStyle(elem, dimension, 0);
-    };
-
-    _this.handleEntering = function (elem) {
-      var dimension = _this.dimension();
-
-      addStyle(elem, dimension, getScrollDimensionValue(elem, dimension));
-    };
-
-    _this.handleEntered = function (elem) {
-      var dimension = _this.dimension();
-
-      addStyle(elem, dimension, 'auto');
-    };
-
-    _this.handleExit = function (elem) {
-      var dimension = _this.dimension();
-
-      var getDimensionValue = _this.props.getDimensionValue;
-      var value = getDimensionValue ? getDimensionValue(dimension, elem) : 0;
-      addStyle(elem, dimension, value + "px");
-    };
-
-    _this.handleExiting = function (elem) {
-      var dimension = _this.dimension();
-
-      triggerBrowserReflow(elem);
-      addStyle(elem, dimension, 0);
-    };
-
-    _this.transitionRef = /*#__PURE__*/React.createRef();
-    return _this;
-  } // for testing
-
-
-  var _proto = Collapse.prototype;
-
-  _proto.getTransitionInstance = function getTransitionInstance() {
-    return this.transitionRef.current;
-  };
-
-  _proto.dimension = function dimension() {
-    var dimension = this.props.dimension;
-    return typeof dimension === 'function' ? dimension() : dimension;
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        role = _this$props.role,
-        className = _this$props.className,
-        onExited = _this$props.onExited,
-        onEnter = _this$props.onEnter,
-        onEntering = _this$props.onEntering,
-        onEntered = _this$props.onEntered,
-        onExit = _this$props.onExit,
-        onExiting = _this$props.onExiting;
-    var enterEventHandler = createChainedFunction(this.handleEnter, onEnter);
-    var enteringEventHandler = createChainedFunction(this.handleEntering, onEntering);
-    var enteredEventHandler = createChainedFunction(this.handleEntered, onEntered);
-    var exitEventHandler = createChainedFunction(this.handleExit, onExit);
-    var exitingEventHandler = createChainedFunction(this.handleExiting, onExiting);
-    return /*#__PURE__*/React.createElement(Transition, _extends({}, pick(this.props, Object.keys(transitionPropTypes)), {
-      ref: this.transitionRef,
-      "aria-expanded": role ? this.props.in : null,
-      className: classNames(className, {
-        width: this.dimension() === 'width'
-      }),
-      onEnter: enterEventHandler,
-      onEntering: enteringEventHandler,
-      onEntered: enteredEventHandler,
-      onExit: exitEventHandler,
-      onExiting: exitingEventHandler,
-      onExited: onExited
-    }));
-  };
-
-  return Collapse;
-}(React.Component);
-
-Collapse.propTypes = _extends({}, transitionPropTypes, {
-  dimension: PropTypes.any,
-  getDimensionValue: PropTypes.func,
-  role: PropTypes.string
+var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+      dimensionProp = props.dimension,
+      exitedClassName = props.exitedClassName,
+      exitingClassName = props.exitingClassName,
+      enteredClassName = props.enteredClassName,
+      enteringClassName = props.enteringClassName,
+      getDimensionValue = props.getDimensionValue,
+      onEnter = props.onEnter,
+      onEntering = props.onEntering,
+      onEntered = props.onEntered,
+      onExit = props.onExit,
+      onExiting = props.onExiting,
+      rest = _objectWithoutPropertiesLoose(props, ["className", "dimension", "exitedClassName", "exitingClassName", "enteredClassName", "enteringClassName", "getDimensionValue", "onEnter", "onEntering", "onEntered", "onExit", "onExiting"]);
+
+  var _useClassNames = useClassNames('anim'),
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge;
+
+  var dimension = typeof dimensionProp === 'function' ? dimensionProp() : dimensionProp;
+  var handleEnter = useCallback(function (elem) {
+    addStyle(elem, dimension, 0);
+  }, [dimension]);
+  var handleEntering = useCallback(function (elem) {
+    addStyle(elem, dimension, getScrollDimensionValue(elem, dimension));
+  }, [dimension]);
+  var handleEntered = useCallback(function (elem) {
+    addStyle(elem, dimension, 'auto');
+  }, [dimension]);
+  var handleExit = useCallback(function (elem) {
+    var value = getDimensionValue ? getDimensionValue(dimension, elem) : 0;
+    addStyle(elem, dimension, value + "px");
+  }, [dimension, getDimensionValue]);
+  var handleExiting = useCallback(function (elem) {
+    triggerBrowserReflow(elem);
+    addStyle(elem, dimension, 0);
+  }, [dimension]);
+  return /*#__PURE__*/React.createElement(Transition, _extends({}, rest, {
+    ref: ref,
+    className: merge(className, prefix({
+      'collapse-horizontal': dimension === 'width'
+    })),
+    exitedClassName: exitedClassName || prefix('collapse'),
+    exitingClassName: exitingClassName || prefix('collapsing'),
+    enteredClassName: enteredClassName || prefix('collapse', 'in'),
+    enteringClassName: enteringClassName || prefix('collapsing'),
+    onEnter: createChainedFunction(handleEnter, onEnter),
+    onEntering: createChainedFunction(handleEntering, onEntering),
+    onEntered: createChainedFunction(handleEntered, onEntered),
+    onExit: createChainedFunction(handleExit, onExit),
+    onExiting: createChainedFunction(handleExiting, onExiting)
+  }));
 });
 Collapse.displayName = 'Collapse';
 Collapse.defaultProps = {
   timeout: 300,
   dimension: DIMENSION.HEIGHT,
-  exitedClassName: 'collapse',
-  exitingClassName: 'collapsing',
-  enteredClassName: 'collapse in',
-  enteringClassName: 'collapsing',
   getDimensionValue: defaultGetDimensionValue
 };
+Collapse.propTypes = _extends({}, transitionPropTypes, {
+  dimension: PropTypes.any,
+  getDimensionValue: PropTypes.func
+});
 export default Collapse;

package/esm/Animation/Fade.js

@@ -1,20 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import classNames from 'classnames';
 import Transition from './Transition';
+import { useClassNames } from '../utils';
 var Fade = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
       className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, ["timeout", "className"]);
 
+  var _useClassNames = useClassNames('anim'),
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge;
+
   return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {
     ref: ref,
     timeout: timeout,
-    className: classNames(className, 'fade'),
-    enteredClassName: "in",
-    enteringClassName: "in"
+    className: merge(className, prefix('fade')),
+    enteredClassName: prefix('in'),
+    enteringClassName: prefix('in')
   }));
 });
 Fade.displayName = 'Fade';

package/esm/Animation/Slide.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import classNames from 'classnames';
 import Transition from './Transition';
+import { useClassNames } from '../utils';
 var Slide = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
@@ -10,8 +10,11 @@ var Slide = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       placement = _ref$placement === void 0 ? 'right' : _ref$placement,
       props = _objectWithoutPropertiesLoose(_ref, ["timeout", "placement"]);
 
-  var enterClassName = classNames('slide-in', placement, 'animated');
-  var exitClassName = classNames('slide-out', placement, 'animated');
+  var _useClassNames = useClassNames('anim'),
+      prefix = _useClassNames.prefix;
+
+  var enterClassName = prefix('slide-in', placement);
+  var exitClassName = prefix('slide-out', placement);
   return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {
     ref: ref,
     animation: true,

package/esm/Carousel/Carousel.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface CarouselProps extends WithAsProps {
     /** Autoplay element */
@@ -8,6 +9,12 @@ export interface CarouselProps extends WithAsProps {
     placement?: 'top' | 'bottom' | 'left' | 'right';
     /** Button shape */
     shape?: 'dot' | 'bar';
+    /** Callback fired when the active item changes */
+    onSelect: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired when a slide transition starts */
+    onSlideStart?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired when a slide transition ends */
+    onSlideEnd?: (index: number, event: React.TransitionEvent<HTMLDivElement>) => void;
 }
 declare const Carousel: RsRefForwardingComponent<'div', CarouselProps>;
 export default Carousel;

package/esm/Carousel/Carousel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useClassNames, useCustom, guid, ReactChildren, useTimeout } from '../utils';
@@ -22,7 +22,10 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       shape = props.shape,
       autoplay = props.autoplay,
       autoplayInterval = props.autoplayInterval,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "classPrefix", "className", "placement", "shape", "autoplay", "autoplayInterval"]);
+      onSelect = props.onSelect,
+      onSlideStart = props.onSlideStart,
+      onSlideEnd = props.onSlideEnd,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "classPrefix", "className", "placement", "shape", "autoplay", "autoplayInterval", "onSelect", "onSlideStart", "onSlideEnd"]);
 
   var _useCustom = useCustom('Carousel'),
       rtl = _useCustom.rtl;
@@ -45,23 +48,29 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       lastIndex = _useState2[0],
       setLastIndex = _useState2[1];
 
-  var handleAutoplay = function handleAutoplay(nextActiveIndex) {
+  var handleSlide = function handleSlide(nextActiveIndex, event) {
     clear();
-    var nextIndex = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1; // When index is greater than count, start from 1 again.
+    var index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1; // When index is greater than count, start from 1 again.
 
-    setActiveIndex(nextIndex % count);
-    setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex % count);
+    var nextIndex = index % count;
+    setActiveIndex(nextIndex);
+    onSlideStart === null || onSlideStart === void 0 ? void 0 : onSlideStart(nextIndex, event);
+    setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex);
     reset();
   };
 
   var handleChange = function handleChange(event) {
     var activeIndex = +event.target.value;
-    handleAutoplay(activeIndex);
-  }; // Set a timer for automatic playback.
-  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
+    handleSlide(activeIndex);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeIndex, event);
+  };
 
+  var handleTransitionEnd = useCallback(function (event) {
+    onSlideEnd === null || onSlideEnd === void 0 ? void 0 : onSlideEnd(activeIndex, event);
+  }, [activeIndex, onSlideEnd]); // Set a timer for automatic playback.
+  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
 
-  var _useTimeout = useTimeout(handleAutoplay, autoplayInterval, !!autoplay && count > 1),
+  var _useTimeout = useTimeout(handleSlide, autoplayInterval, !!autoplay && count > 1),
       clear = _useTimeout.clear,
       reset = _useTimeout.reset;
 
@@ -110,7 +119,8 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix('content')
   }, /*#__PURE__*/React.createElement("div", {
     className: prefix('slider'),
-    style: sliderStyles
+    style: sliderStyles,
+    onTransitionEnd: handleTransitionEnd
   }, items), showMask && /*#__PURE__*/React.createElement("div", {
     className: prefix('slider-after', {
       'slider-after-vertical': vertical
@@ -136,6 +146,9 @@ Carousel.propTypes = {
   autoplay: PropTypes.bool,
   autoplayInterval: PropTypes.number,
   placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  shape: PropTypes.oneOf(['dot', 'bar'])
+  shape: PropTypes.oneOf(['dot', 'bar']),
+  onSelect: PropTypes.func,
+  onSlideStart: PropTypes.func,
+  onSlideEnd: PropTypes.func
 };
 export default Carousel;

package/esm/CheckTree/index.js

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

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -6,11 +6,12 @@ import _omit from "lodash/omit";
 import _isFunction from "lodash/isFunction";
 import _pick from "lodash/pick";
 import _isNil from "lodash/isNil";
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { List, AutoSizer } from '../Picker/VirtualizedList';
 import CheckTreeNode from './CheckTreeNode';
+import TreeContext from '../Tree/TreeContext';
 import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
 import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePublicMethods, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes, listPickerDefaultProps, useToggleKeyDownEvent } from '../Picker';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
@@ -41,7 +42,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       toggleAs = props.toggleAs,
       searchKeyword = props.searchKeyword,
       overrideLocale = props.locale,
-      inline = props.inline,
       cascade = props.cascade,
       disabled = props.disabled,
       valueKey = props.valueKey,
@@ -81,7 +81,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderValue = props.renderValue,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "locale", "inline", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+
+  var _useContext = useContext(TreeContext),
+      inline = _useContext.inline;
 
   var triggerRef = useRef();
   var targetRef = useRef();
@@ -401,7 +404,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
     targetRef: targetRef
-  });
+  }, inline);
   var handleClean = useCallback(function (event) {
     var target = event.target; // exclude searchBar
 
@@ -622,7 +625,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, style) : {};
     return /*#__PURE__*/React.createElement("div", {
       id: id ? id + "-listbox" : undefined,
-      ref: treeViewRef,
+      ref: inline ? mergeRefs(treeViewRef, ref) : treeViewRef,
       role: "tree",
       "aria-multiselectable": true,
       className: classes,
@@ -753,7 +756,6 @@ CheckTreePicker.defaultProps = defaultProps;
 CheckTreePicker.propTypes = _extends({}, listPickerPropTypes, {
   height: PropTypes.number,
   appearance: PropTypes.oneOf(['default', 'subtle']),
-  inline: PropTypes.bool,
   locale: PropTypes.any,
   cascade: PropTypes.bool,
   countable: PropTypes.bool,

package/esm/DatePicker/DatePicker.d.ts

@@ -10,7 +10,11 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     calendarDefaultDate?: Date;
     /** Format date */
     format?: string;
-    /** Display date panel when component initial */
+    /**
+     * Display date panel when component initial
+     *
+     * @deprecated use <Calendar> instead
+     **/
     inline?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
     isoWeek?: boolean;

package/esm/DatePicker/DatePicker.js

@@ -31,7 +31,6 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       defaultValue = props.defaultValue,
       disabled = props.disabled,
       formatStr = props.format,
-      inline = props.inline,
       isoWeek = props.isoWeek,
       limitEndYear = props.limitEndYear,
       overrideLocale = props.locale,
@@ -60,7 +59,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "defaultValue", "disabled", "format", "inline", "isoWeek", "limitEndYear", "locale", "menuClassName", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
 
   var _useCustom = useCustom('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -69,8 +68,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix,
-      withClassPrefix = _useClassNames.withClassPrefix;
+      prefix = _useClassNames.prefix;
 
   var _useControlled = useControlled(valueProp, defaultValue),
       value = _useControlled[0],
@@ -405,14 +403,6 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var caretComponent = useMemo(function () {
     return DateUtils.shouldOnlyTime(formatStr) ? IconClockO : IconCalendar;
   }, [formatStr]);
-
-  if (inline) {
-    return /*#__PURE__*/React.createElement(Component, {
-      ref: rootRef,
-      className: merge(className, withClassPrefix('date-inline'))
-    }, calendar);
-  }
-
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     pickerProps: pick(props, pickTriggerPropKeys),
@@ -460,7 +450,6 @@ DatePicker.propTypes = _extends({}, pickerPropTypes, {
   hideHours: PropTypes.func,
   hideMinutes: PropTypes.func,
   hideSeconds: PropTypes.func,
-  inline: PropTypes.bool,
   isoWeek: PropTypes.bool,
   limitEndYear: PropTypes.number,
   onChange: PropTypes.func,

package/esm/DateRangePicker/Calendar.d.ts

@@ -13,7 +13,8 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     isoWeek?: boolean;
     limitEndYear?: number;
     locale?: DatePickerLocale;
-    onChangeCalendarDate?: (index: number, nextPageDate: Date) => void;
+    onChangeCalendarDate?: (index: number, date: Date) => void;
+    onChangeCalendarTime?: (index: number, date: Date) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event?: React.SyntheticEvent<any>) => void;
     showOneCalendar?: boolean;

package/esm/DateRangePicker/Calendar.js

@@ -19,9 +19,10 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       index = props.index,
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
+      onChangeCalendarTime = props.onChangeCalendarTime,
       showOneCalendar = props.showOneCalendar,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "showOneCalendar", "value"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
 
   var _useState = useState(),
       calendarState = _useState[0],
@@ -38,8 +39,8 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setCalendarState(undefined);
   }, [index, onChangeCalendarDate]);
   var handleChangePageTime = useCallback(function (nextPageDate) {
-    onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
+    onChangeCalendarTime(index, nextPageDate);
+  }, [index, onChangeCalendarTime]);
   var toggleMonthDropdown = useCallback(function () {
     setCalendarState(calendarState === CalendarState.DROP_MONTH ? undefined : CalendarState.DROP_MONTH);
   }, [calendarState]);

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { PickerComponent } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
+import { PickerComponent } from '../Picker';
 import { DisabledDateFunction, RangeType, ValueType } from './types';
 export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<ValueType> {
     /** Configure shortcut options */