Merge branch 'release'

content/feedback/popconfirm/index-en-US.md

@@ -109,6 +109,48 @@ function TypesConfirmDemo(props = {}) {
 }
 ```
 
+
+### Delay hide
+
+`onOk` and `onCancel` can be closed after click through return Promise (supported after v2.19). When onCancel and onOk are triggered, the corresponding Button will automatically switch to `loading: true`  
+promise solve will close the bubble confirmation box, the bubble will remain when promise reject, and button loading will automatically switch to false  
+
+```jsx live=true
+import React from 'react';
+import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui';
+
+() => {
+    const onConfirm = () => {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                console.log('resolve, close popconfirm');
+                resolve();
+            }, 2000);
+        });
+    };
+
+    const onCancel = () => {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                console.log('reject, popconfirm still exist');
+                reject();
+            }, 2000);
+        });
+    };
+
+    return (
+        <Popconfirm
+            title="Are you sure to save this modification?"
+            content="This modification will be irreversible"
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+        >
+            <Button>Save</Button>
+        </Popconfirm>
+    );
+};
+```
+
 ### Use with Tooltip or Popover
 
 Please refer to [Use with Tooltip/Popover](/en-US/show/tooltip#Use-with-Popver-or-Popconfirm)
@@ -138,8 +180,8 @@ Please refer to [Use with Tooltip/Popover](/en-US/show/tooltip#Use-with-Popver-o
 | trigger            | Timing to trigger the display, optional value：hover / focus / click / custom                                                                                         | string                |   'click'                  |
 | visible            | Whether the bubble box displays controlled attributes                                                                                                                   | boolean                          |                     | **0.19.0**        |
 | zIndex             | Floating layer z-index value                                                                                                                                          | number                     | 1030                |
-| onConfirm          | Click the confirmation button to call back.                                                                                                                           | (e) => void                |                     |
-| onCancel           | Click the Cancel button to call back.                                                                                                                                 | (e) => void                |                     |
+| onConfirm          | Click the confirmation button to call back. Promise support after v2.19                                                                                                                           | (e) => void \| Promise                |                     |
+| onCancel           | Click the Cancel button to call back. Promise support after v2.19                                                                                                                          | (e) => void \| Promise                |                     |
 | onVisibleChange    | Bubble box toggle shows hidden callbacks                                                                                                                              | (visible: boolean) => void | () => {}            | **0.19.0**        |
 | onClickOutSide     | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked                                                 | (e: event) => void         |                     | **2.1.0**        |
 ## Design Tokens

content/feedback/popconfirm/index.md

@@ -108,6 +108,48 @@ function TypesConfirmDemo(props = {}) {
 }
 ```
 
