@rovula/ui 0.0.50 → 0.0.51

package/dist/esm/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/index.d.ts

@@ -621,6 +621,10 @@ 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;
@@ -651,20 +655,23 @@ 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;
     }>;
 }
-interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes"> {
+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/src/theme/global.css

@@ -3667,6 +3667,10 @@ input[type=number] {
   height: 100%;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -3812,6 +3816,10 @@ input[type=number] {
   width: 24px;
 }
 
+.w-\[2px\] {
+  width: 2px;
+}
+
 .w-\[32px\] {
   width: 32px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Tree/Tree.tsx

@@ -9,6 +9,10 @@ const Tree: FC<TreeProps> = ({
   defaultCheckedId,
   checkedId,
   loadingId,
+  lineSize,
+  horizontalLineWidth,
+  expandButtonSize,
+  spacing,
   renderIcon,
   renderRightSection,
   renderElement,
@@ -185,6 +189,10 @@ const Tree: FC<TreeProps> = ({
           enableSeparatorLine={enableSeparatorLine}
           disabled={disabled}
           showIcon={showIcon}
+          lineSize={lineSize}
+          horizontalLineWidth={horizontalLineWidth}
+          expandButtonSize={expandButtonSize}
+          spacing={spacing}
           {...item}
         />
       ))}

package/src/components/Tree/TreeItem.tsx

@@ -26,6 +26,10 @@ const TreeItem: FC<TreeItemProps> = ({
   renderElement,
   renderTitle,
   renderRightSection,
+  lineSize = 2,
+  horizontalLineWidth = 4,
+  expandButtonSize = 30,
+  spacing = 2,
 }) => {
   const isLoading = useMemo(() => checkIsLoading?.(id), [checkIsLoading, id]);
   const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
@@ -40,41 +44,41 @@ const TreeItem: FC<TreeItemProps> = ({
     onExpandChange?.(id, !isExpanded);
   }, [id, isExpanded, onExpandChange]);
 
-  // TODO move to props
-  const lineSize = 2;
-  const horizontalLineWidth = 4;
-  const expandButtonSize = 30;
-  const spacing = 2;
-
-  const styles = {
-    branch: {
-      height:
-        isLastItem && !(isExpanded && hasChildren)
-          ? `calc(50% + ${lineSize}px)`
-          : `calc(100% + ${lineSize}px)`,
-      width: lineSize,
-      marginTop: -lineSize,
-      borderBottomLeftRadius: lineSize / 2,
-    },
-    horizontalLine: {
-      height: lineSize,
-      width:
-        lineSize +
-        horizontalLineWidth +
-        (shouldExpandButton ? 0 : expandButtonSize + spacing),
-      marginLeft: -lineSize + 0.1,
-      borderBottomLeftRadius: lineSize / 2,
-    },
-    expandButton: {
-      width: expandButtonSize,
-      height: expandButtonSize,
-    },
-    childPadding: {
-      paddingLeft: isFirstLevel
-        ? expandButtonSize / 2 - lineSize / 2
-        : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
-    },
-  };
+  const styles = useMemo(
+    () => ({
+      branch: {
+        width: lineSize,
+        borderBottomLeftRadius: isLastItem ? lineSize / 2 : 0,
+      },
+      horizontalLine: {
+        height: lineSize,
+        width:
+          lineSize +
+          horizontalLineWidth +
+          (shouldExpandButton ? 0 : expandButtonSize + spacing),
+        marginLeft: -lineSize,
+        borderBottomLeftRadius: lineSize / 2,
+      },
+      expandButton: {
+        width: expandButtonSize,
+        height: expandButtonSize,
+      },
+      childPadding: {
+        paddingLeft: isFirstLevel
+          ? expandButtonSize / 2 - lineSize / 2
+          : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
+      },
+    }),
+    [
+      lineSize,
+      horizontalLineWidth,
+      expandButtonSize,
+      spacing,
+      isFirstLevel,
+      isLastItem,
+      shouldExpandButton,
+    ]
+  );
 
   useEffect(() => {
     if (isExpanded && !isLoading && !hasChildren) {
@@ -124,96 +128,148 @@ const TreeItem: FC<TreeItemProps> = ({
       : content;
 
   return elementWrapper(
-    <div className={cn("flex flex-row w-full ", classes?.elementWrapper)}>
-      <div
-        className={cn("bg-grey-150", classes?.branch)}
-        style={styles.branch}
-      />
+    <div className={cn("flex flex-row w-full", classes?.elementWrapper)}>
       <div className={cn("flex flex-col w-full", classes?.itemWrapper)}>
-        <div
-          className={cn(
-            "flex items-center py-2 min-h-10",
-            classes?.itemContainer
-          )}
-        >
-          {!isFirstLevel && (
-            <div
-              className={cn("bg-grey-150", classes?.horizontalLine)}
-              style={styles.horizontalLine}
-            />
-          )}
-          {isFirstLevel && !shouldExpandButton && (
-            <div
-              className={cn("flex mr-[2px]", classes?.expandButton)}
-              style={styles.expandButton}
-            />
-          )}
-          {shouldExpandButton && (
-            <div
-              className={cn("flex mr-[2px]", classes?.expandButton)}
-              style={styles.expandButton}
-              onClick={!isLoading && handleExpandToggle}
-            >
-              <ActionButton variant="icon" size="sm">
-                {isLoading ? (
-                  <Loading />
-                ) : (
-                  <Icon name={isExpanded ? "chevron-down" : "chevron-right"} />
+        <div className={cn("flex flex-row flex-1", classes?.rowWrapperClasses)}>
+          <div
+            className={cn(
+              "flex flex-col h-full",
+              classes?.columnWrapperClasses
+            )}
+          >
+            {!isFirstLevel && (
+              <div
+                className={cn(
+                  "flex w-[2px] h-1/2 bg-grey-150",
+                  classes?.branch
                 )}
-              </ActionButton>
-            </div>
-          )}
-          <Checkbox
-            id={id}
-            className={cn("size-[16pt]", classes?.checkbox)}
-            checked={isChecked}
-            disabled={disabled}
-            onCheckedChange={(newChecked) =>
-              onCheckedChange?.(id, newChecked as boolean)
-            }
-          />
+                style={styles.branch}
+              />
+            )}
+            {!isFirstLevel &&
+              !isLastItem &&
+              ((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (
+                <div
+                  className={cn(
+                    "flex w-[2px] h-1/2 bg-grey-150",
+                    classes?.branch
+                  )}
+                  style={styles.branch}
+                />
+              )}
+          </div>
+
           <div
             className={cn(
-              "ml-2 gap-1 flex flex-1 items-center text-foreground",
-              classes?.item
+              "flex flex-1 items-center py-2 min-h-10",
+              classes?.itemContainer
             )}
-            onClick={handleOnClickItem}
           >
-            {showIcon ? customIcon || defaultIcon : null}
+            {!isFirstLevel && (
+              <div
+                className={cn("bg-grey-150", classes?.horizontalLine)}
+                style={styles.horizontalLine}
+              />
+            )}
+            {isFirstLevel && !shouldExpandButton && (
+              <div
+                className={cn("flex mr-[2px]", classes?.expandButton)}
+                style={styles.expandButton}
+              />
+            )}
+            {shouldExpandButton && (
+              <div
+                className={cn("flex mr-[2px]", classes?.expandButton)}
+                style={styles.expandButton}
+                onClick={!isLoading && handleExpandToggle}
+              >
+                <ActionButton variant="icon" size="sm">
+                  {isLoading ? (
+                    <Loading />
+                  ) : (
+                    <Icon
+                      name={isExpanded ? "chevron-down" : "chevron-right"}
+                    />
+                  )}
+                </ActionButton>
+              </div>
+            )}
+            <Checkbox
+              id={id}
+              className={cn("size-[16pt]", classes?.checkbox)}
+              checked={isChecked}
+              disabled={disabled}
+              onCheckedChange={(newChecked) =>
+                onCheckedChange?.(id, newChecked as boolean)
+              }
+            />
             <div
               className={cn(
-                "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
-                classes?.title
+                "ml-2 gap-1 flex flex-1 items-center text-foreground",
+                classes?.item
               )}
+              onClick={handleOnClickItem}
             >
-              {titleContent}
+              {showIcon ? customIcon || defaultIcon : null}
+              <div
+                className={cn(
+                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
+                  classes?.title
+                )}
+              >
+                {titleContent}
+              </div>
             </div>
+            {rightIcon}
           </div>
-          {rightIcon}
         </div>
+
         {isExpanded && hasChildren && (
           <div
-            className={cn("flex flex-col", classes?.childrenWrapper)}
-            style={styles.childPadding}
+            className={cn(
+              "flex flex-row overflow-hidden max-h-screen",
+              classes?.expandedChildrenWrapper
+            )}
           >
-            {children?.map((child, idx) => (
-              <TreeItem
-                key={child.id}
-                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}
+            {!isFirstLevel && !isLastItem && (
+              <div
+                className={cn(
+                  "flex w-[2px] h-full bg-grey-150",
+                  classes?.branch
+                )}
+                style={styles.branch}
               />
-            ))}
+            )}
+            <div
+              className={cn(
+                "flex flex-col overflow-hidden max-h-screen",
+                classes?.expandedChildrenWrapperInner
+              )}
+              style={styles.childPadding}
+            >
+              {children?.map((child, idx) => (
+                <TreeItem
+                  key={child.id}
+                  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}
+                />
+              ))}
+            </div>
           </div>
         )}
         {enableSeparatorLine && isFirstLevel && !isLastItem && (

package/src/components/Tree/type.ts

@@ -21,6 +21,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;
@@ -51,17 +55,20 @@ 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;
   }>;
 }
 
@@ -76,6 +83,10 @@ export interface TreeProps
     | "disabled"
     | "enableSeparatorLine"
     | "classes"
+    | "lineSize"
+    | "horizontalLineWidth"
+    | "expandButtonSize"
+    | "spacing"
   > {
   data: TreeData[];
   defaultExpandedId?: string[];