feat: Open card actions on right-click

client/src/lib/popup/use-popup.jsx

@@ -4,7 +4,7 @@
  */
 
 import { ResizeObserver } from '@juggle/resize-observer';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
 
@@ -12,13 +12,13 @@ import styles from './Popup.module.css';
 
 export default (Step, { position, onOpen, onClose } = {}) => {
   return useMemo(() => {
-    const Popup = React.memo(({ children, ...stepProps }) => {
+    const Popup = React.forwardRef(({ children, ...stepProps }, ref) => {
       const [isOpened, setIsOpened] = useState(false);
 
       const wrapperRef = useRef(null);
       const resizeObserverRef = useRef(null);
 
-      const handleOpen = useCallback(() => {
+      const open = useCallback(() => {
         setIsOpened(true);
 
         if (onOpen) {
@@ -26,6 +26,10 @@ export default (Step, { position, onOpen, onClose } = {}) => {
         }
       }, []);
 
+      const handleOpen = useCallback(() => {
+        open();
+      }, [open]);
+
       const handleClose = useCallback(() => {
         setIsOpened(false);
       }, []);
@@ -73,6 +77,14 @@ export default (Step, { position, onOpen, onClose } = {}) => {
         resizeObserverRef.current.observe(element);
       }, []);
 
+      useImperativeHandle(
+        ref,
+        () => ({
+          open,
+        }),
+        [open],
+      );
+
       const tigger = React.cloneElement(children, {
         onClick: handleTriggerClick,
       });
@@ -116,6 +128,6 @@ export default (Step, { position, onOpen, onClose } = {}) => {
       children: PropTypes.node.isRequired,
     };
 
-    return Popup;
+    return React.memo(Popup);
   }, [position, onOpen, onClose]);
 };