@douyinfe/semi-ui 2.17.0 → 2.19.0-alpha.0

package/lib/es/table/ColumnSorter.js

@@ -12,9 +12,10 @@ export default class ColumnSorter extends PureComponent {
       prefixCls,
       onClick,
       sortOrder,
-      style
+      style,
+      title
     } = this.props;
-    const iconBtnSize = 'small';
+    const iconBtnSize = 'default';
     const upCls = cls("".concat(prefixCls, "-column-sorter-up"), {
       on: sortOrder === strings.SORT_DIRECTIONS[0]
     });
@@ -33,11 +34,13 @@ export default class ColumnSorter extends PureComponent {
       role: 'button'
     }, ariaProps, {
       tabIndex: -1,
-      style: style,
-      className: "".concat(prefixCls, "-column-sorter"),
+      className: "".concat(prefixCls, "-column-sorter-wrapper"),
       onClick: onClick,
       onKeyPress: e => isEnterPress(e) && onClick(e)
-    }), /*#__PURE__*/React.createElement("span", {
+    }), title, /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: "".concat(prefixCls, "-column-sorter")
+    }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(upCls)
     }, /*#__PURE__*/React.createElement(IconCaretup, {
       size: iconBtnSize
@@ -45,7 +48,7 @@ export default class ColumnSorter extends PureComponent {
       className: "".concat(downCls)
     }, /*#__PURE__*/React.createElement(IconCaretdown, {
       size: iconBtnSize
-    })));
+    }))));
   }
 
 }

package/lib/es/table/Table.js

