<commit_before># Pane

Primary staple of layout for FOLIO modules.

### Sizing
A Pane requires a `defaultWidth` prop to tell its parent `<Paneset>` how it should be sized. The following example has a first pane with a static width of 20% and a second pane with dynamic width (supplied `"fill"` for its `defaultWidth`) that will occupy the remaining width of the paneset.
```js
import Paneset from '@folio/stripes-components/lib/Paneset';
import Pane from '@folio/stripes-components/lib/Pane';

<Paneset>
    <Pane defaultWidth="20%" paneTitle="Filters">
        // Pane Content
    </Pane>
    <Pane defaultWidth="fill" paneTitle="Search Results">
        // Pane Content
    </Pane>
</Paneset>
```


#### Dismissible
To make a pane dismissible, simply supply the `dismissible` prop and a module-level handler to the `onClose` prop.
```js
    // set up boolean for rendering the pane...
    this.state = {
        showPane: true,
    };
    // ...
    handleClose() {
        this.setState({showPane: false});
    }
    // in the module's 'render' function...
    {
        this.state.showPane &&
        <Pane paneTitle="Dismiss this" dismissible onClose={this.handleClose}>
            // Pane Content...
        </Pane>
    }
```
### Pane Header
A default `<Pane>` builds a simple header that includes centered title text (supplied in the `paneTitle` prop) with customizable menus at either end (`firstMenu`, `lastMenu` props). When the page is rendered in a right-to-left language, the menus will automatically switch placement.

Add an `<AppIcon />`-component to the pane header by providing an `appIcon`-prop that matches the key of an installed FOLIO app. Providing the `appIconKey`-prop will display a specific icon that is bundled with the app with they key of `appIcon` (optional). See example below.
```js
const paneStartMenu = <PaneMenu><button><Icon icon="bookmark" /></button></PaneMenu>
<Pane defaultWidth="50%" paneTitle="Example First Menu" firstMenu={paneStartMenu} appIcon="instances" appIconKey="items">
    // Pane Content...
</Pane>
```
### Custom Header
If the header needs functionality, the `header` prop will accept a component to render instead of the default pane header.
```js
const searchHeader = <FilterPaneSearch id="SearchField" {...otherProps} />;
<Pane defaultWidth="20%" header={searchHeader}>
    // Pane Content
</Pane>
```

### Pane Action Menu
Activate the Pane Action Menu by supplying an array of objects to the `actionMenuItems` prop.
```js
const actionMenuItems = [
  {
    label: 'Edit',
    onClick: () => { console.log('Clicked!') }, // Using "onClick" will render a <button>
    id="some-id" // Other keys such as id, className, title etc. will be spread on each action menu item
  },
  {
    label: 'Jump to section',
    href: '#section-id', // Using "href" will render a <a>
  },
  {
    label: 'Go to user',
    to: '/user/xxx', // Using "to" will render the react-router's <Link>
  },
];

<Pane defaultWidth="20%" paneTitle="My title" actionMenuItems={actionMenuItems}>
    // Pane Content
</Pane>
```


### Props
Name | type | description | default | required<commit_msg>fix typo in Pane readme<commit_after># Pane

Primary staple of layout for FOLIO modules.

### Sizing
A Pane requires a `defaultWidth` prop to tell its parent `<Paneset>` how it should be sized. The following example has a first pane with a static width of 20% and a second pane with dynamic width (supplied `"fill"` for its `defaultWidth`) that will occupy the remaining width of the paneset.
```js
import Paneset from '@folio/stripes-components/lib/Paneset';
import Pane from '@folio/stripes-components/lib/Pane';

<Paneset>
    <Pane defaultWidth="20%" paneTitle="Filters">
        // Pane Content
    </Pane>
    <Pane defaultWidth="fill" paneTitle="Search Results">
        // Pane Content
    </Pane>
</Paneset>
```


#### Dismissible
To make a pane dismissible, simply supply the `dismissible` prop and a module-level handler to the `onClose` prop.
```js
    // set up boolean for rendering the pane...
    this.state = {
        showPane: true,
    };
    // ...
    handleClose() {
        this.setState({showPane: false});
    }
    // in the module's 'render' function...
    {
        this.state.showPane &&
        <Pane paneTitle="Dismiss this" dismissible onClose={this.handleClose}>
            // Pane Content...
        </Pane>
    }
```
### Pane Header
A default `<Pane>` builds a simple header that includes centered title text (supplied in the `paneTitle` prop) with customizable menus at either end (`firstMenu`, `lastMenu` props). When the page is rendered in a right-to-left language, the menus will automatically switch placement.

Add an `<AppIcon />`-component to the pane header by providing an `appIcon`-prop that matches the key of an installed FOLIO app. Providing the `appIconKey`-prop will display a specific icon that is bundled with the app with they key of `appIcon` (optional). See example below.
```js
const paneStartMenu = <PaneMenu><button><Icon icon="bookmark" /></button></PaneMenu>
<Pane defaultWidth="50%" paneTitle="Example First Menu" firstMenu={paneStartMenu} appIcon="instances" appIconKey="items">
    // Pane Content...
</Pane>
```
### Custom Header
If the header needs functionality, the `header` prop will accept a component to render instead of the default pane header.
```js
const searchHeader = <FilterPaneSearch id="SearchField" {...otherProps} />;
<Pane defaultWidth="20%" header={searchHeader}>
    // Pane Content
</Pane>
```

### Pane Action Menu
Activate the Pane Action Menu by supplying an array of objects to the `actionMenuItems` prop.
```js
const actionMenuItems = [
  {
    label: 'Edit',
    onClick: () => { console.log('Clicked!') }, // Using "onClick" will render a <button>
    id: 'some-id' // Other keys such as id, className, title etc. will be spread on each action menu item
  },
  {
    label: 'Jump to section',
    href: '#section-id', // Using "href" will render a <a>
  },
  {
    label: 'Go to user',
    to: '/user/xxx', // Using "to" will render the react-router's <Link>
  },
];

<Pane defaultWidth="20%" paneTitle="My title" actionMenuItems={actionMenuItems}>
    // Pane Content
</Pane>
```


### Props
Name | type | description | default | required
{'fraction_non_alphanumeric': 0.12841399137517967, 'fraction_numerical': 0.0031943778949049674, 'mean_word_length': 3.564139941690962, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2084528', 'n_tokens_mistral': 1893, 'n_tokens_neox': 1798, 'n_words': 716}