@rovula/ui 0.0.49 → 0.0.51

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

@@ -3,6 +3,7 @@ import Tree from "./Tree";
 declare const meta: Meta<typeof Tree>;
 export default meta;
 export declare const Default: StoryObj<typeof Tree>;
+export declare const Controller: StoryObj<typeof Tree>;
 export declare const onClick: StoryObj<typeof Tree>;
 export declare const CustomIcon: StoryObj<typeof Tree>;
 export declare const renderRightSection: StoryObj<typeof Tree>;

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

@@ -19,6 +19,10 @@ export interface TreeItemProps extends TreeData {
     showIcon?: boolean;
     showExpandButton?: boolean;
     enableSeparatorLine?: boolean;
+    lineSize?: number;
+    horizontalLineWidth?: number;
+    expandButtonSize?: number;
+    spacing?: number;
     checkIsExpanded: (id: string) => boolean;
     checkIsChecked: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
@@ -49,20 +53,23 @@ export interface TreeItemProps extends TreeData {
         selected: boolean;
     }) => ReactNode;
     classes?: Partial<{
-        elementWrapper: string;
-        branch: string;
-        itemWrapper: string;
-        itemContainer: string;
-        horizontalLine: string;
-        expandButton: string;
-        separatorLine: string;
-        checkbox: string;
-        item: string;
-        title: string;
-        childrenWrapper: string;
+        elementWrapper?: string;
+        branch?: string;
+        itemWrapper?: string;
+        itemContainer?: string;
+        horizontalLine?: string;
+        expandButton?: string;
+        separatorLine?: string;
+        checkbox?: string;
+        item?: string;
+        title?: string;
+        expandedChildrenWrapper?: string;
+        expandedChildrenWrapperInner?: string;
+        rowWrapperClasses?: string;
+        columnWrapperClasses?: string;
     }>;
 }
-export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes"> {
+export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes" | "lineSize" | "horizontalLineWidth" | "expandButtonSize" | "spacing"> {
     data: TreeData[];
     defaultExpandedId?: string[];
     defaultCheckedId?: string[];

package/dist/components/Tree/Tree.js

@@ -1,7 +1,7 @@
 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, renderIcon, renderRightSection, renderElement, renderTitle, onExpandChange, onCheckedChange, defaultExpandAll = false, defaultCheckAll = false, hierarchicalCheck = false, showIcon = true, disabled, enableSeparatorLine = true, }) => {
+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, }) => {
     const [checkedState, setCheckedState] = useState({});
     const [expandedState, setExpandedState] = useState({});
     const traverseTree = (nodes, callback) => {
@@ -13,7 +13,7 @@ const Tree = ({ classes, data, defaultExpandedId = [], defaultCheckedId = [], ch
         });
     };
     useEffect(() => {
-        if (defaultExpandAll) {
+        if (data.length && defaultExpandAll) {
             const allExpanded = {};
             traverseTree(data, (node) => {
                 allExpanded[node.id] = true;
@@ -29,21 +29,23 @@ const Tree = ({ classes, data, defaultExpandedId = [], defaultCheckedId = [], ch
         }
     }, [data, defaultExpandedId, defaultExpandAll]);
     useEffect(() => {
-        if (defaultCheckAll) {
+        var _a;
+        if (data.length && defaultCheckAll) {
             const allChecked = {};
             traverseTree(data, (node) => {
                 allChecked[node.id] = true;
             });
             setCheckedState(allChecked);
         }
-        else if (!checkedId && (defaultCheckedId === null || defaultCheckedId === void 0 ? void 0 : defaultCheckedId.length)) {
+        else if (((_a = Object.keys(checkedState)) === null || _a === void 0 ? void 0 : _a.length) === 0 &&
+            (defaultCheckedId === null || defaultCheckedId === void 0 ? void 0 : defaultCheckedId.length)) {
             const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
                 acc[id] = true;
                 return acc;
             }, {});
             setCheckedState(initialCheckedState);
         }
-    }, [data, defaultCheckedId, checkedId, defaultCheckAll]);
+    }, [data, defaultCheckedId, defaultCheckAll]);
     const handleExpandChange = useCallback((id, expanded) => {
         onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded);
         setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));
@@ -99,6 +101,6 @@ const Tree = ({ classes, data, defaultExpandedId = [], defaultCheckedId = [], ch
             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 }, item), item.id))) }));
+    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))) }));
 };
 export default Tree;