@rainbow-oh/yee-c 0.8.16 → 0.8.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Select/demo/loading.tsx

@@ -0,0 +1,28 @@
+import { Select, Space } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Orange', value: 'orange' },
+];
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Select
+        loading
+        options={options}
+        style={{ width: 200 }}
+        placeholder="Loading"
+      />
+      <Select
+        loading
+        disabled
+        defaultValue="apple"
+        options={options}
+        style={{ width: 200 }}
+      />
+    </Space>
+  );
+};

package/src/Select/index.en-US.md

@@ -17,6 +17,7 @@ Select component for choosing from a set of options.
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Select"></code>
 <code src="./demo/size.tsx" title="Size" description="Different sizes of Select"></code>
 <code src="./demo/disabled.tsx" title="Disabled" description="Disabled Select"></code>
+<code src="./demo/loading.tsx" title="Loading" description="Loading Select, optionally combined with disabled"></code>
 <code src="./demo/allowClear.tsx" title="Allow Clear" description="Allow clear selected value"></code>
 <code src="./demo/multiple.tsx" title="Multiple" description="Multiple selection mode"></code>
 <code src="./demo/search.tsx" title="Search" description="Searchable Select"></code>
@@ -39,6 +40,7 @@ Select component for choosing from a set of options.
 | defaultValue | `string \| number \| Array<string \| number>` | Default value | - |
 | value | `string \| number \| Array<string \| number>` | Controlled value | - |
 | disabled | `boolean` | Whether disabled | - |
+| loading | `boolean` | Whether data is loading; displays a spinner in the selector suffix | `false` |
 | placeholder | `string` | Placeholder text | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | Dropdown position | - |
 | searchable | `boolean` | Whether searchable | - |

package/src/Select/index.zh-CN.md

@@ -17,6 +17,7 @@ toc: 'content'
 <code src="./demo/basic.tsx" title="基础用法" description="Select的基础用法"></code>
 <code src="./demo/size.tsx" title="尺寸" description="不同尺寸的Select"></code>
 <code src="./demo/disabled.tsx" title="禁用" description="禁用的Select"></code>
+<code src="./demo/loading.tsx" title="加载中" description="加载中的 Select，可与 disabled 组合使用"></code>
 <code src="./demo/allowClear.tsx" title="可清除" description="可清除已选值"></code>
 <code src="./demo/multiple.tsx" title="多选" description="多选模式"></code>
 <code src="./demo/search.tsx" title="可搜索" description="可搜索的Select"></code>
@@ -39,6 +40,7 @@ toc: 'content'
 | defaultValue | `string \| number \| Array<string \| number>` | 默认值 | - |
 | value | `string \| number \| Array<string \| number>` | 受控值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时选择框后缀显示加载图标 | `false` |
 | placeholder | `string` | 选择框默认文本 | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | 下拉框弹出位置 | - |
 | searchable | `boolean` | 是否可搜索 | - |

package/src/Select/interface.ts

@@ -1,7 +1,6 @@
-import type { TriggerProps } from '../Trigger';
 import type { SelectorProps } from '../Selector';
+import type { TriggerProps } from '../Trigger';
 import type { DataAttributeProps } from '../utils/types';
