@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/TimeField.tsx

@@ -14,19 +14,20 @@ import {
   useContext,
   For,
   Show,
-} from 'solid-js';
+} from "solid-js";
 import {
   createTimeField,
   createTimeSegment,
   type AriaTimeFieldProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createTimeFieldState,
+  access,
   type TimeFieldState,
   type TimeFieldStateProps,
   type TimeSegment as TimeSegmentType,
   type TimeValue,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -35,11 +36,9 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
+import { HiddenTimeInput } from "./HiddenTimeInput";
+import { FormContext, type FormProps } from "./Form";
 
 export interface TimeFieldRenderProps {
   /** Whether the field is disabled. */
@@ -53,8 +52,9 @@ export interface TimeFieldRenderProps {
 }
 
 export interface TimeFieldProps<T extends TimeValue = TimeValue>
-  extends Omit<AriaTimeFieldProps, 'id' | 'isDisabled' | 'isReadOnly' | 'isRequired'>,
-    Omit<TimeFieldStateProps<T>, 'locale'>,
+  extends
+    Omit<AriaTimeFieldProps, "id" | "isDisabled" | "isReadOnly" | "isRequired">,
+    Omit<TimeFieldStateProps<T>, "locale">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);
@@ -90,7 +90,7 @@ export interface TimeSegmentRenderProps {
   /** Whether the segment is a placeholder. */
   isPlaceholder: boolean;
   /** The segment type. */
-  type: TimeSegmentType['type'];
+  type: TimeSegmentType["type"];
   /** The text to display. */
   text: string;
 }
@@ -106,10 +106,6 @@ export interface TimeSegmentProps extends SlotProps {
   style?: StyleOrFunction<TimeSegmentRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export interface TimeFieldContextValue {
   state: TimeFieldState<TimeValue>;
   aria: {
@@ -123,10 +119,57 @@ export interface TimeFieldContextValue {
 export const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);
 export const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | 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;
+      }
+
+      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;
+    },
+  });
+}
+
 function useTimeFieldContextValue(): TimeFieldContextValue {
   const context = useContext(TimeFieldContext);
   if (!context) {
-    throw new Error('TimeField components must be used within a TimeField');
+    throw new Error("TimeField components must be used within a TimeField");
   }
   return context;
 }
@@ -135,10 +178,6 @@ export function useTimeFieldContext(): TimeFieldState<TimeValue> {
   return useTimeFieldContextValue().state;
 }
 
-// ============================================
-// TIME FIELD COMPONENT
-// ============================================
-
 /**
  * A time field allows users to enter and edit time values using a keyboard.
  *
@@ -152,57 +191,75 @@ export function useTimeFieldContext(): TimeFieldState<TimeValue> {
  * </TimeField>
  * ```
  */
-export function TimeField<T extends TimeValue = TimeValue>(
-  props: TimeFieldProps<T>
-): JSX.Element {
+export function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<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-TimeField solidaria-TimeField--placeholder" aria-hidden="true" />}
+      fallback={
+        <div class="solidaria-TimeField solidaria-TimeField--placeholder" aria-hidden="true" />
+      }
     >
-      <TimeFieldInner {...props} />
+      <TimeFieldInner {...props} __formContext={formContext} />
     </Show>
   );
 }
 
+type TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {
+  __formContext?: FormProps | null;
+};
+
 /**
  * Internal TimeField component that renders after client mount.
  */
 function TimeFieldInner<T extends TimeValue = TimeValue>(
-  props: TimeFieldProps<T>
+  props: TimeFieldInnerProps<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',
-      'validationState',
-      'placeholderValue',
-    ]
+      "value",
+      "defaultValue",
+      "onChange",
+      "minValue",
+      "maxValue",
+      "isInvalid",
+      "isDisabled",
+      "isReadOnly",
+      "isRequired",
+      "locale",
+      "granularity",
+      "hourCycle",
+      "shouldForceLeadingZeros",
+      "validationState",
+      "validationBehavior",
+      "validate",
+      "description",
+      "errorMessage",
+      "placeholderValue",
+    ],
   );
 
   const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Create time field state
   const state = createTimeFieldState(stateProps);
 
