FocusZone (macOS): Calculate distance from origin (#2259)

* FocusZone (macOS): Calculate distance from origin

* Change files

* Fix test repo links

* fix repo links

.ado/markdown-link-check-config.json

@@ -2,6 +2,9 @@
   "ignorePatterns": [
     {
       "pattern": "^https://badge.fury.io/js/%40fluentui%2Freact-native"
+    },
+    {
+      "pattern": "https://cla.opensource.microsoft.com"
     }
   ],
   "timeout": "5s",

apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, ScrollView } from 'react-native';
+import { View, ScrollView, Pressable } from 'react-native';
-import { FocusZone, FocusZoneDirection, Text } from '@fluentui/react-native';
+import { FocusZone, FocusZoneDirection, Text, useOnPressWithFocus } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
 import { Test, TestSection, PlatformStatus } from '../Test';
@@ -87,6 +87,50 @@ const FocusZoneNoProps: React.FunctionComponent = () => {
   );
 };
 
+const TinyBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.smallBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const WideBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.wideBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const TinyText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.smallBoxStyle}>
+      Hi
+    </Text>
+  );
+};
+
+const WideText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.wideBoxStyle}>
+      Hello world
+    </Text>
+  );
+};
+
+const DifferentSizesTest: React.FunctionComponent = () => {
+  return (
+    <FocusZone focusZoneDirection="bidirectional">
+      <View style={focusZoneTestStyles.dashedBorder}>
+        <WideBox />
+        <TinyBox />
+        <WideBox />
+        <TinyText />
+        <WideText />
+      </View>
+    </FocusZone>
+  );
+};
+
 const NestedFocusZone: React.FunctionComponent = () => {
   return (
     <FocusZoneListWrapper>
@@ -132,6 +176,10 @@ const focusZoneSections: TestSection[] = [
     name: 'FocusZone with no props',
     component: FocusZoneNoProps,
   },
+  {
+    name: 'Different Sized Children',
+    component: DifferentSizesTest,
+  },
   {
     name: 'Nested FocusZone',
     component: NestedFocusZone,

apps/fluent-tester/src/TestComponents/FocusZone/styles.ts

@@ -43,6 +43,18 @@ export const focusZoneTestStyles = StyleSheet.create({
     marginHorizontal: 20,
     marginBottom: 100,
   },
+  smallBoxStyle: {
+    width: 20,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
+  wideBoxStyle: {
+    width: 150,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
 });
 
 export const GridButton = Button.compose({

change/@fluentui-react-native-focus-zone-5951beaa-ac23-48e9-97ef-aeb7e1a12830.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "FocusZone (macOS): Calculate distance from origin",
+  "packageName": "@fluentui-react-native/focus-zone",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-ae12c1e7-f116-4d02-90e9-458e42c4cdcc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "FocusZone (macOS): Calculate distance from origin",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/components/FocusZone/macos/RCTFocusZone.m

@@ -25,14 +25,9 @@ static inline CGFloat GetDistanceBetweenPoints(NSPoint point1, NSPoint point2)
 	return sqrt(delta.x * delta.x + delta.y * delta.y);
 }
 
-static inline NSPoint GetCenterOfRect(NSRect rect)
+static inline CGFloat GetDistanceBetweenOriginsOfRects(NSRect rect1, NSRect rect2)
 {
-	return NSMakePoint(NSMidX(rect), NSMidY(rect));
+	return GetDistanceBetweenPoints(rect1.origin, rect2.origin);
-}
-
-static inline CGFloat GetDistanceBetweenCentersOfRects(NSRect rect1, NSRect rect2)
-{
-	return GetDistanceBetweenPoints(GetCenterOfRect(rect1), GetCenterOfRect(rect2));
 }
 
 static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSPoint point)
@@ -275,7 +270,7 @@ static BOOL ShouldSkipFocusZone(NSView *view)
 
 		if (!skip)
 		{
-			CGFloat distance = GetDistanceBetweenCentersOfRects(firstResponderRect, candidateRect);
+			CGFloat distance = GetDistanceBetweenOriginsOfRects(firstResponderRect, candidateRect);
 			
 			// If there are other candidate views inside the same ScrollView as the firstResponder,
 			// prefer those views over other views outside the scrollview, even if they are closer.