@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/tag/createTag.ts

@@ -7,19 +7,15 @@
  * Based on @react-aria/tag useTag
  */
 
-import { createMemo } from 'solid-js';
-import { createFocusable } from '../interactions/createFocusable';
-import { createPress } from '../interactions/createPress';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { getTagGroupData } from './createTagGroup';
-import type { ListState, Key } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo } from "solid-js";
+import { createFocusable } from "../interactions/createFocusable";
+import { createPress } from "../interactions/createPress";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { mergeProps } from "../utils/mergeProps";
+import { createId } from "../ssr";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { getTagGroupData } from "./createTagGroup";
+import type { ListState, Key } from "@proyecto-viviana/solid-stately";
 
 export interface AriaTagProps {
   /** The unique key for this tag. */
@@ -49,10 +45,6 @@ export interface TagAria {
   isPressed: boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a tag component.
  * Tags are individual items within a TagGroup.
@@ -60,7 +52,7 @@ export interface TagAria {
 export function createTag<T>(
   props: MaybeAccessor<AriaTagProps>,
   state: ListState<T>,
-  ref: () => HTMLElement | null
+  ref: () => HTMLElement | null,
 ): TagAria {
   const getProps = () => access(props);
   const rowId = createId();
@@ -83,39 +75,147 @@ export function createTag<T>(
     return state.isSelected(key());
   });
 
+  const isSelectable = createMemo(() => state.selectionMode() !== "none");
+
   const isFocused = createMemo(() => {
     return state.focusedKey() === key();
   });
 
+  const getFirstFocusableKey = (): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getFirstKey();
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyAfter(candidate);
+    }
+    return candidate;
+  };
+
+  const getLastFocusableKey = (): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getLastKey();
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyBefore(candidate);
+    }
+    return candidate;
+  };
+
+  const getNextFocusableKey = (fromKey: Key): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getKeyAfter(fromKey);
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyAfter(candidate);
+    }
+
+    if (candidate != null) {
+      return candidate;
+    }
+
+    return getFirstFocusableKey();
+  };
+
+  const getPreviousFocusableKey = (fromKey: Key): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getKeyBefore(fromKey);
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyBefore(candidate);
+    }
+
+    if (candidate != null) {
+      return candidate;
+    }
+
+    return getLastFocusableKey();
+  };
+
+  const focusKey = (nextKey: Key | null) => {
+    if (nextKey == null) {
+      return;
+    }
+
+    state.setFocusedKey(nextKey);
+    const currentElement = ref();
+
+    if (!currentElement) {
+      return;
+    }
+
+    if (nextKey === key()) {
+      currentElement.focus();
+      return;
+    }
+
+    const tagList = currentElement.parentElement;
+    if (!tagList) {
+      return;
+    }
+
+    const nextTag = Array.from(tagList.querySelectorAll<HTMLElement>('[role="row"]')).find(
+      (el) => el.getAttribute("data-key") === String(nextKey),
+    );
+
+    nextTag?.focus();
+  };
+
   // Handle press for selection
   const { pressProps, isPressed } = createPress({
     isDisabled,
     onPress: () => {
       if (!isDisabled()) {
+        state.setFocusedKey(key());
         state.toggleSelection(key());
       }
     },
   });
 
   // Handle focusable
-  const { focusableProps } = createFocusable({
-    isDisabled,
-  }, ref);
+  const { focusableProps } = createFocusable(
+    {
+      isDisabled,
+      onFocus: () => {
+        state.setFocusedKey(key());
+      },
+    },
+    ref,
+  );
 
