@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/grid/GridKeyboardDelegate.ts

@@ -3,9 +3,9 @@
  * Based on @react-aria/grid/GridKeyboardDelegate.
  */
 
-import type { GridCollection, GridNode, Key } from '@proyecto-viviana/solid-stately';
-import type { KeyboardDelegate } from './types';
-import type { Accessor } from 'solid-js';
+import type { GridCollection, GridNode, Key } from "@proyecto-viviana/solid-stately";
+import type { KeyboardDelegate } from "./types";
+import type { Accessor } from "solid-js";
 
 export interface GridKeyboardDelegateOptions<T> {
   /** The grid collection. */
@@ -15,9 +15,9 @@ export interface GridKeyboardDelegateOptions<T> {
   /** Ref to the grid element. */
   ref: Accessor<HTMLElement | null>;
   /** Focus mode: row or cell. */
-  focusMode: 'row' | 'cell';
+  focusMode: "row" | "cell";
   /** Text direction (ltr or rtl). */
-  direction: 'ltr' | 'rtl';
+  direction: "ltr" | "rtl";
 }
 
 /**
@@ -27,8 +27,8 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
   private collection: GridCollection<T>;
   private disabledKeys: Set<Key>;
   private ref: Accessor<HTMLElement | null>;
-  private focusMode: 'row' | 'cell';
-  private direction: 'ltr' | 'rtl';
+  private focusMode: "row" | "cell";
+  private direction: "ltr" | "rtl";
 
   constructor(options: GridKeyboardDelegateOptions<T>) {
     this.collection = options.collection;
@@ -52,11 +52,11 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     const item = this.collection.getItem(key);
     if (!item) return null;
 
-    if (item.type === 'item') {
+    if (item.type === "item") {
       return key;
     }
 
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       return item.parentKey;
     }
 
@@ -67,7 +67,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
    * Get all body rows (excluding header rows).
    */
   private getBodyRows(): GridNode<T>[] {
-    return this.collection.rows.filter((row) => row.type === 'item');
+    return this.collection.rows.filter((row) => row.type === "item");
   }
 
   /**
@@ -76,7 +76,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
   getFirstKey(fromKey?: Key, global?: boolean): Key | null {
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || global) {
+    if (this.focusMode === "row" || global) {
       // Find first non-disabled row
       for (const row of rows) {
         if (!this.isDisabled(row.key)) {
@@ -114,7 +114,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
   getLastKey(fromKey?: Key, global?: boolean): Key | null {
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || global) {
+    if (this.focusMode === "row" || global) {
       // Find last non-disabled row
       for (let i = rows.length - 1; i >= 0; i--) {
         if (!this.isDisabled(rows[i].key)) {
@@ -155,9 +155,9 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
 
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || item.type === 'item') {
+    if (this.focusMode === "row" || item.type === "item") {
       // Find the row and get the previous one
-      const rowKey = item.type === 'item' ? key : item.parentKey;
+      const rowKey = item.type === "item" ? key : item.parentKey;
       const rowIndex = rows.findIndex((r) => r.key === rowKey);
 
       if (rowIndex > 0) {
@@ -172,7 +172,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     }
 
     // Cell focus mode - get cell in same column of previous row
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const rowIndex = rows.findIndex((r) => r.key === item.parentKey);
       const colIndex = item.column ?? item.index;
 
@@ -201,9 +201,9 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
 
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || item.type === 'item') {
+    if (this.focusMode === "row" || item.type === "item") {
       // Find the row and get the next one
-      const rowKey = item.type === 'item' ? key : item.parentKey;
+      const rowKey = item.type === "item" ? key : item.parentKey;
       const rowIndex = rows.findIndex((r) => r.key === rowKey);
 
       if (rowIndex >= 0 && rowIndex < rows.length - 1) {
@@ -218,7 +218,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     }
 
     // Cell focus mode - get cell in same column of next row
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const rowIndex = rows.findIndex((r) => r.key === item.parentKey);
       const colIndex = item.column ?? item.index;
 
@@ -246,15 +246,15 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     if (!item) return null;
 
     // In row focus mode, left/right might not be meaningful
-    if (this.focusMode === 'row') {
+    if (this.focusMode === "row") {
       return null;
     }
 
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const children = [...this.collection.getChildren(item.parentKey)];
       const colIndex = children.findIndex((c) => c.key === key);
 
-      if (this.direction === 'rtl') {
+      if (this.direction === "rtl") {
         // RTL: left moves to higher index
         if (colIndex < children.length - 1) {
           return children[colIndex + 1].key;
@@ -278,15 +278,15 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     if (!item) return null;
 
     // In row focus mode, left/right might not be meaningful
-    if (this.focusMode === 'row') {
+    if (this.focusMode === "row") {
       return null;
     }
 
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const children = [...this.collection.getChildren(item.parentKey)];
       const colIndex = children.findIndex((c) => c.key === key);
 
-      if (this.direction === 'rtl') {
+      if (this.direction === "rtl") {
         // RTL: right moves to lower index
         if (colIndex > 0) {
           return children[colIndex - 1].key;
@@ -327,12 +327,12 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     // Find first non-disabled row at or before target
     for (let i = targetIndex; i >= 0; i--) {
       if (!this.isDisabled(rows[i].key)) {
-        if (this.focusMode === 'row' || item.type === 'item') {
+        if (this.focusMode === "row" || item.type === "item") {
           return rows[i].key;
         }
 
         // Cell focus mode - return cell at same column
-        const colIndex = item.type === 'cell' ? (item.column ?? item.index) : 0;
+        const colIndex = item.type === "cell" ? (item.column ?? item.index) : 0;
         const children = [...this.collection.getChildren(rows[i].key)];
         const targetCol = Math.min(colIndex, children.length - 1);
         if (targetCol >= 0) {
@@ -369,12 +369,12 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     // Find first non-disabled row at or after target
     for (let i = targetIndex; i < rows.length; i++) {
       if (!this.isDisabled(rows[i].key)) {
-        if (this.focusMode === 'row' || item.type === 'item') {
+        if (this.focusMode === "row" || item.type === "item") {
           return rows[i].key;
         }
 
         // Cell focus mode - return cell at same column
-        const colIndex = item.type === 'cell' ? (item.column ?? item.index) : 0;
+        const colIndex = item.type === "cell" ? (item.column ?? item.index) : 0;
         const children = [...this.collection.getChildren(rows[i].key)];
         const targetCol = Math.min(colIndex, children.length - 1);
         if (targetCol >= 0) {
@@ -406,7 +406,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     for (let i = startIndex; i < rows.length; i++) {
       const row = rows[i];
       if (!this.isDisabled(row.key)) {
-        const textValue = row.textValue?.toLowerCase() ?? '';
+        const textValue = row.textValue?.toLowerCase() ?? "";
         if (textValue.startsWith(searchLower)) {
           return row.key;
         }
@@ -417,7 +417,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     for (let i = 0; i < startIndex; i++) {
       const row = rows[i];
       if (!this.isDisabled(row.key)) {
-        const textValue = row.textValue?.toLowerCase() ?? '';
+        const textValue = row.textValue?.toLowerCase() ?? "";
         if (textValue.startsWith(searchLower)) {
           return row.key;
         }

package/src/grid/createGrid.ts

@@ -3,12 +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 { 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<
@@ -34,9 +35,10 @@ 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();
 
   // Track focused state
   const [_isFocused, setIsFocused] = createSignal(false);
@@ -54,8 +56,8 @@ export function createGrid<T extends object>(
       collection: s.collection,
       disabledKeys: s.disabledKeys,
       ref,
-      focusMode: p.focusMode ?? 'row',
-      direction: 'ltr', // TODO: get from locale
+      focusMode: p.focusMode ?? "row",
+      direction: locale().direction,
     });
   });
 
@@ -91,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();
@@ -104,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 {
@@ -124,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 {
@@ -132,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);
@@ -180,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);
       }
     }
@@ -223,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.");
     }
   });
 
@@ -233,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,
@@ -246,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;
 }