walk back potential breaking change and just use the new pattern hooray

Author: rpearce

.changeset/chilly-months-win.md

@@ -2,4 +2,4 @@
 "react-medium-image-zoom": minor
 ---
 
-Add support for onZoomChange reporting to Uncontrolled components and include additional argument housing the fired event information
+Add support for onZoomChange reporting to Uncontrolled components and include additional argument housing the fired event

.changeset/red-dingos-know.md

@@ -529,7 +529,6 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
    */
   handleZoom = (e: React.SyntheticEvent | Event) => {
     if (!this.props.isDisabled && this.hasImage()) {
-      e.stopPropagation()
       this.props.onZoomChange?.(true, { event: e })
     }
   }

source/Controlled.tsx

@@ -787,6 +787,17 @@ function CardItem({
     setIsSelected(e.currentTarget.checked)
   }, [])
 
+  const handleZoomChange = React.useCallback<
+    NonNullable<React.ComponentProps<typeof Zoom>['onZoomChange']>
+  >((value, { event }) => {
+    event.stopPropagation()
+
+    console.log(
+      'handleZoomChange (after event.stopPropagation())',
+      { value, event }
+    )
+  }, [])
+
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <li className="card" onClick={handleItemClick}>
@@ -799,7 +810,7 @@ function CardItem({
           type="checkbox"
         />
       </label>
-      <Zoom {...zoomProps} wrapElement="span">
+      <Zoom {...zoomProps} onZoomChange={handleZoomChange} wrapElement="span">
         <img
           alt={alt}
           src={src}