@rovula/ui 0.0.57 → 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;
-    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/components/Tabs/Tabs.js

@@ -6,7 +6,7 @@ import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { Loading } from "@/index";
 const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
-    var _a, _b;
+    var _a;
     const [activeTab, setActiveTab] = useState(initialTab);
     const [sliderStyle, setSliderStyle] = useState({
         width: "0px",
@@ -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 }, (_b = tabs[activeTab].label + tabs[activeTab].id) !== null && _b !== void 0 ? _b : Math.random()) })] }));
+                                    }, 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

@@ -52,8 +52,32 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             setCheckedState(checkedId.reduce((prev, cur) => (Object.assign(Object.assign({}, prev), { [cur]: true })), {}));
         }
     }, [checkedId]);
-    const handleExpandChange = useCallback((id, expanded) => {
-        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded);
+    useEffect(() => {
+        if (!hierarchicalCheck) {
+            return;
+        }
+        const state = {};
+        const updateChildren = (parentId, isChecked) => {
+            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 Object.assign(Object.assign({}, prev), state);
+        });
+    }, [data, hierarchicalCheck]);
+    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) => {
@@ -61,7 +85,7 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             let newState = { [id]: checked };
             onCheckedItem === null || onCheckedItem === void 0 ? void 0 : onCheckedItem(id, checked);
             setCheckedState(newState);
-            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState);
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState, id);
             return;
         }
         onCheckedItem === null || onCheckedItem === void 0 ? void 0 : onCheckedItem(id, checked);
@@ -99,7 +123,7 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
         }
         setCheckedState(newState);
         if (onCheckedChange) {
-            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState);
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState, id);
         }
     }, [
         checkedState,

package/dist/components/Tree/Tree.stories.js

@@ -168,7 +168,7 @@ export const ExpandLoadData = {
                 }, 1500);
             }
         };
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { data: data, loadingId: loadingId, onExpandChange: handleOnExpandChange })) }));
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { data: data, loadingId: loadingId, hierarchicalCheck: true, onExpandChange: handleOnExpandChange })) }));
     },
 };
 export const MaximumLevel = {

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,
@@ -85,6 +85,6 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf =
                                     !isLastItem &&
                                     ((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (_jsx("div", { className: cn("flex w-[2px] h-1/2 bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch }))] }), _jsxs("div", { className: cn("flex flex-1 items-center py-2 min-h-10", classes === null || classes === void 0 ? void 0 : classes.itemContainer), children: [!isFirstLevel && (_jsx("div", { className: cn("bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.horizontalLine), style: styles.horizontalLine })), isFirstLevel && !shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton })), shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton, onClick: !isLoading && handleExpandToggle, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: isLoading ? (_jsx(Loading, {})) : (_jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right" })) }) })), shouldShowCheckbox ? (_jsx(Checkbox, { id: id, className: cn("size-[16px]", classes === null || classes === void 0 ? void 0 : classes.checkbox), checked: isChecked, disabled: disabled, onCheckedChange: (newChecked) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(id, newChecked) })) : (_jsx("div", { className: isFirstLevel && checkable
                                         ? cn("size-[16px]", classes === null || classes === void 0 ? void 0 : classes.checkbox)
-                                        : "" })), _jsxs("div", { className: cn("ml-2 gap-1 flex flex-1 items-center text-foreground", classes === null || classes === void 0 ? void 0 : classes.item), onClick: handleOnClickItem, children: [showIcon ? customIcon || defaultIcon : null, _jsx("div", { className: cn("flex flex-1 cursor-pointer text-subtitle5 text-ellipsis", classes === null || classes === void 0 ? void 0 : classes.title), children: titleContent })] }), rightIcon] })] }), isExpanded && hasChildren && currentLevel < (maxLevel || Infinity) && (_jsxs("div", { className: cn("flex flex-row overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapper), children: [!isFirstLevel && !isLastItem && (_jsx("div", { className: cn("flex w-[2px] h-full bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), _jsx("div", { className: cn("flex flex-col overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapperInner), style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({ classes: classes, isLastItem: idx === children.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, checkAutoDisabled: checkAutoDisabled, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: checkAutoDisabled(child.id), showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing, notifyClickItem: notifyClickItem, maxLevel: maxLevel, currentLevel: currentLevel + 1, checkable: checkable }, child), child.id))) })] })), enableSeparatorLine && isFirstLevel && !isLastItem && (_jsx("div", { className: cn("bg-grey-150 w-full h-[2px] rounded", classes === null || classes === void 0 ? void 0 : classes.separatorLine) }))] }) }));
+                                        : "" })), _jsxs("div", { className: cn("ml-2 gap-1 flex flex-1 items-center text-foreground", classes === null || classes === void 0 ? void 0 : classes.item), onClick: handleOnClickItem, children: [showIcon ? customIcon || defaultIcon : null, _jsx("div", { className: cn("flex flex-1 cursor-pointer text-subtitle5 text-ellipsis", classes === null || classes === void 0 ? void 0 : classes.title), children: titleContent })] }), rightIcon] })] }), isExpanded && hasChildren && currentLevel < (maxLevel || Infinity) && (_jsxs("div", { className: cn("flex flex-row overflow-hidden", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapper), children: [!isFirstLevel && !isLastItem && (_jsx("div", { className: cn("flex w-[2px] h-full bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), _jsx("div", { className: cn("flex flex-col overflow-hidden", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapperInner), style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({ classes: classes, isLastItem: idx === children.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, checkAutoDisabled: checkAutoDisabled, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: checkAutoDisabled(child.id), showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing, notifyClickItem: notifyClickItem, maxLevel: maxLevel, currentLevel: currentLevel + 1, checkable: checkable }, child), child.id))) })] })), enableSeparatorLine && isFirstLevel && !isLastItem && (_jsx("div", { className: cn("bg-grey-150 w-full h-[2px] rounded", classes === null || classes === void 0 ? void 0 : classes.separatorLine) }))] }) }));
 };
 export default TreeItem;