@douyinfe/semi-ui 2.30.2 → 2.31.0

package/lib/es/descriptions/index.d.ts

@@ -16,7 +16,7 @@ export interface DescriptionsProps {
     size?: DescriptionsSize;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     data?: Data[];
 }
 declare class Descriptions extends PureComponent<DescriptionsProps> {

package/lib/es/form/baseForm.d.ts

@@ -83,7 +83,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
         position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
-        onSearch?: (value: string) => void;
+        onSearch?: (value: string, event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;
         dropdownMargin?: number | {

package/lib/es/form/field.d.ts

@@ -31,7 +31,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
     position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
-    onSearch?: (value: string) => void;
+    onSearch?: (value: string, event: import("react").KeyboardEvent<Element> | import("react").MouseEvent<Element, MouseEvent>) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;
     dropdownMargin?: number | {

package/lib/es/image/previewInner.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
-import { PreviewProps as PreviewInnerProps, PreviewInnerStates, RatioType } from "./interface";
+import { PreviewProps as PreviewInnerProps, PreviewInnerStates } from "./interface";
 import PropTypes from "prop-types";
 import PreviewInnerFoundation, { PreviewInnerAdapter } from '@douyinfe/semi-foundation/lib/es/image/previewInnerFoundation';
 import { PreviewContextProps } from "./previewContext";
@@ -87,6 +87,5 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     onImageError: () => void;
     onImageLoad: (src: any) => void;
     handleMouseDown: (e: any) => void;
-    handleRatio: (type: RatioType) => void;
     render(): JSX.Element;
 }

package/lib/es/image/previewInner.js

@@ -83,10 +83,6 @@ export default class PreviewInner extends BaseComponent {
       this.foundation.handleMouseDown(e);
     };
 
-    this.handleRatio = type => {
-      this.foundation.handleRatio(type);
-    };
-
     this.state = {
       imgSrc: [],
       imgLoadStatus: new Map(),
@@ -237,7 +233,10 @@ export default class PreviewInner extends BaseComponent {
     }
 
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
-      willUpdateStates.currentIndex = props.currentIndex;
+      willUpdateStates.currentIndex = props.currentIndex; // ratio will set to adaptation when change picture, 
+      // attention: If the ratio is controlled, the ratio should not change as the index changes
+
+      willUpdateStates.ratio = 'adaptation';
     }
 
     return willUpdateStates;
@@ -359,7 +358,7 @@ export default class PreviewInner extends BaseComponent {
       src: imgSrc[currentIndex],
       onZoom: this.handleZoomImage,
       disableDownload: disableDownload,
-      setRatio: this.handleRatio,
+      setRatio: this.handleAdjustRatio,
       zoom: zoom,
       ratio: ratio,
       zoomStep: zoomStep,

package/lib/es/layout/index.d.ts

@@ -16,7 +16,7 @@ export interface BasicLayoutProps {
     prefixCls?: string;
     style?: CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     hasSider?: boolean;
     tagName?: keyof HTMLElementTagNameMap;
 }

package/lib/es/modal/confirm.d.ts

@@ -160,12 +160,12 @@ export declare function withError(props: ModalReactProps): {
     closeOnEsc?: boolean;
     preventScroll?: boolean;
     afterClose?: () => void;
+    keepDOM?: boolean;
     cancelText?: string;
     okText?: string;
     closeIcon?: React.ReactNode;
     bodyStyle?: React.CSSProperties;
     closable?: boolean;
-    keepDOM?: boolean;
     onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     maskClosable?: boolean;
     cancelButtonProps?: import("../button").BaseButtonProps;

package/lib/es/popconfirm/index.js

@@ -231,7 +231,16 @@ export default class Popconfirm extends BaseComponent {
     return /*#__PURE__*/React.createElement(Popover, Object.assign({
       ref: this.popoverRef
     }, attrs, {
-      content: this.renderConfirmPopCard,
+      // A arrow function needs to be passed here, otherwise the content will not be updated after the Popconfirm state is updated
+      // Popover is a PureComponent, same props will not trigger update
+      content: _ref2 => {
+        let {
+          initialFocusRef
+        } = _ref2;
+        return this.renderConfirmPopCard({
+          initialFocusRef
+        });
+      },
       visible: visible,
       position: position
     }, popProps), children);

package/lib/es/popover/index.d.ts

@@ -42,6 +42,7 @@ export interface PopoverProps extends BaseProps {
     clickToHide?: TooltipProps['clickToHide'];
     disableFocusListener?: boolean;
     afterClose?: () => void;
+    keepDOM?: boolean;
 }
 export interface PopoverState {
     popConfirmVisible: boolean;

package/lib/es/progress/index.d.ts

@@ -5,9 +5,9 @@ import { Animation } from '@douyinfe/semi-animation';
 import { Motion } from '../_base/base';
 import { StrokeArr } from '@douyinfe/semi-foundation/lib/es/progress/generates';
 export interface ProgressProps {
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-valuetext'?: string | undefined;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
     className?: string;
     direction?: 'horizontal' | 'vertical';
     format?: (percent: number) => React.ReactNode;

package/lib/es/radio/radio.d.ts

@@ -12,7 +12,7 @@ export declare type RadioType = typeof strings.TYPE_DEFAULT | typeof strings.TYP
 export declare type RadioProps = {
     autoFocus?: boolean;
     checked?: boolean;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     defaultChecked?: boolean;
     value?: string | number;
     disabled?: boolean;

package/lib/es/select/index.d.ts

@@ -86,7 +86,7 @@ export declare type SelectProps = {
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
     position?: Position;
-    onSearch?: (value: string) => void;
+    onSearch?: (value: string, event: React.KeyboardEvent | React.MouseEvent) => void;
     dropdownClassName?: string;
     dropdownStyle?: React.CSSProperties;
     dropdownMargin?: PopoverProps['margin'];
@@ -252,7 +252,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: SelectProps, prevState: SelectState): void;
-    handleInputChange: (value: string) => void;
+    handleInputChange: (value: string, event: React.KeyboardEvent) => void;
     renderInput(): JSX.Element;
     close(): void;
     open(): void;

package/lib/es/select/index.js

@@ -35,7 +35,6 @@ import Spin from '../spin';
 import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
 import { isSemiIcon, getFocusableElements, getActiveElement } from '../_utils';
-import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
 const prefixcls = cssClasses.PREFIX;
@@ -49,7 +48,7 @@ class Select extends BaseComponent {
       current: node
     };
 
-    this.handleInputChange = value => this.foundation.handleInputChange(value);
+    this.handleInputChange = (value, event) => this.foundation.handleInputChange(value, event);
 
     this.getTagItem = (item, i, renderSelectedItem) => {
       const {
@@ -136,8 +135,6 @@ class Select extends BaseComponent {
     this.onKeyPress = this.onKeyPress.bind(this);
     this.eventManager = new Event();
     this.foundation = new SelectFoundation(this.adapter);
-    warning('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
-    warning('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
   }
 
   get adapter() {
@@ -306,8 +303,8 @@ class Select extends BaseComponent {
       notifyDropdownVisibleChange: visible => {
         this.props.onDropdownVisibleChange(visible);
       },
-      notifySearch: input => {
-        this.props.onSearch(input);
+      notifySearch: (input, event) => {
+        this.props.onSearch(input, event);
       },
       notifyCreate: input => {
         this.props.onCreate(input);

package/lib/es/select/virtualRow.js

@@ -5,10 +5,11 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibleOptions
+    visibleOptions,
+    renderOption
   } = data;
   const option = visibleOptions[index];
-  return data.renderOption(option, index, style);
+  return renderOption(option, index, style);
 };
 
 export default VirtualRow;

package/lib/es/table/Body/index.js

@@ -38,7 +38,6 @@ import BaseRow from './BaseRow';
 import ExpandedRow from './ExpandedRow';
 import SectionRow from './SectionRow';
 import TableHeader from '../TableHeader';
-import ConfigContext from '../../configProvider/context';
 import TableContext from '../table-context';
 
 class Body extends BaseComponent {
@@ -804,12 +803,10 @@ class Body extends BaseComponent {
     const {
       virtualized
     } = this.props;
-    return /*#__PURE__*/React.createElement(ConfigContext.Consumer, null, _ref => {
-      let {
-        direction
-      } = _ref;
-      return virtualized ? this.renderVirtualizedBody(direction) : this.renderBody(direction);
-    });
+    const {
+      direction
+    } = this.context;
+    return virtualized ? this.renderVirtualizedBody(direction) : this.renderBody(direction);
   }
 
 }

package/lib/es/table/ColumnSelection.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
-import { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/es/table/tableSelectionCellFoundation';
+import TableSelectionCellFoundation, { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/es/table/tableSelectionCellFoundation';
 import { CheckboxEvent, CheckboxProps } from '../checkbox';
 export interface TableSelectionCellProps {
     columnTitle?: string;
     getCheckboxProps?: () => CheckboxProps;
     type?: string;
-    onChange?: (value: any, e: TableSelectionCellEvent) => void;
+    onChange?: (checked: boolean, e: TableSelectionCellEvent) => void;
     selected?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
@@ -37,7 +37,8 @@ export default class TableSelectionCell extends BaseComponent<TableSelectionCell
         prefixCls: "semi-table";
     };
     get adapter(): TableSelectionCellAdapter;
+    foundation: TableSelectionCellFoundation;
     constructor(props: TableSelectionCellProps);
-    handleChange: (e: CheckboxEvent) => any;
+    handleChange: (e: CheckboxEvent) => void;
     render(): JSX.Element;
 }

package/lib/es/table/Table.d.ts

@@ -32,6 +32,14 @@ export interface NormalTableState<RecordType extends Record<string, any> = Data>
     prePropRowSelection?: TableStateRowSelection<RecordType>;
     tableWidth?: number;
     prePagination?: Pagination;
+    /**
+    * Disabled row keys in sorted and filtered data
+    */
+    allDisabledRowKeys?: BaseRowKeyType[];
+    /**
+     * Disabled row keys set in sorted and filtered data
+     */
+    allDisabledRowKeysSet?: Set<BaseRowKeyType>;
 }
 export declare type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & {
     selectedRowKeysSet?: Set<(string | number)>;
@@ -227,7 +235,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
       */
     addFnsInColumn: (column?: ColumnProps) => ColumnProps<any>;
     toggleSelectRow: (selected: boolean, realKey: string | number, e: TableSelectionCellEvent) => void;
-    toggleSelectAllRow: (status: boolean, e: TableSelectionCellEvent) => void;
+    toggleSelectAllRow: (selected: boolean, e: TableSelectionCellEvent) => void;
     /**
      * render pagination
      * @param {object} pagination

package/lib/es/table/Table.js

@@ -269,8 +269,9 @@ class Table extends BaseComponent {
       const node = this.bodyWrapRef.current;
 
       if (node && node.children && node.children.length) {
-        const scrollToLeft = node.scrollLeft === 0;
-        const scrollToRight = node.scrollLeft + 1 >= node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
+        const scrollToLeft = node.scrollLeft === 0; // why use Math.abs? @see https://bugzilla.mozilla.org/show_bug.cgi?id=1447743
+
+        const scrollToRight = Math.abs(node.scrollLeft) + 1 >= node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
 
         if (scrollToLeft && scrollToRight) {
           this.setScrollPosition('both');
@@ -297,7 +298,7 @@ class Table extends BaseComponent {
       let inHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       const {
         rowSelection,
-        disabledRowKeysSet
+        allDisabledRowKeysSet
       } = _this.state;
 
       if (rowSelection && typeof rowSelection === 'object') {
@@ -314,7 +315,7 @@ class Table extends BaseComponent {
           const allRowKeys = _this.cachedFilteredSortedRowKeys;
           const allRowKeysSet = _this.cachedFilteredSortedRowKeysSet;
 
-          const allIsSelected = _this.foundation.allIsSelected(selectedRowKeysSet, disabledRowKeysSet, allRowKeys);
+          const allIsSelected = _this.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
 
           const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
 
@@ -324,8 +325,8 @@ class Table extends BaseComponent {
             key: columnKey,
             selected: allIsSelected,
             indeterminate: hasRowSelected && !allIsSelected,
-            onChange: (status, e) => {
-              _this.toggleSelectAllRow(status, e);
+            onChange: (selected, e) => {
+              _this.toggleSelectAllRow(selected, e);
             }
           });
         } else {
@@ -528,8 +529,8 @@ class Table extends BaseComponent {
       this.foundation.handleSelectRow(realKey, selected, e);
     };
 
-    this.toggleSelectAllRow = (status, e) => {
-      this.foundation.handleSelectAllRow(status, e);
+    this.toggleSelectAllRow = (selected, e) => {
+      this.foundation.handleSelectAllRow(selected, e);
     };
     /**
      * render pagination
@@ -847,6 +848,8 @@ class Table extends BaseComponent {
       allRowKeys: [],
       disabledRowKeys: [],
       disabledRowKeysSet: new Set(),
+      allDisabledRowKeys: [],
+      allDisabledRowKeysSet: new Set(),
       headWidths: [],
       bodyHasScrollBar: false,
       prePropRowSelection: undefined,
@@ -951,11 +954,20 @@ class Table extends BaseComponent {
         this.cachedFilteredSortedRowKeys = filteredSortedRowKeys;
         this.cachedFilteredSortedRowKeysSet = new Set(filteredSortedRowKeys);
       },
+      setAllDisabledRowKeys: allDisabledRowKeys => {
+        const allDisabledRowKeysSet = new Set(allDisabledRowKeys);
+        this.setState({
+          allDisabledRowKeys,
+          allDisabledRowKeysSet
+        });
+      },
       getCurrentPage: () => _get(this.state, 'pagination.currentPage', 1),
       getCurrentPageSize: () => _get(this.state, 'pagination.pageSize', numbers.DEFAULT_PAGE_SIZE),
       getCachedFilteredSortedDataSource: () => this.cachedFilteredSortedDataSource,
       getCachedFilteredSortedRowKeys: () => this.cachedFilteredSortedRowKeys,
       getCachedFilteredSortedRowKeysSet: () => this.cachedFilteredSortedRowKeysSet,
+      getAllDisabledRowKeys: () => this.state.allDisabledRowKeys,
+      getAllDisabledRowKeysSet: () => this.state.allDisabledRowKeysSet,
       notifyFilterDropdownVisibleChange: (visible, dataIndex) => this._invokeColumnFn(dataIndex, 'onFilterDropdownVisibleChange', visible),
       notifyChange: function () {
         return _this2.props.onChange(...arguments);
@@ -1159,8 +1171,11 @@ class Table extends BaseComponent {
           childrenRecordName,
           rowKey
         });
+        const disabledRowKeysSet = new Set(disabledRowKeys);
         willUpdateStates.disabledRowKeys = disabledRowKeys;
-        willUpdateStates.disabledRowKeysSet = new Set(disabledRowKeys);
+        willUpdateStates.disabledRowKeysSet = disabledRowKeysSet;
+        willUpdateStates.allDisabledRowKeys = disabledRowKeys;
+        willUpdateStates.allDisabledRowKeysSet = disabledRowKeysSet;
       }
 
       willUpdateStates.rowSelection = newSelectionStates;
@@ -1264,7 +1279,9 @@ class Table extends BaseComponent {
       // Temporarily use _dataSource=[...dataSource] for processing
       const _dataSource = [...dataSource];
       const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
+      const allDataDisabledRowKeys = this.foundation.getAllDisabledRowKeys(filteredSortedDataSource);
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
+      this.foundation.setAllDisabledRowKeys(allDataDisabledRowKeys);
       states.dataSource = filteredSortedDataSource;
 
       if (this.props.groupBy) {
@@ -1461,11 +1478,13 @@ class Table extends BaseComponent {
     });
     return /*#__PURE__*/React.createElement("div", {
       ref: this.rootWrapRef,
-      className: classnames(className, `${prefixCls}-wrapper`),
+      className: classnames(className, `${prefixCls}-wrapper`, `${prefixCls}-wrapper-${props.direction}`),
       "data-column-fixed": anyColumnFixed,
       style: wrapStyle,
       id: id
-    }, /*#__PURE__*/React.createElement(TableContextProvider, Object.assign({}, tableContextValue), /*#__PURE__*/React.createElement(Spin, {
+    }, /*#__PURE__*/React.createElement(TableContextProvider, Object.assign({}, tableContextValue, {
+      direction: props.direction
+    }), /*#__PURE__*/React.createElement(Spin, {
       spinning: loading,
       size: "large"
     }, /*#__PURE__*/React.createElement("div", {

package/lib/es/table/TableCell.js

@@ -13,7 +13,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import TableCellFoundation from '@douyinfe/semi-foundation/lib/es/table/cellFoundation';
-import { isSelectionColumn, isExpandedColumn } from '@douyinfe/semi-foundation/lib/es/table/utils';
+import { isSelectionColumn, isExpandedColumn, getRTLAlign } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import BaseComponent from '../_base/baseComponent';
 import Context from './table-context';
 import { amendTableWidth } from './utils';
@@ -121,13 +121,17 @@ export default class TableCell extends BaseComponent {
     } = this.props;
     let tdProps = {};
     let customCellProps = {};
+    const {
+      direction
+    } = this.context;
+    const isRTL = direction === 'rtl';
     const fixedLeftFlag = fixedLeft || typeof fixedLeft === 'number';
     const fixedRightFlag = fixedRight || typeof fixedRight === 'number';
 
     if (fixedLeftFlag) {
-      _set(tdProps, 'style.left', typeof fixedLeft === 'number' ? fixedLeft : 0);
+      _set(tdProps, isRTL ? 'style.right' : 'style.left', typeof fixedLeft === 'number' ? fixedLeft : 0);
     } else if (fixedRightFlag) {
-      _set(tdProps, 'style.right', typeof fixedRight === 'number' ? fixedRight : 0);
+      _set(tdProps, isRTL ? 'style.left' : 'style.right', typeof fixedRight === 'number' ? fixedRight : 0);
     }
 
     if (width != null) {
@@ -147,8 +151,9 @@ export default class TableCell extends BaseComponent {
     }
 
     if (column.align) {
+      const textAlign = getRTLAlign(column.align, direction);
       tdProps.style = Object.assign(Object.assign({}, tdProps.style), {
-        textAlign: column.align
+        textAlign
       });
     }
 
@@ -286,6 +291,10 @@ export default class TableCell extends BaseComponent {
       firstFixedRight,
       colIndex
     } = this.props;
+    const {
+      direction
+    } = this.context;
+    const isRTL = direction === 'rtl';
     const {
       className
     } = column;
@@ -316,11 +325,25 @@ export default class TableCell extends BaseComponent {
     }
 
     const inner = this.renderInner(text, indentText, realExpandIcon);
+    let isFixedLeft, isFixedLeftLast, isFixedRight, isFixedRightFirst;
+
+    if (isRTL) {
+      isFixedLeft = fixedRightFlag;
+      isFixedLeftLast = firstFixedRight;
+      isFixedRight = fixedLeftFlag;
+      isFixedRightFirst = lastFixedLeft;
+    } else {
+      isFixedLeft = fixedLeftFlag;
+      isFixedLeftLast = lastFixedLeft;
+      isFixedRight = fixedRightFlag;
+      isFixedRightFirst = firstFixedRight;
+    }
+
     const columnCls = classnames(className, `${prefixCls}-row-cell`, _get(customCellProps, 'className'), {
-      [`${prefixCls}-cell-fixed-left`]: fixedLeftFlag,
-      [`${prefixCls}-cell-fixed-left-last`]: lastFixedLeft,
-      [`${prefixCls}-cell-fixed-right`]: fixedRightFlag,
-      [`${prefixCls}-cell-fixed-right-first`]: firstFixedRight
+      [`${prefixCls}-cell-fixed-left`]: isFixedLeft,
+      [`${prefixCls}-cell-fixed-left-last`]: isFixedLeftLast,
+      [`${prefixCls}-cell-fixed-right`]: isFixedRight,
+      [`${prefixCls}-cell-fixed-right-first`]: isFixedRightFirst
     });
     return /*#__PURE__*/React.createElement(BodyCell, Object.assign({
       role: "gridcell",

package/lib/es/table/TableContextProvider.d.ts

@@ -1,3 +1,3 @@
 import { TableContextProps } from './table-context';
-declare const TableContextProvider: ({ children, anyColumnFixed, flattenedColumns, tableWidth, headWidths, setHeadWidths, getHeadWidths, getCellWidths, handleRowExpanded, renderExpandIcon, renderSelection, getVirtualizedListRef, setBodyHasScrollbar, }: TableContextProps) => JSX.Element;
+declare const TableContextProvider: ({ children, anyColumnFixed, flattenedColumns, tableWidth, headWidths, setHeadWidths, getHeadWidths, getCellWidths, handleRowExpanded, renderExpandIcon, renderSelection, getVirtualizedListRef, setBodyHasScrollbar, direction }: TableContextProps) => JSX.Element;
 export default TableContextProvider;

package/lib/es/table/TableContextProvider.js

@@ -15,7 +15,8 @@ const TableContextProvider = _ref => {
     renderExpandIcon,
     renderSelection,
     getVirtualizedListRef,
-    setBodyHasScrollbar
+    setBodyHasScrollbar,
+    direction
   } = _ref;
   const tableContextValue = useMemo(() => ({
     anyColumnFixed,
@@ -29,8 +30,9 @@ const TableContextProvider = _ref => {
     tableWidth,
     handleRowExpanded,
     getVirtualizedListRef,
-    setBodyHasScrollbar
-  }), [anyColumnFixed, flattenedColumns, renderExpandIcon, renderSelection, setHeadWidths, getHeadWidths, getCellWidths, headWidths, tableWidth, handleRowExpanded, getVirtualizedListRef, setBodyHasScrollbar]);
+    setBodyHasScrollbar,
+    direction
+  }), [anyColumnFixed, flattenedColumns, renderExpandIcon, renderSelection, setHeadWidths, getHeadWidths, getCellWidths, headWidths, tableWidth, handleRowExpanded, getVirtualizedListRef, setBodyHasScrollbar, direction]);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: tableContextValue
   }, children);

package/lib/es/table/TableHeaderRow.js

@@ -22,7 +22,7 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
-import { arrayAdd, isFirstFixedRight, isLastLeftFixed, isFixedLeft, isFixedRight, sliceColumnsByLevel } from '@douyinfe/semi-foundation/lib/es/table/utils';
+import { arrayAdd, isFirstFixedRight, isLastLeftFixed, isFixedLeft, isFixedRight, sliceColumnsByLevel, getRTLAlign } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import BaseComponent from '../_base/baseComponent';
 import TableContext from './table-context';
 export default class TableHeaderRow extends BaseComponent {
@@ -81,8 +81,10 @@ export default class TableHeaderRow extends BaseComponent {
       columns
     } = this.props;
     const {
-      getCellWidths
+      getCellWidths,
+      direction
     } = this.context;
+    const isRTL = direction === 'rtl';
     const slicedColumns = sliceColumnsByLevel(columns, index);
     const headWidths = getCellWidths(slicedColumns);
 
@@ -104,20 +106,35 @@ export default class TableHeaderRow extends BaseComponent {
       let cellStyle = Object.assign({}, customProps.style);
 
       if (column.align) {
+        const textAlign = getRTLAlign(column.align, direction);
         cellStyle = Object.assign(Object.assign({}, cellStyle), {
-          textAlign: column.align
+          textAlign
         });
         customProps.className = classnames(customProps.className, column.className, {
-          [`${prefixCls}-align-${column.align}`]: Boolean(column.align)
+          [`${prefixCls}-align-${textAlign}`]: Boolean(textAlign)
         });
       }
 
+      let fixedLeft, fixedRight, fixedLeftLast, fixedRightFirst;
+
+      if (isRTL) {
+        fixedLeft = isFixedRight(column);
+        fixedRight = isFixedLeft(column);
+        fixedLeftLast = isFirstFixedRight(slicedColumns, column);
+        fixedRightFirst = isLastLeftFixed(slicedColumns, column);
+      } else {
+        fixedLeft = isFixedLeft(column);
+        fixedRight = isFixedRight(column);
+        fixedLeftLast = isLastLeftFixed(slicedColumns, column);
+        fixedRightFirst = isFirstFixedRight(slicedColumns, column);
+      }
+
       customProps.className = classnames(`${prefixCls}-row-head`, column.className, customProps.className, // `${prefixCls}-fixed-columns`,
       {
-        [`${prefixCls}-cell-fixed-left`]: isFixedLeft(column),
-        [`${prefixCls}-cell-fixed-left-last`]: isLastLeftFixed(slicedColumns, column),
-        [`${prefixCls}-cell-fixed-right`]: isFixedRight(column),
-        [`${prefixCls}-cell-fixed-right-first`]: isFirstFixedRight(slicedColumns, column)
+        [`${prefixCls}-cell-fixed-left`]: fixedLeft,
+        [`${prefixCls}-cell-fixed-left-last`]: fixedLeftLast,
+        [`${prefixCls}-cell-fixed-right`]: fixedRight,
+        [`${prefixCls}-cell-fixed-right-first`]: fixedRightFirst
       });
 
       if (headWidths.length && slicedColumns.length) {
@@ -125,14 +142,16 @@ export default class TableHeaderRow extends BaseComponent {
 
         if (indexOfSlicedColumns > -1) {
           if (isFixedLeft(column)) {
+            const xPositionKey = isRTL ? 'right' : 'left';
             cellStyle = Object.assign(Object.assign({}, cellStyle), {
               position: 'sticky',
-              left: arrayAdd(headWidths, 0, indexOfSlicedColumns)
+              [xPositionKey]: arrayAdd(headWidths, 0, indexOfSlicedColumns)
             });
           } else if (isFixedRight(column)) {
+            const xPositionKey = isRTL ? 'left' : 'right';
             cellStyle = Object.assign(Object.assign({}, cellStyle), {
               position: 'sticky',
-              right: arrayAdd(headWidths, indexOfSlicedColumns + 1)
+              [xPositionKey]: arrayAdd(headWidths, indexOfSlicedColumns + 1)
             });
           }
         }

package/lib/es/table/index.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import NormalTable from './Table';
 import Column from './Column';
 import { TableProps, Data } from './interface';
+import { ContextValue } from '../configProvider/context';
 declare class Table<RecordType extends Record<string, any> = Data> extends React.PureComponent<TableProps<RecordType>> {
     static Column: typeof Column;
     static DEFAULT_KEY_COLUMN_SELECTION: "column-selection";
@@ -91,7 +92,9 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
     static defaultProps: {
         hideExpandedColumn: boolean;
     };
+    static contextType: React.Context<ContextValue>;
     tableRef: React.RefObject<NormalTable<RecordType>>;
+    context: ContextValue;
     constructor(props: TableProps);
     getCurrentPageData: () => any;
     render(): JSX.Element;