@kdcloudjs/table 1.2.2-canary.11 → 1.2.2-canary.13

package/es/table/pipeline/features/columnDrag.js

@@ -24,9 +24,16 @@ function sortColumns(columns, sort) {
 function stopClickPropagation(e) {
   e.stopPropagation();
 }
+function adjustTranslation(isRTL) {
+  return function (value) {
+    return isRTL ? -value : value;
+  };
+}
 export function columnDrag() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function (pipeline) {
+    var direction = pipeline.ctx.direction;
+    var _adjustTranslation = adjustTranslation(direction === 'rtl');
     var _pipeline$getStateAtK = pipeline.getStateAtKey(stateKey, {}),
       cloumnsTranslateData = _pipeline$getStateAtK.cloumnsTranslateData;
     var columns = pipeline.getColumns();
@@ -78,7 +85,7 @@ export function columnDrag() {
             });
             var currentTarget = e.currentTarget;
             var rect = e.currentTarget.parentElement.getClientRects()[0];
-            var startX = rect.left;
+            var startX = direction === 'rtl' ? rect.right : rect.left;
             var mouseDownClientX = e.clientX;
             var mouseDownClientY = e.clientY;
             var moveData = [];
@@ -102,9 +109,10 @@ export function columnDrag() {
                 clientY: e.clientY
               };
               var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
-              var leftPosition = startX - scrollDistance; // 表头最左边起点
+              var startPosition = startX - scrollDistance; // 表头最左边起点
+              var offsetDistance = direction === 'rtl' ? startPosition - e.clientX : e.clientX - startPosition;
               updateScrollPosition(client);
-              if (e.clientX - leftPosition < 20) {
+              if (offsetDistance < 20) {
                 return;
               } else {
                 e.stopPropagation();
@@ -141,7 +149,7 @@ export function columnDrag() {
               // 计算平移位置
               var replaceIndex = 0;
               var totalWitdth = getColumnWidth(columns[replaceIndex]);
-              while (totalWitdth < e.clientX - leftPosition && replaceIndex < columns.length - 1) {
+              while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
                 replaceIndex++;
                 totalWitdth += getColumnWidth(columns[replaceIndex]);
               }
@@ -166,12 +174,12 @@ export function columnDrag() {
                     code: code,
                     lock: lock
                   })) {
-                    cloumnsTranslateData[code] += optionColumn.width;
+                    cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
                     if (isLeafNode(columns[index])) {
-                      cloumnsTranslateData[optionColumn.code] -= width;
+                      cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
                     } else {
-                      cloumnsTranslateData[optionColumn.code] -= getColumnWidth(columns[index]);
-                      moveAllChildren(children, cloumnsTranslateData, optionColumn.width);
+                      cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
+                      moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
                     }
                     columnMoved = true;
                   }
@@ -189,12 +197,12 @@ export function columnDrag() {
                     code: _code,
                     lock: _lock
                   })) {
-                    cloumnsTranslateData[_code] -= optionColumn.width;
+                    cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
                     if (isLeafNode(columns[index])) {
-                      cloumnsTranslateData[optionColumn.code] += _width;
+                      cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
                     } else {
-                      cloumnsTranslateData[optionColumn.code] += getColumnWidth(columns[index]);
-                      moveAllChildren(_children, cloumnsTranslateData, optionColumn.width, true);
+                      cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
+                      moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
                     }
                     columnMoved = true;
                   }
@@ -216,6 +224,7 @@ export function columnDrag() {
                 e.stopPropagation(); // 存在移动就阻止冒泡
                 currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件，防止拖动后触发列头过滤事件
               }
