chore: merge main into release

content/input/upload/index-en-US.md

@@ -870,6 +870,10 @@ class ManulUploadDemo extends React.Component {
 
 `draggable='true'`, you can use the drag and drop function
 
+<Notice type="primary" title="Notice">
+    <div>When the directory is true, because the browser automatically imposes restrictions, it is not allowed to select a single file when clicking upload. When dragging, we think it is more reasonable to allow folders and files to be dragged, so no additional interception processing is performed.</div>
+</Notice>
+
 ```jsx live=true width=48%
 import React from 'react';
 import { Upload } from '@douyinfe/semi-ui';

content/input/upload/index.md

@@ -882,6 +882,9 @@ class ManulUploadDemo extends React.Component {
 ### 拖拽上传
 
 `draggable='true'`，可以使用拖拽功能
+<Notice type="primary" title="注意事项">
+    <div>在directory为true的情况下，因为浏览器自动做了限制，所以点击上传时不允许选单个文件，拖拽时我们认为同时允许文件夹、文件都能拖动更合理，所以不做另外的拦截处理。</div>
+</Notice>
 
 ```jsx live=true width=48%
 import React from 'react';

content/show/table/index.md

@@ -4,7 +4,7 @@ order: 59
 category: 展示类
 title:  Table 表格
 icon: doc-table
-brief: 表格用于呈现结构化的数据内容，通常会伴随提供对数据进行操作（排序、搜素、分页……）的能力。
+brief: 表格用于呈现结构化的数据内容，通常会伴随提供对数据进行操作（排序、搜索、分页……）的能力。
 ---
 
 

content/start/changelog/index-en-US.md

@@ -16,9 +16,21 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.11.0 (2022-05-23)
+- 【Fix】
+    - Fix the problem that the return type of useModal typescript is not strict [#833](https://github.com/DouyinFE/semi-design/issues/833)
+    - Fix the problem that the upload list file does not meet expectations when the directory and draggable are true for the Upload component [#827](https://github.com/DouyinFE/semi-design/issues/827)
+    - Simplify some types [#838](https://github.com/DouyinFE/semi-design/pull/838) [@huruji](https://github.com/huruji)
+
 #### 🎉 2.11.0-beta.1 (2022-05-20)
 - 【Fix】
   -  Fixed the issue that DatePicker incorrectly referenced the _utils/parse ts source file, resulting in an error
+
+#### 🎉 2.10.2 (2022-05-20)
+- 【Fix】
+    - Fixed  Table onHeaderRow does not take effect when setting scroll prop  [#849](https://github.com/DouyinFE/semi-design/issues/849)
+    - Fixed Select aria-controls are inconsistent in SSR scenarios  [#840](https://github.com/DouyinFE/semi-design/issues/840)
+
 #### 🎉 2.11.0-beta.0 (2022-05-18)
 - 【Feat】
     - After entering the full date in the DatePicker inset input box, the time input box automatically fills the default time  [#294](https://github.com/DouyinFE/semi-design/issues/294)

content/start/changelog/index.md

@@ -15,9 +15,21 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.11.0 (2022-05-23)
+- 【Fix】
+    - 修复 useModal typescript 返回类型不严谨的问题 [#833](https://github.com/DouyinFE/semi-design/issues/833)
+    - 修复Upload组件在directory和draggable为true时上传，上传列表文件不符合预期问题 [#827](https://github.com/DouyinFE/semi-design/issues/827)
+    - 简化类型声明 [#838](https://github.com/DouyinFE/semi-design/pull/838) [@huruji](https://github.com/huruji)
+
 #### 🎉 2.11.0-beta.1 (2022-05-20)
 - 【Fix】
   -  修复 DatePicker 错误引用 _utils/parse ts源文件导致报错的问题
+
+#### 🎉 2.10.2 (2022-05-20)
+- 【Fix】
+    - 修复 Table onHeaderRow 在配置 scroll 属性时不生效问题  [#849](https://github.com/DouyinFE/semi-design/issues/849)
+    - 修复 Select aria-controls 在 SSR 场景不一致问题  [#840](https://github.com/DouyinFE/semi-design/issues/840)
+
 #### 🎉 2.11.0-beta.0 (2022-05-18)
 - 【Feat】
     - DatePicker 内嵌输入框输入完整日期后，时间输入框自动填充默认时间  [#294](https://github.com/DouyinFE/semi-design/issues/294)

cypress/integration/table.spec.js

@@ -67,4 +67,10 @@ describe('table', () => {
             .trigger('mousemove', { which: 1, pageX: -300, pageY: 100 })
             .trigger('mouseup');
     });
+
+    it('scroll table header click', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=table--fixed-on-header-row&args=&viewMode=story');
+        cy.contains('标题').click();
+        cy.contains('header click').should('be.visible');
+    })
 });

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.11.0-beta.1"
+    "version": "2.11.0"
 }

package.json

@@ -45,7 +45,7 @@
     "@douyinfe/semi-site-banner": "^0.0.2",
     "@douyinfe/semi-site-doc-style": "0.0.1",
     "@douyinfe/semi-site-header": "^0.0.10",
-    "@douyinfe/semi-site-markdown-blocks": "^0.0.6",
+    "@douyinfe/semi-site-markdown-blocks": "^0.0.7",
     "@mdx-js/react": "^1.6.22",
     "@svgr/core": "^5.5.0",
     "@types/react-window": "^1.8.5",

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.11.0-beta.1",
+  "version": "2.11.0",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
-    "@douyinfe/semi-animation": "2.11.0-beta.1",
-    "@douyinfe/semi-animation-styled": "2.11.0-beta.1",
+    "@douyinfe/semi-animation": "2.11.0",
+    "@douyinfe/semi-animation-styled": "2.11.0",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.11.0-beta.1",
+  "version": "2.11.0",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.11.0-beta.1",
+  "version": "2.11.0",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.11.0-beta.1",
+    "version": "2.11.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.11.0-beta.1",
+        "@douyinfe/semi-animation": "2.11.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.11.0-beta.1",
+  "version": "2.11.0",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -38,7 +38,7 @@
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.11.0-beta.1",
+    "@douyinfe/semi-webpack-plugin": "2.11.0",
     "babel-loader": "^8.2.2",
     "css-loader": "4.3.0",
     "del": "^6.0.0",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-illustrations",
-  "version": "2.11.0-beta.1",
+  "version": "2.11.0",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.11.0-beta.1",
+    "version": "2.11.0",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.11.0-beta.1"
+        "@douyinfe/semi-webpack-plugin": "2.11.0"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.11.0-beta.1",
+  "version": "2.11.0",
   "description": "compile semi scss to css",
   "author": "[email protected]",
   "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.11.0-beta.1",
+    "version": "2.11.0",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/anchor/link.tsx

@@ -11,9 +11,9 @@ const prefixCls = cssClasses.PREFIX;
 
 export interface LinkProps {
     href?: string;
-    title?: string | React.ReactNode;
+    title?: ReactNode;
     className?: string;
-    children?: ReactNode | undefined;
+    children?: ReactNode;
     style?: React.CSSProperties;
     disabled?: boolean;
 }

packages/semi-ui/autoComplete/index.tsx

@@ -57,7 +57,7 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     dropdownMatchSelectWidth?: boolean;
     dropdownClassName?: string;
     dropdownStyle?: React.CSSProperties;
-    emptyContent?: React.ReactNode | null;
+    emptyContent?: React.ReactNode;
     getPopupContainer?: () => HTMLElement;
     insetLabel?: React.ReactNode;
     insetLabelId?: string;
@@ -218,8 +218,8 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
 
         warning(
             'triggerRender' in this.props && typeof this.props.triggerRender === 'function',
-            `[Semi AutoComplete] 
-            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size', 
+            `[Semi AutoComplete]
+            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size',
             please notice that they will be removed in the next major version.
             Please use 'componentProps' to retrieve these props instead.
             - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.`

packages/semi-ui/avatar/interface.ts

@@ -22,7 +22,7 @@ export type AvatarColor =
     | 'yellow';
 
 export interface AvatarProps extends BaseProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     color?: AvatarColor;
     shape?: AvatarShape;
     size?: AvatarSize;
@@ -42,7 +42,7 @@ export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'm
 export type AvatarGroupOverlapFrom = 'start' | 'end';
 
 export interface AvatarGroupProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     shape?: AvatarGroupShape;
     size?: AvatarGroupSize;
     overlapFrom?: AvatarGroupOverlapFrom;

packages/semi-ui/badge/index.tsx

@@ -24,7 +24,7 @@ export interface BadgeProps {
     onMouseEnter?: (e: React.MouseEvent) => any;
     onMouseLeave?: (e: React.MouseEvent) => any;
     onClick?: (e: React.MouseEvent) => any;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 
 export default class Badge extends PureComponent<BadgeProps> {

packages/semi-ui/banner/index.tsx

@@ -20,15 +20,15 @@ export type Type = 'info' | 'danger' | 'warning' | 'success';
 export interface BannerProps {
     type?: Type;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     fullMode?: boolean;
     title?: React.ReactNode;
     description?: React.ReactNode;
-    icon?: string | React.ReactNode;
-    closeIcon?: string | React.ReactNode;
+    icon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
     style?: React.CSSProperties;
     bordered?: boolean;
-    onClose?: (e: React.MouseEvent) => void;
+    onClose?(e: React.MouseEvent):void;
 }
 
 export interface BannerState {

packages/semi-ui/breadcrumb/bread-context.tsx

@@ -5,7 +5,7 @@ export interface BreadContextType {
     onClick?: (info: BreadcrumbItemInfo, event: React.MouseEvent) => void;
     showTooltip?: boolean | showToolTipProps;
     compact?: boolean;
-    separator?: string | React.ReactNode;
+    separator?: React.ReactNode;
 }
 
 const BreadContext = React.createContext<BreadContextType>({});

packages/semi-ui/card/cardGroup.tsx

@@ -11,7 +11,7 @@ export type CardGroupType = 'grid';
 export interface CardGroupProps {
     /** Card group style class name */
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     /** Card Spacing */
     spacing?: number | number[];
     /** Card group inline style */

packages/semi-ui/card/index.tsx

@@ -26,7 +26,7 @@ export interface CardProps {
     bordered?: boolean;
     /** Style class name */
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     /** Cover */
     cover?: ReactNode;
     /** Additional additions to the right of the title */

packages/semi-ui/cascader/index.tsx

@@ -62,7 +62,7 @@ export interface CascaderProps extends BasicCascaderProps {
     motion?: Motion;
     treeData?: Array<CascaderData>;
     restTagsPopoverProps?: PopoverProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     value?: Value;
     prefix?: ReactNode;
     suffix?: ReactNode;
@@ -843,11 +843,11 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const allowClear = this.showClearBtn();
         if (allowClear) {
             return (
-                <div 
+                <div
                     className={clearCls}
-                    onClick={this.handleClear} 
+                    onClick={this.handleClear}
                     onKeyPress={this.handleClearEnterPress}
-                    role='button' 
+                    role='button'
                     tabIndex={0}
                 >
                     <IconClear />

packages/semi-ui/collapse/index.tsx

@@ -20,7 +20,7 @@ export { CollapsePanelProps } from './item';
 export interface CollapseReactProps extends CollapseProps{
     expandIcon?: React.ReactNode;
     collapseIcon?: React.ReactNode;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: CSSProperties;
     onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
 }

packages/semi-ui/collapse/item.tsx

@@ -12,7 +12,7 @@ export interface CollapsePanelProps {
     extra?: ReactNode;
     header?: ReactNode;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     reCalcKey?: number | string;
     style?: CSSProperties;
 }

packages/semi-ui/collapsible/index.tsx

@@ -11,7 +11,7 @@ const ease = 'cubicBezier(.25,.1,.25,1)';
 
 export interface CollapsibleProps {
     motion?: Motion;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     isOpen?: boolean;
     duration?: number;
     keepDOM?: boolean;

packages/semi-ui/descriptions/item.tsx

@@ -7,7 +7,7 @@ import DescriptionsContext, { DescriptionsContextValue } from './descriptions-co
 export interface DescriptionsItemProps {
     hidden?: boolean;
     className?: string;
-    children?: React.ReactNode | undefined | (() => React.ReactNode);
+    children?: React.ReactNode | (() => React.ReactNode);
     style?: React.CSSProperties;
     itemKey?: React.ReactNode;
 }

packages/semi-ui/empty/index.tsx

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

packages/semi-ui/form/errorMessage.tsx

@@ -7,7 +7,7 @@ import { IconAlertTriangle, IconAlertCircle } from '@douyinfe/semi-icons';
 
 const prefix = cssClasses.PREFIX;
 
-export type ReactFieldError = boolean | string | Array<any> | React.ReactNode | undefined;
+export type ReactFieldError = Array<any> | React.ReactNode;
 
 export interface ErrorMessageProps {
     error?: ReactFieldError;

packages/semi-ui/form/interface.ts

@@ -21,7 +21,7 @@ export type CommonFieldProps = {
     /** Field is required (except Form. Checkbox within the Group, Form. Radio) */
     field: string;
     /** The label text of the form control is the same name as the field by default when it is not passed */
-    label?: string | LabelProps | React.ReactNode | number;
+    label?: LabelProps | React.ReactNode;
     labelPosition?: 'top' | 'left' | 'inset';
     labelAlign?: 'left' | 'right';
     labelWidth?: number | string;

packages/semi-ui/form/label.tsx

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

packages/semi-ui/form/section.tsx

@@ -9,8 +9,8 @@ const prefix = cssClasses.PREFIX;
 export interface SectionProps {
     className?: string;
     style?: React.CSSProperties;
-    text?: React.ReactNode | string;
-    children?: React.ReactNode | undefined;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
 }
 
 export default class Section extends PureComponent<SectionProps> {

packages/semi-ui/form/slot.tsx

@@ -13,7 +13,7 @@ const prefix = cssClasses.PREFIX;
 export interface SlotProps {
     className?: string;
     style?: React.CSSProperties;
-    label?: LabelProps | React.ReactNode | number | string;
+    label?: LabelProps | React.ReactNode;
     noLabel?: boolean;
     labelPosition?: 'top' | 'left';
     error?: ErrorMessageProps;

packages/semi-ui/layout/Sider.tsx

@@ -38,7 +38,7 @@ export interface SiderProps {
     prefixCls?: string;
     style?: CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     breakpoint?: Array<keyof ResponsiveMap>;
     onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
     'aria-label'?: React.AriaAttributes['aria-label'];

packages/semi-ui/list/index.tsx

@@ -17,7 +17,7 @@ export { ListItemProps } from './item';
 export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     bordered?: boolean;
     footer?: React.ReactNode;
     header?: React.ReactNode;

packages/semi-ui/list/item.tsx

@@ -12,7 +12,7 @@ export interface ListItemProps {
     main?: React.ReactNode;
     align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
     onRightClick?: React.MouseEventHandler<HTMLLIElement>;

packages/semi-ui/modal/Modal.tsx

@@ -23,7 +23,7 @@ export type Directions = 'ltr' | 'rtl';
 
 export interface ModalReactProps extends ModalProps {
     cancelButtonProps?: ButtonProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     okButtonProps?: ButtonProps;
     bodyStyle?: CSSProperties;
     maskStyle?: CSSProperties;

packages/semi-ui/modal/ModalContent.tsx

@@ -21,7 +21,7 @@ let uuid = 0;
 
 
 export interface ModalContentReactProps extends ModalContentProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType = ConfigContext;

packages/semi-ui/navigation/Footer.tsx

@@ -10,7 +10,7 @@ import NavContext, { NavContextType } from './nav-context';
 import { BaseProps } from '../_base/baseComponent';
 
 export interface NavFooterProps extends BaseProps {
-    collapseButton?: React.ReactNode | boolean;
+    collapseButton?: React.ReactNode;
     collapseText?: (collapsed?: boolean) => React.ReactNode;
 }
 
@@ -28,7 +28,7 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
     static defaultProps = {
         collapseButton: false,
     };
-    
+
     context: NavContextType;
 
     renderCollapseButton = () => {

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.11.0-beta.1",
+    "version": "2.11.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.11.0-beta.1",
-        "@douyinfe/semi-animation-react": "2.11.0-beta.1",
-        "@douyinfe/semi-foundation": "2.11.0-beta.1",
-        "@douyinfe/semi-icons": "2.11.0-beta.1",
-        "@douyinfe/semi-illustrations": "2.11.0-beta.1",
-        "@douyinfe/semi-theme-default": "2.11.0-beta.1",
+        "@douyinfe/semi-animation": "2.11.0",
+        "@douyinfe/semi-animation-react": "2.11.0",
+        "@douyinfe/semi-foundation": "2.11.0",
+        "@douyinfe/semi-icons": "2.11.0",
+        "@douyinfe/semi-illustrations": "2.11.0",
+        "@douyinfe/semi-theme-default": "2.11.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -75,7 +75,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.11.0-beta.1",
+        "@douyinfe/semi-scss-compile": "2.11.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

packages/semi-ui/radio/radioGroup.tsx

@@ -30,7 +30,7 @@ export type RadioGroupProps = {
     value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     direction?: ArrayElement<typeof strings.DIRECTION_SET>;
     mode?: RadioMode;

packages/semi-ui/select/index.tsx

@@ -28,6 +28,7 @@ import { isSemiIcon } from '../_utils';
 import { Subtract } from 'utility-types';
 
 import warning from '@douyinfe/semi-foundation/utils/warning';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 import '@douyinfe/semi-foundation/select/select.scss';
 import { Locale } from '../locale/interface';
@@ -50,7 +51,7 @@ type ExcludeInputType = {
 type OnChangeValueType = string | number | Record<string, any>;
 export interface optionRenderProps {
     key?: any;
-    label?: string | React.ReactNode | number;
+    label?: React.ReactNode;
     value?: string | number;
     style?: React.CSSProperties;
     className?: string;
@@ -340,7 +341,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             isHovering: false,
         };
         /* Generate random string */
-        this.selectOptionListID = Math.random().toString(36).slice(2);
+        this.selectOptionListID = '';
         this.virtualizeListRef = React.createRef();
         this.inputRef = React.createRef();
         this.triggerRef = React.createRef();
@@ -559,6 +560,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
     componentDidMount() {
         this.foundation.init();
+        this.selectOptionListID = getUuidShort();
     }
 
     componentWillUnmount() {

packages/semi-ui/sideSheet/SideSheetContent.tsx

@@ -23,7 +23,7 @@ export interface SideSheetContentProps {
     style: CSSProperties;
     bodyStyle?: CSSProperties;
     className: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
 }

packages/semi-ui/table/HeadTable.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ColGroup from './ColGroup';
 import TableHeader from './TableHeader';
-import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow } from './interface';
 
 export interface HeadTableProps {
     [x: string]: any;
@@ -23,6 +23,7 @@ export interface HeadTableProps {
     selectedRowKeysSet: Set<any>;
     showHeader?: boolean;
     onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    onHeaderRow?: OnHeaderRow<any>;
 }
 
 /**
@@ -46,6 +47,7 @@ class HeadTable extends React.PureComponent<HeadTableProps> {
         selectedRowKeysSet: PropTypes.instanceOf(Set).isRequired, // Useful when update is selected
         showHeader: PropTypes.bool,
         onDidUpdate: PropTypes.func,
+        onHeaderRow: PropTypes.func,
     };
 
     static defaultProps = {

packages/semi-ui/table/Table.tsx

@@ -1089,6 +1089,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             components,
             headerRef,
             bodyRef,
+            onHeaderRow,
             rowSelection,
             dataSource,
             bodyHasScrollBar,
@@ -1110,6 +1111,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                     scroll={scroll}
                     showHeader={showHeader}
                     selectedRowKeysSet={selectedRowKeysSet}
+                    onHeaderRow={onHeaderRow}
                     dataSource={dataSource}
                     bodyHasScrollBar={bodyHasScrollBar}
                 />

packages/semi-ui/table/_story/v2/FixedOnHeaderRow/index.jsx

@@ -0,0 +1,134 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Table, Avatar, Toast } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+App.storyName = 'fix onHeaderRow';
+
+/**
+ * test with cypress
+ */
+export default function App() {
+    const [dataSource, setData] = useState([]);
+    const DAY = 24 * 60 * 60 * 1000;
+    const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            fixed: true,
+            width: 250,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi Pro 设计稿',
+                    value: 'Semi Pro 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            width: 200,
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+            render: text => `${text} KB`,
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            width: 200,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                            {typeof text === 'string' && text.slice(0, 1)}
+                        </Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            width: 200,
+            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
+            render: value => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            },
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            fixed: 'right',
+            align: 'center',
+            width: 100,
+        },
+    ];
+
+    const scroll = useMemo(() => ({ y: 300, x: 1200 }), []);
+    const rowSelection = useMemo(
+        () => ({
+            onChange: (selectedRowKeys, selectedRows) => {
+                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+            },
+            getCheckboxProps: record => ({
+                disabled: record.name === 'Michael James', // Column configuration not to be checked
+                name: record.name,
+            }),
+            fixed: true,
+        }),
+        []
+    );
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red',
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return (
+        <Table
+            onHeaderRow={(columns, index) => {
+                return {
+                    onClick: event => {
+                        console.log(event);
+                        Toast.info('header click');
+                    }, // 点击表头行
+                };
+            }}
+            columns={columns}
+            dataSource={dataSource}
+            rowSelection={rowSelection}
+            scroll={scroll}
+        />
+    );
+}

packages/semi-ui/table/_story/v2/index.js

@@ -4,4 +4,5 @@ export { default as FixedZIndex } from './FixedZIndex';
 export { default as FixedHeaderMerge } from './FixedHeaderMerge';
 export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
-export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
+export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
+export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';

packages/semi-ui/table/interface.ts

@@ -240,7 +240,7 @@ export type RowSelectionOnSelect<RecordType> = (
     nativeEvent?: React.MouseEvent
 ) => void;
 export type RowSelectionOnSelectAll<RecordType> = (selected?: boolean, selectedRows?: RecordType[], changedRows?: RecordType[]) => void;
-export type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode | boolean;
+export type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode;
 export type ExpandedRowRender<RecordType> = (record?: RecordType, index?: number, expanded?: boolean) => React.ReactNode;
 export type Footer<RecordType> = ReactNode | ((pageData?: RecordType[]) => React.ReactNode);
 export type FormatPageText = ((pageInfo?: { currentStart?: number; currentEnd?: number; total?: number }) => React.ReactNode) | boolean;

packages/semi-ui/timeline/index.tsx

@@ -17,7 +17,7 @@ export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'>
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 
 const prefixCls = cssClasses.PREFIX;

packages/semi-ui/timeline/item.tsx

@@ -7,7 +7,7 @@ import '@douyinfe/semi-foundation/timeline/timeline.scss';
 
 export interface TimelineItemProps {
     color?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.11.0-beta.1",
+    "version": "2.11.0",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

yarn.lock

@@ -1601,20 +1601,20 @@
     lodash-es "^4.17.21"
     react-i18next "^11.12.0"
 
-"@douyinfe/semi-site-markdown-blocks@^0.0.6":
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-markdown-blocks/-/semi-site-markdown-blocks-0.0.6.tgz#b63425a8dc1c480250c32ee02f336bd91e90748e"
-  integrity sha512-IyxwZq8T6jyWTam1cNHgmW2X0Zop85+AZ5U0kWWzYwGSXObq5SI6eJcas+Oa+kGlfu609ZRVFiJwNg/NK9dK5A==
+"@douyinfe/semi-site-markdown-blocks@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-markdown-blocks/-/semi-site-markdown-blocks-0.0.7.tgz#4377224a2e9d2e7ef9bbfaa10430033feb748f63"
+  integrity sha512-LP6wQCyTsA7bE6bFSrnyQS7+VdmbW8llCA23KqqlM9y/LF4NJqoNkLP0K0PeLqMVRdEfgvreNKRwIsBdHFL4+A==
   dependencies:
-    "@douyinfe/semi-site-playground" "0.0.6"
+    "@douyinfe/semi-site-playground" "0.0.7"
     classnames "^2.2.6"
     prism-react-renderer "^1.0.1"
     prop-types "^15.7.2"
 
-"@douyinfe/[email protected].6":
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-playground/-/semi-site-playground-0.0.6.tgz#65f13acc91bf6a4b33e2875b2ad4268fca7cc2a4"
-  integrity sha512-OSD2K4Z5npKZDRjo8unbuIZ9dwyYCcDaJGr8FyXnV+aCJB8STmMBEUUpAr8bv5L0qJKZq+0ha5VfqnnHdEmnTg==
+"@douyinfe/[email protected].7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-playground/-/semi-site-playground-0.0.7.tgz#5be45ca2d87420200bc52c730cf37a77f5d4d586"
+  integrity sha512-JhzHshDEfLBmc1sxTyGgbvpADIMxLBaq83LnizsPYUfbwmA97j2oJPftyQuktMZIWAl1Yl90cvAX4iIBb7XlhQ==
   dependencies:
     "@douyinfe/semi-icons" "^2.0.0"
     "@douyinfe/semi-ui" "^2.0.0"