@douyinfe/semi-ui 2.4.0 → 2.5.0

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'
@@ -27093,11 +27154,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;
         }
       },
@@ -33628,6 +33693,7 @@ class input_Input extends baseComponent_BaseComponent {
       prefix,
       mode,
       insetLabel,
+      insetLabelId,
       validateStatus,
       type,
       readonly,
@@ -33643,7 +33709,7 @@ class input_Input extends baseComponent_BaseComponent {
       maxLength,
       getValueLength
     } = _a,
-          rest = input_rest(_a, ["addonAfter", "addonBefore", "autofocus", "className", "disabled", "placeholder", "prefix", "mode", "insetLabel", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength"]);
+          rest = input_rest(_a, ["addonAfter", "addonBefore", "autofocus", "className", "disabled", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength"]);
 
     const {
       value,
@@ -33914,9 +33980,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
@@ -42910,6 +42976,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);
@@ -46867,6 +46937,7 @@ tagInput_TagInput.defaultProps = {
 
 
 
+
 
 
 const cascader_prefixcls = cascader_constants_cssClasses.PREFIX;
@@ -47559,6 +47630,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
@@ -52709,6 +52784,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), {
@@ -54449,10 +54542,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
 
 
@@ -59809,6 +59898,10 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 
@@ -59980,14 +60073,18 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       onRangeEndTabPress: this.handleRangeEndTabPress
     });
 
-    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      onClick: this.handleTriggerWrapperClick,
-      className: inputCls
-    }, typeof triggerRender === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(trigger_0, assign_default()({}, props, {
-      triggerRender: triggerRender,
-      componentName: "DatePicker",
-      componentProps: assign_default()({}, this.props)
-    })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, assign_default()({}, props)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+        onClick: this.handleTriggerWrapperClick,
+        className: inputCls
+      }, typeof triggerRender === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(trigger_0, assign_default()({}, props, {
+        triggerRender: triggerRender,
+        componentName: "DatePicker",
+        componentProps: assign_default()({}, this.props)
+      })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, assign_default()({}, props)))
+    );
   }
 
   render() {
@@ -64054,7 +64151,7 @@ class textarea_TextArea extends baseComponent_BaseComponent {
       ["".concat(textarea_prefixCls, "-textarea-showClear")]: showClear
     });
 
-    const itemProps = assign_default()(assign_default()({}, omit_default()(rest, 'insetLabel', 'getValueLength', 'onClear', 'showClear')), {
+    const itemProps = assign_default()(assign_default()({}, omit_default()(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear')), {
       className: itemCls,
       disabled,
       readOnly: readonly,
@@ -72353,8 +72450,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) {
@@ -72916,9 +73014,9 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibileOptions
+    visibleOptions
   } = data;
-  const option = visibileOptions[index];
+  const option = visibleOptions[index];
   return data.renderOption(option, index, style);
 };
 
@@ -73256,11 +73354,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
@@ -73288,11 +73394,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;
 
@@ -73486,34 +73592,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;
@@ -73528,10 +73630,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%',
@@ -73542,7 +73644,7 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -73562,12 +73664,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()({
@@ -73580,7 +73682,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", {
@@ -73811,7 +73913,7 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15;
 
     const {
       disabled,
@@ -73895,7 +73997,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'],
@@ -77383,7 +77485,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);
     };
@@ -77507,7 +77609,7 @@ class foundation_SliderFoundation extends foundation {
       }
 
       if (step !== 1) {
-        // Find nearest step point 
+        // Find nearest step point
         stepValue = Math.round(stepValue / step) * step;
       }
 
@@ -80144,7 +80246,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) {
@@ -80705,7 +80810,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;
   }
@@ -80864,10 +80979,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) {
@@ -80877,7 +80994,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);
 
@@ -85687,10 +85804,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)
           }));
@@ -86279,11 +86403,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
 
