kelt-ui-kit-react 1.7.8 → 1.7.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/sidebar/Sidebar.tsx

@@ -29,6 +29,8 @@ export const Sidebar = ({
   const [isOpen, setIsOpen] = useState(open || false);
   const sidebarRef = useRef<HTMLDivElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
 
   // Créer le conteneur une seule fois
   useEffect(() => {
@@ -69,7 +71,29 @@ export const Sidebar = ({
         toggleSidebar();
       }
     },
-    [toggleSidebar, closeOnClickOutside]
+    [toggleSidebar, closeOnClickOutside],
+  );
+
+  const handleTouchStart = useCallback((event: React.TouchEvent) => {
+    const touch = event.touches[0];
+    touchStartX.current = touch.clientX;
+    touchStartY.current = touch.clientY;
+  }, []);
+
+  const handleTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      if (!isOpen) return;
+
+      const touch = event.changedTouches[0];
+      const deltaX = touch.clientX - touchStartX.current;
+      const deltaY = Math.abs(touch.clientY - touchStartY.current);
+
+      // Ferme seulement sur un vrai swipe horizontal gauche -> droite.
+      if (deltaX > 60 && deltaY < 40) {
+        toggleSidebar();
+      }
+    },
+    [isOpen, toggleSidebar],
   );
 
   useEffect(() => {
@@ -95,6 +119,8 @@ export const Sidebar = ({
         ref={sidebarRef}
         style={width ? { width: width } : {}}
         className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
       >
         <div className="sidebar-header">
           {title && <h2 className="flex-1">{title}</h2>}
@@ -106,6 +132,6 @@ export const Sidebar = ({
         {children && children}
       </div>
     </>,
-    rootRef.current
+    rootRef.current,
   );
 };