@rovula/ui 0.0.61 → 0.0.63

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { InputProps } from "../TextInput/TextInput";
 type RenderLabelCallbackArg = {
     value: string;
@@ -36,6 +36,8 @@ export type DropdownProps = {
         optionsFiltered: Options[];
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
+        style?: CSSProperties;
+        dropdownRef?: React.RefObject<HTMLUListElement>;
     }) => ReactNode;
 } & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React.ForwardRefExoticComponent<{
@@ -63,6 +65,8 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
         optionsFiltered: Options[];
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
+        style?: CSSProperties;
+        dropdownRef?: React.RefObject<HTMLUListElement>;
     }) => ReactNode) | undefined;
 } & Omit<InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;

package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts

@@ -27,6 +27,8 @@ declare const meta: {
             optionsFiltered: Options[];
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
+            style?: React.CSSProperties | undefined;
+            dropdownRef?: React.RefObject<HTMLUListElement> | undefined;
         }) => React.ReactNode) | undefined;
     } & Omit<import("../..").InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
@@ -58,6 +60,8 @@ declare const meta: {
             optionsFiltered: Options[];
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
+            style?: React.CSSProperties | undefined;
+            dropdownRef?: React.RefObject<HTMLUListElement> | undefined;
         }) => React.ReactNode) | undefined;
         suppressHydrationWarning?: boolean | undefined;
         color?: string | undefined;

package/dist/esm/types/components/Search/Search.stories.d.ts

@@ -322,6 +322,8 @@ declare const meta: {
             optionsFiltered: Options[];
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
+            style?: React.CSSProperties | undefined;
+            dropdownRef?: React.RefObject<HTMLUListElement> | undefined;
         }) => React.ReactNode) | undefined;
         optionContainerClassName?: string | undefined;
         optionItemClassName?: string | undefined;

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

@@ -30,6 +30,7 @@ type TabsProps = {
     leftAction?: React.ReactNode;
     rightAction?: React.ReactNode;
     disabled?: boolean;
+    keepMounted?: boolean;
     onAddTab?: () => void;
     onTabChange?: (tabIndex: number) => void;
 };

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

@@ -30,6 +30,7 @@ declare const meta: {
         leftAction?: React.ReactNode;
         rightAction?: React.ReactNode;
         disabled?: boolean | undefined;
+        keepMounted?: boolean | undefined;
         onAddTab?: (() => void) | undefined;
         onTabChange?: ((tabIndex: number) => void) | undefined;
     }>;
@@ -66,6 +67,7 @@ declare const meta: {
         leftAction?: React.ReactNode;
         rightAction?: React.ReactNode;
         disabled?: boolean | undefined;
+        keepMounted?: boolean | undefined;
         onAddTab?: (() => void) | undefined;
         onTabChange?: ((tabIndex: number) => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

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

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

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

@@ -94,4 +94,5 @@ export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRig
     maxLevel?: number;
     mode?: "checkbox" | "radio";
     autoDisabled?: boolean;
+    checkedAll?: boolean;
 }

package/dist/esm/types/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as usePrevious } from "./usePrevious";

package/dist/esm/types/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/dist/esm/types/index.d.ts

@@ -40,4 +40,5 @@ export type { NavbarProps } from "./components/Navbar/Navbar";
 export type { AvatarProps } from "./components/Avatar/Avatar";
 export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
+export * from "./hooks";
 export { cn } from "./utils/cn";

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { default as usePrevious } from "./usePrevious";

package/dist/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+export default usePrevious;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef, CSSProperties } from 'react';
+import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -135,6 +135,7 @@ type TabsProps = {
     leftAction?: React__default.ReactNode;
     rightAction?: React__default.ReactNode;
     disabled?: boolean;
+    keepMounted?: boolean;
     onAddTab?: () => void;
     onTabChange?: (tabIndex: number) => void;
 };