+### 延时关闭
+
+onOk、onCancel 可以通过 return Promise 实现点击后延时关闭 （v2.19后支持）。 onCancel、onOk 被触发时，对应的 Button 会自动切换为 loading: true  
+promise solve 会关闭气泡确认框， promise reject时气泡依然保留，同时 button loading 自动切换为 false
+
+```jsx live=true
+import React from 'react';
+import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui';
+
+() => {
+    const onConfirm = () => {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                console.log('resolve, close popconfirm');
+                resolve();
+            }, 2000);
+        });
+    };
+
+    const onCancel = () => {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                console.log('reject, popconfirm still exist');
+                reject();
+            }, 2000);
+        });
+    };
+
+    return (
+        <Popconfirm
+            title="确定是否要保存此修改？"
+            content="此修改将不可逆"
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+        >
+            <Button>保存</Button>
+        </Popconfirm>
+    );
+};
+```
+
+
 ### 搭配 Tooltip 或 Popover 使用
 
 请参考[搭配使用](/zh-CN/show/tooltip#%E6%90%AD%E9%85%8D-popover-%E6%88%96-popconfirm-%E4%BD%BF%E7%94%A8)
@@ -136,8 +178,8 @@ function TypesConfirmDemo(props = {}) {
 | trigger            | 触发展示的时机，可选值：hover / focus / click / custom                                                                                         | string                |   'click'                  |
 | visible            | 气泡框是否展示的受控属性                                                                                                                    | boolean                          |                     | **0.19.0**        |
 | zIndex             | 浮层 z-index 值                                                                                                                             | number                           | 1030                |
-| onConfirm          | 点击确认按钮回调                                                                                                                            | Function(e)                      |                     |
-| onCancel           | 点击取消按钮回调                                                                                                                            | Function(e)                      |                     |
+| onConfirm          | 点击确认按钮回调,  Promise类型于 v 2.19后支持                                                                                                                          | Function(e): void \| Promise                      |                     |
+| onCancel           | 点击取消按钮回调，Promise类型于 v 2.19后支持                                                                                                                            | Function(e): void \| Promise                      |                     |
 | onClickOutSide     | 当弹出层处于展示状态，点击非Children、非浮层内部区域时的回调                                                                                      | Function(e)                      |  **2.1.0**      |
 | onVisibleChange    | 气泡框切换显示隐藏的回调                                                                                                               | Function(visible: boolean): void | () => {}            | **0.19.0**        |
 

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

@@ -16,6 +16,25 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.19.0-beta.0 (2022-09-05)
+- 【Feat】
+  - Popconfirm's onOk and onCancel support Promise type return value and close asynchronously [#1056](https://github.com/DouyinFE/semi-design/issues/1056)
+- 【Fix】
+  - Fix Popconfirm multiline content style bug [#868](https://github.com/DouyinFE/semi-design/issues/868)
+  - Fix DefaultTabBar type error [#1077](https://github.com/DouyinFE/semi-design/pull/1077)
+  - Fix the TS error when the Form level is set to autoComplete to false
+  - Fix an issue where Slider was incorrectly positioned when passing in partial steps values [#1043](https://github.com/DouyinFE/semi-design/issues/1043)
+  - Fix Tag tagKey type definition error problem [#1081](https://github.com/DouyinFE/semi-design/pull/1081)
+  - Fix incorrect value when RadioGroup was first rendered [#1060](https://github.com/DouyinFE/semi-design/pull/1060)
+- 【Style】
+  - Add overflow: auto default style to Sidesheet body, you no longer need to add overflow related styles through props.bodyStyle when the content exceeds [#1098](https://github.com/DouyinFE/semi-design/pull/1098)
+- 【Refactor】
+  - Replace margin layout in Checkbox with flex layout and gap [#1073](https://github.com/DouyinFE/semi-design/pull/1073)
+  - Dividers in ButtonGroup use span tags instead of border-right [#1065](https://github.com/DouyinFE/semi-design/pull/1065)
+  - Refactored Radio's layout, removed some absolute positioning, and used flex layout instead [#1060](https://github.com/DouyinFE/semi-design/pull/1060)
+- 【Breaking Change】
+  - When using CheckboxGroup, if the child Checkbox is nested with a layer of elements such as div or span, then the Checkbox will not have margin-bottom. Styling each Checkbox nested element individually is unaffected [#1073](https://github.com/DouyinFE/semi-design/pull/1073)
+  
 #### 🎉 2.18.2 (2022-08-31)
 
 - 【Fix】

content/start/changelog/index.md

@@ -16,6 +16,25 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 ---
 
+#### 🎉 2.19.0-beta.0 (2022-09-05)
+- 【Feat】
+  - Popconfirm onOk、onCancel支持 Promise 类型返回值，异步关闭 [#1056 ](https://github.com/DouyinFE/semi-design/issues/1056)
+- 【Fix】
+  - 修复 Popconfirm 多行内容样式错误 [#868](https://github.com/DouyinFE/semi-design/issues/868)
+  - 修复 DefaultTabBar 类型有误  [#1077](https://github.com/DouyinFE/semi-design/pull/1077)
+  - 修复 Form 级别设置 autoComplete 为 false 出现 TS 报错问题
+  - 修复 Slider 在传入部分 steps 值时定位显示不正确的问题,  [#1043](https://github.com/DouyinFE/semi-design/issues/1043)
+  - 修复 Tag tagKey 类型定义错误问题 [#1081](https://github.com/DouyinFE/semi-design/pull/1081)
+  - 修复 RadioGroup 第一次渲染时 value 不正确问题 [#1060](https://github.com/DouyinFE/semi-design/pull/1060)
+- 【Style】
+  - Sidesheet body 添加 overflow: auto 默认样式，内容超出时不再需要自行通过 props.bodyStyle 添加 overflow相关样式 [#1098](https://github.com/DouyinFE/semi-design/pull/1098)
+- 【Refactor】
+  - 使用 flex 布局和 gap 替换 Checkbox 中的 margin 布局 [#1073](https://github.com/DouyinFE/semi-design/pull/1073)
+  - ButtonGroup 中的分割线使用 span 标签代替 border-right [#1065](https://github.com/DouyinFE/semi-design/pull/1065)
+  - 重构了 Radio 的布局，去掉了一些绝对定位，使用 flex 布局代替 [#1060](https://github.com/DouyinFE/semi-design/pull/1060)
+- 【Breaking Change】
+  - 使用 CheckboxGroup 时，如果给子级 Checkbox 嵌套一层 div 或者 span 等元素，这时 Checkbox 将不带 margin-bottom。单独给每个 Checkbox 嵌套元素样式上不受影响 [#1073](https://github.com/DouyinFE/semi-design/pull/1073)
+
 #### 🎉 2.18.2 (2022-08-31)
 
 - 【Fix】

lerna.json

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

package.json

@@ -1,228 +1,228 @@
 {
-  "name": "semi",
-  "version": "0.0.1",
-  "description": "Semi monorepo main project",
-  "author": "",
-  "workspaces": [
-    "packages/**"
-  ],
-  "private": true,
-  "scripts": {
-    "install:codesandbox": "npm i lerna && npm run bootstrap",
-    "bootstrap": "lerna bootstrap",
-    "docsite": "npm run develop",
-    "pre-develop": "npm run scripts:changelog && node ./scripts/designToken.js ./static/designToken.json",
-    "develop": "npm run pre-develop && gatsby clean && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && gatsby develop -H 0.0.0.0 --port=3666 --verbose",
-    "scripts:changelog": "node scripts/changelog.js",
-    "start": "npm run story",
-    "pre-story": "lerna exec --scope=@douyinfe/semi-ui --scope=@douyinfe/semi-foundation -- rm -rf ./lib && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design",
-    "story": "npm run pre-story && start-storybook -c ./.storybook/js/ -p 6006",
-    "story:ts": "npm run pre-story && && start-storybook -c ./.storybook/ts/ -p 6007",
-    "story:ani": "npm run pre-story && && start-storybook -c ./.storybook/animation/react -p 6008",
-    "lint": "npm run lint:script && npm run lint:style",
-    "lint:script": "eslint packages src --ext '.js,.jsx,.ts,.tsx'",
-    "lint:script-fix": "eslint packages src --ext '.js,.jsx,.ts,.tsx' --fix",
-    "lint:style": "stylelint '**/*.{scss,sass}'",
-    "lint:style-fix": "stylelint '**/*.{scss,sass}' --fix",
-    "test": "cross-env NODE_ENV=test ./node_modules/.bin/jest --silent",
-    "test:unit": "cross-env NODE_ENV=test type=unit ./node_modules/.bin/jest --silent --notify",
-    "test:story": "cross-env NODE_ENV=test type=story ./node_modules/.bin/jest --silent --notify --maxWorkers=4",
-    "test:coverage": "cross-env TZ=Asia/Shanghai NODE_ENV=test type=unit ./node_modules/.bin/jest --silent --coverage --notify",
-    "test:storyUpdate": "cross-env NODE_ENV=test type=story ./node_modules/.bin/jest --silent -u --notify --maxWorkers=4",
-    "test:cy": "npx wait-on http://127.0.0.1:6006 && ./node_modules/.bin/cypress open",
-    "build:lib": "lerna run build:lib",
-    "build:js": "lerna run build:js",
-    "build:css": "lerna run build:css",
-    "build-storybook": "build-storybook  -c ./.storybook/js/",
-    "build:gatsbydoc": "lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && cross-env NODE_ENV=production node --max_old_space_size=16384 ./node_modules/gatsby/cli.js build --prefix-paths --verbose && rm -rf build && mv public build",
-    "build:icon": "lerna run build:icon --scope='@douyinfe/semi-{icons,illustrations}'",
-    "cypress:coverage": "npx wait-on http://127.0.0.1:6006 && ./node_modules/.bin/cypress run",
-    "postcypress:coverage": "yarn coverage:merge",
-    "posttest:coverage": "yarn coverage:merge",
-    "coverage:merge": "npx istanbul-combine -d test/merged -p detail -r lcov -r json cypress/coverage/coverage-final.json test/coverage/coverage-final.json"
-  },
-  "dependencies": {
-    "@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.7",
-    "@mdx-js/react": "^1.6.22",
-    "@svgr/core": "^5.5.0",
-    "@types/react-window": "^1.8.5",
-    "aos": "^2.3.4",
-    "camelcase": "^6.2.0",
-    "chroma-js": "^2.1.2",
-    "classnames": "^2.3.1",
-    "copy-text-to-clipboard": "^2.2.0",
-    "cross-env": "^5.2.1",
-    "css": "^2.2.4",
-    "date-fns": "^2.23.0",
-    "debug": "^4.3.2",
-    "gatsby": "^2.32.13",
-    "gatsby-plugin-i18n": "^1.0.1",
-    "gatsby-plugin-mdx": "^1.10.1",
-    "gatsby-plugin-react-helmet": "^3.10.0",
-    "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-plugin-svgr": "^3.0.0-beta.0",
-    "gatsby-source-filesystem": "^2.11.1",
-    "grapheme-splitter": "^1.0.4",
-    "immutability-helper": "^3.1.1",
-    "lodash-es": "^4.17.21",
-    "memoize-one": "^5.2.1",
-    "normalize.css": "^8.0.1",
-    "prop-types": "^15.7.2",
-    "qs": "^6.10.1",
-    "re-resizable": "^6.9.0",
-    "react": "^16.14.0",
-    "react-clipboard.js": "^2.0.16",
-    "react-dnd": "^9.5.1",
-    "react-dnd-html5-backend": "^9.5.1",
-    "react-dom": "^16.14.0",
-    "react-helmet": "^5.2.1",
-    "react-infinite-scroller": "^1.2.4",
-    "react-inlinesvg": "^1.2.0",
-    "react-intl": "^3.12.1",
-    "react-lazyload": "^3.2.0",
-    "react-resizable": "^1.11.1",
-    "react-scroll-parallax": "^2.4.0",
-    "react-sortable-hoc": "^2.0.0",
-    "react-virtualized": "^9.22.3",
-    "reset-css": "^5.0.1",
-    "sass": "1.32.13",
-    "typeface-inconsolata": "0.0.72",
-    "typeface-inter": "^3.18.1",
-    "unist-util-remove": "^1.0.3",
-    "unist-util-visit": "^2.0.3",
-    "wcag-color": "^1.1.1"
-  },
-  "devDependencies": {
-    "@actions/core": "^1.6.0",
-    "@actions/github": "^5.0.0",
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/eslint-parser": "^7.15.0",
-    "@babel/eslint-plugin": "^7.14.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-transform-runtime": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@babel/runtime": "^7.15.3",
-    "@babel/types": "^7.15.4",
-    "@commitlint/cli": "^9.1.2",
-    "@commitlint/config-conventional": "^7.6.0",
-    "@octokit/rest": "^18.12.0",
-    "@shopify/jest-dom-mocks": "^2.11.7",
-    "@storybook/addon-a11y": "^6.4.10",
-    "@storybook/addon-actions": "^6.4.10",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-toolbars": "^6.4.10",
-    "@storybook/builder-webpack5": "^6.5.0-alpha.13",
-    "@storybook/cli": "^6.4.0",
-    "@storybook/manager-webpack5": "^6.5.0-alpha.13",
-    "@storybook/react": "^6.4.10",
-    "@svgr/webpack": "^5.5.0",
-    "@types/classnames": "^2.3.0",
-    "@types/enhanced-resolve": "^3.0.7",
-    "@types/fs-extra": "^9.0.12",
-    "@types/jest": "^23.3.14",
-    "@types/lodash": "^4.14.172",
-    "@types/lodash-es": "^4.17.4",
-    "@types/node": "^14.17.9",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
-    "@types/react-resizable": "^1.7.3",
-    "@types/svgo": "^2.3.1",
-    "@types/webpack": "^4.41.30",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.29.1",
-    "awesome-typescript-loader": "^5.2.1",
-    "axios": "^0.21.1",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-transform-require-context": "^0.1.1",
-    "babel-runtime": "^6.26.0",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "chromatic": "^6.0.6",
-    "crypto": "^1.0.1",
-    "css-loader": "^3.6.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
-    "esbuild": "^0.14.47",
-    "esbuild-loader": "^2.14.0",
-    "eslint": "^7.32.0",
-    "eslint-config-jest-enzyme": "^7.1.2",
-    "eslint-plugin-import": "^2.24.0",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-markdown": "^2.2.1",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-semi-design": "latest",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.7",
-    "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.3.1",
-    "jest": "^24.9.0",
-    "jest-date-mock": "^1.0.8",
-    "jest-enzyme": "^7.1.2",
-    "jest-mock-random": "^1.1.1",
-    "jsdom": "^15.2.1",
-    "lerna": "^3.22.1",
-    "lint-staged": "^10.5.4",
-    "marked": "^2.1.3",
-    "mini-css-extract-plugin": "^0.12.0",
-    "null-loader": "^3.0.0",
-    "postcss-loader": "^2.1.6",
-    "prettier": "^1.19.1",
-    "progress-bar-webpack-plugin": "^1.12.1",
-    "react-dnd-cjs": "^9.5.1",
-    "react-storybook-addon-props-combinations": "^1.1.0",
-    "rimraf": "^2.7.1",
-    "sass-loader": "^7.3.1",
-    "semver": "^7.3.5",
-    "sha1": "^1.1.1",
-    "sinon": "^6.3.5",
-    "storybook-addon-turbo-build": "^1.0.1",
-    "style-loader": "^0.23.1",
-    "stylelint": "^13.13.1",
-    "svgo": "^2.7.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "ts-loader": "^5.4.5",
-    "typescript": "4.4.3",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2",
-    "webpackbar": "^5.0.0-3",
-    "cypress": "9.5.2",
-    "cypress-plugin-tab": "^1.0.5",
-    "@cypress/code-coverage": "^3.9.12"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint .commitlintrc.js -E HUSKY_GIT_PARAMS",
-      "pre-commit": "lint-staged"
-    }
-  },
-  "resolutions": {
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1"
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
-      "eslint --ext '.js,.jsx,.ts,.tsx' --fix"
+    "name": "semi",
+    "version": "0.0.1",
+    "description": "Semi monorepo main project",
+    "author": "",
+    "workspaces": [
+        "packages/**"
     ],
-    "packages/**/*.{js,jsx,ts,tsx}": [
-      "eslint --ext '.js,.jsx,.ts,.tsx' --fix"
-    ],
-    "*.{scss,css}": [
-      "stylelint"
-    ]
-  },
-  "license": "MIT"
-}
+    "private": true,
+    "scripts": {
+        "install:codesandbox": "npm i lerna && npm run bootstrap",
+        "bootstrap": "lerna bootstrap",
+        "docsite": "npm run develop",
+        "pre-develop": "npm run scripts:changelog && node ./scripts/designToken.js ./static/designToken.json",
+        "develop": "npm run pre-develop && gatsby clean && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && gatsby develop -H 0.0.0.0 --port=3666 --verbose",
+        "scripts:changelog": "node scripts/changelog.js",
+        "start": "npm run story",
+        "pre-story": "lerna exec --scope=@douyinfe/semi-ui --scope=@douyinfe/semi-foundation -- rm -rf ./lib && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design",
+        "story": "npm run pre-story && start-storybook -c ./.storybook/js/ -p 6006",
+        "story:ts": "npm run pre-story && && start-storybook -c ./.storybook/ts/ -p 6007",
+        "story:ani": "npm run pre-story && && start-storybook -c ./.storybook/animation/react -p 6008",
+        "lint": "npm run lint:script && npm run lint:style",
+        "lint:script": "eslint packages src --ext '.js,.jsx,.ts,.tsx'",
+        "lint:script-fix": "eslint packages src --ext '.js,.jsx,.ts,.tsx' --fix",
+        "lint:style": "stylelint '**/*.{scss,sass}'",
+        "lint:style-fix": "stylelint '**/*.{scss,sass}' --fix",
+        "test": "cross-env NODE_ENV=test ./node_modules/.bin/jest --silent",
+        "test:unit": "cross-env NODE_ENV=test type=unit ./node_modules/.bin/jest --silent --notify",
+        "test:story": "cross-env NODE_ENV=test type=story ./node_modules/.bin/jest --silent --notify --maxWorkers=4",
+        "test:coverage": "cross-env TZ=Asia/Shanghai NODE_ENV=test type=unit ./node_modules/.bin/jest --silent --coverage --notify",
+        "test:storyUpdate": "cross-env NODE_ENV=test type=story ./node_modules/.bin/jest --silent -u --notify --maxWorkers=4",
+        "test:cy": "npx wait-on http://127.0.0.1:6006 && ./node_modules/.bin/cypress open",
+        "build:lib": "lerna run build:lib",
+        "build:js": "lerna run build:js",
+        "build:css": "lerna run build:css",
+        "build-storybook": "build-storybook  -c ./.storybook/js/",
+        "build:gatsbydoc": "lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && cross-env NODE_ENV=production node --max_old_space_size=16384 ./node_modules/gatsby/cli.js build --prefix-paths --verbose && rm -rf build && mv public build",
+        "build:icon": "lerna run build:icon --scope='@douyinfe/semi-{icons,illustrations}'",
+        "cypress:coverage": "npx wait-on http://127.0.0.1:6006 && ./node_modules/.bin/cypress run",
+        "postcypress:coverage": "yarn coverage:merge",
+        "posttest:coverage": "yarn coverage:merge",
+        "coverage:merge": "npx istanbul-combine -d test/merged -p detail -r lcov -r json cypress/coverage/coverage-final.json test/coverage/coverage-final.json"
+    },
+    "dependencies": {
+        "@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.7",
+        "@mdx-js/react": "^1.6.22",
+        "@svgr/core": "^5.5.0",
+        "@types/react-window": "^1.8.5",
+        "aos": "^2.3.4",
+        "camelcase": "^6.2.0",
+        "chroma-js": "^2.1.2",
+        "classnames": "^2.3.1",
+        "copy-text-to-clipboard": "^2.2.0",
+        "cross-env": "^5.2.1",
+        "css": "^2.2.4",
+        "date-fns": "^2.23.0",
+        "debug": "^4.3.2",
+        "gatsby": "^2.32.13",
+        "gatsby-plugin-i18n": "^1.0.1",
+        "gatsby-plugin-mdx": "^1.10.1",
+        "gatsby-plugin-react-helmet": "^3.10.0",
+        "gatsby-plugin-remove-serviceworker": "^1.0.0",
+        "gatsby-plugin-svgr": "^3.0.0-beta.0",
+        "gatsby-source-filesystem": "^2.11.1",
+        "grapheme-splitter": "^1.0.4",
+        "immutability-helper": "^3.1.1",
+        "lodash-es": "^4.17.21",
+        "memoize-one": "^5.2.1",
+        "normalize.css": "^8.0.1",
+        "prop-types": "^15.7.2",
+        "qs": "^6.10.1",
+        "re-resizable": "^6.9.0",
+        "react": "^16.14.0",
+        "react-clipboard.js": "^2.0.16",
+        "react-dnd": "^9.5.1",
+        "react-dnd-html5-backend": "^9.5.1",
+        "react-dom": "^16.14.0",
+        "react-helmet": "^5.2.1",
+        "react-infinite-scroller": "^1.2.4",
+        "react-inlinesvg": "^1.2.0",
+        "react-intl": "^3.12.1",
+        "react-lazyload": "^3.2.0",
+        "react-resizable": "^1.11.1",
+        "react-scroll-parallax": "^2.4.0",
+        "react-sortable-hoc": "^2.0.0",
+        "react-virtualized": "^9.22.3",
+        "reset-css": "^5.0.1",
+        "sass": "1.32.13",
+        "typeface-inconsolata": "0.0.72",
+        "typeface-inter": "^3.18.1",
+        "unist-util-remove": "^1.0.3",
+        "unist-util-visit": "^2.0.3",
+        "wcag-color": "^1.1.1"
+    },
+    "devDependencies": {
+        "@actions/core": "^1.6.0",
+        "@actions/github": "^5.0.0",
+        "@babel/cli": "^7.14.8",
+        "@babel/core": "^7.15.0",
+        "@babel/eslint-parser": "^7.15.0",
+        "@babel/eslint-plugin": "^7.14.5",
+        "@babel/plugin-proposal-class-properties": "^7.14.5",
+        "@babel/plugin-proposal-decorators": "^7.14.5",
+        "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+        "@babel/plugin-transform-runtime": "^7.15.8",
+        "@babel/preset-env": "^7.15.8",
+        "@babel/preset-react": "^7.14.5",
+        "@babel/preset-typescript": "^7.15.0",
+        "@babel/runtime": "^7.15.3",
+        "@babel/types": "^7.15.4",
+        "@commitlint/cli": "^9.1.2",
+        "@commitlint/config-conventional": "^7.6.0",
+        "@octokit/rest": "^18.12.0",
+        "@shopify/jest-dom-mocks": "^2.11.7",
+        "@storybook/addon-a11y": "^6.4.10",
+        "@storybook/addon-actions": "^6.4.10",
+        "@storybook/addon-knobs": "^6.4.0",
+        "@storybook/addon-toolbars": "^6.4.10",
+        "@storybook/builder-webpack5": "^6.5.0-alpha.13",
+        "@storybook/cli": "^6.4.0",
+        "@storybook/manager-webpack5": "^6.5.0-alpha.13",
+        "@storybook/react": "^6.4.10",
+        "@svgr/webpack": "^5.5.0",
+        "@types/classnames": "^2.3.0",
+        "@types/enhanced-resolve": "^3.0.7",
+        "@types/fs-extra": "^9.0.12",
+        "@types/jest": "^23.3.14",
+        "@types/lodash": "^4.14.172",
+        "@types/lodash-es": "^4.17.4",
+        "@types/node": "^14.17.9",
+        "@types/react": "^18.0.5",
+        "@types/react-dom": "^18.0.1",
+        "@types/react-resizable": "^1.7.3",
+        "@types/svgo": "^2.3.1",
+        "@types/webpack": "^4.41.30",
+        "@typescript-eslint/eslint-plugin": "^4.29.1",
+        "@typescript-eslint/parser": "^4.29.1",
+        "awesome-typescript-loader": "^5.2.1",
+        "axios": "^0.21.1",
+        "babel-core": "^7.0.0-bridge.0",
+        "babel-jest": "^24.9.0",
+        "babel-loader": "^8.2.2",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-plugin-transform-require-context": "^0.1.1",
+        "babel-runtime": "^6.26.0",
+        "case-sensitive-paths-webpack-plugin": "^2.4.0",
+        "chromatic": "^6.0.6",
+        "crypto": "^1.0.1",
+        "css-loader": "^3.6.0",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.6",
+        "enzyme-to-json": "^3.6.2",
+        "esbuild": "^0.14.47",
+        "esbuild-loader": "^2.14.0",
+        "eslint": "^7.32.0",
+        "eslint-config-jest-enzyme": "^7.1.2",
+        "eslint-plugin-import": "^2.24.0",
+        "eslint-plugin-jest": "^24.4.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-markdown": "^2.2.1",
+        "eslint-plugin-react": "^7.24.0",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-plugin-semi-design": "latest",
+        "fs-extra": "^8.1.0",
+        "glob": "^7.1.7",
+        "html-webpack-plugin": "^3.2.0",
+        "husky": "^1.3.1",
+        "jest": "^24.9.0",
+        "jest-date-mock": "^1.0.8",
+        "jest-enzyme": "^7.1.2",
+        "jest-mock-random": "^1.1.1",
+        "jsdom": "^15.2.1",
+        "lerna": "^3.22.1",
+        "lint-staged": "^10.5.4",
+        "marked": "^2.1.3",
+        "mini-css-extract-plugin": "^0.12.0",
+        "null-loader": "^3.0.0",
+        "postcss-loader": "^2.1.6",
+        "prettier": "^1.19.1",
+        "progress-bar-webpack-plugin": "^1.12.1",
+        "react-dnd-cjs": "^9.5.1",
+        "react-storybook-addon-props-combinations": "^1.1.0",
+        "rimraf": "^2.7.1",
+        "sass-loader": "^7.3.1",
+        "semver": "^7.3.5",
+        "sha1": "^1.1.1",
+        "sinon": "^6.3.5",
+        "storybook-addon-turbo-build": "^1.0.1",
+        "style-loader": "^0.23.1",
+        "stylelint": "^13.13.1",
+        "svgo": "^2.7.0",
+        "terser-webpack-plugin": "^4.2.3",
+        "ts-loader": "^5.4.5",
+        "typescript": "4.4.3",
+        "webpack": "^4.46.0",
+        "webpack-cli": "^3.3.12",
+        "webpack-dev-server": "^3.11.2",
+        "webpackbar": "^5.0.0-3",
+        "cypress": "9.5.2",
+        "cypress-plugin-tab": "^1.0.5",
+        "@cypress/code-coverage": "^3.9.12"
+    },
+    "husky": {
+        "hooks": {
+            "commit-msg": "commitlint .commitlintrc.js -E HUSKY_GIT_PARAMS",
+            "pre-commit": "lint-staged"
+        }
+    },
+    "resolutions": {
+        "@types/react": "^18.0.5",
+        "@types/react-dom": "^18.0.1"
+    },
+    "lint-staged": {
+        "src/**/*.{js,jsx,ts,tsx}": [
+            "eslint --ext '.js,.jsx,.ts,.tsx' --fix"
+        ],
+        "packages/**/*.{js,jsx,ts,tsx}": [
+            "eslint --ext '.js,.jsx,.ts,.tsx' --fix"
+        ],
+        "*.{scss,css}": [
+            "stylelint"
+        ]
+    },
+    "license": "MIT"
+}

packages/semi-animation-react/getBabelConfig.js

@@ -18,19 +18,5 @@ module.exports = ({ isESM }) => {
                 },
             ],
         ],
-        plugins: [
-            [
-                '@babel/plugin-transform-runtime',
-                {
-                    corejs: 3
-                },
-            ],
-            [
-                '@babel/plugin-proposal-decorators',
-                {
-                    legacy: true,
-                },
-            ],
-        ]    
     };
 };

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.18.2",
+  "version": "2.19.0-beta.0",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -25,14 +25,11 @@
     "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.15.4",
     "@douyinfe/semi-animation": "2.12.0",
-    "@douyinfe/semi-animation-styled": "2.18.2",
+    "@douyinfe/semi-animation-styled": "2.19.0-beta.0",
     "classnames": "^2.2.6"
   },
   "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",
     "@storybook/addon-knobs": "^6.3.1",

packages/semi-animation-styled/package.json

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

packages/semi-animation/getBabelConfig.js

@@ -16,20 +16,6 @@ module.exports = ({ isESM }) => {
                     }
                 },
             ],
-        ],
-        plugins: [
-            [
-                '@babel/plugin-transform-runtime',
-                {
-                    corejs: 3
-                },
-            ],
-            [
-                '@babel/plugin-proposal-decorators',
-                {
-                    legacy: true,
-                },
-            ],
         ]
     };
 };

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.18.2",
+  "version": "2.19.0-beta.0",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",
@@ -30,11 +30,9 @@
     "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.15.4",
     "bezier-easing": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.15.8",
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "del": "^6.0.0",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-semi-design",
-  "version": "2.18.2",
+  "version": "2.19.0-beta.0",
   "description": "semi ui eslint plugin",
   "keywords": [
     "semi",

packages/semi-foundation/anchor/anchor.scss

@@ -18,8 +18,6 @@ $module: #{$prefix}-anchor;
         left: $spacing-anchor_slide-left;
         top: $spacing-anchor_slide-top;
         height: 100%;
-        box-sizing: border-box;
-        padding: $width-anchor-outline 0;
 
         &-muted {
             display: none;
@@ -65,12 +63,6 @@ $module: #{$prefix}-anchor;
     }
 
     &-link {
-        padding-left: $spacing-anchor_link-paddingLeft;
-
-        &-wrapper {
-            padding-right: $width-anchor-outline;
-            margin: $width-anchor-outline 0;
-        }
 
         &-title {
             cursor: pointer;
@@ -93,6 +85,7 @@ $module: #{$prefix}-anchor;
 
             &:focus-visible {
                 outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+                outline-offset: $width-anchor-outlineOffset;
             }
 
             &-disabled {

packages/semi-foundation/anchor/rtl.scss

@@ -11,7 +11,6 @@ $module: #{$prefix}-anchor;
         }
 
         &-link {
-            padding-right: $spacing-anchor_link-paddingLeft;
             padding-left: auto;
         }
     }

packages/semi-foundation/anchor/variables.scss

@@ -30,4 +30,5 @@ $radius-anchor_slide: 1px; // 滑轨圆角
 
 // Witdh
 $width-anchor-outline: 2px; // anchor轮廓宽度
+$width-anchor-outlineOffset: -2px; // anchor轮廓 outline-offset 宽度
 $width-anchor-outline_border_radius: 3px; // anchor轮廓圆角

packages/semi-foundation/button/button.scss

@@ -202,6 +202,9 @@ $module: #{$prefix}-button;
     }
 
     &-group {
+        display: flex;
+        flex-wrap: wrap;
+
         & > .#{$module} {
             margin: 0;
             padding-left: 0;
@@ -257,16 +260,50 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
-            &:not(:last-child) {
-                .#{$prefix}-button-content {
-                    border-right: $width-button_group-border $color-button_group-border-default solid;
-                }
-            }
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
             }
         }
+
+        &-line {
+            display: inline-flex;
+            align-items: center;
+            background-color: $color-button_group-border-default;
+
+            &-primary {
+                background-color: $color-button_primary-bg-default;
+            }
+            &-secondary {
+                background-color: $color-button_secondary-bg-default;
+            }
+            &-tertiary {
+                background-color: $color-button_tertiary-bg-default;
+            }
+            &-warning {
+                background-color: $color-button_warning-bg-default;
+            }
+            &-danger {
+                background-color: $color-button_danger-bg-default;
+            }
+            &-disabled {
+                background-color: $color-button_disabled-bg-default;
+            }
+            &-light {
+                background-color: $color-button_light-bg-default;
+            }
+            &-borderless {
+                background-color: transparent;
+            }
+
+            &::before {
+                display: block;
+                content: '';
+                width: $width-button_group-border;
+                height: $height-button_group_line_default;
+                background-color: $color-button_group-border-default;
+            }
+        }
     }
 }
 

packages/semi-foundation/button/variables.scss

@@ -141,6 +141,7 @@ $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
+$height-button_group_line_default: 20px; // 分割线高度 - 默认
 
 $width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小

packages/semi-foundation/checkbox/checkbox.scss

@@ -11,13 +11,14 @@ $module: #{$prefix}-checkbox;
     // box-sizing: border-box;
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
     transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
     border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
     transform: scale($transform_scale-checkbox);
+    column-gap: $spacing-checkbox_label-paddingLeft;
 
     input[type="checkbox"] {
         position: absolute;
@@ -29,11 +30,17 @@ $module: #{$prefix}-checkbox;
         opacity: 0;
     }
 
+    &-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-checkbox_extra-marginTop;
+    }
+
     &-addon {
         display: flex;
         flex: 1;
         align-items: center;
-        padding-left: $spacing-checkbox_label-paddingLeft;
         color: $color-checkbox_label-text-default;
         line-height: $font-checkbox_label-lineHeight;
         user-select: none;
@@ -192,7 +199,6 @@ $module: #{$prefix}-checkbox;
                 background: $color-checkbox_cardType_inner-bg-default;
             }
 
-            margin-right: $spacing-checkbox_cardType_inner-marginRight;
             flex-shrink: 0;
         }
 
@@ -202,7 +208,6 @@ $module: #{$prefix}-checkbox;
             // input focus/blur cannot take effect when display: none
             opacity: 0;
             width: 0;
-            margin-right: 0;
         }
 
         .#{$module}-addon {
@@ -210,8 +215,6 @@ $module: #{$prefix}-checkbox;
             font-size: $font-checkbox_cardType_addon-size;
             line-height: $font-checkbox_cardType_addon-lineHeight;
             color: $color-checkbox_cardType_addon-text-default;
-            margin-left: 0;
-            padding-left: 0;
         }
 
         .#{$module}-extra {
@@ -219,7 +222,6 @@ $module: #{$prefix}-checkbox;
             font-size: $font-checkbox_cardType_extra-size;
             line-height: $font-checkbox_cardType_extra-lineHeight;
             color: $color-checkbox_cardType_extra-text-default;
-            padding-left: 0;
 
             &.#{$module}-cardType_extra_noChildren {
                 margin-top: 0;
@@ -359,9 +361,7 @@ $module: #{$prefix}-checkbox;
         flex-grow: 1;
         flex-basis: 100%;
         box-sizing: border-box;
-        padding-left: $spacing-checkbox_extra-paddingLeft;
         color: $color-checkbox_extra-text-default;
-        margin-top: $spacing-checkbox_extra-marginTop;
     }
 
     &-focus {
@@ -385,28 +385,28 @@ $module: #{$prefix}-checkbox;
     }
 
     &-horizontal {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $spacing-checkbox_group_horizontal-marginRight;
+
         .#{$module} {
-            margin-right: $spacing-checkbox_group_horizontal-marginRight;
             display: inline-flex;
-
-            &:last-of-type {
-                margin-right: 0;
-            }
         }
     }
 
     &-vertical {
-        .#{$module} {
-            margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-checkbox_group_vertical_item-marginBottom;
 
-            &:last-of-type {
-                margin-bottom: 0;
-            }
+        &-cardType {
+            row-gap: $spacing-checkbox_card_group_vertical-marginBottom;
         }
 
-        &-cardType {
+
+        &-pureCardType {
             .#{$module} {
-                margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
+                column-gap: 0;
             }
         }
     }

packages/semi-foundation/checkbox/rtl.scss

@@ -10,45 +10,9 @@ $inner-width: $width-icon-medium;
             left: auto;
             right: 0;
         }
