fix: use mergeRef

Author: gagik

packages/compass-crud/src/components/document-json-view-item.tsx

@@ -4,6 +4,7 @@ import { css, KeylineCard } from '@mongodb-js/compass-components';
 
 import JSONEditor, { type JSONEditorProps } from './json-editor';
 import { useDocumentItemContextMenu } from './use-document-item-context-menu';
+import { mergeRefs } from '@react-aria/utils';
 
 const keylineCardStyles = css({
   overflow: 'hidden',
@@ -41,31 +42,32 @@ const DocumentJsonViewItem: React.FC<DocumentJsonViewItemProps> = ({
   updateDocument,
   openInsertDocumentDialog,
 }) => {
-  const ref = useDocumentItemContextMenu({
+  const contextMenuRef = useDocumentItemContextMenu({
     doc,
     isEditable,
     copyToClipboard,
     openInsertDocumentDialog,
   });
 
   return (
-    <div ref={ref}>
-      <KeylineCard className={keylineCardStyles} ref={docRef}>
-        {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
-        <JSONEditor
-          doc={doc}
-          key={doc.uuid}
-          namespace={namespace}
-          editable={isEditable}
-          isTimeSeries={isTimeSeries}
-          copyToClipboard={copyToClipboard}
-          removeDocument={removeDocument}
-          replaceDocument={replaceDocument}
-          updateDocument={updateDocument}
-          openInsertDocumentDialog={openInsertDocumentDialog}
-        />
-      </KeylineCard>
-    </div>
+    <KeylineCard
+      className={keylineCardStyles}
+      ref={mergeRefs(docRef, contextMenuRef)}
+    >
+      {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
+      <JSONEditor
+        doc={doc}
+        key={doc.uuid}
+        namespace={namespace}
+        editable={isEditable}
+        isTimeSeries={isTimeSeries}
+        copyToClipboard={copyToClipboard}
+        removeDocument={removeDocument}
+        replaceDocument={replaceDocument}
+        updateDocument={updateDocument}
+        openInsertDocumentDialog={openInsertDocumentDialog}
+      />
+    </KeylineCard>
   );
 };
 

packages/compass-crud/src/components/document-list-view-item.tsx

@@ -33,30 +33,28 @@ const DocumentListViewItem: React.FC<DocumentListViewItemProps> = ({
   updateDocument,
   openInsertDocumentDialog,
 }) => {
-  const ref = useDocumentItemContextMenu({
+  const contextMenuRef = useDocumentItemContextMenu({
     doc,
     isEditable,
     copyToClipboard,
     openInsertDocumentDialog,
   });
 
   return (
-    <div ref={ref}>
-      <KeylineCard ref={docRef}>
-        {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
-        <Document
-          doc={doc}
-          key={doc.uuid}
-          editable={isEditable}
-          isTimeSeries={isTimeSeries}
-          copyToClipboard={copyToClipboard}
-          removeDocument={removeDocument}
-          replaceDocument={replaceDocument}
-          updateDocument={updateDocument}
-          openInsertDocumentDialog={openInsertDocumentDialog}
-        />
-      </KeylineCard>
-    </div>
+    <KeylineCard ref={mergeRefs(docRef, contextMenuRef)}>
+      {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
+      <Document
+        doc={doc}
+        key={doc.uuid}
+        editable={isEditable}
+        isTimeSeries={isTimeSeries}
+        copyToClipboard={copyToClipboard}
+        removeDocument={removeDocument}
+        replaceDocument={replaceDocument}
+        updateDocument={updateDocument}
+        openInsertDocumentDialog={openInsertDocumentDialog}
+      />
+    </KeylineCard>
   );
 };