@@ -494,15 +494,23 @@ class Table extends BaseComponent {
         const defaultSortOrder = _get(curQuery, 'defaultSortOrder', false);
 
         const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/React.createElement(React.Fragment, {
+          key: strings.DEFAULT_KEY_COLUMN_TITLE
+        }, rawTitle);
 
         if (typeof column.sorter === 'function' || column.sorter === true) {
+          // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
+          // both the title and sorting areas are used as the click hot area for sorting。
           const sorter = /*#__PURE__*/React.createElement(ColumnSorter, {
             key: strings.DEFAULT_KEY_COLUMN_SORTER,
             sortOrder: sortOrder,
-            onClick: e => _this.foundation.handleSort(column, e)
+            onClick: e => _this.foundation.handleSort(column, e),
+            title: TitleNode
           });
           useFullRender && (titleMap.sorter = sorter);
           titleArr.push(sorter);
+        } else {
+          titleArr.push(TitleNode);
         }
 
         const stateFilteredValue = _get(curQuery, 'filteredValue');
@@ -523,9 +531,7 @@ class Table extends BaseComponent {
           titleArr.push(filter);
         }
 
-        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr.unshift( /*#__PURE__*/React.createElement(React.Fragment, {
-          key: strings.DEFAULT_KEY_COLUMN_TITLE
-        }, rawTitle)) && titleArr;
+        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr;
         column = _Object$assign(_Object$assign({}, column), {
           title: newTitle
         });

package/lib/es/tag/group.d.ts

@@ -14,6 +14,7 @@ export interface TagGroupProps<T> {
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
     mode?: string;
+    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
 }
 export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps: {
@@ -21,6 +22,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         className: string;
         size: string;
         avatarShape: string;
+        onTagClose: () => any;
     };
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -31,6 +33,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;
+        onTagClose: PropTypes.Requireable<(...args: any[]) => any>;
         showPopover: PropTypes.Requireable<boolean>;
         popoverProps: PropTypes.Requireable<object>;
         avatarShape: PropTypes.Requireable<string>;

package/lib/es/tag/group.js

@@ -72,10 +72,11 @@ export default class TagGroup extends PureComponent {
       tagList,
       size,
       mode,
-      avatarShape
+      avatarShape,
+      onTagClose
     } = this.props;
 
-    const renderTags = _mapInstanceProperty(tagList).call(tagList, (tag, index) => {
+    const renderTags = _mapInstanceProperty(tagList).call(tagList, tag => {
       if (mode === 'custom') {
         return tag;
       }
@@ -88,9 +89,24 @@ export default class TagGroup extends PureComponent {
         tag.avatarShape = avatarShape;
       }
 
-      return /*#__PURE__*/React.createElement(Tag, _Object$assign({
-        key: "".concat(index, "-tag")
-      }, tag));
+      if (!tag.tagKey) {
+        if (typeof tag.children === 'string' || typeof tag.children === 'number') {
+          tag.tagKey = tag.children;
+        } else {
+          tag.tagKey = Math.random();
+        }
+      }
+
+      return /*#__PURE__*/React.createElement(Tag, _Object$assign({}, tag, {
+        key: tag.tagKey,
+        onClose: (tagChildren, e, tagKey) => {
+          if (tag.onClose) {
+            tag.onClose(tagChildren, e, tagKey);
+          }
+
+          onTagClose && onTagClose(tagChildren, e, tagKey);
+        }
+      }));
     });
 
     return renderTags;
@@ -122,7 +138,8 @@ TagGroup.defaultProps = {
   style: {},
   className: '',
   size: tagSize[0],
-  avatarShape: 'square'
+  avatarShape: 'square',
+  onTagClose: () => undefined
 };
 TagGroup.propTypes = {
   children: PropTypes.node,
@@ -133,6 +150,7 @@ TagGroup.propTypes = {
   tagList: PropTypes.array,
   size: PropTypes.oneOf(tagSize),
   mode: PropTypes.string,
+  onTagClose: PropTypes.func,
   showPopover: PropTypes.bool,
   popoverProps: PropTypes.object,
   avatarShape: PropTypes.oneOf(avatarShapeSet)

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

@@ -10,6 +10,7 @@ export default class Tag extends Component<TagProps, TagState> {
     static defaultProps: TagProps;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tagKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
@@ -28,7 +29,7 @@ export default class Tag extends Component<TagProps, TagState> {
         visible: boolean;
     };
     setVisible(visible: boolean): void;
-    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode): void;
+    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode, tagKey: string | number): void;
     handleKeyDown(event: any): void;
     renderAvatar(): JSX.Element;
     render(): JSX.Element;

package/lib/es/tag/index.js

@@ -63,13 +63,13 @@ export default class Tag extends Component {
     }
   }
 
-  close(e, value) {
+  close(e, value, tagKey) {
     const {
       onClose
     } = this.props;
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    onClose && onClose(value, e); // when user call e.preventDefault() in onClick callback, tag will not hidden
+    onClose && onClose(value, e, tagKey); // when user call e.preventDefault() in onClick callback, tag will not hidden
 
     if (e.defaultPrevented) {
       return;
@@ -88,7 +88,7 @@ export default class Tag extends Component {
     switch (event.key) {
       case "Backspace":
       case "Delete":
-        closable && this.close(event, this.props.children);
+        closable && this.close(event, this.props.children, this.props.tagKey);
         handlePrevent(event);
         break;
 
@@ -125,6 +125,7 @@ export default class Tag extends Component {
 
     const _a = this.props,
           {
+      tagKey,
       children,
       size,
       color,
@@ -138,7 +139,7 @@ export default class Tag extends Component {
       avatarShape,
       tabIndex
     } = _a,
-          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
+          attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
 
     const {
       visible: isVisible
@@ -171,7 +172,7 @@ export default class Tag extends Component {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     React.createElement("div", {
       className: "".concat(prefixCls, "-close"),
-      onClick: e => this.close(e, children)
+      onClick: e => this.close(e, children, tagKey)
     }, /*#__PURE__*/React.createElement(IconClose, {
       size: "small"
     })) : null;
@@ -197,6 +198,7 @@ Tag.defaultProps = {
 };
 Tag.propTypes = {
   children: PropTypes.node,
+  tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
   size: PropTypes.oneOf(tagSize),
   color: PropTypes.oneOf(tagColors),
   type: PropTypes.oneOf(tagType),

package/lib/es/tag/interface.d.ts

@@ -5,12 +5,13 @@ export declare type TagSize = 'default' | 'small' | 'large';
 export declare type AvatarShape = 'circle' | 'square';
 export interface TagProps {
     children?: React.ReactNode;
+    tagKey?: string | number;
     size?: TagSize;
     color?: TagColor;
     type?: TagType;
     closable?: boolean;
     visible?: boolean;
-    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     style?: React.CSSProperties;
     className?: string;

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

@@ -6,7 +6,7 @@ import BaseComponent from '../_base/baseComponent';
 import Input from '../input/index';
 import TreeNode from './treeNode';
 import '@douyinfe/semi-foundation/lib/es/tree/tree.css';
-import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity } from './interface';
+import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity, ScrollData } from './interface';
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
 declare class Tree extends BaseComponent<TreeProps, TreeState> {
@@ -102,6 +102,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     onNodeClick: any;
     onMotionEnd: any;
     context: ContextValue;
+    virtualizedListRef: React.RefObject<any>;
     constructor(props: TreeProps);
     /**
      * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -110,6 +111,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState>;
     get adapter(): TreeAdapter;
     search: (value: string) => void;
+    scrollTo: (scrollData: ScrollData) => void;
     renderInput(): JSX.Element;
     renderEmpty: () => JSX.Element;
     onNodeSelect: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;

package/lib/es/tree/index.js

@@ -2,6 +2,7 @@ import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import _isEqual from "lodash/isEqual";
 import _isEmpty from "lodash/isEmpty";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -40,6 +41,25 @@ class Tree extends BaseComponent {
       this.foundation.handleInputChange(value);
     };
 
+    this.scrollTo = scrollData => {
+      var _a;
+
+      const {
+        key,
+        align = 'center'
+      } = scrollData;
+      const {
+        flattenNodes
+      } = this.state;
+
+      if (key) {
+        const index = flattenNodes === null || flattenNodes === void 0 ? void 0 : _findIndexInstanceProperty(flattenNodes).call(flattenNodes, node => {
+          return node.key === key;
+        });
+        index >= 0 && ((_a = this.virtualizedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align));
+      }
+    };
+
     this.renderEmpty = () => {
       const {
         emptyContent
@@ -201,6 +221,7 @@ class Tree extends BaseComponent {
     this.optionsRef = /*#__PURE__*/React.createRef();
     this.foundation = new TreeFoundation(this.adapter);
     this.dragNode = null;
+    this.virtualizedListRef = /*#__PURE__*/React.createRef();
   }
   /**
    * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -573,6 +594,7 @@ class Tree extends BaseComponent {
         width
       } = _ref4;
       return /*#__PURE__*/React.createElement(VirtualList, {
+        ref: this.virtualizedListRef,
         itemCount: flattenNodes.length,
         itemSize: virtualize.itemSize,
         height: height,

package/lib/es/tree/interface.d.ts

@@ -118,3 +118,7 @@ export interface NodeListState {
     cachedMotionKeys?: Set<string>;
     cachedData?: FlattenNode[];
 }
+export interface ScrollData {
+    key: string;
+    align?: 'center' | 'start' | 'end' | 'smart' | 'auto';
+}

package/lib/es/tree/treeNode.d.ts

@@ -55,7 +55,10 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     isLeaf: () => boolean;
     isDisabled: () => boolean;
     renderArrow(): JSX.Element;
-    renderCheckbox(): JSX.Element;
+    renderCheckbox(options: {
+        label: React.ReactNode;
+        icon: React.ReactNode;
+    }): JSX.Element;
     renderIcon(): any;
     renderEmptyNode(): JSX.Element;
     renderRealLabel: () => any;

package/lib/es/tree/treeNode.js

@@ -300,7 +300,11 @@ export default class TreeNode extends PureComponent {
     });
   }
 
-  renderCheckbox() {
+  renderCheckbox(options) {
+    const {
+      label,
+      icon
+    } = options;
     const {
       checked,
       halfChecked,
@@ -317,7 +321,7 @@ export default class TreeNode extends PureComponent {
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)
-    }));
+    }, icon, label));
   }
 
   renderIcon() {
@@ -487,6 +491,8 @@ export default class TreeNode extends PureComponent {
     const setsize = _get(rest, ['data', 'children', 'length']);
 
     const posinset = _isString(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
+    const label = this.renderRealLabel();
+    const icon = this.renderIcon();
     return /*#__PURE__*/React.createElement("li", _Object$assign({
       className: nodeCls,
       role: "treeitem",
@@ -506,9 +512,12 @@ export default class TreeNode extends PureComponent {
       style: style
     }, dragProps), this.renderArrow(), /*#__PURE__*/React.createElement("span", {
       className: labelCls
-    }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/React.createElement("span", {
+    }, multiple ? this.renderCheckbox({
+      label,
+      icon
+    }) : null, !multiple && icon, !multiple && /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixcls, "-label-text")
-    }, this.renderRealLabel())));
+    }, label)));
   }
 
 }

package/locale/interface.ts

@@ -149,4 +149,7 @@ export interface Locale {
         total: string;
         selected: string;
     };
+    Form: {
+        optional: string;
+    }
 }

package/locale/source/ar.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'مجموع ${total} العناصر',
         selected: '${total} العناصر المحدد',
     },
+    Form: {
+        optional: '(اختياري)',
+    },
 };
 
 // [i18n-Arabic]

package/locale/source/de.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Gesamt ${total} Artikel',
         selected: '${total} ausgewählte Artikel',
     },
