scrabble-solver 2.13.5 → 2.13.7

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Results/types.ts

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

package/packages/scrabble-solver/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/packages/scrabble-solver/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>
+  );
+};

package/packages/scrabble-solver/src/components/Tooltip/TooltipContent.tsx

@@ -0,0 +1,53 @@
+import { FloatingArrow, FloatingPortal, useDelayGroup, useMergeRefs, useTransitionStyles } from '@floating-ui/react';
+import { forwardRef, HTMLProps } from 'react';
+
+import { TOOLTIP_DURATION } from 'parameters';
+
+import { useTooltipContext } from './context';
+import styles from './Tooltip.module.scss';
+
+type Props = HTMLProps<HTMLDivElement>;
+
+const INSTANT_DURATION = 0;
+
+export const TooltipContent = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const state = useTooltipContext();
+  const { context } = state;
+  const { isInstantPhase, currentId } = useDelayGroup(context, { id: context.floatingId });
+  const finalRef = useMergeRefs([state.refs.setFloating, ref]);
+
+  const instantPhaseDuration = {
+    open: INSTANT_DURATION,
+    close: currentId === context.floatingId ? TOOLTIP_DURATION : INSTANT_DURATION,
+  };
+
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: isInstantPhase ? instantPhaseDuration : TOOLTIP_DURATION,
+    initial: {
+      opacity: 0,
+    },
+  });
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <FloatingPortal>
+      <div
+        className={styles.tooltip}
+        ref={finalRef}
+        style={{
+          ...state.floatingStyles,
+          ...props.style,
+          ...transitionStyles,
+        }}
+        {...state.getFloatingProps(props)}
+      >
+        <div>{props.children}</div>
+
+        <FloatingArrow className={styles.arrow} context={context} ref={state.arrowRef} />
+      </div>
+    </FloatingPortal>
+  );
+});

package/packages/scrabble-solver/src/components/Tooltip/TooltipTrigger.tsx

@@ -0,0 +1,26 @@
+import { useMergeRefs } from '@floating-ui/react';
+import { HTMLProps, cloneElement, forwardRef, isValidElement } from 'react';
+
+import { useTooltipContext } from './context';
+
+type Props = HTMLProps<HTMLElement>;
+
+export const TooltipTrigger = forwardRef<HTMLElement, Props>(({ children, ...props }, ref) => {
+  const state = useTooltipContext();
+  const childrenElement = children as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  const finalRef = useMergeRefs([state.refs.setReference, ref, childrenElement.ref]);
+
+  if (!isValidElement(children)) {
+    throw new Error("TooltipTrigger's children are not a valid element");
+  }
+
+  return cloneElement(
+    children,
+    state.getReferenceProps({
+      ref: finalRef,
+      ...props,
+      ...children.props,
+      'data-state': state.open ? 'open' : 'closed',
+    }),
+  );
+});

package/packages/scrabble-solver/src/components/Tooltip/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+import { useTooltip } from './useTooltip';
+
+type TooltipContextType = ReturnType<typeof useTooltip> | null;
+
+export const TooltipContext = createContext<TooltipContextType>(null);
+
+export const useTooltipContext = () => {
+  const context = useContext(TooltipContext);
+
+  if (context === null) {
+    throw new Error('Tooltip components must be wrapped in <Tooltip />');
+  }
+
+  return context;
+};

package/packages/scrabble-solver/src/components/Tooltip/index.ts

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

package/packages/scrabble-solver/src/components/Tooltip/useTooltip.ts

@@ -0,0 +1,54 @@
+import {
+  Placement,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDelayGroup,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { useMemo, useRef, useState } from 'react';
+
+const ARROW_SIZE = 7;
+const ARROW_GAP = 3;
+const PADDING = 10;
+
+interface TooltipOptions {
+  placement?: Placement;
+}
+
+export const useTooltip = ({ placement = 'top' }: TooltipOptions = {}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const data = useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [flip(), shift({ padding: PADDING }), offset(ARROW_SIZE + ARROW_GAP), arrow({ element: arrowRef })],
+  });
+  const { context } = data;
+  const { delay } = useDelayGroup(context);
+  const hover = useHover(context, { move: false, delay });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      arrowRef,
+      open: isOpen,
+      setOpen: setIsOpen,
+      ...interactions,
+      ...data,
+    }),
+    [arrowRef, isOpen, setIsOpen, interactions, data],
+  );
+};

package/packages/scrabble-solver/src/components/index.ts

@@ -23,4 +23,4 @@ export { default as SeoMessage } from './SeoMessage';
 export { default as Solver } from './Solver';
 export { default as Spinner } from './Spinner';
 export { default as Tile } from './Tile';
-export { useTooltip } from './Tooltip';
+export * from './Tooltip';

package/packages/scrabble-solver/src/hooks/index.ts

@@ -9,5 +9,4 @@ export { default as useMedia } from './useMedia';
 export { default as useMediaQueries } from './useMediaQueries';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useOnWindowResize } from './useOnWindowResize';
-export { default as usePortal } from './usePortal';
 export { default as useViewportSize } from './useViewportSize';

package/packages/scrabble-solver/src/hooks/useLocalStorage.ts

@@ -8,6 +8,7 @@ import {
   selectInputMode,
   selectLocale,
   selectRack,
+  selectShowCoordinates,
   useTypedSelector,
 } from 'state';
 
