@rovula/ui 0.0.50 → 0.0.52

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,24 @@ 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;
+        container?: 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,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, 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, defaultExpandAll = false, defaultCheckAll = false, hierarchicalCheck = false, showIcon = true, disabled, enableSeparatorLine = true, }) => {
     const [checkedState, setCheckedState] = useState({});
     const [expandedState, setExpandedState] = useState({});
     const traverseTree = (nodes, callback) => {
@@ -101,6 +102,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 }, 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 }, item), item.id))) }));
 };
 export default Tree;

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

@@ -5,7 +5,7 @@ import { ActionButton, Icon } from "@/index";
 const exampleData = [
     {
         id: "1",
-        title: "Parent Folder 1",
+        title: "Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1",
         children: [
             {
                 id: "1.1",

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, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, }) => {
+const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, }) => {
     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]);
@@ -12,26 +12,17 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
     const handleExpandToggle = useCallback(() => {
         onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
     }, [id, isExpanded, onExpandChange]);
-    // TODO move to props
-    const lineSize = 2;
-    const horizontalLineWidth = 4;
-    const expandButtonSize = 30;
-    const spacing = 2;
-    const styles = {
+    const styles = useMemo(() => ({
         branch: {
-            height: isLastItem && !(isExpanded && hasChildren)
-                ? `calc(50% + ${lineSize}px)`
-                : `calc(100% + ${lineSize}px)`,
             width: lineSize,
-            marginTop: -lineSize,
-            borderBottomLeftRadius: lineSize / 2,
+            borderBottomLeftRadius: isLastItem ? lineSize / 2 : 0,
         },
         horizontalLine: {
             height: lineSize,
             width: lineSize +
                 horizontalLineWidth +
                 (shouldExpandButton ? 0 : expandButtonSize + spacing),
-            marginLeft: -lineSize + 0.1,
+            marginLeft: -lineSize,
             borderBottomLeftRadius: lineSize / 2,
         },
         expandButton: {
@@ -43,7 +34,15 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
                 ? expandButtonSize / 2 - lineSize / 2
                 : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
         },
-    };
+    }), [
+        lineSize,
+        horizontalLineWidth,
+        expandButtonSize,
+        spacing,
+        isFirstLevel,
+        isLastItem,
+        shouldExpandButton,
+    ]);
     useEffect(() => {
         if (isExpanded && !isLoading && !hasChildren) {
             handleExpandToggle();
@@ -76,6 +75,8 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
             onClick: handleOnClickItem,
         })
         : content;
-    return elementWrapper(_jsxs("div", { className: cn("flex flex-row w-full ", classes === null || classes === void 0 ? void 0 : classes.elementWrapper), children: [_jsx("div", { className: cn("bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch }), _jsxs("div", { className: cn("flex flex-col w-full", classes === null || classes === void 0 ? void 0 : classes.itemWrapper), children: [_jsxs("div", { className: cn("flex 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" })) }) })), _jsx(Checkbox, { id: id, className: cn("size-[16pt]", 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) }), _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 && (_jsx("div", { className: cn("flex flex-col", classes === null || classes === void 0 ? void 0 : classes.childrenWrapper), 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, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: disabled, showIcon: showIcon }, 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) }))] })] }));
+    return elementWrapper(_jsx("div", { className: cn("flex flex-row w-full", classes === null || classes === void 0 ? void 0 : classes.elementWrapper), children: _jsxs("div", { className: cn("flex flex-col w-full", classes === null || classes === void 0 ? void 0 : classes.itemWrapper), children: [_jsxs("div", { className: cn("flex flex-row flex-1", classes === null || classes === void 0 ? void 0 : classes.rowWrapperClasses), children: [_jsxs("div", { className: cn("flex flex-col h-full", classes === null || classes === void 0 ? void 0 : classes.columnWrapperClasses), children: [!isFirstLevel && (_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 })), !isFirstLevel &&
+                                    !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" })) }) })), _jsx(Checkbox, { id: id, className: cn("size-[16pt]", 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) }), _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 && (_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, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: disabled, showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing }, 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;

package/dist/esm/bundle.css

@@ -1,7 +1,6 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
-@import "./themes/SKL/baseline.css";
 
 /*
 ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
@@ -796,6 +795,9 @@ input[type=number] {
   width: 100%;
   height: 100%;
 }
+.h-1\/2{
+  height: 50%;
+}
 .h-10{
   height: 2.5rem;
 }
@@ -905,6 +907,9 @@ input[type=number] {
 .w-\[24px\]{
   width: 24px;
 }
+.w-\[2px\]{
+  width: 2px;
+}
 .w-\[32px\]{
   width: 32px;
 }