fix: support radix-ui/tabs root props

.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

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

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=?,

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

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,22 +27,36 @@ 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)
     const [state, setState] = useState({ left: 0, width: 0 })
 
     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}>