@prairielearn/ui 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @prairielearn/ui
 
+## 1.5.0
+
+### Minor Changes
+
+- bd5f2a1: Add a generic PresetFilterDropdown for customizable multi-column filters
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/components/CategoricalColumnFilter.d.ts

@@ -11,7 +11,7 @@ import { type JSX } from 'preact/compat';
  */
 export declare function CategoricalColumnFilter<TData, TValue>({ column, allColumnValues, renderValueLabel, }: {
     column: Column<TData, TValue>;
-    allColumnValues: TValue[];
+    allColumnValues: TValue[] | readonly TValue[];
     renderValueLabel?: (props: {
         value: TValue;
         isSelected: boolean;

package/dist/components/CategoricalColumnFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoricalColumnFilter.d.ts","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,KAAK,GAAG,EAAqB,MAAM,eAAe,CAAC;AAiB5D;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,EACrD,MAAM,EACN,eAAe,EACf,gBAA0C,GAC3C,EAAE;IACD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACnF,eAoIA"}
+{"version":3,"file":"CategoricalColumnFilter.d.ts","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,KAAK,GAAG,EAAqB,MAAM,eAAe,CAAC;AAiB5D;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,EACrD,MAAM,EACN,eAAe,EACf,gBAA0C,GAC3C,EAAE;IACD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,GAAG,SAAS,MAAM,EAAE,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACnF,eAoIA"}

package/dist/components/CategoricalColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoricalColumnFilter.js","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useMemo, useState } from 'preact/compat';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nfunction computeSelected<T extends readonly any[]>(\n  allStatusValues: T,\n  mode: 'include' | 'exclude',\n  selected: Set<T[number]>,\n) {\n  if (mode === 'include') {\n    return selected;\n  }\n  return new Set(allStatusValues.filter((s) => !selected.has(s)));\n}\n\nfunction defaultRenderValueLabel<T>({ value }: { value: T }) {\n  return <span class=\"text-nowrap\">{String(value)}</span>;\n}\n/**\n * A component that allows the user to filter a categorical column.\n * The filter mode always defaults to \"include\".\n *\n * @param params\n * @param params.column - The TanStack Table column object\n * @param params.allColumnValues - The values to filter by\n * @param params.renderValueLabel - A function that renders the label for a value\n */\nexport function CategoricalColumnFilter<TData, TValue>({\n  column,\n  allColumnValues,\n  renderValueLabel = defaultRenderValueLabel,\n}: {\n  column: Column<TData, TValue>;\n  allColumnValues: TValue[];\n  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;\n}) {\n  const [mode, setMode] = useState<'include' | 'exclude'>('include');\n\n  const columnId = column.id;\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;\n\n  const selected = useMemo(() => {\n    return computeSelected(allColumnValues, mode, new Set(columnValuesFilter));\n  }, [mode, allColumnValues, columnValuesFilter]);\n\n  const apply = (newMode: 'include' | 'exclude', newSelected: Set<TValue>) => {\n    const selected = computeSelected(allColumnValues, newMode, newSelected);\n    setMode(newMode);\n    const newValue = Array.from(selected);\n    column.setFilterValue(newValue);\n  };\n\n  const toggleSelected = (value: TValue) => {\n    const set = new Set(selected);\n    if (set.has(value)) {\n      set.delete(value);\n    } else {\n      set.add(value);\n    }\n    apply(mode, set);\n  };\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        class=\"text-muted p-0\"\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          class={clsx('bi', selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu class=\"p-0\">\n        <div class=\"p-3 pb-0\">\n          <div class=\"d-flex align-items-center justify-content-between mb-2\">\n            <div class=\"fw-semibold text-nowrap\">{label}</div>\n            <button\n              type=\"button\"\n              class={clsx('btn btn-link btn-sm text-decoration-none', {\n                // Hide the clear button if no filters are applied.\n                // Use `visibility` instead of conditional rendering to avoid layout shift.\n                invisible: selected.size === 0 && mode === 'include',\n              })}\n              onClick={() => apply('include', new Set())}\n            >\n              Clear\n            </button>\n          </div>\n\n          <div class=\"btn-group btn-group-sm w-100 mb-2\">\n            <input\n              type=\"radio\"\n              class=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-include`}\n              autocomplete=\"off\"\n              checked={mode === 'include'}\n              onChange={() => apply('include', selected)}\n            />\n            <label class=\"btn btn-outline-primary\" for={`filter-${columnId}-include`}>\n              <span class=\"text-nowrap\">\n                {mode === 'include' && <i class=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Include\n              </span>\n            </label>\n\n            <input\n              type=\"radio\"\n              class=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-exclude`}\n              autocomplete=\"off\"\n              checked={mode === 'exclude'}\n              onChange={() => apply('exclude', selected)}\n            />\n            <label class=\"btn btn-outline-primary\" for={`filter-${columnId}-exclude`}>\n              <span class=\"text-nowrap\">\n                {mode === 'exclude' && <i class=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Exclude\n              </span>\n            </label>\n          </div>\n        </div>\n\n        <div\n          class=\"list-group list-group-flush\"\n          style={{\n            // This is needed to prevent the last item's background from covering\n            // the dropdown's border radius.\n            '--bs-list-group-bg': 'transparent',\n          }}\n        >\n          {allColumnValues.map((value) => {\n            const isSelected = selected.has(value);\n            return (\n              <div key={value} class=\"list-group-item d-flex align-items-center gap-3\">\n                <div class=\"form-check\">\n                  <input\n                    class=\"form-check-input\"\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    id={`${columnId}-${value}`}\n                    onChange={() => toggleSelected(value)}\n                  />\n                  <label class=\"form-check-label fw-normal\" for={`${columnId}-${value}`}>\n                    {renderValueLabel({\n                      value,\n                      isSelected,\n                    })}\n                  </label>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}
+{"version":3,"file":"CategoricalColumnFilter.js","sourceRoot":"","sources":["../../src/components/CategoricalColumnFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Column } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useMemo, useState } from 'preact/compat';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nfunction computeSelected<T extends readonly any[]>(\n  allStatusValues: T,\n  mode: 'include' | 'exclude',\n  selected: Set<T[number]>,\n) {\n  if (mode === 'include') {\n    return selected;\n  }\n  return new Set(allStatusValues.filter((s) => !selected.has(s)));\n}\n\nfunction defaultRenderValueLabel<T>({ value }: { value: T }) {\n  return <span class=\"text-nowrap\">{String(value)}</span>;\n}\n/**\n * A component that allows the user to filter a categorical column.\n * The filter mode always defaults to \"include\".\n *\n * @param params\n * @param params.column - The TanStack Table column object\n * @param params.allColumnValues - The values to filter by\n * @param params.renderValueLabel - A function that renders the label for a value\n */\nexport function CategoricalColumnFilter<TData, TValue>({\n  column,\n  allColumnValues,\n  renderValueLabel = defaultRenderValueLabel,\n}: {\n  column: Column<TData, TValue>;\n  allColumnValues: TValue[] | readonly TValue[];\n  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;\n}) {\n  const [mode, setMode] = useState<'include' | 'exclude'>('include');\n\n  const columnId = column.id;\n\n  const label =\n    column.columnDef.meta?.label ??\n    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;\n\n  const selected = useMemo(() => {\n    return computeSelected(allColumnValues, mode, new Set(columnValuesFilter));\n  }, [mode, allColumnValues, columnValuesFilter]);\n\n  const apply = (newMode: 'include' | 'exclude', newSelected: Set<TValue>) => {\n    const selected = computeSelected(allColumnValues, newMode, newSelected);\n    setMode(newMode);\n    const newValue = Array.from(selected);\n    column.setFilterValue(newValue);\n  };\n\n  const toggleSelected = (value: TValue) => {\n    const set = new Set(selected);\n    if (set.has(value)) {\n      set.delete(value);\n    } else {\n      set.add(value);\n    }\n    apply(mode, set);\n  };\n\n  return (\n    <Dropdown align=\"end\">\n      <Dropdown.Toggle\n        variant=\"link\"\n        class=\"text-muted p-0\"\n        id={`filter-${columnId}`}\n        aria-label={`Filter ${label.toLowerCase()}`}\n        title={`Filter ${label.toLowerCase()}`}\n      >\n        <i\n          class={clsx('bi', selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}\n          aria-hidden=\"true\"\n        />\n      </Dropdown.Toggle>\n      <Dropdown.Menu class=\"p-0\">\n        <div class=\"p-3 pb-0\">\n          <div class=\"d-flex align-items-center justify-content-between mb-2\">\n            <div class=\"fw-semibold text-nowrap\">{label}</div>\n            <button\n              type=\"button\"\n              class={clsx('btn btn-link btn-sm text-decoration-none', {\n                // Hide the clear button if no filters are applied.\n                // Use `visibility` instead of conditional rendering to avoid layout shift.\n                invisible: selected.size === 0 && mode === 'include',\n              })}\n              onClick={() => apply('include', new Set())}\n            >\n              Clear\n            </button>\n          </div>\n\n          <div class=\"btn-group btn-group-sm w-100 mb-2\">\n            <input\n              type=\"radio\"\n              class=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-include`}\n              autocomplete=\"off\"\n              checked={mode === 'include'}\n              onChange={() => apply('include', selected)}\n            />\n            <label class=\"btn btn-outline-primary\" for={`filter-${columnId}-include`}>\n              <span class=\"text-nowrap\">\n                {mode === 'include' && <i class=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Include\n              </span>\n            </label>\n\n            <input\n              type=\"radio\"\n              class=\"btn-check\"\n              name={`filter-${columnId}-options`}\n              id={`filter-${columnId}-exclude`}\n              autocomplete=\"off\"\n              checked={mode === 'exclude'}\n              onChange={() => apply('exclude', selected)}\n            />\n            <label class=\"btn btn-outline-primary\" for={`filter-${columnId}-exclude`}>\n              <span class=\"text-nowrap\">\n                {mode === 'exclude' && <i class=\"bi bi-check-lg me-1\" aria-hidden=\"true\" />}\n                Exclude\n              </span>\n            </label>\n          </div>\n        </div>\n\n        <div\n          class=\"list-group list-group-flush\"\n          style={{\n            // This is needed to prevent the last item's background from covering\n            // the dropdown's border radius.\n            '--bs-list-group-bg': 'transparent',\n          }}\n        >\n          {allColumnValues.map((value) => {\n            const isSelected = selected.has(value);\n            return (\n              <div key={value} class=\"list-group-item d-flex align-items-center gap-3\">\n                <div class=\"form-check\">\n                  <input\n                    class=\"form-check-input\"\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    id={`${columnId}-${value}`}\n                    onChange={() => toggleSelected(value)}\n                  />\n                  <label class=\"form-check-label fw-normal\" for={`${columnId}-${value}`}>\n                    {renderValueLabel({\n                      value,\n                      isSelected,\n                    })}\n                  </label>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}

package/dist/components/PresetFilterDropdown.d.ts

@@ -0,0 +1,19 @@
+import type { ColumnFiltersState, Table } from '@tanstack/react-table';
+/**
+ * A dropdown component that allows users to select from preset filter configurations.
+ * The selected state is derived from the table's current column filters.
+ * If no preset matches, a "Custom" option is shown as selected.
+ *
+ * Currently, this component expects that the filters states are arrays.
+ */
+export declare function PresetFilterDropdown<OptionName extends string, TData>({ table, options, label, onSelect, }: {
+    /** The TanStack Table instance */
+    table: Table<TData>;
+    /** Mapping of option names to their filter configurations */
+    options: Record<OptionName, ColumnFiltersState>;
+    /** Label prefix for the dropdown button (e.g., "Filter") */
+    label?: string;
+    /** Callback when an option is selected, useful for side effects like column visibility */
+    onSelect?: (optionName: OptionName) => void;
+}): import("preact/compat").JSX.Element;
+//# sourceMappingURL=PresetFilterDropdown.d.ts.map

package/dist/components/PresetFilterDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetFilterDropdown.d.ts","sourceRoot":"","sources":["../../src/components/PresetFilterDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAyDvE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,SAAS,MAAM,EAAE,KAAK,EAAE,EACrE,KAAK,EACL,OAAO,EACP,KAAgB,EAChB,QAAQ,GACT,EAAE;IACD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAChD,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CAC7C,uCA4EA"}

package/dist/components/PresetFilterDropdown.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@prairielearn/preact-cjs/jsx-runtime";
+import { useMemo } from 'preact/compat';
+import { ButtonGroup, Dropdown } from 'react-bootstrap';
+/**
+ * Compares two filter values for deep equality using JSON serialization.
+ */
+function filtersEqual(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+/**
+ * Extracts all unique column IDs referenced across all preset options.
+ */
+function getRelevantColumnIds(options) {
+    const columnIds = new Set();
+    for (const filters of Object.values(options)) {
+        for (const filter of filters) {
+            columnIds.add(filter.id);
+        }
+    }
+    return columnIds;
+}
+/**
+ * Gets the current filter values for the relevant columns from the table.
+ */
+function getRelevantFilters(table, relevantColumnIds) {
+    const allFilters = table.getState().columnFilters;
+    return allFilters.filter((f) => relevantColumnIds.has(f.id));
+}
+/**
+ * Checks if the current filters match a preset's filters.
+ * Both must have the same column IDs with equal values.
+ */
+function filtersMatchPreset(current, preset) {
+    // If lengths differ, they don't match
+    if (current.length !== preset.length)
+        return false;
+    // For empty presets, current must also be empty
+    if (preset.length === 0)
+        return current.length === 0;
+    // Check that every preset filter exists in current with the same value
+    for (const presetFilter of preset) {
+        const currentFilter = current.find((f) => f.id === presetFilter.id);
+        if (!currentFilter || !filtersEqual(currentFilter.value, presetFilter.value)) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * A dropdown component that allows users to select from preset filter configurations.
+ * The selected state is derived from the table's current column filters.
+ * If no preset matches, a "Custom" option is shown as selected.
+ *
+ * Currently, this component expects that the filters states are arrays.
+ */
+export function PresetFilterDropdown({ table, options, label = 'Filter', onSelect, }) {
+    const relevantColumnIds = getRelevantColumnIds(options);
+    const currentRelevantFilters = useMemo(() => getRelevantFilters(table, relevantColumnIds), [table, relevantColumnIds]);
+    // Find which option matches the current filters
+    const selectedOption = useMemo(() => {
+        for (const [optionName, presetFilters] of Object.entries(options)) {
+            if (filtersMatchPreset(currentRelevantFilters, presetFilters)) {
+                return optionName;
+            }
+        }
+        return null; // No preset matches - custom filter state
+    }, [options, currentRelevantFilters]);
+    const handleOptionClick = (optionName) => {
+        const presetFilters = options[optionName];
+        // Get current filters, removing any that are in our relevant columns
+        const currentFilters = table.getState().columnFilters;
+        const preservedFilters = currentFilters.filter((f) => !relevantColumnIds.has(f.id));
+        // For columns not in the preset, explicitly set empty filter to clear them
+        // This ensures the table's onColumnFiltersChange handler can sync the cleared state
+        const clearedFilters = Array.from(relevantColumnIds)
+            .filter((colId) => !presetFilters.some((f) => f.id === colId))
+            .map((colId) => ({
+            id: colId,
+            // TODO: This expects that we are only clearing filters whose state is an array.
+            value: [],
+        }));
+        // Combine preserved filters with the new preset filters and cleared filters
+        const newFilters = [...preservedFilters, ...presetFilters, ...clearedFilters];
+        table.setColumnFilters(newFilters);
+        onSelect?.(optionName);
+    };
+    const displayLabel = selectedOption ?? 'Custom';
+    return (_jsxs(Dropdown, { as: ButtonGroup, children: [_jsxs(Dropdown.Toggle, { variant: "tanstack-table", children: [_jsx("i", { class: "bi bi-funnel me-2", "aria-hidden": "true" }), label, ": ", displayLabel] }), _jsxs(Dropdown.Menu, { children: [Object.keys(options).map((optionName) => {
+                        const isSelected = selectedOption === optionName;
+                        return (_jsxs(Dropdown.Item, { as: "button", type: "button", active: isSelected, onClick: () => handleOptionClick(optionName), children: [_jsx("i", { class: `bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2` }), optionName] }, optionName));
+                    }), selectedOption === null && (_jsxs(Dropdown.Item, { as: "button", type: "button", active: true, disabled: true, children: [_jsx("i", { class: "bi bi-check-circle-fill me-2" }), "Custom"] }))] })] }));
+}
+//# sourceMappingURL=PresetFilterDropdown.js.map

package/dist/components/PresetFilterDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetFilterDropdown.js","sourceRoot":"","sources":["../../src/components/PresetFilterDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { useMemo } from 'preact/compat';\nimport { ButtonGroup, Dropdown } from 'react-bootstrap';\n\n/**\n * Compares two filter values for deep equality using JSON serialization.\n */\nfunction filtersEqual(a: unknown, b: unknown): boolean {\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\n/**\n * Extracts all unique column IDs referenced across all preset options.\n */\nfunction getRelevantColumnIds(options: Record<string, ColumnFiltersState>): Set<string> {\n  const columnIds = new Set<string>();\n  for (const filters of Object.values(options)) {\n    for (const filter of filters) {\n      columnIds.add(filter.id);\n    }\n  }\n  return columnIds;\n}\n\n/**\n * Gets the current filter values for the relevant columns from the table.\n */\nfunction getRelevantFilters<TData>(\n  table: Table<TData>,\n  relevantColumnIds: Set<string>,\n): ColumnFiltersState {\n  const allFilters = table.getState().columnFilters;\n  return allFilters.filter((f) => relevantColumnIds.has(f.id));\n}\n\n/**\n * Checks if the current filters match a preset's filters.\n * Both must have the same column IDs with equal values.\n */\nfunction filtersMatchPreset(current: ColumnFiltersState, preset: ColumnFiltersState): boolean {\n  // If lengths differ, they don't match\n  if (current.length !== preset.length) return false;\n\n  // For empty presets, current must also be empty\n  if (preset.length === 0) return current.length === 0;\n\n  // Check that every preset filter exists in current with the same value\n  for (const presetFilter of preset) {\n    const currentFilter = current.find((f) => f.id === presetFilter.id);\n    if (!currentFilter || !filtersEqual(currentFilter.value, presetFilter.value)) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * A dropdown component that allows users to select from preset filter configurations.\n * The selected state is derived from the table's current column filters.\n * If no preset matches, a \"Custom\" option is shown as selected.\n *\n * Currently, this component expects that the filters states are arrays.\n */\nexport function PresetFilterDropdown<OptionName extends string, TData>({\n  table,\n  options,\n  label = 'Filter',\n  onSelect,\n}: {\n  /** The TanStack Table instance */\n  table: Table<TData>;\n  /** Mapping of option names to their filter configurations */\n  options: Record<OptionName, ColumnFiltersState>;\n  /** Label prefix for the dropdown button (e.g., \"Filter\") */\n  label?: string;\n  /** Callback when an option is selected, useful for side effects like column visibility */\n  onSelect?: (optionName: OptionName) => void;\n}) {\n  const relevantColumnIds = getRelevantColumnIds(options);\n\n  const currentRelevantFilters = useMemo(\n    () => getRelevantFilters(table, relevantColumnIds),\n    [table, relevantColumnIds],\n  );\n\n  // Find which option matches the current filters\n  const selectedOption = useMemo<OptionName | null>(() => {\n    for (const [optionName, presetFilters] of Object.entries(options)) {\n      if (filtersMatchPreset(currentRelevantFilters, presetFilters as ColumnFiltersState)) {\n        return optionName as OptionName;\n      }\n    }\n    return null; // No preset matches - custom filter state\n  }, [options, currentRelevantFilters]);\n\n  const handleOptionClick = (optionName: OptionName) => {\n    const presetFilters = options[optionName];\n\n    // Get current filters, removing any that are in our relevant columns\n    const currentFilters = table.getState().columnFilters;\n    const preservedFilters = currentFilters.filter((f) => !relevantColumnIds.has(f.id));\n\n    // For columns not in the preset, explicitly set empty filter to clear them\n    // This ensures the table's onColumnFiltersChange handler can sync the cleared state\n    const clearedFilters = Array.from(relevantColumnIds)\n      .filter((colId) => !presetFilters.some((f) => f.id === colId))\n      .map((colId) => ({\n        id: colId,\n        // TODO: This expects that we are only clearing filters whose state is an array.\n        value: [],\n      }));\n\n    // Combine preserved filters with the new preset filters and cleared filters\n    const newFilters = [...preservedFilters, ...presetFilters, ...clearedFilters];\n    table.setColumnFilters(newFilters);\n\n    onSelect?.(optionName);\n  };\n\n  const displayLabel = selectedOption ?? 'Custom';\n\n  return (\n    <Dropdown as={ButtonGroup}>\n      <Dropdown.Toggle variant=\"tanstack-table\">\n        <i class=\"bi bi-funnel me-2\" aria-hidden=\"true\" />\n        {label}: {displayLabel}\n      </Dropdown.Toggle>\n      <Dropdown.Menu>\n        {Object.keys(options).map((optionName) => {\n          const isSelected = selectedOption === optionName;\n          return (\n            <Dropdown.Item\n              key={optionName}\n              as=\"button\"\n              type=\"button\"\n              active={isSelected}\n              onClick={() => handleOptionClick(optionName as OptionName)}\n            >\n              <i class={`bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2`} />\n              {optionName}\n            </Dropdown.Item>\n          );\n        })}\n        {/* Show Custom option only when no preset matches */}\n        {selectedOption === null && (\n          <Dropdown.Item as=\"button\" type=\"button\" active disabled>\n            <i class=\"bi bi-check-circle-fill me-2\" />\n            Custom\n          </Dropdown.Item>\n        )}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -6,5 +6,7 @@ export { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js
 export { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';
 export { NumericInputColumnFilter, parseNumericFilter, numericColumnFilterFn, type NumericColumnFilterValue, } from './components/NumericInputColumnFilter.js';
 export { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';
+export { useAutoSizeColumns } from './components/useAutoSizeColumns.js';
 export { OverlayTrigger, type OverlayTriggerProps } from './components/OverlayTrigger.js';
+export { PresetFilterDropdown } from './components/PresetFilterDropdown.js';
 //# sourceMappingURL=index.d.ts.map

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,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,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,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,gCAAgC,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,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,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"}

package/dist/index.js

@@ -7,5 +7,7 @@ export { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js
 export { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';
 export { NumericInputColumnFilter, parseNumericFilter, numericColumnFilterFn, } from './components/NumericInputColumnFilter.js';
 export { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';
+export { useAutoSizeColumns } from './components/useAutoSizeColumns.js';
 export { OverlayTrigger } from './components/OverlayTrigger.js';
+export { PresetFilterDropdown } from './components/PresetFilterDropdown.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,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,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,GAEtB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,cAAc,EAA4B,MAAM,gCAAgC,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 { TanstackTableDownloadButton } 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 { OverlayTrigger, type OverlayTriggerProps } from './components/OverlayTrigger.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,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,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,GAEtB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,cAAc,EAA4B,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,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 { TanstackTableDownloadButton } 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';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/CategoricalColumnFilter.tsx

@@ -32,7 +32,7 @@ export function CategoricalColumnFilter<TData, TValue>({
   renderValueLabel = defaultRenderValueLabel,
 }: {
   column: Column<TData, TValue>;
-  allColumnValues: TValue[];
+  allColumnValues: TValue[] | readonly TValue[];
   renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;
 }) {
   const [mode, setMode] = useState<'include' | 'exclude'>('include');

package/src/components/PresetFilterDropdown.tsx

@@ -0,0 +1,155 @@
+import type { ColumnFiltersState, Table } from '@tanstack/react-table';
+import { useMemo } from 'preact/compat';
+import { ButtonGroup, Dropdown } from 'react-bootstrap';
+
+/**
+ * Compares two filter values for deep equality using JSON serialization.
+ */
+function filtersEqual(a: unknown, b: unknown): boolean {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+/**
+ * Extracts all unique column IDs referenced across all preset options.
+ */
+function getRelevantColumnIds(options: Record<string, ColumnFiltersState>): Set<string> {
+  const columnIds = new Set<string>();
+  for (const filters of Object.values(options)) {
+    for (const filter of filters) {
+      columnIds.add(filter.id);
+    }
+  }
+  return columnIds;
+}
+
+/**
+ * Gets the current filter values for the relevant columns from the table.
+ */
+function getRelevantFilters<TData>(
+  table: Table<TData>,
+  relevantColumnIds: Set<string>,
+): ColumnFiltersState {
+  const allFilters = table.getState().columnFilters;
+  return allFilters.filter((f) => relevantColumnIds.has(f.id));
+}
+
+/**
+ * Checks if the current filters match a preset's filters.
+ * Both must have the same column IDs with equal values.
+ */
+function filtersMatchPreset(current: ColumnFiltersState, preset: ColumnFiltersState): boolean {
+  // If lengths differ, they don't match
+  if (current.length !== preset.length) return false;
+
+  // For empty presets, current must also be empty
+  if (preset.length === 0) return current.length === 0;
+
+  // Check that every preset filter exists in current with the same value
+  for (const presetFilter of preset) {
+    const currentFilter = current.find((f) => f.id === presetFilter.id);
+    if (!currentFilter || !filtersEqual(currentFilter.value, presetFilter.value)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * A dropdown component that allows users to select from preset filter configurations.
+ * The selected state is derived from the table's current column filters.
+ * If no preset matches, a "Custom" option is shown as selected.
+ *
+ * Currently, this component expects that the filters states are arrays.
+ */
+export function PresetFilterDropdown<OptionName extends string, TData>({
+  table,
+  options,
+  label = 'Filter',
+  onSelect,
+}: {
+  /** The TanStack Table instance */
+  table: Table<TData>;
+  /** Mapping of option names to their filter configurations */
+  options: Record<OptionName, ColumnFiltersState>;
+  /** Label prefix for the dropdown button (e.g., "Filter") */
+  label?: string;
+  /** Callback when an option is selected, useful for side effects like column visibility */
+  onSelect?: (optionName: OptionName) => void;
+}) {
+  const relevantColumnIds = getRelevantColumnIds(options);
+
+  const currentRelevantFilters = useMemo(
+    () => getRelevantFilters(table, relevantColumnIds),
+    [table, relevantColumnIds],
+  );
+
+  // Find which option matches the current filters
+  const selectedOption = useMemo<OptionName | null>(() => {
+    for (const [optionName, presetFilters] of Object.entries(options)) {
+      if (filtersMatchPreset(currentRelevantFilters, presetFilters as ColumnFiltersState)) {
+        return optionName as OptionName;
+      }
+    }
+    return null; // No preset matches - custom filter state
+  }, [options, currentRelevantFilters]);
+
+  const handleOptionClick = (optionName: OptionName) => {
+    const presetFilters = options[optionName];
+
+    // Get current filters, removing any that are in our relevant columns
+    const currentFilters = table.getState().columnFilters;
+    const preservedFilters = currentFilters.filter((f) => !relevantColumnIds.has(f.id));
+
+    // For columns not in the preset, explicitly set empty filter to clear them
+    // This ensures the table's onColumnFiltersChange handler can sync the cleared state
+    const clearedFilters = Array.from(relevantColumnIds)
+      .filter((colId) => !presetFilters.some((f) => f.id === colId))
+      .map((colId) => ({
+        id: colId,
+        // TODO: This expects that we are only clearing filters whose state is an array.
+        value: [],
+      }));
+
+    // Combine preserved filters with the new preset filters and cleared filters
+    const newFilters = [...preservedFilters, ...presetFilters, ...clearedFilters];
+    table.setColumnFilters(newFilters);
+
+    onSelect?.(optionName);
+  };
+
+  const displayLabel = selectedOption ?? 'Custom';
+
+  return (
+    <Dropdown as={ButtonGroup}>
+      <Dropdown.Toggle variant="tanstack-table">
+        <i class="bi bi-funnel me-2" aria-hidden="true" />
+        {label}: {displayLabel}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {Object.keys(options).map((optionName) => {
+          const isSelected = selectedOption === optionName;
+          return (
+            <Dropdown.Item
+              key={optionName}
+              as="button"
+              type="button"
+              active={isSelected}
+              onClick={() => handleOptionClick(optionName as OptionName)}
+            >
+              <i class={`bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2`} />
+              {optionName}
+            </Dropdown.Item>
+          );
+        })}
+        {/* Show Custom option only when no preset matches */}
+        {selectedOption === null && (
+          <Dropdown.Item as="button" type="button" active disabled>
+            <i class="bi bi-check-circle-fill me-2" />
+            Custom
+          </Dropdown.Item>
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}

package/src/index.ts

@@ -17,4 +17,6 @@ export {
   type NumericColumnFilterValue,
 } from './components/NumericInputColumnFilter.js';
 export { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';
+export { useAutoSizeColumns } from './components/useAutoSizeColumns.js';
 export { OverlayTrigger, type OverlayTriggerProps } from './components/OverlayTrigger.js';
+export { PresetFilterDropdown } from './components/PresetFilterDropdown.js';