@rovula/ui 0.0.54 → 0.0.55

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

@@ -14,3 +14,4 @@ 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>;
+export declare const RadioMode: StoryObj<typeof Tree>;

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

@@ -29,6 +29,7 @@ export interface TreeItemProps extends TreeData {
     maxLevel?: number;
     checkIsExpanded: (id: string) => boolean;
     checkIsChecked: (id: string) => boolean;
+    checkAutoDisabled: (id: string) => boolean;
     checkIsLoading?: (id: string) => void;
     onExpandChange?: (id: string, expanded: boolean) => void;
     onCheckedChange?: (id: string, checked: boolean) => void;
@@ -90,4 +91,6 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     hierarchicalCheck?: boolean;
     checkable?: boolean;
     maxLevel?: number;
+    mode: "checkbox" | "radio";
+    autoDisabled?: boolean;
 }

package/dist/components/Tree/Tree.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import TreeItem from "./TreeItem";
 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 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, mode, autoDisabled = false, }) => {
     const [checkedState, setCheckedState] = useState({});
     const [expandedState, setExpandedState] = useState({});
     const traverseTree = (nodes, callback) => {
@@ -47,11 +47,23 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             setCheckedState(initialCheckedState);
         }
     }, [data, defaultCheckedId, defaultCheckAll]);
+    useEffect(() => {
+        if (checkedId !== undefined) {
+            setCheckedState(checkedId.reduce((prev, cur) => (Object.assign(Object.assign({}, prev), { [cur]: true })), {}));
+        }
+    }, [checkedId]);
     const handleExpandChange = useCallback((id, expanded) => {
         onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded);
         setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));
     }, [onExpandChange]);
     const handleCheckedChange = useCallback((id, checked) => {
+        if (mode === "radio") {
+            let newState = { [id]: checked };
+            onCheckedItem === null || onCheckedItem === void 0 ? void 0 : onCheckedItem(id, checked);
+            setCheckedState(newState);
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState);
+            return;
+        }
         onCheckedItem === null || onCheckedItem === void 0 ? void 0 : onCheckedItem(id, checked);
         let newState = Object.assign(Object.assign({}, checkedState), { [id]: checked });
         if (hierarchicalCheck) {
@@ -89,7 +101,15 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
         if (onCheckedChange) {
             onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState);
         }
-    }, [checkedState, data, onCheckedChange, hierarchicalCheck, onCheckedItem]);
+    }, [
+        checkedState,
+        data,
+        onCheckedChange,
+        hierarchicalCheck,
+        onCheckedItem,
+        mode,
+        autoDisabled,
+    ]);
     const checkIsExpanded = useCallback((id) => !!expandedState[id], [expandedState]);
     const checkIsChecked = useCallback((id) => {
         if (checkedId) {
@@ -102,6 +122,13 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             return loadingId.includes(id);
         }
     }, [loadingId]);
-    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))) }));
+    const checkAutoDisabled = useCallback((id) => {
+        var _a;
+        if (autoDisabled && Object.values(checkedState).filter(Boolean).length) {
+            return (_a = (!(checkedState === null || checkedState === void 0 ? void 0 : checkedState[id]) || disabled)) !== null && _a !== void 0 ? _a : false;
+        }
+        return false;
+    }, [checkedState, disabled, autoDisabled]);
+    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, checkAutoDisabled: checkAutoDisabled, checkIsLoading: checkIsLoading, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, renderRightSection: renderRightSection, enableSeparatorLine: enableSeparatorLine, disabled: checkAutoDisabled(item.id), showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing, notifyClickItem: onClickItem, maxLevel: maxLevel, currentLevel: 1, checkable: checkable }, item), item.id))) }));
 };
 export default Tree;

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

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import Tree from "./Tree";
-import { ActionButton, Icon } from "@/index";
+import { ActionButton, Button, Icon } from "@/index";
 import { exampleData, exampleData2, exampleLeafData, sections, } from "./example-data";
 const commonProps = {
     defaultExpandedId: ["1", "1.1"],
@@ -197,3 +197,16 @@ export const HideCheckboxMode = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args)) }));
     },
 };
+export const RadioMode = {
+    args: {
+        data: exampleData,
+        mode: "radio",
+        autoDisabled: true,
+    },
+    render: (args) => {
+        const [checkedId, onCheckedId] = useState(["1"]);
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsx("div", { children: _jsx(Button, { variant: "outline", onClick: () => onCheckedId([]), children: "Clear" }) }), _jsx(Tree, Object.assign({}, args, { checkedId: checkedId, onCheckedChange: (state) => {
+                        onCheckedId(Object.keys(state).filter((key) => state === null || state === void 0 ? void 0 : state[key]));
+                    } }))] }));
+    },
+};

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, isLeaf = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkable, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, currentLevel = 1, maxLevel = 10, notifyClickItem, }) => {
+const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkable, checkIsExpanded, checkIsChecked, checkAutoDisabled, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, currentLevel = 1, maxLevel = 10, notifyClickItem, }) => {
     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]);
@@ -57,7 +57,7 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf =
         onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(id);
         notifyClickItem === null || notifyClickItem === void 0 ? void 0 : notifyClickItem(id);
     }, [onClickItem, notifyClickItem, id]);
-    const defaultIcon = (_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning" }));
+    const defaultIcon = (_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning size-[18px]" }));
     const customIcon = icon !== null && icon !== void 0 ? icon : renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon({
         id,
         expanded: isExpanded,
@@ -83,8 +83,8 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf =
         : content;
     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" })) }) })), shouldShowCheckbox ? (_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) })) : (_jsx("div", { className: isFirstLevel && checkable
-                                        ? cn("size-[16pt]", classes === null || classes === void 0 ? void 0 : classes.checkbox)
-                                        : "" })), _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 && currentLevel < (maxLevel || Infinity) && (_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, notifyClickItem: notifyClickItem, maxLevel: maxLevel, currentLevel: currentLevel + 1, checkable: checkable }, 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) }))] }) }));
+                                    ((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" })) }) })), shouldShowCheckbox ? (_jsx(Checkbox, { id: id, className: cn("size-[16px]", 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) })) : (_jsx("div", { className: isFirstLevel && checkable
+                                        ? cn("size-[16px]", classes === null || classes === void 0 ? void 0 : classes.checkbox)
+                                        : "" })), _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 && currentLevel < (maxLevel || Infinity) && (_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, checkAutoDisabled: checkAutoDisabled, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: checkAutoDisabled(child.id), showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing, notifyClickItem: notifyClickItem, maxLevel: maxLevel, currentLevel: currentLevel + 1, checkable: checkable }, 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

@@ -783,9 +783,13 @@ input[type=number] {
   width: 14px;
   height: 14px;
 }
-.size-\[16pt\]{
-  width: 16pt;
-  height: 16pt;
+.size-\[16px\]{
+  width: 16px;
+  height: 16px;
+}
+.size-\[18px\]{
+  width: 18px;
+  height: 18px;
 }
 .size-\[30px\]{
   width: 30px;