feat(primitives): add Tabs component

Author: ZAHON

packages/primitives/src/components/index.ts

@@ -10,5 +10,6 @@ export * as Link from './link';
 export * as Popover from './popover';
 export * as Primitive from './primitive';
 export * as Spinner from './spinner';
+export * as Tabs from './tabs';
 export * as Toggle from './toggle';
 export * as VisuallyHidden from './visually-hidden';

packages/primitives/src/components/tabs/index.ts

@@ -0,0 +1,9 @@
+export type { TabsRootProps as RootProps } from './tabs-root';
+export type { TabsListProps as ListProps } from './tabs-list';
+export type { TabsTriggerProps as TriggerProps } from './tabs-trigger';
+export type { TabsContentProps as ContentProps } from './tabs-content';
+
+export { TabsRoot as Root } from './tabs-root';
+export { TabsList as List } from './tabs-list';
+export { TabsTrigger as Trigger } from './tabs-trigger';
+export { TabsContent as Content } from './tabs-content';

packages/primitives/src/components/tabs/tabs-content/index.ts

@@ -0,0 +1,2 @@
+export type { TabsContentProps } from './tabs-content.types';
+export { TabsContent } from './tabs-content';

packages/primitives/src/components/tabs/tabs-content/tabs-content.tsx

@@ -0,0 +1,33 @@
+import type { TabsContentProps } from './tabs-content.types';
+import { component$, useContext, Slot } from '@builder.io/qwik';
+import { TabsContext } from '../tabs-context';
+
+/**
+ * Contains the content associated with each trigger.
+ * This component is based on the `div` element.
+ */
+export const TabsContent = component$<TabsContentProps>((props) => {
+  const { as, value, ...others } = props;
+
+  const { tabsValue, tabsId, orientation } = useContext(TabsContext);
+
+  const Component = as || 'div';
+
+  return (
+    <Component
+      role="tabpanel"
+      tabIndex={0}
+      hidden={value !== tabsValue.value}
+      id={`qwik-primitives-tabs-${tabsId}-content-${value}`}
+      aria-labelledby={`qwik-primitives-tabs-${tabsId}-trigger-${value}`}
+      data-qwik-primitives-tabs-content=""
+      data-scope="tabs"
+      data-part="content"
+      data-state={value === tabsValue.value ? 'active' : 'inactive'}
+      data-orientation={orientation}
+      {...others}
+    >
+      <Slot />
+    </Component>
+  );
+});

packages/primitives/src/components/tabs/tabs-content/tabs-content.types.ts

@@ -0,0 +1,20 @@
+import type { PropsOf, FunctionComponent, CSSProperties } from '@builder.io/qwik';
+
+export interface TabsContentProps extends PropsOf<'div'> {
+  /**
+   * Change the default rendered element for the one passed as, merging their props and behavior.
+   *
+   * Read our [Composition](https://github.com/ZAHON/qwik-primitives/blob/main/packages/primitives/docs/composition.md) guide for more details.
+   */
+  as?: FunctionComponent;
+
+  /**
+   * A unique value that associates the content with a trigger.
+   */
+  value: string;
+
+  /**
+   * The inline style for the element.
+   */
+  style?: CSSProperties;
+}

packages/primitives/src/components/tabs/tabs-context/index.ts

@@ -0,0 +1,2 @@
+export type { TabsContextValue } from './tabs-context.types';
+export { TabsContext } from './tabs-context';

packages/primitives/src/components/tabs/tabs-context/tabs-context.tsx

@@ -0,0 +1,4 @@
+import type { TabsContextValue } from './tabs-context.types';
+import { createContextId } from '@builder.io/qwik';
+
+export const TabsContext = createContextId<TabsContextValue>('qwik-primitives-tabs-context');

packages/primitives/src/components/tabs/tabs-context/tabs-context.types.ts

