@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/checkbox/createCheckboxGroup.ts

@@ -7,27 +7,27 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroup hook.
  */
 
-import { JSX } from 'solid-js';
-import { createField } from '../label';
-import { createFocusWithin } from '../interactions/createFocusWithin';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { type CheckboxGroupState, type CheckboxGroupProps, type ValidityState } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { JSX, createEffect } from "solid-js";
+import { createField } from "../label";
+import { createFocusWithin } from "../interactions/createFocusWithin";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { mergeProps } from "../utils/mergeProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import {
+  type CheckboxGroupState,
+  type CheckboxGroupProps,
+  type ValidityState,
+} from "@proyecto-viviana/solid-stately";
 
 export interface AriaCheckboxGroupProps extends CheckboxGroupProps {
   /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
+  "aria-details"?: string;
   /** A description for the field. Provides a hint such as specific requirements for what to choose. */
   description?: JSX.Element;
   /** An error message for the field. */
@@ -59,14 +59,10 @@ export const checkboxGroupData = new WeakMap<
     form?: string;
     descriptionId?: string;
     errorMessageId?: string;
-    validationBehavior: 'aria' | 'native';
+    validationBehavior: "aria" | "native";
   }
 >();
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a checkbox group component.
  * Checkbox groups allow users to select multiple items from a list of options.