@@ -89514,6 +89639,7 @@ class TimePicker_TimePicker extends baseComponent_BaseComponent {
       panelFooter,
       rangeSeparator,
       onOpenChange,
+      onChangeWithDateFirst,
       popupClassName: propPopupClassName,
       hideDisabledOptions,
       use12Hours,
@@ -89525,7 +89651,7 @@ class TimePicker_TimePicker extends baseComponent_BaseComponent {
       motion,
       autoAdjustOverflow
     } = _a,
-          rest = TimePicker_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 = TimePicker_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();
@@ -90546,6 +90672,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 = '',
@@ -90555,13 +90682,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);
@@ -90569,8 +90709,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),
@@ -90604,10 +90744,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);
@@ -90822,30 +90969,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
+        });
+      }
     }
   }
 
@@ -92256,6 +92431,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),
@@ -92466,12 +92642,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
 
@@ -92481,7 +92661,7 @@ class tree_Tree extends baseComponent_BaseComponent {
     } // update disableStrictly
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -92802,6 +92982,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 = {
@@ -92821,7 +93002,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);
@@ -92967,6 +93149,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 = '',
@@ -92976,13 +93159,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);
@@ -92990,8 +93186,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),
@@ -93057,9 +93253,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);
 
@@ -93186,7 +93389,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
 
@@ -93214,11 +93418,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;
 
@@ -93226,20 +93432,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
@@ -93390,40 +93611,68 @@ 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._adapter.notifySelect(eventKey, targetStatus, data);
+
+      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([...checkedKeys], e);
+      this._notifyChange([...newRealCheckedKeys], e);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          realCheckedKeys: newRealCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
+    }
 
     if (searchPosition === treeSelect_constants_strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
       this._adapter.updateState({
         inputValue: ''
       });
     }
-
-    if (!this._isControlledComponent()) {
-      this._adapter.updateState({
-        checkedKeys,
-        halfCheckedKeys
-      });
-
-      this._adapter.rePositionDropdown();
-    }
   }
 
   calcNonDisabedCheckedKeys(eventKey, targetStatus) {
@@ -93750,34 +93999,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,
@@ -93785,13 +94052,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 => {
@@ -93880,11 +94155,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) {
@@ -93892,7 +94162,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
@@ -94149,14 +94419,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,
@@ -94481,6 +94760,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',
@@ -94601,12 +94881,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
 
@@ -94621,7 +94905,7 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
     } // ================ disableStrictly =================
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -94887,6 +95171,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 = {
@@ -94915,6 +95200,7 @@ treeSelect_TreeSelect.defaultProps = {
   expandAction: false,
   clickToHide: true,
   searchAutoFocus: false,
+  checkRelation: 'related',
   'aria-label': 'TreeSelect'
 };
 /* harmony default export */ var treeSelect_0 = (treeSelect_TreeSelect);
@@ -96486,6 +96772,7 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       onPreviewClick,
       showPicInfo,
       renderPicInfo,
+      renderPicPreviewIcon,
       renderThumbnail,
       name,
       index
@@ -96493,6 +96780,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,
@@ -96500,7 +96788,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,
@@ -96523,6 +96810,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);
@@ -96541,14 +96839,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) {
@@ -96563,7 +96854,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,
@@ -96593,6 +96885,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,
@@ -96613,7 +96913,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",
@@ -96635,29 +96935,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() {
@@ -96721,6 +97014,7 @@ var upload = __webpack_require__("/t7F");
 
 
 
+
 /* eslint-disable max-len */
 
 
@@ -96831,14 +97125,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);
@@ -96851,20 +97145,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
       });
@@ -96906,7 +97200,8 @@ class upload_Upload extends baseComponent_BaseComponent {
         limit,
         disabled,
         children,
-        draggable
+        draggable,
+        hotSpotLocation
       } = this.props;
       const {
         fileList: stateFileList,
@@ -96964,7 +97259,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 = () => {
@@ -97304,6 +97599,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),
@@ -97329,6 +97625,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,
@@ -97348,6 +97646,7 @@ upload_Upload.defaultProps = {
   defaultFileList: [],
   disabled: false,
   listType: 'list',
+  hotSpotLocation: 'end',
   multiple: false,
   onAcceptInvalid: noop_default.a,
   onChange: noop_default.a,