@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/TextField.tsx

@@ -10,15 +10,27 @@ import {
   createContext,
   useContext,
   createMemo,
+  createSignal,
+  createEffect,
+  onCleanup,
+  onMount,
   splitProps,
-} from 'solid-js';
+  untrack,
+} from "solid-js";
 import {
   createTextField,
   createFocusRing,
   createHover,
+  mergeProps,
   type AriaTextFieldProps,
-} from '@proyecto-viviana/solidaria';
-import { createTextFieldState } from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solidaria";
+import {
+  createTextFieldState,
+  VALID_VALIDITY_STATE,
+  type ValidationResult,
+} from "@proyecto-viviana/solid-stately";
+import { FormContext, type FormProps } from "./Form";
+import { FieldErrorContext, type FieldErrorContextValue } from "./FieldError";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -26,11 +38,7 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
 
 export interface TextFieldRenderProps {
   /** Whether the text field is disabled. */
@@ -49,34 +57,85 @@ export interface TextFieldRenderProps {
   isFocusVisible: boolean;
 }
 
-export interface TextFieldProps
-  extends Omit<AriaTextFieldProps, 'children'>,
-    SlotProps {
+export interface TextFieldProps extends Omit<AriaTextFieldProps, "children">, SlotProps {
   /** The children of the component. A function may be provided to receive render props. */
   children?: RenderChildren<TextFieldRenderProps>;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<TextFieldRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<TextFieldRenderProps>;
+  /** Custom renderer for the outer text field element. */
+  render?: (
+    props: JSX.HTMLAttributes<HTMLDivElement>,
+    renderProps: TextFieldRenderProps,
+  ) => JSX.Element;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export interface TextFieldContextValue {
-  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
-  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
-  isInvalid: boolean;
+  labelProps?: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
+  descriptionProps?: JSX.HTMLAttributes<HTMLElement>;
+  errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;
+  isInvalid?: boolean;
+  slots?: Record<string, TextFieldProps>;
+  inputId?: string;
 }
 
 export const TextFieldContext = createContext<TextFieldContextValue | null>(null);
+export const LabelContext = TextFieldContext;
+export const InputContext = TextFieldContext;
+export const TextAreaContext = TextFieldContext;
+export const FieldInputContext = TextFieldContext;
+
+function withFormValidationBehavior(
+  props: TextFieldProps,
+  formContext: FormProps | null,
+): TextFieldProps {
+  if (!formContext?.validationBehavior) {
+    return props;
+  }
 
-// ============================================
-// SUB-COMPONENTS
-// ============================================
+  return new Proxy(props, {
+    get(target, property, receiver) {
+      const localValue = Reflect.get(target, property, receiver);
+      if (property === "validationBehavior" && localValue === undefined) {
+        return formContext.validationBehavior;
+      }
+
+      return localValue;
+    },
+    has(target, property) {
+      return (
+        Reflect.has(target, property) ||
+        (property === "validationBehavior" && formContext.validationBehavior !== undefined)
+      );
+    },
+    ownKeys(target) {
+      const keys = new Set(Reflect.ownKeys(target));
+      if (formContext.validationBehavior !== undefined) {
+        keys.add("validationBehavior");
+      }
+
+      return Array.from(keys);
+    },
+    getOwnPropertyDescriptor(target, property) {
+      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
+      if (descriptor) {
+        return descriptor;
+      }
+
+      if (property === "validationBehavior" && formContext.validationBehavior !== undefined) {
+        return {
+          enumerable: true,
+          configurable: true,
+          get: () => formContext.validationBehavior,
+        };
+      }
+
+      return undefined;
+    },
+  });
+}
 
 export interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
   children?: JSX.Element;
@@ -92,16 +151,49 @@ export function Label(props: LabelProps): JSX.Element {
   // Merge context labelProps with local props (local props take precedence)
   const mergedProps = () => {
     if (context) {
-      const { ref: _ref, ...contextLabelProps } = context.labelProps as Record<string, unknown>;
-      return { ...contextLabelProps, ...props };
+      const { ref: _ref, ...contextLabelProps } = (context.labelProps ?? {}) as Record<
+        string,
+        unknown
+      >;
+      const merged = {
+        ...contextLabelProps,
+        ...(context.inputId ? { for: context.inputId } : {}),
+        ...props,
+      } as Record<string, unknown>;
+      if (merged.class == null) {
+        merged.class = "solidaria-Label";
+      }
+      return merged;
     }
-    return props;
+    return props.class == null ? { ...props, class: "solidaria-Label" } : props;
   };
 
   return <label {...mergedProps()}>{props.children}</label>;
 }
 
-export interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'children'> {}
+export interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "children"> {}
+
+function eventWithCurrentTarget<T extends HTMLElement>(event: Event, element: T): Event {
+  return 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;
+    },
+  });
+}
+
+function clearDelegatedTextEntryHandlers(element: HTMLElement) {
+  const delegatedElement = element as HTMLElement & {
+    $$input?: unknown;
+    $$change?: unknown;
+  };
+  delete delegatedElement.$$input;
+  delete delegatedElement.$$change;
+}
 
 /**
  * An input element that automatically wires up to the parent TextField context.
@@ -110,21 +202,85 @@ export interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElemen
  */
 export function Input(props: InputProps): JSX.Element {
   const context = useContext(TextFieldContext);
+  let inputElement: HTMLInputElement | undefined;
 
   // Merge context inputProps with local props (local props take precedence)
   const mergedProps = () => {
     if (context) {
       // Remove ref from context props to avoid conflicts
-      const { ref: _ref, ...contextInputProps } = context.inputProps as Record<string, unknown>;
-      return { ...contextInputProps, ...props };
+      const { ref: _ref, ...contextInputProps } = (context.inputProps ?? {}) as Record<
+        string,
+        unknown
+      >;
+      const merged = { ...contextInputProps, ...props } as Record<string, unknown>;
+      if (merged.class == null) {
+        merged.class = "solidaria-Input";
+      }
+      return merged;
     }
-    return props;
+    return props.class == null ? { ...props, class: "solidaria-Input" } : props;
   };
 
-  return <input {...mergedProps()} />;
+  onMount(() => {
+    const element = inputElement;
+    if (!element) {
+      return;
+    }
+
+    const inputHandler = (event: Event) => {
+      const handler = mergedProps().onInput as
+        | JSX.EventHandler<HTMLInputElement, InputEvent>
+        | undefined;
+      handler?.(
+        eventWithCurrentTarget(event, element) as InputEvent & {
+          currentTarget: HTMLInputElement;
+          target: Element;
+        },
+      );
+      clearDelegatedTextEntryHandlers(element);
+      event.stopPropagation();
+    };
+    const changeHandler = (event: Event) => {
+      const handler = mergedProps().onChange as
+        | JSX.EventHandler<HTMLInputElement, Event>
+        | undefined;
+      handler?.(
+        eventWithCurrentTarget(event, element) as Event & {
+          currentTarget: HTMLInputElement;
+          target: Element;
+        },
+      );
+      clearDelegatedTextEntryHandlers(element);
+      event.stopPropagation();
+    };
+
+    element.addEventListener("input", inputHandler);
+    element.addEventListener("change", changeHandler);
+    clearDelegatedTextEntryHandlers(element);
+    onCleanup(() => {
+      element.removeEventListener("input", inputHandler);
+      element.removeEventListener("change", changeHandler);
+    });
+  });
+
+  return (
+    <input
+      {...mergedProps()}
+      ref={(element) => {
+        inputElement = element;
+        const ref = props.ref;
+        if (typeof ref === "function") {
+          ref(element);
+        }
+      }}
+    />
+  );
 }
 
