[ToggleButton] Add prop types for onClick and onChange (mui#30883)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>

docs/pages/api-docs/toggle-button.json

@@ -14,6 +14,8 @@
     "disableFocusRipple": { "type": { "name": "bool" } },
     "disableRipple": { "type": { "name": "bool" } },
     "fullWidth": { "type": { "name": "bool" } },
+    "onChange": { "type": { "name": "func" } },
+    "onClick": { "type": { "name": "func" } },
     "selected": { "type": { "name": "bool" } },
     "size": {
       "type": {

docs/pages/material/api/toggle-button.json

@@ -14,6 +14,8 @@
     "disableFocusRipple": { "type": { "name": "bool" } },
     "disableRipple": { "type": { "name": "bool" } },
     "fullWidth": { "type": { "name": "bool" } },
+    "onChange": { "type": { "name": "func" } },
+    "onClick": { "type": { "name": "func" } },
     "selected": { "type": { "name": "bool" } },
     "size": {
       "type": {

docs/translations/api-docs/toggle-button/toggle-button.json

@@ -8,6 +8,8 @@
     "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
     "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
     "fullWidth": "If <code>true</code>, the button will take up the full width of its container.",
+    "onChange": "Callback fired when the state changes.<br><br><strong>Signature:</strong><br><code>function(event: React.MouseEvent&lt;HTMLElement&gt;, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> of the selected button.",
+    "onClick": "Callback fired when the button is clicked.<br><br><strong>Signature:</strong><br><code>function(event: React.MouseEvent&lt;HTMLElement&gt;, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> of the selected button.",
     "selected": "If <code>true</code>, the button is rendered in an active state.",
     "size": "The size of the component. The prop defaults to the value inherited from the parent ToggleButtonGroup component.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",

packages/mui-material/src/ToggleButton/ToggleButton.d.ts

@@ -1,5 +1,6 @@
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
+import * as React from 'react';
 import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
@@ -45,6 +46,20 @@ export type ToggleButtonTypeMap<
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * Callback fired when the state changes.
+     *
+     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+     * @param {any} value of the selected button.
+     */
+    onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+    /**
+     * Callback fired when the button is clicked.
+     *
+     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+     * @param {any} value of the selected button.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
     /**
      * If `true`, the button is rendered in an active state.
      */

packages/mui-material/src/ToggleButton/ToggleButton.js

@@ -194,11 +194,17 @@ ToggleButton.propTypes /* remove-proptypes */ = {
    */
   fullWidth: PropTypes.bool,
   /**
-   * @ignore
+   * Callback fired when the state changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onChange: PropTypes.func,
   /**
-   * @ignore
+   * Callback fired when the button is clicked.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onClick: PropTypes.func,
   /**

packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import ToggleButton from '@mui/material/ToggleButton';
+
+<ToggleButton value="" onChange={(event, value: string) => {}} onClick={(event, value) => {}} />;