@prairielearn/ui 3.1.0 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/components/ColumnManager.d.ts.map +1 -1
  3. package/dist/components/ColumnManager.js +16 -9
  4. package/dist/components/ColumnManager.js.map +1 -1
  5. package/package.json +10 -10
  6. package/src/components/ColumnManager.tsx +18 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @prairielearn/ui
2
2
 
3
+ ## 3.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - cde69c1: Upgrade all JavaScript dependencies
8
+ - aae8ad7: Fix ColumnManager not properly unchecking a group of columns
9
+
10
+ ## 3.1.1
11
+
12
+ ### Patch Changes
13
+
14
+ - 8bdf6ea: Upgrade all JavaScript dependencies
15
+ - Updated dependencies [8bdf6ea]
16
+ - @prairielearn/browser-utils@2.6.3
17
+
3
18
  ## 3.1.0
4
19
 
5
20
  ### Minor Changes
package/dist/components/ColumnManager.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColumnManager.d.ts","sourceRoot":"","sources":["../../src/components/ColumnManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,KAAK,GAAG,EAA+B,MAAM,OAAO,CAAC;AAoL9D,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC1B;AAeD,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,UAAU,EACX,EAAE,kBAAkB,CAAC,YAAY,CAAC,2CA2LlC","sourcesContent":["import { type Column, type Table } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useEffect, useRef, useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\ninterface ColumnMenuItemProps<RowDataModel> {\n column: Column<RowDataModel>;\n onPinningBoundary: boolean;\n onTogglePin: (columnId: string) => void;\n className?: string;\n}\n\nfunction ColumnLeafItem<RowDataModel>({\n column,\n onPinningBoundary = false,\n onTogglePin,\n className,\n}: ColumnMenuItemProps<RowDataModel>) {\n if (!column.getCanHide()) return null;\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div\n key={column.id}\n className={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}\n >\n <label className=\"form-check me-auto text-nowrap d-flex align-items-stretch\">\n <input\n type=\"checkbox\"\n className=\"form-check-input\"\n checked={column.getIsVisible()}\n disabled={!column.getCanHide()}\n aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}\n aria-describedby={`${column.id}-label`}\n onChange={column.getToggleVisibilityHandler()}\n />\n <span className=\"form-check-label ms-2\" id={`${column.id}-label`}>\n {header}\n </span>\n </label>\n <button\n type=\"button\"\n // Since the HTML changes, but we want to refocus the pin button, we track\n // the active pin button and refocuses it when the column manager is rerendered.\n id={`${column.id}-pin`}\n className={clsx(\n 'btn btn-sm btn-ghost ms-2',\n (!column.getCanPin() || !onPinningBoundary) && 'invisible',\n )}\n aria-label={\n column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}' column`\n }\n title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}\n data-bs-toggle=\"tooltip\"\n onClick={() => onTogglePin(column.id)}\n >\n <i className={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden=\"true\" />\n </button>\n </div>\n );\n}\n\nfunction ColumnGroupItem<RowDataModel>({\n column,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n const [isExpanded, setIsExpanded] = useState(false);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const leafColumns = column.getLeafColumns();\n const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());\n const isAllVisible = visibleLeafColumns.length === leafColumns.length;\n const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;\n\n // Set indeterminate state via ref since it's a DOM property, not an HTML attribute\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = isSomeVisible;\n }\n }, [isSomeVisible]);\n\n const handleToggleVisibility = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const targetVisibility = !isAllVisible;\n leafColumns.forEach((col) => {\n if (col.getCanHide()) {\n col.toggleVisibility(targetVisibility);\n }\n });\n };\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div className=\"d-flex flex-column\">\n <div className=\"px-2 py-1 d-flex align-items-center justify-content-between\">\n <div className=\"d-flex align-items-center flex-grow-1\">\n <input\n ref={checkboxRef}\n type=\"checkbox\"\n className=\"form-check-input flex-shrink-0\"\n checked={isAllVisible}\n aria-label={`Toggle visibility for group '${header}'`}\n onChange={handleToggleVisibility}\n />\n <button\n type=\"button\"\n className=\"btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0\"\n aria-expanded={isExpanded}\n onClick={(e) => {\n e.stopPropagation();\n setIsExpanded(!isExpanded);\n }}\n >\n <span className=\"fw-bold text-truncate\">{header}</span>\n <i\n className={clsx(\n 'bi ms-2 text-muted',\n isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',\n )}\n aria-hidden=\"true\"\n />\n </button>\n </div>\n </div>\n {isExpanded && (\n <div className=\"ps-3 border-start ms-3 mb-1\">\n {column.columns.map((childCol) => (\n <ColumnItem\n key={childCol.id}\n column={childCol}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction ColumnItem<RowDataModel>({\n column,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n if (column.columns.length > 0) {\n return (\n <ColumnGroupItem\n column={column}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n );\n }\n return (\n <ColumnLeafItem\n column={column}\n onPinningBoundary={getIsOnPinningBoundary(column.id)}\n onTogglePin={onTogglePin}\n />\n );\n}\n\ninterface ColumnManagerProps<RowDataModel> {\n table: Table<RowDataModel>;\n topContent?: JSX.Element;\n}\n\n/**\n * Ponyfill for `Array.prototype.findLastIndex`, which is not available in the\n * `ES2022` TypeScript lib that we're currently using.\n */\nfunction findLastIndex<T>(arr: T[], predicate: (value: T, index: number) => boolean): number {\n for (let i = arr.length - 1; i >= 0; i--) {\n if (predicate(arr[i], i)) {\n return i;\n }\n }\n return -1;\n}\n\nexport function ColumnManager<RowDataModel>({\n table,\n topContent,\n}: ColumnManagerProps<RowDataModel>) {\n const [activeElementId, setActiveElementId] = useState<string | null>(null);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const menuRef = useRef<HTMLDivElement>(null);\n const handleTogglePin = (columnId: string) => {\n const currentLeft = table.getState().columnPinning.left ?? [];\n const isPinned = currentLeft.includes(columnId);\n const allLeafColumns = table.getAllLeafColumns();\n const currentColumnIndex = allLeafColumns.findIndex((c) => c.id === columnId);\n let newLeft: string[];\n if (isPinned) {\n // Get the previous column that can be set to unpinned.\n // This is useful since we want to unpin/pin columns that are not shown in the view manager.\n const previousFrozenColumnIndex = findLastIndex(\n allLeafColumns,\n (c, index) => c.getCanHide() && index < currentColumnIndex,\n );\n newLeft = allLeafColumns.slice(0, previousFrozenColumnIndex + 1).map((c) => c.id);\n } else {\n // Pin all columns to the left of the current column.\n const leftColumns = allLeafColumns.slice(0, currentColumnIndex + 1);\n newLeft = leftColumns.map((c) => c.id);\n }\n table.setColumnPinning({ left: newLeft, right: [] });\n setActiveElementId(`${columnId}-pin`);\n };\n\n const isVisibilityChanged = Object.entries(table.getState().columnVisibility).some(\n ([key, value]) => {\n return value !== table.initialState.columnVisibility[key];\n },\n );\n\n const initialPinning = table.initialState.columnPinning.left ?? [];\n const currentPinning = table.getState().columnPinning.left ?? [];\n const isPinningChanged =\n initialPinning.length !== currentPinning.length ||\n initialPinning.some((id) => !currentPinning.includes(id));\n const showResetButton = isVisibilityChanged || isPinningChanged;\n\n const allLeafColumns = table.getAllLeafColumns();\n const pinnedMenuColumns = allLeafColumns.filter(\n (c) => c.getCanHide() && c.getIsPinned() === 'left',\n );\n // Only the first unpinned menu column can be pinned, so we only need to find the first one\n const firstUnpinnedMenuColumn = allLeafColumns.find(\n (c) => c.getCanHide() && c.getIsPinned() !== 'left',\n );\n\n // Determine if a column is on the pinning boundary (can toggle its pin state).\n // - Columns in a group cannot be pinned\n // - Columns after a group cannot be pinned\n // - Only the last pinned menu column can be unpinned\n // - Only the first unpinned menu column can be pinned\n const getIsOnPinningBoundary = (columnId: string) => {\n const column = allLeafColumns.find((c) => c.id === columnId);\n if (!column) return false;\n\n // Columns in a group cannot be pinned\n if (column.parent) return false;\n\n // Check if any column at or before this one in the full column order is in a group\n const columnIdx = allLeafColumns.findIndex((c) => c.id === columnId);\n const hasGroupAtOrBefore = allLeafColumns.slice(0, columnIdx + 1).some((c) => c.parent);\n\n if (column.getIsPinned() === 'left') {\n // Only the last pinned menu column can be unpinned\n return columnId === pinnedMenuColumns[pinnedMenuColumns.length - 1]?.id;\n } else {\n // Cannot pin if there's a group at or before this column\n if (hasGroupAtOrBefore) return false;\n // Only the first unpinned menu column can be pinned\n return columnId === firstUnpinnedMenuColumn?.id;\n }\n };\n\n // Get root columns (for showing hierarchy), but filter to only show unpinned ones\n // We'll show pinned columns separately in the \"Frozen columns\" section\n const unpinnedRootColumns = table.getAllColumns().filter((c) => {\n if (c.depth !== 0) return false;\n // A root column is considered unpinned if all its leaf columns are unpinned\n const leafCols = c.getLeafColumns();\n return (\n leafCols.length > 0 &&\n leafCols.every((leaf) => leaf.getIsPinned() !== 'left' && c.getCanHide())\n );\n });\n\n useEffect(() => {\n // When we use the pin or reset button, we want to refocus to another element.\n // We want this in a useEffect so that this code runs after the component re-renders.\n\n // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n if (activeElementId) {\n document.getElementById(activeElementId)?.focus();\n }\n }, [activeElementId]);\n\n return (\n <Dropdown\n ref={menuRef}\n autoClose=\"outside\"\n show={dropdownOpen}\n onToggle={(isOpen, _meta) => setDropdownOpen(isOpen)}\n onBlur={(e: React.FocusEvent) => {\n // Since we aren't using role=\"menu\", we need to manually close the dropdown when focus leaves.\n // `relatedTarget` is the element gaining focus.\n if (menuRef.current && !menuRef.current.contains(e.relatedTarget)) {\n setDropdownOpen(false);\n }\n }}\n >\n <Dropdown.Toggle\n // We assume that this component will only appear once per page. If that changes,\n // we'll need to do something to ensure ID uniqueness here.\n id=\"column-manager\"\n variant=\"tanstack-table\"\n >\n <i className=\"bi bi-view-list me-2\" aria-hidden=\"true\" /> View{' '}\n </Dropdown.Toggle>\n <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>\n {topContent && (\n <>\n {topContent}\n <Dropdown.Divider />\n </>\n )}\n {pinnedMenuColumns.length > 0 && (\n <>\n <div className=\"px-2 py-1 text-muted small\" role=\"presentation\">\n Frozen columns\n </div>\n <div role=\"group\">\n {/* Only leaf columns can be pinned in the current implementation. */}\n {pinnedMenuColumns.map((column, index) => {\n return (\n <ColumnLeafItem\n key={column.id}\n column={column}\n onPinningBoundary={index === pinnedMenuColumns.length - 1}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n <Dropdown.Divider />\n </>\n )}\n {unpinnedRootColumns.length > 0 && (\n <>\n <div role=\"group\">\n {unpinnedRootColumns.map((column) => {\n return (\n <ColumnItem\n key={column.id}\n column={column}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n {showResetButton && <Dropdown.Divider />}\n </>\n )}\n {showResetButton && (\n <div className=\"px-2 py-1\">\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className=\"w-100\"\n aria-label=\"Reset all columns to default visibility and pinning\"\n onClick={() => {\n table.resetColumnVisibility();\n table.resetColumnPinning();\n // Move focus to the column manager button after resetting.\n setActiveElementId('column-manager');\n }}\n >\n <i className=\"bi bi-arrow-counterclockwise me-2\" aria-hidden=\"true\" />\n Reset view\n </Button>\n </div>\n )}\n </Dropdown.Menu>\n </Dropdown>\n );\n}\n"]}
1
+ {"version":3,"file":"ColumnManager.d.ts","sourceRoot":"","sources":["../../src/components/ColumnManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,KAAK,GAAG,EAA+B,MAAM,OAAO,CAAC;AAiM9D,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC1B;AAeD,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,UAAU,EACX,EAAE,kBAAkB,CAAC,YAAY,CAAC,2CA4LlC","sourcesContent":["import { type Column, type Table } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useEffect, useRef, useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\ninterface ColumnMenuItemProps<RowDataModel> {\n column: Column<RowDataModel>;\n onPinningBoundary: boolean;\n onTogglePin: (columnId: string) => void;\n className?: string;\n}\n\nfunction ColumnLeafItem<RowDataModel>({\n column,\n onPinningBoundary = false,\n onTogglePin,\n className,\n}: ColumnMenuItemProps<RowDataModel>) {\n if (!column.getCanHide()) return null;\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div\n key={column.id}\n className={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}\n >\n <label className=\"form-check me-auto text-nowrap d-flex align-items-stretch\">\n <input\n type=\"checkbox\"\n className=\"form-check-input\"\n checked={column.getIsVisible()}\n disabled={!column.getCanHide()}\n aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}\n aria-describedby={`${column.id}-label`}\n onChange={column.getToggleVisibilityHandler()}\n />\n <span className=\"form-check-label ms-2\" id={`${column.id}-label`}>\n {header}\n </span>\n </label>\n <button\n type=\"button\"\n // Since the HTML changes, but we want to refocus the pin button, we track\n // the active pin button and refocuses it when the column manager is rerendered.\n id={`${column.id}-pin`}\n className={clsx(\n 'btn btn-sm btn-ghost ms-2',\n (!column.getCanPin() || !onPinningBoundary) && 'invisible',\n )}\n aria-label={\n column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}' column`\n }\n title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}\n data-bs-toggle=\"tooltip\"\n onClick={() => onTogglePin(column.id)}\n >\n <i className={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden=\"true\" />\n </button>\n </div>\n );\n}\n\nfunction ColumnGroupItem<RowDataModel>({\n column,\n table,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n table: Table<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n const [isExpanded, setIsExpanded] = useState(false);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const leafColumns = column.getLeafColumns();\n const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());\n const isAllVisible = visibleLeafColumns.length === leafColumns.length;\n const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;\n\n // Set indeterminate state via ref since it's a DOM property, not an HTML attribute\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = isSomeVisible;\n }\n }, [isSomeVisible]);\n\n const handleToggleVisibility = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const targetVisibility = !isAllVisible;\n // Batch all visibility changes into a single update\n // Doing rapid state updates caused the state updates to not be applied correctly.\n // See https://github.com/PrairieLearn/PrairieLearn/pull/13989\n table.setColumnVisibility((old) => {\n const newVisibility = { ...old };\n leafColumns.forEach((col) => {\n if (col.getCanHide()) {\n newVisibility[col.id] = targetVisibility;\n }\n });\n return newVisibility;\n });\n };\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div className=\"d-flex flex-column\">\n <div className=\"px-2 py-1 d-flex align-items-center justify-content-between\">\n <div className=\"d-flex align-items-center flex-grow-1\">\n <input\n ref={checkboxRef}\n type=\"checkbox\"\n className=\"form-check-input flex-shrink-0\"\n checked={isAllVisible}\n aria-label={`Toggle visibility for group '${header}'`}\n onChange={handleToggleVisibility}\n />\n <button\n type=\"button\"\n className=\"btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0\"\n aria-expanded={isExpanded}\n onClick={(e) => {\n e.stopPropagation();\n setIsExpanded(!isExpanded);\n }}\n >\n <span className=\"fw-bold text-truncate\">{header}</span>\n <i\n className={clsx(\n 'bi ms-2 text-muted',\n isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',\n )}\n aria-hidden=\"true\"\n />\n </button>\n </div>\n </div>\n {isExpanded && (\n <div className=\"ps-3 border-start ms-3 mb-1\">\n {column.columns.map((childCol) => (\n <ColumnItem\n key={childCol.id}\n column={childCol}\n table={table}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction ColumnItem<RowDataModel>({\n column,\n table,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n table: Table<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n if (column.columns.length > 0) {\n return (\n <ColumnGroupItem\n column={column}\n table={table}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n );\n }\n return (\n <ColumnLeafItem\n column={column}\n onPinningBoundary={getIsOnPinningBoundary(column.id)}\n onTogglePin={onTogglePin}\n />\n );\n}\n\ninterface ColumnManagerProps<RowDataModel> {\n table: Table<RowDataModel>;\n topContent?: JSX.Element;\n}\n\n/**\n * Ponyfill for `Array.prototype.findLastIndex`, which is not available in the\n * `ES2022` TypeScript lib that we're currently using.\n */\nfunction findLastIndex<T>(arr: T[], predicate: (value: T, index: number) => boolean): number {\n for (let i = arr.length - 1; i >= 0; i--) {\n if (predicate(arr[i], i)) {\n return i;\n }\n }\n return -1;\n}\n\nexport function ColumnManager<RowDataModel>({\n table,\n topContent,\n}: ColumnManagerProps<RowDataModel>) {\n const [activeElementId, setActiveElementId] = useState<string | null>(null);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const menuRef = useRef<HTMLDivElement>(null);\n const handleTogglePin = (columnId: string) => {\n const currentLeft = table.getState().columnPinning.left ?? [];\n const isPinned = currentLeft.includes(columnId);\n const allLeafColumns = table.getAllLeafColumns();\n const currentColumnIndex = allLeafColumns.findIndex((c) => c.id === columnId);\n let newLeft: string[];\n if (isPinned) {\n // Get the previous column that can be set to unpinned.\n // This is useful since we want to unpin/pin columns that are not shown in the view manager.\n const previousFrozenColumnIndex = findLastIndex(\n allLeafColumns,\n (c, index) => c.getCanHide() && index < currentColumnIndex,\n );\n newLeft = allLeafColumns.slice(0, previousFrozenColumnIndex + 1).map((c) => c.id);\n } else {\n // Pin all columns to the left of the current column.\n const leftColumns = allLeafColumns.slice(0, currentColumnIndex + 1);\n newLeft = leftColumns.map((c) => c.id);\n }\n table.setColumnPinning({ left: newLeft, right: [] });\n setActiveElementId(`${columnId}-pin`);\n };\n\n const isVisibilityChanged = Object.entries(table.getState().columnVisibility).some(\n ([key, value]) => {\n return value !== table.initialState.columnVisibility[key];\n },\n );\n\n const initialPinning = table.initialState.columnPinning.left ?? [];\n const currentPinning = table.getState().columnPinning.left ?? [];\n const isPinningChanged =\n initialPinning.length !== currentPinning.length ||\n initialPinning.some((id) => !currentPinning.includes(id));\n const showResetButton = isVisibilityChanged || isPinningChanged;\n\n const allLeafColumns = table.getAllLeafColumns();\n const pinnedMenuColumns = allLeafColumns.filter(\n (c) => c.getCanHide() && c.getIsPinned() === 'left',\n );\n // Only the first unpinned menu column can be pinned, so we only need to find the first one\n const firstUnpinnedMenuColumn = allLeafColumns.find(\n (c) => c.getCanHide() && c.getIsPinned() !== 'left',\n );\n\n // Determine if a column is on the pinning boundary (can toggle its pin state).\n // - Columns in a group cannot be pinned\n // - Columns after a group cannot be pinned\n // - Only the last pinned menu column can be unpinned\n // - Only the first unpinned menu column can be pinned\n const getIsOnPinningBoundary = (columnId: string) => {\n const column = allLeafColumns.find((c) => c.id === columnId);\n if (!column) return false;\n\n // Columns in a group cannot be pinned\n if (column.parent) return false;\n\n // Check if any column at or before this one in the full column order is in a group\n const columnIdx = allLeafColumns.findIndex((c) => c.id === columnId);\n const hasGroupAtOrBefore = allLeafColumns.slice(0, columnIdx + 1).some((c) => c.parent);\n\n if (column.getIsPinned() === 'left') {\n // Only the last pinned menu column can be unpinned\n return columnId === pinnedMenuColumns[pinnedMenuColumns.length - 1]?.id;\n } else {\n // Cannot pin if there's a group at or before this column\n if (hasGroupAtOrBefore) return false;\n // Only the first unpinned menu column can be pinned\n return columnId === firstUnpinnedMenuColumn?.id;\n }\n };\n\n // Get root columns (for showing hierarchy), but filter to only show unpinned ones\n // We'll show pinned columns separately in the \"Frozen columns\" section\n const unpinnedRootColumns = table.getAllColumns().filter((c) => {\n if (c.depth !== 0) return false;\n // A root column is considered unpinned if all its leaf columns are unpinned\n const leafCols = c.getLeafColumns();\n return (\n leafCols.length > 0 &&\n leafCols.every((leaf) => leaf.getIsPinned() !== 'left' && c.getCanHide())\n );\n });\n\n useEffect(() => {\n // When we use the pin or reset button, we want to refocus to another element.\n // We want this in a useEffect so that this code runs after the component re-renders.\n\n // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n if (activeElementId) {\n document.getElementById(activeElementId)?.focus();\n }\n }, [activeElementId]);\n\n return (\n <Dropdown\n ref={menuRef}\n autoClose=\"outside\"\n show={dropdownOpen}\n onToggle={(isOpen, _meta) => setDropdownOpen(isOpen)}\n onBlur={(e: React.FocusEvent) => {\n // Since we aren't using role=\"menu\", we need to manually close the dropdown when focus leaves.\n // `relatedTarget` is the element gaining focus.\n if (menuRef.current && !menuRef.current.contains(e.relatedTarget)) {\n setDropdownOpen(false);\n }\n }}\n >\n <Dropdown.Toggle\n // We assume that this component will only appear once per page. If that changes,\n // we'll need to do something to ensure ID uniqueness here.\n id=\"column-manager\"\n variant=\"tanstack-table\"\n >\n <i className=\"bi bi-view-list me-2\" aria-hidden=\"true\" /> View{' '}\n </Dropdown.Toggle>\n <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>\n {topContent && (\n <>\n {topContent}\n <Dropdown.Divider />\n </>\n )}\n {pinnedMenuColumns.length > 0 && (\n <>\n <div className=\"px-2 py-1 text-muted small\" role=\"presentation\">\n Frozen columns\n </div>\n <div role=\"group\">\n {/* Only leaf columns can be pinned in the current implementation. */}\n {pinnedMenuColumns.map((column, index) => {\n return (\n <ColumnLeafItem\n key={column.id}\n column={column}\n onPinningBoundary={index === pinnedMenuColumns.length - 1}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n <Dropdown.Divider />\n </>\n )}\n {unpinnedRootColumns.length > 0 && (\n <>\n <div role=\"group\">\n {unpinnedRootColumns.map((column) => {\n return (\n <ColumnItem\n key={column.id}\n column={column}\n table={table}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n {showResetButton && <Dropdown.Divider />}\n </>\n )}\n {showResetButton && (\n <div className=\"px-2 py-1\">\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className=\"w-100\"\n aria-label=\"Reset all columns to default visibility and pinning\"\n onClick={() => {\n table.resetColumnVisibility();\n table.resetColumnPinning();\n // Move focus to the column manager button after resetting.\n setActiveElementId('column-manager');\n }}\n >\n <i className=\"bi bi-arrow-counterclockwise me-2\" aria-hidden=\"true\" />\n Reset view\n </Button>\n </div>\n )}\n </Dropdown.Menu>\n </Dropdown>\n );\n}\n"]}
package/dist/components/ColumnManager.js CHANGED
@@ -19,7 +19,7 @@ function ColumnLeafItem({ column, onPinningBoundary = false, onTogglePin, classN
19
19
  id: `${column.id}-pin`, className: clsx('btn btn-sm btn-ghost ms-2', (!column.getCanPin() || !onPinningBoundary) && 'invisible'), "aria-label": column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}' column`, title: column.getIsPinned() ? 'Unfreeze column' : 'Freeze column', "data-bs-toggle": "tooltip", onClick: () => onTogglePin(column.id), children: _jsx("i", { className: `bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`, "aria-hidden": "true" }) })
20
20
  ] }, column.id));
