kokopu-react 3.0.2 → 3.2.0

package/dist/lib/index.d.ts

@@ -28,6 +28,10 @@ export { SquareMarkerIcon, SquareMarkerIconProps } from './icons/SquareMarkerIco
 export { TextMarkerIcon, TextMarkerIconProps } from './icons/TextMarkerIcon';
 export { ArrowMarkerIcon, ArrowMarkerIconProps } from './icons/ArrowMarkerIcon';
 export { ChessPieceIcon, ChessPieceIconProps } from './icons/ChessPieceIcon';
-export { Chessboard, ChessboardProps, SmallScreenLimit } from './chessboard/Chessboard';
+export { SmallScreenLimit } from './chessboard/BoardProperties';
+export { Chessboard, ChessboardProps } from './chessboard/Chessboard';
 export { formatMove, moveFormatter } from './movetext/moveFormatter';
 export { Movetext, MovetextProps, MoveSelectEventOrigin } from './movetext/Movetext';
+export { NavigationButton, NavigationButtonList, isNavigationButton } from './navigationboard/NavigationButton';
+export { firstNodeId, previousNodeId, nextNodeId, lastNodeId } from './navigationboard/NavigationField';
+export { NavigationBoard, NavigationBoardProps } from './navigationboard/NavigationBoard';

package/dist/lib/index.js

@@ -31,4 +31,7 @@ export { ChessPieceIcon } from './icons/ChessPieceIcon';
 export { Chessboard } from './chessboard/Chessboard';
 export { formatMove, moveFormatter } from './movetext/moveFormatter';
 export { Movetext } from './movetext/Movetext';
+export { isNavigationButton } from './navigationboard/NavigationButton';
+export { firstNodeId, previousNodeId, nextNodeId, lastNodeId } from './navigationboard/NavigationField';
+export { NavigationBoard } from './navigationboard/NavigationBoard';
 //# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;gFAqBgF;AAGhF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AAEzC,OAAO,EACN,oBAAoB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,mBAAmB,EAChJ,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAiB,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAyB,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAAE,cAAc,EAAuB,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAuB,MAAM,wBAAwB,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAqC,MAAM,yBAAyB,CAAC;AAExF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAwC,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;gFAqBgF;AAGhF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AAEzC,OAAO,EACH,oBAAoB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,mBAAmB,EAChJ,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAiB,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAyB,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAAE,cAAc,EAAuB,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAuB,MAAM,wBAAwB,CAAC;AAG7E,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAwC,MAAM,qBAAqB,CAAC;AAErF,OAAO,EAA0C,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAChH,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACxG,OAAO,EAAE,eAAe,EAAwB,MAAM,mCAAmC,CAAC"}

package/dist/lib/movetext/Movetext.css

