fix: tabs trigger

lovrozagar · Jul 12, 2024 · 40c3a4a · 40c3a4a
1 parent 176fe47
commit 40c3a4a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 18 deletions.
diff --git a/app.tsx b/app.tsx
@@ -1,9 +1,21 @@
+import { Tabs, TabsTrigger, TabsTriggerList } from '@/components'
 import React, { useState } from 'react'
 
 const App = () => {
-  const [state, setValue] = useState(false)
+  const [state, setValue] = useState('')
 
-  return <div className='h-screen w-full flex flex-col justify-center items-center gap-8'> </div>
+  return (
+    <div className='h-screen w-full flex flex-col justify-center items-center gap-8'>
+      <Tabs value={state} onValueChange={setValue}>
+        <TabsTriggerList>
+          <TabsTrigger asChild value={1}>
+            <a>Trigger 1</a>
+          </TabsTrigger>
+          <TabsTrigger value={2}>Trigger 2</TabsTrigger>
+        </TabsTriggerList>
+      </Tabs>
+    </div>
+  )
 }
 
 export { App }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@renderui/core",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "private": false,
   "description": "React UI library with highly modular and ready-out-of-the-box components",
   "license": "MIT",

diff --git a/src/components/tabs/components/tabs-trigger.tsx b/src/components/tabs/components/tabs-trigger.tsx
@@ -20,6 +20,7 @@ import { getHandleTriggerPress } from '@/components/tabs/utils/get-handdle-trigg
 
 const TabsTrigger = React.forwardRef<TabsTriggerRef, TabsTriggerProps>((props, ref) => {
   const {
+    asChild,
     value,
     className,
     children,
@@ -44,6 +45,7 @@ const TabsTrigger = React.forwardRef<TabsTriggerRef, TabsTriggerProps>((props, r
   return (
     <TabsTriggerPrimitive asChild disabled={isDisabled} value={value as string}>
       <Button
+        asChild={asChild}
         ref={ref}
         data-slot='trigger'
         color={color ?? rootColor}
@@ -65,20 +67,41 @@ const TabsTrigger = React.forwardRef<TabsTriggerRef, TabsTriggerProps>((props, r
         )}
         {...restProps}
       >
-        <span
-          data-slot='trigger-children-container'
-          className={cn(
-            DEFAULT_TABS_TRIGGER_CHILDREN_CONTAINER_CLASSNAME,
-            childrenContainerClassName,
-          )}
-          {...restChildrenContainerProps}
-        >
-          {children}
-        </span>
-        <span aria-hidden className='invisible'>
-          {children}
-        </span>
-        {isActive ? <TabsCursor /> : null}
+        {asChild ? (
+          <span className='w-full h-full rounded-[inherit] text-[inherit]'>
+            <span
+              data-slot='trigger-children-container'
+              className={cn(
+                DEFAULT_TABS_TRIGGER_CHILDREN_CONTAINER_CLASSNAME,
+                childrenContainerClassName,
+              )}
+              {...restChildrenContainerProps}
+            >
+              {children}
+            </span>
+            <span aria-hidden className='invisible'>
+              {children}
+            </span>
+            {isActive ? <TabsCursor /> : null}
+          </span>
+        ) : (
+          <>
+            <span
+              data-slot='trigger-children-container'
+              className={cn(
+                DEFAULT_TABS_TRIGGER_CHILDREN_CONTAINER_CLASSNAME,
+                childrenContainerClassName,
+              )}
+              {...restChildrenContainerProps}
+            >
+              {children}
+            </span>
+            <span aria-hidden className='invisible'>
+              {children}
+            </span>
+            {isActive ? <TabsCursor /> : null}
+          </>
+        )}
       </Button>
     </TabsTriggerPrimitive>
   )

diff --git a/src/components/tabs/constants/constants.ts b/src/components/tabs/constants/constants.ts
@@ -34,7 +34,7 @@ const INACTIVE_TABS_TRIGGER_CLASSNAME =
   'text-mode-contrast transition-[color] duration-fast data-[hover="true"]:data-[state="inactive"]:text-primary'
 
 const DEFAULT_TABS_TRIGGER_CHILDREN_CONTAINER_CLASSNAME =
-  'absolute inset-0 z-[20] flex size-full items-center justify-center gap-3 text-[inherit]'
+  'absolute inset-0 z-[2] flex size-full items-center justify-center gap-3 text-[inherit]'
 
 export {
   DEFAULT_TABS_CLASSNAME,