-
-        &-addon {
-            padding-left: 0;
-            padding-right: $spacing-checkbox_label-paddingLeft;
-        }
-
-        &-extra {
-            padding-left: 0;
-            padding-right: $spacing-checkbox_extra-paddingLeft;
-        }
-
-        &-cardType {
-            .#{$module}-inner {
-                margin-right: 0;
-                margin-left: $spacing-checkbox_cardType_inner-marginRight;
-            }
-    
-            .#{$module}-addon {
-                margin-right: 0;
-                padding-right: 0;
-            }
-
-            .#{$module}-extra {
-                padding-right: 0;
-            }
-        }
     }
 
     .#{$module}Group {
         direction: rtl;
-
-        &-horizontal {
-            .#{$module} {
-                margin-right: 0;
-                margin-left: $spacing-checkbox_group_horizontal-marginRight;
-                &:last-of-type {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 }

packages/semi-foundation/datePicker/monthsGridFoundation.ts

@@ -542,8 +542,8 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         type: YearMonthChangeType,
         targetDate: Date
     ) {
-        const { multiple, disabledDate } = this.getProps();
-        const { selected: selectedSet, rangeStart, rangeEnd } = this.getStates();
+        const { multiple, disabledDate, type: dateType } = this.getProps();
+        const { selected: selectedSet, rangeStart, rangeEnd, monthLeft } = this.getStates();
         // FIXME:
         const includeRange = ['dateRange', 'dateTimeRange'].includes(type);
         const options = { closePanel: false };
@@ -552,7 +552,14 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             const selectedDate = new Date(selectedStr);
             const year = targetDate.getFullYear();
             const month = targetDate.getMonth();
-            const fullDate = set(selectedDate, { year, month });
+            let fullDate = set(selectedDate, { year, month });
+            if (dateType === 'dateTime') {
+                /**
+                 * 如果是 type dateTime 切换月份要读取只取的time
+                 * 无论 monthLeft 还是 monthRight 他们的 time 是不变的，所以只取 monthLeft 即可
+                 */
+                fullDate = this._mergeDateAndTime(fullDate, monthLeft.pickerDate);
+            }
             if (disabledDate(fullDate, { rangeStart, rangeEnd })) {
                 return;
             }

packages/semi-foundation/getBabelConfig.js

@@ -19,18 +19,6 @@ module.exports = ({ isESM }) => {
         ],
         plugins: [
             'lodash',
-            [
-                '@babel/plugin-transform-runtime',
-                {
-                    corejs: 3
-                },
-            ],
-            [
-                '@babel/plugin-proposal-decorators',
-                {
-                    legacy: true,
-                },
-            ],
         ]
     };
 };

