Merge branch 'main' into css-way

.eslintrc.js

@@ -19,23 +19,27 @@ module.exports = {
             plugins: ['react', 'react-hooks', 'jest', 'import'],
             rules: {
                 // 因为历史原因，现有项目基本全部是4个空格
-                indent: ['error', 4, { 'SwitchCase': 1 }],
-                'comma-spacing': ["error", { "before": false, "after": true }],
-                'no-multi-spaces': ["error", { ignoreEOLComments: true }],
+                indent: ['error', 4, {'SwitchCase': 1}],
+                'comma-spacing': ["error", {"before": false, "after": true}],
+                'no-multi-spaces': ["error", {ignoreEOLComments: true}],
                 'react/display-name': 'off',
+                'key-spacing': ["error", {"beforeColon": false}],
                 'react/jsx-indent': ['error', 4],
                 'react/jsx-indent-props': ['error', 4],
-                'react/prefer-stateless-function': ['warn'],
                 'react/no-find-dom-node': ['warn'],
                 'react/prop-types': 'off',
                 'react/prefer-stateless-function': 'off',
-                'operator-linebreak': ['warn', 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
+                'jsx-a11y/alt-text': ["warn"],
+                'operator-linebreak': ['warn', 'after', {'overrides': {'?': 'before', ':': 'before'}}],
                 'import/no-unresolved': 'off',
                 'semi': ['error', 'always'],
-                'keyword-spacing': ["error", { "before": true, "after": true }],
+                'keyword-spacing': ["error", {"before": true, "after": true}],
                 'jsx-a11y/click-events-have-key-events': ['warn'],
                 'jsx-a11y/no-noninteractive-element-interactions': ['warn'],
                 'jsx-a11y/no-autofocus': ['warn'],
+                'jsx-a11y/no-static-element-interactions': ['warn'],
+                'jsx-a11y/html-has-lang': ['warn'],
+                'jsx-a11y/mouse-events-have-key-events': ['warn'],
                 'object-curly-spacing': ['error', 'always'],
             },
             globals: {
@@ -54,16 +58,16 @@ module.exports = {
             rules: {
                 // 因为历史原因，现有项目基本全部是4个空格
                 indent: 'off',
-                'comma-spacing': ["error", { "before": false, "after": true }],
-                'no-multi-spaces': ["error", { ignoreEOLComments: true }],
+                'comma-spacing': ["error", {"before": false, "after": true}],
+                'no-multi-spaces': ["error", {ignoreEOLComments: true}],
+                'key-spacing': ["error", {"beforeColon": false, "afterColon": true}],
                 '@typescript-eslint/indent': ['error', 4],
                 'react/display-name': 'off',
                 'react/jsx-indent': ['error', 4],
                 'react/jsx-indent-props': ['error', 4],
-                'react/prefer-stateless-function': ['warn'],
                 'react/no-find-dom-node': ['warn'],
                 'react/prop-types': 'off',
-                'react-hooks/rules-of-hooks': 'error', 
+                'react-hooks/rules-of-hooks': 'error',
                 'react-hooks/exhaustive-deps': 'warn',
                 'react/prefer-stateless-function': 'off',
                 '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -74,16 +78,32 @@ module.exports = {
                 '@typescript-eslint/no-var-requires': 'warn',
                 '@typescript-eslint/no-inferrable-types': 'off',
                 '@typescript-eslint/no-this-alias': 'off',
-                 // In scenarios where specific rest props need to be passed, some keys may be taken out first, so set 'no-unused-vars' to off
+                // In scenarios where specific rest props need to be passed, some keys may be taken out first, so set 'no-unused-vars' to off
                 '@typescript-eslint/no-unused-vars': 'off',
                 'import/no-unresolved': 'off',
                 'semi': ['error', 'always'],
-                'keyword-spacing': ["error", { "before": true, "after": true }],
+                'keyword-spacing': ["error", {"before": true, "after": true}],
                 'jsx-a11y/click-events-have-key-events': ['warn'],
                 'jsx-a11y/no-noninteractive-element-interactions': ['warn'],
                 'jsx-a11y/no-autofocus': ['warn'],
+                'jsx-a11y/alt-text': ["warn"],
+                'jsx-a11y/mouse-events-have-key-events': ["warn"],
+                'jsx-a11y/html-has-lang': ['warn'],
                 'object-curly-spacing': ['error', 'always'],
-                'semi-design/no-import': 'error'
+                'semi-design/no-import': 'error',
+                "@typescript-eslint/member-delimiter-style": [
+                    "error",
+                    {
+                        "multiline": {
+                            "delimiter": "semi",
+                            "requireLast": false
+                        },
+                        "singleline": {
+                            "delimiter": "semi",
+                            "requireLast": false
+                        }
+                    }
+                ],
             }
         },
     ],

.github/workflows/chromatic.yml

@@ -5,43 +5,43 @@ name: 'test:chromatic'
 
 # Event for the workflow
 on:
-  pull_request:
-    branches: [ main, test-chromatic ]
-    paths:
-      - 'packages/**/*.scss'
-      - '!packages/**/_story/**'
-      - '!packages/**/__test__/**'
-      - '!packages/**/*.stories.[tj]sx?'
-      - '!packages/**/*.story.[tj]sx?'
-      - '!packages/**/*.test.[tj]sx?'
-      - '!packages/**/*.md'
-  push:
-    branches: [ main, test-chromatic ]
-    paths:
-      - 'packages/**/*.scss'
-      - '!packages/**/*.md'
+    pull_request:
+        branches: [main, test-chromatic]
+        paths:
+            - 'packages/**/*.scss'
+            - '!packages/**/_story/**'
+            - '!packages/**/__test__/**'
+            - '!packages/**/*.stories.[tj]sx?'
+            - '!packages/**/*.story.[tj]sx?'
+            - '!packages/**/*.test.[tj]sx?'
+            - '!packages/**/*.md'
+    push:
+        branches: [main, test-chromatic]
+        paths:
+            - 'packages/**/*.scss'
+            - '!packages/**/*.md'
 
 # List of jobs
 jobs:
-  chromatic-deployment:
-    # Operating System
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.repository_owner == 'DouyinFE' || github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == 'DouyinFE/semi-design'
-    # Job steps
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - name: Install dependencies
-        run: npx lerna bootstrap
-      - name: Pre-build libs
-        run: npx lerna run build:lib
-      - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        # Chromatic GitHub Action options
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          buildScriptName: 'build-storybook'
+    chromatic-deployment:
+        # Operating System
+        runs-on: ubuntu-latest
+        if: github.event_name == 'push' && github.repository_owner == 'DouyinFE' || github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == 'DouyinFE/semi-design'
+        # Job steps
+        steps:
+            - uses: actions/checkout@v1
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: '16'
+            - name: Install dependencies
+              run: npx lerna bootstrap
+            - name: Pre-build libs
+              run: npx lerna run build:lib
+            - name: Publish to Chromatic
+              uses: chromaui/action@v1
+              # Chromatic GitHub Action options
+              with:
+                  token: ${{ secrets.GITHUB_TOKEN }}
+                  # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+                  projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+                  buildScriptName: 'build-storybook'

.github/workflows/cypress.yml

@@ -1,122 +1,112 @@
 name: 'test:cypress'
 
 on:
-  pull_request:
-    branches: [ main, release, milestone**, test-cypress ]
-    paths:
-      - 'cypress/**'
-      - 'packages/**'
-      - '!packages/**/__test__/**'
-      - '!packages/**/*.test.[tj]sx?'
-      - '!packages/**/*.md'
-  push:
-    branches: [ main, release, milestone**, test-cypress ]
-    paths:
-      - 'cypress/**'
-      - 'packages/**'
-      - '!packages/**/__test__/**'
-      - '!packages/**/*.test.[tj]sx?'
-      - '!packages/**/*.md'
-      - '.github/**/cypress.yml'
+    pull_request:
+        branches: [main, release, milestone**, test-cypress]
+        paths:
+            - 'cypress/**'
+            - 'packages/**'
+            - '!packages/**/__test__/**'
+            - '!packages/**/*.test.[tj]sx?'
+            - '!packages/**/*.md'
+    push:
+        branches: [main, release, milestone**, test-cypress]
+        paths:
+            - 'cypress/**'
+            - 'packages/**'
+            - '!packages/**/__test__/**'
+            - '!packages/**/*.test.[tj]sx?'
+            - '!packages/**/*.md'
+            - '.github/**/cypress.yml'
 
 jobs:
-  install:
-    runs-on: ubuntu-latest
-    container: 
-      # https://github.com/cypress-io/cypress-docker-images/tree/master/browsers
-      image: cypress/browsers:node14.17.6-chrome100-ff98
-    if: ${{ github.repository_owner == 'DouyinFE' }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Install global packages
-        run: npm i -g lerna yarn
-      - name: Build storybook
-        run: |
-          yarn bootstrap
-          yarn build:lib
-          yarn build-storybook
-      - name: Save build folder
-        uses: actions/upload-artifact@v2
-        with:
-          name: storybook-static
-          if-no-files-found: error
-          path: storybook-static
-      - name: Cypress install
-        uses: cypress-io/github-action@v2
-        with:
-          # Disable running of tests within install job
-          runTests: false
-  chrome-tests:
-    runs-on: ubuntu-latest
-    container: 
-      image: cypress/browsers:node14.17.6-chrome100-ff98
-    needs: install
-    strategy:
-      fail-fast: false
-      matrix:
-        # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Download the build folders
-        uses: actions/download-artifact@v2
-        with:
-          name: storybook-static
-          path: storybook-static
-      - name: 'Cypress Tests - Chrome'
-        uses: cypress-io/github-action@v2
-        with:
-          # we have already installed all dependencies above
-          install: true
-          start: npx http-server -p 6006 storybook-static
-          wait-on: 'http://localhost:6006'
-          wait-on-timeout: 120
-          browser: chrome
-          record: true
-          parallel: true
-          group: 'Cypress - Chrome'
-          spec: cypress/integration/*
-        env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          # Recommended: pass the GitHub token lets this action correctly
-          # determine the unique run id necessary to re-run the checks
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  firefox-tests:
-    runs-on: ubuntu-latest
-    container: 
-      image: cypress/browsers:node14.17.6-chrome100-ff98
-      options: --user 1001
-    needs: install
-    strategy:
-      fail-fast: false
-      matrix:
-        # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Download the build folders
-        uses: actions/download-artifact@v2
-        with:
-          name: storybook-static
-          path: storybook-static
-      - name: 'Cypress Tests - Firefox'
-        uses: cypress-io/github-action@v2
-        with:
-          # we have already installed all dependencies above
-          install: true
-          start: npx http-server -p 6006 storybook-static
-          wait-on: 'http://localhost:6006'
-          wait-on-timeout: 120
-          browser: firefox
-          record: true
-          parallel: true
-          group: 'Cypress - Firefox'
-          spec: cypress/integration/*
-        env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          # Recommended: pass the GitHub token lets this action correctly
-          # determine the unique run id necessary to re-run the checks
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    install:
+        runs-on: ubuntu-latest
+        container:
+            # https://github.com/cypress-io/cypress-docker-images/tree/master/browsers
+            image: cypress/browsers:node14.17.6-chrome100-ff98
+        if: ${{ github.repository_owner == 'DouyinFE' }}
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: Install global packages
+              run: npm i -g lerna yarn
+            - name: Build storybook
+              run: |
+                  yarn bootstrap
+                  yarn build:lib
+                  yarn build-storybook
+            - name: Save build folder
+              uses: actions/upload-artifact@v2
+              with:
+                  name: storybook-static
+                  if-no-files-found: error
+                  path: storybook-static
+            - name: Cypress install
+              uses: cypress-io/github-action@v2
+              with:
+                  # Disable running of tests within install job
+                  runTests: false
+    chrome-tests:
+        runs-on: ubuntu-latest
+        container:
+            image: cypress/browsers:node14.17.6-chrome100-ff98
+        needs: install
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: Download the build folders
+              uses: actions/download-artifact@v2
+              with:
+                  name: storybook-static
+                  path: storybook-static
+            - name: 'Cypress Tests - Chrome'
+              uses: cypress-io/github-action@v2
+              with:
+                  # we have already installed all dependencies above
+                  install: true
+                  start: npx http-server -p 6006 storybook-static
+                  wait-on: 'http://localhost:6006'
+                  wait-on-timeout: 120
+                  browser: chrome
+                  record: true
+                  parallel: true
+                  group: 'Cypress - Chrome'
+                  spec: cypress/integration/*
+              env:
+                  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                  # Recommended: pass the GitHub token lets this action correctly
+                  # determine the unique run id necessary to re-run the checks
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    firefox-tests:
+        runs-on: ubuntu-latest
+        container:
+            image: cypress/browsers:node14.17.6-chrome100-ff98
+            options: --user 1001
+        needs: install
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: Download the build folders
+              uses: actions/download-artifact@v2
+              with:
+                  name: storybook-static
+                  path: storybook-static
+            - name: 'Cypress Tests - Firefox'
+              uses: cypress-io/github-action@v2
+              with:
+                  # we have already installed all dependencies above
+                  install: true
+                  start: npx http-server -p 6006 storybook-static
+                  wait-on: 'http://localhost:6006'
+                  wait-on-timeout: 120
+                  browser: firefox
+                  record: true
+                  parallel: true
+                  group: 'Cypress - Firefox'
+                  spec: cypress/integration/*
+              env:
+                  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                  # Recommended: pass the GitHub token lets this action correctly
+                  # determine the unique run id necessary to re-run the checks
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lighthouse.yml

@@ -1,30 +1,30 @@
 name: 'lighthouse test'
 
 on:
-  pull_request:
-    branches: [ main, release, milestone**, feat/a11y-aria ]
-  push:
-    branches: [ main, release, milestone** ]
+    pull_request:
+        branches: [main, release, milestone**, feat/a11y-aria]
+    push:
+        branches: [main, release, milestone**]
 
 jobs:
-  lhci:
-    name: Lighthouse
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - name: npm install, build
-        run: |
-          npm i -g lerna gulp
-          lerna bootstrap
-          lerna run build:lib
-          npm run build-storybook
-      - name: run Lighthouse CI
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-        run: |
-          npm install -g @lhci/[email protected]
-          lhci autorun
+    lhci:
+        name: Lighthouse
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js 16
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+            - name: npm install, build
+              run: |
+                  npm i -g lerna gulp
+                  lerna bootstrap
+                  lerna run build:lib
+                  npm run build-storybook
+            - name: run Lighthouse CI
+              env:
+                  LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+              run: |
+                  npm install -g @lhci/[email protected]
+                  lhci autorun

.github/workflows/publish.yml

@@ -1,48 +1,47 @@
-name: "publish"
+name: 'publish'
 
 on:
-  workflow_dispatch:
-    inputs:
-      release_type:
-        description: 'release type: minor | patch | beta'
-        required: true
+    workflow_dispatch:
+        inputs:
+            release_type:
+                description: 'release type: minor | patch | beta'
+                required: true
 
 jobs:
-  publish-new-version:
-    name: "publish a new version"
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          token: ${{ secrets.PAT }}
+    publish-new-version:
+        name: 'publish a new version'
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+              with:
+                  token: ${{ secrets.PAT }}
 
-      - name: npm install
-        run: npm i -g lerna && npm run bootstrap
+            - name: npm install
+              run: npm i -g lerna && npm run bootstrap
 
-      - name: get version list
-        run: |
-          PKG_NAME=@douyinfe/semi-ui
-          echo "VERSION_LIST="$(npm view $PKG_NAME versions --json)"" >> $GITHUB_ENV
-        
+            - name: get version list
+              run: |
+                  PKG_NAME=@douyinfe/semi-ui
+                  echo "VERSION_LIST="$(npm view $PKG_NAME versions --json)"" >> $GITHUB_ENV
 
-      - name: get version
-        run: echo "RELEASE_VERSION="$(node scripts/version.js)"" >> $GITHUB_ENV
-        env:
-            RELEASE_TYPE: ${{ github.event.inputs.release_type }}
+            - name: get version
+              run: echo "RELEASE_VERSION="$(node scripts/version.js)"" >> $GITHUB_ENV
+              env:
+                  RELEASE_TYPE: ${{ github.event.inputs.release_type }}
 
-      - name: publish
-        run: |
-          git config --global user.name 'semi-bot'
-          git config --global user.email '[email protected]'
-          npm config set registry=https://registry.npmjs.org/
-          npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
-          npm whoami
-          DIST_TAG=latest
-          if [[ ${{ github.event.inputs.release_type }} == 'beta' ]]; then
-            DIST_TAG=beta
-          fi
-          echo "$RELEASE_VERSION"
-          echo "$DIST_TAG"
-          lerna version $RELEASE_VERSION --exact --force-publish --yes --no-push
-          lerna publish from-package --dist-tag $DIST_TAG --yes
-          git push -o ci.skip --follow-tags --no-verify --atomic
+            - name: publish
+              run: |
+                  git config --global user.name 'semi-bot'
+                  git config --global user.email '[email protected]'
+                  npm config set registry=https://registry.npmjs.org/
+                  npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
+                  npm whoami
+                  DIST_TAG=latest
+                  if [[ ${{ github.event.inputs.release_type }} == 'beta' ]]; then
+                    DIST_TAG=beta
+                  fi
+                  echo "$RELEASE_VERSION"
+                  echo "$DIST_TAG"
+                  lerna version $RELEASE_VERSION --exact --force-publish --yes --no-push
+                  lerna publish from-package --dist-tag $DIST_TAG --yes
+                  git push -o ci.skip --follow-tags --no-verify --atomic

.github/workflows/release.yml

@@ -1,21 +1,20 @@
 name: release
 
-on:
-  create
+on: create
 
 jobs:
-  release:
-    runs-on: ubuntu-latest
-    if: github.event.ref_type == 'tag' && !contains(github.event.ref, 'alpha')
-    steps:
-      - uses: actions/checkout@v2
-      - name: release
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-      - run: |
-            npm i -g lerna && npm run bootstrap
-            node scripts/release.js
-        env:
-            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-            CHANGELOG_PATH: content/start/changelog/index.md, content/start/changelog/index-en-US.md
+    release:
+        runs-on: ubuntu-latest
+        if: github.event.ref_type == 'tag' && !contains(github.event.ref, 'alpha')
+        steps:
+            - uses: actions/checkout@v3
+            - name: release
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+            - run: |
+                  npm i -g lerna && npm run bootstrap
+                  node scripts/release.js
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  CHANGELOG_PATH: content/start/changelog/index.md, content/start/changelog/index-en-US.md

.github/workflows/test.yml

@@ -3,73 +3,22 @@
 name: test
 
 on:
-  push:
-    branches: [ main, release, test-code-coverage ]
-  pull_request:
-    branches: [ main, release ]
+    push:
+        branches: [main, release, test-code-coverage]
+    pull_request:
+        branches: [main, release]
 
-  workflow_dispatch:
+    workflow_dispatch:
 
 jobs:
-  jest:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - name: Run install
-        run: npm i -g lerna && npm run bootstrap
-      - name: Run Jest test
-        run: npm run test:coverage
-      - name: Archive Jest coverage
-        uses: actions/upload-artifact@v3
-        with:
-          if-no-files-found: error
-          name: jest
-          path: test/coverage/coverage-final.json
-  cypress:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - name: Run install
-        run: |
-          npm i -g lerna
-          npm run bootstrap
-      - name: Build storybook
-        run: |
-          npm run pre-story
-          TEST_ENV=test npm run build-storybook
-      - name: Serve storybook
-        run: nohup npx http-server -p 6006 storybook-static &
-      - name: Run Cypress test
-        run: npx wait-on http://127.0.0.1:6006 && ./node_modules/.bin/cypress run
-      - name: Archive Cypress coverage
-        uses: actions/upload-artifact@v3
-        with:
-          if-no-files-found: error
-          name: cypress
-          path: cypress/coverage/coverage-final.json
-  coverage:
-    runs-on: ubuntu-latest
-    needs: [jest, cypress]
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - name: Download Jest coverage
-        uses: actions/download-artifact@v3
-        with:
-          # upload jest and cypress coverage to output dir
-          path: output
-      - name: Code coverage merge
-        run: |
-          tree output
-          npx istanbul-merge --out output/coverage-final.json output/jest/coverage-final.json output/cypress/coverage-final.json
-          tree output
-      - name: Run codecov
-        run: npx codecov --token=${{ secrets.CODECOV_TOKEN }} --file=output/coverage-final.json
+    jest:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: '16'
+            - name: Run install
+              run: npm i -g lerna && npm run bootstrap
+            - name: Run Jest test
+              run: npm run test:unit

.github/workflows/test:coverage.yml

@@ -0,0 +1,75 @@
+# This is a basic workflow to help you get started with Actions
+
+name: test:coverage
+
+on:
+    push:
+        branches: [main, release, test-code-coverage]
+    pull_request:
+        branches: [main, release]
+
+    workflow_dispatch:
+
+jobs:
+    jest:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: '16'
+            - name: Run install
+              run: npm i -g lerna && npm run bootstrap
+            - name: Run Jest test
+              run: npm run test:coverage
+            - name: Archive Jest coverage
+              uses: actions/upload-artifact@v3
+              with:
+                  if-no-files-found: error
+                  name: jest
+                  path: test/coverage/coverage-final.json
+    cypress:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: '16'
+            - name: Run install
+              run: |
+                  npm i -g lerna
+                  npm run bootstrap
+            - name: Build storybook
+              run: |
+                  npm run pre-story
+                  TEST_ENV=test npm run build-storybook
+            - name: Serve storybook
+              run: nohup npx http-server -p 6006 storybook-static &
+            - name: Run Cypress test
+              run: npx wait-on http://127.0.0.1:6006 && ./node_modules/.bin/cypress run
+            - name: Archive Cypress coverage
+              uses: actions/upload-artifact@v3
+              with:
+                  if-no-files-found: error
+                  name: cypress
+                  path: cypress/coverage/coverage-final.json
+    coverage:
+        runs-on: ubuntu-latest
+        needs: [jest, cypress]
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: '16'
+            - name: Download Jest coverage
+              uses: actions/download-artifact@v3
+              with:
+                  # upload jest and cypress coverage to output dir
+                  path: output
+            - name: Code coverage merge
+              run: |
+                  tree output
+                  npx istanbul-merge --out output/coverage-final.json output/jest/coverage-final.json output/cypress/coverage-final.json
+                  tree output
+            - name: Run codecov
+              run: npx codecov --token=${{ secrets.CODECOV_TOKEN }} --file=output/coverage-final.json

.gitignore

@@ -26,6 +26,7 @@ storybook-static/
 *.zip
 cypress/videos/
 cypress/screenshots/
+cypress/downloads/
 
 # misc
 .env.local

.storybook/base/preview.tsx

@@ -22,6 +22,7 @@ import es from '@douyinfe/semi-ui/locale/source/es';
 import de from '@douyinfe/semi-ui/locale/source/de';
 import it from '@douyinfe/semi-ui/locale/source/it';
 import fr from '@douyinfe/semi-ui/locale/source/fr';
+import ro from '@douyinfe/semi-ui/locale/source/ro';
 
 export const globalTypes = {
     direction: {
@@ -48,7 +49,7 @@ export const globalTypes = {
       defaultValue: 'zh_CN',
       toolbar: {
           icon: 'google',
-          items: ['zh_CN', 'en_GB', 'ko_KR', 'ja_JP', 'ar', 'vi_VN', 'ru_RU', 'id_ID', 'ms_MY', 'th_TH', 'tr_TR', 'pt_BR', 'zh_TW', 'es', 'de', 'it', 'fr'],
+          items: ['zh_CN', 'en_GB', 'ko_KR', 'ja_JP', 'ar', 'vi_VN', 'ru_RU', 'id_ID', 'ms_MY', 'th_TH', 'tr_TR', 'pt_BR', 'zh_TW', 'es', 'de', 'it', 'fr', 'ro'],
       },
     }
 };
@@ -76,7 +77,8 @@ const getLocale = code => {
       es,
       de,
       it,
-      fr
+      fr,
+      ro
   };
 
   return language[code];

.storybook/v5config/base/config.js

@@ -1,71 +0,0 @@
-import { configure, addDecorator, addParameters } from '@storybook/react';
-import 'reset-css';
-import 'normalize.css';
-
-const config = loadStories => {
-    // Option defaults:
-    addParameters({
-        options: {
-            /**
-             * show story component as full screen
-             * @type {Boolean}
-             */
-            isFullscreen: false,
-            /**
-             * display panel that shows a list of stories
-             * @type {Boolean}
-             */
-            showNav: true,
-            /**
-             * display panel that shows addon configurations
-             * @type {Boolean}
-             */
-            showPanel: true,
-            /**
-             * where to show the addon panel
-             * @type {('bottom'|'right')}
-             */
-            panelPosition: 'bottom',
-            /**
-             * regex for finding the hierarchy separator
-             * @example:
-             *   null - turn off hierarchy
-             *   /\// - split by `/`
-             *   /\./ - split by `.`
-             *   /\/|\./ - split by `/` or `.`
-             * @type {Regex}
-             */
-            hierarchySeparator: /\/|\./,
-            /**
-             * regex for finding the hierarchy root separator
-             * @example:
-             *   null - turn off multiple hierarchy roots
-             *   /\|/ - split by `|`
-             * @type {Regex}
-             */
-            hierarchyRootSeparator: /\|/,
-            /**
-             * sidebar tree animations
-             * @type {Boolean}
-             */
-            sidebarAnimations: true,
-            /**
-             * enable/disable shortcuts
-             * @type {Boolean}
-             */
-            enableShortcuts: true,
-            /**
-             * show/hide tool bar
-             * @type {Boolean}
-             */
-            isToolshown: true,
-            /**
-             * theme storybook, see link below
-             */
-            theme: undefined,
-        },
-    });
-    configure(loadStories, module);
-};
-
-export default config;

.storybook/v5config/base/webpack.config.js

@@ -1,82 +0,0 @@
-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add additional webpack configurations.
-// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
-
-// IMPORTANT
-// When you add this file, we won't add the default configurations which is similar
-// to "React Create App". This only has babel loader to load JavaScript.
-const path = require('path');
-const _ = require('lodash');
-const SemiWebpackPlugin = require('../../packages/semi-ui-plugin-core');
-
-function resolve(...dirs) {
-    return path.join(__dirname, '../..', ...dirs);
-}
-
-module.exports = ({ config }) => {
-    const rules =
-        (config.module.rules &&
-            config.module.rules.filter(rule => {
-                const test = _.toString(rule && rule.test);
-                if (/\.css/i.test(test) || /\.s(c|a)ss/i.test(test)) {
-                    return false;
-                }
-                return true;
-            })) ||
-        [];
-    rules.push(
-        {
-            test: /\.css$/,
-            loaders: ['style-loader', 'css-loader'],
-        },
-        {
-            test: /\.tsx?$/,
-            use: [
-                {
-                    loader: require.resolve('awesome-typescript-loader'),
-                },
-            ],
-        },
-        {
-            test: /\.svg?$/,
-            use: ['@svgr/webpack']
-        }
-    );
-    config.module.rules = rules;
-    config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx');
-    config.resolve.symlinks = false;
-    config.resolve.alias = {
-        '@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
-        '@douyinfe/semi-ui': resolve('packages/semi-ui'),
-        '@douyinfe/semi-icons': resolve('packages/semi-icons/src'),
-        '@douyinfe/semi-theme-default': resolve('packages/semi-theme-default'),
-        '@douyinfe/semi-illustrations': resolve('packages/semi-illustrations/src'),
-    };
-    config.devtool = 'source-map';
-    // config.devtool = 'cheap-source-map';
-    config.plugins.push(
-        new SemiWebpackPlugin({
-            theme: '@douyinfe/semi-theme-default',
-            esbuild: true,
-            paths: [
-                function check(path) {
-                    return (
-                        (/packages\/semi-foundation/i.test(path) ||
-                            /packages\/semi-ui/i.test(path) ||
-                            /packages\/semi-icons/i.test(path)) &&
-                        !(
-                            /packages\/semi-foundation\/node_modules/i.test(path) ||
-                            /packages\/semi-ui\/node_modules/i.test(path)
-                        )
-                    );
-                },
-            ],
-            scssPaths: [
-                resolve('packages/semi-foundation'),
-                resolve('packages/semi-ui'),
-                resolve('packages/semi-theme-default'),
-            ],
-        })
-    );
-    return config;
-};

.storybook/v5config/js/addons.js

@@ -1 +0,0 @@
-import '../base/addons';

.storybook/v5config/js/config.js

@@ -1,8 +0,0 @@
-import config from '../base/config';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../../packages/semi-ui', true, /.stories.js$/);
-function loadStories() {
-    req.keys().forEach(filename => req(filename));
-}
-config(loadStories);

.storybook/v5config/js/webpack.config.js

@@ -1,8 +0,0 @@
-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add additional webpack configurations.
-// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
-
-// IMPORTANT
-// When you add this file, we won't add the default configurations which is similar
-// to "React Create App". This only has babel loader to load JavaScript.
-module.exports = require('../base/webpack.config');

.storybook/v5config/ts/addons.js

@@ -1 +0,0 @@
-import '../base/addons';

.storybook/v5config/ts/config.js

@@ -1,8 +0,0 @@
-import config from '../base/config';
-
-// automatically import all files ending in *.stories.tsx
-const req = require.context('../../packages/semi-ui', true, /.stories.tsx$/);
-function loadStories() {
-    req.keys().forEach(filename => req(filename));
-}
-config(loadStories);

.storybook/v5config/ts/webpack.config.js

@@ -1,8 +0,0 @@
-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add additional webpack configurations.
-// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
-
-// IMPORTANT
-// When you add this file, we won't add the default configurations which is similar
-// to "React Create App". This only has babel loader to load JavaScript.
-module.exports = require('../base/webpack.config');

.vscode/settings.json

@@ -17,7 +17,7 @@
         "editor.defaultFormatter": "michelemelluso.code-beautifier"
     },
     "[typescriptreact]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "typescript.updateImportsOnFileMove.enabled": "always",
     "files.autoSave": "onFocusChange",
@@ -44,4 +44,4 @@
         "backtop",
         "Splited"
     ]
-}
+}

content/basic/divider/index-en-US.md

