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

package/src/calendar/createRangeCalendarState.ts

@@ -1,11 +1,31 @@
+/*
+ * 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
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/useRangeCalendarState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/utils.ts
+
 /**
  * RangeCalendarState for Solid-Stately
  *
  * Provides state management for range calendar components.
- * Based on @react-stately/calendar useRangeCalendarState
+ * Ported from:
+ * - packages/react-stately/src/calendar/useRangeCalendarState.ts
+ * - packages/react-stately/src/calendar/useCalendarState.ts
+ * - packages/react-stately/src/calendar/utils.ts
  */
 
-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,
@@ -28,7 +48,7 @@ import {
   toCalendar as intlToCalendar,
   toCalendarDate as intlToCalendarDate,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import type { CalendarDayOfWeek, ValidationState } from "./createCalendarState";
 import { getFormatOptions } from "./createDateFieldState";
 
@@ -172,6 +192,11 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
   selectFocusedDate: () => void;
   /** Selects a specific date. */
   selectDate: (date: CalendarDate) => void;
+  /**
+   * After a keyboard range-start selection, move focus to the next available
+   * day so the in-progress range is visible. RAC `focusNearestAvailableDate`.
+   */
+  focusNearestAvailableDate: (anchorDate: CalendarDate) => void;
   /** Whether focus is currently within the calendar. */
   isFocused: Accessor<boolean>;
   /** Sets whether focus is within the calendar. */
@@ -216,7 +241,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const calendar = createMemo(() =>
     (props.createCalendar ?? intlCreateCalendar)(resolvedOptions().calendar as CalendarIdentifier),
   );
-  const visibleMonths = Math.max(1, Number(access(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];
 
@@ -226,7 +251,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // The anchor date is the first selected date during a range drag. Declared up
   // here (ahead of constrainDate) because the available-range derivation below
   // depends on it, and constrainDate consults that range.
-  const [anchorDate, setAnchorDate] = createSignal<CalendarDate | null>(null);
+  const [anchorDate, setAnchorDate] = createInternalSignal<CalendarDate | null>(null);
 
   // Mirrors @react-stately/calendar useRangeCalendarState getAvailableRange: once
   // a range selection is anchored and unavailable dates exist, contiguous ranges
@@ -238,8 +263,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     if (anchor && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
       const predicate = (date: CalendarDate): boolean => props.isDateUnavailable!(date, anchor);
       return {
-        start: nextUnavailableDate(anchor, predicate, visibleMonths, -1),
-        end: nextUnavailableDate(anchor, predicate, visibleMonths, 1),
+        start: nextUnavailableDate(anchor, predicate, visibleMonths(), -1),
+        end: nextUnavailableDate(anchor, predicate, visibleMonths(), 1),
       };
     }
     return null;
@@ -281,7 +306,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const visibleRangeEndFromStart = (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 }));
     }
 
@@ -291,7 +316,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const rawAlignStart = (date: CalendarDate): CalendarDate => startOfMonth(date);
 
   const rawAlignEnd = (date: CalendarDate): CalendarDate =>
