import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { ControllableExpander } from './controllable-expander.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta
  title="Components/Layout Containers/Expander"
  component={ControllableExpander}
/>

# Controllable Expander

A generic unstyled expander component that accepts any element as the toggle and expandable content.

This component is designed to have its state managed externally. This leaves the consumer the freedom to use hooks, context, redux— you name it!

## Base Example

<Canvas>
  <Story id="components-layout-containers-controllable-expander--basic-interactive" />
</Canvas>

## Controlled with `useExpanderState`

Optionally, we expose a hook for `ControllableExpander` called `useExpanderState`.

`UseExpanderState` takes the initial state of your expander and returns an array including:

- **`isOpen`**: The state of your expander
- **`setIsOpen`**: The state setter function
- **`useExpanderChildCallback`**: A custom version of `useCallback` that sets `isOpen` to false before firing its given callback

<Canvas>
  <Story id="components-layout-containers-controllable-expander--closable-by-children" />
</Canvas>

## Props

<FlowPropsTable ofComponent={ControllableExpander} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/behaviors/controllable-expander"
  type="github"
/>