@rainbow-oh/yee-c 0.4.3 → 0.4.5

package/package.json

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

package/src/Carousel/carousel.tsx

@@ -16,13 +16,21 @@ import { GlobalContext } from '../Config-Provider';
 import useElementSize from '../hooks/useElementSize';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import Item from './carousel-item';
-import type { CarouselProps } from './interface';
+import type {
+  CarouselContextProps,
+  CarouselItemProps,
+  CarouselProps,
+} from './interface';
 
 import './style/index.less';
 
 const DEFAULT_ANIMATION_DURATION = 500;
 
-export const CarouselCtx = React.createContext({} as any);
+export const CarouselCtx = React.createContext<CarouselContextProps>({
+  prefixCls: 'yee-carousel',
+  effect: 'scrollx',
+  current: 1,
+});
 
 const Carousel = React.forwardRef(
   (baseprops: CarouselProps, ref: React.Ref<HTMLDivElement>) => {
@@ -249,7 +257,10 @@ const Carousel = React.forwardRef(
 
     const renderFadeChilds = () => {
       return React.Children.map(children, (child, index) => {
-        return React.cloneElement(child as any, { index });
+        return React.cloneElement(
+          child as React.ReactElement<CarouselItemProps>,
+          { index },
+        );
       });
     };
 

package/src/Carousel/interface.ts

@@ -1,5 +1,11 @@
 export type SemanticDOM = 'dot' | 'prev' | 'next';
 
+export interface CarouselContextProps {
+  prefixCls: string;
+  effect: 'fade' | 'scrollx';
+  current: number;
+}
+
 export interface CarouselItemProps {
   index: number;
   style?: React.CSSProperties;

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',
@@ -59,7 +65,9 @@ const Cascader = (baseprops: CascaderProps) => {
 
   // Status variables for internal use
   const [columns, setColumns] = useState<Array<FlattenOption[]>>([]);
-  const [expandedPath, setExpandedPath] = useState<Array<any>>([]);
+  const [expandedPath, setExpandedPath] = useState<
+    Array<{ key: string; label: string }>
+  >([]);
   const [searchValue, setSearchValue] = useState(''); // Input field input
   // NOTE: popupVisible uses ref instead of state to avoid triggering re-renders
   // This is intentional - it's only used for side effects tracking, not for rendering
@@ -97,11 +105,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 +133,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 +146,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 +154,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 +183,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 +201,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 +211,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 +221,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 +286,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 +305,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 +342,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 +360,7 @@ const Cascader = (baseprops: CascaderProps) => {
     multiple,
     mergedValue,
     nodeMap,
+    flatOptions,
     optionLabelProp,
     props.fullNode,
     props.onlyParentNode,
@@ -377,6 +371,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 +390,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 +439,7 @@ const Cascader = (baseprops: CascaderProps) => {
         mode={multiple ? 'multiple' : undefined}
         value={searchValue}
         onSearch={handleSearch}
+        onClear={handleClear}
       />
     );
   };

package/src/Cascader/column.tsx

@@ -13,7 +13,7 @@ const Column = (props: ColumnProps) => {
   return (
     <ul className={`${prefixCls}-menu`} role="menu">
       {Array.isArray(data) &&
-        data.map((item: any, idx: number) => {
+        data.map((item, idx: number) => {
           return (
             <Node
               {...item}

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