From 323e1ab4c9e6447e5da5cba0cc04b11859b10024 Mon Sep 17 00:00:00 2001
From: istarkov <istarkov@gmail.com>
Date: Thu, 12 Dec 2024 13:35:01 +0000
Subject: [PATCH] Add tabs

---
 .../sdk-components-react-radix/src/tabs.tsx   | 43 ++++++++++++++-----
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/packages/sdk-components-react-radix/src/tabs.tsx b/packages/sdk-components-react-radix/src/tabs.tsx
index b0183d57b1da..4e3f771f6021 100644
--- a/packages/sdk-components-react-radix/src/tabs.tsx
+++ b/packages/sdk-components-react-radix/src/tabs.tsx
@@ -1,20 +1,43 @@
-import {
-  type ComponentPropsWithoutRef,
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type ComponentProps,
-  type RefAttributes,
-} from "react";
+import { type ComponentPropsWithoutRef, forwardRef, useCallback } from "react";
 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
 import {
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
   type Hook,
 } from "@webstudio-is/react-sdk/runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import interactionResponse from "await-interaction-response";
+
+export const Tabs = forwardRef<
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof Root>, "value" | "onValueChange"> & {
+    value?: string;
+    onValueChange?: (value: string) => void;
+  }
+>(({ defaultValue, ...props }, ref) => {
+  const [value, onValueChange] = useControllableState({
+    prop: props.value,
+    defaultProp: defaultValue,
+    onChange: props.onValueChange,
+  });
 
-export const Tabs: ForwardRefExoticComponent<
-  Omit<ComponentProps<typeof Root>, "asChild"> & RefAttributes<HTMLDivElement>
-> = Root;
+  const handleValueChange = useCallback(
+    async (value: string) => {
+      await interactionResponse();
+      onValueChange(value);
+    },
+    [onValueChange]
+  );
+
+  return (
+    <Root
+      ref={ref}
+      {...props}
+      value={value}
+      onValueChange={handleValueChange}
+    />
+  );
+});
 
 export const TabsList = List;