-export interface TextAreaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {}
+export interface TextAreaProps extends Omit<
+  JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "children"
+> {}
 
 /**
  * A textarea element that automatically wires up to the parent TextField context.
@@ -133,23 +289,81 @@ export interface TextAreaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextA
  */
 export function TextArea(props: TextAreaProps): JSX.Element {
   const context = useContext(TextFieldContext);
+  let textAreaElement: HTMLTextAreaElement | undefined;
 
   // Merge context inputProps with local props (local props take precedence)
   // Note: TextArea uses inputProps from context since it's an input variant
   const mergedProps = () => {
     if (context) {
-      const { ref: _ref, type: _type, ...contextInputProps } = context.inputProps as Record<string, unknown>;
-      return { ...contextInputProps, ...props };
+      const {
+        ref: _ref,
+        type: _type,
+        ...contextInputProps
+      } = (context.inputProps ?? {}) as Record<string, unknown>;
+      const merged = { ...contextInputProps, ...props } as Record<string, unknown>;
+      if (merged.class == null) {
+        merged.class = "solidaria-TextArea";
+      }
+      return merged;
     }
-    return props;
+    return props.class == null ? { ...props, class: "solidaria-TextArea" } : props;
   };
 
-  return <textarea {...mergedProps()} />;
-}
+  onMount(() => {
+    const element = textAreaElement;
+    if (!element) {
+      return;
+    }
 
-// ============================================
-// COMPONENT
-// ============================================
+    const inputHandler = (event: Event) => {
+      const handler = mergedProps().onInput as
+        | JSX.EventHandler<HTMLTextAreaElement, InputEvent>
+        | undefined;
+      handler?.(
+        eventWithCurrentTarget(event, element) as InputEvent & {
+          currentTarget: HTMLTextAreaElement;
+          target: Element;
+        },
+      );
+      clearDelegatedTextEntryHandlers(element);
+      event.stopPropagation();
+    };
+    const changeHandler = (event: Event) => {
+      const handler = mergedProps().onChange as
+        | JSX.EventHandler<HTMLTextAreaElement, Event>
+        | undefined;
+      handler?.(
+        eventWithCurrentTarget(event, element) as Event & {
+          currentTarget: HTMLTextAreaElement;
+          target: Element;
+        },
+      );
+      clearDelegatedTextEntryHandlers(element);
+      event.stopPropagation();
+    };
+
+    element.addEventListener("input", inputHandler);
+    element.addEventListener("change", changeHandler);
+    clearDelegatedTextEntryHandlers(element);
+    onCleanup(() => {
+      element.removeEventListener("input", inputHandler);
+      element.removeEventListener("change", changeHandler);
+    });
+  });
+
+  return (
+    <textarea
+      {...mergedProps()}
+      ref={(element) => {
+        textAreaElement = element;
+        const ref = props.ref;
+        if (typeof ref === "function") {
+          ref(element);
+        }
+      }}
+    />
+  );
+}
 
 /**
  * A text field allows a user to enter a plain text value with a keyboard.
@@ -170,40 +384,72 @@ export function TextArea(props: TextAreaProps): JSX.Element {
  * ```
  */
 export function TextField(props: TextFieldProps): JSX.Element {
-  // Split props
-  const [local, ariaProps] = splitProps(props, [
-    'children',
-    'class',
-    'style',
-    'slot',
+  const formContext = useContext(FormContext);
+  const contextProps = useContext(TextFieldContext);
+  const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+  const contextBaseProps = createMemo<TextFieldProps>(() => {
+    if (!contextProps) return {};
+    const {
+      labelProps: _labelProps,
+      inputProps: _inputProps,
+      descriptionProps: _descriptionProps,
+      errorMessageProps: _errorMessageProps,
+      isInvalid: _isInvalid,
+      slots: _slots,
+      ...rest
+    } = contextProps;
+    return rest as TextFieldProps;
+  });
+  const baseProps = (
+    contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props
+  ) as TextFieldProps;
+  const mergedProps = withFormValidationBehavior(baseProps, formContext);
+
+  const [local, ariaProps] = splitProps(mergedProps, [
+    "children",
+    "class",
+    "style",
+    "render",
+    "slot",
   ]);
 
-  // Create text field state
   // Use getters to ensure props are read lazily inside reactive contexts
   const state = createTextFieldState({
-    get value() { return ariaProps.value; },
-    get defaultValue() { return ariaProps.defaultValue; },
-    get onChange() { return ariaProps.onChange; },
+    get value() {
+      return ariaProps.value;
+    },
+    get defaultValue() {
+      return ariaProps.defaultValue;
+    },
+    get onChange() {
+      return ariaProps.onChange;
+    },
+  });
+
+  const inputAriaProps = createMemo(() => {
+    const clean: Record<string, unknown> = {};
+    for (const key in ariaProps as Record<string, unknown>) {
+      if (!key.startsWith("data-")) {
+        clean[key] = (ariaProps as Record<string, unknown>)[key];
+      }
+    }
+    return clean as typeof ariaProps;
   });
 
-  // Create text field aria props
   const textFieldAria = createTextField(() => ({
-    ...ariaProps,
+    ...inputAriaProps(),
     value: state.value(),
     onChange: state.setValue,
   }));
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return ariaProps.isDisabled;
     },
   });
 
