@scrabble-solver/scrabble-solver 2.15.8 → 2.15.10

package/src/components/Button/Button.tsx

@@ -4,7 +4,7 @@ import { ButtonHTMLAttributes, FunctionComponent, ReactNode, SVGAttributes } fro
 import { Tooltip } from '../Tooltip';
 
 import styles from './Button.module.scss';
-import Link from './Link';
+import { Link } from './Link';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   'aria-label': string;
@@ -15,7 +15,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   wide?: boolean;
 }
 
-const Button: FunctionComponent<Props> = ({
+const ButtonBase: FunctionComponent<Props> = ({
   children,
   className,
   Icon,
@@ -45,6 +45,6 @@ const Button: FunctionComponent<Props> = ({
   );
 };
 
-export default Object.assign(Button, {
+export const Button = Object.assign(ButtonBase, {
   Link,
 });

package/src/components/Button/Link.tsx

@@ -15,7 +15,7 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
   wide?: boolean;
 }
 
-const Link: FunctionComponent<Props> = ({
+export const Link: FunctionComponent<Props> = ({
   children,
   className,
   Icon,
@@ -43,5 +43,3 @@ const Link: FunctionComponent<Props> = ({
     </Tooltip>
   );
 };
-
-export default Link;

package/src/components/Button/index.ts

@@ -1 +1 @@
-export { default } from './Button';
+export { Button } from './Button';

package/src/components/Dictionary/Dictionary.tsx

@@ -4,8 +4,8 @@ import { FunctionComponent } from 'react';
 import { useAppLayout } from 'hooks';
 import { selectDictionary, selectDictionaryError, useTranslate, useTypedSelector } from 'state';
 
-import EmptyState from '../EmptyState';
-import Loading from '../Loading';
+import { EmptyState } from '../EmptyState';
+import { Loading } from '../Loading';
 
 import styles from './Dictionary.module.scss';
 
@@ -13,7 +13,7 @@ interface Props {
   className?: string;
 }
 
-const Dictionary: FunctionComponent<Props> = ({ className }) => {
+export const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
   const { dictionaryResultsHeight } = useAppLayout();
   const { results, isLoading } = useTypedSelector(selectDictionary);
@@ -78,5 +78,3 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
     </div>
   );
 };
-
-export default Dictionary;

package/src/components/Dictionary/index.ts

@@ -1 +1 @@
-export { default } from './Dictionary';
+export { Dictionary } from './Dictionary';

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -11,7 +11,7 @@ interface Props {
   className?: string;
 }
 
-const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
+export const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
@@ -42,5 +42,3 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     </form>
   );
 };
-
-export default DictionaryInput;

package/src/components/DictionaryInput/index.ts

@@ -1 +1 @@
-export { default } from './DictionaryInput';
+export { DictionaryInput } from './DictionaryInput';

package/src/components/EmptyState/EmptyState.tsx

@@ -6,7 +6,7 @@ import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from 'parameters';
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { Translations } from 'types';
 
-import PlainTiles from '../PlainTiles';
+import { PlainTiles } from '../PlainTiles';
 
 import styles from './EmptyState.module.scss';
 
@@ -30,13 +30,13 @@ const COLORS_PER_TYPE: Record<Props['variant'], string> = {
   warning: COLOR_YELLOW,
 };
 
-const EmptyState: FunctionComponent<Props> = ({ children, className, variant }) => {
+export const EmptyState: FunctionComponent<Props> = ({ children, className, variant }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
-  const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[variant]), [translate]);
+  const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[variant]), [translate, variant]);
   const message = direction === 'ltr' ? title : title.split('').reverse().join('');
-  const content = useMemo(() => [message.toUpperCase().split(' ')], [title]);
+  const content = useMemo(() => [message.toUpperCase().split(' ')], [message]);
 
   return (
     <div className={classNames(styles.emptyState, className)}>
@@ -45,5 +45,3 @@ const EmptyState: FunctionComponent<Props> = ({ children, className, variant })
     </div>
   );
 };
-
-export default EmptyState;

package/src/components/EmptyState/index.ts

@@ -1 +1 @@
-export { default } from './EmptyState';
+export { EmptyState } from './EmptyState';

package/src/components/IconButton/IconButton.tsx

@@ -4,7 +4,7 @@ import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttribut
 import { Tooltip } from '../Tooltip';
 
 import styles from './IconButton.module.scss';
-import Link from './Link';
+import { Link } from './Link';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   'aria-label': string;
@@ -14,7 +14,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-const IconButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
+const IconButtonBase: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
   return (
     <Tooltip tooltip={tooltip}>
       <button className={classNames(styles.iconButton, className)} type="button" {...props}>
@@ -26,6 +26,6 @@ const IconButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...pro
   );
 };
 
-export default Object.assign(IconButton, {
+export const IconButton = Object.assign(IconButtonBase, {
   Link,
 });

package/src/components/IconButton/Link.tsx

@@ -13,7 +13,7 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
   tooltip: string;
 }
 
-const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
+export const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
   return (
     <Tooltip tooltip={tooltip}>
       <a className={classNames(styles.iconButton, className)} {...props}>
@@ -24,5 +24,3 @@ const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props })
     </Tooltip>
   );
 };
