rsuite 5.4.4 → 5.5.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [5.5.0](https://github.com/rsuite/rsuite/compare/v5.4.4...v5.5.0) (2022-01-13)
+
+### Bug Fixes
+
+- **Dropdown:** infer toggleAs component props ([#2299](https://github.com/rsuite/rsuite/issues/2299)) ([84611cc](https://github.com/rsuite/rsuite/commit/84611cc6f88e1d9cd712bc3f08be559d0a146ba0))
+- **InputNumber:** inherit html input attributes ([#2298](https://github.com/rsuite/rsuite/issues/2298)) ([d7622ee](https://github.com/rsuite/rsuite/commit/d7622eed72b36ed15e91f606027d2e540391bdc7))
+- **MultiCascader:** fix not rendering the count of selected values ([#2289](https://github.com/rsuite/rsuite/issues/2289)) ([324e90c](https://github.com/rsuite/rsuite/commit/324e90c8499adf58cb25083fd5c99fe98eb9ecba))
+- **Tree:** fix dragNode has cyclic object ([#2281](https://github.com/rsuite/rsuite/issues/2281)) ([26cbaf2](https://github.com/rsuite/rsuite/commit/26cbaf2fd92ab562174e19cf55388c01fe22143a)), closes [#2268](https://github.com/rsuite/rsuite/issues/2268)
+
+### Features
+
+- **InputNumber:** support keyboard interaction ([#2294](https://github.com/rsuite/rsuite/issues/2294)) ([46993e2](https://github.com/rsuite/rsuite/commit/46993e235ca3d3ee8b6faa16a5fa11a8ed544e3b))
+- **RangeSlider:** add `constraint` prop ([#2291](https://github.com/rsuite/rsuite/issues/2291)) ([a2d38a8](https://github.com/rsuite/rsuite/commit/a2d38a8efe4f85c28ce1f4ee79a89eda1e1cf7b0))
+
+### Performance Improvements
+
+- **styles:** simplify compound selectors over 4 levels ([#2282](https://github.com/rsuite/rsuite/issues/2282)) ([304e8da](https://github.com/rsuite/rsuite/commit/304e8da0c2057d148bbad36674aba33382439949))
+
 ## [5.4.4](https://github.com/rsuite/rsuite/compare/v5.4.3...v5.4.4) (2022-01-06)
 
 ### Bug Fixes

package/CheckTreePicker/styles/index.less

@@ -1,6 +1,7 @@
 @import '../../styles/common';
-@import '../../Picker/styles/mixin';
+@import '../../Picker/styles/index';
 @import '../../TreePicker/styles/mixin';
+@import '../../Checkbox/styles/index';
 
 // **Check Tree Picker
 // **----------------------
@@ -23,31 +24,9 @@
       }
     }
   }
-}
-
-.rs-check-tree-node {
-  position: relative;
-  font-size: @picker-tree-node-font-size;
-  line-height: @picker-tree-node-line-height;
-
-  &-label {
-    .rs-check-item {
-      display: inline-block;
-
-      .rs-picker-menu & {
-        display: block;
-      }
-    }
 
-    &:focus .rs-check-item .rs-checkbox-checker > label {
-      .picker-item-hover();
-    }
-
-    .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
-      .picker-item-active();
-    }
-
-    .rs-check-item .rs-checkbox-checker > label {
+  .rs-check-item .rs-checkbox-checker {
+    > label {
       text-align: left;
       position: relative;
       margin: 0;
@@ -67,37 +46,59 @@
         top: 0;
         margin-left: -58px; // 10px + 36px + 12px
       }
+    }
 
-      .rs-checkbox-wrapper {
-        left: (@checkbox-sense-width + 10px);
-      }
+    .rs-checkbox-wrapper {
+      left: (@checkbox-sense-width + 10px);
+    }
+  }
+}
 
-      // Only has the first level
-      .rs-check-tree-without-children & {
-        padding-left: 34px; //text gap + checkbox space
+// Only has the first level
+.rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
+  > label {
+    padding-left: 34px; //text gap + checkbox space
 
-        &::before {
-          width: 28px;
-          margin-left: -36px;
-        }
+    &::before {
+      width: 28px;
+      margin-left: -36px;
+    }
+  }
 
-        .rs-checkbox-wrapper {
-          left: 0;
-        }
-      }
+  .rs-checkbox-wrapper {
+    left: 0;
+  }
+}
+
+.rs-check-tree-node {
+  position: relative;
+  font-size: @picker-tree-node-font-size;
+  line-height: @picker-tree-node-line-height;
+
+  .rs-check-item {
+    display: inline-block;
+
+    .rs-picker-menu & {
+      display: block;
     }
   }
 
+  &:focus .rs-check-item .rs-checkbox-checker > label {
+    .picker-item-hover();
+  }
+
+  .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
+    .picker-item-active();
+  }
+
   // Uncheckable state
-  &-all-uncheckable > .rs-check-tree-node-label {
-    .rs-check-item .rs-checkbox-checker > label {
-      padding-left: 22px; // 10px + 12px
+  &-all-uncheckable > .rs-check-item .rs-checkbox-checker > label {
+    padding-left: 22px; // 10px + 12px
 
-      &::before {
-        width: 14px;
-        margin-left: 0;
-        left: 0;
-      }
+    &::before {
+      width: 14px;
+      margin-left: 0;
+      left: 0;
     }
   }
 }

package/Picker/styles/mixin.less

@@ -265,7 +265,8 @@
     line-height: @line-height;
   }
 
-  .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
+  .rs-picker-tag & ~ .rs-picker-tag-wrapper {
     padding-bottom: @padding-vertical - 3px;
 
     .rs-tag {
@@ -278,7 +279,7 @@
       font-size: @font-size;
     }
 
-    .rs-picker-search-input input {
+    input {
       height: @line-height * @font-size - 2px;
     }
   }

package/Sidenav/styles/index.less

@@ -37,34 +37,59 @@
     margin: 0 !important;
   }
 
-  .high-contrast-mode({
-    .rs-dropdown-toggle,
-    .rs-dropdown-menu {
-      border: none;
-    }
-  });
+  // <Dropdown> within <Sidenav>
+  > .rs-dropdown {
+    // Submenu toggle
+    .rs-dropdown-item-toggle {
+      display: block;
+      width: 100%;
+      text-align: start;
+      background: none;
+      padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
+      position: relative;
 
-  .rs-dropdown-item-toggle {
-    display: block;
-    width: 100%;
-    text-align: start;
-    background: none;
+      .rs-sidenav-collapse-in & {
+        padding-left: @sidenav-level2-retract;
+      }
 
-    &:focus {
-      outline: 0;
-    }
+      &:focus {
+        outline: 0;
+      }
 
-    &:focus-visible {
-      .focus-ring(inset);
+      &:focus-visible {
+        .focus-ring(inset);
 
-      .high-contrast-mode({
-        .focus-ring(slim-inset);
-      });
+        .high-contrast-mode({
+          .focus-ring(slim-inset);
+        });
 
-      z-index: 1;
+        z-index: 1;
+      }
+
+      // Submenu toggle icon
+      &-icon {
+        position: absolute;
+        right: @sidenav-padding-horizontal;
+        top: @sidenav-children-padding-vertical;
+        width: auto;
+        height: @sidenav-dropdown-toggle-caret-width;
+        transform: rotate(90deg);
+      }
+    }
+
+    // Expanded submenu toggle icon
+    .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
+      transform: rotate(270deg);
     }
   }
 
+  .high-contrast-mode({
+    .rs-dropdown-toggle,
+    .rs-dropdown-menu {
+      border: none;
+    }
+  });
+
   .rs-sidenav-item:focus-visible {
     .focus-ring(inset);
 
@@ -225,32 +250,17 @@
       transform: rotate(180deg);
     }
 
-    .rs-dropdown-item.rs-dropdown-item-expand
-      > .rs-dropdown-item-toggle
-      > .rs-dropdown-item-toggle-icon {
-      transform: rotate(270deg);
-    }
-
     // Dropdown menu
-    > .rs-dropdown-menu {
+    .rs-dropdown-menu {
       .reset-sidenav-dropdown-menu();
+    }
 
-      // Submenu
-      .rs-dropdown-item-submenu {
-        padding: 0;
-
-        > .rs-dropdown-menu-toggle {
-          display: block;
-          padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
-        }
-
-        > .rs-dropdown-menu {
-          .reset-sidenav-dropdown-menu();
-        }
+    // Submenu
+    .rs-dropdown-item-submenu {
+      padding: 0;
 
-        &:hover {
-          background-color: transparent;
-        }
+      &:hover {
+        background-color: transparent;
       }
     }
   }
@@ -283,21 +293,6 @@
   // @warn Here we can only use absolute positioning because of the limitations of using <Dropdown/> component.
 
   .rs-dropdown-item-submenu {
-    > .rs-dropdown-item-toggle {
-      padding-left: @sidenav-level2-retract;
-      padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
-      position: relative;
-
-      > .rs-dropdown-item-toggle-icon {
-        position: absolute;
-        right: @sidenav-padding-horizontal;
-        top: @sidenav-children-padding-vertical;
-        width: auto;
-        height: @sidenav-dropdown-toggle-caret-width;
-        transform: rotate(90deg);
-      }
-    }
-
     > .rs-dropdown-item-menu-icon {
       padding-top: @sidenav-children-padding-vertical;
       padding-bottom: @sidenav-children-padding-vertical;

package/TreePicker/styles/index.less

@@ -34,7 +34,7 @@
   text-align: left;
   margin: 0 0 4px 0;
 
-  > .rs-tree-node-label {
+  &-label {
     position: relative;
     margin: 0;
     //text gap
@@ -44,7 +44,7 @@
     font-size: @picker-tree-node-font-size;
     line-height: @picker-tree-node-line-height;
 
-    > .rs-tree-node-label-content {
+    &-content {
       padding: @custom-picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal
         @custom-picker-tree-node-padding-vertical @picker-tree-arrow-down-gap;
       display: inline-block;
@@ -59,7 +59,7 @@
     }
   }
 
-  &&-active > .rs-tree-node-label > .rs-tree-node-label-content {
+  &-active &-label-content {
     .picker-item-active();
 
     color: var(--rs-text-link);

package/cjs/Dropdown/Dropdown.d.ts

@@ -3,6 +3,7 @@ import DropdownMenu from './DropdownMenu';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { IconProps } from '@rsuite/icons/lib/Icon';
 import DropdownItem from './DropdownItem';
+import Button from '../Button';
 export declare type DropdownTrigger = 'click' | 'hover' | 'contextMenu';
 export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {
     /** Define the title as a submenu */
@@ -48,6 +49,10 @@ export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttr
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 export interface DropdownComponent extends RsRefForwardingComponent<'div', DropdownProps> {
+    <ToggleAs extends React.ElementType = typeof Button>(props: DropdownProps & {
+        ref?: React.Ref<any>;
+        toggleAs?: ToggleAs;
+    } & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
     Item: typeof DropdownItem;
     Menu: typeof DropdownMenu;
 }

package/cjs/Dropdown/test/Dropdown.test.d.ts

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

package/cjs/Dropdown/test/Dropdown.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+
+var ref = /*#__PURE__*/_react.default.createRef(); // Infer `toggleAs` props (defaults to Button)
+
+
+/*#__PURE__*/
+_react.default.createElement(_Dropdown.default, {
+  ref: ref,
+  appearance: "subtle",
+  size: "sm"
+});
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+
+var CustomToggle = function CustomToggle(_props) {
+  return null;
+};
+
+/*#__PURE__*/
+_react.default.createElement(_Dropdown.default, {
+  ref: ref,
+  toggleAs: CustomToggle,
+  myProp: "myValue"
+});

package/cjs/InputNumber/InputNumber.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WithAsProps, TypeAttributes, FormControlBaseProps } from '../@types/common';
-export interface InputNumberProps<T = number | string> extends WithAsProps, FormControlBaseProps<T> {
+export interface InputNumberProps<T = number | string> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
     /** Button can have different appearances */
     buttonAppearance?: TypeAttributes.Appearance;
     /** An input can show that it is disabled */

package/cjs/InputNumber/InputNumber.js

@@ -114,15 +114,15 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       step = _props$step === void 0 ? 1 : _props$step,
       _props$buttonAppearan = props.buttonAppearance,
       buttonAppearance = _props$buttonAppearan === void 0 ? 'subtle' : _props$buttonAppearan,
-      _props$min = props.min,
-      min = _props$min === void 0 ? -Infinity : _props$min,
-      _props$max = props.max,
-      max = _props$max === void 0 ? Infinity : _props$max,
+      minProp = props.min,
+      maxProp = props.max,
       _props$scrollable = props.scrollable,
       scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
       onChange = props.onChange,
       onWheel = props.onWheel,
       restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "disabled", "readOnly", "plaintext", "value", "defaultValue", "size", "prefix", "postfix", "step", "buttonAppearance", "min", "max", "scrollable", "onChange", "onWheel"]);
+  var min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;
+  var max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;
 
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
       value = _useControlled[0],
@@ -187,6 +187,35 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var bit = decimals(val, step);
     handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
   }, [getSafeValue, handleChangeValue, step, value]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    switch (event.key) {
+      case _utils.KEY_VALUES.UP:
+        event.preventDefault();
+        handlePlus(event);
+        break;
+
+      case _utils.KEY_VALUES.DOWN:
+        event.preventDefault();
+        handleMinus(event);
+        break;
+
+      case _utils.KEY_VALUES.HOME:
+        if (typeof minProp !== 'undefined') {
+          event.preventDefault();
+          handleChangeValue(getSafeValue(minProp), event);
+        }
+
+        break;
+
+      case _utils.KEY_VALUES.END:
+        if (typeof maxProp !== 'undefined') {
+          event.preventDefault();
+          handleChangeValue(getSafeValue(maxProp), event);
+        }
+
+        break;
+    }
+  }, [handlePlus, handleMinus, minProp, maxProp, handleChangeValue, getSafeValue]);
   var handleWheel = (0, _react.useCallback)(function (event) {
     if (!disabled && !readOnly && event.target === document.activeElement) {
       event.preventDefault();
@@ -233,7 +262,7 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [handleWheel, scrollable]);
 
   var input = /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
-    type: "text",
+    type: "number",
     autoComplete: "off",
     step: step,
     inputRef: inputRef,
@@ -243,7 +272,8 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     disabled: disabled,
     readOnly: readOnly,
     plaintext: plaintext,
-    ref: plaintext ? ref : undefined
+    ref: plaintext ? ref : undefined,
+    onKeyDown: handleKeyDown
   }));
 
   if (plaintext) {

package/cjs/InputNumber/test/InputNumber.test.d.ts

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

package/cjs/InputNumber/test/InputNumber.test.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputNumber = _interopRequireDefault(require("../InputNumber"));
+
+// Inherits <input type="number" /> attributes
+
+/*#__PURE__*/
+_react.default.createElement(_InputNumber.default, {
+  placeholder: "Enter number"
+});

package/cjs/MultiCascader/MultiCascader.js

@@ -482,6 +482,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {
     classPrefix: classPrefix,
     hasValue: hasValue,
+    countable: countable,
     name: 'cascader',
     appearance: appearance,
     cleanable: cleanable

package/cjs/RangeSlider/RangeSlider.d.ts

@@ -1,6 +1,16 @@
 import React from 'react';
 import { SliderProps } from '../Slider';
 export declare type Range = [number, number];
-export declare type RangeSliderProps = SliderProps<Range>;
-declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<unknown>>;
+export declare type RangeSliderProps = SliderProps<Range> & {
+    /**
+     * Add constraint to validate before onChange is dispatched
+     */
+    constraint?: (range: Range) => boolean;
+};
+declare const RangeSlider: React.ForwardRefExoticComponent<SliderProps<Range> & {
+    /**
+     * Add constraint to validate before onChange is dispatched
+     */
+    constraint?: ((range: Range) => boolean) | undefined;
+} & React.RefAttributes<unknown>>;
 export default RangeSlider;

package/cjs/RangeSlider/RangeSlider.js

@@ -45,6 +45,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       Component = _props$as === void 0 ? 'div' : _props$as,
       barClassName = props.barClassName,
       className = props.className,
+      constraint = props.constraint,
       _props$defaultValue = props.defaultValue,
       defaultValue = _props$defaultValue === void 0 ? defaultDefaultValue : _props$defaultValue,
       graduated = props.graduated,
@@ -71,7 +72,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderMark = props.renderMark,
       onChange = props.onChange,
       onChangeCommitted = props.onChangeCommitted,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "constraint", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
   var barRef = (0, _react.useRef)(null); // Define the parameter position of the handle
 
   var handleIndexs = (0, _react.useRef)([0, 1]);
@@ -180,14 +181,27 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return nextValue;
   }, [getRangeValue, getValidValue]);
+  /**
+   * Whether a range is valid against given constraint (if any)
+   * Should check before every `setValue` calls
+   */
+
+  var isRangeMatchingConstraint = (0, _react.useCallback)(function (range) {
+    // If no constraint is defined, any range is valid
+    if (!constraint) return true;
+    return constraint(range);
+  }, [constraint]);
   /**
    * Callback function that is fired when the mousemove is triggered
    */
 
   var handleDragMove = (0, _utils.useEventCallback)(function (event, dataset) {
     var nextValue = getNextValue(event, dataset);
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
   });
   /**
    * Callback function that is fired when the mouseup is triggered
@@ -195,9 +209,12 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var handleChangeCommitted = (0, _react.useCallback)(function (event, dataset) {
     var nextValue = getNextValue(event, dataset);
-    setValue(nextValue);
-    onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
-  }, [getNextValue, onChangeCommitted, setValue]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
+    }
+  }, [getNextValue, onChangeCommitted, isRangeMatchingConstraint, setValue]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var _event$target;
 
@@ -240,9 +257,12 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 
     event.preventDefault();
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [max, min, onChange, rtl, setValue, step, value]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
+  }, [max, min, onChange, rtl, isRangeMatchingConstraint, setValue, step, value]);
   var handleClick = (0, _react.useCallback)(function (event) {
     if (disabled) {
       return;
@@ -259,9 +279,12 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     var nextValue = getValidValue([start, end].sort());
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [disabled, getValidValue, getValueByPosition, onChange, setValue, value]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
+  }, [disabled, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, setValue, value]);
   var handleProps = (0, _react.useMemo)(function () {
     return [{
       value: value[0],

package/cjs/utils/treeUtils.js

@@ -322,6 +322,7 @@ function createUpdateTreeDataFunction(params, _ref2) {
     var dragNode = params.dragNode,
         dropNode = params.dropNode,
         dropNodePosition = params.dropNodePosition;
+    var cloneDragNode = (0, _extends3.default)({}, dragNode);
     removeDragNode(data, params, {
       valueKey: valueKey,
       childrenKey: childrenKey
@@ -336,16 +337,16 @@ function createUpdateTreeDataFunction(params, _ref2) {
           if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER) {
             _item2[childrenKey] = (0, _isNil2.default)(_item2[childrenKey]) ? [] : _item2[childrenKey];
 
-            _item2[childrenKey].push(dragNode);
+            _item2[childrenKey].push(cloneDragNode);
 
             break;
           } else if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP) {
             // drag to top of node
-            items.splice(_index2, 0, dragNode);
+            items.splice(_index2, 0, cloneDragNode);
             break;
           } else if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM) {
             // drag to bottom of node
-            items.splice(_index2 + 1, 0, dragNode);
+            items.splice(_index2 + 1, 0, cloneDragNode);
             break;
           }
         }