@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.0

package/src/calendar/createCalendarState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 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-stately/src/calendar/useCalendarState.ts
+
 /**
  * CalendarState for Solid-Stately
  *
@@ -5,7 +19,8 @@
  * Based on @react-stately/calendar useCalendarState
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { createMemo, createEffect } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   type Calendar as InternationalizedCalendar,
   type CalendarDate,
@@ -25,8 +40,9 @@ import {
   createCalendar as intlCreateCalendar,
   toCalendar as intlToCalendar,
   toCalendarDate as intlToCalendarDate,
+  minDate,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 
 export type ValidationState = "valid" | "invalid";
 export type CalendarPageBehavior = "single" | "visible";
@@ -75,7 +91,7 @@ export interface CalendarStateProps<
   /** Callback that is called for each date in the calendar to determine if it is unavailable. */
   isDateUnavailable?: (date: DateValue) => boolean;
   /** The number of months to display at once. */
-  visibleMonths?: number;
+  visibleMonths?: MaybeAccessor<number | undefined>;
   /** Controls whether paging advances by one month or by the visible month range. */
   pageBehavior?: CalendarPageBehavior;
   /** Determines how the visible months align around the initial focused date. */
@@ -138,6 +154,10 @@ export interface CalendarState<
   isOutsideVisibleRange: (date: DateValue) => boolean;
   /** Whether a date is invalid. */
   isInvalid: (date: DateValue) => boolean;
+  /** Whether the previous page is entirely outside min/max. */
+  isPreviousVisibleRangeInvalid: () => boolean;
+  /** Whether the next page is entirely outside min/max. */
+  isNextVisibleRangeInvalid: () => boolean;
   /** Moves focus to the previous page (month). */
   focusPreviousPage: () => void;
   /** Moves focus to the next page (month). */
@@ -198,7 +218,7 @@ export function createCalendarState<
   const calendar = createMemo(() =>
     (props.createCalendar ?? intlCreateCalendar)(resolvedOptions().calendar as CalendarIdentifier),
   );
-  const visibleMonths = props.visibleMonths ?? 1;
+  const visibleMonths = createMemo(() => Math.max(1, Number(access(props.visibleMonths) ?? 1)));
   const firstDayOfWeekName = (): CalendarDayOfWeek | undefined =>
     props.firstDayOfWeek == null ? undefined : dayOfWeekNames[props.firstDayOfWeek];
 
@@ -212,11 +232,11 @@ export function createCalendarState<
       case "start":
         return 0;
       case "end":
