add onChangeValue handler on Toggle component

Author: stomita

src/scripts/Toggle.tsx

@@ -1,7 +1,7 @@
-import React, { InputHTMLAttributes, Ref } from 'react';
+import React, { ChangeEvent, InputHTMLAttributes, Ref } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
-import { useFormElementId } from './hooks';
+import { useEventCallback, useFormElementId } from './hooks';
 import { createFC } from './common';
 
 /**
@@ -15,6 +15,7 @@ export type ToggleProps = {
   name?: string;
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
+  onValueChange?: (checked: boolean) => void;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 /**
@@ -31,9 +32,15 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
       cols,
       elementRef,
       inputRef,
+      onChange: onChange_,
+      onValueChange,
       ...rprops
     } = props;
     const id = useFormElementId(id_, 'toggle');
+    const onChange = useEventCallback((e: ChangeEvent<HTMLInputElement>) => {
+      onChange_?.(e);
+      onValueChange?.(e.target.checked);
+    });
     const toggleClassNames = classnames(
       className,
       'slds-checkbox_toggle slds-grid'
@@ -47,6 +54,7 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
           type='checkbox'
           aria-describedby='toggle-desc'
           {...rprops}
+          onChange={onChange}
         />
         <span className='slds-checkbox_faux_container' aria-live='assertive'>
           <span className='slds-checkbox_faux' />

stories/Toggle.stories.tsx

@@ -9,6 +9,7 @@ const meta: ComponentMeta<typeof Toggle> = {
   component: Toggle,
   argTypes: {
     onChange: { action: 'change' },
+    onValueChange: { action: 'valueChange' },
   },
 };
 export default meta;