-  // Render props values
   const renderValues = createMemo<TextFieldRenderProps>(() => ({
     isDisabled: ariaProps.isDisabled || false,
     isInvalid: textFieldAria.isInvalid,
@@ -214,58 +460,139 @@ export function TextField(props: TextFieldProps): JSX.Element {
     isFocusVisible: isFocusVisible(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-TextField',
+      defaultClassName: "solidaria-TextField",
     },
-    renderValues
+    renderValues,
   );
+  const childRenderValues: TextFieldRenderProps = {
+    get isDisabled() {
+      return ariaProps.isDisabled || false;
+    },
+    get isInvalid() {
+      return textFieldAria.isInvalid;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly || false;
+    },
+    get isRequired() {
+      return ariaProps.isRequired || false;
+    },
+    get isHovered() {
+      return isHovered();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isFocusVisible() {
+      return isFocusVisible();
+    },
+  };
 
-  // Filter DOM props
   const domProps = createMemo(() => {
     const filtered = filterDOMProps(ariaProps, { global: true });
     delete (filtered as Record<string, unknown>).id;
     return filtered;
   });
 
-  // Remove ref from spread props to avoid type conflicts
   const cleanHoverProps = () => {
     const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;
     return rest;
   };
 
-  // Context value for sub-components
-  // Note: We create the value object directly (not in a memo) so it's available
-  // immediately when children access the context
+  // Context value for sub-components.
+  // Use property getters so sub-components always read the latest aria/focus state.
+  const fieldValidation = createMemo<ValidationResult>(() => {
+    const isInvalid = textFieldAria.isInvalid;
+    const errorMessage = ariaProps.errorMessage;
+    const validationErrors = isInvalid && typeof errorMessage === "string" ? [errorMessage] : [];
+
+    return {
+      isInvalid,
+      validationErrors,
+      validationDetails: isInvalid
+        ? { ...VALID_VALIDITY_STATE, customError: true, valid: false }
+        : VALID_VALIDITY_STATE,
+    };
+  });
+  const fieldErrorContext: FieldErrorContextValue = {
+    get validation() {
+      return fieldValidation();
+    },
+    get errorMessageProps() {
+      return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+  };
   const contextValue: TextFieldContextValue = {
-    labelProps: textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>,
-    inputProps: { ...textFieldAria.inputProps, ...focusProps } as JSX.InputHTMLAttributes<HTMLInputElement>,
-    descriptionProps: textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>,
-    errorMessageProps: textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>,
-    isInvalid: textFieldAria.isInvalid,
+    get labelProps() {
+      return textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    },
+    get inputProps() {
+      return mergeProps(
+        textFieldAria.inputProps as Record<string, unknown>,
+        focusProps as Record<string, unknown>,
+      ) as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+    get descriptionProps() {
+      return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get errorMessageProps() {
+      return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get isInvalid() {
+      return textFieldAria.isInvalid;
+    },
+    // Deterministic at render (createTextField generates it via createUniqueId),
+    // so the Label's `for` is stable across SSR + hydration. A signal set from an
+    // onMount effect would flip undefined->id post-mount and re-execute the Label
+    // template — crashing hydration if the re-run lands mid-hydration (dev).
+    get inputId() {
+      return (textFieldAria.inputProps as { id?: string }).id;
+    },
   };
+  // Resolve the render-prop children ONCE (untracked). Re-invoking it on a
+  // reactive update re-clones its templates; if that lands mid-hydration it
+  // throws a Hydration Mismatch (worst in dev, where slow unbundled modules widen
+  // the hydration window). The children carry their own fine-grained reactivity
+  // (render-value getters + <Show>s), so they update without being re-created.
+  const fieldChildren = untrack(() => {
+    const children = local.children;
+    return typeof children === "function" ? children(childRenderValues) : children;
+  });
+  const rootProps = () =>
+    ({
+      ...domProps(),
+      ...cleanHoverProps(),
+      class: renderProps.class(),
+      style: renderProps.style(),
+      slot: local.slot,
+      "data-disabled": ariaProps.isDisabled || undefined,
+      "data-invalid": textFieldAria.isInvalid || undefined,
+      "data-readonly": ariaProps.isReadOnly || undefined,
+      "data-required": ariaProps.isRequired || undefined,
+      "data-hovered": isHovered() || undefined,
+      "data-focused": isFocused() || undefined,
+      "data-focus-visible": isFocusVisible() || undefined,
+    }) as JSX.HTMLAttributes<HTMLDivElement>;
+  const customRootProps = () =>
+    ({
+      ...rootProps(),
+      children: fieldChildren,
+    }) as JSX.HTMLAttributes<HTMLDivElement>;
 
   return (
-    <TextFieldContext.Provider value={contextValue}>
-      <div
-        {...domProps()}
-        {...cleanHoverProps()}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={ariaProps.isDisabled || undefined}
-        data-invalid={textFieldAria.isInvalid || undefined}
-        data-readonly={ariaProps.isReadOnly || undefined}
-        data-required={ariaProps.isRequired || undefined}
-        data-hovered={isHovered() || undefined}
-        data-focused={isFocused() || undefined}
-        data-focus-visible={isFocusVisible() || undefined}
-      >
-        {renderProps.renderChildren()}
-      </div>
-    </TextFieldContext.Provider>
+    <FieldErrorContext.Provider value={fieldErrorContext}>
+      <TextFieldContext.Provider value={contextValue}>
+        {local.render ? (
+          local.render(customRootProps(), renderValues())
+        ) : (
+          <div {...rootProps()}>{fieldChildren}</div>
+        )}
+      </TextFieldContext.Provider>
+    </FieldErrorContext.Provider>
   );
 }