@sheinx/base 3.1.0-rc.3 → 3.1.0

package/cjs/tabs/tabs-header.js

@@ -11,6 +11,7 @@ var _hooks = require("@sheinx/hooks");
 var _tab = _interopRequireDefault(require("./tab"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _button = _interopRequireDefault(require("../button"));
+var _config = require("../config");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -24,6 +25,20 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
+var getRectDiff = function getRectDiff(node, pNode) {
+  var nodeRect = node.getBoundingClientRect();
+  var pNodeRect = pNode.getBoundingClientRect();
+  return {
+    left: nodeRect.left - pNodeRect.left,
+    right: nodeRect.right - pNodeRect.right,
+    top: nodeRect.top - pNodeRect.top,
+    bottom: nodeRect.bottom - pNodeRect.bottom,
+    width: nodeRect.width,
+    height: nodeRect.height,
+    parentWidth: pNodeRect.width,
+    parentHeight: pNodeRect.height
+  };
+};
 var TabsHeader = function TabsHeader(props) {
   var _jssStyle$tabs;
   var tabs = props.tabs,
@@ -47,6 +62,8 @@ var TabsHeader = function TabsHeader(props) {
     isVertical = _useTabsContext.isVertical,
     onCollapsible = _useTabsContext.onCollapsible,
     active = _useTabsContext.active;
+  var config = (0, _config.useConfig)();
+  var isRtl = config.direction === 'rtl';
   (0, _react.useEffect)(function () {
     if (sticky && headerRef.current && scrollRef.current && !loaded) {
       setLoaded(true);
@@ -56,7 +73,8 @@ var TabsHeader = function TabsHeader(props) {
       autoScroll: true,
       direction: isVertical ? 'Y' : 'X',
       containerRef: headerRef,
-      targetRef: scrollRef
+      targetRef: scrollRef,
+      isRtl: config.direction === 'rtl'
     }),
     delta = _useTransform.delta,
     atStart = _useTransform.atStart,
@@ -64,20 +82,20 @@ var TabsHeader = function TabsHeader(props) {
     transformStyle = _useTransform.style,
     shouldScroll = _useTransform.shouldScroll,
     handleTransform = _useTransform.handleTransform,
-    setTransform = _useTransform.setTransform,
-    getRectDiff = _useTransform.getRectDiff;
+    setTransform = _useTransform.setTransform;
   var headerStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
   var headerClass = (0, _classnames.default)(headerStyle.header, {});
   var headerWrapperClass = (0, _classnames.default)(headerStyle.headerWrapper, {});
   var buttonStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.button) || {};
-  var calculateOffset = function calculateOffset(scrollOffsetValue, currentOffsetValue, currentOffsetValueOther) {
-    var isAdditon = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-    var nextOffset = scrollOffsetValue;
-    var startOffset = isAdditon ? scrollOffsetValue - currentOffsetValue : scrollOffsetValue + currentOffsetValue;
-    if (currentOffsetValue < 0 || currentOffsetValueOther > 0) {
-      nextOffset = startOffset;
+  var calculateOffset = function calculateOffset(currentScrollOffsetStartValue, width, currentOffsetStartValue, currentOffsetEndOther, parentWidth) {
+    var single = isRtl && !isVertical ? -1 : 1;
+    if (currentOffsetStartValue * single < 0) {
+      return currentScrollOffsetStartValue;
+    }
+    if (currentOffsetEndOther * single > 0) {
+      return currentScrollOffsetStartValue + single * (width - parentWidth);
     }
-    return nextOffset;
+    return undefined;
   };
   (0, _react.useEffect)(function () {
     if (!shouldScroll) return;
@@ -85,30 +103,33 @@ var TabsHeader = function TabsHeader(props) {
       var currentTab = tabRef.current[active];
       if (!currentTab || !headerRef.current || !scrollRef.current) return 0;
       var currentOffest = getRectDiff(currentTab, headerRef.current);
-      var scrollOffest = getRectDiff(scrollRef.current, headerRef.current);
-      if (['top-right', 'bottom-right'].includes(getPosition)) {
-        return -calculateOffset(scrollOffest.right, currentOffest.left, currentOffest.right);
+      var currentScrollOffset = getRectDiff(currentTab, scrollRef.current);
+      // vertical
+      if (['left-top', 'right-top', 'left-bottom', 'right-bottom'].includes(getPosition)) {
+        return calculateOffset(currentScrollOffset.top, currentScrollOffset.height, currentOffest.top, currentOffest.bottom, currentOffest.parentHeight);
       }
-      if (['left-top', 'right-top'].includes(getPosition)) {
-        return calculateOffset(-scrollOffest.top, currentOffest.top, currentOffest.bottom, false);
+      if (isRtl) {
+        return calculateOffset(currentScrollOffset.right, currentScrollOffset.width, currentOffest.right, currentOffest.left, currentOffest.parentWidth);
       }
-      if (['left-bottom', 'right-bottom'].includes(getPosition)) {
-        return -calculateOffset(scrollOffest.bottom, currentOffest.top, currentOffest.bottom);
-      }
-      return calculateOffset(-scrollOffest.left, currentOffest.left, currentOffest.right, false);
+      return calculateOffset(currentScrollOffset.left, currentScrollOffset.width, currentOffest.left, currentOffest.right, currentOffest.parentWidth);
     };
-    setTransform(getActiveTabOffest());
+    var offset = getActiveTabOffest();
+    if (offset !== undefined) {
+      setTransform(offset);
+    }
   }, [active, tabRef.current, headerRef.current, scrollRef.current, shouldScroll]);
   var getDataProps = function getDataProps(options) {
     return _hooks.util.getDataAttribute(_objectSpread({}, options));
   };
   var handlePrev = function handlePrev() {
     if (!headerRef.current) return;
-    setTransform(delta - headerRef.current.clientWidth);
+    var single = isRtl && !isVertical ? -1 : 1;
+    setTransform(delta - headerRef.current.clientWidth * single);
   };
   var handleNext = function handleNext() {
     if (!headerRef.current) return;
-    setTransform(delta + headerRef.current.clientWidth);
+    var single = isRtl && !isVertical ? -1 : 1;
+    setTransform(delta + headerRef.current.clientWidth * single);
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -153,6 +174,7 @@ var TabsHeader = function TabsHeader(props) {
       state: atStart ? 'disabled' : ''
     })), {}, {
       onClick: handlePrev,
+      dir: config.direction,
       children: shape === 'card' ? _icons.default.tabs.Pre : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: headerStyle.iconInner,
         children: _icons.default.tabs.Pre
@@ -166,6 +188,7 @@ var TabsHeader = function TabsHeader(props) {
       state: atEnd ? 'disabled' : ''
     })), {}, {
       onClick: handleNext,
+      dir: config.direction,
       children: shape === 'card' ? _icons.default.tabs.Next : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: headerStyle.iconInner,
         children: _icons.default.tabs.Next
@@ -196,6 +219,7 @@ var TabsHeader = function TabsHeader(props) {
     position: props.getPosition,
     shape: shape
   })), {}, {
+    dir: config.direction,
     children: [!hideSplit && shape !== 'card' && renderHr(), collapsible && renderCollapsibleButton(), shouldScroll && renderPrevButton(), renderTab(), shouldScroll && renderNextButton(), extra && renderExtra()]
   }));
 };

package/cjs/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAe,SAAS,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI;YAAW,SAAS;;CA2P7B,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAe,SAAS,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI;YAAW,SAAS;;CAuP7B,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/cjs/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AA6LhD,wBAAoC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AA8LhD,wBAAoC"}

package/cjs/textarea/textarea.js

@@ -143,6 +143,7 @@ var Textarea = function Textarea(props0) {
       style: {
         minWidth: 'auto'
       },
+      dir: config.direction,
       className: (0, _classnames.default)(textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.info, !!isError && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.infoError)),
       children: text
     }, 'info');

package/cjs/textarea/use-auto-size.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-auto-size.d.ts","sourceRoot":"","sources":["use-auto-size.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,QAAA,MAAM,WAAW;;;;;0BAKI,eAAe;;WAmBT,MAAM,YAAY,gBAyB5C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"use-auto-size.d.ts","sourceRoot":"","sources":["use-auto-size.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,QAAA,MAAM,WAAW;;;;;0BAKI,eAAe;;WAoBT,MAAM,YAAY,gBAyB5C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/textarea/use-auto-size.js

@@ -34,6 +34,7 @@ var useAutoSize = function useAutoSize(props) {
     if (!shadowRef.current) return;
     var v = value || '';
     if (shadowRef.current.value !== v) shadowRef.current.value = v;
+    if (shadowRef.current.scrollHeight === 0) return;
     setHeight(shadowRef.current.scrollHeight);
   };
   _react.default.useEffect(function () {

package/cjs/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["tooltip.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,OAAO,UAAW,YAAY,uBAwFnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["tooltip.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,QAAA,MAAM,OAAO,UAAW,YAAY,uBA0FnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/cjs/tooltip/tooltip.js

@@ -8,6 +8,7 @@ var _hooks = require("@sheinx/hooks");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _absoluteList = _interopRequireDefault(require("../absolute-list"));
+var _config = require("../config");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -35,6 +36,7 @@ var Tooltip = function Tooltip(props) {
     _props$position = props.position,
     popsitionProps = _props$position === void 0 ? 'bottom' : _props$position;
   var tooltipClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$tooltip = jssStyle.tooltip) === null || _jssStyle$tooltip === void 0 ? void 0 : _jssStyle$tooltip.call(jssStyle);
+  var config = (0, _config.useConfig)();
   var childrenProps = /*#__PURE__*/(0, _react.isValidElement)(children) ? children === null || children === void 0 ? void 0 : children.props : {};
   var _usePopup = (0, _hooks.usePopup)({
       position: popsitionProps,
@@ -91,6 +93,7 @@ var Tooltip = function Tooltip(props) {
       })), {}, {
         ref: popupRef,
         onMouseLeave: events.onMouseLeave,
+        dir: config.direction,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: style,
           className: (0, _classnames.default)(tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.content),

package/cjs/transfer/transfer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transfer.d.ts","sourceRoot":"","sources":["transfer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAiC,YAAY,EAAQ,MAAM,eAAe,CAAC;AAKlF,QAAA,MAAM,QAAQ,gGAoLb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"transfer.d.ts","sourceRoot":"","sources":["transfer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAiC,YAAY,EAAQ,MAAM,eAAe,CAAC;AAMlF,QAAA,MAAM,QAAQ,gGAuLb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/cjs/transfer/transfer.js

@@ -10,6 +10,7 @@ var _hooks = require("@sheinx/hooks");
 var _transferList = _interopRequireDefault(require("./transfer-list"));
 var _transferOperate = _interopRequireDefault(require("./transfer-operate"));
 var _icons = _interopRequireDefault(require("../icons"));
+var _config = require("../config");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -58,6 +59,8 @@ var Transfer = function Transfer(props) {
     onFilterProp = props.onFilter,
     onChangeProp = props.onChange,
     onSelectChangeProp = props.onSelectChange;
+  var config = (0, _config.useConfig)();
+  var isRtl = config.direction === 'rtl';
   var _useTransfer = (0, _hooks.useTransfer)({
       data: data,
       keygen: keygen,
@@ -104,7 +107,7 @@ var Transfer = function Transfer(props) {
         operation: sourceOperation,
         listDatum: sourceDatum,
         value: sourceSelectedKeys,
-        children: operationIcon && !sourceOperation && _icons.default.transfer.Add
+        children: operationIcon && !sourceOperation && (isRtl ? _icons.default.transfer.Remove : _icons.default.transfer.Add)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_transferOperate.default, {
         size: size,
         listType: "target",
@@ -114,7 +117,7 @@ var Transfer = function Transfer(props) {
         operation: targetOperation,
         listDatum: targetDatum,
         value: targetSelectedKeys,
-        children: operationIcon && !targetOperation && _icons.default.transfer.Remove
+        children: operationIcon && !targetOperation && (isRtl ? _icons.default.transfer.Add : _icons.default.transfer.Remove)
       })]
     });
   };

package/cjs/tree/tree-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-checkbox.d.ts","sourceRoot":"","sources":["tree-checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,QAAA,MAAM,YAAY,gFAwBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tree-checkbox.d.ts","sourceRoot":"","sources":["tree-checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,QAAA,MAAM,YAAY,gFA8BjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/cjs/tree/tree-checkbox.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _checkbox = require("../checkbox");
 var _treeContext = require("./tree-context");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,7 +17,8 @@ var TreeCheckbox = function TreeCheckbox(props) {
   var _useTreeContext = (0, _treeContext.useTreeContext)(),
     getValue = _useTreeContext.getValue,
     set = _useTreeContext.set,
-    getChecked = _useTreeContext.getChecked;
+    getChecked = _useTreeContext.getChecked,
+    unBindUpdate = _useTreeContext.unBindUpdate;
   var handleChange = function handleChange(_, checked) {
     set(id, checked ? 1 : 0);
     if (onChange) {
@@ -24,6 +26,11 @@ var TreeCheckbox = function TreeCheckbox(props) {
     }
   };
   var checked = getChecked(id);
+  (0, _react.useEffect)(function () {
+    return function () {
+      unBindUpdate(id);
+    };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.Checkbox
   //@ts-ignore
   , {

package/cjs/tree/tree-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-content.d.ts","sourceRoot":"","sources":["tree-content.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAQ,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,QAAA,MAAM,WAAW,mGAgLhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"tree-content.d.ts","sourceRoot":"","sources":["tree-content.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAmB,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAOvD,QAAA,MAAM,WAAW,mGA+MhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/tree/tree-content.js

@@ -10,6 +10,7 @@ var _treeCheckbox = _interopRequireDefault(require("./tree-checkbox"));
 var _treeContext = require("./tree-context");
 var _icons = _interopRequireDefault(require("../icons"));
 var _spin = _interopRequireDefault(require("../spin"));
+var _config = require("../config");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -42,9 +43,13 @@ var NodeContent = function NodeContent(props) {
     onToggle = props.onToggle,
     onDragOver = props.onDragOver,
     onNodeClick = props.onNodeClick;
+  var forceUpdate = (0, _hooks.useRender)();
   var _useTreeContext = (0, _treeContext.useTreeContext)(),
-    isDisabled = _useTreeContext.isDisabled;
+    isDisabled = _useTreeContext.isDisabled,
+    bindUpdate = _useTreeContext.bindUpdate;
+  var config = (0, _config.useConfig)();
   var disabled = isDisabled(id);
+  bindUpdate(id, forceUpdate);
   var contentStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
   var rootClass = (0, _classnames.default)(contentStyle.contentWrapper, _defineProperty(_defineProperty({}, contentStyle.childnode, data[childrenKey] && data[childrenKey].length > 0), contentStyle.inlineContent, inlineNode));
   var contentClass = (0, _classnames.default)(contentStyle.content, _hooks.util.isString(contentClassProp) && contentClassProp, _hooks.util.isFunc(contentClassProp) && contentClassProp(data));
@@ -65,8 +70,15 @@ var NodeContent = function NodeContent(props) {
   var handleIndicatorClick = function handleIndicatorClick() {
     onToggle === null || onToggle === void 0 || onToggle(id);
     if (data[childrenKey] !== undefined) return;
-    setFetching(true);
-    if (loader) loader(id, data);
+    if (loader) {
+      setFetching(true);
+      var result = loader(id, data);
+      if (_hooks.util.isPromise(result)) {
+        result.then(function () {
+          return setFetching(false);
+        });
+      }
+    }
   };
   var handleNodeClick = function handleNodeClick() {
     if (disabled) return;
@@ -85,6 +97,7 @@ var NodeContent = function NodeContent(props) {
       className: contentStyle.iconWrapper,
       "data-expanded": expanded,
       "data-icon": hasExpandIcons,
+      dir: config.direction,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spin.default, {
         size: 12,
         jssStyle: jssStyle
@@ -100,9 +113,11 @@ var NodeContent = function NodeContent(props) {
         className: contentStyle.iconWrapper,
         "data-expanded": expanded,
         "data-icon": hasExpandIcons,
+        dir: config.direction,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: (0, _classnames.default)(contentStyle.icon, iconClass),
           onClick: handleIndicatorClick,
+          dir: config.direction,
           children: _hooks.util.isFunc(icon) ? icon(data) : icon
         })
       });
@@ -111,9 +126,11 @@ var NodeContent = function NodeContent(props) {
         className: contentStyle.iconWrapper,
         "data-expanded": expanded,
         "data-icon": hasExpandIcons,
+        dir: config.direction,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: (0, _classnames.default)(contentStyle.icon, iconClass),
           onClick: handleIndicatorClick,
+          dir: config.direction,
           children: _hooks.util.isFunc(icon) ? icon(data) : hasExpandIcons ? icon : _icons.default.tree.Expand
         })
       });
@@ -121,7 +138,7 @@ var NodeContent = function NodeContent(props) {
     if (children && children.length > 0) return indicator;
     if (Array.isArray(children) || children === null) return null;
     if (fetching && !children) return renderLoading();
-    if (loader && !fetching) return indicator;
+    if (loader && children === undefined) return indicator;
     return null;
   };
   var renderCheckbox = function renderCheckbox() {
@@ -148,11 +165,14 @@ var NodeContent = function NodeContent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: rootClass,
     onDragOver: onDragOver,
+    dir: config.direction,
     children: [renderIndicator(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread(_objectSpread({
+      dir: config.direction,
       ref: bindContent,
       className: contentClass
     }, contentDataProps()), contentEvent), {}, {
       children: [onChange && renderCheckbox(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+        dir: config.direction,
         className: textClass,
         onDoubleClick: handleNodeExpand
       }, textEvent), {}, {

package/cjs/tree/tree-content.type.d.ts

@@ -25,7 +25,7 @@ export interface TreeContextProps<DataItem, Value extends KeygenResult[]> extend
     fetching: boolean;
     inlineNode?: boolean;
     highlight?: boolean;
-    loader?: (key: KeygenResult, data: DataItem) => void;
+    loader?: (key: KeygenResult, data: DataItem) => void | Promise<any>;
     setFetching: (value: boolean) => void;
     onToggle?: (id: KeygenResult, expanded?: boolean) => void;
     onFetch: () => void;

package/cjs/tree/tree-content.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-content.type.d.ts","sourceRoot":"","sources":["tree-content.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,gBAAgB,CAAC,QAAQ,EAAE,KAAK,SAAS,YAAY,EAAE,CACtE,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,QAAQ,CAAC;IACrF,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,EAAE,EAAE,YAAY,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IACvE,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,UAAU,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,GAAG,MAAM,CAAC;IACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAC3F,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC"}
+{"version":3,"file":"tree-content.type.d.ts","sourceRoot":"","sources":["tree-content.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,gBAAgB,CAAC,QAAQ,EAAE,KAAK,SAAS,YAAY,EAAE,CACtE,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,QAAQ,CAAC;IACrF,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,EAAE,EAAE,YAAY,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IACvE,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,UAAU,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,GAAG,MAAM,CAAC;IACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAC3F,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IACpE,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC"}

package/cjs/tree/tree-context.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TreeContextProps, TreeProviderProps } from './tree-context.type';
-export declare const TreeContext: React.Context<TreeContextProps<any>>;
+import { TreeProviderProps } from './tree-context.type';
+export declare const TreeContext: React.Context<import("../../../hooks/src/components/use-tree/use-tree.type").TreeDatum<any>>;
 export declare const Provider: <DataItem>(props: TreeProviderProps<DataItem>) => JSX.Element;
-export declare const useTreeContext: () => TreeContextProps<any>;
+export declare const useTreeContext: () => import("../../../hooks/src/components/use-tree/use-tree.type").TreeDatum<any>;
 //# sourceMappingURL=tree-context.d.ts.map

package/cjs/tree/tree-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-context.d.ts","sourceRoot":"","sources":["tree-context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE1E,eAAO,MAAM,WAAW,sCAA0E,CAAC;AAEnG,eAAO,MAAM,QAAQ,+DAGpB,CAAC;AAEF,eAAO,MAAM,cAAc,6BAAsC,CAAC"}
+{"version":3,"file":"tree-context.d.ts","sourceRoot":"","sources":["tree-context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAoB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE1E,eAAO,MAAM,WAAW,8FAA0E,CAAC;AAEnG,eAAO,MAAM,QAAQ,+DAGpB,CAAC;AAEF,eAAO,MAAM,cAAc,qFAAsC,CAAC"}

package/cjs/tree/tree-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.d.ts","sourceRoot":"","sources":["tree-node.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAiC,YAAY,EAAE,MAAM,eAAe,CAAC;AAiB5E,QAAA,MAAM,IAAI,gGA+RT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tree-node.d.ts","sourceRoot":"","sources":["tree-node.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAiC,YAAY,EAAE,MAAM,eAAe,CAAC;AAkB5E,QAAA,MAAM,IAAI,gGAgST,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/cjs/tree/tree-node.js

@@ -9,6 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _treeContent = _interopRequireDefault(require("./tree-content"));
 var _treeContext = require("./tree-context");
 var _hooks = require("@sheinx/hooks");
+var _config = require("../config");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -69,6 +70,7 @@ var Node = function Node(props) {
     onDragEnd = props.onDragEnd,
     List = props.listComponent;
   initPlaceElement();
+  var config = (0, _config.useConfig)();
   var element = (0, _react.useRef)(null);
   var content = (0, _react.useRef)(null);
   var dragImage = (0, _react.useRef)(null);
@@ -244,6 +246,7 @@ var Node = function Node(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getDropProps()), {}, {
     ref: element,
     className: rootClass,
+    dir: config.direction,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_treeContent.default, {
       jssStyle: jssStyle,
       isControlled: isControlled,

package/cjs/tree/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAyC,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,QAAA,MAAM,IAAI,4FA0OT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAA4B,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,QAAA,MAAM,IAAI,4FA8NT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/cjs/tree/tree.js

@@ -11,7 +11,7 @@ var _hooks = require("@sheinx/hooks");
 var _treeRoot = _interopRequireDefault(require("./tree-root"));
 var _treeContext = require("./tree-context");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["jssStyle", "line", "childrenKey", "data", "value", "mode", "keygen", "expanded", "expandIcons", "iconClass", "leafClass", "nodeClass", "contentClass", "renderItem", "defaultValue", "dataUpdate", "childrenClass", "defaultExpandAll", "defaultExpanded", "parentClickExpand", "doubleClickExpand", "dragImageSelector", "dragImageStyle", "dragSibling", "unmatch", "dragHoverExpand", "active", "disabled", "inlineNode", "highlight", "className", "onClick", "loader", "getDatum", "onDrop", "onExpand", "onChange", "onDragEnd", "onDragLeave", "onDragOver", "onDragStart"];
+var _excluded = ["jssStyle", "line", "childrenKey", "data", "value", "mode", "keygen", "expanded", "expandIcons", "iconClass", "leafClass", "nodeClass", "contentClass", "renderItem", "defaultValue", "dataUpdate", "childrenClass", "defaultExpandAll", "defaultExpanded", "parentClickExpand", "doubleClickExpand", "dragImageSelector", "dragImageStyle", "dragSibling", "unmatch", "dragHoverExpand", "active", "disabled", "inlineNode", "highlight", "className", "onClick", "loader", "getDatum", "onDrop", "onExpand", "onChange", "onDragEnd", "onDragLeave", "onDragOver", "onDragStart", "datum"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -73,8 +73,8 @@ var Tree = function Tree(props) {
     onDragLeave = props.onDragLeave,
     onDragOver = props.onDragOver,
     onDragStart = props.onDragStart,
+    propsDatum = props.datum,
     rest = _objectWithoutProperties(props, _excluded);
-  var prevData = (0, _hooks.usePrevious)(data);
   var _useTree = (0, _hooks.useTree)({
       mode: mode,
       value: value,
@@ -90,7 +90,8 @@ var Tree = function Tree(props) {
       defaultExpanded: defaultExpanded,
       childrenKey: childrenKey,
       keygen: keygen,
-      onExpand: onExpandProp
+      onExpand: onExpandProp,
+      datum: propsDatum
     }),
     datum = _useTree.datum,
     expanded = _useTree.expanded,
@@ -191,16 +192,6 @@ var Tree = function Tree(props) {
   (0, _react.useEffect)(function () {
     handleUpdateExpanded(expanded);
   }, [expanded]);
-  (0, _react.useEffect)(function () {
-    if (!prevData) return;
-    if (prevData !== data && dataUpdate) {
-      datum.setData(data);
-    }
-  }, [data]);
-  (0, _react.useEffect)(function () {
-    if (!value) return;
-    datum.setValue(value);
-  }, [value]);
   (0, _react.useEffect)(function () {
     if (getDatum) getDatum(datum);
   }, []);

package/cjs/tree-select/tree-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["tree-select.tsx"],"names":[],"mappings":";AACA,OAAO,EAQL,YAAY,EAEb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAcjE,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,YAAY,EAAE,CAAC;AAIhE,QAAA,MAAM,UAAU,wGA8mBf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["tree-select.tsx"],"names":[],"mappings":";AACA,OAAO,EAQL,YAAY,EAEb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAajE,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,YAAY,EAAE,CAAC;AAIhE,QAAA,MAAM,UAAU,wGAipBf,CAAC;AAEF,eAAe,UAAU,CAAC"}