Shift Select

"use client";

import * as React from "react";

/**
 * Manage a set of selected items with `add`/`remove` via the `change` callback.
 */
export function useSelected<P>(initial: P[] = []) {
  const [selected, setSelected] = React.useState<Set<P>>(
    () => new Set(initial),
  );

  const change = React.useCallback((addOrRemove: boolean, items: P[]) => {
    setSelected((prev) => {
      const next = new Set(prev);
      for (const item of items) {
        if (addOrRemove) next.add(item);
        else next.delete(item);
      }
      return next;
    });
  }, []);

  return { selected, change, setSelected };
}

/**
 * Enable Shift+click range selection on a checkbox list.
 *
 * Based on https://stereobooster.com/posts/react-hook-to-select-multiple-items-with-a-shift/
 *
 * Returns an `onChange` handler to wire onto each `<input type="checkbox">`.
 * Pair with `useSelected` to manage the selection set.
 *
 * - Normal click: toggles one item, sets it as the anchor.
 * - Shift+click: fills the range `[anchor, clicked]` using the anchor's
 *   direction, and undoes any previous shift-range that extended past the
 *   new endpoint (so shift-clicking again to shrink the selection works).
 */
export function useShiftSelect<P>(
  items: P[],
  change: (addOrRemove: boolean, items: P[]) => void,
) {
  const [previousSelected, setPreviousSelected] = React.useState<P | null>(
    null,
  );
  const [previousChecked, setPreviousChecked] = React.useState(false);
  const [currentSelected, setCurrentSelected] = React.useState<P | null>(null);
  const shiftRef = React.useRef(false);

  // Track shift key globally — React's checkbox onChange nativeEvent is a
  // plain Event (not MouseEvent), so it has no shiftKey property.
  React.useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      shiftRef.current = e.shiftKey;
    };
    const onBlur = () => {
      shiftRef.current = false;
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("keyup", onKey);
    window.addEventListener("blur", onBlur);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("keyup", onKey);
      window.removeEventListener("blur", onBlur);
    };
  }, []);

  const onChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>, item: P) => {
      if (shiftRef.current) {
        const current = items.findIndex((x) => x === item);
        const previous = items.findIndex((x) => x === previousSelected);
        const previousCurrent = items.findIndex((x) => x === currentSelected);
        const start = Math.min(current, previous);
        const end = Math.max(current, previous);

        if (start > -1 && end > -1) {
          // Apply anchor direction to new range.
          change(previousChecked, items.slice(start, end + 1));

          // Undo the old tail that is no longer in range.
          if (previousCurrent > end) {
            change(!previousChecked, items.slice(end + 1, previousCurrent + 1));
          }
          if (previousCurrent < start) {
            change(!previousChecked, items.slice(previousCurrent, start));
          }

          setCurrentSelected(item);
          return;
        }
      } else {
        setPreviousSelected(item);
        setCurrentSelected(null);
        setPreviousChecked(event.target.checked);
      }

      change(event.target.checked, [item]);
    },
    [change, items, previousSelected, previousChecked, currentSelected],
  );

  return onChange;
}

const { selected, change } = useSelected<string>();
const onChange = useShiftSelect(items, change);

<input
  type="checkbox"
  checked={selected.has(item)}
  onChange={(e) => onChange(e, item)}
/>;