npm package: @paprika/panel
Description: The Panel component provides a view that slides in from one side so the user can maintain context of their main task while they work on a sub task.
Author: @paprika
Latest version: 5.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/panel

## Description

The Panel component provides a view that slides in from one side so the user can maintain context of their main task while they work on a sub task.

## Installation

```
yarn add @paprika/panel
```

or with npm:

```
npm install @paprika/panel
```

## Props

### Panel

| Prop                  | Type                                                                                        | required | default                       | Description                                                                                                                                     |
| --------------------- | ------------------------------------------------------------------------------------------- | -------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| a11yText              | string                                                                                      | false    | null                          |                                                                                                                                                 |
| children              | node                                                                                        | true     | -                             | The content for the Panel.                                                                                                                      |
| container             | custom                                                                                      | false    | null                          | Portal container for the Panel (DOM element)                                                                                                    |
| getPushContentElement | func                                                                                        | false    | null                          | Function that provides the container DOM element to be pushed.                                                                                  |
| groupOffsetY          | number                                                                                      | false    | 0                             | Y offset that is passed down from <Panel.Group>                                                                                                 |
| height                | [string,number]                                                                             | false    | "33%"                         | The height of the open Panel (when slide in from bottom)                                                                                        |
| size                  | [ Panel.types.sizes.MEDIUM, Panel.types.sizes.LARGE]                                        | false    | Panel.types.sizes.MEDIUM      | Control the size of the Panel                                                                                                                   |
| isInline              | bool                                                                                        | false    | false                         | Render the panel inline                                                                                                                         |
| isOpen                | bool                                                                                        | false    | false                         | Control the visibility of the Panel. This prop makes the Panel appear.                                                                          |
| offset                | shape                                                                                       | false    | { top: 0, left: 0, right: 0 } | Control offset of the Panel. Only use 'top' when sliding in from the left or right. Only use 'left' or 'right' when sliding in from the bottom. |
| onAfterClose          | func                                                                                        | false    | () => {}                      | Callback once the Panel has been closed event                                                                                                   |
| onAfterOpen           | func                                                                                        | false    | () => {}                      | Callback once the Panel has been opened event                                                                                                   |
| onClose               | func                                                                                        | false    | null                          | Callback triggered when the Panel needs to be close                                                                                             |
| slideFrom             | [ Panel.types.slideFroms.RIGHT, Panel.types.slideFroms.LEFT, Panel.types.slideFroms.BOTTOM] | false    | Panel.types.slideFroms.RIGHT  | Control where the Panel slides in from                                                                                                          |
| width                 | [string,number,custom,custom,custom]                                                        | false    | "33%"                         | The width of the open Panel (when slide in from left or right)                                                                                  |
| zIndex                | number                                                                                      | false    | zValue(7)                     | Control the z-index of the Panel                                                                                                                |
| hasAccent             | bool                                                                                        | false    | false                         | Differentiate between similar coloured UI elements                                                                                              |

### Panel.Header

| Prop                  | Type | required | default  | Description |
| --------------------- | ---- | -------- | -------- | ----------- |
| children              | node | true     | -        |             |
| getPushContentElement | func | false    | () => {} |             |
| hasAccent             | bool | false    | false    |             |
| hasCloseButton        | bool | false    | true     |             |
| isCloseButtonSemantic | bool | false    | true     |             |
| isHeaderSticky        | bool | false    | false    |             |
| onClose               | func | false    | () => {} |             |

### Panel.Content

| Prop     | Type | required | default | Description                 |
| -------- | ---- | -------- | ------- | --------------------------- |
| children | node | false    | null    | Body content of the Content |

### Panel.Footer

| Prop     | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | true     | -       |             |
| isSticky | bool | false    | false   |             |

### Panel.Overlay

| Prop              | Type   | required | default | Description                      |
| ----------------- | ------ | -------- | ------- | -------------------------------- |
| backdropClassName | string | false    | -       |                                  |
| children          | func   | false    | -       |                                  |
| container         | node   | false    | -       | container of the Overlay element |
| focusLockOptions  | shape  | false    | -       |                                  |
| hasBackdrop       | bool   | false    | -       |                                  |
| isOpen            | bool   | false    | -       |                                  |
| onClose           | func   | false    | -       |                                  |
| onAfterOpen       | func   | false    | -       |                                  |
| onAfterClose      | func   | false    | -       |                                  |
| zIndex            | number | false    | -       | The z-index of the Panel Overlay |

### Panel.Trigger

| Prop     | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | true     | -       |             |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Components

You can use any of the following components to compose the Panel:

```jsx
<Panel.Content />
<Panel.Header />
<Panel.Footer />
<Panel.Overlay />
<Panel.FocusLock />
<Panel.Trigger />
```

## Basic examples

```jsx
import Panel from "@paprika/panel";

const [isOpen, setIsOpen] = React.useState(true);

<Panel isOpen={isOpen} onClose={() => setIsOpen(false)} slideFrom={Panel.types.slideFrom.LEFT}>
  <Panel.Header>Header</Panel.Header>
  <Panel.Content>Your content here</Panel.Content>
  <Panel.Footer>
    <button>Accept</button>
    <button>Cancel</button>
  </Panel.Footer>
</Panel>;
```

## FocusLock

There are issues when using FocusLock without the `<Panel.Overlay />`. Therefore the Panel will not use the focus lock when there is no overlay present.
Focus locking will only be used when overlay is used to prevent this issue.

## Warnings

If the content you are putting into this component will try and control focus (like CKEditor), read this: https://github.com/acl-services/paprika/issues/453

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/messaging-panel--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Panel/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/panel%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Panel/CHANGELOG.md)