fix(components): fix tabs selected problem with daisy implementation

Author: gilf

packages/daisy/src/components/tabs/tab.tsx

@@ -3,21 +3,20 @@ import { Tab as HeadlessTab } from '@qwik-ui/headless';
 
 interface TabProps {
   class?: string;
-  className?: string;
-  isActive?: boolean;
   isLifted?: boolean;
   isBordered?: boolean;
   onClick$?: PropFunction<(clicked: number) => void>;
 }
 
 export const Tab = component$(
-  ({ isActive, isBordered, isLifted, onClick$, ...props }: TabProps) => {
+  ({ isBordered, isLifted, onClick$, ...props }: TabProps) => {
     return (
       <HeadlessTab
         onClick={onClick$}
-        class={`tab ${isActive ? 'tab-active' : ''} ${
-          isBordered ? 'tab-bordered' : ''
-        } ${isLifted ? 'tab-lifted' : ''}`}
+        class={`tab ${isBordered ? 'tab-bordered' : ''} ${
+          isLifted ? 'tab-lifted' : ''
+        }`}
+        selectedClassName="tab-active"
         {...props}
       >
         <Slot />

packages/headless/src/components/tabs/tabs.tsx

@@ -82,48 +82,51 @@ export const TabList = component$((props: TabListProps) => {
 interface TabProps {
   onClick?: PropFunction<(clicked: number) => void>;
   class?: string;
+  selectedClassName?: string;
 }
 
 // Tab button inside of a tab list
-export const Tab = component$(({ onClick, ...props }: TabProps) => {
-  const contextService = useContext(tabsContext);
-  const thisTabIndex = useSignal(0);
-
-  useMount$(async () => {
-    thisTabIndex.value = await await contextService.getNextTabIndex();
-  });
-  const isSelected = () =>
-    thisTabIndex.value === contextService.selectedIndex.value;
+export const Tab = component$(
+  ({ selectedClassName, onClick, ...props }: TabProps) => {
+    const contextService = useContext(tabsContext);
+    const thisTabIndex = useSignal(0);
 
-  const selectIfAutomatic = $(() => {
-    if (contextService.behavior === 'automatic') {
-      contextService.selectedIndex.value = thisTabIndex.value;
-    }
-  });
+    useMount$(async () => {
+      thisTabIndex.value = await await contextService.getNextTabIndex();
+    });
+    const isSelected = () =>
+      thisTabIndex.value === contextService.selectedIndex.value;
 
-  return (
-    <button
-      id={`${contextService.tabsHash}-tab-${thisTabIndex.value}`}
-      type="button"
-      role="tab"
-      onFocus$={selectIfAutomatic}
-      onMouseEnter$={selectIfAutomatic}
-      aria-selected={isSelected()}
-      aria-controls={`tabpanel-${thisTabIndex.value}`}
-      class={`${isSelected() ? 'selected' : ''}${
-        props.class ? ` ${props.class}` : ''
-      }`}
-      onClick$={$(() => {
+    const selectIfAutomatic = $(() => {
+      if (contextService.behavior === 'automatic') {
         contextService.selectedIndex.value = thisTabIndex.value;
-        if (onClick) {
-          onClick(thisTabIndex.value);
-        }
-      })}
-    >
-      <Slot />
-    </button>
-  );
-});
+      }
+    });
+
+    return (
+      <button
+        id={`${contextService.tabsHash}-tab-${thisTabIndex.value}`}
+        type="button"
+        role="tab"
+        onFocus$={selectIfAutomatic}
+        onMouseEnter$={selectIfAutomatic}
+        aria-selected={isSelected()}
+        aria-controls={`tabpanel-${thisTabIndex.value}`}
+        class={`${isSelected() ? `selected ${selectedClassName}` : ''}${
+          props.class ? ` ${props.class}` : ''
+        }`}
+        onClick$={$(() => {
+          contextService.selectedIndex.value = thisTabIndex.value;
+          if (onClick) {
+            onClick(thisTabIndex.value);
+          }
+        })}
+      >
+        <Slot />
+      </button>
+    );
+  }
+);
 
 interface TabPanelProps {
   class?: string;