@@ -24,37 +24,37 @@ import { Divider } from '@douyinfe/semi-ui';
 () => {
 
     return (
-    <div>
-        <h3>Horizontal Solid Line</h3>
-        <span>Semi Design is a design system.</span>
-        <Divider margin='12px'/>
-        <span>It defines a set of components.</span>
-
-        <h3 style={{"marginTop":"40px"}}>Horizontal Dashed Line</h3>
-        <span>Semi Design is a design system.</span>
-        <Divider dashed={true} margin='12px'/>
-        <span>It defines a set of components.</span>
-
-        <h3 style={{"marginTop":"40px"}}>Vertical Solid Line</h3>
-
         <div>
-            <span>Left</span>
-            <Divider layout="vertical" margin='12px'/>
-            <span>Middle</span>
-            <Divider layout="vertical" margin='12px'/>
-            <span>Right</span>
-        </div>
+            <h3>Horizontal Solid Line</h3>
+            <span>Semi Design is a design system.</span>
+            <Divider margin='12px'/>
+            <span>It defines a set of components.</span>
+
+            <h3 style={{ "marginTop": "40px" }}>Horizontal Dashed Line</h3>
+            <span>Semi Design is a design system.</span>
+            <Divider dashed={true} margin='12px'/>
+            <span>It defines a set of components.</span>
+
+            <h3 style={{ "marginTop": "40px" }}>Vertical Solid Line</h3>
+
+            <div>
+                <span>Left</span>
+                <Divider layout="vertical" margin='12px'/>
+                <span>Middle</span>
+                <Divider layout="vertical" margin='12px'/>
+                <span>Right</span>
+            </div>
+
+            <h3 style={{ "marginTop": "40px" }}>Vertical Dashed Line</h3>
+            <div>
+                <span>Left</span>
+                <Divider layout="vertical" dashed={true} margin='12px'/>
+                <span>Middle</span>
+                <Divider layout="vertical" dashed={true} margin='12px'/>
+                <span>Right</span>
+            </div>
 
-        <h3 style={{"marginTop":"40px"}}>Vertical Dashed Line</h3>
-        <div>
-            <span>Left</span>
-            <Divider layout="vertical" dashed={true} margin='12px'/>
-            <span>Middle</span>
-            <Divider layout="vertical" dashed={true} margin='12px'/>
-            <span>Right</span>
         </div>
-
-    </div>
     );
 };
 

content/basic/divider/index.md

@@ -1,7 +1,7 @@
 ---
 localeCode: zh-CN
 order: 11
-category: 基础类 
+category: 基础 
 title:  Divider 分割线 
 icon: doc-divider 
 brief: 分割线是一个呈线状的轻量化组件，用于有逻辑的组织元素内容和页面结构或区域。
@@ -30,12 +30,12 @@ import { Divider } from '@douyinfe/semi-ui';
             <Divider margin='12px'/>
             <span>它定义了一套中后台设计与前端基础组件。</span>
 
-            <h3 style={{"marginTop":"40px"}}>水平虚线</h3>
+            <h3 style={{ "marginTop": "40px" }}>水平虚线</h3>
             <span>Semi Design 是一个设计系统。</span>
             <Divider dashed={true} margin='12px'/>
             <span>它定义了一套中后台设计与前端基础组件。</span>
 
-            <h3 style={{"marginTop":"40px"}}>垂直实线</h3>
+            <h3 style={{ "marginTop": "40px" }}>垂直实线</h3>
 
             <div>
                 <span>左</span>
@@ -45,7 +45,7 @@ import { Divider } from '@douyinfe/semi-ui';
                 <span>右</span>
             </div>
 
-            <h3 style={{"marginTop":"40px"}}>垂直虚线</h3>
+            <h3 style={{ "marginTop": "40px" }}>垂直虚线</h3>
             <div>
                 <span>左</span>
                 <Divider layout="vertical" dashed={true} margin='12px'/>

content/basic/grid/index-en-US.md

@@ -290,7 +290,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
     <div className="grid">
-        <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
+        <Row gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
             <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>

content/basic/grid/index.md

@@ -290,7 +290,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
     <div className="grid">
-        <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
+        <Row gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
             <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>

content/basic/icon/index-en-US.md

@@ -66,7 +66,7 @@ import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusC
     const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
     const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
     let icons = types.map((type, i) => {
-        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>;
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key: size }))}</div>;
     });
     return icons;
 };
@@ -82,14 +82,14 @@ import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-ic
 
 () => (
     <div>
-        <div style={{color:'#E91E63'}} >
+        <div style={{ color: '#E91E63' }} >
             <IconLikeHeart size="extra-large"/>
             <IconFlag size="extra-large"/>
         </div>
         <br/>
         <div>
-            <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
-            <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+            <IconLock style={{ color: '#6A3AC7' }} size="extra-large" />
+            <IconUnlock style={{ color: '#9C27B0' }} size="extra-large"/>
         </div>
     </div>
 );

content/basic/icon/index.md

@@ -65,7 +65,7 @@ import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusC
     const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
     const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
     let icons = types.map((type, i) => {
-        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>;
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key: size }))}</div>;
     });
     return icons;
 };
@@ -81,14 +81,14 @@ import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-ic
 
 () => (
     <div>
-        <div style={{color:'#E91E63'}} >
+        <div style={{ color: '#E91E63' }} >
             <IconLikeHeart size="extra-large"/>
             <IconFlag size="extra-large"/>
         </div>
         <br/>
         <div>
-            <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
-            <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+            <IconLock style={{ color: '#6A3AC7' }} size="extra-large" />
+            <IconUnlock style={{ color: '#9C27B0' }} size="extra-large"/>
         </div>
     </div>
 );

content/basic/layout/index-en-US.md

@@ -149,8 +149,8 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
 () => {
     const { Header, Footer, Content } = Layout;
     return (
-        <Layout style={{border: '1px solid var(--semi-color-border)'}}>
-            <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+            <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                 <div>
                     <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
                         <Nav.Header>
@@ -164,7 +164,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconBell size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -172,7 +172,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconHelpCircle size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -221,11 +221,11 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                         alignItems: 'center',
                     }}
                 >
-                    <IconBytedanceLogo size='large' style={{marginRight: '8px'}}/>
+                    <IconBytedanceLogo size='large' style={{ marginRight: '8px' }}/>
                     <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                 </span>
                 <span>
-                    <span style={{marginRight: '24px'}}>Customer Service</span>
+                    <span style={{ marginRight: '24px' }}>Customer Service</span>
                     <span>Feedback</span>
                 </span>
             </Footer>
@@ -244,12 +244,12 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
 () => {
     const { Header, Footer, Sider, Content } = Layout;
     return (
-        <Layout style={{border: '1px solid var(--semi-color-border)'}}>
-            <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+            <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                 <div >
                     <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
                         <Nav.Header>
-                            <IconSemiLogo style={{fontSize: 36}} />
+                            <IconSemiLogo style={{ fontSize: 36 }} />
                         </Nav.Header>
                         <span
                             style={{
@@ -262,7 +262,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                     color: 'var(--semi-color-text-0)',
                                     fontWeight: '600',
                                 }}>Semi Design</span>
-                            <span style={{marginRight: '24px'}}>Semi Theme</span>
+                            <span style={{ marginRight: '24px' }}>Semi Theme</span>
                             <span>Semi Blocks</span>
                         </span>
                         <Nav.Footer>
@@ -270,7 +270,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconBell size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -278,7 +278,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconHelpCircle size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -288,7 +288,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                 </div>
             </Header>
             <Layout >
-                <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+                <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                     <Nav
                         style={{ maxWidth: 220, height: '100%' }}
                         defaultSelectedKeys={['Home']}
@@ -348,7 +348,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                     <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                 </span>
                 <span>
-                    <span style={{marginRight: '24px'}}>Customer Service</span>
+                    <span style={{ marginRight: '24px' }}>Customer Service</span>
                     <span>Feedback</span>
                 </span>
             </Footer>
@@ -367,8 +367,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 () => {
     const { Header, Footer, Sider, Content } = Layout;
     return (
-        <Layout style={{border: '1px solid var(--semi-color-border)'}}>
-            <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+            <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                 <Nav
                     defaultSelectedKeys={['Home']}
                     style={{ maxWidth: 220, height: '100%' }}
@@ -388,7 +388,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                 />
             </Sider>
             <Layout>
-                <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+                <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                     <Nav
                         mode='horizontal'
                         footer={
@@ -397,7 +397,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                                     theme="borderless"
                                     icon = {<IconBell size="large" />}
                                     style={{
-                                        color:'var(--semi-color-text-2)',
+                                        color: 'var(--semi-color-text-2)',
                                         marginRight: '12px',
                                     }}
                                 />
@@ -405,7 +405,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                                     theme="borderless"
                                     icon = {<IconHelpCircle size="large" />}
                                     style={{
-                                        color:'var(--semi-color-text-2)',
+                                        color: 'var(--semi-color-text-2)',
                                         marginRight: '12px',
                                     }}
                                 />
@@ -459,7 +459,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                         <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                     </span>
                     <span>
-                        <span style={{marginRight: '24px'}}>Customer Service</span>
+                        <span style={{ marginRight: '24px' }}>Customer Service</span>
                         <span>Feedback</span>
                     </span>
                 </Footer>

content/basic/layout/index.md

@@ -147,7 +147,7 @@ import { Layout } from '@douyinfe/semi-ui';
 ```jsx live=true dir="column" hideInDSM
 import React from 'react';
 import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
-import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo,IconHome,IconLive,IconSetting } from '@douyinfe/semi-icons';
+import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconLive, IconSetting } from '@douyinfe/semi-icons';
 
 () => {
     const { Header, Footer, Content } = Layout;

content/basic/space/index-en-US.md

@@ -41,13 +41,13 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
 
 () => {
     const divStyle = {
-        width:80,
-        height:100,
-        lineHight:100,
+        width: 80,
+        height: 100,
+        lineHight: 100,
         display: 'flex',
         alignItems: 'center',
-        justifyContent:'center',
-        border:'1px solid var(--semi-color-border)',
+        justifyContent: 'center',
+        border: '1px solid var(--semi-color-border)',
         borderRadius: 3
     };
     return (
@@ -88,7 +88,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 () => (
     <Tabs type="line">
         <TabPane tab="tight" itemKey="1">
-            <Space spacing='tight' style={{marginTop:'15px'}}>
+            <Space spacing='tight' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -96,7 +96,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="medium" itemKey="2">
-            <Space spacing='medium' style={{marginTop:'15px'}}>
+            <Space spacing='medium' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -104,7 +104,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="loose" itemKey="3">
-            <Space spacing='loose' style={{marginTop:'15px'}}>
+            <Space spacing='loose' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -112,7 +112,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="array" itemKey="4">
-            <Space spacing={[8,16]} wrap style={{marginTop:'15px'}}>
+            <Space spacing={[8, 16]} wrap style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>

content/basic/space/index.md

@@ -39,13 +39,13 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
 
 () => {
     const divStyle = {
-        width:80,
-        height:100,
-        lineHight:100,
+        width: 80,
+        height: 100,
+        lineHight: 100,
         display: 'flex',
         alignItems: 'center',
-        justifyContent:'center',
-        border:'1px solid var(--semi-color-border)',
+        justifyContent: 'center',
+        border: '1px solid var(--semi-color-border)',
         borderRadius: 3
     };
     return (
@@ -86,7 +86,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 () => (
     <Tabs type="line">
         <TabPane tab="tight" itemKey="1">
-            <Space spacing='tight' style={{marginTop:'15px'}}>
+            <Space spacing='tight' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -94,7 +94,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="medium" itemKey="2">
-            <Space spacing='medium' style={{marginTop:'15px'}}>
+            <Space spacing='medium' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -102,7 +102,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="loose" itemKey="3">
-            <Space spacing='loose' style={{marginTop:'15px'}}>
+            <Space spacing='loose' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -110,7 +110,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="array" itemKey="4">
-            <Space spacing={[8,16]} wrap style={{marginTop:'15px'}}>
+            <Space spacing={[8, 16]} wrap style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>

content/basic/tokens/index-en-US.md

@@ -197,6 +197,10 @@ It is used to describe the sequence of interface elements
 
 <DesignToken componentName='global' reg={/z-/}/>
 
+## Animation
+
+<DesignToken componentName="global" isAnimation={true} />
+
 ## Variables not yet supported
 
 Currently, Semi does not support global variables in the following categories. If you have related requirements, you can give feedback through issue and describe your expected needs in detail.
@@ -210,4 +214,4 @@ Currently, Semi does not support global variables in the following categories. I
 **Media query**
 
 ## Customization
-If you need to customize the global variable style, please go to [Semi DSM](https://semi.design/dsm), make your own theme and publish it
+If you need to customize the global variable style, please go to [Semi DSM](https://semi.design/dsm), make your own theme and publish it

content/basic/tokens/index.md

@@ -201,6 +201,10 @@ brief: Semi Design Tokens
 
 <DesignToken componentName='global' reg={/z-/}/>
 
+## 动画
+
+<DesignToken componentName="global" isAnimation={true} />
+
 ## 尚未支持的变量
 目前，Semi 尚未支持以下类别的全局变量，如果你有相关需求，可以通过issue进行反馈，详细描述你的预期需求，我们会在评估后进行处理
 
@@ -208,7 +212,6 @@ brief: Semi Design Tokens
 
 **字间距 letter spacing**
 
-**时长 duration**
 
 **媒体查询 media query**
 

content/basic/typography/index-en-US.md

@@ -5,7 +5,7 @@ category: Basic
 title:  Typography
 subTitle: Typography
 icon: doc-typography
-brief: The basic format of text, images, and paragraphs.
+brief: The basic format of text, images, paragraphs, and numeric.
 ---
 
 
@@ -33,12 +33,12 @@ function Demo() {
     const { Title } = Typography;
     return (
         <div>
-            <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
-            <Title with={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
-            <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
-            <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
-            <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
-            <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
+            <Title style={{ margin: '8px 0' }} >h1. Semi Design</Title>
+            <Title with={2} style={{ margin: '8px 0' }} >h2. Semi Design</Title>
+            <Title heading={3} style={{ margin: '8px 0' }} >h3. Semi Design</Title>
+            <Title heading={4} style={{ margin: '8px 0' }} >h4. Semi Design</Title>
+            <Title heading={5} style={{ margin: '8px 0' }} >h5. Semi Design</Title>
+            <Title heading={6} style={{ margin: '8px 0' }} >h6. Semi Design</Title>
         </div>
     );
 }
@@ -147,6 +147,112 @@ function Demo() {
 }
 ```
 
+### Numeral
+
+Based on Text component, added properties: `rule`, `precision`, `truncate`, `parser`, to provide the ability to handle Numeral in text separately.
+<Notice title='Note'>
+    The Numeral component recursively traverses Children to detect all numeric text within it for conversion and display, taking care to control the rendering structure hierarchy.
+</Notice>
+
+`precision` allows you to set the number of decimal places to be retained, used to set precision  
+`truncate` The truncation of the number of decimal places, optionally `ceil`, `floor`, `round`, aligned with Math.ceil, Math.floor, Math.round  
+`rule` for setting the parsing rules
+- set to `percentages` to automatically convert numbers to percentages
+- set to `bytes-decimal` to automatically convert numbers to bytes, 1 KB is defined as 1000 bytes, (B, KB, MB, GB, TB, PB, EB, ZB, YB)
+- Set to `bytes-binary` automatically converts the number to the unit of display corresponding to bytes, 1 KiB is defined as equal to 1024 bytes, (B, KiB, MiB, GiB, TiB, PiB, EiB, ZiB, YiB)
+- When set to `text`, Automatic rounding of numbers only, based on the `precision` and `truncate` attributes
+- When set to `numbers`, non-numeric characters will be filtered and only numbers will be displayed
+- When set to `exponential`, numbers are automatically converted to scientific notation
+
+```jsx live=true
+import React from 'react';
+import { Typography } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const { Numeral } = Typography;
+    return (
+        <div>
+            <Numeral precision={1}>
+                <p>Liked：1.6111e1 K</p>
+            </Numeral>
+
+            <p>
+                Views:
+                <Numeral rule="numbers" precision={1}>
+                    ���2.4444e2
+                </Numeral>
+                K
+            </p>
+            
+            <Numeral rule="percentages" precision={2} style={{ marginBottom: 12 }}>
+                <p>Favorable rating: 0.915</p>
+            </Numeral>
+
+            <Numeral rule="percentages" style={{ marginBottom: 12 }}>
+                My odds of winning this game are 60 and my odds of losing are 40.
+            </Numeral>
+
+            <Numeral rule="bytes-decimal" precision={2} truncate="floor">
+                <p>Used: 1000</p>
+                <p>Available: {1024*1000}</p> 
+            </Numeral>
+            
+            <Numeral rule="bytes-binary" precision={2} truncate="floor">
+                <p>Used: 1024</p>
+                <p>Available: {2e12}</p>
+            </Numeral>
+        </div>
+    );
+}
+```
+
+Parsing rules can be customised via `parser`.
+
+```jsx live=true
+import React from 'react';
+import { Typography } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const { Numeral } = Typography;
+
+    function parserTCH(oldVal) {
+        return oldVal.split(' ').map(item =>
+            Number(item) ? `${item.replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')}+` : item
+        ).join(' ');
+    }
+
+    function Infos() {
+        const data = [
+            { type: 'Stars', min: '6200' },
+            { type: 'Fork', min: '400' },
+            { type: 'Downloads', min: '3000000' },
+            { type: 'Contributors', min: '60' }
+        ];
+        return data.map(item =>
+            <p key={item.min}>
+                {item.type}：
+                <b style={{ color: 'rgba(var(--semi-violet-5),1)' }}>
+                    {item.min}
+                </b>
+            </p>
+        );
+    }
+
+    return (
+        <div>
+            <Numeral parser={parserTCH} component="div">
+                Semi Design value our users, any kind of contribution is welcome
+                {Infos}
+            </Numeral>
+            <br />
+            <Numeral link={{ href: 'https://semi.design', target: '_blank' }} parser={parserTCH}>
+                Trusted by {1e5} users, Go to website &gt;&gt;
+            </Numeral>
+        </div>
+    );
+}
+```
+
 ### Size
 
 Paragraph and Text component support two sizes, `small`(12px) and `normal`(14px). By default it is set to `normal`。
@@ -182,17 +288,19 @@ import React from 'react';
 import { Typography, TextArea } from '@douyinfe/semi-ui';
 
 function Demo() {
-    const { Paragraph, Text } = Typography;
+    const { Paragraph, Text, Numeral } = Typography;
 
     return (
         <div>
             <Paragraph copyable>Click the right icon to copy text.</Paragraph>
             <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>Click to copy text.</Paragraph>
             <Paragraph copyable={{ onCopy: () => Toast.success({ content: 'Successfully copied.'}) }}>Click the right icon to copy.</Paragraph>
+            Timestamp: <Numeral truncate="ceil" copyable underline>{new Date().getTime()/1000}s</Numeral>
+            <br/>
             <br/>
             <Text type="secondary">Paste here: </Text>
             <br/>
-            <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
+            <TextArea autosize style={{ width: 320, marginTop: 4 }} rows={3} />
         </div>
     );
 }
@@ -218,7 +326,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'This is a supercalifragilisticexpialidocious tooltip' }
                     }
                 }}
@@ -239,7 +347,7 @@ function Demo() {
                 {`Multi-line ellipsis: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
             </Paragraph>
             <br/>
-            <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
+            <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }} style={{ width: 300 }}>
                 {`With Popover: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
             </Paragraph>
             <br/>
@@ -266,7 +374,7 @@ function Demo() {
         <div>
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation' }
                     }
                 }}
@@ -277,7 +385,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' }
                     }
                 }}
@@ -288,7 +396,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } }
                     }
                 }}
@@ -363,6 +471,27 @@ function Demo() {
 | type       | Type, one of `primary`, `secondary`, `warning`, `danger`, `tertiary`(**v>=1.2.0**), `quaternary`(**v>=1.2.0**), `success`(**v>=1.7.0**) | string                                                | `primary` | 0.27.0  |
 | underline  | Underlined style                                                                                                                        | boolean                                               | false     | 0.27.0  |
 
+### Typography.Numeral
+
+| Properties | Instructions                                                                                                                            | type                  | Default                                    | version |
+| ---------- |-----------------------------------------------------------------------------------------------------------------------------------------|-----------------------|--------------------------------------------|---------|
+| rule      | Parsing rules, one of `text`, `numbers`, `bytes-decimal`, `bytes-binary`, `percentages`, `currency`, `exponential`                      | string                | `text`                                     | 2.22.0  |
+| precision  | allows you to set the number of decimal places to be retained, used to set precision                                                    | number                | 0                                          | 2.22.0  |
+| truncate  | The truncation of the number of decimal places, optionally `ceil`, `floor`, `round`, aligned with Math.ceil, Math.floor, Math.round       | string                | `round`                                    | 2.22.0  |
+| parser    | Custom numeral parsing functions                                                                                                        | (str: string) => string | -                                          | 2.22.0  |
+| copyable   | Toggle whether to be copyable                                                                                                           | boolean \| object:[Copyable Config](#Copyable-Config) | false   | 2.22.0 |
+| code       | wrap with `code` element                                                                                                                | boolean               | -                                          | 2.22.0  |
+| component  | Custom rendering html element                                                                                                           | html element          | span                                       | 2.22.0  |
+| delete     | Deleted style                                                                                                                           | boolean               | false                                      | 2.22.0  |
+| disabled   | Disabled style                                                                                                                          | boolean               | false                                      | 2.22.0  |
+| ellipsis   | Display ellipsis when text overflows                                                                                                    | boolean \| object:Ellipsis Config     | false                      | 2.22.0  |
+| icon       | Prefix icon.                                                                                                                            | ReactNode             | -                                          | 2.22.0  |
+| link       | Toggle whether to display as a link. When passing object, the attributes will be transparently passed to the a tag                      | boolean \| object      |  false  | 2.22.0  |
+| mark       | Marked style                                                                                                                            | boolean               | false                                      | 2.22.0  |
+| size       | Size, one of `normal`，`small`                                                                                                           | string                | `normal`                                   | 2.22.0  |
+| strong     | Bold style                                                                                                                              | boolean               | false                                      | 2.22.0  |
+| type       | Type, one of `primary`, `secondary`, `warning`, `danger`, `tertiary`(**v>=1.2.0**) , `quaternary`(**v>=1.2.0**), `success`(**v>=1.7.0**) | string                | `primary`                                  | 2.22.0  |
+| underline  | Underlined style                                                                                                                        | boolean               | false                                      | 2.22.0  |
 
 ### Ellipsis Config
 **v >= 0.34.0**
@@ -425,4 +554,4 @@ function Demo() {
 | View <PureA> user documentation </PureA> for details| View the<PureA> user documentation</PureA> for details |
 
 ## Design Tokens
-<DesignToken/>
+<DesignToken/>

content/basic/typography/index.md

@@ -4,7 +4,7 @@ order: 17
 category: 基础
 title:  Typography 版式
 icon: doc-typography
-brief: 文字，图片，段落的基本格式。
+brief: 文字，图片，段落，数值的基本格式。
 ---
 
 ## 使用场景
@@ -28,12 +28,12 @@ function Demo() {
     const { Title } = Typography;
     return (
         <div>
-            <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
-            <Title heading={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
-            <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
-            <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
-            <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
-            <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
+            <Title style={{ margin: '8px 0' }} >h1. Semi Design</Title>
+            <Title heading={2} style={{ margin: '8px 0' }} >h2. Semi Design</Title>
+            <Title heading={3} style={{ margin: '8px 0' }} >h3. Semi Design</Title>
+            <Title heading={4} style={{ margin: '8px 0' }} >h4. Semi Design</Title>
+            <Title heading={5} style={{ margin: '8px 0' }} >h5. Semi Design</Title>
+            <Title heading={6} style={{ margin: '8px 0' }} >h6. Semi Design</Title>
         </div>
     );
 }
@@ -137,6 +137,112 @@ function Demo() {
 }
 ```
 
+### 数值组件
+
+Numeral 组件在Text组件的基础上，添加了属性: `rule`, `precision`, `truncate`, `parser`, 以提供需要单独处理文本中数值的能力。
+<Notice title='注意'>
+    Numeral 组件会递归遍历 Children 检测其中所有的数字文本进行转换展示，请注意控制渲染结构层级。
+</Notice>
+
+`precision` 可以设置小数点后保留位数, 用于设置精度  
+`truncate`  小数点后保留位截段取整方式，可选 `ceil`, `floor`, `round`，作用与  Math.ceil、Math.floor、Math.round 对齐  
+`rule`  用于设置解析规则  
+- 设为 `percentages` 会将数字自动转换为百分比形式展示
+- 设为 `bytes-decimal` 会将数字自动换算为字节对应的单位展示， 1 KB 定义为等于 1000 字节，（B, KB, MB, GB, TB, PB, EB, ZB, YB）
+- 设为 `bytes-binary` 会将数字自动换算为字节对应的单位展示，1 KiB 定义为等于 1024字节，（B, KiB, MiB, GiB, TiB, PiB, EiB, ZiB, YiB）
+- 设为 `text`时，仅自动对数字进行取整，根据 `precision` 和 `truncate` 属性
+- 设为 `numbers`时，会将非数字字符进行过滤，仅展示数字
+- 设为 `exponential` 时,会将数字自动转换为科学计数法形式展示
+
+```jsx live=true
+import React from 'react';
+import { Typography } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const { Numeral } = Typography;
+    return (
+        <div>
+            <Numeral precision={1}>
+                <p>点赞量：1.6111e1 K</p>
+            </Numeral>
+            
+            <p>
+                播放量:
+                <Numeral rule="numbers" precision={1}>
+                    ���2.4444e2
+                </Numeral>
+                K
+            </p>
+            
+            <Numeral rule="percentages" precision={2} style={{ marginBottom: 12 }}>
+                <p>好评率: 0.915</p>
+            </Numeral>
+
+            <Numeral rule="percentages" style={{ marginBottom: 12 }}>
+                这场比赛我的胜率是60，输的概率是40
+            </Numeral>
+
+            <Numeral rule="bytes-decimal" precision={2} truncate="floor">
+                <p>已使用: 1000</p>
+                <p>未使用: {1024*1000}</p> 
+            </Numeral>
+            
+            <Numeral rule="bytes-binary" precision={2} truncate="floor">
+                <p>已使用: 1024</p>
+                <p>未使用: {2e12}</p>
+            </Numeral>
+        </div>
+    );
+}
+```
+
+可以通过 `parser` 自定义解析规则
+
+```jsx live=true
+import React from 'react';
+import { Typography } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const { Numeral } = Typography;
+
+    function parserTCH(oldVal) {
+        return oldVal.split(' ').map(item =>
+            Number(item) ? `${item.replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')}+` : item
+        ).join(' ');
+    }
+
+    function Infos() {
+        const data = [
+            { type: 'Stars', min: '6200' },
+            { type: 'Fork', min: '400' },
+            { type: '下载', min: '3000000' },
+            { type: '贡献者', min: '60' }
+        ];
+        return data.map(item =>
+            <p key={item.min}>
+                {item.type}：
+                <b style={{ color: 'rgba(var(--semi-violet-5),1)' }}>
+                    {item.min}
+                </b>
+            </p>
+        );
+    }
+
+    return (
+        <div>
+            <Numeral parser={parserTCH} component="div">
+                Semi Design 重视我们的用户，加入并助力我们不断完善
+                {Infos}
+            </Numeral>
+            <br />
+            <Numeral link={{ href: 'https://semi.design', target: '_blank' }} parser={parserTCH}>
+                现已服务 {1e5} 用户，前往官网 &gt;&gt;
+            </Numeral>
+        </div>
+    );
+}
+```
+
 ### 文本大小
 段落组件和文本组件支持两种尺寸，`small`（12px） 和 `normal`（14px），默认为`normal`。
 ```jsx live=true
@@ -168,17 +274,19 @@ import React from 'react';
 import { Typography, TextArea } from '@douyinfe/semi-ui';
 
 function Demo() {
-    const { Paragraph, Text } = Typography;
+    const { Paragraph, Text, Numeral } = Typography;
 
     return (
         <div>
             <Paragraph copyable>点击右边的图标复制文本。</Paragraph>
             <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>点击复制文本。</Paragraph>
             <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功'}) }}>点击右边的图标复制文本。</Paragraph>
+            时间戳: <Numeral truncate="ceil" copyable underline>{new Date().getTime()/1000}s</Numeral>
+            <br/>
             <br/>
             <Text type="secondary">粘贴区域：</Text>
             <br/>
-            <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
+            <TextArea autosize style={{ width: 320, marginTop: 4 }} rows={3} />
         </div>
     );
 }
@@ -204,7 +312,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '这是自定义要展示的内容' }
                     }
                 }}
@@ -226,7 +334,7 @@ function Demo() {
                 这是一个多行截断的例子：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
             </Paragraph>
             <br/>
-            <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
+            <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }} style={{ width: 300 }}>
                 多行截断，展示 Popover：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
             </Paragraph>
             <br/>
@@ -253,7 +361,7 @@ function Demo() {
         <div>
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation' }
                     }
                 }}
@@ -264,7 +372,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation', className: 'components-typography-demo' }
                     }
                 }}
@@ -275,7 +383,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation', style: { wordBreak: 'break-all' } }
                     }
                 }}
