Add onClick handler for ToggleMenuItem (#324)

Author: florianduros

src/components/Menu/MenuItem.tsx

@@ -55,6 +55,11 @@ type Props<C extends MenuItemElement> = {
    */
   // This prop is required because it's rare to not want a selection handler
   onSelect: ((e: Event) => void) | null;
+  /**
+   * Event callback for when the item is clicked.
+   * @param e
+   */
+  onClick?: (e: Event) => void;
   /**
    * The color variant of the menu item.
    * @default primary
@@ -65,7 +70,7 @@ type Props<C extends MenuItemElement> = {
    * Whether to hide the chevron navigation hint.
    */
   hideChevron?: boolean;
-} & Omit<ComponentPropsWithoutRef<C>, "onSelect">;
+} & Omit<ComponentPropsWithoutRef<C>, "onSelect" | "onClick">;
 
 /**
  * An item within a menu, acting either as a navigation button, or simply a

src/components/Menu/ToggleMenuItem.tsx

@@ -11,7 +11,7 @@ import { ToggleInput } from "../Form/Controls/Toggle";
 
 type Props = Pick<
   ComponentProps<typeof MenuItem>,
-  "className" | "Icon" | "label" | "onSelect" | "disabled"
+  "className" | "Icon" | "label" | "onSelect" | "disabled" | "onClick"
 > & {
   /**
    * Whether the toggle is checked.
@@ -25,7 +25,7 @@ type Props = Pick<
  */
 export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
   function ToggleMenuItem(
-    { className, Icon, label, onSelect, checked, disabled },
+    { className, Icon, label, onSelect, checked, disabled, onClick },
     ref,
   ) {
     const toggleId = useId();
@@ -46,6 +46,7 @@ export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
         label={label}
         onSelect={onSelect}
         disabled={disabled}
+        onClick={onClick}
       >
         <ToggleInput
           id={toggleId}