Fix native component definitions to codegen in all situations

.changeset/funny-news-smell.md

@@ -0,0 +1,13 @@
+---
+'@fluentui-react-native/contextual-menu': patch
+'@fluentui-react-native/vibrancy-view': patch
+'@fluentui-react-native/focus-trap-zone': patch
+'@fluentui-react-native/menu-button': patch
+'@fluentui-react-native/focus-zone': patch
+'@fluentui-react-native/tooltip': patch
+'@fluentui-react-native/experimental-avatar': patch
+'@fluentui-react-native/callout': patch
+'@fluentui-react-native/button': patch
+---
+
+Fix codegen definitions for native components in repo

.vscode/settings.json

@@ -7,6 +7,10 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
+  "prettier.singleQuote": true,
+  "prettier.tabWidth": 2,
+  "prettier.printWidth": 140,
+  "prettier.trailingComma": "all",
 
   "eslint.enable": true,
   "eslint.workingDirectories": [{ "pattern": "./packages/framework/eslint-config-rules" }], // use the common eslint config file

docs/pages/Components/Callout.md

@@ -128,7 +128,7 @@ type DirectionalHint =
   | 'rightTopEdge'
   | 'rightCenter'
   | 'rightBottomEdge'
-  | 'bottonLeftEdge'
+  | 'bottomLeftEdge'
   | 'bottomAutoEdge'
   | 'bottomCenter'
   | 'bottomRightEdge';

packages/components/Button/SPEC.md

@@ -309,8 +309,8 @@ It is possible to override key behaviors by specifying `onKeyUp` or `onKeyDown`,
 
 #### Cursor interaction
 
-- Cursor moves onto botton: Should immediately change the styling of the `Button` so that it appears to be hovered.
-- Cursor moves out of botton: Should immediately remove the hovered styling of the `Button`.
+- Cursor moves onto bottom: Should immediately change the styling of the `Button` so that it appears to be hovered.
+- Cursor moves out of bottom: Should immediately remove the hovered styling of the `Button`.
 - Mouse click: Should execute the `Button` and move focus to its target.
 
 #### Touch interaction

packages/components/Callout/macos/FRNCalloutManager.m

@@ -28,7 +28,8 @@ + (NSRect)screenRect:(id)json
 	@"rightTopEdge": @(NSRectEdgeMaxX),
 	@"rightCenter": @(NSRectEdgeMaxX),
 	@"rightBottomEdge": @(NSRectEdgeMaxX),
-	@"bottonLeftEdge": @(NSRectEdgeMinY),
+	@"bottomLeftEdge": @(NSRectEdgeMinY),
+  @"bottonLeftEdge": @(NSRectEdgeMinY), // Add both the correct and incorrect spellings during the transition period
 	@"bottomAutoEdge": @(NSRectEdgeMinY),
 	@"bottomCenter": @(NSRectEdgeMinY),
 	@"bottomRightEdge": @(NSRectEdgeMinY),

packages/components/Callout/src/Callout.types.ts

@@ -1,15 +1,13 @@
 import type * as React from 'react';
-import type { KeyboardMetrics, ViewStyle, ViewProps } from 'react-native';
+import type { KeyboardMetrics, ViewStyle } from 'react-native';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import type { IRenderData } from '@uifabricshared/foundation-composable';
 
-import type { CalloutNativeCommands } from './CalloutNativeComponent.types';
+import type { CalloutNativeCommands } from './CalloutNativeComponent';
 export const calloutName = 'Callout';
 
