@rovula/ui 0.0.48 → 0.0.50

package/dist/components/Tree/TreeItem.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 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]);
+    const hasChildren = useMemo(() => !!(children === null || children === void 0 ? void 0 : children.length), [children]);
+    const shouldExpandButton = useMemo(() => (showExpandButton !== undefined ? showExpandButton : hasChildren), [hasChildren, showExpandButton]);
+    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 = {
+        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,
+        },
+    };
+    useEffect(() => {
+        if (isExpanded && !isLoading && !hasChildren) {
+            handleExpandToggle();
+        }
+    }, [isLoading, handleExpandToggle]);
+    const handleOnClickItem = useCallback(() => {
+        onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(id);
+    }, [onClickItem, id]);
+    const defaultIcon = (_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning" }));
+    const customIcon = icon !== null && icon !== void 0 ? icon : renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon({
+        id,
+        expanded: isExpanded,
+        selected: isChecked,
+    });
+    const rightIcon = renderRightSection === null || renderRightSection === void 0 ? void 0 : renderRightSection({
+        id,
+        expanded: isExpanded,
+        selected: isChecked,
+    });
+    const titleContent = renderTitle
+        ? renderTitle({ id, title, expanded: isExpanded, selected: isChecked })
+        : title;
+    const elementWrapper = (content) => renderElement
+        ? renderElement({
+            id,
+            expanded: isExpanded,
+            selected: isChecked,
+            children: content,
+            styles,
+            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) }))] })] }));
+};
+export default TreeItem;

package/dist/components/Tree/index.js

@@ -0,0 +1,4 @@
+import Tree from "./Tree";
+import TreeItem from "./TreeItem";
+export * from "./type";
+export { Tree, TreeItem };

package/dist/components/Tree/type.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/bundle.css

@@ -796,9 +796,6 @@ input[type=number] {
   width: 100%;
   height: 100%;
 }
-.h-1\/2{
-  height: 50%;
-}
 .h-10{
   height: 2.5rem;
 }
@@ -829,6 +826,9 @@ input[type=number] {
 .h-\[24px\]{
   height: 24px;
 }
+.h-\[2px\]{
+  height: 2px;
+}
 .h-\[32px\]{
   height: 32px;
 }
@@ -2717,6 +2717,9 @@ input[type=number] {
 .fill-error{
   fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
 }
+.fill-info{
+  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
+}
 .fill-inherit{
   fill: inherit;
 }
@@ -2735,6 +2738,9 @@ input[type=number] {
 .fill-primary-default{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
+.fill-secondary{
+  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
+}
 .fill-warning{
   fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
 }