+    Form: {
+        optional: '(Optional)',
+    },
 };
 
 // [i18n-German]

package/locale/source/en_GB.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Total ${total} items',
         selected: '${total} items selected',
     },
+    Form: {
+        optional: '(optional)',
+    },
 };
 
 // [i18n-English(GB)]

package/locale/source/en_US.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Total ${total} items',
         selected: '${total} items selected',
     },
+    Form: {
+        optional: '(optional)',
+    },
 };
 
 // [i18n-English(US)]

package/locale/source/es.ts

@@ -155,6 +155,9 @@ const locale: Locale = {
         total: 'Total ${total} objetos',
         selected: '${total} objetos seleccionados',
     },
+    Form: {
+        optional: '(opcional)',
+    },
 };
 
 export default locale;

package/locale/source/fr.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Totale ${total} articles',
         selected: '${total} articles sélectionnés',
     },
+    Form: {
+        optional: '(optionnel)',
+    },
 };
 
 // [i18n-French]

package/locale/source/id_ID.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Total ${total} proyek',
         selected: '${total} item dipilih',
     },
+    Form: {
+        optional: '(opsional)',
+    },
 };
 
 // [i18n-Indonesia(ID)]

package/locale/source/it.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Totale ${total} elementi',
         selected: '${total} elementi selezionati',
     },