packages/semi-foundation/package.json

@@ -1,13 +1,12 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.18.2",
+    "version": "2.19.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -26,7 +25,6 @@
     ],
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a",
     "devDependencies": {
-        "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@types/lodash": "^4.14.176",

packages/semi-foundation/popconfirm/popconfirmFoundation.ts

@@ -1,11 +1,14 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import isPromise from '../utils/isPromise';
 
 export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setVisible: (visible: boolean) => void;
-    notifyConfirm: (e: any) => void;
-    notifyCancel: (e: any) => void;
+    updateConfirmLoading: (loading: boolean) => void;
+    updateCancelLoading: (loading: boolean) => void;
+    notifyConfirm: (e: any) => Promise<any> | void;
+    notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
 }
@@ -17,13 +20,39 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
     destroy(): void {}
 
     handleCancel(e: any): void {
-        this._adapter.notifyCancel(e);
-        this.handleVisibleChange(false);
+        const maybePromise = this._adapter.notifyCancel(e) as Promise<any>;
+        if (isPromise(maybePromise)) {
+            this._adapter.updateCancelLoading(true);
+            maybePromise.then(
+                (result: any) => {
+                    this.handleVisibleChange(false);
+                    this._adapter.updateCancelLoading(false);
+                },
+                (errors: any) => {
+                    this._adapter.updateCancelLoading(false);
+                }
+            );
+        } else {
+            this.handleVisibleChange(false);
+        }
     }
 
     handleConfirm(e: any): void {
-        this._adapter.notifyConfirm(e);
-        this.handleVisibleChange(false);
+        const maybePromise = this._adapter.notifyConfirm(e) as Promise<any>;
+        if (isPromise(maybePromise)) {
+            this._adapter.updateConfirmLoading(true);
+            maybePromise.then(
+                (result: any) => {
+                    this._adapter.updateConfirmLoading(false);
+                    this.handleVisibleChange(false);
+                },
+                (errors: any) => {
+                    this._adapter.updateConfirmLoading(false);
+                }
+            );
+        } else {
+            this.handleVisibleChange(false);
+        }
     }
 
     handleClickOutSide(e: any): void {

packages/semi-foundation/radio/radio.scss

@@ -7,9 +7,8 @@ $inner-width: $width-icon-medium;
 .#{$module} {
     @include box-sizing;
     @include font-size-regular;
-    position: relative;
     display: inline-flex;
-    flex-wrap: wrap;
+    column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
     border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
@@ -81,6 +80,8 @@ $inner-width: $width-icon-medium;
     }
 
     &-buttonRadioGroup {
+        // Button needs to be positioned relative to parent
+        position: relative;
         padding: $spacing-radio_buttonRadioGroup_middle-padding;
         border-radius: $radius-radio_buttonRadio;
         line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
@@ -111,11 +112,9 @@ $inner-width: $width-icon-medium;
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
-            position: relative;
             &-display {
                 background: $color-radio_card-bg-default;
             }
-            margin-right: $spacing-radio_cardRadioGroup_inner-marginRight;
             flex-shrink: 0;
         }
 
