@rovula/ui 0.0.51 → 0.0.53

package/dist/cjs/types/components/Tabs/Tabs.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
+import "./Tabs.css";
 type Tab = {
     label: string;
     startTabContent?: React.ReactElement;
     endTabContent?: React.ReactElement;
     content: React.ReactNode;
+    disabled?: boolean;
+    isLoading?: boolean;
 };
 type TabsProps = {
     tabs: Tab[];
@@ -11,12 +14,22 @@ type TabsProps = {
     tabBarSize?: number;
     tabMode?: "start" | "justify";
     enableBorderLine?: boolean;
+    enableAddTabButton?: boolean;
+    keepIconSpace?: boolean;
     className?: string;
     tabBarClassName?: string;
+    tabBarContainerClassName?: string;
+    tabBarWrapperClassName?: string;
     tabButtonClassName?: string;
     tabButtonActiveClassName?: string;
     tabContentClassName?: string;
-    borderSliderClassname?: string;
+    addTabButtonWrapperClassName?: string;
+    borderSliderClassName?: string;
+    leftAction?: React.ReactNode;
+    rightAction?: React.ReactNode;
+    disabled?: boolean;
+    onAddTab?: () => void;
+    onTabChange?: (tabIndex: number) => void;
 };
 declare const Tabs: React.FC<TabsProps>;
 export default Tabs;

package/dist/cjs/types/components/Tabs/Tabs.stories.d.ts

@@ -7,17 +7,29 @@ declare const meta: {
             startTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             endTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             content: React.ReactNode;
+            disabled?: boolean | undefined;
+            isLoading?: boolean | undefined;
         }[];
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
         enableBorderLine?: boolean | undefined;
+        enableAddTabButton?: boolean | undefined;
+        keepIconSpace?: boolean | undefined;
         className?: string | undefined;
         tabBarClassName?: string | undefined;
+        tabBarContainerClassName?: string | undefined;
+        tabBarWrapperClassName?: string | undefined;
         tabButtonClassName?: string | undefined;
         tabButtonActiveClassName?: string | undefined;
         tabContentClassName?: string | undefined;
-        borderSliderClassname?: string | undefined;
+        addTabButtonWrapperClassName?: string | undefined;
+        borderSliderClassName?: string | undefined;
+        leftAction?: React.ReactNode;
+        rightAction?: React.ReactNode;
+        disabled?: boolean | undefined;
+        onAddTab?: (() => void) | undefined;
+        onTabChange?: ((tabIndex: number) => void) | undefined;
     }>;
     tags: string[];
     parameters: {
@@ -29,17 +41,29 @@ declare const meta: {
             startTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             endTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             content: React.ReactNode;
+            disabled?: boolean | undefined;
+            isLoading?: boolean | undefined;
         }[];
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
         enableBorderLine?: boolean | undefined;
+        enableAddTabButton?: boolean | undefined;
+        keepIconSpace?: boolean | undefined;
         className?: string | undefined;
         tabBarClassName?: string | undefined;
+        tabBarContainerClassName?: string | undefined;
+        tabBarWrapperClassName?: string | undefined;
         tabButtonClassName?: string | undefined;
         tabButtonActiveClassName?: string | undefined;
         tabContentClassName?: string | undefined;
-        borderSliderClassname?: string | undefined;
+        addTabButtonWrapperClassName?: string | undefined;
+        borderSliderClassName?: string | undefined;
+        leftAction?: React.ReactNode;
+        rightAction?: React.ReactNode;
+        disabled?: boolean | undefined;
+        onAddTab?: (() => void) | undefined;
+        onTabChange?: ((tabIndex: number) => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
@@ -65,3 +89,58 @@ export declare const CustomTab: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const TabWithLeftRightAction: {
+    args: {
+        initialTab: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const AddTabWithScrolling: {
+    args: {
+        initialTab: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        enableAddTabButton: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const KeepIconSpacing: {
+    args: {
+        initialTab: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        keepIconSpace: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Loading: {
+    args: {
+        initialTab: number;
+        tabs: {
+            isLoading: boolean;
+            startTabContent: import("react/jsx-runtime").JSX.Element;
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Disabled: {
+    args: {
+        initialTab: number;
+        tabs: {
+            disabled: boolean;
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Tree/Tree.stories.d.ts

@@ -11,3 +11,6 @@ export declare const ControlShowExpandButton: StoryObj<typeof Tree>;
 export declare const Diabled: StoryObj<typeof Tree>;
 export declare const DiabledEachItem: StoryObj<typeof Tree>;
 export declare const ExpandLoadData: StoryObj<typeof Tree>;
+export declare const MaximumLevel: StoryObj<typeof Tree>;
+export declare const Leaf: StoryObj<typeof Tree>;
+export declare const HideCheckboxMode: StoryObj<typeof Tree>;

package/dist/cjs/types/components/Tree/example-data.d.ts

@@ -0,0 +1,5 @@
+import { TreeData } from "./type";
+export declare const exampleData: TreeData[];
+export declare const exampleLeafData: TreeData[];
+export declare const exampleData2: TreeData[];
+export declare const sections: TreeData<any>[];

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

@@ -1,18 +1,20 @@
 import { CSSProperties, ReactNode } from "react";
-export type TreeData = {
+export type TreeData<T = {}> = {
     id: string;
     title: string;
     icon?: ReactNode;
     disabled?: boolean;
+    isLeaf?: boolean;
     onClickItem?: (id: string) => void;
-    children?: TreeData[];
+    children?: TreeData<T>[];
     renderIcon?: (params: {
         id: string;
         expanded: boolean;
         selected: boolean;
     }) => ReactNode;
-};
+} & T;
 export interface TreeItemProps extends TreeData {
+    checkable?: boolean;
     isFirstLevel?: boolean;
     isLastItem: boolean;
     disabled?: boolean;
@@ -23,11 +25,14 @@ export interface TreeItemProps extends TreeData {
     horizontalLineWidth?: number;
     expandButtonSize?: number;
     spacing?: number;
+    currentLevel: number;
+    maxLevel?: number;
     checkIsExpanded: (id: string) => boolean;
     checkIsChecked: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
     onExpandChange?: (id: string, expanded: boolean) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
+    notifyClickItem?: (id: string) => void;
     renderRightSection?: (params: {
         id: string;
         expanded: boolean;
@@ -53,6 +58,7 @@ export interface TreeItemProps extends TreeData {
         selected: boolean;
     }) => ReactNode;
     classes?: Partial<{
+        container?: string;
         elementWrapper?: string;
         branch?: string;
         itemWrapper?: string;
@@ -76,8 +82,12 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     checkedId?: string[];
     loadingId?: string[];
     onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedId: string[]) => void;
+    onCheckedChange?: (checkedId: string[], uncheckedId: string[], checkedState: Record<string, boolean>) => void;
+    onClickItem?: (id: string) => void;
+    onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
     defaultCheckAll?: boolean;
     hierarchicalCheck?: boolean;
+    checkable?: boolean;
+    maxLevel?: number;
 }

package/dist/components/Tabs/Tabs.js

@@ -1,7 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
-const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = true, tabMode = "start", className, tabBarClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, borderSliderClassname, }) => {
+import "./Tabs.css";
+import ActionButton from "../ActionButton/ActionButton";
+import Icon from "../Icon/Icon";
+import { Loading } from "@/index";
+const Tabs = ({ tabs = [], 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;
     const [activeTab, setActiveTab] = useState(initialTab);
     const [sliderStyle, setSliderStyle] = useState({
@@ -38,23 +42,36 @@ const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = t
         else {
             updateSliderStyle();
         }
-        // const handleResize = () => {
-        //   updateSliderStyle();
-        // };
-        // window.addEventListener("resize", handleResize);
-        // return () => window.removeEventListener("resize", handleResize);
-    }, [activeTab, tabs, tabMode]);
-    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: cn(`relative flex gap-6 h-[${tabBarSize}px] box-border`, {
+        const handleResize = () => {
+            updateSliderStyle();
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [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,
-                    "gap-0": tabMode === "justify",
-                }, tabBarClassName), style: {
-                    justifyContent: tabMode === "justify" ? "stretch" : tabMode,
-                }, role: "tablist", children: [tabs.map((tab, index) => (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-4 px-1 cursor-pointer transition-colors duration-300 box-border gap-3", {
-                            "typography-small3 text-text-dark": index === activeTab,
-                            "typography-small1 text-text-grey-light hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
-                            [tabButtonClassName !== null && tabButtonClassName !== void 0 ? tabButtonClassName : ""]: true,
-                            [tabButtonActiveClassName !== null && tabButtonActiveClassName !== void 0 ? tabButtonActiveClassName : ""]: index === activeTab,
+                    "border-state-disable-outline": disabled,
+                    "flex-1": tabMode === "justify",
+                    tabBarContainerClassName,
+                }), children: [leftAction, _jsx("div", { className: cn("relative flex flex-row  overflow-x-auto", {
                             "flex-1": tabMode === "justify",
-                        }), onClick: () => setActiveTab(index), children: [tab.startTabContent, tab.label, tab.endTabContent] }, index))), _jsx("div", { className: cn(`absolute -bottom-[1px] h-[1px] bg-primary transition-all duration-300 ease-in-out`, borderSliderClassname), style: sliderStyle })] }), _jsx("div", { className: cn("mt-4", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content })] }));
+                        }, tabBarWrapperClassName), children: _jsxs("div", { className: cn("tabs-scrollbar overflow-x-auto w-full", `relative flex gap-3 h-[${tabBarSize}px] box-border`, {
+                                "gap-0": tabMode === "justify",
+                            }, tabBarClassName), style: {
+                                justifyContent: tabMode === "justify" ? "stretch" : tabMode,
+                            }, role: "tablist", children: [tabs.map((tab, index) => (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6", {
+                                        "text-foreground": index === activeTab,
+                                        "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
+                                        "text-state-disable-solid pointer-events-none": disabled || tab.disabled,
+                                        "text-state-disable-outline": (index === activeTab && disabled) || tab.disabled,
+                                        [tabButtonClassName !== null && tabButtonClassName !== void 0 ? tabButtonClassName : ""]: true,
+                                        [tabButtonActiveClassName !== null && tabButtonActiveClassName !== void 0 ? tabButtonActiveClassName : ""]: index === activeTab,
+                                        "flex-1": tabMode === "justify",
+                                    }), onClick: () => {
+                                        setActiveTab(index);
+                                        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: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content })] }));
 };
 export default Tabs;

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

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
 const meta = {
     title: "Components/Tabs",
     component: Tabs,
@@ -9,7 +12,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -40,10 +43,74 @@ export const Default = {
 export const CustomTab = {
     args: {
         initialTab: 0,
-        tabs: tabs.map((tab) => (Object.assign(Object.assign({}, tab), { startTabContent: _jsx(ArchiveBoxIcon, { className: "size-3 " }), endTabContent: _jsx(ChevronDownIcon, { className: "size-3" }) }))),
+        tabs: tabs.map((tab) => (Object.assign(Object.assign({}, tab), { startTabContent: _jsx(ArchiveBoxIcon, {}), endTabContent: _jsx(ChevronDownIcon, {}) }))),
     },
     render: (args) => {
         const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tabs, Object.assign({ tabs: tabs }, props)) }));
     },
 };
+//  variant="scrollable"
+export const TabWithLeftRightAction = {
+    args: {
+        initialTab: 0,
+        tabs: tabs.map((tab) => (Object.assign({}, tab))),
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabMode: "start", leftAction: _jsx(ActionButton, { onClick: () => alert("left action"), className: "mr-4", children: _jsx(Icon, { name: "academic-cap" }) }), rightAction: _jsx(ActionButton, { onClick: () => alert("right action"), className: "ml-4", children: _jsx(Icon, { name: "arrow-down-tray" }) }) })) }));
+    },
+};
+export const AddTabWithScrolling = {
+    args: {
+        initialTab: 0,
+        tabs,
+        enableAddTabButton: true,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        const [, setArgs] = useArgs();
+        return (_jsx("div", { className: "flex flex-row gap-4  w-[500px]", children: _jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabMode: "start", onAddTab: () => {
+                    setArgs({
+                        tabs: [
+                            ...props.tabs,
+                            {
+                                label: "Tab" + (props.tabs.length + 1),
+                                content: _jsxs("p", { children: ["Tab ", props.tabs.length + 1, " content"] }),
+                            },
+                        ],
+                    });
+                } })) }));
+    },
+};
+export const KeepIconSpacing = {
+    args: {
+        initialTab: 0,
+        tabs,
+        keepIconSpace: true,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4  w-[500px]", children: _jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabMode: "start" })) }));
+    },
+};
+export const Loading = {
+    args: {
+        initialTab: 0,
+        tabs: tabs.map((tab, i) => (Object.assign(Object.assign({}, tab), { isLoading: i !== 0, startTabContent: _jsx(Icon, { name: "rocket-launch" }) }))),
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4  w-[500px]", children: _jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabMode: "start" })) }));
+    },
+};
+export const Disabled = {
+    args: {
+        initialTab: 0,
+        tabs: tabs.map((tab, i) => (Object.assign(Object.assign({}, tab), { disabled: i !== 0 }))),
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        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 }))] }));
+    },
+};