@@ -176,6 +177,8 @@ type DropdownProps = {
         optionsFiltered: Options$1[];
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
+        style?: CSSProperties;
+        dropdownRef?: React__default.RefObject<HTMLUListElement>;
     }) => ReactNode;
 } & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React__default.ForwardRefExoticComponent<{
@@ -203,6 +206,8 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
         optionsFiltered: Options$1[];
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
+        style?: CSSProperties;
+        dropdownRef?: React__default.RefObject<HTMLUListElement>;
     }) => ReactNode) | undefined;
 } & Omit<InputProps, "onSelect" | "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
@@ -710,6 +715,7 @@ interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSecti
     maxLevel?: number;
     mode?: "checkbox" | "radio";
     autoDisabled?: boolean;
+    checkedAll?: boolean;
 }
 
 declare const Tree: FC<TreeProps>;
@@ -725,6 +731,8 @@ declare const getStartEndTimestampOfDay: () => {
 };
 declare const getTimestampUTC: (date: Date) => number;
 
+declare function usePrevious<T>(value: T): T | undefined;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };

package/dist/index.js

@@ -37,6 +37,8 @@ export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
+// Hooks
+export * from "./hooks";
 export { cn } from "./utils/cn";
 // const mainPreset = require("./theme/main-preset");
 // export { mainPreset };

package/package.json

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

package/src/components/Dropdown/Dropdown.tsx

@@ -1,14 +1,16 @@
 import React, {
+  CSSProperties,
   Fragment,
   ReactNode,
   forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from "react";
-
+import * as Portal from "@radix-ui/react-portal";
 import TextInput, { InputProps } from "../TextInput/TextInput";
 import {
   customInputVariant,
@@ -57,6 +59,8 @@ export type DropdownProps = {
     optionsFiltered: Options[];
     selectedOption: Options | null | undefined;
     onClick: (option: Options) => void;
+    style?: CSSProperties;
+    dropdownRef?: React.RefObject<HTMLUListElement>;
   }) => ReactNode;
 } & Omit<InputProps, "value" | "onSelect">;
 
@@ -96,6 +100,12 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     const [textValue, setTextValue] = useState("");
     const keyCode = useRef("");
 
+    const dropdownRef = useRef<HTMLUListElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [dropdownStyles, setDropdownStyles] = useState({});
+
+    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
+
     useEffect(() => {
       setSelectedOption(value);
       setTextValue(value?.label ?? "");
@@ -130,12 +140,51 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       );
     }, [options, filterMode, textValue]);
 
+    const updateDropdownPosition = useCallback(() => {
+      if (inputRef.current) {
+        const rect = inputRef.current.getBoundingClientRect();
+        const dropdownHeight = dropdownRef.current?.offsetHeight || 0;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+
+        const position =
+          spaceBelow >= dropdownHeight || spaceBelow > spaceAbove
+            ? {
+                top: `${rect.bottom + window.scrollY}px`,
+                left: `${rect.left + window.scrollX}px`,
+                width: `${rect.width}px`,
+              }
+            : {
+                top: `${rect.top - dropdownHeight + window.scrollY}px`,
+                left: `${rect.left + window.scrollX}px`,
+                width: `${rect.width}px`,
+              };
+
+        setDropdownStyles(position);
+      }
+    }, []);
+
+    useEffect(() => {
+      if (isFocused) {
+        updateDropdownPosition();
+        window.addEventListener("resize", updateDropdownPosition);
+        window.addEventListener("scroll", updateDropdownPosition, true);
+      }
+
+      return () => {
+        window.removeEventListener("resize", updateDropdownPosition);
+        window.removeEventListener("scroll", updateDropdownPosition, true);
+      };
+    }, [isFocused, updateDropdownPosition]);
+
     const renderOptions = () => {
       if (customRenderOptions) {
         return customRenderOptions({
           optionsFiltered,
           selectedOption,
           onClick: handleOptionClick,
+          style: dropdownStyles,
+          dropdownRef,
         });
       }
 
@@ -145,6 +194,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto",
             optionContainerClassName
           )}