@@ -124,8 +123,6 @@ $inner-width: $width-icon-medium;
             font-size: $font-radio_cardRadioGroup_addon-size;
             line-height: $font-radio_cardRadioGroup_addon-lineHeight;
             color: $color-radio_cardRadioGroup_addon-text-default;
-            margin-left: 0;
-            padding-left: 0;
         }
 
         .#{$module}-extra {
@@ -210,19 +207,19 @@ $inner-width: $width-icon-medium;
     }
 
     &-inner {
-        position: absolute;
-        display: inline-block;
-        top: 2px;
-        left: 0;
+        display: inline-flex;
+        margin-top: 2px;
+        // WARN: The absolute positioning used by the input does not occupy space, and relative cannot be removed here.
+        position: relative;
         width: $width-radio_inner;
         height: $width-radio_inner;
         vertical-align: sub;
         user-select: none; // prevent text under it will be selected when double click
 
         &-display {
-            position: absolute;
-            left: 0;
-            top: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             @include box-sizing;
             width: $width-radio_inner;
             height: $width-radio_inner;
@@ -233,7 +230,6 @@ $inner-width: $width-icon-medium;
             border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
         
             .#{$prefix}-icon {
-                position: absolute;
                 width: 100%;
                 height: 100%;
                 font-size: 14px;
@@ -241,6 +237,11 @@ $inner-width: $width-icon-medium;
         }
     }
 
