@rovula/ui 0.0.57 → 0.0.59

package/dist/esm/types/components/Tree/type.d.ts

@@ -5,7 +5,8 @@ export type TreeData<T = {}> = {
     icon?: ReactNode;
     disabled?: boolean;
     isLeaf?: boolean;
-    onClickItem?: (id: string) => void;
+    itemData?: any;
+    onClickItem?: (id: string, itemData?: any) => void;
     children?: TreeData<T>[];
     renderIcon?: (params: {
         id: string;
@@ -31,9 +32,9 @@ export interface TreeItemProps extends TreeData {
     checkIsChecked: (id: string) => boolean;
     checkAutoDisabled: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
-    onExpandChange?: (id: string, expanded: boolean) => void;
+    onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
-    notifyClickItem?: (id: string) => void;
+    notifyClickItem?: (id: string, itemData: any) => void;
     renderRightSection?: (params: {
         id: string;
         expanded: boolean;
@@ -82,9 +83,9 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     defaultCheckedId?: string[];
     checkedId?: string[];
     loadingId?: string[];
-    onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedState: Record<string, boolean>) => void;
-    onClickItem?: (id: string) => void;
+    onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
+    onCheckedChange?: (checkedState: Record<string, boolean>, id?: string) => void;
+    onClickItem?: (id: string, itemData: any) => void;
     onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
     defaultCheckAll?: boolean;

package/dist/index.d.ts

@@ -621,7 +621,8 @@ type TreeData<T = {}> = {
     icon?: ReactNode;
     disabled?: boolean;
     isLeaf?: boolean;
-    onClickItem?: (id: string) => void;
+    itemData?: any;
+    onClickItem?: (id: string, itemData?: any) => void;
     children?: TreeData<T>[];
     renderIcon?: (params: {
         id: string;
@@ -647,9 +648,9 @@ interface TreeItemProps extends TreeData {
     checkIsChecked: (id: string) => boolean;
     checkAutoDisabled: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
-    onExpandChange?: (id: string, expanded: boolean) => void;
+    onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
-    notifyClickItem?: (id: string) => void;
+    notifyClickItem?: (id: string, itemData: any) => void;
     renderRightSection?: (params: {
         id: string;
         expanded: boolean;
@@ -698,9 +699,9 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     defaultCheckedId?: string[];
     checkedId?: string[];
     loadingId?: string[];
-    onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedState: Record<string, boolean>) => void;
-    onClickItem?: (id: string) => void;
+    onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
+    onCheckedChange?: (checkedState: Record<string, boolean>, id?: string) => void;
+    onClickItem?: (id: string, itemData: any) => void;
     onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
     defaultCheckAll?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Tabs from "./Tabs";
 import { ChevronDownIcon, ArchiveBoxIcon } from "@heroicons/react/16/solid";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { useArgs } from "@storybook/preview-api";
-import { Button } from "@/index";
+import { Button, Tree } from "@/index";
+import { exampleData } from "../Tree/example-data";
 
 const meta = {
   title: "Components/Tabs",
@@ -211,11 +212,67 @@ export const Disabled = {
   },
 } satisfies StoryObj;
 
+const TabContent = ({ tab }: any) => {
+  useEffect(() => {
+    console.log("tab ", tab, " Mount");
+
+    return () => {
+      console.log("tab ", tab, " DidMount");
+    };
+  }, [tab]);
+
+  return (
+    <div>
+      <p>Tab {tab} content</p>
+      <input />
+      <Tree data={exampleData} />
+    </div>
+  );
+};
+
 export const Controller = {
   args: {
     initialTab: 1,
     value: 0,
-    tabs,
+    tabs: [
+      // {
+      //   label: "Tab1",
+      //   content: <TabContent tab={1} />,
+      // },
+      // {
+      //   label: "Tab2",
+      //   content: <TabContent tab={2} />,
+      // },
+      // {
+      //   label: "Tab3",
+      //   content: <TabContent tab={3} />,
+      // },
+
+      {
+        label: "Tab1",
+        content: (
+          <div key={`tab-content-key-1`}>
+            fdfsdfdsfsdf <input />
+          </div>
+        ),
+      },
+      {
+        label: "Tab2",
+        content: (
+          <div key={`tab-content-key-2`}>
+            fdfsdfdsfsdf <input />
+          </div>
+        ),
+      },
+      {
+        label: "Tab3",
+        content: (
+          <div key={`tab-content-key-3`}>
+            fdfsdfdsfsdf <input />
+          </div>
+        ),
+      },
+    ],
     enableAddTabButton: true,
   },
   render: (args) => {

package/src/components/Tabs/Tabs.tsx

@@ -78,46 +78,53 @@ const Tabs: React.FC<TabsProps> = ({
     }
   }, [value]);
 
-  const updateSliderStyle = () => {
-    const activeTabElement = tabRefs.current[activeTab];
-    if (activeTabElement) {
-      setSliderStyle({
-        width: `${activeTabElement.offsetWidth}px`,
-        transform: `translateX(${activeTabElement.offsetLeft}px)`,
-      });
-    }
-  };
+  // const updateSliderStyle = () => {
+  //   const activeTabElement = tabRefs.current[activeTab];
+  //   if (activeTabElement) {
+  //     setSliderStyle({
+  //       width: `${activeTabElement.offsetWidth}px`,
+  //       transform: `translateX(${activeTabElement.offsetLeft}px)`,
+  //     });
+  //   }
+  // };
 
-  useEffect(() => {
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
+  // useEffect(() => {
+  //   let timer: NodeJS.Timeout;
 
-      // Set initial position without animation
-      const activeTabElement = tabRefs.current[activeTab];
-      if (activeTabElement) {
-        setSliderStyle({
-          width: "0px",
-          transform: `translateX(${
-            activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
-          }px)`,
-        });
+  //   if (isInitialMount.current) {
+  //     isInitialMount.current = false;
 
-        // Trigger reflow
-        setTimeout(() => {
-          updateSliderStyle();
-        }, 50);
-      }
-    } else {
-      updateSliderStyle();
-    }
+  //     // Set initial position without animation
+  //     const activeTabElement = tabRefs.current[activeTab];
+  //     if (activeTabElement) {
+  //       setSliderStyle({
+  //         width: "0px",
+  //         transform: `translateX(${
+  //           activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
+  //         }px)`,
+  //       });
 
-    const handleResize = () => {
-      updateSliderStyle();
-    };
+  //       // Trigger reflow
+  //       timer = setTimeout(() => {
+  //         updateSliderStyle();
+  //       }, 50);
+  //     }
+  //   } else {
+  //     updateSliderStyle();
+  //   }
 
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [activeTab, tabs, tabMode, keepIconSpace]);
+  //   const handleResize = () => {
+  //     updateSliderStyle();
+  //   };
+
+  //   window.addEventListener("resize", handleResize);
+  //   return () => {
+  //     window.removeEventListener("resize", handleResize);
+  //     if (timer) {
+  //       clearTimeout(timer);
+  //     }
+  //   };
+  // }, [activeTab, tabs, tabMode, keepIconSpace]);
 
   return (
     <div className={cn("w-full", className)}>
@@ -233,9 +240,7 @@ const Tabs: React.FC<TabsProps> = ({
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}
       >
-        <div key={tabs[activeTab].label + tabs[activeTab].id ?? Math.random()}>
-          {tabs[activeTab]?.content}
-        </div>
+        {tabs[activeTab]?.content}
       </div>
     </div>
   );

package/src/components/Tree/Tree.stories.tsx

@@ -335,6 +335,7 @@ export const ExpandLoadData: StoryObj<typeof Tree> = {
           {...args}
           data={data}
           loadingId={loadingId}
+          hierarchicalCheck
           onExpandChange={handleOnExpandChange}
         />
       </div>

package/src/components/Tree/Tree.tsx

@@ -93,9 +93,40 @@ const Tree: FC<TreeProps> = ({
     }
   }, [checkedId]);
 
+  useEffect(() => {
+    if (!hierarchicalCheck) {
+      return;
+    }
+
+    const state: Record<string, boolean> = {};
+    const updateChildren = (parentId: string, isChecked: boolean) => {
+      traverseTree(data, (node) => {
+        if (node.id === parentId && node.children) {
+          node.children.forEach((child) => {
+            state[child.id] = isChecked;
+            updateChildren(child.id, isChecked);
+          });
+        }
+      });
+    };
+
+    setCheckedState((prev) => {
+      Object.keys(prev)
+        .filter((key) => prev[key])
+        .map((id) => {
+          updateChildren(id, true);
+        });
+
+      return {
+        ...prev,
+        ...state,
+      };
+    });
+  }, [data, hierarchicalCheck]);
+
   const handleExpandChange = useCallback(
-    (id: string, expanded: boolean) => {
-      onExpandChange?.(id, expanded);
+    (id: string, expanded: boolean, itemData: any) => {
+      onExpandChange?.(id, expanded, itemData);
       setExpandedState((prev) => ({ ...prev, [id]: expanded }));
     },
     [onExpandChange]
@@ -108,7 +139,7 @@ const Tree: FC<TreeProps> = ({
 
         onCheckedItem?.(id, checked);
         setCheckedState(newState);
-        onCheckedChange?.(newState);
+        onCheckedChange?.(newState, id);
 
         return;
       }
@@ -163,7 +194,7 @@ const Tree: FC<TreeProps> = ({
       setCheckedState(newState);
 
       if (onCheckedChange) {
-        onCheckedChange?.(newState);
+        onCheckedChange?.(newState, id);
       }
     },
     [

package/src/components/Tree/TreeItem.tsx

@@ -36,6 +36,7 @@ const TreeItem: FC<TreeItemProps> = ({
   currentLevel = 1,
   maxLevel = 10,
   notifyClickItem,
+  itemData,
 }) => {
   const isLoading = useMemo(() => checkIsLoading?.(id), [checkIsLoading, id]);
   const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
@@ -93,8 +94,8 @@ const TreeItem: FC<TreeItemProps> = ({
   );
 
   const handleExpandToggle = useCallback(() => {
-    onExpandChange?.(id, !isExpanded);
-  }, [id, isExpanded, onExpandChange]);
+    onExpandChange?.(id, !isExpanded, itemData);
+  }, [id, isExpanded, onExpandChange, itemData]);
 
   useEffect(() => {
     if (isExpanded && !isLoading && !hasChildren) {
@@ -103,9 +104,9 @@ const TreeItem: FC<TreeItemProps> = ({
   }, [isLoading, handleExpandToggle]);
 
   const handleOnClickItem = useCallback(() => {
-    onClickItem?.(id);
-    notifyClickItem?.(id);
-  }, [onClickItem, notifyClickItem, id]);
+    onClickItem?.(id, itemData);
+    notifyClickItem?.(id, itemData);
+  }, [id, isExpanded, onClickItem, notifyClickItem, itemData]);
 
   const defaultIcon = (
     <Icon
@@ -254,7 +255,7 @@ const TreeItem: FC<TreeItemProps> = ({
         {isExpanded && hasChildren && currentLevel < (maxLevel || Infinity) && (
           <div
             className={cn(
-              "flex flex-row overflow-hidden max-h-screen",
+              "flex flex-row overflow-hidden",
               classes?.expandedChildrenWrapper
             )}
           >
@@ -269,7 +270,7 @@ const TreeItem: FC<TreeItemProps> = ({
             )}
             <div
               className={cn(
-                "flex flex-col overflow-hidden max-h-screen",
+                "flex flex-col overflow-hidden",
                 classes?.expandedChildrenWrapperInner
               )}
               style={styles.childPadding}

package/src/components/Tree/type.ts

@@ -6,7 +6,8 @@ export type TreeData<T = {}> = {
   icon?: ReactNode;
   disabled?: boolean;
   isLeaf?: boolean;
-  onClickItem?: (id: string) => void;
+  itemData?: any;
+  onClickItem?: (id: string, itemData?: any) => void;
   children?: TreeData<T>[]; // Recursively include additional data
   renderIcon?: (params: {
     id: string;
@@ -33,9 +34,9 @@ export interface TreeItemProps extends TreeData {
   checkIsChecked: (id: string) => boolean;
   checkAutoDisabled: (id: string) => boolean;
   checkIsLoading?: (id: string) => void;
-  onExpandChange?: (id: string, expanded: boolean) => void;
+  onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
   onCheckedChange?: (id: string, checked: boolean) => void;
-  notifyClickItem?: (id: string) => void;
+  notifyClickItem?: (id: string, itemData: any) => void;
   renderRightSection?: (params: {
     id: string;
     expanded: boolean;
@@ -100,9 +101,12 @@ export interface TreeProps
   defaultCheckedId?: string[];
   checkedId?: string[];
   loadingId?: string[];
-  onExpandChange?: (id: string, expanded: boolean) => void;
-  onCheckedChange?: (checkedState: Record<string, boolean>) => void;
-  onClickItem?: (id: string) => void;
+  onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
+  onCheckedChange?: (
+    checkedState: Record<string, boolean>,
+    id?: string
+  ) => void;
+  onClickItem?: (id: string, itemData: any) => void;
   onCheckedItem?: (id: string, checked: boolean) => void;
   defaultExpandAll?: boolean;
   defaultCheckAll?: boolean;