@@ -23,101 +23,88 @@
 
 
 .kokopu-colorTag {
-	width : 1.2em;
-	height: 1.2em;
-	vertical-align: middle;
-	display: inline-block;
-	border: 1px solid black;
-	margin-right: 0.25em;
+    width : 1.2em;
+    height: 1.2em;
+    vertical-align: middle;
+    display: inline-block;
+    border: 1px solid black;
+    margin-right: 0.25em;
 }
 
 .kokopu-headerGroup-whitePlayer .kokopu-colorTag {
-	background-color: white;
+    background-color: white;
 } 
 
 .kokopu-headerGroup-blackPlayer .kokopu-colorTag {
-	background-color: black;
+    background-color: black;
 }
 
 .kokopu-headerGroup-titleRating:before,
 .kokopu-header-round:before {
-	content: "\a0("; /* \a0 ==   */
+    content: "\a0("; /* \a0 ==   */
 }
 
 .kokopu-headerGroup-titleRating:after,
 .kokopu-header-round:after {
-	content: ")";
+    content: ")";
 }
 
 .kokopu-header-round,
 .kokopu-header-annotator {
-	font-style: italic;
+    font-style: italic;
 }
 
 * + .kokopu-move:before,
 * + .kokopu-gameResult:before,
 * + span.kokopu-comment:before {
-	content: " ";
+    content: " ";
 }
 
 span.kokopu-variation:before {
-	content: " (";
+    content: " (";
 }
 
 span.kokopu-variation:after {
-	content: ")";
+    content: ")";
 }
 
 * + .kokopu-nag:before {
-	content: "\a0"; /* \a0 ==   */
+    content: "\a0"; /* \a0 ==   */
 }
 
 div.kokopu-subVariation {
-	margin-left: 1.5em;
+    margin-left: 1.5em;
 }
 
 .kokopu-move,
 .kokopu-gameResult {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 .kokopu-subVariation .kokopu-move {
-	font-weight: inherit;
+    font-weight: inherit;
 }
 
 .kokopu-diagram {
-	text-align: center;
-	line-height: 0px;
+    text-align: center;
+    line-height: 0px;
 }
 
 .kokopu-moveContent {
-	display: inline-block;
-	padding-left: 1px;
-	padding-right: 1px;
+    display: inline-block;
+    padding-left: 1px;
+    padding-right: 1px;
 }
 
 .kokopu-selectedMove .kokopu-moveContent {
-	background-color: currentcolor;
+    background-color: currentcolor;
 }
 
 .kokopu-selectedMove .kokopu-moveContent > * {
-	filter: invert(1);
+    filter: invert(1);
 }
 
 .kokopu-clickableMove .kokopu-moveContent:hover {
-	text-decoration: underline;
-	cursor: pointer;
-}
-
-.kokopu-focusFieldContainer {
-	position: fixed;
-	bottom: 0px;
-	right: 0px;
-	width: 0px;
-	height: 0px;
-	overflow: hidden;
-}
-
-.kokopu-focusField {
-	position: absolute; /* see #1 */
+    text-decoration: underline;
+    cursor: pointer;
 }

package/dist/lib/movetext/Movetext.d.ts

@@ -23,7 +23,7 @@
 import * as React from 'react';
 import { Database, Game } from 'kokopu';
 import { PieceSymbolMapping } from '../types';
-import { ChessboardProps } from '../chessboard/Chessboard';
+import { StaticBoardGraphicProps } from '../chessboard/BoardProperties';
 import './Movetext.css';
 /**
  * Origin of a "move-selected" event in {@link Movetext}. See {@link MovetextProps.onMoveSelected} for more details.
@@ -31,7 +31,7 @@ import './Movetext.css';
 export type MoveSelectEventOrigin = 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'key-exit' | 'click';
 export interface MovetextProps {
     /**
-     * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
+     * Displayed game. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
      * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
      * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
      */
@@ -45,14 +45,8 @@ export interface MovetextProps {
     /**
      * Options applicable to the diagrams in the comments. See [Chessboard](#/Components/Chessboard) for more details about each option.
      */
-    diagramOptions: {
-        flipped?: ChessboardProps['flipped'];
-        squareSize?: ChessboardProps['squareSize'];
-        coordinateVisible?: ChessboardProps['coordinateVisible'];
-        turnVisible?: ChessboardProps['turnVisible'];
-        colorset?: ChessboardProps['colorset'];
-        pieceset?: ChessboardProps['pieceset'];
-        smallScreenLimits?: ChessboardProps['smallScreenLimits'];
+    diagramOptions: Partial<StaticBoardGraphicProps> & {
+        flipped?: boolean;
     };
     /**
      * Symbols to use for the chess pieces. See {@link moveFormatter}.
@@ -67,7 +61,7 @@ export interface MovetextProps {
      */
     headerVisible: boolean;
     /**
-     * ID of the selected move (or `'start'` for the beginning of the main variation).
+     * ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
      * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
      */
     selection?: string;
@@ -114,47 +108,19 @@ export declare class Movetext extends React.Component<MovetextProps> {
      */
     focus(): void;
     /**
-     * Return the ID of the main variation in the given chess game.
-     * If the given selection corresponds already at the main variation, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "home" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
     static firstNodeId(game: Game, selection: string): string | undefined;
     /**
-     * Return the ID of the node immediately preceding the given selection in the given chess game.
-     * If no such node exists, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "arrow left" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
     static previousNodeId(game: Game, selection: string): string | undefined;
     /**
-     * Return the ID of the node immediately following the given selection in the given chess game.
-     * If no such node exists, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "arrow right" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
     static nextNodeId(game: Game, selection: string): string | undefined;
     /**
-     * Return the ID of the node at then end of the variation in which lies the given selection in the given chess game.
-     * If the selection is already at the end its variation, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "end" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
     static lastNodeId(game: Game, selection: string): string | undefined;
 }

package/dist/lib/movetext/Movetext.js

@@ -21,13 +21,13 @@
  *                                                                            *
  * -------------------------------------------------------------------------- */
 import * as React from 'react';
-import { exception as kokopuException, Database, Game, pgnRead } from 'kokopu';
+import { Game } from 'kokopu';
 import { IllegalArgument } from '../exception';
-import { i18n } from '../i18n';
 import { sanitizeString, sanitizeBoolean, sanitizeOptional } from '../sanitization';
-import { ErrorBox } from '../errorbox/ErrorBox';
+import { parseGame } from '../errorbox/parsing';
+import { firstNodeId as firstNodeIdImpl, previousNodeId as previousNodeIdImpl, nextNodeId as nextNodeIdImpl, lastNodeId as lastNodeIdImpl } from '../navigationboard/NavigationField';
 import { moveFormatter } from './moveFormatter';
-import { MovetextImpl, firstNodeIdImpl, previousNodeIdImpl, nextNodeIdImpl, lastNodeIdImpl } from './MovetextImpl';
+import { MovetextImpl } from './MovetextImpl';
 import './Movetext.css';
 /**
  * Display a chess game, i.e. the headers (name of the players, event, etc.), the moves, and all the related annotations if any (comments, variations, NAGs...).
@@ -39,9 +39,9 @@ export class Movetext extends React.Component {
     }
     render() {
         // Validate the game and game-index attributes.
-        const info = parseGame(this.props.game, this.props.gameIndex);
+        const info = parseGame(this.props.game, this.props.gameIndex, 'Movetext');
         if (info.error) {
-            return (React.createElement(ErrorBox, { title: i18n.INVALID_PGN_ERROR_TITLE, message: info.pgnException.message, text: info.pgnException.pgn, errorIndex: info.pgnException.index, lineNumber: info.pgnException.lineNumber }));
+            return info.errorBox;
         }
         // Validate the appearance attributes.
         if (typeof this.props.diagramOptions !== 'object' || this.props.diagramOptions === null) {
@@ -72,59 +72,36 @@ export class Movetext extends React.Component {
      */
     focus() {
         const movetextImpl = this.implRef.current;
+        // istanbul ignore else
         if (movetextImpl) {
             movetextImpl.focus();
         }
     }
     /**
-     * Return the ID of the main variation in the given chess game.
-     * If the given selection corresponds already at the main variation, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "home" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
+    // istanbul ignore next
     static firstNodeId(game, selection) {
         return firstNodeIdImpl(game, selection);
     }
     /**
-     * Return the ID of the node immediately preceding the given selection in the given chess game.
-     * If no such node exists, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "arrow left" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
+    // istanbul ignore next
     static previousNodeId(game, selection) {
         return previousNodeIdImpl(game, selection);
     }
     /**
-     * Return the ID of the node immediately following the given selection in the given chess game.
-     * If no such node exists, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "arrow right" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
+    // istanbul ignore next
     static nextNodeId(game, selection) {
         return nextNodeIdImpl(game, selection);
     }
     /**
-     * Return the ID of the node at then end of the variation in which lies the given selection in the given chess game.
-     * If the selection is already at the end its variation, `undefined` is returned.
-     *
-     * This corresponds to the operation performed when the user presses key "end" on a `Movetext` component.
-     *
-     * @param game - Considered chess game.
-     * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @public
+     * @deprecated
      */
+    // istanbul ignore next
     static lastNodeId(game, selection) {
         return lastNodeIdImpl(game, selection);
     }
@@ -137,33 +114,4 @@ Movetext.defaultProps = {
     diagramVisible: true,
     headerVisible: true,
 };
-/**
- * Try to interpret the given object as a chess game.
- */
-function parseGame(game, gameIndex) {
-    if (game instanceof Game) {
-        return { error: false, game: game };
-    }
-    else if (game instanceof Database || typeof game === 'string') {
-        if (!Number.isInteger(gameIndex) || gameIndex < 0) {
-            throw new IllegalArgument('Movetext', 'gameIndex');
-        }
-        try {
-            const result = game instanceof Database ? game.game(gameIndex) : pgnRead(game, gameIndex);
-            return { error: false, game: result };
-        }
-        catch (e) {
-            // istanbul ignore else
-            if (e instanceof kokopuException.InvalidPGN) {
-                return { error: true, pgnException: e };
-            }
-            else {
-                throw e;
-            }
-        }
-    }
-    else {
-        throw new IllegalArgument('Movetext', 'game');
-    }
-}
 //# sourceMappingURL=Movetext.js.map

package/dist/lib/movetext/Movetext.js.map

@@ -1 +1 @@
-{"version":3,"file":"Movetext.js","sourceRoot":"","sources":["../../../src/movetext/Movetext.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Movetext.js","sourceRoot":"","sources":["../../../src/movetext/Movetext.tsx"],"names":[],"mappings":"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"}

package/dist/lib/movetext/MovetextImpl.d.ts

@@ -22,18 +22,12 @@
  * -------------------------------------------------------------------------- */
 import * as React from 'react';
 import { Game } from 'kokopu';
-import { ChessboardProps } from '../chessboard/Chessboard';
+import { StaticBoardGraphicProps } from '../chessboard/BoardProperties';
 import './Movetext.css';
 interface MovetextImplProps {
     game: Game;
-    diagramOptions: {
-        flipped?: ChessboardProps['flipped'];
-        squareSize?: ChessboardProps['squareSize'];
-        coordinateVisible?: ChessboardProps['coordinateVisible'];
-        turnVisible?: ChessboardProps['turnVisible'];
-        colorset?: ChessboardProps['colorset'];
-        pieceset?: ChessboardProps['pieceset'];
-        smallScreenLimits?: ChessboardProps['smallScreenLimits'];
+    diagramOptions: Partial<StaticBoardGraphicProps> & {
+        flipped?: boolean;
     };
     moveFormatter: (notation: string) => React.ReactNode;
     diagramVisible: boolean;
@@ -48,7 +42,7 @@ interface MovetextImplProps {
  * This implementation assumes that all the parameter sanitization has been performed beforehand.
  */
 export declare class MovetextImpl extends React.Component<MovetextImplProps> {
-    private focusFieldRef;
+    private navigationFieldRef;
     render(): React.JSX.Element;
     private renderHeaders;
     /**
@@ -67,7 +61,7 @@ export declare class MovetextImpl extends React.Component<MovetextImplProps> {
      * Header containing the annotator information.
      */
     private renderAnnotatorHeader;
-    private renderFocusField;
+    private renderNavigationField;
     private renderBody;
     /**
      * Render the given variation and its sub-variations, recursively.
@@ -82,7 +76,8 @@ export declare class MovetextImpl extends React.Component<MovetextImplProps> {
      */
     private renderComment;
     private extractComment;
-    private handleKeyDownInFocusField;
+    private handleNavigationPressed;
+    private handleExitPressed;
     private fireMoveSelected;
     private handleNodeClicked;
     /**
@@ -90,20 +85,4 @@ export declare class MovetextImpl extends React.Component<MovetextImplProps> {
      */
     focus(): void;
 }
-/**
- * See {@link Movetext.firstNodeId}.
- */
-export declare function firstNodeIdImpl(game: Game, selection: string): string | undefined;
-/**
- * See {@link Movetext.previousNodeId}.
- */
-export declare function previousNodeIdImpl(game: Game, selection: string): string | undefined;
-/**
- * See {@link Movetext.nextNodeId}.
- */
-export declare function nextNodeIdImpl(game: Game, selection: string): string | undefined;
-/**
- * See {@link Movetext.lastNodeId}.
- */
-export declare function lastNodeIdImpl(game: Game, selection: string): string | undefined;
 export {};

package/dist/lib/movetext/MovetextImpl.js

@@ -25,6 +25,7 @@ import { Variation, nagSymbol } from 'kokopu';
 import { i18n } from '../i18n';
 import { fillPlaceholder } from '../util';
 import { Chessboard } from '../chessboard/Chessboard';
+import { NavigationField, firstNodeId, previousNodeId, nextNodeId, lastNodeId } from '../navigationboard/NavigationField';
 import { htmlFilter } from './htmlFilter';
 import './Movetext.css';
 /**
@@ -35,13 +36,13 @@ import './Movetext.css';
 export class MovetextImpl extends React.Component {
     constructor() {
         super(...arguments);
-        this.focusFieldRef = React.createRef();
+        this.navigationFieldRef = React.createRef();
     }
     render() {
         return (React.createElement("div", { className: "kokopu-movetext" },
             this.renderHeaders(),
             this.renderBody(),
-            this.renderFocusField()));
+            this.renderNavigationField()));
     }
     renderHeaders() {
         if (!this.props.headerVisible) {
@@ -124,12 +125,11 @@ export class MovetextImpl extends React.Component {
         }
         return React.createElement("div", { className: "kokopu-header-annotator", key: "annotator" }, filter(fillPlaceholder(i18n.ANNOTATED_BY, annotator)));
     }
-    renderFocusField() {
+    renderNavigationField() {
         if (this.props.interactionMode !== 'selectMove') {
             return undefined;
         }
-        return (React.createElement("div", { className: "kokopu-focusFieldContainer" },
-            React.createElement("a", { className: "kokopu-focusField", href: "#", ref: this.focusFieldRef, onKeyDown: evt => this.handleKeyDownInFocusField(evt) })));
+        return React.createElement(NavigationField, { ref: this.navigationFieldRef, onFirstPressed: () => this.handleNavigationPressed(firstNodeId, 'key-first'), onPreviousPressed: () => this.handleNavigationPressed(previousNodeId, 'key-previous'), onNextPressed: () => this.handleNavigationPressed(nextNodeId, 'key-next'), onLastPressed: () => this.handleNavigationPressed(lastNodeId, 'key-last'), onExitPressed: () => this.handleExitPressed() });
     }
     renderBody() {
         const filter = htmlFilter('comment');
@@ -258,7 +258,7 @@ export class MovetextImpl extends React.Component {
             for (let textSegment of comment.split('[#]')) {
                 if (!isFirstTextSegment) {
                     const position = node instanceof Variation ? node.initialPosition() : node.position();
-                    const diagram = React.createElement(Chessboard, { position: position, squareMarkers: node.tag('csl'), arrowMarkers: node.tag('cal'), textMarkers: node.tag('ctl'), flipped: this.props.diagramOptions.flipped, squareSize: this.props.diagramOptions.squareSize, coordinateVisible: this.props.diagramOptions.coordinateVisible, turnVisible: this.props.diagramOptions.turnVisible, smallScreenLimits: this.props.diagramOptions.smallScreenLimits, colorset: this.props.diagramOptions.colorset, pieceset: this.props.diagramOptions.pieceset });
+                    const diagram = React.createElement(Chessboard, { position: position, squareMarkers: node.tag('csl'), arrowMarkers: node.tag('cal'), textMarkers: node.tag('ctl'), flipped: this.props.diagramOptions.flipped, squareSize: this.props.diagramOptions.squareSize, coordinateVisible: this.props.diagramOptions.coordinateVisible, turnVisible: this.props.diagramOptions.turnVisible, colorset: this.props.diagramOptions.colorset, pieceset: this.props.diagramOptions.pieceset, smallScreenLimits: this.props.diagramOptions.smallScreenLimits });
                     segmentElements.push(React.createElement("div", { className: "kokopu-diagram", key: 'diagram-' + (diagramIndex++) }, diagram));
                 }
                 isFirstTextSegment = false;
@@ -287,30 +287,14 @@ export class MovetextImpl extends React.Component {
         }
         return comment ? comment : undefined;
     }
-    handleKeyDownInFocusField(evt) {
-        if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End' && evt.key !== 'Escape') {
-            return;
+    handleNavigationPressed(transition, evtOrigin) {
+        if (this.props.selection) {
+            this.fireMoveSelected(transition(this.props.game, this.props.selection), evtOrigin);
         }
-        evt.preventDefault();
-        if (!this.props.selection) {
-            return;
-        }
-        if (evt.key === 'Home') {
-            this.fireMoveSelected(firstNodeIdImpl(this.props.game, this.props.selection), 'key-first');
-        }
-        else if (evt.key === 'ArrowLeft') {
-            this.fireMoveSelected(previousNodeIdImpl(this.props.game, this.props.selection), 'key-previous');
-        }
-        else if (evt.key === 'ArrowRight') {
-            this.fireMoveSelected(nextNodeIdImpl(this.props.game, this.props.selection), 'key-next');
-        }
-        else if (evt.key === 'End') {
-            this.fireMoveSelected(lastNodeIdImpl(this.props.game, this.props.selection), 'key-last');
-        }
-        else { // evt.key === 'Escape'
-            if (this.props.game.findById(this.props.selection)) {
-                this.fireMoveSelected(undefined, 'key-exit');
-            }
+    }
+    handleExitPressed() {
+        if (this.props.selection && this.props.game.findById(this.props.selection)) {
+            this.fireMoveSelected(undefined, 'key-exit');
         }
     }
     fireMoveSelected(nodeId, evtOrigin) {
@@ -328,76 +312,13 @@ export class MovetextImpl extends React.Component {
      * Set the focus to the current component.
      */
     focus() {
-        const target = this.focusFieldRef.current;
+        const target = this.navigationFieldRef.current;
+        // istanbul ignore else
         if (target) {
             target.focus();
         }
     }
 }
-/**
- * See {@link Movetext.firstNodeId}.
- */
-export function firstNodeIdImpl(game, selection) {
-    if (!game.findById(selection)) {
-        return undefined;
-    }
-    return selection === 'start' ? undefined : 'start';
-}
-/**
- * See {@link Movetext.previousNodeId}.
- */
-export function previousNodeIdImpl(game, selection) {
-    let currentNode = game.findById(selection);
-    if (!currentNode) {
-        return undefined;
-    }
-    if (currentNode instanceof Variation) {
-        currentNode = currentNode.parentNode();
-        if (!currentNode) {
-            return undefined; // This case corresponds to the first variation being selected initially.
-        }
-    }
-    while (currentNode) {
-        const previousNode = currentNode.previous();
-        if (previousNode) {
-            return previousNode.id();
-        }
-        currentNode = currentNode.parentVariation().parentNode();
-    }
-    return 'start';
-}
-/**
- * See {@link Movetext.nextNodeId}.
- */
-export function nextNodeIdImpl(game, selection) {
-    const currentNode = game.findById(selection);
-    if (!currentNode) {
-        return undefined;
-    }
-    const nextNode = currentNode instanceof Variation ? currentNode.first() : currentNode.next();
-    return nextNode ? nextNode.id() : undefined;
-}
-/**
- * See {@link Movetext.lastNodeId}.
- */
-export function lastNodeIdImpl(game, selection) {
-    let currentNode = game.findById(selection);
-    if (!currentNode) {
-        return undefined;
-    }
-    currentNode = currentNode instanceof Variation ? currentNode.first() : currentNode.next();
-    if (!currentNode) { // Ensure that the input node is not already the last one.
-        return undefined;
-    }
-    let currentNodeNotNull = currentNode;
-    while (true) {
-        const nextNode = currentNodeNotNull.next();
-        if (!nextNode) {
-            return currentNodeNotNull.id();
-        }
-        currentNodeNotNull = nextNode;
-    }
-}
 /**
  * Example: `'hello world'` is turned into `'Hello world'`.
  */