Support scrolling clue into view when selected (#1980)

* Fix height of single column clue list and make scrollable

* Scroll currently selected clue into view

* Add missing closing bracket

* Determine whether cluelist is scrollable

* Allow automatic scrolling to selected clue

Author: jamesmockett

libs/@guardian/react-crossword/src/components/Clue.tsx

@@ -3,7 +3,7 @@ import { isString } from '@guardian/libs';
 import { visuallyHidden } from '@guardian/source/foundations';
 import { SvgTickRound } from '@guardian/source/react-components';
 import type { HTMLAttributes } from 'react';
-import { memo } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import type { CAPIEntry } from '../@types/CAPI';
 import { useTheme } from '../context/Theme';
 
@@ -52,6 +52,7 @@ type Props = {
 	isSelected?: boolean;
 	isComplete?: boolean;
 	isValid?: boolean;
+	scrollToSelected?: boolean;
 	selectClue: (entry: CAPIEntry) => void;
 } & HTMLAttributes<HTMLDivElement>;
 
@@ -61,10 +62,24 @@ const ClueComponent = ({
 	isSelected,
 	isComplete,
 	isValid,
+	scrollToSelected,
 	selectClue,
 	...props
 }: Props) => {
 	const theme = useTheme();
+	const clueRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const clue = clueRef.current;
+
+		if (!clue) {
+			return;
+		}
+
+		if (isSelected && scrollToSelected) {
+			clue.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+		}
+	}, [isSelected, scrollToSelected]);
 
 	return (
 		<div
@@ -88,6 +103,7 @@ const ClueComponent = ({
 				}
 			`}
 			onClick={() => selectClue(entry)}
+			ref={clueRef}
 			{...props}
 		>
 			<span

libs/@guardian/react-crossword/src/components/Clues.tsx

@@ -12,6 +12,7 @@ import { Clue } from './Clue';
 
 type Props = {
 	direction: Direction;
+	scrollToSelected?: boolean;
 	/** Use this to provide a custom header component for the list of clues. If
 	 * undefined, the word 'across' or 'down' will be displayed, unstyled. */
 	Header?: ComponentType<{
@@ -38,7 +39,7 @@ const Label = memo(({ direction }: { direction: Direction }) => {
 	);
 });
 
-export const Clues = ({ direction, Header }: Props) => {
+export const Clues = ({ direction, scrollToSelected, Header }: Props) => {
 	const { entries, getId, cells } = useData();
 	const { progress } = useProgress();
 	const { currentEntryId, setCurrentEntryId } = useCurrentClue();
@@ -208,6 +209,7 @@ export const Clues = ({ direction, Header }: Props) => {
 								isSelected={isSelected}
 								isComplete={complete}
 								isValid={isValid}
+								scrollToSelected={scrollToSelected}
 								key={entry.id}
 								id={getId(entry.id)}
 								tabIndex={-1}