@douyinfe/semi-ui 2.33.0 → 2.34.0-alpha.1

package/lib/es/skeleton/index.js

@@ -67,4 +67,5 @@ Skeleton.propTypes = {
   loading: PropTypes.bool,
   children: PropTypes.node
 };
+Skeleton.elementType = 'Skeleton';
 export default Skeleton;

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

@@ -21,6 +21,7 @@ export declare const Image: React.FC<BasicProps>;
 export declare const Title: React.FC<BasicProps>;
 export declare const Button: React.FC<BasicProps>;
 export declare class Paragraph extends PureComponent<ParagraphProps> {
+    static elementType: string;
     static propTypes: {
         rows: PropTypes.Requireable<number>;
         prefixCls: PropTypes.Requireable<string>;

package/lib/es/skeleton/item.js

@@ -63,6 +63,10 @@ export const Avatar = generator('avatar')(Generic);
 export const Image = generator('image')(Generic);
 export const Title = generator('title')(Generic);
 export const Button = generator('button')(Generic);
+Avatar.elementType = 'Skeleton.Avatar';
+Image.elementType = 'Skeleton.Image';
+Title.elementType = 'Skeleton.Title';
+Button.elementType = 'Skeleton.Button';
 export class Paragraph extends PureComponent {
   render() {
     const {
@@ -90,4 +94,5 @@ Paragraph.propTypes = {
 Paragraph.defaultProps = {
   prefixCls: cssClasses.PREFIX,
   rows: 4
-};
+};
+Paragraph.elementType = 'Skeleton.Paragraph';

package/lib/es/steps/basicStep.d.ts

@@ -19,6 +19,8 @@ export interface BasicStepProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"];
+    usedInC2D?: string;
+    direction?: string;
 }
 export declare enum stepSizeMapIconSize {
     small = "large",
@@ -45,5 +47,6 @@ declare const BasicStep: {
         status: string;
         className: string;
     };
+    elementType: string;
 };
 export default BasicStep;

package/lib/es/steps/basicStep.js

@@ -26,7 +26,9 @@ const BasicStep = props => {
     stepNumber,
     onClick,
     onChange,
-    onKeyDown
+    onKeyDown,
+    usedInC2D,
+    direction: direction
   } = props;
 
   const renderIcon = () => {
@@ -87,7 +89,10 @@ const BasicStep = props => {
 
   const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
     [`${prefixCls}-active`]: active,
-    [`${prefixCls}-done`]: done
+    [`${prefixCls}-done`]: done,
+    [`${prefixCls}-basic`]: usedInC2D,
+    [`${prefixCls}-${direction}`]: direction,
+    [`${prefixCls}-small`]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -151,4 +156,5 @@ BasicStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+BasicStep.elementType = 'Steps.BasicStep';
 export default BasicStep;

package/lib/es/steps/basicSteps.js

@@ -27,7 +27,8 @@ const Steps = props => {
       const stepNumber = initial + index;
       const childProps = Object.assign({
         stepNumber: `${stepNumber + 1}`,
-        size
+        size,
+        direction
       }, child.props);
 
       if (status === 'error' && index === current - 1) {

package/lib/es/steps/fillStep.d.ts

@@ -15,6 +15,7 @@ export interface FillStepProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"];
+    usedInC2D?: boolean;
 }
 declare const FillStep: {
     (props: FillStepProps): JSX.Element;
@@ -33,5 +34,6 @@ declare const FillStep: {
         status: string;
         className: string;
     };
+    elementType: string;
 };
 export default FillStep;

package/lib/es/steps/fillStep.js

@@ -97,7 +97,8 @@ const FillStep = props => {
     className: classnames({
       [prefixCls]: true,
       [`${prefixCls}-${status}`]: Boolean(status),
-      [`${prefixCls}-clickable`]: onClick
+      [`${prefixCls}-clickable`]: onClick,
+      [`${prefixCls}-fill`]: props.usedInC2D
     }, className),
     style: style,
     onClick: e => {
@@ -132,4 +133,5 @@ FillStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+FillStep.elementType = 'Steps.FillStep';
 export default FillStep;

package/lib/es/steps/fillSteps.js

@@ -17,10 +17,8 @@ const Steps = props => {
     onChange
   } = props;
   const inner = useMemo(() => {
-    const filteredChildren = Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c));
-    const colStyle = direction === 'vertical' ? null : {
-      width: `${100 / filteredChildren.length}%`
-    };
+    const filteredChildren = Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c)); // const colStyle = direction === 'vertical' ? null : { width: `${100 / filteredChildren.length }%` };
+
     const content = Children.map(filteredChildren, (child, index) => {
       if (!child) {
         return null;
@@ -50,11 +48,11 @@ const Steps = props => {
         if (index !== current) {
           onChange(index + initial);
         }
-      };
+      }; // Whether colStyle is set has no effect
+      // return <Col style={colStyle}>{cloneElement(child, { ...childProps })}</Col>;
+
 
-      return /*#__PURE__*/React.createElement(Col, {
-        style: colStyle
-      }, /*#__PURE__*/cloneElement(child, Object.assign({}, childProps)));
+      return /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/cloneElement(child, Object.assign({}, childProps)));
     });
     return content;
   }, [children, initial, prefixCls, direction, status, current, onChange]);

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

@@ -22,7 +22,69 @@ export interface NavStepsAllProps extends NavStepsProps {
 }
 export declare type StepsProps = FillStepsAllProps | BasicStepsAllProps | NavStepsAllProps;
 declare class Steps extends Component<StepsProps> {
-    static Step: (props: import("./step").StepProps) => JSX.Element;
+    static Step: {
+        (props: import("./step").StepProps): JSX.Element;
+        elementType: string;
+    };
+    static FillStep: {
+        (props: import("./fillStep").FillStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            status: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            status: string;
+            className: string;
+        };
+        elementType: string;
+    };
+    static BasicStep: {
+        (props: import("./basicStep").BasicStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            status: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            active: PropTypes.Requireable<boolean>;
+            done: PropTypes.Requireable<boolean>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            active: boolean;
+            done: boolean;
+            status: string;
+            className: string;
+        };
+        elementType: string;
+    };
+    static NavStep: {
+        (props: import("./navStep").NavStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            active: PropTypes.Requireable<boolean>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            active: boolean;
+            className: string;
+        };
+        elementType: string;
+    };
     static propTypes: {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;

package/lib/es/steps/index.js

@@ -18,6 +18,9 @@ import Step from './step';
 import FillSteps from './fillSteps';
 import BasicSteps from './basicSteps';
 import NavSteps from './navSteps';
+import FillStep from './fillStep';
+import BasicStep from './basicStep';
+import NavStep from './navStep';
 import Context from './context';
 
 class Steps extends Component {
@@ -57,6 +60,9 @@ class Steps extends Component {
 }
 
 Steps.Step = Step;
+Steps.FillStep = FillStep;
+Steps.BasicStep = BasicStep;
+Steps.NavStep = NavStep;
 Steps.propTypes = {
   onChange: PropTypes.func,
   type: PropTypes.oneOf(['fill', 'basic', 'nav']),

package/lib/es/steps/navStep.d.ts

@@ -13,6 +13,8 @@ export interface NavStepProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"];
+    usedInC2D?: boolean;
+    size?: string;
 }
 declare const NavStep: {
     (props: NavStepProps): JSX.Element;
@@ -29,5 +31,6 @@ declare const NavStep: {
         active: boolean;
         className: string;
     };
+    elementType: string;
 };
 export default NavStep;

package/lib/es/steps/navStep.js

@@ -16,10 +16,13 @@ const NavStep = props => {
     total,
     onClick,
     onKeyDown,
-    onChange
+    onChange,
+    size
   } = props;
   const classString = classnames(prefixCls, {
-    [`${prefixCls}-active`]: active
+    [`${prefixCls}-active`]: active,
+    [`${prefixCls}-nav`]: props.usedInC2D,
+    [`${prefixCls}-small`]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -75,4 +78,5 @@ NavStep.defaultProps = {
   active: false,
   className: ''
 };
+NavStep.elementType = 'Steps.NavStep';
 export default NavStep;

package/lib/es/steps/navSteps.js

@@ -24,7 +24,8 @@ const Steps = props => {
 
       const childProps = Object.assign({
         index,
-        total
+        total,
+        size
       }, child.props);
       childProps.active = index === current;
 

package/lib/es/steps/step.d.ts

@@ -9,5 +9,8 @@ export interface StepProps {
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
-declare const Step: (props: StepProps) => JSX.Element;
+declare const Step: {
+    (props: StepProps): JSX.Element;
+    elementType: string;
+};
 export default Step;

package/lib/es/steps/step.js

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

package/lib/es/table/Body/BaseRow.js

@@ -192,7 +192,7 @@ export default class TableRow extends BaseComponent {
         if (level != null && columnIndex === firstIndex) {
           expandableProps.indent = level;
 
-          if (!expandableRow) {
+          if (!expandableRow && hideExpandedColumn) {
             expandableProps.indent = level + 1;
           }
         }

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

@@ -0,0 +1,8 @@
+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

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

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

@@ -2,12 +2,13 @@ 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?: 'left' | 'right' | 'center' | 'alternate';
+    mode?: ModeType;
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];

package/lib/es/timeline/index.js

@@ -5,6 +5,7 @@ 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 {
@@ -76,11 +77,15 @@ class Timeline extends PureComponent {
     }
 
     const items = childrenList || this.addClassName(children);
-    return /*#__PURE__*/React.createElement("ul", {
+    return /*#__PURE__*/React.createElement(Context.Provider, {
+      value: {
+        mode
+      }
+    }, /*#__PURE__*/React.createElement("ul", {
       "aria-label": this.props['aria-label'],
       style: style,
       className: classString
-    }, items);
+    }, items));
   }
 
 }

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

@@ -1,6 +1,7 @@
 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;
@@ -12,8 +13,13 @@ 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>;
@@ -24,11 +30,15 @@ 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,8 +4,42 @@ 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,
@@ -18,7 +52,7 @@ export default class Item extends PureComponent {
       extra,
       onClick
     } = this.props;
-    const itemCls = cls(prefixCls, className);
+    const itemCls = cls(prefixCls, className, this.getC2DCls());
     const dotCls = cls({
       [`${prefixCls}-head`]: true,
       [`${prefixCls}-head-custom`]: dot,
@@ -49,6 +83,7 @@ export default class Item extends PureComponent {
   }
 
 }
+Item.contextType = Context;
 Item.propTypes = {
   color: PropTypes.string,
   time: PropTypes.node,
@@ -58,10 +93,13 @@ Item.propTypes = {
   position: PropTypes.oneOf(strings.ITEM_POS),
   className: PropTypes.string,
   style: PropTypes.object,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  mode: PropTypes.string,
+  lastChild: PropTypes.bool
 };
 Item.defaultProps = {
   type: 'default',
   time: '',
   onClick: _noop
-};
+};
+Item.elementType = 'Timeline.Item';

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

@@ -188,6 +188,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
     handlePortalMouseDown: (e: React.MouseEvent) => void;
+    handlePortalFocus: (e: React.FocusEvent<HTMLElement>) => void;
+    handlePortalBlur: (e: React.FocusEvent<HTMLElement>) => void;
     handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
     renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;

package/lib/es/tooltip/index.js

@@ -143,6 +143,18 @@ export default class Tooltip extends BaseComponent {
       }
     };
 
+    this.handlePortalFocus = e => {
+      if (this.props.stopPropagation) {
+        stopPropagation(e);
+      }
+    };
+
+    this.handlePortalBlur = e => {
+      if (this.props.stopPropagation) {
+        stopPropagation(e);
+      }
+    };
+
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
@@ -240,6 +252,8 @@ export default class Tooltip extends BaseComponent {
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,
+        onFocus: this.handlePortalFocus,
+        onBlur: this.handlePortalBlur,
         onMouseDown: this.handlePortalMouseDown,
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.33.0",
+    "version": "2.34.0-alpha.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.33.0",
-        "@douyinfe/semi-animation-react": "2.33.0",
-        "@douyinfe/semi-foundation": "2.33.0",
-        "@douyinfe/semi-icons": "2.33.0",
-        "@douyinfe/semi-illustrations": "2.33.0",
-        "@douyinfe/semi-theme-default": "2.33.0",
+        "@douyinfe/semi-animation": "2.34.0-alpha.1",
+        "@douyinfe/semi-animation-react": "2.34.0-alpha.1",
+        "@douyinfe/semi-foundation": "2.34.0-alpha.1",
+        "@douyinfe/semi-icons": "2.34.0-alpha.1",
+        "@douyinfe/semi-illustrations": "2.34.0-alpha.1",
+        "@douyinfe/semi-theme-default": "2.34.0-alpha.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "0fdea7209b852a6d18f2139013d2da13dc111244",
+    "gitHead": "8990c51afec33fcfc2f89234082597e484513756",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",