Merge branch 'develop' into select-input

.github/issue-shoot.md

@@ -0,0 +1,8 @@
+## IssueShoot
+- 预估时长: {{ .duration }}
+- 期望完成时间: {{ .deadline }}
+- 开发难度: {{ .level }}
+- 参与人数: 1
+- 需求对接人: lincao
+- 验收标准: 实现期望改造效果，提 PR 并通过验收无误
+- 备注: 最终激励以实际提交 `pull request` 并合并为准

.github/workflows/issue-label.yml

@@ -0,0 +1,50 @@
+name: issue on label
+on:
+  issues:
+    types: ['labeled']
+jobs:
+  add-issueshoot-template:
+    runs-on: ubuntu-latest
+    if: contains(fromJSON('["easy", "middle", "hard"]'), github.event.label.name)
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Get token
+        id: token
+        run: |
+          label=${{ github.event.label.name }}
+          if [[ $label = "easy" ]]
+          then
+            echo "level=低" >> $GITHUB_OUTPUT
+            echo "duration=1" >> $GITHUB_OUTPUT
+            deadline=$(date -d "+3 days" +'%Y-%m-%d')
+            echo "deadline=${deadline}" >> $GITHUB_OUTPUT
+          elif [[ $label = "middle" ]]
+          then
+            echo "level=中" >> $GITHUB_OUTPUT
+            echo "duration=3" >> $GITHUB_OUTPUT
+            deadline=$(date -d "+7 days" +'%Y-%m-%d')
+            echo "deadline=${deadline}" >> $GITHUB_OUTPUT
+          else
+            echo "level=高" >> $GITHUB_OUTPUT
+            echo "duration=5" >> $GITHUB_OUTPUT
+            deadline=$(date -d "+10 days" +'%Y-%m-%d')
+            echo "deadline=${deadline}" >> $GITHUB_OUTPUT
+          fi
+      - name: Create template
+        id: template
+        uses: chuhlomin/[email protected]
+        with:
+          template: .github/issue-shoot.md
+          vars: |
+            level: ${{ steps.token.outputs.level }}
+            duration: ${{ steps.token.outputs.duration }}
+            deadline: ${{ steps.token.outputs.deadline }}
+      - name: Update issue
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'update-issue'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: ${{ steps.template.outputs.result }}
+          update-mode: 'append'

CHANGELOG.md

@@ -5,6 +5,25 @@ toc: false
 spline: explain
 ---
 