-  // Handle keyboard for removal
+  // Handle keyboard for navigation and removal
   const handleKeyDown = (e: KeyboardEvent) => {
     if (isDisabled()) return;
 
-    if (e.key === 'Delete' || e.key === 'Backspace') {
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault();
+        focusKey(getNextFocusableKey(key()));
+        return;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault();
+        focusKey(getPreviousFocusableKey(key()));
+        return;
+      case "Home":
+        e.preventDefault();
+        focusKey(getFirstFocusableKey());
+        return;
+      case "End":
+        e.preventDefault();
+        focusKey(getLastFocusableKey());
+        return;
+      default:
+        break;
+    }
+
+    if (e.key === "Delete" || e.key === "Backspace") {
       e.preventDefault();
       const data = getData();
       if (data?.onRemove) {
         // Remove selected keys if this tag is selected, otherwise just this tag
         if (isSelected()) {
           const selection = state.selectedKeys();
-          const keysToRemove = selection === 'all'
-            ? new Set(Array.from(state.collection()).map(item => (item as { key: Key }).key))
-            : new Set(selection);
+          const keysToRemove =
+            selection === "all"
+              ? new Set(Array.from(state.collection()).map((item) => (item as { key: Key }).key))
+              : new Set(selection);
           data.onRemove(keysToRemove);
         } else {
           data.onRemove(new Set([key()]));
@@ -127,10 +227,35 @@ export function createTag<T>(
   // Compute tabIndex
   const tabIndex = createMemo(() => {
     if (isDisabled()) return -1;
-    // If this is the focused item, or if nothing is focused yet
-    if (isFocused() || state.focusedKey() === null) {
+
+    if (isFocused()) {
       return 0;
     }
+
+    if (state.focusedKey() !== null) {
+      return -1;
+    }
+
+    const collection = state.collection();
+    let defaultTabStop: Key | null = null;
+
+    if (state.selectionMode() !== "none") {
+      for (const item of collection) {
+        if (!state.isDisabled(item.key) && state.isSelected(item.key)) {
+          defaultTabStop = item.key;
+          break;
+        }
+      }
+    }
+
+    if (defaultTabStop == null) {
+      defaultTabStop = getFirstFocusableKey();
+    }
+
+    if (key() === defaultTabStop) {
+      return 0;
+    }
+
     return -1;
   });
 
@@ -145,28 +270,34 @@ export function createTag<T>(
 
   return {
     get rowProps() {
-      return mergeProps(domProps(), focusableProps as Record<string, unknown>, pressProps as Record<string, unknown>, {
-        id: rowId,
-        role: 'row',
-        tabIndex: tabIndex(),
-        'aria-selected': isSelected(),
-        'aria-disabled': isDisabled() || undefined,
-        onKeyDown: handleKeyDown,
-      });
+      return mergeProps(
+        domProps(),
+        focusableProps as Record<string, unknown>,
+        pressProps as Record<string, unknown>,
+        {
+          id: rowId,
+          role: "row",
+          tabIndex: tabIndex(),
+          "data-key": String(key()),
+          "aria-selected": isSelectable() ? isSelected() : undefined,
+          "aria-disabled": isDisabled() || undefined,
+          onKeyDown: handleKeyDown,
+        },
+      );
     },
     get gridCellProps() {
       return {
         id: cellId,
-        role: 'gridcell',
-        'aria-describedby': allowsRemoving() ? removeButtonId : undefined,
+        role: "gridcell",
+        "aria-describedby": allowsRemoving() ? removeButtonId : undefined,
       };
     },
     get removeButtonProps() {
       const data = getData();
       return {
         id: removeButtonId,
-        'aria-label': 'Remove',
-        'aria-labelledby': `${removeButtonId} ${rowId}`,
+        "aria-label": "Remove",
+        "aria-labelledby": `${removeButtonId} ${rowId}`,
         isDisabled: isDisabled(),
         onPress: () => {
           if (data?.onRemove && !isDisabled()) {

package/src/tag/createTagGroup.ts

@@ -8,17 +8,13 @@
  * Based on @react-aria/tag useTagGroup
  */
 
-import { createEffect, onCleanup } from 'solid-js';
-import { createLabel } from '../label/createLabel';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { ListState, Key } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { createEffect, onCleanup } from "solid-js";
+import { createLabel } from "../label/createLabel";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { mergeProps } from "../utils/mergeProps";
+import { createId } from "../ssr";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import type { ListState, Key } from "@proyecto-viviana/solid-stately";
 
 export interface AriaTagGroupProps {
   /** An ID for the tag group. */
@@ -28,11 +24,11 @@ export interface AriaTagGroupProps {
   /** The label for the tag group. */
   label?: string;
   /** An accessible label for the tag group when no visible label is provided. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the tag group. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the tag group. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** A description of the tag group. */
   description?: string;
   /** An error message for the tag group. */
@@ -64,10 +60,6 @@ export function getTagGroupData(state: ListState): TagGroupData | undefined {
   return tagGroupData.get(state);
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a tag group component.
  * A tag group is a focusable list of labels, categories, keywords, filters, or other items,
@@ -76,34 +68,52 @@ export function getTagGroupData(state: ListState): TagGroupData | undefined {
 export function createTagGroup<T>(
   props: MaybeAccessor<AriaTagGroupProps>,
   state: ListState<T>,
-  _ref?: () => HTMLElement | null
+  _ref?: () => HTMLElement | null,
 ): TagGroupAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
   const descriptionId = createId();
   const errorMessageId = createId();
+  const getFallbackAriaLabel = () => {
+    const p = getProps();
+    return !p.label && !p["aria-label"] && !p["aria-labelledby"] ? "Tag list" : undefined;
+  };
+  const sharedData: TagGroupData = {
+    id,
+    get onRemove() {
+      return getProps().onRemove;
+    },
+  };
 
   // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+  const domProps = () =>
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
 
   // Create label handling
   const { labelProps, fieldProps } = createLabel({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
-    labelElementType: 'span',
+    get label() {
+      return getProps().label;
+    },
+    get "aria-label"() {
+      return getProps()["aria-label"] ?? getFallbackAriaLabel();
+    },
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
+    },
+    labelElementType: "span",
   });
 
-  // Share data with child tags
+  // Share data with child tags before they create their aria state.
+  tagGroupData.set(state, sharedData);
+
+  // Clean up the shared state when the tag group owner is disposed.
   createEffect(() => {
-    const p = getProps();
-    tagGroupData.set(state, {
-      id,
-      onRemove: p.onRemove,
-    });
+    tagGroupData.set(state, sharedData);
 
     onCleanup(() => {
-      tagGroupData.delete(state);
+      if (tagGroupData.get(state) === sharedData) {
+        tagGroupData.delete(state);
+      }
     });
   });
 
@@ -111,8 +121,8 @@ export function createTagGroup<T>(
   const getAriaDescribedBy = () => {
     const p = getProps();
     const ids: string[] = [];
-    if (p['aria-describedby']) {
-      ids.push(p['aria-describedby']);
+    if (p["aria-describedby"]) {
+      ids.push(p["aria-describedby"]);
     }
     if (p.description) {
       ids.push(descriptionId);
@@ -120,7 +130,7 @@ export function createTagGroup<T>(
     if (p.errorMessage) {
       ids.push(errorMessageId);
     }
-    return ids.length > 0 ? ids.join(' ') : undefined;
+    return ids.length > 0 ? ids.join(" ") : undefined;
   };
 
   return {
@@ -130,11 +140,12 @@ export function createTagGroup<T>(
 
       return mergeProps(domProps(), fieldProps as Record<string, unknown>, {
         id,
-        role: hasItems ? 'grid' : 'group',
-        'aria-atomic': false,
-        'aria-relevant': 'additions',
-        'aria-describedby': getAriaDescribedBy(),
-        'aria-disabled': p.isDisabled || undefined,
+        role: hasItems ? "grid" : "group",
+        "aria-multiselectable": hasItems && state.selectionMode() === "multiple" ? true : undefined,
+        "aria-atomic": false,
+        "aria-relevant": "additions",
+        "aria-describedby": getAriaDescribedBy(),
+        "aria-disabled": p.isDisabled || undefined,
       });
     },
     get labelProps() {

package/src/tag/index.ts

@@ -3,10 +3,6 @@ export {
   getTagGroupData,
   type AriaTagGroupProps,
   type TagGroupAria,
-} from './createTagGroup';
+} from "./createTagGroup";
 
-export {
-  createTag,
-  type AriaTagProps,
-  type TagAria,
-} from './createTag';
+export { createTag, type AriaTagProps, type TagAria } from "./createTag";

package/src/textfield/createTextField.ts

@@ -6,17 +6,13 @@
  * This is a 1:1 port of @react-aria/textfield's useTextField hook.
  */
 
-import { JSX } from 'solid-js';
-import { createField, type AriaFieldProps, type FieldAria } from '../label';
-import { createFocusable, type FocusableProps } from '../interactions';
-import { mergeProps, filterDOMProps } from '../utils';
-import { type MaybeAccessor, access } from '../utils/reactivity';
+import { JSX } from "solid-js";
+import { createField, type AriaFieldProps, type FieldAria } from "../label";
+import { createFocusable, type FocusableDOMProps, type FocusableProps } from "../interactions";
+import { mergeProps, filterDOMProps } from "../utils";
+import { type MaybeAccessor, access } from "../utils/reactivity";
 
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaTextFieldProps extends AriaFieldProps, FocusableProps {
+export interface AriaTextFieldProps extends AriaFieldProps, FocusableProps, FocusableDOMProps {
   /** The current value (controlled). */
   value?: string;
   /** The default value (uncontrolled). */
@@ -29,12 +25,18 @@ export interface AriaTextFieldProps extends AriaFieldProps, FocusableProps {
   isReadOnly?: boolean;
   /** Whether the input is required. */
   isRequired?: boolean;
+  /** Whether to use native HTML form validation or ARIA validation semantics. */
+  validationBehavior?: "aria" | "native";
   /** The type of input to render. */
-  type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string;
+  type?: "text" | "search" | "url" | "tel" | "email" | "password" | string;
   /** The input mode hint for virtual keyboards. */
-  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+  inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+  /** Hint for the enter key action on virtual keyboards. */
+  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
   /** The name of the input element, used when submitting an HTML form. */
   name?: string;
+  /** Associates the input with a form element by id. */
+  form?: string;
   /** Regex pattern to validate the input value. */
   pattern?: string;
   /** The maximum number of characters supported by the input. */
@@ -48,11 +50,11 @@ export interface AriaTextFieldProps extends AriaFieldProps, FocusableProps {
   /** Whether to enable auto correct. */
   autoCorrect?: string;
   /** Whether to enable spell check. */
-  spellCheck?: 'true' | 'false';
+  spellCheck?: "true" | "false";
   /** Controls whether and how text input is automatically capitalized. */
-  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
   /** The element type to use for the input. Defaults to 'input'. */
-  inputElementType?: 'input' | 'textarea';
+  inputElementType?: "input" | "textarea";
 
   // Clipboard events
   onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;
@@ -72,17 +74,15 @@ export interface AriaTextFieldProps extends AriaFieldProps, FocusableProps {
   onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
 }
 
-export interface TextFieldAria<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends Omit<FieldAria, 'fieldProps'> {
+export interface TextFieldAria<
+  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
+> extends Omit<FieldAria, "fieldProps"> {
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<T>;
   /** Whether the text field is invalid. */
   isInvalid: boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a text field.
  * Text fields allow users to input text with a keyboard.
@@ -90,11 +90,26 @@ export interface TextFieldAria<T extends HTMLInputElement | HTMLTextAreaElement
  * @param props - Props for the text field.
  * @param ref - Optional ref callback for the input element.
  */
-export function createTextField<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(
-  props: MaybeAccessor<AriaTextFieldProps>,
-  ref?: (el: T) => void
-): TextFieldAria<T> {
+export function createTextField<
+  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
+>(props: MaybeAccessor<AriaTextFieldProps>, ref?: (el: T) => void): TextFieldAria<T> {
   const getProps = () => access(props);
+  let lastInputValue: string | undefined;
+
+  const eventWithCurrentTarget = (
+    event: InputEvent,
+    element: HTMLInputElement | HTMLTextAreaElement,
+  ) =>
+    new Proxy(event, {
+      get(target, property, receiver) {
+        if (property === "target" || property === "currentTarget") {
+          return element;
+        }
+
+        const value = Reflect.get(target, property, receiver);
+        return typeof value === "function" ? value.bind(target) : value;
+      },
+    });
 
   // Get field accessibility props (label, description, error message)
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);
@@ -108,41 +123,50 @@ export function createTextField<T extends HTMLInputElement | HTMLTextAreaElement
       get autoFocus() {
         return getProps().autoFocus;
       },
+      get excludeFromTabOrder() {
+        return getProps().excludeFromTabOrder;
+      },
       onFocus: getProps().onFocus,
       onBlur: getProps().onBlur,
       onFocusChange: getProps().onFocusChange,
       onKeyDown: getProps().onKeyDown,
       onKeyUp: getProps().onKeyUp,
     },
-    ref as ((el: HTMLElement) => void) | undefined
+    ref as ((el: HTMLElement) => void) | undefined,
   );
 
   // Filter DOM props
-  const getDomProps = () => filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });
+  const getDomProps = () =>
+    filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });
 
   // Build input props
   const getInputProps = (): JSX.InputHTMLAttributes<T> => {
     const p = getProps();
     const isInvalid = p.isInvalid ?? false;
-    const isTextarea = p.inputElementType === 'textarea';
+    const isTextarea = p.inputElementType === "textarea";
+    const validationBehavior = p.validationBehavior ?? "native";
 
     return mergeProps(
       getDomProps(),
       {
         disabled: p.isDisabled,
         readOnly: p.isReadOnly,
-        required: p.isRequired,
-        'aria-required': p.isRequired || undefined,
-        'aria-invalid': isInvalid || undefined,
-        value: p.value ?? p.defaultValue ?? '',
+        required: validationBehavior === "native" && p.isRequired,
+        "aria-required": (validationBehavior === "aria" && p.isRequired) || undefined,
+        "aria-invalid": isInvalid || undefined,
+        value: p.value ?? p.defaultValue ?? "",
         onChange: (e: Event) => {
           const target = e.target as HTMLInputElement | HTMLTextAreaElement;
-          p.onChange?.(target.value);
+          if (target.value !== lastInputValue) {
+            p.onChange?.(target.value);
+          }
         },
         // Don't include type and pattern for textarea elements
-        type: isTextarea ? undefined : (p.type ?? 'text'),
+        type: isTextarea ? undefined : (p.type ?? "text"),
         inputMode: p.inputMode,
+        enterKeyHint: p.enterKeyHint,
         name: p.name,
+        form: p.form,
         pattern: isTextarea ? undefined : p.pattern,
         maxLength: p.maxLength,
         minLength: p.minLength,
@@ -167,10 +191,18 @@ export function createTextField<T extends HTMLInputElement | HTMLTextAreaElement
 
         // Input events
         onBeforeInput: p.onBeforeInput,
-        onInput: p.onInput,
+        onInput: (e: InputEvent) => {
+          const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+          const nextValue = target.value;
+          p.onInput?.(
+            eventWithCurrentTarget(e, target) as Parameters<NonNullable<typeof p.onInput>>[0],
+          );
+          lastInputValue = nextValue;
+          p.onChange?.(nextValue);
+        },
       },
       focusableProps as Record<string, unknown>,
-      fieldProps as Record<string, unknown>
+      fieldProps as Record<string, unknown>,
     ) as JSX.InputHTMLAttributes<T>;
   };
 

package/src/textfield/index.ts

@@ -1,5 +1 @@
-export {
-  createTextField,
-  type AriaTextFieldProps,
-  type TextFieldAria,
-} from './createTextField';
+export { createTextField, type AriaTextFieldProps, type TextFieldAria } from "./createTextField";