Merge remote-tracking branch 'origin/develop'

CHANGELOG.md

@@ -5,6 +5,43 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.7.1 `2024-05-16`
+
+### 🚀 Features
+
+- `Avatar`: 新增`Click`、`Hover`和`Contextmenu`等鼠标事件，支持对头像操作的场景使用 @NWYLZW ([#2906](https://github.com/Tencent/tdesign-react/pull/2906))
+- `Dialog`: 支持 `setConfirmLoading` 的使用 @ZWkang ([#2883](https://github.com/Tencent/tdesign-react/pull/2883))
+- `SelectInput`: `SelectInput` 支持 `Size` 属性 @HaixingOoO ([#2894](https://github.com/Tencent/tdesign-react/pull/2894))
+- `TimePicker`: 新增支持`onPick`事件 和 `presets` API @ZWkang ([#2902](https://github.com/Tencent/tdesign-react/pull/2902))
+- `Borderless`: `Input`、`AutoComplete`、`ColorPicker`、`DatePicker`、`TagInput`、`TimePicker`新增`borderless` API，支持无边框模式 @uyarn ([#2884](https://github.com/Tencent/tdesign-react/pull/2884)) ([#2878](https://github.com/Tencent/tdesign-react/pull/2878))
+- `Scroll`: 调整`1.6.0`后针对 Chrome 滚动条样式的兼容方法，不依赖`autoprefixer`的版本 @loopzhou ([#2890](https://github.com/Tencent/tdesign-react/pull/2890))
+### 🐞 Bug Fixes
+- `ColorPicker`: 修复切换预览颜色时，通道按钮位置不变的问题 @fennghuang ([#2880](https://github.com/Tencent/tdesign-react/pull/2880))
+- `Form`: 修复由于 `FormItem`的修改，没有触发监听`FormList`的`useWatch`的问题 @HaixingOoO ([#2904](https://github.com/Tencent/tdesign-react/pull/2904))
+- `Menu`: @uyarn 
+  - 修复使用`dist`样式因为样式优先级问题导致子菜单位置偏移的问题 ([#2890](https://github.com/Tencent/tdesign-react/pull/2890))
+  - 提升 `t-popup__menu` 的样式优先级，解决 dist 内样式优先级一致导致样式异常的问题 ([#2905](https://github.com/Tencent/tdesign-react/pull/2905))
+- `Pagination`: 修复当前页输入小数后没有自动调整的问题 @uyarn ([#2886](https://github.com/Tencent/tdesign-react/pull/2886))
+- `Select`: 
+   - 修复`creatable`功能异常问题 @uyarn ([#2903](https://github.com/Tencent/tdesign-react/pull/2903))
+   - 修复`reserveKeyword`配合`Option Children`用法的异常问题 @uyarn ([#2903](https://github.com/Tencent/tdesign-react/pull/2903))
+   - 优化已选样式覆盖已禁用样式的问题 @fython ([#2905](https://github.com/Tencent/tdesign-react/pull/2905))
+- `Slider`: 修复 `sliderRef.current` 可能为空的问题 @ZWkang ([#2868](https://github.com/Tencent/tdesign-react/pull/2868))
+- `Table`: 
+  - 修复卸载表格时数据为空导致报错的异常 @duxphp ([#2900](https://github.com/Tencent/tdesign-react/pull/2900))
+  - 修复`1.5.0`版本后部分场景下使用固定列导致异常的问题 @uyarn ([#2889](https://github.com/Tencent/tdesign-react/pull/2889))
+- `TagInput`:
+  - 修复没有透传`tagProps`到折叠选项的问题 @uyarn ([#2869](https://github.com/Tencent/tdesign-react/pull/2869))
+  - 扩展 `collapsedItems` 的删除功能 @HaixingOoO ([#2881](https://github.com/Tencent/tdesign-react/pull/2881))
+- `TreeSelect`: 修复需要通过 `treeProps` 设置 `keys` 属性才生效的问题 @ZWkang ([#2896](https://github.com/Tencent/tdesign-react/pull/2896))
+- `Upload`: 
+  - 修复手动修改上传进度的 bug @HaixingOoO ([#2901](https://github.com/Tencent/tdesign-react/pull/2901))
+  - 修复图片上传错误类型下的样式异常的问题 @uyarn ([#2905](https://github.com/Tencent/tdesign-react/pull/2905))
+### 🚧 Others
+- `TagInput`: 补充`Size`属性的相关文档 @HaixingOoO ([#2894](https://github.com/Tencent/tdesign-react/pull/2894))
+- `Typography`: 删除多余的`defaultProps` @HaixingOoO ([#2866](https://github.com/Tencent/tdesign-react/pull/2866))
+- `Upload`: 修复文档中关于 OPTIONS 方法的说明 @Summer-Shen ([#2865](https://github.com/Tencent/tdesign-react/pull/2865))
+
 ## 🌈 1.7.0 `2024-04-25` 
 ### 🚀 Features
 - `Typography`: 新增 `Typography` 排版组件 @insekkei ([#2821](https://github.com/Tencent/tdesign-react/pull/2821))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-react",
   "purename": "tdesign",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "TDesign Component for React",
   "title": "tdesign-react",
   "main": "lib/index.js",
@@ -202,7 +202,7 @@
     "@types/sortablejs": "^1.10.7",
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
-    "classnames": "~2.3.1",
+    "classnames": "~2.5.1",
     "dayjs": "1.11.10",
     "hoist-non-react-statics": "~3.3.2",
     "lodash": "~4.17.15",

src/auto-complete/AutoComplete.tsx

@@ -127,6 +127,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((originalPro
       disabled={props.disabled}
       clearable={props.clearable}
       autofocus={props.autofocus}
+      borderless={props.borderless}
       onClear={props.onClear}
       onChange={onInputChange}
       onFocus={onInnerFocus}

src/auto-complete/auto-complete.en-US.md

@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autofocus | Boolean | - | \- | N
+borderless | Boolean | false | \- | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 clearable | Boolean | - | \- | N
 disabled | Boolean | - | \- | N
@@ -21,8 +23,8 @@ panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts defi
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N
 readonly | Boolean | - | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | default | options：default/success/warning/error | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
 textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N
 tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

src/auto-complete/auto-complete.md

@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autofocus | Boolean | - | 自动获取焦点 | N
+borderless | Boolean | false | 无边框模式 | N
 children | TNode | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 clearable | Boolean | - | 是否允许清空 | N
 disabled | Boolean | - | 是否禁用 | N

src/auto-complete/defaultProps.ts

@@ -5,6 +5,7 @@
 import { TdAutoCompleteProps } from './type';
 
 export const autoCompleteDefaultProps: TdAutoCompleteProps = {
+  borderless: false,
   filterable: true,
   highlightKeyword: true,
   placeholder: undefined,

src/auto-complete/type.ts

@@ -15,6 +15,11 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
    * 自动获取焦点
    */
   autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 触发显示联想词下拉框的元素，同 `triggerElement`
    */

src/avatar/Avatar.tsx

@@ -27,6 +27,9 @@ const Avatar = forwardRefWithStatics(
       shape,
       size: avatarSize,
       onError,
+      onClick,
+      onHover,
+      onContextmenu,
       children,
       content,
       style,
@@ -117,6 +120,9 @@ const Avatar = forwardRefWithStatics(
         className={avatarClass}
         style={{ ...numSizeStyle, ...style }}
         {...avatarProps}
+        onClick={(e) => onClick?.({ e })}
+        onMouseEnter={(e) => onHover?.({ e })}
+        onContextMenu={(e) => onContextmenu?.({ e })}
       >
         {renderChildren}
       </div>

src/avatar/avatar.en-US.md

@@ -17,6 +17,9 @@ imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./im
 shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N
 size | String | - | size | N
 onError | Function |  | Typescript：`(context: { e: ImageEvent }) => void`<br/>trigger on image load failed | N
+onClick | Function |  | Typescript：`(context: { e: React.MouseEvent }) => void`<br/>trigger on click | N
+onHover | Function |  | Typescript：`(context: { e: React.MouseEvent }) => void`<br/>trigger on hover | N
+onContextmenu | Function |  | Typescript：`(context: { e: React.MouseEvent }) => void`<br/>trigger on right click | N
 
 ### AvatarGroup Props
 

src/avatar/avatar.md

@@ -17,6 +17,9 @@ imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[I
 shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N
 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N
 onError | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载失败时触发 | N
+onClick | Function |  | TS 类型：`(context: { e: React.MouseEvent }) => void`<br/>点击时触发 | N
+onHover | Function |  | TS 类型：`(context: { e: React.MouseEvent }) => void`<br/>鼠标移入时触发 | N
+onContextmenu | Function |  | TS 类型：`(context: { e: React.MouseEvent }) => void`<br/>右键点击时触发 | N
 
 ### AvatarGroup Props
 

src/avatar/type.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { MouseEvent } from 'react';
 import { ImageProps } from '../image';
 import { PopupProps } from '../popup';
 import { TNode, TElement, ImageEvent } from '../common';
@@ -54,6 +55,18 @@ export interface TdAvatarProps {
    * 图片加载失败时触发
    */
   onError?: (context: { e: ImageEvent<HTMLImageElement> }) => void;
+  /**
+   * 点击时触发
+   */
+  onClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 鼠标移入时触发
+   */
+  onHover?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 右键点击时触发
+   */
+  onContextmenu?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
 }
 
 export interface TdAvatarGroupProps {

src/cascader/Cascader.tsx

@@ -97,6 +97,7 @@ const Cascader: React.FC<CascaderProps> = (originalProps) => {
       className={classNames(COMPONENT_NAME, props.className)}
       style={props.style}
       value={displayValue}
+      borderless={props.borderless}
       inputValue={visible ? inputVal : ''}
       popupVisible={visible}
       allowInput={isFilterable}

src/cascader/_example/collapsed.jsx

@@ -1,8 +1,13 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Checkbox, Tag, Space, RadioGroup, Popup } from 'tdesign-react';
 
 export default function Example() {
   const [value, setValue] = useState(['1.1', '1.2', '1.3']);
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadOnly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
   const options = [
     {
       label: '选项一',
@@ -42,26 +47,62 @@ export default function Example() {
     setValue(value);
   };
 
+  const renderCollapsedItems = ({ collapsedSelectedItems, onClose }) => (
+    <Popup
+      key={'tags'}
+      overlayInnerStyle={{
+        padding: '5px',
+      }}
+      content={
+        <Space size={5} align="center">
+          {collapsedSelectedItems.map((item, index) => (
+            <Tag
+              key={item}
+              size={size}
+              disabled={disabled}
+              closable={!readonly && !disabled}
+              onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+            >
+              {item}
+            </Tag>
+          ))}
+        </Space>
+      }
+    >
+      <Tag size={size} disabled={disabled}>
+        More({collapsedSelectedItems?.length})
+      </Tag>
+    </Popup>
+  );
+
   return (
     <Space direction="vertical">
+      <h3>default:</h3>
       <Cascader options={options} value={value} onChange={onChange} multiple minCollapsedNum={1} />
+
+      <h3>use collapsedItems:</h3>
+      <Space align="center">
+        <div>size control:</div>
+        <RadioGroup value={size} options={['small', 'medium', 'large']} onChange={(value) => setSize(value)} />
+      </Space>
+      <Space align="center">
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={(value) => setDisabled(value)} />
+      </Space>
+      <Space align="center">
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={(value) => setReadOnly(value)} />
+      </Space>
       <Cascader
         options={options}
         value={value}
         onChange={onChange}
         multiple
-        minCollapsedNum={1}
-        collapsedItems={({ count }) =>
-          count > 0 && (
-            <span
-              style={{
-                color: '#00a870',
-              }}
-            >
-              +{count - 1}
-            </span>
-          )
-        }
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
       />
     </Space>
   );

src/cascader/_usage/props.json

@@ -1,4 +1,10 @@
 [
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "checkStrictly",
     "type": "Boolean",