@scrabble-solver/scrabble-solver 2.15.10 → 2.15.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.15.10",
+  "version": "2.15.12",
   "description": "Scrabble Solver 2 - App",
   "repository": {
     "type": "git",
@@ -21,28 +21,29 @@
     "clean": "rimraf .next/",
     "debug": "NODE_OPTIONS='--inspect' next dev",
     "dev": "env-cmd next dev",
-    "start": "env-cmd next start -p 3333"
+    "start": "env-cmd next start -p 3333",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.5",
+    "@floating-ui/react": "^0.27.9",
     "@kamilmielnik/trie": "^4.0.0",
-    "@reduxjs/toolkit": "^2.6.1",
-    "@scrabble-solver/configs": "^2.15.10",
-    "@scrabble-solver/constants": "^2.15.10",
-    "@scrabble-solver/dictionaries": "^2.15.10",
-    "@scrabble-solver/logger": "^2.15.10",
-    "@scrabble-solver/solver": "^2.15.10",
-    "@scrabble-solver/types": "^2.15.10",
-    "@scrabble-solver/word-definitions": "^2.15.10",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@scrabble-solver/configs": "^2.15.12",
+    "@scrabble-solver/constants": "^2.15.12",
+    "@scrabble-solver/dictionaries": "^2.15.12",
+    "@scrabble-solver/logger": "^2.15.12",
+    "@scrabble-solver/solver": "^2.15.12",
+    "@scrabble-solver/types": "^2.15.12",
+    "@scrabble-solver/word-definitions": "^2.15.12",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^15.2.4",
+    "next": "^15.3.2",
     "normalize.css": "^8.0.1",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
     "react-cool-onclickoutside": "^1.7.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-highlight-words": "^0.21.0",
     "react-modal": "^3.16.3",
     "react-redux": "^9.2.0",
@@ -60,8 +61,8 @@
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/classnames": "^2.3.4",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
     "@types/react-highlight-words": "^0.20.0",
     "@types/react-modal": "^3.16.3",
     "@types/react-portal": "^4.0.7",
@@ -69,7 +70,7 @@
     "@types/react-window": "^1.8.8",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "sass": "^1.86.0"
+    "sass": "^1.89.0"
   },
-  "gitHead": "dab5a817c1bde1a3ebf8e8907215adf12af5cb27"
+  "gitHead": "1eeef2b2975e63b195885dd2636c53624d300c6b"
 }

