@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/dist/esm/Tour/tour.js

@@ -0,0 +1,383 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["prefixCls", "className", "style", "classNames", "styles", "open", "steps", "current", "defaultCurrent", "onClose", "onFinish", "onChange", "placement", "mask", "closable", "closeIcon", "maskClosable", "indicatorsRender", "scrollIntoViewOptions"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import { X } from 'lucide-react';
+import { motion } from 'motion/react';
+import React, { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Button from "../Button";
+import { GlobalContext } from "../Config-Provider";
+import useEsc from "../hooks/useEsc";
+import useLatest from "../hooks/useLatest";
+import useMergedState from "../hooks/useMergedState";
+import { useLocale } from "../locale";
+import mergeContextToProps from "../utils/mergeContextToProps";
+import "./style/index.less";
+var GAP = 12;
+var resolveTarget = function resolveTarget(target) {
+  if (!target) return null;
+  if (typeof target === 'function') {
+    try {
+      return target();
+    } catch (_unused) {
+      return null;
+    }
+  }
+  if (typeof target === 'string') {
+    if (typeof document === 'undefined') return null;
+    return document.querySelector(target);
+  }
+  return target;
+};
+var SIDE_PREFIXES = ['top', 'bottom', 'left', 'right'];
+
+// Split a 12-way Placement into a base side + cross-axis alignment.
+//   'bottom'      -> { side: 'bottom', align: 'center' }
+//   'topLeft'     -> { side: 'top',    align: 'start'  }
+//   'leftBottom'  -> { side: 'left',   align: 'end'    }
+var parsePlacement = function parsePlacement(p) {
+  var _SIDE_PREFIXES$find;
+  if (!p) return {
+    side: 'bottom',
+    align: 'center'
+  };
+  var side = (_SIDE_PREFIXES$find = SIDE_PREFIXES.find(function (s) {
+    return p.startsWith(s);
+  })) !== null && _SIDE_PREFIXES$find !== void 0 ? _SIDE_PREFIXES$find : 'bottom';
+  var rest = p.slice(side.length);
+  var align = 'center';
+  if (side === 'top' || side === 'bottom') {
+    if (rest === 'Left') align = 'start';else if (rest === 'Right') align = 'end';
+  } else if (rest === 'Top') {
+    align = 'start';
+  } else if (rest === 'Bottom') {
+    align = 'end';
+  }
+  return {
+    side: side,
+    align: align
+  };
+};
+var OPPOSITE_SIDE = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+
+// Compute the card's fixed position from the highlight rect + placement, with
+// viewport flip + clamp. Returning rect's origin while size is unknown lets the
+// caller keep the card hidden until measured.
+var computeCardPos = function computeCardPos(rect, placement, size, gap) {
+  var cw = size.width,
+    ch = size.height;
+  var top = rect.top,
+    left = rect.left,
+    width = rect.width,
+    height = rect.height;
+  if (cw === 0 || ch === 0) {
+    return {
+      top: top,
+      left: left
+    };
+  }
+  var vw = window.innerWidth;
+  var vh = window.innerHeight;
+  var _parsePlacement = parsePlacement(placement),
+    preferredSide = _parsePlacement.side,
+    align = _parsePlacement.align;
+
+  // Lay the card out for a given side; align shifts it along the cross axis.
+  var layoutFor = function layoutFor(side) {
+    if (side === 'top' || side === 'bottom') {
+      var _main = side === 'top' ? top - ch - gap : top + height + gap;
+      var _cross;
+      if (align === 'start') _cross = left;else if (align === 'end') _cross = left + width - cw;else _cross = left + width / 2 - cw / 2;
+      return {
+        top: _main,
+        left: _cross
+      };
+    }
+    var main = side === 'left' ? left - cw - gap : left + width + gap;
+    var cross;
+    if (align === 'start') cross = top;else if (align === 'end') cross = top + height - ch;else cross = top + height / 2 - ch / 2;
+    return {
+      top: cross,
+      left: main
+    };
+  };
+
+  // True when the card fits on the main axis for this side.
+  var fits = function fits(side, pos) {
+    if (side === 'top') return pos.top >= gap;
+    if (side === 'bottom') return pos.top + ch <= vh - gap;
+    if (side === 'left') return pos.left >= gap;
+    return pos.left + cw <= vw - gap;
+  };
+  var side = preferredSide;
+  var pos = layoutFor(side);
+
+  // Flip to the opposite side when the preferred one overflows and the
+  // opposite fits. Alignment is preserved across the flip.
+  var flippedSide = OPPOSITE_SIDE[side];
+  var flipped = layoutFor(flippedSide);
+  if (!fits(side, pos) && fits(flippedSide, flipped)) {
+    side = flippedSide;
+    pos = flipped;
+  }
+
+  // Clamp into the viewport (mostly fixes cross-axis overflow).
+  return {
+    top: Math.max(gap, Math.min(pos.top, vh - ch - gap)),
+    left: Math.max(gap, Math.min(pos.left, vw - cw - gap))
+  };
+};
+var Tour = function Tour(baseprops) {
+  var _locale$tour, _step$placement;
+  var _useContext = useContext(GlobalContext),
+    tourCtx = _useContext.tour;
+  var props = mergeContextToProps(baseprops, tourCtx);
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var tourLocale = (_locale$tour = locale === null || locale === void 0 ? void 0 : locale.tour) !== null && _locale$tour !== void 0 ? _locale$tour : {
+    previous: 'Previous',
+    next: 'Next',
+    finish: 'Finish',
+    skip: 'Skip'
+  };
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'yee-tour' : _props$prefixCls,
+    className = props.className,
+    style = props.style,
+    classNames = props.classNames,
+    styles = props.styles,
+    open = props.open,
+    _props$steps = props.steps,
+    steps = _props$steps === void 0 ? [] : _props$steps,
+    current = props.current,
+    _props$defaultCurrent = props.defaultCurrent,
+    defaultCurrent = _props$defaultCurrent === void 0 ? 0 : _props$defaultCurrent,
+    onClose = props.onClose,
+    onFinish = props.onFinish,
+    onChange = props.onChange,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+    _props$mask = props.mask,
+    mask = _props$mask === void 0 ? true : _props$mask,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    closeIcon = props.closeIcon,
+    _props$maskClosable = props.maskClosable,
+    maskClosable = _props$maskClosable === void 0 ? false : _props$maskClosable,
+    indicatorsRender = props.indicatorsRender,
+    _props$scrollIntoView = props.scrollIntoViewOptions,
+    scrollIntoViewOptions = _props$scrollIntoView === void 0 ? true : _props$scrollIntoView,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useMergedState = useMergedState(defaultCurrent, {
+      value: current,
+      defaultValue: defaultCurrent
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedCurrent = _useMergedState2[0],
+    setMergedCurrent = _useMergedState2[1];
+  var step = steps[mergedCurrent];
+  var total = steps.length;
+  var isLast = mergedCurrent >= total - 1;
+  var stepPlacement = (_step$placement = step === null || step === void 0 ? void 0 : step.placement) !== null && _step$placement !== void 0 ? _step$placement : placement;
+  var targetEl = useMemo(function () {
+    return resolveTarget(step === null || step === void 0 ? void 0 : step.target);
+  }, [step, open]);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
+  var rafRef = useRef(null);
+
+  // Keep the latest scrollIntoViewOptions in a ref so the tracking effect below
+  // doesn't re-run (and re-scroll) when the caller passes an inline object on
+  // every render — that would loop with rAF → setRect → re-render forever.
+  var scrollIntoViewOptionsRef = useLatest(scrollIntoViewOptions);
+
+  // Track target rect: recompute on open / step / scroll / resize (rAF throttled).
+  useLayoutEffect(function () {
+    if (!open || !targetEl) {
+      setRect(null);
+      return;
+    }
+    var update = function update() {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(function () {
+        setRect(targetEl.getBoundingClientRect());
+      });
+    };
+    update();
+    // Bring the target into view, but only when it isn't already — the default
+    // (`true` ≈ `{ block: 'start' }`) would otherwise yank an already-visible
+    // element to the top of the viewport on every step change. A custom options
+    // object is honored as-is (its own `nearest` alignment handles the visible
+    // case), and `false` disables auto-scroll entirely.
+    var scrollTargetIfNeeded = function scrollTargetIfNeeded() {
+      var opts = scrollIntoViewOptionsRef.current;
+      if (opts === false) return;
+      if (opts === true) {
+        var vr = targetEl.getBoundingClientRect();
+        var inViewport = vr.top >= 0 && vr.left >= 0 && vr.bottom <= window.innerHeight && vr.right <= window.innerWidth;
+        if (inViewport) return;
+      }
+      try {
+        var _targetEl$scrollIntoV;
+        (_targetEl$scrollIntoV = targetEl.scrollIntoView) === null || _targetEl$scrollIntoV === void 0 || _targetEl$scrollIntoV.call(targetEl, opts);
+      } catch (_unused2) {
+        // noop
+      }
+    };
+    scrollTargetIfNeeded();
+    window.addEventListener('resize', update);
+    window.addEventListener('scroll', update, true);
+    return function () {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      window.removeEventListener('resize', update);
+      window.removeEventListener('scroll', update, true);
+    };
+  }, [open, targetEl, mergedCurrent]);
+  useEsc({
+    enabled: open,
+    onEsc: function onEsc() {
+      return onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+  });
+  var handleNext = useCallback(function () {
+    if (isLast) {
+      onFinish === null || onFinish === void 0 || onFinish();
+      return;
+    }
+    var nextCur = mergedCurrent + 1;
+    setMergedCurrent(nextCur);
+    onChange === null || onChange === void 0 || onChange(nextCur);
+  }, [isLast, mergedCurrent, onChange, onFinish, setMergedCurrent]);
+  var handlePrev = useCallback(function () {
+    if (mergedCurrent <= 0) return;
+    var prevCur = mergedCurrent - 1;
+    setMergedCurrent(prevCur);
+    onChange === null || onChange === void 0 || onChange(prevCur);
+  }, [mergedCurrent, onChange, setMergedCurrent]);
+
+  // Measure the card so we can position it against the highlight rect.
+  var cardRef = useRef(null);
+  var _useState3 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cardSize = _useState4[0],
+    setCardSize = _useState4[1];
+  useLayoutEffect(function () {
+    if (!open) return;
+    var node = cardRef.current;
+    if (!node) return;
+    var r = node.getBoundingClientRect();
+    setCardSize({
+      width: r.width,
+      height: r.height
+    });
+  }, [open, step]);
+  var cardPos = useMemo(function () {
+    if (!cardSize.width || !cardSize.height) return null;
+    if (rect) return computeCardPos(rect, stepPlacement, cardSize, GAP);
+    // No target: center the card in the viewport.
+    return {
+      top: window.innerHeight / 2 - cardSize.height / 2,
+      left: window.innerWidth / 2 - cardSize.width / 2
+    };
+  }, [rect, stepPlacement, cardSize]);
+  if (!open || typeof document === 'undefined' || !step) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(prefixCls, className),
+    style: style
+  }, rest), mask ? /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-mask"), !rect && "".concat(prefixCls, "-mask-full")),
+    onClick: maskClosable ? onClose : undefined
+  }) : null, mask && rect ? /*#__PURE__*/React.createElement(motion.div, {
+    className: clsx("".concat(prefixCls, "-highlight"), classNames === null || classNames === void 0 ? void 0 : classNames.highlight),
+    initial: false,
+    animate: {
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height
+    },
+    transition: {
+      type: 'spring',
+      visualDuration: 0.3,
+      bounce: 0.2
+    },
+    style: styles === null || styles === void 0 ? void 0 : styles.highlight
+  }) : null, /*#__PURE__*/React.createElement(motion.div, {
+    ref: cardRef,
+    className: clsx("".concat(prefixCls, "-content"), classNames === null || classNames === void 0 ? void 0 : classNames.content, step === null || step === void 0 ? void 0 : step.className),
+    initial: false,
+    animate: cardPos ? {
+      top: cardPos.top,
+      left: cardPos.left
+    } : {
+      top: 0,
+      left: 0
+    },
+    transition: {
+      type: 'spring',
+      visualDuration: 0.3,
+      bounce: 0.2
+    },
+    style: _objectSpread({
+      position: 'fixed',
+      visibility: cardPos ? 'visible' : 'hidden'
+    }, styles === null || styles === void 0 ? void 0 : styles.content)
+  }, closable ? /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    className: "".concat(prefixCls, "-close"),
+    onClick: onClose,
+    size: "small",
+    icon: closeIcon !== null && closeIcon !== void 0 ? closeIcon : /*#__PURE__*/React.createElement(X, {
+      size: 16
+    }),
+    "aria-label": tourLocale.skip
+  }) : null, step !== null && step !== void 0 && step.title ? /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-header"), classNames === null || classNames === void 0 ? void 0 : classNames.header),
+    style: styles === null || styles === void 0 ? void 0 : styles.header
+  }, step.title) : null, /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-body"), classNames === null || classNames === void 0 ? void 0 : classNames.body),
+    style: styles === null || styles === void 0 ? void 0 : styles.body
+  }, step === null || step === void 0 ? void 0 : step.description), /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-footer"), classNames === null || classNames === void 0 ? void 0 : classNames.footer),
+    style: styles === null || styles === void 0 ? void 0 : styles.footer
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-indicators")
+  }, indicatorsRender ? indicatorsRender(mergedCurrent, total) : "".concat(mergedCurrent + 1, " / ").concat(total)), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-buttons")
+  }, mergedCurrent > 0 ? /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: handlePrev
+  }, tourLocale.previous) : null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "small",
+    onClick: handleNext
+  }, isLast ? tourLocale.finish : tourLocale.next))))), document.body);
+};
+Tour.displayName = 'Tour';
+export default Tour;

