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

package/empty/index.tsx

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

package/form/errorMessage.tsx

@@ -7,7 +7,7 @@ import { IconAlertTriangle, IconAlertCircle } from '@douyinfe/semi-icons';
 
 const prefix = cssClasses.PREFIX;
 
-export type ReactFieldError = boolean | string | Array<any> | React.ReactNode | undefined;
+export type ReactFieldError = Array<any> | React.ReactNode;
 
 export interface ErrorMessageProps {
     error?: ReactFieldError;

package/form/interface.ts

@@ -21,7 +21,7 @@ export 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/form/label.tsx

@@ -20,7 +20,7 @@ export interface LabelProps {
     width?: number | string;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     extra?: React.ReactNode;
 }
 

package/form/section.tsx

@@ -9,8 +9,8 @@ const prefix = cssClasses.PREFIX;
 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> {

package/form/slot.tsx

@@ -13,7 +13,7 @@ const prefix = cssClasses.PREFIX;
 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/layout/Sider.tsx

@@ -38,7 +38,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/cjs/anchor/link.d.ts

@@ -5,9 +5,9 @@ import LinkFoundation, { LinkAdapter } from '@douyinfe/semi-foundation/lib/cjs/a
 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/cjs/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/cjs/autoComplete/index.js

@@ -98,7 +98,7 @@ class AutoComplete extends _baseComponent.default {
     this.triggerRef = /*#__PURE__*/_react.default.createRef();
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
     this.clickOutsideHandler = null;
-    (0, _warning.default)('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.");
+    (0, _warning.default)('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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/modal/confirm.d.ts

@@ -4,9 +4,11 @@ import '@douyinfe/semi-foundation/lib/cjs/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/cjs/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/cjs/navigation/Footer.d.ts

@@ -4,7 +4,7 @@ import '@douyinfe/semi-foundation/lib/cjs/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/cjs/navigation/Item.d.ts

@@ -11,7 +11,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/lib/cjs/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/cjs/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/cjs/select/index.js

@@ -16,8 +16,6 @@ exports.default = void 0;
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
 
-var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-
 var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
@@ -34,6 +32,8 @@ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
@@ -56,7 +56,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _context16 = _interopRequireDefault(require("../configProvider/context"));
+var _context15 = _interopRequireDefault(require("../configProvider/context"));
 
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/select/foundation"));
 
@@ -96,6 +96,8 @@ var _utils2 = require("../_utils");
 
 var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 require("@douyinfe/semi-foundation/lib/cjs/select/select.css");
 
 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); }
@@ -110,7 +112,7 @@ const key = 0; // Notes: Use the label of the option as the identifier, that is,
 
 class Select extends _baseComponent.default {
   constructor(props) {
-    var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8;
+    var _context, _context2, _context3, _context4, _context5, _context6, _context7;
 
     super(props);
 
@@ -132,19 +134,19 @@ class Select extends _baseComponent.default {
     };
     /* Generate random string */
 
-    this.selectOptionListID = (0, _slice.default)(_context = Math.random().toString(36)).call(_context, 2);
+    this.selectOptionListID = '';
     this.virtualizeListRef = /*#__PURE__*/_react.default.createRef();
     this.inputRef = /*#__PURE__*/_react.default.createRef();
     this.triggerRef = /*#__PURE__*/_react.default.createRef();
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
     this.clickOutsideHandler = null;
-    this.onSelect = (0, _bind.default)(_context2 = this.onSelect).call(_context2, this);
-    this.onClear = (0, _bind.default)(_context3 = this.onClear).call(_context3, this);
-    this.onMouseEnter = (0, _bind.default)(_context4 = this.onMouseEnter).call(_context4, this);
-    this.onMouseLeave = (0, _bind.default)(_context5 = this.onMouseLeave).call(_context5, this);
-    this.renderOption = (0, _bind.default)(_context6 = this.renderOption).call(_context6, this);
-    this.onKeyPress = (0, _bind.default)(_context7 = this.onKeyPress).call(_context7, this);
-    this.onClearBtnEnterPress = (0, _bind.default)(_context8 = this.onClearBtnEnterPress).call(_context8, this);
+    this.onSelect = (0, _bind.default)(_context = this.onSelect).call(_context, this);
+    this.onClear = (0, _bind.default)(_context2 = this.onClear).call(_context2, this);
+    this.onMouseEnter = (0, _bind.default)(_context3 = this.onMouseEnter).call(_context3, this);
+    this.onMouseLeave = (0, _bind.default)(_context4 = this.onMouseLeave).call(_context4, this);
+    this.renderOption = (0, _bind.default)(_context5 = this.renderOption).call(_context5, this);
+    this.onKeyPress = (0, _bind.default)(_context6 = this.onKeyPress).call(_context6, this);
+    this.onClearBtnEnterPress = (0, _bind.default)(_context7 = this.onClearBtnEnterPress).call(_context7, this);
     this.foundation = new _foundation.default(this.adapter);
     (0, _warning.default)('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
     (0, _warning.default)('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
@@ -348,18 +350,18 @@ class Select extends _baseComponent.default {
         } 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 = (0, _concat.default)(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+          optionClassName = (0, _concat.default)(_context8 = ".".concat(prefixcls, "-option:nth-child(")).call(_context8, index, ")");
         }
 
-        let destNode = document.querySelector((0, _concat.default)(_context10 = (0, _concat.default)(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
+        let destNode = document.querySelector((0, _concat.default)(_context9 = (0, _concat.default)(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " ")).call(_context9, optionClassName));
 
         if ((0, _isArray.default)(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -380,6 +382,7 @@ class Select extends _baseComponent.default {
 
   componentDidMount() {
     this.foundation.init();
+    this.selectOptionListID = (0, _uuid.getUuidShort)();
   }
 
   componentWillUnmount() {
@@ -387,10 +390,10 @@ class Select extends _baseComponent.default {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context12, _context13;
+    var _context11, _context12;
 
-    const prevChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(prevProps.children)).call(_context12, child => child.key);
-    const nowChildrenKeys = (0, _map2.default)(_context13 = _react.default.Children.toArray(this.props.children)).call(_context13, child => child.key);
+    const prevChildrenKeys = (0, _map2.default)(_context11 = _react.default.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const nowChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(this.props.children)).call(_context12, child => child.key);
     let isOptionsChanged = false;
 
     if (!(0, _isEqual2.default)(prevChildrenKeys, nowChildrenKeys) || !(0, _isEqual2.default)(prevProps.optionList, this.props.optionList)) {
@@ -631,7 +634,7 @@ class Select extends _baseComponent.default {
   }
 
   renderOptions(children) {
-    var _context14;
+    var _context13;
 
     const {
       dropdownMinWidth,
@@ -667,7 +670,7 @@ class Select extends _baseComponent.default {
     });
     const isEmpty = !options.length || !(0, _some.default)(options).call(options, item => item._show);
     return /*#__PURE__*/_react.default.createElement("div", {
-      id: (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+      id: (0, _concat.default)(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/_react.default.createElement("div", {
@@ -898,7 +901,7 @@ class Select extends _baseComponent.default {
   }
 
   renderSelection() {
-    var _context15;
+    var _context14;
 
     const {
       disabled,
@@ -982,7 +985,7 @@ class Select extends _baseComponent.default {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": (0, _concat.default)(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
+      "aria-controls": (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],
@@ -1049,7 +1052,7 @@ class Select extends _baseComponent.default {
 
 }
 
-Select.contextType = _context16.default;
+Select.contextType = _context15.default;
 Select.Option = _option.default;
 Select.OptGroup = _optionGroup.default;
 Select.propTypes = {