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

package/lib/cjs/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/cjs/table/HeadTable.js

@@ -116,7 +116,8 @@ HeadTable.propTypes = {
   }),
   selectedRowKeysSet: _propTypes.default.instanceOf(_set.default).isRequired,
   showHeader: _propTypes.default.bool,
-  onDidUpdate: _propTypes.default.func
+  onDidUpdate: _propTypes.default.func,
+  onHeaderRow: _propTypes.default.func
 };
 HeadTable.defaultProps = {
   handleBodyScroll: _noop2.default

package/lib/cjs/table/Table.js

@@ -718,6 +718,7 @@ class Table extends _baseComponent.default {
         components,
         headerRef,
         bodyRef,
+        onHeaderRow,
         rowSelection,
         dataSource,
         bodyHasScrollBar,
@@ -736,6 +737,7 @@ class Table extends _baseComponent.default {
         scroll: scroll,
         showHeader: showHeader,
         selectedRowKeysSet: selectedRowKeysSet,
+        onHeaderRow: onHeaderRow,
         dataSource: dataSource,
         bodyHasScrollBar: bodyHasScrollBar
       }) : null;

package/lib/cjs/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/cjs/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/cjs/timeline/item.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/cjs/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/lib/es/anchor/link.d.ts

@@ -5,9 +5,9 @@ import LinkFoundation, { LinkAdapter } from '@douyinfe/semi-foundation/lib/es/an
 import { AnchorContextType } from './anchor-context';
 export interface LinkProps {
     href?: string;
-    title?: string | React.ReactNode;
+    title?: ReactNode;
     className?: string;
-    children?: ReactNode | undefined;
+    children?: ReactNode;
     style?: React.CSSProperties;
     disabled?: boolean;
 }

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

@@ -36,7 +36,7 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     dropdownMatchSelectWidth?: boolean;
     dropdownClassName?: string;
     dropdownStyle?: React.CSSProperties;
-    emptyContent?: React.ReactNode | null;
+    emptyContent?: React.ReactNode;
     getPopupContainer?: () => HTMLElement;
     insetLabel?: React.ReactNode;
     insetLabelId?: string;

package/lib/es/autoComplete/index.js

@@ -65,7 +65,7 @@ class AutoComplete extends BaseComponent {
     this.triggerRef = /*#__PURE__*/React.createRef();
     this.optionsRef = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
-    warning('triggerRender' in this.props && typeof this.props.triggerRender === 'function', "[Semi AutoComplete] \n            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size', \n            please notice that they will be removed in the next major version.\n            Please use 'componentProps' to retrieve these props instead.\n            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.");
+    warning('triggerRender' in this.props && typeof this.props.triggerRender === 'function', "[Semi AutoComplete]\n            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size',\n            please notice that they will be removed in the next major version.\n            Please use 'componentProps' to retrieve these props instead.\n            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.");
   }
 
   get adapter() {

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

@@ -4,7 +4,7 @@ export declare type AvatarShape = 'circle' | 'square';
 export declare type AvatarSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
 export declare type AvatarColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow';
 export interface AvatarProps extends BaseProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     color?: AvatarColor;
     shape?: AvatarShape;
     size?: AvatarSize;
@@ -22,7 +22,7 @@ export declare type AvatarGroupShape = 'circle' | 'square';
 export declare type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
 export declare type AvatarGroupOverlapFrom = 'start' | 'end';
 export interface AvatarGroupProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     shape?: AvatarGroupShape;
     size?: AvatarGroupSize;
     overlapFrom?: AvatarGroupOverlapFrom;

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

@@ -17,7 +17,7 @@ export interface BadgeProps {
     onMouseEnter?: (e: React.MouseEvent) => any;
     onMouseLeave?: (e: React.MouseEvent) => any;
     onClick?: (e: React.MouseEvent) => any;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 export default class Badge extends PureComponent<BadgeProps> {
     static contextType: React.Context<ContextValue>;

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

@@ -7,15 +7,15 @@ export declare type Type = 'info' | 'danger' | 'warning' | 'success';
 export interface BannerProps {
     type?: Type;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     fullMode?: boolean;
     title?: React.ReactNode;
     description?: React.ReactNode;
-    icon?: string | React.ReactNode;
-    closeIcon?: string | React.ReactNode;
+    icon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
     style?: React.CSSProperties;
     bordered?: boolean;
-    onClose?: (e: React.MouseEvent) => void;
+    onClose?(e: React.MouseEvent): void;
 }
 export interface BannerState {
     visible: boolean;

package/lib/es/breadcrumb/bread-context.d.ts

@@ -5,7 +5,7 @@ export interface BreadContextType {
     onClick?: (info: BreadcrumbItemInfo, event: React.MouseEvent) => void;
     showTooltip?: boolean | showToolTipProps;
     compact?: boolean;
-    separator?: string | React.ReactNode;
+    separator?: React.ReactNode;
 }
 declare const BreadContext: React.Context<BreadContextType>;
 export default BreadContext;

package/lib/es/card/cardGroup.d.ts

@@ -4,7 +4,7 @@ export declare type CardGroupType = 'grid';
 export interface CardGroupProps {
     /** Card group style class name */
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     /** Card Spacing */
     spacing?: number | number[];
     /** Card group inline style */

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

@@ -14,7 +14,7 @@ export interface CardProps {
     bordered?: boolean;
     /** Style class name */
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     /** Cover */
     cover?: ReactNode;
     /** Additional additions to the right of the title */

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

@@ -33,7 +33,7 @@ export interface CascaderProps extends BasicCascaderProps {
     motion?: Motion;
     treeData?: Array<CascaderData>;
     restTagsPopoverProps?: PopoverProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     value?: Value;
     prefix?: ReactNode;
     suffix?: ReactNode;

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

@@ -9,7 +9,7 @@ export { CollapsePanelProps } from './item';
 export interface CollapseReactProps extends CollapseProps {
     expandIcon?: React.ReactNode;
     collapseIcon?: React.ReactNode;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: CSSProperties;
     onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
 }

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

@@ -6,7 +6,7 @@ export interface CollapsePanelProps {
     extra?: ReactNode;
     header?: ReactNode;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     reCalcKey?: number | string;
     style?: CSSProperties;
 }

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Motion } from '../_base/base';
 export interface CollapsibleProps {
     motion?: Motion;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     isOpen?: boolean;
     duration?: number;
     keepDOM?: boolean;

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

@@ -5,7 +5,7 @@ import { DescriptionsContextValue } from './descriptions-context';
 export interface DescriptionsItemProps {
     hidden?: boolean;
     className?: string;
-    children?: React.ReactNode | undefined | (() => React.ReactNode);
+    children?: React.ReactNode | (() => React.ReactNode);
     style?: React.CSSProperties;
     itemKey?: React.ReactNode;
 }

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

@@ -17,7 +17,7 @@ export interface EmptyProps {
     darkModeImage?: React.ReactNode | SVGNode;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 interface EmptyState {
     mode: any;

package/lib/es/form/errorMessage.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-export declare type ReactFieldError = boolean | string | Array<any> | React.ReactNode | undefined;
+export declare type ReactFieldError = Array<any> | React.ReactNode;
 export interface ErrorMessageProps {
     error?: ReactFieldError;
     className?: string;

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

@@ -15,7 +15,7 @@ export declare type CommonFieldProps = {
     /** Field is required (except Form. Checkbox within the Group, Form. Radio) */
     field: string;
     /** The label text of the form control is the same name as the field by default when it is not passed */
-    label?: string | LabelProps | React.ReactNode | number;
+    label?: LabelProps | React.ReactNode;
     labelPosition?: 'top' | 'left' | 'inset';
     labelAlign?: 'left' | 'right';
     labelWidth?: number | string;

package/lib/es/form/label.d.ts

@@ -15,7 +15,7 @@ export interface LabelProps {
     width?: number | string;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     extra?: React.ReactNode;
 }
 export default class Label extends PureComponent<LabelProps> {

package/lib/es/form/section.d.ts

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 export interface SectionProps {
     className?: string;
     style?: React.CSSProperties;
-    text?: React.ReactNode | string;
-    children?: React.ReactNode | undefined;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
 }
 export default class Section extends PureComponent<SectionProps> {
     static propTypes: {

package/lib/es/form/slot.d.ts

@@ -4,7 +4,7 @@ import { ErrorMessageProps } from './errorMessage';
 export interface SlotProps {
     className?: string;
     style?: React.CSSProperties;
-    label?: LabelProps | React.ReactNode | number | string;
+    label?: LabelProps | React.ReactNode;
     noLabel?: boolean;
     labelPosition?: 'top' | 'left';
     error?: ErrorMessageProps;

package/lib/es/layout/Sider.d.ts

@@ -13,7 +13,7 @@ export interface SiderProps {
     prefixCls?: string;
     style?: CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     breakpoint?: Array<keyof ResponsiveMap>;
     onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
     'aria-label'?: React.AriaAttributes['aria-label'];

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

@@ -8,7 +8,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/lib/es/list/item.d.ts

@@ -7,7 +7,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/lib/es/modal/Modal.d.ts

@@ -10,7 +10,7 @@ export declare type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'right
 export declare type Directions = 'ltr' | 'rtl';
 export interface ModalReactProps extends ModalProps {
     cancelButtonProps?: ButtonProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     okButtonProps?: ButtonProps;
     bodyStyle?: CSSProperties;
     maskStyle?: CSSProperties;
@@ -102,19 +102,19 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
     static getScrollbarWidth(): number;
     static info: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static success: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static error: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static warning: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static confirm: (props: ModalReactProps) => {
         destroy: () => void;

package/lib/es/modal/ModalContent.d.ts

@@ -4,7 +4,7 @@ import { ContextValue } from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
 import ModalContentFoundation, { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
 export interface ModalContentReactProps extends ModalContentProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType: React.Context<ContextValue>;

package/lib/es/modal/confirm.d.ts

@@ -4,9 +4,11 @@ import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 export interface ConfirmProps extends ModalReactProps {
     type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
 }
-export default function confirm(props: ConfirmProps): {
+export default function confirm<T>(props: ConfirmProps): {
     destroy: () => void;
-    update: (newConfig: ConfirmProps) => void;
+    update: (newConfig: T extends {
+        type: Exclude<ConfirmProps['type'], 'confirm'>;
+    } ? ModalReactProps : ConfirmProps) => void;
 };
 export declare function withInfo(props: ModalReactProps): {
     cancelButtonProps?: import("../button").BaseButtonProps;

package/lib/es/modal/confirm.js

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import { destroyFns } from './Modal';
 import ConfirmModal from './ConfirmModal';
 import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
-import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconHelpCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
 export default function confirm(props) {
   // create a dom in adapter?
   const div = document.createElement('div');

package/lib/es/modal/useModal/index.d.ts

@@ -1,25 +1,18 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { ConfirmProps } from '../confirm';
 import { ModalReactProps } from '../Modal';
-export default function useModal(): (JSX.Element | {
-    info: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    success: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    error: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    warning: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    confirm: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-})[];
+declare 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
+];
+export {};

package/lib/es/navigation/Footer.d.ts

@@ -4,7 +4,7 @@ import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
 import { 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;
 }
 export default class NavFooter extends PureComponent<NavFooterProps> {

package/lib/es/radio/radioGroup.d.ts

@@ -24,7 +24,7 @@ export declare 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/lib/es/select/index.d.ts

@@ -19,7 +19,7 @@ declare type ExcludeInputType = {
 };
 export interface optionRenderProps {
     key?: any;
-    label?: string | React.ReactNode | number;
+    label?: React.ReactNode;
     value?: string | number;
     style?: React.CSSProperties;
     className?: string;

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;
 }