@unicom-cloud/ui 0.8.83 → 0.8.84

package/types/pc/select/interface.d.ts

@@ -0,0 +1,321 @@
+import { Options as ScrollIntoViewOptions } from '@unicom-cloud/scroll-into-view-if-needed';
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { SelectViewCommonProps } from '../select-view';
+import { TriggerProps } from '../trigger';
+import { AvailableVirtualListProps } from '../virtual-list';
+export type OptionsType = SelectProps['options'];
+export type InputValueChangeReason = 'manual' | 'optionChecked' | 'optionListHide' | 'tokenSeparator';
+export interface OptionInfo extends PropsWithChildren<OptionProps> {
+    child?: ReactElement;
+    _valid: boolean;
+    _index: number;
+    _origin: 'children' | 'options' | 'userCreatedOptions' | 'userCreatingOption';
+}
+export type LabeledValue = {
+    value: string | number;
+    label: ReactNode;
+};
+export type SelectInnerStateValue = string | number | string[] | number[];
+/**
+ * @title Select
+ */
+export interface SelectProps extends SelectViewCommonProps {
+    /**
+     * @zh 选择框的默认值
+     * @en To set default value
+     */
+    defaultValue?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * @zh 选择器的值（受控模式）
+     * @en To set value
+     */
+    value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * @zh 输入框的值（受控模式）
+     * @en To set input value
+     */
+    inputValue?: string;
+    /**
+     * @zh 是否开启多选模式或标签模式 (**`tags` 推荐使用 `mode: multiple; allowCreate: true` 替代，下一大版本将移除此模式**)
+     * @en Set mode of Select(**`tags` recommends using `mode: multiple; allowCreate: true` instead, this mode will be removed in the next major version**)
+     */
+    mode?: 'multiple' | 'tags';
+    /**
+     * @zh 是否开启全选选项，仅在多选模式时才生效
+     * 潘启宝添加
+     */
+    allowCheckAll?: boolean;
+    /**
+     * @zh 指定可选项
+     * @en Select options
+     * @version `extra` in 2.2.0
+     */
+    options?: (string | number | {
+        label: ReactNode | string;
+        value: string | number;
+        disabled?: boolean;
+        extra?: any;
+    })[];
+    /**
+     * @zh 设置 `onChange` 回调中 `value` 的格式。默认是string，设置为true时候，value格式为： { label: string, value: string }
+     * @en Whether to embed label in value, turn the format of value from string to `{ value: string, label: ReactNode }`
+     */
+    labelInValue?: boolean;
+    /**
+     * @zh 是否根据输入的值筛选数据。如果传入函数的话，接收 `inputValue` 和 `option` 两个参数，当option符合筛选条件时，返回 `true`，反之返回 `false`。
+     * @en If it's true, filter options by input value. If it's a function, filter options base on the function.
+     * @defaultValue true
+     */
+    filterOption?: boolean | ((inputValue: string, option: ReactElement, optionRaw: object | undefined | null) => boolean);
+    /**
+     * @zh
+     * 定制回显内容。返回值将会显示在下拉框内。若 `value` 对应的 `Option` 不存在，则第一个参数是 null
+     * @en
+     * Customize the content that will be displayed in the Select.
+     * If the `Option` corresponding to `value` does not exist, the first parameter will be `null`
+     */
+    renderFormat?: (option: OptionInfo | null, value: string | number | LabeledValue) => ReactNode;
+    /**
+     * @zh 是否默认高亮第一个选项
+     * @en Whether to highlight the first option by default
+     * @defaultValue true
+     */
+    defaultActiveFirstOption?: boolean;
+    /**
+     * @zh 是否允许通过输入创建新的选项。
+     * @en Whether to allow new options to be created by input.
+     * @version 2.13.0, `{ formatter }` in 2.54.0
+     */
+    allowCreate?: boolean | {
+        formatter: (inputValue: string, creating: boolean) => SelectProps['options'][number];
+    };
+    /**
+     * @zh 是否在隐藏的时候销毁 DOM 结构
+     * @en Whether to destroy the DOM when hiding
+     * @defaultValue true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * @zh 下拉框是否默认打开。
+     * @en Whether to show dropdown by default.
+     * @version 2.14.0
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * @zh 控制下拉框是否打开。
+     * @en Whether to show dropdown.
+     * @version 2.6.0
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 没有数据时显示的内容
+     * @en Specify content to show when no result matches.
+     */
+    notFoundContent?: ReactNode;
+    /**
+     * @zh 在多选模式下自动分词的分隔符。
+     * @en Separator used to tokenize on `multiple` mode.
+     */
+    tokenSeparators?: string[];
+    /**
+     * @zh 弹出框挂载的父节点。
+     * @en To set the container of the dropdown.
+     */
+    getPopupContainer?: (node: HTMLElement) => Element;
+    /**
+     * @zh 触发方式。
+     * @en The trigger mode which executes the dropdown action.
+     * @defaultValue click
+     */
+    trigger?: TriggerProps['trigger'];
+    /**
+     * @zh 自定义触发元素。
+     * @en The trigger element which executes the dropdown action.
+     * @version `() => ReactNode` in 2.31.0
+     */
+    triggerElement?: ReactNode | ((params: {
+        value: any;
+        option: OptionInfo | OptionInfo[];
+    }) => ReactNode);
+    /**
+     * @zh 可以接受所有 `Trigger` 的 `Props`
+     * @en Pass all `Trigger` component properties
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 自定义弹出内容。
+     * @en Customize dropdown content
+     */
+    dropdownRender?: (menu: ReactNode) => ReactNode;
+    /**
+     * @zh 下拉列表的样式。
+     * @en The style of dropdown menu.
+     */
+    dropdownMenuStyle?: CSSProperties;
+    /**
+     * @zh 下拉列表的类。
+     * @en The className of dropdown menu.
+     */
+    dropdownMenuClassName?: string | string[];
+    /**
+     * @zh 传递虚拟滚动属性。
+     * @en Pass properties used by VirtualList.
+     * @version 2.1.0
+     */
+    virtualListProps?: AvailableVirtualListProps;
+    /**
+     * @zh 点击选择框的回调
+     * @en Callback when select an option or input value change.
+     */
+    onChange?: (value: any, option: OptionInfo | OptionInfo[]) => void;
+    /**
+     * @zh 选中选项时触发的回调，(只在 `multiple` 模式下触发)。
+     * @en Called when an option is selected. Only called for `multiple` mode.
+     * @version 2.52.0
+     */
+    onSelect?: (value: string | number | LabeledValue, option: OptionInfo) => void;
+    /**
+     * @zh 取消选中的时候触发的回调，(只在 `multiple` 模式下触发)。
+     * @en Called when an option is deselected. Only called for `multiple` mode.
+     */
+    onDeselect?: (value: string | number | LabeledValue, option: OptionInfo) => void;
+    /**
+     * @zh 点击清除时触发，参数是当前下拉框的展开状态。
+     * @en Called when clear
+     */
+    onClear?: (visible: boolean) => void;
+    /**
+     * @zh 搜索时的回调
+     * @en Callback when input changed
+     */
+    onSearch?: (value: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 获得焦点时的回调
+     * @en Callback when get focus
+     */
+    onFocus?: (e: any) => void;
+    /**
+     * @zh 失去焦点时的回调
+     * @en Callback when lose focus
+     */
+    onBlur?: (e: any) => void;
+    /**
+     * @zh 下拉框的滚动监听函数，参数为滚动元素。
+     * @en Callback when dropdown scrolls.
+     */
+    onPopupScroll?: (elem: any) => void;
+    /**
+     * @zh 下拉框收起展开时触发
+     * @en Callback when visibility of dropdown is changed.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @zh 输入框文本改变的回调。
+     * @en Callback when the value of input is changed.
+     * @version 2.3.0
+     */
+    onInputValueChange?: (value: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 输入框文本粘贴的回调。
+     * @en Callback when the you paste text in input box.
+     * @version 2.9.0
+     */
+    onPaste?: (e: any) => void;
+}
+/**
+ * @title Select.Option
+ */
+export interface OptionProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
+    _key?: any;
+    style?: CSSProperties;
+    children?: ReactNode;
+    prefixCls?: string;
+    rtl?: boolean;
+    className?: string | string[];
+    wrapperClassName?: string | string[];
+    /**
+     * @zh 是否禁用
+     * @en Whether the option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 默认根据此属性值进行筛选
+     * @en Value of this Option
+     */
+    value: string | number;
+    /**
+     * @zh 携带任意自定义数据。
+     * @en Any data you want to pass to Option.
+     * @version 2.2.0
+     */
+    extra?: any;
+    isSelectOption?: boolean;
+    _isMultipleMode?: boolean;
+    _isUserCreatedOption?: boolean;
+    _isUserCreatingOption?: boolean;
+    _valueActive?: OptionProps['value'];
+    _valueSelect?: SelectInnerStateValue;
+    _onClick?: (value: OptionProps['value'], disabled: boolean) => void;
+    _onMouseEnter?: (value: OptionProps['value']) => void;
+    _onMouseLeave?: () => void;
+}
+/**
+ * @title Select.OptGroup
+ */
+export interface OptGroupProps extends HTMLAttributes<HTMLLIElement> {
+    _key?: any;
+    children?: ReactNode;
+    prefixCls?: string;
+    /**
+     * @zh 组名
+     * @en Name of Group
+     */
+    label?: ReactNode;
+    isSelectOptGroup?: boolean;
+}
+/**
+ * @title Select Reference Type
+ */
+export type SelectHandle = {
+    /**
+     * @zh DOM 节点
+     * @en DOM
+     */
+    dom: HTMLDivElement;
+    /**
+     * @zh 使选择框聚焦
+     * @en Focus Select
+     */
+    focus: () => void;
+    /**
+     * @zh 使选择框失焦
+     * @en Blur Select
+     */
+    blur: () => void;
+    /**
+     * @zh 鼠标快捷操作的处理函数
+     * @en Processor of mouse shortcut operation
+     */
+    hotkeyHandler: (event: KeyboardEvent) => void;
+    /**
+     * @zh 处于悬浮态的选项的值
+     * @en The value of active option
+     */
+    activeOptionValue: OptionProps['value'];
+    /**
+     * @zh 获得选项信息的列表
+     * @en Get the list of option info
+     */
+    getOptionInfoList: () => OptionInfo[];
+    /**
+     * @zh 根据选项值获得对应的选项信息
+     * @en Get the option info by its value
+     */
+    getOptionInfoByValue: (value: OptionProps['value']) => OptionInfo;
+    /**
+     * @zh 将下拉列表滚动至指定选项
+     * @en Scroll the drop-down list to the specified option
+     * @version 2.46.0
+     */
+    scrollIntoView: (value: OptionProps['value'], options?: ScrollIntoViewOptions) => void;
+};

package/types/{select → pc/select}/util.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { OptionInfo, OptionProps, SelectInnerStateValue, SelectProps } from './interface';
 export type OptionInfoMap = Map<OptionProps['value'], OptionInfo>;
 declare function preventDefaultEvent(e: any): void;
@@ -15,7 +16,7 @@ declare function flatChildren({ children, options, filterOption, }: Pick<SelectP
     optionValueList?: Array<OptionProps['value']>;
     customNodeCount?: number;
 }): {
-    childrenList: any;
+    childrenList: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     optionInfoMap: OptionInfoMap;
     optionValueList: (string | number)[];
     optionIndexListForArrowKey: number[];

package/types/pc/select-view/interface.d.ts

@@ -0,0 +1,151 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { InputTagProps } from '../input-tag';
+import { InputComponentProps } from '../input/interface';
+import { PopoverProps } from '../popover';
+export interface SelectViewCommonProps extends Pick<InputTagProps<unknown>, 'animation' | 'renderTag' | 'dragToSort'> {
+    id?: string;
+    style?: CSSProperties;
+    className?: string | string[];
+    children?: ReactNode;
+    inputValue?: string;
+    /**
+     * @zh 选择框默认文字。
+     * @en Placeholder of element
+     */
+    placeholder?: string;
+    /**
+     * @zh 是否需要边框
+     * @en Whether to render border
+     * @defaultValue true
+     */
+    bordered?: boolean;
+    /**
+     * @zh
+     * 使单选模式可搜索，传入 `{ retainInputValue: true }` 在搜索框聚焦时保留现有内容
+     * 传入 `{ retainInputValueWhileSelect: true }` 在多选选择时保留输入框内容。
+     * @en
+     * Whether single mode Select is searchable. `{ retainInputValue: true }` to retain the existing content when the search box is focused,
+     * `{ retainInputValueWhileSelect: true }` to retain the existing content when multiple selection is selected.
+     */
+    showSearch?: boolean | {
+        retainInputValue?: boolean;
+        retainInputValueWhileSelect?: boolean;
+    };
+    /**
+     * @zh 分别不同尺寸的选择器。对应 `24px`, `28px`, `32px`, `36px`
+     * @en Height of element, `24px` `28px` `32px` `36px`
+     */
+    size?: 'mini' | 'small' | 'default' | 'large';
+    /**
+     * @zh 是否为禁用状态。
+     * @en Whether is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 是否是错误状态。(废弃，下个大版本移除，使用 status='error' 替代)
+     * @en Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)
+     * @deprecated
+     */
+    error?: boolean;
+    /**
+     * @zh 状态
+     * @en Status
+     * @version 2.45.0
+     */
+    status?: 'error' | 'warning';
+    /**
+     * @zh 是否为加载状态。
+     * @en Whether is in loading
+     */
+    loading?: boolean;
+    /**
+     * @zh 允许清除值。
+     * @en Whether allow to clear selected options
+     */
+    allowClear?: boolean;
+    /**
+     * @zh 最多显示多少个 `tag`，仅在多选或标签模式有效。设置 `responsive` 响应式显示标签数不建议在选项较多时使用，可能存在性能问题，
+     * @en The maximum number of `tags` is displayed, only valid in `multiple` and `label` mode. Setting the number of `responsive` responsive display tags is not recommended when there are many options, as there may be performance issues.
+     * @version Object type in 2.37.0. `responsive ` in `2.62.0`
+     */
+    maxTagCount?: number | 'responsive' | {
+        count: number | 'responsive';
+        render?: (invisibleTagCount: number) => ReactNode;
+        showPopover?: boolean | Partial<PopoverProps>;
+    };
+    /**
+     * @zh 前缀。
+     * @en Customize select suffix
+     * @version 2.11.0
+     */
+    prefix?: ReactNode;
+    /**
+     * @zh 自定义选择框后缀图标。
+     * @en Customize select suffix icon
+     */
+    suffixIcon?: ReactNode;
+    /**
+     * @zh 自定义箭头图标，设置为 `null` 不显示箭头图标。
+     * @en Customize select arrow icon.
+     */
+    arrowIcon?: ReactNode | null;
+    /**
+     * @zh 多选时配置选中项的删除图标。当传入`null`，不显示删除图标。
+     * @en Customize the delete icon of tags selected in `multiple` and `label` mode.
+     */
+    removeIcon?: ReactNode | null;
+    /**
+     * @zh `allowClear` 时配置清除按钮的图标。
+     * @en Configure the icon of the clear button when `allowClear`.
+     * @version 2.26.0
+     */
+    clearIcon?: ReactNode;
+    /**
+     * @zh 设置宽度自适应。minWidth 默认为 0，maxWidth 默认为 100%
+     * @en auto width. minWidth defaults to 0, maxWidth defaults to 100%
+     * @version 2.54.0
+     */
+    autoWidth?: boolean | {
+        minWidth?: CSSProperties['minWidth'];
+        maxWidth?: CSSProperties['maxWidth'];
+    };
+    /**
+     * @zh 选择框前添加元素
+     * @en The label text displayed before (on the left side of) the select field
+     * @version 2.41.0
+     */
+    addBefore?: ReactNode;
+    /**
+     * @zh 鼠标点击下拉框时的回调
+     * @en Callback when the mouse clicks on the drop-down box
+     */
+    onClick?: (e: any) => void;
+    /**
+     * @zh 键盘输入时的回调
+     * @en Callback when keyboard pressed
+     * @version 2.40.0
+     */
+    onKeyDown?: (e: any) => void;
+}
+export interface SelectViewProps extends SelectViewCommonProps {
+    value?: any;
+    popupVisible?: boolean;
+    allowCreate?: boolean;
+    isEmptyValue: boolean;
+    isMultiple?: boolean;
+    prefixCls: string;
+    rtl?: boolean;
+    ariaControls?: string;
+    renderText: (value: any) => {
+        text: any;
+        disabled: any;
+    };
+    renderView?: (eleView: ReactElement) => ReactElement;
+    onSort?: (value: any) => void;
+    onRemoveCheckedItem?: (item: any, index: number, e: any) => void;
+    onChangeInputValue?: InputComponentProps['onChange'];
+    onPaste?: (e: any) => void;
+    onClear?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+}

package/types/{skeleton → pc/skeleton}/interface.d.ts

@@ -1,24 +1,50 @@
 import { CSSProperties } from 'react';
+/**
+ * @title Skeleton
+ */
 export interface SkeletonProps {
     style?: CSSProperties;
     className?: string;
+    /**
+     * @zh 是否显示动画效果
+     * @en Whether to show animation
+     */
     animation?: boolean;
+    /**
+     * @zh 是否显示子组件。为 `true` 时候显示占位符
+     * @en Whether to show subcomponent. Set `true` to show placeholder
+     * @defaultValue true
+     */
     loading?: boolean;
+    /**
+     * @zh 是否显示图片占位
+     * @en Whether to show the picture placeholder
+     */
     image?: SkeletonImageProps | boolean;
+    /**
+     * @zh 是否显示文本占位
+     * @en Whether to show text placeholder
+     * @defaultValue true
+     */
     text?: SkeletonTextProps | boolean;
 }
 export interface SkeletonImageProps {
     style?: CSSProperties;
     className?: string;
+    /** 图片形状 */
     shape?: 'circle' | 'square';
+    /** 图片尺寸 */
     size?: 'small' | 'default' | 'large';
+    /** 图片位置 */
     position?: 'left' | 'right';
     prefixCls?: string;
 }
 export interface SkeletonTextProps {
     style?: CSSProperties;
     className?: string;
+    /** 文本行数 */
     rows?: number;
+    /** 文本行宽度 */
     width?: number | string | (string | number)[];
     prefixCls?: string;
 }

package/types/pc/slider/interface.d.ts

@@ -0,0 +1,122 @@
+import { CSSProperties, ReactNode } from 'react';
+import { InputNumberProps } from '../input-number';
+export type TooltipPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+/**
+ * @title Slider
+ */
+export interface SliderProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 控制 tooltip 的展示。设置为 `true` 时，将一直展示 tooltip。设置为 `false` 时，将一直隐藏 tooltip。
+     * @en If true, `Tooltip` will show always, or it will hidden anyway,  even if dragging or hovering
+     */
+    tooltipVisible?: boolean;
+    /**
+     * @zh tooltip 的位置
+     * @en The position of the tooltip
+     */
+    tooltipPosition?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable the component
+     */
+    disabled?: boolean;
+    /**
+     * @zh 滑动范围最小值
+     * @en Minimum value of sliding range
+     * @defaultValue 0
+     */
+    min?: number;
+    /**
+     * @zh 滑动范围最大值
+     * @en Maximum value of sliding range
+     * @defaultValue 100
+     */
+    max?: number;
+    /**
+     * @zh 是否是范围选择
+     * @en Whether to allow range selection
+     * @version 2.14.0
+     */
+    range?: boolean | {
+        draggableBar: boolean;
+    };
+    /**
+     * @zh 步长
+     * @en Slide the value of one step
+     * @defaultValue 1
+     */
+    step?: number;
+    /**
+     * @zh 是否显示步长刻度线
+     * @en Whether to display step tick marks
+     */
+    showTicks?: boolean;
+    /**
+     * @zh 标签。是一个对象。key 为在[min, max]内的整数。
+     * @en The labels on the render ruler. `marks` is an Object, it's `key` is an integer within [min, max].
+     */
+    marks?: Record<number, ReactNode>;
+    /**
+     * @zh 针对区间配置，返回区间步长和相对于整个滑动轴的宽度比例(如 0.5 或 "50%")。**只在`marks`场景下生效**
+     * @en For interval configuration, returns the interval step size and the ratio of the width relative to the entire sliding axis (e.g. 0.5 or "50%"). **Only valid in `marks` scene**
+     * @version 2.30.0
+     */
+    getIntervalConfig?: (range: number[], index: number) => {
+        step?: number;
+        width?: number | string;
+    };
+    /**
+     * @zh 只能选择标签值，此时step将会被忽略
+     * @en Whether only the mark value can be selected
+     */
+    onlyMarkValue?: boolean;
+    /**
+     * @zh 默认值
+     * @en To set default value
+     */
+    defaultValue?: number | number[];
+    /**
+     * @zh 值
+     * @en To set value
+     */
+    value?: number | number[];
+    /**
+     * @zh 是否竖直方向
+     * @en Whether to display the slider in the vertical direction
+     */
+    vertical?: boolean;
+    /**
+     * @zh 是否展示输入框，`onlyMarkValue` 为 `true` 或范围内多点选择时输入框始终隐藏。可接受 `InputNumber` 的 `props`。
+     * @en Whether to display the input box. When setting `onlyMarkValue` to `true` or selecting multiple points within the range, the input box will never be displayed. Accepts `props` for `InputNumber`.
+     * @version `InputNumberProps` in `2.32.0`
+     */
+    showInput?: boolean | InputNumberProps | InputNumberProps[];
+    /**
+     * @zh 设置 `tooltip` 所插入的父元素
+     * @en The parent node which the `tooltip` will be rendered to
+     */
+    getTooltipContainer?: () => Element;
+    /**
+     * @zh 格式化 `tooltip` 内容
+     * @en Format the content of `tooltip`
+     */
+    formatTooltip?: (value: number) => string | ReactNode;
+    /**
+     * @zh 反向坐标轴, `rtl` 场景默认为 `true`
+     * @en Reverse axis, default `true` in `rtl`
+     */
+    reverse?: boolean;
+    /**
+     * @zh 触发时机在 `mouseup`，参数是当前值
+     * @en Callback when `onmouseup` is fired
+     * @version 2.20.0
+     */
+    onAfterChange?: (val: number | number[]) => void;
+    /**
+     * @zh 选择值变化时触发
+     * @en Callback when the user changed the slider's value
+     */
+    onChange?: (val: number | number[]) => void;
+}

package/types/pc/space/interface.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, ReactNode } from 'react';
+export type SpaceSize = 'mini' | 'small' | 'medium' | 'large' | number;
+/**
+ * @title Space
+ */
+export interface SpaceProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 对齐方式
+     * @en Alignment of items
+     */
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    /**
+     * @zh 间距方向
+     * @en The space direction
+     * @defaultValue horizontal
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * @zh 尺寸。( `2.15.0` 开始支持数组形式 )
+     * @en The space size. ( Array format add in `2.15.0` )
+     * @defaultValue small
+     */
+    size?: SpaceSize | SpaceSize[];
+    /**
+     * @zh 环绕类型的间距，用于折行的场景。
+     * @en Whether to wrap line automatic
+     */
+    wrap?: boolean;
+    /**
+     * @zh 设置分隔符
+     * @en Set separator
+     * @version 2.22.0
+     */
+    split?: ReactNode;
+    children?: ReactNode;
+}