@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/gridlist/createGridList.ts

@@ -3,11 +3,11 @@
  * Based on @react-aria/gridlist/useGridList.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { GridState, GridCollection, Key } from '@proyecto-viviana/solid-stately';
-import type { AriaGridListProps, GridListAria } 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, Key } from "@proyecto-viviana/solid-stately";
+import type { AriaGridListProps, GridListAria } from "./types";
 
 /**
  * Metadata stored for a grid list instance.
@@ -15,6 +15,8 @@ import type { AriaGridListProps, GridListAria } from './types';
 interface GridListData {
   /** The generated ID for the grid list. */
   gridListId: string;
+  /** How selection should behave when pressing an item. */
+  selectionBehavior: "replace" | "toggle";
   /** Actions registered for the grid list. */
   actions: {
     onAction?: (key: Key) => void;
@@ -30,7 +32,7 @@ const gridListDataMap = new WeakMap<object, GridListData>();
  * Gets the grid list data for a given state.
  */
 export function getGridListData<T extends object, C extends GridCollection<T>>(
-  state: GridState<T, C>
+  state: GridState<T, C>,
 ): GridListData | undefined {
   return gridListDataMap.get(state);
 }
@@ -41,7 +43,7 @@ export function getGridListData<T extends object, C extends GridCollection<T>>(
 export function createGridList<T extends object, C extends GridCollection<T> = GridCollection<T>>(
   props: Accessor<AriaGridListProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLUListElement | null>
+  _ref: Accessor<HTMLElement | null>,
 ): GridListAria {
   // Generate a unique ID for the grid list
   const gridListId = props().id ?? createId();
@@ -49,6 +51,9 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
   // Store grid list data for child components
   const gridListData: GridListData = {
     gridListId,
+    get selectionBehavior() {
+      return props().selectionBehavior ?? "replace";
+    },
     actions: {
       get onAction() {
         return props().onAction;
@@ -69,7 +74,7 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     if (p.isDisabled) return;
 
     switch (e.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
         e.preventDefault();
         if (focusedKey != null) {
           const nextKey = collection.getKeyAfter(focusedKey);
@@ -84,7 +89,7 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
         }
         break;
       }
-      case 'ArrowUp': {
+      case "ArrowUp": {
         e.preventDefault();
         if (focusedKey != null) {
           const prevKey = collection.getKeyBefore(focusedKey);
@@ -99,7 +104,7 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
         }
         break;
       }
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
         const firstKey = collection.getFirstKey();
         if (firstKey != null) {
@@ -107,7 +112,7 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
         }
         break;
       }
-      case 'End': {
+      case "End": {
         e.preventDefault();
         const lastKey = collection.getLastKey();
         if (lastKey != null) {
@@ -115,16 +120,32 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
         }
         break;
       }
-      case 'a':
-      case 'A': {
-        if ((e.ctrlKey || e.metaKey) && s.selectionMode === 'multiple') {
+      case "a":
+      case "A": {
+        if ((e.ctrlKey || e.metaKey) && s.selectionMode === "multiple") {
           e.preventDefault();
           s.selectAll();
         }
         break;
       }
-      case 'Escape': {
-        if (s.selectionMode !== 'none') {
+      case " ":
+      case "Space":
+      case "Spacebar": {
+        if (focusedKey != null && s.selectionMode !== "none" && !s.isDisabled(focusedKey)) {
+          e.preventDefault();
+          s.toggleSelection(focusedKey);
+        }
+        break;
+      }
+      case "Enter": {
+        if (focusedKey != null && !s.isDisabled(focusedKey)) {
+          e.preventDefault();
+          p.onAction?.(focusedKey);
+        }
+        break;
+      }
+      case "Escape": {
+        if (s.selectionMode !== "none") {
           e.preventDefault();
           s.clearSelection();
         }
@@ -156,13 +177,13 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      role: 'grid',
+      role: "grid",
       id: gridListId,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-multiselectable': s.selectionMode === 'multiple' ? true : undefined,
-      'aria-disabled': p.isDisabled || undefined,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
+      "aria-disabled": p.isDisabled || undefined,
       tabIndex: p.isDisabled ? undefined : 0,
       onKeyDown,
       onFocus,
@@ -171,10 +192,10 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
 
     // Add row count for virtualized lists
     if (p.isVirtualized) {
-      baseProps['aria-rowcount'] = s.collection.rowCount;
+      baseProps["aria-rowcount"] = s.collection.rowCount;
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLUListElement>;
+    return baseProps as JSX.HTMLAttributes<HTMLElement>;
   });
 
   return {

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 === ' ') {
+    } 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

@@ -1,79 +1,66 @@
-/**
- * createCollator hook for solidaria
- *
- * Provides localized string comparison/collation with caching.
- *
- * Port of @react-aria/i18n useCollator.
- */
-
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { createCacheKey } from './utils';
-
-// ============================================
-// CACHE
-// ============================================
-
-const collatorCache = new Map<string, Intl.Collator>();
-
-/**
- * Gets or creates a cached collator.
- */
-function getCachedCollator(
-  locale: string,
-  options?: Intl.CollatorOptions
-): Intl.Collator {
-  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
-
-  if (collatorCache.has(cacheKey)) {
-    return collatorCache.get(cacheKey)!;
-  }
-
-  const collator = new Intl.Collator(locale, options);
-  collatorCache.set(cacheKey, collator);
-  return collator;
-}
-
-// ============================================
-// HOOK
-// ============================================
-
-/**
- * Provides localized string collation for the current locale.
- * Useful for sorting strings according to locale-specific rules.
- *
- * @example
- * ```tsx
- * function SortedList(props: { items: string[] }) {
- *   const collator = createCollator();
- *
- *   const sortedItems = () =>
- *     [...props.items].sort((a, b) => collator().compare(a, b));
- *
- *   return (
- *     <ul>
- *       <For each={sortedItems()}>
- *         {(item) => <li>{item}</li>}
- *       </For>
- *     </ul>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Case-insensitive sorting
- * const collator = createCollator({ sensitivity: 'base' });
- *
- * // Numeric sorting
- * const numericCollator = createCollator({ numeric: true });
- * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']
- * ```
- */
-export function createCollator(
-  options?: Intl.CollatorOptions
-): () => Intl.Collator {
-  const locale = useLocale();
-
-  return createMemo(() => getCachedCollator(locale().locale, options));
-}
+/**
+ * createCollator hook for solidaria
+ *
+ * Provides localized string comparison/collation with caching.
+ *
+ * Port of @react-aria/i18n useCollator.
+ */
+
+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 {
+  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
+
+  if (collatorCache.has(cacheKey)) {
+    return collatorCache.get(cacheKey)!;
+  }
+
+  const collator = new Intl.Collator(locale, options);
+  collatorCache.set(cacheKey, collator);
+  return collator;
+}
+
+/**
+ * Provides localized string collation for the current locale.
+ * Useful for sorting strings according to locale-specific rules.
+ *
+ * @example
+ * ```tsx
+ * function SortedList(props: { items: string[] }) {
+ *   const collator = createCollator();
+ *
+ *   const sortedItems = () =>
+ *     [...props.items].sort((a, b) => collator().compare(a, b));
+ *
+ *   return (
+ *     <ul>
+ *       <For each={sortedItems()}>
+ *         {(item) => <li>{item}</li>}
+ *       </For>
+ *     </ul>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Case-insensitive sorting
+ * const collator = createCollator({ sensitivity: 'base' });
+ *
+ * // Numeric sorting
+ * const numericCollator = createCollator({ numeric: true });
+ * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']
+ * ```
+ */
+export function createCollator(options?: Intl.CollatorOptions): () => Intl.Collator {
+  const locale = useLocale();
+
+  return createMemo(() => getCachedCollator(locale().locale, options));
+}