@douyinfe/semi-ui 2.19.0-alpha.7 → 2.19.0-beta.0

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

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

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

@@ -81,7 +81,7 @@ export interface FormFCChild<K extends Record<string, any> = any> {
     values: K;
     formApi: FormApi<K>;
 }
-export interface BaseFormProps {
+export interface BaseFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'children' | 'onChange'> {
     'aria-label'?: React.AriaAttributes['aria-label'];
     onSubmit?: (values: Record<string, any>) => void;
     onSubmitFail?: (errors: Record<string, FieldError>, values: any) => void;

package/lib/es/popconfirm/index.js

@@ -126,7 +126,7 @@ export default class Popconfirm extends BaseComponent {
       ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
     });
     const showTitle = title !== null && typeof title !== 'undefined';
-    const showContent = content !== null || typeof content !== 'undefined';
+    const showContent = !(content === null || typeof content === 'undefined');
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -146,17 +146,17 @@ export default class Popconfirm extends BaseComponent {
       }, showTitle ? /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-header-title"),
         "x-semi-prop": "title"
-      }, title) : null, showContent ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header-content"),
-        "x-semi-prop": "content"
-      }, content) : null), /*#__PURE__*/React.createElement(Button, {
+      }, title) : null), /*#__PURE__*/React.createElement(Button, {
         className: "".concat(prefixCls, "-btn-close"),
         icon: /*#__PURE__*/React.createElement(IconClose, null),
         size: "small",
         theme: 'borderless',
         type: cancelType,
         onClick: this.handleCancel
-      })), /*#__PURE__*/React.createElement("div", {
+      })), showContent ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-body"),
+        "x-semi-prop": "content"
+      }, content) : null, /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-footer")
       }, this.renderControls())))
     );

package/lib/es/radio/radio.d.ts

@@ -66,6 +66,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: Partial<RadioProps>;
+    static elementType: string;
     radioEntity: RadioInner;
     context: RadioContextValue;
     foundation: RadioFoundation;
@@ -81,7 +82,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "large" | "middle";
+        buttonSize?: "small" | "middle" | "large";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/es/radio/radio.js

@@ -280,4 +280,5 @@ Radio.defaultProps = {
   mode: '',
   type: 'default'
 };
+Radio.elementType = 'Radio';
 export default Radio;

