From a709a0dc88b8d20361b726412c2de429c45b8258 Mon Sep 17 00:00:00 2001
From: Jaeho Lee <me@jaeholee.org>
Date: Wed, 14 Dec 2022 14:27:42 +0900
Subject: [PATCH 1/2] fix: support radix-ui/tabs defaultValue and etcs

- fixes #103
---
 .../__tests__/Formula_test.res                |  2 +-
 .../src/Formula__TextTab.res                  |  3 +++
 .../src/Tab/TextTab/TextTab.stories.tsx       |  3 ++-
 .../components/src/Tab/TextTab/TextTab.tsx    | 27 +++++++++++++++----
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/components-rescript/__tests__/Formula_test.res b/packages/components-rescript/__tests__/Formula_test.res
index b24680a8..b3139656 100644
--- a/packages/components-rescript/__tests__/Formula_test.res
+++ b/packages/components-rescript/__tests__/Formula_test.res
@@ -102,7 +102,7 @@ let testTextField = () => {
 
 let textTextTab = () => {
   <TextTab.List
-    rootProps={{"defaultValue": "a"}}
+    defaultValue="a"
     fullWidth={true}
     onValueChange={_ => ()}
     contents={<>
diff --git a/packages/components-rescript/src/Formula__TextTab.res b/packages/components-rescript/src/Formula__TextTab.res
index bde6fe3c..92d95ac2 100644
--- a/packages/components-rescript/src/Formula__TextTab.res
+++ b/packages/components-rescript/src/Formula__TextTab.res
@@ -3,6 +3,9 @@ module List = {
   external make: (
     ~props: {..}=?,
     ~rootProps: {..}=?, // TODO: RadixUI props
+    ~dir: [#ltr | #rtl]=?,
+    ~value: string=?,
+    ~defaultValue: string=?,
     ~contents: React.element=?,
     ~fullWidth: bool=?,
     ~onValueChange: string => unit=?,
diff --git a/packages/components/src/Tab/TextTab/TextTab.stories.tsx b/packages/components/src/Tab/TextTab/TextTab.stories.tsx
index 06535132..4555ce0d 100644
--- a/packages/components/src/Tab/TextTab/TextTab.stories.tsx
+++ b/packages/components/src/Tab/TextTab/TextTab.stories.tsx
@@ -32,8 +32,9 @@ const Template = (args) => {
         },
       }}
     >
+      defaultValue: b
       <Tab.List
-        rootProps={{ defaultValue: "a" }}
+        defaultValue="b"
         fullWidth
         onValueChange={(_) => {}}
         contents={
diff --git a/packages/components/src/Tab/TextTab/TextTab.tsx b/packages/components/src/Tab/TextTab/TextTab.tsx
index a6221fee..ac5d6dca 100644
--- a/packages/components/src/Tab/TextTab/TextTab.tsx
+++ b/packages/components/src/Tab/TextTab/TextTab.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren, ReactNode } from "react"
 import {
   forwardRef,
-  useLayoutEffect,
+  useEffect,
   useRef,
   useState,
   useImperativeHandle,
@@ -27,13 +27,25 @@ const extractIndicatorState = (tabEl: TriggerHTMLType) => {
 interface ListProps {
   contents?: ReactNode
   fullWidth?: boolean
-  rootProps?: TabsProps
+  defaultValue?: string
+  value?: string
+  dir?: "ltr" | "rtl"
+  rootProps?: Omit<TabsProps, "defaultValue" | "value" | "dir">
   onValueChange?: (value: string) => void
 }
 // todo: on resize
 export const List = forwardRef<HTMLDivElement, PropsWithChildren<ListProps>>(
   (
-    { children, contents = null, onValueChange, fullWidth, rootProps },
+    {
+      children,
+      contents = null,
+      onValueChange,
+      fullWidth,
+      rootProps,
+      defaultValue,
+      value,
+      dir,
+    },
     forwardedRef
   ) => {
     const ref = useRef<HTMLDivElement>(null)
@@ -41,8 +53,10 @@ export const List = forwardRef<HTMLDivElement, PropsWithChildren<ListProps>>(
 
     useImperativeHandle(forwardedRef, () => ref.current as HTMLDivElement)
 
-    useLayoutEffect(() => {
-      const tabEl = ref.current?.querySelector("button")
+    useEffect(() => {
+      const tabEl = ref.current?.querySelector(
+        '[data-state="active"]'
+      ) as HTMLButtonElement | null
       if (tabEl) {
         setState(extractIndicatorState(tabEl))
       }
@@ -64,6 +78,9 @@ export const List = forwardRef<HTMLDivElement, PropsWithChildren<ListProps>>(
       <Root
         className={rootStyle}
         onValueChange={onValueChangeWrapped}
+        defaultValue={defaultValue}
+        value={value}
+        dir={dir}
         {...rootProps}
       >
         <div className={listContainerStyle}>

From 15ec1a8036abaa4e8b80f8638aca022c740d5c5d Mon Sep 17 00:00:00 2001
From: Jaeho Lee <me@jaeholee.org>
Date: Wed, 14 Dec 2022 15:58:52 +0900
Subject: [PATCH 2/2] release

---
 .changeset/modern-seals-attack.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/modern-seals-attack.md

diff --git a/.changeset/modern-seals-attack.md b/.changeset/modern-seals-attack.md
new file mode 100644
index 00000000..3459c48e
--- /dev/null
+++ b/.changeset/modern-seals-attack.md
@@ -0,0 +1,8 @@
+---
+"@greenlabs/formula-components": patch
+"@greenlabs/rescript-formula-components": patch
+---
+
+fix: support radix-ui/tabs defaultValue and etcs
+
+- fixes #103