@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/data-grid/data-grid.svelte

@@ -1,63 +1,18 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status alpha
-   * @purpose ARIA data grid foundation for spreadsheet-like datasets with explicit row identity, column sizing, keyboard navigation, range selection, and pinning metadata.
-   * @tag grid
-   * @tag data
-   * @tag spreadsheet
-   * @useWhen Rendering interactive tabular data that will need grid behavior such as selection, virtualization, resizing, or editing.
-   * @useWhen You need role=grid semantics instead of native table semantics.
-   * @avoidWhen You only need a semantic read-only table — use DataTable or the Table family instead.
-   * @avoidWhen You need resize handles, drag-to-reorder controls, or editing today — DataGrid does not provide them yet.
-   * @related data-table, table
-   */
-  export type {
-    DataGridCellContext,
-    DataGridColumnDef,
-    DataGridColumnPin,
-    DataGridColumnPinning,
-    DataGridColumnSizing,
-    DataGridDensity,
-    DataGridProps,
-    DataGridSelectionMode,
-    DataGridSelectionModel,
-    DataGridSortComparator,
-    DataGridSortDirection,
-    DataGridSortModel,
-    DataGridSortModelItem,
-  } from './data-grid.types.ts';
+export {};
 </script>
 
 <script lang="ts" generics="TRow">
