nishant-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-dom-interactions';

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,
};

export const FocusManager = (props: FocusManagerProps): React.Node => {
  const {floating, context} = useFloating();
  const {
    classNames,
    children,
    initialFocus = -1,
    ...restFloatingFocusManagerProps
  } = props;

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