@prairielearn/ui 1.10.0 → 2.0.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,2BAA2B,EAC3B,KAAK,oBAAoB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,EACrB,KAAK,wBAAwB,GAC9B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,uCAAuC,EACvC,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,2BAA2B,EAC3B,KAAK,oBAAoB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,EACrB,KAAK,wBAAwB,GAC9B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,uCAAuC,EACvC,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["// Augment @tanstack/react-table types\nimport './react-table.js';\n\nexport {\n  TanstackTable,\n  TanstackTableCard,\n  TanstackTableEmptyState,\n} from './components/TanstackTable.js';\nexport { ColumnManager } from './components/ColumnManager.js';\nexport {\n  TanstackTableDownloadButton,\n  type TanstackTableCsvCell,\n} from './components/TanstackTableDownloadButton.js';\nexport { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';\nexport { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';\nexport {\n  NumericInputColumnFilter,\n  parseNumericFilter,\n  numericColumnFilterFn,\n  type NumericColumnFilterValue,\n} from './components/NumericInputColumnFilter.js';\nexport { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';\nexport { useAutoSizeColumns } from './components/useAutoSizeColumns.js';\nexport { OverlayTrigger, type OverlayTriggerProps } from './components/OverlayTrigger.js';\nexport { PresetFilterDropdown } from './components/PresetFilterDropdown.js';\nexport {\n  NuqsAdapter,\n  parseAsSortingState,\n  parseAsColumnVisibilityStateWithColumns,\n  parseAsColumnPinningState,\n  parseAsNumericFilter,\n} from './components/nuqs.js';\n\nexport { useModalState } from './hooks/use-modal-state.js';\n"]}