package/dist/components/Tree/Tree.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import TreeItem from "./TreeItem";
-const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, loadingId, lineSize, horizontalLineWidth, expandButtonSize, spacing, renderIcon, renderRightSection, renderElement, renderTitle, onExpandChange, onCheckedChange, defaultExpandAll = false, defaultCheckAll = false, hierarchicalCheck = false, showIcon = true, disabled, enableSeparatorLine = true, }) => {
+import { cn } from "@/utils/cn";
+const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, loadingId, lineSize, horizontalLineWidth, expandButtonSize, spacing, renderIcon, renderRightSection, renderElement, renderTitle, onExpandChange, onCheckedChange, onClickItem, onCheckedItem, defaultExpandAll = false, defaultCheckAll = false, hierarchicalCheck = false, showIcon = true, disabled, enableSeparatorLine = true, checkable = true, maxLevel, }) => {
     const [checkedState, setCheckedState] = useState({});
     const [expandedState, setExpandedState] = useState({});
     const traverseTree = (nodes, callback) => {
@@ -51,6 +52,7 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
         setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));
     }, [onExpandChange]);
     const handleCheckedChange = useCallback((id, checked) => {
+        onCheckedItem === null || onCheckedItem === void 0 ? void 0 : onCheckedItem(id, checked);
         let newState = Object.assign(Object.assign({}, checkedState), { [id]: checked });
         if (hierarchicalCheck) {
             const updateCheckedState = (nodeId, isChecked, state) => {
@@ -86,9 +88,10 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
         setCheckedState(newState);
         if (onCheckedChange) {
             const checkedIds = Object.keys(newState).filter((key) => newState[key]);
-            onCheckedChange(checkedIds);
+            const uncheckedIds = Object.keys(newState).filter((key) => !newState[key]);
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(checkedIds, uncheckedIds, newState);
         }
-    }, [checkedState, data, onCheckedChange, hierarchicalCheck]);
+    }, [checkedState, data, onCheckedChange, hierarchicalCheck, onCheckedItem]);
     const checkIsExpanded = useCallback((id) => !!expandedState[id], [expandedState]);
     const checkIsChecked = useCallback((id) => {
         if (checkedId) {
@@ -101,6 +104,6 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             return loadingId.includes(id);
         }
     }, [loadingId]);
-    return (_jsx("div", { className: "w-full", children: data.map((item, idx) => (_jsx(TreeItem, Object.assign({ classes: classes, isFirstLevel: true, isLastItem: idx === data.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, onExpandChange: handleExpandChange, onCheckedChange: handleCheckedChange, checkIsLoading: checkIsLoading, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, renderRightSection: renderRightSection, enableSeparatorLine: enableSeparatorLine, disabled: disabled, showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing }, item), item.id))) }));
+    return (_jsx("div", { className: cn("w-full", classes === null || classes === void 0 ? void 0 : classes.container), children: data.map((item, idx) => (_jsx(TreeItem, Object.assign({ classes: classes, isFirstLevel: true, isLastItem: idx === data.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, onExpandChange: handleExpandChange, onCheckedChange: handleCheckedChange, checkIsLoading: checkIsLoading, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, renderRightSection: renderRightSection, enableSeparatorLine: enableSeparatorLine, disabled: disabled, showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing, notifyClickItem: onClickItem, maxLevel: maxLevel, currentLevel: 1, checkable: checkable }, item), item.id))) }));
 };
 export default Tree;