@douyinfe/semi-ui 2.35.0 → 2.36.0-beta.0

package/lib/es/calendar/weekCalendar.d.ts

@@ -20,7 +20,9 @@ export default class WeekCalendar extends BaseComponent<WeekCalendarProps, WeekC
         markWeekend: PropTypes.Requireable<boolean>;
         scrollTop: PropTypes.Requireable<number>;
         renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
+        renderDateDisplay: PropTypes.Requireable<(...args: any[]) => any>;
         dateGridRender: PropTypes.Requireable<(...args: any[]) => any>;
+        allDayEventsRender: PropTypes.Requireable<(...args: any[]) => any>;
         width: PropTypes.Requireable<NonNullable<string | number>>;
         height: PropTypes.Requireable<NonNullable<string | number>>;
         style: PropTypes.Requireable<object>;
@@ -46,7 +48,7 @@ export default class WeekCalendar extends BaseComponent<WeekCalendarProps, WeekC
     handleClick: (e: React.MouseEvent, val: [Date, number, number, number]) => void;
     renderDayGrid: () => JSX.Element[];
     renderHeader: (dateFnsLocale: any) => JSX.Element;
-    renderAllDayEvents: (events: ParsedRangeEvent[]) => JSX.Element[];
+    renderAllDayEvents: (events: ParsedRangeEvent[]) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | JSX.Element[];
     renderAllDay: (locale: Locale['Calendar']) => JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/calendar/weekCalendar.js

@@ -1,5 +1,5 @@
 import _isEqual from "lodash/isEqual";
