@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/calendar/createRangeCalendarCell.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-aria/src/calendar/useCalendarCell.ts
+
 /**
  * createRangeCalendarCell hook for Solidaria
  *
@@ -5,10 +19,12 @@
  * Based on @react-aria/calendar useCalendarCell (with range support)
  */
 
-import { createSignal, createMemo, createEffect } from "solid-js";
+import { createSignal, createMemo, createTrackedEffect } from "solid-js";
 import { access, type MaybeAccessor } from "../utils/reactivity";
 import { focusSafely } from "../utils/focus";
 import { createDescription } from "../utils/createDescription";
+import { createFocusRing } from "../interactions/createFocusRing";
+import { mergeProps } from "../utils/mergeProps";
 import type { RangeCalendarState, CalendarDate, DateValue } from "@proyecto-viviana/solid-stately";
 import {
   isToday as isTodayUtil,
@@ -41,6 +57,8 @@ export interface RangeCalendarCellAria {
   isSelectionEnd: boolean;
   /** Whether the cell is focused. */
   isFocused: boolean;
+  /** Whether the cell should display a keyboard focus ring. */
+  isFocusVisible: boolean;
   /** Whether the cell is disabled. */
   isDisabled: boolean;
   /** Whether the cell is unavailable (e.g., booked date). */
@@ -67,7 +85,11 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
 ): RangeCalendarCellAria {
   const getProps = () => access(props);
   const [isPressed, setIsPressed] = createSignal(false);
+  const { focusProps, isFocusVisible: isRingFocusVisible } = createFocusRing();
   const timeZone = getLocalTimeZone();
+  let cellReceivedPointer = false;
+  let ignoreNextClick = false;
+  const startedUnfocused = !state.isFocused();
 
   // Get the date from props
   const date = createMemo(() => getProps().date as CalendarDate);
@@ -88,7 +110,7 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
     );
   });
   const isDisabled = createMemo(() => {
-    return getProps().isDisabled || state.isCellDisabled(date());
+    return getProps().isDisabled || state.isCellDisabled(date()) || !!getProps().isOutsideMonth;
   });
   const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
   const isSelectable = createMemo(() => !isDisabled() && !isUnavailable());
@@ -101,6 +123,47 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
   // on mount) — NOT the roving tabIndex, which tracks focusedDate directly.
   const isFocused = createMemo(() => state.isCellFocused(date()) && !isOutsideMonth());
   const isToday = createMemo(() => isTodayUtil(date(), timeZone));