package/dist/react-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-table.d.ts","sourceRoot":"","sources":["../src/react-table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,QAAQ,uBAAuB,CAAC;IAGrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,qEAAqE;QACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,mFAAmF;QACnF,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,mFAAmF;QACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;CACF;AAGD,OAAO,EAAE,CAAC"}
+{"version":3,"file":"react-table.d.ts","sourceRoot":"","sources":["../src/react-table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,QAAQ,uBAAuB,CAAC,CAAC;IAGtC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,qEAAqE;QACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,mFAAmF;QACnF,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,mFAAmF;QACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;CACF;AAGD,OAAO,EAAE,CAAC","sourcesContent":["import type { RowData } from '@tanstack/react-table';\n\ndeclare module '@tanstack/react-table' {\n  // https://tanstack.com/table/latest/docs/api/core/column-def#meta\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /** If true, the column will wrap text instead of being truncated. */\n    wrapText?: boolean;\n    /** If set, this will be used as the label for the column in the column manager. */\n    label?: string;\n    /** If true, the column will be automatically sized based on the header content. */\n    autoSize?: boolean;\n  }\n}\n\n// eslint-disable-next-line unicorn/require-module-specifiers\nexport {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/ui",
-  "version": "1.10.0",
+  "version": "2.0.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -12,26 +12,30 @@
     "./*.css": "./dist/*.css"
   },
   "scripts": {
-    "build": "tsc && tscp",
-    "dev": "tsc --watch --preserveWatchOutput & tscp --watch",
+    "build": "tsgo && tscp",
+    "dev": "tsgo --watch --preserveWatchOutput & tscp --watch",
     "test": "vitest run --coverage"
   },
   "dependencies": {
-    "@prairielearn/browser-utils": "^2.6.0",
-    "@prairielearn/preact-cjs": "^2.0.0",
+    "@prairielearn/browser-utils": "^2.6.1",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.14",
+    "@tanstack/react-virtual": "^3.13.18",
     "@tanstack/table-core": "^8.21.3",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
     "clsx": "^2.1.1",
     "nuqs": "^2.8.6",
+    "react": "^19.2.3",
     "react-bootstrap": "3.0.0-beta.5",
-    "use-debounce": "^10.0.6"
+    "react-dom": "^19.2.3",
+    "use-debounce": "^10.1.0"
   },
   "devDependencies": {
     "@prairielearn/tsconfig": "^0.0.0",
-    "@types/node": "^22.19.3",
+    "@types/node": "^22.19.5",
+    "@typescript/native-preview": "^7.0.0-dev.20260106.1",
     "typescript": "^5.9.3",
     "typescript-cp": "^0.1.9",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.17"
   }
 }

package/src/components/CategoricalColumnFilter.tsx

@@ -1,37 +1,42 @@
 import type { Column } from '@tanstack/react-table';
 import clsx from 'clsx';
-import { type JSX, useMemo, useState } from 'preact/compat';
+import { type JSX, useMemo, useState } from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 
-function computeSelected<T extends readonly any[]>(
-  allStatusValues: T,
+function computeSelected<TValue extends string>(
+  allStatusValues: TValue[] | readonly TValue[],
   mode: 'include' | 'exclude',
-  selected: Set<T[number]>,
-) {
+  selected: Set<TValue>,
+): Set<TValue> {
   if (mode === 'include') {
     return selected;
   }
   return new Set(allStatusValues.filter((s) => !selected.has(s)));
 }
 
-function defaultRenderValueLabel<T>({ value }: { value: T }) {
-  return <span className="text-nowrap">{String(value)}</span>;
+function defaultRenderValueLabel({ value }: { value: string }) {
+  return <span className="text-nowrap">{value}</span>;
 }
+
 /**
  * A component that allows the user to filter a categorical column.
  * The filter mode always defaults to "include".
  *
+ * The filter options (`allColumnValues`) are strings (or string subtypes like
+ * enums). The column's `filterFn` is responsible for mapping these string
+ * values to the actual column data (e.g., mapping "Unassigned" to `null`).
+ *
  * @param params
  * @param params.column - The TanStack Table column object
- * @param params.allColumnValues - The values to filter by
+ * @param params.allColumnValues - The string values to display as filter options
  * @param params.renderValueLabel - A function that renders the label for a value
  */
-export function CategoricalColumnFilter<TData, TValue>({
+export function CategoricalColumnFilter<TData, TValue extends string = string>({
   column,
   allColumnValues,
   renderValueLabel = defaultRenderValueLabel,
 }: {
-  column: Column<TData, TValue>;
+  column: Column<TData, unknown>;
   allColumnValues: TValue[] | readonly TValue[];
   renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;
 }) {
@@ -94,7 +99,7 @@ export function CategoricalColumnFilter<TData, TValue>({
                 // Use `visibility` instead of conditional rendering to avoid layout shift.
                 invisible: selected.size === 0 && mode === 'include',
               })}
-              onClick={() => apply('include', new Set())}
+              onClick={() => apply('include', new Set<TValue>())}
             >
               Clear
             </button>
@@ -106,11 +111,11 @@ export function CategoricalColumnFilter<TData, TValue>({
               className="btn-check"
               name={`filter-${columnId}-options`}
               id={`filter-${columnId}-include`}
-              autocomplete="off"
+              autoComplete="off"
               checked={mode === 'include'}
               onChange={() => apply('include', selected)}
             />
-            <label className="btn btn-outline-primary" for={`filter-${columnId}-include`}>
+            <label className="btn btn-outline-primary" htmlFor={`filter-${columnId}-include`}>
               <span className="text-nowrap">
                 {mode === 'include' && <i className="bi bi-check-lg me-1" aria-hidden="true" />}
                 Include
@@ -122,11 +127,11 @@ export function CategoricalColumnFilter<TData, TValue>({
               className="btn-check"
               name={`filter-${columnId}-options`}
               id={`filter-${columnId}-exclude`}
-              autocomplete="off"
+              autoComplete="off"
               checked={mode === 'exclude'}
               onChange={() => apply('exclude', selected)}
             />
-            <label className="btn btn-outline-primary" for={`filter-${columnId}-exclude`}>
+            <label className="btn btn-outline-primary" htmlFor={`filter-${columnId}-exclude`}>
               <span className="text-nowrap">
                 {mode === 'exclude' && <i className="bi bi-check-lg me-1" aria-hidden="true" />}
                 Exclude
@@ -137,11 +142,13 @@ export function CategoricalColumnFilter<TData, TValue>({
 
         <div
           className="list-group list-group-flush"
-          style={{
-            // This is needed to prevent the last item's background from covering
-            // the dropdown's border radius.
-            '--bs-list-group-bg': 'transparent',
-          }}
+          style={
+            {
+              // This is needed to prevent the last item's background from covering
+              // the dropdown's border radius.
+              '--bs-list-group-bg': 'transparent',
+            } as React.CSSProperties
+          }
         >
           {allColumnValues.map((value) => {
             const isSelected = selected.has(value);
@@ -155,7 +162,7 @@ export function CategoricalColumnFilter<TData, TValue>({
                     id={`${columnId}-${value}`}
                     onChange={() => toggleSelected(value)}
                   />
-                  <label className="form-check-label fw-normal" for={`${columnId}-${value}`}>
+                  <label className="form-check-label fw-normal" htmlFor={`${columnId}-${value}`}>
                     {renderValueLabel({
                       value,
                       isSelected,

package/src/components/ColumnManager.tsx

@@ -1,6 +1,6 @@
 import { type Column, type Table } from '@tanstack/react-table';
 import clsx from 'clsx';
-import { type JSX, useEffect, useRef, useState } from 'preact/compat';
+import { type JSX, useEffect, useRef, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import Dropdown from 'react-bootstrap/Dropdown';
 
@@ -75,13 +75,21 @@ function ColumnGroupItem<RowDataModel>({
   getIsOnPinningBoundary: (columnId: string) => boolean;
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const checkboxRef = useRef<HTMLInputElement>(null);
 
   const leafColumns = column.getLeafColumns();
   const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());
   const isAllVisible = visibleLeafColumns.length === leafColumns.length;
   const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;
 
-  const handleToggleVisibility = (e: Event) => {
+  // Set indeterminate state via ref since it's a DOM property, not an HTML attribute
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = isSomeVisible;
+    }
+  }, [isSomeVisible]);
+
+  const handleToggleVisibility = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
     e.stopPropagation();
     const targetVisibility = !isAllVisible;
@@ -102,10 +110,10 @@ function ColumnGroupItem<RowDataModel>({
       <div className="px-2 py-1 d-flex align-items-center justify-content-between">
         <div className="d-flex align-items-center flex-grow-1">
           <input
+            ref={checkboxRef}
             type="checkbox"
             className="form-check-input flex-shrink-0"
             checked={isAllVisible}
-            indeterminate={isSomeVisible}
             aria-label={`Toggle visibility for group '${header}'`}
             onChange={handleToggleVisibility}
           />
@@ -297,9 +305,10 @@ export function ColumnManager<RowDataModel>({
       autoClose="outside"
       show={dropdownOpen}
       onToggle={(isOpen, _meta) => setDropdownOpen(isOpen)}
-      onFocusOut={(e: FocusEvent) => {
+      onBlur={(e: React.FocusEvent) => {
         // Since we aren't using role="menu", we need to manually close the dropdown when focus leaves.
-        if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        // `relatedTarget` is the element gaining focus.
+        if (menuRef.current && !menuRef.current.contains(e.relatedTarget)) {
           setDropdownOpen(false);
         }
       }}

package/src/components/MultiSelectColumnFilter.tsx

@@ -1,28 +1,31 @@
 import type { Column } from '@tanstack/table-core';
 import clsx from 'clsx';
-import { type JSX, useMemo } from 'preact/compat';
+import { type JSX, useMemo } from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 
-function defaultRenderValueLabel<T>({ value }: { value: T }) {
-  return <span>{String(value)}</span>;
+function defaultRenderValueLabel({ value }: { value: string }) {
+  return <span>{value}</span>;
 }
 
 /**
  * A component that allows the user to filter a column containing arrays of values.
  * Uses AND logic: rows must contain ALL selected values to match.
  *
+ * The filter options (`allColumnValues`) are strings (or string subtypes like
+ * enums). The column's `filterFn` is responsible for mapping these string
+ * values to the actual column data.
+ *
  * @param params
  * @param params.column - The TanStack Table column object
- * @param params.allColumnValues - All possible values that can appear in the column filter
+ * @param params.allColumnValues - The string values to display as filter options
  * @param params.renderValueLabel - A function that renders the label for a value
  */
-export function MultiSelectColumnFilter<TData, TValue>({
+export function MultiSelectColumnFilter<TData, TValue extends string = string>({
   column,
   allColumnValues,
   renderValueLabel = defaultRenderValueLabel,
 }: {
-  column: Column<TData, TValue>;
-  /** In some cases, the filter values are not the same as the column values, but `TValue` is a good estimation. */
+  column: Column<TData, unknown>;
   allColumnValues: TValue[];
   renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;
 }) {
@@ -81,11 +84,13 @@ export function MultiSelectColumnFilter<TData, TValue>({
 
         <div
           className="list-group list-group-flush"
-          style={{
-            // This is needed to prevent the last item's background from covering
-            // the dropdown's border radius.
-            '--bs-list-group-bg': 'transparent',
-          }}
+          style={
+            {
+              // This is needed to prevent the last item's background from covering
+              // the dropdown's border radius.
+              '--bs-list-group-bg': 'transparent',
+            } as React.CSSProperties
+          }
         >
           {allColumnValues.map((value) => {
             const isSelected = selected.has(value);
@@ -99,7 +104,7 @@ export function MultiSelectColumnFilter<TData, TValue>({
                     id={`${columnId}-${value}`}
                     onChange={() => toggleSelected(value)}
                   />
-                  <label className="form-check-label fw-normal" for={`${columnId}-${value}`}>
+                  <label className="form-check-label fw-normal" htmlFor={`${columnId}-${value}`}>
                     {renderValueLabel({
                       value,
                       isSelected,

package/src/components/NumericInputColumnFilter.tsx

@@ -123,7 +123,7 @@ export function NumericInputColumnFilter<TData, TValue>({
                 );
               }}
             />
-            <label className="form-check-label" for={`${columnId}-empty-filter`}>
+            <label className="form-check-label" htmlFor={`${columnId}-empty-filter`}>
               Empty values
             </label>
           </div>

package/src/components/OverlayTrigger.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'preact/compat';
+import { useEffect, useRef } from 'react';
 import {
   // eslint-disable-next-line no-restricted-imports
   OverlayTrigger as BootstrapOverlayTrigger,

package/src/components/PresetFilterDropdown.tsx

@@ -1,5 +1,5 @@
 import type { ColumnFiltersState, Table } from '@tanstack/react-table';
-import { useMemo } from 'preact/compat';
+import { useMemo } from 'react';
 import { ButtonGroup, Dropdown } from 'react-bootstrap';
 
 /**

package/src/components/TanstackTable.tsx

@@ -2,14 +2,19 @@ import { flexRender } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import type { Cell, Header, Row, Table } from '@tanstack/table-core';
 import clsx from 'clsx';
-import type { ComponentChildren } from 'preact';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import type { JSX } from 'preact/jsx-runtime';
+import {
+  type ComponentProps,
+  type JSX,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { useDebouncedCallback } from 'use-debounce';
 
-import type { ComponentProps } from '@prairielearn/preact-cjs';
 import { run } from '@prairielearn/run';
 
 import { ColumnManager } from './ColumnManager.js';
@@ -35,7 +40,7 @@ function TableCell<RowDataModel>({
   canSort: boolean;
   canFilter: boolean;
   wrapText: boolean;
-  handleGridKeyDown: (e: KeyboardEvent, rowIdx: number, colIdx: number) => void;
+  handleGridKeyDown: (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => void;
 }) {
   return (
     <td
@@ -91,7 +96,7 @@ interface TanstackTableProps<RowDataModel> {
   rowHeight?: number;
   noResultsState?: JSX.Element;
   emptyState?: JSX.Element;
-  scrollRef?: React.RefObject<HTMLDivElement> | null;
+  scrollRef?: React.RefObject<HTMLDivElement | null> | null;
 }
 
 const DEFAULT_FILTER_MAP = {};
@@ -174,7 +179,7 @@ export function TanstackTable<RowDataModel>({
     ...row.getCenterVisibleCells(),
   ];
 
-  const handleGridKeyDown = (e: KeyboardEvent, rowIdx: number, colIdx: number) => {
+  const handleGridKeyDown = (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => {
     const rowLength = getVisibleCells(rows[rowIdx]).length;
     const adjacentCells: Record<KeyboardEvent['key'], { row: number; col: number }> = {
       ArrowDown: {
@@ -630,7 +635,7 @@ export function TanstackTableEmptyState({
   children,
 }: {
   iconName: `bi-${string}`;
-  children: ComponentChildren;
+  children: ReactNode;
 }) {
   return (
     <div className="d-flex flex-column justify-content-center align-items-center text-muted">

package/src/components/TanstackTableHeaderCell.tsx

@@ -1,7 +1,7 @@
 import { flexRender } from '@tanstack/react-table';
 import type { Header, SortDirection, Table } from '@tanstack/table-core';
 import clsx from 'clsx';
-import type { JSX } from 'preact/jsx-runtime';
+import type { CSSProperties, JSX } from 'react';
 
 function SortIcon({ sortMethod }: { sortMethod: false | SortDirection }) {
   if (sortMethod === 'asc') {
@@ -24,7 +24,7 @@ function ResizeHandle<RowDataModel>({
 }) {
   const minSize = header.column.columnDef.minSize ?? 0;
   const maxSize = header.column.columnDef.maxSize ?? 0;
-  const handleKeyDown = (e: KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
       e.preventDefault();
       const currentSize = header.getSize();
@@ -121,7 +121,7 @@ export function TanstackTableHeaderCell<RowDataModel>({
 
   // In measurement mode, we don't want to set the size of the header from tanstack.
   const headerSize = measurementMode ? undefined : header.getSize();
-  const style: JSX.CSSProperties = {
+  const style: CSSProperties = {
     display: 'flex',
     width: headerSize,
     minWidth: 0,

package/src/components/nuqs.tsx

@@ -5,14 +5,14 @@ import {
   unstable_createAdapterProvider,
 } from 'nuqs/adapters/custom';
 import { NuqsAdapter as NuqsReactAdapter } from 'nuqs/adapters/react';
-import React from 'preact/compat';
+import { createContext, use } from 'react';
 
 import type { NumericColumnFilterValue } from './NumericInputColumnFilter.js';
 
-const AdapterContext = React.createContext('');
+const AdapterContext = createContext('');
 
 function useExpressAdapterContext(): unstable_AdapterInterface {
-  const context = React.useContext(AdapterContext);
+  const context = use(AdapterContext);
 
   return {
     searchParams: new URLSearchParams(context),
@@ -34,9 +34,9 @@ export function NuqsAdapter({ children, search }: { children: React.ReactNode; s
   if (typeof location === 'undefined') {
     // We're rendering on the server.
     return (
-      <AdapterContext.Provider value={search}>
+      <AdapterContext value={search}>
         <NuqsExpressAdapter>{children}</NuqsExpressAdapter>
-      </AdapterContext.Provider>
+      </AdapterContext>
     );
   }
 

package/src/components/useAutoSizeColumns.tsx

@@ -1,8 +1,6 @@
 import type { ColumnSizingState, Header, Table } from '@tanstack/react-table';
-import type { RefObject } from 'preact';
-import { render } from 'preact/compat';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import type { JSX } from 'preact/jsx-runtime';
+import { type JSX, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import { type Root, createRoot } from 'react-dom/client';
 
 import { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';
 
@@ -64,10 +62,11 @@ function HiddenMeasurementHeader<TData>({
  */
 export function useAutoSizeColumns<TData>(
   table: Table<TData>,
-  tableRef: RefObject<HTMLDivElement>,
+  tableRef: RefObject<HTMLDivElement | null>,
   filters?: Record<string, (props: { header: Header<TData, unknown> }) => JSX.Element>,
 ): boolean {
   const measurementContainerRef = useRef<HTMLDivElement | null>(null);
+  const measurementRootRef = useRef<Root | null>(null);
 
   // Compute columns that need measuring
   const columnsToMeasure = useMemo(() => {
@@ -96,16 +95,16 @@ export function useAutoSizeColumns<TData>(
         container = document.createElement('div');
         document.body.append(container);
         measurementContainerRef.current = container;
+        measurementRootRef.current = createRoot(container);
       }
 
       // Render headers into hidden container
-      render(
+      measurementRootRef.current?.render(
         <HiddenMeasurementHeader
           table={table}
           columnsToMeasure={columnsToMeasure}
           filters={filters ?? {}}
         />,
-        container,
       );
 
       // Force layout calculation
@@ -134,8 +133,9 @@ export function useAutoSizeColumns<TData>(
         }
       }
 
-      // Clear container content by unmounting Preact components
-      render(null, container);
+      // Clear container content by unmounting React components
+      measurementRootRef.current?.unmount();
+      measurementRootRef.current = null;
 
       // Apply measurements
       if (Object.keys(newSizing).length > 0) {
@@ -153,9 +153,10 @@ export function useAutoSizeColumns<TData>(
   // Clean up measurement container on unmount
   useEffect(() => {
     return () => {
+      measurementRootRef.current?.unmount();
+      measurementRootRef.current = null;
       const container = measurementContainerRef.current;
       if (container) {
-        render(null, container);
         container.remove();
         measurementContainerRef.current = null;
       }

package/src/components/useShiftClickCheckbox.tsx

@@ -1,5 +1,5 @@
 import type { Row, Table } from '@tanstack/react-table';
-import { type MouseEvent, useCallback, useState } from 'preact/compat';
+import { type MouseEvent, useCallback, useState } from 'react';
 
 /**
  * A hook that provides shift-click range selection functionality for table checkboxes.

package/src/hooks/use-modal-state.ts

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 
 /**
  * A hook to manage the state of a modal dialog that's rendered with a certain set of data.

package/tsconfig.json

@@ -5,6 +5,6 @@
     "rootDir": "./src",
     "types": ["node"],
     "jsx": "react-jsx",
-    "jsxImportSource": "@prairielearn/preact-cjs"
+    "lib": ["ES2022", "DOM", "DOM.Iterable"]
   }
 }