@rovula/ui 0.0.56 → 0.0.58

package/dist/cjs/types/components/Tabs/Tabs.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import "./Tabs.css";
 type Tab = {
+    id?: string;
     label: string;
     startTabContent?: React.ReactElement;
     endTabContent?: React.ReactElement;

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

@@ -3,6 +3,7 @@ declare const meta: {
     title: string;
     component: React.FC<{
         tabs: {
+            id?: string | undefined;
             label: string;
             startTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             endTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
@@ -38,6 +39,7 @@ declare const meta: {
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         tabs: {
+            id?: string | undefined;
             label: string;
             startTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
             endTabContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;

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

@@ -83,7 +83,7 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     checkedId?: string[];
     loadingId?: string[];
     onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedState: Record<string, boolean>) => void;
+    onCheckedChange?: (checkedState: Record<string, boolean>, id?: string) => void;
     onClickItem?: (id: string) => void;
     onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
@@ -91,6 +91,6 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     hierarchicalCheck?: boolean;
     checkable?: boolean;
     maxLevel?: number;
-    mode: "checkbox" | "radio";
+    mode?: "checkbox" | "radio";
     autoDisabled?: boolean;
 }

package/dist/components/Tabs/Tabs.js

@@ -77,6 +77,6 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                                         onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
                                     }, children: [(keepIconSpace || tab.startTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.isLoading ? _jsx(Loading, {}) : tab.startTabContent })), tab.label, (keepIconSpace || tab.endTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.endTabContent }))] }, index))), _jsx("div", { className: cn(`absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`, {
                                         "bg-state-disable-solid": disabled,
-                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content })] }));
+                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: _jsx("div", { children: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content }, tabs[activeTab].label + tabs[activeTab].id) })] }));
 };
 export default Tabs;

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, mode, autoDisabled = false, }) => {
+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 = "checkbox", autoDisabled = false, }) => {
     const [checkedState, setCheckedState] = useState({});
     const [expandedState, setExpandedState] = useState({});
     const traverseTree = (nodes, callback) => {
@@ -52,6 +52,30 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             setCheckedState(checkedId.reduce((prev, cur) => (Object.assign(Object.assign({}, prev), { [cur]: true })), {}));
         }
     }, [checkedId]);
+    useEffect(() => {
+        if (!hierarchicalCheck) {
+            return;
+        }
+        const state = {};
+        const updateChildren = (parentId, isChecked) => {
+            traverseTree(data, (node) => {
+                if (node.id === parentId && node.children) {
+                    node.children.forEach((child) => {
+                        state[child.id] = isChecked;
+                        updateChildren(child.id, isChecked);
+                    });
+                }
+            });
+        };
+        setCheckedState((prev) => {
+            Object.keys(prev)
+                .filter((key) => prev[key])
+                .map((id) => {
+                updateChildren(id, true);
+            });
+            return Object.assign(Object.assign({}, prev), state);
+        });
+    }, [data, hierarchicalCheck]);
     const handleExpandChange = useCallback((id, expanded) => {
         onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded);
         setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));
@@ -61,7 +85,7 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             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);
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState, id);
             return;
         }
         onCheckedItem === null || onCheckedItem === void 0 ? void 0 : onCheckedItem(id, checked);
@@ -99,7 +123,7 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
         }
         setCheckedState(newState);
         if (onCheckedChange) {
-            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState);
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState, id);
         }
     }, [
         checkedState,

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

@@ -168,7 +168,7 @@ export const ExpandLoadData = {
                 }, 1500);
             }
         };
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { data: data, loadingId: loadingId, onExpandChange: handleOnExpandChange })) }));
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { data: data, loadingId: loadingId, hierarchicalCheck: true, onExpandChange: handleOnExpandChange })) }));
     },
 };
 export const MaximumLevel = {

package/dist/components/Tree/TreeItem.js

@@ -85,6 +85,6 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf =
                                     !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-[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) }))] }) }));
+                                        : "" })), _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", 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", 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;