@scrabble-solver/scrabble-solver 2.13.6 → 2.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.6",
+  "version": "2.13.7",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
     "@floating-ui/react": "^0.26.16",
     "@kamilmielnik/trie": "^3.0.0",
     "@reduxjs/toolkit": "^2.2.5",
-    "@scrabble-solver/configs": "^2.13.6",
-    "@scrabble-solver/constants": "^2.13.6",
-    "@scrabble-solver/dictionaries": "^2.13.6",
-    "@scrabble-solver/logger": "^2.13.6",
-    "@scrabble-solver/solver": "^2.13.6",
-    "@scrabble-solver/types": "^2.13.6",
-    "@scrabble-solver/word-definitions": "^2.13.6",
+    "@scrabble-solver/configs": "^2.13.7",
+    "@scrabble-solver/constants": "^2.13.7",
+    "@scrabble-solver/dictionaries": "^2.13.7",
+    "@scrabble-solver/logger": "^2.13.7",
+    "@scrabble-solver/solver": "^2.13.7",
+    "@scrabble-solver/types": "^2.13.7",
+    "@scrabble-solver/word-definitions": "^2.13.7",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
@@ -48,7 +48,6 @@
     "react-dom": "^18.3.1",
     "react-highlight-words": "^0.20.0",
     "react-modal": "^3.16.1",
-    "react-portal": "^4.2.2",
     "react-redux": "^9.1.2",
     "react-window": "^1.8.10",
     "redux-saga": "^1.3.0",
@@ -73,5 +72,5 @@
     "@types/redux-saga": "^0.10.5",
     "sass": "^1.77.4"
   },
-  "gitHead": "940c0be24a464f8db603e4f6e7cb727486e9b154"
+  "gitHead": "6aec8ec770488560a1db1ccc535ebf3886bdd4ec"
 }

package/src/components/Board/BoardPure.tsx

@@ -13,12 +13,12 @@ import {
 } from 'react';
 
 import { FlagFill } from 'icons';
+import { getCoordinate } from 'lib';
 import { BORDER_WIDTH } from 'parameters';
 import { Point } from 'types';
 
 import styles from './Board.module.scss';
 import { Cell } from './components';
