@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/tabs/createTabs.ts

@@ -3,20 +3,16 @@
  * Based on @react-aria/tabs.
  */
 
-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';
+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>>;
@@ -42,24 +38,26 @@ 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;
+    // React's bubbling onFocus/onBlur map to focusin/focusout in Solid; the
+    // tab list must observe focus entering/leaving its child tabs.
+    onFocusIn: (e: FocusEvent) => void;
+    onFocusOut: (e: FocusEvent) => void;
   };
 }
 
@@ -69,24 +67,28 @@ 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;
-    tabIndex: number;
+    role: "tab";
+    "aria-selected": boolean;
+    "aria-disabled": boolean | undefined;
+    "aria-controls": string | undefined;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    tabIndex: number | undefined;
     onKeyDown: (e: KeyboardEvent) => void;
     onMouseDown: (e: MouseEvent) => void;
     onPointerDown: (e: PointerEvent) => void;
     onClick: (e: MouseEvent) => void;
     onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
   };
   /** Whether the tab is selected. */
   isSelected: Accessor<boolean>;
@@ -106,31 +108,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 {
@@ -144,23 +142,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;
@@ -179,7 +173,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;
@@ -208,7 +202,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;
@@ -217,20 +211,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 {
+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 orientation = () => props.orientation ?? state.orientation() ?? "horizontal";
+  const keyboardActivation = () =>
+    props.keyboardActivation ?? state.keyboardActivation() ?? "automatic";
 
   const handleKeyDown = (e: KeyboardEvent) => {
     if (state.isDisabled()) return;
@@ -239,40 +227,40 @@ export function createTabList<T>(
     if (currentKey === null) return;
 
     let nextKey: Key | null = null;
-    const isHorizontal = orientation() === 'horizontal';
-    const isRTL = locale().direction === 'rtl';
+    const isHorizontal = orientation() === "horizontal";
+    const isRTL = locale().direction === "rtl";
 
     switch (e.key) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         if (isHorizontal) {
           nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
         }
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         if (isHorizontal) {
           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();
         }
@@ -284,6 +272,11 @@ export function createTabList<T>(
     if (nextKey !== null) {
       e.preventDefault();
       state.setFocusedKey(nextKey);
+      // Selection follows focus only for keyboard navigation in automatic mode
+      // (mirrors useSelectableCollection's selectOnFocus in navigateToKey).
+      if (keyboardActivation() === "automatic") {
+        state.setSelectedKey(nextKey);
+      }
     }
   };
 
@@ -306,14 +299,14 @@ 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,
+      onFocusIn: handleFocus,
+      onFocusOut: handleBlur,
     },
   };
 }
@@ -324,7 +317,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;
 
@@ -334,24 +327,35 @@ export function createTab<T>(
     return state.isKeyDisabled(key());
   });
 
-  const isFocused = createMemo(() => state.focusedKey() === key());
+  // Whether this tab is the roving-focus target (state layer), used for the
+  // roving tabIndex and DOM focus alignment. The returned isFocused is the
+  // DOM-focus-based ring state, matching upstream's useFocusRing semantics.
+  const isKeyFocused = createMemo(() => state.focusedKey() === key());
 
   // Focus ring
