scrabble-solver 2.16.7 → 2.18.0

package/packages/scrabble-solver/src/components/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { type FunctionComponent, type ReactNode, useCallback, useEffect, useState } from 'react';
 import ReactModal from 'react-modal';
 
-import { CrossSquareFill } from '@/icons';
+import CrossSquareFill from '@/icons/CrossSquareFill.svg';
 import { TRANSITION_DURATION_LONG } from '@/parameters';
 import { useTranslate } from '@/state';
 
@@ -11,16 +11,29 @@ import { IconButton } from '../IconButton';
 import { Section } from './components';
 import styles from './Modal.module.scss';
 
+if (typeof document !== 'undefined') {
+  ReactModal.setAppElement('#__next');
+}
+
 export interface Props {
   children: ReactNode;
   className?: string;
   footer?: ReactNode;
   isOpen: boolean;
+  modalClassName?: string;
   title: string;
   onClose: () => void;
 }
 
-const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOpen, title, onClose }) => {
+const ModalBase: FunctionComponent<Props> = ({
+  children,
+  className,
+  footer,
+  isOpen,
+  modalClassName,
+  title,
+  onClose,
+}) => {
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
@@ -55,7 +68,7 @@ const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOp
       aria={{ modal: true }}
       className={{
         afterOpen: styles.afterOpen,
-        base: styles.modal,
+        base: classNames(styles.modal, modalClassName),
         beforeClose: styles.beforeClose,
       }}
       closeTimeoutMS={TRANSITION_DURATION_LONG}

package/packages/scrabble-solver/src/components/Modal/components/Section/Section.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly heading: string;
+  readonly section: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.module.scss

@@ -1,3 +1,5 @@
+@use 'styles/mixins' as *;
+
 .navButtons {
   display: flex;
   align-items: center;
@@ -31,3 +33,21 @@
     color: var(--color--error);
   }
 }
+
+.fullNav {
+  @include media('<s') {
+    display: none;
+  }
+}
+
+.shortNav {
+  @include media('>=s') {
+    display: none;
+  }
+}
+
+.keyMapButton {
+  @include media('touch') {
+    display: none;
+  }
+}

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.module.scss.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly button: string;
+  readonly error: string;
+  readonly fullNav: string;
+  readonly group: string;
+  readonly keyMapButton: string;
+  readonly navButtons: string;
+  readonly separator: string;
+  readonly shortNav: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.tsx

@@ -1,8 +1,13 @@
 import classNames from 'classnames';
 import { type FunctionComponent, memo } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from '@/icons';
+import CardChecklist from '@/icons/CardChecklist.svg';
+import Cog from '@/icons/Cog.svg';
+import Eraser from '@/icons/Eraser.svg';
+import Github from '@/icons/Github.svg';
+import KeyboardFill from '@/icons/KeyboardFill.svg';
+import List from '@/icons/List.svg';
+import Sack from '@/icons/Sack.svg';
 import { GITHUB_PROJECT_URL } from '@/parameters';
 import { selectConfig, useTranslate, useTypedSelector } from '@/state';
 
@@ -32,35 +37,6 @@ const NavButtonsBase: FunctionComponent<Props> = ({
   const config = useTypedSelector(selectConfig);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
-  const { showKeyMap, showShortNav } = useAppLayout();
-
-  if (showShortNav) {
-    return (
-      <div className={styles.navButtons}>
-        <div className={styles.group}>
-          <IconButton
-            aria-label={translate('common.clear')}
-            className={styles.button}
-            Icon={Eraser}
-            tooltip={translate('common.clear')}
-            onClick={onClear}
-          />
-        </div>
-
-        <div className={styles.separator} />
-
-        <div className={styles.group}>
-          <IconButton
-            aria-label={translate('menu')}
-            className={styles.button}
-            Icon={List}
-            tooltip={translate('menu')}
-            onClick={onShowMenu}
-          />
-        </div>
-      </div>
-    );
-  }
 
   return (
     <div className={styles.navButtons}>
@@ -76,7 +52,7 @@ const NavButtonsBase: FunctionComponent<Props> = ({
 
       <div className={styles.separator} />
 
-      <div className={styles.group}>
+      <div className={classNames(styles.group, styles.fullNav)}>
         {config.supportsRemainingTiles && (
           <IconButton
             aria-label={translate('remaining-tiles')}
@@ -100,9 +76,9 @@ const NavButtonsBase: FunctionComponent<Props> = ({
         />
       </div>
 
-      <div className={styles.separator} />
+      <div className={classNames(styles.separator, styles.fullNav)} />
 
-      <div className={styles.group}>
+      <div className={classNames(styles.group, styles.fullNav)}>
         <IconButton.Link
           aria-label={translate('github')}
           className={styles.button}
@@ -114,18 +90,16 @@ const NavButtonsBase: FunctionComponent<Props> = ({
         />
       </div>
 
-      <div className={styles.separator} />
+      <div className={classNames(styles.separator, styles.fullNav)} />
 
-      <div className={styles.group}>
-        {showKeyMap && (
-          <IconButton
-            aria-label={translate('keyMap')}
-            className={styles.button}
-            Icon={KeyboardFill}
-            tooltip={translate('keyMap')}
-            onClick={onShowKeyMap}
-          />
-        )}
+      <div className={classNames(styles.group, styles.fullNav)}>
+        <IconButton
+          aria-label={translate('keyMap')}
+          className={classNames(styles.button, styles.keyMapButton)}
+          Icon={KeyboardFill}
+          tooltip={translate('keyMap')}
+          onClick={onShowKeyMap}
+        />
 
         <IconButton
           aria-label={translate('settings')}
@@ -136,6 +110,16 @@ const NavButtonsBase: FunctionComponent<Props> = ({
           onClick={onShowSettings}
         />
       </div>
+
+      <div className={classNames(styles.group, styles.shortNav)}>
+        <IconButton
+          aria-label={translate('menu')}
+          className={styles.button}
+          Icon={List}
+          tooltip={translate('menu')}
+          onClick={onShowMenu}
+        />
+      </div>
     </div>
   );
 };

package/packages/scrabble-solver/src/components/NotFound/NotFound.module.scss.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly icon: string;
+  readonly link: string;
+  readonly notFound: string;
+  readonly tiles: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/NotFound/NotFound.tsx

@@ -1,6 +1,6 @@
 import { type FunctionComponent } from 'react';
 
-import { DashCircleFill } from '@/icons';
+import DashCircleFill from '@/icons/DashCircleFill.svg';
 
 import { PlainTiles } from '../PlainTiles';
 

package/packages/scrabble-solver/src/components/PlainTiles/PlainTiles.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly dropShadow: string;
+  readonly hide: string;
+  readonly rotate: string;
+  readonly show: string;
+  readonly tile: string;
+  readonly wave: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/PlainTiles/PlainTiles.tsx

@@ -44,7 +44,6 @@ export const PlainTiles: FunctionComponent<Props> = ({
           key={index}
           points={tile.points}
           size={tile.size}
-          transform={tile.transform}
           x={tile.x}
           y={tile.y}
         />

package/packages/scrabble-solver/src/components/PlainTiles/Tile.tsx

@@ -6,14 +6,13 @@ interface Props {
   color: string;
   points?: number;
   size: number;
-  transform?: string;
   x: number;
   y: number;
 }
 
-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} />
+export const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, x, y }) => (
+  <g className={className} style={{ fill: 'var(--color--foreground)' }}>
+    <rect height={size} rx={size * 0.15} style={{ fill: color }} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"

package/packages/scrabble-solver/src/components/PlainTiles/lib.ts

@@ -3,12 +3,8 @@ import { Game, Locale } from '@scrabble-solver/types';
 
 import {
   PLAIN_TILES_COLOR_DEFAULT,
-  PLAIN_TILES_PADDING_HORIZONTAL,
-  PLAIN_TILES_PADDING_VERTICAL,
   PLAIN_TILES_POINTS_COLORS,
   PLAIN_TILES_TILE_MARGIN,
-  PLAIN_TILES_TILE_MAX_ROTATE,
-  PLAIN_TILES_TILE_MAX_SCATTER,
   PLAIN_TILES_TILE_SIZE,
 } from '@/parameters';
 
@@ -47,17 +43,14 @@ export const createPlainTile = ({
   const points = showPoints ? configPoints : undefined;
   const defaultColor =
     typeof configPoints === 'number' ? PLAIN_TILES_POINTS_COLORS[configPoints] : PLAIN_TILES_COLOR_DEFAULT;
-  const x = getX(cellIndex) + PLAIN_TILES_TILE_SIZE / 2;
-  const y = getY(0) + PLAIN_TILES_TILE_SIZE / 2;
 
   return {
     character,
     color: color || defaultColor,
     points,
     size: PLAIN_TILES_TILE_SIZE,
-    transform: `rotate(${randomize(0, PLAIN_TILES_TILE_MAX_ROTATE)}, ${x}, ${y})`,
-    x: randomize(getX(cellIndex), PLAIN_TILES_TILE_MAX_SCATTER),
-    y: randomize(getY(rowIndex), PLAIN_TILES_TILE_MAX_SCATTER),
+    x: getOffset(cellIndex),
+    y: getOffset(rowIndex),
   };
 };
 
@@ -77,14 +70,6 @@ export const getViewbox = (content: string[][]): string => {
   return `0 0 ${width} ${height}`;
 };
 
-export const getX = (index: number): number => {
-  return PLAIN_TILES_PADDING_HORIZONTAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
-};
-
-export const getY = (index: number): number => {
-  return PLAIN_TILES_PADDING_VERTICAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
-};
-
-export const randomize = (value: number, maxChange: number): number => {
-  return value + maxChange * 2 * (0.5 - Math.random());
+const getOffset = (index: number): number => {
+  return index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
 };

package/packages/scrabble-solver/src/components/PlainTiles/types.ts

@@ -17,7 +17,6 @@ export interface PlainTile {
   color: string;
   points?: number;
   size: number;
-  transform: string;
   x: number;
   y: number;
 }

package/packages/scrabble-solver/src/components/Progress/Progress.module.scss

@@ -2,6 +2,13 @@
   width: 100%;
   min-height: 1px;
   border-radius: var(--border--radius);
+  background-image: linear-gradient(
+    90deg,
+    var(--color--progress) 0%,
+    var(--color--progress) var(--progress),
+    var(--color--progress--background) var(--progress),
+    var(--color--progress--background) 100%
+  );
 
   [dir='rtl'] & {
     transform: scaleX(-1);

package/packages/scrabble-solver/src/components/Progress/Progress.module.scss.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly progress: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Progress/Progress.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
-import { type FunctionComponent, type HTMLProps } from 'react';
+import { type CSSProperties, type FunctionComponent, type HTMLProps } from 'react';
 
-import { PROGRESS_COLOR_BACKGROUND, PROGRESS_COLOR_VALUE } from '@/parameters';
 import { selectLocale, useTypedSelector } from '@/state';
 
 import styles from './Progress.module.scss';
@@ -12,11 +11,6 @@ interface Props extends HTMLProps<HTMLDivElement> {
   value: number;
 }
 
-const getGradient = (progress: number, color: string, background: string) => {
-  const percent = 100 * progress;
-  return `linear-gradient(90deg, ${color} 0%, ${color} ${percent}%, ${background} ${percent}%, ${background} 100%)`;
-};
-
 export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
   const locale = useTypedSelector(selectLocale);
   const progress = value / (max - min);
@@ -31,10 +25,7 @@ export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, st
       aria-valuetext={`${percent.toLocaleString(locale)}%`}
       className={classNames(styles.progress, className)}
       role="progressbar"
-      style={{
-        ...style,
-        backgroundImage: getGradient(progress, PROGRESS_COLOR_VALUE, PROGRESS_COLOR_BACKGROUND),
-      }}
+      style={{ ...style, '--progress': `${100 * progress}%` } as CSSProperties}
       title={`${percent.toLocaleString(locale)}%`}
     />
   );

package/packages/scrabble-solver/src/components/Rack/Rack.module.scss

@@ -65,12 +65,15 @@
 }
 
 .rack {
+  --tile-size: var(--rack-tile-size);
+
   position: relative;
   display: flex;
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   transition: var(--transition);
   opacity: 1;
+  font-size: max(14px, calc(var(--rack-tile-size) * 0.6));
 }
 
 .tile {

package/packages/scrabble-solver/src/components/Rack/Rack.module.scss.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly hidden: string;
+  readonly rack: string;
+  readonly sharpLeft: string;
+  readonly sharpRight: string;
+  readonly tile: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Rack/Rack.tsx

@@ -16,9 +16,11 @@ import {
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
-import { LOCALE_FEATURES } from '@/i18n';
-import { createKeyboardNavigation, extractCharacters, extractInputValue, getTileSizes, isCtrl } from '@/lib';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
 import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from '@/state';
 
 import { InputPrompt, RackTile } from './components';
@@ -27,12 +29,10 @@ import { selectRemainingTilesGroups } from './selectors';
 
 interface Props {
   className?: string;
-  tileSize: number;
 }
 
-export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
+export const Rack: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
-  const { rackHeight } = useAppLayout();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
@@ -47,7 +47,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const [hasFocus, setHasFocus] = useState(false);
   const [input, setInput] = useState('');
   const { direction } = LOCALE_FEATURES[locale];
-  const { tileFontSize } = getTileSizes(tileSize);
   const showInputPrompt = inputMode === 'touchscreen' && hasFocus;
   const ref = useRef<HTMLDivElement>(null);
 
@@ -58,7 +57,7 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
 
   useOnclickOutside(() => setHasFocus(false), {
     ignoreClass: [InputPrompt.styles.form, InputPrompt.styles.input],
-    refs: ref.current ? [ref as RefObject<HTMLDivElement>] : [],
+    refs: [ref as RefObject<HTMLDivElement>],
   });
 
   const changeActiveIndex = useCallback(
@@ -158,7 +157,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         })}
         data-testid="rack"
         ref={ref}
-        style={{ fontSize: tileFontSize }}
         onPaste={handlePaste}
       >
         {tiles.map(({ character, tile }, index) => (
@@ -172,7 +170,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
             index={index}
             inputRef={tilesRefs[index]}
             key={index}
-            size={tileSize}
             tile={tile}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
@@ -187,7 +184,7 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
             ref={floatingInputPrompt.refs.setFloating}
             style={{
               position: floatingInputPrompt.strategy,
-              top: floatingInputPrompt.y ? floatingInputPrompt.y - rackHeight : 0,
+              top: floatingInputPrompt.y ? `calc(${floatingInputPrompt.y}px - var(--rack-tile-size))` : 0,
               left: floatingInputPrompt.x ?? 0,
             }}
             value={input}

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/InputPrompt.module.scss

@@ -3,6 +3,8 @@
 .form {
   @include focus-effect;
 
+  width: calc(var(--rack-size) * var(--rack-tile-size));
+  height: var(--rack-tile-size);
   border-radius: var(--border--radius);
 }
 

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/InputPrompt.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly form: string;
+  readonly input: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
 import { rackSlice, selectConfig, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './InputPrompt.module.scss';
@@ -29,7 +28,6 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
   ({ className, style, value, onBlur, onChange, onSubmit, ...props }, ref) => {
     const dispatch = useDispatch();
     const translate = useTranslate();
-    const { rackHeight, rackWidth } = useAppLayout();
     const config = useTypedSelector(selectConfig);
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
@@ -52,17 +50,7 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
     }, [inputRef]);
 
     return (
-      <form
-        className={classNames(styles.form, className)}
-        ref={ref}
-        style={{
-          width: rackWidth,
-          height: rackHeight,
-          ...style,
-        }}
-        onSubmit={handleSubmit}
-        {...props}
-      >
+      <form className={classNames(styles.form, className)} ref={ref} style={style} onSubmit={handleSubmit} {...props}>
         <input
           autoCapitalize="none"
           autoComplete="off"

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/lib.ts

@@ -1,6 +1,6 @@
 import { type Config } from '@scrabble-solver/types';
 
-import { extractCharacters } from '@/lib';
+import { extractCharacters } from '@/lib/extractCharacters';
 
 export const extractRack = (config: Config, value: string): (string | null)[] => {
   const charactersByCase = extractCharacters(config, value, {

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.module.scss.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly rackTile: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.tsx

@@ -15,7 +15,10 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from '@/lib';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -38,7 +41,6 @@ interface Props {
   className?: string;
   index: number;
   inputRef: RefObject<HTMLInputElement | null>;
-  size: number;
   tile: TileModel | null;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
@@ -51,7 +53,6 @@ export const RackTile: FunctionComponent<Props> = ({
   className,
   index,
   inputRef,
-  size,
   tile,
   onChange,
   onKeyDown,
@@ -149,10 +150,10 @@ export const RackTile: FunctionComponent<Props> = ({
       isBlank={character === BLANK}
       isValid={isValid}
       key={index}
+      locale={locale}
       placeholder={translate('rack.placeholder')[index]}
       points={points}
       raised
-      size={size}
       tabIndex={index === 0 ? undefined : -1}
       onChange={handleChange}
       onFocus={handleFocus}

package/packages/scrabble-solver/src/components/Rack/selectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { zipCharactersAndTiles } from '@/lib';
+import { zipCharactersAndTiles } from '@/lib/zipCharactersAndTiles';
 import { selectRack, selectResultCandidateTiles } from '@/state';
 
 export const selectRemainingTilesGroups = createSelector(

package/packages/scrabble-solver/src/components/Radio/Radio.module.scss.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly checked: string;
+  readonly content: string;
+  readonly disabled: string;
+  readonly icon: string;
+  readonly iconContent: string;
+  readonly input: string;
+  readonly radio: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, type ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 import { type TranslationKey } from '@/types';
@@ -12,28 +12,19 @@ interface Props {
   children?: ReactNode;
   className?: string;
   dataTestId?: string;
-  style?: CSSProperties;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-export const Cell: FunctionComponent<Props> = ({
-  children,
-  className,
-  dataTestId,
-  style,
-  translationKey,
-  tooltip,
-  value,
-}) => {
+export const Cell: FunctionComponent<Props> = ({ children, className, dataTestId, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
 
   return (
     <Tooltip tooltip={`${translate(translationKey)}: ${tooltip || formattedValue}`}>
-      <div className={classNames(styles.cell, className)} data-testid={dataTestId} style={style}>
+      <div className={classNames(styles.cell, className)} data-testid={dataTestId}>
         {children || formattedValue}
       </div>
     </Tooltip>