@@ -334,6 +442,7 @@ function Demo() {
 | underline | 添加下划线样式                                                                                                                            | boolean                           | false     | 0.27.0 |
 
 ### Typography.Paragraph
+
 | 属性      | 说明                                                                                                                                      | 类型                              | 默认值    | 版本   |
 | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --------- | ------ |
 | component | 自定义渲染元素                                                                                                                            | html element                      | p         |        |
@@ -349,6 +458,29 @@ function Demo() {
 | type      | 文本类型，可选 `primary`, `secondary`, `warning`, `danger`, `tertiary`(**v>=1.2.0**), `quaternary`(**v>=1.2.0**), `success`(**v>=1.7.0**) | string                            | `primary` | 0.27.0 |
 | underline | 添加下划线样式                                                                                                                            | boolean                           | false     | 0.27.0 |
 
+### Typography.Numeral
+
+| 属性        | 说明                                                                                                                             | 类型                        | 默认值                                        | 版本   |
+|-----------|--------------------------------------------------------------------------------------------------------------------------------|---------------------------|--------------------------------------------| ------ |
+| rule      | 解析规则，可选 `text`, `numbers`, `bytes-decimal`, `bytes-binary`, `percentages`, `exponential`                               | string                    | `text`                                     | 2.22.0       |
+| precision  | 可以设置小数点后保留位数, 用于设置精度                                                                                                                       | number                    | 0                                          | 2.22.0       |
+| truncate  | 小数点后保留位截段取整方式，可选 `ceil`, `floor`, `round`，作用与  Math.ceil、Math.floor、Math.round 对齐                                                                                      | string                    | `round`                                    | 2.22.0       |
+| parser    | 自定义数值解析函数                                                                                                                      | (str: string) => string | -                                          | 2.22.0       |
+| component | 自定义渲染元素                                                                                                                        | html element              | span                                       | 2.22.0       |
+| code      | 是否被 `code` 元素包裹                                                                                                                | boolean                   | -                                          |  2.22.0      |
+| copyable  | 是否可拷贝                                                                                                                          | boolean \| object:[Copyable Config](#Copyable-Config) | false     | 2.22.0 |
+| delete    | 添加删除线样式                                                                                                                        | boolean                   | false                                      | 2.22.0 |
+| disabled  | 禁用文本                                                                                                                           | boolean                   | false                                      | 2.22.0 |
+| ellipsis  | 设置自动溢出省略                                                                                                                       | boolean\| object:Ellipsis Config                     | false     | 2.22.0 |
+| icon      | 前缀图标                                                                                                                           | ReactNode                 | -                                          | 2.22.0 |
+| link      | 是否为链接，传object时，属性将透传给a标签                                                                                                       | boolean\|object                                     | false     | 2.22.0 |
+| mark      | 添加标记样式                                                                                                                         | boolean                   | false                                      | 2.22.0 |
+| size      | 文本大小，可选`normal`，`small`                                                                                                        | string                    | `normal`                                   | 2.22.0 |
+| strong    | 是否加粗                                                                                                                           | boolean                   | false                                      | 2.22.0 |
+| type      | 文本类型，可选 `primary`, `secondary`, `warning`, `danger`, `tertiary`, `quaternary`, `success` | string                    | `primary`                                  | 2.22.0 |
+| underline | 添加下划线样式                                                                                                                        | boolean                   | false                                      | 2.22.0 |
+
+
 ### Ellipsis Config
 **v >= 0.34.0**
 
@@ -409,4 +541,4 @@ function Demo() {
 | View <PureA> user documentation </PureA> for details| View the<PureA> user documentation</PureA> for details |
 
 ## 设计变量
-<DesignToken/>
+<DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Feedback
 title:  Banner
 subTitle: Banner
@@ -105,21 +105,21 @@ function Demo() {
     const { Text } = Typography;
   
     return (
-        <div style={{width: 640 }} className="components-banner-demo">
+        <div style={{ width: 640 }} className="components-banner-demo">
             <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             /><br/>
             <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             /><br/>
             <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             /><br/>
             <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             />
         </div>
@@ -151,7 +151,7 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
+    <div style={{ width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
         <Banner
             fullMode={false}
             title="Title"

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner
@@ -104,21 +104,21 @@ function Demo() {
     const { Text } = Typography;
   
     return (
-        <div style={{width: 640 }} className="components-banner-demo">
+        <div style={{ width: 640 }} className="components-banner-demo">
             <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             /><br/>
             <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             /><br/>
             <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             /><br/>
             <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             />
         </div>
@@ -150,7 +150,7 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
+    <div style={{ width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
         <Banner
             fullMode={false}
             title="Title"

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 65
+order: 66
 category: Feedback
 title:  Notification
 subTitle: Notification
@@ -58,15 +58,15 @@ import { Notification, Button, ButtonGroup } from '@douyinfe/semi-ui';
     return (
         <>
             <ButtonGroup>
-                <Button onClick={() => Notification.info({...opts, Position: 'top'})}>top</Button>
-                <Button onClick={() => Notification.info({...opts, position: 'topLeft'})}>topLeft</Button>
+                <Button onClick={() => Notification.info({ ...opts, Position: 'top' })}>top</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'topLeft' })}>topLeft</Button>
                 <Button onClick={() => Notification.info(opts)}>topRight</Button>
             </ButtonGroup>
             <br/><br/>
             <ButtonGroup>
-                <Button onClick={() => Notification.info({...opts, position: 'bottom'})}>bottom</Button>
-                <Button onClick={() => Notification.info({...opts, position: 'bottomRight'})}>bottomRight</Button>
-                <Button onClick={() => Notification.info({...opts, position: 'bottomLeft'})}>bottomLeft</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'bottom' })}>bottom</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'bottomRight' })}>bottomRight</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'bottomLeft' })}>bottomLeft</Button>
             </ButtonGroup>
         </>
     );
@@ -92,16 +92,16 @@ import { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';
     return (
         <>
             <h5>Default Icon</h5>
-            <Button type='primary' onClick={()=>Notification.success(opts)} style={{margin: 4}}>
+            <Button type='primary' onClick={()=>Notification.success(opts)} style={{ margin: 4 }}>
                 Success
             </Button>
-            <Button onClick={() => Notification.info(opts)} style={{margin: 4}}>
+            <Button onClick={() => Notification.info(opts)} style={{ margin: 4 }}>
                 Info
             </Button>
-            <Button type="warning" onClick={()=>Notification.warning(opts)} style={{margin: 4}}>
+            <Button type="warning" onClick={()=>Notification.warning(opts)} style={{ margin: 4 }}>
                 Warning
             </Button>
-            <Button type="danger" onClick={()=>Notification.error(opts)} style={{margin: 4}}>
+            <Button type="danger" onClick={()=>Notification.error(opts)} style={{ margin: 4 }}>
                 Error
             </Button>
             <h5>Customized Icon</h5>
@@ -122,7 +122,7 @@ import { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';
             ></Button>
             <Button
                 icon={<IconVigoLogo />}
-                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} />  })}
+                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}
             ></Button>
         </>
     );
@@ -185,9 +185,9 @@ import { Notification, Button, Typography } from '@douyinfe/semi-ui';
         content: (
             <>
                 <div>Hi, Bytedance dance dance</div>
-                <div style={{marginTop: 8}}>
+                <div style={{ marginTop: 8 }}>
                     <Text link>More Info</Text>
-                    <Text link style={{marginLeft: 20}}>Show Later</Text>
+                    <Text link style={{ marginLeft: 20 }}>Show Later</Text>
                 </div>
             </>),
         duration: 3,

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 65
+order: 66
 category: 反馈类
 title: Notification 通知
 icon: doc-notification
@@ -123,7 +123,7 @@ import { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';
             ></Button>
             <Button
                 icon={<IconVigoLogo />}
-                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} />  })}
+                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}
             ></Button>
         </>
     );

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 66
+order: 67
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm
@@ -109,39 +109,81 @@ 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)
 
 ## API Reference
 
-| Properties         | Instructions                                                                                                                                                          | Type                       | Default             | Version           |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------- | ----------------- |
-| arrowPointAtCenter | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time                                             | boolean                    | false               | **0.34.0** |
-| cancelText         | Cancel button text                                                                                                                                                    | string                     | "Cancel"            |
-| cancelButtonProps  | Properties for cancel button                                                                                                                                          | object                     |                     | **0.29.0**        |
-| cancelType         | Cancel button type                                                                                                                                                    | string                     | "tertiary"          |
+| Properties         | Instructions                                                                                                                                                          | Type                     | Default             | Version           |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | ----------------- |
+| arrowPointAtCenter | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time                                             | boolean                  | false               | **0.34.0** |
+| cancelText         | Cancel button text                                                                                                                                                    | string                   | "Cancel"            |
+| cancelButtonProps  | Properties for cancel button                                                                                                                                          | object                   |                     | **0.29.0**        |
+| cancelType         | Cancel button type                                                                                                                                                    | string                   | "tertiary"          |
 | content            | Content displayed                                                                                                                                                     | string \| ReactNode        |                     |
-| defaultVisible     | Bubble box is displayed by default                                                                                                                                    | boolean                    |                     | **0.19.0**        |
-| disabled           | Click on the Pop confirmation box to see if the bubbles pop up.                                                                                                       | boolean                    | false               |
-| getPopupContainer  | Specify the parent DOM, and the pop-up layer will be rendered into the DOM. Customization needs to set `position: relative`                                                                                                       | Function():HTMLElement           | () => document.body |
-| icon               | Custom pop bubble Icon icon                                                                                                                                           |  ReactNode        | <IconAlertTriangle size="extra-large" />    |
-| motion             | Whether there is animation when the drop-down list appears/hidden. You can customize animation by passing in an object that conforms to the structure | boolean\|object | true |
-| position           | Directions, optional values: `top`, `topLeft`, `topRight`, `leftTop`, `leftBottom`, `rightTop`, `rightTop`, `rightBottom`, `bottomLeft`, `bottomRight`, `bottomRight` | string                     | "bottomLeft"        |
-| okText             | Confirm button text                                                                                                                                | string                           | "Confirm"              |
-| okType             | Confirm button type                                                                                                                                | string                           | "primary"           |
-| okButtonProps      | Confirm button props                                                                                                                            | object                           |                     | **0.29.0**        |
-| showArrow          | Whether to show arrow triangle                                                                                                                         | boolean                          | false               |                   |
-| stopPropagation    | Whether to prevent the click event on the bomb layer from bubbling                                                                                                                | boolean                          | true                | **0.34.0** |
-| position           | Popup layer position，Optional value：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                           | "bottomLeft"        |
+| defaultVisible     | Bubble box is displayed by default                                                                                                                                    | boolean                  |                     | **0.19.0**        |
+| disabled           | Click on the Pop confirmation box to see if the bubbles pop up.                                                                                                       | boolean                  | false               |
+| getPopupContainer  | Specify the parent DOM, and the pop-up layer will be rendered into the DOM. Customization needs to set `position: relative`                                                                                                       | Function():HTMLElement         | () => document.body |
+| icon               | Custom pop bubble Icon icon                                                                                                                                           |  ReactNode      | <IconAlertTriangle size="extra-large" />    |
+| motion             | Whether there is animation when the drop-down list appears/hidden. You can customize animation by passing in an object that conforms to the structure | boolean | true |
+| position           | Directions, optional values: `top`, `topLeft`, `topRight`, `leftTop`, `leftBottom`, `rightTop`, `rightTop`, `rightBottom`, `bottomLeft`, `bottomRight`, `bottomRight` | string                   | "bottomLeft"        |
+| okText             | Confirm button text                                                                                                                                | string                         | "Confirm"              |
+| okType             | Confirm button type                                                                                                                                | string                         | "primary"           |
+| okButtonProps      | Confirm button props                                                                                                                            | object                         |                     | **0.29.0**        |
+| showArrow          | Whether to show arrow triangle                                                                                                                         | boolean                        | false               |                   |
+| stopPropagation    | Whether to prevent the click event on the bomb layer from bubbling                                                                                                                | boolean                        | true                | **0.34.0** |
+| position           | Popup layer position，Optional value：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                         | "bottomLeft"        |
 | title              | Displayed title                                                                                                                                  | string\|ReactNode                |                     |
-| 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                |                     |
+| 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. 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**        |
+| 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
 <DesignToken/>
 

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 66
+order: 67
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm
@@ -108,37 +108,79 @@ 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)
 
 ## API 参考
 
-| 属性               | 说明                                                                                                                                        | 类型                             | 默认值              | 版本              |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | ----------------- |
-| arrowPointAtCenter | “小三角”是否指向元素中心，需要同时传入"showArrow=true"                                                                                      | boolean                          | false               | **0.34.0** |
-| cancelText         | 取消按钮文字                                                                                                                                | string                           | "取消"              |
-| cancelButtonProps  | 取消按钮的 props                                                                                                                            | object                           |                     | **0.29.0**        |
-| cancelType         | 取消按钮类型                                                                                                                                | string                           | "tertiary"          |
+| 属性               | 说明                                                                                                                                        | 类型                           | 默认值              | 版本              |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------- | ----------------- |
+| arrowPointAtCenter | “小三角”是否指向元素中心，需要同时传入"showArrow=true"                                                                                      | boolean                        | false               | **0.34.0** |
+| cancelText         | 取消按钮文字                                                                                                                                | string                         | "取消"              |
+| cancelButtonProps  | 取消按钮的 props                                                                                                                            | object                         |                     | **0.29.0**        |
+| cancelType         | 取消按钮类型                                                                                                                                | string                         | "tertiary"          |
 | content            | 显示的内容                                                                                                                                  | string\|ReactNode                |                     |
-| defaultVisible     | 气泡框默认是否展示                                                                                                                          | boolean                          |                     | **0.19.0**        |
-| disabled           | 点击 Popconfirm 子元素是否弹出气泡确认框                                                                                                    | boolean                          | false               |
-| getPopupContainer  | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义时容器需要设置 `position: relative`                                                                                                       | Function():HTMLElement           | () => document.body |
-| icon               | 自定义弹出气泡 Icon 图标                                                                                                                    | ReactNode                | <IconAlertTriangle size="extra-large" />    |
-| motion             | 下拉列表出现/隐藏时，是否有动画 | boolean\|object | true |
-| okText             | 确认按钮文字                                                                                                                                | string                           | "确认"              |
-| okType             | 确认按钮类型                                                                                                                                | string                           | "primary"           |
-| okButtonProps      | 确认按钮的 props                                                                                                                            | object                           |                     | **0.29.0**        |
-| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                           | "bottomLeft"        |
-| showArrow          | 是否显示箭头三角形                                                                                                                          | boolean                          | false               |                   |
-| stopPropagation    | 是否阻止弹层上的点击事件冒泡                                                                                                                | boolean                          | true                | **0.34.0** |
+| defaultVisible     | 气泡框默认是否展示                                                                                                                          | boolean                        |                     | **0.19.0**        |
+| disabled           | 点击 Popconfirm 子元素是否弹出气泡确认框                                                                                                    | boolean                        | false               |
+| getPopupContainer  | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义时容器需要设置 `position: relative`                                                                                                       | Function():HTMLElement         | () => document.body |
+| icon               | 自定义弹出气泡 Icon 图标                                                                                                                    | ReactNode              | <IconAlertTriangle size="extra-large" />    |
+| motion             | 下拉列表出现/隐藏时，是否有动画 | boolean | true |
+| okText             | 确认按钮文字                                                                                                                                | string                         | "确认"              |
+| okType             | 确认按钮类型                                                                                                                                | string                         | "primary"           |
+| okButtonProps      | 确认按钮的 props                                                                                                                            | object                         |                     | **0.29.0**        |
+| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                         | "bottomLeft"        |
+| showArrow          | 是否显示箭头三角形                                                                                                                          | boolean                        | false               |                   |
+| stopPropagation    | 是否阻止弹层上的点击事件冒泡                                                                                                                | boolean                        | true                | **0.34.0** |
 | title              | 显示的标题                                                                                                                                  | string\|ReactNode                |                     |
-| trigger            | 触发展示的时机，可选值：hover / focus / click / custom                                                                                         | string                |   'click'                  |
-| visible            | 气泡框是否展示的受控属性                                                                                                                    | boolean                          |                     | **0.19.0**        |
-| zIndex             | 浮层 z-index 值                                                                                                                             | number                           | 1030                |
-| onConfirm          | 点击确认按钮回调                                                                                                                            | Function(e)                      |                     |
-| onCancel           | 点击取消按钮回调                                                                                                                            | Function(e)                      |                     |
-| onClickOutSide     | 当弹出层处于展示状态，点击非Children、非浮层内部区域时的回调                                                                                      | Function(e)                      |  **2.1.0**      |
+| trigger            | 触发展示的时机，可选值：hover / focus / click / custom                                                                                         | string              |   'click'                  |
+| visible            | 气泡框是否展示的受控属性                                                                                                                    | boolean                        |                     | **0.19.0**        |
+| zIndex             | 浮层 z-index 值                                                                                                                             | number                         | 1030                |
+| 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/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 67
+order: 68
 category: Feedback
 title: Progress
 subTitle: Progress
@@ -241,6 +241,150 @@ import { Progress } from '@douyinfe/semi-ui';
 );
 ```
 
+### Customise the progress bar color
+
+The color of a specific `percent` can be customised by setting the `stroke` property
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Progress, Button } from '@douyinfe/semi-ui';
+import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+
+() => {
+    const [percent, setPercent] = useState(10);
+    const strokeArr = [
+        { percent: 20, color: 'red' },
+        { percent: 40, color: 'orange-9' },
+        { percent: 60, color: 'light-green-8' },
+        { percent: 80, color: 'hsla(125, 50%, 46% / 1)' }
+    ];
+    return (
+        <>
+            <div>
+                <Progress
+                    percent={percent}
+                    stroke={strokeArr}
+                    showInfo
+                    type="circle"
+                    width={100}
+                    aria-label="disk usage"
+                />
+                <Progress
+                    percent={percent}
+                    stroke={strokeArr}
+                    showInfo
+                    style={{ margin: '20px 0 10px' }}
+                    aria-label="disk usage"
+                />
+            </div>
+            <Button
+                icon={<IconChevronLeft />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent - 10);
+                }}
+                disabled={percent === 0}
+            />
+            <Button
+                icon={<IconChevronRight />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent + 10);
+                }}
+                disabled={percent === 100}
+            />
+        </>
+    );
+};
+```
+
+### Auto-completion of colour intervals
+
+The gradient can be generated by setting the `strokeGradient` property to `true`, automatically fill the colour interval.
+
+```jsx live=true
+import React, { useEffect, useState } from 'react';
+import { Space, Progress, Button } from '@douyinfe/semi-ui';
+import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+
+() => {
+    const [percent, setPercent] = useState(65);
+    const [percentInterval, setPercentInterval] = useState(0);
+    useEffect(() => {
+        setTimeout(
+            () => {
+                setPercentInterval(percentInterval > 100 ? 0 : percentInterval + 3);
+            },
+            percentInterval === 0 || percentInterval > 100 ? 1200 : 290 - (percentInterval % 50) * 3
+        );
+    }, [percentInterval]);
+    const strokeArr = [
+        { percent: 0, color: 'rgb(249, 57, 32)' },
+        { percent: 50, color: '#46259E' },
+        { percent: 100, color: 'hsla(125, 50%, 46% / 1)' },
+    ];
+    const strokeArrReverse = [
+        { percent: 0, color: 'hsla(125, 50%, 46% / 1)' },
+        { percent: 50, color: '#46259E' },
+        { percent: 100, color: 'rgb(249, 57, 32)' },
+    ];
+    return (
+        <>
+            <Space spacing={20}>
+                <div>
+                    <Progress
+                        percent={percentInterval}
+                        stroke={strokeArr}
+                        strokeGradient={true}
+                        showInfo
+                        type="circle"
+                        width={100}
+                        aria-label="file download speed"
+                    />
+                </div>
+                <div>
+                    <Progress
+                        percent={percentInterval}
+                        stroke={strokeArrReverse}
+                        strokeGradient={true}
+                        showInfo
+                        type="circle"
+                        width={100}
+                        aria-label="file download speed"
+                    />
+                </div>
+            </Space>
+            <div style={{ width: '100%', margin: '20px 0 10px' }}>
+                <Progress
+                    percent={percent}
+                    stroke={strokeArr}
+                    strokeGradient={true}
+                    showInfo
+                    size="large"
+                    aria-label="file download speed"
+                />
+            </div>
+            <Button
+                icon={<IconChevronLeft />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent - 5);
+                }}
+                disabled={percent === 0}
+            />
+            <Button
+                icon={<IconChevronRight />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent + 5);
+                }}
+                disabled={percent === 100}
+            />
+        </>
+    );
+};
+```
+
 ## API Reference
 
 | PROPERTIES | Instructions | Type | Default |
@@ -256,7 +400,8 @@ import { Progress } from '@douyinfe/semi-ui';
 | percent | percentage of progress | number |  |
 | showInfo | Whether to display the middle text in the circular progress bar, and whether to display the text on the right side of the bar-shaped progress bar | boolean | false |
 | size | size, optional `default`, `small` (only type=circle is effective), `large` (only type=line is effective) | string | 'default' |
-| stroke | Fill color of progress bar | string | 'var(--semi-color-success)' |
+| stroke | Fill color of progress bar, When of type `Array<{percent:number; color:string }>`, the `color` parameter supports the color types: `'Hex'` &#124; `'Hsl'` &#124; `'Hsla'` &#124; `'Rgb'` &#124; `'Rgba'` &#124; `'Semi Design Tokens'` | string &#124; Array<{percent:number; color:string }> | 'var(--semi-color-success)' |
+| strokeGradient | Whether to automatically generate gradient colors to fill color intervals, requires `stroke` to set at least one color interval | boolean | false |
 | strokeLinecap | round corner `round`/square corner `square` (only effective in type='circle' mode) | string | 'round' |
 | strokeWidth | When type is `line`, this property controls the height of the progress bar; when type is `circle`, this property controls the width of the progress bar | number | 4 |
 | style | style | CSSProperties |  |

content/feedback/progress/index.md

@@ -1,12 +1,13 @@
 ---
 localeCode: zh-CN
-order: 67
+order: 68
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress
 width: 60%
 brief: 用于展示用户操作的当前进度和状态，一般在操作耗时较长时使用。也可用来表示任务/对象的完成度
 ---
+
 ## 代码演示
 
 ### 如何引入
@@ -261,6 +262,150 @@ import { Progress } from '@douyinfe/semi-ui';
 );
 ```
 
+### 自定义进度条颜色
+
+可通过设置 `stroke` 属性，自定义具体 `percent` 的颜色
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Progress, Button } from '@douyinfe/semi-ui';
+import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+
+() => {
+    const [percent, setPercent] = useState(10);
+    const strokeArr = [
+        { percent: 20, color: 'red' },
+        { percent: 40, color: 'orange-9' },
+        { percent: 60, color: 'light-green-8' },
+        { percent: 80, color: 'hsla(125, 50%, 46% / 1)' }
+    ];
+    return (
+        <>
+            <div>
+                <Progress
+                    percent={percent}
+                    stroke={strokeArr}
+                    showInfo
+                    type="circle"
+                    width={100}
+                    aria-label="disk usage"
+                />
+                <Progress
+                    percent={percent}
+                    stroke={strokeArr}
+                    showInfo
+                    style={{ margin: '20px 0 10px' }}
+                    aria-label="disk usage"
+                />
+            </div>
+            <Button
+                icon={<IconChevronLeft />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent - 10);
+                }}
+                disabled={percent === 0}
+            />
+            <Button
+                icon={<IconChevronRight />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent + 10);
+                }}
+                disabled={percent === 100}
+            />
+        </>
+    );
+};
+```
+
+### 自动补齐颜色区间
+
+可通过设置 `strokeGradient` 属性，属性为 `true` 时自动补齐颜色区间，生成渐变色
+
+```jsx live=true
+import React, { useEffect, useState } from 'react';
+import { Space, Progress, Button } from '@douyinfe/semi-ui';
+import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+
+() => {
+    const [percent, setPercent] = useState(65);
+    const [percentInterval, setPercentInterval] = useState(0);
+    useEffect(() => {
+        setTimeout(
+            () => {
+                setPercentInterval(percentInterval > 100 ? 0 : percentInterval + 3);
+            },
+            percentInterval === 0 || percentInterval > 100 ? 1200 : 290 - (percentInterval % 50) * 3
+        );
+    }, [percentInterval]);
+    const strokeArr = [
+        { percent: 0, color: 'rgb(249, 57, 32)' },
+        { percent: 50, color: '#46259E' },
+        { percent: 100, color: 'hsla(125, 50%, 46% / 1)' },
+    ];
+    const strokeArrReverse = [
+        { percent: 0, color: 'hsla(125, 50%, 46% / 1)' },
+        { percent: 50, color: '#46259E' },
+        { percent: 100, color: 'rgb(249, 57, 32)' },
+    ];
+    return (
+        <>
+            <Space spacing={20}>
+                <div>
+                    <Progress
+                        percent={percentInterval}
+                        stroke={strokeArr}
+                        strokeGradient={true}
+                        showInfo
+                        type="circle"
+                        width={100}
+                        aria-label="file download speed"
+                    />
+                </div>
+                <div>
+                    <Progress
+                        percent={percentInterval}
+                        stroke={strokeArrReverse}
+                        strokeGradient={true}
+                        showInfo
+                        type="circle"
+                        width={100}
+                        aria-label="file download speed"
+                    />
+                </div>
+            </Space>
+            <div style={{ width: '100%', margin: '20px 0 10px' }}>
+                <Progress
+                    percent={percent}
+                    stroke={strokeArr}
+                    strokeGradient={true}
+                    showInfo
+                    size="large"
+                    aria-label="file download speed"
+                />
+            </div>
+            <Button
+                icon={<IconChevronLeft />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent - 5);
+                }}
+                disabled={percent === 0}
+            />
+            <Button
+                icon={<IconChevronRight />}
+                theme="light"
+                onClick={() => {
+                    setPercent(percent + 5);
+                }}
+                disabled={percent === 100}
+            />
+        </>
+    );
+};
+```
+
 ## API 参考
 
 | 属性 | 说明 | 类型 | 默认值 |
@@ -276,7 +421,8 @@ import { Progress } from '@douyinfe/semi-ui';
 | percent | 进度百分比 | number |  |
 | showInfo | 环形进度条是否显示中间文本，条状进度条后右侧是否显示文本 | boolean | false |
 | size | 尺寸,可选`default`、`small`(仅 type=circle 生效)、`large`(仅 type=line 生效) | string | 'default' |
-| stroke | 进度条填充色 | string | 'var(--semi-color-success)' |
+| stroke | 进度条填充色，类型为 `Array<{percent:number; color:string }>` 时，`color` 参数支持颜色类型：`'Hex'` &#124; `'Hsl'` &#124; `'Hsla'` &#124; `'Rgb'` &#124; `'Rgba'` &#124; `'Semi Design Tokens'` | string &#124; Array<{percent:number; color:string }> | 'var(--semi-color-success)' |
+| strokeGradient | 是否自动生成渐变色补齐区间颜色，需要 `stroke` 设置至少一个颜色区间 | boolean | false |
 | strokeLinecap | 圆角`round`/方角`square`(仅在 type='circle'模式下生效) | string | 'round' |
 | strokeWidth | type 为`line`时，该属性控制进度条高度; type 为`circle`时，该属性控制进度条宽度 | number | 4 |
 | style | 样式 | CSSProperties |  |
@@ -303,12 +449,12 @@ import { Progress } from '@douyinfe/semi-ui';
 <Progress aria-label='Percent of file downloaded' percent={80} />
 
 // usage of aria-valuetext
-<Progress aria-label='Percent of disk usage' percent={80} aria-valuetext="Step 2: Copying files... "/> 
+<Progress aria-label='Percent of disk usage' percent={80} aria-valuetext="Step 2: Copying files... "/>
 ```
 
-
 ## 文案规范
-- 如果进度条过程复杂，或者有很长的等待时间，可以使用帮助文本来做说明。这样可以让用户知道正在发生的进度进展
+
+-   如果进度条过程复杂，或者有很长的等待时间，可以使用帮助文本来做说明。这样可以让用户知道正在发生的进度进展
 
 ## 设计变量
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Feedback
 title: Skeleton
 subTitle: Skeleton
@@ -10,7 +10,7 @@ brief: A placeholder preview of content before the data loaded.
 
 ## Overview
 
--   `Avatar`: Avatar placeholder, by default uses Avatar medium sizing: `width: 48px`, `height: 48px`. Supports other sizes after v1.0.
+-   `Avatar`: Avatar placeholder, by default uses Avatar medium sizing: `width: 48px`, `height: 48px`. Supports Avatar's size (after v1.0) and shape attributes (after v2.20)
 -   `Image`: Image placeholder, default size: `width: 100%`, `height: 100%`.
 -   `Title`: Title placeholder, default size: `width: 100%`, `height: 24px`.
 -   `Paragraph`: Content part placeholder, default size: `width: 100%`, `height: 16px`, `margin-bottom: 10px`.
@@ -386,13 +386,14 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 ### Skeleton.Avatar
 
-> `Skeleton.Image`,`Skeleton.Title`，`Skeleton.Button` have same APIs with `Skeleton.Avatar`.
+> `Skeleton.Image`,`Skeleton.Title`，`Skeleton.Button` have same APIs with `Skeleton.Avatar`. `shape` only supported in `Skeleton.Avatar`  
 
 | Property | Instructions | type | Default |
 | --- | --- | --- | --- |
 | class Name | Class name | string | - |
 | size | Size of the avatar, one of `extra-extra-small`, `extra-small`, `small`, `medium`, `large`, `extra-large`, **v>=1.0** | string | `medium` |
 | style | Inline style | CSSProperties | - |
+| shape | Shape of the avatar, one of `circle`, `square` | string | `circle` |
 
 ### Skeleton.Paragraph
 
@@ -404,7 +405,7 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 ## Content Guidelines
 
-- Unchanged fixed content directly displays fixed content, and variable content is displayed using skeleton screen
+-   Unchanged fixed content directly displays fixed content, and variable content is displayed using skeleton screen
 
 ## Design Tokens
 

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton
@@ -9,7 +9,7 @@ brief: 在需要等待加载内容的位置提供的占位组件。
 
 ## 概述
 
--   `Avatar`：占位头像，默认为圆形，默认尺寸：Avatar medium: `width: 48px`，`height: 48px`。支持 Avatar 的 size 属性 （**v>=1.0**)
+-   `Avatar`：占位头像，默认为圆形，默认尺寸：Avatar medium: `width: 48px`，`height: 48px`。支持 Avatar 的 size（v1.0后支持)、shape 属性 (v2.20后支持)
 -   `Image`：占位图像，默认尺寸：`width: 100%`，`height: 100%`。
 -   `Title`：占位标题，默认尺寸：`width: 100%`， `height: 24px`。
 -   `Paragraph`：占位内容部分，默认尺寸：`width: 100%`，`height: 16px`，`margin-bottom: 10px`。
@@ -364,37 +364,36 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 ### Skeleton
 
-| 属性        | 说明                                       | 类型       | 默认值 |
-| ----------- | ------------------------------------------ | ---------- | ------ |
-| active      | 是否展示动画效果                           | boolean    | false  |
-| className   | 类名                                       | string     | -      |
-| loading     | 为 true 时，显示占位元素。反之则显示子组件 | boolean    | true   |
-| placeholder | 加载等待时的占位元素                       | ReactNode | -      |
-| style       | 样式                                       | CSSProperties     | -      |
+| 属性        | 说明                                       | 类型          | 默认值 |
+| ----------- | ------------------------------------------ | ------------- | ------ |
+| active      | 是否展示动画效果                           | boolean       | false  |
+| className   | 类名                                       | string        | -      |
+| loading     | 为 true 时，显示占位元素。反之则显示子组件 | boolean       | true   |
+| placeholder | 加载等待时的占位元素                       | ReactNode     | -      |
+| style       | 样式                                       | CSSProperties | -      |
 
 ### Skeleton.Avatar
 
-> `Skeleton.Image`，`Skeleton.Title`，`Skeleton.Button` API 与 `Skeleton.Avatar` 相同
+> `Skeleton.Image`，`Skeleton.Title`，`Skeleton.Button` 大部分API 与 `Skeleton.Avatar` 相同。其中 shape 仅 `Skeleton.Avatar支持`
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | className | 类名 | string | - |
 | size | 设置头像的大小，支持 `extra-extra-small`, `extra-small`、`small`、`medium`、`large`、`extra-large` **v>=1.0** | string | `medium` |
 | style | 样式 | CSSProperties | - |
+| shape | 指定头像的形状，支持 `circle`、`square` | string | `circle` |
 
 ### Skeleton.Paragraph
 
-| 属性      | 说明                 | 类型   | 默认值 |
-| --------- | -------------------- | ------ | ------ |
-| className | 类名                 | string | -      |
-| rows      | 设置段落占位图的行数 | number | 4      |
+| 属性      | 说明                 | 类型          | 默认值 |
+| --------- | -------------------- | ------------- | ------ |
+| className | 类名                 | string        | -      |
+| rows      | 设置段落占位图的行数 | number        | 4      |
 | style     | 样式                 | CSSProperties | -      |
 
 ## 文案规范
-- 不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示
-
-
 
+-   不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示
 
 ## 设计变量
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 69
+order: 70
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 69
+order: 70
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 70
+order: 71
 category: Feedback
 title: Toast
 subTitle: Toast
@@ -68,7 +68,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -105,7 +105,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -237,6 +237,33 @@ function Demo() {
 render(Demo);
 ```
 
