@rovula/ui 0.0.58 → 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;
+    onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
     onCheckedChange?: (checkedState: Record<string, boolean>, id?: string) => void;
-    onClickItem?: (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;
+    onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
     onCheckedChange?: (checkedState: Record<string, boolean>, id?: string) => void;
-    onClickItem?: (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.58",
+  "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}>
-          {tabs[activeTab]?.content}
-        </div>
+        {tabs[activeTab]?.content}
       </div>
     </div>
   );

package/src/components/Tree/Tree.tsx

@@ -125,8 +125,8 @@ const Tree: FC<TreeProps> = ({
   }, [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]

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

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,12 +101,12 @@ export interface TreeProps
   defaultCheckedId?: string[];
   checkedId?: string[];
   loadingId?: string[];
-  onExpandChange?: (id: string, expanded: boolean) => void;
+  onExpandChange?: (id: string, expanded: boolean, itemData: any) => void;
   onCheckedChange?: (
     checkedState: Record<string, boolean>,
     id?: string
   ) => void;
-  onClickItem?: (id: string) => void;
+  onClickItem?: (id: string, itemData: any) => void;
   onCheckedItem?: (id: string, checked: boolean) => void;
   defaultExpandAll?: boolean;
   defaultCheckAll?: boolean;