@fluentui-react-native/tester 0.58.2 → 0.58.3

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -6,7 +6,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ECalloutTest } from './CalloutE2ETest';
 import { fluentTesterStyles } from '../Common/styles';
 
-const standardCallout: React.FunctionComponent = () => {
+const StandardCallout: React.FunctionComponent = () => {
   const [showStandardCallout, setShowStandardCallout] = React.useState(false);
   const [isStandardCalloutVisible, setIsStandardCalloutVisible] = React.useState(false);
 
@@ -23,29 +23,35 @@ const standardCallout: React.FunctionComponent = () => {
   const [preventDismissOnClickOutside, setPreventDismissOnClickOutside] = React.useState(false);
   const [calloutDismissBehaviors, setDismissBehaviors] = React.useState<DismissBehaviors[]>([]);
 
-  const onPreventDismissOnKeyDownChange = React.useCallback((value) => {
-    setPreventDismissOnKeyDown(value);
-    if (value) {
-      setDismissBehaviors(calloutDismissBehaviors.concat('preventDismissOnKeyDown'));
-    } else {
-      const newDismissBehaviors = calloutDismissBehaviors.filter((value) => {
-        value != 'preventDismissOnKeyDown';
-      });
-      setDismissBehaviors(newDismissBehaviors);
-    }
-  }, []);
-
-  const onPreventDismissOnClickOutsideChange = React.useCallback((value) => {
-    setPreventDismissOnClickOutside(value);
-    if (value) {
-      setDismissBehaviors(calloutDismissBehaviors.concat('preventDismissOnClickOutside'));
-    } else {
-      const newDismissBehaviors = calloutDismissBehaviors.filter((value) => {
-        value != 'preventDismissOnClickOutside';
-      });
-      setDismissBehaviors(newDismissBehaviors);
-    }
-  }, []);
+  const onPreventDismissOnKeyDownChange = React.useCallback(
+    (value) => {
+      setPreventDismissOnKeyDown(value);
+      if (value) {
+        setDismissBehaviors(calloutDismissBehaviors.concat('preventDismissOnKeyDown'));
+      } else {
+        const newDismissBehaviors = calloutDismissBehaviors.filter((value) => {
+          value != 'preventDismissOnKeyDown';
+        });
+        setDismissBehaviors(newDismissBehaviors);
+      }
+    },
+    [calloutDismissBehaviors],
+  );
+
+  const onPreventDismissOnClickOutsideChange = React.useCallback(
+    (value) => {
+      setPreventDismissOnClickOutside(value);
+      if (value) {
+        setDismissBehaviors(calloutDismissBehaviors.concat('preventDismissOnClickOutside'));
+      } else {
+        const newDismissBehaviors = calloutDismissBehaviors.filter((value) => {
+          value != 'preventDismissOnClickOutside';
+        });
+        setDismissBehaviors(newDismissBehaviors);
+      }
+    },
+    [calloutDismissBehaviors],
+  );
 
   const redTargetRef = React.useRef<View>(null);
   const blueTargetRef = React.useRef<View>(null);
@@ -113,7 +119,7 @@ const standardCallout: React.FunctionComponent = () => {
 
   const addButton = React.useCallback(() => {
     setScrollviewContents((arr) => [...arr, 1]);
-  }, [setScrollviewContents, scrollviewContents]);
+  }, [setScrollviewContents]);
 
   return (
     <View>
@@ -245,7 +251,7 @@ const standardCallout: React.FunctionComponent = () => {
   );
 };
 
-const customCallout: React.FunctionComponent = () => {
+const CustomCallout: React.FunctionComponent = () => {
   const [showCustomizedCallout, setShowCustomizedCallout] = React.useState(false);
   const [isCustomizedCalloutVisible, setIsCustomizedCalloutVisible] = React.useState(false);
 
@@ -304,11 +310,11 @@ const calloutSections: TestSection[] = [
   {
     name: 'Standard Usage',
     testID: CALLOUT_TESTPAGE,
-    component: standardCallout,
+    component: StandardCallout,
   },
   {
     name: 'Customized Usage',
-    component: customCallout,
+    component: CustomCallout,
   },
   {
     name: 'E2E Testing Callout',

package/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -11,7 +11,7 @@ function onChangeUncontrolled(isChecked: boolean) {
   console.log(isChecked);
 }
 
-const basicCheckbox: React.FunctionComponent = () => {
+const BasicCheckbox: React.FunctionComponent = () => {
   return (
     <View>
       <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
@@ -29,7 +29,7 @@ const basicCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const otherCheckbox: React.FunctionComponent = () => {
+const OtherCheckbox: React.FunctionComponent = () => {
   const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
   const onChangeControlled1 = React.useCallback((checked) => {
     setCheckedControlled1(checked);
@@ -87,7 +87,7 @@ const HoverCheckbox = Checkbox.customize({
   },
 });
 
-const tokenCheckbox: React.FunctionComponent = () => {
+const TokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
 
@@ -148,15 +148,15 @@ const checkboxSections: TestSection[] = [
   {
     name: 'Basic Checkboxes',
     testID: CHECKBOX_TESTPAGE,
-    component: basicCheckbox,
+    component: BasicCheckbox,
   },
   {
     name: 'Other Implementations',
-    component: otherCheckbox,
+    component: OtherCheckbox,
   },
   {
     name: 'Token Customized Checkboxes',
-    component: tokenCheckbox,
+    component: TokenCheckbox,
   },
   {
     name: 'Checkbox for E2E Testing',

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -12,7 +12,7 @@ function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
   console.log(isChecked);
 }
 
-const basicCheckbox: React.FunctionComponent = () => {
+const BasicCheckbox: React.FunctionComponent = () => {
   return (
     <View>
       <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
@@ -28,7 +28,7 @@ const basicCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const sizeCheckbox: React.FunctionComponent = () => {
+const SizeCheckbox: React.FunctionComponent = () => {
   return (
     <View>
       <Checkbox tooltip="Medium checkbox" size="medium" />
@@ -39,7 +39,7 @@ const sizeCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const otherCheckbox: React.FunctionComponent = () => {
+const OtherCheckbox: React.FunctionComponent = () => {
   const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
   const onChangeControlled1 = React.useCallback((checked) => {
     setCheckedControlled1(checked);
@@ -86,7 +86,7 @@ const HoverCheckbox = Checkbox.customize({
   },
 });
 
-const tokenCheckbox: React.FunctionComponent = () => {
+const TokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
 
@@ -147,19 +147,19 @@ const checkboxSections: TestSection[] = [
   {
     name: 'Basic Checkboxes',
     testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
-    component: basicCheckbox,
+    component: BasicCheckbox,
   },
   {
     name: 'Size Checkboxes',
-    component: sizeCheckbox,
+    component: SizeCheckbox,
   },
   {
     name: 'Other Implementations',
-    component: otherCheckbox,
+    component: OtherCheckbox,
   },
   {
     name: 'Token Customized Checkboxes',
-    component: tokenCheckbox,
+    component: TokenCheckbox,
   },
   {
     name: 'E2E Testing for Experimental Checkbox',

package/src/FluentTester/TestComponents/Common/Slider.tsx

@@ -121,7 +121,7 @@ export const Slider: React.FunctionComponent<ISliderProps> = (props: ISliderProp
         setThumbLocation(initialThumbLocation);
       });
     }
-  }, [ref.current, initialValue, maximum, minimum]);
+  }, [ref, initialValue, maximum, minimum]);
 
   return (
     <View style={[userStyle, styles.root]}>

package/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -16,7 +16,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { svgProps, fontProps, testImage } from '../Common/iconExamples';
 import { E2EContextualMenuTest } from './E2EContextualMenuTest';
 
-const contextualMenu: React.FunctionComponent = () => {
+const ContextualMenuMainTest: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
 
   const [showContextualMenu, setShowContextualMenu] = React.useState(false);
@@ -114,7 +114,7 @@ const contextualMenu: React.FunctionComponent = () => {
   );
 };
 
-const nestedContextualMenu: React.FunctionComponent = () => {
+const NestedContextualMenu: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
 
   const [showContextualMenu, setShowContextualMenu] = React.useState(false);
@@ -472,11 +472,11 @@ const contextualMenuSections: TestSection[] = [
   {
     name: 'Standard ContextualMenu',
     testID: CONTEXTUALMENU_TESTPAGE,
-    component: contextualMenu,
+    component: ContextualMenuMainTest,
   },
   {
     name: 'Nested ContextualMenu',
-    component: nestedContextualMenu,
+    component: NestedContextualMenu,
   },
   {
     name: 'IconButton with Customized ContextualMenu',

package/src/FluentTester/TestComponents/Expander/ExpanderTest.tsx

@@ -30,7 +30,7 @@ const CustomizedExpander = Expander.customize({
   chevronBorderThickness: 2,
 });
 
-const expanderTest: React.FunctionComponent = () => {
+const ExpanderMainTest: React.FunctionComponent = () => {
   /** This test page has not yet been tested and does not currently build because
    * the react-native-test-app does not yet support WinUI 2.6
    * Filed issue in react-native-test-app: https://github.com/microsoft/react-native-test-app/issues/444
@@ -87,7 +87,7 @@ const expanderTest: React.FunctionComponent = () => {
   );
 };
 
-const basicExpander: React.FunctionComponent = () => {
+const BasicExpander: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
       <View style={commonStyles.root}>
@@ -104,12 +104,12 @@ const expanderSections: TestSection[] = [
   {
     name: 'BaseExpander',
     testID: EXPANDER_TESTPAGE,
-    component: basicExpander,
+    component: BasicExpander,
   },
   {
     name: 'Expander',
     testID: EXPANDER_TESTPAGE,
-    component: expanderTest,
+    component: ExpanderMainTest,
   },
 ];
 

package/src/FluentTester/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -52,7 +52,7 @@ export const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps>
   );
 };
 
-const basicFocusTrapZone: React.FunctionComponent = () => {
+const BasicFocusTrapZone: React.FunctionComponent = () => {
   const [state, setState] = React.useState({
     useTrapZone: false,
     renderTrapZone: true,
@@ -133,7 +133,7 @@ const focusTrapZoneSections: TestSection[] = [
   {
     name: 'Basic FocusTrapZone Usage',
     testID: FOCUSTRAPZONE_TESTPAGE,
-    component: basicFocusTrapZone,
+    component: BasicFocusTrapZone,
   },
 ];
 

package/src/FluentTester/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -7,7 +7,7 @@ import { focusZoneTestStyles, stackStyleFocusZone } from './styles';
 import { commonTestStyles } from '../Common/styles';
 import { Stack } from '@fluentui-react-native/stack';
 
-const directionalFocusZone: React.FunctionComponent = () => {
+const DirectionalFocusZone: React.FunctionComponent = () => {
   return (
     <View>
       <Button content="Outside FocusZone" />
@@ -55,7 +55,7 @@ const directionalFocusZone: React.FunctionComponent = () => {
   );
 };
 
-const commonUsageFocusZone: React.FunctionComponent = () => {
+const CommonUsageFocusZone: React.FunctionComponent = () => {
   return (
     <View>
       <Button content="Outside FocusZone" />
@@ -79,42 +79,44 @@ const commonUsageFocusZone: React.FunctionComponent = () => {
   );
 };
 
-const navigation2DFocusZone: React.FunctionComponent = () => {
+const Navigation2DFocusZone: React.FunctionComponent = () => {
   const buttonRefs = [];
-  const onClicks = [];
   const [defaultTabbableElementIndex, setDefaultTabbableElementIndex] = React.useState<number>(5);
+  const onClick = React.useCallback(
+    (i: number) => {
+      setDefaultTabbableElementIndex(i);
+    },
+    [setDefaultTabbableElementIndex],
+  );
 
   for (let i = 0; i <= 9; i++) {
-    buttonRefs.push(i == 0 ? undefined : React.useRef<View>(null));
-    onClicks.push(
-      React.useCallback(() => {
-        setDefaultTabbableElementIndex(i);
-      }, [setDefaultTabbableElementIndex]),
-    );
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ref = React.useRef<View>(null);
+    buttonRefs.push(i == 0 ? undefined : ref);
   }
 
   return (
     <View>
       <View>
         <Button content="Outside FocusZone" />
-        <Button content="Clear default tabble element" onClick={onClicks[0]} />
+        <Button content="Clear default tabble element" onClick={() => onClick(0)} />
       </View>
       <FocusZone use2DNavigation={true} defaultTabbableElement={buttonRefs[defaultTabbableElementIndex]} isCircularNavigation={true}>
         <View style={focusZoneTestStyles.focusZoneContainer}>
           <View style={focusZoneTestStyles.focusZoneViewStyle}>
-            <Button content="#1" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[1]} onClick={onClicks[1]} />
-            <Button content="#2" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[2]} onClick={onClicks[2]} />
-            <Button content="#3" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[3]} onClick={onClicks[3]} />
+            <Button content="#1" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[1]} onClick={() => onClick(1)} />
+            <Button content="#2" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[2]} onClick={() => onClick(2)} />
+            <Button content="#3" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[3]} onClick={() => onClick(3)} />
           </View>
           <View style={focusZoneTestStyles.focusZoneViewStyle}>
-            <Button content="#4" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[4]} onClick={onClicks[4]} />
-            <Button content="#5" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[5]} onClick={onClicks[5]} />
-            <Button content="#6" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[6]} onClick={onClicks[6]} />
+            <Button content="#4" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[4]} onClick={() => onClick(4)} />
+            <Button content="#5" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[5]} onClick={() => onClick(5)} />
+            <Button content="#6" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[6]} onClick={() => onClick(6)} />
           </View>
           <View style={focusZoneTestStyles.focusZoneViewStyle}>
-            <Button content="#7" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[7]} onClick={onClicks[7]} />
-            <Button content="#8" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[8]} onClick={onClicks[8]} />
-            <Button content="#9" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[9]} onClick={onClicks[9]} />
+            <Button content="#7" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[7]} onClick={() => onClick(7)} />
+            <Button content="#8" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[8]} onClick={() => onClick(8)} />
+            <Button content="#9" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[9]} onClick={() => onClick(9)} />
           </View>
         </View>
       </FocusZone>
@@ -143,7 +145,7 @@ function SwitchWithLabel(props: ISwitchWithLabelProps): React.ReactElement {
 
 const focusZoneDirectionStrings = ['Bidirectional', 'Horizontal', 'Vertical', 'None'];
 
-const customizableFocusZone: React.FunctionComponent = () => {
+const CustomizableFocusZone: React.FunctionComponent = () => {
   const [is2DNav, set2dNav] = React.useState(false);
   const [isDisabled, setDisabled] = React.useState(false);
   const [isCircularNav, setIsCircularNav] = React.useState(false);
@@ -223,19 +225,19 @@ const focusZoneSections: TestSection[] = [
   {
     name: 'Directional FocusZone Usage',
     testID: FOCUSZONE_TESTPAGE,
-    component: directionalFocusZone,
+    component: DirectionalFocusZone,
   },
   {
     name: 'Common FocusZone Usage',
-    component: commonUsageFocusZone,
+    component: CommonUsageFocusZone,
   },
   {
     name: '2D Navigation with Default Tabbable Element (#5) FocusZone Usage',
-    component: navigation2DFocusZone,
+    component: Navigation2DFocusZone,
   },
   {
     name: 'Customizable FocusZone',
-    component: customizableFocusZone,
+    component: CustomizableFocusZone,
   },
 ];
 

package/src/FluentTester/TestComponents/Icon/IconTest.tsx

@@ -11,7 +11,7 @@ const testImage = require('./../../../../assets/testicon.png');
 const testTtf = require('./../../../../assets/Font_Awesome_900.otf');
 import TestSvg from './assets/test.svg';
 
-const icons: React.FunctionComponent = () => {
+const Icons: React.FunctionComponent = () => {
   const fontCustomFontProps: FontIconProps = {
     fontFamily: 'Font Awesome 5 Free',
     fontSrcFile: testTtf,
@@ -94,7 +94,7 @@ const iconSections: TestSection[] = [
   {
     name: 'Icon',
     testID: ICON_TESTPAGE,
-    component: icons,
+    component: Icons,
   },
   {
     name: 'Icon for E2E Testing',

package/src/FluentTester/TestComponents/Link/LinkTest.tsx

@@ -7,7 +7,7 @@ import { LINK_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { LinkE2ETest } from './E2ELinkTest';
 
-const links: React.FunctionComponent = () => {
+const Links: React.FunctionComponent = () => {
   const doPress = (): void => {
     Alert.alert('Alert.', 'You have been alerted.');
   };
@@ -24,7 +24,7 @@ const linkSections: TestSection[] = [
   {
     name: 'Navigation and Alert',
     testID: LINK_TESTPAGE,
-    component: links,
+    component: Links,
   },
   {
     name: 'Link E2E Test',

package/src/FluentTester/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx

@@ -7,7 +7,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { Text } from '@fluentui/react-native';
 
-const nativeDatePicker: React.FunctionComponent = () => {
+const NativeDatePickerMainTest: React.FunctionComponent = () => {
   const [startDate, setStartDate] = React.useState<Date>(new Date());
   const [endDate, setEndDate] = React.useState<Date>(null);
 
@@ -109,7 +109,7 @@ const nativeDatePickerSections: TestSection[] = [
   {
     name: 'Native Date Picker',
     testID: NATIVEDATEPICKER_TESTPAGE,
-    component: nativeDatePicker,
+    component: NativeDatePickerMainTest,
   },
 ];
 

package/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -73,7 +73,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
       iconStrokeWidth: iconStrokeWidth,
     };
     return PersonaCoin.customize({ tokens });
-  }, [coinColor, textColor, showRings, coinSize, iconSize, iconStrokeWidth]);
+  }, [coinColor, textColor, coinSize, iconSize, iconStrokeWidth]);
 
   return (
     <View style={{ flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' }}>

package/src/FluentTester/TestComponents/Pressable/PressableTest.tsx

@@ -92,7 +92,7 @@ const PressComponent: React.FunctionComponent<ViewProps> = (props: ViewProps) =>
   );
 };
 
-const pressable: React.FunctionComponent = () => {
+const PressableMainTest: React.FunctionComponent = () => {
   const [hoverProps, hoverState] = useHoverState({});
 
   return (
@@ -126,7 +126,7 @@ const pressableSections: TestSection[] = [
   {
     name: 'Pressable Components',
     testID: PRESSABLE_TESTPAGE,
-    component: pressable,
+    component: PressableMainTest,
   },
 ];
 

package/src/FluentTester/TestComponents/RadioGroup/RadioGroupTest.tsx

@@ -5,7 +5,7 @@ import { RADIOGROUP_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ERadioGroupTest } from './RadioGroupE2ETest';
 
-const basicRadioGroup: React.FunctionComponent = () => {
+const BasicRadioGroup: React.FunctionComponent = () => {
   // Client's example onChange function
   const onChange = (key: string) => {
     console.log(key);
@@ -56,7 +56,7 @@ const radioGroupSections: TestSection[] = [
   {
     name: 'Basic RadioGroup Usage',
     testID: RADIOGROUP_TESTPAGE,
-    component: basicRadioGroup,
+    component: BasicRadioGroup,
   },
   {
     name: 'RadioGroup for E2E Testing',

package/src/FluentTester/TestComponents/Separator/SeparatorTest.tsx

@@ -9,7 +9,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 const BlueSeparator = Separator.customize({ color: 'blue' });
 const RedSeparator = Separator.customize({ color: 'red' });
 
-const separator: React.FunctionComponent = () => {
+const SeparatorMainTest: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle} gap={5}>
       <Stack gap={4} style={separatorStackStyle}>
@@ -31,7 +31,7 @@ const separatorSections: TestSection[] = [
   {
     name: 'Basic Button',
     testID: SEPARATOR_TESTPAGE,
-    component: separator,
+    component: SeparatorMainTest,
   },
 ];