[WIP] usePopover

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/usePrevious/UsePrevious.tsx

@@ -15,6 +15,7 @@ function UsePrevious() {
     const [count, setCount] = useState(0);
     const [previous, toggleTrack] = usePrevious(count);
 
+
     return (<>
         <button onClick={() => setCount((count) => {
             const val = count + 1;

packages/react-tools/src/hooks/usePopover.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { useId } from "..";
+import { UsePopoverProps } from "../models";
+
+function usePopover<T extends HTMLElement>({ refBtn, refPopover, mode, buttonTrigger }: { refBtn: UsePopoverProps<T>["refBtn"], refPopover: UsePopoverProps<T>["refPopover"], mode: UsePopoverProps<T>["mode"], buttonTrigger: "on/off" }): { open: () => void, close: () => void };
+function usePopover<T extends HTMLElement>({ refBtn, refPopover, mode, buttonTrigger }: { refBtn: UsePopoverProps<T>["refBtn"], refPopover: UsePopoverProps<T>["refPopover"], mode: UsePopoverProps<T>["mode"], buttonTrigger: "toggle" }): { toggle: (isOpen: boolean) => void };
+function usePopover<T extends HTMLElement>({ refBtn, refPopover, mode, buttonTrigger }: UsePopoverProps<T>): { open: () => void, close: () => void } | { toggle: (isOpen: boolean) => void } {
+	const isSupported = refPopover.current ? "showPopover" in refPopover.current : false;
+	const id = useId();
+	if (refPopover.current) {
+		if (isSupported) {
+			refPopover.current.setAttribute("popover", mode);
+			!refPopover.current.id && (refPopover.current.id = id);
+		}
+	}
+	if (refBtn.current) {
+		if (isSupported) {
+			refBtn.current.setAttribute("popovertarget", refPopover.current?.id || "");
+			refBtn.current.setAttribute("popovertargetaction", buttonTrigger);
+		}
+	}
+
+	const open = useCallback(() => refPopover.current && "showPopover" in refPopover.current && refPopover.current.showPopover(), [refPopover]);
+	const close = useCallback(() => refPopover.current && "showPopover" in refPopover.current && refPopover.current.hidePopover(), [refPopover]);
+	const toggle = useCallback(() => refPopover.current && "showPopover" in refPopover.current && refPopover.current.togglePopover(), [refPopover]);
+
+	if (buttonTrigger === "on/off") {
+		return {
+			open,
+			close
+		}
+	}
+	return {
+		toggle
+	}
+}
+
+export { usePopover };

packages/react-tools/src/models/index.ts

@@ -14,4 +14,5 @@ export type { SpeechSynthesisSpeakParam, UseSpeechSynthesis, UseSpeechSynthesisP
 export type { UseFPSProps, UseFPSResult } from './useFPS.model';
 export type { UsePointerLockProps, UsePointerLockResult } from './usePointerLock.model';
 export type { UsePIPProps, UsePIPResult } from './usePIP.model';
-export type { DocumentPictureInPictureEvent, DocumentPIPOptions, UseDocumentPIPProps, UseDocumentPIPResult } from './useDocumentPIP.model';
+export type { DocumentPictureInPictureEvent, DocumentPIPOptions, UseDocumentPIPProps, UseDocumentPIPResult } from './useDocumentPIP.model';
+export type { UsePopoverProps } from './usePopover.model';

packages/react-tools/src/models/usePopover.model.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react"
+
+export interface UsePopoverProps<T extends HTMLElement> {
+	refBtn: RefObject<HTMLButtonElement>;
+	refPopover: RefObject<T>;
+	mode: "auto" | "manual",
+	buttonTrigger: "on/off" | "toggle"
+}