Introduce wrapper component for DataGridRow

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -31,7 +31,7 @@ export function DataGrid({ gridTemplateColumns, children }: DataGridProps) {
   );
 }
 
-export const DataGridRow = styled.div<{ $focused?: boolean }>`
+const StyledDataGridRow = styled.div<{ $focused?: boolean }>`
   display: contents;
 
   &:hover > * {
@@ -47,6 +47,20 @@ export const DataGridRow = styled.div<{ $focused?: boolean }>`
   }
 `;
 
+interface DataGridRowProps {
+  focused?: boolean;
+  children: React.ReactNode;
+  ref?: React.Ref<HTMLElement | undefined>;
+}
+
+export function DataGridRow({ focused, children, ref }: DataGridRowProps) {
+  return (
+    <StyledDataGridRow $focused={focused} ref={ref}>
+      {children}
+    </StyledDataGridRow>
+  );
+}
+
 const StyledDataGridCell = styled.div<{
   $gridRow?: string | number;
   $gridColumn?: string | number;

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -160,7 +160,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
       <DataGridRow
         data-testid="modelable-method-row"
         ref={ref}
-        $focused={revealedMethodSignature === method.signature}
+        focused={revealedMethodSignature === method.signature}
       >
         <DataGridCell>
           <ApiOrMethodRow>
@@ -290,7 +290,7 @@ const UnmodelableMethodRow = forwardRef<
     <DataGridRow
       data-testid="unmodelable-method-row"
       ref={ref}
-      $focused={revealedMethodSignature === method.signature}
+      focused={revealedMethodSignature === method.signature}
     >
       <DataGridCell>
         <ApiOrMethodRow>