@scrabble-solver/scrabble-solver 2.8.2 → 2.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.2",
+  "version": "2.8.3",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16.0.0"
@@ -30,13 +30,13 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.5",
-    "@scrabble-solver/configs": "^2.8.2",
-    "@scrabble-solver/constants": "^2.8.2",
-    "@scrabble-solver/dictionaries": "^2.8.2",
-    "@scrabble-solver/logger": "^2.8.2",
-    "@scrabble-solver/solver": "^2.8.2",
-    "@scrabble-solver/types": "^2.8.2",
-    "@scrabble-solver/word-definitions": "^2.8.2",
+    "@scrabble-solver/configs": "^2.8.3",
+    "@scrabble-solver/constants": "^2.8.3",
+    "@scrabble-solver/dictionaries": "^2.8.3",
+    "@scrabble-solver/logger": "^2.8.3",
+    "@scrabble-solver/solver": "^2.8.3",
+    "@scrabble-solver/types": "^2.8.3",
+    "@scrabble-solver/word-definitions": "^2.8.3",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -68,5 +68,5 @@
     "env-cmd": "^10.1.0",
     "sass": "^1.54.9"
   },
-  "gitHead": "bf360562a79572dd4640ac7cd7f26199f1ba6899"
+  "gitHead": "116f214733e7ad071044f556bcf67e867da3d9ca"
 }

package/src/components/Board/Board.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, Ref } from 'react';
+import { FunctionComponent, Ref } from 'react';
 
 import { selectRowsWithCandidate, useTypedSelector } from 'state';
 

package/src/components/Board/BoardPure.tsx

@@ -1,6 +1,6 @@
 import { Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import React, { FunctionComponent, KeyboardEventHandler, memo, Ref, RefObject } from 'react';
+import { FunctionComponent, KeyboardEventHandler, memo, Ref, RefObject } from 'react';
 
 import styles from './Board.module.scss';
 import { Cell as CellComponent } from './components';

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

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

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

@@ -1,6 +1,6 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell as CellModel } from '@scrabble-solver/types';
-import React, { FunctionComponent, RefObject, useCallback, useMemo } from 'react';
+import { FunctionComponent, RefObject, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';

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

@@ -1,6 +1,6 @@
 import { Bonus, Cell, Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import React, { CSSProperties, FocusEventHandler, FunctionComponent, memo, MouseEventHandler, RefObject } from 'react';
+import { CSSProperties, FocusEventHandler, FunctionComponent, memo, MouseEventHandler, RefObject } from 'react';
 
 import { ArrowDown } from 'icons';
 import { Translate } from 'types';

package/src/components/Button/Button.tsx

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

package/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ChangeEventHandler, FunctionComponent, ReactNode } from 'react';
+import { ChangeEventHandler, FunctionComponent, ReactNode } from 'react';
 
 import { CheckboxChecked, CheckboxEmpty } from 'icons';
 

package/src/components/Dictionary/Dictionary.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { selectDictionary, useTranslate, useTypedSelector } from 'state';
 

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ChangeEvent, FormEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { dictionarySlice, selectDictionary, useTranslate, useTypedSelector } from 'state';

package/src/components/EmptyState/EmptyState.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent, ReactNode, useMemo } from 'react';
+import { FunctionComponent, ReactNode, useMemo } from 'react';
 
 import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from 'parameters';
 import { useTranslate } from 'state';

package/src/components/Key/Key.tsx

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

package/src/components/KeyMap/KeyMap.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { selectConfig, useTranslate, useTypedSelector } from 'state';
 

package/src/components/KeyMap/components/Mapping/Mapping.tsx

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

package/src/components/Loading/Loading.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent, useMemo } from 'react';
+import { FunctionComponent, useMemo } from 'react';
 
 import { useTranslate } from 'state';
 

package/src/components/Logo/Logo.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, FunctionComponent } from 'react';
+import { CSSProperties, FunctionComponent } from 'react';
 
 import PlainTiles from '../PlainTiles';
 

