@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/focus/index.ts

@@ -0,0 +1,35 @@
+// FocusScope
+export {
+  FocusScope,
+  useFocusManager,
+  type FocusScopeProps,
+  type FocusManager,
+  type FocusManagerOptions,
+} from './FocusScope';
+
+// Focus Restoration
+export {
+  createFocusRestore,
+  pushFocusStack,
+  popFocusStack,
+  getFocusStackLength,
+  clearFocusStack,
+  type FocusRestoreOptions,
+  type FocusRestoreResult,
+} from './createFocusRestore';
+
+// Virtual Focus
+export {
+  createVirtualFocus,
+  type VirtualFocusOptions,
+  type VirtualFocusResult,
+} from './createVirtualFocus';
+
+// Auto Focus
+export {
+  createAutoFocus,
+  clearAutoFocusQueue,
+  getAutoFocusQueueLength,
+  type AutoFocusOptions,
+  type AutoFocusResult,
+} from './createAutoFocus';

package/src/form/createFormReset.ts

@@ -0,0 +1,51 @@
+/**
+ * createFormReset - Handles form reset events for form fields.
+ *
+ * Resets the field value to its default when the containing form is reset.
+ * Port of @react-aria/utils useFormReset.
+ */
+
+import { type Accessor, createEffect, onCleanup } from 'solid-js';
+
+export interface FormResetOptions<T> {
+  /** The default value to reset to. */
+  defaultValue: T;
+  /** Function to set the current value. */
+  onReset: (value: T) => void;
+}
+
+/**
+ * Listens for form reset events and resets the field value to its default.
+ *
+ * @example
+ * ```tsx
+ * createFormReset(
+ *   () => inputRef,
+ *   { label: 'Default' },
+ *   (value) => state.setSelectedKey(value.key)
+ * );
+ * ```
+ */
+export function createFormReset<T>(
+  ref: Accessor<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined>,
+  defaultValue: T,
+  onReset: (value: T) => void
+): void {
+  createEffect(() => {
+    const element = ref();
+    if (!element) return;
+
+    const form = element.form;
+    if (!form) return;
+
+    const handleReset = () => {
+      onReset(defaultValue);
+    };
+
+    form.addEventListener('reset', handleReset);
+
+    onCleanup(() => {
+      form.removeEventListener('reset', handleReset);
+    });
+  });
+}

package/src/form/createFormValidation.ts

