From 376f97c5cd5ebcecfdcc8fa45f7c37885bb900e0 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sun, 3 Nov 2024 23:51:54 +0800
Subject: [PATCH] Menu: add document

---
 src/material/Menu.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/material/Menu.tsx b/src/material/Menu.tsx
index 5cae4e2..916fc76 100644
--- a/src/material/Menu.tsx
+++ b/src/material/Menu.tsx
@@ -30,6 +30,24 @@ function px(n?: number) {
   }
 }
 
+/**
+ * Create managed state for {@link Menu}. This function
+ * expose an "open" closure for you to open the menu. The
+ * opening and closing is automatically managed internally.
+ *
+ * @returns The first element is the "open" closure, calls
+ *   with anchor infomation to open the menu.
+ *   The second element is the state props for {@link Menu}, use
+ *   spread syntax to set the props.
+ * @example
+ * ````tsx
+ * const [openMenu, menuState] = createManagedMenuState();
+ *
+ * <Menu {...menuState}></Menu>
+ *
+ * <Button onClick={event => openMenu(event.currectTarget.getBoundingClientRect())} />
+ * ````
+ */
 export function createManagedMenuState() {
   const [anchor, setAnchor] = createSignal<Anchor>();
 
@@ -45,6 +63,14 @@ export function createManagedMenuState() {
   ] as const;
 }
 
+/**
+ * Material Menu Component. This component is
+ * implemented with dialog and {@link MenuList} from SUID.
+ *
+ * Notes:
+ * - Use {@link createManagedMenuState} and you don't need to manage the open and close.
+ * - Use {@link MenuItem} from SUID as children.
+ */
 const Menu: Component<MenuProps> = (props) => {
   let root: HTMLDialogElement;
   const windowSize = useWindowSize();