+    Form: {
+        optional: '(opzionale)',
+    },
 };
 
 // [i18n-Italian]

package/locale/source/ja_JP.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '合計 ${total} アイテム',
         selected: '選択済み ${total} アイテム',
     },
+    Form: {
+        optional: '(オプション)',
+    },
 };
 
 // [i18n-Japan]

package/locale/source/ko_KR.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '총 {total} 개 항목',
         selected: '선택된 {Total} 개 항목',
     },
+    Form: {
+        optional: '(선택 과목)',
+    },
 };
 
 // [i18n-Korea]

package/locale/source/ms_MY.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Jumlah ${total} item',
         selected: '${total} projek dipilih',
     },
+    Form: {
+        optional: '(pilihan)',
+    },
 };
 
 // [i18n-Malaysia(MY)]

package/locale/source/pt_BR.ts

@@ -158,6 +158,9 @@ const local: Locale = {
         total: 'Total de ${total} itens',
         selected: '${total} itens selecionados',
     },
+    Form: {
+        optional: '(opcional)',
+    },
 };
 
 // 葡萄牙语

package/locale/source/ru_RU.ts

@@ -153,6 +153,9 @@ const local: Locale = {
         total: 'Всего ${total} элементов',
         selected: 'Выбрано ${total} элементов',
     },
