Focus Trap

import {Provider, Button, FocusTrap} from '@clayui/core';
import React from 'react';

export default function App() {
  const [active, setActive] = React.useState(false);
  const activateButtonRef = React.useRef(null);

  React.useEffect(() => {
    if (active) {
      return () => activateButtonRef.current?.focus();
    }
  }, [active]);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Button onClick={() => setActive(true)} ref={activateButtonRef}>
          Activate trap
        </Button>
        {active && (
          <FocusTrap active={active}>
            <div className="sheet c-mt-2 c-p-4">
              <Button displayType="link">Button 1</Button>
              <Button displayType="link">Button 2</Button>
              <div className="c-mt-4">
                <Button onClick={() => setActive(false)}>Leave trap</Button>
              </div>
            </div>
          </FocusTrap>
        )}
      </div>
    </Provider>
  );
}