website: adopt <ViewTransition> in a couple places

website/components/DraggableRowRenderer.tsx

@@ -1,11 +1,13 @@
-import { useState } from 'react';
+import { startTransition, useState, ViewTransition } from 'react';
 import { css } from 'ecij';
 import clsx from 'clsx';
 
 import { Row, type RenderRowProps } from '../../src';
 
-const rowDraggingClassname = css`
-  opacity: 0.5;
+const draggableRowClassname = css`
+  :root:active-view-transition &:focus-within {
+    z-index: 1;
+  }
 `;
 
 const rowOverClassname = css`
@@ -22,29 +24,25 @@ export function DraggableRowRenderer<R, SR>({
   onRowReorder,
   ...props
 }: DraggableRowRenderProps<R, SR>) {
-  const [isDragging, setIsDragging] = useState(false);
   const [isOver, setIsOver] = useState(false);
 
-  className = clsx(className, {
-    [rowDraggingClassname]: isDragging,
+  className = clsx(className, draggableRowClassname, {
     [rowOverClassname]: isOver
   });
 
   function onDragStart(event: React.DragEvent<HTMLDivElement>) {
-    setIsDragging(true);
     event.dataTransfer.setData('text/plain', String(rowIdx));
     event.dataTransfer.dropEffect = 'move';
   }
 
-  function onDragEnd() {
-    setIsDragging(false);
-  }
-
   function onDrop(event: React.DragEvent<HTMLDivElement>) {
-    setIsOver(false);
     // prevent the browser from redirecting in some cases
     event.preventDefault();
-    onRowReorder(Number(event.dataTransfer.getData('text/plain')), rowIdx);
+    setIsOver(false);
+
+    startTransition(() => {
+      onRowReorder(Number(event.dataTransfer.getData('text/plain')), rowIdx);
+    });
   }
 
   function onDragEnter(event: React.DragEvent<HTMLDivElement>) {
@@ -60,18 +58,19 @@ export function DraggableRowRenderer<R, SR>({
   }
 
   return (
-    <Row
-      draggable
-      onDragStart={onDragStart}
-      onDragEnd={onDragEnd}
-      onDragOver={onDragOver}
-      onDragEnter={onDragEnter}
-      onDragLeave={onDragLeave}
-      onDrop={onDrop}
-      rowIdx={rowIdx}
-      className={className}
-      {...props}
-    />
+    <ViewTransition>
+      <Row
+        draggable
+        onDragStart={onDragStart}
+        onDragOver={onDragOver}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        rowIdx={rowIdx}
+        className={className}
+        {...props}
+      />
+    </ViewTransition>
   );
 }
 

website/root.css

@@ -30,3 +30,11 @@ body {
 .fill-grid {
   block-size: 100%;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

website/routes/ColumnsReordering.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { startTransition, useCallback, useMemo, useState, ViewTransition } from 'react';
 import { createFileRoute } from '@tanstack/react-router';
 
 import { DataGrid, type Column, type ColumnWidths, type SortColumn } from '../../src';
@@ -33,6 +33,10 @@ function createRows(): readonly Row[] {
   return rows;
 }
 
+function rowKeyGetter(row: Row): number {
+  return row.id;
+}
+
 const columns: Column<Row>[] = [
   {
     key: 'id',
@@ -113,7 +117,7 @@ function ColumnsReordering() {
   }, [rows, sortColumns]);
 
   function onColumnsReorder(sourceKey: string, targetKey: string) {
-    function reorderColumns() {
+    startTransition(() => {
       setColumnsOrder((columnsOrder) => {
         const sourceColumnOrderIndex = columnsOrder.findIndex(
           (index) => columns[index].key === sourceKey
@@ -126,14 +130,14 @@ function ColumnsReordering() {
         newColumnsOrder.splice(targetColumnOrderIndex, 0, sourceColumnOrder);
         return newColumnsOrder;
       });
-    }
-
-    document.startViewTransition(reorderColumns);
+    });
   }
 
   function resetOrderAndWidths() {
-    setColumnsOrder(initialColumnsOrder);
-    setColumnWidths(new Map());
+    startTransition(() => {
+      setColumnsOrder(initialColumnsOrder);
+      setColumnWidths(new Map());
+    });
   }
 
   return (
@@ -148,18 +152,21 @@ function ColumnsReordering() {
       >
         Reset Columns
       </button>
-      <DataGrid
-        aria-label="Columns Reordering Example"
-        columns={reorderedColumns}
-        rows={sortedRows}
-        sortColumns={sortColumns}
-        onSortColumnsChange={onSortColumnsChange}
-        direction={direction}
-        defaultColumnOptions={{ width: '1fr' }}
-        onColumnsReorder={onColumnsReorder}
-        columnWidths={columnWidths}
-        onColumnWidthsChange={setColumnWidths}
-      />
+      <ViewTransition>
+        <DataGrid
+          aria-label="Columns Reordering Example"
+          columns={reorderedColumns}
+          rows={sortedRows}
+          rowKeyGetter={rowKeyGetter}
+          sortColumns={sortColumns}
+          onSortColumnsChange={onSortColumnsChange}
+          direction={direction}
+          defaultColumnOptions={{ width: '1fr' }}
+          onColumnsReorder={onColumnsReorder}
+          columnWidths={columnWidths}
+          onColumnWidthsChange={setColumnWidths}
+        />
+      </ViewTransition>
     </>
   );
 }

website/routes/RowsReordering.tsx

@@ -33,6 +33,10 @@ function createRows(): readonly Row[] {
   return rows;
 }
 
+function rowKeyGetter(row: Row): number {
+  return row.id;
+}
+
 const columns: readonly Column<Row>[] = [
   {
     key: 'id',
@@ -64,16 +68,12 @@ function RowsReordering() {
 
   const renderRow = useCallback((key: React.Key, props: RenderRowProps<Row>) => {
     function onRowReorder(fromIndex: number, toIndex: number) {
-      function reorderRows() {
-        setRows((rows) => {
-          const row = rows[fromIndex];
-          const newRows = rows.toSpliced(fromIndex, 1);
-          newRows.splice(toIndex, 0, row);
-          return newRows;
-        });
-      }
-
-      document.startViewTransition(reorderRows);
+      setRows((rows) => {
+        const row = rows[fromIndex];
+        const newRows = rows.toSpliced(fromIndex, 1);
+        newRows.splice(toIndex, 0, row);
+        return newRows;
+      });
     }
 
     return <DraggableRowRenderer<Row, unknown> key={key} {...props} onRowReorder={onRowReorder} />;
@@ -85,6 +85,7 @@ function RowsReordering() {
       columns={columns}
       rows={rows}
       onRowsChange={setRows}
+      rowKeyGetter={rowKeyGetter}
       renderers={{ renderRow }}
       direction={direction}
     />