@douyinfe/semi-ui 2.9.0-beta.0 → 2.9.1

package/dropdown/context.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 
-const DropdownContext = React.createContext({
+export interface DropdownContextType {
+    level?: number;
+    showTick?: boolean;
+}
+
+const DropdownContext = React.createContext<DropdownContextType>({
     level: 0,
 });
 export default DropdownContext;

package/dropdown/dropdownItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses as css, strings } from '@douyinfe/semi-foundation/dropdown/constants';
-import DropdownContext from './context';
+import DropdownContext, { DropdownContextType } from './context';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { IconTick } from '@douyinfe/semi-icons';
 import { noop } from 'lodash';
@@ -43,6 +43,7 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
     };
 
     static contextType = DropdownContext;
+    context: DropdownContextType;
 
     static defaultProps = {
         disabled: false,

package/dropdown/dropdownTitle.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/dropdown/constants';
 import cls from 'classnames';
-import DropdownContext from './context';
+import DropdownContext, { DropdownContextType } from './context';
 import { BaseProps } from '../_base/baseComponent';
 
 const prefixCls = cssClasses.PREFIX;
@@ -17,6 +17,7 @@ class DropdownTitle extends PureComponent<DropdownTitleProps> {
     };
 
     static contextType = DropdownContext;
+    context: DropdownContextType;
 
     render() {
         const { className, style, children } = this.props;

package/dropdown/index.tsx

@@ -13,7 +13,7 @@ import DropdownItem, { DropdownItemProps } from './dropdownItem';
 import DropdownDivider, { DropdownDividerProps } from './dropdownDivider';
 import DropdownTitle, { DropdownTitleProps } from './dropdownTitle';
 
-import DropdownContext from './context';
+import DropdownContext, { DropdownContextType } from './context';
 import '@douyinfe/semi-foundation/dropdown/dropdown.scss';
 import { noop, get } from 'lodash';
 import { Motion } from '../_base/base';
@@ -118,6 +118,8 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         this.foundation = new Foundation(this.adapter);
     }
 
+    context: DropdownContextType;
+
     get adapter() {
         return {
             ...super.adapter,

package/empty/index.tsx

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

package/form/arrayField.tsx

@@ -73,6 +73,7 @@ class ArrayFieldComponent extends Component<ArrayFieldProps, ArrayFieldState> {
     cacheFieldValues: any[];
     shouldUseInitValue: boolean;
     cacheUpdateKey: string;
+    context: FormUpdaterContextType;
 
     constructor(props: ArrayFieldProps, context: FormUpdaterContextType) {
         super(props, context);

package/form/baseForm.tsx

@@ -18,7 +18,8 @@ import ErrorMessage from './errorMessage';
 import FormInputGroup from './group';
 import { noop } from 'lodash';
 import '@douyinfe/semi-foundation/form/form.scss';
-import { FormInput,
+import {
+    FormInput,
     FormInputNumber,
     FormTextArea,
     FormSelect,
@@ -206,7 +207,7 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
             values: formState.values,
         };
         if (component) {
-            return React.createElement(component, props, children);
+            return React.createElement(component, props);
         }
         if (render) {
             return render(props);

package/form/group.tsx

@@ -11,6 +11,7 @@ import { FormUpdaterContext } from './context';
 import { useFormState } from './hooks/index';
 import InputGroup, { InputGroupProps as BacisInputGroupProps } from '../input/inputGroup';
 import { BaseFormProps, FormState } from './interface';
+import { FormUpdaterContextType } from '@douyinfe/semi-foundation/form/interface';
 
 interface GroupErrorProps {
     showValidateIcon?: boolean;
@@ -44,6 +45,7 @@ const GroupError = (props: GroupErrorProps) => {
 
 class FormInputGroup extends Component<InputGroupProps> {
     static contextType = FormUpdaterContext;
+    context: FormUpdaterContextType;
     renderLabel(label: LabelProps, formProps: BaseFormProps) {
         if (label) {
             if (isString(label)) {

package/form/hoc/withField.tsx

@@ -15,6 +15,7 @@ import { Col } from '../../grid';
 import { CallOpts, WithFieldOption } from '@douyinfe/semi-foundation/form/interface';
 import { CommonFieldProps, CommonexcludeType } from '../interface';
 import { Subtract } from 'utility-types';
+import { noop } from "lodash";
 
 const prefix = cssClasses.PREFIX;
 
@@ -121,6 +122,7 @@ function withField<
         const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
         const rulesRef = useRef(rules);
+        const validateRef = useRef(validate);
 
         // notNotify is true means that the onChange of the Form does not need to be triggered
         // notUpdate is true means that this operation does not need to trigger the forceUpdate
@@ -221,7 +223,7 @@ function withField<
                 let maybePromisedErrors;
                 // let errorThrowSync;
                 try {
-                    maybePromisedErrors = validate(val, values);
+                    maybePromisedErrors = validateRef.current(val, values);
                 } catch (err) {
                     // error throw by syncValidate
                     maybePromisedErrors = err;
@@ -258,7 +260,7 @@ function withField<
             if (transform) {
                 finalVal = transform(val);
             }
-            if (validate) {
+            if (validateRef.current) {
                 return _validate(finalVal, updater.getValue(), callOpts);
             } else if (latestRules) {
                 return _validateInternal(finalVal, callOpts);
@@ -357,7 +359,8 @@ function withField<
         // avoid hooks capture value, fixed issue 346
         useLayoutEffect(() => {
             rulesRef.current = rules;
-        }, [rules]);
+            validateRef.current = validate;
+        }, [rules, validate]);
 
         // exec validate once when trigger inlcude 'mount'
         useLayoutEffect(() => {
@@ -442,11 +445,11 @@ function withField<
             if (helpText) {
                 newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
             }
-            
+
             if (extraText) {
                 newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
             }
-            
+
             if (status === 'error') {
                 newProps['aria-errormessage'] = errorMessageId;
                 newProps['aria-invalid'] = true;
@@ -580,7 +583,7 @@ function withField<
         }
     };
     SemiField = forwardRef(SemiField);
-    (SemiField as React.SFC).displayName = getDisplayName(Component);
+    (SemiField as React.FC).displayName = getDisplayName(Component);
     return SemiField as any;
 }
 

package/form/label.tsx

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

package/form/section.tsx

@@ -10,7 +10,7 @@ export interface SectionProps {
     className?: string;
     style?: React.CSSProperties;
     text?: React.ReactNode | string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
 
 export default class Section extends PureComponent<SectionProps> {

package/form/slot.tsx

@@ -59,9 +59,11 @@ const FormSlot = (props: SlotProps) => {
             // do nothing
             break;
         case isString(label) || isNumber(label):
+            // @ts-ignore skip type check, the actual type is already determined
             label = { text: label };
             break;
         case React.isValidElement(label):
+            // @ts-ignore skip type check, the actual type is already determined
             label = { text: label };
             break;
         default:

package/grid/col.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RowContext } from './row';
+import { RowContext, RowContextType } from './row';
 import classnames from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/grid/constants';
 
@@ -59,6 +59,8 @@ class Col extends React.Component<ColProps> {
         prefixCls: cssClasses.PREFIX,
     };
 
+    context: RowContextType;
+
     render() {
         const { props } = this;
         const { prefixCls, span, order, offset, push, pull, className, children, ...others } = props;

package/grid/row.tsx

@@ -10,7 +10,11 @@ import { registerMediaQuery } from '../_utils';
 
 const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 
-export const RowContext = React.createContext<{ gutters: Gutter | [Gutter, Gutter] }>(null);
+export interface RowContextType {
+    gutters?: Gutter | [Gutter, Gutter];
+}
+
+export const RowContext = React.createContext<RowContextType>(null);
 
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 

package/input/__test__/input.test.js

@@ -113,9 +113,18 @@ describe('Input', () => {
   });
 
   it('input password mode', () => {
-    const inputMode = mount(<Input mode="password" />);
-    const input = inputMode.find('input');
-    expect(input.instance().type).toEqual('password');
+    const inputMode = mount(<Input />);
+    expect(inputMode.find('input').instance().type).toEqual('text');
+    inputMode.setProps({ mode: 'password' }) ;
+    expect(inputMode.find('input').instance().type).toEqual('password');
+    inputMode.setProps({ mode: '' }) ;
+    expect(inputMode.find('input').instance().type).toEqual('text');
+  });
+
+  it('input password click eyes icon', () => {
+    const inputMode = mount(<Input mode='password' defaultValue="123456" autofocus/>);
+    inputMode.simulate('mouseEnter', {}).find(`.${BASE_CLASS_PREFIX}-input-modebtn`).simulate('click');
+    expect(inputMode.find('input').instance().type).toEqual('text');
   });
 
   it('input controlled mode', () => {

package/input/__test__/textArea.test.js

@@ -116,4 +116,57 @@ describe('TextArea', () => {
         const counter2 = textarea.find(`.${BASE_CLASS_PREFIX}-input-textarea-counter`);
         expect(counter2.hasClass('semi-input-textarea-counter-exceed')).toEqual(false);
     });
+
+    it('test minLength', () => {
+        let inputValue = '💖💖💖';
+        let inputValue1 = '💖💖💖💖';
+        let minLength = 4;
+        let event = { target: { value: inputValue } };
+        let event1 = { target: { value: inputValue1 } };
+
+        let onChange = value => {
+        console.log(value);
+        };
+        let spyOnChange = sinon.spy(onChange);
+        const textArea = mount(<TextArea onChange={spyOnChange} minLength={minLength} getValueLength={getValueLength} />);
+        const textAreaDom = textArea.find('textarea');
+
+        textAreaDom.simulate('change', event);
+        expect(spyOnChange.calledOnce).toBe(true);
+        expect(spyOnChange.calledWithMatch(textAreaDom)).toBe(true);
+        expect(textAreaDom.instance().minLength).toEqual(inputValue.length + (minLength - getValueLength(inputValue)));
+
+        textAreaDom.simulate('change', event1);
+        expect(spyOnChange.calledWithMatch(textAreaDom)).toBe(true);
+        expect(textAreaDom.instance().minLength).toEqual(minLength)
+    });
+
+    it('test maxLength + truncateValue', () => {
+        function truncateValue(inputValue, maxLength, getValueLength) {
+            let event = { target: { value: inputValue } };
+            let onChange = value => {
+                console.log(value);
+            };
+
+            let spyOnChange = sinon.spy(onChange);
+            const textArea = mount(<TextArea onChange={spyOnChange} maxLength={maxLength} getValueLength={getValueLength} />);
+            const textAreaDom = textArea.find('textarea');
+            textAreaDom.simulate('change', event);
+            expect(spyOnChange.calledOnce).toBe(true);
+            return textAreaDom.instance().value;
+        }
+
+        const testCases = [
+        // 自定义valueLength
+            ['Semi', 5, getValueLength, 'Semi'],
+            ['Semi Design', 4, getValueLength, 'Semi'],
+            ['💖💖💖💖💖💖💖💖💖💖👨👩👧👦', 10, getValueLength, '💖💖💖💖💖💖💖💖💖💖'],
+            ['💖', -1, getValueLength, ''],
+            ['🆗', 1, getValueLength, '🆗'],
+        ];
+
+        for (let [value, length, fc, result] of testCases) {
+            expect(truncateValue(value, length, fc)).toBe(result);
+        }
+  })
 })

package/layout/Sider.tsx

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/layout/constants';
 import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
-import LayoutContext from './layout-context';
+import LayoutContext, { ContextType } from './layout-context';
 import { registerMediaQuery } from '../_utils';
 
 const responsiveMap: ResponsiveMap = {
@@ -38,6 +38,7 @@ export interface SiderProps {
     prefixCls?: string;
     style?: CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
     breakpoint?: Array<keyof ResponsiveMap>;
     onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
     'aria-label'?: React.AriaAttributes['aria-label'];
@@ -62,6 +63,7 @@ class Sider extends React.PureComponent<SiderProps> {
     static contextType = LayoutContext;
 
     unRegisters: Array<() => void> = [];
+    context: ContextType;
     uniqueId = '';
 
     constructor(props: SiderProps) {

package/layout/index.tsx

@@ -32,6 +32,7 @@ export interface BasicProps {
     className?: string;
     tagName?: keyof HTMLElementTagNameMap;
     type?: string;
+    children?: React.ReactNode | undefined;
 }
 
 class Basic extends React.PureComponent<BasicProps> {
@@ -60,6 +61,7 @@ export interface BasicLayoutProps {
     prefixCls?: string;
     style?: CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
     hasSider?: boolean;
     tagName?: keyof HTMLElementTagNameMap;
 }

package/layout/layout-context.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 
-export interface ContextType{
+export interface ContextType {
     siderHook: {
         addSider: (id: string) => void;
         removeSider: (id: string) => void;

package/lib/cjs/_base/baseComponent.d.ts

@@ -2,7 +2,7 @@
  * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  */
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import { DefaultAdapter } from '@douyinfe/semi-foundation/lib/cjs/base/foundation';
 import { VALIDATE_STATUS } from '@douyinfe/semi-foundation/lib/cjs/base/constants';
 import { ArrayElement } from './base';
@@ -10,6 +10,7 @@ export declare type ValidateStatus = ArrayElement<typeof VALIDATE_STATUS>;
 export interface BaseProps {
     style?: React.CSSProperties;
     className?: string;
+    children?: ReactNode | undefined | any;
 }
 export default class BaseComponent<P extends BaseProps = {}, S = {}> extends Component<P, S> {
     static propTypes: {};

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

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { ContextValue } from '../configProvider/context';
 import '@douyinfe/semi-foundation/lib/cjs/_portal/portal.css';
 export interface PortalProps {
     children: React.ReactNode;
@@ -13,7 +14,7 @@ export interface PortalState {
     container: undefined | HTMLElement;
 }
 declare class Portal extends PureComponent<PortalProps, PortalState> {
-    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static contextType: React.Context<ContextValue>;
     static defaultProps: {
         prefixCls: string;
     };
@@ -25,6 +26,7 @@ declare class Portal extends PureComponent<PortalProps, PortalState> {
         didUpdate: PropTypes.Requireable<(...args: any[]) => any>;
     };
     el: HTMLElement;
+    context: ContextValue;
     constructor(props: PortalProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: PortalProps): void;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/anchor/constants';
 import AnchorFoundation, { AnchorAdapter } from '@douyinfe/semi-foundation/lib/cjs/anchor/foundation';
@@ -10,6 +10,7 @@ export { LinkProps } from './link';
 export interface AnchorProps {
     autoCollapse?: boolean;
     className?: string;
+    children?: ReactNode | undefined;
     defaultAnchor?: string;
     getContainer?: () => HTMLElement | Window;
     maxHeight?: string | number;

package/lib/cjs/anchor/link.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
 import LinkFoundation, { LinkAdapter } from '@douyinfe/semi-foundation/lib/cjs/anchor/linkFoundation';
@@ -7,6 +7,7 @@ export interface LinkProps {
     href?: string;
     title?: string | React.ReactNode;
     className?: string;
+    children?: ReactNode | undefined;
     style?: React.CSSProperties;
     disabled?: boolean;
 }
@@ -34,7 +35,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     componentDidMount(): void;
     componentDidUpdate(prevProps: LinkProps): void;
     componentWillUnmount(): void;
-    renderTitle: () => React.ReactNode;
+    renderTitle: () => string | number | boolean | React.ReactFragment | JSX.Element;
     renderChildren: () => React.ReactNode;
     render(): JSX.Element;
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/cjs/autoComplete/foundation';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
@@ -27,7 +27,7 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode | undefined;
     data?: T[];
     disabled?: boolean;
     defaultOpen?: boolean;

package/lib/cjs/avatar/avatarGroup.d.ts

@@ -15,7 +15,7 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
         renderMore: PropTypes.Requireable<(...args: any[]) => any>;
         overlapFrom: PropTypes.Requireable<string>;
     };
-    getAllAvatars(): React.ReactNodeArray;
+    getAllAvatars(): any[];
     getMergeAvatars(avatars: React.ReactNode[]): React.ReactNode[];
     renderMoreAvatar(restNumber: number, restAvatars: React.ReactNode[]): JSX.Element;
     render(): JSX.Element;

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;
+    children?: React.ReactNode | undefined;
     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;
+    children?: React.ReactNode | undefined;
     shape?: AvatarGroupShape;
     size?: AvatarGroupSize;
     overlapFrom?: AvatarGroupOverlapFrom;

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

@@ -10,6 +10,7 @@ export interface BackTopProps {
     onClick?: (e: React.MouseEvent) => void;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
 }
 export interface BackTopState {
     visible?: boolean;

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

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { ContextValue } from '../configProvider/context';
 import '@douyinfe/semi-foundation/lib/cjs/badge/badge.css';
 export declare type BadgeType = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning';
 export declare type BadgeTheme = 'solid' | 'light' | 'inverted';
@@ -13,13 +14,13 @@ export interface BadgeProps {
     overflowCount?: number;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode;
     onMouseEnter?: (e: React.MouseEvent) => any;
     onMouseLeave?: (e: React.MouseEvent) => any;
     onClick?: (e: React.MouseEvent) => any;
+    children?: React.ReactNode | undefined;
 }
 export default class Badge extends PureComponent<BadgeProps> {
-    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static contextType: React.Context<ContextValue>;
     static propTypes: {
         count: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         dot: PropTypes.Requireable<boolean>;
@@ -43,5 +44,6 @@ export default class Badge extends PureComponent<BadgeProps> {
         onMouseEnter: () => (...args: any[]) => void;
         onMouseLeave: () => (...args: any[]) => void;
     };
+    context: ContextValue;
     render(): JSX.Element;
 }

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

@@ -7,6 +7,7 @@ export declare type Type = 'info' | 'danger' | 'warning' | 'success';
 export interface BannerProps {
     type?: Type;
     className?: string;
+    children?: React.ReactNode | undefined;
     fullMode?: boolean;
     title?: React.ReactNode;
     description?: React.ReactNode;
@@ -44,7 +45,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     remove: React.MouseEventHandler;
-    renderCloser(): React.ReactNode;
+    renderCloser(): string | number | boolean | React.ReactFragment | JSX.Element;
     renderIcon(): JSX.Element;
     render(): JSX.Element;
 }

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { showToolTipProps } from './index';
 import { BreadcrumbItemInfo } from './item';
-export interface BreadContextProps {
+export interface BreadContextType {
     onClick?: (info: BreadcrumbItemInfo, event: React.MouseEvent) => void;
     showTooltip?: boolean | showToolTipProps;
     compact?: boolean;
     separator?: string | React.ReactNode;
 }
-declare const BreadContext: React.Context<BreadContextProps>;
+declare const BreadContext: React.Context<BreadContextType>;
 export default BreadContext;

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

@@ -5,7 +5,7 @@ import '@douyinfe/semi-foundation/lib/cjs/breadcrumb/breadcrumb.css';
 import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import BreadcrumbItem, { RouteProps, BreadcrumbItemInfo } from './item';
-import { BreadContextProps } from './bread-context';
+import { BreadContextType } from './bread-context';
 import { TooltipProps } from '../tooltip';
 export { RouteProps, BreadcrumbItemProps, BreadcrumbItemInfo } from './item';
 export interface showToolTipProps {
@@ -33,7 +33,7 @@ interface BreadcrumbState {
     isCollapsed: boolean;
 }
 declare class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
-    static contextType: React.Context<BreadContextProps>;
+    static contextType: React.Context<BreadContextType>;
     static Item: typeof BreadcrumbItem;
     static propTypes: {
         routes: propTypes.Requireable<any[]>;

package/lib/cjs/breadcrumb/item.d.ts

@@ -3,6 +3,7 @@ import propTypes from 'prop-types';
 import { BreadcrumbItemAdapter, BreadcrumbItemInfo, Route } from '@douyinfe/semi-foundation/lib/cjs/breadcrumb/itemFoundation';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
+import { BreadContextType } from './bread-context';
 export { BreadcrumbItemInfo };
 export interface RouteProps extends Route {
     icon?: React.ReactNode;
@@ -20,7 +21,7 @@ export interface BreadcrumbItemProps extends BaseProps {
 declare type BreadcrumbItemState = Record<string, never>;
 export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, BreadcrumbItemState> {
     static isBreadcrumbItem: boolean;
-    static contextType: React.Context<import("./bread-context").BreadContextProps>;
+    static contextType: React.Context<BreadContextType>;
     static propTypes: {
         onClick: propTypes.Requireable<(...args: any[]) => any>;
         route: propTypes.Requireable<string | object>;
@@ -36,12 +37,23 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         onClick: typeof noop;
         shouldRenderSeparator: boolean;
     };
+    context: BreadContextType;
     get adapter(): BreadcrumbItemAdapter<BreadcrumbItemProps, BreadcrumbItemState>;
     constructor(props: BreadcrumbItemProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    renderIcon: () => {};
-    getTooltipOpt: () => any;
+    renderIcon: () => string | number | boolean | React.ReactFragment | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    getTooltipOpt: () => {
+        width: number;
+        ellipsisPos: string;
+        opts: {
+            autoAdjustOverflow: boolean;
+            position: string;
+        };
+    } | {
+        width: number;
+        ellipsisPos: string;
+    };
     getItemInfo: () => BreadcrumbItemInfo;
     renderBreadItem: () => JSX.Element;
     renderItem: () => React.DetailedReactHTMLElement<{