+    &-content {
+        display: flex;
+        flex-direction: column;
+    }
+
     &:hover {
         .#{$module}-inner-display {
             background: $color-radio_default-bg-hover;
@@ -255,14 +256,11 @@ $inner-width: $width-icon-medium;
 
     &-addon {
         user-select: none;
-        padding-left: $spacing-radio_addon-paddingLeft;
-        margin-left: $spacing-radio_addon-marginLeft;
         color: $color-radio_default-text-default;
         display: inline-flex;
         align-items: center;
 
         &-buttonRadio {
-            margin-left: $spacing-radio_addon_buttonRadio_marginLeft;
             text-align: center;
             border-radius: $radius-radio_addon_buttonRadio;
             font-weight: $font-radio_buttonRadio-default-fontWeight;
@@ -381,11 +379,7 @@ $inner-width: $width-icon-medium;
     }
 
     &-extra {
-        flex-grow: 1;
-        flex-basis: 100%;
-        flex-shrink: 0;
         color: $color-radio_extra-text-default;
-        padding-left: $spacing-radio_extra-paddingLeft;
         box-sizing: border-box;
     }
 
@@ -402,37 +396,26 @@ $inner-width: $width-icon-medium;
     @include font-size-regular;
 
     &-vertical {
-        .#{$module} {
-            &:last-of-type {
-                margin-bottom: 0;
-            }
-        }
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-radio_group_vertical-marginBottom;
+
         &-default {
             .#{$module} {
-                display: block;
-                margin-bottom: $spacing-radio_group_vertical-marginBottom;
-
+                display: flex;
             }
         }
         &-card {
             .#{$module} {
                 display: flex;
-                margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
             }
         }
     }
 
     &-horizontal {
-        .#{$module} {
-            margin-right: $spacing-radio_group_horizontal-marginRight;
-
-            &:last-of-type {
-                margin-right: 0;
-            }
-        }
-        &-default {
-            display: inline-block;
-        }
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: $spacing-radio_group_horizontal-marginRight;
     }
 
     &-buttonRadio {

packages/semi-foundation/radio/rtl.scss

@@ -17,62 +17,9 @@ $inner-width: $width-icon-medium;
                 padding-left: $spacing-radio_buttonRadioGroup-paddingRight;
             }
         }
-
-        &-inner {
-            left: auto;
-            right: 0;
-
-            &-display {
-                left: auto;
-                right: 0;
-            }
-        }
-
-        &-addon {
-            padding-left: 0;
-            margin-left: 0;
-            padding-right: $spacing-radio_addon-paddingLeft;
-            margin-right: $spacing-radio_addon-marginLeft;
-            
-            &-buttonRadio {
-                margin-right: $spacing-none;
-            }
-        }
-
-        &-extra {
-            padding-left: 0;
-            padding-right: $spacing-radio_extra-paddingLeft;
-        }
-    }
-
-    &-isCardRadioGroup {
-        .#{$module}-inner {
-            margin-right: 0;
-            margin-left: $spacing-radio_cardRadioGroup_inner-marginRight;
-        }
-
-        .#{$module}-addon {
-            margin-right: 0;
-            padding-right: 0;
-        }
-
-        .#{$module}-extra {
-            padding-right: 0;
-        }
     }
 
     .#{$module}Group {
         direction: rtl;
