@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/focus/index.ts

@@ -1,35 +0,0 @@
-// 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

@@ -1,51 +0,0 @@
-/**
- * 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

@@ -1,224 +0,0 @@
-/**
- * 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

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