@@ -76,7 +72,7 @@ export const checkboxGroupData = new WeakMap<
  */
 export function createCheckboxGroup(
   props: MaybeAccessor<AriaCheckboxGroupProps>,
-  state: CheckboxGroupState
+  state: CheckboxGroupState,
 ): CheckboxGroupAria {
   const getProps = () => access(props);
   const displayValidation = () => state.displayValidation();
@@ -91,43 +87,71 @@ export function createCheckboxGroup(
 
   // Use field for label association
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
-    get 'aria-describedby'() { return getProps()['aria-describedby']; },
-    get 'aria-details'() { return getProps()['aria-details']; },
-    get description() { return getProps().description; },
-    get errorMessage() { return getProps().errorMessage ?? fallbackErrorMessage(); },
-    get isInvalid() { return isInvalid(); },
+    get label() {
+      return getProps().label;
+    },
+    get "aria-label"() {
+      return getProps()["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
+    },
+    get "aria-describedby"() {
+      return getProps()["aria-describedby"];
+    },
+    get "aria-details"() {
+      return getProps()["aria-details"];
+    },
+    get description() {
+      return getProps().description;
+    },
+    get errorMessage() {
+      return getProps().errorMessage ?? fallbackErrorMessage();
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
     // Checkbox group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span',
+    labelElementType: "span",
   });
 
-  // Store data for checkbox group items
-  checkboxGroupData.set(state, {
-    name: getProps().name,
-    form: getProps().form,
-    descriptionId: descriptionProps.id,
-    errorMessageId: errorMessageProps.id,
-    validationBehavior: getProps().validationBehavior ?? 'aria',
-  });
+  const updateCheckboxGroupData = () => {
+    checkboxGroupData.set(state, {
+      name: getProps().name,
+      form: getProps().form,
+      descriptionId: descriptionProps.id,
+      errorMessageId: errorMessageProps.id,
+      validationBehavior: getProps().validationBehavior ?? "native",
+    });
+  };
+
+  // Store group metadata synchronously for first-render children, then keep it reactive.
+  updateCheckboxGroupData();
+  createEffect(updateCheckboxGroupData);
 
   // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+  const domProps = () =>
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
 
   // Handle focus within
   const { focusWithinProps } = createFocusWithin({
-    get onBlurWithin() { return getProps().onBlur; },
-    get onFocusWithin() { return getProps().onFocus; },
-    get onFocusWithinChange() { return getProps().onFocusChange; },
+    get onBlurWithin() {
+      return getProps().onBlur;
+    },
+    get onFocusWithin() {
+      return getProps().onFocus;
+    },
+    get onFocusWithinChange() {
+      return getProps().onFocusChange;
+    },
   });
 
   return {
     get groupProps() {
       return mergeProps(domProps(), {
-        role: 'group',
-        'aria-disabled': state.isDisabled || undefined,
+        role: "group",
+        "aria-disabled": state.isDisabled || undefined,
         ...fieldProps,
         ...focusWithinProps,
       }) as JSX.HTMLAttributes<HTMLElement>;

package/src/checkbox/createCheckboxGroupItem.ts

@@ -7,25 +7,20 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroupItem hook.
  */
 
-import { JSX } from 'solid-js';
-import { createCheckbox, type AriaCheckboxProps, type CheckboxAria } from './createCheckbox';
-import { type ToggleState, type CheckboxGroupState } from '@proyecto-viviana/solid-stately';
-import { checkboxGroupData } from './createCheckboxGroup';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {
+import { JSX } from "solid-js";
+import { createCheckbox, type AriaCheckboxProps, type CheckboxAria } from "./createCheckbox";
+import { type ToggleState, type CheckboxGroupState } from "@proyecto-viviana/solid-stately";
+import { checkboxGroupData } from "./createCheckboxGroup";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+
+export interface AriaCheckboxGroupItemProps extends Omit<
+  AriaCheckboxProps,
+  "isSelected" | "defaultSelected"
+> {
   /** The value of the checkbox. */
   value: string;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a checkbox component
  * contained within a checkbox group.
@@ -37,7 +32,7 @@ export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isS
 export function createCheckboxGroupItem(
   props: MaybeAccessor<AriaCheckboxGroupItemProps>,
   state: CheckboxGroupState,
-  inputRef: () => HTMLInputElement | null
+  inputRef: () => HTMLInputElement | null,
 ): CheckboxAria {
   const getProps = () => access(props);
 
@@ -59,10 +54,8 @@ export function createCheckboxGroupItem(
     },
   };
 
-  // Get group data
   const getGroupData = () => checkboxGroupData.get(state);
 
-  // Build checkbox props
   const checkboxProps = (): AriaCheckboxProps => {
     const p = getProps();
     const groupData = getGroupData();
@@ -71,46 +64,38 @@ export function createCheckboxGroupItem(
       ...p,
       isReadOnly: p.isReadOnly ?? state.isReadOnly,
       isDisabled: p.isDisabled ?? state.isDisabled,
+      isInvalid: p.isInvalid ?? state.isInvalid,
       name: p.name ?? groupData?.name,
       form: p.form ?? groupData?.form,
       isRequired: p.isRequired ?? state.isRequired(),
-      validationBehavior: p.validationBehavior ?? groupData?.validationBehavior ?? 'aria',
+      validationBehavior: p.validationBehavior ?? groupData?.validationBehavior ?? "native",
     };
   };
 
-  // Use the checkbox hook
   const result = createCheckbox(checkboxProps, toggleState, inputRef);
 
-  // Add group-level aria-describedby
   return {
     ...result,
     get inputProps() {
       const baseInputProps = result.inputProps;
       const groupData = getGroupData();
 
-      const describedByIds: string[] = [];
-
-      // Add props aria-describedby
-      const propsDescribedBy = getProps()['aria-describedby'];
-      if (propsDescribedBy) {
-        describedByIds.push(propsDescribedBy);
-      }
-
-      // Add error message ID if group is invalid
-      if (state.isInvalid && groupData?.errorMessageId) {
-        describedByIds.push(groupData.errorMessageId);
-      }
-
-      // Add description ID
-      if (groupData?.descriptionId) {
-        describedByIds.push(groupData.descriptionId);
-      }
-
-      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+      // Mirror upstream useCheckboxGroupItem: keep the checkbox's own
+      // aria-describedby (its description/error slot ids from createCheckbox/
+      // createToggle, which already fold in the user's aria-describedby) and append
+      // the group's shared description/error ids.
+      const ariaDescribedBy =
+        [
+          baseInputProps["aria-describedby"],
+          state.isInvalid && groupData?.errorMessageId ? groupData.errorMessageId : null,
+          groupData?.descriptionId,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined;
 
       return {
         ...baseInputProps,
-        'aria-describedby': ariaDescribedBy,
+        "aria-describedby": ariaDescribedBy,
       } as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
   };

package/src/checkbox/createCheckboxGroupState.ts

@@ -7,12 +7,8 @@
  * This is a 1:1 port of @react-stately/checkbox's useCheckboxGroupState.
  */
 
-import { createSignal, Accessor } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, Accessor } from "solid-js";
+import { type MaybeAccessor, access } from "../utils/reactivity";
 
 export interface CheckboxGroupProps {
   /** The current selected values (controlled). */
@@ -71,47 +67,36 @@ export interface CheckboxGroupState {
   toggleValue(value: string): void;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for a checkbox group component.
  * Provides a name for the group, and manages selection and focus state.
  */
 export function createCheckboxGroupState(
-  props: MaybeAccessor<CheckboxGroupProps> = {}
+  props: MaybeAccessor<CheckboxGroupProps> = {},
 ): CheckboxGroupState {
   const getProps = () => access(props);
 
-  // Get initial values
   const initialProps = getProps();
   const initialValue = initialProps.value ?? initialProps.defaultValue ?? [];
 
-  // Create internal signal for uncontrolled mode
   const [internalValue, setInternalValue] = createSignal<readonly string[]>(initialValue);
 
-  // Determine if controlled
   const isControlled = () => getProps().value !== undefined;
 
-  // Get current value
   const value: Accessor<readonly string[]> = () => {
     const p = getProps();
     return isControlled() ? (p.value ?? []) : internalValue();
   };
 
-  // Check if required (true if isRequired and no items selected)
   const isRequired: Accessor<boolean> = () => {
     const p = getProps();
     return !!p.isRequired && value().length === 0;
   };
 
-  // Check if invalid
   const isInvalid = () => {
     return getProps().isInvalid ?? false;
   };
 
-  // Set value
   function setValue(newValue: string[]): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -125,12 +110,10 @@ export function createCheckboxGroupState(
     p.onChange?.(newValue);
   }
 
-  // Check if value is selected
   function isSelected(checkValue: string): boolean {
     return value().includes(checkValue);
   }
 
-  // Add value
   function addValue(addVal: string): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -143,7 +126,6 @@ export function createCheckboxGroupState(
     }
   }
 
-  // Remove value
   function removeValue(removeVal: string): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -156,7 +138,6 @@ export function createCheckboxGroupState(
     }
   }
 
-  // Toggle value
   function toggleValue(toggleVal: string): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {

package/src/checkbox/index.ts

@@ -1,13 +1,11 @@
-export { createCheckbox } from './createCheckbox';
-export type { AriaCheckboxProps, CheckboxAria } from './createCheckbox';
+export { createCheckbox } from "./createCheckbox";
+export type { AriaCheckboxProps, CheckboxAria } from "./createCheckbox";
 
-// Re-export state from solid-stately
-export { createCheckboxGroupState } from '@proyecto-viviana/solid-stately';
-export type { CheckboxGroupProps, CheckboxGroupState } from '@proyecto-viviana/solid-stately';
+export { createCheckboxGroupState } from "@proyecto-viviana/solid-stately";
+export type { CheckboxGroupProps, CheckboxGroupState } from "@proyecto-viviana/solid-stately";
 
-// ARIA hooks (solidaria-specific)
-export { createCheckboxGroup, checkboxGroupData } from './createCheckboxGroup';
-export type { AriaCheckboxGroupProps, CheckboxGroupAria } from './createCheckboxGroup';
+export { createCheckboxGroup, checkboxGroupData } from "./createCheckboxGroup";
+export type { AriaCheckboxGroupProps, CheckboxGroupAria } from "./createCheckboxGroup";
 
-export { createCheckboxGroupItem } from './createCheckboxGroupItem';
-export type { AriaCheckboxGroupItemProps } from './createCheckboxGroupItem';
+export { createCheckboxGroupItem } from "./createCheckboxGroupItem";
+export type { AriaCheckboxGroupItemProps } from "./createCheckboxGroupItem";

package/src/collections/index.ts

@@ -1,11 +1,11 @@
-import { createContext, createMemo, useContext, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
+import { createContext, createMemo, useContext, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 import {
   ListCollection,
   type Collection as StatelyCollection,
   type CollectionNode as StatelyCollectionNode,
   type Key,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 
 export interface CachedChildrenOptions<T> {
   items?: Iterable<T>;
@@ -26,15 +26,15 @@ export interface CollectionCompatNode<TProps = unknown, TValue = unknown> {
   props: TProps;
 }
 
-const COLLECTION_NODE_PROP = '__collectionNode';
+const COLLECTION_NODE_PROP = "__collectionNode";
 
 function applyCollectionMetadata<T>(
   rendered: unknown,
   item: T,
   key: Key,
-  addIdAndValue: boolean
+  addIdAndValue: boolean,
 ): unknown {
-  if (typeof rendered !== 'object' || rendered === null) return rendered;
+  if (typeof rendered !== "object" || rendered === null) return rendered;
   const next = {
     ...(rendered as Record<string, unknown>),
     key,
@@ -56,7 +56,7 @@ function applyCollectionMetadata<T>(
  * For Solid, this is a lightweight mapper over item arrays.
  */
 export function CollectionBuilder<T>(props: CollectionBuilderProps<T>): unknown {
-  if (typeof props.children === 'function' && props.items) {
+  if (typeof props.children === "function" && props.items) {
     const children = props.children as (item: T) => unknown;
     const mapped: unknown[] = [];
     let index = 0;
@@ -64,16 +64,11 @@ export function CollectionBuilder<T>(props: CollectionBuilderProps<T>): unknown
     for (const item of props.items) {
       const baseKey = getResolvedItemKey(item, index, props.getKey);
       if (baseKey == null) {
-        throw new Error('Could not determine key for item');
+        throw new Error("Could not determine key for item");
       }
       const key = props.idScope != null ? `${String(props.idScope)}:${String(baseKey)}` : baseKey;
       const rendered = children(item);
-      const withMeta = applyCollectionMetadata(
-        rendered,
-        item,
-        key,
-        props.addIdAndValue ?? false
-      );
+      const withMeta = applyCollectionMetadata(rendered, item, key, props.addIdAndValue ?? false);
       mapped.push(withMeta);
       index += 1;
     }
@@ -94,12 +89,14 @@ export function Collection<T>(props: CollectionProps<T>): unknown {
  * Identity helper retained for API compatibility.
  */
 export function createLeafComponent<TProps>(
-  component: (props: TProps, node?: CollectionCompatNode<TProps, unknown>) => unknown
+  component: (props: TProps, node?: CollectionCompatNode<TProps, unknown>) => unknown,
 ): (props: TProps) => unknown {
   return (props: TProps) => {
-    const node = (props as Record<string, unknown>)[COLLECTION_NODE_PROP] as CollectionCompatNode<TProps, unknown> | undefined;
+    const node = (props as Record<string, unknown>)[COLLECTION_NODE_PROP] as
+      | CollectionCompatNode<TProps, unknown>
+      | undefined;
     if (component.length >= 2 && !node) {
-      throw new Error(`${component.name || 'Component'} cannot be rendered outside a collection.`);
+      throw new Error(`${component.name || "Component"} cannot be rendered outside a collection.`);
     }
     return component(props, node);
   };
@@ -109,12 +106,14 @@ export function createLeafComponent<TProps>(
  * Identity helper retained for API compatibility.
  */
 export function createBranchComponent<TProps>(
-  component: (props: TProps, node?: CollectionCompatNode<TProps, unknown>) => unknown
+  component: (props: TProps, node?: CollectionCompatNode<TProps, unknown>) => unknown,
 ): (props: TProps) => unknown {
   return (props: TProps) => {
-    const node = (props as Record<string, unknown>)[COLLECTION_NODE_PROP] as CollectionCompatNode<TProps, unknown> | undefined;
+    const node = (props as Record<string, unknown>)[COLLECTION_NODE_PROP] as
+      | CollectionCompatNode<TProps, unknown>
+      | undefined;
     if (component.length >= 2 && !node) {
-      throw new Error(`${component.name || 'Component'} cannot be rendered outside a collection.`);
+      throw new Error(`${component.name || "Component"} cannot be rendered outside a collection.`);
     }
     return component(props, node);
   };
@@ -125,7 +124,9 @@ const HiddenContext = createContext<Accessor<boolean>>(() => false);
 /**
  * Wraps a component and suppresses rendering when the hidden context is true.
  */
-export function createHideableComponent<TProps>(component: (props: TProps) => unknown): (props: TProps) => unknown {
+export function createHideableComponent<TProps>(
+  component: (props: TProps) => unknown,
+): (props: TProps) => unknown {
   return (props: TProps) => {
     const isHidden = useIsHidden();
     if (isHidden()) return null;
@@ -140,7 +141,9 @@ export function useIsHidden(): Accessor<boolean> {
 /**
  * Memoized item renderer for dynamic child mapping.
  */
-export function useCachedChildren<T>(options: MaybeAccessor<CachedChildrenOptions<T>>): Accessor<unknown[]> {
+export function useCachedChildren<T>(
+  options: MaybeAccessor<CachedChildrenOptions<T>>,
+): Accessor<unknown[]> {
   let objectCache = new WeakMap<object, unknown>();
   const primitiveCache = new Map<Key, unknown>();
   let lastDependencies: ReadonlyArray<unknown> | undefined;
@@ -178,7 +181,7 @@ export function useCachedChildren<T>(options: MaybeAccessor<CachedChildrenOption
       lastGetKey = resolvedGetKey;
     }
 
-    if (typeof resolved.children === 'function' && resolved.items) {
+    if (typeof resolved.children === "function" && resolved.items) {
       const children = resolved.children as (item: T) => unknown;
       const rendered: unknown[] = [];
       let index = 0;
@@ -186,12 +189,13 @@ export function useCachedChildren<T>(options: MaybeAccessor<CachedChildrenOption
       for (const item of resolved.items) {
         const baseKey = getItemKey(item, index, resolvedGetKey);
         if (baseKey == null) {
-          throw new Error('Could not determine key for item');
+          throw new Error("Could not determine key for item");
         }
-        const key = resolvedIdScope != null ? `${String(resolvedIdScope)}:${String(baseKey)}` : baseKey;
+        const key =
+          resolvedIdScope != null ? `${String(resolvedIdScope)}:${String(baseKey)}` : baseKey;
         let child: unknown;
 
-        if (typeof item === 'object' && item !== null) {
+        if (typeof item === "object" && item !== null) {
           child = objectCache.get(item as object);
           if (child === undefined) {
             child = applyCollectionMetadata(children(item), item, key, resolvedAddIdAndValue);
@@ -232,11 +236,11 @@ export type CollectionType<T = unknown> = StatelyCollection<T>;
 
 function getResolvedItemKey<T>(item: T, index: number, getKey?: (item: T) => Key): Key | undefined {
   if (getKey) return getKey(item);
-  if (typeof item === 'object' && item !== null) {
+  if (typeof item === "object" && item !== null) {
     const keyed = item as Record<string, unknown>;
     const keyValue = keyed.key ?? keyed.id;
-    if (typeof keyValue === 'string' || typeof keyValue === 'number') return keyValue;
+    if (typeof keyValue === "string" || typeof keyValue === "number") return keyValue;
   }
-  if (typeof item === 'string' || typeof item === 'number') return index;
+  if (typeof item === "string" || typeof item === "number") return index;
   return undefined;
 }