@spaced-out/ui-design-system/lib/components/FocusManager/FocusManager.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';
import {
  // $FlowFixMe[untyped-import]
  FloatingFocusManager,
  // $FlowFixMe[untyped-import]
  useFloating,
} from '@floating-ui/react';

import classify from '../../utils/classify';

import css from './FocusManager.module.css';


type ClassNames = $ReadOnly<{wrapper?: string}>;

export type FocusManagerProps = {
  classNames?: ClassNames,
  children?: React.Node,
  initialFocus?: number,
  returnFocus?: boolean,
  guards?: boolean,
  modal?: boolean,
};

export const FocusManager = (props: FocusManagerProps): React.Node => {
  const {refs, context} = useFloating({open: true});
  const {
    classNames,
    children,
    initialFocus = -1,
    returnFocus = true,
    modal = true,
    guards = true,
    ...restFloatingFocusManagerProps
  } = props;

  return (
    <FloatingFocusManager
      context={context}
      initialFocus={initialFocus}
      modal={modal}
      guards={guards}
      returnFocus={returnFocus}
      {...restFloatingFocusManagerProps}
    >
      <div
        ref={refs.setFloating}
        data-testid="FocusManager"
        className={classify(css.wrapper, classNames?.wrapper)}
      >
        {children}
      </div>
    </FloatingFocusManager>
  );
};