chore: update ci workflow node 16 -> node 20 (#2109)

* chore: try to update ci workflow node 16 -> node 20
* chore: remove syslink in semi-ui pacakge
* fix: lodash/get type error
* fix: tooltip focus type error

.github/workflows/chromatic.yml

@@ -30,9 +30,9 @@ jobs:
         # Job steps
         steps:
             - uses: actions/checkout@v1
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Install dependencies
               run: npx lerna@^6 bootstrap
             - name: Pre-build libs

.github/workflows/lighthouse.yml

@@ -12,10 +12,10 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - name: Use Node.js 16
-              uses: actions/setup-node@v3
+            - name: Use Node.js 20
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: 20
             - name: npm install, build
               run: |
                   npm i -g lerna@^6 gulp

.github/workflows/publish.yml

@@ -16,10 +16,10 @@ jobs:
               with:
                   token: ${{ secrets.PAT }}
 
-            - name: Use Node.js 16
-              uses: actions/setup-node@v3
+            - name: Use Node.js 20
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: 20
 
             - name: npm install
               run: npm i -g lerna@^4.0.0 && npm run bootstrap

.github/workflows/release.yml

@@ -9,9 +9,9 @@ jobs:
         steps:
             - uses: actions/checkout@v3
             - name: release
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: 20
             - run: |
                   npm i -g lerna@^6 && npm run bootstrap
                   node scripts/release.js

.github/workflows/test-coverage.yml

@@ -15,9 +15,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Run install
               run: npm i -g lerna@^6 && npm run bootstrap
             - name: Run Jest test
@@ -32,9 +32,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Run install
               run: |
                   npm i -g lerna@^6
@@ -58,9 +58,9 @@ jobs:
         needs: [jest, cypress]
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Download Jest coverage
               uses: actions/download-artifact@v3
               with:

.github/workflows/test.yml

@@ -15,9 +15,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Run install
               run: npm i -g lerna@^6 && npm run bootstrap
             - name: Run Jest test

create_symlinks.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# 定义源目录和目标目录
+source_dir="content"
+target_dir="packages/semi-ui"
+
+# 遍历 content 目录下的二级子文件夹
+for type_dir in "$source_dir"/*; do
+  if [ -d "$type_dir" ]; then
+    for component_dir in "$type_dir"/*; do
+      if [ -d "$component_dir" ]; then
+        # 获取组件名称
+        component_name=$(basename "$component_dir")
+
+        # 确认目标目录中存在同名文件夹
+        if [ -d "$target_dir/$component_name" ]; then
+          echo "Found directory $target_dir/$component_name, creating symlinks..."
+
+          # 创建 index.md 符号链接
+          if [ -f "$component_dir/index.md" ]; then
+            ln -sf "../../../$component_dir/index.md" "$target_dir/$component_name/index.md"
+            echo "Created symlink: $target_dir/$component_name/index.md -> ../../../$component_dir/index.md"
+          else
+            echo "No index.md found in $component_dir"
+          fi
+
+          # 创建 index-en-US.md 符号链接
+          if [ -f "$component_dir/index-en-US.md" ]; then
+            ln -sf "../../../$component_dir/index-en-US.md" "$target_dir/$component_name/index-en-US.md"
+            echo "Created symlink: $target_dir/$component_name/index-en-US.md -> ../../../$component_dir/index-en-US.md"
+          else
+            echo "No index-en-US.md found in $component_dir"
+          fi
+        else
+          echo "Directory $target_dir/$component_name not found, skipping..."
+        fi
+      fi
+    done
+  fi
+done
+
+echo "符号链接创建完毕。"

package.json

@@ -183,7 +183,7 @@
         "eslint-plugin-semi-design": "^2.33.0",
         "fs-extra": "^8.1.0",
         "glob": "^7.1.7",
-        "html-webpack-plugin": "^3.2.0",
+        "html-webpack-plugin": "^5.6.0",
         "husky": "^1.3.1",
         "jest": "^24.9.0",
         "jest-date-mock": "^1.0.8",
@@ -194,10 +194,10 @@
         "lint-staged": "^10.5.4",
         "marked": "^2.1.3",
         "mini-css-extract-plugin": "^0.12.0",
-        "null-loader": "^3.0.0",
+        "null-loader": "^4.0.1",
         "postcss-loader": "^2.1.6",
         "prettier": "^1.19.1",
-        "progress-bar-webpack-plugin": "^1.12.1",
+        "progress-bar-webpack-plugin": "^2.1.0",
         "react-dnd-cjs": "^9.5.1",
         "react-storybook-addon-props-combinations": "^1.1.0",
         "rimraf": "^2.7.1",

packages/semi-ui/anchor/index-en-US.md

@@ -1 +0,0 @@
-../../../content/navigation/anchor/index-en-US.md

packages/semi-ui/anchor/index.md

@@ -1 +0,0 @@
-../../../content/navigation/anchor/index.md

packages/semi-ui/autoComplete/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/autocomplete/index-en-US.md

packages/semi-ui/autoComplete/index.md

@@ -1 +0,0 @@
-../../../content/input/autocomplete/index.md

packages/semi-ui/avatar/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/avatar/index-en-US.md

packages/semi-ui/avatar/index.md

@@ -1 +0,0 @@
-../../../content/show/avatar/index.md

packages/semi-ui/backtop/index-en-US.md

@@ -1 +0,0 @@
-../../../content/navigation/backtop/index-en-US.md

packages/semi-ui/backtop/index.md

@@ -1 +0,0 @@
-../../../content/navigation/backtop/index.md

packages/semi-ui/badge/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/badge/index-en-US.md

packages/semi-ui/badge/index.md

@@ -1 +0,0 @@
-../../../content/show/badge/index.md

packages/semi-ui/banner/index-en-US.md

@@ -1 +0,0 @@
-../../../content/feedback/banner/index-en-US.md

packages/semi-ui/banner/index.md

@@ -1 +0,0 @@
-../../../content/feedback/banner/index.md

packages/semi-ui/breadcrumb/index-en-US.md

@@ -1 +0,0 @@
-../../../content/navigation/breadcrumb/index-en-US.md

packages/semi-ui/breadcrumb/index.md

@@ -1 +0,0 @@
-../../../content/navigation/breadcrumb/index.md

packages/semi-ui/button/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/button/index-en-US.md

packages/semi-ui/button/index.md

@@ -1 +0,0 @@
-../../../content/input/button/index.md

packages/semi-ui/calendar/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/calendar/index-en-US.md

packages/semi-ui/calendar/index.md

@@ -1 +0,0 @@
-../../../content/show/calendar/index.md

packages/semi-ui/card/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/card/index-en-US.md

packages/semi-ui/card/index.md

@@ -1 +0,0 @@
-../../../content/show/card/index.md

packages/semi-ui/carousel/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/carousel/index-en-US.md

packages/semi-ui/carousel/index.md

@@ -1 +0,0 @@
-../../../content/show/carousel/index.md

packages/semi-ui/cascader/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/cascader/index-en-US.md

packages/semi-ui/cascader/index.md

@@ -1 +0,0 @@
-../../../content/input/cascader/index.md

packages/semi-ui/checkbox/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/checkbox/index-en-US.md

packages/semi-ui/checkbox/index.md

@@ -1 +0,0 @@
-../../../content/input/checkbox/index.md

packages/semi-ui/collapse/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/collapse/index-en-US.md

packages/semi-ui/collapse/index.md

@@ -1 +0,0 @@
-../../../content/show/collapse/index.md

packages/semi-ui/collapsible/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/collapsible/index-en-US.md

packages/semi-ui/collapsible/index.md

@@ -1 +0,0 @@
-../../../content/show/collapsible/index.md

packages/semi-ui/configProvider/index-en-US.md

@@ -1 +0,0 @@
-../../../content/other/configprovider/index-en-US.md

packages/semi-ui/configProvider/index.md

@@ -1 +0,0 @@
-../../../content/other/configprovider/index.md

packages/semi-ui/datePicker/datePicker.tsx

@@ -312,7 +312,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 }
                 switch (rangeInputFocus) {
                     case 'rangeStart':
-                        const inputStartNode = get(this, 'rangeInputStartRef.current');
+                        const inputStartNode = get(this, 'rangeInputStartRef.current') as HTMLInputElement;
                         inputStartNode && inputStartNode.focus({ preventScroll });
                         /**
                          * 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
@@ -332,7 +332,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                         }, 0);
                         break;
                     case 'rangeEnd':
-                        const inputEndNode = get(this, 'rangeInputEndRef.current');
+                        const inputEndNode = get(this, 'rangeInputEndRef.current') as HTMLInputElement;
                         inputEndNode && inputEndNode.focus({ preventScroll });
                         /**
                          * 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
@@ -363,14 +363,14 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 switch (rangeInputFocus) {
                     case 'rangeEnd':
                         if (document.activeElement !== this.rangeInputEndRef.current) {
-                            const inputEndNode = get(this, 'rangeInputEndRef.current');
+                            const inputEndNode = get(this, 'rangeInputEndRef.current') as HTMLInputElement;
                             inputEndNode && inputEndNode.focus({ preventScroll });
                         }
                         break;
                     case 'rangeStart':
                     default:
                         if (document.activeElement !== this.rangeInputStartRef.current) {
-                            const inputStartNode = get(this, 'rangeInputStartRef.current');
+                            const inputStartNode = get(this, 'rangeInputStartRef.current') as HTMLInputElement;
                             inputStartNode && inputStartNode.focus({ preventScroll });
                         }
                         break;
@@ -378,20 +378,20 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             },
             setInputFocus: () => {
                 const { preventScroll } = this.props;
-                const inputNode = get(this, 'inputRef.current');
+                const inputNode = get(this, 'inputRef.current') as HTMLInputElement;
                 inputNode && inputNode.focus({ preventScroll });
             },
             setInputBlur: () => {
-                const inputNode = get(this, 'inputRef.current');
+                const inputNode = get(this, 'inputRef.current') as HTMLInputElement;
                 inputNode && inputNode.blur();
             },
             setRangeInputBlur: () => {
                 const { rangeInputFocus } = this.state;
                 if (rangeInputFocus === 'rangeStart') {
-                    const inputStartNode = get(this, 'rangeInputStartRef.current');
+                    const inputStartNode = get(this, 'rangeInputStartRef.current') as HTMLInputElement;
                     inputStartNode && inputStartNode.blur();
                 } else if (rangeInputFocus === 'rangeEnd') {
-                    const inputEndNode = get(this, 'rangeInputEndRef.current');
+                    const inputEndNode = get(this, 'rangeInputEndRef.current') as HTMLInputElement;
                     inputEndNode && inputEndNode.blur();
                 }
                 this.adapter.setRangeInputFocus(false);
@@ -882,6 +882,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         const inner = this.renderInner(pick(this.props, innerPropKeys));
         const wrappedInner = this.wrapPopover(inner);
 
-        return <div {...outerProps}>{wrappedInner}</div>;
+        return <div {...outerProps}>
+            {wrappedInner}
+        </div>;
     }
 }

packages/semi-ui/datePicker/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/datepicker/index-en-US.md

packages/semi-ui/datePicker/index.md

@@ -1 +0,0 @@
-../../../content/input/datepicker/index.md

packages/semi-ui/descriptions/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/descriptions/index-en-US.md

packages/semi-ui/descriptions/index.md

@@ -1 +0,0 @@
-../../../content/show/descriptions/index.md

packages/semi-ui/divider/index-en-US.md

@@ -1 +0,0 @@
-../../../content/basic/divider/index-en-US.md

packages/semi-ui/divider/index.md

@@ -1 +0,0 @@
-../../../content/basic/divider/index.md

packages/semi-ui/dropdown/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/dropdown/index-en-US.md

packages/semi-ui/dropdown/index.md

@@ -1 +0,0 @@
-../../../content/show/dropdown/index.md

packages/semi-ui/empty/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/empty/index-en-US.md

packages/semi-ui/empty/index.md

@@ -1 +0,0 @@
-../../../content/show/empty/index.md

packages/semi-ui/form/_story/ArrayField/asyncNested.jsx

@@ -0,0 +1,90 @@
+import { IconPlusCircle } from "@douyinfe/semi-icons";
+import { ArrayField, Button, Card, Form } from "@douyinfe/semi-ui";
+import React, { useEffect, useState } from "react";
+
+const AsyncComponent = ({ field }) => {
+    const [done, setDone] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setDone(true);
+        }, 10);
+    }, []);
+    const ret = done ? (
+        <Form.Input
+            field={field}
+            style={{ width: 100, marginRight: 12 }}
+        ></Form.Input>
+    ) : null;
+    return <>{ret} 这里是异步组件</>;
+};
+
+const NestedField = (props) => {
+    const rowStyle = {
+        marginTop: 12,
+        marginLeft: 12,
+    };
+    return (
+        <Form.Slot label="内层">
+            <ArrayField field={`${props.field}.rules`}>
+                {({ add, arrayFields }) => (
+                    <React.Fragment>
+                        {arrayFields.map(({ field, key }) => (
+                            <div style={{ display: "flex" }} key={key}>
+                                <AsyncComponent field={`${field}[itemName]`} />
+                            </div>
+                        ))}
+                        <Button
+                            icon={<IconPlusCircle />}
+                            style={rowStyle}
+                            onClick={() => {
+                                return add();
+                            }}
+                        />
+                    </React.Fragment>
+                )}
+            </ArrayField>
+        </Form.Slot>
+    );
+};
+
+const AsyncNestArrayField = () => {
+    return (
+        <Form labelPosition="left" style={{ textAlign: "left" }}>
+            <Form.Slot label="外层">
+                <ArrayField field="group">
+                    {({ add, arrayFields }) => (
+                        <React.Fragment>
+                            <Button
+                                icon={<IconPlusCircle />}
+                                theme="solid"
+                                onClick={() => {
+                                    return add();
+                                }}
+                            >
+                                新增收信规则
+                            </Button>
+                            {arrayFields.map(({ field, key, remove }, i) => (
+                                <div
+                                    key={key}
+                                    style={{ width: 1000, display: "flex", flexWrap: "wrap" }}
+                                >
+                                    <Card
+                                        shadow="hover"
+                                        style={{
+                                            width: 620,
+                                            margin: "12px 0 0 24px",
+                                        }}
+                                    >
+                                        <NestedField field={field} />
+                                    </Card>
+                                </div>
+                            ))}
+                        </React.Fragment>
+                    )}
+                </ArrayField>
+            </Form.Slot>
+        </Form>
+    );
+};
+
+export default AsyncNestArrayField;

packages/semi-ui/form/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/form/index-en-US.md

packages/semi-ui/form/index.md

@@ -1 +0,0 @@
-../../../content/input/form/index.md

packages/semi-ui/grid/index-en-US.md

@@ -1 +0,0 @@
-../../../content/basic/grid/index-en-US.md

packages/semi-ui/grid/index.md

@@ -1 +0,0 @@
-../../../content/basic/grid/index.md

packages/semi-ui/highlight/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/highlight/index-en-US.md

packages/semi-ui/highlight/index.md

@@ -1 +0,0 @@
-../../../content/show/highlight/index.md

packages/semi-ui/icons/index-en-US.md

@@ -1 +0,0 @@
-../../../content/basic/icon/index-en-US.md

packages/semi-ui/icons/index.md

@@ -1 +0,0 @@
-../../../content/basic/icon/index.md

packages/semi-ui/image/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/image/index-en-US.md

packages/semi-ui/image/index.md

@@ -1 +0,0 @@
-../../../content/show/image/index.md

packages/semi-ui/input/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/input/index-en-US.md

packages/semi-ui/input/index.md

@@ -1 +0,0 @@
-../../../content/input/input/index.md

packages/semi-ui/inputNumber/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/inputnumber/index-en-US.md

packages/semi-ui/inputNumber/index.md

@@ -1 +0,0 @@
-../../../content/input/inputnumber/index.md

packages/semi-ui/layout/index-en-US.md

@@ -1 +0,0 @@
-../../../content/basic/layout/index-en-US.md

packages/semi-ui/layout/index.md

@@ -1 +0,0 @@
-../../../content/basic/layout/index.md

packages/semi-ui/list/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/list/index-en-US.md

packages/semi-ui/list/index.md

@@ -1 +0,0 @@
-../../../content/show/list/index.md

packages/semi-ui/locale/index-en-US.md

@@ -1 +0,0 @@
-../../../content/other/locale/index-en-US.md

packages/semi-ui/locale/index.md

@@ -1 +0,0 @@
-../../../content/other/locale/index.md

packages/semi-ui/modal/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/modal/index-en-US.md

packages/semi-ui/modal/index.md

@@ -1 +0,0 @@
-../../../content/show/modal/index.md

packages/semi-ui/navigation/index-en-US.md

@@ -1 +0,0 @@
-../../../content/navigation/navigation/index-en-US.md

packages/semi-ui/navigation/index.md

@@ -1 +0,0 @@
-../../../content/navigation/navigation/index.md

packages/semi-ui/notification/index-en-US.md

@@ -1 +0,0 @@
-../../../content/feedback/notification/index-en-US.md

packages/semi-ui/notification/index.md

@@ -1 +0,0 @@
-../../../content/feedback/notification/index.md

packages/semi-ui/overflowList/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/overflowlist/index-en-US.md

packages/semi-ui/overflowList/index.md

@@ -1 +0,0 @@
-../../../content/show/overflowlist/index.md

packages/semi-ui/pagination/index-en-US.md

@@ -1 +0,0 @@
-../../../content/navigation/pagination/index-en-US.md

packages/semi-ui/pagination/index.md

@@ -1 +0,0 @@
-../../../content/navigation/pagination/index.md

packages/semi-ui/popconfirm/index-en-US.md

@@ -1 +0,0 @@
-../../../content/feedback/popconfirm/index-en-US.md

packages/semi-ui/popconfirm/index.md

@@ -1 +0,0 @@
-../../../content/feedback/popconfirm/index.md

packages/semi-ui/popover/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/popover/index-en-US.md

packages/semi-ui/popover/index.md

@@ -1 +0,0 @@
-../../../content/show/popover/index.md

packages/semi-ui/progress/index-en-US.md

@@ -1 +0,0 @@
-../../../content/feedback/progress/index-en-US.md

packages/semi-ui/progress/index.md

@@ -1 +0,0 @@
-../../../content/feedback/progress/index.md

packages/semi-ui/radio/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/radio/index-en-US.md

packages/semi-ui/radio/index.md

@@ -1 +0,0 @@
-../../../content/input/radio/index.md

packages/semi-ui/rating/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/rating/index-en-US.md

packages/semi-ui/rating/index.md

@@ -1 +0,0 @@
-../../../content/input/rating/index.md

packages/semi-ui/scrollList/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/scrolllist/index-en-US.md

packages/semi-ui/scrollList/index.md

@@ -1 +0,0 @@
-../../../content/show/scrolllist/index.md

packages/semi-ui/select/index-en-US.md

@@ -1 +0,0 @@
-../../../content/input/select/index-en-US.md

packages/semi-ui/select/index.md

@@ -1 +0,0 @@
-../../../content/input/select/index.md

packages/semi-ui/sideSheet/index-en-US.md

@@ -1 +0,0 @@
-../../../content/show/sidesheet/index-en-US.md

packages/semi-ui/sideSheet/index.md

@@ -1 +0,0 @@
-../../../content/show/sidesheet/index.md

packages/semi-ui/skeleton/index-en-US.md

@@ -1 +0,0 @@
-../../../content/feedback/skeleton/index-en-US.md

packages/semi-ui/skeleton/index.md

@@ -1 +0,0 @@
-../../../content/feedback/skeleton/index.md