+    Form: {
+        optional: '(по желанию)',
+    },
 };
 
 // [i18n-Russia] 俄罗斯语

package/locale/source/th_TH.ts

@@ -154,6 +154,9 @@ const local: Locale = {
         total: 'รวม ${total} รายการ',
         selected: 'เลือก ${total} รายการ',
     },
+    Form: {
+        optional: '(ไม่จำเป็น)',
+    },
 };
 
 // [i18n-Thai]

package/locale/source/tr_TR.ts

@@ -149,7 +149,10 @@ const local: Locale = {
         clearSelectAll: 'Tümünün seçimini kaldır',
         total: 'Toplam ${total} öğe',
         selected: '${total} öğe seçildi'
-    }
+    },
+    Form: {
+        optional: '(isteğe bağlı)',
+    },
 };
 
 // [i18n-Turkish] 

package/locale/source/vi_VN.ts

@@ -153,6 +153,9 @@ const local: Locale = {
         total: 'Tổng số ${total} mặt hàng',
         selected: '${total} mục được chọn',
     },
+    Form: {
+        optional: '(không bắt buộc)',
+    },
 };
 
 // [i18n-Vietnam] 越南语

package/locale/source/zh_CN.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '共 ${total} 项',
         selected: '已选 ${total} 项',
     },
+    Form: {
+        optional: '（可选）',
+    },
 };
 
 // 中文

package/locale/source/zh_TW.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '共 ${total} 項',
         selected: '已選 ${total} 項',
     },
+    Form: {
+        optional: '（可選）',
+    },
 };
 
 // 中文

package/modal/Modal.tsx

@@ -347,12 +347,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         let style = styleFromProps;
         const maskStyle = maskStyleFromProps;
         const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
-        if (this.props.centered) {
-            style = {
-                transform: 'translateY(-50%)',
-                top: '50%', ...style,
-            };
-        }
         let wrapperStyle: {
             zIndex?: CSSProperties['zIndex'];
             position?: CSSProperties['position'];

package/modal/ModalContent.tsx

@@ -318,7 +318,10 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
                 <div
                     role="none"
                     tabIndex={-1}
-                    className={`${cssClasses.DIALOG}-wrap`}
+                    className={cls({
+                        [`${cssClasses.DIALOG}-wrap`]:true,
+                        [`${cssClasses.DIALOG}-wrap-center`]:this.props.centered
+                    })}
                     onClick={maskClosable ? this.onMaskClick : null}
                     onMouseUp={maskClosable ? this.onMaskMouseUp : null}
                 >

package/modal/__test__/modal.test.js

@@ -287,7 +287,7 @@ describe('modal', () => {
     it('centered without motion', () => {
         let com = getModal({ centered: true, visible: true, motion: false });
         let modal = mount(com, { attachTo: document.getElementById('container') });
-        expect(modal.find(`div.${BASE_CLASS_PREFIX}-modal`)).toHaveStyle({ transform: 'translateY(-50%)', top: '50%' });
+        expect(modal.find(`div.${BASE_CLASS_PREFIX}-modal-wrap`)).toHaveClassName(`${BASE_CLASS_PREFIX}-modal-wrap-center`)
     });
 
     it('keepDOM', () => {