Merge pull request #161 from icflorescu/next

Fix ios touch events, update dev deps

Author: icflorescu

CHANGELOG.md

@@ -3,6 +3,11 @@
 The following is a list of notable changes to the Mantine ContextMenu component.  
 Minor versions that are not listed in the changelog are minor bug fixes and small internal improvements or refactorings.
 
+## 7.9.1 (2024-05-09)
+
+- Update dev dependencies to ensure compatibility with Mantine 7.9.1
+- Fix iOS touch events
+
 ## 7.9.0 (2024-05-03)
 
 - Update dev dependencies to ensure compatibility with Mantine 7.9

app/(home)/HeroImage.module.css

@@ -7,6 +7,8 @@
   transition: filter 0.5s;
   filter: sepia(0) grayscale(0);
   cursor: context-menu;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
 }
 
 .sepia {

app/(home)/HomePageTitle.module.css

@@ -19,6 +19,7 @@
 
 .gradientText {
   cursor: context-menu;
+  -webkit-user-select: none;
 }
 
 .mantineDataTableIcon {

components/Picture.module.css

@@ -28,6 +28,8 @@
   border-radius: var(--mantine-radius-sm);
   overflow: hidden;
   cursor: context-menu;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
 }
 
 .image {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-contextmenu",
-  "version": "7.9.0",
+  "version": "7.9.1",
   "description": "Craft your applications for productivity and meet your users’ expectations by enhancing your Mantine-based UIs with a desktop-grade, lightweight yet fully-featured, dark-theme aware context-menu component, built by the creator of Mantine DataTable",
   "keywords": [
     "ui",
@@ -72,14 +72,14 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@ducanh2912/next-pwa": "^10.2.6",
-    "@mantine/code-highlight": "^7.9.0",
-    "@mantine/core": "^7.9.0",
-    "@mantine/hooks": "^7.9.0",
-    "@mantine/notifications": "^7.9.0",
+    "@ducanh2912/next-pwa": "^10.2.7",
+    "@mantine/code-highlight": "^7.9.1",
+    "@mantine/core": "^7.9.1",
+    "@mantine/hooks": "^7.9.1",
+    "@mantine/notifications": "^7.9.1",
     "@tabler/icons-react": "^3.3.0",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.12.8",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.11",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",

package/ContextMenuProvider.tsx

@@ -56,12 +56,8 @@ export function ContextMenuProvider({
     e.preventDefault();
     e.stopPropagation();
 
-    const x = "touches" in e
-      ? e.touches[0].clientX
-      : e.clientX;
-    const y = "touches" in e
-      ? e.touches[0].clientY
-      : e.clientY;
+    const { x, y } =
+      'touches' in e ? { x: e.touches.item(0).clientX, y: e.touches.item(0).clientY } : { x: e.clientX, y: e.clientY };
 
     setData({
       x,

package/types.ts

@@ -178,7 +178,7 @@ export type ShowContextMenuFunction = (
    * Context menu options (overrides provider props).
    */
   options?: ContextMenuOptions
-) => React.MouseEventHandler;
+) => React.MouseEventHandler & React.TouchEventHandler;
 
 /**
  * Hide context menu function