From d4eb3461425f02c0d213b37ef78d159fab5396db Mon Sep 17 00:00:00 2001
From: Emily Kellison-Linn <4672118+emilykl@users.noreply.github.com>
Date: Thu, 30 Nov 2023 12:37:37 -0500
Subject: [PATCH] add polyfill for Safari

---
 package-lock.json                     | 6 ++++++
 package.json                          | 5 +++--
 src/lib/components/Cytoscape.react.js | 4 ++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b7dd636f..5a55ef3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
+        "@ungap/custom-elements": "^1.3.0",
         "cytoscape-cola": "^2.5.1",
         "cytoscape-context-menus": "^4.1.0",
         "cytoscape-cose-bilkent": "^4.1.0",
@@ -3099,6 +3100,11 @@
       "integrity": "sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg==",
       "dev": true
     },
+    "node_modules/@ungap/custom-elements": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/custom-elements/-/custom-elements-1.3.0.tgz",
+      "integrity": "sha512-f4q/s76+8nOy+fhrNHyetuoPDR01lmlZB5czfCG+OOnBw/Wf+x48DcCDPmMQY7oL8xYFL8qfenMoiS8DUkKBUw=="
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
diff --git a/package.json b/package.json
index 46817dab..ee8bcd65 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
   "author-email": "cytoscape@plotly.com",
   "license": "MIT",
   "dependencies": {
+    "@ungap/custom-elements": "^1.3.0",
     "cytoscape-cola": "^2.5.1",
     "cytoscape-context-menus": "^4.1.0",
     "cytoscape-cose-bilkent": "^4.1.0",
@@ -56,9 +57,9 @@
   "devDependencies": {
     "@babel/core": "^7.23.0",
     "@babel/eslint-parser": "^7.22.15",
-    "babel-loader": "^9.1.3",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
+    "babel-loader": "^9.1.3",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.8.1",
     "eslint": "^8.50.0",
@@ -82,4 +83,4 @@
     "node": ">=8.11.0",
     "npm": ">=6.1.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/Cytoscape.react.js b/src/lib/components/Cytoscape.react.js
index cbec0afe..56f0c548 100644
--- a/src/lib/components/Cytoscape.react.js
+++ b/src/lib/components/Cytoscape.react.js
@@ -9,6 +9,10 @@ import CytoscapeComponent from 'react-cytoscapejs';
 import _ from 'lodash';
 import {v4 as uuidv4} from 'uuid';
 import CyResponsive from '../cyResponsive.js';
+
+// Polyfill so that context menu extension works in Safari
+import '@ungap/custom-elements';
+
 const cytoscape = require('cytoscape');
 const contextMenus = require('cytoscape-context-menus');