@rovula/ui 0.0.56 → 0.0.58

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

@@ -106,6 +106,7 @@ type TextProps = {
 declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<unknown>>;
 
 type Tab = {
+    id?: string;
     label: string;
     startTabContent?: React__default.ReactElement;
     endTabContent?: React__default.ReactElement;
@@ -698,7 +699,7 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     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;
@@ -706,7 +707,7 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     hierarchicalCheck?: boolean;
     checkable?: boolean;
     maxLevel?: number;
-    mode: "checkbox" | "radio";
+    mode?: "checkbox" | "radio";
     autoDisabled?: boolean;
 }
 

package/package.json

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

package/src/components/Tabs/Tabs.tsx

@@ -6,6 +6,7 @@ import Icon from "../Icon/Icon";
 import { Loading } from "@/index";
 
 type Tab = {
+  id?: string;
   label: string;
   startTabContent?: React.ReactElement;
   endTabContent?: React.ReactElement;
@@ -232,7 +233,9 @@ const Tabs: React.FC<TabsProps> = ({
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}
       >
-        {tabs[activeTab]?.content}
+        <div key={tabs[activeTab].label + tabs[activeTab].id}>
+          {tabs[activeTab]?.content}
+        </div>
       </div>
     </div>
   );

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

@@ -335,6 +335,7 @@ export const ExpandLoadData: StoryObj<typeof Tree> = {
           {...args}
           data={data}
           loadingId={loadingId}
+          hierarchicalCheck
           onExpandChange={handleOnExpandChange}
         />
       </div>

package/src/components/Tree/Tree.tsx

@@ -30,7 +30,7 @@ const Tree: FC<TreeProps> = ({
   enableSeparatorLine = true,
   checkable = true,
   maxLevel,
-  mode,
+  mode = "checkbox",
   autoDisabled = false,
 }) => {
   const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
@@ -93,6 +93,37 @@ const Tree: FC<TreeProps> = ({
     }
   }, [checkedId]);
 
+  useEffect(() => {
+    if (!hierarchicalCheck) {
+      return;
+    }
+
+    const state: Record<string, boolean> = {};
+    const updateChildren = (parentId: string, isChecked: boolean) => {
+      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 {
+        ...prev,
+        ...state,
+      };
+    });
+  }, [data, hierarchicalCheck]);
+
   const handleExpandChange = useCallback(
     (id: string, expanded: boolean) => {
       onExpandChange?.(id, expanded);
@@ -108,7 +139,7 @@ const Tree: FC<TreeProps> = ({
 
         onCheckedItem?.(id, checked);
         setCheckedState(newState);
-        onCheckedChange?.(newState);
+        onCheckedChange?.(newState, id);
 
         return;
       }
@@ -163,7 +194,7 @@ const Tree: FC<TreeProps> = ({
       setCheckedState(newState);
 
       if (onCheckedChange) {
-        onCheckedChange?.(newState);
+        onCheckedChange?.(newState, id);
       }
     },
     [

package/src/components/Tree/TreeItem.tsx

@@ -254,7 +254,7 @@ const TreeItem: FC<TreeItemProps> = ({
         {isExpanded && hasChildren && currentLevel < (maxLevel || Infinity) && (
           <div
             className={cn(
-              "flex flex-row overflow-hidden max-h-screen",
+              "flex flex-row overflow-hidden",
               classes?.expandedChildrenWrapper
             )}
           >
@@ -269,7 +269,7 @@ const TreeItem: FC<TreeItemProps> = ({
             )}
             <div
               className={cn(
-                "flex flex-col overflow-hidden max-h-screen",
+                "flex flex-col overflow-hidden",
                 classes?.expandedChildrenWrapperInner
               )}
               style={styles.childPadding}

package/src/components/Tree/type.ts

@@ -101,7 +101,10 @@ export interface TreeProps
   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;
@@ -109,7 +112,7 @@ export interface TreeProps
   hierarchicalCheck?: boolean;
   checkable?: boolean;
   maxLevel?: number;
-  mode: "checkbox" | "radio";
+  mode?: "checkbox" | "radio";
   // Only radio mode
   autoDisabled?: boolean;
 }