-  // Create time field ARIA props
-  const fieldAria = createTimeField(rest, state as unknown as TimeFieldState<TimeValue>, fieldRef);
+  const fieldAria = createTimeField(
+    () => ({
+      ...(rest as Record<string, unknown>),
+      description: stateProps.description,
+      errorMessage: stateProps.errorMessage,
+    }),
+    state as unknown as TimeFieldState<TimeValue>,
+    fieldRef,
+  );
 
-  // Render props values
   const renderValues = createMemo<TimeFieldRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isReadOnly: state.isReadOnly(),
@@ -210,16 +267,20 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
     isInvalid: state.isInvalid(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-TimeField',
+      defaultClassName: "solidaria-TimeField",
     },
-    renderValues
+    renderValues,
   );
 
+  const validationBehavior = () =>
+    (stateProps as { validationBehavior?: "aria" | "native" }).validationBehavior ??
+    formContext?.validationBehavior ??
+    "native";
+
   return (
     <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
       <TimeFieldContext.Provider
@@ -243,17 +304,31 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
           data-required={dataAttr(state.isRequired())}
           data-invalid={dataAttr(state.isInvalid())}
         >
-          {props.children as JSX.Element}
+          {local.children as JSX.Element}
         </div>
+        <Show when={(rest as Record<string, unknown>).name}>
+          <HiddenTimeInput
+            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 TimeValue | undefined}
+            maxValue={access(stateProps.maxValue) as TimeValue | undefined}
+            granularity={state.granularity}
+          />
+        </Show>
       </TimeFieldContext.Provider>
     </TimeFieldStateContext.Provider>
   );
 }
 
-// ============================================
-// TIME INPUT COMPONENT
-// ============================================
-
 /**
  * The input area containing time segments.
  */
@@ -261,20 +336,18 @@ export function TimeInput(props: TimeInputProps): JSX.Element {
   const { state, aria } = useTimeFieldContextValue();
   const [isFocused, setIsFocused] = createSignal(false);
 
-  // Render props values
   const renderValues = createMemo<TimeInputRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isFocused: isFocused(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-TimeInput',
+      defaultClassName: "solidaria-TimeInput",
     },
-    renderValues
+    renderValues,
   );
 
   return (
@@ -287,17 +360,11 @@ export function TimeInput(props: TimeInputProps): JSX.Element {
       onFocusIn={() => setIsFocused(true)}
       onFocusOut={() => setIsFocused(false)}
     >
-      <For each={state.segments()}>
-        {(segment) => props.children?.(segment)}
-      </For>
+      <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>
     </div>
   );
 }
 
-// ============================================
-// TIME SEGMENT COMPONENT
-// ============================================
-
 /**
  * A segment of a time field (hour, minute, second, AM/PM).
  */
@@ -308,10 +375,9 @@ export function TimeSegment(props: TimeSegmentProps): JSX.Element {
   const segmentAria = createTimeSegment(
     { segment: props.segment },
     state as unknown as TimeFieldState,
-    segmentRef
+    segmentRef,
   );
 
-  // Render props values
   const renderValues = createMemo<TimeSegmentRenderProps>(() => ({
     isFocused: segmentAria.isFocused,
     isEditable: segmentAria.isEditable,
@@ -320,20 +386,19 @@ export function TimeSegment(props: TimeSegmentProps): JSX.Element {
     text: segmentAria.text,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-TimeSegment',
+      defaultClassName: "solidaria-TimeSegment",
     },
-    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;
@@ -355,10 +420,6 @@ export function TimeSegment(props: TimeSegmentProps): JSX.Element {
   );
 }
 
-// ============================================
-// LABEL / DESCRIPTION / ERROR
-// ============================================
-
 export interface TimeFieldLabelProps {
   children?: JSX.Element;
   class?: string;
@@ -401,5 +462,4 @@ export function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.El
   );
 }
 
-// Re-export types
 export type { TimeFieldState, TimeSegmentType, TimeValue };