37 lines
880 B
TypeScript
37 lines
880 B
TypeScript
import { useClickOutside } from "@xtablo/shared/hooks/useClickOutside";
|
|
import React from "react";
|
|
|
|
interface ClickOutsideProps {
|
|
children: React.ReactNode;
|
|
onClickOutside: () => void;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Component that wraps children and detects clicks outside
|
|
* @param children - The content to wrap
|
|
* @param onClickOutside - Function to call when clicking outside
|
|
* @param className - Optional className for the wrapper
|
|
* @param disabled - Disable click outside detection
|
|
*/
|
|
export const ClickOutside: React.FC<ClickOutsideProps> = ({
|
|
children,
|
|
onClickOutside,
|
|
className,
|
|
disabled = false,
|
|
}) => {
|
|
const ref = useClickOutside<HTMLDivElement>(
|
|
disabled
|
|
? () => {
|
|
// Do nothing
|
|
}
|
|
: onClickOutside
|
|
);
|
|
|
|
return (
|
|
<div ref={ref} className={className}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|