import { Canvas, Meta } from "@storybook/blocks";
import { FunctionArgument, FunctionArguments, Link, UsageGuidelines } from "vibe-storybook-components";
import * as UseClickOutsideStories from "./useClickOutside.stories";

<Meta of={UseClickOutsideStories} />

# useClickOutside

- [Overview](#overview)
- [Arguments](#arguments)
- [Usage](#usage)
- [Feedback](#feedback)

## Overview

This hook is used when you want to capture click events outside your component.

<Canvas of={UseClickOutsideStories.Overview} />

## Arguments

<FunctionArguments>
  <FunctionArgument name="options" type="Object">
    <FunctionArgument
      name="ref"
      type="React.MutableRefObject"
      description={
        <>
          A React
          <Link href="https://react.dev/reference/react/useRef">ref</Link>
          object.
        </>
      }
      required
    />
    <FunctionArgument
      name="callback"
      type="(value: string) => void"
      description="Callback function to execute on outside clicks."
      required
    />
    <FunctionArgument
          name="ignoreClasses"
          type="string[]"
          description="A list of classes to ignore when checking if the click is outside the element."
        />
    <FunctionArgument
      name="eventName"
      type="keyof HTMLElementEventMap | string"
      description={
        <>
          The event to listen to. See
          <Link href="https://developer.mozilla.org/en-US/docs/Web/Events">a full list</Link>
          for more info.
        </>
      }
      defaultValue="click"
    />
  </FunctionArgument>
</FunctionArguments>

## Usage

<UsageGuidelines
  guidelines={[
    "Use this hook when you want to listen on events outside of the element",
    "Use this hook when you need to use events not from the react app"
  ]}
/>