Transition theme change (Comcast#3839)

Author: amanmahajan7

website/Nav.tsx

@@ -3,6 +3,7 @@ import { Link } from '@tanstack/react-router';
 import { css } from '@linaria/core';
 
 import type { Direction } from '../src/types';
+import { startViewTransition } from './utils';
 
 const headerClassname = css`
   border-inline-start: 4px solid light-dark(hsl(210deg 50% 80%), hsl(210deg 50% 40%));
@@ -62,13 +63,19 @@ export default function Nav({ direction, onDirectionChange }: Props) {
   const linksNavId = useId();
   const [theme, setTheme] = useState<Theme>('system');
 
+  function onThemeChange(theme: Theme) {
+    startViewTransition(() => {
+      setTheme(theme);
+    });
+  }
+
   return (
     <header className={headerClassname}>
       <h1>react-data-grid</h1>
 
       <label className={labelClassname}>
         Theme{' '}
-        <select value={theme} onChange={(e) => setTheme(e.target.value as Theme)}>
+        <select value={theme} onChange={(e) => onThemeChange(e.target.value as Theme)}>
           <option value="light">Light</option>
           <option value="dark">Dark</option>
           <option value="system">System</option>

website/routes/ColumnsReordering.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { DataGrid } from '../../src';
 import type { Column, ColumnWidths, SortColumn } from '../../src';
+import { startViewTransition } from '../utils';
 import { useDirection } from '../directionContext';
 
 export const Route = createFileRoute({
@@ -120,12 +121,7 @@ function ColumnsReordering() {
       });
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (document.startViewTransition) {
-      document.startViewTransition(reorderColumns);
-    } else {
-      reorderColumns();
-    }
+    startViewTransition(reorderColumns);
   }
 
   function resetOrderAndWidths() {

website/routes/CommonFeatures.tsx

@@ -14,8 +14,8 @@ import {
 } from '../../src';
 import { textEditorClassname } from '../../src/editors/textEditor';
 import type { Direction } from '../../src/types';
+import { exportToCsv, exportToPdf } from '../utils';
 import { useDirection } from '../directionContext';
-import { exportToCsv, exportToPdf } from '../exportUtils';
 
 export const Route = createFileRoute({
   component: CommonFeatures

website/routes/RowsReordering.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
 import { DataGrid, textEditor } from '../../src';
 import type { CellRendererProps, Column } from '../../src';
 import { DraggableCellRenderer } from '../components';
+import { startViewTransition } from '../utils';
 import { useDirection } from '../directionContext';
 
 export const Route = createFileRoute({
@@ -73,12 +74,7 @@ function RowsReordering() {
         });
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (document.startViewTransition) {
-        document.startViewTransition(reorderRows);
-      } else {
-        reorderRows();
-      }
+      startViewTransition(reorderRows);
     }
 
     return <DraggableCellRenderer key={key} {...props} onRowReorder={onRowReorder} />;

website/exportUtils.tsx website/utils.tsxwebsite/exportUtils.tsx renamed to website/utils.tsx

@@ -61,3 +61,12 @@ function downloadFile(fileName: string, data: Blob) {
   downloadLink.click();
   URL.revokeObjectURL(url);
 }
+
+export function startViewTransition(fn: ViewTransitionUpdateCallback) {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (document.startViewTransition) {
+    document.startViewTransition(fn);
+  } else {
+    fn();
+  }
+}