package/dist/esm/Tree/demo/checkable.js

@@ -13,23 +13,23 @@ export default (function () {
     setCheckedKeys = _useState2[1];
   var treeData = [{
     label: 'parent 1',
-    key: '0-0',
+    key: 1,
     children: [{
       label: 'parent 1-0',
-      key: '0-0-0',
+      key: 10,
       children: [{
         label: 'leaf',
-        key: '0-0-0-0'
+        key: 100
       }, {
         label: 'leaf',
-        key: '0-0-0-1'
+        key: 101
       }]
     }, {
       label: 'parent 1-1',
-      key: '0-0-1',
+      key: 20,
       children: [{
         label: 'leaf',
-        key: '0-0-1-0'
+        key: 201
       }]
     }]
   }];

package/dist/esm/Tree/demo/draggable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Tree/demo/draggable.js

@@ -0,0 +1,61 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Tree, moveTreeNode } from "../..";
+import React, { useState } from 'react';
+var FIELD_NAMES = {
+  key: 'key',
+  label: 'label',
+  children: 'children'
+};
+export default (function () {
+  var _useState = useState([{
+      label: 'parent 1',
+      key: '0-0',
+      children: [{
+        label: 'parent 1-0',
+        key: '0-0-0',
+        children: [{
+          label: 'leaf-1',
+          key: '0-0-0-0'
+        }, {
+          label: 'leaf-2',
+          key: '0-0-0-1'
+        }]
+      }, {
+        label: 'parent 1-1',
+        key: '0-0-1',
+        children: [{
+          label: 'leaf-3',
+          key: '0-0-1-0'
+        }]
+      }]
+    }, {
+      label: 'parent 2',
+      key: '0-1',
+      children: [{
+        label: 'leaf-4',
+        key: '0-1-0'
+      }]
+    }]),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  return /*#__PURE__*/React.createElement(Tree, {
+    draggable: true,
+    defaultExpandAll: true,
+    dataSource: data,
+    onDrop: function onDrop(info) {
+      return setData(function (prev) {
+        return moveTreeNode(prev, {
+          dragKey: info.dragKey,
+          dropKey: info.dropKey,
+          position: info.position
+        }, FIELD_NAMES);
+      });
+    }
+  });
+});

package/dist/esm/Tree/demo/expanded.js

@@ -12,23 +12,23 @@ export default (function () {
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
   var treeData = [{
-    title: 'parent 1',
+    label: 'parent 1',
     key: '0-0',
     children: [{
-      title: 'parent 1-0',
+      label: 'parent 1-0',
       key: '0-0-0',
       children: [{
-        title: 'leaf',
+        label: 'leaf',
         key: '0-0-0-0'
       }, {
-        title: 'leaf',
+        label: 'leaf',
         key: '0-0-0-1'
       }]
     }, {
-      title: 'parent 1-1',
+      label: 'parent 1-1',
       key: '0-0-1',
       children: [{
-        title: 'leaf',
+        label: 'leaf',
         key: '0-0-1-0'
       }]
     }]

package/dist/esm/Tree/index.d.ts

@@ -1,3 +1,4 @@
 import Tree from './tree';
 export type { TreeProps } from './interface';
+export { moveTreeNode } from './utils/tree-tools';
 export default Tree;

package/dist/esm/Tree/index.js

@@ -1,2 +1,3 @@
 import Tree from "./tree";
+export { moveTreeNode } from "./utils/tree-tools";
 export default Tree;

package/dist/esm/Tree/interface.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export type SemanticType = '';
+export type DragPosition = 'before' | 'after' | 'inside';
+export type { MoveInfo } from './utils/tree-tools';
 export type TreeNode<T> = {
     /**
      * uid
@@ -102,6 +104,30 @@ export interface TreeProps<T> {
      * Whether to allow dragging
      */
     draggable?: boolean;
+    /**
+     * Whether to allow dropping a dragged node at the given position.
+     * Return false to forbid the drop (cursor shows "no-drop").
+     */
+    allowDrop?: (info: {
+        dragNode: T;
+        dropNode: T;
+        position: DragPosition;
+    }) => boolean;
+    /**
+     * Callback after a node is dropped. Pure controlled: the Tree does not
+     * mutate dataSource — reorder it yourself (e.g. with `moveTreeNode`).
+     */
+    onDrop?: (info: {
+        /** Original data of the dragged node */
+        dragNode: T;
+        /** Original data of the target node */
+        dropNode: T;
+        dragKey: string | number;
+        dropKey: string | number;
+        position: DragPosition;
+        /** Convenience flag: true when position is 'before' or 'after' */
+        dropToGap: boolean;
+    }) => void;
     /**
      * Whether to show connecting lines
      */

package/dist/esm/Tree/style/index.less

@@ -2,11 +2,36 @@
 
 @{pls} {
   &-node {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: var(--yee-tree-node-height);
 
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
+    &-dragging {
+      opacity: 0.4;
+    }
+
+    &-drag-over-before {
+      box-shadow: inset 0 2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-after {
+      box-shadow: inset 0 -2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-inside {
+      background: color-mix(
+        in srgb,
+        var(--yee-primary-color) 12%,
+        transparent
+      );
+    }
+
     &-switcher {
       display: inline-flex;
       align-items: center;

package/dist/esm/Tree/tree-node.js

@@ -1,4 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -32,9 +33,16 @@ var Node = function Node(props) {
     checkedKeys = _useContext.checkedKeys,
     expandedKeys = _useContext.expandedKeys,
     switcherIcon = _useContext.switcherIcon,
+    draggable = _useContext.draggable,
+    draggingKey = _useContext.draggingKey,
+    dropState = _useContext.dropState,
     onCheck = _useContext.onCheck,
     onSelect = _useContext.onSelect,
-    onExpand = _useContext.onExpand;
+    onExpand = _useContext.onExpand,
+    onNodeDragStart = _useContext.onNodeDragStart,
+    onNodeDragOver = _useContext.onNodeDragOver,
+    onNodeDragLeave = _useContext.onNodeDragLeave,
+    onNodeDrop = _useContext.onNodeDrop;
   var expanded = expandedKeys.includes(key);
   var checked = checkedKeys.includes(key);
   var selected = selectedKeys.includes(key);
@@ -110,11 +118,28 @@ var Node = function Node(props) {
       });
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(prefixCls, "-node"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-node-with-line"), showLine), "".concat(prefixCls, "-leaf-node"), isLeaf), "".concat(prefixCls, "-last-node"), isLast))
+  var isDropTarget = (dropState === null || dropState === void 0 ? void 0 : dropState.key) === key;
+  var dropPosition = isDropTarget ? dropState.position : null;
+  var dragProps = draggable && !disabled ? {
+    draggable: true,
+    onDragStart: function onDragStart(e) {
+      return onNodeDragStart(key, e);
+    },
+    onDragOver: function onDragOver(e) {
+      return onNodeDragOver(key, e);
+    },
+    onDragLeave: function onDragLeave(e) {
+      return onNodeDragLeave(key, e);
+    },
+    onDrop: function onDrop(e) {
+      return onNodeDrop(key, e);
+    }
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx("".concat(prefixCls, "-node"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-node-with-line"), showLine), "".concat(prefixCls, "-leaf-node"), isLeaf), "".concat(prefixCls, "-last-node"), isLast), "".concat(prefixCls, "-node-dragging"), draggingKey === key), "".concat(prefixCls, "-node-drag-over-before"), dropPosition === 'before'), "".concat(prefixCls, "-node-drag-over-after"), dropPosition === 'after'), "".concat(prefixCls, "-node-drag-over-inside"), dropPosition === 'inside'))
     // style={{
     //   paddingLeft: depth * 28 + (isLeaf && checkable ? 24 : 0),
     // }}
-  }, renderEmptyNodes(depth), renderExpandedIcon(), renderCheckbox(), renderLabel());
+  }, dragProps), renderEmptyNodes(depth), renderExpandedIcon(), renderCheckbox(), renderLabel());
 };
 export default Node;