@@ -0,0 +1,46 @@
+import type { ReadonlySignal, QRL, Signal } from '@builder.io/qwik';
+
+export interface TabsContextValue {
+  /**
+   * The controlled value of the tab to activate.
+   */
+  tabsValue: ReadonlySignal<string>;
+
+  /**
+   * The function that allow change controlled value of the tab to activate.
+   */
+  setTabsValue$: QRL<(open: string) => void>;
+
+  /**
+   * The unique id of the tabs.
+   */
+  tabsId: string;
+
+  /**
+   * The reference to tabs list DOM element.
+   */
+  listRef: Signal<HTMLElement | undefined>;
+
+  /**
+   * When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+   */
+  isLoop: Signal<boolean | undefined>;
+
+  /**
+   * The current tab stop id.
+   */
+  currentTabStopId: Signal<string | undefined>;
+
+  isTabbingBackOut: Signal<boolean>;
+
+  /**
+   * The orientation of the component.
+   */
+  orientation: 'horizontal' | 'vertical';
+
+  /**
+   * When `"automatic"`, tabs are activated when receiving focus.
+   * When `"manual"`, tabs are activated when clicked.
+   */
+  activationMode: 'automatic' | 'manual';
+}

packages/primitives/src/components/tabs/tabs-list/index.ts

@@ -0,0 +1,2 @@
+export type { TabsListProps } from './tabs-list.types';
+export { TabsList } from './tabs-list';

packages/primitives/src/components/tabs/tabs-list/tabs-list.tsx

@@ -0,0 +1,76 @@
+import type { TabsListProps } from './tabs-list.types';
+import { component$, useContext, useSignal, useTask$, $, Slot } from '@builder.io/qwik';
+import { getTriggers, focusFirstTrigger } from '../utilities';
+import { composeRefs } from '@/utilities';
+import { TabsContext } from '../tabs-context';
+
+/**
+ * Contains the triggers that are aligned along the edge of the active content.
+ * This component is based on the `div` element.
+ */
+export const TabsList = component$<TabsListProps>((props) => {
+  const { as, ref, loop = true, onMouseDown$, onFocus$, style, ...others } = props;
+
+  const { listRef, isLoop, currentTabStopId, isTabbingBackOut, orientation } = useContext(TabsContext);
+
+  const isClickFocus = useSignal(false);
+  const shouldHaveOutline = useSignal(false);
+
+  useTask$(({ track }) => {
+    track(() => loop);
+
+    isLoop.value = loop;
+  });
+
+  const handleMouseDown$ = $(() => {
+    isClickFocus.value = true;
+  });
+
+  const handleFocus$ = $((event: FocusEvent, currentTarget: HTMLElement) => {
+    // We normally wouldn't need this check, because we already check
+    // that the focus is on the current target and not bubbling to it.
+    // We do this because Safari doesn't focus buttons when clicked, and
+    // instead, the wrapper will get focused and not through a bubbling event.
+    const isKeyboardFocus = !isClickFocus.value;
+
+    if (event.target === currentTarget && isKeyboardFocus && !isTabbingBackOut.value) {
+      const triggers = getTriggers(listRef.value).filter(({ focusable }) => focusable);
+
+      if (triggers.length) {
+        shouldHaveOutline.value = false;
+
+        const activeTrigger = triggers.find(({ active }) => active);
+        const currentTrigger = triggers.find(({ id }) => id === currentTabStopId.value);
+        const candidateTriggers = [activeTrigger, currentTrigger, ...triggers].filter(Boolean) as typeof triggers;
+        const candidateNodes = candidateTriggers.map(({ ref }) => ref);
+
+        focusFirstTrigger(candidateNodes);
+      } else {
+        shouldHaveOutline.value = true;
+      }
+    }
+
+    isClickFocus.value = false;
+  });
+
+  const Component = as || 'div';
+
+  return (
+    <Component
+      ref={composeRefs([ref, listRef])}
+      role="tablist"
+      tabIndex={isTabbingBackOut.value ? -1 : 0}
+      aria-orientation={orientation}
+      data-qwik-primitives-tabs-list=""
+      data-scope="tabs"
+      data-part="list"
+      data-orientation={orientation}
+      onMouseDown$={[onMouseDown$, handleMouseDown$]}
+      onFocus$={[onFocus$, handleFocus$]}
+      style={{ outline: shouldHaveOutline.value ? undefined : 'none', ...style }}
+      {...others}
+    >
+      <Slot />
+    </Component>
+  );
+});