@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/calendar/createCalendarGrid.ts

@@ -5,7 +5,7 @@
  * Based on @react-aria/calendar useCalendarGrid
  */
 
-import { createMemo, onMount, onCleanup } from 'solid-js';
+import { createMemo } from 'solid-js';
 import { type MaybeAccessor } from '../utils/reactivity';
 import type { CalendarState, CalendarDate } from '@proyecto-viviana/solid-stately';
 
@@ -47,17 +47,32 @@ export function createCalendarGrid<T extends CalendarState>(
   const weekDays = createMemo(() => state.weekDays());
 
   // Handle keyboard navigation
+  const isRTL = (): boolean => {
+    const element = ref?.();
+    const scopedDirection = element?.closest('[dir]')?.getAttribute('dir');
+    const documentDirection = typeof document !== 'undefined' ? document.dir : '';
+    return (scopedDirection ?? documentDirection) === 'rtl';
+  };
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (state.isDisabled()) return;
 
     switch (e.key) {
       case 'ArrowLeft':
         e.preventDefault();
-        state.focusPreviousDay();
+        if (isRTL()) {
+          state.focusNextDay();
+        } else {
+          state.focusPreviousDay();
+        }
         break;
       case 'ArrowRight':
         e.preventDefault();
-        state.focusNextDay();
+        if (isRTL()) {
+          state.focusPreviousDay();
+        } else {
+          state.focusNextDay();
+        }
         break;
       case 'ArrowUp':
         e.preventDefault();
@@ -96,20 +111,15 @@ export function createCalendarGrid<T extends CalendarState>(
         e.preventDefault();
         state.selectFocusedDate();
         break;
+      case 'Escape':
+        if ('setAnchorDate' in state && typeof state.setAnchorDate === 'function') {
+          e.preventDefault();
+          state.setAnchorDate(null);
+        }
+        break;
     }
   };
 
-  // Register keyboard listener
-  onMount(() => {
-    const element = ref?.();
-    if (element) {
-      element.addEventListener('keydown', handleKeyDown);
-      onCleanup(() => {
-        element.removeEventListener('keydown', handleKeyDown);
-      });
-    }
-  });
-
   // Grid props
   const gridProps = createMemo(() => ({
     role: 'grid',
@@ -121,10 +131,9 @@ export function createCalendarGrid<T extends CalendarState>(
     onKeyDown: handleKeyDown,
   }));
 
-  // Header props
-  const headerProps = createMemo(() => ({
-    role: 'row',
-  }));
+  // Header props are intentionally empty. Consumers render this on <thead>,
+  // which already has correct table semantics.
+  const headerProps = createMemo(() => ({}));
 
   return {
     get gridProps() {

package/src/calendar/createRangeCalendarCell.ts

@@ -5,7 +5,7 @@
  * Based on @react-aria/calendar useCalendarCell (with range support)
  */
 
-import { createSignal, createMemo } from 'solid-js';
+import { createSignal, createMemo, createEffect } from 'solid-js';
 import { access, type MaybeAccessor } from '../utils/reactivity';
 import type { RangeCalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
 import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
@@ -19,6 +19,8 @@ export interface AriaRangeCalendarCellProps {
   date: DateValue;
   /** Whether the cell is disabled. */
   isDisabled?: boolean;
+  /** Whether the date is outside the current month grid. */
+  isOutsideMonth?: boolean;
 }
 
 export interface RangeCalendarCellAria {
@@ -58,7 +60,7 @@ export interface RangeCalendarCellAria {
 export function createRangeCalendarCell<T extends RangeCalendarState>(
   props: MaybeAccessor<AriaRangeCalendarCellProps>,
   state: T,
-  _ref?: () => HTMLElement | null
+  ref?: () => HTMLElement | null
 ): RangeCalendarCellAria {
   const getProps = () => access(props);
   const [isPressed, setIsPressed] = createSignal(false);
@@ -76,7 +78,9 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
     return getProps().isDisabled || state.isCellDisabled(date());
   });
   const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
-  const isOutsideMonth = createMemo(() => state.isOutsideVisibleRange(date()));
+  const isOutsideMonth = createMemo(() => {
+    return getProps().isOutsideMonth ?? state.isOutsideVisibleRange(date());
+  });
   const isToday = createMemo(() => isTodayUtil(date(), timeZone));
 
   // Format the date for display
@@ -84,17 +88,20 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
     return date().day.toString();
   });
 
-  // Handle click
-  const handleClick = () => {
+  // Handle pointer down - selection on pointerdown avoids losing selection when
+  // hover/focus updates re-render cells before click fires.
+  const handlePointerDown = (e: PointerEvent) => {
     if (!isDisabled() && !isUnavailable()) {
+      setIsPressed(true);
       state.selectDate(date());
+      e.preventDefault();
     }
   };
 
-  // Handle pointer events for pressed state
-  const handlePointerDown = () => {
+  // Handle click for keyboard activation (Enter/Space).
+  const handleClick = () => {
     if (!isDisabled() && !isUnavailable()) {
-      setIsPressed(true);
+      state.selectDate(date());
     }
   };
 
@@ -109,6 +116,14 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
     }
   };
 
+  // Keep DOM focus synchronized with focused date updates.
+  createEffect(() => {
+    const element = ref?.();
+    if (element && isFocused()) {
+      element.focus();
+    }
+  });
+
   // Cell props (for the td element)
   const cellProps = createMemo(() => ({
     role: 'gridcell',
@@ -139,7 +154,9 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
       onPointerLeave: handlePointerUp,
       onPointerEnter: handlePointerEnter,
       onFocus: () => {
-        state.setFocusedDate(d);
+        if (!state.isCellFocused(d)) {
+          state.setFocusedDate(d);
+        }
         state.setFocused(true);
       },
     };

package/src/checkbox/createCheckboxGroup.ts

@@ -13,7 +13,7 @@ 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 } from '@proyecto-viviana/solid-stately';
+import { type CheckboxGroupState, type CheckboxGroupProps, type ValidityState } from '@proyecto-viviana/solid-stately';
 
 // ============================================
 // TYPES
@@ -45,6 +45,10 @@ export interface CheckboxGroupAria {
   errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the checkbox group is invalid. */
   isInvalid: boolean;
+  /** Validation errors, if any. */
+  validationErrors: string[];
+  /** Validation details, if any. */
+  validationDetails: ValidityState;
 }
 
 // WeakMap to share data between checkbox group and checkbox group items
@@ -75,8 +79,15 @@ export function createCheckboxGroup(
   state: CheckboxGroupState
 ): CheckboxGroupAria {
   const getProps = () => access(props);
+  const displayValidation = () => state.displayValidation();
+  const validationErrors = () => displayValidation().validationErrors;
+  const validationDetails = () => displayValidation().validationDetails;
 
-  const isInvalid = () => state.isInvalid;
+  const isInvalid = () => displayValidation().isInvalid;
+  const fallbackErrorMessage = () => {
+    const errors = validationErrors();
+    return errors.length > 0 ? errors : undefined;
+  };
 
   // Use field for label association
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
@@ -86,7 +97,7 @@ export function createCheckboxGroup(
     get 'aria-describedby'() { return getProps()['aria-describedby']; },
     get 'aria-details'() { return getProps()['aria-details']; },
     get description() { return getProps().description; },
-    get errorMessage() { return getProps().errorMessage ?? (isInvalid() ? 'Invalid selection' : undefined); },
+    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.
@@ -99,7 +110,7 @@ export function createCheckboxGroup(
     form: getProps().form,
     descriptionId: descriptionProps.id,
     errorMessageId: errorMessageProps.id,
-    validationBehavior: 'aria',
+    validationBehavior: getProps().validationBehavior ?? 'aria',
   });
 
   // Filter DOM props
@@ -133,5 +144,11 @@ export function createCheckboxGroup(
     get isInvalid() {
       return isInvalid();
     },
+    get validationErrors() {
+      return validationErrors();
+    },
+    get validationDetails() {
+      return validationDetails();
+    },
   };
 }

package/src/collections/index.ts

@@ -0,0 +1,242 @@
+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';
+
+export interface CachedChildrenOptions<T> {
+  items?: Iterable<T>;
+  children?: ((item: T) => unknown) | unknown;
+  dependencies?: ReadonlyArray<unknown>;
+  getKey?: (item: T) => Key;
+  idScope?: Key;
+  addIdAndValue?: boolean;
+}
+
+export interface CollectionBuilderProps<T> extends CachedChildrenOptions<T> {}
+
+export interface CollectionProps<T> extends CollectionBuilderProps<T> {}
+
+export interface CollectionCompatNode<TProps = unknown, TValue = unknown> {
+  key: Key;
+  value: TValue;
+  props: TProps;
+}
+
+const COLLECTION_NODE_PROP = '__collectionNode';
+
+function applyCollectionMetadata<T>(
+  rendered: unknown,
+  item: T,
+  key: Key,
+  addIdAndValue: boolean
+): unknown {
+  if (typeof rendered !== 'object' || rendered === null) return rendered;
+  const next = {
+    ...(rendered as Record<string, unknown>),
+    key,
+    [COLLECTION_NODE_PROP]: {
+      key,
+      value: item,
+      props: rendered as Record<string, unknown>,
+    } satisfies CollectionCompatNode<Record<string, unknown>, T>,
+  } as Record<string, unknown>;
+  if (addIdAndValue) {
+    next.id = key;
+    next.value = item;
+  }
+  return next;
+}
+
+/**
+ * Compatibility helper mirroring React Aria collections API shape.
+ * 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) {
+    const children = props.children as (item: T) => unknown;
+    const mapped: unknown[] = [];
+    let index = 0;
+
+    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');
+      }
+      const key = props.idScope != null ? `${String(props.idScope)}:${String(baseKey)}` : baseKey;
+      const rendered = children(item);
+      const withMeta = applyCollectionMetadata(
+        rendered,
+        item,
+        key,
+        props.addIdAndValue ?? false
+      );
+      mapped.push(withMeta);
+      index += 1;
+    }
+
+    return mapped;
+  }
+  return props.children ?? null;
+}
+
+export function Collection<T>(props: CollectionProps<T>): unknown {
+  return CollectionBuilder({
+    ...props,
+    addIdAndValue: props.addIdAndValue ?? true,
+  });
+}
+
+/**
+ * Identity helper retained for API compatibility.
+ */
+export function createLeafComponent<TProps>(
+  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;
+    if (component.length >= 2 && !node) {
+      throw new Error(`${component.name || 'Component'} cannot be rendered outside a collection.`);
+    }
+    return component(props, node);
+  };
+}
+
+/**
+ * Identity helper retained for API compatibility.
+ */
+export function createBranchComponent<TProps>(
+  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;
+    if (component.length >= 2 && !node) {
+      throw new Error(`${component.name || 'Component'} cannot be rendered outside a collection.`);
+    }
+    return component(props, node);
+  };
+}
+
+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 {
+  return (props: TProps) => {
+    const isHidden = useIsHidden();
+    if (isHidden()) return null;
+    return component(props);
+  };
+}
+
+export function useIsHidden(): Accessor<boolean> {
+  return useContext(HiddenContext) ?? (() => false);
+}
+
+/**
+ * Memoized item renderer for dynamic child mapping.
+ */
+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;
+  let lastIdScope: Key | undefined;
+  let lastAddIdAndValue: boolean | undefined;
+  let lastGetKey: ((item: T) => Key) | undefined;
+
+  const clearCaches = (): void => {
+    objectCache = new WeakMap<object, unknown>();
+    primitiveCache.clear();
+  };
+
+  const getItemKey = (item: T, index: number, getKey?: (item: T) => Key): Key | undefined => {
+    return getResolvedItemKey(item, index, getKey);
+  };
+
+  return createMemo(() => {
+    const resolved = access(options);
+    const resolvedAddIdAndValue = resolved.addIdAndValue ?? false;
+    const resolvedGetKey = resolved.getKey;
+    const resolvedIdScope = resolved.idScope;
+
+    if (resolved.dependencies && resolved.dependencies !== lastDependencies) {
+      clearCaches();
+      lastDependencies = resolved.dependencies;
+    }
+    if (
+      resolvedIdScope !== lastIdScope ||
+      resolvedAddIdAndValue !== lastAddIdAndValue ||
+      resolvedGetKey !== lastGetKey
+    ) {
+      clearCaches();
+      lastIdScope = resolvedIdScope;
+      lastAddIdAndValue = resolvedAddIdAndValue;
+      lastGetKey = resolvedGetKey;
+    }
+
+    if (typeof resolved.children === 'function' && resolved.items) {
+      const children = resolved.children as (item: T) => unknown;
+      const rendered: unknown[] = [];
+      let index = 0;
+
+      for (const item of resolved.items) {
+        const baseKey = getItemKey(item, index, resolvedGetKey);
+        if (baseKey == null) {
+          throw new Error('Could not determine key for item');
+        }
+        const key = resolvedIdScope != null ? `${String(resolvedIdScope)}:${String(baseKey)}` : baseKey;
+        let child: unknown;
+
+        if (typeof item === 'object' && item !== null) {
+          child = objectCache.get(item as object);
+          if (child === undefined) {
+            child = applyCollectionMetadata(children(item), item, key, resolvedAddIdAndValue);
+            objectCache.set(item as object, child);
+          }
+        } else {
+          if (primitiveCache.has(key)) {
+            child = primitiveCache.get(key);
+          } else {
+            child = applyCollectionMetadata(children(item), item, key, resolvedAddIdAndValue);
+            primitiveCache.set(key, child);
+          }
+        }
+
+        rendered.push(child);
+        index += 1;
+      }
+
+      return rendered;
+    }
+    const child = resolved.children;
+    return child == null ? [] : [child];
+  });
+}
+
+/**
+ * Minimal BaseCollection compatibility class.
+ */
+export class BaseCollection<T = unknown> extends ListCollection<T> {}
+
+export type CollectionNode<T = unknown> = StatelyCollectionNode<T>;
+export type ItemNode<T = unknown> = StatelyCollectionNode<T>;
+export type SectionNode<T = unknown> = StatelyCollectionNode<T>;
+export type FilterableNode<T = unknown> = StatelyCollectionNode<T>;
+export type LoaderNode<T = unknown> = StatelyCollectionNode<T>;
+export type HeaderNode<T = unknown> = StatelyCollectionNode<T>;
+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) {
+    const keyed = item as Record<string, unknown>;
+    const keyValue = keyed.key ?? keyed.id;
+    if (typeof keyValue === 'string' || typeof keyValue === 'number') return keyValue;
+  }
+  if (typeof item === 'string' || typeof item === 'number') return index;
+  return undefined;
+}