@douyinfe/semi-ui 2.24.0-alpha.0 → 2.24.0-beta.0

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

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import UploadFoundation from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import FileCard from './fileCard';
 import BaseComponent from '../_base/baseComponent';
-import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
+import type { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/lib/cjs/upload/upload.css';
 import type { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import type { ValidateStatus } from '../_base/baseComponent';
-export { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
+export type { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
 export interface UploadProps {
     accept?: string;
     action: string;
@@ -142,7 +142,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
+        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

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

@@ -28,7 +28,7 @@ export declare function cloneDeep(value: any, customizer?: (value: any) => void)
  * @return  {Array<object>}
  */
 export declare const getHighLightTextHTML: ({ sourceString, searchWords, option }: GetHighLightTextHTMLProps) => (string | React.ReactElement<{
-    style: Record<string, any>;
+    style: React.CSSProperties;
     className: string;
     key: string;
 }, string | React.JSXElementConstructor<any>>)[];
@@ -46,13 +46,13 @@ export interface RegisterMediaQueryOption {
 export declare const registerMediaQuery: (media: string, { match, unmatch, callInInit }: RegisterMediaQueryOption) => () => void;
 export interface GetHighLightTextHTMLProps {
     sourceString?: string;
-    searchWords?: any[];
+    searchWords?: string[];
     option: HighLightTextHTMLOption;
 }
 export interface HighLightTextHTMLOption {
     highlightTag?: string;
     highlightClassName?: string;
-    highlightStyle?: Record<string, any>;
+    highlightStyle?: React.CSSProperties;
     caseSensitive: boolean;
     autoEscape: boolean;
 }

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

@@ -24,7 +24,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
         theme: PropTypes.Requireable<"dark" | "light" | "primary">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        arrowType: PropTypes.Requireable<"hover" | "always">;
+        arrowType: PropTypes.Requireable<"always" | "hover">;
         showArrow: PropTypes.Requireable<boolean>;
         showIndicator: PropTypes.Requireable<boolean>;
         slideDirection: PropTypes.Requireable<"left" | "right">;

package/lib/es/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

package/lib/es/datePicker/datePicker.d.ts

@@ -43,7 +43,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;

package/lib/es/datePicker/monthsGrid.d.ts

@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         multiple: PropTypes.Requireable<boolean>;

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

@@ -57,9 +57,9 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
     static Select: React.ComponentType<import("utility-types").Subtract<{
         'aria-describedby'?: string;
         'aria-errormessage'?: string;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
         'aria-labelledby'?: string;
-        'aria-required'?: boolean | "true" | "false";
+        'aria-required'?: boolean | "false" | "true";
         id?: string;
         autoFocus?: boolean;
         autoClearSearchValue?: boolean;

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

@@ -5,9 +5,9 @@ declare const FormTextArea: import("react").ComponentType<import("utility-types"
 declare const FormSelect: import("react").ComponentType<import("utility-types").Subtract<{
     'aria-describedby'?: string;
     'aria-errormessage'?: string;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
     'aria-labelledby'?: string;
-    'aria-required'?: boolean | "true" | "false";
+    'aria-required'?: boolean | "false" | "true";
     id?: string;
     autoFocus?: boolean;
     autoClearSearchValue?: boolean;

package/lib/es/form/hoc/withField.js

@@ -433,6 +433,10 @@ function withField(Component, opts) {
         'aria-labelledby': labelId
       });
 
+      if (name) {
+        newProps['name'] = name;
+      }
+
       if (helpText) {
         newProps['aria-describedby'] = extraText ? "".concat(helpTextId, " ").concat(extraTextId) : helpTextId;
       }

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

@@ -0,0 +1,37 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/es/highlight/highlight.css';
+export interface HighlightProps {
+    autoEscape?: boolean;
+    caseSensitive?: boolean;
+    sourceString?: string;
+    searchWords?: Array<string>;
+    highlightStyle?: React.CSSProperties;
+    highlightClassName?: string;
+    component?: string;
+}
+declare class Highlight extends PureComponent<HighlightProps> {
+    static propTypes: {
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        autoEscape: PropTypes.Requireable<boolean>;
+        caseSensitive: PropTypes.Requireable<boolean>;
+        sourceString: PropTypes.Requireable<string>;
+        searchWords: PropTypes.Requireable<string[]>;
+        highlightStyle: PropTypes.Requireable<object>;
+        highlightClassName: PropTypes.Requireable<string>;
+        component: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        component: string;
+        autoEscape: boolean;
+        caseSensitive: boolean;
+        sourceString: string;
+    };
+    render(): (string | React.ReactElement<{
+        style: React.CSSProperties;
+        className: string;
+        key: string;
+    }, string | React.JSXElementConstructor<any>>)[];
+}
+export default Highlight;

package/lib/es/highlight/index.js

@@ -0,0 +1,56 @@
+import { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/highlight/constants';
+import { getHighLightTextHTML } from '../_utils/index';
+import '@douyinfe/semi-foundation/lib/es/highlight/highlight.css';
+const prefixCls = cssClasses.PREFIX;
+
+class Highlight extends PureComponent {
+  render() {
+    const {
+      searchWords,
+      sourceString,
+      component,
+      highlightClassName,
+      highlightStyle,
+      caseSensitive,
+      autoEscape
+    } = this.props;
+    const tagCls = cls({
+      ["".concat(prefixCls, "-tag")]: true
+    }, highlightClassName);
+    const option = {
+      highlightTag: component,
+      highlightClassName: tagCls,
+      highlightStyle,
+      caseSensitive,
+      autoEscape
+    };
+    return getHighLightTextHTML({
+      sourceString,
+      searchWords,
+      option
+    });
+  }
+
+}
+
+Highlight.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  autoEscape: PropTypes.bool,
+  caseSensitive: PropTypes.bool,
+  sourceString: PropTypes.string,
+  searchWords: PropTypes.arrayOf(PropTypes.string),
+  highlightStyle: PropTypes.object,
+  highlightClassName: PropTypes.string,
+  component: PropTypes.string
+};
+Highlight.defaultProps = {
+  component: 'mark',
+  autoEscape: true,
+  caseSensitive: false,
+  sourceString: ''
+};
+export default Highlight;

package/lib/es/image/image.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _isObject from "lodash/isObject";
 import _isBoolean from "lodash/isBoolean";
 
@@ -207,7 +208,8 @@ export default class Image extends BaseComponent {
       }), loadStatus !== "success" && this.renderExtra(), canPreview && /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, previewProps, {
         src: previewSrc,
         visible: previewVisible,
-        onVisibleChange: this.handlePreviewVisibleChange
+        onVisibleChange: this.handlePreviewVisibleChange,
+        crossOrigin: !_isUndefined(crossOrigin) ? crossOrigin : previewProps === null || previewProps === void 0 ? void 0 : previewProps.crossOrigin
       })))
     );
   }

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

@@ -4,4 +4,4 @@ import Preview from "./preview";
 import '@douyinfe/semi-foundation/lib/es/image/image.css';
 export default Image;
 export { PreviewInner, Preview, };
-export { ImageProps, PreviewImageProps, PreviewProps, } from "./interface";
+export type { ImageProps, PreviewImageProps, PreviewProps, MenuProps } from "./interface";

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

@@ -49,6 +49,7 @@ export interface PreviewProps extends BaseProps {
     disableDownload?: boolean;
     zIndex?: number;
     children?: ReactNode;
+    crossOrigin?: "anonymous" | "use-credentials";
     renderHeader?: (info: any) => ReactNode;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
     getPopupContainer?: () => HTMLElement;
@@ -146,6 +147,7 @@ export interface PreviewImageProps {
     ratio?: RatioType;
     disableDownload?: boolean;
     clickZoom?: number;
+    crossOrigin?: "anonymous" | "use-credentials";
     setRatio?: (type: RatioType) => void;
     onZoom?: (zoom: number) => void;
     onLoad?: (src: string) => void;

package/lib/es/image/previewImage.js

@@ -172,7 +172,8 @@ export default class PreviewImage extends BaseComponent {
   render() {
     const {
       src,
-      rotation
+      rotation,
+      crossOrigin
     } = this.props;
     const {
       loading,
@@ -206,7 +207,8 @@ export default class PreviewImage extends BaseComponent {
       onDragStart: e => e.preventDefault(),
       onLoad: this.handleLoad,
       onError: this.handleError,
-      style: imgStyle
+      style: imgStyle,
+      crossOrigin: crossOrigin
     }), loading && /*#__PURE__*/React.createElement(Spin, {
       size: "large",
       wrapperClassName: "".concat(preViewImgPrefixCls, "-spin")

package/lib/es/image/previewInner.d.ts

@@ -59,12 +59,17 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         maskClosable: boolean;
         viewerVisibleDelay: number;
     };
+    private bodyOverflow;
+    private scrollBarWidth;
+    private originBodyWidth;
     get adapter(): PreviewInnerAdapter<PreviewInnerProps, PreviewInnerStates>;
     timer: any;
     context: PreviewContextProps;
     foundation: PreviewInnerFoundation;
     constructor(props: PreviewInnerProps);
     static getDerivedStateFromProps(props: PreviewInnerProps, state: PreviewInnerStates): Partial<PreviewInnerStates>;
+    static getScrollbarWidth(): number;
+    componentDidMount(): void;
     componentDidUpdate(prevProps: PreviewInnerProps, prevState: PreviewInnerStates): void;
     componentWillUnmount(): void;
     isInGroup(): boolean;

package/lib/es/image/previewInner.js

@@ -100,11 +100,35 @@ export default class PreviewInner extends BaseComponent {
       direction: ""
     };
     this.foundation = new PreviewInnerFoundation(this.adapter);
+    this.bodyOverflow = '';
+    this.originBodyWidth = '100%';
+    this.scrollBarWidth = 0;
   }
 
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       getIsInGroup: () => this.isInGroup(),
+      disabledBodyScroll: () => {
+        const {
+          getPopupContainer
+        } = this.props;
+        this.bodyOverflow = document.body.style.overflow || '';
+
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+          document.body.style.overflow = 'hidden';
+          document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
+        }
+      },
+      enabledBodyScroll: () => {
+        const {
+          getPopupContainer
+        } = this.props;
+
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+          document.body.style.overflow = this.bodyOverflow;
+          document.body.style.width = this.originBodyWidth;
+        }
+      },
       notifyChange: (index, direction) => {
         const {
           onChange,
@@ -219,6 +243,23 @@ export default class PreviewInner extends BaseComponent {
     return willUpdateStates;
   }
 
+  static getScrollbarWidth() {
+    if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
+      return window.innerWidth - document.documentElement.clientWidth;
+    }
+
+    return 0;
+  }
+
+  componentDidMount() {
+    this.scrollBarWidth = PreviewInner.getScrollbarWidth();
+    this.originBodyWidth = document.body.style.width;
+
+    if (this.props.visible) {
+      this.foundation.beforeShow();
+    }
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (prevState.visible !== this.props.visible && this.props.visible) {
       mouseActiveTime = new Date().getTime();
@@ -254,6 +295,7 @@ export default class PreviewInner extends BaseComponent {
       style,
       infinite,
       zoomStep,
+      crossOrigin,
       prevTip,
       nextTip,
       zoomInTip,
@@ -322,6 +364,7 @@ export default class PreviewInner extends BaseComponent {
       ratio: ratio,
       zoomStep: zoomStep,
       rotation: rotation,
+      crossOrigin: crossOrigin,
       onError: this.onImageError,
       onLoad: this.onImageLoad
     }), showPrev &&

package/lib/es/index.d.ts

@@ -76,6 +76,7 @@ export { default as TreeSelect } from './treeSelect';
 export { default as Upload } from './upload';
 export { default as Typography } from './typography';
 export { default as Transfer } from './transfer';
+export { default as Highlight } from './highlight';
 export { default as LocaleProvider } from './locale/localeProvider';
 export { default as LocaleConsumer } from './locale/localeConsumer';
 /** Form */

package/lib/es/index.js

@@ -76,6 +76,7 @@ export { default as TreeSelect } from './treeSelect';
 export { default as Upload } from './upload';
 export { default as Typography } from './typography';
 export { default as Transfer } from './transfer';
+export { default as Highlight } from './highlight';
 export { default as LocaleProvider } from './locale/localeProvider';
 export { default as LocaleConsumer } from './locale/localeConsumer';
 /** Form */

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

@@ -94,7 +94,7 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
     private readonly modalRef;
     private bodyOverflow;
     private scrollBarWidth;
-    private originBodyWith;
+    private originBodyWidth;
     private _haveRendered;
     constructor(props: ModalReactProps);
     get adapter(): ModalAdapter;

package/lib/es/modal/Modal.js

@@ -188,7 +188,7 @@ class Modal extends BaseComponent {
     this.modalRef = /*#__PURE__*/React.createRef();
     this.bodyOverflow = '';
     this.scrollBarWidth = 0;
-    this.originBodyWith = '100%';
+    this.originBodyWidth = '100%';
   }
 
   get adapter() {
@@ -202,7 +202,7 @@ class Modal extends BaseComponent {
 
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
-          document.body.style.width = "calc(".concat(this.originBodyWith || '100%', " - ").concat(this.scrollBarWidth, "px)");
+          document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
         }
       },
       enabledBodyScroll: () => {
@@ -212,7 +212,7 @@ class Modal extends BaseComponent {
 
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = this.bodyOverflow;
-          document.body.style.width = this.originBodyWith;
+          document.body.style.width = this.originBodyWidth;
         }
       },
       notifyCancel: e => {
@@ -269,7 +269,7 @@ class Modal extends BaseComponent {
 
   componentDidMount() {
     this.scrollBarWidth = Modal.getScrollbarWidth();
-    this.originBodyWith = document.body.style.width;
+    this.originBodyWidth = document.body.style.width;
 
     if (this.props.visible) {
       this.foundation.beforeShow();

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

@@ -69,5 +69,5 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     wrapTooltip: (node: React.ReactNode) => JSX.Element;
     handleClick: (e: React.MouseEvent) => void;
     handleKeyPress: (e: React.KeyboardEvent) => void;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactNode;
 }

package/lib/es/navigation/Item.js

@@ -247,6 +247,15 @@ export default class NavItem extends BaseComponent {
       itemDom = this.wrapTooltip(itemDom);
     }
 
+    if (typeof this.context.renderWrapper === 'function') {
+      return this.context.renderWrapper({
+        itemElement: itemDom,
+        isSubNav: isSubNav,
+        isInSubNav: isInSubNav,
+        props: this.props
+      });
+    }
+
     return itemDom;
   }
 

package/lib/es/navigation/SubNav.js

@@ -272,7 +272,8 @@ export default class SubNav extends BaseComponent {
       isCollapsed,
       subNavCloseDelay,
       subNavOpenDelay,
-      prefixCls
+      prefixCls,
+      getPopupContainer
     } = this.context;
     const isOpen = this.adapter.getIsOpen();
     const openKeysIsControlled = this.adapter.getOpenKeysIsControlled();
@@ -289,6 +290,10 @@ export default class SubNav extends BaseComponent {
       dropdownProps.visible = isOpen;
     }
 
+    if (getPopupContainer) {
+      dropdownProps.getPopupContainer = getPopupContainer;
+    }
+
     if (isCollapsed || mode === strings.MODE_HORIZONTAL) {
       // Do not show dropdown when disabled
       _elem = !disabled ? /*#__PURE__*/React.createElement(Dropdown, Object.assign({

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

@@ -1,5 +1,5 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import React from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { NavigationAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/foundation';
 import SubNav, { SubNavProps } from './SubNav';
@@ -49,6 +49,7 @@ export interface NavProps extends BaseProps {
     toggleIconPosition?: string;
     tooltipHideDelay?: number;
     tooltipShowDelay?: number;
+    getPopupContainer?: () => HTMLElement;
     onClick?: (data: {
         itemKey: React.ReactText;
         domEvent: MouseEvent;
@@ -63,6 +64,12 @@ export interface NavProps extends BaseProps {
         isOpen: boolean;
     }) => void;
     onSelect?: (data: OnSelectedData) => void;
+    renderWrapper?: ({ itemElement, isSubNav, isInSubNav, props }: {
+        itemElement: ReactElement;
+        isInSubNav: boolean;
+        isSubNav: boolean;
+        props: NavItemProps | SubNavProps;
+    }) => ReactNode;
 }
 export interface NavState {
     isCollapsed: boolean;
@@ -107,6 +114,7 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
         header: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         footer: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         limitIndent: PropTypes.Requireable<boolean>;
+        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         subNavCloseDelay: number;

package/lib/es/navigation/index.js

@@ -205,7 +205,9 @@ class Nav extends BaseComponent {
       footer,
       header,
       toggleIconPosition,
-      limitIndent
+      limitIndent,
+      renderWrapper,
+      getPopupContainer
     } = this.props;
     const {
       selectedKeys,
@@ -310,7 +312,9 @@ class Nav extends BaseComponent {
         locale,
         prefixCls,
         toggleIconPosition,
-        limitIndent
+        limitIndent,
+        renderWrapper,
+        getPopupContainer
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: finalCls,
@@ -371,7 +375,8 @@ Nav.propTypes = {
   prefixCls: PropTypes.string,
   header: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
   footer: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
-  limitIndent: PropTypes.bool
+  limitIndent: PropTypes.bool,
+  getPopupContainer: PropTypes.func
 };
 Nav.defaultProps = {
   subNavCloseDelay: numbers.DEFAULT_SUBNAV_CLOSE_DELAY,

package/lib/es/navigation/nav-context.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { NavProps } from './index';
+import type { NavProps } from './index';
 import { Locale } from '../locale/interface';
+import type { DropdownProps } from '../dropdown';
 export interface NavContextType {
     isCollapsed?: boolean;
     mode?: NavProps['mode'];
@@ -18,6 +19,8 @@ export interface NavContextType {
     subNavCloseDelay?: NavProps['subNavCloseDelay'];
     subNavOpenDelay?: NavProps['subNavOpenDelay'];
     canUpdateOpenKeys?: boolean;
+    renderWrapper?: NavProps['renderWrapper'];
+    getPopupContainer?: DropdownProps['getPopupContainer'];
 }
 declare const NavContext: React.Context<NavContextType>;
 export default NavContext;

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

@@ -4,6 +4,7 @@ import { ContextValue } from '../configProvider/context';
 import SelectFoundation, { SelectAdapter } from '@douyinfe/semi-foundation/lib/es/select/foundation';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { PopoverProps } from '../popover/index';
+import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
 import { InputProps } from '../input/index';
 import Option, { OptionProps } from './option';
 import OptionGroup from './optionGroup';
@@ -233,6 +234,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     clickOutsideHandler: (e: MouseEvent) => void;
     foundation: SelectFoundation;
     context: ContextValue;
+    eventManager: Event;
     constructor(props: SelectProps);
     setOptionContainerEl: (node: HTMLDivElement) => {
         current: HTMLDivElement;

package/lib/es/select/index.js

@@ -20,6 +20,7 @@ import TagGroup from '../tag/group';
 import LocaleConsumer from '../locale/localeConsumer';
 import Popover from '../popover/index';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
+import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
 import { FixedSizeList as List } from 'react-window';
 import { getOptionsFromGroup } from './utils';
 import VirtualRow from './virtualRow';
@@ -128,6 +129,7 @@ class Select extends BaseComponent {
     this.onMouseLeave = this.onMouseLeave.bind(this);
     this.renderOption = this.renderOption.bind(this);
     this.onKeyPress = this.onKeyPress.bind(this);
+    this.eventManager = new Event();
     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.');
@@ -223,6 +225,10 @@ class Select extends BaseComponent {
       }
     };
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, super.adapter), keyboardAdapter), filterAdapter), multipleAdapter), {
+      on: (eventName, eventCallback) => this.eventManager.on(eventName, eventCallback),
+      off: eventName => this.eventManager.off(eventName),
+      once: (eventName, eventCallback) => this.eventManager.once(eventName, eventCallback),
+      emit: eventName => this.eventManager.emit(eventName),
       // Collect all subitems, each item is visible by default when collected, and is not selected
       getOptionsFromChildren: function () {
         let children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.children;
@@ -1075,7 +1081,8 @@ class Select extends BaseComponent {
       spacing: spacing,
       stopPropagation: stopPropagation,
       disableArrowKeyDown: true,
-      onVisibleChange: status => this.handlePopoverVisibleChange(status)
+      onVisibleChange: status => this.handlePopoverVisibleChange(status),
+      afterClose: () => this.foundation.handlePopoverClose()
     }, selection);
   }
 

package/lib/es/timePicker/TimePicker.js

@@ -344,7 +344,6 @@ export default class TimePicker extends BaseComponent {
       outerProps.onClick = this.openPanel;
     }
 
-    console.log("===>", disabled ? false : open, motion);
     return /*#__PURE__*/React.createElement("div", Object.assign({
       ref: this.setTimePickerRef,
       className: classNames({