-    startOfMonth(date).subtract({ months: Math.max(visibleMonths - 1, 0) });
+    startOfMonth(date).subtract({ months: Math.max(visibleMonths() - 1, 0) });
 
   const constrainVisibleRangeStart = (date: CalendarDate, aligned: CalendarDate): CalendarDate => {
     const minValue = access(props.minValue);
@@ -322,8 +347,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     constrainVisibleRangeStart(date, rawAlignEnd(date));
 
   const alignCenter = (date: CalendarDate): CalendarDate => {
-    let offset = Math.floor(visibleMonths / 2);
-    if (offset > 0 && visibleMonths % 2 === 0) {
+    let offset = Math.floor(visibleMonths() / 2);
+    if (offset > 0 && visibleMonths() % 2 === 0) {
       offset--;
     }
 
@@ -373,16 +398,17 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   };
 
   // State signals
-  const [internalValue, setInternalValue] = createSignal<RangeValue<T> | null>(
+  const [internalValue, setInternalValue] = createInternalSignal<RangeValue<T> | null>(
     props.defaultValue ?? null,
   );
   const initialFocusedDate = constrainDate(getInitialFocusedDate());
-  const [focusedDate, setFocusedDateInternal] = createSignal<CalendarDate>(initialFocusedDate);
-  const [visibleRangeStart, setVisibleRangeStart] = createSignal<CalendarDate>(
+  const [focusedDate, setFocusedDateInternal] =
+    createInternalSignal<CalendarDate>(initialFocusedDate);
+  const [visibleRangeStart, setVisibleRangeStart] = createInternalSignal<CalendarDate>(
     alignVisibleRangeStart(initialFocusedDate),
   );
-  const [isFocused, setFocused] = createSignal(false);
-  const [isDragging, setDragging] = createSignal(false);
+  const [isFocused, setFocused] = createInternalSignal(false);
+  const [isDragging, setDragging] = createInternalSignal(false);
 
   // Controlled vs uncontrolled value
   const sourceValue = createMemo<RangeValue<T> | null>(() => {
@@ -448,7 +474,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return { start: focused, end: anchor };
   });
 
-  // Visible range based on React Stately's selection alignment rules.
+  // The visible range follows React Stately's selection alignment rules.
   const visibleRange = createMemo(() => {
     const start = visibleRangeStart();
     return { start, end: visibleRangeEndFromStart(start) };
@@ -461,9 +487,10 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // on out-of-range keeps a same-month focus from re-firing visibleRangeStart
   // with a fresh equal-valued object, which would otherwise recompute the grid
   // and recreate every cell on focus.
-  const syncVisibleRangeForFocusedDate = (nextFocusedDate: CalendarDate) => {
-    const range = visibleRange();
-
+  const syncVisibleRangeForFocusedDate = (
+    nextFocusedDate: CalendarDate,
+    range: { start: CalendarDate; end: CalendarDate },
+  ) => {
     if (nextFocusedDate.compare(range.start) < 0) {
       setVisibleRangeStart(alignEnd(nextFocusedDate));
     } else if (nextFocusedDate.compare(range.end) > 0) {
@@ -471,56 +498,73 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     }
   };
 
-  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);
-      setVisibleRangeStart(alignVisibleRangeStart(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;
-    }
-
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-    props.onFocusChange?.(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (!controlledFocused) return null;
+      const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
+      return {
+        nextFocusedDate,
+        currentFocusedDate: focusedDate(),
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      const { nextFocusedDate, currentFocusedDate, alignedStart } = data;
+      if (
+        nextFocusedDate.compare(currentFocusedDate) !== 0 ||
+        !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        setFocusedDateInternal(nextFocusedDate);
+        setVisibleRangeStart(alignedStart);
+      }
+    },
+  );
 
-    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 {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+      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(() => {
@@ -581,7 +625,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       return;
     }
 
-    syncVisibleRangeForFocusedDate(constrained);
+    syncVisibleRangeForFocusedDate(constrained, visibleRange());
     setFocusedDateInternal(constrained);
     props.onFocusChange?.(constrained);
   };
@@ -691,7 +735,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // the window, so a single-month page whose focus stays in view would never
   // advance the grid.
   const focusPreviousPage = () => {
-    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
+    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
@@ -699,7 +743,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   };
 
   const focusNextPage = () => {
-    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
+    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
@@ -785,7 +829,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     );
     if (!selectableDate) return;
 
-    const anchor = anchorDate();
+    const anchor = readNow(anchorDate);
 
     if (!anchor) {
       // First click - set anchor
@@ -836,6 +880,20 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return week;
   };
 
+  const focusNearestAvailableDate = (anchor: CalendarDate) => {
+    // RAC `useRangeCalendarState.ts:261-273`: prefer anchor+1, else −1, skip invalid.
+    const isDateInvalid = (candidate: CalendarDate) =>
+      isInvalid(candidate) || isDateOutsideAllowedRange(candidate);
+    let nextDay = anchor.add({ days: 1 });
+    if (isDateInvalid(nextDay)) {
+      nextDay = anchor.subtract({ days: 1 });
+    }
+    if (!isDateInvalid(nextDay)) {
+      setFocusedDate(nextDay);
+      setFocused(true);
+    }
+  };
+
   // Get number of weeks in a month
   const getWeeksInMonthFn = (date?: CalendarDate): number => {
     const monthDate = date ?? focusedDate();
@@ -966,13 +1024,16 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     focusPageEnd,
     selectFocusedDate,
     selectDate,
+    focusNearestAvailableDate,
     isFocused,
     setFocused,
     getDatesInWeek,
     getWeeksInMonth: getWeeksInMonthFn,
     weekDays,
     title,
-    visibleMonths,
+    get visibleMonths() {
+      return visibleMonths();
+    },
     isDragging,
     setDragging,
     formatValue,

package/src/calendar/createTimeFieldState.ts

@@ -1,8 +1,23 @@
+/*
+ * 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/useTimeFieldState.ts
+
 /**
  * TimeFieldState for Solid-Stately
  *
- * Faithful port of `@react-stately/datepicker` `useTimeFieldState`, which is a
- * thin wrapper over `useDateFieldState`: a time-only `Time` value is converted
+ * Faithful port of
+ * `packages/react-stately/src/datepicker/useTimeFieldState.ts`, which is a thin
+ * wrapper over `useDateFieldState`: a time-only `Time` value is converted
  * to a `CalendarDateTime` (anchored on today's date, or a zoned date when the
  * value/default carries a time zone) and fed to the date-field state machine
  * with `maxGranularity: 'hour'` so the date segments drop away and only
@@ -19,7 +34,10 @@
  * invoke and freeze them, breaking reactivity.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+
 import {
   Time,
   type CalendarDate,
@@ -33,7 +51,6 @@ import {
   toCalendarDateTime,
   GregorianCalendar,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
 import type { ValidationState } from "./createCalendarState";
 import type { ValidationBehavior, ValidationFunction } from "../form";
 import {
@@ -73,7 +90,7 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
   /** Whether the value is invalid (controlled). */
   isInvalid?: boolean;
   /** The locale to use for formatting. */
-  locale?: string;
+  locale?: MaybeAccessor<string | undefined>;
   /** The granularity (hour, minute, second). */
   granularity?: "hour" | "minute" | "second";
   /** Whether to show 12 or 24 hour format. */
@@ -137,7 +154,9 @@ export function createTimeFieldState<T extends TimeValue = Time>(
   const placeholderValue: TimeValue = props.placeholderValue ?? new Time();
 
   // Controlled/uncontrolled Time value (mirrors useControlledState).
-  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
+  const [internalValue, setInternalValue] = createInternalSignal<T | null>(
+    props.defaultValue ?? null,
+  );
   const value = (): T | null => {
     const controlled = access(props.value);
     return controlled !== undefined ? controlled : internalValue();

package/src/calendar/intl/index.ts

@@ -1,5 +1,40 @@
-// DateField validation-message catalog, ported verbatim from @react-stately/datepicker's
-// intl/*.json (34 locales). Keep in sync with the vendored react-spectrum source on every
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ar-AE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/bg-BG.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/cs-CZ.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/da-DK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/de-DE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/el-GR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/en-US.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/es-ES.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/et-EE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/fi-FI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/fr-FR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/he-IL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/hr-HR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/hu-HU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/it-IT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ja-JP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ko-KR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/lt-LT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/lv-LV.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/nb-NO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/nl-NL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/pl-PL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/pt-BR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/pt-PT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ro-RO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ru-RU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sk-SK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sl-SI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sr-SP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sv-SE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/tr-TR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/uk-UA.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/zh-CN.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/zh-TW.json
+
+// DateField validation messages. Ported from the @react-stately/datepicker intl catalog.
+// The catalog has 34 locales. Keep it in sync with the vendored react-spectrum source on every
 // pin bump. Hand-rolled resolver so solid-stately needs no @internationalized/string dep.
 
 export type DateFieldErrorKey =

package/src/checkbox/createCheckboxGroupState.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/checkbox/useCheckboxGroupState.ts
+
 /**
  * Checkbox group state for Solid Stately
  *
@@ -7,8 +21,8 @@
  * This is a 1:1 port of @react-stately/checkbox's useCheckboxGroupState.
  */
 
-import { createMemo, createSignal, Accessor } from "solid-js";
-import { type MaybeAccessor, access } from "../utils";
+import { createMemo, Accessor } from "solid-js";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import {
   createFormValidationState,
   type FormValidationState,
@@ -101,7 +115,7 @@ export function createCheckboxGroupState(
   const initialProps = getProps();
   const initialValue = initialProps.value ?? initialProps.defaultValue ?? [];
 
-  const [internalValue, setInternalValue] = createSignal<readonly string[]>(initialValue);
+  const [internalValue, setInternalValue] = createInternalSignal<readonly string[]>(initialValue);
 
   const controlledValue = createMemo<readonly string[] | undefined>(() => getProps().value);
 
@@ -112,6 +126,8 @@ export function createCheckboxGroupState(
     return controlled !== undefined ? controlled : internalValue();
   };
 
+  const liveValue = (): readonly string[] => (isControlled() ? value() : readNow(internalValue));
+
   const isRequired: Accessor<boolean> = () => {
     const p = getProps();
     return !!p.isRequired && value().length === 0;
@@ -161,9 +177,9 @@ export function createCheckboxGroupState(
       return;
     }
 
-    const current = value();
-    if (!current.includes(addVal)) {
-      setValue([...current, addVal]);
+    const snapshot = liveValue();
+    if (!snapshot.includes(addVal)) {
+      setValue([...snapshot, addVal]);
     }
   }
 
@@ -173,9 +189,9 @@ export function createCheckboxGroupState(
       return;
     }
 
-    const current = value();
-    if (current.includes(removeVal)) {
-      setValue(current.filter((v) => v !== removeVal));
+    const snapshot = liveValue();
+    if (snapshot.includes(removeVal)) {
+      setValue(snapshot.filter((v) => v !== removeVal));
     }
   }
 
@@ -185,11 +201,11 @@ export function createCheckboxGroupState(
       return;
     }
 
-    const current = value();
-    if (current.includes(toggleVal)) {
-      setValue(current.filter((v) => v !== toggleVal));
+    const snapshot = liveValue();
+    if (snapshot.includes(toggleVal)) {
+      setValue(snapshot.filter((v) => v !== toggleVal));
     } else {
-      setValue([...current, toggleVal]);
+      setValue([...snapshot, toggleVal]);
     }
   }
 

package/src/collections/ListCollection.ts

@@ -1,6 +1,37 @@
+/*
+ * Copyright 2024 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 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-aria/src/collections/BaseCollection.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/list/ListCollection.ts
+
 /**
  * A simple list collection implementation.
  * Provides a Collection interface over an array of nodes.
+ *
+ * Ported from:
+ * - packages/react-stately/src/list/ListCollection.ts
+ * - packages/react-aria/src/collections/BaseCollection.ts
  */
 
 import type { Collection, CollectionItemLike, CollectionNode, Key } from "./types";

package/src/collections/createListState.ts

@@ -1,10 +1,28 @@
+/*
+ * 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/list/useListState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/list/useSingleSelectListState.ts
+
 /**
  * State management for list-like components.
  * Combines collection and selection state.
- * Based on @react-stately/list.
+ * Ported from:
+ * - packages/react-stately/src/list/useListState.ts
+ * - packages/react-stately/src/list/useSingleSelectListState.ts
  */
 
-import { createMemo, createEffect, untrack, type Accessor } from "solid-js";
+import { createMemo, createEffect } from "solid-js";
+import type { Accessor } from "solid-js";
 import { access, type MaybeAccessor } from "../utils";
 import { ListCollection } from "./ListCollection";
 import type { SelectionState, SelectionPressEvent } from "./createSelectionState";
@@ -242,9 +260,8 @@ export function createFilteredListState<T = unknown>(
   // forward (then backward) through the previous collection to the nearest
   // surviving, enabled item. Mirrors @react-stately's useFocusedKeyReset.
   let cachedCollection: Collection<T> | null = null;
-  createEffect(() => {
-    const coll = collection();
-    const focusedKey = untrack(() => state.focusedKey());
+  createEffect(collection, (coll) => {
+    const focusedKey = state.focusedKey();
     if (focusedKey != null && !coll.getItem(focusedKey) && cachedCollection) {
       let key = cachedCollection.getKeyAfter(focusedKey);
       let nextFocusedKey: Key | null = null;
@@ -267,7 +284,7 @@ export function createFilteredListState<T = unknown>(
           key = cachedCollection.getKeyBefore(key);
         }
       }
-      untrack(() => state.setFocusedKey(nextFocusedKey));
+      state.setFocusedKey(nextFocusedKey);
     }
     cachedCollection = coll;
   });