@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/grid/createGrid.ts

@@ -3,13 +3,13 @@
  * Based on @react-aria/grid/useGrid.
  */
 
-import { createMemo, createSignal, 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 { GridProps, GridAria, KeyboardDelegate } from './types';
-import { GridKeyboardDelegate } from './GridKeyboardDelegate';
-import { useLocale } from '../i18n';
+import { createMemo, createSignal, 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 { GridProps, GridAria, KeyboardDelegate } from "./types";
+import { GridKeyboardDelegate } from "./GridKeyboardDelegate";
+import { useLocale } from "../i18n";
 
 // Global map to store grid metadata for child components
 const gridMap = new WeakMap<
@@ -35,7 +35,7 @@ export function getGridData<T>(state: GridState<T, GridCollection<T>>) {
 export function createGrid<T extends object>(
   props: Accessor<GridProps>,
   state: Accessor<GridState<T, GridCollection<T>>>,
-  ref: Accessor<HTMLElement | null>
+  ref: Accessor<HTMLElement | null>,
 ): GridAria {
   const id = createId(props().id);
   const locale = useLocale();
@@ -56,7 +56,7 @@ export function createGrid<T extends object>(
       collection: s.collection,
       disabledKeys: s.disabledKeys,
       ref,
-      focusMode: p.focusMode ?? 'row',
+      focusMode: p.focusMode ?? "row",
       direction: locale().direction,
     });
   });
@@ -93,7 +93,7 @@ export function createGrid<T extends object>(
     const focusedKey = s.focusedKey;
     if (focusedKey == null) {
       // If nothing is focused, focus the first item
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
         const firstKey = delegate.getFirstKey?.();
         if (firstKey != null) {
           e.preventDefault();
@@ -106,19 +106,19 @@ export function createGrid<T extends object>(
     let nextKey: Key | null = null;
 
     switch (e.key) {
-      case 'ArrowDown':
+      case "ArrowDown":
         nextKey = delegate.getKeyBelow?.(focusedKey) ?? null;
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         nextKey = delegate.getKeyAbove?.(focusedKey) ?? null;
         break;
-      case 'ArrowLeft':
+      case "ArrowLeft":
         nextKey = delegate.getKeyLeftOf?.(focusedKey) ?? null;
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         nextKey = delegate.getKeyRightOf?.(focusedKey) ?? null;
         break;
-      case 'Home':
+      case "Home":
         if (e.ctrlKey) {
           nextKey = delegate.getFirstKey?.() ?? null;
         } else {
@@ -126,7 +126,7 @@ export function createGrid<T extends object>(
           nextKey = delegate.getFirstKey?.(focusedKey) ?? null;
         }
         break;
-      case 'End':
+      case "End":
         if (e.ctrlKey) {
           nextKey = delegate.getLastKey?.() ?? null;
         } else {
@@ -134,31 +134,31 @@ export function createGrid<T extends object>(
           nextKey = delegate.getLastKey?.(focusedKey) ?? null;
         }
         break;
-      case 'PageDown':
+      case "PageDown":
         nextKey = delegate.getKeyPageBelow?.(focusedKey) ?? null;
         break;
-      case 'PageUp':
+      case "PageUp":
         nextKey = delegate.getKeyPageAbove?.(focusedKey) ?? null;
         break;
-      case 'Escape':
-        if (p.escapeKeyBehavior !== 'none') {
+      case "Escape":
+        if (p.escapeKeyBehavior !== "none") {
           s.clearSelection();
         }
         return;
-      case 'a':
+      case "a":
         if (e.ctrlKey || e.metaKey) {
           e.preventDefault();
-          if (s.selectionMode === 'multiple') {
+          if (s.selectionMode === "multiple") {
             s.selectAll();
           }
         }
         return;
-      case ' ':
-      case 'Enter':
+      case " ":
+      case "Enter":
         e.preventDefault();
         // Toggle selection or trigger action
-        if (s.selectionMode !== 'none') {
-          if (e.shiftKey && s.selectionMode === 'multiple') {
+        if (s.selectionMode !== "none") {
+          if (e.shiftKey && s.selectionMode === "multiple") {
             s.extendSelection(focusedKey);
           } else {
             s.toggleSelection(focusedKey);
@@ -182,7 +182,7 @@ export function createGrid<T extends object>(
       s.setFocusedKey(nextKey);
 
       // Handle shift+arrow for range selection
-      if (e.shiftKey && s.selectionMode === 'multiple') {
+      if (e.shiftKey && s.selectionMode === "multiple") {
         s.extendSelection(nextKey);
       }
     }
@@ -225,8 +225,8 @@ export function createGrid<T extends object>(
   // Warn if no label is provided
   createMemo(() => {
     const p = props();
-    if (!p['aria-label'] && !p['aria-labelledby']) {
-      console.warn('Grid: An aria-label or aria-labelledby prop is required for accessibility.');
+    if (!p["aria-label"] && !p["aria-labelledby"]) {
+      console.warn("Grid: An aria-label or aria-labelledby prop is required for accessibility.");
     }
   });
 
@@ -235,12 +235,12 @@ export function createGrid<T extends object>(
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      role: 'grid',
+      role: "grid",
       id,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-multiselectable': s.selectionMode === 'multiple' ? 'true' : undefined,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      "aria-multiselectable": s.selectionMode === "multiple" ? "true" : undefined,
       tabIndex: s.collection.size === 0 ? 0 : -1,
       onKeyDown,
       onFocus,
@@ -248,8 +248,8 @@ export function createGrid<T extends object>(
     };
 
     if (p.isVirtualized) {
-      baseProps['aria-rowcount'] = s.collection.rowCount;
-      baseProps['aria-colcount'] = s.collection.columnCount;
+      baseProps["aria-rowcount"] = s.collection.rowCount;
+      baseProps["aria-colcount"] = s.collection.columnCount;
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLElement>;

package/src/grid/createGridCell.ts

@@ -3,11 +3,11 @@
  * Based on @react-aria/grid/useGridCell.
  */
 
-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 { GridCellProps, GridCellAria } from './types';
-import { getGridData } from './createGrid';
+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 { GridCellProps, GridCellAria } from "./types";
+import { getGridData } from "./createGrid";
 
 /**
  * Creates accessibility props for a grid cell.
@@ -15,7 +15,7 @@ import { getGridData } from './createGrid';
 export function createGridCell<T extends object>(
   props: Accessor<GridCellProps>,
   state: Accessor<GridState<T, GridCollection<T>>>,
-  _ref: Accessor<HTMLElement | null>
+  _ref: Accessor<HTMLElement | null>,
 ): GridCellAria {
   const [isPressed, setIsPressed] = createSignal(false);
 
@@ -63,8 +63,8 @@ export function createGridCell<T extends object>(
     const rowKey = node?.parentKey;
 
     // Handle selection on parent row
-    if (rowKey != null && s.selectionMode !== 'none') {
-      if (e.shiftKey && s.selectionMode === 'multiple') {
+    if (rowKey != null && s.selectionMode !== "none") {
+      if (e.shiftKey && s.selectionMode === "multiple") {
         s.extendSelection(rowKey);
       } else if (e.ctrlKey || e.metaKey) {
         s.toggleSelection(rowKey);
@@ -91,7 +91,7 @@ export function createGridCell<T extends object>(
     if (isDisabled()) return;
 
     // Enter or Space triggers cell action
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (e.key === "Enter" || e.key === " ") {
       // Only handle if there's an action to trigger
       const gridData = getGridData(s);
       const onCellAction = gridData?.actions.onCellAction;
@@ -130,17 +130,17 @@ export function createGridCell<T extends object>(
     const node = s.collection.getItem(p.key);
 
     // Determine the role based on node type
-    let role: string = 'gridcell';
-    if (node?.type === 'rowheader') {
-      role = 'rowheader';
-    } else if (node?.type === 'column') {
-      role = 'columnheader';
+    let role: string = "gridcell";
+    if (node?.type === "rowheader") {
+      role = "rowheader";
+    } else if (node?.type === "column") {
+      role = "columnheader";
     }
 
     const baseProps: Record<string, unknown> = {
       role,
-      'aria-disabled': isDisabled() || undefined,
-      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
+      "aria-disabled": isDisabled() || undefined,
+      "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
       tabIndex: isFocused() ? 0 : -1,
       onClick,
       onKeyDown,
@@ -151,12 +151,12 @@ export function createGridCell<T extends object>(
 
     // Add column index for virtualized grids
     if (p.isVirtualized && node?.column != null) {
-      baseProps['aria-colindex'] = node.column + 1; // aria-colindex is 1-based
+      baseProps["aria-colindex"] = node.column + 1; // aria-colindex is 1-based
     }
 
     // Add colspan if present
     if (node?.colspan != null && node.colspan > 1) {
-      baseProps['aria-colspan'] = node.colspan;
+      baseProps["aria-colspan"] = node.colspan;
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLElement>;

package/src/grid/createGridRow.ts

@@ -3,11 +3,11 @@
  * Based on @react-aria/grid/useGridRow.
  */
 
-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 { GridRowProps, GridRowAria } from './types';
-import { getGridData } from './createGrid';
+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 { GridRowProps, GridRowAria } from "./types";
+import { getGridData } from "./createGrid";
 
 /**
  * Creates accessibility props for a grid row.
@@ -15,7 +15,7 @@ import { getGridData } from './createGrid';
 export function createGridRow<T extends object>(
   props: Accessor<GridRowProps>,
   state: Accessor<GridState<T, GridCollection<T>>>,
-  _ref: Accessor<HTMLElement | null>
+  _ref: Accessor<HTMLElement | null>,
 ): GridRowAria {
   const [isPressed, setIsPressed] = createSignal(false);
 
@@ -49,8 +49,8 @@ export function createGridRow<T extends object>(
     const onRowAction = gridData?.actions.onRowAction;
 
     // 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.key);
       } else if (e.ctrlKey || e.metaKey) {
         s.toggleSelection(p.key);
@@ -76,7 +76,7 @@ export function createGridRow<T extends object>(
 
     if (isDisabled()) return;
 
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
 
       // Get grid metadata for actions
@@ -84,7 +84,7 @@ export function createGridRow<T extends object>(
       const onRowAction = gridData?.actions.onRowAction;
 
       // Handle selection
-      if (s.selectionMode !== 'none') {
+      if (s.selectionMode !== "none") {
         s.toggleSelection(p.key);
       }
 
@@ -118,9 +118,9 @@ export function createGridRow<T extends object>(
     const p = props();
 
     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,
@@ -130,7 +130,7 @@ export function createGridRow<T extends object>(
     };
 
     if (p.isVirtualized && p.index != null) {
-      baseProps['aria-rowindex'] = p.index + 1; // aria-rowindex is 1-based
+      baseProps["aria-rowindex"] = p.index + 1; // aria-rowindex is 1-based
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLElement>;

package/src/grid/index.ts

@@ -3,10 +3,10 @@
  * Based on @react-aria/grid.
  */
 
-export { createGrid, getGridData } from './createGrid';
-export { createGridRow } from './createGridRow';
-export { createGridCell } from './createGridCell';
-export { GridKeyboardDelegate } from './GridKeyboardDelegate';
+export { createGrid, getGridData } from "./createGrid";
+export { createGridRow } from "./createGridRow";
+export { createGridCell } from "./createGridCell";
+export { GridKeyboardDelegate } from "./GridKeyboardDelegate";
 export type {
   KeyboardDelegate,
   GridProps,
@@ -15,4 +15,4 @@ export type {
   GridRowAria,
   GridCellProps,
   GridCellAria,
-} from './types';
+} from "./types";

package/src/grid/types.ts

@@ -3,8 +3,8 @@
  * Based on @react-aria/grid types.
  */
 
-import type { JSX } from 'solid-js';
-import type { Key } from '@proyecto-viviana/solid-stately';
+import type { JSX } from "solid-js";
+import type { Key } from "@proyecto-viviana/solid-stately";
 
 /**
  * Keyboard delegate interface for grid navigation.
@@ -43,21 +43,21 @@ export interface GridProps {
   /** Custom keyboard delegate for navigation. */
   keyboardDelegate?: KeyboardDelegate;
   /** Whether focus should be on row or cell. */
-  focusMode?: 'row' | 'cell';
+  focusMode?: "row" | "cell";
   /** Handler for row actions. */
   onRowAction?: (key: Key) => void;
   /** Handler for cell actions. */
   onCellAction?: (key: Key) => void;
   /** Escape key behavior. */
-  escapeKeyBehavior?: 'clearSelection' | 'none';
+  escapeKeyBehavior?: "clearSelection" | "none";
   /** Whether selection should occur on press up. */
   shouldSelectOnPressUp?: boolean;
   /** ARIA label for the grid. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ARIA labelledby for the grid. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ARIA describedby for the grid. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
 }
 
 /**
@@ -111,7 +111,7 @@ export interface GridCellProps {
   /** Whether the grid is virtualized. */
   isVirtualized?: boolean;
   /** Whether to focus cell or child element. */
-  focusMode?: 'child' | 'cell';
+  focusMode?: "child" | "cell";
   /** Handler for cell action. */
   onAction?: () => void;
 }

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,32 +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 ' ':
-      case 'Space':
-      case 'Spacebar': {
-        if (focusedKey != null && s.selectionMode !== 'none' && !s.isDisabled(focusedKey)) {
+      case " ":
+      case "Space":
+      case "Spacebar": {
+        if (focusedKey != null && s.selectionMode !== "none" && !s.isDisabled(focusedKey)) {
           e.preventDefault();
           s.toggleSelection(focusedKey);
         }
         break;
       }
-      case 'Enter': {
+      case "Enter": {
         if (focusedKey != null && !s.isDisabled(focusedKey)) {
           e.preventDefault();
           p.onAction?.(focusedKey);
         }
         break;
       }
-      case 'Escape': {
-        if (s.selectionMode !== 'none') {
+      case "Escape": {
+        if (s.selectionMode !== "none") {
           e.preventDefault();
           s.clearSelection();
         }
@@ -172,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,
@@ -187,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 {