package/lib/es/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
+        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1,5 +1,6 @@
-import React, { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
+import React, { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
+import TabBar from './TabBar';
 export declare type TabType = 'line' | 'card' | 'button';
 export declare type TabSize = 'small' | 'medium' | 'large';
 export declare type TabPosition = 'top' | 'left';
@@ -21,7 +22,7 @@ export interface TabsProps {
     lazyRender?: boolean;
     onChange?: (activeKey: string) => void;
     onTabClick?: (activeKey: string, e: MouseEvent<Element>) => void;
-    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: ComponentType) => ReactNode;
+    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: typeof TabBar) => ReactNode;
     size?: TabSize;
     style?: CSSProperties;
     tabBarClassName?: string;

package/lib/es/tag/group.d.ts

@@ -1,21 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Tag from './index';
-import { PopoverProps } from '../popover/index';
-import { AvatarShape, TagProps } from './interface';
-export interface TagGroupProps<T> {
-    style?: React.CSSProperties;
-    className?: string;
-    maxTagCount?: number;
-    restCount?: number;
-    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
-    size?: 'small' | 'large';
-    showPopover?: boolean;
-    popoverProps?: PopoverProps;
-    avatarShape?: AvatarShape;
-    mode?: string;
-    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
-}
+import { TagGroupProps } from './interface';
 export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps: {
         style: {};

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

@@ -10,7 +10,7 @@ export default class Tag extends Component<TagProps, TagState> {
     static defaultProps: TagProps;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        tagKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
+        tagKey: PropTypes.Requireable<string | number>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;

package/lib/es/tag/index.js

@@ -198,7 +198,7 @@ Tag.defaultProps = {
 };
 Tag.propTypes = {
   children: PropTypes.node,
-  tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
+  tagKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   size: PropTypes.oneOf(tagSize),
   color: PropTypes.oneOf(tagColors),
   type: PropTypes.oneOf(tagType),

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PopoverProps } from '../popover/index';
 export declare type TagColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow' | 'white';
 export declare type TagType = 'ghost' | 'solid' | 'light';
 export declare type TagSize = 'default' | 'small' | 'large';
@@ -21,14 +22,16 @@ export interface TagProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     tabIndex?: number;
 }
-export interface TagGroupProps {
+export interface TagGroupProps<T> {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
-    tagList?: (TagProps | React.ReactNode)[];
+    restCount?: number;
+    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
-    popoverProps?: any;
+    popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
     mode?: string;
+    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
 }

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

@@ -99,11 +99,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
 export { TimeShape };

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

@@ -19,11 +19,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

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

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
+        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.19.0-alpha.7",
+    "version": "2.19.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.19.0-alpha.7",
-        "@douyinfe/semi-foundation": "2.19.0-alpha.7",
-        "@douyinfe/semi-icons": "2.19.0-alpha.7",
+        "@douyinfe/semi-animation-react": "2.19.0-beta.0",
+        "@douyinfe/semi-foundation": "2.19.0-beta.0",
+        "@douyinfe/semi-icons": "2.19.0-beta.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.19.0-alpha.7",
+        "@douyinfe/semi-theme-default": "2.19.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "e4926d98b1e98ec52a3bc8b7c29a51bf223b8208",
+    "gitHead": "6c28751a18df0a8a8dee52203a0b492af667edab",
     "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.19.0-alpha.7",
+        "@douyinfe/semi-scss-compile": "2.19.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/popconfirm/_story/popconfirm.stories.js

@@ -44,7 +44,7 @@ Simple.story = {
 export const _Button = () => (
   <div>
     <div style={style}>
-      <Popconfirm position="bottomLeft" title="确定是否要保存此修改？" content="此修改将不可逆">
+      <Popconfirm position="bottomLeft" title="确定是否要保存此修改？" content="此修改将不可逆此修改将不可逆此修改将不可逆此修">
         <Button>Save</Button>
       </Popconfirm>
     </div>

package/popconfirm/index.tsx

@@ -175,7 +175,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
             }
         );
         const showTitle = title !== null && typeof title !== 'undefined';
-        const showContent = content !== null || typeof content !== 'undefined';
+        const showContent = !(content === null || typeof content === 'undefined');
 
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -191,11 +191,6 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
                                     {title}
                                 </div>
                             ) : null}
-                            {showContent ? (
-                                <div className={`${prefixCls}-header-content`} x-semi-prop="content">
-                                    {content}
-                                </div>
-                            ) : null}
                         </div>
                         <Button
                             className={`${prefixCls}-btn-close`}
@@ -206,6 +201,11 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
                             onClick={this.handleCancel}
                         />
                     </div>
+                    {showContent ? (
+                        <div className={`${prefixCls}-body`} x-semi-prop="content">
+                            {content}
+                        </div>
+                    ) : null} 
                     <div className={`${prefixCls}-footer`}>{this.renderControls()}</div>
                 </div>
             </div>

package/radio/radio.tsx

@@ -92,6 +92,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         mode: '',
         type: 'default'
     };
+    static elementType: string;
 
     radioEntity: RadioInner;
     context!: RadioContextValue;
@@ -317,5 +318,6 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         );
     }
 }
+Radio.elementType = 'Radio';
 
 export default Radio;

package/tabs/_story/Demo.tsx