-
-export default Link;

package/src/components/IconButton/index.ts

@@ -1 +1 @@
-export { default } from './IconButton';
+export { IconButton } from './IconButton';

package/src/components/Key/Key.tsx

@@ -8,8 +8,6 @@ interface Props {
   className?: string;
 }
 
-const Key: FunctionComponent<Props> = ({ children, className }) => (
+export const Key: FunctionComponent<Props> = ({ children, className }) => (
   <kbd className={classNames(styles.key, className)}>{children}</kbd>
 );
-
-export default Key;

package/src/components/Key/index.ts

@@ -1 +1 @@
-export { default } from './Key';
+export { Key } from './Key';

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

@@ -3,7 +3,7 @@ import { FunctionComponent } from 'react';
 
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
 
-import Key from '../../Key';
+import { Key } from '../../Key';
 
 import styles from './Arrows.module.scss';
 
@@ -11,7 +11,7 @@ interface Props {
   className?: string;
 }
 
-const Arrows: FunctionComponent<Props> = ({ className }) => (
+export const Arrows: FunctionComponent<Props> = ({ className }) => (
   <div className={classNames(styles.arrows, className)}>
     <Key className={classNames(styles.arrow, styles.left)}>
       <ArrowLeft aria-hidden="true" role="img" />
@@ -27,5 +27,3 @@ const Arrows: FunctionComponent<Props> = ({ className }) => (
     </Key>
   </div>
 );
-
-export default Arrows;

package/src/components/Keys/Arrows/index.ts

@@ -1 +1 @@
-export { default } from './Arrows';
+export { Arrows } from './Arrows';

package/src/components/{keys.tsx → Keys/index.tsx}

@@ -3,7 +3,7 @@ import { FunctionComponent } from 'react';
 import { isMac } from 'lib';
 import { useTranslate } from 'state';
 
-import Key from './Key';
+import { Key } from '../Key';
 
 interface Props {
   className?: string;
@@ -24,3 +24,5 @@ export const Space: FunctionComponent<Props> = ({ className }) => {
 
   return <Key className={className}>{` ${translate('common.space')} `}</Key>;
 };
+
+export { Arrows } from './Arrows';

package/src/components/Loading/Loading.tsx

@@ -4,7 +4,7 @@ import { FunctionComponent, useMemo } from 'react';
 import { LOCALE_FEATURES } from 'i18n';
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 
-import PlainTiles from '../PlainTiles';
+import { PlainTiles } from '../PlainTiles';
 
 import styles from './Loading.module.scss';
 
@@ -20,7 +20,7 @@ const prepareContent = (message: string): string[][] => {
   return [parts];
 };
 
-const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
+export const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
@@ -37,5 +37,3 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
     </div>
   );
 };
-
-export default Loading;

package/src/components/Loading/index.ts

@@ -1 +1 @@
-export { default } from './Loading';
+export { Loading } from './Loading';

package/src/components/Logo/Logo.tsx

@@ -8,12 +8,10 @@ interface Props {
   className?: string;
 }
 
-const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => {
+export const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => {
   const { logoHeight, logoWidth } = useAppLayout();
 
   return (
     <Image {...props} alt="Scrabble Solver 2" height={logoHeight} priority ref={ref} src={LOGO_SRC} width={logoWidth} />
   );
 });
-
-export default Logo;

package/src/components/Logo/LogoBlueprint.tsx

@@ -7,7 +7,7 @@
  */
 import { CSSProperties, FunctionComponent } from 'react';
 
-import PlainTiles from '../PlainTiles';
+import { PlainTiles } from '../PlainTiles';
 
 interface Props {
   className?: string;
@@ -16,8 +16,6 @@ interface Props {
 
 const CONTENT = [['SCRABBLE'], ['SOLVER', '2']];
 
-const LogoBlueprint: FunctionComponent<Props> = ({ className, style }) => (
+export const LogoBlueprint: FunctionComponent<Props> = ({ className, style }) => (
   <PlainTiles className={className} content={CONTENT} style={style} />
 );
-
-export default LogoBlueprint;

package/src/components/Logo/index.ts

@@ -1 +1 @@
-export { default } from './Logo';
+export { Logo } from './Logo';

package/src/components/Modal/Modal.tsx

@@ -6,7 +6,7 @@ import { CrossSquareFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
 import { useTranslate } from 'state';
 
-import IconButton from '../IconButton';
+import { IconButton } from '../IconButton';
 
 import { Section } from './components';
 import styles from './Modal.module.scss';
@@ -20,7 +20,7 @@ export interface Props {
   onClose: () => void;
 }
 
-const Modal: FunctionComponent<Props> = ({ children, className, footer, isOpen, title, onClose }) => {
+const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOpen, title, onClose }) => {
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
@@ -83,6 +83,6 @@ const Modal: FunctionComponent<Props> = ({ children, className, footer, isOpen,
   );
 };
 
-export default Object.assign(Modal, {
+export const Modal = Object.assign(ModalBase, {
   Section,
 });

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

@@ -10,11 +10,9 @@ interface Props {
   title: ReactNode;
 }
 
-const Section: FunctionComponent<Props> = ({ children, className, label, title }) => (
+export const Section: FunctionComponent<Props> = ({ children, className, label, title }) => (
   <section aria-label={label} className={classNames(styles.section, className)}>
     <h2 className={styles.heading}>{title}</h2>
     <div>{children}</div>
   </section>
 );
-
-export default Section;

package/src/components/Modal/components/Section/index.ts

@@ -1 +1 @@
-export { default } from './Section';
+export { Section } from './Section';

package/src/components/Modal/components/index.ts

@@ -1 +1 @@
-export { default as Section } from './Section';
+export { Section } from './Section';

package/src/components/Modal/index.ts

@@ -1 +1 @@
-export { default } from './Modal';
+export { Modal } from './Modal';

package/src/components/NavButtons/NavButtons.tsx

@@ -6,7 +6,7 @@ import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from 'ic
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
-import IconButton from '../IconButton';
+import { IconButton } from '../IconButton';
 
 import styles from './NavButtons.module.scss';
 
@@ -19,7 +19,7 @@ interface Props {
   onShowWords: () => void;
 }
 
-const NavButtons: FunctionComponent<Props> = ({
+const NavButtonsBase: FunctionComponent<Props> = ({
   onClear,
   onShowKeyMap,
   onShowMenu,
@@ -136,4 +136,4 @@ const NavButtons: FunctionComponent<Props> = ({
   );
 };
 
-export default memo(NavButtons);
+export const NavButtons = memo(NavButtonsBase);

package/src/components/NavButtons/index.ts

@@ -1 +1 @@
-export { default } from './NavButtons';
+export { NavButtons } from './NavButtons';

package/src/components/NotFound/NotFound.tsx

@@ -2,13 +2,13 @@ import { FunctionComponent } from 'react';
 
 import { DashCircleFill } from 'icons';
 
-import PlainTiles from '../PlainTiles';
+import { PlainTiles } from '../PlainTiles';
 
 import styles from './NotFound.module.scss';
 
 const CONTENT = [['HTTP', '404']];
 
-const NotFound: FunctionComponent = () => (
+export const NotFound: FunctionComponent = () => (
   <div className={styles.notFound}>
     <a className={styles.link} href="/">
       <DashCircleFill aria-hidden="true" className={styles.icon} role="img" />
@@ -16,5 +16,3 @@ const NotFound: FunctionComponent = () => (
     </a>
   </div>
 );
-
-export default NotFound;

package/src/components/NotFound/index.ts

@@ -1 +1 @@
-export { default } from './NotFound';
+export { NotFound } from './NotFound';

package/src/components/PlainTiles/PlainTiles.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, FunctionComponent, useMemo } from 'react';
 
 import { createPlainTiles, getViewbox } from './lib';
 import styles from './PlainTiles.module.scss';
-import Tile from './Tile';
+import { Tile } from './Tile';
 
 interface Props {
   className?: string;
@@ -15,7 +15,15 @@ interface Props {
   wave?: boolean;
 }
 
-const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropShadow, showPoints, style, wave }) => {
+export const PlainTiles: FunctionComponent<Props> = ({
+  className,
+  color,
+  content,
+  dropShadow,
+  showPoints,
+  style,
+  wave,
+}) => {
   const tiles = useMemo(() => createPlainTiles({ color, content, showPoints }), [color, content, showPoints]);
 
   return (
@@ -44,5 +52,3 @@ const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropS
     </svg>
   );
 };
-
-export default PlainTiles;

package/src/components/PlainTiles/Tile.tsx

@@ -11,7 +11,7 @@ interface Props {
   y: number;
 }
 
-const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, transform, x, y }) => (
+export const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, transform, x, y }) => (
   <g className={className} fill="#222" transform={transform}>
     <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
 
@@ -40,5 +40,3 @@ const Tile: FunctionComponent<Props> = ({ character, className, color, points, s
     )}
   </g>
 );
-
-export default Tile;

package/src/components/PlainTiles/index.ts

@@ -1 +1 @@
-export { default } from './PlainTiles';
+export { PlainTiles } from './PlainTiles';

package/src/components/PlainTiles/lib/createPlainTile.ts

@@ -11,11 +11,17 @@ import {
 
 import { CreatePlainTileOptions, PlainTile } from '../types';
 
-import getX from './getX';
-import getY from './getY';
-import randomize from './randomize';
+import { getX } from './getX';
+import { getY } from './getY';
+import { randomize } from './randomize';
 
-const createPlainTile = ({ cellIndex, character, color, rowIndex, showPoints }: CreatePlainTileOptions): PlainTile => {
+export const createPlainTile = ({
+  cellIndex,
+  character,
+  color,
+  rowIndex,
+  showPoints,
+}: CreatePlainTileOptions): PlainTile => {
   const configPoints = getConfig(Game.Literaki, Locale.EN_US).getCharacterPoints(character.toLowerCase());
   const points = showPoints ? configPoints : undefined;
   const defaultColor =
@@ -33,5 +39,3 @@ const createPlainTile = ({ cellIndex, character, color, rowIndex, showPoints }:
     y: randomize(getY(rowIndex), PLAIN_TILES_TILE_MAX_SCATTER),
   };
 };
-
-export default createPlainTile;

package/src/components/PlainTiles/lib/createPlainTiles.ts

@@ -1,8 +1,8 @@
 import { CreatePlainTilesOptions, PlainTile } from '../types';
 
-import createPlainTile from './createPlainTile';
+import { createPlainTile } from './createPlainTile';
 
-const createPlainTiles = ({ color, content, showPoints }: CreatePlainTilesOptions): PlainTile[] => {
+export const createPlainTiles = ({ color, content, showPoints }: CreatePlainTilesOptions): PlainTile[] => {
   const rows = content.map((words, rowIndex) => {
     return words.map((word, wordIndex) => {
       const cellOffset = words.slice(0, wordIndex).reduce((result, { length }) => result + length + ' '.length, 0);
@@ -23,5 +23,3 @@ const createPlainTiles = ({ color, content, showPoints }: CreatePlainTilesOption
   const tiles = rows.flat(2);
   return tiles;
 };
-
-export default createPlainTiles;

package/src/components/PlainTiles/lib/getViewbox.ts

@@ -1,6 +1,6 @@
 import { PLAIN_TILES_TILE_MARGIN, PLAIN_TILES_TILE_SIZE } from 'parameters';
 
-const getViewbox = (content: string[][]): string => {
+export const getViewbox = (content: string[][]): string => {
   const longestRowLength = content.reduce((result, words) => {
     const wordsLength = words.reduce((sum, word) => sum + word.length, 0);
     const rowLength = wordsLength + Math.max(words.length - 1, 0);
@@ -15,5 +15,3 @@ const getViewbox = (content: string[][]): string => {
 
   return `0 0 ${width} ${height}`;
 };
-
-export default getViewbox;

package/src/components/PlainTiles/lib/getX.ts

@@ -1,7 +1,5 @@
 import { PLAIN_TILES_PADDING_HORIZONTAL, PLAIN_TILES_TILE_MARGIN, PLAIN_TILES_TILE_SIZE } from 'parameters';
 
-const getX = (index: number): number => {
+export const getX = (index: number): number => {
   return PLAIN_TILES_PADDING_HORIZONTAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
 };
-
-export default getX;

package/src/components/PlainTiles/lib/getY.ts

@@ -1,7 +1,5 @@
 import { PLAIN_TILES_PADDING_VERTICAL, PLAIN_TILES_TILE_MARGIN, PLAIN_TILES_TILE_SIZE } from 'parameters';
 
-const getY = (index: number): number => {
+export const getY = (index: number): number => {
   return PLAIN_TILES_PADDING_VERTICAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
 };
-
-export default getY;

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

@@ -1,6 +1,6 @@
-export { default as createPlainTile } from './createPlainTile';
-export { default as createPlainTiles } from './createPlainTiles';
-export { default as getViewbox } from './getViewbox';
-export { default as getX } from './getX';
-export { default as getY } from './getY';
-export { default as randomize } from './randomize';
+export { createPlainTile } from './createPlainTile';
+export { createPlainTiles } from './createPlainTiles';
+export { getViewbox } from './getViewbox';
+export { getX } from './getX';
+export { getY } from './getY';
+export { randomize } from './randomize';

package/src/components/PlainTiles/lib/randomize.ts

@@ -1,3 +1 @@
-const randomize = (value: number, maxChange: number): number => value + maxChange * 2 * (0.5 - Math.random());
-
-export default randomize;
+export const randomize = (value: number, maxChange: number): number => value + maxChange * 2 * (0.5 - Math.random());

package/src/components/Progress/Progress.tsx

@@ -17,7 +17,7 @@ const getGradient = (progress: number, color: string, background: string) => {
   return `linear-gradient(90deg, ${color} 0%, ${color} ${percent}%, ${background} ${percent}%, ${background} 100%)`;
 };
 
-const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
+export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
   const locale = useTypedSelector(selectLocale);
   const progress = value / (max - min);
   const percent = Math.round(100 * progress);
@@ -34,5 +34,3 @@ const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, va
     />
   );
 };
-
-export default Progress;

package/src/components/Progress/index.ts

@@ -1 +1 @@
-export { default } from './Progress';
+export { Progress } from './Progress';

package/src/components/Rack/Rack.tsx

@@ -45,7 +45,7 @@ interface Props {
   tileSize: number;
 }
 
-const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
+export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
@@ -67,6 +67,11 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const showInputPrompt = inputMode === 'touchscreen' && hasFocus;
   const ref = useRef<HTMLDivElement>(null);
 
+  const floatingInputPrompt = useFloating({
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+  });
+
   useOnclickOutside(() => setHasFocus(false), {
     ignoreClass: [InputPrompt.styles.form, InputPrompt.styles.input],
     refs: ref.current ? [ref as RefObject<HTMLDivElement>] : [],
@@ -115,12 +120,12 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const handleFocus = useCallback(() => {
     setHasFocus(true);
     floatingInputPrompt.refs.setPositionReference(ref.current);
-    const characters: string[] = rack.filter((character) => character !== null) as string[];
+    const characters = rack.filter((character) => character !== null);
     const uppercasedDigraphs = characters.map((character) => {
       return character.length > 1 ? character.toLocaleUpperCase(locale) : character;
     });
     setInput(uppercasedDigraphs.join(''));
-  }, [rack, ref]);
+  }, [floatingInputPrompt.refs, locale, rack, ref]);
 
   const handleKeyDown = useMemo(() => {
     return createKeyboardNavigation({
@@ -159,12 +164,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         }
       },
     });
-  }, [changeActiveIndex, config, direction]);
-
-  const floatingInputPrompt = useFloating({
-    placement: 'bottom-start',
-    whileElementsMounted: autoUpdate,
-  });
+  }, [changeActiveIndex, config, direction, dispatch]);
 
   return (
     <>
@@ -216,5 +216,3 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
     </>
   );
 };
-
-export default Rack;