@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/form/createFormValidationState.d.ts

@@ -6,63 +6,63 @@
  *
  * Port of react-stately's useFormValidationState.
  */
-import { type Accessor } from 'solid-js';
+import { type Accessor } from "solid-js";
 /** Standard HTML ValidityState interface. */
 export interface ValidityState {
-    badInput: boolean;
-    customError: boolean;
-    patternMismatch: boolean;
-    rangeOverflow: boolean;
-    rangeUnderflow: boolean;
-    stepMismatch: boolean;
-    tooLong: boolean;
-    tooShort: boolean;
-    typeMismatch: boolean;
-    valueMissing: boolean;
-    valid: boolean;
+  badInput: boolean;
+  customError: boolean;
+  patternMismatch: boolean;
+  rangeOverflow: boolean;
+  rangeUnderflow: boolean;
+  stepMismatch: boolean;
+  tooLong: boolean;
+  tooShort: boolean;
+  typeMismatch: boolean;
+  valueMissing: boolean;
+  valid: boolean;
 }
 /** Result of validation. */
 export interface ValidationResult {
-    /** Whether the value is invalid. */
-    isInvalid: boolean;
-    /** Details about which validation constraints failed. */
-    validationDetails: ValidityState;
-    /** Error messages to display. */
-    validationErrors: string[];
+  /** Whether the value is invalid. */
+  isInvalid: boolean;
+  /** Details about which validation constraints failed. */
+  validationDetails: ValidityState;
+  /** Error messages to display. */
+  validationErrors: string[];
 }
 /** Map of field names to their validation errors. */
 export type ValidationErrors = Record<string, string | string[]>;
 /** Validation function that returns error messages or true/false. */
 export type ValidationFunction<T> = (value: T) => boolean | string | string[] | null | undefined;
 /** Validation behavior mode. */
-export type ValidationBehavior = 'aria' | 'native';
+export type ValidationBehavior = "aria" | "native";
 export interface FormValidationProps<T> {
-    /** Whether the value is invalid (controlled). */
-    isInvalid?: boolean;
-    /** @deprecated Use isInvalid instead. */
-    validationState?: 'valid' | 'invalid';
-    /** Custom validation function. */
-    validate?: ValidationFunction<T>;
-    /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
-    validationBehavior?: ValidationBehavior;
-    /** Built-in validation result from native input. */
-    builtinValidation?: ValidationResult;
-    /** Field name(s) for server error lookup. */
-    name?: string | string[];
-    /** Current field value. */
-    value: T | null;
+  /** Whether the value is invalid (controlled). */
+  isInvalid?: boolean;
+  /** @deprecated Use isInvalid instead. */
+  validationState?: "valid" | "invalid";
+  /** Custom validation function. */
+  validate?: ValidationFunction<T>;
+  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
+  validationBehavior?: ValidationBehavior;
+  /** Built-in validation result from native input. */
+  builtinValidation?: ValidationResult;
+  /** Field name(s) for server error lookup. */
+  name?: string | string[];
+  /** Current field value. */
+  value: T | null;
 }
 export interface FormValidationState {
-    /** Realtime validation results, updated as the user edits the value. */
-    realtimeValidation: Accessor<ValidationResult>;
-    /** Currently displayed validation results, updated when the user commits their changes. */
-    displayValidation: Accessor<ValidationResult>;
-    /** Updates the current validation result. Not displayed to the user until `commitValidation` is called. */
-    updateValidation(result: ValidationResult): void;
-    /** Resets the displayed validation state to valid when the user resets the form. */
-    resetValidation(): void;
-    /** Commits the realtime validation so it is displayed to the user. */
-    commitValidation(): void;
+  /** Realtime validation results, updated as the user edits the value. */
+  realtimeValidation: Accessor<ValidationResult>;
+  /** Currently displayed validation results, updated when the user commits their changes. */
+  displayValidation: Accessor<ValidationResult>;
+  /** Updates the current validation result. Not displayed to the user until `commitValidation` is called. */
+  updateValidation(result: ValidationResult): void;
+  /** Resets the displayed validation state to valid when the user resets the form. */
+  resetValidation(): void;
+  /** Commits the realtime validation so it is displayed to the user. */
+  commitValidation(): void;
 }
 /** A valid validity state. */
 export declare const VALID_VALIDITY_STATE: ValidityState;
