@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.1

package/src/DateField.tsx

@@ -1,3 +1,30 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/DateField.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/HiddenDateInput.tsx
+
 /**
  * DateField component for solidaria-components
  *
@@ -6,18 +33,16 @@
  */
 
 import {
-  type JSX,
-  type Context,
   createContext,
-  createEffect,
   createMemo,
   createSignal,
-  onCleanup,
-  splitProps,
   useContext,
-  Index,
+  For,
   Show,
+  createTrackedEffect,
 } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createDateField,
   createDateSegment,
@@ -50,11 +75,15 @@ import {
   type SlotProps,
   useRenderProps,
   dataAttr,
-  useIsHydrated,
   Provider,
+  callEventHandler,
+  useSlot,
 } from "./utils";
+import { LabelContext, type LabelProps } from "./Label";
 import { TextContext } from "./Text";
-import { FormContext, type FormProps } from "./Form";
+import { FieldErrorContext, type FieldErrorContextValue } from "./FieldError";
+import { FormContext, resolveValidationBehavior, type FormProps } from "./Form";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   DateRangePickerContext,
   type DateRangePickerFieldContextValue,
@@ -73,8 +102,11 @@ export interface DateFieldRenderProps {
 
 export interface DateFieldProps<T extends DateValue = DateValue>
   extends
-    Omit<AriaDateFieldProps, "id" | "isDisabled" | "isReadOnly" | "isRequired">,
-    Omit<DateFieldStateProps<T>, "locale">,
+    Omit<
+      AriaDateFieldProps,
+      "id" | "isDisabled" | "isReadOnly" | "isRequired" | "description" | "errorMessage"
+    >,
+    Omit<DateFieldStateProps<T>, "locale" | "description" | "errorMessage">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element | ((segment: DateSegmentType) => JSX.Element);
@@ -87,9 +119,20 @@ export interface DateFieldProps<T extends DateValue = DateValue>
 }
 
 export interface DateInputRenderProps {
+  /** Whether the input is hovered with a pointer. */
+  isHovered: boolean;
+  /** Whether an element within the input is focused. */
+  isFocusWithin: boolean;
+  /** Whether an element within the input is keyboard focused. */
+  isFocusVisible: boolean;
   /** Whether the input is disabled. */
   isDisabled: boolean;
-  /** Whether the input is focused. */
+  /** Whether the input is invalid. */
+  isInvalid: boolean;
+  /**
+   * Whether an element within the input is focused.
+   * Same signal as `isFocusWithin`. The group stamps `data-focus-within`.
+   */
   isFocused: boolean;
 }
 
