@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/tabs/createTabs.ts

@@ -3,19 +3,16 @@
  * Based on @react-aria/tabs.
  */
 
-import { type Accessor, createMemo, onMount } from 'solid-js';
-import { createFocusRing } from '../interactions';
-import { createPress } from '../interactions';
-import { createHover } from '../interactions';
-import { createId } from '../ssr';
-import type { Key, Collection, CollectionNode } from '@proyecto-viviana/solid-stately';
+import { type Accessor, createEffect, createMemo } from "solid-js";
+import { createFocusRing } from "../interactions";
+import { createPress } from "../interactions";
+import { createHover } from "../interactions";
+import { createId } from "../ssr";
+import { useLocale } from "../i18n";
+import type { Key, Collection, CollectionNode } from "@proyecto-viviana/solid-stately";
 
-// ============================================
-// TYPES
-// ============================================
-
-export type TabOrientation = 'horizontal' | 'vertical';
-export type KeyboardActivation = 'automatic' | 'manual';
+export type TabOrientation = "horizontal" | "vertical";
+export type KeyboardActivation = "automatic" | "manual";
 
 export interface TabListState<T = unknown> {
   collection: Accessor<Collection<T>>;
@@ -41,21 +38,21 @@ export interface AriaTabListProps {
   /** Whether the tab list is disabled. */
   isDisabled?: boolean;
   /** Label for the tab list. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the tab list. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the tab list. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
 }
 
 export interface TabListAria {
   /** Props for the tab list container element. */
   tabListProps: {
-    role: 'tablist';
-    'aria-orientation': TabOrientation;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
+    role: "tablist";
+    "aria-orientation": TabOrientation;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
     onKeyDown: (e: KeyboardEvent) => void;
     onFocus: (e: FocusEvent) => void;
     onBlur: (e: FocusEvent) => void;
@@ -68,18 +65,21 @@ export interface AriaTabProps {
   /** Whether the tab is disabled. */
   isDisabled?: boolean;
   /** Label for the tab. */
-  'aria-label'?: string;
+  "aria-label"?: string;
+  /** ID reference for the tab label. */
+  "aria-labelledby"?: string;
 }
 
 export interface TabAria {
   /** Props for the tab element. */
   tabProps: {
     id: string;
-    role: 'tab';
-    'aria-selected': boolean;
-    'aria-disabled': boolean | undefined;
-    'aria-controls': string | undefined;
-    'aria-label'?: string;
+    role: "tab";
+    "aria-selected": boolean;
+    "aria-disabled": boolean | undefined;
+    "aria-controls": string | undefined;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
     tabIndex: number;
     onKeyDown: (e: KeyboardEvent) => void;
     onMouseDown: (e: MouseEvent) => void;
@@ -105,31 +105,27 @@ export interface AriaTabPanelProps {
   /** The key of the associated tab. */
   id?: Key;
   /** Label for the tab panel. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the tab panel. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the tab panel. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
 }
 
 export interface TabPanelAria {
   /** Props for the tab panel element. */
   tabPanelProps: {
     id: string;
-    role: 'tabpanel';
-    'aria-labelledby': string;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
+    role: "tabpanel";
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     tabIndex: number;
   };
   /** Whether this panel is the selected one. */
   isSelected: Accessor<boolean>;
 }
 
-// ============================================
-// ID MANAGEMENT
-// ============================================
-
 const tabListIds = new WeakMap<TabListState<unknown>, string>();
 
 function getTabListId<T>(state: TabListState<T>): string {
@@ -143,23 +139,19 @@ function getTabListId<T>(state: TabListState<T>): string {
 
 function generateTabId<T>(state: TabListState<T>, key: Key): string {
   const baseId = getTabListId(state);
-  const keyStr = String(key).replace(/\s+/g, '-');
+  const keyStr = String(key).replace(/\s+/g, "-");
   return `${baseId}-tab-${keyStr}`;
 }
 
 function generateTabPanelId<T>(state: TabListState<T>, key: Key): string {
   const baseId = getTabListId(state);
-  const keyStr = String(key).replace(/\s+/g, '-');
+  const keyStr = String(key).replace(/\s+/g, "-");
   return `${baseId}-tabpanel-${keyStr}`;
 }
 
-// ============================================
-// KEYBOARD DELEGATE
-// ============================================
-
 function getNextKey<T>(state: TabListState<T>, currentKey: Key): Key | null {
   const coll = state.collection();
-  const keys = [...coll].map(node => node.key);
+  const keys = [...coll].map((node) => node.key);
   const currentIndex = keys.indexOf(currentKey);
 
   if (currentIndex === -1) return keys[0] ?? null;
@@ -178,7 +170,7 @@ function getNextKey<T>(state: TabListState<T>, currentKey: Key): Key | null {
 
 function getPreviousKey<T>(state: TabListState<T>, currentKey: Key): Key | null {
   const coll = state.collection();
-  const keys = [...coll].map(node => node.key);
+  const keys = [...coll].map((node) => node.key);
   const currentIndex = keys.indexOf(currentKey);
 
   if (currentIndex === -1) return keys[keys.length - 1] ?? null;
@@ -207,7 +199,7 @@ function getFirstKey<T>(state: TabListState<T>): Key | null {
 
 function getLastKey<T>(state: TabListState<T>): Key | null {
   const coll = state.collection();
-  const keys = [...coll].map(node => node.key).reverse();
+  const keys = [...coll].map((node) => node.key).reverse();
   for (const key of keys) {
     if (!state.isKeyDisabled(key)) {
       return key;
@@ -216,19 +208,14 @@ function getLastKey<T>(state: TabListState<T>): Key | null {
   return null;
 }
 
-// ============================================
-// HOOKS
-// ============================================
-
 /**
  * Creates ARIA props for a tab list container.
  */
-export function createTabList<T>(
-  props: AriaTabListProps,
-  state: TabListState<T>
-): TabListAria {
-  const orientation = () => props.orientation ?? state.orientation() ?? 'horizontal';
-  const keyboardActivation = () => props.keyboardActivation ?? state.keyboardActivation() ?? 'automatic';
+export function createTabList<T>(props: AriaTabListProps, state: TabListState<T>): TabListAria {
+  const locale = useLocale();
+  const orientation = () => props.orientation ?? state.orientation() ?? "horizontal";
+  const keyboardActivation = () =>
+    props.keyboardActivation ?? state.keyboardActivation() ?? "automatic";
 
   const handleKeyDown = (e: KeyboardEvent) => {
     if (state.isDisabled()) return;
@@ -237,40 +224,40 @@ export function createTabList<T>(
     if (currentKey === null) return;
 
     let nextKey: Key | null = null;
-    const isHorizontal = orientation() === 'horizontal';
+    const isHorizontal = orientation() === "horizontal";
+    const isRTL = locale().direction === "rtl";
 
     switch (e.key) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         if (isHorizontal) {
-          // TODO: RTL support
-          nextKey = getPreviousKey(state, currentKey);
+          nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
         }
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         if (isHorizontal) {
-          nextKey = getNextKey(state, currentKey);
+          nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);
         }
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         if (!isHorizontal) {
           nextKey = getPreviousKey(state, currentKey);
         }
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         if (!isHorizontal) {
           nextKey = getNextKey(state, currentKey);
         }
         break;
-      case 'Home':
+      case "Home":
         nextKey = getFirstKey(state);
         break;
-      case 'End':
+      case "End":
         nextKey = getLastKey(state);
         break;
-      case 'Enter':
-      case ' ':
+      case "Enter":
+      case " ":
         // In manual mode, Enter/Space activates the focused tab
-        if (keyboardActivation() === 'manual' && state.focusedKey()) {
+        if (keyboardActivation() === "manual" && state.focusedKey()) {
           state.setSelectedKey(state.focusedKey()!);
           e.preventDefault();
         }
@@ -282,11 +269,6 @@ export function createTabList<T>(
     if (nextKey !== null) {
       e.preventDefault();
       state.setFocusedKey(nextKey);
-
-      // In automatic mode, selection follows focus
-      if (keyboardActivation() === 'automatic') {
-        state.setSelectedKey(nextKey);
-      }
     }
   };
 
@@ -309,11 +291,11 @@ export function createTabList<T>(
 
   return {
     tabListProps: {
-      role: 'tablist',
-      'aria-orientation': orientation(),
-      'aria-label': props['aria-label'],
-      'aria-labelledby': props['aria-labelledby'],
-      'aria-describedby': props['aria-describedby'],
+      role: "tablist",
+      "aria-orientation": orientation(),
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"],
+      "aria-describedby": props["aria-describedby"],
       onKeyDown: handleKeyDown,
       onFocus: handleFocus,
       onBlur: handleBlur,
@@ -327,7 +309,7 @@ export function createTabList<T>(
 export function createTab<T>(
   props: AriaTabProps,
   state: TabListState<T>,
-  ref?: Accessor<HTMLElement | null>
+  ref?: Accessor<HTMLElement | null>,
 ): TabAria {
   const key = () => props.key;
 
@@ -348,8 +330,14 @@ export function createTab<T>(
       return isDisabled();
     },
     onPress: () => {
-      state.setSelectedKey(key());
-      state.setFocusedKey(key());
+      const tabKey = key();
+      const wasSelected = state.selectedKey() === tabKey;
+
+      state.setFocusedKey(tabKey);
+
+      if (state.keyboardActivation() === "manual" || wasSelected) {
+        state.setSelectedKey(tabKey);
+      }
     },
   });
 
@@ -365,60 +353,68 @@ export function createTab<T>(
   const tabPanelId = generateTabPanelId(state, key());
 
   // Helper to safely call event handlers that may be bound tuples
-  const callHandler = <E extends Event>(
-    handler: ((e: E) => void) | [object, (e: E) => void] | undefined,
-    event: E
-  ) => {
-    if (!handler) return;
-    if (Array.isArray(handler)) {
-      handler[1].call(handler[0], event);
-    } else {
-      handler(event);
+  const callHandler = <E extends Event>(handler: unknown, event: E) => {
+    if (typeof handler === "function") {
+      (handler as (e: E) => void)(event);
+      return;
+    }
+    if (Array.isArray(handler) && handler.length >= 2 && typeof handler[1] === "function") {
+      (handler[1] as (this: unknown, e: E) => void).call(handler[0], event);
     }
   };
 
   // Focus management
   const handleFocus = (e: FocusEvent) => {
     state.setFocusedKey(key());
-    callHandler(focusProps.onFocus as any, e);
+    callHandler(focusProps.onFocus, e);
   };
 
   // Combine all handlers
   const handleKeyDown = (e: KeyboardEvent) => {
-    callHandler(pressProps.onKeyDown as any, e);
+    callHandler(pressProps.onKeyDown, e);
   };
 
   const handleMouseDown = (e: MouseEvent) => {
-    callHandler(pressProps.onMouseDown as any, e);
+    callHandler(pressProps.onMouseDown, e);
   };
 
   const handlePointerDown = (e: PointerEvent) => {
-    callHandler(pressProps.onPointerDown as any, e);
+    callHandler(pressProps.onPointerDown, e);
   };
 
   const handleClick = (e: MouseEvent) => {
-    callHandler(pressProps.onClick as any, e);
+    callHandler(pressProps.onClick, e);
   };
 
-  // Focus this tab when it becomes selected and focused
-  onMount(() => {
-    const cleanup = createMemo(() => {
-      if (isFocused() && ref?.()) {
-        ref()?.focus();
-      }
-    });
-    return cleanup;
+  // Keep DOM focus aligned with focusedKey updates from keyboard delegate.
+  createEffect(() => {
+    const element = ref?.();
+    if (!isFocused() || !element) return;
+
+    const activeElement = element.ownerDocument?.activeElement;
+    if (activeElement !== element) {
+      element.focus();
+    }
   });
 
   return {
     tabProps: {
       id: tabId,
-      role: 'tab',
-      'aria-selected': isSelected(),
-      'aria-disabled': isDisabled() || undefined,
-      'aria-controls': isSelected() ? tabPanelId : undefined,
-      'aria-label': props['aria-label'],
-      tabIndex: isSelected() && !isDisabled() ? 0 : -1,
+      role: "tab",
+      get "aria-selected"() {
+        return isSelected();
+      },
+      get "aria-disabled"() {
+        return isDisabled() || undefined;
+      },
+      get "aria-controls"() {
+        return isSelected() ? tabPanelId : undefined;
+      },
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"],
+      get tabIndex() {
+        return isSelected() && !isDisabled() ? 0 : -1;
+      },
       onKeyDown: handleKeyDown,
       onMouseDown: handleMouseDown,
       onPointerDown: handlePointerDown,
@@ -439,31 +435,46 @@ export function createTab<T>(
  */
 export function createTabPanel<T>(
   props: AriaTabPanelProps,
-  state: TabListState<T> | null
+  state: TabListState<T> | null,
 ): TabPanelAria {
-  // If state is null, the panel is always visible (for SSR scenarios)
+  const fallbackId = createId();
+
+  // Shared panel pattern: if no explicit id is provided, associate the panel
+  // with the currently selected tab.
+  const associatedKey = createMemo<Key | null>(() => {
+    if (state === null) return null;
+    return props.id ?? state.selectedKey();
+  });
+
+  // If state is null, the panel is always visible (SSR fallback).
   const isSelected = createMemo(() => {
     if (state === null) return true;
-    if (props.id === undefined) return false;
+    if (props.id === undefined) {
+      return state.selectedKey() !== null;
+    }
     return state.selectedKey() === props.id;
   });
 
-  // Generate IDs based on the associated tab key
-  const tabPanelId = state && props.id !== undefined
-    ? generateTabPanelId(state, props.id)
-    : createId();
-
-  const tabId = state && props.id !== undefined
-    ? generateTabId(state, props.id)
-    : '';
-
   return {
     tabPanelProps: {
-      id: tabPanelId,
-      role: 'tabpanel',
-      'aria-labelledby': props['aria-labelledby'] ?? tabId,
-      'aria-label': props['aria-label'],
-      'aria-describedby': props['aria-describedby'],
+      get id() {
+        const key = associatedKey();
+        if (state && key !== null) {
+          return generateTabPanelId(state, key);
+        }
+        return fallbackId;
+      },
+      role: "tabpanel",
+      get "aria-labelledby"() {
+        if (props["aria-labelledby"]) return props["aria-labelledby"];
+        const key = associatedKey();
+        if (state && key !== null) {
+          return generateTabId(state, key);
+        }
+        return undefined;
+      },
+      "aria-label": props["aria-label"],
+      "aria-describedby": props["aria-describedby"],
       // Make panel focusable if no tabbable children
       tabIndex: 0,
     },

package/src/tabs/index.ts

@@ -11,4 +11,4 @@ export {
   type TabAria,
   type AriaTabPanelProps,
   type TabPanelAria,
-} from './createTabs';
+} from "./createTabs";