21
21
  }
22
- function ColumnGroupItem({ column, onTogglePin, getIsOnPinningBoundary, }) {
22
+ function ColumnGroupItem({ column, table, onTogglePin, getIsOnPinningBoundary, }) {
23
23
  const [isExpanded, setIsExpanded] = useState(false);
24
24
  const checkboxRef = useRef(null);
25
25
  const leafColumns = column.getLeafColumns();
@@ -36,10 +36,17 @@ function ColumnGroupItem({ column, onTogglePin, getIsOnPinningBoundary, }) {
36
36
  e.preventDefault();
37
37
  e.stopPropagation();
38
38
  const targetVisibility = !isAllVisible;
39
- leafColumns.forEach((col) => {
40
- if (col.getCanHide()) {
41
- col.toggleVisibility(targetVisibility);
42
- }
39
+ // Batch all visibility changes into a single update
40
+ // Doing rapid state updates caused the state updates to not be applied correctly.
41
+ // See https://github.com/PrairieLearn/PrairieLearn/pull/13989
42
+ table.setColumnVisibility((old) => {
43
+ const newVisibility = { ...old };
44
+ leafColumns.forEach((col) => {
45
+ if (col.getCanHide()) {
46
+ newVisibility[col.id] = targetVisibility;
47
+ }
48
+ });
49
+ return newVisibility;
43
50
  });
44
51
  };
45
52
  // Use meta.label if available, otherwise fall back to header or column.id
@@ -53,11 +60,11 @@ function ColumnGroupItem({ column, onTogglePin, getIsOnPinningBoundary, }) {
53
60
  }, children: [
54
61
  _jsx("span", { className: "fw-bold text-truncate", children: header }), _jsx("i", { className: clsx('bi ms-2 text-muted', isExpanded ? 'bi-chevron-down' : 'bi-chevron-right'), "aria-hidden": "true" })
55
62
  ] })
56
- ] }) }), isExpanded && (_jsx("div", { className: "ps-3 border-start ms-3 mb-1", children: column.columns.map((childCol) => (_jsx(ColumnItem, { column: childCol, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: onTogglePin }, childCol.id))) }))] }));
63
+ ] }) }), isExpanded && (_jsx("div", { className: "ps-3 border-start ms-3 mb-1", children: column.columns.map((childCol) => (_jsx(ColumnItem, { column: childCol, table: table, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: onTogglePin }, childCol.id))) }))] }));
57
64
  }