+### Update Toast Content
+
+Use unique Toast `id` to update toast content.
+
+```jsx live=true noInline=true hideInDSM
+import React, { useState } from 'react';
+import { Toast, Button } from '@douyinfe/semi-ui';
+
+function Demo() {
+    function show() {
+        const id = 'toastid';
+        Toast.info({ content: 'Update Content By Id', id });
+        setTimeout(() => {
+            Toast.success({ content: 'Id By Content Update', id });
+        }, 1000);
+    }
+
+    return (
+        <Button type="primary" onClick={show}>
+            Update Content By Id
+        </Button>
+    );
+}
+
+render(Demo);
+```
+
 ### useToast Hooks
 
 You could use `Toast.useToast` to create a `contextHolder` that could access context. Created toast will be inserted to where contextHolder is placed.

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 70
+order: 71
 category: 反馈类
 title: Toast 提示
 icon: doc-toast
@@ -69,7 +69,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -106,7 +106,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -238,6 +238,33 @@ function Demo() {
 render(Demo);
 ```
 
+### 更新消息内容
+
+可以通过唯一的 `id` 来更新内容。
+
+```jsx live=true noInline=true hideInDSM
+import React, { useState } from 'react';
+import { Toast, Button } from '@douyinfe/semi-ui';
+
+function Demo() {
+    function show() {
+        const id = 'toastid';
+        Toast.info({ content: 'Update Content By Id', id });
+        setTimeout(() => {
+            Toast.success({ content: 'Id By Content Update', id });
+        }, 1000);
+    }
+
+    return (
+        <Button type="primary" onClick={show}>
+            Update Content By Id
+        </Button>
+    );
+}
+
+render(Demo);
+```
+
 ### Hooks 用法
 
 通过 Toast.useToast 创建支持读取 context 的 contextHolder。此时的 toast 会渲染在 contextHolder 所在的节点处。
@@ -438,8 +465,8 @@ HookToast ( >= 1.2.0 )：
   - 不使用类似于「已读」类的动作，例如 OK, Got it, Dismiss, Cancel
 
 
-| ✅ 推荐用法 | ❌ 不推荐用法 |   
-| --- | --- | 
+| ✅ 推荐用法 | ❌ 不推荐用法 |
+| --- | --- |
 |  <ToastCard type='error' content={<div>Ticket transfer failed <span style={{ color: 'var(--semi-color-primary)', marginLeft: 4, cursor: 'pointer' }}>Retry</span> </div>} /> |  <ToastCard type='error' content={<div>Ticket transfer failed <span style={{ color: 'var(--semi-color-primary)', marginLeft: 4, cursor: 'pointer' }}>Dismiss</span> </div>} /> |
 
 ## 设计变量

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

@@ -371,7 +371,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | getPopupContainer | Specify the parent DOM, the floating layer of the drop-down list will be rendered into the DOM, and the customization needs to set `position: relative` | () => HTMLElement | () => document.body |
 | loading | Whether the drop-down list shows loading animation | boolean | false |
 | maxHeight | The maximum height of the drop-down list | number\|string | 300 |
-| motion | Is there an animation when the drop-down list appears/hidden | boolean\|object | true |
+| motion | Is there an animation when the drop-down list appears/hidden | boolean | true |
 | onSelectWithObject | When clicking on the candidate, whether to add other attributes of the selected item option as callback parameters. When set to true, the input parameter type of onSelect will change from `string` to object: {value, label, ...rest} | boolean | false | 1.23.0|
 | placeholder | Input box prompt | string | |
 | position | The display position of the drop-down menu, the optional values are the same as the tooltip component | string | 'bottomLeft' |
@@ -388,6 +388,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | onBlur | Callback when the focus is lost | Function(event) | |
 | onChange | Input box change / change when the candidate is selected | Function(value:string\|number) | | 1.23.0|
 | onFocus | The callback when the focus is obtained | Function(event) | |
+| onKeyDown | keydown callback | (e: React.KeyboardEvent) => void | | 2.21.0 |
 | onSearch | Callback when input changes | Function(value: string) | |
 | onSelect | Callback when the drop-down menu candidate is selected | Function(item: string\|number\|Item) | |
 

content/input/autocomplete/index.md

@@ -386,7 +386,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | getPopupContainer | 指定父级 DOM，下拉列表浮层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | () => HTMLElement | () => document.body |
 | loading | 下拉列表是否展示加载动画 | boolean | false |
 | maxHeight | 下拉列表的最大高度 | number\|string | 300 |
-| motion | 下拉列表出现/隐藏时，是否有动画 | boolean\|object | true |
+| motion | 下拉列表出现/隐藏时，是否有动画 | boolean | true |
 | onSelectWithObject | 点击候选项时，是否将选中项 option 的其他属性也作为回调入参。设为 true 时，onSelect 的入参类型会从 `string` 变为 object: { value, label, ...rest }| boolean | false |1.23.0 |
 | placeholder | 输入框提示 | string | |
 | position | 下拉菜单的显示位置，可选值同 tooltip 组件 | string | 'bottomLeft' |
@@ -403,6 +403,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | onBlur | 失去焦点时的回调 | Function(event) | |
 | onChange | 输入框变化/候选项选中时变化 | Function(value:string\|number) | |1.23.0 |
 | onFocus | 获得焦点时的回调 | Function(event) | |
+| onKeyDown | keydown 回调 | (e: React.KeyboardEvent) => void | | 2.21.0 |
 | onSearch | 输入变化时的回调 | Function(value: string) | |
 | onSelect | 下拉菜单候选项被选中时的回调 | Function(item: string\|number\|Item) | |
 

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

@@ -100,7 +100,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -133,7 +133,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -166,7 +166,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -198,8 +198,8 @@ import { Button } from '@douyinfe/semi-ui';
 function ButtonDemo() {
     return (
         <div>
-            <Button size='large' style={{ marginRight:8 }}>large</Button>
-            <Button size='default' style={{ marginRight:8 }}>default</Button>
+            <Button size='large' style={{ marginRight: 8 }}>large</Button>
+            <Button size='default' style={{ marginRight: 8 }}>default</Button>
             <Button size='small'>small</Button>
         </div>
     );
@@ -338,7 +338,7 @@ function ButtonDemo() {
             <hr/>
             <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>Save</Button>
             <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>Delete</Button>
-            <div style={{ width: 200, display: 'inline-block'}}>
+            <div style={{ width: 200, display: 'inline-block' }}>
                 <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>Revoke</Button>
             </div>
         </div>
@@ -447,36 +447,36 @@ function SplitButtonDemo(){
         { node: 'item', name: 'Delete', type: 'danger' },
     ];
 
-    const [btnVisible,setBtnVisible] = useState({
-        1:false,
-        2:false,
-        3:false
+    const [btnVisible, setBtnVisible] = useState({
+        1: false,
+        2: false,
+        3: false
     });
 
-    const handleVisibleChange = (key,visible)=>{
-        newBtnVisible = {...btnVisible};
+    const handleVisibleChange = (key, visible)=>{
+        newBtnVisible = { ...btnVisible };
         newBtnVisible[key] = visible;
         setBtnVisible(newBtnVisible);
     };
 
     return (
         <div>
-            <SplitButtonGroup style={{marginRight:10}} aria-label="Project operate button group">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="Project operate button group">
                 <Button theme="solid" type="primary">SplitButton</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[1]?{ background: 'var(--semi-color-primary-hover)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{marginRight:10}} aria-label="Project operate button group">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="Project operate button group">
                 <Button theme="light" type="primary">SplitButton</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[2]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
             <SplitButtonGroup aria-label="Project operate button group">
-                <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:null} theme="borderless" type="primary">SplitButton</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-0)' }:null} theme="borderless" type="primary">SplitButton</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>
@@ -508,23 +508,24 @@ function SplitButtonDemo(){
 | onMouseEnter             | Mouse Enter                                                                                                   | Function(MouseEvent)                        |           |
 | onMouseLeave             | Mouse Leave                                                                                                   | Function(MouseEvent)                        |           |
 
-
 ### ButtonGroup
 
-| Properties | Instructions                                                                            | Type    | Default   |
-| ---------- | --------------------------------------------------------------------------------------- | ------- | --------- |
-| aria-label          | Label of the button group                                                                                      | string                            | -    |
-| disabled   | Disabled status                                                                         | boolean | false     |
-| size       | Button size, optional value: `"large"`,`"default"`,`"small"`                            | string  | "default" |
+| Properties | Instructions                | Type    | Default   | Version |
+| ---------- | ----------------------------| ------- | --------- |---------|
+| aria-label | Label of the button group   | string  | - | |
+| className  | Custom class name           | string   | - | |
+| disabled   | Disabled status             | boolean | false | |
+| size       | Button size, optional value: `"large"`,`"default"`,`"small"` | string  | "default" |
+| style      | Custom style                | CSSProperties   | - | 2.20.0 |
+| theme      | Button theme, optional values: `"solid"` (with background color), `"borderless"` (without background color), `"light"` (light background color) | string | "light"  | |
 | type       | Type, optional values: `"primary"`,`"secondary"`, `"tertiary"`, `"warning"`, `"danger"` | string  | "primary" |
-| className     | Custom class name                                  | string   |        |
 
 ### SplitButtonGroup **V1.12.0**
-| Properties   | Instructions                                                            | Type      | Default     |
-| -----------  | --------------------------------------------------------------  | -------- | --------- |
-| aria-label          | Label of the button group                                                                                       | string                            | -    |
-| style     | Custom style                                  | CSSProperties   |        |
-| className     | Custom class name                                  | string   |        |
+| Properties   | Instructions                     | Type     | Default   |
+| -----------  | ---------------------------------| -------- | --------- |
+| aria-label   | Label of the button group        | string   | -    |
+| className    | Custom class name                | string   | - |
+| style        | Custom style                     | CSSProperties | -  |
 
 ## Accessibility
 

content/input/button/index.md

@@ -158,8 +158,8 @@ import { Button } from '@douyinfe/semi-ui';
 function ButtonDemo() {
     return (
         <div>
-            <Button size='large' style={{ marginRight:8 }}>大尺寸</Button>
-            <Button size='default' style={{ marginRight:8 }}>默认尺寸</Button>
+            <Button size='large' style={{ marginRight: 8 }}>大尺寸</Button>
+            <Button size='default' style={{ marginRight: 8 }}>默认尺寸</Button>
             <Button size='small'>小尺寸</Button>
         </div>
     );
@@ -298,7 +298,7 @@ function ButtonDemo() {
             <hr/>
             <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>保存</Button>
             <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>删除</Button>
-            <div style={{ width: 200, display: 'inline-block'}}>
+            <div style={{ width: 200, display: 'inline-block' }}>
                 <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>撤销</Button>
             </div>
         </div>
@@ -406,13 +406,13 @@ function SplitButtonDemo(){
         { node: 'item', name: '删除项目', type: 'danger' },
     ];
 
-    const [btnVisible,setBtnVisible] = useState({
-        1:false,
-        2:false,
-        3:false
+    const [btnVisible, setBtnVisible] = useState({
+        1: false,
+        2: false,
+        3: false
     });
 
-    const handleVisibleChange = (key,visible)=>{
+    const handleVisibleChange = (key, visible)=>{
         newBtnVisible = { ...btnVisible };
         newBtnVisible[key] = visible;
         setBtnVisible(newBtnVisible);
@@ -420,22 +420,22 @@ function SplitButtonDemo(){
 
     return (
         <div>
-            <SplitButtonGroup style={{ marginRight:10 }} aria-label="项目操作按钮组">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="项目操作按钮组">
                 <Button theme="solid" type="primary">分裂按钮</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[1] ? { background:'var(--semi-color-primary-hover)',padding:'8px 4px' } : { padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[1] ? { background: 'var(--semi-color-primary-hover)', padding: '8px 4px' } : { padding: '8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{marginRight:10}} aria-label="项目操作按钮组">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="项目操作按钮组">
                 <Button theme="light" type="primary">分裂按钮</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[2]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
             <SplitButtonGroup aria-label="项目操作按钮组">
-                <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:{}} theme="borderless" type="primary">分裂按钮</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-0)' }:{}} theme="borderless" type="primary">分裂按钮</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>
@@ -470,28 +470,29 @@ function SplitButtonDemo(){
 
 ### ButtonGroup
 
-| 属性     | 说明                                                                   | 类型    | 默认值    |
-| -------- | ---------------------------------------------------------------------- | ------- | --------- |
-| aria-label          | 按钮组的标签                                                                                       | string                            | -    |
-| disabled | 禁用状态                                                               | boolean | false     |
-| size     | 按钮大小，可选值：`large`、`default`、`small`                          | string  | "default" |
-| theme               | 按钮主题，可选值：`solid`（有背景色）、 `borderless`（无背景色）、 `light`（浅背景色）                     | string                          | "light"   |
-| type     | 类型，可选值：`primary`、`secondary`、`tertiary`、`warning`、 `danger` | string  | "primary" |
-| className     | 自定义类名                               | string   |         |
+| 属性     | 说明          | 类型    | 默认值      | 版本 |
+| -------- | -------------| ------- | --------- |---- |
+| aria-label | 按钮组的标签 | string  | - | |
+| className  | 自定义类名   | string  | - | |
+| disabled   | 禁用状态     | boolean | false | |
+| size       | 按钮大小，可选值：`large`、`default`、`small` | string  | "default" | |
+| style      | 自定义样式   | CSSProperties   | - | 2.20.0 |
+| theme      | 按钮主题，可选值：`solid`（有背景色）、 `borderless`（无背景色）、 `light`（浅背景色） | string | "light"   | |
+| type     | 类型，可选值：`primary`、`secondary`、`tertiary`、`warning`、 `danger` | string  | "primary" | |
 
 ### SplitButtonGroup **V1.12.0新增**
-| 属性          | 说明                                                            | 类型      | 默认值     |
-| -----------  | --------------------------------------------------------------  | -------- | --------- |
-| aria-label          | 分裂按钮组的标签                                                                                       | string                            | -    |
-| style     | 自定义样式                               | CSSProperties   |         |
-| className     | 自定义类名                               | string   |         |
+| 属性          | 说明                 | 类型      | 默认值     |
+| -----------  | ---------------------| -------- | --------- |
+| aria-label   | 分裂按钮组的标签        | string   | - |
+| className    | 自定义类名             | string   | - |
+| style        | 自定义样式             | CSSProperties   | - |
 
 ## Accessibility
 
 ### ARIA
 
 - `aria-label` 用于表示按钮的作用，对于图标按钮，我们推荐使用此属性
-- `aria-disabled` 与 disabled 属性同步，表示按钮禁用 
+- `aria-disabled` 与 disabled 属性同步，表示按钮禁用
 
 ### 键盘和焦点
 

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

@@ -126,7 +126,7 @@ import { Cascader } from '@douyinfe/semi-ui';
         }];
     return (
         <Cascader
-            defaultValue= {['impressionism','visualArts','Monet']}
+            defaultValue= {['impressionism', 'visualArts', 'Monet']}
             style={{ width: 400 }}
             treeData={treeData}
             placeholder="Please select"
@@ -221,11 +221,11 @@ class Demo extends React.Component {
     constructor() {
         super();
         this.state = {
-            value: ['impressionism','visualArts','Monet']
+            value: ['impressionism', 'visualArts', 'Monet']
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -653,7 +653,7 @@ import { Cascader, Tag, Typography } from '@douyinfe/semi-ui';
                 placeholder="Please select"
                 displayRender={(item, idx) => (
                     <Tag
-                        style={{marginRight: 4}}
+                        style={{ marginRight: 4 }}
                         color='white'
                         key={`${idx}-${item.data.label}`}
                     >
@@ -1013,7 +1013,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -1078,7 +1078,7 @@ import React, { useState } from 'react';
 import { Cascader } from '@douyinfe/semi-ui';
 
 () => {
-    const [value, setValue] = useState(['impressionism','visualArts']);
+    const [value, setValue] = useState(['impressionism', 'visualArts']);
     const onChange = value => {
         setValue(value);
     };
@@ -1146,7 +1146,7 @@ import React, { useState } from 'react';
 import { Cascader } from '@douyinfe/semi-ui';
 
 () => {
-    const [value, setValue] = useState(['impressionism','visualArts']);
+    const [value, setValue] = useState(['impressionism', 'visualArts']);
     const onChange = value => {
         setValue(value);
     };
@@ -1519,51 +1519,51 @@ function Demo() {
 
 ### Cascader
 
-| Properties         | Instructions                                                                                                                 | type                                                                 | Default                         | version |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------- | ------- |
-| arrowIcon     | Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon                                                                                   | ReactNode                                                              |                            | 1.15.0       |
+| Properties         | Instructions                                                                                                                 | type                                                               | Default                         | version |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------- | ------- |
+| arrowIcon     | Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon                                                                                   | ReactNode                                                            |                            | 1.15.0       |
 | autoAdjustOverflow | Whether to automatically adjust the expansion direction of the dropdown for automatic adjustment of the expansion direction during edge occlusion | boolean | true | - |
 | autoMergeValue | Auto merge value. Specifically, after opening, when a parent node is selected, the value will not include the descendants of the node. Does not support dynamic switching | boolean | true |  1.28.0 |
 | bottomSlot | bottom slot | ReactNode | - |  1.27.0 |
-| changeOnSelect     | Toggle whether non-leaf nodes are selectable                                                                                   | boolean                                                              | false                           | -       |
-| className          | ClassName                                                                                                                    | string                                                               | -                               | -       |
-| defaultOpen       | Set whether to open the dropDown by default              | boolean   | false                                | -      |
+| changeOnSelect     | Toggle whether non-leaf nodes are selectable                                                                                   | boolean                                                            | false                           | -       |
+| className          | ClassName                                                                                                                    | string                                                             | -                               | -       |
+| defaultOpen       | Set whether to open the dropDown by default              | boolean | false                                | -      |
 | defaultValue       | Default selected value      | string\|number\|TreeNode\|(string\|number\|TreeNode)[]                                                   | -                               | -       |
-| disabled           | Makes the element disabled                                                                                                   | boolean                                                              | false                           | -       |
-| displayProp        | Set the attribute value displayed by the backfill option displayed                                                                                             | string                                                               | `label`                         | -       |
+| disabled           | Makes the element disabled                                                                                                   | boolean                                                            | false                           | -       |
+| displayProp        | Set the attribute value displayed by the backfill option displayed                                                                                             | string                                                             | `label`                         | -       |
 | displayRender      | Set the backfill format value                                                                                 | (selected: string[] \| Entity, idx?: number) => ReactNode                                            | selected => selected.join ('/') | -       |
-| dropdownClassName  | ClassName property for the drop-down menu                                                                                    | string                                                               | -                               | -       |
-| dropdownStyle      | Inline style of drop-down menu                                                                                               | object                                                               | -                               | -       |
-| emptyContent       | Content displayed when the search has no result                                                                              | ReactNode                                                            | `No result`                     | -       |
-| filterLeafOnly       |  Whether the search results only show the path of leaf nodes   | boolean    | true    | 1.26.0    |
+| dropdownClassName  | ClassName property for the drop-down menu                                                                                    | string                                                             | -                               | -       |
+| dropdownStyle      | Inline style of drop-down menu                                                                                               | object                                                             | -                               | -       |
+| emptyContent       | Content displayed when the search has no result                                                                              | ReactNode                                                          | `No result`                     | -       |
+| filterLeafOnly       |  Whether the search results only show the path of leaf nodes   | boolean  | true    | 1.26.0    |
 | filterTreeNode     | Set filter, the value of treeNodeFilterProp is used for searching                | ((inputValue: string, treeNodeString: string) => boolean) \| boolean | false                           | -       |
 | getPopupContainer | Specify the parent DOM, the drop-down box will be rendered into the DOM, the customization needs to set position: relative |() => HTMLElement|() => document.body|-|
-| insetLabel         | Prefix alias, used mainly in Form                                                                                            | ReactNode                                                            | -                               | 0.28.0  |
-| leafOnly         | When multiple selections, the set value only includes leaf nodes, that is, the displayed Tag and onChange value parameters only include leaf nodes. Does not support dynamic switching                             | boolean                                                            | false                               | 2.2.0  |
+| insetLabel         | Prefix alias, used mainly in Form                                                                                            | ReactNode                                                          | -                               | 0.28.0  |
+| leafOnly         | When multiple selections, the set value only includes leaf nodes, that is, the displayed Tag and onChange value parameters only include leaf nodes. Does not support dynamic switching                             | boolean                                                          | false                               | 2.2.0  |
 | loadData | Load data asynchronously and the return value should be a promise | (selectOptions: TreeNode[]) => Promise< void > |-| 1.8.0|
 | max| In the case of multiple selections, the number of multiple selections is limited, and the onExceed callback will be triggered when max is exceeded | number |-|1.28.0|
 | maxTagCount| When multiple selections, the maximum number of labels to be displayed will be displayed in the form of +N after exceeding| number |-|1.28.0|
-| motion | Set the pop-up animation of the dropdown box |boolean\|object|true|-|
+| motion | Set the pop-up animation of the dropdown box |boolean|true|-|
 | mouseEnterDelay | After the mouse is moved in, the time to delay the display of the dropdown box, in milliseconds | number | 50 | - |
 | mouseLeaveDelay | After the mouse is moved out, the time to hide the display of the dropdown box, in milliseconds | number | 50 | - |
 | multiple | Set multiple | boolean | false |  1.28.0 |
-| placeholder        | Placeholder                                                                                                                  | string                                                               | -                               | -       |
-| prefix             | Prefix label                                                                                                                 | ReactNode                                                            | -                               | 0.28.0  |
+| placeholder        | Placeholder                                                                                                                  | string                                                             | -                               | -       |
+| prefix             | Prefix label                                                                                                                 | ReactNode                                                          | -                               | 0.28.0  |
 | preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
-|restTagsPopoverProps |The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     |PopoverProps     | {}        |1.28.0|
-| searchPlaceholder  | Placeholder for search input                                                                                                 | string                                                               | -                               | -       |
-| separator  | Custom separator, including: the separator of the content displayed in the dropdown during search and displayed in the Trigger during single selection        | string                                                               | ' / '                               | 2.2.0       |
-| showClear       |  Toggle whether to show clear button   | boolean    | false    | 0.35.0    |
+|restTagsPopoverProps |The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     |PopoverProps   | {}        |1.28.0|
+| searchPlaceholder  | Placeholder for search input                                                                                                 | string                                                             | -                               | -       |
+| separator  | Custom separator, including: the separator of the content displayed in the dropdown during search and displayed in the Trigger during single selection        | string                                                             | ' / '                               | 2.2.0       |
+| showClear       |  Toggle whether to show clear button   | boolean  | false    | 0.35.0    |
 | showNext| Set the way to expand the Dropdown submenu, one of: `click`、`hover` | string |`click`|1.29.0|
 | showRestTagsPopover| When the number of tags exceeds maxTagCount and hover reaches +N, whether to display the remaining content through Popover| boolean |false|1.28.0|
-| size               | Selectbox size, one of `large`, `small`, `default`                                                                           | string                                                               | `default`                       | -       |
+| size               | Selectbox size, one of `large`, `small`, `default`                                                                           | string                                                             | `default`                       | -       |
 | stopPropagation | Whether to prevent the click event on the dropdown box from bubbling | boolean | true | - |
 | disableStrictly | Set whether to enable strict prohibition. After opening, when the node is disabled, the selected state cannot be changed through the relationship between the child or the parent | boolean | false | 1.32.0|
-| style              | Inline style                                                                                                                 | CSSProperties                                                               | -                               | -       |
-| suffix             | Suffix label                                                                                                                 | ReactNode                                                            | -                               | 0.28.0  |
+| style              | Inline style                                                                                                                 | CSSProperties                                                             | -                               | -       |
+| suffix             | Suffix label                                                                                                                 | ReactNode                                                          | -                               | 0.28.0  |
 | topSlot | top slot | ReactNode | - |  1.27.0 |
-| treeData           | Render data. Refer to [TreeNode](#TreeNode)  for detailed formatting. | TreeNode[]                                                      | \ []                            | -       |
-| treeNodeFilterProp | When searching, the input item filters the corresponding treeNode property.                                                  | string                                                               | `label`                         | -       |
+| treeData           | Render data. Refer to [TreeNode](#TreeNode)  for detailed formatting. | TreeNode[]                                                    | \ []                            | -       |
+| treeNodeFilterProp | When searching, the input item filters the corresponding treeNode property.                                                  | string                                                             | `label`                         | -       |
 | triggerRender | Method to create a custom trigger  | (triggerRenderData: object) => ReactNode | - | 0.34.0 |
 | value       | Selected value (controlled mode)    | string\|number\|TreeNode\|(string\|number\|TreeNode)[][]                                                   | -                               | -       |
 | validateStatus |The validation status of the trigger only affects the display style. Optional: default、error、warning | string | `default` | - |
@@ -1573,13 +1573,13 @@ function Demo() {
 | onChange           | Callback function when the tree node is selected                                                                             | (value: string\|number\|TreeNode\|(string\|number\|TreeNode)[]) => void                                | -                               | -       |
 | onClear| When showClear is true, click the clear button to trigger the callback | () => void |-|1.29.0|
 | onChangeWithObject | Toggle whether to return all properties in an option as a return value. When set to true, return value looks like TreeNode. For controlled mode, you need to pass TreeNode to value correspondingly. DefaultValue similarly. | boolean | false | 1.16.0 |
-| onDropdownVisibleChange       | Callback function when dropdown menu visibility changes   | (visible: boolean) => void        | -                                | 0.35.0    |
+| onDropdownVisibleChange       | Callback function when dropdown menu visibility changes   | (visible: boolean) => void      | -                                | 0.35.0    |
 | onExceed| When multiple selections are made, the callback triggered after max is exceeded | (checkedItem: Entity[]) => void |-|1.28.0|
 | onFocus| Focus on Cascader's callback | (e: MouseEvent) => void | - | - |
 | onListScroll | Callback function when panel list scroll | (e: React.Event, panel: { panelIndex: number; activeNode: TreeNode; } ) => void | - | 1.15.0 |
 | onLoad | Callback function when a node is loaded | (newLoadedKeys: Set< string >, data: TreeNode) => void | - | 1.8.0|
-| onSearch           | Callback function when the values for search input changes                                                                   | (value: string) => void                                                             | -                               | -       |
-| onSelect           | Callback function when selected                                                                                              | function(selected: string)                                           | -                               | -       |
+| onSearch           | Callback function when the values for search input changes                                                                   | (value: string) => void                                                           | -                               | -       |
+| onSelect           | Callback function when selected                                                                                              | function(selected: string)                                         | -                               | -       |
 
 ### TreeNode
 

content/input/cascader/index.md

@@ -231,7 +231,7 @@ import React from 'react';
 import { Cascader } from '@douyinfe/semi-ui';
 
 () => {
-    const [value, setValue] = useState(['zhejiang','ningbo','haishu']);
+    const [value, setValue] = useState(['zhejiang', 'ningbo', 'haishu']);
     const onChange = (val) => { setValue(val); };
     const treeData = [
         {
@@ -658,7 +658,7 @@ import { Cascader, Tag, Typography } from '@douyinfe/semi-ui';
                 placeholder="自定义回填时显示数据的格式"
                 displayRender={(item, idx) => (
                     <Tag
-                        style={{marginRight: 4}}
+                        style={{ marginRight: 4 }}
                         color='white'
                         key={`${idx}-${item.data.label}`}
                     >
@@ -994,7 +994,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -1506,52 +1506,52 @@ function Demo() {
 
 ### Cascader
 
-| 属性               | 说明                                                                                 | 类型                                                                             | 默认值                           | 版本                               |
-| ------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | -------------------------------- |----------------------------------|
-| arrowIcon     |   自定义右侧下拉箭头 Icon，当 showClear 开关打开且当前有选中值时，hover 会优先显示 clear icon                                                              | ReactNode                                                                          |                             | 1.15.0                           |
+| 属性               | 说明                                                                                 | 类型                                                                           | 默认值                           | 版本                               |
+| ------------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | -------------------------------- |----------------------------------|
+| arrowIcon     |   自定义右侧下拉箭头 Icon，当 showClear 开关打开且当前有选中值时，hover 会优先显示 clear icon                                                              | ReactNode                                                                        |                             | 1.15.0                           |
 | autoAdjustOverflow | 是否自动调整下拉框展开方向，用于边缘遮挡时自动调整展开方向 | boolean | true | -                                |
 | autoMergeValue | 设置自动合并 value。具体而言是，开启后，当某个父节点被选中时，value 将不包括该节点的子孙节点。不支持动态切换 | boolean | true | 1.28.0                           |
 | bottomSlot | 底部插槽 | ReactNode | - | 1.27.0                           |
-| changeOnSelect     | 是否允许选择非叶子节点                                                                   | boolean                                                                          | false                            | -                                |
-| className          | 选择框的 className 属性                                                              | string                                                                           | -                                | -                                |
-| defaultOpen       | 设置是否默认打开下拉菜单              | boolean   | false                                | -                                |
+| changeOnSelect     | 是否允许选择非叶子节点                                                                   | boolean                                                                        | false                            | -                                |
+| className          | 选择框的 className 属性                                                              | string                                                                         | -                                | -                                |
+| defaultOpen       | 设置是否默认打开下拉菜单              | boolean | false                                | -                                |
 | defaultValue       | 指定默认选中的条目                                                                   | string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]                                                                           | -                                | -      |
-| disabled           | 是否禁用                                                                             | boolean                                                                          | false                            | -                                |
-| displayProp        | 设置回填选项显示的属性值                                                                 | string                                                                           | `label`                          | -                                |
+| disabled           | 是否禁用                                                                             | boolean                                                                        | false                            | -                                |
+| displayProp        | 设置回填选项显示的属性值                                                                 | string                                                                         | `label`                          | -                                |
 | displayRender      | 设置回填格式                                                                 | (selected: string[] \| Entity, idx?: number) => ReactNode                                                        | selected => selected.join(' / ') | -      |
-| dropdownClassName  | 下拉菜单的 className 属性                                                            | string                                                                           | -                                | -                                |
-| dropdownStyle      | 下拉菜单的样式                                                                       | object                                                                           | -                                | -                                |
-| emptyContent       | 当搜索无结果时展示的内容                                                             | ReactNode                                                                        | `暂无数据`                       | -                                |
-| filterLeafOnly       |  搜索结果是否只展示叶子结点路径   | boolean    | true    | 1.26.0                           |
+| dropdownClassName  | 下拉菜单的 className 属性                                                            | string                                                                         | -                                | -                                |
+| dropdownStyle      | 下拉菜单的样式                                                                       | object                                                                         | -                                | -                                |
+| emptyContent       | 当搜索无结果时展示的内容                                                             | ReactNode                                                                      | `暂无数据`                       | -                                |
+| filterLeafOnly       |  搜索结果是否只展示叶子结点路径   | boolean  | true    | 1.26.0                           |
 | filterTreeNode     | 设置筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | ((inputValue: string, treeNodeString: string) => boolean) \| boolean | false                            | -      |
 | getPopupContainer | 指定父级 DOM，下拉框将会渲染至该 DOM 中，自定义需要设置 position: relative |() => HTMLElement|() => document.body| -                                |
-| insetLabel         | 前缀标签别名，主要用于 Form                                                          | ReactNode                                                                        | -                                | 0.28.0                           |
+| insetLabel         | 前缀标签别名，主要用于 Form                                                          | ReactNode                                                                      | -                                | 0.28.0                           |
 | leafOnly | 多选时设置 value 只包含叶子节点，即显示的 Tag 和 onChange 的 value 参数只包含叶子节点。不支持动态切换 | boolean | false | 2.2.0                            |
 | loadData | 异步加载数据，需要返回一个Promise | (selectOptions: TreeNode[]) => Promise< void > |- | 1.8.0                            |
 | max| 多选时，限制多选选中的数量，超出 max 后将触发 onExceed 回调 | number |-| 1.28.0                           |
 | maxTagCount| 多选时，标签的最大展示数量，超出后将以 +N 形式展示| number |-| 1.28.0                           |
-| motion | 设置下拉框弹出的动画 |boolean\|object| true                             |-|
+| motion | 设置下拉框弹出的动画 |boolean| true                             |-|
 | mouseEnterDelay | 鼠标移入后，延迟显示下拉框的时间，单位毫秒 | number | 50 | -                                |
 | mouseLeaveDelay | 鼠标移出后，延迟消失下拉框的时间，单位毫秒 | number | 50 | -                                |
 | multiple | 设置多选 | boolean | false | 1.28.0                           |
-| placeholder        | 选择框默认文字                                                                       | string                                                                           | -                                | -                                |
-| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                     | "bottom"                                    | 2.16.0-beta.0                    |
-| prefix             | 前缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0                           |
+| placeholder        | 选择框默认文字                                                                       | string                                                                         | -                                | -                                |
+| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                   | "bottom"                                    | 2.16.0-beta.0                    |
+| prefix             | 前缀标签                                                                             | ReactNode                                                                      | -                                | 0.28.0                           |
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |                                  |
-|restTagsPopoverProps |Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)           |PopoverProps     | {}        | 1.28.0                           |
-| searchPlaceholder  | 搜索框默认文字                                                                       | string                                                                           | -                                | -                                |
-| separator  | 自定义分隔符，包括：搜索时显示在下拉框的内容以及单选时回显到 Trigger 的内容的分隔符    | string                                                                           | ' / '                                | 2.2.0                            |
-| showClear       |  是否展示清除按钮   | boolean    | false    | 0.35.0                           |
+|restTagsPopoverProps |Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)           |PopoverProps   | {}        | 1.28.0                           |
+| searchPlaceholder  | 搜索框默认文字                                                                       | string                                                                         | -                                | -                                |
+| separator  | 自定义分隔符，包括：搜索时显示在下拉框的内容以及单选时回显到 Trigger 的内容的分隔符    | string                                                                         | ' / '                                | 2.2.0                            |
+| showClear       |  是否展示清除按钮   | boolean  | false    | 0.35.0                           |
 | showNext| 设置展开 Dropdown 子菜单的方式，可选: `click`、`hover` | string |`click`| 1.29.0                           |
 | showRestTagsPopover| 当超过 maxTagCount，hover 到 +N 时，是否通过 Popover 显示剩余内容| boolean |false| 1.28.0                           |
-| size               | 选择框大小，可选 `large`，`small`，`default`                                         | string                                                                           | `default`                        | -                                |
+| size               | 选择框大小，可选 `large`，`small`，`default`                                         | string                                                                         | `default`                        | -                                |
 | stopPropagation | 是否阻止下拉框上的点击事件冒泡 | boolean | true | -                                |
 | disableStrictly | 设置是否开启严格禁用。开启后，当节点是 disabled 的时候，则不能通过子级或者父级的关系改变选中状态 | boolean | false | 1.32.0                           |
-| style              | 选择框的样式                                                                         | CSSProperties                                                                           | -                                | -                                |
-| suffix             | 后缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0                           |
+| style              | 选择框的样式                                                                         | CSSProperties                                                                         | -                                | -                                |
+| suffix             | 后缀标签                                                                             | ReactNode                                                                      | -                                | 0.28.0                           |
 | topSlot | 顶部插槽 | ReactNode | - | 1.27.0                           |
-| treeData           | 展示数据，具体属性参考 [TreeNode](#TreeNode)              | TreeNode[]                                                                  | \[]                              | -                                |
-| treeNodeFilterProp | 搜索时输入项过滤对应的 treeNode 属性                                                 | string                                                                           | `label`                          | -                                |
+| treeData           | 展示数据，具体属性参考 [TreeNode](#TreeNode)              | TreeNode[]                                                                | \[]                              | -                                |
+| treeNodeFilterProp | 搜索时输入项过滤对应的 treeNode 属性                                                 | string                                                                         | `label`                          | -                                |
 | triggerRender | 自定义触发器渲染方法  | (triggerRenderData: object) => ReactNode | - | 0.34.0                           |
 | validateStatus | trigger 的校验状态，仅影响展示样式。可选: default、error、warning | string | `default` | -                                |
 | value       | （受控）选中的条目                                                                   | string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]                                                                           | -                                | -      |
@@ -1561,12 +1561,12 @@ function Demo() {
 | onChange           | 选中树节点时调用此函数，默认返回选中项 path 的 value 数组                            | (value: string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]) => void                                                                         | -                                | -      |
 | onChangeWithObject | 是否将选中项 option 的其他属性作为回调。设为 true 时，onChange 的入参类型会从 string/number 变为 TreeNode。此时如果是受控，也需要把 value 设置成 TreeNode 类型，且必须含有 value 的键值，defaultValue 同理 | boolean | false | 1.16.0                           |
 | onClear| showClear 为 true 时，点击清空按钮触发的回调 | () => void |-| 1.29.0                           |
-| onDropdownVisibleChange       | 下拉框切换时的回调   | (visible: boolean) => void        | -                                | 0.35.0                           |
+| onDropdownVisibleChange       | 下拉框切换时的回调   | (visible: boolean) => void      | -                                | 0.35.0                           |
 | onExceed| 多选时，超出 max 后触发的回调 | (checkedItem: Entity[]) => void |-| 1.28.0                           |
 | onFocus| 聚焦 Cascader 的回调 | (e: MouseEvent) => void | - | -                                |
 | onListScroll | 下拉面板滚动的回调 | (e: React.Event, panel: { panelIndex: number; activeNode: TreeNode; } ) => void | - | 1.15.0                           |
 | onLoad | 节点加载完毕时触发的回调 | (newLoadedKeys: Set< string >, data: TreeNode) => void |- | 1.8.0                            |
-| onSearch           | 文本框值变化时回调                                                                   | (value: string) => void                                                                         | -                                | -                                |
+| onSearch           | 文本框值变化时回调                                                                   | (value: string) => void                                                                       | -                                | -                                |
 | onSelect           | 被选中时调用，返回选中项的 value                                                     | (value: string \| number \| (string \                        | number)[]) => void                                                                         | -                                | -      |
 
 ### TreeNode

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

@@ -136,9 +136,9 @@ class App extends React.Component {
         const plainOptions = ['semi', 'vigo', 'helo'];
         const options = [
             { label: 'Aim for the highest', value: '1', extra: "Raise the bar. Wait for bigger gains. Find the best solutions by widening your perspective. Be attentive. Distill ideas down to their fundamental truths. Keep learning and growing" },
-            { label: 'Be grounded & courageous', value: '2', extra:"Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." },
+            { label: 'Be grounded & courageous', value: '2', extra: "Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." },
             { label: 'Be open & humble', value: '3', extra: "Trust yourself, trust each other. Be willing to offer and ask for help. Collaboration creates value. Approach problems with the big picture in mind. Be mindful and check your ego; stay open to different ideas." },
-            { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused."}
+            { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused." }
         ];
         const optionsWithDisabled = [
             { label: 'Photography', value: 'Photography' },
@@ -295,7 +295,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 </Checkbox>
             </div>
             <CheckboxGroup
-                style={{marginTop:6}}
+                style={{ marginTop: 6 }}
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
@@ -319,16 +319,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
-        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'3'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'3'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'4'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
     </CheckboxGroup>
@@ -346,16 +346,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
-        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'3'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'3'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'4'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
     </CheckboxGroup>

content/input/checkbox/index.md

@@ -118,9 +118,9 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
     const plainOptions = ['抖音', '火山', '皮皮虾'];
     const options = [
         { label: '追求极致', value: '1', extra: '不断提高要求，延迟满足感，在更大范围里找最优解' },
-        { label: '务实敢为', value: '2', extra:'直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
+        { label: '务实敢为', value: '2', extra: '直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
         { label: '开放谦逊', value: '3', extra: '内心阳光，信任伙伴；乐于助人和求助，合作成大事;格局大，上个台阶想问题；对外敏锐谦虚，ego小，听得进意见' },
-        { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点'}
+        { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点' }
     ];
     const optionsWithDisabled = [
         { label: 'Photography', value: 'Photography' },
@@ -278,7 +278,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 </Checkbox>
             </div>
             <CheckboxGroup
-                style={{marginTop:6}}
+                style={{ marginTop: 6 }}
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
@@ -301,16 +301,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
-        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
     </CheckboxGroup>
@@ -328,16 +328,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
-        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
     </CheckboxGroup>

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

@@ -608,6 +608,40 @@ class App extends React.Component {
 }
 ```
 
+When `type` contains `range`, dates can be disabled based on the focus state. The focus state is passed through the `rangeInputFocus` parameter in `options`.
+
+```jsx live=true
+import React from 'react';
+import { DatePicker } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+function App() {
+    const today = new Date();
+    const disabledDate = (date, options) => {
+        const { rangeInputFocus } = options;
+        const baseDate = dateFns.set(today, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 });
+        if (rangeInputFocus === 'rangeStart') {
+            const disabledStart = dateFns.subDays(baseDate, 2);
+            const disabledEnd = dateFns.addDays(baseDate, 2);
+            return disabledStart <= date && date <= disabledEnd;
+        } else if (rangeInputFocus === 'rangeEnd') {
+            const disabledStart = dateFns.subDays(baseDate, 3);
+            const disabledEnd = dateFns.addDays(baseDate, 3);
+            return disabledStart <= date && date <= disabledEnd;
+        } else {
+            return false;
+        }
+    };
+
+    return (
+        <div>
+            <h4>{`Start date disables 2 days before and 2 days after today, end date disables 3 days before and 3 days after today`}</h4>
+            <DatePicker motion={false} type='dateRange' disabledDate={disabledDate} defaultPickerValue={today} />
+        </div>
+    );
+}
+```
+
 ### Custom Display Format
 
 Pass parameter `format` to custom display format.
@@ -831,19 +865,19 @@ function Demo() {
 
 ## API Reference
 
-| Properties         | Instructions                                                                                                                                                                              | Type                                             | Default | Version    |
-|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------|---------|------------|
-| autoAdjustOverflow | Whether the floating layer automatically adjusts its direction when it is blocked                                                                                                         | boolean                                          | true    | **0.34.0** |
-| autoFocus          | Automatic access to focus                                                                                                                                                                 | boolean                                          | false   | **1.10.0** |
-| autoSwitchDate     | When the year and month are changed through the left and right buttons and the drop-down menu at the top of the panel, the date is automatically switched. Only valid for `date` type. | boolean                                          | true    | **1.13.0** |
-| bottomSlot         | Render the bottom extra area                                                                                                                                                              | ReactNode                                        |         | **1.22.0** |
-| className          | Class name                                                                                                                                                                                | string                                           | -       |            |
-| defaultOpen        | Panel displays or hides by default                                                                                                                                                        | boolean                                          | false   |            |
-| defaultPickerValue | Default panel date                                                                                                                                                                        | ValueType |         |            |
+| Properties         | Instructions                                                                                                                                                                           | Type      | Default | Version    |
+|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------|------------|
+| autoAdjustOverflow | Whether the floating layer automatically adjusts its direction when it is blocked                                                                                                      | boolean   | true    | **0.34.0** |
+| autoFocus          | Automatic access to focus                                                                                                                                                              | boolean   | false   | **1.10.0** |
+| autoSwitchDate     | When the year and month are changed through the left and right buttons and the drop-down menu at the top of the panel, the date is automatically switched. Only valid for `date` type. | boolean   | true    | **1.13.0** |
+| bottomSlot         | Render the bottom extra area                                                                                                                                                           | ReactNode |         | **1.22.0** |
+| className          | Class name                                                                                                                                                                             | string    | -       |            |
+| defaultOpen        | Panel displays or hides by default                                                                                                                                                     | boolean   | false   |            |
+| defaultPickerValue | Default panel date                                                                                                                                                                     | ValueType |         |            |
 | defaultValue       | Default value                                                                                                                                                                            | ValueType                                                                                                                                                                                                    |                                             |                           |  |
 | density            | Density of picker panel, one of `default`, `compact`                                                                 | string                                                                                                                                                                                                    | default                                        | **1.17.0**              |
 | disabled           | Is it disabled?                                                                                                                                                                           | boolean                                                                                                                                                                                                   | false                                                                                 |                           |
-| disabledDate       | The date is prohibited from the judgment method, and the date is prohibited when returned to true. Options parameter supported after 1.9.0 and rangeEnd supported after 1.29            | <ApiType detail='(date: Date, options: { rangeStart: string, rangeEnd: string }) => boolean'>(date, options) => boolean</ApiType>     | () = > false                                                                          |                           |
+| disabledDate       | The date is prohibited from the judgment method, and the date is prohibited when returned to true. Options parameter supported after 1.9.0, rangeEnd supported after 1.29 and rangeInputFocus is supported since 2.22            | <ApiType detail='(date: Date, options: { rangeStart: string, rangeEnd: string, rangeInputFocus: "rangeStart" \| "rangeEnd" \| false }) => boolean'>(date, options) => boolean</ApiType>     | () = > false                                                                          |                           |
 | disabledTime       | Time prohibition configuration, the return value will be transparently passed to [`TimePicker`](/en-US/input/timepicker#API_Reference) as a parameter    | <ApiType detail='(date: Date \| Date[], panelType?: string) => ({ disabledHours:() => number[], disabledMinutes: (hour: number) => number[], disabledSeconds: (hour: number, minute: number) => number[] })'>(date, panelType) => object</ApiType> | () => false        | **0.36.0**                |
 | disabledTimePicker | Disable time selection or not.                                                                                                                                                            | boolean                                                                                                                                                                                                   |                                                                                       | **0.32.0**                |
 | dropdownClassName  | CSS classname for drop-down menu                                                                                                                                                          | string                                                               |                                 | **1.13.0** |
@@ -888,6 +922,7 @@ function Demo() {
 | onOpenChange       | Callback when popup open or close                                                                                                                                 | (isOpen) => void                                                                                                                                                                                 |                                                                                       |                           |
 | onPanelChange      | Callback when the year or date of the panel is switched|  <ApiType detail='(date: DateType \| DateType[], dateStr: StringType \| StringType[])=>void'>(date, dateStr) => void</ApiType>  |  |**1.28.0**|
 | onPresetClick      | Callback when click preset button                                                                          | <ApiType detail='(item: Object, e: Event) => void'>(item, e) => void</ApiType>       |   **1.24.0**                           |
+| yearAndMonthOpts | Other parameters that can be transparently passed to the year-month selector, see details in [ScrollList#API](/zh-CN/show/scrolllist#ScrollItem)|  | object | **2.22.0** |
 
 
 ## Interface Define

content/input/datepicker/index.md

@@ -578,6 +578,40 @@ import * as dateFns from 'date-fns';
 );
 ```
 
+范围选择时，可以根据 focus 状态禁用日期。focus 状态通过 options 中的 rangeInputFocus 参数传递。
+
+```jsx live=true
+import React from 'react';
+import { DatePicker } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+function App() {
+    const today = new Date();
+    const disabledDate = (date, options) => {
+        const { rangeInputFocus } = options;
+        const baseDate = dateFns.set(today, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 });
+        if (rangeInputFocus === 'rangeStart') {
+            const disabledStart = dateFns.subDays(baseDate, 2);
+            const disabledEnd = dateFns.addDays(baseDate, 2);
+            return disabledStart <= date && date <= disabledEnd;
+        } else if (rangeInputFocus === 'rangeEnd') {
+            const disabledStart = dateFns.subDays(baseDate, 3);
+            const disabledEnd = dateFns.addDays(baseDate, 3);
+            return disabledStart <= date && date <= disabledEnd;
+        } else {
+            return false;
+        }
+    };
+
+    return (
+        <div>
+            <h4>{`开始日期禁用今天前2日和后2日，结束日期禁用今天前3天和后3天`}</h4>
+            <DatePicker motion={false} type='dateRange' disabledDate={disabledDate} defaultPickerValue={today} />
+        </div>
+    );
+}
+```
+
 ### 自定义显示格式
 
 可以通过 `format` 自定义显示格式
@@ -794,19 +828,19 @@ function Demo() {
 
 ## API 参考
 
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| autoAdjustOverflow | 浮层被遮挡时是否自动调整方向 | boolean | true | **0.34.0** |
-| autoFocus | 自动获取焦点 | boolean | false | **1.10.0** |
-| autoSwitchDate | 通过面板上方左右按钮、下拉菜单更改年月时，自动切换日期。仅对 date type 生效。 | boolean | true | **1.13.0** |
-| bottomSlot | 渲染底部额外区域 | ReactNode |  | **1.22.0** |
-| className | 类名 | string | - |  |
-| defaultOpen | 面板默认显示或隐藏 | boolean | false |  |
-| defaultPickerValue | 默认面板日期 | ValueType |  |  |
-| defaultValue | 默认值 | ValueType |  |  |
-| density | 面板的尺寸，可选值：`default`, `compact` | string | default | **1.17.0** |
-| disabled | 是否禁用 | boolean | false |  |
-| disabledDate | 日期禁止判断方法，返回为 true 时禁止该日期，options 参数 1.9.0 后支持，rangeEnd 1.29 后支持 | <ApiType detail='(date: Date, options: { rangeStart: string, rangeEnd: string }) => boolean'>(date, options) => boolean</ApiType> | () => false   |
+| 属性               | 说明                                                                      | 类型      | 默认值  | 版本       |
+|--------------------|-------------------------------------------------------------------------|-----------|---------|------------|
+| autoAdjustOverflow | 浮层被遮挡时是否自动调整方向                                              | boolean   | true    | **0.34.0** |
+| autoFocus          | 自动获取焦点                                                              | boolean   | false   | **1.10.0** |
+| autoSwitchDate     | 通过面板上方左右按钮、下拉菜单更改年月时，自动切换日期。仅对 date type 生效。 | boolean   | true    | **1.13.0** |
+| bottomSlot         | 渲染底部额外区域                                                          | ReactNode |         | **1.22.0** |
+| className          | 类名                                                                      | string    | -       |            |
+| defaultOpen        | 面板默认显示或隐藏                                                        | boolean   | false   |            |
+| defaultPickerValue | 默认面板日期                                                              | ValueType |         |            |
+| defaultValue       | 默认值                                                                    | ValueType |         |            |
+| density            | 面板的尺寸，可选值：`default`, `compact`                                    | string    | default | **1.17.0** |
+| disabled           | 是否禁用                                                                  | boolean   | false   |            |
+| disabledDate | 日期禁止判断方法，返回为 true 时禁止该日期，options 参数 1.9.0 后支持，其中 rangeEnd 1.29 后支持，rangeInputFocus 2.22 后支持 | <ApiType detail='(date: Date, options: { rangeStart: string, rangeEnd: string, rangeInputFocus: "rangeStart" \| "rangeEnd" \| false }) => boolean'>(date, options) => boolean</ApiType> | () => false   |
 | disabledTime | 时间禁止配置，返回值将会作为参数透传给 [`TimePicker`](/zh-CN/input/timepicker#API_参考) | <ApiType detail='(date: Date \| Date[], panelType?: string) => ({ disabledHours:() => number[], disabledMinutes: (hour: number) => number[], disabledSeconds: (hour: number, minute: number) => number[] })'>(date, panelType) => object</ApiType> | () => false | **0.36.0** |
 | disabledTimePicker | 是否禁止时间选择 | boolean |  | **0.32.0** |
 | dropdownClassName | 下拉列表的 CSS 类名 | string |  | **1.13.0** |
@@ -858,6 +892,7 @@ function Demo() {
 | onOpenChange | 面板显示或隐藏状态切换的回调 | <ApiType detail='(isOpen: boolean) => void'>(isOpen) => void</ApiType> |  |  |
 | onPanelChange | 切换面板的年份或者日期时的回调 | <ApiType detail='(date: DateType \| DateType[], dateStr: StringType \| StringType[])=>void'>(date, dateStr) => void</ApiType> | function | **1.28.0** |
 | onPresetClick | 点击快捷选择按钮的回调 | <ApiType detail='(item: Object, e: Event) => void'>(item, e) => void</ApiType> | () => {}  | **1.24.0** |
+| yearAndMonthOpts | 其他可以透传给年月选择器的参数，详见 [ScrollList#API](/zh-CN/show/scrolllist#ScrollItem)|  | object | **2.20.0** |
 
 ## 类型定义
 

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

@@ -70,19 +70,19 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => (
     <Form layout='horizontal'>
-        <Form.Input field='username' label='UserName' style={{ width:80 }}/>
+        <Form.Input field='username' label='UserName' style={{ width: 80 }}/>
         <Form.Input
             field='password'
             label={{ 
                 text: 'Password',
                 extra: <Tooltip content='More info xxx'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
             }}
-            style={{ width:176 }}
+            style={{ width: 176 }}
         />
         <Form.Select
             field="role"
             label={{ text: 'Role', optional: true }}
-            style={{ width:176 }}
+            style={{ width: 176 }}
             optionList={[
                 { label: 'Admin', value: 'admin' },
                 { label: 'User', value: 'user' },
@@ -107,7 +107,7 @@ import { Form } from '@douyinfe/semi-ui';
 () => (
     <Form render={({ formState, formApi, values }) => (
         <>
-            <Form.Select field="role" label='Role' style={{ width:120 }}>
+            <Form.Select field="role" label='Role' style={{ width: 120 }}>
                 <Form.Select.Option value="admin">Admin</Form.Select.Option>
                 <Form.Select.Option value="user">User</Form.Select.Option>
                 <Form.Select.Option value="guest">Guest</Form.Select.Option>
@@ -134,7 +134,7 @@ import { Form } from '@douyinfe/semi-ui';
         {
             ({ formState, values, formApi }) => (
                 <>
-                    <Form.Select field="role" label='Role' style={{ width:120 }}>
+                    <Form.Select field="role" label='Role' style={{ width: 120 }}>
                         <Form.Select.Option value="admin">Admin</Form.Select.Option>
                         <Form.Select.Option value="user">User</Form.Select.Option>
                         <Form.Select.Option value="guest">Guest</Form.Select.Option>
@@ -358,7 +358,7 @@ class BasicDemoWithInit extends React.Component {
                         <TagInput 
                             field="product"
                             label='Product（TagInput）'
-                            initValue={['abc','hotsoon']}
+                            initValue={['abc', 'hotsoon']}
                             style={style}
                         />
                     </Col>
@@ -444,7 +444,7 @@ import { Form, Button, Toast } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -851,7 +851,7 @@ class ModalFormDemo extends React.Component {
                                 <Form.Select
                                     field='region'
                                     label="Country/Region"
-                                    style={{ width:120 }}
+                                    style={{ width: 120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -879,7 +879,7 @@ class ModalFormDemo extends React.Component {
                                     field='area'
                                     label="Area"
                                     placeholder='Choose Area'
-                                    style={{ width:120 }}
+                                    style={{ width: 120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -1276,7 +1276,7 @@ class ArrayDemo extends React.Component {
         if (!effects) {
             effects = [];
         }
-        effects.push({ name: '', type: '', key: this.id++  });
+        effects.push({ name: '', type: '', key: this.id++ });
         this.formApi.setValue('effects', effects);
     }
     remove(key) {

content/input/form/index.md

@@ -75,16 +75,16 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
     return (
         <Form layout='horizontal' onValueChange={values=>console.log(values)}>
-            <Form.Input field='UserName' label='用户名' style={{ width:80 }}/>
+            <Form.Input field='UserName' label='用户名' style={{ width: 80 }}/>
             <Form.Input
                 field='Password'
                 label={{ 
                     text: '密码',
                     extra: <Tooltip content='详情'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
                 }}
-                style={{ width:176 }}
+                style={{ width: 176 }}
             />
-            <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width:176 }}>
+            <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width: 176 }}>
                 <Option value="admin">管理员</Option>
                 <Option value="user">普通用户</Option>
                 <Option value="guest">访客</Option>
@@ -144,13 +144,13 @@ import { Form } from '@douyinfe/semi-ui';
             {
                 ({ formState, values, formApi }) => (
                     <>
-                        <Form.Select field="Role" label='角色' style={{ width:176 }}>
+                        <Form.Select field="Role" label='角色' style={{ width: 176 }}>
                             <Form.Select.Option value="admin">管理员</Form.Select.Option>
                             <Form.Select.Option value="user">普通用户</Form.Select.Option>
                             <Form.Select.Option value="guest">访客</Form.Select.Option>
                         </Form.Select>
-                        <Form.Input field='UserName' label='用户名' style={{ width:80 }} />
-                        <Form.Input field='Password' label='密码' style={{ width:176 }}/>
+                        <Form.Input field='UserName' label='用户名' style={{ width: 80 }} />
+                        <Form.Input field='Password' label='密码' style={{ width: 176 }}/>
                         <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>
                     </>
                 )
@@ -171,9 +171,9 @@ import { Form } from '@douyinfe/semi-ui';
 () => {
     const fields = ({ formState, formApi, values }) => (
         <>
-            <Form.Input field='Role' style={{ width:176 }}/>
-            <Form.Input field='UserName' style={{ width:80 }}/>
-            <Form.Input field='Password' style={{ width:176 }}/>
+            <Form.Input field='Role' style={{ width: 176 }}/>
+            <Form.Input field='UserName' style={{ width: 80 }}/>
+            <Form.Input field='Password' style={{ width: 176 }}/>
             <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>
         </>
     );
@@ -218,7 +218,7 @@ class BasicDemoWithInit extends React.Component {
                         size: '222KB',
                         percent: 50,
                         preview: true,
-                        fileInstance:  new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
+                        fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
                         url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'
                     },
                     {
@@ -228,7 +228,7 @@ class BasicDemoWithInit extends React.Component {
                         size: '222KB',
                         percent: 50,
                         preview: true,
-                        fileInstance:  new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
+                        fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
                         url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'
                     }
                 ]
@@ -359,7 +359,7 @@ class BasicDemoWithInit extends React.Component {
                             <TagInput 
                                 field="product"
                                 label='产品（TagInput）'
-                                initValue={['abc','ulikeCam']}
+                                initValue={['abc', 'ulikeCam']}
                                 placeholder='请输入产品'
                                 style={style}
                             />
@@ -514,7 +514,7 @@ import { Form, Toast, Button } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -710,19 +710,19 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
 () => {
     const { Section, Input, DatePicker, TimePicker, Select, Switch, InputNumber, Checkbox, CheckboxGroup, RadioGroup, Radio } = Form;
     return (
-        <Form style={{ width:560 }}>
+        <Form style={{ width: 560 }}>
             <Section text={'基本信息'}>
                 <Input field='name' label='考试名称' initValue='TCS任务平台使用' style={{ width: 560 }}/>
             </Section>
             <Section text={'合格标准'} >
-                <div style={{ display:'flex' }}>
-                    <InputNumber field='pass' initValue={60} style={{ width:80 }} label={{ text:'及格正确率', required: true }}/>
-                    <InputNumber field='number' initValue={10} style={{ width:80 }} label={{ text:'合格人数', required: true }}/>
+                <div style={{ display: 'flex' }}>
+                    <InputNumber field='pass' initValue={60} style={{ width: 80 }} label={{ text: '及格正确率', required: true }}/>
+                    <InputNumber field='number' initValue={10} style={{ width: 80 }} label={{ text: '合格人数', required: true }}/>
                 </div>
             </Section>
             <Section text={'考试时间'} >
-                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width:272 }} label={{ text:'开始时间', required: true }}/>
-                <div  style={{ display:'flex' }}>
+                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width: 272 }} label={{ text: '开始时间', required: true }}/>
+                <div style={{ display: 'flex' }}>
                     <Input field='time' label='考试时长' style={{ width: 176 }} initValue={'60'} addonAfter='分钟'/>
                     <Checkbox initValue={true} noLabel field='auto' style={{ paddingTop: 30, marginLeft: 12 }}>到时间自动交卷</Checkbox>
                 </div>
@@ -746,7 +746,7 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
                 >
                     <Radio value="always">自动放出</Radio>
                     <Radio value="user">
-                        <div style={{ display:'inline-block' }}>
+                        <div style={{ display: 'inline-block' }}>
                             自定义放出时间
                             <Form.DatePicker type='dateTimeRange' noLabel field='customTime' style={{ width: 464, display: 'inline-block' }}/>
                         </div>
@@ -755,14 +755,14 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
             </Section>
             <Section text={'考试人员'}>
                 <div style={{ display: 'flex' }}>
-                    <Switch field='open'  label={{ text:'对外开放', required: true }} checkedText='开' uncheckedText='关'></Switch>
+                    <Switch field='open' label={{ text: '对外开放', required: true }} checkedText='开' uncheckedText='关'></Switch>
                 </div>
                 <Select
                     field='users'
-                    label={{ text:'考生', required: true }}
+                    label={{ text: '考生', required: true }}
                     style={{ width: 560 }}
                     multiple
-                    initValue={['1','2','3', '4']}
+                    initValue={['1', '2', '3', '4']}
                 >
                     <Select.Option value='1'>曲晨一</Select.Option>
                     <Select.Option value='2'>夏可曼</Select.Option>
@@ -1093,7 +1093,7 @@ class ModalFormDemo extends React.Component {
                                     field='region'
                                     label="国家/地区"
                                     placeholder='请选择'
-                                    style={{ width:'100%' }}
+                                    style={{ width: '100%' }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -1121,7 +1121,7 @@ class ModalFormDemo extends React.Component {
                                     field='area'
                                     label="投放区域"
                                     placeholder='请选择'
-                                    style={{ width:'100%' }}
+                                    style={{ width: '100%' }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -1416,10 +1416,10 @@ class PartValidAndResetDemo extends React.Component {
                             <div>
                                 <Form.Input field="a[1]" validate={this.validate} trigger="blur" />
                                 <Form.Input field="a[0]" validate={this.validate} trigger="blur" />
-                                <Form.Input field="b.name[0]" validate={this.validate} trigger="blur"  />
+                                <Form.Input field="b.name[0]" validate={this.validate} trigger="blur" />
                                 <Form.Input field="b.name[1]" validate={this.validate} trigger="blur" />
                                 <Form.Input field="b.type" validate={this.validate} trigger="blur" />
-                                <Form.Input field="c" validate={this.validate} trigger="blur"  />
+                                <Form.Input field="c" validate={this.validate} trigger="blur" />
                                 <Form.Input field="d" validate={this.validate} trigger="blur" />
                             </div>
                             <div>
@@ -1538,7 +1538,7 @@ class ArrayFieldDemo extends React.Component {
                     {({ add, arrayFields, addWithInitValue }) => (
                         <React.Fragment>
                             <Button onClick={add} icon={<IconPlusCircle />} theme='light'>新增空白行</Button>
-                            <Button  icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: '自定义贴纸', type: '2D' });}} style={{ marginLeft:8 }}>新增带有初始值的行</Button>
+                            <Button icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: '自定义贴纸', type: '2D' });}} style={{ marginLeft: 8 }}>新增带有初始值的行</Button>
                             {
                                 arrayFields.map(({ field, key, remove }, i) => (
                                     <div key={key} style={{ width: 1000, display: 'flex' }}>
@@ -1857,7 +1857,7 @@ const MyComponent = (props) => {
     };
     return (
         <div className='customField'>
-            <Input insetLabel='名称' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight:12 }} />
+            <Input insetLabel='名称' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight: 12 }} />
             <Select
                 insetLabel='角色'
                 value={role}
@@ -1883,7 +1883,7 @@ class WithFieldDemo2 extends React.Component {
     render() {
         return (
             <Form>
-                <CustomField field='baseInfo' label={{ text:'基本信息', required: true }} />
+                <CustomField field='baseInfo' label={{ text: '基本信息', required: true }} />
                 <ComponentUsingFormState />
             </Form>
         );

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

@@ -262,13 +262,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='card' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-card">
-        <Radio value={1} extra='Radio description' style={{width:280}}>
+        <Radio value={1} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={2} disabled extra='Radio description' style={{width:280}}>
+        <Radio value={2} disabled extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={3} extra='Radio description' style={{width:280}}>
+        <Radio value={3} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
     </RadioGroup>
@@ -288,13 +288,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='pureCard' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-pureCard">
-        <Radio value={1} extra='Radio description' style={{width:280}}>
+        <Radio value={1} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={2} disabled extra='Radio description' style={{width:280}}>
+        <Radio value={2} disabled extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={3} extra='Radio description' style={{width:280}}>
+        <Radio value={3} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
     </RadioGroup>

content/input/radio/index.md

@@ -115,7 +115,7 @@ import React from 'react';
 import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => {
-    const [value,  setValue] = useState(1);
+    const [value, setValue] = useState(1);
     const onChange = (e) => {
         console.log('radio checked', e.target.value);
         setValue(e.target.value);
@@ -196,13 +196,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='card' defaultValue={2} direction='vertical' aria-label="单选组合示例" name="demo-radio-group-card">
-        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
     </RadioGroup>
@@ -220,13 +220,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='pureCard' defaultValue={2} direction='vertical' aria-label="单选组合示例" name="demo-radio-group-pureCard">
-        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
     </RadioGroup>

content/input/rating/index.md

@@ -92,7 +92,7 @@ import React, { useState } from 'react';
 import { Rating } from '@douyinfe/semi-ui';
 
 () => {
-    const [value,  setValue] = useState(0);
+    const [value, setValue] = useState(0);
     const change = (val) => setValue(val);
     const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
     return (
@@ -119,10 +119,10 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 
 () => (
     <div>
-        <Rating style={{color:'red'}} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>
+        <Rating style={{ color: 'red' }} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>
         <br/>
         <br/>
-        <Rating style={{color:'red'}} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: 48 }} />)} defaultValue={3}/>
+        <Rating style={{ color: 'red' }} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: 48 }} />)} defaultValue={3}/>
         <br/>
         <br/>
         <Rating character={'赞'} size={18} defaultValue={3}/>

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

@@ -73,6 +73,8 @@ Configuration `multiple` properties that can support multi-selection
 
 Configuration `maxTagCount`. You can limit the number of options displayed, and the excess will be displayed in the form of + N
 
+Use `showRestTagsPopover` (>= v2.22.0) to set whether hover +N displays Popover after exceeding `maxTagCount`, the default is `false`. Also, popovers can be configured in the `restTagsPopoverProps` property
+
 Configuration `max` Properties can limit the maximum number of options and cannot be selected beyond the maximum limit, while triggering`On Exceed`callback
 
 ```jsx live=true
@@ -89,7 +91,7 @@ import { Select } from '@douyinfe/semi-ui';
         </Select>
         <br />
         <br />
-        <Select multiple style={{ width: '320px' }} defaultValue={['abc', 'hotsoon', 'pipixia']} maxTagCount={2}>
+        <Select multiple maxTagCount={2} showRestTagsPopover={true} restTagsPopoverProps={{ position: 'top' }} style={{ width: '320px' }} defaultValue={['abc', 'hotsoon', 'pipixia']} >
             <Select.Option value="abc">Semi</Select.Option>
             <Select.Option value="hotsoon">Hotsoon</Select.Option>
             <Select.Option value="pipixia">Pipixia</Select.Option>
@@ -113,6 +115,7 @@ import { Select } from '@douyinfe/semi-ui';
     </>
 );
 ```
+
 ### With Group
 
 Grouping Option with `OptGroup`(Only supports the declaration of children through jsx, and does not support pass in through optionList)
@@ -747,7 +750,7 @@ import { Select, Avatar, Tag } from '@douyinfe/semi-ui';
             paddingBottom: 10
         };
         return (
-            <Select.Option value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
+            <Select.Option value={item.name} style={optionStyle} showTick={true} {...item} key={item.email}>
                 <Avatar size="small" src={item.avatar} />
                 <div style={{ marginLeft: 8 }}>
                     <div style={{ fontSize: 14 }}>{item.name}</div>
@@ -955,7 +958,7 @@ import { Select } from '@douyinfe/semi-ui';
 Turn on list virtualization when passing in `virtualize` to optimize performance when there are a large number of Option nodes
 virtualize is an object containing the following values:
 
-- height: Option list height value, default 300
+- height: Option list height value, default 270 （before v2.20.8 was 300）
 - width: Option list width value, default 100%
 - itemSize: The height of each line of Option, must be passed
 
@@ -975,7 +978,7 @@ class VirtualizeDemo extends React.Component {
     render() {
         let { groups, optionList } = this.state;
         let virtualize = {
-            height: 300,
+            height: 270,
             width: '100%',
             itemSize: 36, // px
         };
@@ -1172,7 +1175,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: 'Semi', otherKey:0 },
+        { value: 'abc', label: 'Semi', otherKey: 0 },
         { value: 'capcut', label: 'Capcut', disabled: true, otherKey: 1 },
         { value: 'cam', label: 'UlikeCam', otherKey: 2 },
         { value: 'buzz', label: 'Buzz', otherKey: 3 },
@@ -1252,12 +1255,12 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 
 ### Select Props
 
-| Properties | Instructions | Type | Default |
-| --- | --- | --- | --- |
+| Properties | Instructions | Type | Default | version |
+| --- | --- | --- | --- | --- |
 | allowCreate | Whether to allow the user to create new entries. Needs to be used with `filter` | boolean | false |
 | arrowIcon | Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon <br/>**supported after v1.15.0** | ReactNode |  |
 | autoAdjustOverflow | Whether the pop-up layer automatically adjusts the direction when it is obscured (only vertical direction is supported for the time being, and the inserted parent is body) | boolean | true |
-| autoClearSearchValue     |  After selecting the option, whether to automatically clear the search keywords, it will take effect when mutilple and filter are both enabled.<br/>**supported after v2.3.0** | boolean                      | true                                |
+| autoClearSearchValue     |  After selecting the option, whether to automatically clear the search keywords, it will take effect when mutilple and filter are both enabled.<br/>**supported after v2.3.0** | boolean   | true  |
 | autoFocus | Whether automatically focus when component mount | boolean | false |
 | className | The CSS class name of the wrapper element | string |  |
 | clickToHide | When expanded, click on the selection box to automatically put away the drop-down list | boolean | false |
@@ -1278,7 +1281,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | loading | Does the drop-down list show the loading animation | boolean | false |
 | max | Maximum number of choices, effective only in multi-selection mode | number |  |
 | maxTagCount | In multi-selection mode, when the option is beyond maxTag Count, the subsequent option is rendered in the form of + N | number |  |
-| maxHeight | Maximum height of `optionList` in the pop-up layer | string | number | 300 |
+| maxHeight | Maximum height of `optionList` in the pop-up layer | string \| number | 270 |
 | multiple | Whether allow multiple selection | boolean | false |
 | outerBottomSlot | Rendered at the bottom of the pop-up layer, custom slot level with optionList | ReactNode |  |
 | outerTopSlot | Rendered at the top of the pop-up layer, custom slot level with optionList <br/>**supported after v1.6.0** |
@@ -1290,15 +1293,17 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | remote | Whether to turn on remote search, when remote is true, the input content will not be locally filtered and matched | boolean | false |
 | renderCreateItem | When allowCreate is true, you can customize the rendering of the creation label | function(inputValue: string) | InputValue => 'Create' + InputValue |
 | renderSelectedItem | Customize the rendering of selected tabs in the selection box | function(option) |  |
+| restTagsPopoverProps | The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     | PopoverProps     | {}        | 2.22.0 |
 | showArrow | Whether to show arrow icon | boolean | true |
 | showClear | Whether to show the clear button | boolean | false |
+| showRestTagsPopover | When the number of tags exceeds maxTagCount and hover reaches +N, whether to display the remaining content through Popover | boolean | false | 2.22.0 |
 | size | Size, optional value `default` / `small` / `large` | string | 'default' |
 | spacing | Spacing between popup layer and trigger | number | 4 |
 | stopPropagation | Whether to prevent click events on the popup layer from bubbling | boolean | true | |
 | style | Inline Style | object |  |
 | suffix | An input helper rendered after | ReactNode |  |
 | triggerRender | Custom DOM of trigger | function |  |
-| virtualize | List virtualization, used to optimize performance in the case of a large number of nodes, composed of height, width, and itemSize <br/>** supported after v0.37.0 ** | object |  |
+| virtualize | List virtualization, used to optimize performance in the case of a large number of nodes, composed of height, width, and itemSize <br/>** supported after v0.37.0 ** | object |  | |
 | validateStatus | Verification result, optional `warning`, `error`, `default` (only affect the style background color) | string | 'default' |
 | value | The currently selected value is passed as a controlled component, used in conjunction with `onchange` | string\|number\|array |  |
 | zIndex | Popup layer z-index | number | 1030 |

content/input/select/index.md

@@ -64,7 +64,7 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: '抖音', otherKey:0 },
+        { value: 'abc', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },
@@ -82,6 +82,8 @@ import { Select } from '@douyinfe/semi-ui';
 
 配置 `maxTagCount` 可以限制已选项展示的数量，超出部分将以+N 的方式展示
 
+使用 `showRestTagsPopover` (>= v2.22.0) 可以设置在超出 `maxTagCount` 后，hover +N 是否显示 Popover，默认为 `false`。并且，还可以在 `restTagsPopoverProps` 属性中配置 Popover。
+
 配置 `max` 属性可限制最大可选的数量，超出最大限制数量后无法选中，同时会触发`onExceed`回调
 
 ```jsx live=true
@@ -90,14 +92,14 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Select multiple style={{ width: '320px' }} defaultValue={['abc','ulikecam']}>
+        <Select multiple style={{ width: '320px' }} defaultValue={['abc', 'ulikecam']}>
             <Select.Option value='abc'>抖音</Select.Option>
             <Select.Option value='ulikecam'>轻颜相机</Select.Option>
             <Select.Option value='jianying'>剪映</Select.Option>
             <Select.Option value='xigua'>西瓜视频</Select.Option>
         </Select>
         <br/><br/>
-        <Select multiple style={{ width: '320px' }} defaultValue={['abc','ulikecam', 'jianying']} maxTagCount={2}>
+        <Select multiple maxTagCount={2} showRestTagsPopover={true} restTagsPopoverProps={{ position: 'top' }} style={{ width: '320px' }} defaultValue={['abc', 'ulikecam', 'jianying']} >
             <Select.Option value='abc'>抖音</Select.Option>
             <Select.Option value='ulikecam'>轻颜相机</Select.Option>
             <Select.Option value='jianying'>剪映</Select.Option>
@@ -309,7 +311,7 @@ import { Select } from '@douyinfe/semi-ui';
             value: `rgba(var(--semi-${color}-4), 1)`,
             label: (
                 <span style={{ 
-                    color: `rgba(var(--semi-${color}-4), 1)`}}>
+                    color: `rgba(var(--semi-${color}-4), 1)` }}>
                     {`--semi-${color}-4`}
                 </span>
             )