-  import { tick } from 'svelte';
-  import type { Attachment } from 'svelte/attachments';
-
-  import { classNames } from '../../utilities/class-names.ts';
-  import { copyToClipboard } from '../../utilities/clipboard.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import {
-    DataGridColumnModel,
-    getDataGridColumnValue,
-    type ResolvedDataGridColumn,
-  } from './_internal/column-model.svelte.ts';
-  import type { DataGridCellCoordinate } from './_internal/geometry.ts';
-  import { dataGridKeyToAction } from './_internal/keyboard-model.ts';
-  import { DataGridSelectionModel as InternalDataGridSelectionModel } from './_internal/selection-model.svelte.ts';
-  import {
-    getActiveDataGridSortModel,
-    getNextDataGridSortModel,
-    getSortedDataGridRowIndices,
-  } from './_internal/sort-model.ts';
-  import { DataGridVirtualizationAdapter } from './_internal/virtualization-adapter.svelte.ts';
-  import type {
-    DataGridProps,
-    DataGridSelectionModel,
-    DataGridSortModelItem,
-  } from './data-grid.types.ts';
-
-  const interactiveDescendantSelector = [
+import { tick } from 'svelte';
+import { classNames } from '../../utilities/class-names.ts';
+import { copyToClipboard } from '../../utilities/clipboard.ts';
+import { devWarn } from '../../utilities/dev-warn.ts';
+import { DataGridColumnModel, getDataGridColumnValue, } from './_internal/column-model.svelte.ts';
+import { dataGridKeyToAction } from './_internal/keyboard-model.ts';
+import { DataGridSelectionModel as InternalDataGridSelectionModel } from './_internal/selection-model.svelte.ts';
+import { getActiveDataGridSortModel, getNextDataGridSortModel, getSortedDataGridRowIndices, } from './_internal/sort-model.ts';
+import { DataGridVirtualizationAdapter } from './_internal/virtualization-adapter.svelte.ts';
+const interactiveDescendantSelector = [
     'a[href]',
     'button',
     'input',
@@ -66,95 +21,56 @@
     '[contenteditable=""]',
     '[contenteditable="true"]',
     '[tabindex]:not([tabindex="-1"])',
-  ].join(',');
-
-  const defaultVirtualRowHeight = 44;
-
-  let {
-    rows,
-    columns,
-    getRowId,
-    density = 'comfortable',
-    stickyHeader = true,
-    virtualizeRows = false,
-    virtualizeColumns = false,
-    rowHeight,
-    columnOrder,
-    columnSizing,
-    columnPinning,
-    selectionMode = 'none',
-    selectionModel = $bindable<DataGridSelectionModel | undefined>(undefined),
-    onselectionmodelchange,
-    sortModel = $bindable([]),
-    onsortmodelchange,
-    rowClass,
-    getRowAriaLabel,
-    class: className,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    onkeydown: consumerOnKeydown,
-    ...rest
-  }: DataGridProps<TRow> = $props();
-
-  const columnModel = new DataGridColumnModel<TRow>({
+].join(',');
+const defaultVirtualRowHeight = 44;
+let { rows, columns, getRowId, density = 'comfortable', stickyHeader = true, virtualizeRows = false, virtualizeColumns = false, rowHeight, columnOrder, columnSizing, columnPinning, selectionMode = 'none', selectionModel = $bindable(undefined), onselectionmodelchange, sortModel = $bindable([]), onsortmodelchange, rowClass, getRowAriaLabel, class: className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, onkeydown: consumerOnKeydown, ...rest } = $props();
+const columnModel = new DataGridColumnModel({
     columns: () => columns,
     columnOrder: () => columnOrder,
     columnSizing: () => columnSizing,
     columnPinning: () => columnPinning,
-  });
-
-  let liveRegionMessage = $state('');
-  let renderedLiveRegionMessage = $state('');
-  let liveRegionAnnouncementSequence = $state(0);
-  let measuredGridWidth = $state<number | undefined>();
-  let isRightToLeft = $state(false);
-
-  const activeSortModel = $derived(
-    getActiveDataGridSortModel(columnModel.orderedColumns, sortModel),
-  );
-  const sortedRowIndices = $derived(
-    getSortedDataGridRowIndices(rows, columnModel.orderedColumns, activeSortModel),
-  );
-  const keyedRows = $derived.by(() => {
+});
+let liveRegionMessage = $state('');
+let renderedLiveRegionMessage = $state('');
+let liveRegionAnnouncementSequence = $state(0);
+let measuredGridWidth = $state();
+let isRightToLeft = $state(false);
+const activeSortModel = $derived(getActiveDataGridSortModel(columnModel.orderedColumns, sortModel));
+const sortedRowIndices = $derived(getSortedDataGridRowIndices(rows, columnModel.orderedColumns, activeSortModel));
+const keyedRows = $derived.by(() => {
     const records = rows.map((row, rowIndex) => ({
-      row,
-      rowId: getRowId(row),
-      rowIndex,
+        row,
+        rowId: getRowId(row),
+        rowIndex,
     }));
-    const rowIdCounts = new Map<string, number>();
+    const rowIdCounts = new Map();
     for (const { rowId } of records) {
-      rowIdCounts.set(rowId, (rowIdCounts.get(rowId) ?? 0) + 1);
+        rowIdCounts.set(rowId, (rowIdCounts.get(rowId) ?? 0) + 1);
     }
-    const rowIdOccurrences = new Map<string, number>();
+    const rowIdOccurrences = new Map();
     return records.map((record) => {
-      const occurrence = rowIdOccurrences.get(record.rowId) ?? 0;
-      rowIdOccurrences.set(record.rowId, occurrence + 1);
-      const hasDuplicateRowId = (rowIdCounts.get(record.rowId) ?? 0) > 1;
-      const uniqueRowId = hasDuplicateRowId ? `${record.rowId}\u0000${occurrence}` : record.rowId;
-      return {
-        ...record,
-        rowDomId: uniqueRowId,
-        rowKey: uniqueRowId,
-      };
+        const occurrence = rowIdOccurrences.get(record.rowId) ?? 0;
+        rowIdOccurrences.set(record.rowId, occurrence + 1);
+        const hasDuplicateRowId = (rowIdCounts.get(record.rowId) ?? 0) > 1;
+        const uniqueRowId = hasDuplicateRowId ? `${record.rowId}\u0000${occurrence}` : record.rowId;
+        return {
+            ...record,
+            rowDomId: uniqueRowId,
+            rowKey: uniqueRowId,
+        };
     });
-  });
-  const sortedKeyedRows = $derived(
-    sortedRowIndices.flatMap((rowIndex) => keyedRows[rowIndex] ?? []),
-  );
-  const resolvedRowHeight = $derived(resolveVirtualRowHeight(rowHeight));
-  const shouldWarnVirtualRowHeightFallback = $derived(
-    virtualizeRows && !isValidVirtualRowHeight(rowHeight),
-  );
-  const shouldVirtualizeRows = $derived(virtualizeRows && sortedKeyedRows.length > 0);
-  const shouldVirtualizeColumns = $derived(
-    virtualizeColumns &&
-      columnModel.unpinnedColumns.length > 0 &&
-      measuredGridWidth !== undefined &&
-      measuredGridWidth > 0 &&
-      !isRightToLeft &&
-      typeof window !== 'undefined',
-  );
-  const rowVirtualizer = new DataGridVirtualizationAdapter({
+});
+const sortedKeyedRows = $derived(sortedRowIndices.flatMap((rowIndex) => keyedRows[rowIndex] ?? []));
+const resolvedRowHeight = $derived(resolveVirtualRowHeight(rowHeight));
+const shouldWarnVirtualRowHeightFallback = $derived(virtualizeRows && !isValidVirtualRowHeight(rowHeight));
+const shouldVirtualizeRows = $derived(virtualizeRows && sortedKeyedRows.length > 0);
+const shouldVirtualizeColumns = $derived(virtualizeColumns &&
+    columnModel.unpinnedColumns.length > 0 &&
+    measuredGridWidth !== undefined &&
+    measuredGridWidth > 0 &&
+    !isRightToLeft &&
+    typeof window !== 'undefined');
+const rowVirtualizer = new DataGridVirtualizationAdapter({
     getScrollElement: () => gridElement ?? null,
     getRowCount: () => sortedKeyedRows.length,
     getRowKey: (index) => sortedKeyedRows[index]?.rowKey ?? index,
@@ -168,718 +84,607 @@
     getScrollPaddingStart: () => getHeaderHeight(),
     getScrollPaddingInlineStart: () => columnModel.leftPinnedWidth,
     getScrollPaddingInlineEnd: () => columnModel.rightPinnedWidth,
-  });
-  const observeHeaderSize: Attachment<HTMLElement> = (node) => {
-    if (typeof ResizeObserver === 'undefined') return;
-
+});
+const observeHeaderSize = (node) => {
+    if (typeof ResizeObserver === 'undefined')
+        return;
     let previousHeight = getElementHeight(node);
     const observer = new ResizeObserver(() => {
-      const nextHeight = getElementHeight(node);
-      if (nextHeight === previousHeight) return;
-
-      previousHeight = nextHeight;
-      rowVirtualizer.refreshMeasurements();
+        const nextHeight = getElementHeight(node);
+        if (nextHeight === previousHeight)
+            return;
+        previousHeight = nextHeight;
+        rowVirtualizer.refreshMeasurements();
     });
     observer.observe(node);
     return () => observer.disconnect();
-  };
-  const observeGridSize: Attachment<HTMLElement> = (node) => {
-    const updateGridMeasurement = (): void => {
-      const rect = node.getBoundingClientRect();
-      measuredGridWidth = rect.width || node.clientWidth || undefined;
-      isRightToLeft = getComputedStyle(node).direction === 'rtl';
+};
+const observeGridSize = (node) => {
+    const updateGridMeasurement = () => {
+        const rect = node.getBoundingClientRect();
+        measuredGridWidth = rect.width || node.clientWidth || undefined;
+        isRightToLeft = getComputedStyle(node).direction === 'rtl';
     };
-
     updateGridMeasurement();
-    if (typeof ResizeObserver === 'undefined') return;
-
+    if (typeof ResizeObserver === 'undefined')
+        return;
     const observer = new ResizeObserver(updateGridMeasurement);
     observer.observe(node);
     return () => observer.disconnect();
-  };
-  const delegateBodyEvents: Attachment<HTMLElement> = (node) => {
+};
+const delegateBodyEvents = (node) => {
     node.addEventListener('click', handleBodyClick);
     node.addEventListener('keydown', handleBodyKeydown);
     return () => {
-      node.removeEventListener('click', handleBodyClick);
-      node.removeEventListener('keydown', handleBodyKeydown);
+        node.removeEventListener('click', handleBodyClick);
+        node.removeEventListener('keydown', handleBodyKeydown);
     };
-  };
-  const virtualRows = $derived(rowVirtualizer.virtualRows);
-  const virtualColumns = $derived(rowVirtualizer.virtualColumns);
-  const virtualColumnLeadingSpacer = $derived(virtualColumns[0]?.start ?? 0);
-  const virtualColumnTrailingSpacer = $derived.by(() => {
+};
+const virtualRows = $derived(rowVirtualizer.virtualRows);
+const virtualColumns = $derived(rowVirtualizer.virtualColumns);
+const virtualColumnLeadingSpacer = $derived(virtualColumns[0]?.start ?? 0);
+const virtualColumnTrailingSpacer = $derived.by(() => {
     const lastColumn = virtualColumns.at(-1);
-    if (!lastColumn) return 0;
-
+    if (!lastColumn)
+        return 0;
     return Math.max(0, rowVirtualizer.totalWidth - (lastColumn.start + lastColumn.size));
-  });
-  const gridContentWidth = $derived(
-    shouldVirtualizeColumns
-      ? columnModel.leftPinnedWidth + rowVirtualizer.totalWidth + columnModel.rightPinnedWidth
-      : undefined,
-  );
-  const gridTemplateColumns = $derived.by(() => {
+});
+const gridContentWidth = $derived(shouldVirtualizeColumns
+    ? columnModel.leftPinnedWidth + rowVirtualizer.totalWidth + columnModel.rightPinnedWidth
+    : undefined);
+const gridTemplateColumns = $derived.by(() => {
     if (!shouldVirtualizeColumns) {
-      return columnModel.renderColumns.map((column) => `${column.width}px`).join(' ');
+        return columnModel.renderColumns.map((column) => `${column.width}px`).join(' ');
     }
-
     return [
-      ...columnModel.leftPinnedColumns.map((column) => `${column.width}px`),
-      `${virtualColumnLeadingSpacer}px`,
-      ...virtualColumns.map((item) => `${item.size}px`),
-      `${virtualColumnTrailingSpacer}px`,
-      ...columnModel.rightPinnedColumns.map((column) => `${column.width}px`),
+        ...columnModel.leftPinnedColumns.map((column) => `${column.width}px`),
+        `${virtualColumnLeadingSpacer}px`,
+        ...virtualColumns.map((item) => `${item.size}px`),
+        `${virtualColumnTrailingSpacer}px`,
+        ...columnModel.rightPinnedColumns.map((column) => `${column.width}px`),
     ].join(' ');
-  });
-  const renderedColumns = $derived.by(() => {
-    if (!shouldVirtualizeColumns) return columnModel.renderColumns;
-
+});
+const renderedColumns = $derived.by(() => {
+    if (!shouldVirtualizeColumns)
+        return columnModel.renderColumns;
     const virtualUnpinnedColumns = virtualColumns.flatMap((item) => {
-      const column = columnModel.unpinnedColumns[item.index];
-      return column ? [column] : [];
+        const column = columnModel.unpinnedColumns[item.index];
+        return column ? [column] : [];
     });
-
     return [
-      ...columnModel.leftPinnedColumns,
-      ...virtualUnpinnedColumns,
-      ...columnModel.rightPinnedColumns,
+        ...columnModel.leftPinnedColumns,
+        ...virtualUnpinnedColumns,
+        ...columnModel.rightPinnedColumns,
     ];
-  });
-  const renderedRows = $derived.by(() => {
+});
+const renderedRows = $derived.by(() => {
     if (!shouldVirtualizeRows) {
-      return sortedKeyedRows.map((keyedRow, visualRowIndex) => ({
-        keyedRow,
-        visualRowIndex,
-        start: 0,
-        size: resolvedRowHeight,
-        virtualized: false,
-      }));
+        return sortedKeyedRows.map((keyedRow, visualRowIndex) => ({
+            keyedRow,
+            visualRowIndex,
+            start: 0,
+            size: resolvedRowHeight,
+            virtualized: false,
+        }));
     }
-
     return virtualRows.flatMap((item) => {
-      const keyedRow = sortedKeyedRows[item.index];
-      return keyedRow
-        ? [
-            {
-              keyedRow,
-              visualRowIndex: item.index,
-              start: item.start,
-              size: item.size,
-              virtualized: true,
-            },
-          ]
-        : [];
+        const keyedRow = sortedKeyedRows[item.index];
+        return keyedRow
+            ? [
+                {
+                    keyedRow,
+                    visualRowIndex: item.index,
+                    start: item.start,
+                    size: item.size,
+                    virtualized: true,
+                },
+            ]
+            : [];
     });
-  });
-  const bodyHeight = $derived(shouldVirtualizeRows ? `${rowVirtualizer.totalHeight}px` : undefined);
-  const duplicateRowIds = $derived.by(() => {
-    const seen = new Set<string>();
-    const duplicates = new Set<string>();
+});
+const bodyHeight = $derived(shouldVirtualizeRows ? `${rowVirtualizer.totalHeight}px` : undefined);
+const duplicateRowIds = $derived.by(() => {
+    const seen = new Set();
+    const duplicates = new Set();
     for (const { rowId } of keyedRows) {
-      if (seen.has(rowId)) duplicates.add(rowId);
-      else seen.add(rowId);
+        if (seen.has(rowId))
+            duplicates.add(rowId);
+        else
+            seen.add(rowId);
     }
     return [...duplicates];
-  });
-  const firstRowDomId = $derived(sortedKeyedRows[0]?.rowDomId);
-  const firstColumnKey = $derived(columnModel.renderColumns[0]?.key);
-  const rowDomIds = $derived(sortedKeyedRows.map((row) => row.rowDomId));
-  const columnKeys = $derived(columnModel.renderColumns.map((column) => column.key));
-  const gridId = $props.id();
-  let requestedActiveRowIndex = $state(0);
-  let requestedActiveColumnKey = $state<string | undefined>();
-  const selectionState = new InternalDataGridSelectionModel({
+});
+const firstRowDomId = $derived(sortedKeyedRows[0]?.rowDomId);
+const firstColumnKey = $derived(columnModel.renderColumns[0]?.key);
+const rowDomIds = $derived(sortedKeyedRows.map((row) => row.rowDomId));
+const columnKeys = $derived(columnModel.renderColumns.map((column) => column.key));
+const gridId = $props.id();
+let requestedActiveRowIndex = $state(0);
+let requestedActiveColumnKey = $state();
+const selectionState = new InternalDataGridSelectionModel({
     rowIds: () => rowDomIds,
     columnKeys: () => columnKeys,
-  });
-  const activeRowIndex = $derived(
-    sortedKeyedRows.length > 0 ? Math.min(requestedActiveRowIndex, sortedKeyedRows.length - 1) : 0,
-  );
-  const activeColumnIndex = $derived.by(() => {
-    const index = columnModel.renderColumns.findIndex(
-      (column) => column.key === requestedActiveColumnKey,
-    );
+});
+const activeRowIndex = $derived(sortedKeyedRows.length > 0 ? Math.min(requestedActiveRowIndex, sortedKeyedRows.length - 1) : 0);
+const activeColumnIndex = $derived.by(() => {
+    const index = columnModel.renderColumns.findIndex((column) => column.key === requestedActiveColumnKey);
     return index >= 0 ? index : 0;
-  });
-  const activeRowDomId = $derived(
-    sortedKeyedRows.length > 0
-      ? sortedKeyedRows[Math.min(activeRowIndex, sortedKeyedRows.length - 1)]?.rowDomId
-      : firstRowDomId,
-  );
-  const activeColumnKey = $derived(columnModel.renderColumns[activeColumnIndex]?.key);
-  const canExposeActiveCell = $derived(!(shouldVirtualizeRows && typeof window === 'undefined'));
-  const activeCellId = $derived(
-    canExposeActiveCell && activeRowDomId !== undefined && firstColumnKey !== undefined
-      ? getCellId(activeRowDomId, activeColumnKey ?? firstColumnKey)
-      : undefined,
-  );
-  const activeCellCoordinates = $derived(
-    activeRowDomId !== undefined && activeColumnKey !== undefined
-      ? { rowId: activeRowDomId, columnKey: activeColumnKey }
-      : undefined,
-  );
-  const resolvedSelectionModel = $derived(selectionModel ?? []);
-  const selectedRowIds = $derived(
-    selectionMode === 'none' ? new Set<string>() : new Set(resolvedSelectionModel),
-  );
-  const resolvedAriaLabel = $derived(
-    typeof ariaLabel === 'string' && ariaLabel.trim().length > 0 ? ariaLabel : undefined,
-  );
-  const resolvedAriaLabelledBy = $derived(
-    typeof ariaLabelledBy === 'string' && ariaLabelledBy.trim().length > 0
-      ? ariaLabelledBy
-      : undefined,
-  );
-
-  let hasWarnedNoLabel = false;
-  let warnedDuplicateRowIdsSignature: string | undefined;
-  let previousActiveCellId: string | undefined;
-  let previousActiveVirtualRowIndex: number | undefined;
-  let previousActiveVirtualColumnIndex: number | undefined;
-  let previousSelectionRowIds: readonly string[] | undefined;
-  let previousSelectionColumnKeys: readonly string[] | undefined;
-  let gridElement: HTMLDivElement | undefined;
-  let headerElement: HTMLDivElement | undefined;
-  let liveRegionTimeoutId: ReturnType<typeof setTimeout> | undefined;
-  let liveRegionVersion = 0;
-  let warnedVirtualRowHeightFallback = false;
-
-  $effect(() => {
+});
+const activeRowDomId = $derived(sortedKeyedRows.length > 0
+    ? sortedKeyedRows[Math.min(activeRowIndex, sortedKeyedRows.length - 1)]?.rowDomId
+    : firstRowDomId);
+const activeColumnKey = $derived(columnModel.renderColumns[activeColumnIndex]?.key);
+const canExposeActiveCell = $derived(!(shouldVirtualizeRows && typeof window === 'undefined'));
+const activeCellId = $derived(canExposeActiveCell && activeRowDomId !== undefined && firstColumnKey !== undefined
+    ? getCellId(activeRowDomId, activeColumnKey ?? firstColumnKey)
+    : undefined);
+const activeCellCoordinates = $derived(activeRowDomId !== undefined && activeColumnKey !== undefined
+    ? { rowId: activeRowDomId, columnKey: activeColumnKey }
+    : undefined);
+const resolvedSelectionModel = $derived(selectionModel ?? []);
+const selectedRowIds = $derived(selectionMode === 'none' ? new Set() : new Set(resolvedSelectionModel));
+const resolvedAriaLabel = $derived(typeof ariaLabel === 'string' && ariaLabel.trim().length > 0 ? ariaLabel : undefined);
+const resolvedAriaLabelledBy = $derived(typeof ariaLabelledBy === 'string' && ariaLabelledBy.trim().length > 0
+    ? ariaLabelledBy
+    : undefined);
+let hasWarnedNoLabel = false;
+let warnedDuplicateRowIdsSignature;
+let previousActiveCellId;
+let previousActiveVirtualRowIndex;
+let previousActiveVirtualColumnIndex;
+let previousSelectionRowIds;
+let previousSelectionColumnKeys;
+let gridElement;
+let headerElement;
+let liveRegionTimeoutId;
+let liveRegionVersion = 0;
+let warnedVirtualRowHeightFallback = false;
+$effect(() => {
     if (!resolvedAriaLabel && !resolvedAriaLabelledBy && !hasWarnedNoLabel) {
-      hasWarnedNoLabel = true;
-      devWarn('[cinder-data-grid] DataGrid requires either aria-label or aria-labelledby.');
+        hasWarnedNoLabel = true;
+        devWarn('[cinder-data-grid] DataGrid requires either aria-label or aria-labelledby.');
     }
-  });
-
-  $effect(() => {
+});
+$effect(() => {
     if (duplicateRowIds.length === 0) {
-      warnedDuplicateRowIdsSignature = undefined;
-      return;
+        warnedDuplicateRowIdsSignature = undefined;
+        return;
     }
-
     const signature = JSON.stringify(duplicateRowIds);
-    if (signature === warnedDuplicateRowIdsSignature) return;
-
+    if (signature === warnedDuplicateRowIdsSignature)
+        return;
     warnedDuplicateRowIdsSignature = signature;
-    devWarn(
-      `[cinder-data-grid] getRowId returned duplicate row ids: ${duplicateRowIds
+    devWarn(`[cinder-data-grid] getRowId returned duplicate row ids: ${duplicateRowIds
         .map((rowId) => JSON.stringify(rowId))
-        .join(', ')}. Row ids must be unique.`,
-    );
-  });
-
-  $effect(() => {
-    if (!shouldWarnVirtualRowHeightFallback || warnedVirtualRowHeightFallback) return;
-
+        .join(', ')}. Row ids must be unique.`);
+});
+$effect(() => {
+    if (!shouldWarnVirtualRowHeightFallback || warnedVirtualRowHeightFallback)
+        return;
     warnedVirtualRowHeightFallback = true;
-    devWarn(
-      '[cinder-data-grid] DataGrid row virtualization is using the default rowHeight of 44px. Pass a positive finite rowHeight to match your row layout.',
-    );
-  });
-
-  $effect(() => {
+    devWarn('[cinder-data-grid] DataGrid row virtualization is using the default rowHeight of 44px. Pass a positive finite rowHeight to match your row layout.');
+});
+$effect(() => {
     const nextMessage = liveRegionMessage;
     void liveRegionAnnouncementSequence;
     const currentVersion = ++liveRegionVersion;
-
     if (liveRegionTimeoutId) {
-      clearTimeout(liveRegionTimeoutId);
-      liveRegionTimeoutId = undefined;
+        clearTimeout(liveRegionTimeoutId);
+        liveRegionTimeoutId = undefined;
     }
-
     renderedLiveRegionMessage = '';
-    if (nextMessage === '') return;
-
+    if (nextMessage === '')
+        return;
     liveRegionTimeoutId = setTimeout(() => {
-      if (liveRegionVersion !== currentVersion) return;
-      renderedLiveRegionMessage = nextMessage;
-      liveRegionTimeoutId = undefined;
+        if (liveRegionVersion !== currentVersion)
+            return;
+        renderedLiveRegionMessage = nextMessage;
+        liveRegionTimeoutId = undefined;
     }, 0);
-
     return () => {
-      if (!liveRegionTimeoutId) return;
-      clearTimeout(liveRegionTimeoutId);
-      liveRegionTimeoutId = undefined;
+        if (!liveRegionTimeoutId)
+            return;
+        clearTimeout(liveRegionTimeoutId);
+        liveRegionTimeoutId = undefined;
     };
-  });
-
-  $effect(() => {
+});
+$effect(() => {
     const cellId = activeCellId;
     const activeVirtualRowIndex = shouldVirtualizeRows ? activeRowIndex : undefined;
     const activeVirtualColumnIndex = shouldVirtualizeColumns
-      ? getUnpinnedColumnIndex(activeColumnKey)
-      : undefined;
-    if (
-      cellId === undefined ||
-      (cellId === previousActiveCellId &&
-        activeVirtualRowIndex === previousActiveVirtualRowIndex &&
-        activeVirtualColumnIndex === previousActiveVirtualColumnIndex)
-    ) {
-      previousActiveCellId = cellId;
-      previousActiveVirtualRowIndex = activeVirtualRowIndex;
-      previousActiveVirtualColumnIndex = activeVirtualColumnIndex;
-      return;
+        ? getUnpinnedColumnIndex(activeColumnKey)
+        : undefined;
+    if (cellId === undefined ||
+        (cellId === previousActiveCellId &&
+            activeVirtualRowIndex === previousActiveVirtualRowIndex &&
+            activeVirtualColumnIndex === previousActiveVirtualColumnIndex)) {
+        previousActiveCellId = cellId;
+        previousActiveVirtualRowIndex = activeVirtualRowIndex;
+        previousActiveVirtualColumnIndex = activeVirtualColumnIndex;
+        return;
     }
-
-    if (
-      previousActiveCellId === undefined &&
-      previousActiveVirtualRowIndex === undefined &&
-      previousActiveVirtualColumnIndex === undefined
-    ) {
-      previousActiveCellId = cellId;
-      previousActiveVirtualRowIndex = activeVirtualRowIndex;
-      previousActiveVirtualColumnIndex = activeVirtualColumnIndex;
-      return;
+    if (previousActiveCellId === undefined &&
+        previousActiveVirtualRowIndex === undefined &&
+        previousActiveVirtualColumnIndex === undefined) {
+        previousActiveCellId = cellId;
+        previousActiveVirtualRowIndex = activeVirtualRowIndex;
+        previousActiveVirtualColumnIndex = activeVirtualColumnIndex;
+        return;
     }
-
     previousActiveCellId = cellId;
     previousActiveVirtualRowIndex = activeVirtualRowIndex;
     previousActiveVirtualColumnIndex = activeVirtualColumnIndex;
     if (shouldVirtualizeRows) {
-      rowVirtualizer.scrollToRow(activeRowIndex);
+        rowVirtualizer.scrollToRow(activeRowIndex);
     }
     if (shouldVirtualizeColumns && activeVirtualColumnIndex !== undefined) {
-      rowVirtualizer.scrollToColumn(activeVirtualColumnIndex);
+        rowVirtualizer.scrollToColumn(activeVirtualColumnIndex);
     }
     void scrollActiveCellIntoView(cellId);
-  });
-
-  $effect(() => {
+});
+$effect(() => {
     const previousRowIds = previousSelectionRowIds;
     const previousColumnKeys = previousSelectionColumnKeys;
-    const isInitialSelectionReconciliation =
-      previousRowIds === undefined || previousColumnKeys === undefined;
-    const didSelectionGeometryChange =
-      !isInitialSelectionReconciliation &&
-      (didStringArrayChange(previousRowIds, rowDomIds) ||
-        didStringArrayChange(previousColumnKeys, columnKeys));
+    const isInitialSelectionReconciliation = previousRowIds === undefined || previousColumnKeys === undefined;
+    const didSelectionGeometryChange = !isInitialSelectionReconciliation &&
+        (didStringArrayChange(previousRowIds, rowDomIds) ||
+            didStringArrayChange(previousColumnKeys, columnKeys));
     previousSelectionRowIds = rowDomIds;
     previousSelectionColumnKeys = columnKeys;
-    if (!isInitialSelectionReconciliation && !didSelectionGeometryChange) return;
-
+    if (!isInitialSelectionReconciliation && !didSelectionGeometryChange)
+        return;
     selectionState.reconcile(activeCellCoordinates);
-    if (!didSelectionGeometryChange) return;
-
+    if (!didSelectionGeometryChange)
+        return;
     syncRequestedActiveCell();
-  });
-
-  function syncRequestedActiveCell(): void {
+});
+function syncRequestedActiveCell() {
     const activeCell = selectionState.activeCell;
-    if (!activeCell) return;
-
+    if (!activeCell)
+        return;
     const nextActiveRowIndex = rowDomIds.indexOf(activeCell.rowId);
     if (nextActiveRowIndex >= 0 && requestedActiveRowIndex !== nextActiveRowIndex) {
-      requestedActiveRowIndex = nextActiveRowIndex;
+        requestedActiveRowIndex = nextActiveRowIndex;
     }
     if (requestedActiveColumnKey !== activeCell.columnKey) {
-      requestedActiveColumnKey = activeCell.columnKey;
+        requestedActiveColumnKey = activeCell.columnKey;
     }
-  }
-
-  function didStringArrayChange(
-    previousValues: readonly string[],
-    nextValues: readonly string[],
-  ): boolean {
-    if (previousValues.length !== nextValues.length) return true;
+}
+function didStringArrayChange(previousValues, nextValues) {
+    if (previousValues.length !== nextValues.length)
+        return true;
     return previousValues.some((value, index) => value !== nextValues[index]);
-  }
-
-  function getCellId(rowId: string, columnKey: string): string {
+}
+function getCellId(rowId, columnKey) {
     return `${gridId}-cell-r-${toDomIdSegment(rowId)}-c-${toDomIdSegment(columnKey)}`;
-  }
-
-  function toDomIdSegment(value: string): string {
+}
+function toDomIdSegment(value) {
     const segment = Array.from(value, (character) => character.codePointAt(0)?.toString(16) ?? '0');
     return segment.length > 0 ? segment.join('_') : 'empty';
-  }
-
-  function isValidVirtualRowHeight(value: number | undefined): value is number {
+}
+function isValidVirtualRowHeight(value) {
     return typeof value === 'number' && Number.isFinite(value) && value > 0;
-  }
-
-  function resolveVirtualRowHeight(value: number | undefined): number {
+}
+function resolveVirtualRowHeight(value) {
     return isValidVirtualRowHeight(value) ? value : defaultVirtualRowHeight;
-  }
-
-  function formatDataGridValue(value: unknown): string {
-    if (value === null || value === undefined) return '';
-    if (value instanceof Date) return value.toISOString();
+}
+function formatDataGridValue(value) {
+    if (value === null || value === undefined)
+        return '';
+    if (value instanceof Date)
+        return value.toISOString();
     return String(value);
-  }
-
-  function getRowClass(row: TRow, rowIndex: number): string | undefined {
-    if (typeof rowClass === 'function') return rowClass(row, rowIndex);
+}
+function getRowClass(row, rowIndex) {
+    if (typeof rowClass === 'function')
+        return rowClass(row, rowIndex);
     return rowClass;
-  }
-
-  function getResolvedRowAriaLabel(row: TRow, rowIndex: number): string | undefined {
+}
+function getResolvedRowAriaLabel(row, rowIndex) {
     const label = getRowAriaLabel?.(row, rowIndex);
     return typeof label === 'string' && label.trim().length > 0 ? label : undefined;
-  }
-
-  function getCellStyle(column: ResolvedDataGridColumn<TRow>): string {
+}
+function getCellStyle(column) {
     const customProperties = [
-      `--_cinder-data-grid-column-width: ${column.width}px`,
-      `grid-column: ${getCellGridColumn(column)}`,
+        `--_cinder-data-grid-column-width: ${column.width}px`,
+        `grid-column: ${getCellGridColumn(column)}`,
     ];
     if (column.pin === 'left') {
-      customProperties.push(`--_cinder-data-grid-pin-left-offset: ${column.pinOffset}px`);
+        customProperties.push(`--_cinder-data-grid-pin-left-offset: ${column.pinOffset}px`);
     }
     if (column.pin === 'right') {
-      customProperties.push(`--_cinder-data-grid-pin-right-offset: ${column.pinOffset}px`);
+        customProperties.push(`--_cinder-data-grid-pin-right-offset: ${column.pinOffset}px`);
     }
     return customProperties.join('; ');
-  }
-
-  function getRowStyle(row: {
-    virtualized: boolean;
-    start: number;
-    size: number;
-  }): string | undefined {
-    if (!row.virtualized) return undefined;
-
+}
+function getRowStyle(row) {
+    if (!row.virtualized)
+        return undefined;
     return [
-      `--_cinder-data-grid-row-translate-y: ${row.start}px`,
-      `--_cinder-data-grid-row-height: ${row.size}px`,
+        `--_cinder-data-grid-row-translate-y: ${row.start}px`,
+        `--_cinder-data-grid-row-height: ${row.size}px`,
     ].join('; ');
-  }
-
-  function getHeaderHeight(): number {
+}
+function getHeaderHeight() {
     return headerElement ? getElementHeight(headerElement) : 0;
-  }
-
-  function getElementHeight(element: HTMLElement): number {
+}
+function getElementHeight(element) {
     const offsetHeight = element.offsetHeight;
-    if (offsetHeight > 0) return offsetHeight;
-
+    if (offsetHeight > 0)
+        return offsetHeight;
     return element.getBoundingClientRect().height || 0;
-  }
-
-  function getColumnSortModelItem(columnKey: string): DataGridSortModelItem | undefined {
+}
+function getColumnSortModelItem(columnKey) {
     return activeSortModel.find((item) => item.key === columnKey);
-  }
-
-  function getColumnSortPriority(columnKey: string): number | undefined {
+}
+function getColumnSortPriority(columnKey) {
     const index = activeSortModel.findIndex((item) => item.key === columnKey);
     return index >= 0 && activeSortModel.length > 1 ? index + 1 : undefined;
-  }
-
-  function getHeaderAriaSort(
-    column: ResolvedDataGridColumn<TRow>,
-    sortItem: DataGridSortModelItem | undefined,
-  ): DataGridSortModelItem['direction'] | undefined {
+}
+function getHeaderAriaSort(column, sortItem) {
     return activeSortModel[0]?.key === column.key ? sortItem?.direction : undefined;
-  }
-
-  function getSortStateDescription(
-    sortItem: DataGridSortModelItem | undefined,
-    sortPriority: number | undefined,
-  ): string {
-    if (!sortItem) return 'not sorted';
-    if (sortPriority === undefined) return `sorted ${sortItem.direction}`;
+}
+function getSortStateDescription(sortItem, sortPriority) {
+    if (!sortItem)
+        return 'not sorted';
+    if (sortPriority === undefined)
+        return `sorted ${sortItem.direction}`;
     return `sorted ${sortItem.direction}, priority ${sortPriority}`;
-  }
-
-  function handleColumnHeaderClick(column: ResolvedDataGridColumn<TRow>, event: MouseEvent): void {
-    if (!column.sortable) return;
-
+}
+function handleColumnHeaderClick(column, event) {
+    if (!column.sortable)
+        return;
     const nextSortModel = getNextDataGridSortModel(activeSortModel, column.key, event.shiftKey);
     sortModel = nextSortModel;
     onsortmodelchange?.(nextSortModel);
-  }
-
-  function getCellCoordinate(
-    rowIndex: number,
-    columnIndex: number,
-  ): DataGridCellCoordinate | undefined {
+}
+function getCellCoordinate(rowIndex, columnIndex) {
     const rowId = rowDomIds[Math.min(Math.max(rowIndex, 0), rowDomIds.length - 1)];
     const columnKey = columnKeys[Math.min(Math.max(columnIndex, 0), columnKeys.length - 1)];
-    if (rowId === undefined || columnKey === undefined) return undefined;
+    if (rowId === undefined || columnKey === undefined)
+        return undefined;
     return { rowId, columnKey };
-  }
-
-  function getUnpinnedColumnIndex(columnKey: string | undefined): number | undefined {
-    if (columnKey === undefined) return undefined;
+}
+function getUnpinnedColumnIndex(columnKey) {
+    if (columnKey === undefined)
+        return undefined;
     const index = columnModel.unpinnedColumns.findIndex((column) => column.key === columnKey);
     return index >= 0 ? index : undefined;
-  }
-
-  function getCellGridColumn(column: ResolvedDataGridColumn<TRow>): number {
-    if (!shouldVirtualizeColumns) return column.renderIndex;
-
+}
+function getCellGridColumn(column) {
+    if (!shouldVirtualizeColumns)
+        return column.renderIndex;
     const leftPinnedCount = columnModel.leftPinnedColumns.length;
     if (column.pin === 'left') {
-      const leftPinnedIndex = columnModel.leftPinnedColumns.findIndex(
-        (item) => item.key === column.key,
-      );
-      return Math.max(0, leftPinnedIndex) + 1;
+        const leftPinnedIndex = columnModel.leftPinnedColumns.findIndex((item) => item.key === column.key);
+        return Math.max(0, leftPinnedIndex) + 1;
     }
-
     const visibleUnpinnedIndex = virtualColumns.findIndex((item) => item.key === column.key);
-    if (visibleUnpinnedIndex >= 0) return leftPinnedCount + 2 + visibleUnpinnedIndex;
-
-    const rightPinnedIndex = columnModel.rightPinnedColumns.findIndex(
-      (item) => item.key === column.key,
-    );
+    if (visibleUnpinnedIndex >= 0)
+        return leftPinnedCount + 2 + visibleUnpinnedIndex;
+    const rightPinnedIndex = columnModel.rightPinnedColumns.findIndex((item) => item.key === column.key);
     return leftPinnedCount + 2 + virtualColumns.length + 1 + Math.max(0, rightPinnedIndex);
-  }
-
-  async function scrollActiveCellIntoView(cellId: string): Promise<void> {
+}
+async function scrollActiveCellIntoView(cellId) {
     await tick();
     document.getElementById(cellId)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-  }
-
-  function moveActiveCell(rowIndex: number, columnIndex: number, extend = false): void {
-    if (sortedKeyedRows.length === 0 || columnModel.renderColumns.length === 0) return;
+}
+function moveActiveCell(rowIndex, columnIndex, extend = false) {
+    if (sortedKeyedRows.length === 0 || columnModel.renderColumns.length === 0)
+        return;
     requestedActiveRowIndex = Math.min(Math.max(rowIndex, 0), sortedKeyedRows.length - 1);
     requestedActiveColumnKey =
-      columnModel.renderColumns[
-        Math.min(Math.max(columnIndex, 0), columnModel.renderColumns.length - 1)
-      ]?.key;
-
+        columnModel.renderColumns[Math.min(Math.max(columnIndex, 0), columnModel.renderColumns.length - 1)]?.key;
     const cell = getCellCoordinate(rowIndex, columnIndex);
-    if (cell) selectionState.setActiveCell(cell, { extend });
-  }
-
-  function setSelectionModel(nextSelectionModel: DataGridSelectionModel): void {
+    if (cell)
+        selectionState.setActiveCell(cell, { extend });
+}
+function setSelectionModel(nextSelectionModel) {
     selectionModel = nextSelectionModel;
     onselectionmodelchange?.(nextSelectionModel);
-  }
-
-  function updateRowSelection(rowId: string, event: MouseEvent | KeyboardEvent): void {
-    if (selectionMode === 'none') return;
+}
+function updateRowSelection(rowId, event) {
+    if (selectionMode === 'none')
+        return;
     if (selectionMode === 'single') {
-      setSelectionModel([rowId]);
-      return;
+        setSelectionModel([rowId]);
+        return;
     }
-
     const isToggle = event.ctrlKey || event.metaKey;
-    if (event.shiftKey) return;
+    if (event.shiftKey)
+        return;
     if (!isToggle) {
-      setSelectionModel([rowId]);
-      return;
+        setSelectionModel([rowId]);
+        return;
     }
-
     const nextSelection = new Set(resolvedSelectionModel);
-    if (nextSelection.has(rowId)) nextSelection.delete(rowId);
-    else nextSelection.add(rowId);
+    if (nextSelection.has(rowId))
+        nextSelection.delete(rowId);
+    else
+        nextSelection.add(rowId);
     setSelectionModel([...nextSelection]);
-  }
-
-  function selectActiveCell(event: KeyboardEvent): void {
+}
+function selectActiveCell(event) {
     const row = sortedKeyedRows[activeRowIndex];
-    if (!row || activeColumnKey === undefined || activeRowDomId === undefined) return;
-    selectionState.setActiveCell(
-      { rowId: activeRowDomId, columnKey: activeColumnKey },
-      { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey },
-    );
+    if (!row || activeColumnKey === undefined || activeRowDomId === undefined)
+        return;
+    selectionState.setActiveCell({ rowId: activeRowDomId, columnKey: activeColumnKey }, { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey });
     updateRowSelection(row.rowId, event);
-  }
-
-  function collapseSelectionToActiveCell(): void {
+}
+function collapseSelectionToActiveCell() {
     selectionState.collapseToActiveCell();
-    if (selectionMode === 'none') return;
-
+    if (selectionMode === 'none')
+        return;
     const row = sortedKeyedRows[activeRowIndex];
     setSelectionModel(row ? [row.rowId] : []);
-  }
-
-  async function copySelectedCells(): Promise<void> {
-    const cells =
-      selectionState.selectedCellCoordinates.length > 0
+}
+async function copySelectedCells() {
+    const cells = selectionState.selectedCellCoordinates.length > 0
         ? sortCellsByGridOrder(selectionState.selectedCellCoordinates)
         : activeCellCoordinates
-          ? [activeCellCoordinates]
-          : [];
-    if (cells.length === 0) return;
-
+            ? [activeCellCoordinates]
+            : [];
+    if (cells.length === 0)
+        return;
     const rowsByDomId = new Map(keyedRows.map((row) => [row.rowDomId, row.row]));
     const columnsByKey = new Map(columnModel.renderColumns.map((column) => [column.key, column]));
-    const cellsByRow = new Map<string, DataGridCellCoordinate[]>();
+    const cellsByRow = new Map();
     for (const cell of cells) {
-      const rowCells = cellsByRow.get(cell.rowId);
-      if (rowCells) rowCells.push(cell);
-      else cellsByRow.set(cell.rowId, [cell]);
+        const rowCells = cellsByRow.get(cell.rowId);
+        if (rowCells)
+            rowCells.push(cell);
+        else
+            cellsByRow.set(cell.rowId, [cell]);
     }
     const text = [...cellsByRow.entries()]
-      .map(([rowId, rowCells]) => {
+        .map(([rowId, rowCells]) => {
         const row = rowsByDomId.get(rowId);
-        if (!row) return '';
+        if (!row)
+            return '';
         return rowCells
-          .map((cell) => {
+            .map((cell) => {
             const column = columnsByKey.get(cell.columnKey);
-            if (!column) return '';
+            if (!column)
+                return '';
             return formatDataGridValue(getDataGridColumnValue(row, column));
-          })
-          .join('\t');
-      })
-      .join('\n');
-
+        })
+            .join('\t');
+    })
+        .join('\n');
     const copied = await copyToClipboard(text);
     if (copied) {
-      announceCopiedCells(`Copied ${cells.length} ${cells.length === 1 ? 'cell' : 'cells'}`);
-      return;
+        announceCopiedCells(`Copied ${cells.length} ${cells.length === 1 ? 'cell' : 'cells'}`);
+        return;
     }
     announceCopiedCells('Copy failed');
-  }
-
-  function announceCopiedCells(message: string): void {
+}
+function announceCopiedCells(message) {
     liveRegionMessage = message;
     liveRegionAnnouncementSequence += 1;
-  }
-
-  function sortCellsByGridOrder(
-    cells: readonly DataGridCellCoordinate[],
-  ): DataGridCellCoordinate[] {
+}
+function sortCellsByGridOrder(cells) {
     const rowIndexes = new Map(rowDomIds.map((rowId, index) => [rowId, index]));
     const columnIndexes = new Map(columnKeys.map((columnKey, index) => [columnKey, index]));
     return [...cells].sort((left, right) => {
-      const leftRowIndex = rowIndexes.get(left.rowId) ?? Number.POSITIVE_INFINITY;
-      const rightRowIndex = rowIndexes.get(right.rowId) ?? Number.POSITIVE_INFINITY;
-      if (leftRowIndex !== rightRowIndex) return leftRowIndex - rightRowIndex;
-
-      const leftColumnIndex = columnIndexes.get(left.columnKey) ?? Number.POSITIVE_INFINITY;
-      const rightColumnIndex = columnIndexes.get(right.columnKey) ?? Number.POSITIVE_INFINITY;
-      return leftColumnIndex - rightColumnIndex;
+        const leftRowIndex = rowIndexes.get(left.rowId) ?? Number.POSITIVE_INFINITY;
+        const rightRowIndex = rowIndexes.get(right.rowId) ?? Number.POSITIVE_INFINITY;
+        if (leftRowIndex !== rightRowIndex)
+            return leftRowIndex - rightRowIndex;
+        const leftColumnIndex = columnIndexes.get(left.columnKey) ?? Number.POSITIVE_INFINITY;
+        const rightColumnIndex = columnIndexes.get(right.columnKey) ?? Number.POSITIVE_INFINITY;
+        return leftColumnIndex - rightColumnIndex;
     });
-  }
-
-  function handleCellClick(
-    event: MouseEvent,
-    rowId: string,
-    rowDomId: string,
-    columnKey: string,
-    rowIndex: number,
-  ): void {
+}
+function handleCellClick(event, rowId, rowDomId, columnKey, rowIndex) {
     requestedActiveRowIndex = rowIndex;
     requestedActiveColumnKey = columnKey;
-    selectionState.setActiveCell(
-      { rowId: rowDomId, columnKey },
-      { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey },
-    );
+    selectionState.setActiveCell({ rowId: rowDomId, columnKey }, { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey });
     updateRowSelection(rowId, event);
-    if (!isInteractiveEventTarget(event)) gridElement?.focus({ preventScroll: true });
-  }
-
-  function handleBodyClick(event: MouseEvent): void {
+    if (!isInteractiveEventTarget(event))
+        gridElement?.focus({ preventScroll: true });
+}
+function handleBodyClick(event) {
     const cell = getCellEventDetail(event);
-    if (!cell) return;
+    if (!cell)
+        return;
     handleCellClick(event, cell.rowId, cell.rowDomId, cell.columnKey, cell.rowIndex);
-  }
-
-  function handleCellKeydown(
-    event: KeyboardEvent,
-    rowId: string,
-    rowDomId: string,
-    columnKey: string,
-    rowIndex: number,
-  ): void {
-    if (isInteractiveEventTarget(event)) return;
-    if (event.key !== 'Enter' && event.key !== ' ') return;
+}
+function handleCellKeydown(event, rowId, rowDomId, columnKey, rowIndex) {
+    if (isInteractiveEventTarget(event))
+        return;
+    if (event.key !== 'Enter' && event.key !== ' ')
+        return;
     event.preventDefault();
     event.stopPropagation();
     requestedActiveRowIndex = rowIndex;
     requestedActiveColumnKey = columnKey;
-    selectionState.setActiveCell(
-      { rowId: rowDomId, columnKey },
-      { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey },
-    );
+    selectionState.setActiveCell({ rowId: rowDomId, columnKey }, { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey });
     updateRowSelection(rowId, event);
     gridElement?.focus({ preventScroll: true });
-  }
-
-  function handleBodyKeydown(event: KeyboardEvent): void {
+}
+function handleBodyKeydown(event) {
     const cell = getCellEventDetail(event);
-    if (!cell) return;
+    if (!cell)
+        return;
     handleCellKeydown(event, cell.rowId, cell.rowDomId, cell.columnKey, cell.rowIndex);
-  }
-
-  function getCellEventDetail(
-    event: Event,
-  ): { rowId: string; rowDomId: string; columnKey: string; rowIndex: number } | undefined {
-    if (!(event.target instanceof Element)) return undefined;
-    const cell = event.target.closest<HTMLElement>('.cinder-data-grid__cell');
-    if (!cell) return undefined;
-
+}
+function getCellEventDetail(event) {
+    if (!(event.target instanceof Element))
+        return undefined;
+    const cell = event.target.closest('.cinder-data-grid__cell');
+    if (!cell)
+        return undefined;
     const { cinderRowId, cinderRowDomId, cinderColumnKey, cinderRowIndex } = cell.dataset;
     const rowIndex = Number(cinderRowIndex);
-    if (
-      cinderRowId === undefined ||
-      cinderRowDomId === undefined ||
-      cinderColumnKey === undefined ||
-      !Number.isInteger(rowIndex)
-    ) {
-      return undefined;
+    if (cinderRowId === undefined ||
+        cinderRowDomId === undefined ||
+        cinderColumnKey === undefined ||
+        !Number.isInteger(rowIndex)) {
+        return undefined;
     }
-
     return {
-      rowId: cinderRowId,
-      rowDomId: cinderRowDomId,
-      columnKey: cinderColumnKey,
-      rowIndex,
+        rowId: cinderRowId,
+        rowDomId: cinderRowDomId,
+        columnKey: cinderColumnKey,
+        rowIndex,
     };
-  }
-
-  function handleKeydown(event: KeyboardEvent): void {
+}
+function handleKeydown(event) {
     if (consumerOnKeydown) {
-      (consumerOnKeydown as (event: KeyboardEvent) => void)(event);
+        consumerOnKeydown(event);
     }
-    if (event.defaultPrevented) return;
+    if (event.defaultPrevented)
+        return;
     if (event.target instanceof Element && event.target.closest('.cinder-data-grid__sort-button')) {
-      return;
+        return;
     }
-    if (isInteractiveEventTarget(event)) return;
-
-    if (sortedKeyedRows.length === 0 || columnModel.renderColumns.length === 0) return;
-
+    if (isInteractiveEventTarget(event))
+        return;
+    if (sortedKeyedRows.length === 0 || columnModel.renderColumns.length === 0)
+        return;
     const action = dataGridKeyToAction(event, {
-      activeRowIndex,
-      activeColumnIndex,
-      rowCount: sortedKeyedRows.length,
-      columnCount: columnModel.renderColumns.length,
+        activeRowIndex,
+        activeColumnIndex,
+        rowCount: sortedKeyedRows.length,
+        columnCount: columnModel.renderColumns.length,
     });
-    if (!action) return;
-
+    if (!action)
+        return;
     event.preventDefault();
-
     if (action.type === 'move-cell') {
-      moveActiveCell(action.rowIndex, action.columnIndex, action.extend);
-      return;
+        moveActiveCell(action.rowIndex, action.columnIndex, action.extend);
+        return;
     }
-
     if (action.type === 'select-all') {
-      selectionState.selectAll();
-      syncRequestedActiveCell();
-      if (selectionMode === 'multiple') {
-        setSelectionModel(sortedKeyedRows.map((row) => row.rowId));
-      } else if (selectionMode === 'single') {
-        const row = sortedKeyedRows[activeRowIndex];
-        setSelectionModel(row ? [row.rowId] : []);
-      }
-      return;
+        selectionState.selectAll();
+        syncRequestedActiveCell();
+        if (selectionMode === 'multiple') {
+            setSelectionModel(sortedKeyedRows.map((row) => row.rowId));
+        }
+        else if (selectionMode === 'single') {
+            const row = sortedKeyedRows[activeRowIndex];
+            setSelectionModel(row ? [row.rowId] : []);
+        }
+        return;
     }
-
     if (action.type === 'collapse-selection') {
-      collapseSelectionToActiveCell();
-      return;
+        collapseSelectionToActiveCell();
+        return;
     }
-
     if (action.type === 'select-active-cell') {
-      selectActiveCell(event);
-      return;
+        selectActiveCell(event);
+        return;
     }
-
     if (action.type === 'copy-selection') {
-      void copySelectedCells();
+        void copySelectedCells();
     }
-  }
-
-  function isInteractiveEventTarget(event: Event): boolean {
-    if (!(event.target instanceof Element)) return false;
+}
+function isInteractiveEventTarget(event) {
+    if (!(event.target instanceof Element))
+        return false;
     const interactiveElement = event.target.closest(interactiveDescendantSelector);
     return interactiveElement !== null && interactiveElement !== gridElement;
-  }
+}
 </script>
 
 <div