@rovula/ui 0.0.55 → 0.0.57

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;
@@ -10,6 +11,7 @@ type Tab = {
 };
 type TabsProps = {
     tabs: Tab[];
+    value?: number;
     initialTab?: number;
     tabBarSize?: number;
     tabMode?: "start" | "justify";

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;
@@ -10,6 +11,7 @@ declare const meta: {
             disabled?: boolean | undefined;
             isLoading?: boolean | undefined;
         }[];
+        value?: number | undefined;
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
@@ -37,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;
@@ -44,6 +47,7 @@ declare const meta: {
             disabled?: boolean | undefined;
             isLoading?: boolean | undefined;
         }[];
+        value?: number | undefined;
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
@@ -144,3 +148,15 @@ export declare const Disabled: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Controller: {
+    args: {
+        initialTab: number;
+        value: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        enableAddTabButton: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -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

@@ -5,8 +5,8 @@ import "./Tabs.css";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { Loading } from "@/index";
-const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
-    var _a;
+const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
+    var _a, _b;
     const [activeTab, setActiveTab] = useState(initialTab);
     const [sliderStyle, setSliderStyle] = useState({
         width: "0px",
@@ -14,6 +14,11 @@ const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = t
     });
     const tabRefs = useRef([]);
     const isInitialMount = useRef(true);
+    useEffect(() => {
+        if (value !== undefined) {
+            setActiveTab(value);
+        }
+    }, [value]);
     const updateSliderStyle = () => {
         const activeTabElement = tabRefs.current[activeTab];
         if (activeTabElement) {
@@ -72,6 +77,6 @@ const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = t
                                         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 }, (_b = tabs[activeTab].label + tabs[activeTab].id) !== null && _b !== void 0 ? _b : Math.random()) })] }));
 };
 export default Tabs;

package/dist/components/Tabs/Tabs.stories.js

@@ -4,6 +4,7 @@ import { ChevronDownIcon, ArchiveBoxIcon } from "@heroicons/react/16/solid";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { useArgs } from "@storybook/preview-api";
+import { Button } from "@/index";
 const meta = {
     title: "Components/Tabs",
     component: Tabs,
@@ -114,3 +115,26 @@ export const Disabled = {
         return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Tabs, Object.assign({ tabs: tabs }, props)), _jsx(Tabs, Object.assign({ tabs: tabs }, props, { disabled: true }))] }));
     },
 };
+export const Controller = {
+    args: {
+        initialTab: 1,
+        value: 0,
+        tabs,
+        enableAddTabButton: true,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        const [, setArgs] = useArgs();
+        return (_jsxs("div", { className: "flex flex-col gap-4  w-[500px]", children: [_jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(Button, { onClick: () => setArgs(Object.assign(Object.assign({}, props.tabs), { value: 0 })), children: "Set active tab 0" }), _jsx(Button, { onClick: () => setArgs(Object.assign(Object.assign({}, props.tabs), { value: 1 })), children: "Set active tab 1" }), _jsx(Button, { onClick: () => setArgs(Object.assign(Object.assign({}, props.tabs), { value: 2 })), children: "Set active tab 2" })] }), _jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabMode: "start", onAddTab: () => {
+                        setArgs({
+                            tabs: [
+                                ...props.tabs,
+                                {
+                                    label: "Tab" + (props.tabs.length + 1),
+                                    content: _jsxs("p", { children: ["Tab ", props.tabs.length + 1, " content"] }),
+                                },
+                            ],
+                        });
+                    } }))] }));
+    },
+};

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) => {