+          style={dropdownStyles}
+          ref={dropdownRef}
         >
           {optionsFiltered.map((option) => {
             if (option.renderLabel) {
@@ -265,7 +316,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             </div>
           }
           {...props}
-          ref={ref}
+          ref={inputRef}
           readOnly={!filterMode}
           value={textValue}
           onChange={handleOnChangeText}
@@ -288,7 +339,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           onBlur={handleOnBlur}
           onKeyDown={handleOnKeyDown}
         />
-        {isFocused && renderOptions()}
+        {isFocused && <Portal.Root>{renderOptions()}</Portal.Root>}
       </div>
     );
   }

package/src/components/Input/Input.tsx

@@ -21,6 +21,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       type = "text",
       size = "md",
       variant = "outline",
+      rounded = "normal",
       fullwidth = false,
       disabled = false,
       error = false,
@@ -41,6 +42,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             error,
             hiddenPlaceholder,
             disabled,
+            rounded,
           }),
           className
         )}

package/src/components/Tabs/Tabs.tsx

@@ -36,6 +36,7 @@ type TabsProps = {
   leftAction?: React.ReactNode;
   rightAction?: React.ReactNode;
   disabled?: boolean;
+  keepMounted?: boolean;
   onAddTab?: () => void;
   onTabChange?: (tabIndex: number) => void;
 };
@@ -49,6 +50,7 @@ const Tabs: React.FC<TabsProps> = ({
   enableAddTabButton = false,
   keepIconSpace = true,
   disabled = false,
+  keepMounted = false,
   tabMode = "start",
   className,
   tabBarClassName,
@@ -78,53 +80,54 @@ const Tabs: React.FC<TabsProps> = ({
     }
   }, [value]);
 
-  // const updateSliderStyle = () => {
-  //   const activeTabElement = tabRefs.current[activeTab];
-  //   if (activeTabElement) {
-  //     setSliderStyle({
-  //       width: `${activeTabElement.offsetWidth}px`,
-  //       transform: `translateX(${activeTabElement.offsetLeft}px)`,
-  //     });
-  //   }
-  // };
+  const updateSliderStyle = () => {
+    const activeTabElement = tabRefs.current[activeTab];
+    if (activeTabElement) {
+      setSliderStyle({
+        width: `${activeTabElement.offsetWidth}px`,
+        transform: `translateX(${activeTabElement.offsetLeft}px)`,
+      });
+    }
+  };
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
 
-  // useEffect(() => {
-  //   let timer: NodeJS.Timeout;
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
 
-  //   if (isInitialMount.current) {
-  //     isInitialMount.current = false;
+      // Set initial position without animation
+      const activeTabElement = tabRefs.current[activeTab];
+      if (activeTabElement) {
+        setSliderStyle({
+          width: "0px",
+          transform: `translateX(${
+            activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
+          }px)`,
+        });
 
-  //     // Set initial position without animation
-  //     const activeTabElement = tabRefs.current[activeTab];
-  //     if (activeTabElement) {
-  //       setSliderStyle({
-  //         width: "0px",
-  //         transform: `translateX(${
-  //           activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
-  //         }px)`,
-  //       });
+        // Trigger reflow
+        timeout = setTimeout(() => {
+          updateSliderStyle();
+        }, 50);
+      }
+    } else {
+      updateSliderStyle();
+    }
 
-  //       // Trigger reflow
-  //       timer = setTimeout(() => {
-  //         updateSliderStyle();
-  //       }, 50);
-  //     }
-  //   } else {
-  //     updateSliderStyle();
-  //   }
+    const handleResize = () => {
+      updateSliderStyle();
+    };
 
-  //   const handleResize = () => {
-  //     updateSliderStyle();
-  //   };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
 