@@ -432,6 +434,7 @@ import { Select } from '@douyinfe/semi-ui';
 ```
 
 通过 outerTopSlot 将内容插入顶部插槽
+
 ```jsx live=true
 import React from 'react';
 import { Select } from '@douyinfe/semi-ui';
@@ -547,7 +550,7 @@ import { Select, Button } from '@douyinfe/semi-ui';
     let [options, setOptions] = useState([1, 2, 3, 4]);
     function add() {
         let length = Math.ceil(Math.random() * 10);
-        let newOptions = Array.from({ length }, (v,i) => i+1);
+        let newOptions = Array.from({ length }, (v, i) => i+1);
         setOptions(newOptions);
     }
     return (
@@ -621,7 +624,7 @@ class Link extends React.Component {
                     ))}
                 </Select>
                 <Select
-                    style={{ width: '150px', margin: '10px'  }}
+                    style={{ width: '150px', margin: '10px' }}
                     value={city} onChange={this.cityChange}>
                     {citys.map(c => (
                         <Select.Option value={c} key={c}>{c}</Select.Option>
@@ -827,7 +830,7 @@ import { Select, Avatar, Tag } from '@douyinfe/semi-ui';
             paddingBottom: 10
         };
         return (
-            <Select.Option value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
+            <Select.Option value={item.name} style={optionStyle} showTick={true} {...item} key={item.email}>
                 <Avatar size="small" src={item.avatar} />
                 <div style={{ marginLeft: 8 }}>
                     <div style={{ fontSize: 14 }}>{item.name}</div>
@@ -1003,7 +1006,7 @@ import { Select } from '@douyinfe/semi-ui';
                 multiple={true}
                 filter={true}
                 placeholder='With renderCreateItem'
-                renderCreateItem={input => <div style={{ padding:10 }}>Create Item：{input}</div>}
+                renderCreateItem={input => <div style={{ padding: 10 }}>Create Item：{input}</div>}
                 onChange={v => console.log(v)}
                 defaultActiveFirstOption
             >
@@ -1018,7 +1021,7 @@ import { Select } from '@douyinfe/semi-ui';
 传入`virtualize`时开启列表虚拟化，用于大量 Option 节点的情况优化性能  
 virtualize 是一个包含下列值的对象：
 
--   height: Option 列表高度值，默认 300
+-   height: Option 列表高度值，默认 270 (v2.20.8 前为 300)
 -   width: Option 列表宽度值，默认 100%
 -   itemSize: 每行 Option 的高度，必传
  
@@ -1051,7 +1054,7 @@ class VirtualizeDemo extends React.Component {
     render() {
         let { groups, optionList } = this.state;
         let virtualize = {
-            height: 300,
+            height: 270,
             width: '100%',
             itemSize: 36, // px
         };
@@ -1227,7 +1230,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: '抖音', otherKey:0 },
+        { value: 'abc', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },
@@ -1306,8 +1309,8 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 
 ### Select Props
 
-| 属性                     | 说明                                                                                                                                                                                                      | 类型                                  | 默认值                            |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | --------------------------------- |
+| 属性    | 说明     | 类型      | 默认值     |  版本     |
+| -------| -------- | ---------| --------- |--------- |
 | allowCreate              | 是否允许用户创建新条目，需配合 filter 使用                                                                                                                                                                | boolean                               | false                             |
 | arrowIcon            | 自定义右侧下拉箭头Icon，当showClear开关打开且当前有选中值时，hover会优先显示clear icon <br/>**v1.15.0 后提供**                                                                                                                                                                 | ReactNode     |                             |
 | autoAdjustOverflow       | 浮层被遮挡时是否自动调整方向（暂时仅支持竖直方向，且插入的父级为 body）                                                                                                            | boolean                               | true                              |
@@ -1332,7 +1335,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | loading                  | 下拉列表是否展示加载动画                                                                                                                                                                                  | boolean                               | false                             |
 | maxTagCount              | 多选模式下，已选项超出 maxTagCount 时，后续选项会被渲染成+N 的形式                                                                                                                                        | number                                |                                   |
 | max                      | 最多可选几项，仅在多选模式下生效                                                                                                                                                                          | number                                |                                   |
-| maxHeight                | 下拉菜单中 `optionList` 的最大高度                                                                                                                                                                        | string\|number                        | 300                               |
+| maxHeight                | 下拉菜单中 `optionList` 的最大高度                                                                                                                                                                        | string\|number                        | 270                               |
 | multiple                 | 是否多选                                                                                                                                                                                                  | boolean                               | false                             |
 | outerTopSlot             | 渲染在弹出层顶部，与 optionList 平级的自定义 slot                                                                                                                          | ReactNode                             |                                   |
 | outerBottomSlot          | 渲染在弹出层底部，与 optionList 平级的自定义 slot                                                                                                                                                         | ReactNode                             |                                   |
@@ -1356,6 +1359,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | renderCreateItem         | allowCreate 为 true 时，可自定义创建标签的渲染                                                                                                                                 | function(inputValue:string)           | inputValue => '创建' + inputValue |
 | renderSelectedItem       | 通过 renderSelectedItem 自定义选择框中已选项标签的渲染                                                                                                                          | function(option)                      |                                   |
 | renderOptionItem         | 通过 renderOptionItem 完全自定义下拉列表中候选项的渲染                                                                                                                          | function(props) 入参详见Demo                      |                                   |
+| restTagsPopoverProps    | Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83) | PopoverProps | {} | 2.22.0 |
 | remote                   | 是否开启远程搜索，当 remote 为 true 时，input 内容改变后不会进行本地筛选匹配                                                                                                     | boolean                               | false                             |
 | size                     | 大小，可选值 `default`/`small`/`large`                                                                                                                                                                    | string                                | 'default'       |
 | style                    | 样式                                                                                                                                                                                                      | object                                |                 |
@@ -1363,6 +1367,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | suffix                   | 选择框的后缀标签                                                                                                                                                                  | ReactNode                             |                                   |
 | showClear                | 是否展示清除按钮                                                                                                                                                                 | boolean                               | false                             |
 | showArrow                | 是否展示下拉箭头                                                                                                                                                                | boolean                               | true                              |
+| showRestTagsPopover | 当超过 maxTagCount，hover 到 +N 时，是否通过 Popover 显示剩余内容 | boolean | false | 2.22.0 | 
 | spacing                  | 浮层与选择器的距离                                                                                                                                                             | number                                | 4                                 |
 | triggerRender            | 自定义触发器渲染                                                                                                                                                          | function                              |                                   |
 | value                    | 当前选中的的值,传入该值时将作为受控组件，配合 `onChange` 使用                                                                                                                                             | string\|number\|array                 |                                   |

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

@@ -25,7 +25,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['Semi','Hotsoon','Pipixia']}
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']}
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -68,7 +68,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput 
         showClear 
-        defaultValue={['Semi','Hotsoon']} 
+        defaultValue={['Semi', 'Hotsoon']} 
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -86,7 +86,7 @@ import { TagInput } from '@douyinfe/semi-ui';
     <TagInput 
         disabled 
         showClear 
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         placeholder='Please enter...'
     />
 );
@@ -145,11 +145,11 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
     <>
         <TagInput prefix={<IconVigoLogo />} showClear/>
         <br/><br/>
-        <TagInput  prefix="Prefix" showClear/>
+        <TagInput prefix="Prefix" showClear/>
         <br/><br/>
         <TagInput suffix={<IconGift />}/>
         <br/><br/>
-        <TagInput  suffix="Suffix" showClear/>
+        <TagInput suffix="Suffix" showClear/>
     </>
 );
 ``` 
@@ -165,7 +165,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput
         allowDuplicates={false}
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -183,7 +183,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput
         addOnBlur={true}
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -238,7 +238,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         maxTagCount={2}
         showRestTagsPopover={true}
         restTagsPopoverProps={{ position: 'top' }}
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
     />
 );
 ```