-
-        &-horizontal {
-            .#{$module} {
-                margin-right: 0;
-                margin-left: $spacing-radio_group_horizontal-marginRight;
-
-                &:last-of-type {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 }

packages/semi-foundation/sideSheet/sideSheet.scss

@@ -100,6 +100,7 @@ $module: #{$prefix}-sidesheet;
     &-body {
         padding: $spacing-sideSheet_body-paddingY $spacing-sideSheet_body-paddingX;
         flex: 1;
+        overflow: auto;
     }
 
     &-content {

packages/semi-foundation/slider/foundation.ts

@@ -386,15 +386,22 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      * @memberof SliderFoundation
      */
     outPutValue = (inputValue: SliderProps['value']) => {
+        const checkHowManyDecimals = (num:number)=>{
+            const reg = /^\d+(\.\d+)?$/;
+            if (reg.test(String(num))){
+                return num.toString().split('.')[1]?.length ?? 0;
+            }
+            return 0;
+        };
         const step = this._adapter.getProp('step');
-        let transWay = Math.round;
-        if (step < 1 && step >= 0.1) {
-            transWay = value => Math.round(value * 10) / 10;
-        } else if (step < 0.1 && step >= 0.01) {
-            transWay = value => Math.round(value * 100) / 100;
-        } else if (step < 0.01 && step >= 0.001) {
-            transWay = value => Math.round(value * 1000) / 1000;
-        }
+        const transWay = (()=>{
+            const decimals = checkHowManyDecimals(step);
+            const multipler = Math.pow(10, decimals);
+            return (value: number)=>{
+                return Math.round(value * multipler) / multipler;
+            };
+        })();
+        
         if (Array.isArray(inputValue)) {
             return [transWay(inputValue[0]), transWay(inputValue[1])];
         } else {

packages/semi-foundation/tree/tree.scss

@@ -254,6 +254,10 @@ $module: #{$prefix}-tree;
         user-select: none;
         cursor: not-allowed;
     }
+
+    .#{$prefix}-checkboxGroup-vertical {
+        row-gap: 0;
+    }
 }
 
 .#{$module}-option-list-block {

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.18.2",
+  "version": "2.19.0-beta.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.18.2",
+    "@douyinfe/semi-webpack-plugin": "2.19.0-beta.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.18.2",
+  "version": "2.19.0-beta.0",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.18.2",
+    "version": "2.19.0-beta.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.18.2"
+        "@douyinfe/semi-webpack-plugin": "2.19.0-beta.0"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.18.2",
+  "version": "2.19.0-beta.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.18.2",
+    "version": "2.19.0-beta.0",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/anchor/index.tsx

@@ -10,10 +10,12 @@ import '@douyinfe/semi-foundation/anchor/anchor.scss';
 import { noop, debounce, throttle } from 'lodash';
 import getUuid from '@douyinfe/semi-foundation/utils/uuid';
 import { ArrayElement } from '../_base/base';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 
 const prefixCls = cssClasses.PREFIX;
 
 export { LinkProps } from './link';
+
 export interface AnchorProps {
     autoCollapse?: boolean;
     className?: string;
@@ -44,6 +46,7 @@ export interface AnchorState {
 }
 
 class Anchor extends BaseComponent<AnchorProps, AnchorState> {
+    static contextType = ConfigContext;
     static Link = Link;
     static PropTypes = {
         size: PropTypes.oneOf(strings.SIZE),
@@ -88,6 +91,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     childMap: Record<string, Set<string>>;
     handler: () => void;
     clickHandler: () => void;
+    context: ContextValue;
 
     constructor(props: AnchorProps) {
         super(props);
@@ -96,7 +100,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
             links: [],
             clickLink: false,
             scrollHeight: '100%',
-            slideBarTop: '0'
+            slideBarTop: '0',
         };
 
         this.foundation = new AnchorFoundation(this.adapter);
@@ -107,9 +111,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         return {
             ...super.adapter,
             addLink: value => {
-                this.setState(prevState => (
-                    { links: [...prevState.links, value] }
-                ));
+                this.setState(prevState => ({ links: [...prevState.links, value] }));
             },
             removeLink: link => {
                 this.setState(prevState => {
@@ -218,6 +220,28 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         this.foundation.updateChildMap(prevState, state);
     };
 
+    renderChildren = () => {
+        const loop = (children, level = 1) => {
+            return React.Children.map(children, child => {
+                if (React.isValidElement(child)) {
+                    const childProps = {
+                        direction: this.context.direction,
+                        level,
+                        children: [],
+                    };
+                    const { children } = child.props as any;
+                    const hasChildren = children && React.Children.count(children) > 0;
+                    if (hasChildren) {
+                        childProps.children = loop(children, level + 1);
+                    }
+                    return React.cloneElement(child, childProps);
+                }
+                return null;
+            });
+        };
+        return loop(this.props.children);
+    };
+
     componentDidMount() {
         const { defaultAnchor = '' } = this.props;
         this.anchorID = getUuid('semi-anchor').replace('.', '');
@@ -286,15 +310,23 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
                     removeLink: this.removeLink,
                 }}
             >
-                <div role="navigation" aria-label={ ariaLabel || 'Side navigation'} className={wrapperCls} style={wrapperStyle} id={this.anchorID}>
+                <div
+                    role="navigation"
+                    aria-label={ariaLabel || 'Side navigation'}
+                    className={wrapperCls}
+                    style={wrapperStyle}
+                    id={this.anchorID}
+                >
                     <div aria-hidden className={slideCls} style={{ height: scrollHeight }}>
                         <span className={slideBarCls} style={{ top: slideBarTop }} />
                     </div>
-                    <div className={anchorWrapper} role="list">{children}</div>
+                    <div className={anchorWrapper} role="list">
+                        {this.renderChildren()}
+                    </div>
                 </div>
             </AnchorContext.Provider>
         );
     }
 }
 
-export default Anchor;
+export default Anchor;

packages/semi-ui/anchor/link.tsx

@@ -16,6 +16,8 @@ export interface LinkProps {
     children?: ReactNode;
     style?: React.CSSProperties;
     disabled?: boolean;
+    level?: number;
+    direction?: 'ltr' | 'rtl';
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -38,6 +40,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     foundation: LinkFoundation;
 
     context!: AnchorContextType;
+
     constructor(props: LinkProps) {
         super(props);
         this.foundation = new LinkFoundation(this.adapter);
@@ -120,11 +123,13 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         if (!this.context.autoCollapse) {
             return <div role="list">{children}</div>;
         }
-        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? <div role="list">{children}</div> : null;
+        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? (
+            <div role="list">{children}</div>
+        ) : null;
     };
 
     render() {
-        const { href, className, style, disabled = false, title } = this.props;
+        const { href, className, style, disabled = false, title, level, direction } = this.props;
         const { activeLink, showTooltip } = this.context;
         const active = activeLink === href;
         const linkCls = cls(`${prefixCls}-link`, className);
@@ -132,8 +137,12 @@ export default class Link extends BaseComponent<LinkProps, {}> {
             [`${prefixCls}-link-title-active`]: active,
             [`${prefixCls}-link-title-disabled`]: disabled,
         });
+        const paddingAttributeKey = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
         const ariaProps = {
             'aria-disabled': disabled,
+            style: {
+                [paddingAttributeKey]: 8 * level,
+            },
         };
         if (active) {
             ariaProps['aria-details'] = 'active';

packages/semi-ui/avatar/index.tsx

@@ -31,6 +31,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: noop,
     };
 
+    static elementType: string;
     static propTypes = {
         children: PropTypes.node,
         color: PropTypes.oneOf(colorSet),
@@ -192,7 +193,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             const finalProps = clickable ? { ...props, ...a11yFocusProps } : props;
             content = (
                 <span className={`${prefixCls}-content`}>
-                    <span {...finalProps}  x-semi-prop="children">{children}</span>
+                    <span {...finalProps} x-semi-prop="children">{children}</span>
                 </span>
             );
         }
@@ -234,3 +235,4 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         );
     }
 }
+Avatar.elementType = 'Avatar';

packages/semi-ui/button/buttonGroup.tsx

@@ -1,9 +1,10 @@
-import React, { isValidElement, cloneElement } from 'react';
+import React, { isValidElement, cloneElement, ReactNode } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
-import { Type, Size } from './Button';
+import { get } from 'lodash';
+import { Type, Size, ButtonProps } from './Button';
 
 import '@douyinfe/semi-foundation/button/button.scss';
 
@@ -39,9 +40,41 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         size: 'default',
     };
 
+    getInnerWithLine(inner) {
+        const innerWithLine: ReactNode[] = [];
+        let lineCls = `${prefixCls}-group-line`;
+        if (inner.length > 1) {
+            inner.slice(0, -1).forEach(item => {
+                const isButtonType = get(item, 'type.elementType') === 'Button';
+                const buttonProps = get(item, 'props') as ButtonProps;
+                if (buttonProps) {
+                    const { type, theme, disabled } = buttonProps;
+                    lineCls = classNames(
+                        `${prefixCls}-group-line`,
+                        `${prefixCls}-group-line-${theme ?? 'light'}`, 
+                        `${prefixCls}-group-line-${type ?? 'primary'}`, 
+                        {
+                            [`${prefixCls}-group-line-disabled`]: disabled,
+                        }
+                    );
+                }
+                if (isButtonType) {
+                    innerWithLine.push(item, <span className={lineCls} />);
+                } else {
+                    innerWithLine.push(item);
+                }
+            });
+            innerWithLine.push(inner.slice(-1));
+            return innerWithLine;
+        } else {
+            return inner;
+        }
+    }
+
     render() {
         const { children, disabled, size, type, className, 'aria-label': ariaLabel, ...rest } = this.props;
-        let inner;
+        let inner: ReactNode[];
+        let innerWithLine: ReactNode[] = [];
         const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
@@ -50,7 +83,8 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
                     ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
                     : itm
             ));
+            innerWithLine = this.getInnerWithLine(inner);
         }
-        return <div className={cls} role="group" aria-label={ariaLabel}>{inner}</div>;
+        return <div className={cls} role="group" aria-label={ariaLabel}>{innerWithLine}</div>;
     }
 }

packages/semi-ui/button/index.tsx

@@ -18,6 +18,7 @@ class Button extends React.PureComponent<ButtonProps> {
         ...BaseButton.propTypes,
         ...IconButton.propTypes,
     };
+    static elementType: string;
     constructor(props = {}) {
         super(props);
     }
@@ -34,5 +35,6 @@ class Button extends React.PureComponent<ButtonProps> {
         }
     }
 }
+Button.elementType = 'Button';
 
 export default Button;

packages/semi-ui/checkbox/_story/checkbox.stories.js

@@ -31,6 +31,8 @@ export const CheckboxDefault = () => {
       </Checkbox>
       <br />
       <Checkbox indeterminate>indeterminate</Checkbox>
+      <Checkbox onChange={e => console.log(e)} value={1} onChange={v => console.log(v)}>
+      </Checkbox>
     </div>
   );
 };

packages/semi-ui/checkbox/checkbox.tsx

@@ -81,6 +81,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseLeave: noop,
         type: 'default',
     };