package/src/api/getServerLoggingData.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest } from 'next';
+import { type NextApiRequest } from 'next';
 
 interface ServerLoggingData {
   origin?: string;

package/src/api/isBoardValid.ts

@@ -1,4 +1,4 @@
-import { BoardJson, CellJson, Config } from '@scrabble-solver/types';
+import { type BoardJson, type CellJson, type Config } from '@scrabble-solver/types';
 
 import { isRowValid } from './isRowValid';
 

package/src/api/isCellValid.ts

@@ -1,4 +1,4 @@
-import { CellJson, Config } from '@scrabble-solver/types';
+import { type CellJson, type Config } from '@scrabble-solver/types';
 
 import { isCharacterValid } from './isCharacterValid';
 

package/src/api/isRowValid.ts

@@ -1,4 +1,4 @@
-import { CellJson, Config } from '@scrabble-solver/types';
+import { type CellJson, type Config } from '@scrabble-solver/types';
 
 import { isCellValid } from './isCellValid';
 

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, HTMLProps, ReactNode, SVGAttributes } from 'react';
+import { type FunctionComponent, type HTMLProps, type ReactNode, type SVGAttributes } from 'react';
 
 import { Check, CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from 'icons';
 

package/src/components/Badge/Badge.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
 
 import styles from './Badge.module.scss';
 

package/src/components/Board/Board.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable max-lines, max-statements */
 
-import { FloatingPortal, ReferenceType } from '@floating-ui/react';
+import { FloatingPortal, type ReferenceType } from '@floating-ui/react';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, FunctionComponent, useCallback, useState } from 'react';
+import { type CSSProperties, type FocusEventHandler, type FunctionComponent, useCallback, useState } from 'react';
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
@@ -12,11 +12,10 @@ import { LOCALE_FEATURES } from 'i18n';
 import { TRANSITION } from 'parameters';
 import {
   boardSlice,
-  cellFilterSlice,
-  selectFilteredCells,
+  cellFiltersSlice,
+  selectCellFilters,
   selectInputMode,
   selectLocale,
-  selectRowsWithCandidate,
   selectShowCoordinates,
   solveSlice,
   useTypedSelector,
@@ -26,6 +25,7 @@ import styles from './Board.module.scss';
 import { BoardPure } from './BoardPure';
 import { Actions, InputPrompt } from './components';
 import { useBoardStyle, useFloatingActions, useFloatingFocus, useFloatingInputPrompt, useGrid } from './hooks';
+import { selectRowsWithCandidate } from './selectors';
 
 interface Props {
   className?: string;
@@ -36,7 +36,7 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
   const locale = useTypedSelector(selectLocale);
   const rows = useTypedSelector(selectRowsWithCandidate);
   const inputMode = useTypedSelector(selectInputMode);
-  const filteredCells = useTypedSelector(selectFilteredCells);
+  const cellFilters = useTypedSelector(selectCellFilters);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
   const { cellSize, coordinatesFontSize, coordinatesSize } = useAppLayout();
   const [
@@ -140,7 +140,7 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
       inputRef.current?.focus();
     }
 
-    dispatch(cellFilterSlice.actions.toggle(cell));
+    dispatch(cellFiltersSlice.actions.toggle(cell));
   }, [cell, dispatch, inputMode, inputRef]);
 
   const ref = useOnclickOutside(() => setHasFocus(false), {
@@ -151,11 +151,11 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
     <>
       <BoardPure
         className={className}
+        cellFilters={cellFilters}
         cellSize={cellSize}
         coordinatesFontSize={coordinatesFontSize}
         coordinatesSize={coordinatesSize}
         direction={LOCALE_FEATURES[locale].direction}
-        filteredCells={filteredCells}
         inputRefs={inputRefs}
         ref={ref}
         rows={rows}

package/src/components/Board/BoardPure.tsx

@@ -1,13 +1,13 @@
-import { Cell as CellModel, ShowCoordinates } from '@scrabble-solver/types';
+import { type Cell as CellModel, type ShowCoordinates } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
-  CSSProperties,
-  ChangeEventHandler,
-  ClipboardEventHandler,
-  FocusEventHandler,
+  type CSSProperties,
+  type ChangeEventHandler,
+  type ClipboardEventHandler,
+  type FocusEventHandler,
   Fragment,
-  KeyboardEventHandler,
-  RefObject,
+  type KeyboardEventHandler,
+  type RefObject,
   forwardRef,
   memo,
 } from 'react';
@@ -15,18 +15,18 @@ import {
 import { Ban, FlagFill } from 'icons';
 import { getCoordinate } from 'lib';
 import { BORDER_WIDTH } from 'parameters';
-import { CellFilterEntry } from 'types';
+import { type CellFilter } from 'types';
 
 import styles from './Board.module.scss';
 import { Cell } from './components';
 
 interface Props {
   className?: string;
+  cellFilters: CellFilter[];
   cellSize: number;
   coordinatesFontSize: number;
   coordinatesSize: number;
   direction: 'ltr' | 'rtl';
-  filteredCells: CellFilterEntry[];
   inputRefs: RefObject<HTMLInputElement | null>[][];
   rows: CellModel[][];
   showCoordinates: ShowCoordinates;
@@ -46,7 +46,7 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
       coordinatesFontSize,
       coordinatesSize,
       direction,
-      filteredCells,
+      cellFilters,
       inputRefs,
       rows,
       showCoordinates,
@@ -92,7 +92,7 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
         to prevent flickering on blob URL change (i.e. when flagging a field,
         but not when changing game type since user's attention is not on the board
         when that happens)*/}
-      {filteredCells.map(({ x, y, type }) => {
+      {cellFilters.map(({ x, y, type }) => {
         const Icon = type === 'exclude' ? Ban : FlagFill;
 
         return (
@@ -134,7 +134,7 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
               cell={cell}
               cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
               cellLeft={x > 0 ? rows[y][x - 1] : undefined}
-              cellRight={x < rows.length - 1 ? rows[y][x + 1] : undefined}
+              cellRight={x < rows[y].length - 1 ? rows[y][x + 1] : undefined}
               cellTop={y > 0 ? rows[y - 1][x] : undefined}
               inputRef={inputRefs[y][x]}
               key={x}

package/src/components/Board/components/Actions/Actions.tsx

@@ -1,13 +1,13 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
-import { Cell } from '@scrabble-solver/types';
+import { type Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { forwardRef, HTMLProps, MouseEventHandler } from 'react';
+import { forwardRef, type HTMLProps, type MouseEventHandler } from 'react';
 
 import { useIsTouchDevice } from 'hooks';
 import { Keyboard, Square, SquareFill } from 'icons';
 import { findCell, isMac } from 'lib';
 import { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from 'state';
-import { Direction } from 'types';
+import { type Direction } from 'types';
 
 import { Button } from '../../../Button';
 import { ToggleDirectionButton } from '../ToggleDirectionButton';

package/src/components/Board/components/Actions/lib.ts

@@ -1,10 +1,10 @@
-import { FunctionComponent, SVGAttributes } from 'react';
+import { type FunctionComponent, type SVGAttributes } from 'react';
 
 import { Ban, Eraser, FlagFill } from 'icons';
-import { CellFilterEntry, TranslationKey } from 'types';
+import { type CellFilter, type TranslationKey } from 'types';
 
 export const getNextCellFilter = (
-  filter: CellFilterEntry | undefined,
+  filter: CellFilter | undefined,
 ): {
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
   labelTranslationKey: TranslationKey;

package/src/components/Board/components/Cell/Cell.tsx

@@ -1,13 +1,13 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
-import { Cell as CellModel } from '@scrabble-solver/types';
+import { type Cell as CellModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  FunctionComponent,
-  MouseEventHandler,
-  RefObject,
-  TouchEventHandler,
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type MouseEventHandler,
+  type RefObject,
+  type TouchEventHandler,
   useCallback,
 } from 'react';
 

package/src/components/Board/components/InputPrompt/InputPrompt.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import { FormEventHandler, forwardRef, HTMLProps, MouseEventHandler, useEffect, useState } from 'react';
+import { type FormEventHandler, forwardRef, type HTMLProps, type MouseEventHandler, useEffect, useState } from 'react';
 
 import { Check } from 'icons';
 import { useTranslate } from 'state';
-import { Direction } from 'types';
+import { type Direction } from 'types';
 
 import { Button } from '../../../Button';
 import { ToggleDirectionButton } from '../ToggleDirectionButton';

package/src/components/Board/components/ToggleDirectionButton/ToggleDirectionButton.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent } from 'react';
+import { type ButtonHTMLAttributes, type FunctionComponent } from 'react';
 
 import { useIsTouchDevice } from 'hooks';
 import { ArrowDown } from 'icons';
 import { useTranslate } from 'state';
-import { Direction } from 'types';
+import { type Direction } from 'types';
 
 import { Button } from '../../../Button';
 

package/src/components/Board/hooks/useBackgroundImage.tsx

@@ -11,7 +11,7 @@ import { Star } from 'icons';
 import { getTileSizes } from 'lib';
 import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from 'parameters';
 import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from 'state';
-import { Point } from 'types';
+import { type Point } from 'types';
 
 import { getBonusColor } from '../lib';
 

package/src/components/Board/hooks/useBoardStyle.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, useMemo } from 'react';
+import { type CSSProperties, useMemo } from 'react';
 
 import { useAppLayout } from 'hooks';
 import { getTileSizes } from 'lib';

package/src/components/Board/hooks/useGrid.ts

@@ -1,13 +1,13 @@
 /* eslint-disable max-lines, max-statements */
-import { PayloadAction } from '@reduxjs/toolkit';
+import { type PayloadAction } from '@reduxjs/toolkit';
 import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
-import { Board, Cell } from '@scrabble-solver/types';
+import { Board, type Cell } from '@scrabble-solver/types';
 import {
-  ChangeEvent,
-  ChangeEventHandler,
-  ClipboardEventHandler,
-  KeyboardEventHandler,
-  RefObject,
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type ClipboardEventHandler,
+  type KeyboardEventHandler,
+  type RefObject,
   createRef,
   useCallback,
   useMemo,
@@ -17,11 +17,11 @@ import { useDispatch } from 'react-redux';
 
 import { useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
-import { boardSlice, cellFilterSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
-import { Direction, Point } from 'types';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
+import { boardSlice, cellFiltersSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
+import { type Direction, type Point } from 'types';
 
-import { getPositionInGrid } from '../lib';
+import { createGrid, getPositionInGrid } from '../lib';
 
 const toggleDirection = (direction: Direction) => (direction === 'vertical' ? 'horizontal' : 'vertical');
 
@@ -47,7 +47,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const inputRefs = useMemo(
-    () => createGridOf<RefObject<HTMLInputElement | null>>(width, height, () => createRef()),
+    () => createGrid<RefObject<HTMLInputElement | null>>(width, height, () => createRef()),
     [width, height],
   );
   const [activeIndex, setActiveIndex] = useState<Point>({ x: 0, y: 0 });
@@ -314,7 +314,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
           event.preventDefault();
 
           if (!cell.hasTile()) {
-            dispatch(cellFilterSlice.actions.toggle(position));
+            dispatch(cellFiltersSlice.actions.toggle(position));
           }
 
           return;

package/src/components/Board/lib.ts

@@ -0,0 +1,37 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { type Bonus } from '@scrabble-solver/types';
+
+import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from 'parameters';
+import { type Point } from 'types';
+
+export const createGrid = <T>(width: number, height: number, getInitialValue: (x: number, y: number) => T): T[][] => {
+  return Array.from({ length: height }).map((_row, y) => {
+    return Array.from({ length: width }).map((_cell, x) => {
+      return getInitialValue(x, y);
+    });
+  });
+};
+
+export const getBonusColor = (bonus: Bonus): string => {
+  if (bonus.type === BONUS_WORD) {
+    return COLOR_BONUS_WORD[bonus.multiplier];
+  }
+
+  if (bonus.score) {
+    return COLOR_BONUS_CHARACTER[bonus.score];
+  }
+
+  return COLOR_BONUS_CHARACTER_MULTIPLIER[bonus.multiplier];
+};
+
+export const getPositionInGrid = <T>(grid: T[][], constraint: (value: T) => boolean): Point | undefined => {
+  for (let y = 0; y < grid.length; ++y) {
+    for (let x = 0; x < grid[0].length; ++x) {
+      if (constraint(grid[y][x])) {
+        return { x, y };
+      }
+    }
+  }
+
+  return undefined;
+};

package/src/components/Board/selectors.ts

@@ -0,0 +1,8 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { findCell } from 'lib';
+import { selectBoard, selectResultCandidateCells } from 'state';
+
+export const selectRowsWithCandidate = createSelector([selectBoard, selectResultCandidateCells], (board, cells) => {
+  return board.rows.map((row, y) => row.map((cell, x) => findCell(cells, x, y) || cell));
+});

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, ReactNode, SVGAttributes } from 'react';
+import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode, type SVGAttributes } from 'react';
 
 import { Tooltip } from '../Tooltip';
 

package/src/components/Button/Link.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { AnchorHTMLAttributes, FunctionComponent, ReactNode, SVGAttributes } from 'react';
+import { type AnchorHTMLAttributes, type FunctionComponent, type ReactNode, type SVGAttributes } from 'react';
 
 import { Tooltip } from '../Tooltip';
 

package/src/components/Dictionary/Dictionary.tsx

@@ -1,8 +1,14 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import { useAppLayout } from 'hooks';
-import { selectDictionary, selectDictionaryError, useTranslate, useTypedSelector } from 'state';
+import {
+  selectDictionaryError,
+  selectDictionaryIsLoading,
+  selectDictionaryResults,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import { EmptyState } from '../EmptyState';
 import { Loading } from '../Loading';
@@ -16,7 +22,8 @@ interface Props {
 export const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
   const { dictionaryResultsHeight } = useAppLayout();
-  const { results, isLoading } = useTypedSelector(selectDictionary);
+  const results = useTypedSelector(selectDictionaryResults);
+  const isLoading = useTypedSelector(selectDictionaryIsLoading);
   const error = useTypedSelector(selectDictionaryError);
   const isLastAllowed = results.at(-1)?.isAllowed;
 

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
+import { type ChangeEvent, type FormEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { LOCALE_FEATURES } from 'i18n';

package/src/components/EmptyState/EmptyState.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode, useMemo } from 'react';
+import { type FunctionComponent, type ReactNode, useMemo } from 'react';
 
 import { LOCALE_FEATURES } from 'i18n';
 import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from 'parameters';
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
-import { Translations } from 'types';
+import { type Translations } from 'types';
 
 import { PlainTiles } from '../PlainTiles';
 
@@ -34,7 +34,7 @@ export const EmptyState: FunctionComponent<Props> = ({ children, className, vari
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
-  const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[variant]), [translate, variant]);
+  const title = translate(TITLE_KEY_PER_TYPE[variant]);
   const message = direction === 'ltr' ? title : title.split('').reverse().join('');
   const content = useMemo(() => [message.toUpperCase().split(' ')], [message]);
 

package/src/components/IconButton/IconButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
+import { type ButtonHTMLAttributes, type FunctionComponent, type MouseEventHandler, type SVGAttributes } from 'react';
 
 import { Tooltip } from '../Tooltip';
 

package/src/components/IconButton/Link.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { AnchorHTMLAttributes, FunctionComponent, SVGAttributes } from 'react';
+import { type AnchorHTMLAttributes, type FunctionComponent, type SVGAttributes } from 'react';
 
 import { Tooltip } from '../Tooltip';
 

package/src/components/Key/Key.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
 
 import styles from './Key.module.scss';
 

package/src/components/Keys/Arrows/Arrows.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
 

package/src/components/Keys/index.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import { isMac } from 'lib';
 import { useTranslate } from 'state';

package/src/components/Loading/Loading.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, useMemo } from 'react';
+import { type FunctionComponent, useMemo } from 'react';
 
 import { LOCALE_FEATURES } from 'i18n';
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
@@ -14,19 +14,17 @@ interface Props {
   wave?: boolean;
 }
 
-const prepareContent = (message: string): string[][] => {
-  const uppercased = message.toLocaleUpperCase();
-  const parts = uppercased.split(' ');
-  return [parts];
-};
-
 export const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
   const translation = translate('common.loading');
   const message = direction === 'ltr' ? translation : translation.split('').reverse().join('');
-  const content = useMemo(() => prepareContent(message), [message]);
+  const content = useMemo(() => {
+    const uppercased = message.toLocaleUpperCase();
+    const parts = uppercased.split(' ');
+    return [parts];
+  }, [message]);
 
   return (
     <div aria-label={translation} className={classNames(styles.loading, className)} data-testid="loading" role="status">

package/src/components/Logo/LogoBlueprint.tsx

@@ -5,7 +5,7 @@
  * - transformed into paths (manually with Inkscape)
  * - arranged (centered vertically against respective rows)
  */
-import { CSSProperties, FunctionComponent } from 'react';
+import { type CSSProperties, type FunctionComponent } from 'react';
 
 import { PlainTiles } from '../PlainTiles';
 

package/src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode, useCallback, useEffect, useState } from 'react';
+import { type FunctionComponent, type ReactNode, useCallback, useEffect, useState } from 'react';
 import ReactModal from 'react-modal';
 
 import { CrossSquareFill } from 'icons';
@@ -28,7 +28,9 @@ const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOp
     (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setShouldReturnFocusAfterClose(false);
-        onClose();
+        setTimeout(() => {
+          onClose();
+        }, 0);
       }
     },
     [onClose],

package/src/components/Modal/components/Section/Section.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
 
 import styles from './Section.module.scss';