-import type { DirectEventHandler, Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
-
 /**
  * Properties and Tokens for FluentUI React Native Callout
  */
@@ -25,7 +23,8 @@ export type DirectionalHint =
   | 'rightTopEdge'
   | 'rightCenter'
   | 'rightBottomEdge'
-  | 'bottonLeftEdge'
+  | 'bottomLeftEdge'
+  | 'bottonLeftEdge' // Typo in the original code, should be 'bottomLeftEdge'
   | 'bottomAutoEdge'
   | 'bottomCenter'
   | 'bottomRightEdge';
@@ -227,34 +226,3 @@ export interface ICalloutType {
   slotProps: ICalloutSlotProps;
   tokens: ICalloutTokens;
 }
-
-type AnchorRect = {
-  screenX: Double;
-  screenY: Double;
-  width: Double;
-  height: Double;
-};
-
-/**
- * Shared native props specific to Callout native component
- */
-export interface NativePropsBase extends ViewProps {
-  accessibilityLabel?: string;
-  accessibilityOnShowAnnouncement?: string;
-  anchorRect?: AnchorRect;
-
-  dismissBehaviors?: string[];
-  doNotTakePointerCapture?: boolean;
-  focusable?: boolean;
-  isBeakVisible?: boolean;
-  maxHeight?: Int32;
-  maxWidth?: Int32;
-  setInitialFocus?: boolean;
-
-  // targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
-  testID?: string;
-
-  onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
-  onDismiss?: DirectEventHandler<{ target: Int32 }>;
-  onShow?: DirectEventHandler<{ target: Int32 }>;
-}

packages/components/Callout/src/CalloutNativeComponent.macos.ts

@@ -1,12 +1,69 @@
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import { requireNativeComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
-import type { NativeProps, CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types.macos';
+import type { HostComponent, ViewProps } from 'react-native';
+import type { WithDefault, UnsafeMixed, Int32, DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+interface AnchorRect {
+  screenX: Double;
+  screenY: Double;
+  width: Double;
+  height: Double;
+}
+
+/**
+ * Shared native props specific to Callout native component
+ */
+export interface NativeProps extends ViewProps {
+  accessibilityLabel?: string;
+  accessibilityOnShowAnnouncement?: string;
+  anchorRect?: AnchorRect;
+
+  dismissBehaviors?: string[];
+  doNotTakePointerCapture?: boolean;
+  focusable?: boolean;
+  isBeakVisible?: boolean;
+  maxHeight?: Int32;
+  maxWidth?: Int32;
+  setInitialFocus?: boolean;
+
+  // targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
+  testID?: string;
+
+  onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
+  onDismiss?: DirectEventHandler<{ target: Int32 }>;
+  onShow?: DirectEventHandler<{ target: Int32 }>;
+
+  directionalHint?: WithDefault<
+    | 'leftTopEdge'
+    | 'leftCenter'
+    | 'leftBottomEdge'
+    | 'topLeftEdge'
+    | 'topAutoEdge'
+    | 'topCenter'
+    | 'topRightEdge'
+    | 'rightTopEdge'
+    | 'rightCenter'
+    | 'rightBottomEdge'
+    | 'bottomLeftEdge'
+    | 'bottonLeftEdge' // Typo in the original code, should be 'bottomLeftEdge'
+    | 'bottomAutoEdge'
+    | 'bottomCenter'
+    | 'bottomRightEdge',
+    'topleftEdge'
+  >;
+  target?: UnsafeMixed;
+}
+
+export type CalloutComponentType = HostComponent<NativeProps>;
+
+export interface CalloutNativeCommands {
+  focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+  blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+}
 
 export const Commands: CalloutNativeCommands = codegenNativeCommands<CalloutNativeCommands>({
   supportedCommands: ['blurWindow', 'focusWindow'],
 });
 
-// no fabric for macOS, just use requireNativeComponent
-// macOS uses FRNCallout (registered by FRNCalloutManager), not RCTCallout
-export default requireNativeComponent<NativeProps>('FRNCallout') as CalloutComponentType;
+export default codegenNativeComponent<NativeProps>('FRNCallout') as CalloutComponentType;

packages/components/Callout/src/CalloutNativeComponent.ts

@@ -1,7 +1,66 @@
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
-import type { NativeProps, CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types';
+import type { HostComponent, ViewProps } from 'react-native';
+import type { WithDefault, UnsafeMixed, Int32, DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+interface AnchorRect {
+  screenX: Double;
+  screenY: Double;
+  width: Double;
+  height: Double;
+}
+
+/**
+ * Shared native props specific to Callout native component
+ */
+export interface NativeProps extends ViewProps {
+  accessibilityLabel?: string;
+  accessibilityOnShowAnnouncement?: string;
+  anchorRect?: AnchorRect;
+
+  dismissBehaviors?: string[];
+  doNotTakePointerCapture?: boolean;
+  focusable?: boolean;
+  isBeakVisible?: boolean;
+  maxHeight?: Int32;
+  maxWidth?: Int32;
+  setInitialFocus?: boolean;
+
+  // targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
+  testID?: string;
+
+  onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
+  onDismiss?: DirectEventHandler<{ target: Int32 }>;
+  onShow?: DirectEventHandler<{ target: Int32 }>;
+
+  directionalHint?: WithDefault<
+    | 'leftTopEdge'
+    | 'leftCenter'
+    | 'leftBottomEdge'
+    | 'topLeftEdge'
+    | 'topAutoEdge'
+    | 'topCenter'
+    | 'topRightEdge'
+    | 'rightTopEdge'
+    | 'rightCenter'
+    | 'rightBottomEdge'
+    | 'bottomLeftEdge'
+    | 'bottonLeftEdge' // Typo in the original code, should be 'bottomLeftEdge'
+    | 'bottomAutoEdge'
+    | 'bottomCenter'
+    | 'bottomRightEdge',
+    'bottonLeftEdge'
+  >;
+  target?: UnsafeMixed;
+}
+
+export type CalloutComponentType = HostComponent<NativeProps>;
+
+export interface CalloutNativeCommands {
+  focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+  blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+}
 
 export const Commands: CalloutNativeCommands = codegenNativeCommands<CalloutNativeCommands>({
   supportedCommands: ['blurWindow', 'focusWindow'],

packages/components/Callout/src/index.ts

@@ -9,5 +9,5 @@ export type {
   ICalloutType,
   RestoreFocusEvent,
 } from './Callout.types';
-export type { CalloutNativeCommands } from './CalloutNativeComponent.types';
+export type { CalloutNativeCommands } from './CalloutNativeComponent';
 export { Callout } from './Callout';

packages/components/FocusTrapZone/src/FocusTrapZoneNativeComponent.ts

@@ -3,8 +3,8 @@
  * Licensed under the MIT License.
  * @format
  */
-
-import { requireNativeComponent, type HostComponent, type ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent, ViewProps } from 'react-native';
 
 export interface NativeProps extends ViewProps {
   /**
@@ -36,4 +36,4 @@ export interface NativeProps extends ViewProps {
   forceFocusInsideTrap?: boolean;
 }
 
-export default requireNativeComponent<NativeProps>('RCTFocusTrapZone') as HostComponent<NativeProps>;
+export default codegenNativeComponent<NativeProps>('RCTFocusTrapZone') as HostComponent<NativeProps>;

packages/components/FocusZone/src/FocusZoneNativeComponent.ts

@@ -3,13 +3,11 @@
  * Licensed under the MIT License.
  * @format
  */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 import type { ViewProps } from 'react-native';
+import type { WithDefault, UnsafeMixed } from 'react-native/Libraries/Types/CodegenTypes';
 
-import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
-import { requireNativeComponent } from 'react-native';
-
-import type { UnsafeMixed } from './codegenTypes';
 // Should be:
 // import type { UnsafeObject } from 'react-native/Libraries/Types/CodegenTypes';
 
@@ -23,4 +21,4 @@ export interface NativeProps extends ViewProps {
   isTabNavigation?: boolean;
 }
 
-export default requireNativeComponent<NativeProps>('RCTFocusZone');
+export default codegenNativeComponent<NativeProps>('RCTFocusZone');