@rovula/ui 0.0.60 → 0.0.62

package/dist/cjs/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/cjs/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/cjs/types/hooks/index.d.ts

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

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

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

package/dist/cjs/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/components/DatePicker/DatePicker.js

@@ -17,11 +17,11 @@ import { Calendar } from "../Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
 import { TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
+import { cn } from "@/utils/cn";
 const DatePicker = (_a) => {
     var { date, onSelect, textInputProps, popoverContentProps } = _a, props = __rest(_a, ["date", "onSelect", "textInputProps", "popoverContentProps"]);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx("div", { children: _jsxs(Popover, { modal: true, open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2" // TODO
-                            , readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps)) }) }), _jsx(PopoverContent, Object.assign({ className: "w-auto p-0 z-[100]" }, popoverContentProps, { children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
+    return (_jsx("div", { children: _jsxs(Popover, { modal: true, open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "date-picker", readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps, { labelClassName: cn("pointer-events-none", textInputProps === null || textInputProps === void 0 ? void 0 : textInputProps.labelClassName) })) }) }), _jsx(PopoverContent, Object.assign({ className: "w-auto p-0 z-[100]" }, popoverContentProps, { children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(...value);
                             setIsOpen(false);
                         } })) }))] }) }));

package/dist/components/Tree/Tree.js

@@ -2,7 +2,8 @@ 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 = "checkbox", autoDisabled = false, }) => {
+import { usePrevious } from "@/hooks";
+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, checkedAll = false, }) => {
     const [checkedState, setCheckedState] = useState({});
     const [expandedState, setExpandedState] = useState({});
     const traverseTree = (nodes, callback) => {
@@ -52,6 +53,7 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             setCheckedState(checkedId.reduce((prev, cur) => (Object.assign(Object.assign({}, prev), { [cur]: true })), {}));
         }
     }, [checkedId]);
+    // For usecase loaded data a children coming after.
     useEffect(() => {
         if (!hierarchicalCheck) {
             return;
@@ -76,6 +78,29 @@ const Tree = ({ classes, data, defaultExpandedId, defaultCheckedId, checkedId, l
             return Object.assign(Object.assign({}, prev), state);
         });
     }, [data, hierarchicalCheck]);
+    const prevCheckedAll = usePrevious(checkedAll);
+    useEffect(() => {
+        if (prevCheckedAll === undefined || prevCheckedAll === checkedAll)
+            return;
+        if (checkedAll) {
+            const newState = {};
+            traverseTree(data, (node) => {
+                if (node.id) {
+                    newState[node.id] = true;
+                }
+            });
+            setCheckedState(newState);
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState, undefined, null);
+        }
+        else {
+            let newState = {};
+            setCheckedState((prev) => {
+                newState = Object.keys(prev).reduce((p, key) => (Object.assign(Object.assign({}, p), { [key]: false })), {});
+                return newState;
+            });
+            onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newState, undefined, null);
+        }
+    }, [data, checkedAll, prevCheckedAll]);
     const handleExpandChange = useCallback((id, expanded, itemData) => {
         onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded, itemData);
         setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));

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

@@ -210,3 +210,15 @@ export const RadioMode = {
                     } }))] }));
     },
 };
+export const CheckAll = {
+    args: {
+        data: exampleData,
+    },
+    render: (args) => {
+        const [isCheckedAll, setIsCheckedAll] = useState(false);
+        const [checkedId, onCheckedId] = useState([]);
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setIsCheckedAll(!isCheckedAll), children: [isCheckedAll ? "Unchecked" : "Checked", " All"] }), _jsx(Button, { variant: "outline", onClick: () => onCheckedId([]), children: "Clear" })] }), _jsx(Tree, Object.assign({}, args, { hierarchicalCheck: true, checkedAll: isCheckedAll, checkedId: checkedId, onCheckedChange: (state) => {
+                        onCheckedId(Object.keys(state).filter((key) => state === null || state === void 0 ? void 0 : state[key]));
+                    } }))] }));
+    },
+};