@douyinfe/semi-ui 2.11.0-beta.1 → 2.11.2

package/lib/es/select/index.js

@@ -4,7 +4,6 @@ import _noop from "lodash/noop";
 import _isString from "lodash/isString";
 import _isEqual from "lodash/isEqual";
 import _Map from "@babel/runtime-corejs3/core-js-stable/map";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -13,6 +12,7 @@ import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
 
@@ -43,13 +43,14 @@ import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
 import { isSemiIcon } from '../_utils';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
 const prefixcls = cssClasses.PREFIX;
 const key = 0; // Notes: Use the label of the option as the identifier, that is, the option in Select, the value is allowed to be the same, but the label must be unique
 
 class Select extends BaseComponent {
   constructor(props) {
-    var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8;
+    var _context, _context2, _context3, _context4, _context5, _context6, _context7;
 
     super(props);
 
@@ -71,19 +72,19 @@ class Select extends BaseComponent {
     };
     /* Generate random string */
 
-    this.selectOptionListID = _sliceInstanceProperty(_context = Math.random().toString(36)).call(_context, 2);
+    this.selectOptionListID = '';
     this.virtualizeListRef = /*#__PURE__*/React.createRef();
     this.inputRef = /*#__PURE__*/React.createRef();
     this.triggerRef = /*#__PURE__*/React.createRef();
     this.optionsRef = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
-    this.onSelect = _bindInstanceProperty(_context2 = this.onSelect).call(_context2, this);
-    this.onClear = _bindInstanceProperty(_context3 = this.onClear).call(_context3, this);
-    this.onMouseEnter = _bindInstanceProperty(_context4 = this.onMouseEnter).call(_context4, this);
-    this.onMouseLeave = _bindInstanceProperty(_context5 = this.onMouseLeave).call(_context5, this);
-    this.renderOption = _bindInstanceProperty(_context6 = this.renderOption).call(_context6, this);
-    this.onKeyPress = _bindInstanceProperty(_context7 = this.onKeyPress).call(_context7, this);
-    this.onClearBtnEnterPress = _bindInstanceProperty(_context8 = this.onClearBtnEnterPress).call(_context8, this);
+    this.onSelect = _bindInstanceProperty(_context = this.onSelect).call(_context, this);
+    this.onClear = _bindInstanceProperty(_context2 = this.onClear).call(_context2, this);
+    this.onMouseEnter = _bindInstanceProperty(_context3 = this.onMouseEnter).call(_context3, this);
+    this.onMouseLeave = _bindInstanceProperty(_context4 = this.onMouseLeave).call(_context4, this);
+    this.renderOption = _bindInstanceProperty(_context5 = this.renderOption).call(_context5, this);
+    this.onKeyPress = _bindInstanceProperty(_context6 = this.onKeyPress).call(_context6, this);
+    this.onClearBtnEnterPress = _bindInstanceProperty(_context7 = this.onClearBtnEnterPress).call(_context7, this);
     this.foundation = new SelectFoundation(this.adapter);
     warning('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
     warning('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
@@ -286,18 +287,18 @@ class Select extends BaseComponent {
         } catch (error) {}
       },
       updateScrollTop: index => {
-        var _context10, _context11;
+        var _context9, _context10;
 
         // eslint-disable-next-line max-len
         let optionClassName = ".".concat(prefixcls, "-option-selected");
 
         if (index !== undefined) {
-          var _context9;
+          var _context8;
 
-          optionClassName = _concatInstanceProperty(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+          optionClassName = _concatInstanceProperty(_context8 = ".".concat(prefixcls, "-option:nth-child(")).call(_context8, index, ")");
         }
 
-        let destNode = document.querySelector(_concatInstanceProperty(_context10 = _concatInstanceProperty(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
+        let destNode = document.querySelector(_concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " ")).call(_context9, optionClassName));
 
         if (_Array$isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -318,6 +319,7 @@ class Select extends BaseComponent {
 
   componentDidMount() {
     this.foundation.init();
+    this.selectOptionListID = getUuidShort();
   }
 
   componentWillUnmount() {
@@ -325,11 +327,11 @@ class Select extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context12, _context13;
+    var _context11, _context12;
 
-    const prevChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(prevProps.children)).call(_context12, child => child.key);
+    const prevChildrenKeys = _mapInstanceProperty(_context11 = React.Children.toArray(prevProps.children)).call(_context11, child => child.key);
 
-    const nowChildrenKeys = _mapInstanceProperty(_context13 = React.Children.toArray(this.props.children)).call(_context13, child => child.key);
+    const nowChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(this.props.children)).call(_context12, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -575,7 +577,7 @@ class Select extends BaseComponent {
   }
 
   renderOptions(children) {
-    var _context14;
+    var _context13;
 
     const {
       dropdownMinWidth,
@@ -613,7 +615,7 @@ class Select extends BaseComponent {
     });
     const isEmpty = !options.length || !_someInstanceProperty(options).call(options, item => item._show);
     return /*#__PURE__*/React.createElement("div", {
-      id: _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+      id: _concatInstanceProperty(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/React.createElement("div", {
@@ -847,7 +849,7 @@ class Select extends BaseComponent {
   }
 
   renderSelection() {
-    var _context15;
+    var _context14;
 
     const {
       disabled,
@@ -931,7 +933,7 @@ class Select extends BaseComponent {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": _concatInstanceProperty(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
+      "aria-controls": _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],

package/lib/es/sideSheet/SideSheetContent.d.ts

@@ -13,7 +13,7 @@ export interface SideSheetContentProps {
     style: CSSProperties;
     bodyStyle?: CSSProperties;
     className: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow } from './interface';
 export interface HeadTableProps {
     [x: string]: any;
     anyColumnFixed?: boolean;
@@ -15,6 +15,7 @@ export interface HeadTableProps {
     selectedRowKeysSet: Set<any>;
     showHeader?: boolean;
     onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    onHeaderRow?: OnHeaderRow<any>;
 }
 declare const _default: React.ForwardRefExoticComponent<Pick<HeadTableProps, keyof HeadTableProps> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/lib/es/table/HeadTable.js

@@ -96,7 +96,8 @@ HeadTable.propTypes = {
   }),
   selectedRowKeysSet: PropTypes.instanceOf(_Set).isRequired,
   showHeader: PropTypes.bool,
-  onDidUpdate: PropTypes.func
+  onDidUpdate: PropTypes.func,
+  onHeaderRow: PropTypes.func
 };
 HeadTable.defaultProps = {
   handleBodyScroll: _noop

package/lib/es/table/Table.js

@@ -658,6 +658,7 @@ class Table extends BaseComponent {
         components,
         headerRef,
         bodyRef,
+        onHeaderRow,
         rowSelection,
         dataSource,
         bodyHasScrollBar,
@@ -678,6 +679,7 @@ class Table extends BaseComponent {
         scroll: scroll,
         showHeader: showHeader,
         selectedRowKeysSet: selectedRowKeysSet,
+        onHeaderRow: onHeaderRow,
         dataSource: dataSource,
         bodyHasScrollBar: bodyHasScrollBar
       }) : null;

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

@@ -211,7 +211,7 @@ export declare type GetCheckboxProps<RecordType> = (record: RecordType) => Check
 export declare type RowSelectionOnChange<RecordType> = (selectedRowKeys?: (string | number)[], selectedRows?: RecordType[]) => void;
 export declare type RowSelectionOnSelect<RecordType> = (record?: RecordType, selected?: boolean, selectedRows?: RecordType[], nativeEvent?: React.MouseEvent) => void;
 export declare type RowSelectionOnSelectAll<RecordType> = (selected?: boolean, selectedRows?: RecordType[], changedRows?: RecordType[]) => void;
-export declare type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode | boolean;
+export declare type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode;
 export declare type ExpandedRowRender<RecordType> = (record?: RecordType, index?: number, expanded?: boolean) => React.ReactNode;
 export declare type Footer<RecordType> = ReactNode | ((pageData?: RecordType[]) => React.ReactNode);
 export declare type FormatPageText = ((pageInfo?: {

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

@@ -11,7 +11,7 @@ export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'>
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 declare class Timeline extends PureComponent<TimelineProps> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;

package/lib/es/timeline/item.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 export interface TimelineItemProps {
     color?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;

package/list/index.tsx

@@ -17,7 +17,7 @@ export { ListItemProps } from './item';
 export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     bordered?: boolean;
     footer?: React.ReactNode;
     header?: React.ReactNode;

package/list/item.tsx

@@ -12,7 +12,7 @@ export interface ListItemProps {
     main?: React.ReactNode;
     align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
     onRightClick?: React.MouseEventHandler<HTMLLIElement>;

package/modal/Modal.tsx

@@ -23,7 +23,7 @@ export type Directions = 'ltr' | 'rtl';
 
 export interface ModalReactProps extends ModalProps {
     cancelButtonProps?: ButtonProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     okButtonProps?: ButtonProps;
     bodyStyle?: CSSProperties;
     maskStyle?: CSSProperties;
@@ -50,7 +50,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         centered: PropTypes.bool,
         visible: PropTypes.bool,
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         confirmLoading: PropTypes.bool,
         cancelLoading: PropTypes.bool,
         okText: PropTypes.string,
@@ -193,23 +193,23 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
 
 
     static info = function (props: ModalReactProps) {
-        return confirm(withInfo(props));
+        return confirm<ReturnType<typeof withInfo>>(withInfo(props));
     };
 
     static success = function (props: ModalReactProps) {
-        return confirm(withSuccess(props));
+        return confirm<ReturnType<typeof withSuccess>>(withSuccess(props));
     };
 
     static error = function (props: ModalReactProps) {
-        return confirm(withError(props));
+        return confirm<ReturnType<typeof withError>>(withError(props));
     };
 
     static warning = function (props: ModalReactProps) {
-        return confirm(withWarning(props));
+        return confirm<ReturnType<typeof withWarning>>(withWarning(props));
     };
 
     static confirm = function (props: ModalReactProps) {
-        return confirm(withConfirm(props));
+        return confirm<ReturnType<typeof withConfirm>>(withConfirm(props));
     };
 
     static destroyAll = function destroyAllFn() {

package/modal/ModalContent.tsx

@@ -21,7 +21,7 @@ let uuid = 0;
 
 
 export interface ModalContentReactProps extends ModalContentProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType = ConfigContext;

package/modal/confirm.tsx

@@ -5,14 +5,14 @@ import ConfirmModal from './ConfirmModal';
 
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import { get } from 'lodash';
-import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconHelpCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
 import { Motion } from '../_base/base';
 
-export interface ConfirmProps extends ModalReactProps{
+export interface ConfirmProps extends ModalReactProps {
     type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
 }
 
-export default function confirm(props: ConfirmProps) {
+export default function confirm<T>(props: ConfirmProps) {
     // create a dom in adapter?
     const div = document.createElement('div');
     document.body.appendChild(div);
@@ -51,7 +51,7 @@ export default function confirm(props: ConfirmProps) {
     } : false;
 
     function render(renderProps: ConfirmProps) {
-        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion} />, div);
+        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion}/>, div);
     }
 
     function close() {
@@ -62,7 +62,7 @@ export default function confirm(props: ConfirmProps) {
         render(currentConfig);
     }
 
-    function update(newConfig: ConfirmProps) {
+    function update(newConfig: T extends { type: Exclude<ConfirmProps['type'], 'confirm'> } ? ModalReactProps : ConfirmProps) {
         currentConfig = {
             ...currentConfig,
             ...newConfig,
@@ -79,11 +79,10 @@ export default function confirm(props: ConfirmProps) {
 }
 
 
-
 export function withInfo(props: ModalReactProps) {
     return {
         type: 'info' as const,
-        icon: <IconInfoCircle />,
+        icon: <IconInfoCircle/>,
         ...props
     };
 }
@@ -91,7 +90,7 @@ export function withInfo(props: ModalReactProps) {
 export function withSuccess(props: ModalReactProps) {
     return {
         type: 'success' as const,
-        icon: <IconTickCircle />,
+        icon: <IconTickCircle/>,
         ...props
     };
 }
@@ -99,7 +98,7 @@ export function withSuccess(props: ModalReactProps) {
 export function withWarning(props: ModalReactProps) {
     return {
         type: 'warning' as const,
-        icon: <IconAlertTriangle />,
+        icon: <IconAlertTriangle/>,
         ...props
     };
 }
@@ -107,7 +106,7 @@ export function withWarning(props: ModalReactProps) {
 export function withError(props: ModalReactProps) {
     return {
         type: 'error' as const,
-        icon: <IconAlertCircle />,
+        icon: <IconAlertCircle/>,
         ...props
     };
 }
@@ -115,7 +114,7 @@ export function withError(props: ModalReactProps) {
 export function withConfirm(props: ModalReactProps) {
     return {
         type: 'confirm' as const,
-        icon: <IconHelpCircle />,
+        icon: <IconHelpCircle/>,
         ...props
     };
 }

package/modal/useModal/index.tsx

@@ -19,7 +19,15 @@ function usePatchElement(): ([ReactNode[], (element: ReactNode) => () => void])
     return [elements, patchElement];
 }
 
-export default function useModal() {
+type UseModalReturnHooksType = (config: ModalReactProps) => { destroy: () => void, update: (newConfig: ConfirmProps) => void };
+
+export default function useModal(): [{
+    info: UseModalReturnHooksType,
+    success: UseModalReturnHooksType,
+    error:UseModalReturnHooksType,
+    warning: UseModalReturnHooksType,
+    confirm: UseModalReturnHooksType
+}, ReactNode] {
     const [elements, patchElement] = usePatchElement();
 
     // eslint-disable-next-line max-len

package/navigation/Footer.tsx

@@ -10,7 +10,7 @@ import NavContext, { NavContextType } from './nav-context';
 import { BaseProps } from '../_base/baseComponent';
 
 export interface NavFooterProps extends BaseProps {
-    collapseButton?: React.ReactNode | boolean;
+    collapseButton?: React.ReactNode;
     collapseText?: (collapsed?: boolean) => React.ReactNode;
 }
 
@@ -28,7 +28,7 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
     static defaultProps = {
         collapseButton: false,
     };
-    
+
     context: NavContextType;
 
     renderCollapseButton = () => {

package/navigation/Item.tsx

@@ -29,7 +29,7 @@ export interface NavItemProps extends ItemProps, BaseProps {
     itemKey?: React.ReactText;
     level?: number;
     link?: string;
-    linkOptions?: React.HTMLAttributes<HTMLLinkElement>;
+    linkOptions?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
     text?: React.ReactNode;
     tooltipHideDelay?: number;
     tooltipShowDelay?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.11.0-beta.1",
+    "version": "2.11.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.11.0-beta.1",
-        "@douyinfe/semi-animation-react": "2.11.0-beta.1",
-        "@douyinfe/semi-foundation": "2.11.0-beta.1",
-        "@douyinfe/semi-icons": "2.11.0-beta.1",
-        "@douyinfe/semi-illustrations": "2.11.0-beta.1",
-        "@douyinfe/semi-theme-default": "2.11.0-beta.1",
+        "@douyinfe/semi-animation": "2.11.2",
+        "@douyinfe/semi-animation-react": "2.11.2",
+        "@douyinfe/semi-foundation": "2.11.2",
+        "@douyinfe/semi-icons": "2.11.2",
+        "@douyinfe/semi-illustrations": "2.11.2",
+        "@douyinfe/semi-theme-default": "2.11.2",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "23088cd48e6c894f541e4358d495001e923321fd",
+    "gitHead": "6de78e58870a428a18b3b035544cf2f01f2839cf",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.11.0-beta.1",
+        "@douyinfe/semi-scss-compile": "2.11.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/radioGroup.tsx

@@ -30,7 +30,7 @@ export type RadioGroupProps = {
     value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     direction?: ArrayElement<typeof strings.DIRECTION_SET>;
     mode?: RadioMode;

package/select/index.tsx

@@ -28,6 +28,7 @@ import { isSemiIcon } from '../_utils';
 import { Subtract } from 'utility-types';
 
 import warning from '@douyinfe/semi-foundation/utils/warning';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 import '@douyinfe/semi-foundation/select/select.scss';
 import { Locale } from '../locale/interface';
@@ -50,7 +51,7 @@ type ExcludeInputType = {
 type OnChangeValueType = string | number | Record<string, any>;
 export interface optionRenderProps {
     key?: any;
-    label?: string | React.ReactNode | number;
+    label?: React.ReactNode;
     value?: string | number;
     style?: React.CSSProperties;
     className?: string;
@@ -340,7 +341,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             isHovering: false,
         };
         /* Generate random string */
-        this.selectOptionListID = Math.random().toString(36).slice(2);
+        this.selectOptionListID = '';
         this.virtualizeListRef = React.createRef();
         this.inputRef = React.createRef();
         this.triggerRef = React.createRef();
@@ -559,6 +560,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
     componentDidMount() {
         this.foundation.init();
+        this.selectOptionListID = getUuidShort();
     }
 
     componentWillUnmount() {

package/sideSheet/SideSheetContent.tsx

@@ -23,7 +23,7 @@ export interface SideSheetContentProps {
     style: CSSProperties;
     bodyStyle?: CSSProperties;
     className: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
 }

package/table/HeadTable.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ColGroup from './ColGroup';
 import TableHeader from './TableHeader';
-import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow } from './interface';
 
 export interface HeadTableProps {
     [x: string]: any;
@@ -23,6 +23,7 @@ export interface HeadTableProps {
     selectedRowKeysSet: Set<any>;
     showHeader?: boolean;
     onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    onHeaderRow?: OnHeaderRow<any>;
 }
 
 /**
@@ -46,6 +47,7 @@ class HeadTable extends React.PureComponent<HeadTableProps> {
         selectedRowKeysSet: PropTypes.instanceOf(Set).isRequired, // Useful when update is selected
         showHeader: PropTypes.bool,
         onDidUpdate: PropTypes.func,
+        onHeaderRow: PropTypes.func,
     };
 
     static defaultProps = {

package/table/Table.tsx

@@ -1089,6 +1089,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             components,
             headerRef,
             bodyRef,
+            onHeaderRow,
             rowSelection,
             dataSource,
             bodyHasScrollBar,
@@ -1110,6 +1111,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                     scroll={scroll}
                     showHeader={showHeader}
                     selectedRowKeysSet={selectedRowKeysSet}
+                    onHeaderRow={onHeaderRow}
                     dataSource={dataSource}
                     bodyHasScrollBar={bodyHasScrollBar}
                 />