@rainbow-oh/yee-c 0.6.4 → 0.7.0

package/src/Select/style/index.less

@@ -54,6 +54,20 @@
     align-items: center;
   }
 
+  // Multi-column grid layout (non-virtual mode).
+  // The column count is driven by the CSS custom property --yee-select-columns
+  // set inline by the Options component.
+  &-popup-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--yee-select-columns, 1), 1fr);
+  }
+
+  // Virtual multi-column: each row container is already a grid via inline style;
+  // options inside it should fill cells evenly and center vertically.
+  &-popup-grid-row {
+    align-items: center;
+  }
+
   &-empty {
     padding: var(--yee-select-option-padding);
   }

package/src/Selector/interface.ts

@@ -63,6 +63,10 @@ export interface PureSelectorProps {
    * Selected keys
    */
   selectedKeys: Array<string | number>;
+  /**
+   * Enable loose value matching (String comparison instead of strict equality)
+   */
+  looseMatch?: boolean;
   /**
    * Custom suffix
    */

package/src/Selector/selector.tsx

@@ -37,6 +37,7 @@ const Selector = React.forwardRef(
       disabled,
       options = [],
       selectedKeys,
+      looseMatch = false,
       orphanClassName,
       orphanStyle,
       allowClear = true,
@@ -67,7 +68,9 @@ const Selector = React.forwardRef(
       }
       // 按 selectedKeys 顺序渲染；找不到的 key 作为孤儿值回退显示 value 本身
       return selectedKeys.map((key) => {
-        const opt = options.find((o) => o.value === key);
+        const opt = looseMatch
+          ? options.find((o) => String(o.value) === String(key))
+          : options.find((o) => o.value === key);
         if (opt) {
           return {
             ...opt,
@@ -85,7 +88,7 @@ const Selector = React.forwardRef(
           _orphan: true,
         };
       });
-    }, [options, selectedKeys, optionLabelProp]);
+    }, [options, selectedKeys, optionLabelProp, looseMatch]);
 
     const handleClick = () => {
       if (inputRef.current && !disabled) {
@@ -183,7 +186,9 @@ const Selector = React.forwardRef(
 
       const key = selectedKeys.length ? selectedKeys[0] : '';
       const opt = Array.isArray(options)
-        ? options.find((opt) => opt.value === key)
+        ? looseMatch
+          ? options.find((opt) => String(opt.value) === String(key))
+          : options.find((opt) => opt.value === key)
         : null;
       // 孤儿值：key 非空但在 options 中找不到时，回退显示 value 本身
       const isOrphan = !opt && key !== '';

package/src/Table/interface.ts

@@ -577,7 +577,7 @@ export interface TableProps
   /**
    * Row class name, unlike classNames, this prop can be set dynamically via a function
    */
-  rowClassName?: (record: object) => string | undefined;
+  rowClassName?: (record: Record<string, any>) => string | undefined;
   /**
    * Row style, unlike styles, this prop can be set dynamically via a function
    */

package/src/Tree/demo/draggable.tsx

@@ -47,6 +47,8 @@ export default () => {
             {
               dragKey: info.dragKey,
               dropKey: info.dropKey,
+              dragPath: info.dragPath,
+              dropPath: info.dropPath,
               position: info.position,
             },
             FIELD_NAMES,

package/src/Tree/interface.ts

@@ -6,13 +6,14 @@ export type { MoveInfo } from './utils/tree-tools';
 
 export type TreeNode<T> = {
   /**
-   * uid
+   * Unique internal identifier built from key path joined by '\x00'.
+   * Guaranteed unique even when user-provided `key` values repeat across branches.
    */
   uid: string;
   /**
-   * Unique key
-   * */
-  key: string;
+   * User-provided key (may not be globally unique)
+   */
+  key: string | number;
   /**
    * Display node text
    */
@@ -22,7 +23,7 @@ export type TreeNode<T> = {
    */
   title?: string;
   /**
-   * Child nodes
+   * Child nodes (only present in raw tree; not used in flat list)
    */
   children?: Array<TreeNode<T>>;
   /**
@@ -30,16 +31,16 @@ export type TreeNode<T> = {
    */
   depth: number;
   /**
-   * Parent node key
-   * */
-  pKey: string | null;
+   * Parent node uid (null for root nodes)
+   */
+  pUid: string | null;
   /**
    * Whether this is a leaf node
-   * */
+   */
   isLeaf: boolean;
   /**
    * Whether this is the last node at its level
-   * */
+   */
   isLast: boolean;
   /**
    * Whether disabled
@@ -50,17 +51,17 @@ export type TreeNode<T> = {
    */
   icon?: React.ReactNode | (() => React.ReactNode);
   /**
-   * Ancestor keys
+   * Ancestor keys (user-provided keys, for building uid path)
    */
-  path: string[];
+  path: Array<string | number>;
   /**
-   * Whether to show connecting lines
+   * Whether to show connecting lines at given depth levels
    */
   lines: number[];
   /**
-   * List of child node keys
+   * All descendant uids (collected bottom-up). Used for check/uncheck propagation.
    */
-  childKeys?: Array<string | number>;
+  childUids?: Array<string>;
   /**
    * Original data
    */
@@ -69,6 +70,7 @@ export type TreeNode<T> = {
 
 export interface TreeNodeProps<T> {
   node: TreeNode<T>;
+  style?: React.CSSProperties;
 }
 
 export interface TreeProps<T> {
@@ -93,11 +95,11 @@ export interface TreeProps<T> {
    */
   defaultExpandAll?: boolean;
   /**
-   * Specify which tree nodes to expand by default
+   * Specify which tree nodes to expand by default (user keys)
    */
   defaultExpandedKeys?: string[];
   /**
-   * Controlled expanded tree nodes
+   * Controlled expanded tree nodes (user keys)
    */
   expandedKeys?: string[];
   /**
@@ -128,6 +130,10 @@ export interface TreeProps<T> {
     dropNode: T;
     dragKey: string | number;
     dropKey: string | number;
+    /** Full key path from root to the dragged node (for non-unique key support) */
+    dragPath: Array<string | number>;
+    /** Full key path from root to the drop target (for non-unique key support) */
+    dropPath: Array<string | number>;
     position: DragPosition;
     /** Convenience flag: true when position is 'before' or 'after' */
     dropToGap: boolean;
@@ -164,22 +170,39 @@ export interface TreeProps<T> {
   loadData?: () => void;
   /**
    * Data source
-   * */
+   */
   dataSource?: Array<T> | T;
   /**
-   * Checked tree nodes (controlled)
+   * Enable virtual scrolling for large datasets.
+   * Requires `height` to be set.
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Height of the scrollable container in pixels.
+   * Required when `virtual` is true.
+   */
+  height?: number;
+  /**
+   * Fixed height of each tree node row in pixels.
+   * Used for virtual scroll calculation.
+   * @default 28
+   */
+  itemHeight?: number;
+  /**
+   * Checked tree nodes (controlled, user keys)
    */
   checkedKeys?: Array<string | number>;
   /**
-   * Checked tree nodes (uncontrolled)
+   * Checked tree nodes (uncontrolled, user keys)
    */
   defaultCheckedKeys?: Array<string | number>;
   /**
-   * Set selected tree nodes, set multiple to true for multi-select
+   * Set selected tree nodes, set multiple to true for multi-select (user keys)
    */
   selectedKeys?: Array<string | number>;
   /**
-   * Set default selected tree nodes, set multiple to true for multi-select
+   * Set default selected tree nodes (user keys)
    */
   defaultSelectedKeys?: Array<string | number>;
   /**
@@ -212,7 +235,7 @@ export interface TreeProps<T> {
     params: {
       expanded: boolean;
       expandedNodes: T[];
-      node: T[];
+      node: T;
     },
   ) => void;
 }

package/src/Tree/tree-node.tsx

@@ -11,12 +11,11 @@ import './style/index.less';
 const Node = <T extends Record<string, unknown> = any>(
   props: TreeNodeProps<T>,
 ) => {
-  const { node } = props;
+  const { node, style: nodeStyle } = props;
   const {
-    key,
+    uid,
     isLeaf,
     isLast,
-    path,
     label,
     title,
     disabled,
@@ -31,12 +30,13 @@ const Node = <T extends Record<string, unknown> = any>(
     showIcon,
     icon: contextIcon,
     showLine,
-    selectedKeys,
-    checkedKeys,
-    expandedKeys,
+    selectedUids,
+    checkedUids,
+    indeterminateUids,
+    expandedUids,
     switcherIcon,
     draggable,
-    draggingKey,
+    draggingUid,
     dropState,
     onCheck,
     onSelect,
@@ -47,14 +47,10 @@ const Node = <T extends Record<string, unknown> = any>(
     onNodeDrop,
   } = useContext(TreeContext);
 
-  const expanded = expandedKeys.includes(key);
-  const checked = checkedKeys.includes(key);
-  const selected = selectedKeys.includes(key);
-
-  // All nodes on the path must be visible for this node to display
-  const visible = path.every((p) => expandedKeys.includes(p));
-
-  if (!visible) return null;
+  const expanded = expandedUids.has(uid);
+  const checked = checkedUids.has(uid);
+  const indeterminate = indeterminateUids.has(uid);
+  const selected = selectedUids.has(uid);
 
   const renderExpandedIcon = () => {
     const expandedIcon = switcherIcon ? (
@@ -82,7 +78,7 @@ const Node = <T extends Record<string, unknown> = any>(
             size="small"
             type="text"
             icon={expanded ? expandedIcon : collapseIcon}
-            onClick={() => onExpand(key)}
+            onClick={() => onExpand(uid)}
           />
         )}
       </span>
@@ -93,7 +89,12 @@ const Node = <T extends Record<string, unknown> = any>(
     if (!checkable) return null;
     return (
       <span className={`${prefixCls}-node-checkbox`}>
-        <Checkbox value={key} checked={checked} onChange={onCheck} />
+        <Checkbox
+          value={uid}
+          checked={checked}
+          indeterminate={indeterminate}
+          onChange={(e) => onCheck(e, uid)}
+        />
       </span>
     );
   };
@@ -113,7 +114,7 @@ const Node = <T extends Record<string, unknown> = any>(
         type="text"
         title={_title}
         icon={showIcon ? _icon : undefined}
-        onClick={disabled ? undefined : () => onSelect(key)}
+        onClick={disabled ? undefined : () => onSelect(uid)}
       >
         {label}
       </Button>
@@ -121,8 +122,6 @@ const Node = <T extends Record<string, unknown> = any>(
   };
 
   const renderEmptyNodes = (depth: number) => {
-    // eslint-disable-line @typescript-eslint/no-unused-vars
-
     const temp = new Array(depth).fill(0);
     if (showLine) {
       return temp.map((_, index) => (
@@ -145,17 +144,17 @@ const Node = <T extends Record<string, unknown> = any>(
     ));
   };
 
-  const isDropTarget = dropState?.key === key;
+  const isDropTarget = dropState?.uid === uid;
   const dropPosition = isDropTarget ? dropState.position : null;
 
   const dragProps =
     draggable && !disabled
       ? {
           draggable: true as const,
-          onDragStart: (e: React.DragEvent) => onNodeDragStart(key, e),
-          onDragOver: (e: React.DragEvent) => onNodeDragOver(key, e),
-          onDragLeave: (e: React.DragEvent) => onNodeDragLeave(key, e),
-          onDrop: (e: React.DragEvent) => onNodeDrop(key, e),
+          onDragStart: (e: React.DragEvent) => onNodeDragStart(uid, e),
+          onDragOver: (e: React.DragEvent) => onNodeDragOver(uid, e),
+          onDragLeave: (e: React.DragEvent) => onNodeDragLeave(uid, e),
+          onDrop: (e: React.DragEvent) => onNodeDrop(uid, e),
         }
       : {};
 
@@ -165,14 +164,12 @@ const Node = <T extends Record<string, unknown> = any>(
         [`${prefixCls}-node-with-line`]: showLine,
         [`${prefixCls}-leaf-node`]: isLeaf,
         [`${prefixCls}-last-node`]: isLast,
-        [`${prefixCls}-node-dragging`]: draggingKey === key,
+        [`${prefixCls}-node-dragging`]: draggingUid === uid,
         [`${prefixCls}-node-drag-over-before`]: dropPosition === 'before',
         [`${prefixCls}-node-drag-over-after`]: dropPosition === 'after',
         [`${prefixCls}-node-drag-over-inside`]: dropPosition === 'inside',
       })}
-      // style={{
-      //   paddingLeft: depth * 28 + (isLeaf && checkable ? 24 : 0),
-      // }}
+      style={nodeStyle}
       {...dragProps}
     >
       {renderEmptyNodes(depth)}