chore: [UEPR-56] resolve merge conflicts

Author: MiroslavDionisiev

packages/scratch-gui/src/components/context-menu/context-menu.jsx

@@ -1,43 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// eslint-disable-next-line import/no-unresolved
-import {ContextMenuItem} from '@radix-ui/react-context-menu';
+import ContextMenu from '../../lib/radix-ui-context-menu.js';
 import classNames from 'classnames';
 import styles from './context-menu.css';
 
 const StyledMenuItem = ({children, ...props}) => (
-    <ContextMenuItem
+    <ContextMenu.ContextMenuItem
         className={styles.menuItem}
         {...props}
     >
         {children}
-    </ContextMenuItem>
+    </ContextMenu.ContextMenuItem>
 );
 
 StyledMenuItem.propTypes = {
     children: PropTypes.node
 };
 
 const BorderedMenuItem = ({children, ...props}) => (
-    <ContextMenuItem
+    <ContextMenu.ContextMenuItem
         className={classNames(styles.menuItem, styles.menuItemBordered)}
         {...props}
     >
         {children}
-    </ContextMenuItem>
+    </ContextMenu.ContextMenuItem>
 );
 
 BorderedMenuItem.propTypes = {
     children: PropTypes.node
 };
 
 const DangerousMenuItem = ({children, ...props}) => (
-    <ContextMenuItem
+    <ContextMenu.ContextMenuItem
         className={classNames(styles.menuItem, styles.menuItemBordered, styles.menuItemDanger)}
         {...props}
     >
         {children}
-    </ContextMenuItem>
+    </ContextMenu.ContextMenuItem>
 );
 
 DangerousMenuItem.propTypes = {

packages/scratch-gui/src/components/monitor/monitor.jsx

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Draggable from 'react-draggable';
 import {FormattedMessage} from 'react-intl';
-// eslint-disable-next-line import/no-unresolved
-import * as ContextMenu from '@radix-ui/react-context-menu';
+import ContextMenu from '../../lib/radix-ui-context-menu.js';
 import Box from '../box/box.jsx';
 import DefaultMonitor from './default-monitor.jsx';
 import LargeMonitor from './large-monitor.jsx';

packages/scratch-gui/src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -6,8 +6,7 @@ import styles from './sprite-selector-item.css';
 import contextMenuStyles from '../context-menu/context-menu.css';
 import {DangerousMenuItem, MenuItem} from '../context-menu/context-menu.jsx';
 import {FormattedMessage} from 'react-intl';
-// eslint-disable-next-line import/no-unresolved
-import * as ContextMenu from '@radix-ui/react-context-menu';
+import ContextMenu from '../../lib/radix-ui-context-menu.js';
 
 const SpriteSelectorItem = props => {
     useEffect(() => {

packages/scratch-gui/src/containers/sprite-selector-item.jsx

@@ -127,8 +127,10 @@ class SpriteSelectorItem extends React.PureComponent {
         this.setState({isDeletePromptOpen: false});
     }
     setRef (component) {
-        // Access the DOM node using .elem because it is going through ContextMenuTrigger
-        this.ref = component;
+        // The ref is on the element inside ContextMenu.Trigger
+        if (component) {
+            this.ref = component;
+        }
     }
     render () {
         const {

packages/scratch-gui/src/lib/radix-ui-context-menu.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/no-unresolved */
+/*
+    https://github.com/import-js/eslint-plugin-import/issues/1810
+    eslint-plugin-import is not aware of exports definition in package.json
+    meaning we should disable linting for this import or use require instead
+    moved the import in a separate file so that the disabling happens in one place only
+*/
+import * as ContextMenu from '@radix-ui/react-context-menu';
+
+export default ContextMenu;