feat: add bucket browser

src/lib/disclosure.ts

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { createStore, useStore } from "zustand";
 
 export const createDisclosure = <T = any>() => {
@@ -6,9 +7,28 @@ export const createDisclosure = <T = any>() => {
     isOpen: false,
   }));
 
+  const useDisclosure = () => {
+    const dialogRef = useRef<HTMLDialogElement>(null);
+    const data = useStore(store);
+
+    useEffect(() => {
+      const dlg = dialogRef.current;
+      if (!dlg || !data.isOpen) return;
+
+      const onDialogClose = () => {
+        store.setState({ isOpen: false });
+      };
+
+      dlg.addEventListener("close", onDialogClose);
+      return () => dlg.removeEventListener("close", onDialogClose);
+    }, [dialogRef, data.isOpen]);
+
+    return { ...data, dialogRef } as const;
+  };
+
   return {
     store,
-    use: () => useStore(store),
+    use: useDisclosure,
     open: (data?: T | null) => store.setState({ isOpen: true, data }),
     close: () => store.setState({ isOpen: false }),
   };