-        return Math.max(visibleMonths - 1, 0);
+        return Math.max(visibleMonths() - 1, 0);
       case "center":
       default: {
-        let halfDuration = Math.floor(visibleMonths / 2);
-        if (halfDuration > 0 && visibleMonths % 2 === 0) {
+        let halfDuration = Math.floor(visibleMonths() / 2);
+        if (halfDuration > 0 && visibleMonths() % 2 === 0) {
           halfDuration--;
         }
         return halfDuration;
@@ -232,7 +252,7 @@ export function createCalendarState<
   const visibleRangeEnd = (start: CalendarDate): CalendarDate => {
     let end = endOfMonth(start);
 
-    for (let i = 1; i < visibleMonths; i++) {
+    for (let i = 1; i < visibleMonths(); i++) {
       end = endOfMonth(end.add({ months: 1 }));
     }
 
@@ -280,18 +300,19 @@ export function createCalendarState<
 
   // State signals
   const initialFocusedDate = constrainDate(getInitialFocusedDate());
-  const [internalValue, setInternalValue] = createSignal<T | T[] | null>(
+  const [internalValue, setInternalValue] = createInternalSignal<T | T[] | null>(
     (props.defaultValue as T | T[] | null) ?? null,
   );
-  const [focusedDate, setFocusedDateInternal] = createSignal<CalendarDate>(initialFocusedDate);
-  const [visibleRangeStart, setVisibleRangeStart] = createSignal<CalendarDate>(
+  const [focusedDate, setFocusedDateInternal] =
+    createInternalSignal<CalendarDate>(initialFocusedDate);
+  const [visibleRangeStart, setVisibleRangeStart] = createInternalSignal<CalendarDate>(
     alignVisibleRangeStart(initialFocusedDate),
   );
   // Init from autoFocus, mirroring @react-stately useCalendarState
   // (`useState(props.autoFocus || false)`). Without autoFocus the calendar
   // mounts unfocused and never steals DOM focus.
-  const [isFocused, setFocused] = createSignal(props.autoFocus ?? false);
-  const [isPaginating, setIsPaginating] = createSignal(false);
+  const [isFocused, setFocused] = createInternalSignal(props.autoFocus ?? false);
+  const [isPaginating, setIsPaginating] = createInternalSignal(false);
 
   // Controlled vs uncontrolled value
   const sourceValue = createMemo<T | T[] | null>(() => {
@@ -312,75 +333,96 @@ export function createCalendarState<
   const validationState = createMemo(() => access(props.validationState));
   const isValueInvalid = createMemo(() => validationState() === "invalid");
 
-  // Visible range based on the paged range start.
-  const visibleRange = createMemo(() => {
+  // Visible range based on the paged range start. Function (not memo) so
+  // onFocusChange snapshots see the live page after a same-turn write.
+  const visibleRange = () => {
     const start = visibleRangeStart();
     const end = visibleRangeEnd(start);
 
     return { start, end };
-  });
-
-  const syncVisibleRangeForFocusedDate = (nextFocusedDate: CalendarDate) => {
-    const range = visibleRange();
+  };
 
+  const syncVisibleRangeForFocusedDate = (
+    nextFocusedDate: CalendarDate,
+    range: { start: CalendarDate; end: CalendarDate },
+    months: number,
+  ) => {
     if (nextFocusedDate.compare(range.start) < 0) {
-      setVisibleRangeStart(startOfMonth(nextFocusedDate.subtract({ months: visibleMonths - 1 })));
+      setVisibleRangeStart(startOfMonth(nextFocusedDate.subtract({ months: months - 1 })));
     } else if (nextFocusedDate.compare(range.end) > 0) {
       setVisibleRangeStart(startOfMonth(nextFocusedDate));
     }
   };
 
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (!controlledFocused) {
-      return;
-    }
-
-    const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
-
-    const currentFocusedDate = focusedDate();
-    if (
-      nextFocusedDate.compare(currentFocusedDate) !== 0 ||
-      !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      setFocusedDateInternal(nextFocusedDate);
-    }
-
-    syncVisibleRangeForFocusedDate(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (controlledFocused) {
-      return;
-    }
-
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = constrainDate(currentFocusedDate);
-
-    if (
-      nextFocusedDate.compare(currentFocusedDate) === 0 &&
-      isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      return;
-    }
-
-    syncVisibleRangeForFocusedDate(nextFocusedDate);
-    setFocusedDateInternal(nextFocusedDate);
-    props.onFocusChange?.(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (!controlledFocused) return null;
+      return {
+        nextFocusedDate: constrainDate(toDisplayCalendarDate(controlledFocused)),
+        currentFocusedDate: focusedDate(),
+        range: visibleRange(),
+        months: visibleMonths(),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      const { nextFocusedDate, currentFocusedDate, range, months } = data;
+      if (
+        nextFocusedDate.compare(currentFocusedDate) !== 0 ||
+        !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        setFocusedDateInternal(nextFocusedDate);
+      }
+      syncVisibleRangeForFocusedDate(nextFocusedDate, range, months);
+    },
+  );
 
-    if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
-      return;
-    }
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (controlledFocused) return null;
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = constrainDate(currentFocusedDate);
+      if (
+        nextFocusedDate.compare(currentFocusedDate) === 0 &&
+        isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        return null;
+      }
+      return {
+        currentFocusedDate,
+        nextFocusedDate,
+        range: visibleRange(),
+        months: visibleMonths(),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      syncVisibleRangeForFocusedDate(data.nextFocusedDate, data.range, data.months);
+      setFocusedDateInternal(data.nextFocusedDate);
+      props.onFocusChange?.(data.nextFocusedDate);
+    },
+  );
 
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-  });
+  createEffect(
+    () => {
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+      if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
+        return null;
+      }
+      return {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+    },
+  );
 
   // Format week days for headers
   const weekDays = createMemo(() => {
@@ -408,22 +450,45 @@ export function createCalendarState<
     return formatter.format(formattableMonth.toDate(timeZone));
   });
 
+  // Walks previousAvailableDate from minValue ?? minDate(constrained, startDate)
+  // rather than from startDate alone, so a date before the visible month remains
+  // selectable when isDateUnavailable is set. Mirrors useCalendarState.normalizeValue.
+  const normalizeValue = (newValue: CalendarDate): T | null => {
+    const constrained = constrainDate(newValue);
+    const minBound = access(props.minValue);
+    const lowerBound =
+      minBound != null
+        ? toDisplayCalendarDate(minBound)
+        : (minDate(constrained, visibleRange().start) ?? constrained);
+    const prev = previousAvailableDate(constrained, lowerBound, props.isDateUnavailable);
+    if (!prev) {
+      return null;
+    }
+
+    const oldValue = sourceValue();
+    const referenceValue = Array.isArray(oldValue) ? (oldValue[0] ?? null) : oldValue;
+    return convertValue(prev, referenceValue) as T;
+  };
+
   // Set value with onChange callback
   const setValue = (newValue: T | T[] | null) => {
     if (isDisabled() || isReadOnly()) return;
 
     const oldValue = sourceValue();
-    const referenceValue = Array.isArray(oldValue) ? (oldValue[0] ?? null) : oldValue;
 
     let nextValue: T | T[] | null;
     if (newValue == null) {
       nextValue = selectionMode() === "multiple" ? ([] as T[]) : null;
     } else if (Array.isArray(newValue)) {
-      nextValue = newValue.map(
-        (v) => convertValue(constrainDate(toDisplayCalendarDate(v)), referenceValue) as T,
-      );
+      nextValue = newValue
+        .map((v) => normalizeValue(toDisplayCalendarDate(v)))
+        .filter((v): v is T => v != null);
     } else {
-      nextValue = convertValue(constrainDate(toDisplayCalendarDate(newValue)), referenceValue) as T;
+      const localValue = normalizeValue(toDisplayCalendarDate(newValue));
+      if (!localValue) {
+        return;
+      }
+      nextValue = localValue;
     }
 
     const controlled = access(props.value);
@@ -444,7 +509,7 @@ export function createCalendarState<
       return;
     }
 
-    syncVisibleRangeForFocusedDate(constrained);
+    syncVisibleRangeForFocusedDate(constrained, visibleRange(), visibleMonths());
     setFocusedDateInternal(constrained);
     props.onFocusChange?.(constrained);
   };
@@ -510,10 +575,33 @@ export function createCalendarState<
     return isCellDisabled(date) || isCellUnavailable(date);
   };
 
+  // RAC `useCalendarState.ts` `isPreviousVisibleRangeInvalid` /
+  // `isNextVisibleRangeInvalid`: prev = startDate−1 invalid; next = endDate+1.
+  const isDateOutsideAllowedRange = (date: DateValue): boolean => {
+    const min = minValueState();
+    const max = maxValueState();
+    const calDate = toDisplayCalendarDate(date);
+    if (min && calDate.compare(toDisplayCalendarDate(min)) < 0) return true;
+    if (max && calDate.compare(toDisplayCalendarDate(max)) > 0) return true;
+    return false;
+  };
+
+  const isPreviousVisibleRangeInvalid = () => {
+    const start = visibleRange().start;
+    const previous = start.subtract({ days: 1 });
+    return isSameDay(previous, start) || isDateOutsideAllowedRange(previous);
+  };
+
+  const isNextVisibleRangeInvalid = () => {
+    const end = visibleRange().end;
+    const next = end.add({ days: 1 });
+    return isSameDay(next, end) || isDateOutsideAllowedRange(next);
+  };
+
   // Navigation methods
   const focusPreviousPage = () => {
     setIsPaginating(true);
-    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths;
+    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
@@ -523,7 +611,7 @@ export function createCalendarState<
 
   const focusNextPage = () => {
     setIsPaginating(true);
-    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths;
+    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
@@ -583,7 +671,7 @@ export function createCalendarState<
     if (isReadOnly() || isDisabled()) return;
 
     if (selectionMode() === "multiple") {
-      const current = value();
+      const current = access(props.value) !== undefined ? value() : readNow(internalValue);
       const base: CalendarDate[] = Array.isArray(current)
         ? current.map((v) => toDisplayCalendarDate(v))
         : current != null
@@ -655,6 +743,8 @@ export function createCalendarState<
     isCellDisabled,
     isOutsideVisibleRange,
     isInvalid,
+    isPreviousVisibleRangeInvalid,
+    isNextVisibleRangeInvalid,
     focusPreviousPage,
     focusNextPage,
     focusPreviousSection,
@@ -673,7 +763,9 @@ export function createCalendarState<
     getWeeksInMonth: getWeeksInMonthFn,
     weekDays,
     title,
-    visibleMonths,
+    get visibleMonths() {
+      return visibleMonths();
+    },
     isPaginating,
   };
 }
@@ -695,3 +787,26 @@ function convertValue(newValue: CalendarDate, oldValue?: DateValue | null): Date
 
   return localValue;
 }
+
+/**
+ * Walks backward from `date` while it is unavailable and still at/after `minValue`.
+ * Mirrors @react-stately/calendar previousAvailableDate.
+ */
+function previousAvailableDate(
+  date: CalendarDate,
+  minValue: CalendarDate,
+  isDateUnavailable?: (date: DateValue) => boolean,
+): CalendarDate | null {
+  if (!isDateUnavailable) {
+    return date;
+  }
+
+  while (date.compare(minValue) >= 0 && isDateUnavailable(date)) {
+    date = date.subtract({ days: 1 });
+  }
+
+  if (date.compare(minValue) >= 0) {
+    return date;
+  }
+  return null;
+}

package/src/calendar/createDateFieldState.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2020 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-stately/src/datepicker/useDateFieldState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/datepicker/utils.ts
+
 /**
  * DateFieldState for Solid-Stately
  *
@@ -12,11 +27,14 @@
  *
  * The upstream "derived state during render" resync (which re-mints the display
  * value when the committed value / calendar / hour cycle changes) is ported to a
- * Solid `createComputed` so it runs synchronously before render effects — mirroring
- * React's render-phase setState rather than a post-render `createEffect`.
+ * split `createEffect`. Compute tracks the committed value; apply writes the
+ * display override. Solid 2 has no `createComputed`.
  */
 
-import { createSignal, createMemo, createComputed, untrack, type Accessor } from "solid-js";
+import { createMemo, createEffect, untrack } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+
 import {
   type Calendar,
   type CalendarDateTime,
@@ -33,7 +51,6 @@ import {
   isEqualCalendar,
   createCalendar as intlCreateCalendar,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
 import type { ValidationState } from "./createCalendarState";
 import { IncompleteDate } from "./IncompleteDate";
 import { formatDateFieldError, getPlaceholder, type DateFieldErrorKey } from "./intl";
@@ -100,7 +117,7 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
   /** Whether the value is invalid (controlled). */
   isInvalid?: boolean;
   /** The locale to use for formatting. */
-  locale?: string;
+  locale?: MaybeAccessor<string | undefined>;
   /** The granularity of the date/time (day, hour, minute, second). */
   granularity?: FieldGranularity;
   /** The maximum granularity (largest editable unit). Defaults to `year`. */
@@ -235,7 +252,7 @@ const TYPE_MAPPING: Record<string, string> = {
 export function createDateFieldState<T extends DateValue = DateValue>(
   props: DateFieldStateProps<T> = {},
 ): DateFieldState<T> {
-  const locale = (): string => props.locale ?? "en-US";
+  const locale = createMemo(() => access(props.locale) ?? "en-US");
   const createCalendarFn = (name: CalendarIdentifier): Calendar =>
     (props.createCalendar ?? intlCreateCalendar)(name);
 
@@ -252,19 +269,15 @@ export function createDateFieldState<T extends DateValue = DateValue>(
       timeZone: v && "timeZone" in v ? (v as { timeZone: string }).timeZone : undefined,
     };
   });
-  const [lastDefaults, setLastDefaults] = createSignal<{
-    granularity: Granularity;
-    timeZone: string | undefined;
-  }>(initialDefaults);
-  createComputed(() => {
+  const lastDefaults = createMemo<typeof initialDefaults>((prev = initialDefaults) => {
     const v = v0();
-    if (!v) return;
+    if (!v) return prev;
     const defaultGranularity = ("minute" in v ? "minute" : "day") as Granularity;
     const defaultTimeZone = "timeZone" in v ? (v as { timeZone: string }).timeZone : undefined;
-    const last = untrack(lastDefaults);
-    if (last.granularity !== defaultGranularity || last.timeZone !== defaultTimeZone) {
-      setLastDefaults({ granularity: defaultGranularity, timeZone: defaultTimeZone });
+    if (prev.granularity !== defaultGranularity || prev.timeZone !== defaultTimeZone) {
+      return { granularity: defaultGranularity, timeZone: defaultTimeZone };
     }
+    return prev;
   });
   const granularity = (): FieldGranularity => {
     if (props.granularity) return props.granularity;
@@ -296,7 +309,9 @@ export function createDateFieldState<T extends DateValue = DateValue>(
   const hourCycle = (): HourCycle => calendarAndHourCycle()[1];
 
   // Controlled vs uncontrolled committed value.
-  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
+  const [internalValue, setInternalValue] = createInternalSignal<T | null>(
+    props.defaultValue ?? null,
+  );
   const rawValue = createMemo<T | null>(() => {
     const controlled = access(props.value);
     return controlled !== undefined ? controlled : internalValue();
@@ -314,27 +329,26 @@ export function createDateFieldState<T extends DateValue = DateValue>(
   const initialValue = untrack(calendarValue);
 
   // The display override: holds the (possibly invalid/incomplete) value being edited.
-  const [displayValue, setDisplayValue] = createSignal<IncompleteDate>(
+  const [displayValue, setDisplayValue] = createInternalSignal<IncompleteDate>(
     untrack(() => new IncompleteDate(calendar(), hourCycle(), untrack(calendarValue))),
   );
 
-  // Render-phase resync: whenever the committed value, calendar, or hour cycle changes
-  // from the outside, re-mint the display override. Ported to createComputed so it runs
-  // synchronously (like React's render-phase setState), never leaving a stale frame.
+  // Resync the display override when the committed value, calendar, or hour
+  // cycle changes from the outside. Compute tracks those sources; apply writes.
   let lastValue = untrack(calendarValue);
   let lastCalendar = untrack(calendar);
   let lastHourCycle = untrack(hourCycle);
-  createComputed(() => {
-    const cv = calendarValue();
-    const cal = calendar();
-    const hc = hourCycle();
-    if (cv !== lastValue || hc !== lastHourCycle || !isEqualCalendar(cal, lastCalendar)) {
-      lastValue = cv;
-      lastCalendar = cal;
-      lastHourCycle = hc;
-      setDisplayValue(new IncompleteDate(cal, hc, cv));
-    }
-  });
+  createEffect(
+    () => ({ cv: calendarValue(), cal: calendar(), hc: hourCycle() }),
+    ({ cv, cal, hc }) => {
+      if (cv !== lastValue || hc !== lastHourCycle || !isEqualCalendar(cal, lastCalendar)) {
+        lastValue = cv;
+        lastCalendar = cal;
+        lastHourCycle = hc;
+        setDisplayValue(new IncompleteDate(cal, hc, cv));
+      }
+    },
+  );
 
   const showEra = (): boolean => calendar().identifier === "gregory" && displayValue().era === "BC";
   const maxGranularity = (): "year" | "month" | "day" | "hour" | "minute" =>

package/src/calendar/createDatePickerState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 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-stately/src/datepicker/useDatePickerState.ts
+
 /**
  * DatePickerState for Solid-Stately
  *
@@ -5,7 +19,8 @@
  * Based on @react-stately/datepicker useDatePickerState
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   type DateValue,
   type CalendarDateTime,
@@ -16,7 +31,7 @@ import {
   toZoned,
   getLocalTimeZone,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import type { ValidationState } from "./createCalendarState";
 import type { TimeValue } from "./createTimeFieldState";
 
@@ -76,18 +91,21 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const timeZone = getLocalTimeZone();
 
   // Internal signals for value and overlay state
-  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
-  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
+  const [internalValue, setInternalValue] = createInternalSignal<T | null>(
+    props.defaultValue ?? null,
+  );
+  const [internalOpen, setInternalOpen] = createInternalSignal(props.defaultOpen ?? false);
 
   // Transient selections for date and time
-  const [selectedDate, setSelectedDate] = createSignal<DateValue | null>(null);
-  const [selectedTime, setSelectedTime] = createSignal<TimeValue | null>(null);
+  const [selectedDate, setSelectedDate] = createInternalSignal<DateValue | null>(null);
+  const [selectedTime, setSelectedTime] = createInternalSignal<TimeValue | null>(null);
 
-  // Controlled vs uncontrolled value
-  const value = createMemo<T | null>(() => {
+  // Controlled vs uncontrolled value. Function (not memo) so same-turn
+  // methods and tests see the live internal write.
+  const value: Accessor<T | null> = () => {
     const controlled = access(props.value);
     return controlled !== undefined ? controlled : internalValue();
-  });
+  };
 
   // Granularity: auto-detect from value type if not provided
   const granularity = createMemo<Granularity>(() => {
@@ -109,7 +127,7 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
   const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
   const validationState = createMemo(() => access(props.validationState));
-  const isOpen: Accessor<boolean> = () => access(props.isOpen) ?? internalOpen();
+  const isOpen: Accessor<boolean> = () => access(props.isOpen) ?? readNow(internalOpen);
 
   // Date and time portions of the current value
   const dateValue = createMemo<DateValue | null>(() => {
@@ -187,7 +205,7 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const setDateValue = (date: DateValue) => {
     if (isDisabled() || isReadOnly()) return;
 
-    const currentTime = selectedTime();
+    const currentTime = readNow(selectedTime);
     const currentValue = value();
     const shouldClose =
       typeof props.shouldCloseOnSelect === "function"
@@ -222,7 +240,7 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const setTimeValue = (time: TimeValue) => {
     if (isDisabled() || isReadOnly()) return;
 
-    const currentDate = selectedDate();
+    const currentDate = readNow(selectedDate);
     const currentValue = value();
 
     if (currentDate) {
@@ -252,8 +270,8 @@ export function createDatePickerState<T extends DateValue = DateValue>(
       // When closing, only commit if both date and time are available (when time is required).
       // Don't auto-commit partial selections with placeholder time to avoid phantom values.
       const currentValue = value();
-      const currentDate = selectedDate();
-      const currentTime = selectedTime();
+      const currentDate = readNow(selectedDate);
+      const currentTime = readNow(selectedTime);
 
       if (!currentValue && currentDate && hasTime() && currentTime) {
         // Both date and time explicitly selected — safe to commit