fix: passive event warning on mobile (#7484)

.changeset/fast-cherries-flash.md

@@ -0,0 +1,8 @@
+---
+"@chakra-ui/radio": patch
+---
+
+- Fix issue where shows console warning due to `preventDefault` call in pointer
+  event on mobile
+
+- Add deprecation warning for `getCheckboxProps` in favor of `getRadioProps`

.changeset/modern-ads-glow.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/checkbox": patch
+---
+
+Fix issue where shows console warning due to `preventDefault` call in pointer
+event on mobile

packages/components/checkbox/src/use-checkbox.ts

@@ -306,7 +306,6 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
       ...props,
       ref: forwardedRef,
       onMouseDown: callAllHandlers(props.onMouseDown, stopEvent),
-      onTouchStart: callAllHandlers(props.onTouchStart, stopEvent),
       "data-disabled": dataAttr(isDisabled),
       "data-checked": dataAttr(isChecked),
       "data-invalid": dataAttr(isInvalid),

packages/components/radio/src/use-radio.ts

@@ -272,8 +272,7 @@ export function useRadio(props: UseRadioProps = {}) {
   const getLabelProps: PropGetter = (props = {}, ref = null) => ({
     ...props,
     ref,
-    onMouseDown: callAllHandlers(props.onMouseDown, stop),
-    onTouchStart: callAllHandlers(props.onTouchStart, stop),
+    onMouseDown: callAllHandlers(props.onMouseDown, stopEvent),
     "data-disabled": dataAttr(isDisabled),
     "data-checked": dataAttr(isChecked),
     "data-invalid": dataAttr(isInvalid),
@@ -300,8 +299,11 @@ export function useRadio(props: UseRadioProps = {}) {
 
   return {
     state,
-    // the function is renamed to getRadioProps to make the code more consistent. It is renamed towards outside because otherwise this would produce a breaking change
+    /**
+     * @deprecated - use `getRadioProps` instead
+     */
     getCheckboxProps: getRadioProps,
+    getRadioProps,
     getInputProps,
     getLabelProps,
     getRootProps,
@@ -312,7 +314,7 @@ export function useRadio(props: UseRadioProps = {}) {
 /**
  * Prevent `onBlur` being fired when the radio label is touched
  */
-function stop(event: React.SyntheticEvent) {
+function stopEvent(event: React.SyntheticEvent) {
   event.preventDefault()
   event.stopPropagation()
 }