scrabble-solver/packages/scrabble-solver/src/components/Board/hooks/useFloatingActions.ts

Scrabble Solver 2 - Free, open-source, cross-platform, multi-language analysis tool for Scrabble, Scrabble Duel, Super Scrabble, Letter League, Crossplay, Literaki, and Kelimelik. Quickly find the top-scoring words using the given board and tiles.

import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';

import { useAppLayout } from '@/app-layout';
import { BOARD_CELL_ACTIONS_OFFSET } from '@/parameters';

export const useFloatingActions = () => {
  const { actionsWidth } = useAppLayout();

  return useFloating({
    middleware: [
      offset({
        mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - actionsWidth,
      }),
      shift(),
    ],
    placement: 'top-end',
    whileElementsMounted: autoUpdate,
  });
};