React Components

# Popover

## Overview

---

## Anatomy

---

Popover

PopoverContent

PopoverTrigger

---

## Popover

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| 
autoFocus

 | `boolean` | - | `undefined` | Whether to automatically set focus on the first focusable content within the popover when opened. |
| 

gutterDeprecated

 | `number` | - | `undefined` | Moved to overlayConfig. |
| 

onOpenChange

 | `(detail: PopoverOpenChangeDetail) => void` | - | `undefined` | Callback fired when the popover open state changes. |
| 

onPositionChange

 | `(detail: PopoverPositionChangeDetail) => void` | - | `undefined` | Callback fired when the popover position changes. |
| 

open

 | `boolean` | - | `undefined` | The controlled open state of the popover. |
| 

overlayConfig

 | `object` | - | `undefined` | The overlay configuration. |
| 

flip

 | `boolean` | - | `-` | Whether to flip the position. |
| 

gutter

 | `number` | - | `-` | The main axis offset or gap between the reference and floating elements. |
| 

position

 | `POPOVER_POSITION` | - | `-` | The popover position around the trigger. |
| 

sameWidth

 | `boolean` | - | `-` | Whether to make the floating element same width as the reference element. |
| 

positionDeprecated

 | `POPOVER_POSITION` | - | `undefined` | Moved to overlayConfig. |
| 

positionerStyle

 | `CSSProperties` | - | `undefined` | Custom style applied to the overlay positioner. Useful if you want to override the overlay z-index. |
| 

sameWidthDeprecated

 | `boolean` | - | `undefined` | Moved to overlayConfig. |
| 

triggerId

 | `string` | - | `undefined` | ID of an external trigger element to use in place of the PopoverTrigger component. |

