@douyinfe/semi-ui 2.51.3 → 2.52.0-beta.0

package/lib/cjs/table/ColumnFilter.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ColumnFilter;
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _semiIcons = require("@douyinfe/semi-icons");
@@ -15,8 +17,7 @@ var _checkbox = require("../checkbox");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function renderDropdown() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function renderDropdown(props) {
   let nestedElem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   const {
@@ -28,77 +29,80 @@ function renderDropdown() {
     onFilterDropdownVisibleChange = _noop2.default,
     trigger = 'click',
     position = 'bottom',
+    renderFilterDropdown,
     renderFilterDropdownItem
-  } = props;
+  } = props !== null && props !== void 0 ? props : {};
+  const renderFilterDropdownProps = (0, _pick2.default)(props, ['tempFilteredValue', 'setTempFilteredValue', 'confirm', 'clear', 'close', 'filters']);
+  const render = typeof renderFilterDropdown === 'function' ? renderFilterDropdown(renderFilterDropdownProps) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Menu, null, Array.isArray(filters) && filters.map((filter, index) => {
+    const changeFn = e => {
+      const domEvent = e && e.nativeEvent;
+      if (domEvent) {
+        // Block this event to prevent the pop-up layer from closing
+        domEvent.stopImmediatePropagation();
+        // Prevent bubbling and default events to prevent label click events from triggering twice
+        domEvent.stopPropagation();
+        domEvent.preventDefault();
+      }
+      let values = [...filteredValue];
+      const included = values.includes(filter.value);
+      const idx = values.indexOf(filter.value);
+      if (idx > -1) {
+        values.splice(idx, 1);
+      } else if (filterMultiple) {
+        values.push(filter.value);
+      } else {
+        values = [filter.value];
+      }
+      return onSelect({
+        value: filter.value,
+        filteredValue: values,
+        included: !included,
+        domEvent
+      });
+    };
+    const checked = filteredValue.includes(filter.value);
+    const {
+      text
+    } = filter;
+    const {
+      value
+    } = filter;
+    const key = `${level}_${index}`;
+    const dropdownItem = typeof renderFilterDropdownItem === 'function' ? renderFilterDropdownItem({
+      onChange: changeFn,
+      filterMultiple,
+      value,
+      text,
+      checked,
+      filteredValue,
+      level
+    }) : null;
+    let item = dropdownItem && /*#__PURE__*/_react.default.isValidElement(dropdownItem) ? /*#__PURE__*/_react.default.cloneElement(dropdownItem, {
+      key
+    }) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Item, {
+      key: key,
+      onClick: changeFn
+    }, filterMultiple ? /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+      checked: checked
+    }, text) : /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+      checked: checked
+    }, text));
+    if (Array.isArray(filter.children) && filter.children.length) {
+      const childrenDropdownProps = Object.assign(Object.assign({}, props), {
+        filters: filter.children,
+        trigger: 'hover',
+        position: 'right'
+      });
+      delete childrenDropdownProps.filterDropdownVisible;
+      item = renderDropdown(childrenDropdownProps, item, level + 1);
+    }
+    return item;
+  }));
   const dropdownProps = Object.assign(Object.assign({}, props), {
     onVisibleChange: visible => onFilterDropdownVisibleChange(visible),
     trigger,
     position,
-    render: /*#__PURE__*/_react.default.createElement(_dropdown.default.Menu, null, Array.isArray(filters) && filters.map((filter, index) => {
-      const changeFn = e => {
-        const domEvent = e && e.nativeEvent;
-        if (domEvent) {
-          // Block this event to prevent the pop-up layer from closing
-          domEvent.stopImmediatePropagation();
-          // Prevent bubbling and default events to prevent label click events from triggering twice
-          domEvent.stopPropagation();
-          domEvent.preventDefault();
-        }
-        let values = [...filteredValue];
-        const included = values.includes(filter.value);
-        const idx = values.indexOf(filter.value);
-        if (idx > -1) {
-          values.splice(idx, 1);
-        } else if (filterMultiple) {
-          values.push(filter.value);
-        } else {
-          values = [filter.value];
-        }
-        return onSelect({
-          value: filter.value,
-          filteredValue: values,
-          included: !included,
-          domEvent
-        });
-      };
-      const checked = filteredValue.includes(filter.value);
-      const {
-        text
-      } = filter;
-      const {
-        value
-      } = filter;
-      const key = `${level}_${index}`;
-      const dropdownItem = typeof renderFilterDropdownItem === 'function' ? renderFilterDropdownItem({
-        onChange: changeFn,
-        filterMultiple,
-        value,
-        text,
-        checked,
-        filteredValue,
-        level
-      }) : null;
-      let item = dropdownItem && /*#__PURE__*/_react.default.isValidElement(dropdownItem) ? /*#__PURE__*/_react.default.cloneElement(dropdownItem, {
-        key
-      }) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Item, {
-        key: key,
-        onClick: changeFn
-      }, filterMultiple ? /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
-        checked: checked
-      }, text) : /*#__PURE__*/_react.default.createElement(_radio.Radio, {
-        checked: checked
-      }, text));
-      if (Array.isArray(filter.children) && filter.children.length) {
-        const childrenDropdownProps = Object.assign(Object.assign({}, props), {
-          filters: filter.children,
-          trigger: 'hover',
-          position: 'right'
-        });
-        delete childrenDropdownProps.filterDropdownVisible;
-        item = renderDropdown(childrenDropdownProps, item, level + 1);
-      }
-      return item;
-    }))
+    render
   });
   if (filterDropdownVisible != null) {
     dropdownProps.visible = filterDropdownVisible;
@@ -114,12 +118,68 @@ function ColumnFilter() {
     prefixCls = _constants.cssClasses.PREFIX,
     filteredValue,
     filterIcon = 'filter',
+    filterDropdownProps,
+    onSelect,
+    filterDropdownVisible,
     renderFilterDropdown,
-    filterDropdownProps
+    onFilterDropdownVisibleChange
   } = props;
   let {
     filterDropdown = null
   } = props;
+  // custom filter related status
+  const isFilterDropdownVisibleControlled = typeof filterDropdownVisible !== 'undefined';
+  const isCustomFilterDropdown = typeof renderFilterDropdown === 'function';
+  const isCustomDropdownVisible = !isFilterDropdownVisibleControlled && isCustomFilterDropdown;
+  const [tempFilteredValue, setTempFilteredValue] = (0, _react.useState)(filteredValue);
+  const dropdownVisibleInitValue = isCustomDropdownVisible ? false : filterDropdownVisible;
+  const [dropdownVisible, setDropdownVisible] = (0, _react.useState)(dropdownVisibleInitValue);
+  (0, _react.useEffect)(() => {
+    if (typeof filterDropdownVisible !== 'undefined') {
+      setDropdownVisible(filterDropdownVisible);
+    }
+  }, [filterDropdownVisible]);
+  (0, _react.useEffect)(() => {
+    setTempFilteredValue(filteredValue);
+  }, [filteredValue]);
+  const confirm = function () {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const newFilteredValue = (props === null || props === void 0 ? void 0 : props.filteredValue) || tempFilteredValue;
+    if (!(0, _isEqual2.default)(newFilteredValue, filteredValue)) {
+      onSelect({
+        filteredValue: newFilteredValue
+      });
+    }
+    if (props.closeDropdown) {
+      setDropdownVisible(false);
+    }
+  };
+  const clear = function () {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    setTempFilteredValue([]);
+    onSelect({
+      filteredValue: []
+    });
+    if (props.closeDropdown) {
+      setDropdownVisible(false);
+    }
+  };
+  const close = () => {
+    setDropdownVisible(false);
+  };
+  const handleFilterDropdownVisibleChange = visible => {
+    if (isCustomDropdownVisible) {
+      setDropdownVisible(visible);
+    }
+    onFilterDropdownVisibleChange(visible);
+  };
+  const renderFilterDropdownProps = {
+    tempFilteredValue,
+    setTempFilteredValue,
+    confirm,
+    clear,
+    close
+  };
   const finalCls = (0, _classnames.default)(`${prefixCls}-column-filter`, {
     on: Array.isArray(filteredValue) && filteredValue.length
   });
@@ -139,9 +199,10 @@ function ColumnFilter() {
       size: "default"
     }));
   }