@@ -294,7 +294,7 @@ class TagInputDemo extends React.Component {
         return (
             <TagInput
                 inputValue={this.state.value}
-                onInputChange={(v,e) => this.handleInputChange(v,e)}
+                onInputChange={(v, e) => this.handleInputChange(v, e)}
             />
         );
     }
@@ -309,14 +309,14 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput 
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         showClear 
         onFocus={e =>{console.log(`onFocus`);}} 
         onBlur={e=>{console.log(`onBlur`);}} 
         onChange={tag=>{console.log(`onChange ：${tag}`);}} 
         onAdd={tag=>{console.log(`onAdd ：${tag}`);}} 
-        onRemove={(v,i)=>{console.log(`onRemove ：${v}, index：${i}`);}} 
-        onInputChange={(input,e)=>{console.log(`onInputChange ：${input}`);}} 
+        onRemove={(v, i)=>{console.log(`onRemove ：${v}, index：${i}`);}} 
+        onInputChange={(input, e)=>{console.log(`onInputChange ：${input}`);}} 
     />
 );
 ```
@@ -343,7 +343,7 @@ class TagInputDemo extends React.Component {
     render() {
         return (
             <>
-                <TagInput defaultValue={['Semi','Hotsoon']} ref={this.ref} />
+                <TagInput defaultValue={['Semi', 'Hotsoon']} ref={this.ref} />
                 <Button style={{ marginTop: 10 }} onClick={this.handleTagInputFocus}>
                     focus
                 </Button>
@@ -365,18 +365,18 @@ class CustomRender extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            value : ['xiakeman']
+            value: ['xiakeman']
         };
         this.list = [
-            { "name": "xiakeman", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
-            { "name": "shenyue", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
-            { "name": "quchenyi", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
-            { "name": "wenjiamao", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
+            { "name": "xiakeman", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+            { "name": "shenyue", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+            { "name": "quchenyi", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
+            { "name": "wenjiamao", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
         ];
-        this.mapList = new Map(this.list.map( item => [item.name,item]));
+        this.mapList = new Map(this.list.map( item => [item.name, item]));
     }
 
-    renderTagItem(value,index) {
+    renderTagItem(value, index) {
         const data = this.mapList.get(value);
         return (
             <div 
@@ -401,7 +401,7 @@ class CustomRender extends React.Component {
             <TagInput 
                 value={value} 
                 onChange={value=>this.setState({ value })}
-                renderTagItem={(value,index)=>this.renderTagItem(value,index)}
+                renderTagItem={(value, index)=>this.renderTagItem(value, index)}
             />
         );
     }
@@ -422,7 +422,7 @@ import { TagInput } from '@douyinfe/semi-ui';
     <TagInput
         draggable
         allowDuplicates={false}
-        defaultValue={['Semi','Hotsoon','Pipixia']}
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']}
         placeholder='please enter...'
         onChange={v => console.log(v)}
     />

content/input/taginput/index.md

@@ -24,7 +24,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
@@ -67,7 +67,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput 
         showClear 
-        defaultValue={['抖音','火山']} 
+        defaultValue={['抖音', '火山']} 
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
@@ -84,7 +84,7 @@ import { TagInput } from '@douyinfe/semi-ui';
     <TagInput 
         disabled 
         showClear 
-        defaultValue={['抖音','火山','西瓜视频']} 
+        defaultValue={['抖音', '火山', '西瓜视频']} 
         placeholder='请输入...'
     />
 );
@@ -161,7 +161,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         addOnBlur={true}
         placeholder='请输入...'
         onChange={v => console.log(v)}
@@ -179,7 +179,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         allowDuplicates={false}
         placeholder='请输入...'
         onChange={v => console.log(v)}
@@ -235,7 +235,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         maxTagCount={2}
         showRestTagsPopover={true}
         restTagsPopoverProps={{ position: 'top' }}
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         onChange={v => console.log(v)}
     />
 );
@@ -293,7 +293,7 @@ class TagInputDemo extends React.Component {
         return (
             <TagInput
                 inputValue={this.state.value}
-                onInputChange={(v,e) => this.handleInputChange(v,e)}
+                onInputChange={(v, e) => this.handleInputChange(v, e)}
             />
         );
     }
@@ -315,8 +315,8 @@ import { TagInput } from '@douyinfe/semi-ui';
         onBlur={e => {console.log(`onBlur`);}} 
         onChange={tag => {console.log(`onChange,当前标签数组：${tag}`);}} 
         onAdd={tag => {console.log(`onAdd，新增：${tag}`);}} 
-        onRemove={(v,i) => {console.log(`onRemove，移除：${v}, 序号：${i}`);}} 
-        onInputChange={(input,e) => {console.log(`onInputChange，当前输入内容：${input}`);}} 
+        onRemove={(v, i) => {console.log(`onRemove，移除：${v}, 序号：${i}`);}} 
+        onInputChange={(input, e) => {console.log(`onInputChange，当前输入内容：${input}`);}} 
     />
 );
 ```
