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

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";
 
@@ -49,8 +64,10 @@ export interface DatePickerState<T extends DateValue = DateValue> {
   value: Accessor<T | null>;
   defaultValue: T | null;
   setValue: (value: T | null) => void;
+  /** Committed value, or the in-progress date before the other half commits. */
   dateValue: Accessor<DateValue | null>;
   setDateValue: (value: DateValue) => void;
+  /** Committed value when it has a time; otherwise the in-progress time. */
   timeValue: Accessor<TimeValue | null>;
   setTimeValue: (value: TimeValue) => void;
   granularity: Granularity;
@@ -76,18 +93,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,20 +129,21 @@ 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();
-
-  // Date and time portions of the current value
-  const dateValue = createMemo<DateValue | null>(() => {
-    const v = value();
-    if (!v) return null;
-    return toCalendarDate(v);
-  });
+  const isOpen: Accessor<boolean> = () => access(props.isOpen) ?? readNow(internalOpen);
+
+  // useDatePickerState shadows selectedDate/selectedTime with the committed
+  // value during render. Otherwise the popover reads the in-progress half.
+  const dateValue: Accessor<DateValue | null> = () => {
+    const committed = value();
+    if (committed) return committed;
+    return selectedDate();
+  };
 
-  const timeValue = createMemo<TimeValue | null>(() => {
-    const v = value();
-    if (!v || !("hour" in v)) return null;
-    return v as unknown as TimeValue;
-  });
+  const timeValue: Accessor<TimeValue | null> = () => {
+    const committed = value();
+    if (committed && "hour" in committed) return committed as unknown as TimeValue;
+    return selectedTime();
+  };
 
   // Helper to resolve placeholder time (midnight fallback)
   const getPlaceholderTime = (): TimeValue => {
@@ -187,7 +208,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 +243,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 +273,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