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

package/lib/es/steps/step.js

@@ -28,5 +28,4 @@ const Step = props => {
   return renderStep();
 };
 
-Step.elementType = 'Steps.Step';
 export default Step;

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

@@ -45,7 +45,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         id: PropTypes.Requireable<string>;
     };

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/Table.d.ts

@@ -60,7 +60,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "middle">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;
@@ -297,7 +297,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showTotal?: boolean;
         pageSize?: number;
         pageSizeOpts?: number[];
-        size?: "small" | "default";
+        size?: "default" | "small";
         currentPage?: number;
         defaultCurrentPage?: number;
         onPageChange?: (currentPage: number) => void;

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/index.d.ts

@@ -16,7 +16,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "middle">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;

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/tagInput/index.d.ts

@@ -96,7 +96,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

package/lib/es/timePicker/TimePicker.d.ts

@@ -132,7 +132,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         secondStep: PropTypes.Requireable<number>;
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

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

@@ -49,7 +49,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         secondStep: import("prop-types").Requireable<number>;
         focusOnOpen: import("prop-types").Requireable<boolean>;
         autoFocus: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<"small" | "default" | "large">;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
             panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;

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

@@ -2,13 +2,12 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 import Item, { TimelineItemProps } from './item';
-import { ModeType } from './context';
 export type { TimelineItemProps } from './item';
 export interface Data extends TimelineItemProps {
     content: React.ReactNode;
 }
 export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
-    mode?: ModeType;
+    mode?: 'left' | 'right' | 'center' | 'alternate';
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];

package/lib/es/timeline/index.js

@@ -5,7 +5,6 @@ import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/timeline/constants';
 import ConfigContext from '../configProvider/context';
 import Item from './item';
