@douyinfe/semi-ui 2.30.1 → 2.31.0-beta.0

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

@@ -140,47 +140,324 @@ export declare function withWarning(props: ModalReactProps): {
     type: "warning";
 };
 export declare function withError(props: ModalReactProps): {
-    cancelButtonProps?: import("../button").BaseButtonProps;
+    title?: React.ReactNode;
     children?: React.ReactNode;
-    okButtonProps?: import("../button").BaseButtonProps;
-    bodyStyle?: React.CSSProperties;
-    maskStyle?: React.CSSProperties;
+    size?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").Size;
     style?: React.CSSProperties;
-    icon: string | number | boolean | React.ReactFragment | JSX.Element;
-    closeIcon?: React.ReactNode;
-    title?: React.ReactNode;
-    content?: React.ReactNode;
+    className?: string;
+    motion?: boolean;
+    getPopupContainer?: () => HTMLElement;
     footer?: React.ReactNode;
     header?: React.ReactNode;
-    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
-    onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    direction?: any;
+    width?: string | number;
+    height?: string | number;
+    mask?: boolean;
+    visible?: boolean;
+    content?: React.ReactNode;
+    icon: string | number | boolean | React.ReactFragment | JSX.Element;
+    zIndex?: number;
+    closeOnEsc?: boolean;
+    preventScroll?: boolean;
     afterClose?: () => void;
+    keepDOM?: boolean;
     cancelText?: string;
-    centered?: boolean;
-    className?: string;
+    okText?: string;
+    closeIcon?: React.ReactNode;
+    bodyStyle?: React.CSSProperties;
     closable?: boolean;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    maskClosable?: boolean;
+    cancelButtonProps?: import("../button").BaseButtonProps;
+    centered?: boolean;
     confirmLoading?: boolean;
     cancelLoading?: boolean;
     hasCancel?: boolean;
-    height?: string | number;
-    mask?: boolean;
-    maskClosable?: boolean;
+    maskStyle?: React.CSSProperties;
     maskFixed?: boolean;
-    motion?: boolean;
-    okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
-    visible?: boolean;
-    width?: string | number;
-    zIndex?: number;
-    getPopupContainer?: () => HTMLElement;
-    closeOnEsc?: boolean;
-    size?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").Size;
+    onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     lazyRender?: boolean;
-    keepDOM?: boolean;
-    direction?: any;
     fullScreen?: boolean;
-    preventScroll?: boolean;
     type: "error";
+    okButtonProps: {
+        id?: string;
+        block?: boolean;
+        circle?: boolean;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        className?: string;
+        icon?: React.ReactNode;
+        iconPosition?: "left" | "right";
+        loading?: boolean;
+        htmlType?: import("../button").HtmlType;
+        size?: import("../button").Size;
+        style?: React.CSSProperties;
+        theme?: import("../button").Theme;
+        type: import("../button").Type;
+        prefixCls?: string;
+        onClick?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+        'aria-label'?: string;
+        title?: string;
+        name?: string;
+        value?: string | number | readonly string[];
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
+        form?: string;
+        slot?: string;
+        hidden?: boolean;
+        color?: string;
+        onChange?: React.FormEventHandler<HTMLButtonElement>;
+        defaultChecked?: boolean;
+        defaultValue?: string | number | readonly string[];
+        suppressContentEditableWarning?: boolean;
+        suppressHydrationWarning?: boolean;
+        accessKey?: string;
+        autoFocus?: boolean;
+        formAction?: string;
+        formEncType?: string;
+        formMethod?: string;
+        formNoValidate?: boolean;
+        formTarget?: string;
+        dir?: string;
+        draggable?: boolean | "false" | "true";
+        lang?: string;
+        translate?: "no" | "yes";
+        prefix?: string;
+        contentEditable?: "inherit" | (boolean | "false" | "true");
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
+        tabIndex?: number;
+        role?: React.AriaRole;
+        onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
+        onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+        onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+        onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+        'aria-expanded'?: boolean | "false" | "true";
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
+        'aria-controls'?: string;
+        'aria-describedby'?: string;
+        contextMenu?: string;
+        placeholder?: string;
+        spellCheck?: boolean | "false" | "true";
+        radioGroup?: string;
+        about?: string;
+        datatype?: string;
+        inlist?: any;
+        property?: string;
+        resource?: string;
+        typeof?: string;
+        vocab?: string;
+        autoCapitalize?: string;
+        autoCorrect?: string;
+        autoSave?: string;
+        itemProp?: string;
+        itemScope?: boolean;
+        itemType?: string;
+        itemID?: string;
+        itemRef?: string;
+        results?: number;
+        security?: string;
+        unselectable?: "on" | "off";
+        is?: string;
+        'aria-activedescendant'?: string;
+        'aria-atomic'?: boolean | "false" | "true";
+        'aria-autocomplete'?: "both" | "none" | "inline" | "list";
+        'aria-busy'?: boolean | "false" | "true";
+        'aria-checked'?: boolean | "mixed" | "false" | "true";
+        'aria-colcount'?: number;
+        'aria-colindex'?: number;
+        'aria-colspan'?: number;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "location" | "step" | "date";
+        'aria-details'?: string;
+        'aria-disabled'?: boolean | "false" | "true";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
+        'aria-errormessage'?: string;
+        'aria-flowto'?: string;
+        'aria-grabbed'?: boolean | "false" | "true";
+        'aria-hidden'?: boolean | "false" | "true";
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
+        'aria-keyshortcuts'?: string;
+        'aria-labelledby'?: string;
+        'aria-level'?: number;
+        'aria-live'?: "off" | "assertive" | "polite";
+        'aria-modal'?: boolean | "false" | "true";
+        'aria-multiline'?: boolean | "false" | "true";
+        'aria-multiselectable'?: boolean | "false" | "true";
+        'aria-orientation'?: "horizontal" | "vertical";
+        'aria-owns'?: string;
+        'aria-placeholder'?: string;
+        'aria-posinset'?: number;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true";
+        'aria-readonly'?: boolean | "false" | "true";
+        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+        'aria-required'?: boolean | "false" | "true";
+        'aria-roledescription'?: string;
+        'aria-rowcount'?: number;
+        'aria-rowindex'?: number;
+        'aria-rowspan'?: number;
+        'aria-selected'?: boolean | "false" | "true";
+        'aria-setsize'?: number;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other";
+        'aria-valuemax'?: number;
+        'aria-valuemin'?: number;
+        'aria-valuenow'?: number;
+        'aria-valuetext'?: string;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        };
+        onCopy?: React.ClipboardEventHandler<HTMLButtonElement>;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement>;
+        onCut?: React.ClipboardEventHandler<HTMLButtonElement>;
+        onCutCapture?: React.ClipboardEventHandler<HTMLButtonElement>;
+        onPaste?: React.ClipboardEventHandler<HTMLButtonElement>;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLButtonElement>;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLButtonElement>;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLButtonElement>;
+        onCompositionStart?: React.CompositionEventHandler<HTMLButtonElement>;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLButtonElement>;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLButtonElement>;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLButtonElement>;
+        onFocusCapture?: React.FocusEventHandler<HTMLButtonElement>;
+        onBlurCapture?: React.FocusEventHandler<HTMLButtonElement>;
+        onChangeCapture?: React.FormEventHandler<HTMLButtonElement>;
+        onBeforeInput?: React.FormEventHandler<HTMLButtonElement>;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement>;
+        onInput?: React.FormEventHandler<HTMLButtonElement>;
+        onInputCapture?: React.FormEventHandler<HTMLButtonElement>;
+        onReset?: React.FormEventHandler<HTMLButtonElement>;
+        onResetCapture?: React.FormEventHandler<HTMLButtonElement>;
+        onSubmit?: React.FormEventHandler<HTMLButtonElement>;
+        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement>;
+        onInvalid?: React.FormEventHandler<HTMLButtonElement>;
+        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement>;
+        onLoad?: React.ReactEventHandler<HTMLButtonElement>;
+        onLoadCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onError?: React.ReactEventHandler<HTMLButtonElement>;
+        onErrorCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLButtonElement>;
+        onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLButtonElement>;
+        onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLButtonElement>;
+        onAbort?: React.ReactEventHandler<HTMLButtonElement>;
+        onAbortCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onCanPlay?: React.ReactEventHandler<HTMLButtonElement>;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLButtonElement>;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onDurationChange?: React.ReactEventHandler<HTMLButtonElement>;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onEmptied?: React.ReactEventHandler<HTMLButtonElement>;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onEncrypted?: React.ReactEventHandler<HTMLButtonElement>;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onEnded?: React.ReactEventHandler<HTMLButtonElement>;
+        onEndedCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onLoadedData?: React.ReactEventHandler<HTMLButtonElement>;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLButtonElement>;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onLoadStart?: React.ReactEventHandler<HTMLButtonElement>;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onPause?: React.ReactEventHandler<HTMLButtonElement>;
+        onPauseCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onPlay?: React.ReactEventHandler<HTMLButtonElement>;
+        onPlayCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onPlaying?: React.ReactEventHandler<HTMLButtonElement>;
+        onPlayingCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onProgress?: React.ReactEventHandler<HTMLButtonElement>;
+        onProgressCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onRateChange?: React.ReactEventHandler<HTMLButtonElement>;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onSeeked?: React.ReactEventHandler<HTMLButtonElement>;
+        onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onSeeking?: React.ReactEventHandler<HTMLButtonElement>;
+        onSeekingCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onStalled?: React.ReactEventHandler<HTMLButtonElement>;
+        onStalledCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onSuspend?: React.ReactEventHandler<HTMLButtonElement>;
+        onSuspendCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onTimeUpdate?: React.ReactEventHandler<HTMLButtonElement>;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onVolumeChange?: React.ReactEventHandler<HTMLButtonElement>;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onWaiting?: React.ReactEventHandler<HTMLButtonElement>;
+        onWaitingCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onAuxClick?: React.MouseEventHandler<HTMLButtonElement>;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onClickCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onContextMenu?: React.MouseEventHandler<HTMLButtonElement>;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onDoubleClick?: React.MouseEventHandler<HTMLButtonElement>;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onDrag?: React.DragEventHandler<HTMLButtonElement>;
+        onDragCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onDragEnd?: React.DragEventHandler<HTMLButtonElement>;
+        onDragEndCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onDragEnter?: React.DragEventHandler<HTMLButtonElement>;
+        onDragEnterCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onDragExit?: React.DragEventHandler<HTMLButtonElement>;
+        onDragExitCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onDragLeave?: React.DragEventHandler<HTMLButtonElement>;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onDragOver?: React.DragEventHandler<HTMLButtonElement>;
+        onDragOverCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onDragStart?: React.DragEventHandler<HTMLButtonElement>;
+        onDragStartCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onDrop?: React.DragEventHandler<HTMLButtonElement>;
+        onDropCapture?: React.DragEventHandler<HTMLButtonElement>;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseMove?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onSelect?: React.ReactEventHandler<HTMLButtonElement>;
+        onSelectCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onTouchCancel?: React.TouchEventHandler<HTMLButtonElement>;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLButtonElement>;
+        onTouchEnd?: React.TouchEventHandler<HTMLButtonElement>;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLButtonElement>;
+        onTouchMove?: React.TouchEventHandler<HTMLButtonElement>;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLButtonElement>;
+        onTouchStart?: React.TouchEventHandler<HTMLButtonElement>;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLButtonElement>;
+        onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerMove?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerUp?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerCancel?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerEnter?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerLeave?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerOver?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerOut?: React.PointerEventHandler<HTMLButtonElement>;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement>;
+        onScroll?: React.UIEventHandler<HTMLButtonElement>;
+        onScrollCapture?: React.UIEventHandler<HTMLButtonElement>;
+        onWheel?: React.WheelEventHandler<HTMLButtonElement>;
+        onWheelCapture?: React.WheelEventHandler<HTMLButtonElement>;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement>;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement>;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement>;
+    };
 };
 export declare function withConfirm(props: ModalReactProps): {
     cancelButtonProps?: import("../button").BaseButtonProps;

package/lib/es/modal/confirm.js

@@ -1,3 +1,4 @@
+import _omit from "lodash/omit";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { destroyFns } from './Modal';
@@ -82,8 +83,11 @@ export function withWarning(props) {
 export function withError(props) {
   return Object.assign({
     type: 'error',
-    icon: /*#__PURE__*/React.createElement(IconAlertCircle, null)
-  }, props);
+    icon: /*#__PURE__*/React.createElement(IconAlertCircle, null),
+    okButtonProps: Object.assign({
+      type: 'danger'
+    }, props.okButtonProps)
+  }, _omit(props, ['okButtonProps']));
 }
 export function withConfirm(props) {
   return Object.assign({

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/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/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');
@@ -1461,11 +1462,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)
             });
           }
         }