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

package/lib/es/table/ColumnFilter.js

@@ -1,13 +1,14 @@
+import _pick from "lodash/pick";
 import _noop from "lodash/noop";
-import React, { isValidElement } from 'react';
+import _isEqual from "lodash/isEqual";
+import React, { isValidElement, useEffect, useState } from 'react';
 import cls from 'classnames';
 import { IconFilter } from '@douyinfe/semi-icons';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import Dropdown from '../dropdown';
 import { Radio } from '../radio';
 import { Checkbox } from '../checkbox';
-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 {
@@ -19,77 +20,80 @@ function renderDropdown() {
     onFilterDropdownVisibleChange = _noop,
     trigger = 'click',
     position = 'bottom',
+    renderFilterDropdown,
     renderFilterDropdownItem
-  } = props;
+  } = props !== null && props !== void 0 ? props : {};
+  const renderFilterDropdownProps = _pick(props, ['tempFilteredValue', 'setTempFilteredValue', 'confirm', 'clear', 'close', 'filters']);
+  const render = typeof renderFilterDropdown === 'function' ? renderFilterDropdown(renderFilterDropdownProps) : /*#__PURE__*/React.createElement(Dropdown.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.isValidElement(dropdownItem) ? /*#__PURE__*/React.cloneElement(dropdownItem, {
+      key
+    }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
+      key: key,
+      onClick: changeFn
+    }, filterMultiple ? /*#__PURE__*/React.createElement(Checkbox, {
+      checked: checked
+    }, text) : /*#__PURE__*/React.createElement(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.createElement(Dropdown.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.isValidElement(dropdownItem) ? /*#__PURE__*/React.cloneElement(dropdownItem, {
-        key
-      }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
-        key: key,
-        onClick: changeFn
-      }, filterMultiple ? /*#__PURE__*/React.createElement(Checkbox, {
-        checked: checked
-      }, text) : /*#__PURE__*/React.createElement(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;
@@ -105,12 +109,68 @@ export default function ColumnFilter() {
     prefixCls = 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] = useState(filteredValue);
+  const dropdownVisibleInitValue = isCustomDropdownVisible ? false : filterDropdownVisible;
+  const [dropdownVisible, setDropdownVisible] = useState(dropdownVisibleInitValue);
+  useEffect(() => {
+    if (typeof filterDropdownVisible !== 'undefined') {
+      setDropdownVisible(filterDropdownVisible);
+    }
+  }, [filterDropdownVisible]);
+  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 (!_isEqual(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 = cls(`${prefixCls}-column-filter`, {
     on: Array.isArray(filteredValue) && filteredValue.length
   });
@@ -130,9 +190,10 @@ export default function ColumnFilter() {
       size: "default"
     }));
   }
-  const renderProps = Object.assign(Object.assign({}, props), filterDropdownProps);
-  filterDropdown = /*#__PURE__*/React.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.isValidElement(filterDropdown) ? filterDropdown : renderDropdown(renderProps, iconElem);
   return filterDropdown;
 }

package/lib/es/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/es/utils/Store';
-import TableFoundation, { TableAdapter, BaseRowKeyType, BaseHeadWidth } from '@douyinfe/semi-foundation/lib/es/table/foundation';
+import TableFoundation, { TableAdapter, BasePageData, BaseRowKeyType, BaseHeadWidth } from '@douyinfe/semi-foundation/lib/es/table/foundation';
 import { TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/es/table/tableSelectionCellFoundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import '@douyinfe/semi-foundation/lib/es/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/es/table/Table.js

@@ -468,6 +468,7 @@ class Table extends BaseComponent {
     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
@@ -477,43 +478,67 @@ class Table extends BaseComponent {
           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 = _get(rowSelection, 'key', 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.createElement(ColumnSelection, {
+          const originNode = /*#__PURE__*/React.createElement(ColumnSelection, {
             "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 _isFunction(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.createElement(ColumnSelection, {
+          const originNode = /*#__PURE__*/React.createElement(ColumnSelection, {
             "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 _isFunction(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 {
@@ -608,7 +633,7 @@ class Table extends BaseComponent {
       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,
@@ -650,10 +675,10 @@ class Table extends BaseComponent {
         const stateFilteredValue = _get(curQuery, 'filteredValue');
         const defaultFilteredValue = _get(curQuery, 'defaultFilteredValue');
         const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
-        if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/isValidElement(column.filterDropdown)) {
+        if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/isValidElement(column.filterDropdown) || typeof column.renderFilterDropdown === 'function') {
           const filter = /*#__PURE__*/React.createElement(ColumnFilter, Object.assign({
             key: strings.DEFAULT_KEY_COLUMN_FILTER
-          }, curQuery, {
+          }, _omit(curQuery, 'children'), {
             filteredValue: filteredValue,
             onFilterDropdownVisibleChange: visible => _this2.foundation.toggleShowFilter(dataIndex, visible),
             onSelect: data => _this2.foundation.handleFilterSelect(dataIndex, data)

package/lib/es/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/es/table/foundation").BasePageData<RecordType>, "dataSource" | "groups">;
     render(): JSX.Element;
 }
 export * from './interface';

package/lib/es/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/es/table/constants';
-import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/es/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/es/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/es/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/es/treeSelect/index.js

@@ -1146,6 +1146,9 @@ class TreeSelect extends BaseComponent {
           onLoad
         } = this.props;
         _isFunction(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), {
@@ -1317,6 +1320,7 @@ TreeSelect.propTypes = {
   virtualize: PropTypes.object,
   treeNodeFilterProp: PropTypes.string,
   onChange: PropTypes.func,
+  onClear: PropTypes.func,
   onSearch: PropTypes.func,
   onSelect: PropTypes.func,
   onExpand: PropTypes.func,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.51.3",
+    "version": "2.52.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.51.3",
-        "@douyinfe/semi-animation-react": "2.51.3",
-        "@douyinfe/semi-foundation": "2.51.3",
-        "@douyinfe/semi-icons": "2.51.3",
-        "@douyinfe/semi-illustrations": "2.51.3",
-        "@douyinfe/semi-theme-default": "2.51.3",
+        "@douyinfe/semi-animation": "2.52.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.52.0-beta.0",
+        "@douyinfe/semi-foundation": "2.52.0-beta.0",
+        "@douyinfe/semi-icons": "2.52.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.52.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.52.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d39b89cf05ae9bed8f2a18f6d73026b915db87a4",
+    "gitHead": "92b9e3fc80cd5a352f6b9a1ffcb8f5191c688d95",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",