package/src/components/NavButtons/NavButtons.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { Cog, Eraser, Github, Keyboard, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';

package/src/components/NotFound/NotFound.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { DashCircleFill } from 'icons';
 

package/src/components/PlainTiles/PlainTiles.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { CSSProperties, FunctionComponent, useMemo } from 'react';
+import { CSSProperties, FunctionComponent, useMemo } from 'react';
 
 import { createPlainTiles, getViewbox } from './lib';
 import styles from './PlainTiles.module.scss';

package/src/components/PlainTiles/Tile.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 interface Props {
   character: string;

package/src/components/Rack/Rack.tsx

@@ -1,6 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import React, { createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
+import { createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
 
 import { createArray, createKeyboardNavigation, zipCharactersAndTiles } from 'lib';
 import { selectConfig, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';

package/src/components/Rack/RackTile.tsx

@@ -1,6 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile as TileModel } from '@scrabble-solver/types';
-import React, {
+import {
   FunctionComponent,
   KeyboardEventHandler,
   MutableRefObject,

package/src/components/Radio/Radio.tsx

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

package/src/components/RemainingTiles/Character.tsx

@@ -1,6 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { REMAINING_TILES_TILE_SIZE } from 'parameters';
 import { selectCharacterPoints, useTypedSelector } from 'state';

package/src/components/RemainingTiles/RemainingTiles.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 

package/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { useTranslate } from 'state';
 import { TranslationKey } from 'types';

package/src/components/Results/HeaderButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';

package/src/components/Results/Result.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactElement } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { resultsSlice, selectSortedFilteredResults, useTypedSelector } from 'state';

package/src/components/Results/Results.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { FixedSizeList } from 'react-window';
 
 import { RESULTS_HEADER_HEIGHT, RESULTS_INPUT_HEIGHT, RESULTS_ITEM_HEIGHT } from 'parameters';

package/src/components/Results/SolveButton.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Play } from 'icons';

package/src/components/ResultsInput/ResultsInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { resultsSlice, selectResultsQuery, useTranslate, useTypedSelector } from 'state';

package/src/components/Screen/Screen.tsx

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

package/src/components/Settings/Settings.tsx

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

package/src/components/Settings/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { selectAutoGroupTiles, settingsSlice, useTranslate, useTypedSelector } from 'state';

package/src/components/Settings/components/ConfigSetting/ConfigSetting.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { selectConfigId, settingsSlice, useTypedSelector } from 'state';

package/src/components/Settings/components/LocaleSetting/LocaleSetting.tsx

@@ -1,6 +1,6 @@
 import { Locale } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { selectLocale, settingsSlice, useTypedSelector } from 'state';

package/src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 import Modal from 'react-modal';
 
 import { Cross } from 'icons';

package/src/components/Sidebar/components/Section/Section.tsx

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

package/src/components/Splash/Splash.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { AnimationEventHandler, FunctionComponent } from 'react';
+import { AnimationEventHandler, FunctionComponent } from 'react';
 
 import Logo from '../Logo';
 import Screen from '../Screen';

package/src/components/SquareButton/Link.tsx

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

package/src/components/SquareButton/SquareButton.tsx

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

package/src/components/Tile/Tile.tsx

@@ -1,5 +1,5 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
-import React, {
+import {
   createRef,
   FocusEventHandler,
   FunctionComponent,

package/src/components/Tile/TilePure.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {
+import {
   ChangeEventHandler,
   CSSProperties,
   FocusEventHandler,

package/src/components/Tooltip/useTooltip.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {
+import {
   FocusEvent,
   FocusEventHandler,
   MouseEvent,

package/src/components/Well/Well.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 
 import styles from './Well.module.scss';
 

package/src/hooks/usePortal.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useLayoutEffect, useMemo } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { ReactNode, useLayoutEffect, useRef } from 'react';
+import { createRoot, Root } from 'react-dom/client';
 import { Portal } from 'react-portal';
 
 import { canUseDom, noop } from 'lib';
@@ -12,26 +12,36 @@ interface Props {
 type TagName = Parameters<typeof document.createElement>[0];
 
 const usePortal = (children: ReactNode, { disabled = false, tagName = 'div' }: Props = {}): void => {
-  const element = useMemo(() => document.createElement(tagName), [tagName]);
+  const rootRef = useRef<Root | null>(null);
 
   useLayoutEffect(() => {
     if (disabled) {
       return noop;
     }
 
+    const element = document.createElement(tagName);
     document.body.appendChild(element);
+    const root = createRoot(element);
+    rootRef.current = root;
 
     return () => {
-      unmountComponentAtNode(element);
-      document.body.removeChild(element);
+      // We need setTimeout for async unmount, otherwise we get this warning:
+      // "Attempted to synchronously unmount a root while React was already
+      // rendering. React cannot finish unmounting the root until the current
+      // render has completed, which may lead to a race condition.""
+      setTimeout(() => {
+        rootRef.current = null;
+        root.unmount();
+        element.remove();
+      }, 0);
     };
-  }, [disabled, element]);
+  }, [disabled, tagName]);
 
   useLayoutEffect(() => {
-    if (!disabled) {
-      render(<Portal>{children}</Portal>, element);
+    if (rootRef.current) {
+      rootRef.current.render(<Portal>{children}</Portal>);
     }
-  }, [children, disabled, element]);
+  }, [children, disabled, rootRef]);
 };
 
 export default canUseDom ? usePortal : noop;

package/src/lib/memoize.ts

@@ -1,5 +1,5 @@
 interface AnyFunction {
-  (...parameters: any): any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  (...parameters: any[]): any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 interface AnyCachedFunction<T extends AnyFunction> extends AnyFunction {

package/src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import { createAppStore } from 'state';

package/src/pages/_document.tsx

@@ -1,5 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 
 class MyDocument extends Document {
   render(): ReactElement {

package/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import React, { AnimationEvent, FormEvent, FunctionComponent, useState } from 'react';
+import { AnimationEvent, FormEvent, FunctionComponent, useState } from 'react';
 import Modal from 'react-modal';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce, useMeasure } from 'react-use';