Use Disclosure

1"use client";
2 
3import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
4import { useCallback, useState } from "react";
5 
6export interface UseDisclosureProps {
7  open?: boolean;
8  defaultOpen?: boolean;
9  onOpen?: () => void;
10  onClose?: () => void;
11}
12 
13export const useDisclosure = (props: UseDisclosureProps = {}) => {
14  const handleOpen = useCallbackRef(props.onOpen);
15  const handleClose = useCallbackRef(props.onClose);
16  const [uncontrolledOpen, setUncontrolledOpen] = useState(
17    props.defaultOpen ?? false,
18  );
19 
20  const open = props.open !== undefined ? props.open : uncontrolledOpen;
21  const isControlled = props.open !== undefined;
22 
23  const onOpen = useCallback(() => {
24    if (!isControlled) {
25      setUncontrolledOpen(true);
26    }
27    handleOpen?.();
28  }, [isControlled, handleOpen]);
29 
30  const onClose = useCallback(() => {
31    if (!isControlled) {
32      setUncontrolledOpen(false);
33    }
34    handleClose?.();
35  }, [isControlled, handleClose]);
36 
37  const onOpenChange = useCallback(
38    (isOpen?: boolean) => {
39      const newIsOpen = isOpen !== undefined ? isOpen : !open;
40 
41      if (newIsOpen) {
42        onOpen();
43      } else {
44        onClose();
45      }
46    },
47    [open, onOpen, onClose],
48  );
49  return {
50    open,
51    onOpen,
52    onClose,
53    onOpenChange,
54  };
55};
56 
57export type UseDisclosureReturn = ReturnType<typeof useDisclosure>;