-  //   window.addEventListener("resize", handleResize);
-  //   return () => {
-  //     window.removeEventListener("resize", handleResize);
-  //     if (timer) {
-  //       clearTimeout(timer);
-  //     }
-  //   };
-  // }, [activeTab, tabs, tabMode, keepIconSpace]);
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [activeTab, tabs, tabMode, keepIconSpace]);
 
   return (
     <div className={cn("w-full", className)}>
@@ -240,7 +243,19 @@ const Tabs: React.FC<TabsProps> = ({
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}
       >
-        {tabs[activeTab]?.content}
+        {tabs.map((tab, idx) => {
+          if (!keepMounted && activeTab !== idx) {
+            return null;
+          }
+          return (
+            <div
+              key={tab.id ?? idx}
+              className={`transition ${activeTab === idx ? "block" : "hidden"}`}
+            >
+              {tab.content}
+            </div>
+          );
+        })}
       </div>
     </div>
   );

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

@@ -411,3 +411,38 @@ export const RadioMode: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const CheckAll: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+  },
+  render: (args) => {
+    const [isCheckedAll, setIsCheckedAll] = useState(false);
+    const [checkedId, onCheckedId] = useState<string[]>([]);
+
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={() => setIsCheckedAll(!isCheckedAll)}
+          >
+            {isCheckedAll ? "Unchecked" : "Checked"} All
+          </Button>
+          <Button variant="outline" onClick={() => onCheckedId([])}>
+            Clear
+          </Button>
+        </div>
+        <Tree
+          {...args}
+          hierarchicalCheck
+          checkedAll={isCheckedAll}
+          checkedId={checkedId}
+          onCheckedChange={(state) => {
+            onCheckedId(Object.keys(state).filter((key) => state?.[key]));
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -2,6 +2,7 @@ import React, { FC, useCallback, useEffect, useState } from "react";
 import TreeItem from "./TreeItem";
 import { TreeData, TreeProps } from "./type";
 import { cn } from "@/utils/cn";
+import { usePrevious } from "@/hooks";
 
 const Tree: FC<TreeProps> = ({
   classes,
@@ -32,6 +33,7 @@ const Tree: FC<TreeProps> = ({
   maxLevel,
   mode = "checkbox",
   autoDisabled = false,
+  checkedAll = false,
 }) => {
   const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
   const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
@@ -93,6 +95,7 @@ const Tree: FC<TreeProps> = ({
     }
   }, [checkedId]);
 
+  // For usecase loaded data a children coming after.
   useEffect(() => {
     if (!hierarchicalCheck) {
       return;
@@ -124,6 +127,36 @@ const Tree: FC<TreeProps> = ({
     });
   }, [data, hierarchicalCheck]);
 
+  const prevCheckedAll = usePrevious(checkedAll);
+  useEffect(() => {
+    if (prevCheckedAll === undefined || prevCheckedAll === checkedAll) return;
+    if (checkedAll) {
+      const newState: Record<string, boolean> = {};
+
+      traverseTree(data, (node) => {
+        if (node.id) {
+          newState[node.id] = true;
+        }
+      });
+      setCheckedState(newState);
+      onCheckedChange?.(newState, undefined, null);
+    } else {
+      let newState: Record<string, boolean> = {};
+
+      setCheckedState((prev) => {
+        newState = Object.keys(prev).reduce(
+          (p, key) => ({
+            ...p,
+            [key]: false,
+          }),
+          {}
+        );
+        return newState;
+      });
+      onCheckedChange?.(newState, undefined, null);
+    }
+  }, [data, checkedAll, prevCheckedAll]);
+
   const handleExpandChange = useCallback(
     (id: string, expanded: boolean, itemData: any) => {
       onExpandChange?.(id, expanded, itemData);

package/src/components/Tree/type.ts

@@ -117,4 +117,5 @@ export interface TreeProps
   mode?: "checkbox" | "radio";
   // Only radio mode
   autoDisabled?: boolean;
+  checkedAll?: boolean;
 }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as usePrevious } from "./usePrevious";

package/src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}
+
+export default usePrevious;

package/src/index.ts

@@ -58,6 +58,9 @@ export {
   getTimestampUTC,
 } from "./utils/datetime";
 
+// Hooks
+export * from "./hooks";
+
 export { cn } from "./utils/cn";
 
 // const mainPreset = require("./theme/main-preset");