-import React from 'react';
+import React, { Fragment } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import CalendarFoundation from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
@@ -66,7 +66,8 @@ export default class WeekCalendar extends BaseComponent {
     this.renderHeader = dateFnsLocale => {
       const {
         markWeekend,
-        displayValue
+        displayValue,
+        renderDateDisplay
       } = this.props;
       const {
         month,
@@ -92,16 +93,21 @@ export default class WeekCalendar extends BaseComponent {
           [`${cssClasses.PREFIX}-today`]: isToday,
           [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend
         });
+        const dateContent = renderDateDisplay ? renderDateDisplay(date) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: `${cssClasses.PREFIX}-today-date`
+        }, dayString), /*#__PURE__*/React.createElement("span", null, weekday));
         return /*#__PURE__*/React.createElement("li", {
           key: `${date.toString()}-weekheader`,
           className: listCls
-        }, /*#__PURE__*/React.createElement("span", {
-          className: `${cssClasses.PREFIX}-today-date`
-        }, dayString), /*#__PURE__*/React.createElement("span", null, weekday));
+        }, dateContent);
       }))));
     };
 
     this.renderAllDayEvents = events => {
+      if (this.props.allDayEventsRender) {
+        return this.props.allDayEventsRender(this.props.events);
+      }
+
       const list = events.map((event, ind) => {
         const {
           leftPos,
@@ -126,13 +132,15 @@ export default class WeekCalendar extends BaseComponent {
     };
 
     this.renderAllDay = locale => {
+      const {
+        allDayEventsRender
+      } = this.props;
       const {
         allDay
       } = this.state.parsedEvents;
       const parsed = this.foundation.parseWeeklyAllDayEvents(allDay);
-      const maxRowHeight = calcRowHeight(parsed);
-      const style = {
-        height: `${maxRowHeight}em`
+      const style = allDayEventsRender ? null : {
+        height: `${calcRowHeight(parsed)}em`
       };
       const {
         markWeekend
@@ -216,7 +224,7 @@ export default class WeekCalendar extends BaseComponent {
     const prevEventKeys = prevState.cachedKeys;
     const nowEventKeys = this.props.events.map(event => event.key);
 
-    if (!_isEqual(prevEventKeys, nowEventKeys)) {
+    if (!_isEqual(prevEventKeys, nowEventKeys) || !_isEqual(prevProps.displayValue, this.props.displayValue)) {
       this.foundation.parseWeeklyEvents();
     }
   }
@@ -268,7 +276,9 @@ WeekCalendar.propTypes = {
   markWeekend: PropTypes.bool,
   scrollTop: PropTypes.number,
   renderTimeDisplay: PropTypes.func,
+  renderDateDisplay: PropTypes.func,
   dateGridRender: PropTypes.func,
+  allDayEventsRender: PropTypes.func,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   style: PropTypes.object,

package/lib/es/datePicker/datePicker.js

@@ -170,7 +170,9 @@ export default class DatePicker extends BaseComponent {
         density,
         presetPosition,
         yearAndMonthOpts,
-        type
+        type,
+        startYear,
+        endYear
       } = this.props;
       const date = this.state.value[0];
       const year = {
@@ -210,7 +212,9 @@ export default class DatePicker extends BaseComponent {
         renderQuickControls: this.renderQuickControls(),
         renderDateInput: this.renderDateInput(),
         type: type,
-        yearAndMonthOpts: yearAndMonthOpts
+        yearAndMonthOpts: yearAndMonthOpts,
+        startYear: startYear,
+        endYear: endYear
       });
     };
 
@@ -608,7 +612,9 @@ export default class DatePicker extends BaseComponent {
       triggerRender,
       insetInput,
       presetPosition,
-      yearAndMonthOpts
+      yearAndMonthOpts,
+      startYear,
+      endYear
     } = this.props;
     const {
       cachedSelectedValue,
@@ -652,7 +658,9 @@ export default class DatePicker extends BaseComponent {
       presetPosition: presetPosition,
       renderQuickControls: this.renderQuickControls(),
       renderDateInput: this.renderDateInput(),
-      yearAndMonthOpts: yearAndMonthOpts
+      yearAndMonthOpts: yearAndMonthOpts,
+      startYear: startYear,
+      endYear: endYear
     });
   }
 

package/lib/es/datePicker/monthsGrid.js

@@ -474,7 +474,9 @@ export default class MonthsGrid extends BaseComponent {
       locale,
       localeCode,
       density,
-      yearAndMonthOpts
+      yearAndMonthOpts,
+      startYear,
+      endYear
     } = this.props;
     const y = pickerDate.getFullYear();
     const m = pickerDate.getMonth() + 1;
@@ -502,7 +504,9 @@ export default class MonthsGrid extends BaseComponent {
         }
       },
       density: density,
-      yearAndMonthOpts: yearAndMonthOpts
+      yearAndMonthOpts: yearAndMonthOpts,
+      startYear: startYear,
+      endYear: endYear
     });
   }
 

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

@@ -25,6 +25,8 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
+        startYear: PropTypes.Requireable<number>;
+        endYear: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         disabledDate: {

package/lib/es/datePicker/yearAndMonth.js

@@ -61,7 +61,7 @@ class YearAndMonth extends BaseComponent {
       right: currentMonth.right || currentLeftMonth + 1
     };
     this.state = {
-      years: getYears().map(year => ({
+      years: getYears(props.startYear, props.endYear).map(year => ({
         value: year,
         year
       })),
@@ -308,7 +308,9 @@ YearAndMonth.propTypes = {
   presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
   renderQuickControls: PropTypes.node,
   renderDateInput: PropTypes.node,
-  type: PropTypes.oneOf(strings.TYPE_SET)
+  type: PropTypes.oneOf(strings.TYPE_SET),
+  startYear: PropTypes.number,
+  endYear: PropTypes.number
 };
 YearAndMonth.defaultProps = {
   disabledDate: _stubFalse,

package/lib/es/input/textarea.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ValidateStatus } from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/input/textarea.css';
-declare type OmitTextareaAttr = 'onChange' | 'onInput' | 'prefix' | 'size' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp';
+declare type OmitTextareaAttr = 'onChange' | 'onInput' | 'prefix' | 'size' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onResize';
 export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, OmitTextareaAttr> {
     autosize?: boolean;
     borderless?: boolean;

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

@@ -6,6 +6,7 @@ import { BaseProps } from '../_base/baseComponent';
 export interface NavFooterProps extends BaseProps {
     collapseButton?: React.ReactNode;
     collapseText?: (collapsed?: boolean) => React.ReactNode;
+    onClick?: (event: React.MouseEvent) => void;
 }
 export default class NavFooter extends PureComponent<NavFooterProps> {
     static contextType: React.Context<NavContextType>;
@@ -15,9 +16,11 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
         className: PropTypes.Requireable<string>;
         collapseButton: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         collapseText: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         collapseButton: boolean;
+        onClick: (...args: any[]) => void;
     };
     context: NavContextType;
     static elementType: string;

package/lib/es/navigation/Footer.js

@@ -1,3 +1,4 @@
+import _noop from "lodash/noop";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
@@ -39,7 +40,8 @@ export default class NavFooter extends PureComponent {
     const {
       style,
       className,
-      collapseButton
+      collapseButton,
+      onClick
     } = this.props;
     let {
       children
@@ -56,10 +58,15 @@ export default class NavFooter extends PureComponent {
     const wrapCls = cls(className, `${cssClasses.PREFIX}-footer`, {
       [`${cssClasses.PREFIX}-footer-collapsed`]: isCollapsed
     });
-    return /*#__PURE__*/React.createElement("div", {
-      className: wrapCls,
-      style: style
-    }, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
+        className: wrapCls,
+        style: style,
+        onClick: onClick
+      }, children)
+    );
   }
 
 }
@@ -69,9 +76,11 @@ NavFooter.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   collapseButton: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
-  collapseText: PropTypes.func
+  collapseText: PropTypes.func,
+  onClick: PropTypes.func
 };
 NavFooter.defaultProps = {
-  collapseButton: false
+  collapseButton: false,
+  onClick: _noop
 };
 NavFooter.elementType = "NavFooter";

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

@@ -4,10 +4,6 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
 import SubNavFoundation, { SubNavAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/subNavFoundation';
 import { NavContextType } from './nav-context';
-export interface ToggleIcon {
-    open?: string;
-    closed?: string;
-}
 export interface SubNavProps extends BaseProps {
     disabled?: boolean;
     dropdownStyle?: React.CSSProperties;
@@ -21,7 +17,7 @@ export interface SubNavProps extends BaseProps {
     onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
     text?: React.ReactNode;
-    toggleIcon?: ToggleIcon;
+    expandIcon?: React.ReactNode;
 }
 export interface SubNavState {
     isHovered: boolean;
@@ -53,10 +49,6 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
          * Nested child elements
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * The icon name of the right control switch (on and off status)
-         */
-        toggleIcon: PropTypes.Requireable<any>;
         style: PropTypes.Requireable<object>;
         /**
          * Icon name on the left
@@ -77,10 +69,6 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         isCollapsed: boolean;
         isOpen: boolean;
         maxHeight: number;
-        toggleIcon: {
-            open: JSX.Element;
-            closed: JSX.Element;
-        };
         disabled: boolean;
     };
     titleRef: React.RefObject<HTMLDivElement>;

package/lib/es/navigation/SubNav.js

@@ -12,7 +12,7 @@ import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
 import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
 import SubNavFoundation from '@douyinfe/semi-foundation/lib/es/navigation/subNavFoundation';
 import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
-import { IconChevronDown, IconChevronUp, IconChevronRight } from '@douyinfe/semi-icons';
+import { IconChevronDown, IconChevronRight } from '@douyinfe/semi-icons';
 import NavItem from './Item';
 import Dropdown from '../dropdown';
 import NavContext from './nav-context';
@@ -156,7 +156,8 @@ export default class SubNav extends BaseComponent {
       itemKey,
       indent,
       disabled,
-      level
+      level,
+      expandIcon
     } = this.props;
     const {
       mode,
@@ -186,7 +187,7 @@ export default class SubNav extends BaseComponent {
           "aria-hidden": true
         });
       } else {
-        toggleIconType = /*#__PURE__*/React.createElement(IconChevronDown, {
+        toggleIconType = expandIcon ? expandIcon : /*#__PURE__*/React.createElement(IconChevronDown, {
           "aria-hidden": true
         }); // Horizontal mode does not require animation fix#1198
         // withTransition = true;
@@ -196,7 +197,7 @@ export default class SubNav extends BaseComponent {
         withTransition = true;
       }
 
-      toggleIconType = /*#__PURE__*/React.createElement(IconChevronDown, {
+      toggleIconType = expandIcon ? expandIcon : /*#__PURE__*/React.createElement(IconChevronDown, {
         "aria-hidden": true
       });
     }
@@ -380,14 +381,6 @@ SubNav.propTypes = {
    * Nested child elements
    */
   children: PropTypes.node,
-
-  /**
-   * The icon name of the right control switch (on and off status)
-   */
-  toggleIcon: PropTypes.oneOfType([PropTypes.any, PropTypes.shape({
-    open: PropTypes.string,
-    closed: PropTypes.string
-  })]),
   style: PropTypes.object,
 
   /**
@@ -411,13 +404,5 @@ SubNav.defaultProps = {
   isCollapsed: false,
   isOpen: false,
   maxHeight: numbers.DEFAULT_SUBNAV_MAX_HEIGHT,
-  toggleIcon: {
-    open: /*#__PURE__*/React.createElement(IconChevronUp, {
-      "aria-hidden": true
-    }),
-    closed: /*#__PURE__*/React.createElement(IconChevronDown, {
-      "aria-hidden": true
-    })
-  },
   disabled: false
 };

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

@@ -11,7 +11,7 @@ export type { CollapseButtonProps } from './CollapseButton';
 export type { NavFooterProps } from './Footer';
 export type { NavHeaderProps } from './Header';
 export type { NavItemProps } from './Item';
-export type { ToggleIcon, SubNavProps } from './SubNav';
+export type { SubNavProps } from './SubNav';
 export declare type Mode = 'vertical' | 'horizontal';
 export interface OnSelectedData {
     itemKey: React.ReactText;
@@ -33,6 +33,7 @@ export interface NavProps extends BaseProps {
     defaultIsCollapsed?: boolean;
     defaultOpenKeys?: React.ReactText[];
     defaultSelectedKeys?: React.ReactText[];
+    expandIcon?: React.ReactNode;
     footer?: React.ReactNode | NavFooterProps;
     header?: React.ReactNode | NavHeaderProps;
     isCollapsed?: boolean;
@@ -86,9 +87,11 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     static Header: typeof Header;
     static Footer: typeof Footer;
     static propTypes: {
+        collapseIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         defaultOpenKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         openKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         defaultSelectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         selectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         mode: PropTypes.Requireable<string>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/navigation/index.js

@@ -168,12 +168,16 @@ class Nav extends BaseComponent {
   renderItems() {
     let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    const {
+      expandIcon
+    } = this.props;
     const finalDom = /*#__PURE__*/React.createElement(React.Fragment, null, items.map((item, idx) => {
       if (Array.isArray(item.items) && item.items.length) {
         return /*#__PURE__*/React.createElement(SubNav, Object.assign({
           key: item.itemKey || String(level) + idx
         }, item, {
-          level: level
+          level: level,
+          expandIcon: expandIcon
         }), this.renderItems(item.items, level + 1));
       } else {
         return /*#__PURE__*/React.createElement(Item, Object.assign({
@@ -340,11 +344,13 @@ Nav.Item = Item;
 Nav.Header = Header;
 Nav.Footer = Footer;
 Nav.propTypes = {
+  collapseIcon: PropTypes.node,
   // Initial expanded SubNav navigation key array
   defaultOpenKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   // Initial selected navigation key array
   defaultSelectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  expandIcon: PropTypes.node,
   selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   // Navigation type, now supports vertical, horizontal
   mode: PropTypes.oneOf([...strings.MODE]),

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

@@ -271,7 +271,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: SelectProps, prevState: SelectState): void;
-    handleInputChange: (value: string, event: React.KeyboardEvent) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     renderInput(): JSX.Element;
     close(): void;
     open(): void;
@@ -281,6 +281,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     focus(): void;
     onSelect(option: OptionProps, optionIndex: number, e: any): void;
     onClear(e: React.MouseEvent): void;
+    search(value: string, event: React.ChangeEvent<HTMLInputElement>): void;
     renderEmpty(): JSX.Element;
     renderLoading(): JSX.Element;
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;

package/lib/es/select/index.js

@@ -514,6 +514,10 @@ class Select extends BaseComponent {
     this.foundation.handleClearClick(e);
   }
 
+  search(value, event) {
+    this.handleInputChange(value, event);
+  }
+
   renderEmpty() {
     return /*#__PURE__*/React.createElement(Option, {
       empty: true,

package/lib/es/table/Body/index.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { FlattenData, GroupFlattenData } from '@douyinfe/semi-foundation/lib/es/table/bodyFoundation';
 import Store from '@douyinfe/semi-foundation/lib/es/utils/Store';
 import { BaseProps } from '../../_base/baseComponent';
-import { ExpandedRowRender, Virtualized, GetVirtualizedListRef, ColumnProps, Size, BodyScrollEvent, Scroll, Fixed, TableComponents, RowExpandable, VirtualizedOnScroll, RowKey } from '../interface';
+import type { ExpandedRowRender, Virtualized, GetVirtualizedListRef, ColumnProps, Size, BodyScrollEvent, Scroll, Fixed, TableComponents, RowExpandable, VirtualizedOnScroll, RowKey } from '../interface';
 export interface BodyProps extends BaseProps {
     tableLayout?: 'fixed' | 'auto';
     anyColumnFixed?: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import Table from './Table';
-import { TableProps } from './interface';
+import type { TableProps } from './interface';
 declare const _default: React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<Table<any>>>;
 export default _default;

package/lib/es/table/TableHeaderRow.js

@@ -169,22 +169,30 @@ export default class TableHeaderRow extends BaseComponent {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(HeaderCell, Object.assign({
-        role: "columnheader",
-        "aria-colindex": cellIndex + 1
-      }, props, {
-        style: cellStyle,
-        key: column.key || column.dataIndex || cellIndex
-      }));
+      return (
+        /*#__PURE__*/
+        // @ts-ignore  no need to do complex ts type checking and qualification
+        React.createElement(HeaderCell, Object.assign({
+          role: "columnheader",
+          "aria-colindex": cellIndex + 1
+        }, props, {
+          style: cellStyle,
+          key: column.key || column.dataIndex || cellIndex
+        }))
+      );
     });
 
-    return /*#__PURE__*/React.createElement(HeaderRow, Object.assign({
-      role: "row",
-      "aria-rowindex": index + 1
-    }, rowProps, {
-      style: style,
-      ref: this.cacheRef
-    }), cells);
+    return (
+      /*#__PURE__*/
+      // @ts-ignore no need to do complex ts type checking and qualification
+      React.createElement(HeaderRow, Object.assign({
+        role: "row",
+        "aria-rowindex": index + 1
+      }, rowProps, {
+        style: style,
+        ref: this.cacheRef
+      }), cells)
+    );
   }
 
 }

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

@@ -262,8 +262,12 @@ export declare type VirtualizedOnScrollArgs = {
     scrollOffset?: number;
     scrollUpdateWasRequested?: boolean;
 };
+export declare type VirtualizeItemSizeRow = {
+    sectionRow?: boolean;
+    expandedRow?: boolean;
+};
 export declare type VirtualizedMode = 'list' | 'grid';
-export declare type VirtualizedItemSizeFn = (index?: number) => number;
+export declare type VirtualizedItemSizeFn = (index?: number, row?: VirtualizeItemSizeRow) => number;
 export declare type VirtualizedItemSize = number | VirtualizedItemSizeFn;
 export declare type VirtualizedOnScroll = (object: VirtualizedOnScrollArgs) => void;
 export interface VirtualizedProps {

package/lib/es/typography/base.d.ts

@@ -22,6 +22,7 @@ export interface BaseTypographyProps extends BaseProps {
     component?: React.ElementType;
     spacing?: string;
     heading?: string;
+    weight?: string | number;
 }
 interface BaseTypographyState {
     editable: boolean;

package/lib/es/typography/base.js

@@ -76,7 +76,7 @@ export default class Base extends Component {
       }
 
       this.rafId = window.requestAnimationFrame(this.getEllipsisState.bind(this));
-    }; // if need to use js overflowed:
+    }; // if it needs to use js overflowed:
     // 1. text is expandable 2. expandText need to be shown  3. has extra operation 4. text need to ellipse from mid
 
 
@@ -419,10 +419,7 @@ export default class Base extends Component {
     const {
       expanded
     } = this.state;
-    const canUseCSSEllipsis = this.canUseCSSEllipsis(); // Currently only text truncation is supported, if there is non-text, 
-    // both css truncation and js truncation should throw a warning
-
-    warning('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment."); // If children is null, css/js truncated flag isTruncate is false
+    const canUseCSSEllipsis = this.canUseCSSEllipsis(); // If children is null, css/js truncated flag isTruncate is false
 
     if (_isNull(children)) {
       this.setState({
@@ -430,7 +427,11 @@ export default class Base extends Component {
         isOverflowed: false
       });
       return undefined;
-    }
+    } // Currently only text truncation is supported, if there is non-text, 
+    // both css truncation and js truncation should throw a warning
+
+
+    warning('children' in this.props && typeof children !== 'string', "[Semi Typography] Only children with pure text could be used with ellipsis at this moment.");
 
     if (!rows || rows < 0 || expanded) {
       return undefined;
@@ -539,9 +540,10 @@ export default class Base extends Component {
       icon,
       size,
       link,
-      heading
+      heading,
+      weight
     } = _a,
-          rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading"]);
+          rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading", "weight"]);
 
     const textProps = _omit(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code', // 'link',
     'delete']);
@@ -561,6 +563,7 @@ export default class Base extends Component {
       className: linkCls
     }, textNode) : textNode));
     const hTagReg = /^h[1-6]$/;
+    const isHeader = _isString(heading) && hTagReg.test(heading);
     const wrapperCls = cls(className, ellipsisCls, {
       // [`${prefixCls}-primary`]: !type || type === 'primary',
       [`${prefixCls}-${type}`]: type && !link,
@@ -568,11 +571,15 @@ export default class Base extends Component {
       [`${prefixCls}-link`]: link,
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-${spacing}`]: spacing,
-      [`${prefixCls}-${heading}`]: _isString(heading) && hTagReg.test(heading)
+      [`${prefixCls}-${heading}`]: isHeader,
+      [`${prefixCls}-${heading}-weight-${weight}`]: isHeader && isNaN(Number(weight))
     });
+    const textStyle = Object.assign(Object.assign({}, isNaN(Number(weight)) ? {} : {
+      fontWeight: weight
+    }), style);
     return /*#__PURE__*/React.createElement(Typography, Object.assign({
       className: wrapperCls,
-      style: Object.assign(Object.assign({}, style), ellipsisStyle),
+      style: Object.assign(Object.assign({}, textStyle), ellipsisStyle),
       component: component,
       forwardRef: this.wrapperRef
     }, textProps), textNode, this.renderOperations());
@@ -608,15 +615,22 @@ export default class Base extends Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ResizeObserver, {
-      onResize: this.onResize
-    }, /*#__PURE__*/React.createElement(LocaleConsumer, {
+    const content = /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Typography"
     }, locale => {
       this.expandStr = locale.expand;
       this.collapseStr = locale.collapse;
       return this.renderTipWrapper();
-    }));
+    });
+
+    if (this.props.ellipsis) {
+      return /*#__PURE__*/React.createElement(ResizeObserver, {
+        onResize: this.onResize,
+        observeParent: true
+      }, content);
+    }
+
+    return content;
   }
 
 }