@scrabble-solver/scrabble-solver 2.13.6 → 2.13.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.6",
+  "version": "2.13.8",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -27,28 +27,27 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.16",
+    "@floating-ui/react": "^0.26.17",
     "@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.8",
+    "@scrabble-solver/constants": "^2.13.8",
+    "@scrabble-solver/dictionaries": "^2.13.8",
+    "@scrabble-solver/logger": "^2.13.8",
+    "@scrabble-solver/solver": "^2.13.8",
+    "@scrabble-solver/types": "^2.13.8",
+    "@scrabble-solver/word-definitions": "^2.13.8",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^14.2.3",
+    "next": "^14.2.4",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
     "react-cool-onclickoutside": "^1.7.0",
     "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",
@@ -71,7 +70,7 @@
     "@types/react-window": "^1.8.8",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "sass": "^1.77.4"
+    "sass": "^1.77.5"
   },
-  "gitHead": "940c0be24a464f8db603e4f6e7cb727486e9b154"
+  "gitHead": "294a7a790843ef9d260be52a3144e323c8ac0641"
 }

package/src/components/Alert/Alert.module.scss

@@ -14,18 +14,9 @@
   justify-content: center;
   padding: var(--spacing--m);
   color: var(--color--foreground--secondary);
-
-  [dir='ltr'] & {
-    border-top-left-radius: var(--border--radius);
-    border-bottom-left-radius: var(--border--radius);
-    border-right: var(--border);
-  }
-
-  [dir='rtl'] & {
-    border-top-right-radius: var(--border--radius);
-    border-bottom-right-radius: var(--border--radius);
-    border-left: var(--border);
-  }
+  border-start-start-radius: var(--border--radius);
+  border-end-start-radius: var(--border--radius);
+  border-inline-end: var(--border);
 
   .error & {
     background-color: var(--color--red--light);

package/src/components/Board/Board.module.scss

@@ -46,10 +46,7 @@
 .iconBackground,
 .icon {
   position: absolute;
-  top: calc((100% - var(--size)) / 2);
-  right: calc((100% - var(--size)) / 2);
-  bottom: calc((100% - var(--size)) / 2);
-  left: calc((100% - var(--size)) / 2);
+  inset: calc((100% - var(--size)) / 2);
   width: var(--size);
   height: var(--size);
 }

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/components/Actions/Actions.module.scss

@@ -18,36 +18,16 @@
   }
 
   & + & {
-    [dir='ltr'] & {
-      border-left: none;
-    }
-
-    [dir='rtl'] & {
-      border-right: none;
-    }
+    border-inline-start: none;
   }
 
-  [dir='ltr'] & {
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+  &:first-child {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
-  [dir='rtl'] & {
-    &:first-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:last-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  &:last-child {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
 }

package/src/components/Board/components/Cell/Cell.module.scss

@@ -7,10 +7,7 @@
 
   input {
     position: absolute;
-    top: -100%;
-    right: -100%;
-    left: -100%;
-    bottom: -100%;
+    inset: -100%;
     width: 300%;
     height: 300%;
     clip-path: inset((100% / 3));
@@ -55,43 +52,19 @@
   @include lighthouse-input-size-hack;
 
   &.sharpTopLeft {
-    [dir='ltr'] & {
-      border-top-left-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-top-right-radius: 0;
-    }
+    border-start-start-radius: 0;
   }
 
   &.sharpTopRight {
-    [dir='ltr'] & {
-      border-top-right-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-top-left-radius: 0;
-    }
+    border-start-end-radius: 0;
   }
 
   &.sharpBottomLeft {
-    [dir='ltr'] & {
-      border-bottom-left-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-bottom-right-radius: 0;
-    }
+    border-end-start-radius: 0;
   }
 
   &.sharpBottomRight {
-    [dir='ltr'] & {
-      border-bottom-right-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-bottom-left-radius: 0;
-    }
+    border-end-end-radius: 0;
   }
 
   &:focus-within {

package/src/components/Board/components/InputPrompt/InputPrompt.module.scss

@@ -9,15 +9,8 @@
 }
 
 .toggleDirection {
-  [dir='ltr'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .input {
@@ -32,15 +25,8 @@
 }
 
 .insert {
-  [dir='ltr'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 
 .insertIcon {

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

@@ -1,4 +1,4 @@
-/* eslint-disable max-statements */
+/* eslint-disable max-lines, max-statements */
 
 import { BONUS_CHARACTER, BONUS_WORD } from '@scrabble-solver/constants';
 import { useMemo } from 'react';
@@ -146,10 +146,21 @@ const useBackgroundImage = () => {
           </symbol>
         </defs>
 
-        <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+        {showCoordinates === 'hidden' && (
+          <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+        )}
 
         {showCoordinates !== 'hidden' && (
           <>
+            <rect fill={COLOR_BACKGROUND} height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+            <rect
+              fill="white"
+              height={viewBoxHeight - coordinatesSize}
+              width={viewBoxWidth - coordinatesSize}
+              x={direction === 'ltr' ? coordinatesSize : 0}
+              y={coordinatesSize}
+            />
+
             <rect fill={COLOR_BACKGROUND} height={coordinatesSize} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
             <rect
               fill={COLOR_BACKGROUND}
@@ -159,10 +170,10 @@ const useBackgroundImage = () => {
               y="0"
               width={coordinatesSize}
             />
-            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize} />
+            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
             <use
               href={`#${VERTICAL_LINE}`}
-              x={direction === 'ltr' ? coordinatesSize : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
+              x={direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
             />
           </>
         )}

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.module.scss

@@ -77,12 +77,5 @@
   flex: 1;
   font-size: var(--font--size--h3);
   transition: var(--transition);
-
-  [dir='ltr'] & {
-    text-align: left;
-  }
-
-  [dir='rtl'] & {
-    text-align: right;
-  }
+  text-align: start;
 }

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/Dictionary/Dictionary.module.scss

@@ -55,14 +55,7 @@
 
 .definitions {
   margin: 0;
-
-  [dir='ltr'] & {
-    padding-left: var(--spacing--l);
-  }
-
-  [dir='rtl'] & {
-    padding-right: var(--spacing--l);
-  }
+  padding-inline-start: var(--spacing--l);
 }
 
 .definition {

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/Loading/Loading.module.scss

@@ -1,10 +1,7 @@
 .loading,
 .dim {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
 }
 
 .loading {

package/src/components/Modal/Modal.module.scss

@@ -3,14 +3,7 @@
 .modal,
 .closeButton {
   top: 0;
-
-  [dir='ltr'] & {
-    right: 0;
-  }
-
-  [dir='rtl'] & {
-    left: 0;
-  }
+  inset-inline-end: 0;
 }
 
 .modal {
@@ -92,14 +85,7 @@
 .title {
   font-size: var(--font--size--h1);
   font-weight: 300;
-
-  [dir='ltr'] & {
-    padding-right: calc(var(--square-button--size) + var(--spacing--s));
-  }
-
-  [dir='rtl'] & {
-    padding-left: calc(var(--square-button--size) + var(--spacing--s));
-  }
+  padding-inline-end: calc(var(--square-button--size) + var(--spacing--s));
 }
 
 .closeButton {

package/src/components/Rack/Rack.module.scss

@@ -77,25 +77,11 @@
 }
 
 .sharpLeft {
-  [dir='ltr'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 
 .sharpRight {
-  [dir='ltr'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }

package/src/components/Rack/components/InputPrompt/InputPrompt.module.scss

@@ -10,10 +10,7 @@
   @include text-input;
 
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   border-radius: var(--border--radius);

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>
   );
 };