-  const { isFocusVisible, focusProps } = createFocusRing();
-
-  // Press handling
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  // Press handling. Selection timing mirrors useSelectableItem's default
+  // (non-shouldSelectOnPressUp) path: mouse selects on press start and
+  // keyboard on key down, while touch, pen, and virtual pointers select on
+  // press up.
+  const selectTab = () => {
+    const tabKey = key();
+    state.setFocusedKey(tabKey);
+    state.setSelectedKey(tabKey);
+  };
   const { isPressed, pressProps } = createPress({
     get isDisabled() {
       return isDisabled();
     },
-    onPress: () => {
-      const tabKey = key();
-      const wasSelected = state.selectedKey() === tabKey;
-
-      state.setFocusedKey(tabKey);
-
-      if (state.keyboardActivation() === 'manual' || wasSelected) {
-        state.setSelectedKey(tabKey);
+    onPressStart: (e) => {
+      if (e.pointerType === "mouse" || e.pointerType === "keyboard") {
+        selectTab();
+      }
+    },
+    onPress: (e) => {
+      if (e.pointerType === "touch" || e.pointerType === "pen" || e.pointerType === "virtual") {
+        selectTab();
       }
     },
   });
@@ -369,15 +373,11 @@ export function createTab<T>(
 
   // Helper to safely call event handlers that may be bound tuples
   const callHandler = <E extends Event>(handler: unknown, event: E) => {
-    if (typeof handler === 'function') {
+    if (typeof handler === "function") {
       (handler as (e: E) => void)(event);
       return;
     }
-    if (
-      Array.isArray(handler) &&
-      handler.length >= 2 &&
-      typeof handler[1] === 'function'
-    ) {
+    if (Array.isArray(handler) && handler.length >= 2 && typeof handler[1] === "function") {
       (handler[1] as (this: unknown, e: E) => void).call(handler[0], event);
     }
   };
@@ -388,6 +388,10 @@ export function createTab<T>(
     callHandler(focusProps.onFocus, e);
   };
 
+  const handleBlur = (e: FocusEvent) => {
+    callHandler(focusProps.onBlur, e);
+  };
+
   // Combine all handlers
   const handleKeyDown = (e: KeyboardEvent) => {
     callHandler(pressProps.onKeyDown, e);
@@ -405,10 +409,13 @@ export function createTab<T>(
     callHandler(pressProps.onClick, e);
   };
 
-  // Keep DOM focus aligned with focusedKey updates from keyboard delegate.
+  // Keep DOM focus aligned with focusedKey updates from keyboard navigation.
+  // Only while the tab list itself is focused (mirrors useSelectableItem's
+  // manager.isFocused guard), so programmatic selection changes don't steal
+  // focus from elsewhere in the document.
   createEffect(() => {
     const element = ref?.();
-    if (!isFocused() || !element) return;
+    if (!state.isFocused() || !isKeyFocused() || !element) return;
 
     const activeElement = element.ownerDocument?.activeElement;
     if (activeElement !== element) {
@@ -419,25 +426,30 @@ export function createTab<T>(
   return {
     tabProps: {
       id: tabId,
-      role: 'tab',
-      get 'aria-selected'() {
+      role: "tab",
+      get "aria-selected"() {
         return isSelected();
       },
-      get 'aria-disabled'() {
+      get "aria-disabled"() {
         return isDisabled() || undefined;
       },
-      get 'aria-controls'() {
+      get "aria-controls"() {
         return isSelected() ? tabPanelId : undefined;
       },
-      'aria-label': props['aria-label'],
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"],
       get tabIndex() {
-        return isSelected() && !isDisabled() ? 0 : -1;
+        // Roving tabIndex follows the focused key (mirrors useSelectableItem);
+        // disabled tabs get no tabIndex at all (mirrors useTab).
+        if (isDisabled()) return undefined;
+        return isKeyFocused() ? 0 : -1;
       },
       onKeyDown: handleKeyDown,
       onMouseDown: handleMouseDown,
       onPointerDown: handlePointerDown,
       onClick: handleClick,
       onFocus: handleFocus,
+      onBlur: handleBlur,
     },
     isSelected,
     isDisabled,
@@ -453,7 +465,7 @@ export function createTab<T>(
  */
 export function createTabPanel<T>(
   props: AriaTabPanelProps,
-  state: TabListState<T> | null
+  state: TabListState<T> | null,
 ): TabPanelAria {
   const fallbackId = createId();
 
@@ -482,17 +494,17 @@ export function createTabPanel<T>(
         }
         return fallbackId;
       },
-      role: 'tabpanel',
-      get 'aria-labelledby'() {
-        if (props['aria-labelledby']) return props['aria-labelledby'];
+      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'],
+      "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";