WARNING

🚨 NeighborLocation component is deprecated and will be removed in the next releases.

TIP

Use property neighborLocation specification on components.

We did this because of the unreliability of the API and the unpredictability of neighbor detection, especially in React 18's parallel render.

Description

NeighborLocation is a component for grouping components. It indicates where the component is in relation to its neighbors.

For example, you can group together:

• Button
• Input
• Select

You may also need a flex-box to align the components. For more information, see the Flex-box and indent system.

Grouped buttons

Grouped buttons are divided with a 1px line, color of which depends on the button's use:

• for primary buttons: border-primary-invert
• for secondary buttons: border-primary

TIP

Don’t group tertiary buttons this way.

import React from 'react';
import Button from '@semcore/button';
import { Flex } from '@semcore/flex-box';
import NeighborLocation from '@semcore/neighbor-location';

const Demo = () => {
  return (
    <Flex direction='column' gap={4}>
      <Flex role='group' aria-label='secondary buttons'>
        <Button neighborLocation='right'>First</Button>
        <Button neighborLocation='both'>Middle</Button>
        <Button neighborLocation='left'>Last</Button>
      </Flex>
      <Flex role='group' aria-label='primary buttons'>
        <Button neighborLocation='right' use='primary'>
          First
        </Button>
        <Button neighborLocation='both' use='primary'>
          Middle
        </Button>
        <Button neighborLocation='left' use='primary'>
          Last
        </Button>
      </Flex>
      <Flex role='group' aria-label='primary success buttons'>
        <Button neighborLocation='right' use='primary' theme='success'>
          First
        </Button>
        <Button neighborLocation='both' use='primary' theme='success'>
          Middle
        </Button>
        <Button neighborLocation='left' use='primary' theme='success'>
          Last
        </Button>
      </Flex>
    </Flex>
  );
};

export default Demo;

Grouped input and button

import React from 'react';
import Input from '@semcore/input';
import Button from '@semcore/button';
import { Flex } from '@semcore/flex-box';

const Demo = () => {
  return (
    <>
      <Flex mb={4} role='group' aria-label='Input with secondary button'>
        <Input neighborLocation='right' w={200}>
          <Input.Value placeholder='Placeholder' aria-label={'Input example'} />
        </Input>
        <Button neighborLocation='left'>Button</Button>
      </Flex>
      <Flex mb={4} role='group' aria-label='Input with primary button'>
        <Input neighborLocation='right' w={200}>
          <Input.Value placeholder='Placeholder' aria-label={'input example'} />
        </Input>
        <Button neighborLocation='left' use='primary'>
          Button
        </Button>
      </Flex>
      <Flex role='group' aria-label='Input with primary success button'>
        <Input neighborLocation='right' w={200}>
          <Input.Value placeholder='Placeholder' aria-label={'input example'} />
        </Input>
        <Button neighborLocation='left' use='primary' theme='success'>
          Button
        </Button>
      </Flex>
    </>
  );
};

export default Demo;

Grouped input and select

import React from 'react';
import Input from '@semcore/input';
import Select from '@semcore/select';
import { Flex } from '@semcore/flex-box';

const Demo = () => {
  return (
    <Flex role='group' aria-label='input with select'>
      <Input neighborLocation='right' w={200}>
        <Input.Value placeholder='Placeholder' aria-label={'input example'} />
      </Input>
      <Select
        aria-label='select example'
        neighborLocation='left'
        options={[
          { value: 'Option 1', children: 'Option 1' },
          { value: 'Option 2', children: 'Option 2' },
        ]}
      />
    </Flex>
  );
};

export default Demo;

Grouped input, select, and button

You can group input, select, and button.

import React from 'react';
import Input from '@semcore/input';
import Select from '@semcore/select';
import Button from '@semcore/button';
import { Flex } from '@semcore/flex-box';

const Demo = () => {
  return (
    <Flex role='group' aria-label='input with select and button'>
      <Input neighborLocation='right' w={200}>
        <Input.Value placeholder='Placeholder' aria-label={'input example'} />
      </Input>
      <Select
        aria-label='select example'
        neighborLocation='both'
        options={[
          { value: 'Option 1', children: 'Option 1' },
          { value: 'Option 2', children: 'Option 2' },
        ]}
      />
      <Button neighborLocation='left' use='primary'>
        Button
      </Button>
    </Flex>
  );
};

export default Demo;

Adding wrapper

By default, <NeighborLocation/> doesn't create an HTML wrapper, but you can pass the component tag you want.

TIP

For the correct type mapping in the TC, you must also pass the interface. <NeighborLocation<FlexProps> tag={Flex} w={200}/>

import React from 'react';
import Button from '@semcore/button';
import { Flex } from '@semcore/flex-box';
import NeighborLocation from '@semcore/neighbor-location';

const Demo = () => {
  return (
    <>
      <NeighborLocation tag={Flex} mb={4} role='group' aria-label='wrapped primary buttons'>
        <Button use='primary'>First</Button>
        <Button use='primary'>Middle</Button>
        <Button use='primary'>Last</Button>
      </NeighborLocation>
      <NeighborLocation tag={Flex} role='group' aria-label='wrapped secondary buttons'>
        <Button>First</Button>
        <Button>Middle</Button>
        <Button>Last</Button>
      </NeighborLocation>
    </>
  );
};

export default Demo;

Using custom component

You can apply <NeighborLocation/> to your components. You will need to use the component <NeighborLocation.Detect/> and then the neighborLocation prop will come to your component.

TIP

You can use the render function or the element will be cloned.

import React from 'react';
import NeighborLocation from '@semcore/neighbor-location';

const CustomComponent: React.FC<{ neighborLocation?: string }> = ({ neighborLocation }) => {
  return <span>{neighborLocation}</span>;
};

const Demo = () => {
  return (
    <NeighborLocation>
      <NeighborLocation.Detect>
        {(neighborLocation) => <span>{neighborLocation}</span>}
      </NeighborLocation.Detect>
      <NeighborLocation.Detect>
        {(neighborLocation) => <span> | {neighborLocation} | </span>}
      </NeighborLocation.Detect>
      <NeighborLocation.Detect>
        <CustomComponent />
      </NeighborLocation.Detect>
    </NeighborLocation>
  );
};

export default Demo;