@rovula/ui 0.0.53 → 0.0.55

package/dist/esm/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/esm/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;
@@ -82,7 +83,7 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     checkedId?: string[];
     loadingId?: string[];
     onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedId: string[], uncheckedId: string[], checkedState: Record<string, boolean>) => void;
+    onCheckedChange?: (checkedState: Record<string, boolean>) => void;
     onClickItem?: (id: string) => void;
     onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
@@ -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/index.d.ts

@@ -643,6 +643,7 @@ 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;
@@ -696,7 +697,7 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     checkedId?: string[];
     loadingId?: string[];
     onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (checkedId: string[], uncheckedId: string[], checkedState: Record<string, boolean>) => void;
+    onCheckedChange?: (checkedState: Record<string, boolean>) => void;
     onClickItem?: (id: string) => void;
     onCheckedItem?: (id: string, checked: boolean) => void;
     defaultExpandAll?: boolean;
@@ -704,6 +705,8 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     hierarchicalCheck?: boolean;
     checkable?: boolean;
     maxLevel?: number;
+    mode: "checkbox" | "radio";
+    autoDisabled?: boolean;
 }
 
 declare const Tree: FC<TreeProps>;

package/dist/src/theme/global.css

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

package/package.json

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

package/src/components/Tree/Tree.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Tree from "./Tree";
-import { ActionButton, Icon } from "@/index";
+import { ActionButton, Button, Icon } from "@/index";
 import {
   exampleData,
   exampleData2,
@@ -107,16 +107,11 @@ export const Controller: StoryObj<typeof Tree> = {
           defaultExpandAll
           defaultCheckedId={checkedId}
           checkedId={checkedId}
-          onCheckedChange={(ids: string[]) => {
-            setSelectedSectionList(
-              Object.keys(selectedSectionList).reduce(
-                (prev, id) => ({
-                  ...prev,
-                  [id]: ids.includes(id),
-                }),
-                {}
-              )
-            );
+          onCheckedChange={(ids) => {
+            setSelectedSectionList((prev) => ({
+              ...prev,
+              ...ids,
+            }));
           }}
         />
       </div>
@@ -387,3 +382,31 @@ export const HideCheckboxMode: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const RadioMode: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    mode: "radio",
+    autoDisabled: true,
+  },
+  render: (args) => {
+    const [checkedId, onCheckedId] = useState<string[]>(["1"]);
+
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div>
+          <Button variant="outline" onClick={() => onCheckedId([])}>
+            Clear
+          </Button>
+        </div>
+        <Tree
+          {...args}
+          checkedId={checkedId}
+          onCheckedChange={(state) => {
+            onCheckedId(Object.keys(state).filter((key) => state?.[key]));
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -30,6 +30,8 @@ const Tree: FC<TreeProps> = ({
   enableSeparatorLine = true,
   checkable = true,
   maxLevel,
+  mode,
+  autoDisabled = false,
 }) => {
   const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
   const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
@@ -83,6 +85,14 @@ const Tree: FC<TreeProps> = ({
     }
   }, [data, defaultCheckedId, defaultCheckAll]);
 
+  useEffect(() => {
+    if (checkedId !== undefined) {
+      setCheckedState(
+        checkedId.reduce((prev, cur) => ({ ...prev, [cur]: true }), {})
+      );
+    }
+  }, [checkedId]);
+
   const handleExpandChange = useCallback(
     (id: string, expanded: boolean) => {
       onExpandChange?.(id, expanded);
@@ -93,6 +103,15 @@ const Tree: FC<TreeProps> = ({
 
   const handleCheckedChange = useCallback(
     (id: string, checked: boolean) => {
+      if (mode === "radio") {
+        let newState = { [id]: checked };
+
+        onCheckedItem?.(id, checked);
+        setCheckedState(newState);
+        onCheckedChange?.(newState);
+
+        return;
+      }
       onCheckedItem?.(id, checked);
       let newState = { ...checkedState, [id]: checked };
 
@@ -144,15 +163,18 @@ const Tree: FC<TreeProps> = ({
       setCheckedState(newState);
 
       if (onCheckedChange) {
-        const checkedIds = Object.keys(newState).filter((key) => newState[key]);
-        const uncheckedIds = Object.keys(newState).filter(
-          (key) => !newState[key]
-        );
-
-        onCheckedChange?.(checkedIds, uncheckedIds, newState);
+        onCheckedChange?.(newState);
       }
     },
-    [checkedState, data, onCheckedChange, hierarchicalCheck, onCheckedItem]
+    [
+      checkedState,
+      data,
+      onCheckedChange,
+      hierarchicalCheck,
+      onCheckedItem,
+      mode,
+      autoDisabled,
+    ]
   );
 
   const checkIsExpanded = useCallback(
@@ -179,6 +201,17 @@ const Tree: FC<TreeProps> = ({
     [loadingId]
   );
 
+  const checkAutoDisabled = useCallback(
+    (id: string) => {
+      if (autoDisabled && Object.values(checkedState).filter(Boolean).length) {
+        return (!checkedState?.[id] || disabled) ?? false;
+      }
+
+      return false;
+    },
+    [checkedState, disabled, autoDisabled]
+  );
+
   return (
     <div className={cn("w-full", classes?.container)}>
       {data.map((item, idx) => (
@@ -191,13 +224,14 @@ const Tree: FC<TreeProps> = ({
           checkIsChecked={checkIsChecked}
           onExpandChange={handleExpandChange}
           onCheckedChange={handleCheckedChange}
+          checkAutoDisabled={checkAutoDisabled}
           checkIsLoading={checkIsLoading}
           renderIcon={renderIcon}
           renderElement={renderElement}
           renderTitle={renderTitle}
           renderRightSection={renderRightSection}
           enableSeparatorLine={enableSeparatorLine}
-          disabled={disabled}
+          disabled={checkAutoDisabled(item.id)}
           showIcon={showIcon}
           lineSize={lineSize}
           horizontalLineWidth={horizontalLineWidth}

package/src/components/Tree/TreeItem.tsx

@@ -20,6 +20,7 @@ const TreeItem: FC<TreeItemProps> = ({
   checkable,
   checkIsExpanded,
   checkIsChecked,
+  checkAutoDisabled,
   checkIsLoading,
   onExpandChange,
   onCheckedChange,
@@ -109,7 +110,7 @@ const TreeItem: FC<TreeItemProps> = ({
   const defaultIcon = (
     <Icon
       name={isExpanded ? "folder-open" : "folder"}
-      className="fill-warning"
+      className="fill-warning size-[18px]"
     />
   );
 
@@ -213,7 +214,7 @@ const TreeItem: FC<TreeItemProps> = ({
             {shouldShowCheckbox ? (
               <Checkbox
                 id={id}
-                className={cn("size-[16pt]", classes?.checkbox)}
+                className={cn("size-[16px]", classes?.checkbox)}
                 checked={isChecked}
                 disabled={disabled}
                 onCheckedChange={(newChecked) =>
@@ -224,7 +225,7 @@ const TreeItem: FC<TreeItemProps> = ({
               <div
                 className={
                   isFirstLevel && checkable
-                    ? cn("size-[16pt]", classes?.checkbox)
+                    ? cn("size-[16px]", classes?.checkbox)
                     : ""
                 }
               />
@@ -280,13 +281,14 @@ const TreeItem: FC<TreeItemProps> = ({
                   isLastItem={idx === children.length - 1}
                   checkIsExpanded={checkIsExpanded}
                   checkIsChecked={checkIsChecked}
+                  checkAutoDisabled={checkAutoDisabled}
                   checkIsLoading={checkIsLoading}
                   onExpandChange={onExpandChange}
                   onCheckedChange={onCheckedChange}
                   renderIcon={renderIcon}
                   renderElement={renderElement}
                   renderTitle={renderTitle}
-                  disabled={disabled}
+                  disabled={checkAutoDisabled(child.id)}
                   showIcon={showIcon}
                   lineSize={lineSize}
                   horizontalLineWidth={horizontalLineWidth}

package/src/components/Tree/type.ts

@@ -31,6 +31,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;
@@ -100,11 +101,7 @@ export interface TreeProps
   checkedId?: string[];
   loadingId?: string[];
   onExpandChange?: (id: string, expanded: boolean) => void;
-  onCheckedChange?: (
-    checkedId: string[],
-    uncheckedId: string[],
-    checkedState: Record<string, boolean>
-  ) => void;
+  onCheckedChange?: (checkedState: Record<string, boolean>) => void;
   onClickItem?: (id: string) => void;
   onCheckedItem?: (id: string, checked: boolean) => void;
   defaultExpandAll?: boolean;
@@ -112,4 +109,7 @@ export interface TreeProps
   hierarchicalCheck?: boolean;
   checkable?: boolean;
   maxLevel?: number;
+  mode: "checkbox" | "radio";
+  // Only radio mode
+  autoDisabled?: boolean;
 }