58
- function ColumnItem({ column, onTogglePin, getIsOnPinningBoundary, }) {
65
+ function ColumnItem({ column, table, onTogglePin, getIsOnPinningBoundary, }) {
59
66
  if (column.columns.length > 0) {
60
- return (_jsx(ColumnGroupItem, { column: column, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: onTogglePin }));
67
+ return (_jsx(ColumnGroupItem, { column: column, table: table, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: onTogglePin }));
61
68
  }
62
69
  return (_jsx(ColumnLeafItem, { column: column, onPinningBoundary: getIsOnPinningBoundary(column.id), onTogglePin: onTogglePin }));
63
70
  }
@@ -176,7 +183,7 @@ export function ColumnManager({ table, topContent, }) {
176
183
  }) }), _jsx(Dropdown.Divider, {})
177
184
  ] })), unpinnedRootColumns.length > 0 && (_jsxs(_Fragment, { children: [
178
185
  _jsx("div", { role: "group", children: unpinnedRootColumns.map((column) => {
179
- return (_jsx(ColumnItem, { column: column, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: handleTogglePin }, column.id));
186
+ return (_jsx(ColumnItem, { column: column, table: table, getIsOnPinningBoundary: getIsOnPinningBoundary, onTogglePin: handleTogglePin }, column.id));
180
187
  }) }), showResetButton && _jsx(Dropdown.Divider, {})] })), showResetButton && (_jsx("div", { className: "px-2 py-1", children: _jsxs(Button, { variant: "secondary", size: "sm", className: "w-100", "aria-label": "Reset all columns to default visibility and pinning", onClick: () => {
181
188
  table.resetColumnVisibility();
182
189
  table.resetColumnPinning();
package/dist/components/ColumnManager.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColumnManager.js","sourceRoot":"","sources":["../../src/components/ColumnManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type Column, type Table } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useEffect, useRef, useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\ninterface ColumnMenuItemProps<RowDataModel> {\n column: Column<RowDataModel>;\n onPinningBoundary: boolean;\n onTogglePin: (columnId: string) => void;\n className?: string;\n}\n\nfunction ColumnLeafItem<RowDataModel>({\n column,\n onPinningBoundary = false,\n onTogglePin,\n className,\n}: ColumnMenuItemProps<RowDataModel>) {\n if (!column.getCanHide()) return null;\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div\n key={column.id}\n className={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}\n >\n <label className=\"form-check me-auto text-nowrap d-flex align-items-stretch\">\n <input\n type=\"checkbox\"\n className=\"form-check-input\"\n checked={column.getIsVisible()}\n disabled={!column.getCanHide()}\n aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}\n aria-describedby={`${column.id}-label`}\n onChange={column.getToggleVisibilityHandler()}\n />\n <span className=\"form-check-label ms-2\" id={`${column.id}-label`}>\n {header}\n </span>\n </label>\n <button\n type=\"button\"\n // Since the HTML changes, but we want to refocus the pin button, we track\n // the active pin button and refocuses it when the column manager is rerendered.\n id={`${column.id}-pin`}\n className={clsx(\n 'btn btn-sm btn-ghost ms-2',\n (!column.getCanPin() || !onPinningBoundary) && 'invisible',\n )}\n aria-label={\n column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}' column`\n }\n title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}\n data-bs-toggle=\"tooltip\"\n onClick={() => onTogglePin(column.id)}\n >\n <i className={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden=\"true\" />\n </button>\n </div>\n );\n}\n\nfunction ColumnGroupItem<RowDataModel>({\n column,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n const [isExpanded, setIsExpanded] = useState(false);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const leafColumns = column.getLeafColumns();\n const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());\n const isAllVisible = visibleLeafColumns.length === leafColumns.length;\n const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;\n\n // Set indeterminate state via ref since it's a DOM property, not an HTML attribute\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = isSomeVisible;\n }\n }, [isSomeVisible]);\n\n const handleToggleVisibility = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const targetVisibility = !isAllVisible;\n leafColumns.forEach((col) => {\n if (col.getCanHide()) {\n col.toggleVisibility(targetVisibility);\n }\n });\n };\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div className=\"d-flex flex-column\">\n <div className=\"px-2 py-1 d-flex align-items-center justify-content-between\">\n <div className=\"d-flex align-items-center flex-grow-1\">\n <input\n ref={checkboxRef}\n type=\"checkbox\"\n className=\"form-check-input flex-shrink-0\"\n checked={isAllVisible}\n aria-label={`Toggle visibility for group '${header}'`}\n onChange={handleToggleVisibility}\n />\n <button\n type=\"button\"\n className=\"btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0\"\n aria-expanded={isExpanded}\n onClick={(e) => {\n e.stopPropagation();\n setIsExpanded(!isExpanded);\n }}\n >\n <span className=\"fw-bold text-truncate\">{header}</span>\n <i\n className={clsx(\n 'bi ms-2 text-muted',\n isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',\n )}\n aria-hidden=\"true\"\n />\n </button>\n </div>\n </div>\n {isExpanded && (\n <div className=\"ps-3 border-start ms-3 mb-1\">\n {column.columns.map((childCol) => (\n <ColumnItem\n key={childCol.id}\n column={childCol}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction ColumnItem<RowDataModel>({\n column,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n if (column.columns.length > 0) {\n return (\n <ColumnGroupItem\n column={column}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n );\n }\n return (\n <ColumnLeafItem\n column={column}\n onPinningBoundary={getIsOnPinningBoundary(column.id)}\n onTogglePin={onTogglePin}\n />\n );\n}\n\ninterface ColumnManagerProps<RowDataModel> {\n table: Table<RowDataModel>;\n topContent?: JSX.Element;\n}\n\n/**\n * Ponyfill for `Array.prototype.findLastIndex`, which is not available in the\n * `ES2022` TypeScript lib that we're currently using.\n */\nfunction findLastIndex<T>(arr: T[], predicate: (value: T, index: number) => boolean): number {\n for (let i = arr.length - 1; i >= 0; i--) {\n if (predicate(arr[i], i)) {\n return i;\n }\n }\n return -1;\n}\n\nexport function ColumnManager<RowDataModel>({\n table,\n topContent,\n}: ColumnManagerProps<RowDataModel>) {\n const [activeElementId, setActiveElementId] = useState<string | null>(null);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const menuRef = useRef<HTMLDivElement>(null);\n const handleTogglePin = (columnId: string) => {\n const currentLeft = table.getState().columnPinning.left ?? [];\n const isPinned = currentLeft.includes(columnId);\n const allLeafColumns = table.getAllLeafColumns();\n const currentColumnIndex = allLeafColumns.findIndex((c) => c.id === columnId);\n let newLeft: string[];\n if (isPinned) {\n // Get the previous column that can be set to unpinned.\n // This is useful since we want to unpin/pin columns that are not shown in the view manager.\n const previousFrozenColumnIndex = findLastIndex(\n allLeafColumns,\n (c, index) => c.getCanHide() && index < currentColumnIndex,\n );\n newLeft = allLeafColumns.slice(0, previousFrozenColumnIndex + 1).map((c) => c.id);\n } else {\n // Pin all columns to the left of the current column.\n const leftColumns = allLeafColumns.slice(0, currentColumnIndex + 1);\n newLeft = leftColumns.map((c) => c.id);\n }\n table.setColumnPinning({ left: newLeft, right: [] });\n setActiveElementId(`${columnId}-pin`);\n };\n\n const isVisibilityChanged = Object.entries(table.getState().columnVisibility).some(\n ([key, value]) => {\n return value !== table.initialState.columnVisibility[key];\n },\n );\n\n const initialPinning = table.initialState.columnPinning.left ?? [];\n const currentPinning = table.getState().columnPinning.left ?? [];\n const isPinningChanged =\n initialPinning.length !== currentPinning.length ||\n initialPinning.some((id) => !currentPinning.includes(id));\n const showResetButton = isVisibilityChanged || isPinningChanged;\n\n const allLeafColumns = table.getAllLeafColumns();\n const pinnedMenuColumns = allLeafColumns.filter(\n (c) => c.getCanHide() && c.getIsPinned() === 'left',\n );\n // Only the first unpinned menu column can be pinned, so we only need to find the first one\n const firstUnpinnedMenuColumn = allLeafColumns.find(\n (c) => c.getCanHide() && c.getIsPinned() !== 'left',\n );\n\n // Determine if a column is on the pinning boundary (can toggle its pin state).\n // - Columns in a group cannot be pinned\n // - Columns after a group cannot be pinned\n // - Only the last pinned menu column can be unpinned\n // - Only the first unpinned menu column can be pinned\n const getIsOnPinningBoundary = (columnId: string) => {\n const column = allLeafColumns.find((c) => c.id === columnId);\n if (!column) return false;\n\n // Columns in a group cannot be pinned\n if (column.parent) return false;\n\n // Check if any column at or before this one in the full column order is in a group\n const columnIdx = allLeafColumns.findIndex((c) => c.id === columnId);\n const hasGroupAtOrBefore = allLeafColumns.slice(0, columnIdx + 1).some((c) => c.parent);\n\n if (column.getIsPinned() === 'left') {\n // Only the last pinned menu column can be unpinned\n return columnId === pinnedMenuColumns[pinnedMenuColumns.length - 1]?.id;\n } else {\n // Cannot pin if there's a group at or before this column\n if (hasGroupAtOrBefore) return false;\n // Only the first unpinned menu column can be pinned\n return columnId === firstUnpinnedMenuColumn?.id;\n }\n };\n\n // Get root columns (for showing hierarchy), but filter to only show unpinned ones\n // We'll show pinned columns separately in the \"Frozen columns\" section\n const unpinnedRootColumns = table.getAllColumns().filter((c) => {\n if (c.depth !== 0) return false;\n // A root column is considered unpinned if all its leaf columns are unpinned\n const leafCols = c.getLeafColumns();\n return (\n leafCols.length > 0 &&\n leafCols.every((leaf) => leaf.getIsPinned() !== 'left' && c.getCanHide())\n );\n });\n\n useEffect(() => {\n // When we use the pin or reset button, we want to refocus to another element.\n // We want this in a useEffect so that this code runs after the component re-renders.\n\n // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n if (activeElementId) {\n document.getElementById(activeElementId)?.focus();\n }\n }, [activeElementId]);\n\n return (\n <Dropdown\n ref={menuRef}\n autoClose=\"outside\"\n show={dropdownOpen}\n onToggle={(isOpen, _meta) => setDropdownOpen(isOpen)}\n onBlur={(e: React.FocusEvent) => {\n // Since we aren't using role=\"menu\", we need to manually close the dropdown when focus leaves.\n // `relatedTarget` is the element gaining focus.\n if (menuRef.current && !menuRef.current.contains(e.relatedTarget)) {\n setDropdownOpen(false);\n }\n }}\n >\n <Dropdown.Toggle\n // We assume that this component will only appear once per page. If that changes,\n // we'll need to do something to ensure ID uniqueness here.\n id=\"column-manager\"\n variant=\"tanstack-table\"\n >\n <i className=\"bi bi-view-list me-2\" aria-hidden=\"true\" /> View{' '}\n </Dropdown.Toggle>\n <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>\n {topContent && (\n <>\n {topContent}\n <Dropdown.Divider />\n </>\n )}\n {pinnedMenuColumns.length > 0 && (\n <>\n <div className=\"px-2 py-1 text-muted small\" role=\"presentation\">\n Frozen columns\n </div>\n <div role=\"group\">\n {/* Only leaf columns can be pinned in the current implementation. */}\n {pinnedMenuColumns.map((column, index) => {\n return (\n <ColumnLeafItem\n key={column.id}\n column={column}\n onPinningBoundary={index === pinnedMenuColumns.length - 1}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n <Dropdown.Divider />\n </>\n )}\n {unpinnedRootColumns.length > 0 && (\n <>\n <div role=\"group\">\n {unpinnedRootColumns.map((column) => {\n return (\n <ColumnItem\n key={column.id}\n column={column}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n {showResetButton && <Dropdown.Divider />}\n </>\n )}\n {showResetButton && (\n <div className=\"px-2 py-1\">\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className=\"w-100\"\n aria-label=\"Reset all columns to default visibility and pinning\"\n onClick={() => {\n table.resetColumnVisibility();\n table.resetColumnPinning();\n // Move focus to the column manager button after resetting.\n setActiveElementId('column-manager');\n }}\n >\n <i className=\"bi bi-arrow-counterclockwise me-2\" aria-hidden=\"true\" />\n Reset view\n </Button>\n </div>\n )}\n </Dropdown.Menu>\n </Dropdown>\n );\n}\n"]}
1
+ {"version":3,"file":"ColumnManager.js","sourceRoot":"","sources":["../../src/components/ColumnManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type Column, type Table } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { type JSX, useEffect, useRef, useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\ninterface ColumnMenuItemProps<RowDataModel> {\n column: Column<RowDataModel>;\n onPinningBoundary: boolean;\n onTogglePin: (columnId: string) => void;\n className?: string;\n}\n\nfunction ColumnLeafItem<RowDataModel>({\n column,\n onPinningBoundary = false,\n onTogglePin,\n className,\n}: ColumnMenuItemProps<RowDataModel>) {\n if (!column.getCanHide()) return null;\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div\n key={column.id}\n className={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}\n >\n <label className=\"form-check me-auto text-nowrap d-flex align-items-stretch\">\n <input\n type=\"checkbox\"\n className=\"form-check-input\"\n checked={column.getIsVisible()}\n disabled={!column.getCanHide()}\n aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}\n aria-describedby={`${column.id}-label`}\n onChange={column.getToggleVisibilityHandler()}\n />\n <span className=\"form-check-label ms-2\" id={`${column.id}-label`}>\n {header}\n </span>\n </label>\n <button\n type=\"button\"\n // Since the HTML changes, but we want to refocus the pin button, we track\n // the active pin button and refocuses it when the column manager is rerendered.\n id={`${column.id}-pin`}\n className={clsx(\n 'btn btn-sm btn-ghost ms-2',\n (!column.getCanPin() || !onPinningBoundary) && 'invisible',\n )}\n aria-label={\n column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}' column`\n }\n title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}\n data-bs-toggle=\"tooltip\"\n onClick={() => onTogglePin(column.id)}\n >\n <i className={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden=\"true\" />\n </button>\n </div>\n );\n}\n\nfunction ColumnGroupItem<RowDataModel>({\n column,\n table,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n table: Table<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n const [isExpanded, setIsExpanded] = useState(false);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const leafColumns = column.getLeafColumns();\n const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());\n const isAllVisible = visibleLeafColumns.length === leafColumns.length;\n const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;\n\n // Set indeterminate state via ref since it's a DOM property, not an HTML attribute\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = isSomeVisible;\n }\n }, [isSomeVisible]);\n\n const handleToggleVisibility = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const targetVisibility = !isAllVisible;\n // Batch all visibility changes into a single update\n // Doing rapid state updates caused the state updates to not be applied correctly.\n // See https://github.com/PrairieLearn/PrairieLearn/pull/13989\n table.setColumnVisibility((old) => {\n const newVisibility = { ...old };\n leafColumns.forEach((col) => {\n if (col.getCanHide()) {\n newVisibility[col.id] = targetVisibility;\n }\n });\n return newVisibility;\n });\n };\n\n // Use meta.label if available, otherwise fall back to header or column.id\n const header =\n column.columnDef.meta?.label ??\n (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);\n\n return (\n <div className=\"d-flex flex-column\">\n <div className=\"px-2 py-1 d-flex align-items-center justify-content-between\">\n <div className=\"d-flex align-items-center flex-grow-1\">\n <input\n ref={checkboxRef}\n type=\"checkbox\"\n className=\"form-check-input flex-shrink-0\"\n checked={isAllVisible}\n aria-label={`Toggle visibility for group '${header}'`}\n onChange={handleToggleVisibility}\n />\n <button\n type=\"button\"\n className=\"btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0\"\n aria-expanded={isExpanded}\n onClick={(e) => {\n e.stopPropagation();\n setIsExpanded(!isExpanded);\n }}\n >\n <span className=\"fw-bold text-truncate\">{header}</span>\n <i\n className={clsx(\n 'bi ms-2 text-muted',\n isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',\n )}\n aria-hidden=\"true\"\n />\n </button>\n </div>\n </div>\n {isExpanded && (\n <div className=\"ps-3 border-start ms-3 mb-1\">\n {column.columns.map((childCol) => (\n <ColumnItem\n key={childCol.id}\n column={childCol}\n table={table}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction ColumnItem<RowDataModel>({\n column,\n table,\n onTogglePin,\n getIsOnPinningBoundary,\n}: {\n column: Column<RowDataModel>;\n table: Table<RowDataModel>;\n onTogglePin: (columnId: string) => void;\n getIsOnPinningBoundary: (columnId: string) => boolean;\n}) {\n if (column.columns.length > 0) {\n return (\n <ColumnGroupItem\n column={column}\n table={table}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={onTogglePin}\n />\n );\n }\n return (\n <ColumnLeafItem\n column={column}\n onPinningBoundary={getIsOnPinningBoundary(column.id)}\n onTogglePin={onTogglePin}\n />\n );\n}\n\ninterface ColumnManagerProps<RowDataModel> {\n table: Table<RowDataModel>;\n topContent?: JSX.Element;\n}\n\n/**\n * Ponyfill for `Array.prototype.findLastIndex`, which is not available in the\n * `ES2022` TypeScript lib that we're currently using.\n */\nfunction findLastIndex<T>(arr: T[], predicate: (value: T, index: number) => boolean): number {\n for (let i = arr.length - 1; i >= 0; i--) {\n if (predicate(arr[i], i)) {\n return i;\n }\n }\n return -1;\n}\n\nexport function ColumnManager<RowDataModel>({\n table,\n topContent,\n}: ColumnManagerProps<RowDataModel>) {\n const [activeElementId, setActiveElementId] = useState<string | null>(null);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const menuRef = useRef<HTMLDivElement>(null);\n const handleTogglePin = (columnId: string) => {\n const currentLeft = table.getState().columnPinning.left ?? [];\n const isPinned = currentLeft.includes(columnId);\n const allLeafColumns = table.getAllLeafColumns();\n const currentColumnIndex = allLeafColumns.findIndex((c) => c.id === columnId);\n let newLeft: string[];\n if (isPinned) {\n // Get the previous column that can be set to unpinned.\n // This is useful since we want to unpin/pin columns that are not shown in the view manager.\n const previousFrozenColumnIndex = findLastIndex(\n allLeafColumns,\n (c, index) => c.getCanHide() && index < currentColumnIndex,\n );\n newLeft = allLeafColumns.slice(0, previousFrozenColumnIndex + 1).map((c) => c.id);\n } else {\n // Pin all columns to the left of the current column.\n const leftColumns = allLeafColumns.slice(0, currentColumnIndex + 1);\n newLeft = leftColumns.map((c) => c.id);\n }\n table.setColumnPinning({ left: newLeft, right: [] });\n setActiveElementId(`${columnId}-pin`);\n };\n\n const isVisibilityChanged = Object.entries(table.getState().columnVisibility).some(\n ([key, value]) => {\n return value !== table.initialState.columnVisibility[key];\n },\n );\n\n const initialPinning = table.initialState.columnPinning.left ?? [];\n const currentPinning = table.getState().columnPinning.left ?? [];\n const isPinningChanged =\n initialPinning.length !== currentPinning.length ||\n initialPinning.some((id) => !currentPinning.includes(id));\n const showResetButton = isVisibilityChanged || isPinningChanged;\n\n const allLeafColumns = table.getAllLeafColumns();\n const pinnedMenuColumns = allLeafColumns.filter(\n (c) => c.getCanHide() && c.getIsPinned() === 'left',\n );\n // Only the first unpinned menu column can be pinned, so we only need to find the first one\n const firstUnpinnedMenuColumn = allLeafColumns.find(\n (c) => c.getCanHide() && c.getIsPinned() !== 'left',\n );\n\n // Determine if a column is on the pinning boundary (can toggle its pin state).\n // - Columns in a group cannot be pinned\n // - Columns after a group cannot be pinned\n // - Only the last pinned menu column can be unpinned\n // - Only the first unpinned menu column can be pinned\n const getIsOnPinningBoundary = (columnId: string) => {\n const column = allLeafColumns.find((c) => c.id === columnId);\n if (!column) return false;\n\n // Columns in a group cannot be pinned\n if (column.parent) return false;\n\n // Check if any column at or before this one in the full column order is in a group\n const columnIdx = allLeafColumns.findIndex((c) => c.id === columnId);\n const hasGroupAtOrBefore = allLeafColumns.slice(0, columnIdx + 1).some((c) => c.parent);\n\n if (column.getIsPinned() === 'left') {\n // Only the last pinned menu column can be unpinned\n return columnId === pinnedMenuColumns[pinnedMenuColumns.length - 1]?.id;\n } else {\n // Cannot pin if there's a group at or before this column\n if (hasGroupAtOrBefore) return false;\n // Only the first unpinned menu column can be pinned\n return columnId === firstUnpinnedMenuColumn?.id;\n }\n };\n\n // Get root columns (for showing hierarchy), but filter to only show unpinned ones\n // We'll show pinned columns separately in the \"Frozen columns\" section\n const unpinnedRootColumns = table.getAllColumns().filter((c) => {\n if (c.depth !== 0) return false;\n // A root column is considered unpinned if all its leaf columns are unpinned\n const leafCols = c.getLeafColumns();\n return (\n leafCols.length > 0 &&\n leafCols.every((leaf) => leaf.getIsPinned() !== 'left' && c.getCanHide())\n );\n });\n\n useEffect(() => {\n // When we use the pin or reset button, we want to refocus to another element.\n // We want this in a useEffect so that this code runs after the component re-renders.\n\n // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n if (activeElementId) {\n document.getElementById(activeElementId)?.focus();\n }\n }, [activeElementId]);\n\n return (\n <Dropdown\n ref={menuRef}\n autoClose=\"outside\"\n show={dropdownOpen}\n onToggle={(isOpen, _meta) => setDropdownOpen(isOpen)}\n onBlur={(e: React.FocusEvent) => {\n // Since we aren't using role=\"menu\", we need to manually close the dropdown when focus leaves.\n // `relatedTarget` is the element gaining focus.\n if (menuRef.current && !menuRef.current.contains(e.relatedTarget)) {\n setDropdownOpen(false);\n }\n }}\n >\n <Dropdown.Toggle\n // We assume that this component will only appear once per page. If that changes,\n // we'll need to do something to ensure ID uniqueness here.\n id=\"column-manager\"\n variant=\"tanstack-table\"\n >\n <i className=\"bi bi-view-list me-2\" aria-hidden=\"true\" /> View{' '}\n </Dropdown.Toggle>\n <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>\n {topContent && (\n <>\n {topContent}\n <Dropdown.Divider />\n </>\n )}\n {pinnedMenuColumns.length > 0 && (\n <>\n <div className=\"px-2 py-1 text-muted small\" role=\"presentation\">\n Frozen columns\n </div>\n <div role=\"group\">\n {/* Only leaf columns can be pinned in the current implementation. */}\n {pinnedMenuColumns.map((column, index) => {\n return (\n <ColumnLeafItem\n key={column.id}\n column={column}\n onPinningBoundary={index === pinnedMenuColumns.length - 1}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n <Dropdown.Divider />\n </>\n )}\n {unpinnedRootColumns.length > 0 && (\n <>\n <div role=\"group\">\n {unpinnedRootColumns.map((column) => {\n return (\n <ColumnItem\n key={column.id}\n column={column}\n table={table}\n getIsOnPinningBoundary={getIsOnPinningBoundary}\n onTogglePin={handleTogglePin}\n />\n );\n })}\n </div>\n {showResetButton && <Dropdown.Divider />}\n </>\n )}\n {showResetButton && (\n <div className=\"px-2 py-1\">\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className=\"w-100\"\n aria-label=\"Reset all columns to default visibility and pinning\"\n onClick={() => {\n table.resetColumnVisibility();\n table.resetColumnPinning();\n // Move focus to the column manager button after resetting.\n setActiveElementId('column-manager');\n }}\n >\n <i className=\"bi bi-arrow-counterclockwise me-2\" aria-hidden=\"true\" />\n Reset view\n </Button>\n </div>\n )}\n </Dropdown.Menu>\n </Dropdown>\n );\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prairielearn/ui",
3
- "version": "3.1.0",
3
+ "version": "3.1.2",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -20,27 +20,27 @@
20
20
  "test": "vitest run --coverage"
21
21
  },
22
22
  "dependencies": {
23
- "@prairielearn/browser-utils": "^2.6.2",
23
+ "@prairielearn/browser-utils": "^2.6.3",
24
24
  "@tanstack/react-table": "^8.21.3",
25
25
  "@tanstack/react-virtual": "^3.13.18",
26
26
  "@tanstack/table-core": "^8.21.3",
27
- "@types/react": "^19.2.8",
27
+ "@types/react": "^19.2.10",
28
28
  "@types/react-dom": "^19.2.3",
29
29
  "clsx": "^2.1.1",
30
- "nuqs": "^2.8.6",
31
- "react": "^19.2.3",
30
+ "nuqs": "^2.8.8",
31
+ "react": "^19.2.4",
32
32
  "react-aria": "^3.45.0",
33
- "react-aria-components": "^1.7.1",
33
+ "react-aria-components": "^1.14.0",
34
34
  "react-bootstrap": "3.0.0-beta.5",
35
- "react-dom": "^19.2.3",
35
+ "react-dom": "^19.2.4",
36
36
  "use-debounce": "^10.1.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@prairielearn/tsconfig": "^0.0.0",
39
+ "@prairielearn/tsconfig": "^2.0.0",
40
40
  "@types/node": "^24.10.9",
41
- "@typescript/native-preview": "^7.0.0-dev.20260106.1",
41
+ "@typescript/native-preview": "^7.0.0-dev.20260203.1",
42
42
  "typescript": "^5.9.3",
43
43
  "typescript-cp": "^0.1.9",
44
- "vitest": "^4.0.17"
44
+ "vitest": "^4.0.18"
45
45
  }
46
46
  }
package/src/components/ColumnManager.tsx CHANGED
@@ -67,10 +67,12 @@ function ColumnLeafItem<RowDataModel>({
67
67
 
68
68
  function ColumnGroupItem<RowDataModel>({
69
69
  column,
70
+ table,
70
71
  onTogglePin,
71
72
  getIsOnPinningBoundary,
72
73
  }: {
73
74
  column: Column<RowDataModel>;
75
+ table: Table<RowDataModel>;
74
76
  onTogglePin: (columnId: string) => void;
75
77
  getIsOnPinningBoundary: (columnId: string) => boolean;
76
78
  }) {
@@ -93,10 +95,17 @@ function ColumnGroupItem<RowDataModel>({
93
95
  e.preventDefault();
94
96
  e.stopPropagation();
95
97
  const targetVisibility = !isAllVisible;
96
- leafColumns.forEach((col) => {
97
- if (col.getCanHide()) {
98
- col.toggleVisibility(targetVisibility);
99
- }
98
+ // Batch all visibility changes into a single update
99
+ // Doing rapid state updates caused the state updates to not be applied correctly.
100
+ // See https://github.com/PrairieLearn/PrairieLearn/pull/13989
101
+ table.setColumnVisibility((old) => {
102
+ const newVisibility = { ...old };
103
+ leafColumns.forEach((col) => {
104
+ if (col.getCanHide()) {
105
+ newVisibility[col.id] = targetVisibility;
106
+ }
107
+ });
108
+ return newVisibility;
100
109
  });
101
110
  };
102
111
 
@@ -143,6 +152,7 @@ function ColumnGroupItem<RowDataModel>({
143
152
  <ColumnItem
144
153
  key={childCol.id}
145
154
  column={childCol}
155
+ table={table}
146
156
  getIsOnPinningBoundary={getIsOnPinningBoundary}
147
157
  onTogglePin={onTogglePin}
148
158
  />
@@ -155,10 +165,12 @@ function ColumnGroupItem<RowDataModel>({
155
165
 
156
166
  function ColumnItem<RowDataModel>({
157
167
  column,
168
+ table,
158
169
  onTogglePin,
159
170
  getIsOnPinningBoundary,
160
171
  }: {
161
172
  column: Column<RowDataModel>;
173
+ table: Table<RowDataModel>;
162
174
  onTogglePin: (columnId: string) => void;
163
175
  getIsOnPinningBoundary: (columnId: string) => boolean;
164
176
  }) {
@@ -166,6 +178,7 @@ function ColumnItem<RowDataModel>({
166
178
  return (
167
179
  <ColumnGroupItem
168
180
  column={column}
181
+ table={table}
169
182
  getIsOnPinningBoundary={getIsOnPinningBoundary}
170
183
  onTogglePin={onTogglePin}
171
184
  />
@@ -357,6 +370,7 @@ export function ColumnManager<RowDataModel>({
357
370
  <ColumnItem
358
371
  key={column.id}
359
372
  column={column}
373
+ table={table}
360
374
  getIsOnPinningBoundary={getIsOnPinningBoundary}
361
375
  onTogglePin={handleTogglePin}
362
376
  />