@@ -92,9 +92,11 @@ export declare const privateValidationStateProp: string;
  * const errors = () => validationState.displayValidation().validationErrors;
  * ```
  */
-export declare function createFormValidationState<T>(props: FormValidationProps<T>): FormValidationState;
+export declare function createFormValidationState<T>(
+  props: FormValidationProps<T>,
+): FormValidationState;
 /**
  * Merges multiple validation results into one.
  */
 export declare function mergeValidation(...results: ValidationResult[]): ValidationResult;
-//# sourceMappingURL=createFormValidationState.d.ts.map
+//# sourceMappingURL=createFormValidationState.d.ts.map

package/src/form/createFormValidationState.ts

@@ -14,11 +14,7 @@ import {
   createMemo,
   createSignal,
   useContext,
-} from 'solid-js';
-
-// ============================================
-// TYPES
-// ============================================
+} from "solid-js";
 
 /** Standard HTML ValidityState interface. */
 export interface ValidityState {
@@ -52,13 +48,13 @@ export type ValidationErrors = Record<string, string | string[]>;
 export type ValidationFunction<T> = (value: T) => boolean | string | string[] | null | undefined;
 
 /** Validation behavior mode. */
-export type ValidationBehavior = 'aria' | 'native';
+export type ValidationBehavior = "aria" | "native";
 
 export interface FormValidationProps<T> {
   /** Whether the value is invalid (controlled). */
   isInvalid?: boolean;
   /** @deprecated Use isInvalid instead. */
-  validationState?: 'valid' | 'invalid';
+  validationState?: "valid" | "invalid";
   /** Custom validation function. */
   validate?: ValidationFunction<T>;
   /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
@@ -84,10 +80,6 @@ export interface FormValidationState {
   commitValidation(): void;
 }
 
-// ============================================
-// CONSTANTS
-// ============================================
-
 /** A valid validity state. */
 export const VALID_VALIDITY_STATE: ValidityState = {
   badInput: false,
@@ -117,19 +109,11 @@ export const DEFAULT_VALIDATION_RESULT: ValidationResult = {
   validationErrors: [],
 };
 
-// ============================================
-// CONTEXT
-// ============================================
-
 /** Context for server-side validation errors. */
 export const FormValidationContext = createContext<ValidationErrors>({});
 
 /** Private prop key for passing validation state to children. */
-export const privateValidationStateProp = '__formValidationState' + Date.now();
-
-// ============================================
-// HELPERS
-// ============================================
+export const privateValidationStateProp = "__formValidationState" + Date.now();
 
 function asArray<T>(v: T | T[] | undefined): T[] {
   if (!v) {
@@ -139,9 +123,9 @@ function asArray<T>(v: T | T[] | undefined): T[] {
 }
 
 function runValidate<T>(validate: ValidationFunction<T>, value: T): string[] {
-  if (typeof validate === 'function') {
+  if (typeof validate === "function") {
     const e = validate(value);
-    if (e && typeof e !== 'boolean') {
+    if (e && typeof e !== "boolean") {
       return asArray(e);
     }
   }
@@ -158,10 +142,7 @@ function getValidationResult(errors: string[]): ValidationResult | null {
     : null;
 }
 
-function isEqualValidation(
-  a: ValidationResult | null,
-  b: ValidationResult | null
-): boolean {
+function isEqualValidation(a: ValidationResult | null, b: ValidationResult | null): boolean {
   if (a === b) {
     return true;
   }
@@ -172,15 +153,11 @@ function isEqualValidation(
     a.validationErrors.length === b.validationErrors.length &&
     a.validationErrors.every((ae, i) => ae === b.validationErrors[i]) &&
     Object.entries(a.validationDetails).every(
-      ([k, v]) => b.validationDetails[k as keyof ValidityState] === v
+      ([k, v]) => b.validationDetails[k as keyof ValidityState] === v,
     )
   );
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Creates form validation state for a field.
  *
@@ -201,21 +178,12 @@ function isEqualValidation(
  * const errors = () => validationState.displayValidation().validationErrors;
  * ```
  */