@@ -0,0 +1,224 @@
+/**
+ * createFormValidation hook for solidaria
+ *
+ * Connects form validation state to native HTML form validation.
+ * Handles the invalid event, form reset, and focus management.
+ *
+ * Port of react-aria's useFormValidation.
+ */
+
+import { type Accessor, createEffect, onCleanup } from 'solid-js';
+import {
+  type FormValidationState,
+  type ValidationResult,
+} from '@proyecto-viviana/solid-stately';
+import { setInteractionModality } from '../interactions/createInteractionModality';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ValidatableElement =
+  | HTMLInputElement
+  | HTMLTextAreaElement
+  | HTMLSelectElement;
+
+export type ValidationBehavior = 'aria' | 'native';
+
+export interface FormValidationProps {
+  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
+  validationBehavior?: ValidationBehavior;
+  /** Custom focus function to call on validation error. */
+  focus?: () => void;
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+function getValidity(input: ValidatableElement): ValidityState {
+  // Create a snapshot of the validity state (the native object is live)
+  const validity = input.validity;
+  return {
+    badInput: validity.badInput,
+    customError: validity.customError,
+    patternMismatch: validity.patternMismatch,
+    rangeOverflow: validity.rangeOverflow,
+    rangeUnderflow: validity.rangeUnderflow,
+    stepMismatch: validity.stepMismatch,
+    tooLong: validity.tooLong,
+    tooShort: validity.tooShort,
+    typeMismatch: validity.typeMismatch,
+    valueMissing: validity.valueMissing,
+    valid: validity.valid,
+  };
+}
+
+function getNativeValidity(input: ValidatableElement): ValidationResult {
+  return {
+    isInvalid: !input.validity.valid,
+    validationDetails: getValidity(input),
+    validationErrors: input.validationMessage ? [input.validationMessage] : [],
+  };
+}
+
+function getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {
+  for (let i = 0; i < form.elements.length; i++) {
+    const element = form.elements[i] as ValidatableElement;
+    if (!element.validity.valid) {
+      return element;
+    }
+  }
+  return null;
+}
+
+// ============================================
+// HOOK
+// ============================================
+
+/**
+ * Connects form validation state to a native HTML form input.
+ *
+ * This hook:
+ * - Sets custom validity on the native input based on validation state
+ * - Handles the 'invalid' event to commit validation and focus the first invalid input
+ * - Handles form reset to clear validation state
+ * - Handles input change to commit validation
+ *
+ * @example
+ * ```tsx
+ * function MyTextField(props) {
+ *   let inputRef: HTMLInputElement | undefined;
+ *
+ *   const validationState = createFormValidationState({
+ *     value: props.value,
+ *     validate: props.validate,
+ *     validationBehavior: 'native',
+ *   });
+ *
+ *   createFormValidation(
+ *     { validationBehavior: 'native' },
+ *     validationState,
+ *     () => inputRef
+ *   );
+ *
+ *   return (
+ *     <input
+ *       ref={inputRef}
+ *       value={props.value}
+ *       aria-invalid={validationState.displayValidation().isInvalid || undefined}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function createFormValidation(
+  props: FormValidationProps,
+  state: FormValidationState,
+  ref: Accessor<ValidatableElement | undefined>
+): void {
+  const validationBehavior = () => props.validationBehavior ?? 'aria';
+  const focus = () => props.focus;
+
+  // Track whether we should ignore form reset (for React-like programmatic resets)
+  let isIgnoredReset = false;
+
+  // Set custom validity on the native input
+  createEffect(() => {
+    const input = ref();
+    if (
+      validationBehavior() === 'native' &&
+      input &&
+      !input.disabled
+    ) {
+      const realtimeValidation = state.realtimeValidation();
+      const errorMessage = realtimeValidation.isInvalid
+        ? realtimeValidation.validationErrors.join(' ') || 'Invalid value.'
+        : '';
+      input.setCustomValidity(errorMessage);
+
+      // Prevent default tooltip for validation message
+      if (!input.hasAttribute('title')) {
+        input.title = '';
+      }
+
+      // Update validation with native validity if not already invalid
+      if (!realtimeValidation.isInvalid) {
+        state.updateValidation(getNativeValidity(input));
+      }
+    }
+  });
+
+  // Set up event listeners
+  createEffect(() => {
+    const input = ref();
+    if (!input) {
+      return;
+    }
+
+    const form = input.form;
+
+    // Handle invalid event
+    const onInvalid = (e: Event) => {
+      // Only commit validation if we are not already displaying one
+      if (!state.displayValidation().isInvalid) {
+        state.commitValidation();
+      }
+
+      // Auto focus the first invalid input in a form
+      if (!e.defaultPrevented && form && getFirstInvalidInput(form) === input) {
+        const focusFn = focus();
+        if (focusFn) {
+          focusFn();
+        } else {
+          input.focus();
+        }
+        // Always show focus ring
+        setInteractionModality('keyboard');
+      }
+
+      // Prevent default browser error UI
+      e.preventDefault();
+    };
+
+    // Handle change event
+    const onChange = () => {
+      state.commitValidation();
+    };
+
+    // Handle form reset
+    const onReset = () => {
+      if (!isIgnoredReset) {
+        state.resetValidation();
+      }
+    };
+
+    // Patch form.reset to detect programmatic resets
+    let originalReset: (() => void) | undefined;
+    if (form) {
+      originalReset = form.reset.bind(form);
+      form.reset = () => {
+        // Ignore programmatic resets outside user events
+        isIgnoredReset =
+          !window.event ||
+          (window.event.type === 'message' &&
+            window.event.target instanceof MessagePort);
+        originalReset?.();
+        isIgnoredReset = false;
+      };
+    }
+
+    input.addEventListener('invalid', onInvalid);
+    input.addEventListener('change', onChange);
+    form?.addEventListener('reset', onReset);
+
+    onCleanup(() => {
+      input.removeEventListener('invalid', onInvalid);
+      input.removeEventListener('change', onChange);
+      form?.removeEventListener('reset', onReset);
+      if (form && originalReset) {
+        form.reset = originalReset;
+      }
+    });
+  });
+}

package/src/form/index.ts

@@ -0,0 +1,11 @@
+export {
+  createFormValidation,
+  type FormValidationProps,
+  type ValidatableElement,
+  type ValidationBehavior,
+} from './createFormValidation';
+
+export {
+  createFormReset,
+  type FormResetOptions,
+} from './createFormReset';