# Click Outside Components

This module provides two ways to detect clicks outside of elements: a hook and a wrapper component.

## `useClickOutside` Hook

A React hook that detects clicks outside of a referenced element.

### Usage

```tsx
import { useClickOutside } from "../hooks/useClickOutside";

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useClickOutside<HTMLDivElement>(() => setIsOpen(false));

  return (
    <div ref={ref}>{/* Content that will close when clicking outside */}</div>
  );
}
```

### Parameters

- `callback: () => void` - Function to call when clicking outside

### Returns

- `ref` - React ref to attach to the element you want to monitor

## `ClickOutside` Component

A wrapper component that handles click outside detection for its children.

### Usage

```tsx
import { ClickOutside } from "./ClickOutside";

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ClickOutside onClickOutside={() => setIsOpen(false)}>
      <div>{/* Content that will close when clicking outside */}</div>
    </ClickOutside>
  );
}
```

### Props

- `children: React.ReactNode` - The content to wrap
- `onClickOutside: () => void` - Function to call when clicking outside
- `className?: string` - Optional className for the wrapper div
- `disabled?: boolean` - Disable click outside detection (default: false)

## Common Use Cases

### Modal Dialog

```tsx
<div className="fixed inset-0 bg-black/50 flex items-center justify-center">
  <ClickOutside onClickOutside={closeModal}>
    <div className="bg-white rounded-lg p-6">Modal content</div>
  </ClickOutside>
</div>
```

### Dropdown Menu

```tsx
<div className="relative">
  <button onClick={toggleMenu}>Menu</button>
  {isOpen && (
    <ClickOutside
      onClickOutside={closeMenu}
      className="absolute top-full left-0"
    >
      <div className="bg-white border rounded shadow">Menu items</div>
    </ClickOutside>
  )}
</div>
```

### Popover/Tooltip

```tsx
<ClickOutside onClickOutside={closePopover}>
  <div className="bg-white border rounded shadow p-4">Popover content</div>
</ClickOutside>
```

## Notes

- The hook uses `mousedown` events for detection
- Event listeners are properly cleaned up when the component unmounts
- The wrapper component adds a single `div` element
- Use the `disabled` prop to temporarily disable click outside detection
- TypeScript generic support for proper ref typing
