vault-frontend/src/hooks/dom/usePopperModifiers.ts

import { useMemo } from 'react';
import { Modifier } from 'react-popper';

const sameWidth = {
  name: 'sameWidth',
  enabled: true,
  phase: 'beforeWrite',
  requires: ['computeStyles'],
  fn: ({ state }: { state: any }) => {
    // eslint-disable-next-line no-param-reassign
    state.styles.popper.width = `${state.rects.reference.width}px`;
  },
  effect: ({ state }: { state: any }) => {
    // eslint-disable-next-line no-param-reassign
    state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
  },
};

export const usePopperModifiers = (offsetX = 0, offsetY = 10, justify?: boolean): Modifier<any>[] =>
  useMemo(
    () =>
      [
        {
          name: 'offset',
          options: {
            offset: [offsetX, offsetY],
          },
        },
        {
          name: 'preventOverflow',
          options: {
            padding: 10,
          },
        },
        ...(justify ? [sameWidth] : []),
      ] as Modifier<any>[],
    [offsetX, offsetY, justify]
  );