+    static elementType: string;
+
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;
 
@@ -235,20 +237,27 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         const name = inGroup && this.context.checkboxGroup.name;
         const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
 
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
-                        {children}
-                    </span>
-                ) : null}
-                {extra ? (
-                    <div id={extraId} className={extraCls} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
+        const renderContent = () => {
+            if (!children && !extra) {
+                return null;
+            }
+
+            return (
+                <div className={`${prefix}-content`}>
+                    {children ? (
+                        <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
+                            {children}
+                        </span>
+                    ) : null}
+                    {extra ? (
+                        <div id={extraId} className={extraCls} x-semi-prop="extra">
+                            {extra}
+                        </div>
+                    ) : null}
+                </div>
+            );
+        };
+
         return (
             // label is better than span, however span is here which is to solve gitlab issue #364
             <span
@@ -276,15 +285,11 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {
-                    props.isCardType ?
-                        <div>{renderContent()}</div> :
-                        renderContent()
-                }
+                {renderContent()}
             </span>
         );
     }
 }
-
+Checkbox.elementType = 'Checkbox';
 
 export default Checkbox;

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -120,6 +120,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
             [`${prefix }-wrapper`]: true,
             [`${prefix }-${ direction}`]: direction,
             [`${prefix}-${direction}-cardType`]: direction && isCardType,
+            [`${prefix}-${direction}-pureCardType`]: direction && isPureCardType,
         }, className);
 
         const realValue = this.state.value.slice();

packages/semi-ui/getBabelConfig.js

@@ -19,19 +19,7 @@ module.exports = ({ isESM }) => {
             ],
         ],
         plugins: [
-            'lodash',
-            [
-                '@babel/plugin-transform-runtime',
-                {
-                    corejs: 3
-                },
-            ],
-            [
-                '@babel/plugin-proposal-decorators',
-                {
-                    legacy: true,
-                },
-            ],
+            'lodash'
         ]
     };
 };

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.18.2",
+    "version": "2.19.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -13,13 +13,12 @@
         "prepublishOnly": "npm run clean && npm run build:lib && npm run build:js && npm run build:css"
     },
     "dependencies": {
-        "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.18.2",
-        "@douyinfe/semi-foundation": "2.18.2",
-        "@douyinfe/semi-icons": "2.18.2",
+        "@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.18.2",
+        "@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",
@@ -72,7 +71,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.18.2",
+        "@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",

packages/semi-ui/popconfirm/_story/popconfirm.stories.js

@@ -167,4 +167,40 @@ export const ClickOutSideDemo = () => {
 
 ClickOutSideDemo.story = {
   name: 'ClickOutSideDemo',
-};
+};
+
+export const PromiseCallback = () => {
+  const onConfirm = () => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        console.log('ccc');
+        resolve(1);
+      }, 2000)
+    })
+  };
+
+  const onCancel = () => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        console.log('ccc');
+        reject(1);
+      }, 2000)
+    })
+  };
+
+  return (
+    <Popconfirm
+      title="确定是否要保存此修改？"
+      content="此修改将不可逆"
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    >
+      <Button>保存</Button>
+    </Popconfirm>
+  );
+};
+
+PromiseCallback.story = {
+  name: 'PromiseCallbackDemo',
+};
+

packages/semi-ui/popconfirm/index.tsx

@@ -35,14 +35,16 @@ export interface PopconfirmProps extends PopoverProps {
     zIndex?: number;
     trigger?: Trigger;
     position?: Position;
-    onCancel?: (e: React.MouseEvent) => void;
-    onConfirm?: (e: React.MouseEvent) => void;
+    onCancel?: (e: React.MouseEvent) => Promise<any> | void;
+    onConfirm?: (e: React.MouseEvent) => Promise<any> | void;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
 }
 
 export interface PopconfirmState {
     visible: boolean;
+    cancelLoading: boolean;
+    confirmLoading: boolean;
 }
 
 interface PopProps {
@@ -99,6 +101,8 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         super(props);
 
         this.state = {
+            cancelLoading: false,
+            confirmLoading: false,
             visible: props.defaultVisible || false,
         };
 
@@ -122,8 +126,10 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         return {
             ...super.adapter,
             setVisible: (visible: boolean): void => this.setState({ visible }),
-            notifyConfirm: (e: React.MouseEvent): void => this.props.onConfirm(e),
-            notifyCancel: (e: React.MouseEvent): void => this.props.onCancel(e),
+            updateConfirmLoading: (loading: boolean): void => this.setState({ confirmLoading: loading }),
+            updateCancelLoading: (loading: boolean): void => this.setState({ cancelLoading: loading }),
+            notifyConfirm: (e: React.MouseEvent): Promise<any> | void => this.props.onConfirm(e),
+            notifyCancel: (e: React.MouseEvent): Promise<any> | void => this.props.onCancel(e),
             notifyVisibleChange: (visible: boolean): void => this.props.onVisibleChange(visible),
             notifyClickOutSide: (e: React.MouseEvent) => this.props.onClickOutSide(e),
         };
@@ -141,14 +147,15 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
 
     renderControls() {
         const { okText, cancelText, okType, cancelType, cancelButtonProps, okButtonProps } = this.props;
+        const { cancelLoading, confirmLoading } = this.state;
         return (
             <LocaleConsumer componentName="Popconfirm">
                 {(locale: LocaleObject['Popconfirm'], localeCode: string) => (
                     <>
-                        <Button type={cancelType} onClick={this.handleCancel} {...cancelButtonProps}>
+                        <Button type={cancelType} onClick={this.handleCancel} loading={cancelLoading} {...cancelButtonProps}>
                             {cancelText || get(locale, 'cancel')}
                         </Button>
-                        <Button type={okType} theme="solid" onClick={this.handleConfirm} {...okButtonProps}>
+                        <Button type={okType} theme="solid" onClick={this.handleConfirm} loading={confirmLoading} {...okButtonProps}>
                             {okText || get(locale, 'confirm')}
                         </Button>
                     </>
@@ -171,6 +178,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         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
             <div className={popCardCls} onClick={this.stopImmediatePropagation} style={style}>
                 <div className={`${prefixCls}-inner`}>
                     <div className={`${prefixCls}-header`}>

packages/semi-ui/radio/_story/radio.stories.js

@@ -254,18 +254,18 @@ _RadioGroup.story = {
 
 export const RadioWithVertical = () => {
   return (
-    <Radio.Group>
-      <Radio value="A" displayMode="vertical">
+    <Radio.Group direction="vertical">
+      <Radio value="A">
         无限长的一串字The Storybook webapp UI can be customised with this addon. It can be used to
         change the header, show/hide various UI elements and to enable full-screen mode by default.
       </Radio>
-      <Radio value="C" displayMode="vertical">
+      <Radio value="C">
         C
       </Radio>
-      <Radio value="D" displayMode="vertical">
+      <Radio value="D">
         D
       </Radio>
-      <Radio value="E" displayMode="vertical">
+      <Radio value="E">
         E
       </Radio>
     </Radio.Group>

packages/semi-ui/radio/radio.tsx

@@ -92,6 +92,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         mode: '',
         type: 'default'
     };
+    static elementType: string;
 
     radioEntity: RadioInner;
     context!: RadioContextValue;
@@ -268,20 +269,25 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
             [`${prefix}-focus`]: focusVisible && isButtonRadio,
         }, addonClassName);
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
-                        {children}
-                    </span>
-                ) : null}
-                {extra && !isButtonRadio ? (
-                    <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
+        const renderContent = () => {
+            if (!children && !extra) {
+                return null;
+            }
+            return (
+                <div className={cls([`${prefix}-content`, { [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup }])}>
+                    {children ? (
+                        <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
+                            {children}
+                        </span>
+                    ) : null}
+                    {extra && !isButtonRadio ? (
+                        <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
+                            {extra}
+                        </div>
+                    ) : null}
+                </div>
+            );
+        };
 
         return (
             <label
@@ -307,14 +313,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {
-                    isCardRadioGroup ?
-                        <div className={`${prefix}-isCardRadioGroup_content`}>{renderContent()}</div> :
-                        renderContent()
-                }
+                {renderContent()}
             </label>
         );
     }
 }
+Radio.elementType = 'Radio';
 
 export default Radio;

packages/semi-ui/radio/radioGroup.tsx

@@ -88,7 +88,7 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
     constructor(props: RadioGroupProps) {
         super(props);
         this.state = {
-            value: undefined,
+            value: props.value || props.defaultValue,
         };
         this.foundation = new RadioGroupFoundation(this.adapter);
     }

packages/semi-ui/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),

packages/semi-ui/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"
     />

packages/semi-webpack/package.json

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