-import { getCoordinate } from './lib';
 
 interface Props {
   className?: string;

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

@@ -6,9 +6,9 @@ import {
   ChangeEvent,
   ChangeEventHandler,
   ClipboardEventHandler,
-  createRef,
   KeyboardEventHandler,
   RefObject,
+  createRef,
   useCallback,
   useMemo,
   useState,
@@ -54,14 +54,22 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   const [direction, setLastDirection] = useState<Direction>('horizontal');
   const directionRef = useLatest(direction);
 
+  const safeActiveIndex = useMemo(
+    () => ({
+      x: Math.min(activeIndex.x, width - 1),
+      y: Math.min(activeIndex.y, height - 1),
+    }),
+    [activeIndex, width, height],
+  );
+
   const changeActiveIndex = useCallback(
     (offsetX: number, offsetY: number) => {
-      const x = Math.min(Math.max(activeIndex.x + offsetX, 0), width - 1);
-      const y = Math.min(Math.max(activeIndex.y + offsetY, 0), height - 1);
+      const x = Math.min(Math.max(safeActiveIndex.x + offsetX, 0), width - 1);
+      const y = Math.min(Math.max(safeActiveIndex.y + offsetY, 0), height - 1);
       setActiveIndex({ x, y });
       inputRefs[y][x].current?.focus();
     },
-    [activeIndex, inputRefs],
+    [safeActiveIndex, inputRefs],
   );
 
   const getInputRefPosition = useCallback(
@@ -358,7 +366,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   );
 
   return [
-    { activeIndex, direction, inputRefs },
+    { activeIndex: safeActiveIndex, direction, inputRefs },
     { insertValue, onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
   ];
 };

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

@@ -1,3 +1,2 @@
 export { default as getBonusColor } from './getBonusColor';
-export { default as getCoordinate } from './getCoordinate';
 export { default as getPositionInGrid } from './getPositionInGrid';

package/src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { ButtonHTMLAttributes, FunctionComponent, ReactNode, SVGAttributes } from 'react';
 
-import { useTooltip } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
 
 import styles from './Button.module.scss';
 import Link from './Link';
@@ -23,23 +23,22 @@ const Button: FunctionComponent<Props> = ({
   variant = 'default',
   ...props
 }) => {
-  const triggerProps = useTooltip(tooltip, props);
-
   return (
-    <button
-      className={classNames(styles.button, className, {
-        [styles.default]: variant === 'default',
-        [styles.primary]: variant === 'primary',
-      })}
-      type="button"
-      {...props}
-      {...triggerProps}
-    >
-      <span className={styles.content}>
-        {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
-        {children && <span className={styles.label}>{children}</span>}
-      </span>
-    </button>
+    <Tooltip tooltip={tooltip}>
+      <button
+        className={classNames(styles.button, className, {
+          [styles.default]: variant === 'default',
+          [styles.primary]: variant === 'primary',
+        })}
+        type="button"
+        {...props}
+      >
+        <span className={styles.content}>
+          {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
+          {children && <span className={styles.label}>{children}</span>}
+        </span>
+      </button>
+    </Tooltip>
   );
 };
 

package/src/components/Button/Link.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { AnchorHTMLAttributes, FunctionComponent, ReactNode, SVGAttributes } from 'react';
 
-import { useTooltip } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
 
 import styles from './Button.module.scss';
 
@@ -23,22 +23,21 @@ const Link: FunctionComponent<Props> = ({
   variant = 'default',
   ...props
 }) => {
-  const triggerProps = useTooltip(tooltip, props);
-
   return (
-    <a
-      className={classNames(styles.button, className, {
-        [styles.default]: variant === 'default',
-        [styles.primary]: variant === 'primary',
-      })}
-      {...props}
-      {...triggerProps}
-    >
-      <span className={styles.content}>
-        {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
-        {children && <span className={styles.label}>{children}</span>}
-      </span>
-    </a>
+    <Tooltip tooltip={tooltip}>
+      <a
+        className={classNames(styles.button, className, {
+          [styles.default]: variant === 'default',
+          [styles.primary]: variant === 'primary',
+        })}
+        {...props}
+      >
+        <span className={styles.content}>
+          {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
+          {children && <span className={styles.label}>{children}</span>}
+        </span>
+      </a>
+    </Tooltip>
   );
 };
 

package/src/components/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
 
-import { useTooltip } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
 
 import styles from './IconButton.module.scss';
 import Link from './Link';
@@ -15,14 +15,14 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const IconButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
-  const triggerProps = useTooltip(tooltip, props);
-
   return (
-    <button className={classNames(styles.iconButton, className)} type="button" {...props} {...triggerProps}>
-      <span className={styles.content}>
-        <Icon className={styles.icon} />
-      </span>
-    </button>
+    <Tooltip tooltip={tooltip}>
+      <button className={classNames(styles.iconButton, className)} type="button" {...props}>
+        <span className={styles.content}>
+          <Icon className={styles.icon} />
+        </span>
+      </button>
+    </Tooltip>
   );
 };
 

package/src/components/IconButton/Link.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { AnchorHTMLAttributes, FunctionComponent, SVGAttributes } from 'react';
 
-import { useTooltip } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
 
 import styles from './IconButton.module.scss';
 
@@ -14,14 +14,14 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
-  const triggerProps = useTooltip(tooltip, props);
-
   return (
-    <a className={classNames(styles.iconButton, className)} {...props} {...triggerProps}>
-      <span className={styles.content}>
-        <Icon className={styles.icon} />
-      </span>
-    </a>
+    <Tooltip tooltip={tooltip}>
+      <a className={classNames(styles.iconButton, className)} {...props}>
+        <span className={styles.content}>
+          <Icon className={styles.icon} />
+        </span>
+      </a>
+    </Tooltip>
   );
 };
 

package/src/components/Results/Cell.tsx

@@ -4,7 +4,7 @@ import { FunctionComponent, ReactNode } from 'react';
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { TranslationKey } from 'types';
 
-import { useTooltip } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
 
 import styles from './Results.module.scss';
 
@@ -20,12 +20,11 @@ const Cell: FunctionComponent<Props> = ({ children, className, translationKey, t
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
-  const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || formattedValue}`);
 
   return (
-    <div className={classNames(styles.cell, className)} {...triggerProps}>
-      {children || formattedValue}
-    </div>
+    <Tooltip tooltip={`${translate(translationKey)}: ${tooltip || formattedValue}`}>
+      <div className={classNames(styles.cell, className)}>{children || formattedValue}</div>
+    </Tooltip>
   );
 };
 

package/src/components/Results/HeaderButton.tsx

@@ -6,45 +6,48 @@ import { SortDown, SortUp } from 'icons';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
 import { SortDirection } from 'types';
 
-import { useTooltip } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
 
 import styles from './Results.module.scss';
 import { Column } from './types';
 
 interface Props {
   column: Column;
+  sortable?: boolean;
 }
 
-const HeaderButton = ({ column }: Props): ReactElement => {
+const HeaderButton = ({ column, sortable }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
-  const triggerProps = useTooltip(translate(column.translationKey));
 
   const handleClick = useCallback(() => {
     dispatch(resultsSlice.actions.sort(column.id));
   }, [column.id, dispatch]);
 
   return (
-    <button
-      aria-label={translate(column.translationKey)}
-      className={classNames(styles.headerButton, column.className)}
-      key={column.id}
-      type="button"
-      onClick={handleClick}
-      {...triggerProps}
-    >
-      <span className={styles.cell}>
-        <span className={styles.headerButtonLabel}>{translate(column.translationKey)}</span>
-
-        {sort.column === column.id && (
-          <>
-            {sort.direction === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
-            {sort.direction === SortDirection.Descending && <SortDown className={styles.sortIcon} />}
-          </>
-        )}
-      </span>
-    </button>
+    <Tooltip tooltip={translate(column.translationKey)}>
+      <button
+        aria-label={translate(column.translationKey)}
+        className={classNames(styles.headerButton, column.className, {
+          [styles.sortable]: sortable,
+        })}
+        key={column.id}
+        type="button"
+        onClick={sortable ? handleClick : undefined}
+      >
+        <span className={styles.cell}>
+          <span className={styles.headerButtonLabel}>{translate(column.translationKey)}</span>
+
+          {sort.column === column.id && (
+            <>
+              {sort.direction === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
+              {sort.direction === SortDirection.Descending && <SortDown className={styles.sortIcon} />}
+            </>
+          )}
+        </span>
+      </button>
+    </Tooltip>
   );
 };
 

package/src/components/Results/Result.tsx

@@ -1,10 +1,16 @@
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useRef } from 'react';
+import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useMemo, useRef } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { LOCALE_FEATURES } from 'i18n';
-import { noop } from 'lib';
-import { selectIsResultMatching, selectLocale, selectResultsQuery, useTypedSelector } from 'state';
+import { getCoordinates, noop } from 'lib';
+import {
+  selectIsResultMatching,
+  selectLocale,
+  selectResultsQuery,
+  selectShowCoordinates,
+  useTypedSelector,
+} from 'state';
 import { ResultColumn } from 'types';
 
 import Cell from './Cell';
@@ -31,12 +37,14 @@ const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
+  const showCoordinates = useTypedSelector(selectShowCoordinates);
   const query = useTypedSelector(selectResultsQuery);
   const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
   const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
   const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
+  const coordinates = useMemo(() => getCoordinates(result, showCoordinates), [result, showCoordinates]);
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
   const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);
@@ -61,6 +69,10 @@ const Result = ({ data, index, style }: Props): ReactElement => {
       onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
+        {enabledColumns[ResultColumn.Coordinates] && (
+          <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
+        )}
+
         {enabledColumns[ResultColumn.Word] && (
           <Cell className={styles.word} translationKey="common.word" value={result.word}>
             <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />

package/src/components/Results/Results.module.scss

@@ -55,19 +55,11 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
 .headerButton {
   @include button-reset;
-  @include focus-effect;
 
-  cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
   background-color: var(--color--background);
 
-  &:focus,
-  &:hover {
-    background-color: var(--color--primary);
-    color: var(--color--primary--opposite);
-  }
-
   &:first-child {
     [dir='ltr'] & {
       border-top-left-radius: inherit;
@@ -89,6 +81,18 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   }
 }
 
+.sortable {
+  @include focus-effect;
+
+  cursor: pointer;
+
+  &:focus,
+  &:hover {
+    background-color: var(--color--primary);
+    color: var(--color--primary--opposite);
+  }
+}
+
 .headerButtonLabel {
   @include ellipsis;
 
@@ -139,6 +143,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
   .word {
     @include ellipsis;
+    display: flex;
   }
 }
 
@@ -151,10 +156,13 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   gap: var(--spacing--s);
   line-height: var(--results--item--height);
 
-  .result &:first-child,
-  .headerButton:first-child & {
+  &.word,
+  .headerButton.word & {
     justify-content: flex-start;
+  }
 
+  .result &:first-child,
+  .headerButton:first-child & {
     [dir='ltr'] & {
       padding-left: $row-padding-horizontal;
       text-align: left;
@@ -203,6 +211,13 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   font-weight: bold;
 }
 
+.coordinates {
+  $width: 50px;
+
+  flex: 0 0 $width;
+  max-width: $width;
+}
+
 .solveButton {
   display: block;
   margin: var(--spacing--xl) auto 0;

package/src/components/Results/Results.tsx

@@ -69,7 +69,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
     <div className={classNames(styles.results, className)}>
       <div className={styles.header}>
         {columns.map((column) => (
-          <HeaderButton column={column} key={column.id} />
+          <HeaderButton column={column} key={column.id} sortable={column.sortable} />
         ))}
       </div>
 

package/src/components/Results/getCoordinatesColumn.ts

@@ -0,0 +1,15 @@
+import { ResultColumn } from 'types';
+
+import styles from './Results.module.scss';
+import { Column } from './types';
+
+const getCoordinatesColumn = (): Column => {
+  return {
+    className: styles.coordinates,
+    id: ResultColumn.Coordinates,
+    translationKey: 'settings.showCoordinates',
+    sortable: false,
+  };
+};
+
+export default getCoordinatesColumn;

package/src/components/Results/getLocaleColumns.ts

@@ -10,11 +10,13 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.word,
       id: ResultColumn.Word,
       translationKey: 'common.word',
+      sortable: true,
     },
     {
       className: styles.stat,
       id: ResultColumn.TilesCount,
       translationKey: 'common.tiles',
+      sortable: true,
     },
   ];
 
@@ -23,6 +25,7 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.stat,
       id: ResultColumn.ConsonantsCount,
       translationKey: 'common.consonants',
+      sortable: true,
     });
   }
 
@@ -31,6 +34,7 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.stat,
       id: ResultColumn.VowelsCount,
       translationKey: 'common.vowels',
+      sortable: true,
     });
   }
 
@@ -39,16 +43,19 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.stat,
       id: ResultColumn.BlanksCount,
       translationKey: 'common.blanks',
+      sortable: true,
     },
     {
       className: styles.stat,
       id: ResultColumn.WordsCount,
       translationKey: 'common.words',
+      sortable: true,
     },
     {
       className: styles.points,
       id: ResultColumn.Points,
       translationKey: 'common.points',
+      sortable: true,
     },
   );
 

package/src/components/Results/types.ts

@@ -7,6 +7,7 @@ export interface Column {
   className: string;
   id: ResultColumn;
   translationKey: TranslationKey;
+  sortable?: boolean;
 }
 
 export interface ResultCallbacks {

package/src/components/Results/useColumns.ts

@@ -1,8 +1,9 @@
 import { useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { selectLocale, useTypedSelector } from 'state';
+import { selectLocale, selectShowCoordinates, useTypedSelector } from 'state';
 import { ResultColumn } from 'types';
 
+import getCoordinatesColumn from './getCoordinatesColumn';
 import getLocaleColumns from './getLocaleColumns';
 import { Column } from './types';
 
@@ -17,25 +18,27 @@ const COLUMNS_L = [...COLUMNS_XS];
 const useColumns = (): Column[] => {
   const locale = useTypedSelector(selectLocale);
   const localeColumns = getLocaleColumns(LOCALE_FEATURES[locale]);
+  const showCoordinates = useTypedSelector(selectShowCoordinates);
+  const columns = showCoordinates === 'hidden' ? localeColumns : [getCoordinatesColumn(), ...localeColumns];
   const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL } = useMediaQueries();
 
   if (isLessThanXs) {
-    return localeColumns.filter((column) => COLUMNS_XS.includes(column.id));
+    return columns.filter((column) => COLUMNS_XS.includes(column.id));
   }
 
   if (isLessThanS) {
-    return localeColumns.filter((column) => COLUMNS_S.includes(column.id));
+    return columns.filter((column) => COLUMNS_S.includes(column.id));
   }
 
   if (isLessThanM) {
-    return localeColumns.filter((column) => COLUMNS_M.includes(column.id));
+    return columns.filter((column) => COLUMNS_M.includes(column.id));
   }
 
   if (isLessThanL) {
-    return localeColumns.filter((column) => COLUMNS_L.includes(column.id));
+    return columns.filter((column) => COLUMNS_L.includes(column.id));
   }
 
-  return localeColumns;
+  return columns;
 };
 
 export default useColumns;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,28 @@
+import type { Placement } from '@floating-ui/react';
+import { FunctionComponent, ReactNode } from 'react';
+
+import { TooltipContext } from './context';
+import { TooltipContent } from './TooltipContent';
+import { TooltipTrigger } from './TooltipTrigger';
+import { useTooltip } from './useTooltip';
+
+interface Props {
+  children: ReactNode;
+  placement?: Placement;
+  tooltip?: ReactNode;
+}
+
+export const Tooltip: FunctionComponent<Props> = ({ children, placement, tooltip }) => {
+  const state = useTooltip({ placement });
+
+  if (!tooltip) {
+    return children;
+  }
+
+  return (
+    <TooltipContext.Provider value={state}>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </TooltipContext.Provider>
+  );
+};