@scrabble-solver/scrabble-solver 2.15.4 → 2.15.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.15.4",
+  "version": "2.15.6",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -27,21 +27,21 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.25",
+    "@floating-ui/react": "^0.26.27",
     "@kamilmielnik/trie": "^3.1.0",
     "@reduxjs/toolkit": "^2.3.0",
-    "@scrabble-solver/configs": "^2.15.4",
-    "@scrabble-solver/constants": "^2.15.4",
-    "@scrabble-solver/dictionaries": "^2.15.4",
-    "@scrabble-solver/logger": "^2.15.4",
-    "@scrabble-solver/solver": "^2.15.4",
-    "@scrabble-solver/types": "^2.15.4",
-    "@scrabble-solver/word-definitions": "^2.15.4",
+    "@scrabble-solver/configs": "^2.15.6",
+    "@scrabble-solver/constants": "^2.15.6",
+    "@scrabble-solver/dictionaries": "^2.15.6",
+    "@scrabble-solver/logger": "^2.15.6",
+    "@scrabble-solver/solver": "^2.15.6",
+    "@scrabble-solver/types": "^2.15.6",
+    "@scrabble-solver/word-definitions": "^2.15.6",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^15.0.1",
+    "next": "^15.0.2",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
     "react-cool-onclickoutside": "^1.7.0",
@@ -53,11 +53,11 @@
     "redux-saga": "^1.3.0",
     "store2": "^2.14.3",
     "use-debounce": "^10.0.4",
-    "workbox-expiration": "^7.1.0",
-    "workbox-precaching": "^7.1.0",
-    "workbox-routing": "^7.1.0",
-    "workbox-webpack-plugin": "^7.1.0",
-    "workbox-window": "^7.1.0"
+    "workbox-expiration": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-routing": "^7.3.0",
+    "workbox-webpack-plugin": "^7.3.0",
+    "workbox-window": "^7.3.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
@@ -71,7 +71,7 @@
     "@types/react-window": "^1.8.8",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "sass": "^1.80.3"
+    "sass": "^1.80.6"
   },
-  "gitHead": "5e638b79c52e18a2852880d8ee91759b3e438144"
+  "gitHead": "5667158791e9edc65ae1e818302b230cf4ce1724"
 }

package/src/components/Board/Board.tsx

