@douyinfe/semi-ui 2.4.1 → 2.5.1

package/dist/umd/semi-ui.js

@@ -24257,6 +24257,19 @@ class foundation_Tooltip extends foundation {
         translateX = -1;
         break;
 
+      case 'leftBottomOver':
+        left = triggerRect.left;
+        top = triggerRect.bottom;
+        translateY = -1;
+        break;
+
+      case 'rightBottomOver':
+        left = triggerRect.right;
+        top = triggerRect.bottom;
+        translateX = -1;
+        translateY = -1;
+        break;
+
       default:
         break;
     }
@@ -24380,12 +24393,16 @@ class foundation_Tooltip extends foundation {
 
       const shouldReverseTop = clientTop < wrapperRect.height + spacing && restClientBottom > wrapperRect.height + spacing;
       const shouldReverseLeft = clientLeft < wrapperRect.width + spacing && restClientRight > wrapperRect.width + spacing;
-      const sholdReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
+      const shouldReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
       const shouldReverseRight = restClientRight < wrapperRect.width + spacing && clientLeft > wrapperRect.width + spacing;
+      const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
+      const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
       const shouldReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
       const shouldReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
       const shouldReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
       const shouldReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
+      const shouldReverseLeftOver = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
+      const shouldReverseRightOver = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
 
       switch (position) {
         case 'top':
@@ -24447,14 +24464,14 @@ class foundation_Tooltip extends foundation {
           break;
 
         case 'bottom':
-          if (sholdReverseBottom) {
+          if (shouldReverseBottom) {
             position = this._reversePos(position, true);
           }
 
           break;
 
         case 'bottomLeft':
-          if (sholdReverseBottom) {
+          if (shouldReverseBottom) {
             position = this._reversePos(position, true);
           }
 
@@ -24465,7 +24482,7 @@ class foundation_Tooltip extends foundation {
           break;
 
         case 'bottomRight':
-          if (sholdReverseBottom) {
+          if (shouldReverseBottom) {
             position = this._reversePos(position, true);
           }
 
@@ -24504,6 +24521,50 @@ class foundation_Tooltip extends foundation {
 
           break;
 
+        case 'leftTopOver':
+          if (shouldReverseTopOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseLeftOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
+        case 'leftBottomOver':
+          if (shouldReverseBottomOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseLeftOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
+        case 'rightTopOver':
+          if (shouldReverseTopOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseRightOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
+        case 'rightBottomOver':
+          if (shouldReverseBottomOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseRightOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
         default:
           break;
       }
@@ -24533,7 +24594,7 @@ const tooltip_constants_cssClasses = {
   PREFIX: "".concat(BASE_CLASS_PREFIX, "-tooltip")
 };
 const tooltip_constants_strings = {
-  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],
+  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver', 'leftBottomOver', 'rightBottomOver'],
   TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
   STATUS_DISABLED: 'disabled',
   STATUS_LOADING: 'loading'
@@ -26834,7 +26895,9 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
         } = _ref;
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", assign_default()({
           className: classnames_default()(className, animateCls),
-          style: assign_default()(assign_default()(assign_default()({}, animateStyle), {
+          style: assign_default()(assign_default()(assign_default()({
+            visibility: 'visible'
+          }, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
@@ -26846,7 +26909,9 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
         className: className
       }, portalEventSet, {
         "x-placement": placement,
-        style: style
+        style: assign_default()({
+          visibility: motion ? undefined : 'visible'
+        }, style)
       }), content, icon);
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(_portal, {
         getPopupContainer: this.props.getPopupContainer,
@@ -27093,11 +27158,15 @@ class tooltip_Tooltip extends baseComponent_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;
         }
       },
@@ -33915,9 +33984,9 @@ class option_Option extends external_root_React_commonjs2_react_commonjs_react_a
     const {
       props
     } = this;
-    const isDisbled = props.disabled;
+    const isDisabled = props.disabled;
 
-    if (!isDisbled) {
+    if (!isDisabled) {
       props.onSelect(assign_default()(assign_default()({}, rest), {
         value,
         label: label || children
@@ -42911,6 +42980,10 @@ cardGroup_CardGroup.defaultProps = {
 var lodash_flatten = __webpack_require__("1xil");
 var flatten_default = /*#__PURE__*/__webpack_require__.n(lodash_flatten);
 
+// EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isSet.js
+var isSet = __webpack_require__("/iLo");
+var isSet_default = /*#__PURE__*/__webpack_require__.n(isSet);
+
 // EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/@babel/runtime-corejs3/core-js-stable/promise.js
 var promise = __webpack_require__("kNzS");
 var promise_default = /*#__PURE__*/__webpack_require__.n(promise);
@@ -46868,6 +46941,7 @@ tagInput_TagInput.defaultProps = {
 
 
 
+
 
 
 const cascader_prefixcls = cascader_constants_cssClasses.PREFIX;
@@ -47560,6 +47634,10 @@ class cascader_Cascader extends baseComponent_BaseComponent {
           realKeys = formatKeys;
         }
 
+        if (isSet_default()(realKeys)) {
+          realKeys = [...realKeys];
+        }
+
         const calRes = calcCheckedKeys(flatten_default()(realKeys), keyEntities);
         const checkedKeys = new set_default.a(calRes.checkedKeys);
         const halfCheckedKeys = new set_default.a(calRes.halfCheckedKeys); // disableStrictly
@@ -52710,6 +52788,24 @@ function getDefaultFormatTokenByType(type) {
 class foundation_DatePickerFoundation extends foundation {
   constructor(adapter) {
     super(assign_default()({}, adapter));
+    /**
+     * clear range input focus when open is controlled
+     * fixed github 1375
+     */
+
+    this.clearRangeInputFocus = () => {
+      const {
+        type
+      } = this._adapter.getProps();
+
+      const {
+        rangeInputFocus
+      } = this._adapter.getStates();
+
+      if (type === 'dateTimeRange' && rangeInputFocus) {
+        this._adapter.setRangeInputFocus(false);
+      }
+    };
 
     this.getMergedMotion = motion => {
       const mergedMotion = typeof motion === 'undefined' || motion ? assign_default()(assign_default()({}, motion), {
@@ -54450,10 +54546,6 @@ function addMonths(dirtyDate, dirtyAmount) {
     return date;
   }
 }
-// EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isSet.js
-var isSet = __webpack_require__("/iLo");
-var isSet_default = /*#__PURE__*/__webpack_require__.n(isSet);
-
 // CONCATENATED MODULE: /home/runner/work/semi-design/semi-design/node_modules/date-fns/esm/differenceInCalendarMonths/index.js
 
 
@@ -59810,6 +59902,10 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 
@@ -72358,8 +72454,9 @@ class foundation_SelectFoundation extends foundation {
     } // console.log('new:' + index);
 
 
-    this._adapter.updateFocusIndex(index); // TODO requires scrollIntoView
+    this._adapter.updateFocusIndex(index);
 
+    this._adapter.updateScrollTop(index);
   }
 
   _handleArrowKeyDown(offset) {
@@ -72921,9 +73018,9 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibileOptions
+    visibleOptions
   } = data;
-  const option = visibileOptions[index];
+  const option = visibleOptions[index];
   return data.renderOption(option, index, style);
 };
 
@@ -73261,11 +73358,19 @@ class select_Select extends baseComponent_BaseComponent {
           el.focus();
         } catch (error) {}
       },
-      updateScrollTop: () => {
-        var _context9, _context10;
+      updateScrollTop: index => {
+        var _context10, _context11;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector(concat_default()(_context9 = concat_default()(_context10 = "#".concat(select_prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, select_prefixcls, "-option-selected"));
+        let optionClassName = ".".concat(select_prefixcls, "-option-selected");
+
+        if (index !== undefined) {
+          var _context9;
+
+          optionClassName = concat_default()(_context9 = ".".concat(select_prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+        }
+
+        let destNode = document.querySelector(concat_default()(_context10 = concat_default()(_context11 = "#".concat(select_prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
 
         if (is_array_default()(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -73293,11 +73398,11 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context12, _context13;
 
-    const prevChildrenKeys = map_default()(_context11 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const prevChildrenKeys = map_default()(_context12 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(prevProps.children)).call(_context12, child => child.key);
 
-    const nowChildrenKeys = map_default()(_context12 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const nowChildrenKeys = map_default()(_context13 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(this.props.children)).call(_context13, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -73491,34 +73596,30 @@ class select_Select extends baseComponent_BaseComponent {
     this.foundation.handleOptionMouseEnter(optionIndex);
   }
 
-  renderWithGroup(visibileOptions) {
+  renderWithGroup(visibleOptions) {
     const content = [];
     const groupStatus = new core_js_stable_map_default.a();
 
-    for_each_default()(visibileOptions).call(visibileOptions, (option, optionIndex) => {
+    for_each_default()(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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(optionGroup, assign_default()({}, 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;
@@ -73533,10 +73634,10 @@ class select_Select extends baseComponent_BaseComponent {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(FixedSizeList, {
       ref: this.virtualizeListRef,
       height: height || select_constants_numbers.LIST_HEIGHT,
-      itemCount: visibileOptions.length,
+      itemCount: visibleOptions.length,
       itemSize: itemSize,
       itemData: {
-        visibileOptions,
+        visibleOptions,
         renderOption: this.renderOption
       },
       width: width || '100%',
@@ -73547,7 +73648,7 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -73567,12 +73668,12 @@ class select_Select extends baseComponent_BaseComponent {
       multiple
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
-    const visibileOptions = filter_default()(options).call(options, item => item._show);
+    const visibleOptions = filter_default()(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 = assign_default()({
@@ -73585,7 +73686,7 @@ class select_Select extends baseComponent_BaseComponent {
     });
     const isEmpty = !options.length || !some_default()(options).call(options, item => item._show);
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      id: concat_default()(_context13 = "".concat(select_prefixcls, "-")).call(_context13, this.selectOptionListID),
+      id: concat_default()(_context14 = "".concat(select_prefixcls, "-")).call(_context14, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
@@ -73816,7 +73917,7 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15;
 
     const {
       disabled,
@@ -73900,7 +74001,7 @@ class select_Select extends baseComponent_BaseComponent {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": concat_default()(_context14 = "".concat(select_prefixcls, "-")).call(_context14, this.selectOptionListID),
+      "aria-controls": concat_default()(_context15 = "".concat(select_prefixcls, "-")).call(_context15, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],
@@ -77388,7 +77489,7 @@ class foundation_SliderFoundation extends foundation {
 
       const scroll = node => regex.test(style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x'));
 
-      const scrollParent = node => !node || node === document.body ? document.body : scroll(node) ? node : scrollParent(node.parentNode);
+      const scrollParent = node => !node || node === document.body || !(node instanceof Element) ? document.body : scroll(node) ? node : scrollParent(node.parentNode);
 
       return scrollParent(el);
     };
@@ -77512,7 +77613,7 @@ class foundation_SliderFoundation extends foundation {
       }
 
       if (step !== 1) {
-        // Find nearest step point 
+        // Find nearest step point
         stepValue = Math.round(stepValue / step) * step;
       }
 
@@ -80149,7 +80250,10 @@ function assignColumnKeys(columns) {
     if (column.key == null) {
       var _context4;
 
-      column.key = concat_default()(_context4 = "".concat(level, "-")).call(_context4, index);
+      // if user give column a dataIndex, use it for backup
+      const _index = column.dataIndex || index;
+
+      column.key = concat_default()(_context4 = "".concat(level, "-")).call(_context4, _index);
     }
 
     if (is_array_default()(column[childrenColumnName]) && column[childrenColumnName].length) {
@@ -80710,7 +80814,17 @@ class foundation_TableFoundation extends foundation {
 
 
   getFilteredSortedDataSource(dataSource, queries) {
-    const filteredDataSource = this.filterDataSource(dataSource, filter_default()(queries).call(queries, query => isFunction_default()(query.onFilter) && is_array_default()(query.filters) && query.filters.length && is_array_default()(query.filteredValue) && query.filteredValue.length));
+    const filteredDataSource = this.filterDataSource(dataSource, filter_default()(queries).call(queries, query => {
+      /**
+       * 这里无需判断 filteredValue 是否为数组，初始化时它是 `undefined`，点击选择空时为 `[]`
+       * 初始化时我们应该用 `defaultFilteredValue`，点击后我们应该用 `filteredValue`
+       *
+       * There is no need to judge whether `filteredValue` is an array here, because it is `undefined` when initialized, and `[]` when you click to select empty
+       * When initializing we should use `defaultFilteredValue`, after clicking we should use `filteredValue`
+       */
+      const currentFilteredValue = query.filteredValue ? query.filteredValue : query.defaultFilteredValue;
+      return isFunction_default()(query.onFilter) && is_array_default()(query.filters) && query.filters.length && is_array_default()(currentFilteredValue) && currentFilteredValue.length;
+    }));
     const sortedDataSource = this.sortDataSource(filteredDataSource, filter_default()(queries).call(queries, query => query && isFunction_default()(query.sorter)));
     return sortedDataSource;
   }
@@ -80869,10 +80983,12 @@ class foundation_TableFoundation extends foundation {
       const {
         onFilter,
         filteredValue,
-        filterChildrenRecord
+        filterChildrenRecord,
+        defaultFilteredValue
       } = filterObj;
+      const currentFilteredValue = is_array_default()(filteredValue) ? filteredValue : defaultFilteredValue;
 
-      if (typeof onFilter === 'function' && is_array_default()(filteredValue) && filteredValue.length) {
+      if (typeof onFilter === 'function' && is_array_default()(currentFilteredValue) && currentFilteredValue.length) {
         hasValidFilters = true;
 
         if (filteredData === null) {
@@ -80882,7 +80998,7 @@ class foundation_TableFoundation extends foundation {
           filteredData = new core_js_stable_map_default.a();
         }
 
-        each_default()(filteredValue, value => {
+        each_default()(currentFilteredValue, value => {
           each_default()(dataSource, record => {
             const childrenRecords = get_default()(record, childrenRecordName);
 
@@ -85692,10 +85808,17 @@ class Table_Table extends baseComponent_BaseComponent {
           titleArr.push(sorter);
         }
 
+        const stateFilteredValue = get_default()(curQuery, 'filteredValue');
+
+        const defaultFilteredValue = get_default()(curQuery, 'defaultFilteredValue');
+
+        const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
+
         if (is_array_default()(column.filters) && column.filters.length || /*#__PURE__*/Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["isValidElement"])(column.filterDropdown)) {
           const filter = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(ColumnFilter, assign_default()({
             key: table_constants_strings.DEFAULT_KEY_COLUMN_FILTER
           }, curQuery, {
+            filteredValue: filteredValue,
             onFilterDropdownVisibleChange: visible => _this.foundation.toggleShowFilter(dataIndex, visible),
             onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
           }));
@@ -86284,11 +86407,12 @@ class Table_Table extends baseComponent_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
 
@@ -90552,6 +90676,7 @@ class foundation_TreeFoundation extends foundation {
       selectedKeys = [],
       checkedKeys = new set_default.a([]),
       halfCheckedKeys = new set_default.a([]),
+      realCheckedKeys = new set_default.a([]),
       keyEntities = {},
       filteredKeys = new set_default.a([]),
       inputValue = '',
@@ -90561,13 +90686,26 @@ class foundation_TreeFoundation extends foundation {
       disabledKeys = new set_default.a([])
     } = this.getStates();
     const {
-      treeNodeFilterProp
+      treeNodeFilterProp,
+      checkRelation
     } = this.getProps();
     const entity = keyEntities[key];
     const notExist = !entity;
 
     if (notExist) {
       return null;
+    } // if checkRelation is invalid, the checked status of node will be false
+
+
+    let realChecked = false;
+    let realHalfChecked = false;
+
+    if (checkRelation === 'related') {
+      realChecked = checkedKeys.has(key);
+      realHalfChecked = halfCheckedKeys.has(key);
+    } else if (checkRelation === 'unRelated') {
+      realChecked = realCheckedKeys.has(key);
+      realHalfChecked = false;
     }
 
     const isSearching = Boolean(inputValue);
@@ -90575,8 +90713,8 @@ class foundation_TreeFoundation extends foundation {
       eventKey: key,
       expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: includes_default()(selectedKeys).call(selectedKeys, key),
-      checked: checkedKeys.has(key),
-      halfChecked: halfCheckedKeys.has(key),
+      checked: realChecked,
+      halfChecked: realHalfChecked,
       pos: String(entity ? entity.pos : ''),
       level: entity.level,
       filtered: filteredKeys.has(key),
@@ -90610,10 +90748,17 @@ class foundation_TreeFoundation extends foundation {
       keyEntities
     } = this.getStates();
     const {
-      leafOnly
+      leafOnly,
+      checkRelation
     } = this.getProps();
     let value;
-    const keyList = normalizeKeyList(key, keyEntities, leafOnly);
+    let keyList = [];
+
+    if (checkRelation === 'related') {
+      keyList = normalizeKeyList(key, keyEntities, leafOnly);
+    } else if (checkRelation === 'unRelated') {
+      keyList = key;
+    }
 
     if (this.getProp('onChangeWithObject')) {
       value = map_default()(keyList).call(keyList, itemKey => keyEntities[itemKey].data);
@@ -90828,30 +90973,58 @@ class foundation_TreeFoundation extends foundation {
 
   handleMultipleSelect(e, treeNode) {
     const {
-      disableStrictly
-    } = this.getProps(); // eventKey: The key value of the currently clicked node
+      disableStrictly,
+      checkRelation
+    } = this.getProps();
+    const {
+      realCheckedKeys
+    } = this.getStates(); // eventKey: The key value of the currently clicked node
 
     const {
       checked,
       eventKey,
       data
-    } = treeNode; // Find the checked state of the current node
+    } = treeNode;
 
-    const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
+    if (checkRelation === 'related') {
+      // Find the checked state of the current node
+      const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
+      const {
+        checkedKeys,
+        halfCheckedKeys
+      } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
 
-    this._adapter.notifySelect(eventKey, targetStatus, data);
+      this._adapter.notifySelect(eventKey, targetStatus, data);
 
-    this.notifyChange([...checkedKeys], e);
+      this.notifyChange([...checkedKeys], e);
 
-    if (!this._isControlledComponent()) {
-      this._adapter.updateState({
-        checkedKeys,
-        halfCheckedKeys
-      });
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          checkedKeys,
+          halfCheckedKeys
+        });
+      }
+    } else if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new set_default.a(realCheckedKeys);
+      let targetStatus;
+
+      if (realCheckedKeys.has(eventKey)) {
+        newRealCheckedKeys.delete(eventKey);
+        targetStatus = false;
+      } else {
+        newRealCheckedKeys.add(eventKey);
+        targetStatus = true;
+      }
+
+      this._adapter.notifySelect(eventKey, targetStatus, data);
+
+      this.notifyChange([...newRealCheckedKeys], e);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          realCheckedKeys: newRealCheckedKeys
+        });
+      }
     }
   }
 
@@ -92262,6 +92435,7 @@ class tree_Tree extends baseComponent_BaseComponent {
       selectedKeys: [],
       checkedKeys: new set_default.a(),
       halfCheckedKeys: new set_default.a(),
+      realCheckedKeys: new set_default.a([]),
       motionKeys: new set_default.a([]),
       motionType: 'hide',
       expandedKeys: new set_default.a(props.expandedKeys),
@@ -92472,12 +92646,16 @@ class tree_Tree extends baseComponent_BaseComponent {
       }
 
       if (checkedKeyValues) {
-        const {
-          checkedKeys,
-          halfCheckedKeys
-        } = calcCheckedKeys(checkedKeyValues, keyEntities);
-        newState.checkedKeys = checkedKeys;
-        newState.halfCheckedKeys = halfCheckedKeys;
+        if (props.checkRelation === 'unRelated') {
+          newState.realCheckedKeys = new set_default.a(checkedKeyValues);
+        } else if (props.checkRelation === 'related') {
+          const {
+            checkedKeys,
+            halfCheckedKeys
+          } = calcCheckedKeys(checkedKeyValues, keyEntities);
+          newState.checkedKeys = checkedKeys;
+          newState.halfCheckedKeys = halfCheckedKeys;
+        }
       }
     } // update loadedKeys
 
@@ -92487,7 +92665,7 @@ class tree_Tree extends baseComponent_BaseComponent {
     } // update disableStrictly
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -92808,6 +92986,7 @@ tree_Tree.propTypes = {
   onDragStart: prop_types_default.a.func,
   onDrop: prop_types_default.a.func,
   labelEllipsis: prop_types_default.a.bool,
+  checkRelation: prop_types_default.a.string,
   'aria-label': prop_types_default.a.string
 };
 tree_Tree.defaultProps = {
@@ -92827,7 +93006,8 @@ tree_Tree.defaultProps = {
   expandAction: false,
   disableStrictly: false,
   draggable: false,
-  autoExpandWhenDragEnter: true
+  autoExpandWhenDragEnter: true,
+  checkRelation: 'related'
 };
 tree_Tree.TreeNode = treeNode_TreeNode;
 /* harmony default export */ var tree_0 = (tree_Tree);
@@ -92973,6 +93153,7 @@ class foundation_TreeSelectFoundation extends foundation {
       selectedKeys = [],
       checkedKeys = new set_default.a([]),
       halfCheckedKeys = new set_default.a([]),
+      realCheckedKeys = new set_default.a([]),
       keyEntities = {},
       filteredKeys = new set_default.a([]),
       inputValue = '',
@@ -92982,13 +93163,26 @@ class foundation_TreeSelectFoundation extends foundation {
       disabledKeys = new set_default.a([])
     } = this.getStates();
     const {
-      treeNodeFilterProp
+      treeNodeFilterProp,
+      checkRelation
     } = this.getProps();
     const entity = keyEntities[key];
     const notExist = !entity;
 
     if (notExist) {
       return null;
+    } // if checkRelation is invalid, the checked status of node will be false
+
+
+    let realChecked = false;
+    let realHalfChecked = false;
+
+    if (checkRelation === 'related') {
+      realChecked = checkedKeys.has(key);
+      realHalfChecked = halfCheckedKeys.has(key);
+    } else if (checkRelation === 'unRelated') {
+      realChecked = realCheckedKeys.has(key);
+      realHalfChecked = false;
     }
 
     const isSearching = Boolean(inputValue);
@@ -92996,8 +93190,8 @@ class foundation_TreeSelectFoundation extends foundation {
       eventKey: key,
       expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: includes_default()(selectedKeys).call(selectedKeys, key),
-      checked: checkedKeys.has(key),
-      halfChecked: halfCheckedKeys.has(key),
+      checked: realChecked,
+      halfChecked: realHalfChecked,
       pos: String(entity ? entity.pos : ''),
       level: entity.level,
       filtered: filteredKeys.has(key),
@@ -93063,9 +93257,16 @@ class foundation_TreeSelectFoundation extends foundation {
       keyEntities
     } = this.getStates();
     const {
-      leafOnly
+      leafOnly,
+      checkRelation
     } = this.getProps();
-    const keyList = normalizeKeyList(key, keyEntities, leafOnly);
+    let keyList = [];
+
+    if (checkRelation === 'related') {
+      keyList = normalizeKeyList(key, keyEntities, leafOnly);
+    } else if (checkRelation === 'unRelated') {
+      keyList = key;
+    }
 
     const nodes = map_default()(keyList).call(keyList, i => keyEntities[i].data);
 
@@ -93192,7 +93393,8 @@ class foundation_TreeSelectFoundation extends foundation {
       this._adapter.updateState({
         selectedKeys: [],
         checkedKeys: new set_default.a(),
-        halfCheckedKeys: new set_default.a()
+        halfCheckedKeys: new set_default.a(),
+        realCheckedKeys: new set_default.a([])
       });
     } // When triggerSearch, clicking the clear button will trigger to clear Input
 
@@ -93220,11 +93422,13 @@ class foundation_TreeSelectFoundation extends foundation {
 
   removeTag(eventKey) {
     const {
-      disableStrictly
+      disableStrictly,
+      checkRelation
     } = this.getProps();
     const {
       keyEntities,
-      disabledKeys
+      disabledKeys,
+      realCheckedKeys
     } = this.getStates();
     const item = keyEntities[eventKey].data;
 
@@ -93232,20 +93436,35 @@ class foundation_TreeSelectFoundation extends foundation {
       return;
     }
 
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = this.calcCheckedKeys(eventKey, false);
+    if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new set_default.a(realCheckedKeys);
+      newRealCheckedKeys.delete(eventKey);
 
-    this._notifyChange([...checkedKeys], null);
+      this._notifyChange([...newRealCheckedKeys], null);
 
-    if (!this._isControlledComponent()) {
-      this._adapter.updateState({
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          realCheckedKeys: newRealCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
+    } else if (checkRelation === 'related') {
+      const {
         checkedKeys,
         halfCheckedKeys
-      });
+      } = this.calcCheckedKeys(eventKey, false);
 
-      this._adapter.rePositionDropdown();
+      this._notifyChange([...checkedKeys], null);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          checkedKeys,
+          halfCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
     }
 
     this._adapter.notifySelect(eventKey, false, item); // reposition dropdown when selected values change
@@ -93396,39 +93615,67 @@ class foundation_TreeSelectFoundation extends foundation {
   handleMultipleSelect(e, treeNode) {
     const {
       searchPosition,
-      disableStrictly
+      disableStrictly,
+      checkRelation
     } = this.getProps();
     const {
-      inputValue
+      inputValue,
+      realCheckedKeys
     } = this.getStates();
     const {
       checked,
       eventKey,
       data
     } = treeNode;
-    const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
 
-    this._adapter.notifySelect(eventKey, targetStatus, data);
+    if (checkRelation === 'related') {
+      const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
+      const {
+        checkedKeys,
+        halfCheckedKeys
+      } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
 
-    this._notifyChange([...checkedKeys], e);
+      this._adapter.notifySelect(eventKey, targetStatus, data);
 
-    if (searchPosition === treeSelect_constants_strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
-      this._adapter.updateState({
-        inputValue: ''
-      });
+      this._notifyChange([...checkedKeys], e);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          checkedKeys,
+          halfCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
+    } else if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new set_default.a(realCheckedKeys);
+      let targetStatus;
+
+      if (realCheckedKeys.has(eventKey)) {
+        newRealCheckedKeys.delete(eventKey);
+        targetStatus = false;
+      } else {
+        newRealCheckedKeys.add(eventKey);
+        targetStatus = true;
+      }
+
+      this._adapter.notifySelect(eventKey, targetStatus, data);
+
+      this._notifyChange([...newRealCheckedKeys], e);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          realCheckedKeys: newRealCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
     }
 
-    if (!this._isControlledComponent()) {
+    if (searchPosition === treeSelect_constants_strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
       this._adapter.updateState({
-        checkedKeys,
-        halfCheckedKeys
+        inputValue: ''
       });
-
-      this._adapter.rePositionDropdown();
     }
   }
 
@@ -93756,34 +94003,52 @@ class treeSelect_TreeSelect extends baseComponent_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 === treeSelect_constants_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 === treeSelect_constants_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,
@@ -93791,13 +94056,21 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         disabled,
         disableStrictly,
         size,
+        checkRelation,
         renderSelectedItem: propRenderSelectedItem
       } = this.props;
       const renderSelectedItem = isFunction_default()(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
         isRenderInTag: true,
         content: get_default()(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
 
       for_each_default()(renderKeys).call(renderKeys, key => {
@@ -93886,11 +94159,6 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         searchPosition,
         filterTreeNode
       } = this.props;
-      const {
-        selectedKeys,
-        checkedKeys
-      } = this.state;
-      const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
       const isTriggerPositionSearch = filterTreeNode && searchPosition === treeSelect_constants_strings.SEARCH_POSITION_TRIGGER; // searchPosition = trigger
 
       if (isTriggerPositionSearch) {
@@ -93898,7 +94166,7 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
       } // searchPosition = dropdown and single seleciton
 
 
-      if (!multiple || !hasValue) {
+      if (!multiple || !this.hasValue()) {
         const renderText = this.foundation.getRenderTextInSingle();
         const spanCls = classnames_default()({
           ["".concat(treeSelect_prefixcls, "-selection-placeholder")]: !renderText
@@ -94155,14 +94423,23 @@ class treeSelect_TreeSelect extends baseComponent_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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tagInput_0, {
         maxTagCount: maxTagCount,
         disabled: disabled,
@@ -94487,6 +94764,7 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
       selectedKeys: [],
       checkedKeys: new set_default.a(),
       halfCheckedKeys: new set_default.a(),
+      realCheckedKeys: new set_default.a([]),
       disabledKeys: new set_default.a(),
       motionKeys: new set_default.a([]),
       motionType: 'hide',
@@ -94607,12 +94885,16 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
       }
 
       if (checkedKeyValues) {
-        const {
-          checkedKeys,
-          halfCheckedKeys
-        } = calcCheckedKeys(checkedKeyValues, keyEntities);
-        newState.checkedKeys = checkedKeys;
-        newState.halfCheckedKeys = halfCheckedKeys;
+        if (props.checkRelation === 'unRelated') {
+          newState.realCheckedKeys = new set_default.a(checkedKeyValues);
+        } else if (props.checkRelation === 'related') {
+          const {
+            checkedKeys,
+            halfCheckedKeys
+          } = calcCheckedKeys(checkedKeyValues, keyEntities);
+          newState.checkedKeys = checkedKeys;
+          newState.halfCheckedKeys = halfCheckedKeys;
+        }
       }
     } // loadedKeys
 
@@ -94627,7 +94909,7 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
     } // ================ disableStrictly =================
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -94893,6 +95175,7 @@ treeSelect_TreeSelect.propTypes = {
   optionListStyle: prop_types_default.a.object,
   searchRender: prop_types_default.a.oneOfType([prop_types_default.a.func, prop_types_default.a.bool]),
   renderSelectedItem: prop_types_default.a.func,
+  checkRelation: prop_types_default.a.string,
   'aria-label': prop_types_default.a.string
 };
 treeSelect_TreeSelect.defaultProps = {
@@ -94921,6 +95204,7 @@ treeSelect_TreeSelect.defaultProps = {
   expandAction: false,
   clickToHide: true,
   searchAutoFocus: false,
+  checkRelation: 'related',
   'aria-label': 'TreeSelect'
 };
 /* harmony default export */ var treeSelect_0 = (treeSelect_TreeSelect);
@@ -96492,6 +96776,7 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       onPreviewClick,
       showPicInfo,
       renderPicInfo,
+      renderPicPreviewIcon,
       renderThumbnail,
       name,
       index
@@ -96499,6 +96784,7 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
     const showProgress = status === upload_constants_strings.FILE_STATUS_UPLOADING && percent !== 100;
     const showRetry = status === upload_constants_strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
     const showReplace = status === upload_constants_strings.FILE_STATUS_SUCCESS && this.props.showReplace;
+    const showPreview = status === upload_constants_strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = classnames_default()({
       ["".concat(fileCard_prefixCls, "-picture-file-card")]: true,
       ["".concat(fileCard_prefixCls, "-picture-file-card-disabled")]: disabled,
@@ -96506,7 +96792,6 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       ["".concat(fileCard_prefixCls, "-picture-file-card-error")]: status === upload_constants_strings.FILE_STATUS_UPLOAD_FAIL,
       ["".concat(fileCard_prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    const closeCls = "".concat(fileCard_prefixCls, "-picture-file-card-close");
     const retry = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       role: "button",
       tabIndex: 0,
@@ -96529,6 +96814,17 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(ReplaceSvg, {
       className: "".concat(fileCard_prefixCls, "-picture-file-card-icon-replace")
     })));
+    const preview = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      className: "".concat(fileCard_prefixCls, "-picture-file-card-preview")
+    }, typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null);
+    const close = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: "".concat(fileCard_prefixCls, "-picture-file-card-close"),
+      onClick: e => this.onRemove(e)
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, {
+      className: "".concat(fileCard_prefixCls, "-picture-file-card-icon-close")
+    }));
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: "".concat(fileCard_prefixCls, "-picture-file-card-pic-info")
     }, index + 1);
@@ -96547,14 +96843,7 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       size: "small",
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
-    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
-    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, {
-      tabIndex: 0,
-      role: "button",
-      size: "extra-small"
-    })), this.renderPicValidateMsg());
+    }) : null, showRetry ? retry : null, showReplace && replace, showPreview && preview, showPicInfo && picInfo, !disabled && close, this.renderPicValidateMsg());
   }
 
   renderFile(locale) {
@@ -96569,7 +96858,8 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       previewFile,
       status,
       style,
-      onPreviewClick
+      onPreviewClick,
+      renderFileOperation
     } = this.props;
     const fileCardCls = classnames_default()({
       ["".concat(fileCard_prefixCls, "-file-card")]: true,
@@ -96599,6 +96889,14 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       previewContent = previewFile(this.props);
     }
 
+    const operation = typeof renderFileOperation === 'function' ? renderFileOperation(this.props) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(button_0, {
+      onClick: e => this.onRemove(e),
+      type: "tertiary",
+      icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, null),
+      theme: "borderless",
+      size: "small",
+      className: closeCls
+    });
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       role: "listitem",
       className: fileCardCls,
@@ -96619,7 +96917,7 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       position: "top",
       showArrow: false,
       content: locale.replace
-    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(button_0, {
       onClick: e => this.onReplace(e),
       type: "tertiary",
       theme: "borderless",
@@ -96641,29 +96939,22 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       tabIndex: 0,
       className: "".concat(infoCls, "-retry"),
       onClick: e => this.onRetry(e)
-    }, locale.retry) : null)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
-      onClick: e => this.onRemove(e),
-      type: "tertiary",
-      icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, null),
-      theme: "borderless",
-      size: "small",
-      className: closeCls
-    }));
+    }, locale.retry) : null)), operation);
   }
 
   onRemove(e) {
     e.stopPropagation();
-    this.props.onRemove(this.props, e);
+    this.props.onRemove();
   }
 
   onReplace(e) {
     e.stopPropagation();
-    this.props.onReplace(this.props, e);
+    this.props.onReplace();
   }
 
   onRetry(e) {
     e.stopPropagation();
-    this.props.onRetry(this.props, e);
+    this.props.onRetry();
   }
 
   render() {
@@ -96727,6 +97018,7 @@ var upload = __webpack_require__("/t7F");
 
 
 
+
 /* eslint-disable max-len */
 
 
@@ -96837,14 +97129,14 @@ class upload_Upload extends baseComponent_BaseComponent {
         previewFile,
         listType,
         itemStyle,
-        showRetry,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderFileItem,
         renderThumbnail,
         disabled,
-        onPreviewClick,
-        showReplace
+        onPreviewClick
       } = this.props;
 
       const onRemove = () => this.remove(file);
@@ -96857,20 +97149,20 @@ class upload_Upload extends baseComponent_BaseComponent {
         this.replace(index);
       };
 
-      const fileCardProps = assign_default()(assign_default()({}, file), {
+      const fileCardProps = assign_default()(assign_default()(assign_default()({}, pick_default()(this.props, ['showRetry', 'showReplace', ''])), file), {
         previewFile,
         listType,
         onRemove,
         onRetry,
         index,
         key: uid || concat_default()(_context = "".concat(name)).call(_context, index),
-        showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderThumbnail,
-        showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
       });
@@ -96912,7 +97204,8 @@ class upload_Upload extends baseComponent_BaseComponent {
         limit,
         disabled,
         children,
-        draggable
+        draggable,
+        hotSpotLocation
       } = this.props;
       const {
         fileList: stateFileList,
@@ -96970,7 +97263,7 @@ class upload_Upload extends baseComponent_BaseComponent {
         className: mainCls,
         role: "list",
         "aria-label": "picture list"
-      }, map_default()(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, map_default()(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
     };
 
     this.renderFileListDefault = () => {
@@ -97310,6 +97603,7 @@ upload_Upload.propTypes = {
   fileList: prop_types_default.a.array,
   fileName: prop_types_default.a.string,
   headers: prop_types_default.a.oneOfType([prop_types_default.a.object, prop_types_default.a.func]),
+  hotSpotLocation: prop_types_default.a.oneOf(['start', 'end']),
   itemStyle: prop_types_default.a.object,
   limit: prop_types_default.a.number,
   listType: prop_types_default.a.oneOf(upload_constants_strings.LIST_TYPE),
@@ -97335,6 +97629,8 @@ upload_Upload.propTypes = {
   prompt: prop_types_default.a.node,
   promptPosition: prop_types_default.a.oneOf(upload_constants_strings.PROMPT_POSITION),
   renderFileItem: prop_types_default.a.func,
+  renderPicPreviewIcon: prop_types_default.a.func,
+  renderFileOperation: prop_types_default.a.func,
   renderPicInfo: prop_types_default.a.func,
   renderThumbnail: prop_types_default.a.func,
   showClear: prop_types_default.a.bool,
@@ -97354,6 +97650,7 @@ upload_Upload.defaultProps = {
   defaultFileList: [],
   disabled: false,
   listType: 'list',
+  hotSpotLocation: 'end',
   multiple: false,
   onAcceptInvalid: noop_default.a,
   onChange: noop_default.a,
@@ -100956,7 +101253,7 @@ class foundation_FormFoundation extends foundation {
   } // update formState value
 
 
-  updateStateValue(field, value, opts) {
+  updateStateValue(field, value, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
@@ -100988,7 +101285,7 @@ class foundation_FormFoundation extends foundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get touched from formState
 
@@ -101002,7 +101299,7 @@ class foundation_FormFoundation extends foundation {
   } // update formState touched
 
 
-  updateStateTouched(field, isTouched, opts) {
+  updateStateTouched(field, isTouched, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     object_set(this.data.touched, field, isTouched);
@@ -101012,7 +101309,7 @@ class foundation_FormFoundation extends foundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get error from formState
 
@@ -101026,7 +101323,7 @@ class foundation_FormFoundation extends foundation {
   } // update formState error
 
 
-  updateStateError(field, error, opts) {
+  updateStateError(field, error, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     object_set(this.data.errors, field, error); // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
@@ -101037,7 +101334,7 @@ class foundation_FormFoundation extends foundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // For internal use in the FormApi Operating Field
 
@@ -101056,22 +101353,21 @@ class foundation_FormFoundation extends foundation {
         // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
         // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
         // When the user directly calls formA pi.set Value ('peoples', [2,3])
-        this.updateStateValue(field, newValue, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldVal = object_get(instance_values_default()(this.data), fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
-          });
-        } // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
-
+        this.updateStateValue(field, newValue, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldVal = object_get(instance_values_default()(this.data), fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
+            });
+          }
+        }); // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -101089,21 +101385,21 @@ class foundation_FormFoundation extends foundation {
       if (fieldApi) {
         fieldApi.setError(newError, opts);
       } else {
-        this.updateStateError(field, newError, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldError = object_get(this.data.errors, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateError(field, newError, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldError = object_get(this.data.errors, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -101119,21 +101415,21 @@ class foundation_FormFoundation extends foundation {
       if (fieldApi) {
         fieldApi.setTouched(isTouched, opts);
       } else {
-        this.updateStateTouched(field, isTouched, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldTouch = object_get(this.data.touched, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateTouched(field, isTouched, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldTouch = object_get(this.data.touched, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -102491,8 +102787,8 @@ class baseForm_Form extends baseComponent_BaseComponent {
       notifySubmitFail: (errors, values) => {
         this.props.onSubmitFail(errors, values);
       },
-      forceUpdate: () => {
-        this.forceUpdate();
+      forceUpdate: callback => {
+        this.forceUpdate(callback);
       },
       notifyChange: formState => {
         this.props.onChange(formState);