@alifd/chat 0.3.40-beta.0 → 0.3.40-beta.2

package/es/select/main.scss

@@ -1,17 +1,35 @@
 @import "../core/variables.scss";
 
 .#{$prefix}select {
+  width: 100%;
+  position: relative;
+  top: -0.5px;
+
+  .next-input.next-medium {
+    height: var(--form-element-medium-height, 28px) !important;
+
+    .next-input-text-field {
+      height: calc(var(--form-element-medium-height, 28px) - var(--input-border-width, 1px)*2) !important;
+      min-height: auto !important;
+    }
+  }
+
+  &.next-select-multiple .next-select-trigger-search {
+    position: relative;
+    top: 1px;
+  }
+
   .select-row-container {
     display: flex;
     justify-content: space-between;
-    margin-top: 8px;
+    margin-top: var(--s-2, 8px);
 
     &:first-child {
       margin-top: 0px;
     }
 
     .select-item {
-      margin-right: 8px;
+      // margin-right: var(--s-2, 8px);
 
       &.selected {
         border-color: $color-brand1-6;
@@ -19,11 +37,11 @@
       }
 
       &.row2{
-        width: calc(50% - 8px);
+        width: calc(50% - 4px);
       }
 
       &.row3{
-        width: calc(33.33% - 8px);
+        width: calc(33.33% - 4px);
       }
   
       &:last-child {

package/es/select/types.d.ts

@@ -1,6 +1,113 @@
 import type { SelectProps as FusionSelectProps, DataSourceItem } from '@alifd/next/types/select/types';
+/**
+ * @api Select
+ */
 export interface SelectProps extends FusionSelectProps {
-    display: 'button' | 'select';
+    /**
+     * 展现形式
+     * @en Display mode
+     */
+    display: 'button' | 'select' | 'checkbox' | 'radio';
+    /**
+     * 按钮模式下的列数
+     * @en Number of columns in button mode
+     */
     buttonCols?: number;
+    /**
+     * 选择器尺寸
+     * @en Select size
+     * @defaultValue 'medium'
+     */
+    size?: 'medium';
+    /**
+     * 选择器模式
+     * @en Select mode
+     * @defaultValue 'single'
+     */
+    mode?: 'single' | 'multiple' | 'tag';
+    /**
+     * 是否禁用
+     * @en Whether is disabled
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * 当前值，受控使用
+     * @en Current selected value(s)
+     */
+    value?: string | string[] | number | number[];
+    /**
+     * 默认值，非受控使用
+     * @en Default selected value(s)
+     */
+    defaultValue?: string | string[] | number | number[];
+    /**
+     * 数据源
+     * @en Data source for the Select
+     */
+    dataSource?: Array<DataSourceItem | string | number>;
+    /**
+     * 是否显示清除按钮
+     * @en Show clear button
+     * @defaultValue false
+     */
+    hasClear?: boolean;
+    /**
+     * 是否为必选
+     * @en Whether is required
+     * @defaultValue false
+     */
+    required?: boolean;
+    /**
+     * 输入框状态
+     * @en Input state
+     */
+    state?: 'error' | 'loading' | 'warning';
+    /**
+     * 自定义标签
+     * @en Custom label
+     */
+    label?: React.ReactNode;
+    /**
+     * 占位符
+     * @en Placeholder
+     */
+    placeholder?: string;
+    /**
+     * 值发生变化时的回调
+     * @en Callback when value changes
+     */
+    onChange?: (value: any, actionType: string) => void;
+}
+/**
+ * @api DataSourceItem
+ */
+export interface DataSourceItemType {
+    /**
+     * 选项的文本内容
+     * @en Option text content
+     */
+    label: React.ReactNode;
+    /**
+     * 选项的值
+     * @en Option value
+     */
+    value: string | number;
+    /**
+     * 是否禁用该选项
+     * @en Whether the option is disabled
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * 选项的提示文案
+     * @en Option title
+     */
+    title?: string;
+    /**
+     * 选项描述文本
+     * @en Option description
+     */
+    description?: string;
 }
 export type { DataSourceItem };

package/es/step/index.js

@@ -12,7 +12,7 @@ import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const Step = forwardRef((_a, ref) => {
     var { className, shape = 'dot', showStatus = true, current = 0, stepsList = [], defaultCollapsed = false, collapsedSteps = 1, collapsedMore = (React.createElement("div", null,
         "\u67E5\u770B\u66F4\u591A",
-        React.createElement(Icon, { type: "arrow-down", size: "xxs", style: { marginLeft: 2 } }))) } = _a, others = __rest(_a, ["className", "shape", "showStatus", "current", "stepsList", "defaultCollapsed", "collapsedSteps", "collapsedMore"]);
+        React.createElement(Icon, { type: "arrow-down", size: "xxs", style: { marginLeft: 2 } }))), size = 'large' } = _a, others = __rest(_a, ["className", "shape", "showStatus", "current", "stepsList", "defaultCollapsed", "collapsedSteps", "collapsedMore", "size"]);
     const [steps, setSteps] = useState([]);
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
     useEffect(() => {
@@ -26,7 +26,7 @@ const Step = forwardRef((_a, ref) => {
     if (stepsList.length === 0) {
         return null;
     }
-    return (React.createElement("div", Object.assign({ className: cs(`${PREFIX_DEFAULT}step`, className, collapsed && `${PREFIX_DEFAULT}step-collapsed`) }, others, { ref: ref }),
+    return (React.createElement("div", Object.assign({ className: cs(`${PREFIX_DEFAULT}step`, `${PREFIX_DEFAULT}step-${size}`, className, collapsed && `${PREFIX_DEFAULT}step-collapsed`) }, others, { ref: ref }),
         React.createElement(React.Fragment, null,
             React.createElement(StepComponent, { current: current, shape: shape, labelPlacement: "hoz", direction: "ver", readOnly: true }, steps),
             collapsed && stepsList.length > collapsedSteps && (React.createElement("div", { className: `${PREFIX_DEFAULT}step-collapsed-more`, onClick: () => setCollapsed(!collapsed) },

package/es/step/main.scss

@@ -1,91 +1,140 @@
 @import '../core/variables.scss';
 
 .#{$prefix}step {
-    .next-step-circle {
+
+    --step-circle-vertical-item-content-margin-top: 8px;
+    --step-dot-item-dot-process-size: 9px;
+
+    .next-step.next-step-vertical.next-step-label-horizontal {
         padding-left: 0;
 
-        .next-step-item-node-circle {
-            width: 24px !important;
-            height: 24px !important;
-            line-height: 24px !important;
-            background-color: $color-fill1-3 !important;
-            color: $color-text1-4 !important;
-            font-weight: 500 !important;
-            font-size: 16px !important;
-            border: none !important;
-        }
+        &.next-step-dot {
+            padding-bottom: 8px;
+            padding-top: 4px;
 
-        .next-step-item-title {
-            color: $color-text1-4 !important;
-            font-weight: 500 !important;
-            font-size: 16px !important;
-            margin-top: 0px !important;
-            line-height: 24px !important;
+            .next-step-item {
+                .next-step-item-body {
+                    .next-step-item-title {
+                        font-size: 14px;
+                        line-height: 20px;
+                    }
+                }
+            }
         }
 
-        .next-step-item-tail {
-            margin-top: 0 !important;
-        }
-    }
+        &.next-step-circle {
+            .next-step-item {
+                .next-step-item-tail {
+                    margin-top: 0;
+                    margin-bottom: 0;
+                    visibility: visible;
+                }
 
-    .next-step-dot {
-        .next-step-item-title {
-            line-height: 20px !important;
-            font-size: 14px !important;
-            font-weight: 500 !important;
-        }
-        .next-step-item-body {
-            top: -5px !important;
-            margin-left: 4px !important;
-            .next-step-item-content {
-                margin-top: 6px !important;
-                margin-bottom: 20px !important;
-                line-height: 18px !important;
+                &:last-child {
+                    .next-step-item-tail {
+                        visibility: visible;
+                    }
+                }
             }
         }
-        .next-step-item-node-dot {
-            width: 9px !important;
-            height: 9px !important;
+
+        .next-step-item {
+            .next-step-item-body {
+                .next-step-item-content {
+                    margin-bottom: 12px;
+                }
+
+                .next-step-item-title {
+                    margin-top: 0px;
+                }
+            }
         }
-        .next-step-item-tail {
-            margin: 0 auto !important;
+
+        &.next-step-dot {
+            .next-step-item {
+                &:last-child {
+                    .next-step-item-body {
+                        .next-step-item-content {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+                .next-step-item-body {
+                    top: -5px;
+
+                    .next-step-item-content {
+                        margin-bottom: 24px;
+                    }
+                }
+
+                .next-step-item-tail {
+                    margin: 0 auto;
+                }
+                .next-step-item-container {
+                    margin-top: -8px;
+                    margin-bottom: -6px;
+                }
+            }
         }
-        .next-step-item-container {
-            margin-top: -8px !important;
-            margin-bottom: -6px !important;
+    }
+
+    .next-step-circle {
+        padding-left: 0;
+
+        .next-step-item-node-circle {
+            font-weight: 500;
         }
-        .next-step-item-finish {
-            .next-step-item-title {
-                color: $color-text1-1 !important;
-            }
-            .next-step-item-content {
-                color: $color-text1-1 !important;
+    }
+
+    &-large {
+        --step-circle-item-node-process-size: 24px;
+        --step-circle-item-node-font-size: 16px;
+        --step-circle-item-content-font-size: 14px;
+
+        .next-step.next-step-vertical.next-step-label-horizontal {
+            .next-step-item {
+                .next-step-item-body {
+                    .next-step-item-title {
+                        font-size: 18px;
+                    }
+                }
             }
         }
-        .next-step-item-wait {
-            .next-step-item-title {
-                color: $color-text1-1 !important;
-            }
-            .next-step-item-content {
-                color: $color-text1-1 !important;
-            }
-            .next-step-item-node-dot {
-                border-color: transparent !important;
-                background: $color-text1-1 !important;
+    }
+
+    &-medium, &-small {
+        --step-circle-item-node-process-size: 20px;
+        --step-circle-item-node-font-size: 14px;
+        --font-lineheight-base: 20px;
+        --step-circle-item-content-font-size: 14px;
+
+        .next-step.next-step-vertical.next-step-label-horizontal {
+            .next-step-item {
+                .next-step-item-body {
+                    .next-step-item-title {
+                        font-size: 14px;
+                    }
+                }
             }
         }
     }
 }
 
 .#{$prefix}step-collapsed {
-    .next-step-item-last {
-        .next-step-item-tail {
-            visibility: visible !important;
-        }
-    }
-    .next-step-item-body {
-        .next-step-item-content {
-            margin-bottom: 0px !important;
+    .next-step.next-step-vertical.next-step-label-horizontal {
+        .next-step-item {
+            &.next-step-item-last {
+                .next-step-item-tail {
+                    visibility: visible;
+                }
+            }
+            &:last-child {
+                .next-step-item-body {
+                    .next-step-item-content {
+                        margin-bottom: 0px;
+                    }
+                }
+            }
         }
     }
 }

package/es/step/types.d.ts

@@ -2,13 +2,24 @@ import React, { type ReactNode } from 'react';
 import { type CommonProps } from '@alifd/next';
 /**
  * 步骤组件
+ * @api
  */
 export interface StepProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 自定义类名
+     * @skip
+     */
     className?: string;
     /**
-     * 支持 circle、dot
+     * 支持 circle、dot、arrow 三种形状
+     * @defaultValue 'dot'
+     */
+    shape?: 'circle' | 'dot' | 'arrow';
+    /**
+     * 步骤条尺寸
+     * @defaultValue 'small'
      */
-    shape?: 'circle' | 'dot';
+    size?: 'small' | 'large';
     /**
      * 是否根据 current 展示步骤状态，默认为 true
      */

package/es/table/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @component Table
+ * @en Table
+ * @type 展示 - Display
+ * @remarks 表格组件用于展示大量结构化数据。
+ */
+import React from 'react';
+import { Table as NextTable } from '@alifd/next';
+import type { TableProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<TableProps & React.RefAttributes<NextTable>, "key" | keyof TableProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextTable, {}>;
+export default _default;

package/es/table/index.js

@@ -0,0 +1,23 @@
+/**
+ * @component Table
+ * @en Table
+ * @type 展示 - Display
+ * @remarks 表格组件用于展示大量结构化数据。
+ */
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Table as NextTable, ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT } from '../utils';
+const Table = forwardRef((_a, ref) => {
+    var { className, size = 'medium', hasBorder = true } = _a, props = __rest(_a, ["className", "size", "hasBorder"]);
+    return (React.createElement(NextTable, Object.assign({}, props, { ref: ref, 
+        // hasBorder={false}
+        className: cs(`${PREFIX_DEFAULT}table`, {
+            [`${PREFIX_DEFAULT}table-${size}`]: size,
+            [`${PREFIX_DEFAULT}table-no-border`]: !hasBorder,
+        }, className), size: size })));
+});
+Table.displayName = 'Table';
+export * from './types';
+export default ConfigProvider.config(Table);

package/es/table/main.scss

@@ -0,0 +1,30 @@
+@import '../core/variables.scss';
+
+.#{$prefix}table {
+  &.next-table {
+    border-radius: var(--corner-2, 8px);
+    border-left: none;
+    border-top: none;
+
+    th {
+      border-right: none;
+      border-left: none;
+    }
+
+    tbody {
+      tr {
+        td:first-child {
+          border-left: var(--table-normal-border-width, 1px) var(--table-normal-border-style, solid) var(--table-normal-border-color, #DCDEE3);
+        }
+      }
+      tr:last-child {
+        td:first-child {
+          border-bottom-left-radius: var(--corner-2, 8px);
+        }
+        td:last-child {
+          border-bottom-right-radius: var(--corner-2, 8px);
+        }
+      }
+    }
+  }
+}

package/es/table/style.d.ts

@@ -0,0 +1,2 @@
+import '@alifd/next/es/table/style2';
+import './main.scss';

package/es/table/style.js

@@ -0,0 +1,2 @@
+import '@alifd/next/es/table/style2';
+import './main.scss';

package/es/table/types.d.ts

@@ -0,0 +1,98 @@
+import type { TableProps as FusionTableProps } from '@alifd/next/types/table';
+/**
+ * 表格列定义类型
+ */
+export interface ColumnType {
+    title?: React.ReactNode;
+    dataIndex?: string;
+    key?: string;
+    width?: string | number;
+    lock?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * 表格数据源类型
+ */
+export type DataSourceType = Record<string, unknown>;
+/**
+ * @api Table
+ */
+export interface TableProps extends FusionTableProps {
+    /**
+     * 样式类名的品牌前缀
+     * @skip
+     */
+    prefix?: string;
+    /**
+     * 尺寸 small为紧凑模式
+     * @skip
+     */
+    size?: 'small' | 'medium';
+    /**
+     * 自定义类名
+     * @skip
+     */
+    className?: string;
+    /**
+     * 自定义内联样式
+     * @skip
+     */
+    style?: React.CSSProperties;
+    /**
+     * 表格列配置
+     */
+    columns?: Array<ColumnType>;
+    /**
+     * 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局
+     */
+    tableLayout?: 'fixed' | 'auto';
+    /**
+     * 表格的总长度，可以这么用：设置表格总长度 、设置部分列的宽度，这样表格会按照剩余空间大小，自动其他列分配宽度
+     */
+    tableWidth?: number;
+    /**
+     * 表格展示的数据源
+     */
+    dataSource?: Array<DataSourceType>;
+    /**
+     * 表格是否具有边框
+     */
+    hasBorder?: boolean;
+    /**
+     * 表格是否具有头部
+     */
+    hasHeader?: boolean;
+    /**
+     * 表格是否是斑马线
+     * @skip
+     */
+    isZebra?: boolean;
+    /**
+     * 表格是否在加载中
+     */
+    loading?: boolean;
+    /**
+     * 自定义国际化文案对象
+     * @skip
+     */
+    locale?: {
+        ok: string;
+        reset: string;
+        empty: string;
+        asc: string;
+        desc: string;
+        expanded: string;
+        folded: string;
+        filter: string;
+        selectAll: string;
+    };
+    /**
+     * 设置数据为空的时候的表格内容展现
+     * @skip
+     */
+    emptyContent?: React.ReactNode;
+    /**
+     * dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中
+     */
+    primaryKey?: string;
+}

package/es/table/types.js

@@ -0,0 +1 @@
+export {};

package/es/tag/index.d.ts

@@ -6,8 +6,8 @@
  * @when Tag
  */
 import React from 'react';
-import { TagProps } from './types';
-export type { TagProps } from '@alifd/next/types/tag';
+import { type TagGroupProps, type TagProps } from './types';
+export type { TagProps, TagGroupProps } from './types';
 declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<TagProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<(import("@alifd/next/types/tag").TagProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps) & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/tag").TagProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
     __destroyed: boolean;
     tagNode: HTMLDivElement | null;
@@ -1776,5 +1776,7 @@ declare const _default: import("@alifd/next/types/config-provider/types").Config
     UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/tag").TagProps>, nextState: Readonly<{
         visible: boolean;
     }>, nextContext: any): void;
-}>>, {}>;
+}>>, {}> & {
+    Group: React.ForwardRefExoticComponent<Pick<TagGroupProps & React.RefAttributes<HTMLDivElement> & import("../utils").WithLabelProps, "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "onClose" | "key" | "state" | "label" | "labelLayout" | "disabled" | "required" | "readOnly" | "labelWidth" | "dataSource"> & React.RefAttributes<any>>;
+};
 export default _default;

package/es/tag/index.js

@@ -9,13 +9,29 @@ import { __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { Tag as NextTag, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
-import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+import { PREFIX_DEFAULT, assignSubComponent, withLabel } from '../utils';
+// Tag组件
 const Tag = forwardRef((_a, ref) => {
     var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
     return (React.createElement(NextTag, Object.assign({}, props, { ref: ref, className: cs(`${PREFIX_DEFAULT}tag`, className), size: size })));
 });
-// 暂时只开放 Tag 组件，其它子组件后续看需求
+const TagGroup = forwardRef((_a, ref) => {
+    var { className, children, dataSource, onClose, size = 'medium' } = _a, props = __rest(_a, ["className", "children", "dataSource", "onClose", "size"]);
+    const renderTags = () => {
+        if (!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length)) {
+            return null;
+        }
+        return dataSource.map((item, index) => (React.createElement(Tag, { key: index, type: item.type || 'normal', color: item.color, closable: item.closable, size: item.size || size, onClose: onClose ? () => onClose(item, index) : undefined }, item.label)));
+    };
+    return (React.createElement("div", Object.assign({}, props, { ref: ref, className: cs(`${PREFIX_DEFAULT}tag-group`, `${PREFIX_DEFAULT}tag-group-${size}`, className) }), renderTags()));
+});
+// 添加 Label 支持到 TagGroup
+const LabeledTagGroup = withLabel(TagGroup, {
+    enableHoverState: false,
+});
+// 导出组件
 const TagWithSub = assignSubComponent(Tag, {
     displayName: 'Tag',
+    Group: LabeledTagGroup,
 });
 export default ConfigProvider.config(TagWithSub);