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

<Meta title="Utilities/Click Outside" component={ClickOutside} />

# Click Outside

Wrapper component which let's you respond to click events that occur outside of the elements you wrapped.

This component wraps it's children in a single unstyled element and triggers an `onClickOutside` event handler whenever a click event triggers anywhere in the document but did not target one of this component's descendants. This is useful for closing menu's and tooltips.

- `onClickOutside`: a callback that is triggered whenever a click event occurs outside of `children`. The callback is called with the `MouseEvent` of the corresponding click event.
- `children`: the contents that are wrapped and tested against for outside click events.

## Default

<Canvas>
  <Story id="utilities-click-outside--default" />
</Canvas>

## Props

<FlowPropsTable ofComponent={ClickOutside} />

## External Reference

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