@prairielearn/ui 3.1.4 → 3.2.0

package/src/components/FilterDropdown.tsx

@@ -0,0 +1,163 @@
+import clsx from 'clsx';
+import { type ReactNode, useMemo } from 'react';
+import {
+  Button,
+  DialogTrigger,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  type Selection,
+  Separator,
+} from 'react-aria-components';
+
+// This interface isn't very generic.
+// TODO: When this component is more widely used, improve this.
+export interface FilterItem {
+  id: string;
+  name: string;
+  color?: string;
+}
+
+export interface FilterDropdownProps {
+  label: string;
+  items: FilterItem[];
+  selectedIds: Set<string>;
+  onChange: (selectedIds: Set<string>) => void;
+  renderItem?: (item: FilterItem, isSelected: boolean) => ReactNode;
+  disabled?: boolean;
+  'aria-label'?: string;
+  /** Maximum height of the dropdown in pixels. */
+  maxHeight?: number;
+  /** Item IDs that should appear at the top of the list in their original order */
+  pinnedIds?: Set<string>;
+}
+
+function compareItemsByName(a: FilterItem, b: FilterItem) {
+  return a.name.localeCompare(b.name, undefined, { numeric: true });
+}
+
+function defaultRenderItem(item: FilterItem, _isSelected: boolean) {
+  return item.color ? (
+    <span className={`badge color-${item.color}`}>{item.name}</span>
+  ) : (
+    <span>{item.name}</span>
+  );
+}
+
+/**
+ * A multi-select filter dropdown component using react-aria-components.
+ * Displays a button trigger with selection count badge and a dropdown with checkboxes.
+ */
+export function FilterDropdown({
+  label,
+  items,
+  selectedIds,
+  onChange,
+  renderItem = defaultRenderItem,
+  disabled = false,
+  'aria-label': ariaLabel,
+  maxHeight,
+  pinnedIds,
+}: FilterDropdownProps) {
+  const selectedCount = selectedIds.size;
+
+  // Sort items alphabetically for display, with pinned items first
+  const sortedItems = useMemo(() => {
+    if (!pinnedIds || pinnedIds.size === 0) {
+      return [...items].sort(compareItemsByName);
+    }
+    const pinned = items.filter((item) => pinnedIds.has(item.id));
+    const rest = items.filter((item) => !pinnedIds.has(item.id)).sort(compareItemsByName);
+    return [...pinned, ...rest];
+  }, [items, pinnedIds]);
+
+  const handleSelectionChange = (selection: Selection) => {
+    if (selection === 'all') {
+      onChange(new Set(items.map((item) => item.id)));
+    } else {
+      onChange(new Set(selection as Set<string>));
+    }
+  };
+
+  const handleClear = () => {
+    onChange(new Set());
+  };
+
+  return (
+    <DialogTrigger>
+      <Button
+        aria-label={ariaLabel ?? `Filter by ${label}`}
+        className={clsx(
+          'btn btn-sm d-flex align-items-center gap-1',
+          selectedCount > 0 ? 'btn-outline-primary' : 'btn-outline-secondary',
+        )}
+        isDisabled={disabled}
+      >
+        {label}
+        {selectedCount > 0 && (
+          <span className="badge bg-primary rounded-pill">{selectedCount}</span>
+        )}
+      </Button>
+      <Popover
+        className="dropdown-menu show py-0 d-flex flex-column"
+        offset={4}
+        placement="bottom start"
+        maxHeight={maxHeight}
+        style={{ width: '250px' }}
+      >
+        <div className="pt-2 flex-grow-1 overflow-auto" style={{ minHeight: 0 }}>
+          <ListBox
+            aria-label={ariaLabel ?? `Filter by ${label}`}
+            className="list-unstyled m-0"
+            items={sortedItems}
+            selectedKeys={selectedIds}
+            selectionMode="multiple"
+            selectionBehavior="toggle"
+            renderEmptyState={() => (
+              <div className="dropdown-item text-muted">No items available</div>
+            )}
+            onSelectionChange={handleSelectionChange}
+          >
+            {(item) => (
+              <ListBoxItem
+                id={item.id}
+                className={({ isFocused }) =>
+                  clsx('dropdown-item d-flex align-items-center gap-2', isFocused && 'active')
+                }
+                style={{ cursor: 'pointer' }}
+                textValue={item.name}
+              >
+                {({ isSelected }) => (
+                  <>
+                    <input
+                      checked={isSelected}
+                      className="form-check-input m-0 flex-shrink-0"
+                      tabIndex={-1}
+                      type="checkbox"
+                      readOnly
+                    />
+                    {renderItem(item, isSelected)}
+                  </>
+                )}
+              </ListBoxItem>
+            )}
+          </ListBox>
+        </div>
+        {selectedCount > 0 && (
+          <>
+            <Separator className="dropdown-divider mb-0" />
+            <div className="px-3 py-1">
+              <button
+                type="button"
+                className="btn btn-sm btn-link p-0 text-decoration-none"
+                onClick={handleClear}
+              >
+                Clear selection
+              </button>
+            </div>
+          </>
+        )}
+      </Popover>
+    </DialogTrigger>
+  );
+}

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;
 }
 

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);

package/src/index.ts

@@ -39,3 +39,8 @@ export {
   type ComboBoxProps,
   type TagPickerProps,
 } from './components/ComboBox.js';
+export {
+  FilterDropdown,
+  type FilterItem,
+  type FilterDropdownProps,
+} from './components/FilterDropdown.js';