@@ -18,6 +19,7 @@ const useLocalStorage = () => {
   const inputMode = useTypedSelector(selectInputMode);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
+  const showCoordinates = useTypedSelector(selectShowCoordinates);
 
   useEffect(() => {
     if (autoGroupTiles) {
@@ -54,6 +56,12 @@ const useLocalStorage = () => {
       localStorage.setRack(rack);
     }
   }, [rack]);
+
+  useEffect(() => {
+    if (showCoordinates) {
+      localStorage.setShowCoordinates(showCoordinates);
+    }
+  }, [showCoordinates]);
 };
 
 export default useLocalStorage;

package/packages/scrabble-solver/src/lib/getCoordinates.ts

@@ -0,0 +1,18 @@
+import { Result, ShowCoordinates } from '@scrabble-solver/types';
+
+import getCoordinate from './getCoordinate';
+
+const getCoordinates = (result: Result, showCoordinates: ShowCoordinates): string => {
+  if (showCoordinates === 'hidden') {
+    return '';
+  }
+
+  const firstCell = result.cells[0];
+  const isHorizontal = firstCell.x !== result.cells[1].x;
+  const x = getCoordinate(firstCell.x, showCoordinates === 'original' ? 'letter' : 'number');
+  const y = getCoordinate(firstCell.y, showCoordinates === 'original' ? 'number' : 'letter');
+
+  return isHorizontal ? `${y}${x}` : `${x}${y}`;
+};
+
+export default getCoordinates;

package/packages/scrabble-solver/src/lib/groupResults.ts

@@ -18,18 +18,23 @@ const groupResults = (
     return results;
   }
 
+  const regExp = createRegExp(query);
+
   return results.reduce<GroupedResults>(
-    ({ matching, other }, result) => {
-      const matchesQuery = createRegExp(query).test(result.word);
-      const matchesCellFilter = cellFilter.every(({ x, y }) => {
-        return result.cells.some((cell) => cell.x === x && cell.y === y);
-      });
-      const isMatching = matchesQuery && matchesCellFilter;
-
-      return {
-        matching: isMatching ? [...matching, result] : matching,
-        other: isMatching ? other : [...other, result],
-      };
+    (groupedResults, result) => {
+      const matchesQuery = () => regExp.test(result.word);
+      const matchesCellFilter = () =>
+        cellFilter.every(({ x, y }) => {
+          return result.cells.some((cell) => cell.x === x && cell.y === y);
+        });
+
+      if (matchesCellFilter() && matchesQuery()) {
+        groupedResults.matching.push(result);
+      } else {
+        groupedResults.other.push(result);
+      }
+
+      return groupedResults;
     },
     { matching: [], other: [] },
   );

package/packages/scrabble-solver/src/lib/index.ts

@@ -1,5 +1,4 @@
 export { default as arrayEquals } from './arrayEquals';
-export { default as canUseDom } from './canUseDom';
 export { default as createArray } from './createArray';
 export { default as createComparator } from './createComparator';
 export { default as createGridOf } from './createGridOf';
@@ -15,6 +14,8 @@ export { default as extractCharactersByCase } from './extractCharactersByCase';
 export { default as extractInputValue } from './extractInputValue';
 export { default as findCell } from './findCell';
 export { default as getCellSize } from './getCellSize';
+export { default as getCoordinate } from './getCoordinate';
+export { default as getCoordinates } from './getCoordinates';
 export { default as getRemainingTiles } from './getRemainingTiles';
 export { default as getRemainingTilesCount } from './getRemainingTilesCount';
 export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';

package/packages/scrabble-solver/src/lib/sortResults.ts

@@ -8,6 +8,7 @@ import reverseComparator from './reverseComparator';
 const comparators: Record<ResultColumn, (locale: string) => Comparator<Result>> = {
   [ResultColumn.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
   [ResultColumn.ConsonantsCount]: (locale: string) => createKeyComparator('consonantsCount', locale),
+  [ResultColumn.Coordinates]: () => () => 0,
   [ResultColumn.Points]: (locale: string) => createKeyComparator('points', locale),
   [ResultColumn.TilesCount]: (locale: string) => createKeyComparator('tilesCount', locale),
   [ResultColumn.VowelsCount]: (locale: string) => createKeyComparator('vowelsCount', locale),

package/packages/scrabble-solver/src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { FloatingDelayGroup } from '@floating-ui/react';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { FunctionComponent } from 'react';
@@ -64,7 +65,10 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
 
     <Provider store={store}>
       <SeoMessage />
-      <Component {...pageProps} />
+
+      <FloatingDelayGroup delay={0}>
+        <Component {...pageProps} />
+      </FloatingDelayGroup>
     </Provider>
   </>
 );

package/packages/scrabble-solver/src/parameters/index.ts

@@ -90,6 +90,7 @@ export const MODAL_HEADER_HEIGHT = 45;
 export const NAV_PADDING = SPACING_L;
 
 export const TILE_SIZE = 80;
+export const TOOLTIP_DURATION = TRANSITION_DURATION;
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
 export const PLAIN_TILES_PADDING_HORIZONTAL = 0;

package/packages/scrabble-solver/src/types/index.ts

@@ -40,6 +40,7 @@ export interface RemainingTilesGroup {
 export enum ResultColumn {
   BlanksCount = 'blanks-count',
   ConsonantsCount = 'consonants-count',
+  Coordinates = 'coordinates',
   Points = 'points',
   TilesCount = 'tiles-count',
   VowelsCount = 'vowels-count',