## PopoverContent

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [div attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#attributes) . |
| 
createPortal

 | `boolean` | - | `true` | Whether the component should be rendered in the DOM close to the body tag. |
| 

withArrow

 | `boolean` | - | `false` | Whether the component displays an arrow pointing to the trigger. |

## PopoverTrigger

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [button attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#attributes) . |
| 
asChild

 | `boolean` | - | `undefined` | Use the provided child element as the default rendered element, combining their props and behavior. Be careful to pass an actual Node, not a Fragment. |

## Enums

---

### POPOVER_POSITION

-   bottom =`"bottom"`
-   bottomEnd =`"bottom-end"`
-   bottomStart =`"bottom-start"`
-   left =`"left"`
-   leftEnd =`"left-end"`
-   leftStart =`"left-start"`
-   right =`"right"`
-   rightEnd =`"right-end"`
-   rightStart =`"right-start"`
-   top =`"top"`
-   topEnd =`"top-end"`
-   topStart =`"top-start"`

## Interfaces

---

### PopoverOpenChangeDetail

-   `open: boolean`

### PopoverPositionChangeDetail

-   `position: POPOVER_POSITION`

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { Popover, PopoverContent, PopoverTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Popover>
      <PopoverTrigger>
        Show popover      </PopoverTrigger>
      <PopoverContent>
        This is the popover content      </PopoverContent>
    </Popover>
}
```

### Custom Trigger

```jsx
{
  globals: {
    imports: `import { Button, Popover, PopoverContent, PopoverTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Popover>
      <PopoverTrigger asChild>
        <Button>
          Custom Trigger        </Button>
      </PopoverTrigger>
      <PopoverContent>
        This is the popover content      </PopoverContent>
    </Popover>
}
```

### Controlled

```jsx
const [isOpen, setIsOpen] = useState(false);
  function togglePopover() {
    setIsOpen(isOpen => !isOpen);
  }
  return <>
      <Button onClick={togglePopover}>
        Toggle popover      </Button>
      <Popover open={isOpen}>
        <PopoverTrigger asChild>
          <Icon name={ICON_NAME.cog} />
        </PopoverTrigger>
        <PopoverContent withArrow>
          This is the popover content        </PopoverContent>
      </Popover>
    </>;
}
```

### Use Trigger Width

```jsx
{
  globals: {
    imports: `import { Popover, PopoverContent, PopoverTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Popover overlayConfig={{
    sameWidth: true
  }}>
      <PopoverTrigger>
        Show popover that will take this width as reference      </PopoverTrigger>
      <PopoverContent>
        The popover content      </PopoverContent>
    </Popover>
}
```

### Grid

```jsx
{
  decorators: [story => <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gridTemplateRows: 'repeat(3, 1fr)',
    gap: '20px',
    padding: '50px 150px'
  }}>
      {story()}
    </div>],
  globals: {
    imports: `import { Popover, PopoverContent, PopoverTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Popover overlayConfig={{
      position: 'top-start'
    }}>
        <PopoverTrigger>
          Top Left        </PopoverTrigger>
        <PopoverContent withArrow>
          Top Left popover        </PopoverContent>
      </Popover>
      <Popover overlayConfig={{
      position: 'top'
    }}>
        <PopoverTrigger>
          Top        </PopoverTrigger>
        <PopoverContent withArrow>
          Top popover        </PopoverContent>
      </Popover>
      <Popover overlayConfig={{
      position: 'top-end'
    }}>
        <PopoverTrigger>
          Top Right        </PopoverTrigger>
        <PopoverContent withArrow>
          Top Right popover        </PopoverContent>
      </Popover>
      <Popover overlayConfig={{
      position: 'left'
    }}>
        <PopoverTrigger>
          Middle Left        </PopoverTrigger>
        <PopoverContent withArrow>
          Middle Left popover        </PopoverContent>
      </Popover>
      <div />
      <Popover overlayConfig={{
      position: 'right'
    }}>
        <PopoverTrigger>
          Middle Right        </PopoverTrigger>
        <PopoverContent withArrow>
          Middle Right popover        </PopoverContent>
      </Popover>
      <Popover overlayConfig={{
      position: 'bottom-start'
    }}>
        <PopoverTrigger>
          Bottom Left        </PopoverTrigger>
        <PopoverContent withArrow>
          Bottom Left popover        </PopoverContent>
      </Popover>
      <Popover overlayConfig={{
      position: 'bottom'
    }}>
        <PopoverTrigger>
          Bottom        </PopoverTrigger>
        <PopoverContent withArrow>
          Bottom popover        </PopoverContent>
      </Popover>
      <Popover overlayConfig={{
      position: 'bottom-end'
    }}>
        <PopoverTrigger>
          Bottom Right        </PopoverTrigger>
        <PopoverContent withArrow>
          Bottom Right popover        </PopoverContent>
      </Popover>
    </>
}
```

### Z index

```jsx
{
  globals: {
    imports: `import { ICON_NAME, Icon, POPOVER_POSITION, Popover, PopoverContent, PopoverTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <span>Default Z-axis order:</span>
      <Popover open>
        <PopoverTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </PopoverTrigger>
        <PopoverContent withArrow>
          Back        </PopoverContent>
      </Popover>
      <Popover open>
        <PopoverTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </PopoverTrigger>
        <PopoverContent withArrow>
          Front        </PopoverContent>
      </Popover>
      <br />
      <span>Custom Z-axis order:</span>
      <Popover open overlayConfig={{
      position: POPOVER_POSITION.bottom
    }} positionerStyle={{
      zIndex: 'calc(var(--ods-theme-overlay-z-index) + 1)'
    }}>
        <PopoverTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </PopoverTrigger>
        <PopoverContent withArrow>
          Front        </PopoverContent>
      </Popover>
      <Popover open overlayConfig={{
      position: POPOVER_POSITION.bottom
    }}>
        <PopoverTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </PopoverTrigger>
        <PopoverContent withArrow>
          Back        </PopoverContent>
      </Popover>
    </>
}
```

## Recipes

---

Data Grid

| 
 | 

First Name

 | 

Last Name

 | 

Age

 | 

IP Address

 | 

Actions

 |
| --- | --- | --- | --- | --- | --- |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |

102550100300

of 0 results