TabTrap

TabTrap

<div id="tab-trap"></div>

import {render} from 'react-dom';
import React from 'react';

import TabTrap from '@jetbrains/ring-ui/components/tab-trap/tab-trap';
import Input from '@jetbrains/ring-ui/components/input/input';
import Button from '@jetbrains/ring-ui/components/button/button';
import Link from '@jetbrains/ring-ui/components/link/link';
import Group from '@jetbrains/ring-ui/components/group/group';

const renderDemo = () => (
<div>
  <Button>Outside of trap</Button>

  <h4>Trap start</h4>
  <TabTrap>
    <Input placeholder="inside trap" autoFocus/>
    <Group>
      <Button>
        Test
      </Button>
      <Link href="#">Test link</Link>
    </Group>
  </TabTrap>

  <h4>Trap end</h4>

  <Button>Outside of trap</Button>
</div>
);

render(renderDemo(), document.getElementById('tab-trap'));