@douyinfe/semi-ui 2.40.0 → 2.41.0-beta.0

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

@@ -150,14 +150,14 @@ export declare function withError(props: ModalReactProps): {
     footer?: React.ReactNode;
     header?: React.ReactNode;
     direction?: any;
-    width?: string | number;
-    height?: string | number;
     mask?: boolean;
     visible?: boolean;
+    zIndex?: number;
+    width?: string | number;
+    height?: string | number;
     content?: React.ReactNode;
     icon: string | number | boolean | React.ReactFragment | JSX.Element;
     onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
-    zIndex?: number;
     closeOnEsc?: boolean;
     preventScroll?: boolean;
     afterClose?: () => void;
@@ -208,108 +208,7 @@ export declare function withError(props: ModalReactProps): {
         onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         form?: string;
         slot?: string;
-        hidden?: boolean;
-        color?: string;
-        content?: 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;
-        role?: React.AriaRole;
-        contentEditable?: "inherit" | (boolean | "false" | "true");
-        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
-        nonce?: string;
-        tabIndex?: number;
-        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;
-        rel?: string;
-        resource?: string;
-        rev?: 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 | TrustedHTML;
         };
@@ -325,8 +224,11 @@ export declare function withError(props: ModalReactProps): {
         onCompositionStartCapture?: React.CompositionEventHandler<HTMLButtonElement>;
         onCompositionUpdate?: React.CompositionEventHandler<HTMLButtonElement>;
         onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLButtonElement>;
+        onFocus?: React.FocusEventHandler<HTMLButtonElement>;
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement>;
+        onBlur?: React.FocusEventHandler<HTMLButtonElement>;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement>;
+        onChange?: React.FormEventHandler<HTMLButtonElement>;
         onChangeCapture?: React.FormEventHandler<HTMLButtonElement>;
         onBeforeInput?: React.FormEventHandler<HTMLButtonElement>;
         onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement>;
@@ -342,6 +244,7 @@ export declare function withError(props: ModalReactProps): {
         onLoadCapture?: React.ReactEventHandler<HTMLButtonElement>;
         onError?: React.ReactEventHandler<HTMLButtonElement>;
         onErrorCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
         onKeyDownCapture?: React.KeyboardEventHandler<HTMLButtonElement>;
         onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
         onKeyPressCapture?: React.KeyboardEventHandler<HTMLButtonElement>;
@@ -419,7 +322,9 @@ export declare function withError(props: ModalReactProps): {
         onMouseDownCapture?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseMove?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseMoveCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseOutCapture?: React.MouseEventHandler<HTMLButtonElement>;
+        onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseOverCapture?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseUpCapture?: React.MouseEventHandler<HTMLButtonElement>;
@@ -463,6 +368,101 @@ export declare function withError(props: ModalReactProps): {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement>;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement>;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement>;
+        hidden?: boolean;
+        color?: string;
+        defaultChecked?: boolean;
+        defaultValue?: string | number | readonly string[];
+        suppressContentEditableWarning?: boolean;
+        suppressHydrationWarning?: boolean;
+        accessKey?: string;
+        autoFocus?: boolean;
+        content?: string;
+        formAction?: string;
+        formEncType?: string;
+        formMethod?: string;
+        formNoValidate?: boolean;
+        formTarget?: string;
+        dir?: string;
+        draggable?: boolean | "true" | "false";
+        lang?: string;
+        translate?: "no" | "yes";
+        role?: React.AriaRole;
+        contentEditable?: "inherit" | (boolean | "true" | "false");
+        inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal";
+        nonce?: string;
+        tabIndex?: number;
+        'aria-expanded'?: boolean | "true" | "false";
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
+        'aria-controls'?: string;
+        'aria-describedby'?: string;
+        contextMenu?: string;
+        placeholder?: string;
+        spellCheck?: boolean | "true" | "false";
+        radioGroup?: string;
+        about?: string;
+        datatype?: string;
+        inlist?: any;
+        property?: string;
+        rel?: string;
+        resource?: string;
+        rev?: 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 | "true" | "false";
+        'aria-autocomplete'?: "both" | "none" | "list" | "inline";
+        'aria-busy'?: boolean | "true" | "false";
+        'aria-checked'?: boolean | "true" | "false" | "mixed";
+        'aria-colcount'?: number;
+        'aria-colindex'?: number;
+        'aria-colspan'?: number;
+        'aria-current'?: boolean | "time" | "true" | "false" | "date" | "page" | "location" | "step";
+        'aria-details'?: string;
+        'aria-disabled'?: boolean | "true" | "false";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
+        'aria-errormessage'?: string;
+        'aria-flowto'?: string;
+        'aria-grabbed'?: boolean | "true" | "false";
+        'aria-hidden'?: boolean | "true" | "false";
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+        'aria-keyshortcuts'?: string;
+        'aria-labelledby'?: string;
+        'aria-level'?: number;
+        'aria-live'?: "off" | "assertive" | "polite";
+        'aria-modal'?: boolean | "true" | "false";
+        'aria-multiline'?: boolean | "true" | "false";
+        'aria-multiselectable'?: boolean | "true" | "false";
+        'aria-orientation'?: "horizontal" | "vertical";
+        'aria-owns'?: string;
+        'aria-placeholder'?: string;
+        'aria-posinset'?: number;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed";
+        'aria-readonly'?: boolean | "true" | "false";
+        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+        'aria-required'?: boolean | "true" | "false";
+        'aria-roledescription'?: string;
+        'aria-rowcount'?: number;
+        'aria-rowindex'?: number;
+        'aria-rowspan'?: number;
+        'aria-selected'?: boolean | "true" | "false";
+        'aria-setsize'?: number;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other";
+        'aria-valuemax'?: number;
+        'aria-valuemin'?: number;
+        'aria-valuenow'?: number;
+        'aria-valuetext'?: string;
     };
 };
 export declare function withConfirm(props: ModalReactProps): {

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

@@ -55,7 +55,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         visible: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         motion: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         margin: PropTypes.Requireable<NonNullable<number | object>>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;

package/lib/cjs/radio/radio.d.ts

@@ -82,7 +82,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "large" | "middle";
+        buttonSize?: "small" | "middle" | "large";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/cjs/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
+        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -200,7 +200,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         expandRestTagsOnClick: PropTypes.Requireable<boolean>;
         onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownClassName: PropTypes.Requireable<string>;

package/lib/cjs/table/Column.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ColumnProps } from './interface';
 export default class Column extends React.PureComponent<ColumnProps> {
     static propTypes: {
-        align: import("prop-types").Requireable<"left" | "right" | "center">;
+        align: import("prop-types").Requireable<"center" | "left" | "right">;
         className: import("prop-types").Requireable<string>;
         colSpan: import("prop-types").Requireable<number>;
         dataIndex: import("prop-types").Requireable<string>;

package/lib/cjs/table/ColumnShape.d.ts

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 declare const _default: {
-    align: PropTypes.Requireable<"left" | "right" | "center">;
+    align: PropTypes.Requireable<"center" | "left" | "right">;
     className: PropTypes.Requireable<string>;
     colSpan: PropTypes.Requireable<number>;
     dataIndex: PropTypes.Requireable<string>;

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

@@ -63,7 +63,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
-            align: PropTypes.Requireable<"left" | "right" | "center">;
+            align: PropTypes.Requireable<"center" | "left" | "right">;
             className: PropTypes.Requireable<string>;
             colSpan: PropTypes.Requireable<number>;
             dataIndex: PropTypes.Requireable<string>;
@@ -308,7 +308,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showSizeChanger?: boolean;
         showQuickJumper?: boolean;
         popoverZIndex?: number;
-        popoverPosition?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+        popoverPosition?: "left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         hideOnSinglePage?: boolean;
         hoverShowPageSelect?: boolean;
         disabled?: boolean;

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

@@ -19,7 +19,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
-            align: PropTypes.Requireable<"left" | "right" | "center">;
+            align: PropTypes.Requireable<"center" | "left" | "right">;
             className: PropTypes.Requireable<string>;
             colSpan: PropTypes.Requireable<number>;
             dataIndex: PropTypes.Requireable<string>;

package/lib/cjs/tagInput/index.d.ts

@@ -7,6 +7,7 @@ import { ArrayElement } from '../_base/base';
 import BaseComponent from '../_base/baseComponent';
 import { PopoverProps } from '../popover';
 import { ShowTooltip } from '../typography';
+import { RenderItemProps } from '../_sortable';
 export type Size = ArrayElement<typeof strings.SIZE_SET>;
 export type RestTagsPopoverProps = PopoverProps;
 type ValidateStatus = "default" | "error" | "warning";
@@ -151,7 +152,9 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     renderClearBtn(): JSX.Element;
     renderPrefix(): JSX.Element;
     renderSuffix(): JSX.Element;
-    getAllTags: () => (string | number | boolean | React.ReactFragment | JSX.Element)[];
+    getAllTags: () => JSX.Element[];
+    renderTag: (value: any, index: number, sortableHandle?: any) => JSX.Element;
+    renderSortTag: (props: RenderItemProps) => JSX.Element;
     onSortEnd: (callbackProps: OnSortEndProps) => void;
     renderTags(): JSX.Element;
     blur(): void;

package/lib/cjs/tagInput/index.js

@@ -23,7 +23,7 @@ var _input = _interopRequireDefault(require("../input"));
 var _popover = _interopRequireDefault(require("../popover"));
 var _paragraph = _interopRequireDefault(require("../typography/paragraph"));
 var _semiIcons = require("@douyinfe/semi-icons");
-var _reactSortableHoc = require("react-sortable-hoc");
+var _sortable = require("../_sortable");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -34,22 +34,11 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 const prefixCls = _constants.cssClasses.PREFIX;
-const SortableItem = (0, _reactSortableHoc.SortableElement)(props => props.item);
-const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
-  let {
-    items
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
+function SortContainer(props) {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     className: `${prefixCls}-sortable-list`
-  }, items.map((item, index) =>
-  /*#__PURE__*/
-  // @ts-ignore skip SortableItem type check
-  _react.default.createElement(SortableItem, {
-    key: item.key,
-    index: index,
-    item: item.item
-  })));
-});
+  }, props));
+}
 class TagInput extends _baseComponent.default {
   constructor(props) {
     super(props);
@@ -91,6 +80,12 @@ class TagInput extends _baseComponent.default {
       this.foundation.handlePreventMouseDown(e);
     };
     this.getAllTags = () => {
+      const {
+        tagsArray
+      } = this.state;
+      return tagsArray.map((value, index) => this.renderTag(value, index));
+    };
+    this.renderTag = (value, index, sortableHandle) => {
       const {
         size,
         disabled,
@@ -99,7 +94,6 @@ class TagInput extends _baseComponent.default {
         draggable
       } = this.props;
       const {
-        tagsArray,
         active
       } = this.state;
       const showIconHandler = active && draggable;
@@ -114,39 +108,48 @@ class TagInput extends _baseComponent.default {
         [`${prefixCls}-drag-item`]: showIconHandler,
         [`${prefixCls}-wrapper-tag-icon`]: showIconHandler
       });
-      const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
+      const DragHandle = sortableHandle && sortableHandle(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
         className: `${prefixCls}-drag-handler`
       }));
-      return tagsArray.map((value, index) => {
-        const elementKey = showIconHandler ? value : `${index}${value}`;
-        const onClose = () => {
-          !disabled && this.handleTagClose(index);
-        };
-        if ((0, _isFunction2.default)(renderTagItem)) {
-          return showIconHandler ? /*#__PURE__*/_react.default.createElement("div", {
-            className: itemWrapperCls,
-            key: elementKey
-          }, /*#__PURE__*/_react.default.createElement(DragHandle, null), renderTagItem(value, index, onClose)) : renderTagItem(value, index, onClose);
-        } else {
-          return /*#__PURE__*/_react.default.createElement(_tag.default, {
-            className: tagCls,
-            color: "white",
-            size: size === 'small' ? 'small' : 'large',
-            type: "light",
-            onClose: onClose,
-            closable: !disabled,
-            key: elementKey,
-            visible: true,
-            "aria-label": `${!disabled ? 'Closable ' : ''}Tag: ${value}`
-          }, showIconHandler && /*#__PURE__*/_react.default.createElement(DragHandle, null), /*#__PURE__*/_react.default.createElement(_paragraph.default, {
-            className: typoCls,
-            ellipsis: {
-              showTooltip: showContentTooltip,
-              rows: 1
-            }
-          }, value));
-        }
-      });
+      const elementKey = showIconHandler ? value : `${index}${value}`;
+      const onClose = () => {
+        !disabled && this.handleTagClose(index);
+      };
+      if ((0, _isFunction2.default)(renderTagItem)) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: itemWrapperCls,
+          key: elementKey
+        }, showIconHandler && sortableHandle ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, renderTagItem(value, index, onClose));
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_tag.default, {
+          className: tagCls,
+          color: "white",
+          size: size === 'small' ? 'small' : 'large',
+          type: "light",
+          onClose: onClose,
+          closable: !disabled,
+          key: elementKey,
+          visible: true,
+          "aria-label": `${!disabled ? 'Closable ' : ''}Tag: ${value}`
+        }, showIconHandler && sortableHandle ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement(_paragraph.default, {
+          className: typoCls,
+          ellipsis: {
+            showTooltip: showContentTooltip,
+            rows: 1
+          }
+        }, value));
+      }
+    };
+    this.renderSortTag = props => {
+      const {
+        id: item,
+        sortableHandle
+      } = props;
+      const {
+        tagsArray
+      } = this.state;
+      const index = tagsArray.indexOf(item);
+      return this.renderTag(item, index, sortableHandle);
     };
     this.onSortEnd = callbackProps => {
       this.foundation.handleSortEnd(callbackProps);
@@ -400,14 +403,14 @@ class TagInput extends _baseComponent.default {
       key: tagsArray[index]
     }));
     if (active && draggable && sortableListItems.length > 0) {
-      // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
-      // @ts-ignore skip SortableItem type check
-      return /*#__PURE__*/_react.default.createElement(SortableList, {
-        useDragHandle: true,
-        helperClass: `${prefixCls}-drag-item-move`,
-        items: sortableListItems,
+      return /*#__PURE__*/_react.default.createElement(_sortable.Sortable, {
+        items: tagsArray,
         onSortEnd: this.onSortEnd,
-        axis: "xy"
+        renderItem: this.renderSortTag,
+        container: SortContainer,
+        prefix: prefixCls,
+        transition: null,
+        dragOverlayCls: `${prefixCls}-right-item-drag-item-move`
       });
     }
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/_react.default.createElement(_popover.default, Object.assign({

package/lib/cjs/tooltip/index.d.ts

@@ -88,7 +88,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         motion: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;

package/lib/cjs/transfer/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { SortableHandle } from 'react-sortable-hoc';
 import PropTypes from 'prop-types';
 import { TransferAdapter, BasicDataItem, OnSortEndProps } from '@douyinfe/semi-foundation/lib/cjs/transfer/foundation';
 import '@douyinfe/semi-foundation/lib/cjs/transfer/transfer.css';
@@ -8,6 +7,7 @@ import { Locale } from '../locale/interface';
 import { InputProps } from '../input/index';
 import Tree from '../tree';
 import { TreeProps } from '../tree/interface';
+import { RenderItemProps } from '../_sortable';
 export interface DataItem extends BasicDataItem {
     label?: React.ReactNode;
     style?: React.CSSProperties;
@@ -25,7 +25,7 @@ export interface RenderSourceItemProps extends DataItem {
 }
 export interface RenderSelectedItemProps extends DataItem {
     onRemove?: () => void;
-    sortableHandle?: typeof SortableHandle;
+    sortableHandle?: any;
 }
 export interface EmptyContent {
     left?: React.ReactNode;
@@ -177,7 +177,8 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderGroupTitle(group: GroupItem, index: number): JSX.Element;
     renderLeftTree(): JSX.Element;
     renderLeftList(visibileItems: Array<ResolvedDataItem>): JSX.Element;
-    renderRightItem(item: ResolvedDataItem): React.ReactNode;
+    renderRightItem: (item: ResolvedDataItem, sortableHandle?: any) => React.ReactNode;
+    renderSortItem: (props: RenderItemProps) => React.ReactNode;
     renderEmpty(type: string, emptyText: React.ReactNode): JSX.Element;
     renderRightSortableList(selectedData: Array<ResolvedDataItem>): JSX.Element;
     renderRight(locale: Locale['Transfer']): string | number | boolean | React.ReactFragment | JSX.Element;