@proyecto-viviana/solidaria 0.2.8 → 0.3.0

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,7 +68,7 @@ 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);
@@ -84,30 +76,44 @@ export function createTagGroup<T>(
   const errorMessageId = createId();
   const getFallbackAriaLabel = () => {
     const p = getProps();
-    return !p.label && !p['aria-label'] && !p['aria-labelledby'] ? 'Tag list' : undefined;
+    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'] ?? getFallbackAriaLabel(); },
-    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);
+      }
     });
   });
 
@@ -115,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);
@@ -124,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 {
@@ -134,12 +140,12 @@ export function createTagGroup<T>(
 
       return mergeProps(domProps(), fieldProps as Record<string, unknown>, {
         id,
-        role: hasItems ? 'listbox' : 'group',
-        'aria-multiselectable': hasItems && state.selectionMode() === 'multiple' ? true : undefined,
-        '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";

package/src/toast/createToast.ts

@@ -6,13 +6,9 @@
  * Port of @react-aria/toast useToast.
  */
 
-import { type JSX, createMemo } from 'solid-js';
-import { type QueuedToast, type ToastState } from '@proyecto-viviana/solid-stately';
-import { createId } from '../ssr';
-
-// ============================================
-// TYPES
-// ============================================
+import { type JSX, createMemo } from "solid-js";
+import { type QueuedToast, type ToastState } from "@proyecto-viviana/solid-stately";
+import { createId } from "../ssr";
 
 export interface AriaToastProps<T> {
   /** The toast to display. */
@@ -38,10 +34,6 @@ export interface ToastAria {
   closeButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for a Toast component.
  *
@@ -83,19 +75,19 @@ export function createToast<T>(props: AriaToastProps<T>): ToastAria {
 
   // Toast container - role="alertdialog" for screen readers
   const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    role: 'alertdialog',
-    'aria-modal': 'false',
-    'aria-labelledby': hasTitle ? titleId : undefined,
-    'aria-describedby': hasDescription ? descriptionId : undefined,
-    'data-animation': props.toast.animation,
-    'data-key': props.toast.key,
+    role: "alertdialog",
+    "aria-modal": "false",
+    "aria-labelledby": hasTitle ? titleId : undefined,
+    "aria-describedby": hasDescription ? descriptionId : undefined,
+    "data-animation": props.toast.animation,
+    "data-key": props.toast.key,
   }));
 
   // Content area with role="alert" for immediate announcement
   const contentProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    role: 'alert',
-    'aria-atomic': 'true',
-    'aria-live': 'assertive',
+    role: "alert",
+    "aria-atomic": "true",
+    "aria-live": "assertive",
   }));
 
   // Title props
@@ -110,15 +102,25 @@ export function createToast<T>(props: AriaToastProps<T>): ToastAria {
 
   // Close button
   const closeButtonProps = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => ({
-    'aria-label': 'Close',
+    "aria-label": "Close",
     onClick: close,
   }));
 
   return {
-    get toastProps() { return toastProps(); },
-    get contentProps() { return contentProps(); },
-    get titleProps() { return titleProps(); },
-    get descriptionProps() { return descriptionProps(); },
-    get closeButtonProps() { return closeButtonProps(); },
+    get toastProps() {
+      return toastProps();
+    },
+    get contentProps() {
+      return contentProps();
+    },
+    get titleProps() {
+      return titleProps();
+    },
+    get descriptionProps() {
+      return descriptionProps();
+    },
+    get closeButtonProps() {
+      return closeButtonProps();
+    },
   };
 }