feat(headless/tabs): end,home,pagedn,pageup

Co-authored-by: Igal Klebanov <[email protected]>
Co-authored-by: Giora Guttsait <[email protected]>

Author: 3 people

apps/website/src/routes/docs/headless/(components)/tabs/index.mdx

@@ -111,7 +111,6 @@ import { APITable } from '../../../../../components/api-table/api-table';
       description: 'In "vertical mode", moves focus to the previous tab.',
     },
     {
-      /* {
       keyTitle: 'Home',
       description: 'Moves focus to the first tab.',
     },
@@ -126,7 +125,6 @@ import { APITable } from '../../../../../components/api-table/api-table';
     {
       keyTitle: 'PageDown',
       description: 'Moves focus to the first tab.',
-    }, */
     },
   ]}
 />
@@ -143,24 +141,22 @@ import { APITable } from '../../../../../components/api-table/api-table';
       description:
         'Toggle between automatic or manual. The automatic behavior moves between tabs when hover. The manual behavior moves between tabs on click.',
     },
+    {
+      name: 'selectedIndex',
+      type: 'number',
+      description: 'A way to set the selected index programmatically',
+    },
     {
       name: 'vertical',
       type: 'boolean',
       description:
         'If set to true, the behavior of UpArrow and DownArrow will navigate between tabs vertically instead of horizontally.',
     },
-  ]}
-/>
-
-### TabList
-
-<APITable
-  propDescriptors={[
     {
-      name: 'labelledBy',
-      type: 'string',
+      name: 'onSelectedIndexChange$',
+      type: '(index: number) => void',
       description:
-        'The aria-labelledby for this tablist. Mainly for accessibility purpose.',
+        'An event hook that getting notified whenever the selected index changes',
     },
   ]}
 />
@@ -176,8 +172,13 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onClick',
-      type: 'PropFunction<() => void>',
+      type: '(event: QwikMouseEvent) => void',
       description: 'A custom click handler to wire to tab click event',
     },
+    {
+      name: 'disabled',
+      type: 'boolean',
+      description: 'Set the disabled state of a specific tab',
+    },
   ]}
 />

packages/kit-headless/src/components/Autocomplete/autocomplete.spec.tsx renamed to packages/kit-headless/src/components/autocomplete/autocomplete.spec.tsx

@@ -2,6 +2,6 @@ export * from './behavior.type';
 export * from './tabs-context.type';
 export * from './tabs-context-id';
 export * from './tabs';
-export * from './tabs-panel';
+export * from './tab-panel';
 export * from './tabs-list';
 export * from './tab';

packages/kit-headless/src/components/Autocomplete/autocomplete.stories.tsx renamed to packages/kit-headless/src/components/autocomplete/autocomplete.stories.tsx