-export function createFormValidationState<T>(
-  props: FormValidationProps<T>
-): FormValidationState {
-  const {
-    isInvalid,
-    validationState,
-    name,
-    builtinValidation: builtinValidationProp,
-    validate,
-    validationBehavior = 'aria',
-  } = props;
+export function createFormValidationState<T>(props: FormValidationProps<T>): FormValidationState {
+  const validationBehavior = () => props.validationBehavior ?? "aria";
 
   // Backward compatibility
   const isInvalidProp = createMemo(
-    () => isInvalid ?? (validationState === 'invalid' ? true : undefined)
+    () => props.isInvalid ?? (props.validationState === "invalid" ? true : undefined),
   );
 
   // Controlled error from isInvalid prop
@@ -226,11 +194,12 @@ export function createFormValidationState<T>(
           validationErrors: [],
           validationDetails: CUSTOM_VALIDITY_STATE,
         }
-      : null
+      : null,
   );
 
   // Client-side validation
   const clientError = createMemo<ValidationResult | null>(() => {
+    const validate = props.validate;
     if (!validate || props.value == null) {
       return null;
     }
@@ -240,6 +209,7 @@ export function createFormValidationState<T>(
 
   // Built-in validation (skip if valid)
   const builtinValidation = createMemo<ValidationResult | undefined>(() => {
+    const builtinValidationProp = props.builtinValidation;
     if (builtinValidationProp?.validationDetails.valid) {
       return undefined;
     }
@@ -249,6 +219,7 @@ export function createFormValidationState<T>(
   // Server errors from context
   const serverErrors = useContext(FormValidationContext);
   const serverErrorMessages = createMemo(() => {
+    const name = props.name;
     if (name) {
       return Array.isArray(name)
         ? name.flatMap((n) => asArray(serverErrors[n]))
@@ -269,13 +240,11 @@ export function createFormValidationState<T>(
   });
 
   const serverError = createMemo<ValidationResult | null>(() =>
-    getValidationResult(isServerErrorCleared() ? [] : serverErrorMessages())
+    getValidationResult(isServerErrorCleared() ? [] : serverErrorMessages()),
   );
 
   // Track validation state
-  const [currentValidity, setCurrentValidity] = createSignal(
-    DEFAULT_VALIDATION_RESULT
-  );
+  const [currentValidity, setCurrentValidity] = createSignal(DEFAULT_VALIDATION_RESULT);
   const [commitQueued, setCommitQueued] = createSignal(false);
 
   let nextValidation = DEFAULT_VALIDATION_RESULT;
@@ -301,15 +270,13 @@ export function createFormValidationState<T>(
       serverError() ||
       clientError() ||
       builtinValidation() ||
-      DEFAULT_VALIDATION_RESULT
+      DEFAULT_VALIDATION_RESULT,
   );
 
   // Display validation (what the user sees)
   const displayValidation = createMemo<ValidationResult>(() => {
-    if (validationBehavior === 'native') {
-      return (
-        controlledError() || serverError() || currentValidity()
-      );
+    if (validationBehavior() === "native") {
+      return controlledError() || serverError() || currentValidity();
     }
     return (
       controlledError() ||
@@ -325,10 +292,7 @@ export function createFormValidationState<T>(
     displayValidation,
     updateValidation(value: ValidationResult) {
       // If validationBehavior is 'aria', update in realtime. Otherwise, store until commit.
-      if (
-        validationBehavior === 'aria' &&
-        !isEqualValidation(currentValidity(), value)
-      ) {
+      if (validationBehavior() === "aria" && !isEqualValidation(currentValidity(), value)) {
         setCurrentValidity(value);
       } else {
         nextValidation = value;
@@ -342,15 +306,20 @@ export function createFormValidationState<T>(
         setCurrentValidity(error);
       }
       // Do not commit validation after the next render for native behavior.
-      if (validationBehavior === 'native') {
+      if (validationBehavior() === "native") {
         setCommitQueued(false);
       }
       setServerErrorCleared(true);
     },
     commitValidation() {
       // Commit validation state so the user sees it on blur/change/submit.
-      if (validationBehavior === 'native') {
-        setCommitQueued(true);
+      if (validationBehavior() === "native") {
+        const error = clientError() || builtinValidation() || nextValidation;
+        if (!isEqualValidation(error, lastError)) {
+          lastError = error;
+          setCurrentValidity(error);
+        }
+        setCommitQueued(false);
       }
       setServerErrorCleared(true);
     },
@@ -360,9 +329,7 @@ export function createFormValidationState<T>(
 /**
  * Merges multiple validation results into one.
  */
-export function mergeValidation(
-  ...results: ValidationResult[]
-): ValidationResult {
+export function mergeValidation(...results: ValidationResult[]): ValidationResult {
   const errors = new Set<string>();
   let isInvalid = false;
   const validationDetails: ValidityState = { ...VALID_VALIDITY_STATE };

package/src/form/index.d.ts

@@ -1,2 +1,16 @@
-export { createFormValidationState, mergeValidation, FormValidationContext, privateValidationStateProp, VALID_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, type FormValidationState, type FormValidationProps, type ValidationResult, type ValidationErrors, type ValidationFunction, type ValidationBehavior, type ValidityState, } from './createFormValidationState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createFormValidationState,
+  mergeValidation,
+  FormValidationContext,
+  privateValidationStateProp,
+  VALID_VALIDITY_STATE,
+  DEFAULT_VALIDATION_RESULT,
+  type FormValidationState,
+  type FormValidationProps,
+  type ValidationResult,
+  type ValidationErrors,
+  type ValidationFunction,
+  type ValidationBehavior,
+  type ValidityState,
+} from "./createFormValidationState";
+//# sourceMappingURL=index.d.ts.map

package/src/form/index.ts

@@ -12,4 +12,4 @@ export {
   type ValidationFunction,
   type ValidationBehavior,
   type ValidityState,
-} from './createFormValidationState';
+} from "./createFormValidationState";

package/src/grid/createGridState.d.ts

@@ -2,11 +2,14 @@
  * Grid state management for Table and GridList components.
  * Based on @react-stately/grid/useGridState.
  */
-import { type Accessor } from 'solid-js';
-import type { GridState, GridStateOptions, GridCollection } from './types';
+import { type Accessor } from "solid-js";
+import type { GridState, GridStateOptions, GridCollection } from "./types";
 /**
  * Creates state management for a grid component.
  * Handles row selection, focus management, and keyboard navigation state.
  */
-export declare function createGridState<T extends object, C extends GridCollection<T> = GridCollection<T>>(options: Accessor<GridStateOptions<T, C>>): GridState<T, C>;
-//# sourceMappingURL=createGridState.d.ts.map
+export declare function createGridState<
+  T extends object,
+  C extends GridCollection<T> = GridCollection<T>,
+>(options: Accessor<GridStateOptions<T, C>>): GridState<T, C>;
+//# sourceMappingURL=createGridState.d.ts.map