-  const renderProps = Object.assign(Object.assign({}, props), filterDropdownProps);
-  filterDropdown = /*#__PURE__*/_react.default.isValidElement(filterDropdown) ? filterDropdown : typeof renderFilterDropdown === 'function' ? renderFilterDropdown(renderProps, {
-    iconElem
-  }) : renderDropdown(renderProps, iconElem);
+  const renderProps = Object.assign(Object.assign(Object.assign(Object.assign({}, props), filterDropdownProps), renderFilterDropdownProps), {
+    filterDropdownVisible: isFilterDropdownVisibleControlled ? filterDropdownVisible : dropdownVisible,
+    onFilterDropdownVisibleChange: handleFilterDropdownVisibleChange
+  });
+  filterDropdown = /*#__PURE__*/_react.default.isValidElement(filterDropdown) ? filterDropdown : renderDropdown(renderProps, iconElem);
   return filterDropdown;
 }

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

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import Store from '@douyinfe/semi-foundation/lib/cjs/utils/Store';
-import TableFoundation, { TableAdapter, BaseRowKeyType, BaseHeadWidth } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
+import TableFoundation, { TableAdapter, BasePageData, BaseRowKeyType, BaseHeadWidth } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
 import { TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/cjs/table/tableSelectionCellFoundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/table/constants';
 import '@douyinfe/semi-foundation/lib/cjs/table/table.css';
@@ -185,7 +185,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
     _invokeRowSelection: (funcName: string, ...args: any[]) => void;
     _invokeColumnFn: (key: string, funcName: string, ...args: any[]) => void;
     _cacheHeaderRef: (node: HTMLDivElement) => void;
-    getCurrentPageData: () => any;
+    getCurrentPageData: () => Pick<BasePageData<RecordType>, "dataSource" | "groups">;
     getColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<RecordType>[];
     getCellWidths: (...args: any[]) => number[];
     setHeadWidths: (...args: any[]) => void;
@@ -200,8 +200,8 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
     setScrollPosition: (position: BodyScrollPosition) => void;
     setScrollPositionClassName: () => void;
     syncTableWidth: () => void;
-    renderSelection: (record?: any, inHeader?: boolean) => React.ReactNode;
-    renderRowSelectionCallback: (text: string, record?: RecordType) => React.ReactNode;
+    renderSelection: (record?: any, inHeader?: boolean, index?: number) => React.ReactNode;
+    renderRowSelectionCallback: (text: string, record: RecordType, index: number) => React.ReactNode;
     renderTitleSelectionCallback: () => React.ReactNode;
     normalizeSelectionColumn: (props?: {
         rowSelection?: TableStateRowSelection<RecordType>;
@@ -283,7 +283,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
      * @param {ReactNode} children
      * @returns {Array}
      */
-    normalizeColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => any;
+    normalizeColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<RecordType>[];
     /**
      * Combine pagination and table paging processing functions
      */

package/lib/cjs/table/Table.js

@@ -478,6 +478,7 @@ class Table extends _baseComponent.default {
     this.renderSelection = function () {
       let record = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let inHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      let index = arguments.length > 2 ? arguments[2] : undefined;
       const {
         rowSelection,
         allDisabledRowKeysSet
@@ -487,43 +488,67 @@ class Table extends _baseComponent.default {
           selectedRowKeys = [],
           selectedRowKeysSet = new Set(),
           getCheckboxProps,
-          disabled
+          disabled,
+          renderCell
         } = rowSelection;
+        const allRowKeys = _this2.cachedFilteredSortedRowKeys;
+        const allRowKeysSet = _this2.cachedFilteredSortedRowKeysSet;
+        const allIsSelected = _this2.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
+        const hasRowSelected = _this2.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
+        const indeterminate = hasRowSelected && !allIsSelected;
         if (inHeader) {
           const columnKey = (0, _get2.default)(rowSelection, 'key', _constants.strings.DEFAULT_KEY_COLUMN_SELECTION);
-          const allRowKeys = _this2.cachedFilteredSortedRowKeys;
-          const allRowKeysSet = _this2.cachedFilteredSortedRowKeysSet;
-          const allIsSelected = _this2.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
-          const hasRowSelected = _this2.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
-          return /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
+          const originNode = /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
             "aria-label": `${allIsSelected ? 'Deselect' : 'Select'} all rows`,
             disabled: disabled,
             key: columnKey,
             selected: allIsSelected,
-            indeterminate: hasRowSelected && !allIsSelected,
+            indeterminate: indeterminate,
             onChange: (selected, e) => {
               _this2.toggleSelectAllRow(selected, e);
             }
           });
+          const selectAll = (selected, e) => _this2.toggleSelectAllRow(selected, e);
+          return (0, _isFunction2.default)(renderCell) ? renderCell({
+            selected: allIsSelected,
+            record,
+            originNode,
+            inHeader,
+            disabled,
+            indeterminate,
+            selectAll
+          }) : originNode;
         } else {
           const key = _this2.foundation.getRecordKey(record);
           const selected = selectedRowKeysSet.has(key);
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
-          return /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
+          const originNode = /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
             "aria-label": `${selected ? 'Deselect' : 'Select'} this row`,
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
             onChange: (status, e) => _this2.toggleSelectRow(status, key, e)
           });
+          const selectRow = (selected, e) => _this2.toggleSelectRow(selected, key, e);
+          return (0, _isFunction2.default)(renderCell) ? renderCell({
+            selected,
+            record,
+            index,
+            originNode,
+            inHeader: false,
+            disabled,
+            indeterminate,
+            selectRow
+          }) : originNode;
         }
       }
       return null;
     };
     this.renderRowSelectionCallback = function (text) {
       let record = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return _this2.renderSelection(record);
+      let index = arguments.length > 2 ? arguments[2] : undefined;
+      return _this2.renderSelection(record, false, index);
     };