@@ -11,7 +11,16 @@ const Demo = () => {
 
     return (
         <div>
-            <Tabs defaultActiveKey="1"
+            <Tabs 
+                defaultActiveKey="1"
+                renderTabBar={(tabBarProps, DefaultTabBar) => {
+                    return (
+                        <div className="tab-bar-box">
+                            这是二次封装的Tab Bar，当前ActiveKey：{tabBarProps.activeKey}
+                            <DefaultTabBar {...tabBarProps} />
+                        </div>
+                    );
+                }}
                 tabPaneMotion>
                 {
                     tabPaneList.map((item, index) => {
@@ -19,12 +28,12 @@ const Demo = () => {
                             <TabPane tab={item} itemKey={index.toString()} key={item}>
                                 { item + index }
                             </TabPane>
-                        )
+                        );
                     })
                 }
             </Tabs>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

package/tabs/interface.ts

@@ -1,5 +1,6 @@
 import React, { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
+import TabBar from './TabBar';
 
 export type TabType = 'line' | 'card' | 'button';
 export type TabSize = 'small' | 'medium' | 'large';
@@ -25,7 +26,7 @@ export interface TabsProps {
     lazyRender?: boolean;
     onChange?: (activeKey: string) => void;
     onTabClick?: (activeKey: string, e: MouseEvent<Element>) => void;
-    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: ComponentType) => ReactNode;
+    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: typeof TabBar) => ReactNode;
     size?: TabSize;
     style?: CSSProperties;
     tabBarClassName?: string;
@@ -54,7 +55,7 @@ export interface TabBarProps {
     dropdownStyle?: CSSProperties;
     closable?: boolean;
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
-    handleKeyDown?:  (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
+    handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
 }
 
 export interface TabPaneProps {

package/tag/group.tsx

@@ -3,27 +3,13 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/tag/constants';
 import Tag from './index';
-import Popover, { PopoverProps } from '../popover/index';
-import { AvatarShape, TagProps } from './interface';
+import Popover from '../popover/index';
+import { AvatarShape, TagProps, TagGroupProps } from './interface';
 
 const prefixCls = cssClasses.PREFIX;
 const tagSize = strings.TAG_SIZE;
 const avatarShapeSet = strings.AVATAR_SHAPE;
 
-export interface TagGroupProps<T> {
-    style?: React.CSSProperties;
-    className?: string;
-    maxTagCount?: number;
-    restCount?: number;
-    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
-    size?: 'small' | 'large';
-    showPopover?: boolean;
-    popoverProps?: PopoverProps;
-    avatarShape?: AvatarShape;
-    mode?: string;
-    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
-}
-
 export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps = {
         style: {},

package/tag/index.tsx

@@ -40,7 +40,7 @@ export default class Tag extends Component<TagProps, TagState> {
 
     static propTypes = {
         children: PropTypes.node,
-        tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
+        tagKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         size: PropTypes.oneOf(tagSize),
         color: PropTypes.oneOf(tagColors),
         type: PropTypes.oneOf(tagType),

package/tag/interface.ts

@@ -1,3 +1,5 @@
+import { PopoverProps } from '../popover/index';
+
 export type TagColor =
     | 'amber'
     | 'blue'
@@ -39,14 +41,16 @@ export interface TagProps {
     tabIndex?: number; // use internal, when tag in taInput, we want to use left arrow and right arrow to control the tag focus, so the tabIndex need to be -1. 
 }
 
-export interface TagGroupProps {
+export interface TagGroupProps<T> {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
-    tagList?: (TagProps | React.ReactNode)[];
+    restCount?: number;
+    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
-    popoverProps?: any; // TODO: 替换成PopoverProps
+    popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
-    mode?: string; // TODO: check 文档里没有这个api
-}
+    mode?: string;
+    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
+}

package/transfer/_story/transfer.stories.js

@@ -209,9 +209,9 @@ const ControlledTransfer = () => {
   );
 };
 
-export const ControlledTransfer = () => <ControlledTransfer />;
+export const ControlledTransferDemo = () => <ControlledTransfer />;
 
-ControlledTransfer.story = {
+ControlledTransferDemo.story = {
   name: '受控Transfer',
 };
 

package/treeSelect/_story/treeSelect.stories.js

@@ -469,6 +469,9 @@ export const Multiple = () => (
       // value={this.state.value}
       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
       treeData={treeData2}
+      defaultOpen
+      defaultExpandAll
+      motion={false}
       multiple
       placeholder="Please select"
     />