-import Context from './context';
 const prefixCls = cssClasses.PREFIX;
 
 class Timeline extends PureComponent {
@@ -77,15 +76,11 @@ class Timeline extends PureComponent {
     }
 
     const items = childrenList || this.addClassName(children);
-    return /*#__PURE__*/React.createElement(Context.Provider, {
-      value: {
-        mode
-      }
-    }, /*#__PURE__*/React.createElement("ul", {
+    return /*#__PURE__*/React.createElement("ul", {
       "aria-label": this.props['aria-label'],
       style: style,
       className: classString
-    }, items));
+    }, items);
   }
 
 }

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

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
-import { ModeType, TimelineContextValue } from './context';
 export interface TimelineItemProps {
     color?: string;
     children?: React.ReactNode;
@@ -13,13 +12,8 @@ export interface TimelineItemProps {
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
-    mode?: ModeType;
-    odd?: boolean;
-    usedInC2D?: boolean;
 }
 export default class Item extends PureComponent<TimelineItemProps> {
-    static contextType: React.Context<TimelineContextValue>;
-    static elementType: string;
     static propTypes: {
         color: PropTypes.Requireable<string>;
         time: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -30,15 +24,11 @@ export default class Item extends PureComponent<TimelineItemProps> {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        mode: PropTypes.Requireable<string>;
-        lastChild: PropTypes.Requireable<boolean>;
     };
-    context: TimelineContextValue;
     static defaultProps: {
         type: string;
         time: string;
         onClick: (...args: any[]) => void;
     };
-    getC2DCls: () => string;
     render(): JSX.Element;
 }

package/lib/es/timeline/item.js

@@ -4,42 +4,8 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/timeline/constants';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
-import Context from './context';
 const prefixCls = cssClasses.ITEM;
 export default class Item extends PureComponent {
-  constructor() {
-    super(...arguments); // getC2DCls is used in C2D, it does not work in non-C2D scenes
-
-    this.getC2DCls = () => {
-      let c2dCls = '';
-      const {
-        mode,
-        odd,
-        usedInC2D
-      } = this.props;
-
-      if (usedInC2D) {
-        switch (mode) {
-          case 'center':
-            c2dCls = `${prefixCls}-center  ${prefixCls}-left`;
-            break;
-
-          case 'alternate':
-            c2dCls = `${prefixCls}-alternate  ${prefixCls}-${odd ? 'left' : 'right'}`;
-            break;
-
-          default:
-            c2dCls = `${prefixCls}-${mode} ${mode === 'right' ? `${prefixCls}-mode-right` : ''}`;
-            break;
-        }
-
-        c2dCls += ` ${prefixCls}-not-last-child`;
-      }
-
-      return c2dCls;
-    };
-  }
-
   render() {
     const {
       className,
@@ -52,7 +18,7 @@ export default class Item extends PureComponent {
       extra,
       onClick
     } = this.props;
-    const itemCls = cls(prefixCls, className, this.getC2DCls());
+    const itemCls = cls(prefixCls, className);
     const dotCls = cls({
       [`${prefixCls}-head`]: true,
       [`${prefixCls}-head-custom`]: dot,
@@ -83,7 +49,6 @@ export default class Item extends PureComponent {
   }
 
 }
-Item.contextType = Context;
 Item.propTypes = {
   color: PropTypes.string,
   time: PropTypes.node,
@@ -93,13 +58,10 @@ Item.propTypes = {
   position: PropTypes.oneOf(strings.ITEM_POS),
   className: PropTypes.string,
   style: PropTypes.object,
-  onClick: PropTypes.func,
-  mode: PropTypes.string,
-  lastChild: PropTypes.bool
+  onClick: PropTypes.func
 };
 Item.defaultProps = {
   type: 'default',
   time: '',
   onClick: _noop
-};
-Item.elementType = 'Timeline.Item';
+};

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

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

@@ -26,6 +26,7 @@ export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement
     style?: React.CSSProperties;
     type?: TypographyBaseType;
     underline?: boolean;
+    weight?: ArrayElement<typeof strings.WEIGHT> | number;
 }
 export default class Title extends PureComponent<TitleProps> {
     static propTypes: {
@@ -42,6 +43,7 @@ export default class Title extends PureComponent<TitleProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;
+        weight: PropTypes.Requireable<NonNullable<number | "default" | "bold" | "medium" | "light" | "regular" | "semibold">>;
     };
     static defaultProps: {
         copyable: boolean;

package/lib/es/typography/title.js

@@ -44,7 +44,8 @@ Title.propTypes = {
   heading: PropTypes.oneOf(strings.HEADING),
   style: PropTypes.object,
   className: PropTypes.string,
-  component: PropTypes.string
+  component: PropTypes.string,
+  weight: PropTypes.oneOfType([PropTypes.oneOf(strings.WEIGHT), PropTypes.number])
 };
 Title.defaultProps = {
   copyable: false,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.36.0-alpha.0",
+    "version": "2.36.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.36.0-alpha.0",
-        "@douyinfe/semi-animation-react": "2.36.0-alpha.0",
-        "@douyinfe/semi-foundation": "2.36.0-alpha.0",
-        "@douyinfe/semi-icons": "2.36.0-alpha.0",
-        "@douyinfe/semi-illustrations": "2.36.0-alpha.0",
-        "@douyinfe/semi-theme-default": "2.36.0-alpha.0",
+        "@douyinfe/semi-animation": "2.36.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.36.0-beta.0",
+        "@douyinfe/semi-foundation": "2.36.0-beta.0",
+        "@douyinfe/semi-icons": "2.36.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.36.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.36.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,14 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b0ea78a81e9ba459f9f5a06c831235a5d5e9d3a0",
+    "gitHead": "e973ed0dc3b8cd37e9c737f1548e386d814f787b",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
         "@douyinfe/semi-scss-compile": "2.23.2",
-        "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",
         "@types/react-dom": ">=16.0.0",

package/lib/cjs/timeline/context.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare type ModeType = 'left' | 'right' | 'center' | 'alternate';
-export interface TimelineContextValue {
-    mode?: ModeType;
-    sum?: number;
-}
-declare const Context: React.Context<TimelineContextValue>;
-export default Context;

package/lib/cjs/timeline/context.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Context = /*#__PURE__*/_react.default.createContext(null);
-
-var _default = Context;
-exports.default = _default;

package/lib/es/timeline/context.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare type ModeType = 'left' | 'right' | 'center' | 'alternate';
-export interface TimelineContextValue {
-    mode?: ModeType;
-    sum?: number;
-}
-declare const Context: React.Context<TimelineContextValue>;
-export default Context;

package/lib/es/timeline/context.js

@@ -1,3 +0,0 @@
-import React from 'react';
-const Context = /*#__PURE__*/React.createContext(null);
-export default Context;