@rovula/ui 0.0.58 → 0.0.59

package/dist/cjs/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/components/Tabs/Tabs.js

@@ -19,40 +19,47 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
             setActiveTab(value);
         }
     }, [value]);
-    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;
-            // Set initial position without animation
-            const activeTabElement = tabRefs.current[activeTab];
-            if (activeTabElement) {
-                setSliderStyle({
-                    width: "0px",
-                    transform: `translateX(${activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2}px)`,
-                });
-                // Trigger reflow
-                setTimeout(() => {
-                    updateSliderStyle();
-                }, 50);
-            }
-        }
-        else {
-            updateSliderStyle();
-        }
-        const handleResize = () => {
-            updateSliderStyle();
-        };
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [activeTab, tabs, tabMode, keepIconSpace]);
+    // const updateSliderStyle = () => {
+    //   const activeTabElement = tabRefs.current[activeTab];
+    //   if (activeTabElement) {
+    //     setSliderStyle({
+    //       width: `${activeTabElement.offsetWidth}px`,
+    //       transform: `translateX(${activeTabElement.offsetLeft}px)`,
+    //     });
+    //   }
+    // };
+    // useEffect(() => {
+    //   let timer: NodeJS.Timeout;
+    //   if (isInitialMount.current) {
+    //     isInitialMount.current = false;
+    //     // Set initial position without animation
+    //     const activeTabElement = tabRefs.current[activeTab];
+    //     if (activeTabElement) {
+    //       setSliderStyle({
+    //         width: "0px",
+    //         transform: `translateX(${
+    //           activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
+    //         }px)`,
+    //       });
+    //       // Trigger reflow
+    //       timer = setTimeout(() => {
+    //         updateSliderStyle();
+    //       }, 50);
+    //     }
+    //   } else {
+    //     updateSliderStyle();
+    //   }
+    //   const handleResize = () => {
+    //     updateSliderStyle();
+    //   };
+    //   window.addEventListener("resize", handleResize);
+    //   return () => {
+    //     window.removeEventListener("resize", handleResize);
+    //     if (timer) {
+    //       clearTimeout(timer);
+    //     }
+    //   };
+    // }, [activeTab, tabs, tabMode, keepIconSpace]);
     return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: cn(" relative flex flex-row w-full", {
                     [`border-b-[1px] border-base-stroke`]: enableBorderLine,
                     "border-state-disable-outline": disabled,
@@ -77,6 +84,6 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                                         onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
                                     }, children: [(keepIconSpace || tab.startTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.isLoading ? _jsx(Loading, {}) : tab.startTabContent })), tab.label, (keepIconSpace || tab.endTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.endTabContent }))] }, index))), _jsx("div", { className: cn(`absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`, {
                                         "bg-state-disable-solid": disabled,
-                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: _jsx("div", { children: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content }, tabs[activeTab].label + tabs[activeTab].id) })] }));
+                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content })] }));
 };
 export default Tabs;

package/dist/components/Tabs/Tabs.stories.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "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",
     component: Tabs,
@@ -115,11 +117,45 @@ export const Disabled = {
         return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Tabs, Object.assign({ tabs: tabs }, props)), _jsx(Tabs, Object.assign({ tabs: tabs }, props, { disabled: true }))] }));
     },
 };
+const TabContent = ({ tab }) => {
+    useEffect(() => {
+        console.log("tab ", tab, " Mount");
+        return () => {
+            console.log("tab ", tab, " DidMount");
+        };
+    }, [tab]);
+    return (_jsxs("div", { children: [_jsxs("p", { children: ["Tab ", tab, " content"] }), _jsx("input", {}), _jsx(Tree, { data: exampleData })] }));
+};
 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: (_jsxs("div", { children: ["fdfsdfdsfsdf ", _jsx("input", {})] }, `tab-content-key-1`)),
+            },
+            {
+                label: "Tab2",
+                content: (_jsxs("div", { children: ["fdfsdfdsfsdf ", _jsx("input", {})] }, `tab-content-key-2`)),
+            },
+            {
+                label: "Tab3",
+                content: (_jsxs("div", { children: ["fdfsdfdsfsdf ", _jsx("input", {})] }, `tab-content-key-3`)),
+            },
+        ],
         enableAddTabButton: true,
     },
     render: (args) => {

package/dist/components/Tree/Tree.js

@@ -76,8 +76,8 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             return Object.assign(Object.assign({}, prev), state);
         });
     }, [data, hierarchicalCheck]);
-    const handleExpandChange = useCallback((id, expanded) => {
-        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded);
+    const handleExpandChange = useCallback((id, expanded, itemData) => {
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded, itemData);
         setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));
     }, [onExpandChange]);
     const handleCheckedChange = useCallback((id, checked) => {

package/dist/components/Tree/TreeItem.js

@@ -3,7 +3,7 @@ import { ActionButton, Checkbox, Loading } from "@/index";
 import { cn } from "@/utils/cn";
 import { useCallback, useEffect, useMemo } from "react";
 import Icon from "../Icon/Icon";
-const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkable, checkIsExpanded, checkIsChecked, checkAutoDisabled, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, currentLevel = 1, maxLevel = 10, notifyClickItem, }) => {
+const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkable, checkIsExpanded, checkIsChecked, checkAutoDisabled, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, currentLevel = 1, maxLevel = 10, notifyClickItem, itemData, }) => {
     const isLoading = useMemo(() => checkIsLoading === null || checkIsLoading === void 0 ? void 0 : checkIsLoading(id), [checkIsLoading, id]);
     const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
     const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
@@ -46,17 +46,17 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf =
         checkboxSpace,
     ]);
     const handleExpandToggle = useCallback(() => {
-        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
-    }, [id, isExpanded, onExpandChange]);
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded, itemData);
+    }, [id, isExpanded, onExpandChange, itemData]);
     useEffect(() => {
         if (isExpanded && !isLoading && !hasChildren) {
             handleExpandToggle();
         }
     }, [isLoading, handleExpandToggle]);
     const handleOnClickItem = useCallback(() => {
-        onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(id);
-        notifyClickItem === null || notifyClickItem === void 0 ? void 0 : notifyClickItem(id);
-    }, [onClickItem, notifyClickItem, id]);
+        onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(id, itemData);
+        notifyClickItem === null || notifyClickItem === void 0 ? void 0 : notifyClickItem(id, itemData);
+    }, [id, isExpanded, onClickItem, notifyClickItem, itemData]);
     const defaultIcon = (_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning size-[18px]" }));
     const customIcon = icon !== null && icon !== void 0 ? icon : renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon({
         id,