@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/gridlist/createGridListItem.ts

@@ -3,21 +3,26 @@
  * Based on @react-aria/gridlist/useGridListItem.
  */
 
-import { createMemo, createSignal, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import type { GridState, GridCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaGridListItemProps, GridListItemAria } from './types';
-import { getGridListData } from './createGridList';
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import type { GridState, GridCollection } from "@proyecto-viviana/solid-stately";
+import type { AriaGridListItemProps, GridListItemAria } from "./types";
+import { getGridListData } from "./createGridList";
 
 /**
  * Creates accessibility props for a grid list item.
  */
-export function createGridListItem<T extends object, C extends GridCollection<T> = GridCollection<T>>(
+export function createGridListItem<
+  T extends object,
+  C extends GridCollection<T> = GridCollection<T>,
+>(
   props: Accessor<AriaGridListItemProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLLIElement | null>
+  _ref: Accessor<HTMLElement | null>,
 ): GridListItemAria {
   const [isPressed, setIsPressed] = createSignal(false);
+  let isPointerPressed = false;
+  let ignoreNextClick = false;
 
   const isSelected = createMemo(() => {
     const s = state();
@@ -37,8 +42,7 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
     return s.focusedKey === p.node.key;
   });
 
-  // Handle click/press for selection and actions
-  const onClick = (e: MouseEvent) => {
+  const handleActivation = (e: MouseEvent | PointerEvent) => {
     const s = state();
     const p = props();
 
@@ -49,14 +53,14 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
     const onAction = gridListData?.actions.onAction;
 
     // Handle selection
-    if (s.selectionMode !== 'none') {
-      if (e.shiftKey && s.selectionMode === 'multiple') {
+    if (s.selectionMode !== "none") {
+      if (e.shiftKey && s.selectionMode === "multiple") {
         s.extendSelection(p.node.key);
-      } else if (e.ctrlKey || e.metaKey) {
+      } else if (p.selectionBehavior === "toggle" || e.ctrlKey || e.metaKey) {
         s.toggleSelection(p.node.key);
       } else {
         // Replace selection or toggle if already selected
-        if (isSelected() && s.selectedKeys !== 'all') {
+        if (isSelected() && s.selectedKeys !== "all") {
           const selectedKeys = s.selectedKeys as Set<unknown>;
           if (selectedKeys.size === 1) {
             // Single selection, trigger action
@@ -84,13 +88,23 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
     }
   };
 
+  // Handle click/press for selection and actions.
+  const onClick = (e: MouseEvent) => {
+    if (ignoreNextClick) {
+      ignoreNextClick = false;
+      return;
+    }
+
+    handleActivation(e);
+  };
+
   const onKeyDown = (e: KeyboardEvent) => {
     const s = state();
     const p = props();
 
     if (isDisabled()) return;
 
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       // Get grid list metadata for actions
       const gridListData = getGridListData(s);
       const onAction = gridListData?.actions.onAction;
@@ -106,9 +120,9 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
           p.onAction();
         }
       }
-    } else if (e.key === ' ' || e.key === 'Space' || e.key === 'Spacebar') {
+    } else if (e.key === " " || e.key === "Space" || e.key === "Spacebar") {
       // Space toggles selection
-      if (s.selectionMode !== 'none') {
+      if (s.selectionMode !== "none") {
         e.preventDefault();
         s.toggleSelection(p.node.key);
       }
@@ -122,10 +136,39 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
   };
 
   const onPointerDown = () => {
+    if (isDisabled()) return;
+    isPointerPressed = true;
     setIsPressed(true);
   };
 
-  const onPointerUp = () => {
+  const onPointerUp = (e: PointerEvent) => {
+    const wasPointerPressed = isPointerPressed;
+    isPointerPressed = false;
+    setIsPressed(false);
+
+    if (!wasPointerPressed || isDisabled()) return;
+
+    const currentTarget = e.currentTarget;
+    const target = e.target;
+    if (
+      currentTarget instanceof HTMLElement &&
+      target instanceof Node &&
+      !currentTarget.contains(target)
+    ) {
+      return;
+    }
+
+    ignoreNextClick = true;
+    handleActivation(e);
+  };
+
+  const onPointerCancel = () => {
+    isPointerPressed = false;
+    setIsPressed(false);
+  };
+
+  const onPointerLeave = () => {
+    isPointerPressed = false;
     setIsPressed(false);
   };
 
@@ -135,28 +178,30 @@ export function createGridListItem<T extends object, C extends GridCollection<T>
     const node = p.node;
 
     const baseProps: Record<string, unknown> = {
-      role: 'row',
-      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
-      'aria-disabled': isDisabled() || undefined,
+      role: "row",
+      "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
+      "aria-disabled": isDisabled() || undefined,
       tabIndex: isFocused() ? 0 : -1,
       onClick,
       onKeyDown,
       onFocus,
       onPointerDown,
       onPointerUp,
+      onPointerCancel,
+      onPointerLeave,
     };
 
     // Add aria-rowindex for virtualized lists
     if (p.isVirtualized && node.rowIndex != null) {
-      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+      baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLLIElement>;
+    return baseProps as JSX.HTMLAttributes<HTMLElement>;
   });
 
   const gridCellProps = createMemo(() => {
     return {
-      role: 'gridcell',
+      role: "gridcell",
     } as JSX.HTMLAttributes<HTMLDivElement>;
   });
 

package/src/gridlist/createGridListSelectionCheckbox.ts

@@ -3,18 +3,21 @@
  * Based on @react-aria/gridlist.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { GridState, GridCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaGridListSelectionCheckboxProps, GridListSelectionCheckboxAria } from './types';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { GridState, GridCollection } from "@proyecto-viviana/solid-stately";
+import type { AriaGridListSelectionCheckboxProps, GridListSelectionCheckboxAria } from "./types";
 
 /**
  * Creates accessibility props for a grid list item selection checkbox.
  */
-export function createGridListSelectionCheckbox<T extends object, C extends GridCollection<T> = GridCollection<T>>(
+export function createGridListSelectionCheckbox<
+  T extends object,
+  C extends GridCollection<T> = GridCollection<T>,
+>(
   props: Accessor<AriaGridListSelectionCheckboxProps>,
-  state: Accessor<GridState<T, C>>
+  state: Accessor<GridState<T, C>>,
 ): GridListSelectionCheckboxAria {
   const checkboxId = createId();
 
@@ -41,11 +44,11 @@ export function createGridListSelectionCheckbox<T extends object, C extends Grid
   const checkboxProps = createMemo(() => {
     const baseProps: Record<string, unknown> = {
       id: checkboxId,
-      type: 'checkbox',
+      type: "checkbox",
       checked: isSelected(),
       disabled: isDisabled(),
       onChange,
-      'aria-label': 'Select',
+      "aria-label": "Select",
     };
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;

package/src/gridlist/index.ts

@@ -2,9 +2,9 @@
  * GridList ARIA hooks for solidaria.
  */
 
-export { createGridList, getGridListData } from './createGridList';
-export { createGridListItem } from './createGridListItem';
-export { createGridListSelectionCheckbox } from './createGridListSelectionCheckbox';
+export { createGridList, getGridListData } from "./createGridList";
+export { createGridListItem } from "./createGridListItem";
+export { createGridListSelectionCheckbox } from "./createGridListSelectionCheckbox";
 
 export type {
   AriaGridListProps,
@@ -13,4 +13,4 @@ export type {
   GridListItemAria,
   AriaGridListSelectionCheckboxProps,
   GridListSelectionCheckboxAria,
-} from './types';
+} from "./types";

package/src/gridlist/types.ts

@@ -3,8 +3,8 @@
  * Based on @react-aria/gridlist types.
  */
 
-import type { JSX } from 'solid-js';
-import type { Key, GridNode } from '@proyecto-viviana/solid-stately';
+import type { JSX } from "solid-js";
+import type { Key, GridNode } from "@proyecto-viviana/solid-stately";
 
 /**
  * Props for the createGridList hook.
@@ -13,17 +13,19 @@ export interface AriaGridListProps {
   /** ID for the grid list element. */
   id?: string;
   /** ARIA label for the grid list. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ARIA labelledby for the grid list. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ARIA describedby for the grid list. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the grid list uses virtual scrolling. */
   isVirtualized?: boolean;
   /** Handler for item actions. */
   onAction?: (key: Key) => void;
   /** Whether selection should occur on press up. */
   shouldSelectOnPressUp?: boolean;
+  /** How selection should behave when pressing an item. */
+  selectionBehavior?: "replace" | "toggle";
   /** Whether the grid list is disabled. */
   isDisabled?: boolean;
 }
@@ -33,7 +35,7 @@ export interface AriaGridListProps {
  */
 export interface GridListAria {
   /** Props to spread on the grid list element. */
-  gridProps: JSX.HTMLAttributes<HTMLUListElement>;
+  gridProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
 /**
@@ -44,6 +46,8 @@ export interface AriaGridListItemProps {
   node: GridNode<unknown>;
   /** Whether the grid list is virtualized. */
   isVirtualized?: boolean;
+  /** How selection should behave when pressing an item. */
+  selectionBehavior?: "replace" | "toggle";
   /** Handler for item action. */
   onAction?: () => void;
 }
@@ -53,7 +57,7 @@ export interface AriaGridListItemProps {
  */
 export interface GridListItemAria {
   /** Props to spread on the item element. */
-  rowProps: JSX.HTMLAttributes<HTMLLIElement>;
+  rowProps: JSX.HTMLAttributes<HTMLElement>;
   /** Props to spread on the grid cell wrapper. */
   gridCellProps: JSX.HTMLAttributes<HTMLDivElement>;
   /** Whether the item is selected. */

package/src/i18n/createCollator.ts

@@ -6,23 +6,16 @@
  * Port of @react-aria/i18n useCollator.
  */
 
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { createCacheKey } from './utils';
-
-// ============================================
-// CACHE
-// ============================================
+import { createMemo } from "solid-js";
+import { useLocale } from "./locale";
+import { createCacheKey } from "./utils";
 
 const collatorCache = new Map<string, Intl.Collator>();
 
 /**
  * Gets or creates a cached collator.
  */
-function getCachedCollator(
-  locale: string,
-  options?: Intl.CollatorOptions
-): Intl.Collator {
+function getCachedCollator(locale: string, options?: Intl.CollatorOptions): Intl.Collator {
   const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
 
   if (collatorCache.has(cacheKey)) {
@@ -34,10 +27,6 @@ function getCachedCollator(
   return collator;
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides localized string collation for the current locale.
  * Useful for sorting strings according to locale-specific rules.
@@ -70,9 +59,7 @@ function getCachedCollator(
  * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']
  * ```
  */
-export function createCollator(
-  options?: Intl.CollatorOptions
-): () => Intl.Collator {
+export function createCollator(options?: Intl.CollatorOptions): () => Intl.Collator {
   const locale = useLocale();
 
   return createMemo(() => getCachedCollator(locale().locale, options));

package/src/i18n/createDateFormatter.ts

@@ -6,13 +6,9 @@
  * Port of @react-aria/i18n useDateFormatter.
  */
 
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { createCacheKey } from './utils';
-
-// ============================================
-// CACHE
-// ============================================
+import { createMemo } from "solid-js";
+import { useLocale } from "./locale";
+import { createCacheKey } from "./utils";
 
 const dateFormatterCache = new Map<string, Intl.DateTimeFormat>();
 
@@ -21,7 +17,7 @@ const dateFormatterCache = new Map<string, Intl.DateTimeFormat>();
  */
 function getCachedDateFormatter(
   locale: string,
-  options?: Intl.DateTimeFormatOptions
+  options?: Intl.DateTimeFormatOptions,
 ): Intl.DateTimeFormat {
   const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
 
@@ -34,10 +30,6 @@ function getCachedDateFormatter(
   return formatter;
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides localized date and time formatting for the current locale.
  * Automatically updates when the locale changes.
@@ -75,7 +67,7 @@ function getCachedDateFormatter(
  * ```
  */
 export function createDateFormatter(
-  options?: Intl.DateTimeFormatOptions
+  options?: Intl.DateTimeFormatOptions,
 ): () => Intl.DateTimeFormat {
   const locale = useLocale();
 

package/src/i18n/createFilter.ts

@@ -6,12 +6,8 @@
  * Port of @react-aria/i18n useFilter.
  */
 
-import { createMemo } from 'solid-js';
-import { createCollator } from './createCollator';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo } from "solid-js";
+import { createCollator } from "./createCollator";
 
 export interface Filter {
   /** Returns whether a string starts with a given substring. */
@@ -22,10 +18,6 @@ export interface Filter {
   contains(string: string, substring: string): boolean;
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides localized string search functionality for filtering or matching items.
  * Respects locale-specific collation rules for case and diacritic sensitivity.
@@ -68,7 +60,7 @@ export interface Filter {
  */
 export function createFilter(options?: Intl.CollatorOptions): () => Filter {
   const collator = createCollator({
-    usage: 'search',
+    usage: "search",
     ...options,
   });
 
@@ -81,13 +73,10 @@ export function createFilter(options?: Intl.CollatorOptions): () => Filter {
       }
 
       // Normalize both strings for safe slicing
-      const normalizedStr = str.normalize('NFC');
-      const normalizedSub = substring.normalize('NFC');
+      const normalizedStr = str.normalize("NFC");
+      const normalizedSub = substring.normalize("NFC");
 
-      return (
-        coll.compare(normalizedStr.slice(0, normalizedSub.length), normalizedSub) ===
-        0
-      );
+      return coll.compare(normalizedStr.slice(0, normalizedSub.length), normalizedSub) === 0;
     };
 
     const endsWith = (str: string, substring: string): boolean => {
@@ -95,12 +84,10 @@ export function createFilter(options?: Intl.CollatorOptions): () => Filter {
         return true;
       }
 
-      const normalizedStr = str.normalize('NFC');
-      const normalizedSub = substring.normalize('NFC');
+      const normalizedStr = str.normalize("NFC");
+      const normalizedSub = substring.normalize("NFC");
 
-      return (
-        coll.compare(normalizedStr.slice(-normalizedSub.length), normalizedSub) === 0
-      );
+      return coll.compare(normalizedStr.slice(-normalizedSub.length), normalizedSub) === 0;
     };
 
     const contains = (str: string, substring: string): boolean => {
@@ -108,8 +95,8 @@ export function createFilter(options?: Intl.CollatorOptions): () => Filter {
         return true;
       }
 
-      const normalizedStr = str.normalize('NFC');
-      const normalizedSub = substring.normalize('NFC');
+      const normalizedStr = str.normalize("NFC");
+      const normalizedSub = substring.normalize("NFC");
       const sliceLen = normalizedSub.length;
 
       for (let scan = 0; scan + sliceLen <= normalizedStr.length; scan++) {

package/src/i18n/createNumberFormatter.ts

@@ -6,9 +6,9 @@
  * Port of @react-aria/i18n useNumberFormatter.
  */
 
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { NumberFormatter, type NumberFormatOptions } from './NumberFormatter';
+import { createMemo } from "solid-js";
+import { useLocale } from "./locale";
+import { NumberFormatter, type NumberFormatOptions } from "@internationalized/number";
 
 /**
  * Provides localized number formatting for the current locale.
@@ -43,9 +43,7 @@ import { NumberFormatter, type NumberFormatOptions } from './NumberFormatter';
  * tempFormatter().format(25); // '25°C'
  * ```
  */
-export function createNumberFormatter(
-  options: NumberFormatOptions = {}
-): () => NumberFormatter {
+export function createNumberFormatter(options: NumberFormatOptions = {}): () => NumberFormatter {
   const locale = useLocale();
 
   return createMemo(() => new NumberFormatter(locale().locale, options));

package/src/i18n/createStringFormatter.ts

@@ -8,19 +8,24 @@ import {
   LocalizedStringDictionary,
   LocalizedStringFormatter,
   type LocalizedStrings,
-} from '@internationalized/string';
-import { createMemo, type Accessor } from 'solid-js';
-import { useLocale } from './locale';
+} from "@internationalized/string";
+import { createMemo, type Accessor } from "solid-js";
+import { useLocale } from "./locale";
 
 // Cache for dictionaries to avoid recreating them
-const cache = new WeakMap<LocalizedStrings<string, LocalizedString>, LocalizedStringDictionary<string, LocalizedString>>();
+const cache = new WeakMap<
+  LocalizedStrings<string, LocalizedString>,
+  LocalizedStringDictionary<string, LocalizedString>
+>();
 
 function getCachedDictionary<K extends string, T extends LocalizedString>(
-  strings: LocalizedStrings<K, T>
+  strings: LocalizedStrings<K, T>,
 ): LocalizedStringDictionary<K, T> {
   let dictionary = cache.get(strings as LocalizedStrings<string, LocalizedString>);
   if (!dictionary) {
-    dictionary = new LocalizedStringDictionary(strings as LocalizedStrings<string, LocalizedString>);
+    dictionary = new LocalizedStringDictionary(
+      strings as LocalizedStrings<string, LocalizedString>,
+    );
     cache.set(strings as LocalizedStrings<string, LocalizedString>, dictionary);
   }
   return dictionary as LocalizedStringDictionary<K, T>;
@@ -29,10 +34,10 @@ function getCachedDictionary<K extends string, T extends LocalizedString>(
 /**
  * Returns a cached LocalizedStringDictionary for the given strings.
  */
-export function createStringDictionary<K extends string = string, T extends LocalizedString = string>(
-  strings: LocalizedStrings<K, T>,
-  packageName?: string
-): LocalizedStringDictionary<K, T> {
+export function createStringDictionary<
+  K extends string = string,
+  T extends LocalizedString = string,
+>(strings: LocalizedStrings<K, T>, packageName?: string): LocalizedStringDictionary<K, T> {
   return (
     (packageName && LocalizedStringDictionary.getGlobalDictionaryForPackage(packageName)) ||
     getCachedDictionary(strings)
@@ -68,17 +73,16 @@ export function createStringDictionary<K extends string = string, T extends Loca
  * }
  * ```
  */
-export function createStringFormatter<K extends string = string, T extends LocalizedString = string>(
-  strings: LocalizedStrings<K, T>,
-  packageName?: string
-): Accessor<LocalizedStringFormatter<K, T>> {
+export function createStringFormatter<
+  K extends string = string,
+  T extends LocalizedString = string,
+>(strings: LocalizedStrings<K, T>, packageName?: string): Accessor<LocalizedStringFormatter<K, T>> {
   const localeAccessor = useLocale();
   const dictionary = createStringDictionary(strings, packageName);
 
   return createMemo(() => new LocalizedStringFormatter(localeAccessor().locale, dictionary));
 }
 
-// Re-export types for convenience
 export type {
   LocalizedString,
   LocalizedStringDictionary,

package/src/i18n/index.ts

@@ -7,27 +7,24 @@ export {
   type Direction,
   type Locale,
   type I18nProviderProps,
-} from './locale';
+} from "./locale";
 
 // RTL utilities
-export { isRTL, createCacheKey } from './utils';
+export { isRTL, createCacheKey } from "./utils";
 
 // Number formatting
-export {
-  NumberFormatter,
-  type NumberFormatOptions,
-} from './NumberFormatter';
+export { NumberFormatter, type NumberFormatOptions } from "@internationalized/number";
 
-export { createNumberFormatter } from './createNumberFormatter';
+export { createNumberFormatter } from "./createNumberFormatter";
 
 // Date formatting
-export { createDateFormatter } from './createDateFormatter';
+export { createDateFormatter } from "./createDateFormatter";
 
 // String collation
-export { createCollator } from './createCollator';
+export { createCollator } from "./createCollator";
 
 // String filtering
-export { createFilter, type Filter } from './createFilter';
+export { createFilter, type Filter } from "./createFilter";
 
 // String formatting (ICU MessageFormat)
 export {
@@ -37,4 +34,4 @@ export {
   type LocalizedStringDictionary,
   type LocalizedStringFormatter,
   type LocalizedStrings,
-} from './createStringFormatter';
+} from "./createStringFormatter";