Menu: add document

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();