From 8d4b53cc91b66274f4c71b35c7826fafa0850caa Mon Sep 17 00:00:00 2001
From: Alex Mushegov <alexey.mushegov@animabiotech.com>
Date: Sun, 22 Jun 2025 19:41:56 +0400
Subject: [PATCH 1/2] feat(Tappable): expose onPointerDown and onPointerCancel
 props

---
 src/components/Service/Tappable/Tappable.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Service/Tappable/Tappable.tsx b/src/components/Service/Tappable/Tappable.tsx
index ab607c3c..ae980680 100644
--- a/src/components/Service/Tappable/Tappable.tsx
+++ b/src/components/Service/Tappable/Tappable.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AllHTMLAttributes, ElementType, forwardRef } from 'react';
+import { AllHTMLAttributes, ElementType, forwardRef, PointerEvent } from 'react';
 import styles from './Tappable.module.css';
 
 import { classNames } from 'helpers/classNames';
@@ -21,10 +21,22 @@ export const Tappable = forwardRef(({
   className,
   interactiveAnimation = 'background',
   readOnly,
+  onPointerDown,
+  onPointerCancel,
   ...restProps
 }: TappableProps, ref) => {
   const platform = usePlatform();
-  const { clicks, onPointerCancel, onPointerDown } = useRipple();
+  const { clicks, onPointerCancel: handleRipplePointerCancel, onPointerDown: handleRipplePointerDown } = useRipple();
+
+  const handlePointerDown = (e: PointerEvent<HTMLElement>) => {
+    onPointerDown?.(e);
+    handleRipplePointerDown(e);
+  };
+
+  const handlePointerCancel = (e: PointerEvent<HTMLElement>) => {
+    onPointerCancel?.(e);
+    handleRipplePointerCancel(e);
+  };
 
   const hasRippleEffect = platform === 'base' && interactiveAnimation === 'background' && !readOnly;
   return (
@@ -36,8 +48,8 @@ export const Tappable = forwardRef(({
         interactiveAnimation === 'opacity' && styles['wrapper--opacity'],
         className,
       )}
-      onPointerCancel={onPointerCancel}
-      onPointerDown={onPointerDown}
+      onPointerCancel={handlePointerCancel}
+      onPointerDown={handlePointerDown}
       readOnly={readOnly}
       {...restProps}
     >

From 16be18e7788af3a29c22033dc852d70f0733b26c Mon Sep 17 00:00:00 2001
From: Alex Mushegov <alexey.mushegov@animabiotech.com>
Date: Sun, 13 Jul 2025 21:30:09 +0400
Subject: [PATCH 2/2] fix(Tappable): add calMultiple

---
 src/components/Service/Tappable/Tappable.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/Service/Tappable/Tappable.tsx b/src/components/Service/Tappable/Tappable.tsx
index ae980680..9fe7a0b5 100644
--- a/src/components/Service/Tappable/Tappable.tsx
+++ b/src/components/Service/Tappable/Tappable.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { AllHTMLAttributes, ElementType, forwardRef, PointerEvent } from 'react';
+import { AllHTMLAttributes, ElementType, forwardRef } from 'react';
 import styles from './Tappable.module.css';
 
 import { classNames } from 'helpers/classNames';
+import { callMultiple } from 'helpers/function';
 import { usePlatform } from 'hooks/usePlatform';
 
 import { useRipple } from './components/Ripple/hooks/useRipple';
@@ -28,15 +29,9 @@ export const Tappable = forwardRef(({
   const platform = usePlatform();
   const { clicks, onPointerCancel: handleRipplePointerCancel, onPointerDown: handleRipplePointerDown } = useRipple();
 
-  const handlePointerDown = (e: PointerEvent<HTMLElement>) => {
-    onPointerDown?.(e);
-    handleRipplePointerDown(e);
-  };
+  const handlePointerDown = callMultiple(onPointerDown, handleRipplePointerDown);
 
-  const handlePointerCancel = (e: PointerEvent<HTMLElement>) => {
-    onPointerCancel?.(e);
-    handleRipplePointerCancel(e);
-  };
+  const handlePointerCancel = callMultiple(onPointerCancel, handleRipplePointerCancel);
 
   const hasRippleEffect = platform === 'base' && interactiveAnimation === 'background' && !readOnly;
   return (