+ ## 🌈 1.4.0 `2023-11-30`
+
+### 🚀 Features
+
+- `Space`: 兼容支持组件间距在低级浏览器中的呈现 @chaishi ([#2602](https://github.com/Tencent/tdesign-react/pull/2602))
+- `Statistic`: 新增统计数值组件 @HaixingOoO ([#2596](https://github.com/Tencent/tdesign-react/pull/2596))
+
+### 🐞 Bug Fixes
+
+- `ColorPicker`: 修复 format 为`hex`时，配合`enableAlpha` 调整透明度不生效的问题 @uyarn ([#2628](https://github.com/Tencent/tdesign-react/pull/2628))
+- `ColorPicker`: 修复修改颜色上方滑杆按钮颜色不变 @HaixingOoO ([#2615](https://github.com/Tencent/tdesign-react/pull/2615))
+- `Table`: 修复 `lazyLoad` 懒加载效果 @chaishi ([#2605](https://github.com/Tencent/tdesign-react/pull/2605))
+- `Tree`: 修复树组件节点的 `open class` 状态控制逻辑错误导致的样式异常 @NWYLZW ([#2611](https://github.com/Tencent/tdesign-react/pull/2611))
+- `Tree`: 指定滚动到特定节点 API 中的`key`和`index`应为可选 @uyarn ([#2626](https://github.com/Tencent/tdesign-react/pull/2626))
+- `Drawer`: 修复 Drawer 的 mode 为`push`时,推开内容区域为 drawer 节点的父节点。 @HaixingOoO ([#2614](https://github.com/Tencent/tdesign-react/pull/2614))
+- `Radio`: 修复表单 disabled 未生效在 Radio 上的问题 @li-jia-nan ([#2397](https://github.com/Tencent/tdesign-react/pull/2397))
+- `Pagination`: 修复当 `total` 为 0 并且 `pageSize` 改变时， `current` 值为 0 的问题 @betavs ([#2624](https://github.com/Tencent/tdesign-react/pull/2624))
+- `Image`: 修复图片在 SSR 模式下不会触发原生事件 @HaixingOoO ([#2616](https://github.com/Tencent/tdesign-react/pull/2616))
+
  ## 🌈 1.3.1 `2023-11-15` 
 ### 🚀 Features
 - `Upload`: 拖拽上传文件场景，即使文件类型错误，也触发 `drop` 事件 @chaishi ([#2591](https://github.com/Tencent/tdesign-react/pull/2591))

CONTRIBUTING.md

@@ -1,42 +1,181 @@
-# 参与贡献
+# CONTRIBUTING
 
-非常感谢你对 TDesign 的关注，如果你想为组件库或其他产品贡献一份力量，请先了解下以下内容。
+`tdesign-react` 包含 `react` 代码和一个子仓库，子仓库指向 `tdesign-common` 仓库
 
-## 开启 issue
+## 开发
 
-如果你想要贡献一个新特性，请在实际写代码前先开一个 issue 与社区里的小伙伴一起讨论必要性及实现方案。
+建议使用 node 18 版本进行开发
 
-## Github flow 贡献流程
+### 1.初始化子仓库
 
-- 请将本项目 clone 至本地
-- 创建 feature/fix 分支
-- 开发过程中可以使用 `git fetch` 或 `git rebase` 来同步上游分支代码
-- 提交代码到 forked 仓库，commit message 撰写请参照 [Angular Commits 规范](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits)
-- 发起 pr
-- 会有 PMC 同学来 CR 本次提交的代码，请及时关注 CR 评论通知信息
-- CR 通过后会合并进入 develop 分支，等待周迭代或紧急 patch 版本发布 npm
+```bash
+git submodule init && git submodule update
+```
 
-## 开发
+### 2.安装依赖
 
 ```bash
-# 需配置 github ssh key 才能正常拉取子仓库代码
-git clone --recurse-submodules https://github.com/Tencent/tdesign-react.git 
-
-# 开发预览
-cd tdesign-react
 npm i
-npm run dev
+```
+
+### 3.本地开发
 
-# 打开浏览器访问 http://localhost:15000
+```bash
+npm run start
+```
 
-# 单独调试某个组件的 demo 可访问 http://localhost:15000/react/[组件名]/[demo文件名]
-# 例如：http://localhost:15000/react/demos/button/base
+完成以上 3 个步骤，浏览器访问 <http://127.0.0.1:15000> 即可调该框架的任何内容
 
-# 如果 common 代码未正常拉取可手动初始化:
-# git submodule init && git submodule update
+## 目录结构
+
+```text
+├── script // 构建代码
+├── site // 站点代码
+├── src // 组件代码
+     └─ componentA
+          ├── _example // 组件示例文档
+          ├── _usage // 组件 live demo
+          └─  __tests__ // 组件测试用例
+└─ test // 测试配置文件
+```
+
+### 组件页路由配置
+
+每一个组件都有自己的路由，页面配置都是一个 markdown 文件，如`button.md`，具体路径可参考 `/site/site.config.mjs`。如果有新增组件，直接按照模板添加即可
+
+```js
+{
+  title: '基础组件',
+  type: 'component', // 组件文档
+  children: [
+    {
+      title: 'Button 按钮',
+      name: 'button',
+      component: () => import(`tdesign-react/button/button.md`),
+    },
+    {
+      title: 'Icon 图标',
+      name: 'icon',
+      component: () => import(`tdesign-react/icon/icon.md`),
+    },
+    ...
+  ],
+},
 ```
 
-更多指引请参考：
+### Markdown 文件的 demo 引用
+
+文档 demo 排列与 common 子仓库中的 UI demo 展示一致，如 button 组件页面的展示顺序，由子仓库的 docs/web/api/button.md 内的顺序决定。
+
+```markdown
+{{ base }}
+[demo 描述（可不填）]
+```
+
+### Demo 调试
+
+我们可以通过打开组件的路由页进行开发调试，
+
+如 button，则打开<http://127.0.0.1:15000/react/components/button> 进行开发调试；
+
+但当组件的 markdown 文件插入了很多个 demo 之后，一些组件生命周期方法调试起来会变得困难，若想对某个 demo 单独调试，可以访问路由：/demos/组件名/demo 名，
+
+如：<http://127.0.0.1:15000/react/demos/button/base>
+
+### 单元测试 & e2e 测试文档
+
+[组件测试文档](./test/README.md)
+
+## 子仓库 tdesign-common
+
+TDesign 的项目都会以子仓库的形式引入 `tdesign-common` 公共仓库，对应 `src/\_common` 文件夹，
+公共仓库中包含
+
+- 部分组件的一些框架无关的公共的工具函数
+- `组件库UI`，既 `html` 结构和 `css` 样式（多框架共用）
+
+大部分的功能和改动都只需要调整主仓库的代码即可，但涉及部分公共函数、样式或者部分文档的调整，需要改动子仓库的代码。
+
+### 初始化子仓库
+
+- 如开发部分提到的，初次克隆代码后需要初始化子仓库： `git submodule init && git submodule update`
+- git submodule update 之后子仓库不指向任何分支，只是一个指向某一个提交的游离状态
+
+### 子仓库开发
+
+子仓库组件分支从 `develop checkout` 示例：`feature/button`，提交代码时先进入子仓库完成提交，然在回到主仓库完成提交
+
+- 先进入 `src/\_common` 文件夹，正常将样式修改添加提交
+- 回到主仓库，此时应该会看到 `src/\_common` 文件夹是修改状态，按照正常步骤添加提交即可
+
+### 组件库 UI
+
+UI 是多个框架共用的，比如 PC 端的 react/vue/vue-next 都是复用子仓库的 UI 代码。
+各个框架组件实现应该要复用 UI 开发的 html 结构，引用其组件 CSS 与 Demo CSS（本仓库已在入口处引用了），UI 开发一般可由单独的 UI 开发同学认领完成或各框架组件开发同学的其中一名同学完成
+
+- 如果开发前已有某个组件的 UI 开发内容，直接在主仓库使用即可
+- 如果没有，且你也负责 UI 开发：参考 UI 开发规范完成 UI 开发内容、然后再开发主仓库组件
+- 如果没有，且 UI 开发工作已有其他同学负责或认领：可以先在主仓库开发组件功能，待 UI 开发输出之后对齐即可
+
+如果 UI 内容和样式（其他同学负责开发）还未完成，而你开发组件功能时需要写一些样式，可以直接在组件文件夹先写一个临时的 less 文件，在 js 中引入即可，如：
+
+```bash
+├── button.less
+├── button.tsx
+```
+
+```js
+// button.tsx
+
+// 先引入临时的样式文件用于开发功能，待 UI 开发完成之后需要与 UI 样式对齐并删除 less 文件
+import './button.less';
+```
+
+## 分支规范
+
+### 分支
+
+遵循使用 `git flow` 规范，新组件分支从 `develop checkout`：[https://nvie.com/posts/a-successful-git-branching-model/](https://nvie.com/posts/a-successful-git-branching-model/)
+
+如果是贡献组件，则从 `develop checkout` 分支如：`feature/button`，记得如果同时要在子仓库开发 UI，子仓库也要 `checkout` 同名分支
+
+> 关于 fork
+
+以下内容处理 `fork` 仓库后，远端仓库的更新如何同步到 `fork` 仓库
+
+```bash
+# 建立 upstream remote
+git remote add upstream [email protected]:Tencent/tdesign-react.git
+
+# 更新 upstream
+git fetch upstream develop
+
+# 合并 upstream develop 到本地
+git checkout develop
+
+git merge upstream/develop
+```
+
+### 提交说明
+
+项目使用基于 angular 提交规范：[https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional)
+
+每次提交会自动触发提交验证
+
+- 使用工具 commitizen 协助规范 git commit 信息
+- fix & feat 的提交会被用来生成 changelog
+- 提交会触发 git pre-commit 检查，修复提示的 eslint 错误，
+
+## 开发规范
+
+### API 规范
+
+API 由 API 平台统一管理生成，如果涉及组件文档的改动（如`src/button/type.ts`的内容），都需要同时在 API 平台提交 PR，进行统一维护管理 https://github.com/tdesignoteam/tdesign-api
+
+### 前缀规范
+
+组件和 `CSS` 前缀以 `t-` 开头，无论 `js` 还是 `css` 都使用变量定义前缀，方便后续替换
+
+### CSS 规范
 
-- [开发指南](./DEVELOP_GUIDE.md)
-<!-- - [测试指南](./TEST_GUIDE.md) -->
+组件样式在 `common` 子仓库开发，遵循 [tdesign-common 仓库 UI 开发规范](https://github.com/Tencent/tdesign-common/blob/main/style/web/README.md)

README-zh_CN.md

@@ -80,6 +80,12 @@ npm package 中提供了多种构建产物，可以阅读 [这里](https://githu
 
 TDesign 欢迎任何愿意参与贡献的参与者。如果需要本地运行代码或参与贡献，请先阅读[参与贡献](https://github.com/Tencent/tdesign-react/blob/develop/CONTRIBUTING.md)。
 
+## 贡献成员
+
+<a href="https://github.com/tencent/tdesign-react/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=tencent/tdesign-react" />
+</a>
+
 # 反馈
 
 有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-react/issues) 反馈或扫码加入用户微信群。

README.md

@@ -80,6 +80,12 @@ TDesign also provides component libraries for other platforms and frameworks.
 
 Contributing is welcome. Read [guidelines for contributing](https://github.com/Tencent/tdesign-react/blob/develop/CONTRIBUTING.md) before submitting your [Pull Request](https://github.com/Tencent/tdesign-react/pulls).
 
+## Contributors
+
+<a href="https://github.com/tencent/tdesign-react/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=tencent/tdesign-react" />
+</a>
+
 # Feedback
 
 Create your [Github issues](https://github.com/Tencent/tdesign-react/issues) or scan the QR code below to join our user groups

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-react",
   "purename": "tdesign",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "TDesign Component for React",
   "title": "tdesign-react",
   "main": "lib/index.js",

src/auto-complete/HighlightOption.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import escapeRegExp from 'lodash/escapeRegExp';
 import useConfig from '../hooks/useConfig';
 
 export interface TdHighlightOptionProps {
@@ -15,7 +16,7 @@ const HighlightOption: React.FC<TdHighlightOptionProps> = (props) => {
   const words = useMemo<{ list: string[]; keyword?: string }>(() => {
     if (!content) return { list: [] };
     if (typeof content !== 'string' || !keyword) return { list: [content] };
-    const regExp = new RegExp(keyword, 'i');
+    const regExp = new RegExp(escapeRegExp(keyword), 'i');
     const splitKeyword = content.match(regExp)?.[0];
     return {
       list: content.split(splitKeyword),

src/auto-complete/OptionList.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useState, useRef, MouseEvent, useEffect, useImperativeHandle, forwardRef } from 'react';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
+import escapeRegExp from 'lodash/escapeRegExp';
 import useConfig from '../hooks/useConfig';
 import log from '../_common/js/log';
 import { CommonClassNameType } from '../hooks/useCommonClassName';
@@ -65,7 +66,7 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
       options = options.filter((option) => props.filter(value, option));
     } else if (props.filterable) {
       // 默认过滤规则
-      const regExp = new RegExp(value, 'i');
+      const regExp = new RegExp(escapeRegExp(value), 'i');
       options = options.filter((item) => regExp.test(item.text));
     }
 

src/auto-complete/_example/filter.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Space, AutoComplete } from 'tdesign-react';
+import escapeRegExp from 'lodash/escapeRegExp';
 
 const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
 
@@ -8,7 +9,7 @@ const AutoCompleteBaseFilter = () => {
   const [value2, setValue2] = useState('');
 
   function filterWords(keyword, option) {
-    const regExp = new RegExp(keyword);
+    const regExp = new RegExp(escapeRegExp(keyword));
     return regExp.test(option.text);
   }