@prairielearn/ui 3.1.3 → 3.1.5

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 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import Dropdown from 'react-bootstrap/Dropdown';
 
@@ -195,7 +195,7 @@ function ColumnItem<RowDataModel>({
 
 interface ColumnManagerProps<RowDataModel> {
   table: Table<RowDataModel>;
-  topContent?: JSX.Element;
+  topContent?: ReactNode;
 }
 
 /**

package/src/components/MultiSelectColumnFilter.tsx

@@ -1,6 +1,6 @@
 import type { Column } from '@tanstack/table-core';
 import clsx from 'clsx';
-import { type JSX, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 
 function defaultRenderValueLabel({ value }: { value: string }) {
@@ -27,7 +27,7 @@ export function MultiSelectColumnFilter<TData, TValue extends string = string>({
 }: {
   column: Column<TData, unknown>;
   allColumnValues: TValue[];
-  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;
+  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => ReactNode;
 }) {
   const columnId = column.id;
 

package/src/components/TanstackTable.tsx

@@ -2,15 +2,7 @@ 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 ComponentProps,
-  type JSX,
-  type ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { type ComponentProps, 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';
@@ -92,10 +84,10 @@ const DefaultEmptyState = (
 interface TanstackTableProps<RowDataModel> {
   table: Table<RowDataModel>;
   title: string;
-  filters?: Record<string, (props: { header: Header<RowDataModel, unknown> }) => JSX.Element>;
+  filters?: Record<string, (props: { header: Header<RowDataModel, unknown> }) => ReactNode>;
   rowHeight?: number;
-  noResultsState?: JSX.Element;
-  emptyState?: JSX.Element;
+  noResultsState?: ReactNode;
+  emptyState?: ReactNode;
   scrollRef?: React.RefObject<HTMLDivElement | null> | null;
 }
 
@@ -521,10 +513,10 @@ export function TanstackTableCard<RowDataModel>({
   title: string;
   singularLabel: string;
   pluralLabel: string;
-  headerButtons?: JSX.Element;
+  headerButtons?: ReactNode;
   columnManager?: {
-    buttons?: JSX.Element;
-    topContent?: JSX.Element;
+    buttons?: ReactNode;
+    topContent?: ReactNode;
   };
   globalFilter: {
     placeholder: string;

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 { CSSProperties, JSX } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 function SortIcon({ sortMethod }: { sortMethod: false | SortDirection }) {
   if (sortMethod === 'asc') {
@@ -104,7 +104,7 @@ export function TanstackTableHeaderCell<RowDataModel>({
   measurementMode = false,
 }: {
   header: Header<RowDataModel, unknown>;
-  filters: Record<string, (props: { header: Header<RowDataModel, unknown> }) => JSX.Element>;
+  filters: Record<string, (props: { header: Header<RowDataModel, unknown> }) => ReactNode>;
   table: Table<RowDataModel>;
   handleResizeEnd?: () => void;
   isPinned: 'left' | false;

package/src/components/useAutoSizeColumns.tsx

@@ -1,5 +1,5 @@
 import type { ColumnSizingState, Header, Table } from '@tanstack/react-table';
-import { type JSX, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import { type ReactNode, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { type Root, createRoot } from 'react-dom/client';
 
@@ -12,7 +12,7 @@ function HiddenMeasurementHeader<TData>({
 }: {
   table: Table<TData>;
   columnsToMeasure: { id: string }[];
-  filters?: Record<string, (props: { header: Header<TData, unknown> }) => JSX.Element>;
+  filters?: Record<string, (props: { header: Header<TData, unknown> }) => ReactNode>;
 }) {
   const headerGroups = table.getHeaderGroups();
   const leafHeaderGroup = headerGroups[headerGroups.length - 1];
@@ -64,7 +64,7 @@ function HiddenMeasurementHeader<TData>({
 export function useAutoSizeColumns<TData>(
   table: Table<TData>,
   tableRef: RefObject<HTMLDivElement | null>,
-  filters?: Record<string, (props: { header: Header<TData, unknown> }) => JSX.Element>,
+  filters?: Record<string, (props: { header: Header<TData, unknown> }) => ReactNode>,
 ): boolean {
   const measurementContainerRef = useRef<HTMLDivElement | null>(null);
   const measurementRootRef = useRef<Root | null>(null);