@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/DateField.tsx

@@ -8,26 +8,29 @@
 import {
   type JSX,
   createContext,
+  createEffect,
   createMemo,
   createSignal,
+  onCleanup,
   splitProps,
   useContext,
   For,
   Show,
-} from 'solid-js';
+} from "solid-js";
 import {
   createDateField,
   createDateSegment,
   type AriaDateFieldProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createDateFieldState,
+  access,
   type DateFieldState,
   type DateFieldStateProps,
   type DateSegment as DateSegmentType,
   type CalendarDate,
   type DateValue,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -36,11 +39,13 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
+import { HiddenDateInput } from "./HiddenDateInput";
+import { FormContext, type FormProps } from "./Form";
+import {
+  DateRangePickerContext,
+  type DateRangePickerFieldContextValue,
+} from "./DateRangePickerContext";
 
 export interface DateFieldRenderProps {
   /** Whether the field is disabled. */
@@ -54,8 +59,9 @@ export interface DateFieldRenderProps {
 }
 
 export interface DateFieldProps<T extends DateValue = DateValue>
-  extends Omit<AriaDateFieldProps, 'id' | 'isDisabled' | 'isReadOnly' | 'isRequired'>,
-    Omit<DateFieldStateProps<T>, 'locale'>,
+  extends
+    Omit<AriaDateFieldProps, "id" | "isDisabled" | "isReadOnly" | "isRequired">,
+    Omit<DateFieldStateProps<T>, "locale">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element | ((segment: DateSegmentType) => JSX.Element);
@@ -81,6 +87,8 @@ export interface DateInputProps extends SlotProps {
   class?: ClassNameOrFunction<DateInputRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<DateInputRenderProps>;
+  /** Handler called during the pointer down capture phase. */
+  onPointerDownCapture?: JSX.EventHandler<HTMLDivElement, PointerEvent>;
 }
 
 export interface DateSegmentRenderProps {
@@ -91,7 +99,7 @@ export interface DateSegmentRenderProps {
   /** Whether the segment is a placeholder. */
   isPlaceholder: boolean;
   /** The segment type. */
-  type: DateSegmentType['type'];
+  type: DateSegmentType["type"];
   /** The text to display. */
   text: string;
 }
@@ -107,23 +115,92 @@ export interface DateSegmentProps extends SlotProps {
   style?: StyleOrFunction<DateSegmentRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
+export interface DateFieldContextValue {
+  state: DateFieldState<DateValue>;
+  aria: {
+    labelProps: Record<string, unknown>;
+    inputProps: Record<string, unknown>;
+    descriptionProps: Record<string, unknown>;
+    errorMessageProps: Record<string, unknown>;
+  };
+}
+
+export const DateFieldContext = createContext<DateFieldContextValue | null>(null);
+export const DateFieldStateContext = createContext<DateFieldState<DateValue> | null>(null);
+
+function withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {
+  if (!formContext?.validationBehavior) {
+    return props;
+  }
+
+  return new Proxy(props, {
+    get(target, property, receiver) {
+      const localValue = Reflect.get(target, property, receiver);
+      if (property === "validationBehavior" && localValue === undefined) {
+        return formContext.validationBehavior;
+      }
 
-export const DateFieldContext = createContext<DateFieldState<DateValue> | null>(null);
+      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 function useDateFieldContext(): DateFieldState<DateValue> {
+export function useDateFieldContext(): DateFieldContextValue {
   const context = useContext(DateFieldContext);
   if (!context) {
-    throw new Error('DateField components must be used within a DateField');
+    throw new Error("DateField components must be used within a DateField");
   }
   return context;
 }
 
-// ============================================
-// DATE FIELD COMPONENT
-// ============================================
+function useDateInputContext(
+  slot?: string,
+): DateFieldContextValue | DateRangePickerFieldContextValue {
+  const dateFieldContext = useContext(DateFieldContext);
+  if (dateFieldContext) {
+    return dateFieldContext;
+  }
+
+  const dateRangePickerContext = useContext(DateRangePickerContext);
+  if (dateRangePickerContext && slot === "start") {
+    return dateRangePickerContext.startFieldContext;
+  }
+  if (dateRangePickerContext && slot === "end") {
+    return dateRangePickerContext.endFieldContext;
+  }
+
+  throw new Error("DateInput components must be used within a DateField or DateRangePicker slot");
+}
 
 /**
  * A date field allows users to enter and edit date values using a keyboard.
@@ -139,59 +216,78 @@ export function useDateFieldContext(): DateFieldState<DateValue> {
  * ```
  */
 export function DateField<T extends DateValue = CalendarDate>(
-  props: DateFieldProps<T>
+  props: DateFieldProps<T>,
 ): JSX.Element {
   // Use hydration-safe pattern for client-only rendering
   const isHydrated = useIsHydrated();
+  const formContext = useContext(FormContext);
 
   return (
     <Show
       when={isHydrated()}
-      fallback={<div class="solidaria-DateField solidaria-DateField--placeholder" aria-hidden="true" />}
+      fallback={
+        <div class="solidaria-DateField solidaria-DateField--placeholder" aria-hidden="true" />
+      }
     >
-      <DateFieldInner {...props} />
+      <DateFieldInner {...props} __formContext={formContext} />
     </Show>
   );
 }
 
+type DateFieldInnerProps<T extends DateValue = DateValue> = DateFieldProps<T> & {
+  __formContext?: FormProps | null;
+};
+
 /**
  * Internal DateField component that renders after client mount.
  */
 function DateFieldInner<T extends DateValue = CalendarDate>(
-  props: DateFieldProps<T>
+  props: DateFieldInnerProps<T>,
 ): JSX.Element {
+  const formContext = props.__formContext ?? useContext(FormContext);
+  const mergedProps = withFormValidationBehavior(props, formContext);
   const [local, stateProps, rest] = splitProps(
-    props,
-    ['children', 'class', 'style', 'slot'],
+    mergedProps,
+    ["children", "class", "style", "slot", "__formContext"],
     [
-      'value',
-      'defaultValue',
-      'onChange',
-      'minValue',
-      'maxValue',
-      'isDisabled',
-      'isReadOnly',
-      'isRequired',
-      'locale',
-      'granularity',
-      'hourCycle',
-      'hideTimeZone',
-      'placeholderValue',
-      'validationState',
-      'description',
-      'errorMessage',
-    ]
+      "value",
+      "defaultValue",
+      "onChange",
+      "minValue",
+      "maxValue",
+      "isInvalid",
+      "isDisabled",
+      "isReadOnly",
+      "isRequired",
+      "locale",
+      "granularity",
+      "hourCycle",
+      "hideTimeZone",
+      "placeholderValue",
+      "shouldForceLeadingZeros",
+      "validationState",
+      "validationBehavior",
+      "validate",
+      "description",
+      "errorMessage",
+      "isDateUnavailable",
+    ],
   );
 
   const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Create date field state
   const state = createDateFieldState(stateProps);
 
-  // Create date field ARIA props
-  const fieldAria = createDateField(rest, state as unknown as DateFieldState<DateValue>, fieldRef);
+  const fieldAria = createDateField(
+    () => ({
+      ...(rest as Record<string, unknown>),
+      description: stateProps.description,
+      errorMessage: stateProps.errorMessage,
+    }),
+    state as unknown as DateFieldState<DateValue>,
+    fieldRef,
+  );
 
-  // Render props values
   const renderValues = createMemo<DateFieldRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isReadOnly: state.isReadOnly(),
@@ -199,97 +295,129 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
     isInvalid: state.isInvalid(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-DateField',
+      defaultClassName: "solidaria-DateField",
     },
-    renderValues
+    renderValues,
   );
 
+  const validationBehavior = () =>
+    (stateProps as { validationBehavior?: "aria" | "native" }).validationBehavior ??
+    formContext?.validationBehavior ??
+    "native";
+
   return (
-    <DateFieldContext.Provider value={state as unknown as DateFieldState<DateValue>}>
-      <div
-        ref={setFieldRef}
-        {...fieldAria.fieldProps}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={dataAttr(state.isDisabled())}
-        data-readonly={dataAttr(state.isReadOnly())}
-        data-required={dataAttr(state.isRequired())}
-        data-invalid={dataAttr(state.isInvalid())}
+    <DateFieldStateContext.Provider value={state as unknown as DateFieldState<DateValue>}>
+      <DateFieldContext.Provider
+        value={{
+          state: state as unknown as DateFieldState<DateValue>,
+          aria: {
+            labelProps: fieldAria.labelProps,
+            inputProps: fieldAria.inputProps,
+            descriptionProps: fieldAria.descriptionProps,
+            errorMessageProps: fieldAria.errorMessageProps,
+          },
+        }}
       >
-        {props.children as JSX.Element}
-      </div>
-    </DateFieldContext.Provider>
+        <div
+          ref={setFieldRef}
+          {...fieldAria.fieldProps}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={dataAttr(state.isDisabled())}
+          data-readonly={dataAttr(state.isReadOnly())}
+          data-required={dataAttr(state.isRequired())}
+          data-invalid={dataAttr(state.isInvalid())}
+        >
+          {local.children as JSX.Element}
+        </div>
+        <Show when={(rest as Record<string, unknown>).name}>
+          <HiddenDateInput
+            name={(rest as Record<string, unknown>).name as string | undefined}
+            form={(rest as Record<string, unknown>).form as string | undefined}
+            value={state.value()}
+            autoComplete={(rest as Record<string, unknown>).autoComplete as string | undefined}
+            isDisabled={state.isDisabled()}
+            isRequired={state.isRequired()}
+            validationBehavior={validationBehavior()}
+            validationState={state}
+            focus={() => {
+              fieldRef()?.querySelector<HTMLElement>('[role="spinbutton"]')?.focus();
+            }}
+            minValue={access(stateProps.minValue) as DateValue | undefined}
+            maxValue={access(stateProps.maxValue) as DateValue | undefined}
+            granularity={state.granularity}
+          />
+        </Show>
+      </DateFieldContext.Provider>
+    </DateFieldStateContext.Provider>
   );
 }
 
-// ============================================
-// DATE INPUT COMPONENT
-// ============================================
-
 /**
  * The input area containing date segments.
  */
 export function DateInput(props: DateInputProps): JSX.Element {
-  const state = useDateFieldContext();
+  const context = useDateInputContext(props.slot);
+  const { state, aria } = context;
   const [isFocused, setIsFocused] = createSignal(false);
+  const [inputRef, setInputRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Render props values
   const renderValues = createMemo<DateInputRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isFocused: isFocused(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-DateInput',
+      defaultClassName: "solidaria-DateInput",
     },
-    renderValues
+    renderValues,
   );
 
+  createEffect(() => {
+    const element = inputRef();
+    const handler = props.onPointerDownCapture;
+    if (!element || !handler) return;
+
+    const listener = (event: PointerEvent) =>
+      (handler as unknown as (event: PointerEvent) => void)(event);
+    element.addEventListener("pointerdown", listener, { capture: true });
+    onCleanup(() => element.removeEventListener("pointerdown", listener, { capture: true }));
+  });
+
   return (
-    <div
-      role="presentation"
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-disabled={dataAttr(state.isDisabled())}
-      data-focused={dataAttr(isFocused())}
-      onFocusIn={() => setIsFocused(true)}
-      onFocusOut={() => setIsFocused(false)}
-    >
-      <For each={state.segments()}>
-        {(segment) => props.children?.(segment)}
-      </For>
-    </div>
+    <DateFieldContext.Provider value={context as DateFieldContextValue}>
+      <div
+        ref={setInputRef}
+        {...aria.inputProps}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-disabled={dataAttr(state.isDisabled())}
+        data-focused={dataAttr(isFocused())}
+        onFocusIn={() => setIsFocused(true)}
+        onFocusOut={() => setIsFocused(false)}
+      >
+        <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>
+      </div>
+    </DateFieldContext.Provider>
   );
 }
 
-// ============================================
-// DATE SEGMENT COMPONENT
-// ============================================
-
 /**
  * A segment of a date field (year, month, day, etc.).
  */
 export function DateSegment(props: DateSegmentProps): JSX.Element {
-  const state = useDateFieldContext();
-  const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);
-
-  // Create segment ARIA props
-  const segmentAria = createDateSegment(
-    { segment: props.segment },
-    state,
-    segmentRef
-  );
+  const { state } = useDateFieldContext();
+  const [segmentRef, setSegmentRef] = createSignal<HTMLElement | null>(null);
+
+  const segmentAria = createDateSegment({ segment: props.segment }, state, segmentRef);
 
-  // Render props values
   const renderValues = createMemo<DateSegmentRenderProps>(() => ({
     isFocused: segmentAria.isFocused,
     isEditable: segmentAria.isEditable,
@@ -298,27 +426,26 @@ export function DateSegment(props: DateSegmentProps): JSX.Element {
     text: segmentAria.text,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-DateSegment',
+      defaultClassName: "solidaria-DateSegment",
     },
-    renderValues
+    renderValues,
   );
 
   // Determine children content - avoid Show for SSR hydration compatibility
   const getChildren = () => {
-    if (typeof props.children === 'function') {
+    if (typeof props.children === "function") {
       return renderProps.renderChildren();
     }
     return segmentAria.text;
   };
 
   return (
-    <div
+    <span
       ref={setSegmentRef}
       {...segmentAria.segmentProps}
       class={renderProps.class()}
@@ -329,9 +456,50 @@ export function DateSegment(props: DateSegmentProps): JSX.Element {
       data-type={props.segment.type}
     >
       {getChildren()}
-    </div>
+    </span>
+  );
+}
+
+export interface DateFieldLabelProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function DateFieldLabel(props: DateFieldLabelProps): JSX.Element {
+  const { aria } = useDateFieldContext();
+  return (
+    <span {...aria.labelProps} class={props.class}>
+      {props.children}
+    </span>
+  );
+}
+
+export interface DateFieldDescriptionProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function DateFieldDescription(props: DateFieldDescriptionProps): JSX.Element {
+  const { aria } = useDateFieldContext();
+  return (
+    <p {...aria.descriptionProps} class={props.class}>
+      {props.children}
+    </p>
+  );
+}
+
+export interface DateFieldErrorMessageProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function DateFieldErrorMessage(props: DateFieldErrorMessageProps): JSX.Element {
+  const { aria } = useDateFieldContext();
+  return (
+    <p {...aria.errorMessageProps} class={props.class}>
+      {props.children}
+    </p>
   );
 }
 
-// Re-export types
 export type { DateFieldState, DateSegmentType };