@rovula/ui 0.0.55 → 0.0.57

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

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;
@@ -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/esm/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/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;
@@ -115,6 +116,7 @@ type Tab = {
 };
 type TabsProps = {
     tabs: Tab[];
+    value?: number;
     initialTab?: number;
     tabBarSize?: number;
     tabMode?: "start" | "justify";
@@ -705,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.55",
+  "version": "0.0.57",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Tabs/Tabs.stories.tsx

@@ -5,6 +5,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",
@@ -209,3 +210,50 @@ export const Disabled = {
     );
   },
 } satisfies StoryObj;
+
+export const Controller = {
+  args: {
+    initialTab: 1,
+    value: 0,
+    tabs,
+    enableAddTabButton: true,
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+
+    const [, setArgs] = useArgs();
+    return (
+      <div className="flex flex-col gap-4  w-[500px]">
+        <div className="flex flex-row gap-2">
+          <Button onClick={() => setArgs({ ...props.tabs, value: 0 })}>
+            Set active tab 0
+          </Button>
+          <Button onClick={() => setArgs({ ...props.tabs, value: 1 })}>
+            Set active tab 1
+          </Button>
+          <Button onClick={() => setArgs({ ...props.tabs, value: 2 })}>
+            Set active tab 2
+          </Button>
+        </div>
+        <Tabs
+          tabs={tabs}
+          {...props}
+          tabMode="start"
+          onAddTab={() => {
+            setArgs({
+              tabs: [
+                ...props.tabs,
+                {
+                  label: "Tab" + (props.tabs.length + 1),
+                  content: <p>Tab {props.tabs.length + 1} content</p>,
+                },
+              ],
+            });
+          }}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

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;
@@ -16,6 +17,7 @@ type Tab = {
 
 type TabsProps = {
   tabs: Tab[];
+  value?: number;
   initialTab?: number;
   tabBarSize?: number;
   tabMode?: "start" | "justify";
@@ -40,6 +42,7 @@ type TabsProps = {
 
 const Tabs: React.FC<TabsProps> = ({
   tabs = [],
+  value,
   initialTab = 0,
   tabBarSize = 38,
   enableBorderLine = true,
@@ -69,6 +72,12 @@ const Tabs: React.FC<TabsProps> = ({
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
   const isInitialMount = useRef(true);
 
+  useEffect(() => {
+    if (value !== undefined) {
+      setActiveTab(value);
+    }
+  }, [value]);
+
   const updateSliderStyle = () => {
     const activeTabElement = tabRefs.current[activeTab];
     if (activeTabElement) {
@@ -224,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 ?? Math.random()}>
+          {tabs[activeTab]?.content}
+        </div>
       </div>
     </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>>({});

package/src/components/Tree/type.ts

@@ -109,7 +109,7 @@ export interface TreeProps
   hierarchicalCheck?: boolean;
   checkable?: boolean;
   maxLevel?: number;
-  mode: "checkbox" | "radio";
+  mode?: "checkbox" | "radio";
   // Only radio mode
   autoDisabled?: boolean;
 }