@@ -343,8 +343,8 @@ class TagInputDemo extends React.Component {
     render() {
         return (
             <>
-                <TagInput defaultValue={['抖音','火山']} ref={this.ref} />
-                <Button style={{ marginTop:10 }} onClick={this.handleTagInputFocus}>
+                <TagInput defaultValue={['抖音', '火山']} ref={this.ref} />
+                <Button style={{ marginTop: 10 }} onClick={this.handleTagInputFocus}>
                     点击按钮聚焦
                 </Button>
             </>
@@ -365,18 +365,18 @@ class CustomRender extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            value : ['夏可漫']
+            value: ['夏可漫']
         };
         this.list = [
-            { "name": "夏可漫", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
-            { "name": "申悦", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
-            { "name": "曲晨一", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
-            { "name": "文嘉茂", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
+            { "name": "夏可漫", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+            { "name": "申悦", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+            { "name": "曲晨一", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
+            { "name": "文嘉茂", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
         ];
-        this.mapList = new Map(this.list.map( item => [item.name,item]));
+        this.mapList = new Map(this.list.map( item => [item.name, item]));
     }
 
-    renderTagItem(value,index) {
+    renderTagItem(value, index) {
         const data = this.mapList.get(value);
         return (
             <div 
@@ -401,7 +401,7 @@ class CustomRender extends React.Component {
             <TagInput 
                 value={value} 
                 onChange={value => this.setState({ value })}
-                renderTagItem={(value,index) => this.renderTagItem(value,index)}
+                renderTagItem={(value, index) => this.renderTagItem(value, index)}
             />
         );
     }

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

@@ -29,6 +29,20 @@ function Demo() {
 }
 ```
 
+### Infinite Scroll
+
+Starting from version V2.22.0, we changed the default mode of ScrollItem in TimePicker from `wheel` to `normal`. If you want to apply the effect of infinite scrolling back, please refer to the following example.
+
+```jsx live=true
+import React from 'react';
+import { TimePicker } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return <TimePicker scrollItemProps={{ mode: "wheel", cycled: true }}/>;
+}
+```
+
+
 ### With an Embedded Label
 
 ```jsx live=true

content/input/timepicker/index.md

@@ -28,6 +28,19 @@ function Demo() {
 }
 ```
 
+### 无限滚动
+
+版本V2.22.0开始，我们将 TimePicker 内的 ScrollItem 的默认模式从 `wheel` 变更为了 `normal`, 若想应用回无限滚动的效果，可参考以下示例。
+
+```jsx live=true
+import React from 'react';
+import { TimePicker } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return <TimePicker scrollItemProps={{ mode: "wheel", cycled: true }}/>;
+}
+```
+
 ### 带内嵌标签
 
 ```jsx live=true
@@ -91,7 +104,7 @@ import { TimePicker, Button } from '@douyinfe/semi-ui';
 function Demo() {
     const [open, setOpen] = useState(false);
     const closePanel = () => setOpen(false);
-    const onOpenChange = (open) =>  {
+    const onOpenChange = (open) => {
         setOpen(open);
         console.log(open);
     };

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

@@ -75,7 +75,8 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 
 ### Multi-choice
 
-You could use `multiple` to set mode to multi-choice. When all child items are selected, the parent item will be selected. Use `maxTagCount` to set the cap number of tags displayed. Use `leafOnly` (>= v0.32.0) if you prefer to render leaf nodes only and the corresponding params for onChange will also be leaf nodes values.
+You could use `multiple` to set mode to multi-choice. When all child items are selected, the parent item will be selected.  
+Use `leafOnly` (>= v0.32.0) if you prefer to render leaf nodes only and the corresponding params for onChange will also be leaf nodes values.  
 
 ```jsx live=true
 import React from 'react';
@@ -158,18 +159,109 @@ import { TreeSelect } from '@douyinfe/semi-ui';
                 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 treeData={treeData}
                 multiple
-                maxTagCount={2}
-                placeholder="Display at most two tags"
+                leafOnly
+                placeholder="Display leaf nodes only"
             />
-            <br/>
-            <br/>
+        </div>
+    );
+};
+```
+
+### Limit Tags Number
+
+In the multi-selection scenario, `maxTagCount` can be used to limit the number of tags displayed, and the excess part will be displayed in the form of +N.  
+Use `showRestTagsPopover` (>= v2.22.0) to set whether hover +N displays Popover after exceeding `maxTagCount`, the default is `false`. Also, popovers can be configured in the `restTagsPopoverProps` property.  
+
+```jsx live=true
+import React from 'react';
+import { TreeSelect } from '@douyinfe/semi-ui';
+() => {
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                        {
+                            label: 'Chengdu',
+                            value: 'Chengdu',
+                            key: '0-0-2',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0'
+                        }
+                    ]
+                },
+            ],
+        },
+        {
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0'
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1'
+                }
+            ]
+        }
+    ];
+
+    const textStyle = { margin: '20px 0 10px' };
+
+    return ( 
+        <div>
+            <h4 style={textStyle}>maxTagCount=2:</h4>
             <TreeSelect
+                multiple
+                maxTagCount={2}
                 style={{ width: 300 }}
                 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 treeData={treeData}
+                placeholder="When more than two tabs are selected it will collapse"
+                defaultValue={['Beijing', 'Chengdu', 'Canada']}
+            />
+            <h4 style={textStyle}>maxTagCount=2, showRestTagsPopover:</h4>
+            <TreeSelect
+                showRestTagsPopover={true}
+                restTagsPopoverProps={{ position: 'top' }}
                 multiple
-                leafOnly
-                placeholder="Display leaf nodes only"
+                maxTagCount={2}
+                style={{ width: 300 }}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={treeData}
+                placeholder="hover +N to view"
+                defaultValue={['Beijing', 'Chengdu', 'Canada']}
             />
         </div>
     );
@@ -724,7 +816,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -938,7 +1030,7 @@ class Demo extends React.Component {
             const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
             return rec(z + 1);
         }
-        return {gData, total: calcTotal(x, y, z)};
+        return { gData, total: calcTotal(x, y, z) };
     }
 
       
@@ -1325,11 +1417,13 @@ function Demo() {
 | renderFullLabel | Custom option render function, [Detailed Params and Usage](/en-US/navigation/tree#Advanced%20FullRender) | (obj) => ReactNode | 1.7.0 |
 | renderLabel | Custom label render function | (label:ReactNode, data:TreeNode) => ReactNode | 1.6.0 | 
 | renderSelectedItem | render selected item | Function | - | 1.26.0 | 
+| restTagsPopoverProps | The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     | PopoverProps     | {}        | 2.22.0 |
 | searchAutoFocus        | Whether autofocus for search box           | boolean      | false           | 1.27.0       |
 | searchPlaceholder        | Placeholder for search box                                                          | string                                                            | -           | -       |
 | searchPosition | Set the position of the search box, one of: `dropdown`、`trigger` | string | `dropdown` | 1.29.0 |
 | showClear | When the value is not empty, whether the trigger displays the clear button | boolean | false |  |
 | showFilteredOnly | Toggle whether to displayed filtered result only in search mode | boolean | false | 0.32.0 |
+| showRestTagsPopover | When the number of tags exceeds maxTagCount and hover reaches +N, whether to display the remaining content through Popover | boolean | false | 2.22.0 |
 | showSearchClear | Toggle whether to support clear search box | boolean | true | 0.35.0 |
 | size                     | Size for input box，one of `large`，`small`，`default`                              | string                                                            | `default`   | -       |
 | style                    | Inline style                                                                        | CSSProperties                                                            | -           | -       |

content/input/treeselect/index.md

@@ -66,7 +66,8 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 
 ### 多选
 
-设置 `multiple`，可以进行多选。多选情况下所有子项都被选择时，自动勾选显示其父项。通过设置 `maxTagCount` 属性，可以设置显示的标签数量上限。通过设置 `leafOnly` (>= v0.32.0) 属性，可以设置只展示叶子节点，同时 onChange 的回调入参也会只有叶子节点的值。
+设置 `multiple`，可以进行多选。多选情况下所有子项都被选择时，自动勾选显示其父项。  
+通过 `leafOnly` (>= v0.32.0) 属性，可以设置只展示叶子节点，同时 onChange 的回调入参也会只有叶子节点的值。  
 
 ```jsx live=true
 import React from 'react';
@@ -148,18 +149,111 @@ import { TreeSelect } from '@douyinfe/semi-ui';
                 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 treeData={treeData}
                 multiple
-                maxTagCount={2}
-                placeholder="当选中标签超过两个将折叠"
+                leafOnly
+                placeholder="只渲染叶子节点"
             />
             <br/>
             <br/>
+        </div>
+    );
+};
+```
+
+### 限制标签展示数量
+
+在多选的场景中，利用 `maxTagCount` 可以限制展示的标签数量，超出部分将以 +N 的方式展示。  
+使用 `showRestTagsPopover` (>= v2.22.0) 可以设置在超出 `maxTagCount` 后，hover +N 是否显示 Popover，默认为 `false`。并且，还可以在 `restTagsPopoverProps` 属性中配置 Popover。
+
+```jsx live=true
+import React from 'react';
+import { TreeSelect } from '@douyinfe/semi-ui';
+() => {
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                        {
+                            label: 'Chengdu',
+                            value: 'Chengdu',
+                            key: '0-0-2',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0'
+                        }
+                    ]
+                },
+            ],
+        },
+        {
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0'
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1'
+                }
+            ]
+        }
+    ];
+
+    const textStyle = { margin: '20px 0 10px' };
+
+    return ( 
+        <div>
+            <h4 style={textStyle}>maxTagCount=2:</h4>
             <TreeSelect
+                multiple
+                maxTagCount={2}
                 style={{ width: 300 }}
                 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 treeData={treeData}
+                placeholder="当选中标签超过两个将折叠"
+                defaultValue={['Beijing', 'Chengdu', 'Canada']}
+            />
+            <h4 style={textStyle}>maxTagCount=2, showRestTagsPopover:</h4>
+            <TreeSelect
+                showRestTagsPopover={true}
+                restTagsPopoverProps={{ position: 'top' }}
                 multiple
-                leafOnly
-                placeholder="只渲染叶子节点"
+                maxTagCount={2}
+                style={{ width: 300 }}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={treeData}
+                placeholder="hover +N 查看"
+                defaultValue={['Beijing', 'Chengdu', 'Canada']}
             />
         </div>
     );
@@ -682,7 +776,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -900,7 +994,7 @@ class Demo extends React.Component {
             const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
             return rec(z + 1);
         }
-        return {gData, total: calcTotal(x, y, z)};
+        return { gData, total: calcTotal(x, y, z) };
     }
 
       
@@ -1242,7 +1336,7 @@ function Demo() {
                 multiple
                 maxTagCount={2}
                 renderSelectedItem={(item, { index, onClose }) => {
-                    return  ({ 
+                    return ({ 
                         content: (
                             <Tag 
                                 key={index} 
@@ -1306,11 +1400,13 @@ function Demo() {
 | renderFullLabel | 完全自定义label的渲染函数，[入参及用法详见](/zh-CN/navigation/tree#高级定制) | (obj) => ReactNode | - | 1.7.0 | 
 | renderLabel | 自定义label的渲染函数，[入参及用法详见](/zh-CN/navigation/tree#自定义节点内容)  | (label:ReactNode, data:TreeNode) => ReactNode | - | 1.6.0 | 
 | renderSelectedItem | 自定义渲染已选项 | Function | - | 1.26.0 | 
+| restTagsPopoverProps | Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83) | PopoverProps     | {} | 2.22.0 |
 | searchAutoFocus | 搜索框自动聚焦 | boolean | false | 1.27.0 |
 | searchPlaceholder | 搜索框默认文字 | string | - | - |
 | searchPosition | 设置搜索框的位置，可选: `dropdown`、`trigger` | string | `dropdown` | 1.29.0 |
 | showClear | 当值不为空时，trigger 是否展示清除按钮  | boolean | false |  |
 | showFilteredOnly | 搜索状态下是否只展示过滤后的结果 | boolean | false | 0.32.0 |
+| showRestTagsPopover | 当超过 maxTagCount，hover 到 +N 时，是否通过 Popover 显示剩余内容 | boolean | false | 2.22.0 |
 | showSearchClear | 是否显示搜索框的清除按钮 | boolean | true | 0.35.0 |
 | size | 选择框大小，可选 `large`，`small`，`default` | string | `default` | - |
 | style | 选择框的样式  | CSSProperties | - | - |

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

@@ -166,7 +166,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
         color: 'var(--semi-color-white)',
     };
     
-    const hoverMask =  (<div style={style}>
+    const hoverMask = (<div style={style}>
         <IconCamera />
     </div>);
 
@@ -507,7 +507,7 @@ import { IconUpload, IconDownload, IconEyeOpened, IconDelete } from '@douyinfe/s
         }
     ];
     const renderFileOperation = (fileItem) => (
-        <div style={{ display: 'flex',columnGap: 8, padding: '0 8px' }}>
+        <div style={{ display: 'flex', columnGap: 8, padding: '0 8px' }}>
             <Button icon={<IconEyeOpened></IconEyeOpened>} type="tertiary" theme="borderless" size="small"></Button>
             <Button icon={<IconDownload></IconDownload>} type="tertiary" theme="borderless" size="small"></Button>
             <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type="tertiary" theme="borderless" size="small"></Button>
@@ -1313,6 +1313,7 @@ interface FileItem {
 |----|----|----|----|
 | insert | Upload file, when index is passed, it will be inserted at the specified position, if not passed, it will be inserted at the end | (files: Array<File\>, index?: number) => void | 2.2.0 |
 | upload | Start upload manually, use with uploadTrigger="custom" | () => void | |
+| openFileDialog | open file select Dialog | () => void | 2.21.0 |
 
 ## Content Guidelines
 - Upload button

content/input/upload/index.md

@@ -170,7 +170,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
         color: 'var(--semi-color-white)',
     };
     
-    const hoverMask =  (<div style={style}>
+    const hoverMask = (<div style={style}>
         <IconCamera />
     </div>);
 
@@ -511,16 +511,16 @@ import { IconUpload, IconDownload, IconEyeOpened } from '@douyinfe/semi-icons';
         }
     ];
     const renderFileOperation = (fileItem) => (
-        <div style={{display: 'flex',columnGap: 8, padding: '0 8px'}}>
+        <div style={{ display: 'flex', columnGap: 8, padding: '0 8px' }}>
             <Button icon={<IconEyeOpened></IconEyeOpened>} type="tertiary" theme="borderless" size="small"></Button>
             <Button icon={<IconDownload></IconDownload>} type="tertiary" theme="borderless" size="small"></Button>
             <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type="tertiary" theme="borderless" size="small"></Button>
         </div>
-    )
-    return <Upload action={action} defaultFileList={defaultFileList} itemStyle={{width: 300}} renderFileOperation={renderFileOperation}>
-            <Button icon={<IconUpload />} theme="light">点击上传</Button>
-        </Upload>
-    }
+    );
+    return <Upload action={action} defaultFileList={defaultFileList} itemStyle={{ width: 300 }} renderFileOperation={renderFileOperation}>
+        <Button icon={<IconUpload />} theme="light">点击上传</Button>
+    </Upload>;
+};
 ```
 
 ### 默认文件列表
@@ -726,7 +726,7 @@ import { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';
     const handlePreview = (file) => {
         const feature = "width=300,height=300";
         window.open(file.url, 'imagePreview', feature);
-    }
+    };
     return (
         <>
             <Upload
@@ -737,7 +737,7 @@ import { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';
                 multiple
                 defaultFileList={defaultFileList}
                 onPreviewClick={handlePreview}
-                renderPicPreviewIcon={()=><IconEyeOpened style={{color: 'var(--semi-color-white)', fontSize: 24 }} />}
+                renderPicPreviewIcon={()=><IconEyeOpened style={{ color: 'var(--semi-color-white)', fontSize: 24 }} />}
             >
                 <IconPlus size="extra-large" />
             </Upload>
@@ -1314,6 +1314,7 @@ interface FileItem {
 |----|----|----|----|
 | insert | 上传文件，当index传入时，会插入到指定位置，不传则插入到最后 | (files: Array<File\>, index?: number) => void | 2.2.0 |
 | upload | 手动开始上传，配合uploadTrigger="custom"使用 | () => void | |
+| openFileDialog | 打开文件选择窗口 | () => void | 2.21.0 |
 
 ## Accessibility
 

content/navigation/anchor/index-en-US.md

@@ -63,7 +63,7 @@ import { Anchor } from '@douyinfe/semi-ui';
                 getContainer={getContainer}
                 offsetTop={100}
                 targetOffset={100} // v>=1.9
-                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3}} >
+                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >
                 <Anchor.Link href="#Basic_Usage" title="Fixed Anchor" />
                 <Anchor.Link href="#Integrated_Usage" title="Integrated Usage" />
                 <Anchor.Link href="#Size" title="Size" />

content/navigation/anchor/index.md

@@ -50,7 +50,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 import React from 'react';
 import { Anchor } from '@douyinfe/semi-ui';
 
-() =>  {
+() => {
     const getContainer = () => {
         return document.querySelector('window');
     };
@@ -61,7 +61,7 @@ import { Anchor } from '@douyinfe/semi-ui';
                 getContainer={getContainer}
                 offsetTop={100}
                 targetOffset={100} // v>=1.9
-                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3}} >
+                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >
                 <Anchor.Link href="#基本示例" title="我是固定的 Anchor" />
                 <Anchor.Link href="#综合使用" title="综合使用" />
                 <Anchor.Link href="#尺寸" title="尺寸" />

content/navigation/breadcrumb/index-en-US.md

@@ -131,19 +131,19 @@ import { Breadcrumb, Typography } from '@douyinfe/semi-ui';
             <br/>
             <Text size="small">No truncation</Text>
             <Breadcrumb
-                showTooltip={{width: 'auto'}}
+                showTooltip={{ width: 'auto' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">Ellipsis from middle of text</Text>
             <Breadcrumb
-                showTooltip={{ellipsisPos: 'middle'}}
+                showTooltip={{ ellipsisPos: 'middle' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">Customize tooltip</Text>
             <Breadcrumb
-                showTooltip={{opts: {position: 'topLeft'}}}
+                showTooltip={{ opts: { position: 'topLeft' } }}
                 routes={routes}
             />
         </>

content/navigation/breadcrumb/index.md

@@ -135,19 +135,19 @@ import { Breadcrumb, Typography } from '@douyinfe/semi-ui';
             <br/>
             <Text size="small">不截断</Text>
             <Breadcrumb
-                showTooltip={{width: 'auto'}}
+                showTooltip={{ width: 'auto' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">从标题中间开始省略</Text>
             <Breadcrumb
-                showTooltip={{ellipsisPos: 'middle'}}
+                showTooltip={{ ellipsisPos: 'middle' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">自定义 Tooltip 参数</Text>
             <Breadcrumb
-                showTooltip={{opts: {position: 'topLeft'}}}
+                showTooltip={{ opts: { position: 'topLeft' } }}
                 routes={routes}
             />
         </>

content/navigation/navigation/index-en-US.md

@@ -340,7 +340,7 @@ class NavApp extends React.Component {
                                 </Dropdown.Menu>
                             }
                         >
-                            <Avatar size="small" color='light-blue' style={{margin: 4}}>BD</Avatar>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
                             <span>Bytedancer</span>
                         </Dropdown>
                     }
@@ -426,7 +426,7 @@ class NavApp extends React.Component {
                                 </Dropdown.Menu>
                             }
                         >
-                            <Avatar size="small" color='light-blue' style={{margin: 4}}>BD</Avatar>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
                             <span>Bytedancer</span>
                         </Dropdown>
                     </>
@@ -476,19 +476,19 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[
-                    {itemKey:'user', text:'User Management', icon: <IconUser /> },
-                    {itemKey:'union', text:'guild center', icon: <IconStar /> },
+                    { itemKey: 'user', text: 'User Management', icon: <IconUser /> },
+                    { itemKey: 'union', text: 'guild center', icon: <IconStar /> },
                     {
-                        text:'Task platform',
+                        text: 'Task platform',
                         icon: <IconSetting />,
-                        itemKey:'job',
-                        items: ['task management','user task query'],
+                        itemKey: 'job',
+                        items: ['task management', 'user task query'],
                     },
                 ]}
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text:'Live broadcast operation background'
+                    text: 'Live broadcast operation background'
                 }}
                 footer={{
                     collapseButton: true,
@@ -521,28 +521,28 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[
-                    {itemKey:'user', text:'User Management', icon: <IconUser /> },
+                    { itemKey: 'user', text: 'User Management', icon: <IconUser /> },
                     {
-                        text:'Task platform',
+                        text: 'Task platform',
                         icon: <IconSetting />,
-                        itemKey:'job',
+                        itemKey: 'job',
                         items: ['Task Management', {
-                            text:'Task 1',
+                            text: 'Task 1',
                             icon: <IconSetting />,
-                            itemKey:'mission1',
-                            items: ['Task 2',{
-                                text:'Task 3 disassembly',
+                            itemKey: 'mission1',
+                            items: ['Task 2', {
+                                text: 'Task 3 disassembly',
                                 icon: <IconSetting />,
-                                itemKey:'mission3',
-                                items: ['Subtask 1','Subtask 2'],
+                                itemKey: 'mission3',
+                                items: ['Subtask 1', 'Subtask 2'],
                             }, ],
-                        },],
+                        }, ],
                     },
                 ]}
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text:'Live broadcast operation background'
+                    text: 'Live broadcast operation background'
                 }}
                 footer={{
                     collapseButton: true,
@@ -768,6 +768,14 @@ function NavApp (props = {}) {
 | collapseText   | Title of the collapse button                                                                                                      | (collapsed:boolean) => string\|ReactNode |         | 0.35.0  |
 | style          | Outermost style                                                                                                                   | object                                    |         |         |
 
+## Accessibility
+- ### Keyboard and Focus
+- Each clickable item in the Navigation can be focused, use `Tab` and `Shift + Tab` to switch focus between each other, and each link can be activated by the `Enter` key
+- When an item can be opened popup
+  - The way to open the popup layer is hover : when the item is focused, the popup layer opens. Keyboard users can use the down arrow to move the focus to the bullet layer, and the Esc key can return the focus to the item
+  - The way to open the popup layer is click : when the item is focused, click the Enter key to open the popup layer. Keyboard users can use the down arrow to move the focus to the bullet layer, and the Esc key can return the focus to the item
+  -Keyboard interaction does not fully support nested scenes
+
 ## Content Guidelines
 
 - Navigation bar menu uses sentence case format

content/navigation/navigation/index.md

@@ -42,7 +42,7 @@ class NavApp extends React.Component {
                 bodyStyle={{ height: 320 }}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-                    { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                    { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
                     {
                         text: '任务平台',
                         icon: <IconSetting />,
@@ -82,11 +82,11 @@ class NavApp extends React.Component {
                 defaultOpenKeys={[ 'job' ]}
                 items={[
                     { itemKey: 'user', text: '用户管理' },
-                    { itemKey: 'union', text: '公会中心' },
+                    { itemKey: 'union', text: '活动管理' },
                     {
                         itemKey: 'union-management',
-                        text: '公会管理',
-                        items: ['公告设置', '公会查询', '信息录入']
+                        text: '任务管理',
+                        items: ['公告设置', '任务查询', '信息录入']
                     },
                     {
                         text: '任务平台',
@@ -123,7 +123,7 @@ class NavApp extends React.Component {
                 bodyStyle={{ height: 320 }}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-                    { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                    { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
                     {
                         text: '任务平台',
                         icon: <IconSetting />,
@@ -165,7 +165,7 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job', 'resource']}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-                    { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                    { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
                     {
                         text: '任务平台',
                         icon: <IconSetting />,
@@ -212,14 +212,14 @@ class NavApp extends React.Component {
                 onClick={data => console.log('trigger onClick: ', data)}
             >
                 <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'Semi 运营后台'} />
-                <Nav.Item itemKey={'union'} text={'公会中心'} icon={<IconStar />} />
+                <Nav.Item itemKey={'union'} text={'活动管理'} icon={<IconStar />} />
                 <Nav.Sub itemKey={'user'} text="用户管理" icon={<IconUser />}>
-                    <Nav.Item itemKey={'golder'} text={'金主管理'} />
-                    <Nav.Item itemKey={'ban'} text={'用户封禁'} />
+                    <Nav.Item itemKey={'active'} text={'活跃用户'} />
+                    <Nav.Item itemKey={'negative'} text={'非活跃用户'} />
                 </Nav.Sub>
-                <Nav.Sub itemKey={'union-management'} text="公会管理" icon={<IconUserGroup />}>
-                    <Nav.Item itemKey={'notice'} text={'公告设置'} />
-                    <Nav.Item itemKey={'query'} text={'公会查询'} />
+                <Nav.Sub itemKey={'union-management'} text="任务管理" icon={<IconUserGroup />}>
+                    <Nav.Item itemKey={'notice'} text={'任务设置'} />
+                    <Nav.Item itemKey={'query'} text={'任务查询'} />
                     <Nav.Item itemKey={'info'} text={'信息录入'} />
                 </Nav.Sub>
                 <Nav.Footer collapseButton={true} />
@@ -234,10 +234,9 @@ class NavApp extends React.Component {
 
 Navigation 目前提供两种方向的导航：
 
--   垂直方向（默认）
--   水平方向
+-   垂直方向（默认）,  `mode = "vertical"`
+-   水平方向, `mode = "horizontal"`
 
-你可以通过 `mode = "vertical"` （默认）或者 `mode = "horizontal"` 来控制。
 
 特别注意的是，有一些功能（参数）仅在 `mode = "vertical"` 时有效：
 
@@ -260,18 +259,18 @@ class NavApp extends React.Component {
                     bodyStyle={{ height: 320 }}
                     items={[
                         { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-                        { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                        { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
                         {
                             itemKey: 'union-management',
-                            text: '公会管理',
+                            text: '任务管理',
                             icon: <IconUserGroup />,
-                            items: ['公告设置', '公会查询', '信息录入']
+                            items: ['任务设置', '任务查询', '信息录入']
                         },
                         {
-                            text: '任务平台',
+                            text: '公告管理',
                             icon: <IconSetting />,
                             itemKey: 'job',
-                            items: ['任务管理', '用户任务查询'],
+                            items: ['推送管理', '已推送查询'],
                         },
                     ]}
                     onSelect={key => console.log(key)}
@@ -304,7 +303,7 @@ class NavApp extends React.Component {
                     mode={'horizontal'}
                     items={[
                         { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-                        { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                        { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
                         {
                             itemKey: 'approve-management',
                             text: '审批管理',
@@ -343,7 +342,7 @@ class NavApp extends React.Component {
                                 </Dropdown.Menu>
                             }
                         >
-                            <Avatar size="small" color='light-blue' style={{margin: 4}}>BD</Avatar>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
                             <span>Bytedancer</span>
                         </Dropdown>
                     }
@@ -367,12 +366,12 @@ class NavApp extends React.Component {
     constructor() {
         this.items = [
             { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-            { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+            { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
             {
                 itemKey: 'union-management',
-                text: '公会管理',
+                text: '任务管理',
                 icon: <IconUserGroup />,
-                items: ['公告设置', '公会查询', '信息录入']
+                items: ['公告设置', '任务查询', '信息录入']
             },
             {
                 itemKey: 'approve-management',
@@ -419,7 +418,7 @@ class NavApp extends React.Component {
                             <Select.Option value='Korean'>한국어</Select.Option>
                             <Select.Option value='Japanese'>日本語</Select.Option>
                         </Select>
-                        <Button style={{ marginRight: 10 }}>切换至海外版</Button>
+                        <Button style={{ marginRight: 10 }}>切换至全球版</Button>
                         <Dropdown
                             position="bottomRight"
                             render={
@@ -429,7 +428,7 @@ class NavApp extends React.Component {
                                 </Dropdown.Menu>
                             }
                         >
-                            <Avatar size="small" color='light-blue' style={{margin: 4}}>BD</Avatar>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
                             <span>Bytedancer</span>
                         </Dropdown>
                     </>
@@ -480,7 +479,7 @@ class NavApp extends React.Component {
                 bodyStyle={{ height: 320 }}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-                    { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                    { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
                     {
                         text: '任务平台',
                         icon: <IconSetting />,
@@ -533,13 +532,15 @@ class NavApp extends React.Component {
                             text: '任务1',
                             icon: <IconSetting />,
                             itemKey: 'mission1',
-                            items: ['任务2',{
-                                text: '任务3拆解',
-                                icon: <IconSetting />,
-                                itemKey: 'mission3',
-                                items: ['子任务1', '子任务2'],
-                            }, ],
-                        },],
+                            items: ['任务2',
+                                {
+                                    text: '任务3拆解',
+                                    icon: <IconSetting />,
+                                    itemKey: 'mission3',
+                                    items: ['子任务1', '子任务2'],
+                                }
+                            ],
+                        }],
                     },
                 ]}
                 onSelect={key => console.log(key)}
@@ -580,12 +581,12 @@ class NavApp extends React.Component {
                 bodyStyle={{ height: 320 }}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-                    { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                    { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
                     {
                         itemKey: 'union-management',
-                        text: '公会管理',
+                        text: '任务管理',
                         icon: <IconUserGroup />,
-                        items: ['公告设置', '公会查询', '信息录入']
+                        items: ['公告设置', '任务查询', '信息录入']
                     },
                     {
                         text: '任务平台',
@@ -649,12 +650,12 @@ function NavApp (props = {}) {
 
     const items = useMemo(() => [
         { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-        { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+        { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
         {
             itemKey: 'union-management',
-            text: '公会管理',
+            text: '任务管理',
             icon: <IconUserGroup />,
-            items: ['公告设置', '公会查询', '信息录入']
+            items: ['公告设置', '任务查询', '信息录入']
         },
         {
             text: '任务平台',
@@ -690,10 +691,10 @@ function NavApp (props = {}) {
 
 ### Nav
 
-| 属性                | 类型                                                                                                                             | 描述                                                                                                                           | 默认值     |
+| 属性                | 描述                                                                                                                             | 类型                                                                                                                           | 默认值     |
 | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------- |
-| bodyStyle           | 导航项列表的自定义样式                                                                             | object                                                                                                                           |           |
-| className           | 最外层元素的样式名                                                                               | boolean                                                                                                                          |           |
+| bodyStyle           | 导航项列表的自定义样式                                                                             | CSSProperties                                                                                                                           |           |
+| className           | 最外层元素的样式名                                                                               | string                                                                                                                          |           |
 | defaultIsCollapsed  | 默认是否处于收起状态，仅 `mode = "vertical"` 时有效                                                    | boolean                                                                                                                          | false     |
 | defaultOpenKeys     | 初始打开的子导航 `itemKey` 数组，仅 `mode = "vertical"` 且侧边栏处于展开状态时有效                               | string[]                                                                                                                         | []        |
 | defaultSelectedKeys | 初始选中的导航项 `itemKey` 数组                                                                   | string[]                                                                                                                         | []        |
@@ -702,7 +703,7 @@ function NavApp (props = {}) {
 | isCollapsed         | 是否处于收起状态的受控属性，仅 `mode = "vertical"` 时有效                                                 | boolean                                                                                                                          |           |
 | items               | 导航项目列表，每一项可以继续带有 items 属性。如果为 string 数组，则会取每一项作为 text 和 itemKey                         | object\| string[] \| [Item](#Nav.Item)[] \| [Sub](#Nav.Sub)[] |  |
 | limitIndent         | 解除缩进限制，可使用 level 自定义导航项缩进，水平模式只能为true >=1.27.0                                          | boolean                                                                                                                          | true      |
-| mode                | 导航类型，目前支持横向与竖直，可选值：`vertical`\                                                          | `horizontal`                                                                                                                     | string    | `vertical`           |
+| mode                | 导航类型，目前支持横向与竖直，可选值：`vertical`/| `horizontal`                                                                                                                     | string    | `vertical`           |
 | openKeys            | 受控的打开的子导航 `itemKey` 数组，配合 `onOpenChange` 回调控制子导航项展开，仅 `mode = "vertical"` 且侧边栏处于展开状态时有效 | string[]                                                                                                                         |           |
 | prefixCls           | 类名前缀                                                                                    | string                                                                                                                           | `semi`    |
 | selectedKeys        | 受控的导航项 `itemKey` 数组，配合 `onSelect` 回调控制导航项选择                                             | string[]                                                                                                                         |           |
@@ -713,10 +714,10 @@ function NavApp (props = {}) {
 | toggleIconPosition  | 带有子导航项的的父级导航项箭头位置 >=1.27.0                                                              | 'left' \| 'right'   | 'right'              |
 | tooltipHideDelay    | tooltip 隐藏的延迟，collapse 为 true 时有效，单位为 ms                                                | number                                                                                                                           | 100       |
 | tooltipShowDelay    | tooltip 显示的延迟，collapse 为 true 时有效，单位为 ms                                                | number                                                                                                                           | 0         |
-| onClick             | 点击任意导航项时触发                                                                              | ({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => {}                                                               | () => {}  |
-| onCollapseChange    | 收起状态变化时的回调                                                                              | (isCollapsed: boolean) => {}                                                                                                     | () => {}  |
-| onOpenChange        | 切换某个子导航项目显隐状态时触发                                                                        | ({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => {}                                           | () => {}  |
-| onSelect            | 第一次选中某个可选中导航项目时触发，其中 selectedItems 这个字段版本 >= 0.17.0 后才支持 | ({ itemKey: string, selectedKeys: string[], selectedItems: [Item](#Nav.Item)[], domEvent: MouseEvent, isOpen: boolean }) => {} | () => {}  |
+| onClick             | 点击任意导航项时触发                                                                              |<ApiType detail='({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void'>（itemKey, event, isOpen）=> void </ApiType>                                                                | () => {}  |
+| onCollapseChange    | 收起状态变化时的回调                                                                              |<ApiType detail='(isCollapsed: boolean) => void'>(isCollapsed)=>{} </ApiType>                                                                                                     | () => {}  |
+| onOpenChange        | 切换某个子导航项目显隐状态时触发                                                                    | <ApiType detail='({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void'> ({itemKey, openKeys, event, isOpen})=>{}</ApiType>                                      | () => {}  |
+| onSelect            | 第一次选中某个可选中导航项目时触发，其中 selectedItems 这个字段版本 >= 0.17.0 后才支持 | <ApiType detail='({ itemKey: string, selectedKeys: string[], selectedItems: Item[], domEvent: MouseEvent, isOpen: boolean }) => void'>(onSelectProps)=>{}</ApiType> | () => {}  |
 
 ### Nav.Item
 
@@ -765,14 +766,22 @@ function NavApp (props = {}) {
 
 ### Nav.Footer
 
-| 属性           | 描述                                                                                     | 类型                                      | 默认值 | 版本           |
-| -------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------- | ------ | -------------- |
-| children       | 子元素                                                                                   | ReactNode                                 |        |                |
-| className      | 最外层样式名                                                                             | string                                    |        |                |
-| collapseButton | 是否展示底部“收起侧边栏”按钮，mode="vertical" 且 Footer 组件的 children 参数为空才有效果 | boolean\|ReactNode                        | false  |                |
-| collapseText   | “收起”按钮的文案                                                                         | (collapsed:boolean) => string\|ReactNode |        | 0.35.0 |
-| style          | 最外层样式                                                                               | CSSProperties                                    |        |                |
-
+| 属性           | 描述                                                                                     | 类型                                      | 默认值 |
+| -------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------- | ------ |
+| children       | 子元素                                                                                   | ReactNode                                 |        |         
+| className      | 最外层样式名                                                                             | string                                    |        |      
+| collapseButton | 是否展示底部“收起侧边栏”按钮，mode="vertical" 且 Footer 组件的 children 参数为空才有效果 | boolean\|ReactNode                        | false  |          
+| collapseText   | “收起”按钮的文案                                                                         | (collapsed:boolean) => string\|ReactNode |        |
+| style          | 最外层样式                                                                               | CSSProperties                                    |        |  
+
+
+## Accessibility
+- ### 键盘和焦点
+- Navigation 内的每个可点击 item 都可以被聚焦，相互之间使用 `Tab` 及 `Shift  + Tab` 切换焦点，并且可以通过 `Enter` 键激活每个链接
+- 当某个 item 可被打开弹层时
+  - 打开弹层方式为 hover ：该 item 被聚焦时，弹层打开。键盘用户可以通过下箭头将焦点移动到弹层上，`Esc` 键可以将焦点返回到 item 上
+  - 打开弹层的方式为 click ：该 item 被聚焦时，点击 Enter 键，打开弹层。键盘用户可以通过下箭头将焦点移动到弹层上，`Esc` 键可以将焦点返回到 item 上
+  - 键盘交互暂未完整支持嵌套场景
 
 ## 文案规范
 

content/navigation/steps/index.md

@@ -67,8 +67,8 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{ display:'flex',justifyContent:'center' }}>
-        <Steps type="nav" current={1} style={{ margin:'auto' }}>
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Steps type="nav" current={1} style={{ margin: 'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />
@@ -101,8 +101,8 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{ display:'flex',justifyContent:'center' }}>
-        <Steps type="nav" size="small" current={1} style={{ margin:'auto' }}>
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />

content/navigation/tabs/index-en-US.md

@@ -499,9 +499,9 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                { tab: 'Doc', itemKey:'1', text:'Doc', closable:true },
-                { tab: 'Quick Start', itemKey:'2', text:'Quick Start', closable:true },
-                { tab: 'Help', itemKey:'3', text:'Help' },
+                { tab: 'Doc', itemKey: '1', text: 'Doc', closable: true },
+                { tab: 'Quick Start', itemKey: '2', text: 'Quick Start', closable: true },
+                { tab: 'Help', itemKey: '3', text: 'Help' },
             ]
         };
     }
@@ -509,7 +509,7 @@ class App extends React.Component {
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({ tabList:newTabList });
+        this.setState({ tabList: newTabList });
     }
     render() {
         return (

content/navigation/tabs/index.md

@@ -523,9 +523,9 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                { tab: '文档', itemKey:'1', text:'文档', closable:true },
-                { tab: '快速起步', itemKey:'2', text:'快速起步', closable:true },
-                { tab: '帮助', itemKey:'3', text:'帮助' },
+                { tab: '文档', itemKey: '1', text: '文档', closable: true },
+                { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
+                { tab: '帮助', itemKey: '3', text: '帮助' },
             ]
         };
     }
@@ -533,7 +533,7 @@ class App extends React.Component {
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({ tabList:newTabList });
+        this.setState({ tabList: newTabList });
     }
     render() {
         return (

content/navigation/tree/index-en-US.md

@@ -454,8 +454,8 @@ import { Tree } from '@douyinfe/semi-ui';
         <Tree
             treeDataSimpleJson={json}
             multiple
-            onChange={e => console.log('All selected values: ',e)}
-            onSelect={e => console.log('Current item: ',e)}
+            onChange={e => console.log('All selected values: ', e)}
+            onSelect={e => console.log('Current item: ', e)}
             style={style}
         />
 
@@ -1095,7 +1095,7 @@ class Demo extends React.Component {
     constructor() {
         super();
         this.state = {
-            expandedKeys: ['0','0-0']
+            expandedKeys: ['0', '0-0']
         };
     }
     onExpand(value) {

content/navigation/tree/index.md

@@ -1117,7 +1117,7 @@ class Demo extends React.Component {
     constructor() {
         super();
         this.state = {
-            expandedKeys: ['0','0-0']
+            expandedKeys: ['0', '0-0']
         };
     }
     onExpand(value) {

content/order.js

@@ -52,6 +52,7 @@ const order = [
     'descriptions',
     'dropdown',
     'empty',
+    'image',
     'list',
     'modal',
     'overflowlist',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 71
+order: 72
 category: Other
 title: ConfigProvider
 icon: doc-configprovider
@@ -82,17 +82,17 @@ import en_GB from '@douyinfe/semi-ui/locale/source/en_GB';
 function Demo(props = {}) {
     const { Option } = Select;
     const [direction, setDirection] = useState();
-    const flexStyle = {display: 'flex', marginBottom: 32, flexWrap: 'wrap'};
-    const titleStyle = {margin: '50px 0 16px 0'};
-    const rowStyle = {margin: '16px 10px'};
+    const flexStyle = { display: 'flex', marginBottom: 32, flexWrap: 'wrap' };
+    const titleStyle = { margin: '50px 0 16px 0' };
+    const rowStyle = { margin: '16px 10px' };
     const badgeStyle = {
         width: '42px',
         height: '42px',
         borderRadius: '4px',
         display: 'inline-block',
     };
-    const tagStyle = {marginRight: 8, marginBottom: 8};
-    const buttonStyle = {...tagStyle};
+    const tagStyle = { marginRight: 8, marginBottom: 8 };
+    const buttonStyle = { ...tagStyle };
     const opts = {
         title: 'Hi,Bytedance',
         content: 'ies dance dance dance',
@@ -174,30 +174,30 @@ function Demo(props = {}) {
                         <br/><br/>
                         <Input prefix="Prefix" showClear></Input>
                         <br/><br/>
-                        <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
+                        <Input suffix={<Typography.Text strong type='secondary' style={{ margin: '0 8px' }}>Suffix</Typography.Text>} showClear></Input>
                         <br/><br/>
                         <TextArea placeholder="Input something" maxCount={100} />
                         <br/><br/>
                         <div style={flexStyle}>
-                            <Switch style={{marginRight: 8}} defaultChecked={true}></Switch>
-                            <Switch style={{marginRight: 8}}></Switch>
-                            <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
+                            <Switch style={{ marginRight: 8 }} defaultChecked={true}></Switch>
+                            <Switch style={{ marginRight: 8 }}></Switch>
+                            <Switch disabled defaultChecked={true} style={{ marginRight: 8 }}></Switch>
                         </div>
                         <div style={flexStyle}>
-                            <Checkbox style={{marginRight: 8}} defaultChecked>Checkbox</Checkbox>
-                            <Checkbox style={{marginRight: 8}} disabled defaultChecked>Disabled Checkbox</Checkbox>
-                            <Checkbox style={{marginRight: 8}} disabled>Disabled Checkbox</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} defaultChecked>Checkbox</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} disabled defaultChecked>Disabled Checkbox</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} disabled>Disabled Checkbox</Checkbox>
                         </div>
-                        <div style={{...flexStyle, marginBottom: 0}}>
-                            <Radio style={{marginRight: 8}} defaultChecked>Radio</Radio>
-                            <Radio style={{marginRight: 8}} disabled defaultChecked>Disabled Radio</Radio>
-                            <Radio style={{marginRight: 8}} disabled>Disabled Radio</Radio>
+                        <div style={{ ...flexStyle, marginBottom: 0 }}>
+                            <Radio style={{ marginRight: 8 }} defaultChecked>Radio</Radio>
+                            <Radio style={{ marginRight: 8 }} disabled defaultChecked>Disabled Radio</Radio>
+                            <Radio style={{ marginRight: 8 }} disabled>Disabled Radio</Radio>
                         </div>
                     </Col>
                     <Col span={12}>
-                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
+                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{ width: '100%' }}/>
                         <br/><br/>
-                        <TimePicker style={{width: '100%'}} />
+                        <TimePicker style={{ width: '100%' }} />
                         <br/><br/>
                         <Select style={{ width: '100%' }} placeholder="Select-single">
                             <Option value='abc'>Semi</Option>
@@ -313,12 +313,12 @@ function Demo(props = {}) {
                         <Tag color='white' style={tagStyle}> white tag </Tag>
                     </div>
                     <br/>
-                    <div style={{display: 'flex', alignItems: 'center'}}>
-                        <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Popover content={'hi semi-design'} style={{ padding: 8 }}><Tag style={{ marginRight: 8 }}>I am Popover</Tag></Popover>
                         <Tooltip content={'hi semi-design'}>
-                            <Tag style={{marginRight: 8}}>I am Tooltip</Tag>
+                            <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>
                         </Tooltip>
-                        <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
+                        <Rating defaultValue={3} size='small' style={{ marginRight: 8 }} />
                     </div>
                     <br/>
                     <Timeline>
@@ -409,7 +409,7 @@ If you want to accurately set the time zone of a region, it is recommended to us
 
 ```diff
 # webpack config example: webpack.config.js
-const SemiWebpackPlugin = require('@douyinfe/semi-webpack-plugin');
+const SemiWebpackPlugin = require('@douyinfe/semi-webpack-plugin').default;
 module.exports = {
 +    plugins: [new SemiWebpackPlugin({ prefixCls: 'imes' })],
 }

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 71
+order: 72
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider
@@ -85,17 +85,17 @@ import { IconVigoLogo, IconEdit, IconCamera, IconList, IconSidebar, IconChevronD
 function Demo(props = {}) {
     const { Option } = Select;
     const [direction, setDirection] = useState();
-    const flexStyle = {display: 'flex', marginBottom: 32, flexWrap: 'wrap'};
-    const titleStyle = {margin: '50px 0 16px 0'};
-    const rowStyle = {margin: '16px 10px'};
+    const flexStyle = { display: 'flex', marginBottom: 32, flexWrap: 'wrap' };
+    const titleStyle = { margin: '50px 0 16px 0' };
+    const rowStyle = { margin: '16px 10px' };
     const badgeStyle = {
         width: '42px',
         height: '42px',
         borderRadius: '4px',
         display: 'inline-block',
     };
-    const tagStyle = {marginRight: 8, marginBottom: 8};
-    const buttonStyle = {...tagStyle};
+    const tagStyle = { marginRight: 8, marginBottom: 8 };
+    const buttonStyle = { ...tagStyle };
     const opts = {
         title: 'Hi,Bytedance',
         content: 'ies dance dance dance',
@@ -177,30 +177,30 @@ function Demo(props = {}) {
                         <br/><br/>
                         <Input prefix="Prefix" showClear></Input>
                         <br/><br/>
-                        <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
+                        <Input suffix={<Typography.Text strong type='secondary' style={{ margin: '0 8px' }}>Suffix</Typography.Text>} showClear></Input>
                         <br/><br/>
                         <TextArea placeholder="文本框" maxCount={100} />
                         <br/><br/>
                         <div style={flexStyle}>
-                            <Switch style={{marginRight: 8}} defaultChecked={true}></Switch>
-                            <Switch style={{marginRight: 8}}></Switch>
-                            <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
+                            <Switch style={{ marginRight: 8 }} defaultChecked={true}></Switch>
+                            <Switch style={{ marginRight: 8 }}></Switch>
+                            <Switch disabled defaultChecked={true} style={{ marginRight: 8 }}></Switch>
                         </div>
                         <div style={flexStyle}>
-                            <Checkbox style={{marginRight: 8}} defaultChecked>多选框</Checkbox>
-                            <Checkbox style={{marginRight: 8}} disabled defaultChecked>禁用的多选框</Checkbox>
-                            <Checkbox style={{marginRight: 8}}>禁用的多选框</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} defaultChecked>多选框</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} disabled defaultChecked>禁用的多选框</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }}>禁用的多选框</Checkbox>
                         </div>
-                        <div style={{...flexStyle, marginBottom: 0}}>
-                            <Radio style={{marginRight: 8}} defaultChecked>单选框</Radio>
-                            <Radio style={{marginRight: 8}} disabled defaultChecked>禁用的单选框</Radio>
-                            <Radio style={{marginRight: 8}}>禁用的单选框</Radio>
+                        <div style={{ ...flexStyle, marginBottom: 0 }}>
+                            <Radio style={{ marginRight: 8 }} defaultChecked>单选框</Radio>
+                            <Radio style={{ marginRight: 8 }} disabled defaultChecked>禁用的单选框</Radio>
+                            <Radio style={{ marginRight: 8 }}>禁用的单选框</Radio>
                         </div>
                     </Col>
                     <Col span={12}>
-                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
+                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{ width: '100%' }}/>
                         <br/><br/>
-                        <TimePicker style={{width: '100%'}} />
+                        <TimePicker style={{ width: '100%' }} />
                         <br/><br/>
                         <Select style={{ width: '100%' }} placeholder="选择器-单选">
                             <Option value='abc'>抖音</Option>
@@ -316,12 +316,12 @@ function Demo(props = {}) {
                         <Tag color='white' style={tagStyle}> white tag </Tag>
                     </div>
                     <br/>
-                    <div style={{display: 'flex', alignItems: 'center'}}>
-                        <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Popover content={'hi semi-design'} style={{ padding: 8 }}><Tag style={{ marginRight: 8 }}>I am Popover</Tag></Popover>
                         <Tooltip content={'hi semi-design'}>
-                            <Tag style={{marginRight: 8}}>I am Tooltip</Tag>
+                            <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>
                         </Tooltip>
-                        <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
+                        <Rating defaultValue={3} size='small' style={{ marginRight: 8 }} />
                     </div>
                     <br/>
                     <Timeline>
@@ -348,7 +348,7 @@ function Demo(props = {}) {
                         style={buttonStyle}
                         ghost={false}
                         icon={<IconVigoLogo />}
-                        onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{color: 'pink'}} /> })}
+                        onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}
                     />
                     <br/>
                     <Button type='primary' onClick={() => Modal.success(opts)} style={buttonStyle}>成功信息的弹窗</Button>
@@ -411,7 +411,7 @@ function Demo(props = {}) {
 
 ```diff
 # webpack配置示例
-const SemiWebpackPlugin = require('@douyinfe/semi-webpack-plugin');
+const SemiWebpackPlugin = require('@douyinfe/semi-webpack-plugin').default;
 module.exports = {
 +    plugins: [new SemiWebpackPlugin({ prefixCls: 'imes' })],
 }

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 72
+order: 73
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider
@@ -52,6 +52,7 @@ import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
 import de from '@douyinfe/semi-ui/lib/es/locale/source/de';
 import fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';
+import ro from '@douyinfe/semi-ui/lib/es/locale/source/fr';
 
 import { LocaleProvider } from '@douyinfe/semi-ui';
 
@@ -83,10 +84,10 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <LocaleProvider locale={en_GB}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
                 <LocaleProvider locale={ja_JP}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
             </>
         );
@@ -94,6 +95,56 @@ class I18nDemo extends React.Component {
 }
 ```
 
+### Custom Internationalization Component
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
+import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
+import { LocaleProvider, LocaleConsumer } from '@douyinfe/semi-ui';
+
+class I18nCustomDemo extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <>
+                <LocaleProvider locale={zh_CN}>
+                    <CustomComponent />
+                </LocaleProvider>
+                <LocaleProvider locale={en_GB}>
+                    <CustomComponent />
+                </LocaleProvider>
+            </>
+        );
+    }
+}
+
+const CUSTOM_TEXT_MAP = {
+    'zh-CN': '你好',
+    'en-GB': 'hello'
+};
+
+class CustomComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return <LocaleConsumer componentName="code">
+            {
+                (locale) => (
+                    CUSTOM_TEXT_MAP[locale || 'zh-CN']
+                )
+            }
+        </LocaleConsumer>;
+    }
+}
+
+render(CustomComponent);
+
+```
+
 ### Components that support multilingualism
 
 The example gives all the current multilingual components
@@ -118,6 +169,7 @@ import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
 import de from '@douyinfe/semi-ui/lib/es/locale/source/de';
 import fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';
+import ro from '@douyinfe/semi-ui/lib/es/locale/source/ro';
 import { LocaleProvider, ConfigProvider, Pagination, Modal, Button, Select, Cascader, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography } from '@douyinfe/semi-ui';
 
 class I18nDemo extends React.Component {
@@ -146,7 +198,8 @@ class I18nDemo extends React.Component {
             es,
             de,
             it,
-            fr
+            fr,
+            ro
         };
         this.setState({ locale: language[code], localeCode: code });
     }
@@ -243,10 +296,10 @@ class I18nDemo extends React.Component {
                         />
                     </div>
                     <h5>DatePicker</h5>
-                    <DatePicker style={{ ...style, width: 250}} />
-                    <DatePicker style={{ ...style, width: 300}} type='dateTime' />
-                    <DatePicker style={{ ...style, width: 300}} type='dateRange' />
-                    <DatePicker style={{ ...style, width: 450}} type='dateTimeRange' />
+                    <DatePicker style={{ ...style, width: 250 }} />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateTime' />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateRange' />
+                    <DatePicker style={{ ...style, width: 450 }} type='dateTimeRange' />
                     <h5>TimePicker</h5>
                     <TimePicker style={style} />
                     <TimePicker use12Hours style={style} /><br/><br/>
@@ -267,7 +320,7 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <div style={{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 20 }}>
-                    <Select onChange={this.onLanguageChange} insetLabel='Switch Language' style={{width: 250}} defaultValue='en_GB'>
+                    <Select onChange={this.onLanguageChange} insetLabel='Switch Language' style={{ width: 250 }} defaultValue='en_GB'>
                         <Select.Option value='zh_CN'>Chinese</Select.Option>
                         <Select.Option value='en_GB'>English</Select.Option>
                         <Select.Option value='ja_JP'>Japanese</Select.Option>
@@ -283,6 +336,7 @@ class I18nDemo extends React.Component {
                         <Select.Option value='de'>German</Select.Option>
                         <Select.Option value='it'>Italian</Select.Option>
                         <Select.Option value='fr'>French</Select.Option>
+                        <Select.Option value='ro'>Romanian</Select.Option>
                     </Select>
                 </div>
                 <LocaleProvider locale={locale}>

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 72
+order: 73
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n
@@ -50,6 +50,7 @@ import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
 import de from '@douyinfe/semi-ui/lib/es/locale/source/de';
 import fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';
+import ro from '@douyinfe/semi-ui/lib/es/locale/source/ro';
 
 import { LocaleProvider } from '@douyinfe/semi-ui';
 
@@ -82,10 +83,10 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <LocaleProvider locale={en_GB}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
                 <LocaleProvider locale={ja_JP}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
             </>
         );
@@ -93,6 +94,55 @@ class I18nDemo extends React.Component {
 }
 ```
 
