kelt-ui-kit-react 1.7.9 → 1.8.1

package/package.json

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

package/src/sidebar/Sidebar.tsx

@@ -62,7 +62,7 @@ export const Sidebar = ({
   }, [onClose]);
 
   const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent | TouchEvent) => {
       if (!closeOnClickOutside) return;
       if (
         sidebarRef.current &&
@@ -96,15 +96,28 @@ export const Sidebar = ({
     [isOpen, toggleSidebar],
   );
 
+  const handleOverlayTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      event.preventDefault();
+      toggleSidebar();
+    },
+    [toggleSidebar],
+  );
+
   useEffect(() => {
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside, {
+        passive: true,
+      });
     } else {
       document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
     }
 
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [isOpen, handleClickOutside]);
 
@@ -114,7 +127,13 @@ export const Sidebar = ({
 
   return ReactDOM.createPortal(
     <>
-      {isOpen && displayOverlay && <div className="overlay"></div>}
+      {isOpen && displayOverlay && (
+        <div
+          className="overlay"
+          onClick={toggleSidebar}
+          onTouchEnd={handleOverlayTouchEnd}
+        ></div>
+      )}
       <div
         ref={sidebarRef}
         style={width ? { width: width } : {}}

package/src/sidebar/sidebar.css

@@ -1,3 +1,12 @@
+.overlay {
+  touch-action: none;
+}
+
+.toggle-btn {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
 .sidebar {
   width: 200px;
   height: 100vh;
@@ -10,6 +19,8 @@
   transform: translateX(0);
   z-index: 2;
 
+
+
   &:not(.full) {
     inset: 0;
   }
@@ -84,4 +95,4 @@
       width: 40vw;
     }
   }
-}
+}