@@ -6,13 +6,12 @@ import {
   useTask$,
   useSignal,
   useVisibleTask$,
+  QwikIntrinsicElements,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
 import { isBrowser, isServer } from '@builder.io/qwik/build';
 
-export interface TabPanelProps {
-  class?: string;
-}
+export type TabPanelProps = QwikIntrinsicElements['div'];
 
 export const TabPanel = component$(({ ...props }: TabPanelProps) => {
   const contextService = useContext(tabsContextId);
@@ -22,8 +21,7 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
 
   const panelUID = useId();
 
-  // Index task
-  useTask$(async ({ cleanup }) => {
+  useTask$(async function initIndexTask({ cleanup }) {
     if (isServer) {
       serverAssignedIndexSig.value =
         await contextService.getNextServerAssignedPanelIndex$();
@@ -36,24 +34,24 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
     });
   });
 
-  // matched panel id task
-  useVisibleTask$(async ({ track }) => {
-    matchedTabIdSig.value = await track(() =>
-      contextService.getMatchedTabId$(panelUID)
+  useTask$(async function isSelectedPanelTask({ track }) {
+    const isSelected = await track(() =>
+      contextService.isPanelSelected$(panelUID)
     );
-  });
 
-  // is selected task
-  useTask$(async ({ track }) => {
     if (isServer) {
       isSelectedSig.value = await contextService.isIndexSelected$(
         serverAssignedIndexSig.value
       );
       return;
     }
 
-    isSelectedSig.value = await track(() =>
-      contextService.isPanelSelected$(panelUID)
+    isSelectedSig.value = isSelected;
+  });
+
+  useVisibleTask$(async function matchedPanelIdTask({ track }) {
+    matchedTabIdSig.value = await track(() =>
+      contextService.getMatchedTabId$(panelUID)
     );
   });
 

packages/kit-headless/src/components/Autocomplete/autocomplete.tsx renamed to packages/kit-headless/src/components/autocomplete/autocomplete.tsx

@@ -1,25 +1,24 @@
 import {
-  PropFunction,
   component$,
   useContext,
   useId,
   Slot,
-  useComputed$,
   useTask$,
   $,
   useSignal,
   useVisibleTask$,
+  QwikIntrinsicElements,
+  type QwikMouseEvent,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
 import { KeyCode } from '../../utils/key-code.type';
 import { isBrowser, isServer } from '@builder.io/qwik/build';
 
-export interface TabProps {
-  onClick?: PropFunction<() => void>;
-  class?: string;
+export type TabProps = {
+  onClick$?: (event: QwikMouseEvent) => void;
   selectedClassName?: string;
   disabled?: boolean;
-}
+} & QwikIntrinsicElements['button'];
 
 export const Tab = component$((props: TabProps) => {
   const contextService = useContext(tabsContextId);
@@ -28,8 +27,7 @@ export const Tab = component$((props: TabProps) => {
   const matchedTabPanelIdSig = useSignal<string | undefined>(undefined);
   const uniqueTabId = useId();
 
-  // Index task
-  useTask$(async ({ cleanup }) => {
+  useTask$(async function indexInitTask({ cleanup }) {
     if (isServer) {
       serverAssignedIndexSig.value =
         await contextService.getNextServerAssignedTabIndex$();
@@ -43,46 +41,35 @@ export const Tab = component$((props: TabProps) => {
     });
   });
 
-  // is selected task
-  useTask$(async ({ track }) => {
+  useTask$(async function isSelectedTask({ track }) {
+    const isTabSelected = await track(() =>
+      contextService.isTabSelected$(uniqueTabId)
+    );
     if (isServer) {
       isSelectedSig.value = await contextService.isIndexSelected$(
         serverAssignedIndexSig.value
       );
       return;
     }
-    isSelectedSig.value = await track(() =>
-      contextService.isTabSelected$(uniqueTabId)
-    );
+    isSelectedSig.value = isTabSelected;
   });
 
-  // disabled task
-  useTask$(({ track }) => {
+  useTask$(function disabledTask({ track }) {
     track(() => props.disabled);
 
     if (props.disabled) {
       contextService.updateTabState$(uniqueTabId, { disabled: true });
     }
   });
 
-  // matched panel id task
-  useVisibleTask$(async ({ track }) => {
+  useVisibleTask$(async function setMatchedTabPanelIdTask({ track }) {
     matchedTabPanelIdSig.value = await track(() =>
       contextService.getMatchedPanelId$(uniqueTabId)
     );
   });
 
-  const selectTab$ = $(() => {
-    if (props.disabled) {
-      return;
-    }
-    contextService.selectTab$(uniqueTabId);
-  });
-
   const selectIfAutomatic$ = $(() => {
-    if (contextService.behavior === 'automatic') {
-      selectTab$();
-    }
+    contextService.selectIfAutomatic$(uniqueTabId);
   });
 
   return (
@@ -101,12 +88,13 @@ export const Tab = component$((props: TabProps) => {
       class={`${
         isSelectedSig.value ? `selected ${props.selectedClassName || ''}` : ''
       }${props.class ? ` ${props.class}` : ''}`}
-      onClick$={() => {
-        selectTab$();
-        if (props.onClick) {
-          props.onClick();
+      onClick$={(event) => {
+        contextService.selectTab$(uniqueTabId);
+        if (props.onClick$) {
+          props.onClick$(event);
         }
       }}
+      preventdefault:keydown
       onKeyDown$={(e) => {
         contextService.onTabKeyDown$(
           e.key as KeyCode,

packages/kit-headless/src/components/Autocomplete/autocompleteTest.css renamed to packages/kit-headless/src/components/autocomplete/autocompleteTest.css

@@ -15,5 +15,5 @@ export interface TabsContext {
   isIndexSelected$: QRL<(index?: number) => boolean>;
   isTabSelected$: QRL<(tabId: string) => boolean>;
   isPanelSelected$: QRL<(panelId: string) => boolean>;
-  behavior: Behavior;
+  selectIfAutomatic$: QRL<(tabId: string) => void>;
 }

packages/kit-headless/src/components/tabs/index.ts

@@ -1,17 +1,11 @@
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
-import { Behavior } from './behavior.type';
 
-export type TabListProps = QwikIntrinsicElements['div'] & {
-  labelledBy?: string;
-  behavior?: Behavior;
-};
+export type TabListProps = QwikIntrinsicElements['div'];
 
 // List of tabs that can be clicked to show different content.
 export const TabList = component$((props: TabListProps) => {
-  const { labelledBy, ...rest } = props;
-
   return (
-    <div role="tablist" aria-labelledby={labelledBy} {...rest}>
+    <div role="tablist" {...props}>
       <Slot />
     </div>
   );