@rainbow-oh/yee-c 0.4.3 → 0.4.4

package/package.json

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

package/src/Cascader/cascader.tsx

@@ -17,7 +17,13 @@ import isEqual from '../utils/isEqual';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import Column from './column';
 import SearchList from './search-list';
-import { changeToView, flattenOptions, hasChild } from './utils';
+import {
+  changeToView,
+  flattenOptions,
+  getChildren,
+  isSamePrefixPath,
+  pathToUid,
+} from './utils';
 
 import type {
   CascaderContextValue,
@@ -41,7 +47,7 @@ const Cascader = (baseprops: CascaderProps) => {
     options,
     placement = 'bottomLeft',
     popupClassName,
-    searchable,
+    searchable = true,
     fieldNames = {
       label: 'label',
       value: 'value',
@@ -97,11 +103,10 @@ const Cascader = (baseprops: CascaderProps) => {
         currentValue || [],
         flatOptions,
         {
-          needNext: true, // Set to true to expand to full path
           multiple,
         },
       );
-      setColumns(newQueue as any);
+      setColumns(newQueue);
       setExpandedPath(newPath);
     },
     [flatOptions, multiple],
@@ -126,9 +131,9 @@ const Cascader = (baseprops: CascaderProps) => {
 
   // node mouse evt
   const onNodeMouseEnter = (item: FlattenOption, level: number) => {
-    if (expandTrigger === 'hover' && hasChild(item)) {
+    if (expandTrigger === 'hover' && !item.isLeaf) {
       const queue = columns.slice(0, level + 1);
-      queue.push(item.children as FlattenOption[]);
+      queue.push(getChildren(flatOptions, item.uid));
       setColumns(queue);
       // Also update expandedPath to maintain highlight state
       setExpandedPath((prev) => [
@@ -139,7 +144,6 @@ const Cascader = (baseprops: CascaderProps) => {
   };
 
   // Helper function to get all descendant paths of a node
-  // Note: For very deep trees, consider adding maxDepth parameter or prevent stack overflow
   const getAllDescendantPaths = useCallback(
     (
       node: FlattenOption,
@@ -148,17 +152,17 @@ const Cascader = (baseprops: CascaderProps) => {
       const paths: Array<Array<string | number>> = [];
       const traverse = (currentNode: FlattenOption, depth: number) => {
         if (depth > maxDepth) return; // Prevent stack overflow
-        if (!hasChild(currentNode)) {
+        if (currentNode.isLeaf) {
           paths.push(currentNode.path);
           return;
         }
-        const children = currentNode.children as FlattenOption[];
+        const children = getChildren(flatOptions, currentNode.uid);
         children.forEach((child) => traverse(child, depth + 1));
       };
       traverse(node, 0);
       return paths;
     },
-    [],
+    [flatOptions],
   );
 
   // cascader node click
@@ -177,18 +181,17 @@ const Cascader = (baseprops: CascaderProps) => {
         // Check if current path is already selected
         const isSelected = currentValue.some((v) => isEqual(v, item.path));
 
-        if (hasChild(item)) {
+        if (!item.isLeaf) {
           // Parent node: select/deselect all descendants
           const descendantPaths = getAllDescendantPaths(item, 50); // Limit to depth 50 to prevent performance issues
-          const descendantPathStrs = descendantPaths.map((p) => p.join('-'));
 
           // Filter out all descendant paths from current value
-          let filteredValue = currentValue.filter((v) => {
-            const pathStr = v.join('-');
-            return !descendantPathStrs.some((descPathStr) =>
-              pathStr.startsWith(descPathStr),
-            );
-          });
+          let filteredValue = currentValue.filter(
+            (v) =>
+              !descendantPaths.some((descPath) =>
+                isSamePrefixPath(descPath, v),
+              ),
+          );
 
           if (!isSelected) {
             // Add all descendant paths
@@ -196,12 +199,9 @@ const Cascader = (baseprops: CascaderProps) => {
           }
 
           newValue = filteredValue;
-          newOpts = filteredValue.map((path) => {
-            return path.map((_, i) => {
-              const uid = path.slice(0, i + 1).join('-');
-              return nodeMap.get(uid);
-            });
-          });
+          newOpts = filteredValue.map((path) =>
+            path.map((_, i) => nodeMap.get(pathToUid(path.slice(0, i + 1)))),
+          );
         } else {
           // Leaf node: toggle individual selection
           if (isSelected) {
@@ -209,12 +209,9 @@ const Cascader = (baseprops: CascaderProps) => {
           } else {
             newValue = [...currentValue, item.path];
           }
-          newOpts = (newValue as Array<Array<string | number>>).map((path) => {
-            return path.map((_, i) => {
-              const uid = path.slice(0, i + 1).join('-');
-              return nodeMap.get(uid);
-            });
-          });
+          newOpts = (newValue as Array<Array<string | number>>).map((path) =>
+            path.map((_, i) => nodeMap.get(pathToUid(path.slice(0, i + 1)))),
+          );
         }
         changed = true;
       } else if (shouldSelect) {
@@ -222,23 +219,21 @@ const Cascader = (baseprops: CascaderProps) => {
         newValue = multiple ? [...mergedValue, item.path] : item.path;
         newOpts = multiple
           ? [
-              ...(mergedValue as Array<Array<string | number>>).map((item) => {
-                const vs = item as Array<string | number>;
-                const arr = vs.map((_, i) => vs.slice(0, i + 1).join('-'));
-                return arr.map((uid: string) => nodeMap.get(uid));
+              ...(mergedValue as Array<Array<string | number>>).map((path) => {
+                const vs = path as Array<string | number>;
+                return vs.map((_, i) =>
+                  nodeMap.get(pathToUid(vs.slice(0, i + 1))),
+                );
               }),
-              [
-                item.path.map((_, i) => {
-                  const uid = item.path.slice(0, i + 1).join('-');
-                  return nodeMap.get(uid);
-                }),
-              ],
+              item.path.map((_, i) =>
+                nodeMap.get(pathToUid(item.path.slice(0, i + 1))),
+              ),
             ]
           : flatOptions.filter((opt: FlattenOption) => {
-              const arr = item.path.map((_, i) =>
-                item.path.slice(0, i + 1).join('-'),
+              const ancestors = item.path.map((_, i) =>
+                pathToUid(item.path.slice(0, i + 1)),
               );
-              return arr.includes(opt.uid as string);
+              return ancestors.includes(opt.uid);
             });
         changed = true;
       } else {
@@ -289,7 +284,7 @@ const Cascader = (baseprops: CascaderProps) => {
       return { options: [], selectedKeys: [] };
 
     const { fullNode = false, onlyParentNode = false } = props;
-    const formatKey = (val: Array<string | number>) => val.join('-');
+    const formatKey = (val: Array<string | number>) => pathToUid(val);
 
     let rawValues: (string | number)[][] = [];
 
@@ -308,30 +303,27 @@ const Cascader = (baseprops: CascaderProps) => {
     // Filter values based on onlyParentNode option
     let displayValues = rawValues;
     if (multiple && onlyParentNode) {
-      // Find parent nodes that have all children selected
-      const parentIds: string[] = [];
-      const childPathStrs = new Set(rawValues.map((v) => v.join('-')));
+      // Find parent nodes that have all (direct) children selected
+      const selectedPathKeys = new Set(rawValues.map(pathToUid));
+      const parentPaths: Array<Array<string | number>> = [];
 
       // Check each node to see if it's a fully selected parent
-      nodeMap.forEach((node, uid) => {
-        if (hasChild(node)) {
-          const allChildrenSelected = (node.children as FlattenOption[])?.every(
-            (child) => childPathStrs.has(child.path.join('-')),
+      nodeMap.forEach((node) => {
+        if (!node.isLeaf) {
+          const allChildrenSelected = getChildren(flatOptions, node.uid).every(
+            (child) => selectedPathKeys.has(pathToUid(child.path)),
           );
           if (allChildrenSelected) {
-            parentIds.push(uid);
+            parentPaths.push(node.path);
           }
         }
       });
 
       // Filter out child nodes whose parent is fully selected
-      displayValues = rawValues.filter((path) => {
-        const pathStr = path.join('-');
-        // Keep this path if it's not a child of any fully selected parent
-        return !parentIds.some((parentId) =>
-          pathStr.startsWith(parentId + '-'),
-        );
-      });
+      displayValues = rawValues.filter(
+        (path) =>
+          !parentPaths.some((parentPath) => isSamePrefixPath(parentPath, path)),
+      );
     }
 
     const displayOptions = displayValues.map((valPath) => {
@@ -348,8 +340,7 @@ const Cascader = (baseprops: CascaderProps) => {
             options: opts,
           });
         } else {
-          const source =
-            opts[opts.length - 1]?.$source ?? opts[opts.length - 1];
+          const source = opts[opts.length - 1]?.$source;
           label = (source?.[optionLabelProp as string] ??
             '') as React.ReactNode;
         }
@@ -367,6 +358,7 @@ const Cascader = (baseprops: CascaderProps) => {
     multiple,
     mergedValue,
     nodeMap,
+    flatOptions,
     optionLabelProp,
     props.fullNode,
     props.onlyParentNode,
@@ -377,6 +369,12 @@ const Cascader = (baseprops: CascaderProps) => {
     popupVisible.current = newVisible;
   };
 
+  const handleClear = () => {
+    setSearchValue('');
+    setMergedValue([]);
+    onChange?.([], []);
+  };
+
   // Performance Note: For large datasets (1000+ options), consider:
   // 1. Adding debounce to the search input
   // 2. Implementing virtual scrolling for search results
@@ -390,7 +388,11 @@ const Cascader = (baseprops: CascaderProps) => {
     }> = [];
 
     for (const item of flatOptions) {
-      const text = String(item.label);
+      // Match against the full breadcrumb (e.g. "A / B / C") so that:
+      //  - searching a parent label surfaces its descendants,
+      //  - the result row shows the full path to disambiguate duplicate leaf
+      //    labels across different parents.
+      const text = item.labelPath.join(' / ');
       const textLower = text.toLowerCase();
       if (textLower.includes(lowStr)) {
         const matches: Array<{ text: string; highlight: boolean }> = [];
@@ -435,6 +437,7 @@ const Cascader = (baseprops: CascaderProps) => {
         mode={multiple ? 'multiple' : undefined}
         value={searchValue}
         onSearch={handleSearch}
+        onClear={handleClear}
       />
     );
   };

package/src/Cascader/interface.ts

@@ -24,11 +24,27 @@ export type FieldNames = {
   children: string;
 };
 
-export type FlattenOption = Option & {
+/**
+ * Flattened representation of a tree node.
+ *
+ * Deliberately a concrete type (not `Option & ...`) so that:
+ *  - `.label` / `.value` / `.isLeaf` resolve to their precise types (an index
+ *    signature on `Option` would otherwise widen them to `unknown`),
+ *  - `.children` is a compile error — flattened nodes intentionally do not
+ *    carry children; use `getChildren(data, uid)` instead.
+ * Dynamic/extra-field access should go through `$source` (the raw node).
+ */
+export type FlattenOption = {
+  $source: Option;
+  label: string;
+  value: string | number;
   pid: string;
   uid: string;
   path: Array<string | number>;
-  $source: Option;
+  labelPath: string[];
+  level: number;
+  isLeaf: boolean;
+  disabled?: boolean;
 };
 
 export type NodeProps = FlattenOption & {
@@ -104,6 +120,7 @@ export interface CascaderProps extends Omit<
   multiple?: boolean;
   /**
    * Is it searchable
+   * @default true
    */
   searchable?: boolean;
   /**

package/src/Cascader/node.tsx

@@ -5,12 +5,12 @@ import Checkbox from '../Checkbox';
 import Spin from '../Spin';
 import isEqual from '../utils/isEqual';
 import { CascaderCtx } from './cascader';
-import { hasChild, isHalfChecked } from './utils';
+import { getChildren, isHalfChecked } from './utils';
 
 import type { NodeProps } from './interface';
 
 const Node = (props: NodeProps) => {
-  const { uid, value, disabled, label, children, isLeaf, path, level } = props;
+  const { uid, value, disabled, label, $source, isLeaf, path, level } = props;
 
   const {
     prefixCls,
@@ -19,11 +19,12 @@ const Node = (props: NodeProps) => {
     mergedValue,
     loadData,
     nodeMap,
+    flatOptions,
     onNodeMouseEnter,
     onItemClick,
   } = useContext(CascaderCtx);
 
-  const isParent = hasChild(props);
+  const isParent = !isLeaf;
 
   /**
    * 0: not load
@@ -50,7 +51,7 @@ const Node = (props: NodeProps) => {
   const handleLoadData = () => {
     if (loadData && isLeaf === false) {
       setLoad(1);
-      loadData({ label, value, children })
+      loadData($source)
         ?.then(() => {
           setLoad(2);
         })
@@ -79,13 +80,17 @@ const Node = (props: NodeProps) => {
   const [checkedAll, indeterminate] = useMemo(() => {
     const currentNode = nodeMap.get(uid);
     if (!multiple || !currentNode || !isParent) return [false, false];
-    return isHalfChecked(mergedValue as (string | number)[][], currentNode);
-  }, [nodeMap, uid, mergedValue, isParent, multiple]);
+    return isHalfChecked(
+      mergedValue as (string | number)[][],
+      currentNode,
+      getChildren(flatOptions, uid),
+    );
+  }, [nodeMap, uid, mergedValue, flatOptions, isParent, multiple]);
 
   const clsName = clsx(
     `${prefixCls}-menu-item`,
     {
-      [`${prefixCls}-menu-item-expand`]: hasChild(props),
+      [`${prefixCls}-menu-item-expand`]: !isLeaf,
       [`${prefixCls}-menu-item-disabled`]: disabled,
       active: expandedPath[level]?.key === uid,
     },

package/src/Cascader/search-list.tsx

@@ -35,7 +35,7 @@ const SearchList = (props: SearchListProps) => {
     <ul className={`${prefixCls}-filter-menu`}>
       {items.length ? (
         items.map((item) => {
-          const title = item.data.title || item.data.label;
+          const title = item.data.$source?.title || item.data.labelPath.join(' / ');
 
           return (
             <li

package/src/Cascader/utils/index.ts

@@ -16,70 +16,104 @@ export function hasChild(
 }
 
 /**
- * Get the next queue element for navigation
+ * Separator used to build a node's `uid` from its value path. A control
+ * character is used on purpose so it can never appear inside a user value —
+ * this prevents collisions like value `"a-1"` vs path `["a", "1"]` that a plain
+ * `'-'` separator would produce.
+ */
+export const UID_SEP = '
';
+
+/**
+ * Build the canonical uid for a value path. Use this everywhere a path needs
+ * to be turned into a key (nodeMap lookups, selected keys, comparisons) so the
+ * format stays consistent with the `uid`/`pid` produced by `flattenOptions`.
+ * @param path - The value path
+ */
+export const pathToUid = (path: Array<string | number>): string =>
+  path.map(String).join(UID_SEP);
+
+/**
+ * Get the direct flattened children of the node identified by `uid`.
+ *
+ * Flattened nodes intentionally do not carry a `children` reference (it used to
+ * point at the raw, un-flattened subtree and caused type lies). Derive children
+ * from the flat list via `pid` instead — single source of truth.
+ * @param data - The flattened options data
+ * @param uid - The parent node's uid
+ */
+export const getChildren = (
+  data: Array<FlattenOption>,
+  uid: string,
+): FlattenOption[] => data.filter((item) => item.pid === uid);
+
+/**
+ * Find the node in `data` whose parent is `pid` and whose value is `value`.
  * @internal
  */
-const getNextQueueElement = (
+const findInColumn = (
   data: Array<FlattenOption>,
+  pid: string,
   value: string | number,
-): [FlattenOption[], { id: string | number; text: string }] | [] => {
-  if (!Array.isArray(data)) {
-    return [];
-  }
-
-  for (let i = 0; i < data.length; i++) {
-    const item = data[i];
-    if (item.uid === value) {
-      const nexts = hasChild(item)
-        ? (item.children as Array<FlattenOption>).filter((c) => c.pid === value)
-        : [];
-      return [
-        nexts,
-        { id: item.value as string | number, text: item.label as string },
-      ];
-    }
-  }
-  return [];
-};
+): FlattenOption | undefined =>
+  data.find((item) => item.pid === pid && item.value === value);
 
 /**
- * Populate data into input fields and dropdown lists from a value array
- * @param arr - The value array representing the selected path
+ * Reconstruct cascade columns and the highlight path from a value path.
+ *
+ * Walks the flattened options level by level, matching each value segment
+ * against the correct parent column via `pid` + `value`. Returns:
+ *  - `queue`: the columns to render (column 0 = root, then each matched
+ *    node's children column).
+ *  - `path`: the highlight breadcrumb shaped as `{ key: uid, label }`, so it
+ *    aligns with `expandedPath[level].key === uid` in the node view.
+ *
+ * Stops safely at the last valid segment if the value path does not exist in
+ * the data source.
+ *
+ * @param arr - The selected path. In `multiple` mode the value is an array of
+ *   paths; the first path is used to drive which columns get expanded.
  * @param data - The flattened options data
  * @param options - Optional configuration
- * @returns A tuple of [queue, path] where queue is the column data and path is the selected path info
+ * @returns A tuple of `[queue, path]`
  */
 export const changeToView = (
-  arr: Array<string | number>,
+  arr: Array<string | number> | Array<Array<string | number>>,
   data: Array<FlattenOption>,
   options?: {
-    needNext?: boolean;
     multiple?: boolean;
   },
-) => {
-  const { needNext, multiple } = options || {};
-  const _queue: FlattenOption[][] = [];
-  const _path: Array<{ id: string | number; text: string }> = [];
+): [FlattenOption[][], Array<{ key: string; label: string }>] => {
+  const { multiple } = options || {};
+  const queue: FlattenOption[][] = [];
+  const path: Array<{ key: string; label: string }> = [];
+
+  // Column 0 (root level) is always present so the popup can open even with
+  // no selection.
+  queue.push(data.filter((item) => item.level === 0));
+
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return [queue, path];
+  }
+
+  // In multiple mode the value is an array of paths; use the first one to
+  // drive column expansion.
+  const segments: Array<string | number> =
+    multiple && Array.isArray(arr[0])
+      ? (arr[0] as Array<string | number>)
+      : (arr as Array<string | number>);
 
-  if (Array.isArray(arr)) {
-    let i = 0;
-    let _arr = arr;
-    if (multiple) {
-      _arr = Array.isArray(arr[0]) ? arr[0] : arr;
+  let currentPid = '';
+  for (let i = 0; i < segments.length; i++) {
+    const matched = findInColumn(data, currentPid, segments[i]);
+    if (!matched) break; // value path doesn't exist in the data source
+    path.push({ key: matched.uid, label: matched.label as string });
+    if (!matched.isLeaf) {
+      queue.push(getChildren(data, matched.uid));
     }
-    let _data = data.filter((item) => item.level === 0);
-    do {
-      _queue.push(_data);
-      const result = getNextQueueElement(_data, _arr[i]);
-      if (result.length) {
-        const [_dataNext, _pathItem] = result;
-        _data = _dataNext;
-        _path.push(_pathItem);
-      }
-      i++;
-    } while (needNext ? i <= _arr.length : i < _arr.length);
+    currentPid = matched.uid;
   }
-  return [_queue, _path];
+
+  return [queue, path];
 };
 
 // Assemble Tags Options
@@ -302,11 +336,11 @@ export const changeToView = (
 // }
 
 /**
- * Format a path array into a key string
+ * Format a value path into a key string. Alias of `pathToUid` so all path→key
+ * conversions share one collision-safe format.
  * @param val - The path array
- * @returns A string key joined by '-'
  */
-export const formatKey = (val: Array<string | number>) => val.join('-');
+export const formatKey = (val: Array<string | number>): string => pathToUid(val);
 
 /**
  * Check if a path has the same prefix as another path
@@ -330,14 +364,16 @@ export const isSamePrefixPath = (
  * Determine if a node is fully selected or half selected (indeterminate)
  * @param value - The selected value paths
  * @param item - The flatten option node to check
+ * @param children - The node's direct flattened children (derive via `getChildren`)
  * @returns A tuple [checkedAll, indeterminate]
  */
 export function isHalfChecked(
   value: Array<Array<string | number>>,
   item: FlattenOption,
+  children: FlattenOption[],
 ) {
-  if (!hasChild(item)) return [false, false];
-  const total = item.children!.length;
+  if (!children.length) return [false, false];
+  const total = children.length;
   const prefixPath = item.path;
 
   const filtered = value.filter((path) => isSamePrefixPath(prefixPath, path));
@@ -348,14 +384,29 @@ export function isHalfChecked(
 }
 
 /**
- * Flatten a tree structure into an array for easier searching and traversal
+ * Default maximum tree depth accepted by `flattenOptions`. Guards against
+ * stack overflow on pathological/deeply-nested input.
+ */
+const DEFAULT_MAX_DEPTH = 100;
+
+/**
+ * Flatten a tree structure into an array for easier searching and traversal.
+ *
+ * The flattened nodes intentionally do NOT carry a `children` field — use
+ * `getChildren(data, uid)` to read a node's children. `uid`/`pid` are built
+ * via `pathToUid` (collision-safe). Includes a depth cap and a cycle guard so
+ * malformed input (very deep or self-referencing trees) cannot overflow the
+ * stack.
+ *
  * @param tree - The tree data to flatten
  * @param fieldNames - Custom field names for label, value, and children
+ * @param maxDepth - Maximum nesting depth (default 100)
  * @returns An array of flattened options with additional metadata
  */
 export const flattenOptions = (
   tree: Array<Record<string, unknown>>,
-  fieldNames: FieldNames,
+  fieldNames?: FieldNames,
+  maxDepth: number = DEFAULT_MAX_DEPTH,
 ): FlattenOption[] => {
   const res: FlattenOption[] = [];
   const {
@@ -363,29 +414,40 @@ export const flattenOptions = (
     value = 'value',
     children = 'children',
   } = fieldNames || {};
+  // Object-identity set of nodes on the current DFS path, for cycle detection.
+  const seen = new Set<Record<string, unknown>>();
   const dfs = (
     nodes: Array<Record<string, unknown>>,
     parents: Array<string | number> = [],
+    labelParents: string[] = [],
   ) => {
     nodes.forEach((node: Record<string, unknown>) => {
-      const wrappered = {
-        $source: node,
-        label: node[label],
-        value: node[value],
-        children: node[children],
-      } as Option;
-      const path = [...parents, wrappered['value']] as Array<string | number>;
-      const uid = path.join('-');
-      const pid = parents.join('-');
+      if (parents.length >= maxDepth) return; // depth guard
+      if (seen.has(node)) return; // cycle guard (back-edge to an ancestor)
+      const nodeLabel = node[label] as string;
+      const path = [...parents, node[value]] as Array<string | number>;
+      const labelPath = [...labelParents, nodeLabel];
+      const uid = pathToUid(path);
       res.push({
-        ...wrappered,
-        pid,
+        $source: node as Option,
+        label: nodeLabel,
+        value: node[value] as string | number,
+        pid: pathToUid(parents),
         uid,
         path,
+        labelPath,
         level: parents.length,
-        isLeaf: !hasChild(wrappered),
-      } as FlattenOption);
-      if (wrappered['children']) dfs(wrappered['children'] as Option[], path);
+        isLeaf: !hasChild(node, children),
+      });
+      if (hasChild(node, children)) {
+        seen.add(node);
+        dfs(
+          node[children] as Array<Record<string, unknown>>,
+          path,
+          labelPath,
+        );
+        seen.delete(node);
+      }
     });
   };
   dfs(tree);