@@ -153,53 +196,6 @@ export interface DateFieldContextValue {
 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;
-      }
-
-      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(): DateFieldContextValue {
   const context = useContext(DateFieldContext);
   if (!context) {
@@ -209,7 +205,7 @@ export function useDateFieldContext(): DateFieldContextValue {
 }
 
 function useDateInputContext(
-  slot?: string,
+  slot?: string | JSX.RemoveAttribute,
 ): DateFieldContextValue | DateRangePickerFieldContextValue {
   const dateFieldContext = useContext(DateFieldContext);
   if (dateFieldContext) {
@@ -243,20 +239,7 @@ function useDateInputContext(
 export function DateField<T extends DateValue = CalendarDate>(
   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" />
-      }
-    >
-      <DateFieldInner {...props} __formContext={formContext} />
-    </Show>
-  );
+  return <DateFieldInner {...props} />;
 }
 
 type DateFieldInnerProps<T extends DateValue = DateValue> = DateFieldProps<T> & {
@@ -270,9 +253,8 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
   props: DateFieldInnerProps<T>,
 ): JSX.Element {
   const formContext = props.__formContext ?? useContext(FormContext);
-  const mergedProps = withFormValidationBehavior(props, formContext);
   const [local, stateProps, rest] = splitProps(
-    mergedProps,
+    props,
     ["children", "class", "style", "slot", "__formContext"],
     [
       "value",
@@ -293,8 +275,6 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
       "validationState",
       "validationBehavior",
       "validate",
-      "description",
-      "errorMessage",
       "isDateUnavailable",
     ],
   );
@@ -309,9 +289,25 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
 
   const state = createDateFieldState(stateProps);
 
+  const hasExplicitName = () =>
+    Boolean(
+      (rest as Record<string, unknown>)["aria-label"] ||
+      (rest as Record<string, unknown>)["aria-labelledby"],
+    );
+  const stringLabel = (): string | undefined => {
+    const label = (rest as Record<string, unknown>).label;
+    return typeof label === "string" && label !== "" ? label : undefined;
+  };
+  // A string label names the field through DateFieldLabel. Slot detection
+  // starts only when that string and an explicit aria name are both absent.
+  const [labelRef, hasLabel] = useSlot(!hasExplicitName() && stringLabel() === undefined);
+
   const fieldAria = createDateField(
     () => ({
       ...(rest as Record<string, unknown>),
+      // Keep a string label for DateFieldLabel. An explicit aria name wins over
+      // a child Label. Otherwise the slot flag tells createLabel a label exists.
+      label: stringLabel() ?? (hasExplicitName() ? undefined : hasLabel()),
       // RAC threads the same props into both useDateFieldState and useDateField;
       // these live in `stateProps` here, so forward them so the field hook can
       // build aria-disabled and the native validation <input> (type/required).
@@ -320,12 +316,8 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
       isReadOnly: access(stateProps.isReadOnly),
       isRequired: access(stateProps.isRequired),
       // Mirror RAC DateField: validationBehavior ?? formValidationBehavior ??
-      // 'native'. withFormValidationBehavior already folds the form default into
-      // stateProps.validationBehavior; the last `?? 'native'` is the standalone
-      // default that flips the hidden input to type="text".
-      validationBehavior: stateProps.validationBehavior ?? "native",
-      description: stateProps.description,
-      errorMessage: stateProps.errorMessage,
+      // 'native'.
+      validationBehavior: resolveValidationBehavior(stateProps.validationBehavior, formContext),
       // Form-reset + native constraint validation are wired onto this input by
       // createDateField (see its createFormReset/createFormValidation calls),
       // exactly as RAC's useDateField wires them onto props.inputRef.
@@ -362,9 +354,34 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
     },
   };
 
+  const fieldValidation = createMemo(() => ({
+    isInvalid: fieldAria.isInvalid,
+    validationErrors: fieldAria.validationErrors,
+    validationDetails: fieldAria.validationDetails,
+  }));
+  const fieldErrorContext: FieldErrorContextValue = {
+    get validation() {
+      return fieldValidation();
+    },
+    get errorMessageProps() {
+      return fieldAria.errorMessageProps;
+    },
+  };
+
+  const labelContextValue: LabelProps = {
+    get id() {
+      if (hasExplicitName() || stringLabel() !== undefined || !hasLabel()) {
+        return undefined;
+      }
+      return fieldAria.labelProps.id as string | undefined;
+    },
+    ref: labelRef,
+    elementType: "span",
+  };
+
   return (
-    <DateFieldStateContext.Provider value={state as unknown as DateFieldState<DateValue>}>
-      <DateFieldContext.Provider
+    <DateFieldStateContext value={state as unknown as DateFieldState<DateValue>}>
+      <DateFieldContext
         value={{
           state: state as unknown as DateFieldState<DateValue>,
           // Read through getters so consumers see the LIVE memo values, not a
@@ -409,14 +426,22 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
           data-required={dataAttr(state.isRequired())}
           data-invalid={dataAttr(state.isInvalid())}
         >
-          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+          <Provider
+            values={
+              [
+                [TextContext, textSlots],
+                [FieldErrorContext, fieldErrorContext],
+                [LabelContext, labelContextValue],
+              ] as Array<[Context<unknown>, unknown]>
+            }
+          >
             {local.children as JSX.Element}
           </Provider>
         </div>
         {/*
           RAC renders <HiddenDateInput> UNCONDITIONALLY at the DateField root
           (react-aria-components DateField.mjs). It is NOT a validation input — it
-          is a clipped, aria-hidden, tabIndex={-1} native date input that mirrors
+          is a clipped, aria-hidden, tabindex={-1} native date input that mirrors
           the value for browser autofill. Its `form=""` detaches it from form
           submission (the DateInput's <Input> above is what submits), so it never
           double-counts in FormData. It renders regardless of `name` — hence no
@@ -429,8 +454,8 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
           isDisabled={state.isDisabled()}
           state={state as unknown as DateFieldState<DateValue>}
         />
-      </DateFieldContext.Provider>
-    </DateFieldStateContext.Provider>
+      </DateFieldContext>
+    </DateFieldStateContext>
   );
 }
 
@@ -447,12 +472,14 @@ interface RootHiddenDateInputProps {
 
 /**
  * The always-rendered hidden date input at the DateField root — a faithful port
- * of react-aria-components' HiddenDateInput (private/HiddenDateInput.mjs). It is
- * NOT a validation input: it is a clipped, aria-hidden, tabIndex={-1} native
+ * of react-aria-components/src/HiddenDateInput.tsx. It is NOT a validation
+ * input: it is a clipped, aria-hidden, tabindex={-1} native
  * date input that mirrors the current value for browser autofill. `form=""`
  * detaches it from form submission (the DateInput's <Input> submits), so it
  * never double-counts in FormData. RAC renders it unconditionally, which is why
  * it appears as the trailing tabindex="-1" element in the focus trail.
+ * `data-react-aria-prevent-focus` keeps FocusScope off the wrapper, and
+ * `data-a11y-ignore="aria-hidden-focus"` skips the aria-hidden focusable warning.
  */
 function RootHiddenDateInput(props: RootHiddenDateInputProps): JSX.Element {
   // RAC uses useVisuallyHidden with position:fixed/top:0/left:0 to keep the
@@ -510,10 +537,12 @@ function RootHiddenDateInput(props: RootHiddenDateInputProps): JSX.Element {
     <div
       {...(visuallyHiddenProps() as unknown as Record<string, unknown>)}
       aria-hidden="true"
+      data-a11y-ignore="aria-hidden-focus"
+      data-react-aria-prevent-focus="true"
       data-testid="hidden-dateinput-container"
     >
       <input
-        tabIndex={-1}
+        tabindex={-1}
         autocomplete={props.autoComplete}
         disabled={props.isDisabled}
         type={inputType()}
@@ -533,11 +562,23 @@ function RootHiddenDateInput(props: RootHiddenDateInputProps): JSX.Element {
 export function DateInput(props: DateInputProps): JSX.Element {
   const context = useDateInputContext(props.slot);
   const { state, aria } = context;
-  const [isFocused, setIsFocused] = createSignal(false);
   const [inputRef, setInputRef] = createSignal<HTMLDivElement | null>(null);
+  // Pin DateInput renders Group, which tracks hover and focus within.
+  // createFocusRing already exposes the within handlers as onFocusIn/onFocusOut.
+  // Read them as plain functions so mergeProps chains them onto the field's
+  // own focus-within (value snapshot and validation commit). A later getter
+  // would replace that handler.
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
+  const { isHovered, hoverProps } = createHover(() => ({
+    isDisabled: state.isDisabled(),
+  }));
 
   const renderValues = createMemo<DateInputRenderProps>(() => ({
+    isHovered: isHovered(),
+    isFocusWithin: isFocused(),
+    isFocusVisible: isFocusVisible(),
     isDisabled: state.isDisabled(),
+    isInvalid: state.isInvalid(),
     isFocused: isFocused(),
   }));
 
@@ -550,47 +591,54 @@ export function DateInput(props: DateInputProps): JSX.Element {
     renderValues,
   );
 
-  // The group props (role="group", aria-labelledby, unicode-bidi:isolate,
-  // arrow-key nav, focus-within handlers) carry the field's own `style` and
-  // focus handlers. Merge — not clobber — so the group keeps its unicode-bidi
-  // isolation and the local isFocused signal chains onto the field's
-  // focusWithin handlers. Solid onFocus/onBlur do not bubble, so track focus
-  // via onFocusIn/onFocusOut.
-  const inputDivProps = createMemo(() =>
-    mergeProps(aria.inputProps, {
-      onFocusIn: () => setIsFocused(true),
-      onFocusOut: () => setIsFocused(false),
+  const inputDivProps = createMemo(() => {
+    const ring = focusProps as {
+      onFocusIn?: (event: FocusEvent) => void;
+      onFocusOut?: (event: FocusEvent) => void;
+    };
+    return mergeProps(aria.inputProps, hoverProps, {
+      onFocusIn: ring.onFocusIn,
+      onFocusOut: ring.onFocusOut,
       style: renderProps.style(),
-    }),
-  );
+    });
+  });
+
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
 
-  createEffect(() => {
     const element = inputRef();
     const handler = props.onPointerDownCapture;
     if (!element || !handler) return;
 
-    const listener = (event: PointerEvent) =>
-      (handler as unknown as (event: PointerEvent) => void)(event);
+    const listener = (event: PointerEvent) => callEventHandler(handler, event);
     element.addEventListener("pointerdown", listener, { capture: true });
-    onCleanup(() => element.removeEventListener("pointerdown", listener, { capture: true }));
+    _s2Cleanups.push(() => element.removeEventListener("pointerdown", listener, { capture: true }));
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   return (
-    <DateFieldContext.Provider value={context as DateFieldContextValue}>
+    <DateFieldContext value={context as DateFieldContextValue}>
       <div
         ref={setInputRef}
         {...inputDivProps()}
         class={renderProps.class()}
         data-disabled={dataAttr(state.isDisabled())}
-        data-focused={dataAttr(isFocused())}
+        data-invalid={dataAttr(state.isInvalid())}
+        data-readonly={dataAttr(state.isReadOnly())}
+        data-hovered={dataAttr(isHovered())}
+        data-focus-within={dataAttr(isFocused())}
+        data-focus-visible={dataAttr(isFocusVisible())}
       >
         {/*
-          <Index> keys by position, not identity, so each DateSegment instance
-          stays alive across keystrokes (state.segments() re-mints segment
-          objects every edit). A stable Proxy forwards property reads to the
-          live per-index accessor so the child stays reactive.
+          <For keyed={false}> keys by position, not identity, so each DateSegment
+          instance stays alive across keystrokes (state.segments() re-mints
+          segment objects every edit). A stable Proxy forwards property reads to
+          the live per-index accessor so the child stays reactive.
         */}
-        <Index each={state.segments()}>
+        <For each={state.segments()} keyed={false}>
           {(segment) => {
             const liveSegment = new Proxy({} as DateSegmentType, {
               get: (_t, key) => (segment() as unknown as Record<PropertyKey, unknown>)[key],
@@ -598,7 +646,7 @@ export function DateInput(props: DateInputProps): JSX.Element {
             });
             return props.children?.(liveSegment);
           }}
-        </Index>
+        </For>
       </div>
       {/*
         The hidden validation input, sibling of the group — mirrors RAC's
@@ -614,7 +662,7 @@ export function DateInput(props: DateInputProps): JSX.Element {
           <input {...(hiddenInputProps() as JSX.InputHTMLAttributes<HTMLInputElement>)} />
         )}
       </Show>
-    </DateFieldContext.Provider>
+    </DateFieldContext>
   );
 }
 
@@ -668,12 +716,7 @@ export function DateSegment(props: DateSegmentProps): JSX.Element {
   );
 
   // Determine children content - avoid Show for SSR hydration compatibility
-  const getChildren = () => {
-    if (typeof props.children === "function") {
-      return renderProps.renderChildren();
-    }
-    return props.segment.text;
-  };
+  const getChildren = () => renderProps.renderChildren() ?? props.segment.text;
 
   // Mirror upstream's `mergeProps(filterDOMProps(otherProps), segmentProps,
   // focusProps, hoverProps)`: the segment's behavior/style props (caretColor +
@@ -695,14 +738,14 @@ export function DateSegment(props: DateSegmentProps): JSX.Element {
       ref={setSegmentRef}
       {...segmentElementProps()}
       class={renderProps.class()}
-      data-placeholder={props.segment.isPlaceholder || undefined}
-      data-invalid={state.isInvalid() || undefined}
-      data-readonly={state.isReadOnly() || undefined}
-      data-disabled={state.isDisabled() || undefined}
+      data-placeholder={dataAttr(props.segment.isPlaceholder)}
+      data-invalid={dataAttr(state.isInvalid())}
+      data-readonly={dataAttr(state.isReadOnly())}
+      data-disabled={dataAttr(state.isDisabled())}
       data-type={props.segment.type}
-      data-hovered={isHovered() || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
+      data-hovered={dataAttr(isHovered())}
+      data-focused={dataAttr(isFocused())}
+      data-focus-visible={dataAttr(isFocusVisible())}
     >
       {getChildren()}
     </span>