Placeholder header checkbox menu

Author: dumbmatter

TODO

@@ -1,13 +1,11 @@
 tables should be aware that rows are players who have pids. add bulk/all/select operations at table-level through ... menu
 - select/unselect all checkbox in the header
   - states:
-    - all checked (not just visible)
-      - show as checked
-    - some checked (whether visible or not)
-      - show as indeterminate https://stackoverflow.com/a/6269487/786644
-    - not checked
-      - show as unchecked
+    - all checked (not just visible) -> checked
+    - some checked (whether visible or not) -> indeterminate https://stackoverflow.com/a/6269487/786644
+    - not checked -> unchecked
   - on click, dropdown letting you check all, visible, or clear https://ux.stackexchange.com/a/102463
+  - make sure click on cell opens menu
 - ... -> Bulk select players
   - if checkboxes are shown by default, still have this to show the "Bulk" button
 - replace the "10 per page" menu with a "Bulk actions" dropdown button
@@ -35,8 +33,6 @@ tables should be aware that rows are players who have pids. add bulk/all/select
   - first, make a popup appear when you click the link explaining new UI. set reminder to delete eventually
 - add to all pages
 - places to use
-  - compare multiple players
-    - needs to know pid/playoffs/season for each row, could put in metadata
   - could be used for places where we already have check boxes - set showBulkSelectCheckboxes to true even if bulkSelectRows is false
     - trading block
     - trade
@@ -46,10 +42,13 @@ tables should be aware that rows are players who have pids. add bulk/all/select
     - ProtectPlayers
     - search for other places with checkboxes
 - interaction with hideAllControls?
+- for multiple watchlists, maybe have it pop up dialog to let you select, rather than cycling
 - test
   - bulk actions noop with nothing selected
   - with supercols
   - with col filters showing
+  - career totals stats page
+  - all seasons stats page
 - blog
   - annoying to flag multiple players. compare players links.
   - watch list color

src/ui/components/DataTable/BulkActions.tsx

@@ -64,7 +64,6 @@ export const BulkActions = ({
 			<Dropdown.Toggle
 				id={`datatable-bulk-actions-${name}`}
 				size="sm"
-				title="Bulk actions"
 				variant={hasSomeSelected ? "primary" : "secondary"}
 			>
 				Bulk actions

src/ui/components/DataTable/Header.tsx

@@ -1,7 +1,15 @@
 import clsx from "clsx";
-import { type SyntheticEvent, type MouseEvent, Fragment } from "react";
+import {
+	type SyntheticEvent,
+	type MouseEvent,
+	Fragment,
+	forwardRef,
+	useRef,
+	useLayoutEffect,
+} from "react";
 import type { Col, SortBy, SuperCol } from ".";
 import { range } from "../../../common/utils";
+import { Dropdown } from "react-bootstrap";
 
 const FilterHeader = ({
 	colOrder,
@@ -157,26 +165,78 @@ export const getSortClassName = (sortBys: SortBy[], i: number) => {
 	return className;
 };
 
-const BulkSelectHeaderCheckbox = ({ checked }: { checked: boolean }) => {
-	const onChange = () => {
-		console.log("CHANGE");
-	};
+type CheckboxState = "checked" | "unchecked" | "indeterminate";
+
+// forwardRef needed for react-bootstrap types
+const CustomToggle = forwardRef(
+	(
+		{
+			children,
+			onClick,
+		}: {
+			children: CheckboxState;
+			onClick: (event: MouseEvent) => void;
+		},
+		ref,
+	) => {
+		const inputRef = useRef<HTMLInputElement>(null);
+
+		useLayoutEffect(() => {
+			if (inputRef.current) {
+				if (children === "indeterminate") {
+					inputRef.current.indeterminate = true;
+				} else if (children === "checked") {
+					inputRef.current.checked = true;
+					inputRef.current.indeterminate = false;
+				} else {
+					inputRef.current.checked = false;
+					inputRef.current.indeterminate = false;
+				}
+			}
+		}, [children]);
+
+		return (
+			<input
+				className="form-check-input"
+				type="checkbox"
+				onClick={event => {
+					event.preventDefault();
+					onClick(event);
+				}}
+				ref={element => {
+					inputRef.current = element;
+
+					if (typeof ref === "function") {
+						ref(element);
+					} else if (ref) {
+						ref.current = element;
+					}
+				}}
+			/>
+		);
+	},
+);
+
+const BulkSelectHeaderCheckbox = () => {
+	const state: CheckboxState = "indeterminate";
 
 	// Similar to singleCheckbox stuff below
 	const onClickCell = (event: MouseEvent) => {
 		if (event.target && (event.target as any).tagName === "TH") {
-			onChange();
+			console.log("TODO, SHOULD OPEN MENU");
 		}
 	};
 
 	return (
 		<th data-no-row-highlight onClick={onClickCell}>
-			<input
-				className="form-check-input"
-				type="checkbox"
-				checked={checked}
-				onChange={onChange}
-			/>
+			<Dropdown>
+				<Dropdown.Toggle as={CustomToggle}>{state}</Dropdown.Toggle>
+				<Dropdown.Menu>
+					<Dropdown.Item>Select all</Dropdown.Item>
+					<Dropdown.Item>Select visible</Dropdown.Item>
+					<Dropdown.Item>Clear</Dropdown.Item>
+				</Dropdown.Menu>
+			</Dropdown>
 		</th>
 	);
 };
@@ -214,9 +274,7 @@ const Header = ({
 				/>
 			) : null}
 			<tr>
-				{showBulkSelectCheckboxes ? (
-					<BulkSelectHeaderCheckbox checked={false} />
-				) : null}
+				{showBulkSelectCheckboxes ? <BulkSelectHeaderCheckbox /> : null}
 				{colOrder.map(({ colIndex }) => {
 					const {
 						classNames: colClassNames,