@douyinfe/semi-ui 2.4.0 → 2.5.0

package/lib/es/select/index.js

@@ -285,11 +285,19 @@ class Select extends BaseComponent {
           el.focus();
         } catch (error) {}
       },
-      updateScrollTop: () => {
-        var _context9, _context10;
+      updateScrollTop: index => {
+        var _context10, _context11;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector(_concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, prefixcls, "-option-selected"));
+        let optionClassName = ".".concat(prefixcls, "-option-selected");
+
+        if (index !== undefined) {
+          var _context9;
+
+          optionClassName = _concatInstanceProperty(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+        }
+
+        let destNode = document.querySelector(_concatInstanceProperty(_context10 = _concatInstanceProperty(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
 
         if (_Array$isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -317,11 +325,11 @@ class Select extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context12, _context13;
 
-    const prevChildrenKeys = _mapInstanceProperty(_context11 = React.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const prevChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(prevProps.children)).call(_context12, child => child.key);
 
-    const nowChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const nowChildrenKeys = _mapInstanceProperty(_context13 = React.Children.toArray(this.props.children)).call(_context13, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -515,34 +523,30 @@ class Select extends BaseComponent {
     this.foundation.handleOptionMouseEnter(optionIndex);
   }
 
-  renderWithGroup(visibileOptions) {
+  renderWithGroup(visibleOptions) {
     const content = [];
     const groupStatus = new _Map();
 
-    _forEachInstanceProperty(visibileOptions).call(visibileOptions, (option, optionIndex) => {
+    _forEachInstanceProperty(visibleOptions).call(visibleOptions, (option, optionIndex) => {
       const parentGroup = option._parentGroup;
       const optionContent = this.renderOption(option, optionIndex);
 
-      if (parentGroup && groupStatus.has(parentGroup.label)) {
-        // group content already insert
-        content.push(optionContent);
-      } else if (parentGroup) {
+      if (parentGroup && !groupStatus.has(parentGroup.label)) {
+        // when use with OptionGroup and group content not already insert
         const groupContent = /*#__PURE__*/React.createElement(OptionGroup, _Object$assign({}, parentGroup, {
           key: parentGroup.label
         }));
         groupStatus.set(parentGroup.label, true);
         content.push(groupContent);
-        content.push(optionContent);
-      } else {
-        // when not use with OptionGroup
-        content.push(optionContent);
       }
+
+      content.push(optionContent);
     });
 
     return content;
   }
 
-  renderVirtualizeList(visibileOptions) {
+  renderVirtualizeList(visibleOptions) {
     const {
       virtualize
     } = this.props;
@@ -557,10 +561,10 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(List, {
       ref: this.virtualizeListRef,
       height: height || numbers.LIST_HEIGHT,
-      itemCount: visibileOptions.length,
+      itemCount: visibleOptions.length,
       itemSize: itemSize,
       itemData: {
-        visibileOptions,
+        visibleOptions,
         renderOption: this.renderOption
       },
       width: width || '100%',
@@ -571,7 +575,7 @@ class Select extends BaseComponent {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -591,12 +595,12 @@ class Select extends BaseComponent {
       multiple
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
-    const visibileOptions = _filterInstanceProperty(options).call(options, item => item._show);
+    const visibleOptions = _filterInstanceProperty(options).call(options, item => item._show);
 
-    let listContent = this.renderWithGroup(visibileOptions);
+    let listContent = this.renderWithGroup(visibleOptions);
 
     if (virtualize) {
-      listContent = this.renderVirtualizeList(visibileOptions);
+      listContent = this.renderVirtualizeList(visibleOptions);
     }
 
     const style = _Object$assign({
@@ -609,7 +613,7 @@ class Select extends BaseComponent {
     });
     const isEmpty = !options.length || !_someInstanceProperty(options).call(options, item => item._show);
     return /*#__PURE__*/React.createElement("div", {
-      id: _concatInstanceProperty(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
+      id: _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/React.createElement("div", {
@@ -840,7 +844,7 @@ class Select extends BaseComponent {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15;
 
     const {
       disabled,
@@ -924,7 +928,7 @@ class Select extends BaseComponent {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+      "aria-controls": _concatInstanceProperty(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],

package/lib/es/select/option.js

@@ -36,9 +36,9 @@ class Option extends PureComponent {
     const {
       props
     } = this;
-    const isDisbled = props.disabled;
+    const isDisabled = props.disabled;
 
-    if (!isDisbled) {
+    if (!isDisabled) {
       props.onSelect(_Object$assign(_Object$assign({}, rest), {
         value,
         label: label || children

package/lib/es/select/virtualRow.js

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

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

@@ -298,7 +298,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showSizeChanger?: boolean;
         showQuickJumper?: boolean;
         popoverZIndex?: number;
-        popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
+        popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         hideOnSinglePage?: boolean;
         hoverShowPageSelect?: boolean;
     };

package/lib/es/table/Table.js

@@ -505,10 +505,17 @@ class Table extends BaseComponent {
           titleArr.push(sorter);
         }
 
+        const stateFilteredValue = _get(curQuery, 'filteredValue');
+
+        const defaultFilteredValue = _get(curQuery, 'defaultFilteredValue');
+
+        const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
+
         if (_Array$isArray(column.filters) && column.filters.length || /*#__PURE__*/isValidElement(column.filterDropdown)) {
           const filter = /*#__PURE__*/React.createElement(ColumnFilter, _Object$assign({
             key: strings.DEFAULT_KEY_COLUMN_FILTER
           }, curQuery, {
+            filteredValue: filteredValue,
             onFilterDropdownVisibleChange: visible => _this.foundation.toggleShowFilter(dataIndex, visible),
             onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
           }));
@@ -1097,11 +1104,12 @@ class Table extends BaseComponent {
       willUpdateStates.cachedColumns = props.columns;
       willUpdateStates.cachedChildren = null;
     } else if (props.children && props.children !== state.cachedChildren) {
-      const newFlattenColumns = flattenColumns(getColumns(props.children));
+      const newNestedColumns = getColumns(props.children);
+      const newFlattenColumns = flattenColumns(newNestedColumns);
       const columns = mergeColumns(state.queries, newFlattenColumns, null, false);
       willUpdateStates.flattenColumns = newFlattenColumns;
       willUpdateStates.queries = [...columns];
-      willUpdateStates.cachedColumns = [...columns];
+      willUpdateStates.cachedColumns = [...newNestedColumns];
       willUpdateStates.cachedChildren = props.children;
     } // Update controlled selection column
 

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

@@ -63,6 +63,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     className?: string;
     colSpan?: number;
     dataIndex?: string;
+    defaultFilteredValue?: any[];
     defaultSortOrder?: SortOrder;
     filterChildrenRecord?: boolean;
     filterDropdown?: React.ReactNode;

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

@@ -52,7 +52,7 @@ export interface TabBarProps {
 export interface TabPaneProps {
     className?: string;
     disabled?: boolean;
-    icon?: string;
+    icon?: ReactNode;
     itemKey?: string;
     style?: CSSProperties;
     tab?: ReactNode;

package/lib/es/timePicker/TimePicker.js

@@ -296,6 +296,7 @@ export default class TimePicker extends BaseComponent {
       panelFooter,
       rangeSeparator,
       onOpenChange,
+      onChangeWithDateFirst,
       popupClassName: propPopupClassName,
       hideDisabledOptions,
       use12Hours,
@@ -307,7 +308,7 @@ export default class TimePicker extends BaseComponent {
       motion,
       autoAdjustOverflow
     } = _a,
-          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
+          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
 
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();

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

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

package/lib/es/tooltip/index.js

@@ -443,11 +443,15 @@ export default class Tooltip extends BaseComponent {
           }
         };
 
-        document.addEventListener('click', this.clickOutsideHandler, false);
+        document.addEventListener('mousedown', this.clickOutsideHandler, {
+          capture: true
+        });
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('click', this.clickOutsideHandler, false);
+          document.removeEventListener('mousedown', this.clickOutsideHandler, {
+            capture: true
+          });
           this.clickOutsideHandler = null;
         }
       },

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

@@ -70,6 +70,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
         onDrop: PropTypes.Requireable<(...args: any[]) => any>;
         labelEllipsis: PropTypes.Requireable<boolean>;
+        checkRelation: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
@@ -90,6 +91,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         disableStrictly: boolean;
         draggable: boolean;
         autoExpandWhenDragEnter: boolean;
+        checkRelation: string;
     };
     static TreeNode: typeof TreeNode;
     inputRef: React.RefObject<typeof Input>;

package/lib/es/tree/index.js

@@ -177,6 +177,7 @@ class Tree extends BaseComponent {
       selectedKeys: [],
       checkedKeys: new _Set(),
       halfCheckedKeys: new _Set(),
+      realCheckedKeys: new _Set([]),
       motionKeys: new _Set([]),
       motionType: 'hide',
       expandedKeys: new _Set(props.expandedKeys),
@@ -387,12 +388,16 @@ class Tree extends BaseComponent {
       }
 
       if (checkedKeyValues) {
-        const {
-          checkedKeys,
-          halfCheckedKeys
-        } = calcCheckedKeys(checkedKeyValues, keyEntities);
-        newState.checkedKeys = checkedKeys;
-        newState.halfCheckedKeys = halfCheckedKeys;
+        if (props.checkRelation === 'unRelated') {
+          newState.realCheckedKeys = new _Set(checkedKeyValues);
+        } else if (props.checkRelation === 'related') {
+          const {
+            checkedKeys,
+            halfCheckedKeys
+          } = calcCheckedKeys(checkedKeyValues, keyEntities);
+          newState.checkedKeys = checkedKeys;
+          newState.halfCheckedKeys = halfCheckedKeys;
+        }
       }
     } // update loadedKeys
 
@@ -402,7 +407,7 @@ class Tree extends BaseComponent {
     } // update disableStrictly
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -723,6 +728,7 @@ Tree.propTypes = {
   onDragStart: PropTypes.func,
   onDrop: PropTypes.func,
   labelEllipsis: PropTypes.bool,
+  checkRelation: PropTypes.string,
   'aria-label': PropTypes.string
 };
 Tree.defaultProps = {
@@ -742,7 +748,8 @@ Tree.defaultProps = {
   expandAction: false,
   disableStrictly: false,
   draggable: false,
-  autoExpandWhenDragEnter: true
+  autoExpandWhenDragEnter: true,
+  checkRelation: 'related'
 };
 Tree.TreeNode = TreeNode;
 export default Tree;

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

@@ -168,6 +168,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         optionListStyle: PropTypes.Requireable<object>;
         searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
+        checkRelation: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<TreeSelectProps>;
@@ -192,6 +193,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     removeTag: (removedKey: TreeNodeData['key']) => void;
     handleClick: (e: React.MouseEvent) => void;
     handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    hasValue: () => boolean;
     showClearBtn: () => boolean;
     renderTagList: () => React.ReactNode[];
     /**

package/lib/es/treeSelect/index.js

@@ -115,34 +115,52 @@ class TreeSelect extends BaseComponent {
       this.foundation.handleSelectionEnterPress(e);
     };
 
-    this.showClearBtn = () => {
+    this.hasValue = () => {
       const {
-        searchPosition
+        multiple,
+        checkRelation
       } = this.props;
       const {
-        inputValue
+        realCheckedKeys,
+        checkedKeys,
+        selectedKeys
       } = this.state;
-      const triggerSearchHasInputValue = searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue;
+      let hasValue = false;
+
+      if (multiple) {
+        if (checkRelation === 'related') {
+          hasValue = Boolean(checkedKeys.size);
+        } else if (checkRelation === 'unRelated') {
+          hasValue = Boolean(realCheckedKeys.size);
+        }
+      } else {
+        hasValue = Boolean(selectedKeys.length);
+      }
+
+      return hasValue;
+    };
+
+    this.showClearBtn = () => {
       const {
         showClear,
         disabled,
-        multiple
+        searchPosition
       } = this.props;
       const {
-        selectedKeys,
-        checkedKeys,
+        inputValue,
         isOpen,
         isHovering
       } = this.state;
-      const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
-      return showClear && (hasValue || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
+      const triggerSearchHasInputValue = searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue;
+      return showClear && (this.hasValue() || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
     };
 
     this.renderTagList = () => {
       const {
         checkedKeys,
         keyEntities,
-        disabledKeys
+        disabledKeys,
+        realCheckedKeys
       } = this.state;
       const {
         treeNodeLabelProp,
@@ -150,13 +168,21 @@ class TreeSelect extends BaseComponent {
         disabled,
         disableStrictly,
         size,
+        checkRelation,
         renderSelectedItem: propRenderSelectedItem
       } = this.props;
       const renderSelectedItem = _isFunction(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
         isRenderInTag: true,
         content: _get(item, treeNodeLabelProp, null)
       });
-      const renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
+      let renderKeys = [];
+
+      if (checkRelation === 'related') {
+        renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
+      } else if (checkRelation === 'unRelated') {
+        renderKeys = [...realCheckedKeys];
+      }
+
       const tagList = []; // eslint-disable-next-line @typescript-eslint/no-shadow
 
       _forEachInstanceProperty(renderKeys).call(renderKeys, key => {
@@ -245,11 +271,6 @@ class TreeSelect extends BaseComponent {
         searchPosition,
         filterTreeNode
       } = this.props;
-      const {
-        selectedKeys,
-        checkedKeys
-      } = this.state;
-      const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
       const isTriggerPositionSearch = filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER; // searchPosition = trigger
 
       if (isTriggerPositionSearch) {
@@ -257,7 +278,7 @@ class TreeSelect extends BaseComponent {
       } // searchPosition = dropdown and single seleciton
 
 
-      if (!multiple || !hasValue) {
+      if (!multiple || !this.hasValue()) {
         const renderText = this.foundation.getRenderTextInSingle();
         const spanCls = cls({
           ["".concat(prefixcls, "-selection-placeholder")]: !renderText
@@ -514,14 +535,23 @@ class TreeSelect extends BaseComponent {
         size,
         searchAutoFocus,
         placeholder,
-        maxTagCount
+        maxTagCount,
+        checkRelation
       } = this.props;
       const {
         keyEntities,
         checkedKeys,
-        inputValue
+        inputValue,
+        realCheckedKeys
       } = this.state;
-      const keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
+      let keyList = [];
+
+      if (checkRelation === 'related') {
+        keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
+      } else if (checkRelation === 'unRelated') {
+        keyList = [...realCheckedKeys];
+      }
+
       return /*#__PURE__*/React.createElement(TagInput, {
         maxTagCount: maxTagCount,
         disabled: disabled,
@@ -846,6 +876,7 @@ class TreeSelect extends BaseComponent {
       selectedKeys: [],
       checkedKeys: new _Set(),
       halfCheckedKeys: new _Set(),
+      realCheckedKeys: new _Set([]),
       disabledKeys: new _Set(),
       motionKeys: new _Set([]),
       motionType: 'hide',
@@ -966,12 +997,16 @@ class TreeSelect extends BaseComponent {
       }
 
       if (checkedKeyValues) {
-        const {
-          checkedKeys,
-          halfCheckedKeys
-        } = calcCheckedKeys(checkedKeyValues, keyEntities);
-        newState.checkedKeys = checkedKeys;
-        newState.halfCheckedKeys = halfCheckedKeys;
+        if (props.checkRelation === 'unRelated') {
+          newState.realCheckedKeys = new _Set(checkedKeyValues);
+        } else if (props.checkRelation === 'related') {
+          const {
+            checkedKeys,
+            halfCheckedKeys
+          } = calcCheckedKeys(checkedKeyValues, keyEntities);
+          newState.checkedKeys = checkedKeys;
+          newState.halfCheckedKeys = halfCheckedKeys;
+        }
       }
     } // loadedKeys
 
@@ -986,7 +1021,7 @@ class TreeSelect extends BaseComponent {
     } // ================ disableStrictly =================
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -1252,6 +1287,7 @@ TreeSelect.propTypes = {
   optionListStyle: PropTypes.object,
   searchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   renderSelectedItem: PropTypes.func,
+  checkRelation: PropTypes.string,
   'aria-label': PropTypes.string
 };
 TreeSelect.defaultProps = {
@@ -1280,6 +1316,7 @@ TreeSelect.defaultProps = {
   expandAction: false,
   clickToHide: true,
   searchAutoFocus: false,
+  checkRelation: 'related',
   'aria-label': 'TreeSelect'
 };
 export default TreeSelect;