-
 export type Option = {
   /**
    * Whether disabled
@@ -26,7 +25,10 @@ export type Option = {
 };
 
 export interface SelectProps
-  extends DataAttributeProps, Pick<SelectorProps, 'size'>, Omit<TriggerProps, 'popup' | 'children'> {
+  extends
+    DataAttributeProps,
+    Pick<SelectorProps, 'size'>,
+    Omit<TriggerProps, 'popup' | 'children'> {
   /**
    * Custom class name prefix
    * */
@@ -60,6 +62,11 @@ export interface SelectProps
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Placeholder text for the select box
    */

package/src/Select/select.tsx

@@ -51,6 +51,7 @@ const Select = (baseprops: SelectProps) => {
     defaultValue,
     optionFilterProp = 'label',
     disabled,
+    loading,
     onChange,
     onFilter,
     virtual,
@@ -233,6 +234,7 @@ const Select = (baseprops: SelectProps) => {
         value={searchValue}
         options={options}
         disabled={disabled}
+        loading={loading}
         selectedKeys={mergedValue}
         onOpenChange={handleOpenChange}
         onClear={handleClear}

package/src/Selector/selector.tsx

@@ -224,7 +224,16 @@ const Selector = React.forwardRef(
       return (
         <span className={`${prefixCls}-arrow`}>
           {loading ? (
-            <Spin size="small" />
+            <Spin
+              variant="ring"
+              size="small"
+              style={
+                {
+                  '--m-indicator-dot-bg-color':
+                    'var(--yee-text-color-secondary)',
+                } as React.CSSProperties
+              }
+            />
           ) : suffix ? (
             typeof suffix === 'function' ? (
               suffix()

package/src/TableSelect/index.en-US.md

@@ -43,6 +43,7 @@ A component for selecting one or more options from table data, combining feature
 | value | `SelectionKeyType \| SelectionKeyType[]` | Controlled value | - |
 | defaultValue | `SelectionKeyType \| SelectionKeyType[]` | Default value | - |
 | disabled | `boolean` | Whether disabled | - |
+| loading | `boolean` | Whether data is loading; displays a gray loading indicator | `false` |
 | placement | `'bottomLeft' \| 'topLeft'` | Popup placement | `'bottomLeft'` |
 | searchable | `boolean` | Whether searchable | `true` |
 | searchOnInput | `boolean` | Whether to search while typing | `true` |

package/src/TableSelect/index.zh-CN.md

@@ -43,6 +43,7 @@ toc: 'content'
 | value | `SelectionKeyType \| SelectionKeyType[]` | 受控值 | - |
 | defaultValue | `SelectionKeyType \| SelectionKeyType[]` | 默认值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时显示灰色加载图标 | `false` |
 | placement | `'bottomLeft' \| 'topLeft'` | 弹出层位置 | `'bottomLeft'` |
 | searchable | `boolean` | 是否可搜索 | `true` |
 | searchOnInput | `boolean` | 是否边输入边搜索 | `true` |

package/src/TableSelect/interface.ts

@@ -131,6 +131,11 @@ export interface TableSelectProps
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Input direction (for special scenarios)
    */

package/src/TableSelect/table-select.tsx

@@ -37,6 +37,7 @@ const TableSelect = (baseprops: TableSelectProps) => {
     defaultValue,
     placement = 'bottomLeft',
     disabled,
+    loading,
     rowSelection,
     dataSource,
     rowKey = 'id',
@@ -175,6 +176,7 @@ const TableSelect = (baseprops: TableSelectProps) => {
     options: selectorOptions,
     open: open,
     disabled: disabled,
+    loading: loading,
     value: searchValue,
     selectedKeys: mergedValue,
     onSearch: handleSearch,

package/src/Tree/index.en-US.md

@@ -44,7 +44,8 @@ Tree is a hierarchical data display component.
 | icon | `React.ReactNode \| ((props: TreeProps<T>) => React.ReactNode)` | Icon before title (requires showIcon) | - |
 | switcherIcon | `[React.ReactNode, React.ReactNode]` | Expand/collapse switcher icons | - |
 | multiple | `boolean` | Whether tree node supports multiple selection | `false` |
-| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T }` | Custom key, label, children fields | - |
+| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T; extra?: keyof T }` | Custom key, label, children, extra fields | - |
+| labelRender | `(node: TreeNode<T>) => React.ReactNode` | Custom label render function. When provided, takes full control of the label area; the node's `extra` will NOT be appended automatically (access it via `node.extra` in your render function) | - |
 | loadData | `() => void` | Async load data | - |
 | dataSource | `Array<T> \| T` | Data source | - |
 | checkedKeys | `Array<string \| number>` | Checked tree nodes (controlled) | - |
@@ -53,4 +54,21 @@ Tree is a hierarchical data display component.
 | defaultSelectedKeys | `Array<string \| number>` | Default selected tree nodes | - |
 | onCheck | `(checkedKeys: Array<string \| number>, params: { checked: boolean; checkedNodes: T[]; node: T }) => void` | Callback when checkbox is checked | - |
 | onSelect | `(selectedKeys: Array<string \| number>, params: { selected: boolean; selectedNodes: T[]; node: T }) => void` | Callback when tree node is clicked | - |
-| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | Callback when expand/collapse | - |
+| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | Callback when expand/collapse | - |
+
+### Data Node Fields
+
+| Property | Type | Description |
+| --- | --- | --- |
+| key | `string \| number` | Unique node identifier |
+| label | `string` | Display text |
+| children | `Array<T>` | Child nodes |
+| extra | `React.ReactNode \| ((node: T) => React.ReactNode)` | Extra content rendered after the label (e.g. tags, badges, action buttons). When `labelRender` is provided, extra is NOT rendered automatically — access it via `node.extra` in your render function |
+| disabled | `boolean` | Whether disabled |
+| icon | `React.ReactNode \| (() => React.ReactNode)` | Custom icon |
+
+### Relationship between extra and labelRender
+
+- **`extra` only**: Automatically appended after the default label text. Ideal for simple tags, badges, etc.
+- **`labelRender` only**: Full custom rendering of the node label area.
+- **Both present**: `labelRender` takes priority; extra is NOT automatically appended. To use extra in your custom render, access it via the callback parameter `node.extra`.

package/src/Tree/index.zh-CN.md

@@ -44,7 +44,8 @@ toc: 'content'
 | icon | `React.ReactNode \| ((props: TreeProps<T>) => React.ReactNode)` | 标题前的图标，需设置showIcon为true | - |
 | switcherIcon | `[React.ReactNode, React.ReactNode]` | 展开收起按钮图标 | - |
 | multiple | `boolean` | 树节点数据是否支持多选 | `false` |
-| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T }` | 自定义节点key, label, children字段 | - |
+| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T; extra?: keyof T }` | 自定义节点key, label, children, extra字段 | - |
+| labelRender | `(node: TreeNode<T>) => React.ReactNode` | 自定义节点标签渲染函数。提供后将完全接管 label 区域的渲染，此时节点的 `extra` 不会自动追加（可通过 `node.extra` 自行渲染） | - |
 | loadData | `() => void` | 异步加载数据 | - |
 | dataSource | `Array<T> \| T` | 数据源 | - |
 | checkedKeys | `Array<string \| number>` | 选中复选框的树节点，受控 | - |
@@ -53,4 +54,21 @@ toc: 'content'
 | defaultSelectedKeys | `Array<string \| number>` | 设置默认选中的树节点，多选需设置 multiple 为 true | - |
 | onCheck | `(checkedKeys: Array<string \| number>, params: { checked: boolean; checkedNodes: T[]; node: T }) => void` | 复选框选中的回调 | - |
 | onSelect | `(selectedKeys: Array<string \| number>, params: { selected: boolean; selectedNodes: T[]; node: T }) => void` | 点击树节点的回调 | - |
-| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | 展开收起的回调 | - |
+| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | 展开收起的回调 | - |
+
+### 数据节点字段
+
+| 属性名 | 类型 | 描述 |
+| --- | --- | --- |
+| key | `string \| number` | 节点唯一标识 |
+| label | `string` | 节点显示文本 |
+| children | `Array<T>` | 子节点 |
+| extra | `React.ReactNode \| ((node: T) => React.ReactNode)` | 节点标签后的附加内容（如标签、徽标、操作按钮）。当 `labelRender` 存在时不会自动渲染，需在 `labelRender` 中通过 `node.extra` 自行处理 |
+| disabled | `boolean` | 是否禁用 |
+| icon | `React.ReactNode \| (() => React.ReactNode)` | 自定义图标 |
+
+### extra 与 labelRender 的关系
+
+- **仅使用 `extra`**：在默认 label 文本后自动追加 extra 内容，适合简单的标签、徽标等场景
+- **仅使用 `labelRender`**：完全自定义节点标签区域的渲染
+- **同时存在时**：`labelRender` 优先级更高，extra 不会自动追加。如需在自定义渲染中使用 extra，可通过回调参数 `node.extra` 取得原始值自行渲染

package/src/Tree/interface.ts

@@ -64,6 +64,13 @@ export type TreeNode<T> = {
    * All descendant uids (collected bottom-up). Used for check/uncheck propagation.
    */
   childUids?: Array<string>;
+  /**
+   * Extra content rendered after the label (e.g. tags, badges, action buttons).
+   * Only takes effect when `labelRender` is NOT provided at the Tree level.
+   * When `labelRender` is present, access this value via `node.extra` in your
+   * custom render function.
+   */
+  extra?: React.ReactNode | ((node: T) => React.ReactNode);
   /**
    * Original data
    */
@@ -162,10 +169,18 @@ export interface TreeProps<T> extends DataAttributeProps {
    *  @default false
    */
   multiple?: boolean;
+  /**
+   * Custom render function for node label.
+   * When provided, takes full control of the label area rendering.
+   * The node's `extra` will NOT be appended automatically in this case;
+   * access it via `node.extra` if you need it in your custom render.
+   * The original `label` string is still used for `title` attribute fallback.
+   */
+  labelRender?: (node: TreeNode<T>) => React.ReactNode;
   /**
    * Customize node key, title, children field names
    */
-  fieldNames?: { key?: keyof T; label?: keyof T; children?: keyof T };
+  fieldNames?: { key?: keyof T; label?: keyof T; children?: keyof T; extra?: keyof T };
   /**
    * Asynchronous data loading
    */

package/src/Tree/tree-node.tsx

@@ -21,6 +21,7 @@ const Node = <T extends Record<string, unknown> = any>(
     disabled,
     depth,
     icon,
+    extra,
     original,
     lines,
   } = node;
@@ -35,6 +36,7 @@ const Node = <T extends Record<string, unknown> = any>(
     indeterminateUids,
     expandedUids,
     switcherIcon,
+    labelRender,
     draggable,
     draggingUid,
     dropState,
@@ -105,6 +107,14 @@ const Node = <T extends Record<string, unknown> = any>(
     const _icon =
       typeof mergedIcon === 'function' ? mergedIcon(original) : mergedIcon;
 
+    // labelRender takes full control of the label content when provided
+    const content = labelRender ? labelRender(node) : label;
+
+    // extra: appended after the label content (only when labelRender is NOT used)
+    const _extra = !labelRender && extra
+      ? (typeof extra === 'function' ? extra(original) : extra)
+      : null;
+
     return (
       <Button
         className={clsx(`${prefixCls}-node-label`, {
@@ -116,7 +126,10 @@ const Node = <T extends Record<string, unknown> = any>(
         icon={showIcon ? _icon : undefined}
         onClick={disabled ? undefined : () => onSelect(uid)}
       >
-        {label}
+        {content}
+        {_extra && (
+          <span className={`${prefixCls}-node-extra`}>{_extra}</span>
+        )}
       </Button>
     );
   };
@@ -139,7 +152,7 @@ const Node = <T extends Record<string, unknown> = any>(
       <span
         aria-hidden="true"
         className={`${prefixCls}-node-indent`}
-        key={index}
+        key={`node-empty-${index}`}
       ></span>
     ));
   };

package/src/Tree/tree.tsx

@@ -35,6 +35,7 @@ export const TreeContext = createContext<{
   icon?: React.ReactNode | ((props: any) => React.ReactNode);
   showLine?: boolean;
   switcherIcon?: [React.ReactNode, React.ReactNode];
+  labelRender?: (node: TreeNode<any>) => React.ReactNode;
   selectedUids: Set<string>;
   checkedUids: Set<string>;
   indeterminateUids: Set<string>;
@@ -203,6 +204,7 @@ const Tree = <T extends Record<string, unknown> = any>(
     onSelect,
     onCheck,
     onExpand,
+    labelRender,
     virtual = false,
     height,
     itemHeight = 28,
@@ -553,6 +555,7 @@ const Tree = <T extends Record<string, unknown> = any>(
       icon,
       showLine,
       switcherIcon,
+      labelRender,
       selectedUids: selectedUidSet,
       checkedUids: checkedUidSet,
       indeterminateUids: indeterminateUidSet,
@@ -575,6 +578,7 @@ const Tree = <T extends Record<string, unknown> = any>(
       icon,
       showLine,
       switcherIcon,
+      labelRender,
       selectedUidSet,
       checkedUidSet,
       indeterminateUidSet,
@@ -687,7 +691,7 @@ const Tree = <T extends Record<string, unknown> = any>(
     >
       <TreeContext.Provider value={contextValue}>
         <AnimatePresence initial={false}>
-          {segments.map((segment) => {
+          {segments.map((segment, index) => {
             if (segment.type === 'node') {
               return (
                 <TreeNodeComp node={segment.node} key={segment.node.uid} />
@@ -698,7 +702,7 @@ const Tree = <T extends Record<string, unknown> = any>(
             // source and cancels the drag before dragOver/drop can fire.
             return (
               <motion.div
-                key={segment.pUid + '\x01children'}
+                key={segment.pUid + index + '\x01children'}
                 initial={{ height: 0, opacity: 0 }}
                 animate={{ height: 'auto', opacity: 1 }}
                 exit={{ height: 0, opacity: 0 }}

package/src/Tree/utils/tree-tools.ts

@@ -181,6 +181,7 @@ export function tree2array<T extends Record<string, unknown>>(
     key: keyof T;
     label: keyof T;
     children: keyof T;
+    extra?: keyof T;
   },
 ): [TreeNode<T>[], Map<string, TreeNode<T>>] {
   if (!tree || (Array.isArray(tree) && tree.length === 0))
@@ -190,7 +191,7 @@ export function tree2array<T extends Record<string, unknown>>(
   const res: TreeNode<T>[] = [];
   const map = new Map<string, TreeNode<T>>();
 
-  const { key, label, children } = fieldNames;
+  const { key, label, children, extra } = fieldNames;
 
   /**
    * Walk returns the list of descendant uids so the parent can collect them
@@ -216,6 +217,7 @@ export function tree2array<T extends Record<string, unknown>>(
     const rawKey = node[key] as string | number;
     const _label = node[label];
     const _children = node[children] as T[] | undefined;
+    const _extra = extra ? node[extra] : node.extra;
     const nextPath = [...path, rawKey];
     const uid = pUid ? `${pUid}\x00${String(rawKey)}` : String(rawKey);
 
@@ -227,6 +229,7 @@ export function tree2array<T extends Record<string, unknown>>(
       key: rawKey,
       label: _label as string,
       title: node.title as string | undefined,
+      extra: _extra as React.ReactNode | ((node: T) => React.ReactNode) | undefined,
       path,
       pUid,
       depth,

package/src/TreeSelect/index.en-US.md

@@ -37,6 +37,7 @@ Tree selection control.
 | defaultValue | `string \| number \| Array<string \| number>` | Default selected value | - |
 | value | `string \| number \| Array<string \| number>` | Selected value (controlled) | - |
 | disabled | `boolean` | Disable the component | - |
+| loading | `boolean` | Whether data is loading; displays a gray loading indicator | `false` |
 | placeholder | `string` | Placeholder text | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | Dropdown placement | `'bottomLeft'` |
 | searchable | `boolean` | Enable search functionality | `true` |

package/src/TreeSelect/index.zh-CN.md

@@ -37,6 +37,7 @@ toc: 'content'
 | defaultValue | `string \| number \| Array<string \| number>` | 默认值 | - |
 | value | `string \| number \| Array<string \| number>` | 受控值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时显示灰色加载图标 | `false` |
 | placeholder | `string` | 选择框默认文本 | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | 下拉框弹出位置 | `'bottomLeft'` |
 | searchable | `boolean` | 是否可搜索 | `true` |

package/src/TreeSelect/interface.ts

@@ -37,6 +37,11 @@ export interface TreeSelectProps<T = any>
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Placeholder text for the select box
    */

package/src/TreeSelect/tree-select.tsx

@@ -32,6 +32,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
     defaultValue,
     checkable = false,
     multiple = false, // eslint-disable-line @typescript-eslint/no-unused-vars
+    loading,
     optionLabelProp = 'label',
     onChange,
     onFilter,
@@ -242,6 +243,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
         mode={mode}
         value={searchValue}
         options={selectedOptions}
+        loading={loading}
         selectedKeys={mergedValue}
         onOpenChange={handleOpenChange}
         onClear={handleClear}

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.16";
+export const version = "0.8.18";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;