+### 自定义国际化组件
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
+import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
+import { LocaleProvider, LocaleConsumer } from '@douyinfe/semi-ui';
+
+class I18nCustomDemo extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <>
+                <LocaleProvider locale={zh_CN}>
+                    <CustomComponent />
+                </LocaleProvider>
+                <LocaleProvider locale={en_GB}>
+                    <CustomComponent />
+                </LocaleProvider>
+            </>
+        );
+    }
+}
+
+const CUSTOM_TEXT_MAP = {
+    'zh-CN': '你好',
+    'en-GB': 'hello'
+};
+
+class CustomComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return <LocaleConsumer componentName="code">
+            {
+                (locale) => (
+                    CUSTOM_TEXT_MAP[locale || 'zh-CN']
+                )
+            }
+        </LocaleConsumer>;
+    }
+}
+
+render(CustomComponent);
+```
+
 ### 支持多语言的组件
 
 示例给出了目前所有支持多语言的组件
@@ -120,6 +170,7 @@ import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
 import de from '@douyinfe/semi-ui/lib/es/locale/source/de';
 import fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';
+import ro from '@douyinfe/semi-ui/lib/es/locale/source/ro';
 import { LocaleProvider, ConfigProvider, Pagination, Modal, Button, Select, Cascader, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography } from '@douyinfe/semi-ui';
 
 class I18nDemo extends React.Component {
@@ -150,7 +201,8 @@ class I18nDemo extends React.Component {
             'es': es,
             de,
             it,
-            fr
+            fr,
+            ro
         };
         this.setState({ locale: language[code], localeCode: code });
     }
@@ -247,10 +299,10 @@ class I18nDemo extends React.Component {
                         />
                     </div>
                     <h5>DatePicker</h5>
-                    <DatePicker style={{ ...style, width: 250}} />
-                    <DatePicker style={{ ...style, width: 300}} type='dateTime' />
-                    <DatePicker style={{ ...style, width: 300}} type='dateRange' />
-                    <DatePicker style={{ ...style, width: 450}} type='dateTimeRange' />
+                    <DatePicker style={{ ...style, width: 250 }} />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateTime' />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateRange' />
+                    <DatePicker style={{ ...style, width: 450 }} type='dateTimeRange' />
                     <h5>TimePicker</h5>
                     <TimePicker style={style} />
                     <TimePicker use12Hours style={style} /><br/><br/>
@@ -277,7 +329,7 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <div style={{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 20 }}>
-                    <Select onChange={this.onLanguageChange} insetLabel='切换语言' style={{width: 250}} defaultValue='zh_CN'>
+                    <Select onChange={this.onLanguageChange} insetLabel='切换语言' style={{ width: 250 }} defaultValue='zh_CN'>
                         <Select.Option value='zh_CN'>简体中文</Select.Option>
                         <Select.Option value='en_GB'>英语（英）</Select.Option>
                         <Select.Option value='ja_JP'>日语</Select.Option>
@@ -295,6 +347,7 @@ class I18nDemo extends React.Component {
                         <Select.Option value='de'>德语</Select.Option>
                         <Select.Option value='it'>意大利语</Select.Option>
                         <Select.Option value='fr'>法语</Select.Option>
+                        <Select.Option value='ro'>罗马尼亚语</Select.Option>
                     </Select>
                 </div>
                 <LocaleProvider locale={locale}>

content/show/avatar/index-en-US.md

@@ -248,7 +248,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
             <AvatarGroup overlapFrom={'end'}>
                 <Avatar color="red" alt='Lisa LeBlanc'>LL</Avatar>
                 <Avatar alt='Caroline Xiao'>CX</Avatar>
-                <Avatar color="amber"  alt='Rafal Matin'>RM</Avatar>
+                <Avatar color="amber" alt='Rafal Matin'>RM</Avatar>
                 <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>
                 <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>
             </AvatarGroup>

content/show/avatar/index.md

@@ -247,7 +247,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
             <AvatarGroup overlapFrom={'end'}>
                 <Avatar color="red" alt='Lisa LeBlanc'>LL</Avatar>
                 <Avatar alt='Caroline Xiao'>CX</Avatar>
-                <Avatar color="amber"  alt='Rafal Matin'>RM</Avatar>
+                <Avatar color="amber" alt='Rafal Matin'>RM</Avatar>
                 <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>
                 <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>
             </AvatarGroup>

content/show/badge/index-en-US.md

@@ -43,7 +43,7 @@ import { IconLock } from '@douyinfe/semi-icons';
             </Badge>
             <br/>
             <br/>
-            <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
+            <Badge count={<IconLock style={{ color: 'var(--semi-color-primary)' }}/>}>
                 <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
             </Badge>
             <br/>
@@ -152,7 +152,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} theme='solid' >
                     <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
@@ -179,7 +179,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
                     <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                 </Badge>
             </div>
-            <div style={{padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)'}}>
+            <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
                 <Badge dot theme='inverted' >
                     <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                 </Badge>
@@ -205,7 +205,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} type='primary' >
                     <Avatar color='violet' shape='square' style={style}>MR</Avatar>
@@ -223,7 +223,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
             <br/>
             <div style={bgStyle}>
-                <Badge count={5}  type='warning' >
+                <Badge count={5} type='warning' >
                     <Avatar color='red' shape='square' style={style}>JL</Avatar>
                 </Badge>
             </div>
@@ -265,7 +265,7 @@ import { Badge } from '@douyinfe/semi-ui';
         <br/>
         <span><Badge dot type='tertiary' /> info</span>
         <br/>
-        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)'}} /> success</span>
+        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)' }} /> success</span>
         <br/>
         <span><Badge dot type='warning' /> warning</span>
         <br/>

content/show/badge/index.md

@@ -41,7 +41,7 @@ import { IconLock } from '@douyinfe/semi-icons';
             </Badge>
             <br/>
             <br/>
-            <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
+            <Badge count={<IconLock style={{ color: 'var(--semi-color-primary)' }}/>}>
                 <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
             </Badge>
             <br/>
@@ -150,7 +150,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} theme='solid' >
                     <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
@@ -177,7 +177,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
                     <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                 </Badge>
             </div>
-            <div style={{padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)'}}>
+            <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
                 <Badge dot theme='inverted' >
                     <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                 </Badge>
@@ -203,7 +203,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} type='primary' >
                     <Avatar color='violet' shape='square' style={style}>MR</Avatar>
@@ -221,7 +221,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
             <br/>
             <div style={bgStyle}>
-                <Badge count={5}  type='warning' >
+                <Badge count={5} type='warning' >
                     <Avatar color='red' shape='square' style={style}>JL</Avatar>
                 </Badge>
             </div>

content/show/calendar/index-en-US.md

@@ -252,9 +252,9 @@ import { Calendar } from '@douyinfe/semi-ui';
         if (dateString === new Date(2019, 6, 23).toString()) {
             return (
                 <>
-                    <div style={{...dailyEventStyle, top: '500px', height: 50}}>Eating 🍰</div>
-                    <div style={{...dailyEventStyle, top: '0', height: 400}}>Sleeping 😪</div>
-                    <div style={{...dailyEventStyle, top: '700px', height: 100}}>Playstation 🎮</div>
+                    <div style={{ ...dailyEventStyle, top: '500px', height: 50 }}>Eating 🍰</div>
+                    <div style={{ ...dailyEventStyle, top: '0', height: 400 }}>Sleeping 😪</div>
+                    <div style={{ ...dailyEventStyle, top: '700px', height: 100 }}>Playstation 🎮</div>
                 </>
             );
         } else {

content/show/card/index-en-US.md

@@ -88,7 +88,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </>
@@ -199,7 +199,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
             <br/>
@@ -231,7 +231,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </div>
@@ -352,7 +352,7 @@ function Demo() {
                 padding: 20
             }}
         >
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={8}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -369,7 +369,7 @@ function Demo() {
                     </Card>
                 </Col>
             </Row>
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={16}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -443,7 +443,7 @@ function Demo() {
                     <Meta 
                         title={
                             <Skeleton
-                                style={{width:80}}
+                                style={{ width: 80 }}
                                 placeholder={<Title />}
                                 loading={loading}
                             >
@@ -454,7 +454,7 @@ function Demo() {
                         } 
                         description={
                             <Skeleton 
-                                style={{width:150, marginTop: 12}} 
+                                style={{ width: 150, marginTop: 12 }} 
                                 placeholder={<Paragraph rows={1} />} 
                                 loading={loading}
                             >
@@ -475,14 +475,14 @@ function Demo() {
                     />
                 }
                 headerExtraContent={
-                    <Skeleton style={{width: 50}} placeholder={<Paragraph rows={1} />} loading={loading}>
+                    <Skeleton style={{ width: 50 }} placeholder={<Paragraph rows={1} />} loading={loading}>
                         <Typography.Text link>
                             More
                         </Typography.Text>
                     </Skeleton>
                 }
                 cover={ 
-                    <Skeleton style={{maxWidth: '100%', height: 260}} placeholder={<Image />} loading={loading}>
+                    <Skeleton style={{ maxWidth: '100%', height: 260 }} placeholder={<Image />} loading={loading}>
                         <img 
                             alt="example" 
                             src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
@@ -587,19 +587,19 @@ function Demo() {
                 defaultValue={12}
                 max={40}
                 min={10}
-                style={{ width:360 }}
+                style={{ width: 360 }}
                 onChange={v=> setSpacing(v)}
             />
             <br />
             <CardGroup spacing={spacing}>
                 {
-                    new Array(8).fill(null).map((v,idx)=>(
+                    new Array(8).fill(null).map((v, idx)=>(
                         <Card 
                             key={idx}
                             shadows='hover'
                             title='Card title'
                             headerLine={false}
-                            style={{ width:260 }}
+                            style={{ width: 260 }}
                             headerExtraContent={
                                 <Text link>
                                     More
@@ -631,13 +631,13 @@ function Demo() {
     return (
         <CardGroup type='grid'>
             {
-                new Array(7).fill(null).map((v,idx)=>(
+                new Array(7).fill(null).map((v, idx)=>(
                     <Card 
                         key={idx}
                         shadows='hover'
                         title='Card title'
                         headerLine={false}
-                        style={{ width:260 }}
+                        style={{ width: 260 }}
                         headerExtraContent={
                             <Text link>
                                 More

content/show/card/index.md

@@ -88,7 +88,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </>
@@ -199,7 +199,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
             <br/>
@@ -231,7 +231,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </div>
@@ -352,7 +352,7 @@ function Demo() {
                 padding: 20
             }}
         >
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={8}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -369,7 +369,7 @@ function Demo() {
                     </Card>
                 </Col>
             </Row>
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={16}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -443,7 +443,7 @@ function Demo() {
                     <Meta 
                         title={
                             <Skeleton
-                                style={{ width:80 }}
+                                style={{ width: 80 }}
                                 placeholder={<Title />}
                                 loading={loading}
                             >
@@ -454,7 +454,7 @@ function Demo() {
                         } 
                         description={
                             <Skeleton 
-                                style={{ width:150, marginTop: 12 }} 
+                                style={{ width: 150, marginTop: 12 }} 
                                 placeholder={<Paragraph rows={1} />} 
                                 loading={loading}
                             >
@@ -587,19 +587,19 @@ function Demo() {
                 defaultValue={12}
                 max={40}
                 min={10}
-                style={{ width:360 }}
+                style={{ width: 360 }}
                 onChange={v=> setSpacing(v)}
             />
             <br />
             <CardGroup spacing={spacing}>
                 {
-                    new Array(8).fill(null).map((v,idx)=>(
+                    new Array(8).fill(null).map((v, idx)=>(
                         <Card 
                             key={idx}
                             shadows='hover'
                             title='Card title'
                             headerLine={false}
-                            style={{ width:260 }}
+                            style={{ width: 260 }}
                             headerExtraContent={
                                 <Text link>
                                     More
@@ -631,13 +631,13 @@ function Demo() {
     return (
         <CardGroup type='grid'>
             {
-                new Array(7).fill(null).map((v,idx)=>(
+                new Array(7).fill(null).map((v, idx)=>(
                     <Card 
                         key={idx}
                         shadows='hover'
                         title='Card title'
                         headerLine={false}
-                        style={{ width:260 }}
+                        style={{ width: 260 }}
                         headerExtraContent={
                             <Text link>
                                 More

content/show/carousel/index-en-US.md

@@ -44,7 +44,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />   
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />   
         );
     };
 
@@ -112,7 +112,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -196,7 +196,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -294,7 +294,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -381,7 +381,7 @@ class CarouselDemo extends React.Component {
     
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 
@@ -459,7 +459,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -528,7 +528,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -596,7 +596,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 

content/show/carousel/index.md

@@ -43,7 +43,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />   
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />   
         );
     };
 
@@ -111,7 +111,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -195,7 +195,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -293,7 +293,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -380,7 +380,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 
@@ -458,7 +458,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -527,7 +527,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -595,7 +595,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 

content/show/collapse/index-en-US.md

@@ -180,7 +180,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | defaultActiveKey | Key of the expanded panel when initialized | string \| string[] | - | - |
 | expandIcon | Custom expanding icon | ReactNode | `<IconChevronUp />` | - |
 | keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default | boolean | `false` | 0.25.0 |
-| motion | Toggle whether to have animation | object \| boolean | `true` | 1.4.0 |
+| motion | Toggle whether to have animation | boolean | `true` | 1.4.0 |
 | expandIconPosition | Expand icon position | `left`, `right` | `right` | 1.12.0 |
 | style | Inline CSS style | CSSProperties | {} | - |
 | onChange | Callback function when switching panel | function(activeKey: string \| string[], e: event) | - | - |

content/show/collapse/index.md

@@ -180,7 +180,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | expandIcon | 自定义展开图标 | ReactNode | `<IconChevronUp />` | - |
 | expandIconPosition | 展开图标位置 | `left`, `right` | `right` | 1.12.0 |
 | keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | bool | `false` | 0.25.0 |
-| motion | 是否开启动画 | object \| boolean | `true` | 1.4.0 |
+| motion | 是否开启动画 | boolean | `true` | 1.4.0 |
 | style | 内联 CSS 样式 | CSSProperties | {} | - |
 | onChange | 切换面板的回调 | function(activeKey: string \| string[], e: event) | 无 | - |
 

content/show/collapsible/index-en-US.md

@@ -30,7 +30,7 @@ import React, { useState } from 'react';
 import { Collapsible, Button } from '@douyinfe/semi-ui';
 
 () => {
-    const [isOpen ,setOpen] = useState();
+    const [isOpen, setOpen] = useState();
     const toggle = () => {
         setOpen(!isOpen);
     };
@@ -201,14 +201,14 @@ import Collapsible from './index';
 
 ()=>{
     const collapseId = 'myCollapsible';
-    const [visible,setVisible]=useState(false);
+    const [visible, setVisible]=useState(false);
     return <>
         <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>
         <Collapsible isOpen={visible} id={collapseId}>
             <div>hide content</div>
         </Collapsible>
-    </>
-}
+    </>;
+};
 
 ```