+  // RAC CalendarCell: `useFocusRing()` then `isFocusVisible &&= states.isFocused`.
+  const isCellFocusVisible = createMemo(() => isRingFocusVisible() && isFocused());
+  const [isOverlayAutoFocusVisible, setIsOverlayAutoFocusVisible] = createSignal(false);
+
+  // Overlay-open: first selected paint must be accent-700. Dialog FocusScope can
+  // focus the cell before paint, so the ring may already be visible on that first
+  // frame (no interpolation). Hold the fill until a later frame. Skip when this
+  // cell took the pointer (in-canvas click) or when it mounted already focused
+  // (Next/Previous). Solid `createEffect` is a microtask (before paint), so one
+  // rAF still runs in that same frame — double rAF waits until after first paint.
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
+    if (!startedUnfocused) {
+      return;
+    }
+    if (!isFocused() || cellReceivedPointer) {
+      setIsOverlayAutoFocusVisible(false);
+      return;
+    }
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => {
+        if (isFocused() && !cellReceivedPointer) {
+          setIsOverlayAutoFocusVisible(true);
+        }
+      });
+    });
+    _s2Cleanups.push(() => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
+  });
+
+  const isFocusVisible = createMemo(() =>
+    startedUnfocused ? isOverlayAutoFocusVisible() : isCellFocusVisible(),
+  );
   const rangeSelectionPrompt = createMemo(() => {
     if (!isFocused() || state.isReadOnly() || !isSelectable()) {
       return undefined;
@@ -121,40 +184,101 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
   // Handle pointer down - selection on pointerdown avoids losing selection when
   // hover/focus updates re-render cells before click fires.
   const handlePointerDown = (e: PointerEvent) => {
+    cellReceivedPointer = true;
+    const target = (e.currentTarget || e.target) as HTMLElement | null;
+    if (target && "releasePointerCapture" in target) {
+      if ("hasPointerCapture" in target ? target.hasPointerCapture(e.pointerId) : true) {
+        try {
+          target.releasePointerCapture(e.pointerId);
+        } catch {}
+      }
+    }
     if (isSelectable()) {
       setIsPressed(true);
+      state.setFocusedDate(date());
+      state.setFocused(true);
       state.selectDate(date());
-      e.preventDefault();
+      ignoreNextClick = true;
+      const element = ref?.();
+      if (element) {
+        focusSafely(element);
+      }
     }
   };
 
   // Handle click for keyboard activation (Enter/Space).
   const handleClick = () => {
-    if (isSelectable()) {
+    if (ignoreNextClick) {
+      ignoreNextClick = false;
+      return;
+    }
+    if (!isSelectable()) return;
+    const hadAnchor = state.anchorDate() != null;
+    state.setFocusedDate(date());
+    state.setFocused(true);
+    state.selectDate(date());
+    const element = ref?.();
+    if (element) {
+      focusSafely(element);
+    }
+    // RAC `useCalendarCell.ts:300-306`: keyboard range-start auto-advances.
+    if (!hadAnchor) {
+      state.focusNearestAvailableDate(date());
+    }
+  };
+
+  const handlePointerUp = (e?: PointerEvent) => {
+    setIsPressed(false);
+    if (
+      isSelectable() &&
+      (!e || e.button === 0) &&
+      state.isDragging() &&
+      state.anchorDate() &&
+      !isSameDay(date(), state.anchorDate()!)
+    ) {
       state.selectDate(date());
+      state.setFocusedDate(date());
+      state.setFocused(true);
+      const element = ref?.();
+      if (element) {
+        focusSafely(element);
+      }
     }
   };
 
-  const handlePointerUp = () => {
+  const handlePointerLeave = () => {
     setIsPressed(false);
   };
 
   // Handle hover during range selection
-  const handlePointerEnter = () => {
-    if (state.isDragging() && isSelectable()) {
+  const handlePointerEnter = (e?: PointerEvent) => {
+    if (
+      isSelectable() &&
+      (state.isDragging() || (state.anchorDate() && e?.pointerType !== "touch"))
+    ) {
       state.setFocusedDate(date());
     }
   };
 
-  // Keep DOM focus synchronized with focused date updates.
-  // Use focusSafely (preventScroll) to match @react-aria/calendar — bare focus()
-  // causes the browser to auto-scroll the page when bringing the cell into view,
-  // which is wrong inside a popover.
-  createEffect(() => {
+  // RAC uses useEffect (after paint). Solid createEffect is sync, so a
+  // Next/Previous click would steal focus onto the new cell before the
+  // nav button receives click-focus (#279).
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const element = ref?.();
-    if (element && isFocused()) {
+    if (!element || !isFocused()) return;
+    const frame = requestAnimationFrame(() => {
+      if (!isFocused() || ref?.() !== element) return;
+      const navLabel = document.activeElement?.getAttribute("aria-label");
+      if (navLabel === "Next" || navLabel === "Previous") return;
       focusSafely(element);
-    }
+    });
+    _s2Cleanups.push(() => cancelAnimationFrame(frame));
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   // Cell props (for the td element)
@@ -199,6 +323,14 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
     } else if (isSelected()) {
       label = formatCalendarLabel(state.locale(), "dateSelected", { date: label });
     }
+    // RAC `useCalendarCell.ts:164-168`: min/max cells append First/Last available date.
+    const minValue = state.minValue();
+    const maxValue = state.maxValue();
+    if (minValue && isSameDay(d, minValue)) {
+      label += `, ${formatCalendarLabel(state.locale(), "minimumDate")}`;
+    } else if (maxValue && isSameDay(d, maxValue)) {
+      label += `, ${formatCalendarLabel(state.locale(), "maximumDate")}`;
+    }
 
     const errorMessageId = hookData?.errorMessageId;
     const describedByIds = [
@@ -206,32 +338,36 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
       descriptionProps["aria-describedby"],
     ].filter(Boolean);
 
-    return {
-      role: "button",
-      // Roving tabbable cell = the focusedDate cell, ungated by calendar focus,
-      // mirroring @react-aria/calendar useCalendarCell
-      // (`tabIndex = isSameDay(date, state.focusedDate) ? 0 : -1`, undefined when
-      // disabled). Keeps one cell tabbable on mount without stealing focus, and
-      // prunes tabindex from disabled cells like upstream.
-      tabIndex: isDisabled() ? undefined : isSameDay(d, state.focusedDate()) ? 0 : -1,
-      "aria-label": label,
-      "aria-disabled": isDisabled() || isUnavailable() || undefined,
-      "aria-invalid": isInvalid() || undefined,
-      "aria-describedby": describedByIds.length ? describedByIds.join(" ") : undefined,
-      "aria-pressed": isPressed() || undefined,
-      disabled: isDisabled() || isUnavailable(),
-      onClick: handleClick,
-      onPointerDown: handlePointerDown,
-      onPointerUp: handlePointerUp,
-      onPointerLeave: handlePointerUp,
-      onPointerEnter: handlePointerEnter,
-      onFocus: () => {
-        if (!state.isCellFocused(d)) {
-          state.setFocusedDate(d);
-        }
-        state.setFocused(true);
-      },
-    };
+    return mergeProps(
+      focusProps as Record<string, unknown>,
+      {
+        role: "button",
+        // Roving tabbable cell = the focusedDate cell, ungated by calendar focus,
+        // mirroring @react-aria/calendar useCalendarCell
+        // (`tabIndex = isSameDay(date, state.focusedDate) ? 0 : -1`, undefined when
+        // disabled). Keeps one cell tabbable on mount without stealing focus, and
+        // prunes tabindex from disabled cells like upstream.
+        tabIndex: isDisabled() ? undefined : isSameDay(d, state.focusedDate()) ? 0 : -1,
+        "aria-label": label,
+        "aria-disabled": isDisabled() || isUnavailable() || undefined,
+        "aria-invalid": isInvalid() || undefined,
+        "aria-describedby": describedByIds.length ? describedByIds.join(" ") : undefined,
+        "aria-pressed": isPressed() || undefined,
+        "data-focus-visible": isFocusVisible() || undefined,
+        disabled: isDisabled() || isUnavailable(),
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerEnter: handlePointerEnter,
+        onFocus: () => {
+          if (!state.isCellFocused(d)) {
+            state.setFocusedDate(d);
+          }
+          state.setFocused(true);
+        },
+      } as Record<string, unknown>,
+    );
   });
 
   return {
@@ -253,6 +389,9 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
     get isFocused() {
       return isFocused();
     },
+    get isFocusVisible() {
+      return isFocusVisible();
+    },
     get isDisabled() {
       return isDisabled();
     },

package/src/calendar/intl/index.ts

@@ -1,3 +1,40 @@
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/ar-AE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/bg-BG.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/cs-CZ.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/da-DK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/de-DE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/el-GR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/en-US.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/es-ES.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/et-EE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/fi-FI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/fr-FR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/he-IL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/hr-HR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/hu-HU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/it-IT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/ja-JP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/ko-KR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/lt-LT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/lv-LV.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/nb-NO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/nl-NL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/pl-PL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/pt-BR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/pt-PT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/ro-RO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/ru-RU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/sk-SK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/sl-SI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/sr-SP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/sv-SE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/tr-TR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/uk-UA.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/zh-CN.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/calendar/zh-TW.json
+
+// Ported from @react-aria/calendar intl catalog.
+
 import {
   LocalizedStringDictionary,
   LocalizedStringFormatter,

package/src/calendar/utils.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-aria/src/calendar/utils.ts
+
 import {
   type CalendarDate,
   DateFormatter,

package/src/checkbox/createCheckbox.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-aria/src/checkbox/useCheckbox.ts
+
 /**
  * Checkbox hook for Solidaria
  *
@@ -8,11 +22,13 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckbox hook.
  */
 
-import { JSX, Accessor, createEffect } from "solid-js";
+import { Accessor, createTrackedEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createToggle, type AriaToggleProps } from "../toggle";
 import { type ToggleState } from "@proyecto-viviana/solid-stately";
 import { createPress } from "../interactions/createPress";
 import { mergeProps } from "../utils/mergeProps";
+import { attrTrue } from "../utils/domAttrs";
 import { type MaybeAccessor, access } from "../utils/reactivity";
 
 export interface AriaCheckboxProps extends AriaToggleProps {
@@ -71,17 +87,10 @@ export function createCheckbox(
 
   // Get toggle aria props
   const toggleResult = createToggle(props, state, inputRef);
-  const {
-    labelProps: baseLabelProps,
-    isSelected,
-    isPressed,
-    isDisabled,
-    isReadOnly,
-    isInvalid,
-  } = toggleResult;
+  const { labelProps: baseLabelProps, isSelected, isPressed } = toggleResult;
 
   // Handle indeterminate state
-  createEffect(() => {
+  createTrackedEffect(() => {
     const input = inputRef();
     const isIndeterminate = getProps().isIndeterminate;
     if (input) {
@@ -93,13 +102,13 @@ export function createCheckbox(
 
   // Reset validation state on label press for checkbox with a hidden input.
   const { pressProps } = createPress({
-    get isDisabled() {
-      return isDisabled || isReadOnly;
-    },
     onPress() {
       // Validation state reset would be handled here if we had form validation
       // For now, this is a no-op placeholder matching React-Aria's pattern
     },
+    get isDisabled() {
+      return toggleResult.isDisabled || toggleResult.isReadOnly;
+    },
   });
 
   return {
@@ -118,7 +127,7 @@ export function createCheckbox(
 
       return mergeProps(toggleResult.inputProps, {
         checked: isSelected(),
-        "aria-required": (isRequired && validationBehavior === "aria") || undefined,
+        "aria-required": attrTrue(Boolean(isRequired && validationBehavior === "aria")),
         required: isRequired && validationBehavior === "native",
       }) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
@@ -130,8 +139,14 @@ export function createCheckbox(
     },
     isSelected,
     isPressed,
-    isDisabled,
-    isReadOnly,
-    isInvalid,
+    get isDisabled() {
+      return toggleResult.isDisabled;
+    },
+    get isReadOnly() {
+      return toggleResult.isReadOnly;
+    },
+    get isInvalid() {
+      return toggleResult.isInvalid;
+    },
   };
 }

package/src/checkbox/createCheckboxGroup.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-aria/src/checkbox/useCheckboxGroup.ts
+
 /**
  * Checkbox group hook for Solidaria
  *
@@ -7,11 +21,13 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroup hook.
  */
 
-import { JSX, createEffect } from "solid-js";
+import { createTrackedEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createField } from "../label";
 import { createFocusWithin } from "../interactions/createFocusWithin";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { mergeProps } from "../utils/mergeProps";
+import { attrString } from "../utils/domAttrs";
 import { type MaybeAccessor, access } from "../utils/reactivity";
 import {
   type CheckboxGroupState,
@@ -85,8 +101,9 @@ export function createCheckboxGroup(
     return errors.length > 0 ? errors : undefined;
   };
 
-  // Use field for label association
-  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
+  // Keep the `createField` getters intact. Destructuring `fieldProps` would
+  // freeze the first `aria-describedby` snapshot (RAC `useField.ts:51-60`).
+  const field = createField({
     get label() {
       return getProps().label;
     },
@@ -117,18 +134,19 @@ export function createCheckboxGroup(
   });
 
   const updateCheckboxGroupData = () => {
+    const p = getProps();
     checkboxGroupData.set(state, {
-      name: getProps().name,
-      form: getProps().form,
-      descriptionId: descriptionProps.id,
-      errorMessageId: errorMessageProps.id,
-      validationBehavior: getProps().validationBehavior ?? "native",
+      name: p.name,
+      form: p.form,
+      descriptionId: p.description ? attrString(field.descriptionProps.id) : undefined,
+      errorMessageId: p.errorMessage ? attrString(field.errorMessageProps.id) : undefined,
+      validationBehavior: p.validationBehavior ?? "native",
     });
   };
 
   // Store group metadata synchronously for first-render children, then keep it reactive.
   updateCheckboxGroupData();
-  createEffect(updateCheckboxGroupData);
+  createTrackedEffect(updateCheckboxGroupData);
 
   // Filter DOM props
   const domProps = () =>
@@ -152,18 +170,18 @@ export function createCheckboxGroup(
       return mergeProps(domProps(), {
         role: "group",
         "aria-disabled": state.isDisabled || undefined,
-        ...fieldProps,
+        ...field.fieldProps,
         ...focusWithinProps,
       }) as JSX.HTMLAttributes<HTMLElement>;
     },
     get labelProps() {
-      return labelProps as JSX.HTMLAttributes<HTMLElement>;
+      return field.labelProps as JSX.HTMLAttributes<HTMLElement>;
     },
     get descriptionProps() {
-      return descriptionProps;
+      return field.descriptionProps;
     },
     get errorMessageProps() {
-      return errorMessageProps;
+      return field.errorMessageProps;
     },
     get isInvalid() {
       return isInvalid();

package/src/checkbox/createCheckboxGroupItem.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-aria/src/checkbox/useCheckboxGroupItem.ts
+
 /**
  * Checkbox group item hook for Solidaria
  *
@@ -7,7 +21,7 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroupItem hook.
  */
 
-import { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createCheckbox, type AriaCheckboxProps, type CheckboxAria } from "./createCheckbox";
 import { type ToggleState, type CheckboxGroupState } from "@proyecto-viviana/solid-stately";
 import { checkboxGroupData } from "./createCheckboxGroup";

package/src/collections/index.ts

@@ -1,5 +1,23 @@
-import { createContext, createMemo, useContext, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+/*
+ * 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.
+ */
+
+// 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-aria/src/collections/CollectionBuilder.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/collections/Hidden.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/collections/useCachedChildren.ts
+
+import { access, type MaybeAccessor, useContextOptional } from "../utils";
+import { createContext, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   ListCollection,
   type Collection as StatelyCollection,
@@ -135,7 +153,7 @@ export function createHideableComponent<TProps>(
 }
 
 export function useIsHidden(): Accessor<boolean> {
-  return useContext(HiddenContext) ?? (() => false);
+  return useContextOptional(HiddenContext) ?? (() => false);
 }
 
 /**