-    this.renderTitleSelectionCallback = () => this.renderSelection(null, true);
+    this.renderTitleSelectionCallback = () => this.renderSelection(undefined, true);
     this.normalizeSelectionColumn = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
@@ -618,7 +643,7 @@ class Table extends _baseComponent.default {
       const {
         prefixCls
       } = _this2.props;
-      if (column && (column.sorter || column.filters || column.useFullRender)) {
+      if (column && (column.sorter || column.filters || column.onFilter || column.useFullRender)) {
         let hasSorterOrFilter = false;
         const {
           dataIndex,
@@ -660,10 +685,10 @@ class Table extends _baseComponent.default {
         const stateFilteredValue = (0, _get2.default)(curQuery, 'filteredValue');
         const defaultFilteredValue = (0, _get2.default)(curQuery, 'defaultFilteredValue');
         const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
-        if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/(0, _react.isValidElement)(column.filterDropdown)) {
+        if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/(0, _react.isValidElement)(column.filterDropdown) || typeof column.renderFilterDropdown === 'function') {
           const filter = /*#__PURE__*/_react.default.createElement(_ColumnFilter.default, Object.assign({
             key: _constants.strings.DEFAULT_KEY_COLUMN_FILTER
-          }, curQuery, {
+          }, (0, _omit2.default)(curQuery, 'children'), {
             filteredValue: filteredValue,
             onFilterDropdownVisibleChange: visible => _this2.foundation.toggleShowFilter(dataIndex, visible),
             onSelect: data => _this2.foundation.handleFilterSelect(dataIndex, data)

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

@@ -96,7 +96,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
     tableRef: React.RefObject<NormalTable<RecordType>>;
     context: ContextValue;
     constructor(props: TableProps);
-    getCurrentPageData: () => any;
+    getCurrentPageData: () => Pick<import("@douyinfe/semi-foundation/lib/cjs/table/foundation").BasePageData<RecordType>, "dataSource" | "groups">;
     render(): JSX.Element;
 }
 export * from './interface';

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

@@ -1,13 +1,13 @@
 import React, { ReactNode, MutableRefObject } from 'react';
-import { BaseProps } from '../_base/baseComponent';
-import { PaginationProps } from '../pagination';
-import { CheckboxProps } from '../checkbox';
-import { DropdownProps } from '../dropdown';
-import { Locale } from '../locale/interface';
-import { ArrayElement } from '../_base/base';
+import type { BaseProps } from '../_base/baseComponent';
+import type { PaginationProps } from '../pagination';
+import type { CheckboxProps } from '../checkbox';
+import type { Locale } from '../locale/interface';
+import type { ArrayElement } from '../_base/base';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/table/constants';
-import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
-import { ScrollDirection, CSSDirection } from 'react-window';
+import type { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
+import type { ScrollDirection, CSSDirection } from 'react-window';
+import type { ColumnFilterProps } from './ColumnFilter';
 export interface TableProps<RecordType extends Record<string, any> = any> extends BaseProps {
     bordered?: boolean;
     children?: ReactNode;
@@ -65,29 +65,37 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     children?: Array<ColumnProps<RecordType>>;
     className?: string;
     colSpan?: number;
+    /** use `dataIndex` to get current column data item from record. If you use `sorter` or `onFilter`, a unique `dataIndex` is required  */
     dataIndex?: string;
     defaultFilteredValue?: any[];
     defaultSortOrder?: SortOrder;
     filterChildrenRecord?: boolean;
-    filterDropdown?: React.ReactNode;
-    filterDropdownProps?: DropdownProps;
+    filterDropdown?: ColumnFilterProps['filterDropdown'];
+    /** render filter Dropdown panel content  */
+    renderFilterDropdown?: ColumnFilterProps['renderFilterDropdown'];
+    /** filter Dropdown props  */
+    filterDropdownProps?: ColumnFilterProps['filterDropdownProps'];
     filterDropdownVisible?: boolean;
     filterIcon?: FilterIcon;
     filterMultiple?: boolean;
     filteredValue?: any[];
+    /** `filters` is not required if you use `renderFilterDropdown`  */
     filters?: Filter[];
     fixed?: Fixed;
+    /** the key required by React. If you have already set the `dataIndex`, the key does not need to be set again.  */
     key?: string | number;
     render?: ColumnRender<RecordType>;
     renderFilterDropdownItem?: RenderFilterDropdownItem;
     sortChildrenRecord?: boolean;
     sortOrder?: SortOrder;
+    /** enable sorting, `dataIndex` is required at the same time  */
     sorter?: Sorter<RecordType>;
     sortIcon?: SortIcon;
     title?: ColumnTitle;
     useFullRender?: boolean;
     width?: string | number;
     onCell?: OnCell<RecordType>;
+    /** enable filtering, `dataIndex` is required at the same time  */
     onFilter?: OnFilter<RecordType>;
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
@@ -217,7 +225,19 @@ export interface RowSelectionProps<RecordType> {
     onChange?: RowSelectionOnChange<RecordType>;
     onSelect?: RowSelectionOnSelect<RecordType>;
     onSelectAll?: RowSelectionOnSelectAll<RecordType>;
+    renderCell?: RowSelectionRenderCell<RecordType>;
 }
+export type RowSelectionRenderCell<RecordType> = (renderCellArgs: {
+    selected: boolean;
+    record: RecordType;
+    originNode: JSX.Element;
+    inHeader: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+    index?: number;
+    selectRow?: (selected: boolean, e: Event) => void;
+    selectAll?: (selected: boolean, e: Event) => void;
+}) => ReactNode;
 export type GetCheckboxProps<RecordType> = (record: RecordType) => CheckboxProps;
 export type RowSelectionOnChange<RecordType> = (selectedRowKeys?: (string | number)[], selectedRows?: RecordType[]) => void;
 export type RowSelectionOnSelect<RecordType> = (record?: RecordType, selected?: boolean, selectedRows?: RecordType[], nativeEvent?: React.MouseEvent) => void;

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

@@ -82,6 +82,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     onChange?: OnChange;
     onFocus?: (e: React.MouseEvent) => void;
     onVisibleChange?: (isVisible: boolean) => void;
+    onClear?: (e: React.MouseEvent | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export type OverrideCommonState = 'keyEntities' | 'treeData' | 'disabledKeys' | 'flattenNodes';
 export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, OverrideCommonState | 'prevProps'>, Pick<TreeState, OverrideCommonState> {
@@ -121,6 +122,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         virtualize: PropTypes.Requireable<object>;
         treeNodeFilterProp: PropTypes.Requireable<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onExpand: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/treeSelect/index.js

@@ -1155,6 +1155,9 @@ class TreeSelect extends _baseComponent.default {
           onLoad
         } = this.props;
         (0, _isFunction2.default)(onLoad) && onLoad(newLoadedKeys, data);
+      },
+      notifyClear: e => {
+        this.props.onClear && this.props.onClear(e);
       }
     };
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, super.adapter), filterAdapter), treeSelectAdapter), treeAdapter), {
@@ -1326,6 +1329,7 @@ TreeSelect.propTypes = {
   virtualize: _propTypes.default.object,
   treeNodeFilterProp: _propTypes.default.string,
   onChange: _propTypes.default.func,
+  onClear: _propTypes.default.func,
   onSearch: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onExpand: _propTypes.default.func,

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

@@ -11,7 +11,8 @@ export declare function stopPropagation(e: React.MouseEvent | React.FocusEvent<H
  *
  * skip clone function and react element
  */
-export declare function cloneDeep(value: any, customizer?: (value: any) => void): any;
+export declare function cloneDeep<T>(value: T): T;
+export declare function cloneDeep<T>(value: T, customizer: (value: any) => any): any;
 /**
  * [getHighLightTextHTML description]
  *

package/lib/es/_utils/index.js

@@ -19,11 +19,6 @@ export function stopPropagation(e, noImmediate) {
     e.nativeEvent.stopImmediatePropagation();
   }
 }
-/**
- * use in Table, Form, Navigation
- *
- * skip clone function and react element
- */
 export function cloneDeep(value, customizer) {
   return _cloneDeepWith(value, v => {
     if (typeof customizer === 'function') {

package/lib/es/avatar/TopSlotSvg.d.ts

@@ -0,0 +1,5 @@
+declare const TopSlotSvg: ({ gradientStart, gradientEnd }: {
+    gradientStart: string;
+    gradientEnd: string;
+}) => JSX.Element;
+export default TopSlotSvg;

package/lib/es/avatar/TopSlotSvg.js

@@ -0,0 +1,66 @@
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
+import React from 'react';
+const TopSlotSvg = _ref => {
+  let {
+    gradientStart,
+    gradientEnd
+  } = _ref;
+  const id = getUuidShort();
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "51",
+    height: "52",
+    viewBox: "0 0 51 52",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter0_d_6_2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M40.4918 46.5592C44.6795 43.176 46.261 34.1333 47.5301 25.6141C49.5854 11.8168 39.6662 1 25.8097 1C11.2857 1 3 11.4279 3 25.3518C3 33.7866 6.29361 43.8947 10.4602 46.5592C12.5868 47.9192 12.5868 47.9051 25.8097 47.9192C38.3651 47.9282 38.5352 48.14 40.4918 46.5592Z",
+    fill: `url(#${id})`
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "filter0_d_6_2",
+    x: "0.789215",
+    y: "0.447304",
+    width: "49.2216",
+    height: "51.3549",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    in: "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    dy: "1.65809"
+  }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: "1.10539"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_6_2"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_6_2",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: id,
+    x1: "17.671",
+    y1: "31.7392",
+    x2: "17.671",
+    y2: "47.9333",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: gradientStart
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "1",
+    stopColor: gradientEnd
+  }))));
+};
+export default TopSlotSvg;

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

@@ -40,6 +40,29 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        bottomSlot: PropTypes.Requireable<PropTypes.InferProps<{
+            render: PropTypes.Requireable<(...args: any[]) => any>;
+            shape: PropTypes.Requireable<string>;
+            text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            bgColor: PropTypes.Requireable<string>;
+            textColor: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+        }>>;
+        topSlot: PropTypes.Requireable<PropTypes.InferProps<{
+            render: PropTypes.Requireable<(...args: any[]) => any>;
+            gradientStart: PropTypes.Requireable<string>;
+            gradientEnd: PropTypes.Requireable<string>;
+            text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            textColor: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+        }>>;
+        border: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+            motion: PropTypes.Requireable<boolean>;
+        }>>>;
+        contentMotion: PropTypes.Requireable<boolean>;
     };
     foundation: AvatarFoundation;
     avatarRef: React.RefObject<HTMLElement | null>;
@@ -55,5 +78,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     handleFocusVisible: (event: React.FocusEvent) => void;
     handleBlur: (event: React.FocusEvent) => void;
     getContent: () => React.ReactNode;
+    renderBottomSlot: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    renderTopSlot: () => string | number | boolean | React.ReactFragment | JSX.Element;
     render(): JSX.Element;
 }