@@ -178,6 +178,7 @@ const Board: FunctionComponent<Props> = ({ className }) => {
             position: floatingFocus.strategy,
             top: floatingFocus.y + cellSize,
             left: floatingFocus.x,
+            display: floatingFocus.isPositioned ? 'block' : 'none',
             width: cellSize,
             height: cellSize,
             opacity: hasFocus ? 1 : 0,

package/src/components/Button/Button.module.scss

@@ -60,8 +60,13 @@
 .content {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: var(--spacing--l);
   line-height: var(--button--icon--size);
+
+  @include media('<l') {
+    gap: var(--spacing--m);
+  }
 }
 
 .icon {
@@ -74,8 +79,18 @@
 .label {
   @include ellipsis;
 
-  flex: 1;
   font-size: var(--font--size--h3);
   transition: var(--transition);
   text-align: start;
 }
+
+.wide {
+  .content {
+    justify-content: normal;
+    gap: var(--spacing--l);
+  }
+
+  .label {
+    flex: 1;
+  }
+}

package/src/components/Button/Button.tsx

@@ -12,6 +12,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconClassName?: string;
   tooltip?: ReactNode;
   variant?: 'default' | 'primary';
+  wide?: boolean;
 }
 
 const Button: FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const Button: FunctionComponent<Props> = ({
   iconClassName,
   tooltip,
   variant = 'default',
+  wide,
   ...props
 }) => {
   return (
@@ -29,6 +31,7 @@ const Button: FunctionComponent<Props> = ({
         className={classNames(styles.button, className, {
           [styles.default]: variant === 'default',
           [styles.primary]: variant === 'primary',
+          [styles.wide]: wide,
         })}
         type="button"
         {...props}

package/src/components/Button/Link.tsx

@@ -12,6 +12,7 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
   iconClassName?: string;
   tooltip?: ReactNode;
   variant?: 'default' | 'primary';
+  wide?: boolean;
 }
 
 const Link: FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const Link: FunctionComponent<Props> = ({
   iconClassName,
   tooltip,
   variant = 'default',
+  wide,
   ...props
 }) => {
   return (
@@ -29,6 +31,7 @@ const Link: FunctionComponent<Props> = ({
         className={classNames(styles.button, className, {
           [styles.default]: variant === 'default',
           [styles.primary]: variant === 'primary',
+          [styles.wide]: wide,
         })}
         {...props}
       >

package/src/components/Dictionary/Dictionary.module.scss

@@ -4,7 +4,6 @@
   position: relative;
   transition: var(--transition);
   word-break: break-word;
-  overflow: hidden;
 
   &.isAllowed {
     background-color: var(--color--green--light);
@@ -13,6 +12,10 @@
   &.isNotAllowed {
     background-color: var(--color--red--light);
   }
+
+  &:focus-within {
+    @include focus-effect;
+  }
 }
 
 .content {
@@ -20,6 +23,11 @@
 
   height: 100%;
   overflow-y: auto;
+  border-radius: inherit;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .result {

package/src/components/Dictionary/Dictionary.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
+import { useAppLayout } from 'hooks';
 import { selectDictionary, selectDictionaryError, useTranslate, useTypedSelector } from 'state';
 
 import EmptyState from '../EmptyState';
@@ -14,6 +15,7 @@ interface Props {
 
 const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
+  const { dictionaryResultsHeight } = useAppLayout();
   const { results, isLoading } = useTypedSelector(selectDictionary);
   const error = useTypedSelector(selectDictionaryError);
   const isLastAllowed = results.at(-1)?.isAllowed;
@@ -24,6 +26,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         [styles.isAllowed]: isLastAllowed === true,
         [styles.isNotAllowed]: isLastAllowed === false,
       })}
+      style={{ height: dictionaryResultsHeight }}
     >
       <div className={styles.content}>
         {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}

package/src/components/Radio/Radio.module.scss

@@ -16,10 +16,8 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   cursor: pointer;
 
   &.checked {
-    .icon {
-      &::after {
-        background-color: var(--color--primary);
-      }
+    .iconContent {
+      background-color: var(--color--primary);
     }
   }
 
@@ -40,28 +38,24 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
 }
 
 .icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   flex: 0 0 auto;
-  position: relative;
   width: $radio-box-size;
   height: $radio-box-size;
-  border-radius: 50%;
   border: $radio-inner-border solid var(--color--primary);
-  pointer-events: none;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: $radio-inner-size;
-    height: $radio-inner-size;
-    background-color: transparent;
-    border-radius: 50%;
-    transition: var(--transition);
-  }
+  border-radius: 50%;
 }
 
 .content {
   flex: 1;
 }
+
+.iconContent {
+  width: $radio-inner-size;
+  height: $radio-inner-size;
+  background-color: transparent;
+  border-radius: 50%;
+  transition: var(--transition);
+}

package/src/components/Radio/Radio.tsx

@@ -30,7 +30,9 @@ const Radio: FunctionComponent<Props> = ({ checked, children, className, disable
       onChange={onChange}
     />
 
-    <div aria-hidden="true" className={styles.icon} role="img" />
+    <div aria-hidden="true" className={styles.icon} role="img">
+      <div className={styles.iconContent} />
+    </div>
 
     <div className={styles.content}>{children}</div>
   </label>

package/src/hooks/useAppLayout.ts

@@ -17,6 +17,7 @@ import {
   RACK_TILE_SIZE_MAX,
   RESULTS_COLUMN_WIDTH,
   SOLVER_COLUMN_WIDTH,
+  TEXT_INPUT_HEIGHT,
 } from 'parameters';
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
 import { ResultColumnId } from 'types';
@@ -67,6 +68,7 @@ const useAppLayout = () => {
   const maxControlsWidth = tileSize * config.rackSize + 2 * BORDER_WIDTH;
   const showResultsInModal = isLessThanL;
   const dictionaryHeight = showResultsInModal ? DICTIONARY_HEIGHT_MOBILE : DICTIONARY_HEIGHT;
+  const dictionaryResultsHeight = dictionaryHeight - TEXT_INPUT_HEIGHT - 2 * BORDER_WIDTH;
   const modalWidth = isLessThanS ? viewportWidth : MODAL_WIDTH;
   const resultsHeight = isLessThanL
     ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
@@ -86,6 +88,7 @@ const useAppLayout = () => {
     coordinatesFontSize: coordinatesSize * 0.6,
     coordinatesSize,
     dictionaryHeight,
+    dictionaryResultsHeight,
     isModalFullWidth: isLessThanS,
     logoHeight,
     logoWidth: logoHeight * LOGO_ASPECT_RATIO,

package/src/modals/MenuModal/MenuModal.tsx

@@ -37,16 +37,23 @@ const MenuModal: FunctionComponent<Props> = ({
         aria-label={translate('remaining-tiles')}
         className={styles.button}
         Icon={Sack}
+        wide
         onClick={onShowRemainingTiles}
       >
         {translate('remaining-tiles')}
       </Button>
 
-      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} onClick={onShowWords}>
+      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} wide onClick={onShowWords}>
         {translate('words')}
       </Button>
 
-      <Button aria-label={translate('dictionary')} className={styles.button} Icon={BookHalf} onClick={onShowDictionary}>
+      <Button
+        aria-label={translate('dictionary')}
+        className={styles.button}
+        Icon={BookHalf}
+        wide
+        onClick={onShowDictionary}
+      >
         {translate('dictionary')}
       </Button>
 
@@ -57,11 +64,12 @@ const MenuModal: FunctionComponent<Props> = ({
         Icon={Github}
         rel="noopener noreferrer"
         target="_blank"
+        wide
       >
         {translate('github')}
       </Button.Link>
 
-      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
+      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} wide onClick={onShowSettings}>
         <div className={styles.settings}>
           <div className={styles.settingsLabel}>{translate('settings')}</div>
           <Icon aria-hidden="true" className={styles.flag} role="img" />

package/src/state/sagas.ts

@@ -167,7 +167,9 @@ function* onLocaleChange({ payload: locale }: PayloadAction<Locale>): AnyGenerat
 function* onResultCandidateChange({ payload: result }: PayloadAction<Result | null>): AnyGenerator {
   if (result) {
     const locale: Locale = yield select(selectLocale);
-    yield put(dictionarySlice.actions.changeInput(result.words.join(LOCALE_FEATURES[locale].separator)));
+    const uniqueWords = Array.from(new Set(result.words));
+    const input = uniqueWords.join(LOCALE_FEATURES[locale].separator);
+    yield put(dictionarySlice.actions.changeInput(input));
     yield put(dictionarySlice.actions.submit());
   }
 }