+
               window.requestAnimationFrame(function () {
                 // 取消阻止列头点击事件
                 currentTarget.removeEventListener('click', stopClickPropagation);

package/es/table/pipeline/features/columnFilter.js

@@ -45,6 +45,7 @@ export function filter() {
         var filterable = col.code && ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable);
         var filterActive = !!(filterable && (inputFiltersMap === null || inputFiltersMap === void 0 ? void 0 : inputFiltersMap.get(col.code)));
         if (filterable) {
+          var _cx;
           var handleFilterChanged = function handleFilterChanged(filterItem) {
             var nextFiltersMap = new _Map(inputFiltersMap);
             var currentFilter = _extends({
@@ -79,12 +80,13 @@ export function filter() {
             setFilterModel: handleFilterChanged,
             setFilter: setFilter,
             isFilterActive: filterActive,
-            className: cx(_defineProperty(_defineProperty({}, Classes.tableFilterTrigger, true), "active", filterActive)),
+            className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
             stopClickEventPropagation: stopClickEventPropagation,
             stopESCKeyDownEventPropagation: stopESCKeyDownEventPropagation,
             hideFilterPopupHeader: hideFilterPopupHeader,
             getPopupParent: getPopupParent,
-            localeText: localeText
+            localeText: localeText,
+            direction: pipeline.ctx.direction
           });
           if (col.renderHeader) {
             result.title = col.renderHeader(result.title, _Filter);
@@ -98,6 +100,7 @@ export function filter() {
           //   }
           // })
         }
+
         if (!isLeafNode(col)) {
           var _context3;
           result.children = _mapInstanceProperty(_context3 = col.children).call(_context3, dfs);

package/es/table/pipeline/features/columnResizeWidth.js

@@ -11,7 +11,12 @@ import * as op from 'rxjs/operators';
 import { mergeCellProps, collectNodes, makeRecursiveMapper, isGroupColumn } from '../../utils';
 import { internals } from '../../internals';
 import { Classes } from '../../base/styles';
-var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    left: calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n  }\n"])));
+import { swapRTLDirection } from '../../base/utils';
+var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  ", ": -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    ", ": calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n  }\n"])), function (props) {
+  return swapRTLDirection(props.direction, 'right');
+}, function (props) {
+  return swapRTLDirection(props.direction, 'left');
+});
 var TableHeaderGroupCellResize = styled(function (props) {
   return /*#__PURE__*/React.createElement(TableHeaderCellResize, _extends({}, props));
 })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
@@ -78,7 +83,7 @@ export function columnResize() {
       var nextSize$ = fromEvent(window, 'mousemove').pipe(op.takeUntil(fromEvent(window, 'mouseup')), op.map(function (e) {
         var movingX = e.clientX;
         var nextColumnSize = _extends({}, columnSize);
-        var deltaSum = movingX - startX;
+        var deltaSum = pipeline.ctx.direction === 'rtl' ? startX - movingX : movingX - startX;
         var deltaRemaining = deltaSum;
         if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
           var leafChildColumns = collectNodes(children, 'leaf-only');
@@ -143,7 +148,8 @@ export function columnResize() {
         width = col.width;
       return _extends(_extends({}, col), {
         width: (_a = columnSize[code]) !== null && _a !== void 0 ? _a : width,
-        title: (/*#__PURE__*/React.createElement(React.Fragment, null, prevTitle, (features === null || features === void 0 ? void 0 : features.resizeable) !== false && (isGroup ? /*#__PURE__*/React.createElement(TableHeaderGroupCellResize, {
+        title: /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle, (features === null || features === void 0 ? void 0 : features.resizeable) !== false && (isGroup ? /*#__PURE__*/React.createElement(TableHeaderGroupCellResize, {
+          direction: pipeline.ctx.direction,
           className: Classes.tableHeaderCellResize,
           onDoubleClick: function onDoubleClick(e) {
             return handleDoubleClick(e, col);
@@ -152,6 +158,7 @@ export function columnResize() {
             return handleMouseDown(e, col);
           }
         }) : /*#__PURE__*/React.createElement(TableHeaderCellResize, {
+          direction: pipeline.ctx.direction,
           className: Classes.tableHeaderCellResize,
           onDoubleClick: function onDoubleClick(e) {
             return handleDoubleClick(e, col);
@@ -159,7 +166,7 @@ export function columnResize() {
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
           }
-        })))),
+        }))),
         headerCellProps: mergeCellProps(col.headerCellProps, {
           className: 'resizeable'
         })

package/es/table/pipeline/features/contextMenu.js

@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { ContextMenuStyleWrap } from '../../common-views';
@@ -23,24 +23,24 @@ export function contextMenu() {
       popupParent.appendChild(ePopupDiv);
       var popupHidden = false;
       var eventList = ['mousedown', 'contextmenu'];
-      var _hidePopup2 = function hidePopup(event) {
+      var hidePopup = function hidePopup(event) {
         if (isEventFromCurrentPopup(event, ePopupDiv) || popupHidden) {
           return;
         }
         popupHidden = true;
         popupParent.removeChild(ePopupDiv);
         eventList.forEach(function (eventType) {
-          window.removeEventListener(eventType, _hidePopup2, true);
+          window.removeEventListener(eventType, hidePopup, true);
         });
       };
       ReactDOM.render(menu, ePopupDiv, function () {
         setTimeout(function () {
           eventList.forEach(function (eventType) {
-            window.addEventListener(eventType, _hidePopup2, true);
+            window.addEventListener(eventType, hidePopup, true);
           });
         }, 0);
       });
-      return _hidePopup2;
+      return hidePopup;
     };
     var onContextMenu = function onContextMenu(e) {
       if (canShowContextMenu(e, pipeline)) {
@@ -106,7 +106,8 @@ export function contextMenu() {
         hideContextMenu: hideContextMenu,
         position: position,
         getPopupParent: getPopupParent,
-        className: menuClassName
+        className: menuClassName,
+        direction: pipeline.ctx.direction
       });
       var _hidePopup = addPopup(menu);
       menuHelper.init(_hidePopup);
@@ -136,18 +137,22 @@ function Menu(props) {
     position = props.position,
     getPopupParent = props.getPopupParent;
   var menuRef = useRef();
-  useEffect(function () {
+  useLayoutEffect(function () {
     if (menuRef.current) {
       var popupParent = getPopupParent();
       var x = position.x,
         y = position.y;
+      var isRTL = props.direction === 'rtl';
+      if (isRTL) {
+        x -= menuRef.current.offsetWidth;
+      }
       var _keepWithinBounds = keepWithinBounds(popupParent, menuRef.current, x, y),
         _x = _keepWithinBounds.x,
         _y = _keepWithinBounds.y;
       menuRef.current.style.left = _x + 'px';
       menuRef.current.style.top = _y + 'px';
     }
-  }, [position]);
+  }, [position, props.direction]);
   return /*#__PURE__*/React.createElement(ContextMenuStyleWrap, {
     className: cx(MenuClasses.menu, className),
     ref: menuRef,
@@ -284,10 +289,12 @@ function keepWithinBounds(popupParent, ePopup, x, y) {
     var maxX = parentWidth - minWidth;
     x = Math.min(Math.max(x, 0), Math.abs(maxX)); // 目前位置，最大支持的位置
   }
+
   if (y) {
     var maxY = parentHeight - ePopupRect.height;
     y = Math.min(Math.max(y, 0), Math.abs(maxY)); // 目前位置，最大支持的位置
   }
+
   return {
     x: x,
     y: y

package/es/table/pipeline/features/featureApi/RowDragApi.js

@@ -10,7 +10,7 @@ var RowDragApi = /*#__PURE__*/function () {
     this.rowDropZones = [];
     this.dragStatus = 'finished';
   }
-  return _createClass(RowDragApi, [{
+  _createClass(RowDragApi, [{
     key: "getRowDropZoneParams",
     value: function getRowDropZoneParams() {
       return this.rowDropZoneParams;
@@ -62,5 +62,6 @@ var RowDragApi = /*#__PURE__*/function () {
       return this.dragStatus;
     }
   }]);
+  return RowDragApi;
 }();
 export { RowDragApi as default };

package/es/table/pipeline/features/filter/DefaultFilterContent.js

@@ -12,6 +12,7 @@ import { Classes, ButtonCSS } from '../../../base/styles';
 import KeyCode from '../../../utils/keyCode';
 var DefaultFilterContentStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  border-radius: 2px;\n  width: 100%;\n\n  ", "\n  .filter-option-list {\n    display: flex;\n    flex-direction: column;\n    margin-top: 8px;\n    ul {\n      margin: 0;\n      padding: 0;\n      li {\n        display: flex;\n        position: relative;\n        flex-shrink: 0;\n        height: 32px;\n        align-items: center;\n        border-radius: 2px;\n        font-size: 12px;\n        color: var(--color);\n        padding: 0 12px;\n        overflow: hidden;\n        cursor: pointer;\n        &:hover{\n          background-color: var(--primary-color-level1);\n        }\n      }\n      li.active{\n        background-color: var(--primary-color-level1);\n      }\n    }\n  }\n\n  .filter-search {\n    display: flex;\n    padding: 6px 12px;\n\n    .filter-search-inner {\n      width: 100%;\n      font-size: 12px;\n      color: #333333;\n      height: 28px;\n      line-height: 28px;\n      padding: 0 8px;\n      outline: none;\n      background-color: #FAFAFA;\n      border-radius: 2px;\n      border: 1px solid var(--strong-border-color);\n      &:hover{\n        border-color: var(--primary-color)\n      } \n      &:focus{\n        border-color: var(--primary-color)\n      }  \n    }\n  }\n\n  .filter-footer {\n    display: flex;\n    flex-direction: row;\n    padding: 8px 12px;\n    justify-content: space-between;\n\n    .filter-btn {\n      text-align: center;\n      font-size: 12px;\n      width: 60px;\n      height: 24px;\n      line-height: 24px;\n    }\n    \n  }\n"])), ButtonCSS);
 function DefaultFilterContent(_ref) {
+  var _cx2;
   var setFilterModel = _ref.setFilterModel,
     filterModel = _ref.filterModel,
     hidePanel = _ref.hidePanel,
@@ -74,7 +75,7 @@ function DefaultFilterContent(_ref) {
         }
       }, (_a = localeText[option.key]) !== null && _a !== void 0 ? _a : option.title)
     );
-  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && (/*#__PURE__*/React.createElement("div", {
+  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && /*#__PURE__*/React.createElement("div", {
     className: 'filter-search'
   }, /*#__PURE__*/React.createElement("input", {
     className: 'filter-search-inner',
@@ -84,7 +85,7 @@ function DefaultFilterContent(_ref) {
     },
     onKeyDown: handleKeyDown,
     ref: inputRef
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: 'filter-footer'
   }, /*#__PURE__*/React.createElement("button", {
     className: cx(_defineProperty({
@@ -92,9 +93,9 @@ function DefaultFilterContent(_ref) {
     }, Classes.button, true)),
     onClick: reset
   }, (_a = localeText.resetFilter) !== null && _a !== void 0 ? _a : '重置'), /*#__PURE__*/React.createElement("button", {
-    className: cx(_defineProperty(_defineProperty({
+    className: cx((_cx2 = {
       'filter-btn': true
-    }, Classes.button, true), Classes.buttonPrimary, true)),
+    }, _defineProperty(_cx2, Classes.button, true), _defineProperty(_cx2, Classes.buttonPrimary, true), _cx2)),
     onClick: confirm
   }, (_b = localeText.confirmFilter) !== null && _b !== void 0 ? _b : '确定')));
 }

package/es/table/pipeline/features/filter/Filter.d.ts

@@ -18,6 +18,7 @@ interface FilterProps {
     localeText?: {
         [key: string]: string;
     };
+    direction?: string;
 }
-declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation, stopESCKeyDownEventPropagation, hideFilterPopupHeader, getPopupParent, localeText }: FilterProps): JSX.Element;
+declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation, stopESCKeyDownEventPropagation, hideFilterPopupHeader, getPopupParent, localeText, direction }: FilterProps): JSX.Element;
 export default Filter;

package/es/table/pipeline/features/filter/Filter.js

@@ -22,9 +22,10 @@ function Panel(_ref) {
     hidePanel = _ref.hidePanel,
     renderPanelContent = _ref.renderPanelContent,
     hideFilterPopupHeader = _ref.hideFilterPopupHeader,
-    popupParent = _ref.popupParent;
+    popupParent = _ref.popupParent,
+    direction = _ref.direction;
   var filterPanelRef = React.useRef(null);
-  var _React$useState = React.useState(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader))),
+  var _React$useState = React.useState(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader), direction)),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     position = _React$useState2[0],
     setPosition = _React$useState2[1];
@@ -33,7 +34,7 @@ function Panel(_ref) {
     zIndex: 1050
   };
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
-    setPosition(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
+    setPosition(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader), direction));
   };
   useEffect(function () {
     var resizeObserver = addResizeObserver(filterPanelRef.current.children[0], handleFilterPanelResize);
@@ -48,10 +49,12 @@ function Panel(_ref) {
     onClose: hidePanel,
     position: position,
     filterIcon: filterIcon,
-    hideFilterPopupHeader: hideFilterPopupHeader
+    hideFilterPopupHeader: hideFilterPopupHeader,
+    direction: direction
   }, renderPanelContent()));
 }
 function Filter(_ref2) {
+  var _cx;
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     style = _ref2.style,
@@ -66,7 +69,8 @@ function Filter(_ref2) {
     stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
     hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
     getPopupParent = _ref2.getPopupParent,
-    localeText = _ref2.localeText;
+    localeText = _ref2.localeText,
+    direction = _ref2.direction;
   var _React$useState3 = React.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     showPanel = _React$useState4[0],
@@ -114,7 +118,7 @@ function Filter(_ref2) {
       }
     }
   };
-  var iconClassName = cx(_defineProperty(_defineProperty({}, className, true), 'filter-panel-open', showPanel));
+  var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
   var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   var popupParent = (getPopupParent === null || getPopupParent === void 0 ? void 0 : getPopupParent(iconWrapRef.current)) || document.body;
   return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
@@ -130,13 +134,14 @@ function Filter(_ref2) {
   }, displayFilterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
     width: size,
     height: size
-  })), showPanel && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Panel, {
+  })), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
     ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
     filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
     renderPanelContent: renderPanelContent,
     hideFilterPopupHeader: hideFilterPopupHeader,
-    popupParent: popupParent
+    popupParent: popupParent,
+    direction: direction
   }), popupParent));
 }
 function _getPanelOffset(ele, hideFilterPopupHeader) {

package/es/table/pipeline/features/filter/FilterPanel.d.ts

@@ -9,13 +9,15 @@ export interface FilterPanel {
     style?: CSSProperties;
     filterIcon: ReactNode;
     children?: ReactNode;
+    direction?: string;
 }
-declare function FilterPanel({ style, children, position, filterIcon, onClose, hideFilterPopupHeader }: {
+declare function FilterPanel({ style, children, position, filterIcon, onClose, hideFilterPopupHeader, direction }: {
     style: any;
     children: any;
     position: any;
     filterIcon: any;
     onClose: any;
     hideFilterPopupHeader: any;
+    direction: any;
 }): JSX.Element;
 export default FilterPanel;

package/es/table/pipeline/features/filter/FilterPanel.js

@@ -27,7 +27,8 @@ function FilterPanel(_ref) {
     position = _ref.position,
     filterIcon = _ref.filterIcon,
     onClose = _ref.onClose,
-    hideFilterPopupHeader = _ref.hideFilterPopupHeader;
+    hideFilterPopupHeader = _ref.hideFilterPopupHeader,
+    direction = _ref.direction;
   var _useState = useState(position),
     _useState2 = _slicedToArray(_useState, 2),
     perfectPosition = _useState2[0],
@@ -41,9 +42,16 @@ function FilterPanel(_ref) {
     return isElementInEventPath(ref.current, e);
   };
   useEffect(function () {
-    setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
+    var _a;
+    var isRTL = direction === 'rtl';
+    var x = position.x,
+      y = position.y;
+    if (isRTL) {
+      x -= (_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    }
+    setPerfectPosition(keepWithinBounds(document.body, ref.current, x, y, true));
     setVisible(true);
-  }, [position]);
+  }, [position, direction]);
   var hasPopupMouseEvent = useRef(false);
   var handleMouseEvent = function handleMouseEvent() {
     // 当弹出的过滤面板内部发生鼠标按下、抬起事件时，标记当前事件，并在click捕获期清除标记，用来确定鼠标按下、抬起发生在过滤面板内部
@@ -65,13 +73,15 @@ function FilterPanel(_ref) {
     style: _extends(_extends({}, style), {
       left: visible ? perfectPosition.x : 0,
       top: visible ? perfectPosition.y : 0,
-      opacity: visible ? 1 : 0
+      opacity: visible ? 1 : 0,
+      direction: direction
     }),
     onMouseDown: handleMouseEvent,
     onMouseUp: handleMouseEvent,
     onKeyDown: handleKeyDown,
     ref: ref,
-    tabIndex: -1
+    tabIndex: -1,
+    direction: direction
   }, !hideFilterPopupHeader ? /*#__PURE__*/React.createElement("div", {
     className: Classes.popupHeader
   }, /*#__PURE__*/React.createElement("span", {

package/es/table/pipeline/features/rangeSelection.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -209,8 +210,9 @@ export function rangeSelection(opts) {
   };
 }
 function getTargetCell(target, columns) {
-  var _loop = function _loop() {
-      if (target.getAttribute('data-role') === 'table-cell') {
+  while (target) {
+    if (target.getAttribute('data-role') === 'table-cell') {
+      var _ret = function () {
         var columnCode = target.getAttribute('data-code');
         var column = findByTree(columns, function (item, index) {
           return item.code === columnCode;
@@ -227,13 +229,10 @@ function getTargetCell(target, columns) {
             isFooterCell: isEleInFooter(target)
           }
         };
-      }
-      target = target.parentElement;
-    },
-    _ret;
-  while (target) {
-    _ret = _loop();
-    if (_ret) return _ret.v;
+      }();
+      if (_typeof(_ret) === "object") return _ret.v;
+    }
+    target = target.parentElement;
   }
   return null;
 }
@@ -422,6 +421,7 @@ export function getCellRangeId(cellRange) {
  * @returns
  */
 function getCellRangesClassName(cellRanges, _ref2) {
+  var _cx;
   var isFooterCell = _ref2.isFooterCell,
     rowIndex = _ref2.rowIndex,
     col = _ref2.col,
@@ -437,7 +437,7 @@ function getCellRangesClassName(cellRanges, _ref2) {
     matchCellRangeBottom = _getMatchBorderStyle.matchCellRangeBottom,
     matchCellRangeRight = _getMatchBorderStyle.matchCellRangeRight;
   var isSingleCell = isCellRangeSingleCell(cellRanges);
-  var className = cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Classes.tableCellRangeSingleCell, isSingleCell), Classes.tableCellRangeSelected, !isSingleCell), Classes.tableCellRangeTop, !isSingleCell && matchCellRangeTop), Classes.tableCellRangeLeft, !isSingleCell && matchCellRangeLeft), Classes.tableCellRangeBottom, !isSingleCell && matchCellRangeBottom), Classes.tableCellRangeRight, !isSingleCell && matchCellRangeRight));
+  var className = cx((_cx = {}, _defineProperty(_cx, Classes.tableCellRangeSingleCell, isSingleCell), _defineProperty(_cx, Classes.tableCellRangeSelected, !isSingleCell), _defineProperty(_cx, Classes.tableCellRangeTop, !isSingleCell && matchCellRangeTop), _defineProperty(_cx, Classes.tableCellRangeLeft, !isSingleCell && matchCellRangeLeft), _defineProperty(_cx, Classes.tableCellRangeBottom, !isSingleCell && matchCellRangeBottom), _defineProperty(_cx, Classes.tableCellRangeRight, !isSingleCell && matchCellRangeRight), _cx));
   return className;
 }
 function getMatchBorderStyle(cellRanges, _ref3) {

package/es/table/pipeline/features/rowDetail.js

@@ -212,12 +212,12 @@ export function rowDetail() {
         }
       });
       tableColumns[expandColumnIndex] = _extends(_extends({}, expandCol), {
-        title: (/*#__PURE__*/React.createElement("div", {
+        title: /*#__PURE__*/React.createElement("div", {
           style: {
             display: 'inline-block',
             marginLeft: textOffset
           }
-        }, internals.safeRenderHeader(expandCol))),
+        }, internals.safeRenderHeader(expandCol)),
         render: render,
         getCellProps: clickArea === 'cell' ? getCellProps : expandCol.getCellProps,
         getSpanRect: function getSpanRect(value, row, rowIndex) {