Use codegenNativeComponent so JS View configs can be generated for all native components (#3533)

* Use codegenNativeComponent so JS View configs can be generated for all native components

* Change files

* fix

* Add tooltip to sample usages of menubutton

* Change files

* remove unused dependency

* Remove component-cache

* Change files

CONTRIBUTING.md

@@ -87,7 +87,7 @@ Through the power of [Native Modules](https://reactnative.dev/docs/native-module
 There are a few caveats to know of adding a native module to a FluentUI React Native component:
 
 - Your component will probably only have one slot. We have not yet explored creating a native component with multiple re-composable slots, and have adopted the pattern of having one "root" slot that simply holds the native component
-- Use `ensureNativeComponent` instead of `requireNativeComponent` to ensure the underlying native component is properly memoized and only imported once.
+- Use `codegenNativeComponent` to ensure that a JS config is provided, which will be required when moving to the new architecture.
 - You will need to decide what is a token and what is a property, and how you want to create your component's API surface and map it to the native view's API.
 - If you want the default values of your component's props / tokens to come from the Native Module, you can use the `constantsToExport` API, and pass it to `slotProps` in your component. You can see an example of this in `experimental-avatar`.
 

apps/fluent-tester/src/FluentTesterApp.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
 'use strict';
 
 import * as React from 'react';

apps/fluent-tester/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
 import * as React from 'react';
 import { Text, View, Switch, Platform } from 'react-native';
 
@@ -63,6 +68,7 @@ export const StandardMenuButton: React.FunctionComponent = () => {
             <View style={columnStyle}>
               <MenuButton
                 content="Standard MenuButton"
+                tooltip="Standard MenuButton tooltip"
                 menuItems={menuItems}
                 onItemClick={onItemClick}
                 contextualMenu={contextualMenuProps}

change/@fluentui-react-native-callout-c1d19e94-dbb2-4edd-a9a2-53e117861ed9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-dependency-profiles-e5ce9373-5192-4424-b705-bb884c8c9a3a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove component-cache",
+  "packageName": "@fluentui-react-native/dependency-profiles",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-avatar-1bde223a-b35f-45bd-af60-fc90b1850108.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-checkbox-7d9ca2d4-2ef1-43a3-a92b-dcd1829075e0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/experimental-checkbox",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-expander-ab53e96d-eb8b-4166-81a8-f9c85bdbbdc5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/experimental-expander",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-shimmer-b4277fd1-61af-4467-867a-d3f64996b0a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/experimental-shimmer",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-focus-trap-zone-fd6eda1b-5336-44a0-abd2-719a9f6a918c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/focus-trap-zone",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-focus-zone-901de499-8047-43e8-b6d3-4668a827e33d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/focus-zone",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-button-a59599b5-6d8e-4d60-81a2-0d32b1cf746c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/menu-button",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-radio-group-af28d4fb-c66b-4f40-965b-4095f34535d3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/radio-group",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-spinner-0d02b8bd-4d34-4a8e-9ea7-dc0ccafd89ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/spinner",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-2ffee5e3-5fb4-4d2c-bb7a-e8cd7f646cec.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tooltip-83170e35-5439-4c0d-872a-ad48bc45fd61.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/tooltip",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-vibrancy-view-859f3e57-078d-4b22-9d99-f14fc72e66f7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use codegenNativeComponent so JS View configs can be generated for all native components",
+  "packageName": "@fluentui-react-native/vibrancy-view",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/components/Callout/package.json

@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "workspace:*",
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/interactive-hooks": "workspace:*",
     "@fluentui-react-native/tokens": "workspace:*",
     "@uifabricshared/foundation-composable": "workspace:*",

packages/components/Callout/src/Callout.tsx

@@ -1,7 +1,13 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 import * as React from 'react';
 import { findNodeHandle, Platform } from 'react-native';
+import type { HostComponent } from 'react-native';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
 import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens';
 import type { IUseComposeStyling } from '@uifabricshared/foundation-compose';
@@ -11,10 +17,14 @@ import { mergeSettings } from '@uifabricshared/foundation-settings';
 import { settings } from './Callout.settings';
 import type { ICalloutProps, ICalloutSlotProps, ICalloutType } from './Callout.types';
 import { calloutName } from './Callout.types';
+import type { NativeProps as CalloutNativeProps } from './CalloutNativeComponent';
+import CalloutNativeComponent from './CalloutNativeComponent';
+import type { NativeProps as MacOSCalloutNativeProps } from './MacOSCalloutNativeComponent';
+import MacOSCalloutNativeComponent from './MacOSCalloutNativeComponent';
 
-const NativeCalloutView = Platform.select({
-  macos: ensureNativeComponent('FRNCallout'),
-  default: ensureNativeComponent('RCTCallout'), // win32
+const NativeCalloutView = Platform.select<HostComponent<MacOSCalloutNativeProps> | HostComponent<CalloutNativeProps>>({
+  macos: MacOSCalloutNativeComponent,
+  default: CalloutNativeComponent, // win32
 });
 
 export const Callout = compose<ICalloutType>({

packages/components/Callout/src/CalloutNativeComponent.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { WithDefault, DirectEventHandler, Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import type { UnsafeMixed } from './codegenTypes';
+// Should be:
+// import type {UnsafeMixed} from 'react-native/Libraries/Types/CodegenTypes';
+
+type AnchorRect = {
+  screenX: Double;
+  screenY: Double;
+  width: Double;
+  height: Double;
+};
+
+export interface NativeProps extends ViewProps {
+  accessibilityLabel?: string;
+  accessibilityOnShowAnnouncement?: string;
+  anchorRect?: AnchorRect;
+  directionalHint?: WithDefault<
+    | 'leftTopEdge'
+    | 'leftCenter'
+    | 'leftBottomEdge'
+    | 'topLeftEdge'
+    | 'topAutoEdge'
+    | 'topCenter'
+    | 'topRightEdge'
+    | 'rightTopEdge'
+    | 'rightCenter'
+    | 'rightBottomEdge'
+    | 'bottonLeftEdge'
+    | 'bottomAutoEdge'
+    | 'bottomCenter'
+    | 'bottomRightEdge',
+    'bottonLeftEdge'
+  >;
+  dismissBehaviors?: string[];
+  doNotTakePointerCapture?: boolean;
+  focusable?: boolean;
+  isBeakVisible?: boolean;
+  maxHeight?: Int32;
+  maxWidth?: Int32;
+  setInitialFocus?: boolean;
+  target?: UnsafeMixed;
+  // 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 }>;
+}
+
+export default codegenNativeComponent<NativeProps>('RCTCallout') as HostComponent<NativeProps>;

packages/components/Callout/src/MacOSCalloutNativeComponent.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { DirectEventHandler, Double, Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type AnchorRect = {
+  screenX: Double;
+  screenY: Double;
+  width: Double;
+  height: Double;
+};
+
+export interface NativeProps extends ViewProps {
+  accessibilityLabel?: string;
+  accessibilityOnShowAnnouncement?: string;
+  anchorRect?: AnchorRect;
+  directionalHint?: WithDefault<
+    | 'leftTopEdge'
+    | 'leftCenter'
+    | 'leftBottomEdge'
+    | 'topLeftEdge'
+    | 'topAutoEdge'
+    | 'topCenter'
+    | 'topRightEdge'
+    | 'rightTopEdge'
+    | 'rightCenter'
+    | 'rightBottomEdge'
+    | 'bottonLeftEdge'
+    | 'bottomAutoEdge'
+    | 'bottomCenter'
+    | 'bottomRightEdge',
+    'topLeftEdge'
+  >;
+  dismissBehaviors?: string[];
+  doNotTakePointerCapture?: boolean;
+  focusable?: boolean;
+  isBeakVisible?: boolean;
+  maxHeight?: Int32;
+  maxWidth?: Int32;
+  setInitialFocus?: boolean;
+  target?: Int32;
+  testID?: string;
+
+  onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
+  onDismiss?: DirectEventHandler<{ target: Int32 }>;
+  onShow?: DirectEventHandler<{ target: Int32 }>;
+}
+
+export default codegenNativeComponent<NativeProps>('FRNCallout') as HostComponent<NativeProps>;

packages/components/Callout/src/codegenTypes.d.ts

@@ -0,0 +1,2 @@
+// Separate .d.ts file to fool codegen, since UnsafeMixed does not existing in the TS types of RN currently.
+export type UnsafeMixed = any;

packages/components/FocusTrapZone/package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "workspace:*",
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/interactive-hooks": "workspace:*",
     "@uifabricshared/foundation-composable": "workspace:*",
     "@uifabricshared/foundation-settings": "workspace:*"

packages/components/FocusTrapZone/src/FocusTrapZone.ts

@@ -1,12 +1,16 @@
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
 import type { IUseStyling } from '@uifabricshared/foundation-composable';
 import { composable } from '@uifabricshared/foundation-composable';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
 
 import type { IFocusTrapZoneProps, IFocusTrapZoneSlotProps, IFocusTrapZoneType } from './FocusTrapZone.types';
-
-const RCTFocusTrapZone = ensureNativeComponent('RCTFocusTrapZone');
+import RCTFocusTrapZone from './FocusTrapZoneNativeComponent';
 
 export function filterOutComponentRef(propName: string): boolean {
   return propName !== 'componentRef';

packages/components/FocusTrapZone/src/FocusTrapZoneNativeComponent.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  /**
+   * Specifies whether the FocusTrapZone's focus trapping behavior is disabled. True, if disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Specifies whether the FocusTrapZone takes focus on render. True, if taking focus is disabled.
+   * @default false
+   */
+  disableFirstFocus?: boolean;
+  /**
+   * Determines which element receives focus when focus moves into the FocusTrapZone. If false, the first focusable descendant gets focus.
+   * If true, the element that was focused when the FocusTrapZone last had a focused descendant is chosen. If it has never had a focused
+   * descendant before, then the first focusable descendant gets focus.
+   * @default false
+   */
+  focusPreviouslyFocusedInnerElement?: boolean;
+  /**
+   * By default, when the FocusTrapZone is unmounted or disabled focus returns to the element outside the FocusTrapZone that last had
+   * focus. Setting this to true disables this behavior, so the UI behaves as it normally would: If the FocusTrapZone is disabled, focus
+   * remains on the control inside the FocusTrapZone. If the FocusTrapZone is unmounted, focus usually moves to the nearest focusable
+   * control, but this can vary.
+   * @default false
+   */
+  ignoreExternalFocusing?: boolean;
+
+  forceFocusInsideTrap?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>('RCTFocusTrapZone') as HostComponent<NativeProps>;

packages/components/FocusZone/package.json

@@ -26,7 +26,6 @@
     "directory": "packages/components/FocusZone"
   },
   "dependencies": {
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/interactive-hooks": "workspace:*",
     "@uifabricshared/foundation-composable": "workspace:*",
     "@uifabricshared/foundation-settings": "workspace:*"

packages/components/FocusZone/src/FocusZone.ts

@@ -1,15 +1,19 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 import * as React from 'react';
 import { findNodeHandle } from 'react-native';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
 import type { IUseStyling } from '@uifabricshared/foundation-composable';
 import { composable } from '@uifabricshared/foundation-composable';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
 
 import type { FocusZoneProps, FocusZoneSlotProps, FocusZoneType } from './FocusZone.types';
-
-const RCTFocusZone = ensureNativeComponent('RCTFocusZone');
+import RCTFocusZone from './FocusZoneNativeComponent';
 
 const filterOutComponentRef = (propName) => propName !== 'componentRef';
 

packages/components/FocusZone/src/FocusZoneNativeComponent.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  navigateAtEnd?: WithDefault<'NavigateStopAtEnds' | 'NavigateWrap' | 'NavigateContinue', 'NavigateStopAtEnds'>;
+  defaultTabbableElement?: Int32;
+  focusZoneDirection?: WithDefault<'bidirectional' | 'vertical' | 'horizontal' | 'none', 'bidirectional'>;
+  use2DNavigation?: boolean;
+  tabKeyNavigation?: WithDefault<'None' | 'NavigateWrap' | 'NavigateStopAtEnds' | 'Normal', 'None'>;
+  disabled?: boolean;
+  isTabNavigation?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>('RCTFocusZone') as HostComponent<NativeProps>;

packages/components/MenuButton/package.json

@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@fluentui-react-native/button": "workspace:*",
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/contextual-menu": "workspace:*",
     "@fluentui-react-native/icon": "workspace:*",
     "@fluentui-react-native/tokens": "workspace:*",

packages/components/MenuButton/src/MacOSMenuButtonNativeComponent.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ImageSourcePropType, ViewProps } from 'react-native';
+
+import type { BubblingEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+interface MenuItem {
+  title?: string;
+  image?: ImageSourcePropType;
+  enabled?: boolean;
+  identifier?: string;
+  hasSubmenu?: boolean;
+  submenu: MenuItem[];
+}
+
+export interface NativeProps extends ViewProps {
+  content?: string;
+  image?: ImageSourcePropType;
+  enabled?: boolean;
+  menu?: MenuItem;
+
+  onItemClick?: BubblingEventHandler<{ key: string }>;
+  onSubmenuItemClick?: BubblingEventHandler<{ index: Int32; key: string }>;
+}
+
+export default codegenNativeComponent<NativeProps>('FRNMenuButton') as HostComponent<NativeProps>;

packages/components/MenuButton/src/MenuButton.macos.tsx

@@ -1,9 +1,14 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 /** @jsxRuntime classic */
 /** @jsx withSlots */
 import { Image } from 'react-native';
 import type { ImageResolvedAssetSource } from 'react-native';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import type { IconProps } from '@fluentui-react-native/icon';
 import { createIconProps } from '@fluentui-react-native/icon';
 import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens';
@@ -13,6 +18,7 @@ import type { IUseComposeStyling } from '@uifabricshared/foundation-compose';
 import { compose } from '@uifabricshared/foundation-compose';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
 
+import NativeMenuButton from './MacOSMenuButtonNativeComponent';
 import type {
   MenuButtonProps,
   MenuButtonSlotProps,
@@ -23,8 +29,6 @@ import type {
 } from './MenuButton.types';
 import { MenuButtonName } from './MenuButton.types';
 
-const NativeMenuButton = ensureNativeComponent('FRNMenuButton');
-
 // Represents the props available on a native NSMenuItem
 // https://developer.apple.com/documentation/appkit/nsmenuitem
 type NativeMenuItem = {

packages/components/RadioGroup/package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "workspace:*",
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/focus-zone": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*",
     "@fluentui-react-native/interactive-hooks": "workspace:*",

packages/components/RadioGroup/src/legacy/MacOSRadioButtonNativeComponent.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  content?: string;
+  disabled?: boolean;
+  buttonKey?: string;
+  selected?: boolean;
+  onPress?: BubblingEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>('FRNRadioButtonView') as HostComponent<NativeProps>;

packages/components/RadioGroup/src/legacy/RadioButton.macos.tsx

@@ -1,20 +1,23 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
 /** @jsxRuntime classic */
 /** @jsx withSlots */
 import * as React from 'react';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import type { ISlots } from '@uifabricshared/foundation-composable';
 import { withSlots } from '@uifabricshared/foundation-composable';
 import { compose } from '@uifabricshared/foundation-compose';
 import type { IUseComposeStyling } from '@uifabricshared/foundation-compose';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
 
+import NativeRadioButtonView from './MacOSRadioButtonNativeComponent';
 import type { IRadioButtonProps, IRadioButtonSlotProps, IRadioButtonType } from './RadioButton.types';
 import { radioButtonName } from './RadioButton.types';
 import { RadioGroupContext } from './RadioGroup';
 
-const NativeRadioButtonView = ensureNativeComponent('FRNRadioButtonView');
-
 export const RadioButton = compose<IRadioButtonType>({
   displayName: radioButtonName,
   usePrepareProps: (userProps: IRadioButtonProps, useStyling: IUseComposeStyling<IRadioButtonType>) => {

packages/dependency-profiles/package.json

@@ -25,7 +25,6 @@
     "@fluentui-react-native/button": "*",
     "@fluentui-react-native/callout": "*",
     "@fluentui-react-native/checkbox": "*",
-    "@fluentui-react-native/component-cache": "*",
     "@fluentui-react-native/composition": "*",
     "@fluentui-react-native/contextual-menu": "*",
     "@fluentui-react-native/default-theme": "*",

packages/dependency-profiles/src/index.js

@@ -214,10 +214,6 @@ module.exports = {
       "name": "@fluentui-react-native/vibrancy-view",
       "version": "0.1.4"
     },
-    "@fluentui-react-native/component-cache": {
-      "name": "@fluentui-react-native/component-cache",
-      "version": "1.6.1"
-    },
     "@fluentui-react-native/composition": {
       "name": "@fluentui-react-native/composition",
       "version": "0.10.2"

packages/experimental/Avatar/package.json

@@ -29,7 +29,6 @@
     "directory": "packages/experimental/Avatar"
   },
   "dependencies": {
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*"
   },
   "devDependencies": {

packages/experimental/Avatar/src/AvatarNativeComponent.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import type { ImageSource } from './codegenTypes';
+
+export interface NativeProps extends ViewProps {
+  primaryText?: string;
+  secondaryText?: string;
+  imageSource?: ImageSource;
+  backgroundColor?: ColorValue;
+  size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
+}
+
+export default codegenNativeComponent<NativeProps>('FRNAvatarView') as HostComponent<NativeProps>;

packages/experimental/Avatar/src/NativeAvatar.tsx

@@ -1,15 +1,19 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
 /** @jsxRuntime classic */
 /** @jsx withSlots */
 import type { ImageURISource, ViewProps, ColorValue } from 'react-native';
 import { NativeModules } from 'react-native';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import type { UseSlots } from '@fluentui-react-native/framework';
 import { compose, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework';
 
 const avatarName = 'NativeAvatar';
 
-const NativeAvatarView = ensureNativeComponent('FRNAvatarView');
+import NativeAvatarView from './AvatarNativeComponent';
 
 export const Sizes = ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'] as const;
 export type Size = (typeof Sizes)[number];

packages/experimental/Avatar/src/codegenTypes.d.ts

@@ -0,0 +1,2 @@
+// Separate .d.ts file to fool codegen, since ImageSource does not exist in the TS types of RN currently.
+export type { ImageURISource as ImageSource } from 'react-native/Libraries/Image/ImageSource';

packages/experimental/Checkbox/package.json

@@ -28,7 +28,6 @@
   "dependencies": {
     "@fluentui-react-native/adapters": "workspace:*",
     "@fluentui-react-native/checkbox": "workspace:*",
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*",
     "tslib": "^2.3.1"
   },

packages/experimental/Checkbox/src/Checkbox.macos.tsx

@@ -1,13 +1,17 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
 /** @jsxRuntime classic */
 /** @jsx withSlots */
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { CheckboxTokens, CheckboxProps, CheckboxState } from '@fluentui-react-native/checkbox';
 import { checkboxName } from '@fluentui-react-native/checkbox';
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import type { UseSlots } from '@fluentui-react-native/framework';
 import { compose, mergeProps, withSlots, buildProps } from '@fluentui-react-native/framework';
 
-const NativeCheckboxView = ensureNativeComponent('FRNCheckboxView');
+import NativeCheckboxView from './MacOSCheckboxNativeComponent';
 
 interface CheckboxSlotPropsMacOS {
   root: React.PropsWithRef<IViewProps> & { onPress: (e: any) => void };

packages/experimental/Checkbox/src/MacOSCheckboxNativeComponent.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  label?: string;
+  disabled?: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onPress?: BubblingEventHandler<{ isChecked: boolean }>;
+  tooltip?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('FRNCheckboxView') as HostComponent<NativeProps>;

packages/experimental/Expander/package.json

@@ -30,7 +30,6 @@
     "directory": "packages/experimental/Expander"
   },
   "dependencies": {
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*"
   },
   "devDependencies": {

packages/experimental/Expander/src/Expander.tsx

@@ -1,15 +1,19 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 /** @jsxRuntime classic */
 /** @jsx withSlots */
 import * as React from 'react';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import type { UseSlots } from '@fluentui-react-native/framework';
 import { compose, mergeProps, withSlots, buildProps } from '@fluentui-react-native/framework';
 
 import type { ExpanderType, ExpanderProps, ExpanderViewProps } from './Expander.types';
 import { expanderName } from './Expander.types';
-
-const ExpanderComponent = ensureNativeComponent('ExpanderView');
+import ExpanderComponent from './ExpanderNativeComponent';
 
 function delay(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));

packages/experimental/Expander/src/ExpanderNativeComponent.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+
+import type { DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  expandDirection?: 'up' | 'down';
+  expanded?: boolean;
+  enabled?: boolean;
+  width?: Double;
+  height?: Double;
+  contentHorizontalAlignment?: 'center' | 'left' | 'right' | 'stretch';
+  contentVerticalAlignment?: 'bottom' | 'center' | 'stretch' | 'top';
+  headerBackground?: ColorValue;
+  headerForeground?: ColorValue;
+  headerForegroundPointerOver?: ColorValue;
+  headerForegroundPressed?: ColorValue;
+  headerBorderBrush?: ColorValue;
+  headerBorderPointerOverBrush?: ColorValue;
+  headerBorderPressedBrush?: ColorValue;
+  headerDisabledForeground?: ColorValue;
+  headerDisabledBorderBrush?: ColorValue;
+  headerBorderThickness?: Double;
+  contentBackground?: ColorValue;
+  contentBorderBrush?: ColorValue;
+  chevronBackground?: ColorValue;
+  chevronForeground?: ColorValue;
+  chevronPointerOverBackground?: ColorValue;
+  chevronPointerOverForeground?: ColorValue;
+  chevronPressedBackground?: ColorValue;
+  chevronPressedForeground?: ColorValue;
+  chevronBorderThickness?: Double;
+  chevronBorderBrush?: ColorValue;
+  chevronBorderPointerOverBrush?: ColorValue;
+  chevronBorderPressedBrush?: ColorValue;
+
+  onCollapsing?: DirectEventHandler<null>;
+  onExpanding?: DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ExpanderView'
+) as HostComponent<NativeProps>;

packages/experimental/Shimmer/package.json

@@ -26,7 +26,6 @@
     "directory": "packages/experimental/Shimmer"
   },
   "dependencies": {
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*",
     "@fluentui-react-native/theming-utils": "workspace:*",
     "@fluentui-react-native/tokens": "workspace:*",

packages/experimental/Shimmer/src/Shimmer.win32.tsx

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 /** @jsxRuntime classic */
 /** @jsx withSlots */
 import { processColor, View } from 'react-native';
@@ -9,13 +15,13 @@ import { assertNever } from 'assert-never';
 import type { SvgProps } from 'react-native-svg';
 import { ClipPath, Defs, LinearGradient, Path, Rect, Stop, Svg } from 'react-native-svg';
 
-import { RCTNativeAnimatedShimmer } from './consts.win32';
 import { stylingSettings } from './Shimmer.styling.win32';
 import type { ShimmerElementTypes, ShimmerProps, ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types.shared';
 export type { ShimmerCircleElement, ShimmerRectElement };
 import { shimmerName } from './Shimmer.types.shared';
 import type { ClippingMaskProps, ShimmerType, ShimmerWaveProps } from './Shimmer.types.win32';
 import { convertRectToSvgPath, convertCircleToSvgPath } from './SvgShapeToPath';
+import RCTNativeAnimatedShimmer from './Win32ShimmerNativeComponent';
 
 const clippingMask: React.FunctionComponent<ClippingMaskProps> = (props: ClippingMaskProps) => {
   /**

packages/experimental/Shimmer/src/Win32ShimmerNativeComponent.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  delay?: Double;
+  duration?: Double;
+}
+
+export default codegenNativeComponent<NativeProps>('RCTNativeAnimatedShimmer') as HostComponent<NativeProps>;

packages/experimental/Shimmer/src/consts.win32.ts

@@ -1,2 +0,0 @@
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
-export const RCTNativeAnimatedShimmer = ensureNativeComponent('RCTNativeAnimatedShimmer');

packages/experimental/Spinner/package.json

@@ -26,7 +26,6 @@
     "directory": "packages/experimental/Spinner"
   },
   "dependencies": {
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*",
     "@fluentui-react-native/text": "workspace:*",
     "@fluentui-react-native/theme-tokens": "workspace:*",

packages/experimental/Spinner/src/Spinner.win32.tsx

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 /** @jsxRuntime classic */
 /** @jsx withSlots */
 import type { ColorValue } from 'react-native';
@@ -9,12 +15,12 @@ import { TextV1 as Text } from '@fluentui-react-native/text';
 import { Path, Svg } from 'react-native-svg';
 import type { SvgProps } from 'react-native-svg';
 
-import { RCTNativeAnimatedContainer } from './consts.win32';
 import { stylingSettings } from './Spinner.styling.win32';
 import { spinnerName } from './Spinner.types';
 import type { SpinnerProps, SpinnerType, SpinnerSvgProps } from './Spinner.types.win32';
 import { diameterSizeMap, lineThicknessSizeMap, getDefaultSize } from './SpinnerTokens.win32';
 import { useSpinner } from './useSpinner';
+import RCTNativeAnimatedContainer from './Win32NativeAnimatedContainerNativeComponent';
 
 const getTrackPath = (diameter: number, width: number, color: ColorValue) => {
   const start = {

packages/experimental/Spinner/src/Win32NativeAnimatedContainerNativeComponent.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  delay?: Double;
+  duration?: Double;
+  nativeAnimationClass?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('RCTNativeAnimatedContainer') as HostComponent<NativeProps>;

packages/experimental/Spinner/src/consts.win32.ts

@@ -1,2 +0,0 @@
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
-export const RCTNativeAnimatedContainer = ensureNativeComponent('RCTNativeAnimatedContainer');

packages/experimental/Tooltip/package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@fluentui-react-native/callout": "workspace:*",
-    "@fluentui-react-native/component-cache": "workspace:*",
     "@fluentui-react-native/framework": "workspace:*",
     "tslib": "^2.3.1"
   },

packages/experimental/Tooltip/src/Tooltip.tsx

@@ -1,13 +1,17 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 /** @jsxRuntime classic */
 import * as React from 'react';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
 
 import type { TooltipProps } from './Tooltip.types';
 import { tooltipName } from './Tooltip.types';
-
-const NativeTooltipView = ensureNativeComponent('RCTTooltip');
+import NativeTooltipView from './TooltipNativeComponent';
 
 /**
  * A function which determines if a set of styles should be applied to the component given the current state and props of the tooltip.

packages/experimental/Tooltip/src/TooltipNativeComponent.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  content?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('RCTTooltip') as HostComponent<NativeProps>;

packages/experimental/VibrancyView/package.json

@@ -28,7 +28,6 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "workspace:*",
-    "@fluentui-react-native/component-cache": "workspace:*",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

packages/experimental/VibrancyView/src/VibrancyView.tsx

@@ -1,11 +1,14 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
 /** @jsxRuntime classic */
 import React from 'react';
 
-import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
-
 import type { VibrancyViewProps } from './VibrancyView.types';
-
-const NativeVibrancyView = ensureNativeComponent('FRNVibrancyView');
+import NativeVibrancyView from './VibrancyViewNativeComponent';
 
 export const VibrancyView = (props: VibrancyViewProps) => {
   return <NativeVibrancyView {...props} />;

packages/experimental/VibrancyView/src/VibrancyViewNativeComponent.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import type { HostComponent, ViewProps } from 'react-native';
+
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  material?: WithDefault<
+    | 'titlebar'
+    | 'selection'
+    | 'menu'
+    | 'popover'
+    | 'sidebar'
+    | 'headerview'
+    | 'sheet'
+    | 'windowbackground'
+    | 'hudWindow'
+    | 'fullScreenUI'
+    | 'toolTip'
+    | 'contentBackground'
+    | 'underWindowBackground'
+    | 'underPageBackground',
+    'menu'
+  >;
+  blendingMode?: WithDefault<'behindWindow' | 'withinWindow', 'behindWindow'>;
+  state?: WithDefault<'followsWindowActiveState' | 'active' | 'inactive', 'followsWindowActiveState'>;
+}
+
+export default codegenNativeComponent<NativeProps>('FRNVibrancyView') as HostComponent<NativeProps>;

packages/framework/component-cache/.eslintignore

@@ -1 +0,0 @@
-# As this package grows it's likely we'll want to voluntarily ignore some packages

packages/framework/component-cache/.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@fluentui-react-native/eslint-config-rules'],
-};

packages/framework/component-cache/.npmignore

@@ -1,11 +0,0 @@
-node_modules
-.gitignore
-.gitattributes
-.editorconfig
-config.js
-jest.config.js
-.eslintrc.js
-.eslintignore
-tsconfig.json
-jsconfig.json
-*.build.log

packages/framework/component-cache/CHANGELOG.json

@@ -1,485 +0,0 @@
-{
-  "name": "@fluentui-react-native/component-cache",
-  "entries": [
-    {
-      "date": "Fri, 01 Mar 2024 20:39:09 GMT",
-      "version": "1.6.1",
-      "tag": "@fluentui-react-native/component-cache_v1.6.1",
-      "comments": {
-        "patch": [
-          {
-            "author": "ruaraki@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "17c82b22513a177eaaee6941e5d4bbc2d2654030",
-            "comment": "Use workspace for version of local package"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 09 Nov 2023 02:39:07 GMT",
-      "version": "1.6.0",
-      "tag": "@fluentui-react-native/component-cache_v1.6.0",
-      "comments": {
-        "minor": [
-          {
-            "author": "30809111+acoates-ms@users.noreply.github.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "4a6a9cd63396c6e8fc6ffbfec7137652928e40ef",
-            "comment": "Update to react-native 0.72"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 10 Jul 2023 17:25:04 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.5.1",
-      "version": "1.5.1",
-      "comments": {
-        "patch": [
-          {
-            "author": "ruaraki@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "8c7f0af85630caf696f4b8a777bbba5fc5e457d2",
-            "comment": "Fix error"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 05 Jun 2023 19:26:22 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.5.0",
-      "version": "1.5.0",
-      "comments": {
-        "minor": [
-          {
-            "author": "sanajmi@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "8c0f9d27e34913da82c00299c12c399877257325",
-            "comment": "Upgrade to React Native 0.71"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 24 Feb 2023 20:39:57 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.4.4",
-      "version": "1.4.4",
-      "comments": {
-        "patch": [
-          {
-            "author": "78454019+lyzhan7@users.noreply.github.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "743bd1507af336a62946361f3fe3c800ae5bd4c2",
-            "comment": "Order imports"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 01 Feb 2023 22:33:15 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.4.3",
-      "version": "1.4.3",
-      "comments": {
-        "patch": [
-          {
-            "author": "30809111+acoates-ms@users.noreply.github.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "2d0138c80d7512b905fcf32583760bec2b911910",
-            "comment": "Enable @typescript-eslint/consistent-type-imports"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 30 Jan 2023 15:17:29 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.4.2",
-      "version": "1.4.2",
-      "comments": {
-        "none": [
-          {
-            "author": "4123478+tido64@users.noreply.github.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "4de4c2b37c835ebd9af015ff767f9dd68452f786",
-            "comment": "Migrate to align-deps"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 03 Oct 2022 16:40:48 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.4.2",
-      "version": "1.4.2",
-      "comments": {
-        "patch": [
-          {
-            "author": "ruaraki@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "45d33f2b8f5aba6293494a13cc92fd75715340e9",
-            "comment": "Get the component cache to actually... cache..."
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 30 Sep 2022 00:54:35 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.4.1",
-      "version": "1.4.1",
-      "comments": {
-        "patch": [
-          {
-            "author": "krsiler@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "de9ddf75304295843613e144473e4fef3190f14b",
-            "comment": "Update react-native to 0.68"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 14 Jul 2022 18:09:51 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.4.0",
-      "version": "1.4.0",
-      "comments": {
-        "minor": [
-          {
-            "author": "sanajmi@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "155145b496a51b06bba73f8f9c6b89dc7b348c4b",
-            "comment": "Update to React Native 0.66"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 31 Mar 2022 07:27:47 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.3.2",
-      "version": "1.3.2",
-      "comments": {
-        "patch": [
-          {
-            "author": "4123478+tido64@users.noreply.github.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "c39b4436f2ca160a31ca1d7ca9fa8bf7d59512ed",
-            "comment": "Ban `export *` in index files for better tree-shakeability"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 18 Feb 2022 23:27:10 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.3.1",
-      "version": "1.3.1",
-      "comments": {
-        "none": [
-          {
-            "author": "ruaraki@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "597b1e6bd7b3791df8fad2e0ec83810872261c54",
-            "comment": "Remove web endpoint"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 16 Feb 2022 21:58:20 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.3.1",
-      "version": "1.3.1",
-      "comments": {
-        "none": [
-          {
-            "author": "ruaraki@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "fc506e0ea21def220cd2e7b4fe36361446c5f8c6",
-            "comment": "Update just"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 14 Jan 2022 01:00:01 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.3.1",
-      "version": "1.3.1",
-      "comments": {
-        "none": [
-          {
-            "author": "sanajmi@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "163defba33412f6f44117750a540b8fdecd3bdca",
-            "comment": "Remove references to uifabricshared"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 20 Dec 2021 22:56:00 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.3.1",
-      "version": "1.3.1",
-      "comments": {
-        "patch": [
-          {
-            "author": "ruaraki@microsoft.com",
-            "package": "@fluentui-react-native/component-cache",
-            "commit": "f4a5b4f5c9c190400e3e34c4a33b3ed30696d41e",
-            "comment": "Add repository property to all package.json files"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 17 Nov 2021 19:28:07 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.3.0",
-      "version": "1.3.0",
-      "comments": {
-        "minor": [
-          {
-            "comment": "Update to react-native 0.64",
-            "author": "afoxman@microsoft.com",
-            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 11 Nov 2021 23:17:41 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.3",
-      "version": "1.2.3",
-      "comments": {
-        "none": [
-          {
-            "comment": "Rename uifabricshared/eslint-config-rules to fluentui-react-native/eslint-config-rules",
-            "author": "ruaraki@microsoft.com",
-            "commit": "110fba2a1721a914501404f6040f07656307549e",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Sat, 07 Aug 2021 00:40:04 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.3",
-      "version": "1.2.3",
-      "comments": {
-        "none": [
-          {
-            "comment": "enable usePressableState with stock Pressable component",
-            "author": "jasonmo@microsoft.com",
-            "commit": "e506337e109ef24e675c2ac794179db86fcb7e86",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 06 Aug 2021 00:36:02 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.3",
-      "version": "1.2.3",
-      "comments": {
-        "none": [
-          {
-            "comment": "Remove api-extractor related files",
-            "author": "ruaraki@microsoft.com",
-            "commit": "56ccce452d0dbbd5c24f53ebdd467f2d01dda694",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 04 Aug 2021 06:26:25 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.3",
-      "version": "1.2.3",
-      "comments": {
-        "patch": [
-          {
-            "comment": "radio group on macOS",
-            "author": "67026167+chiuam@users.noreply.github.com",
-            "commit": "68dd61bd45ca8ffacc1580e468f3c01810e3093e",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 30 Jul 2021 06:26:34 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.2",
-      "version": "1.2.2",
-      "comments": {
-        "none": [
-          {
-            "comment": "Bumped Jest to 27.0.6",
-            "author": "4123478+tido64@users.noreply.github.com",
-            "commit": "925cf4eb5fe6bfadf20208b5b3d3a4454fc5c9fa",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 21 Jul 2021 22:55:40 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.2",
-      "version": "1.2.2",
-      "comments": {
-        "patch": [
-          {
-            "comment": "expose use-tokens in framework package",
-            "author": "jasonmo@microsoft.com",
-            "commit": "af44164cf47abb856e567e9976043aafe414ade6",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 18 Jun 2021 00:38:19 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.1",
-      "version": "1.2.1",
-      "comments": {
-        "patch": [
-          {
-            "comment": "Apply prettier to framework, run",
-            "author": "ruaraki@microsoft.com",
-            "commit": "907fea51098ba59a8235128e17fb82a327b7adb2",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Sat, 06 Mar 2021 00:20:05 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.2.0",
-      "version": "1.2.0",
-      "comments": {
-        "minor": [
-          {
-            "comment": "Update to react-native 0.63",
-            "author": "30809111+acoates-ms@users.noreply.github.com",
-            "commit": "d35d3b45f12a670648edaa7143b210ed43360996",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 23 Oct 2020 22:27:37 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.1.0",
-      "version": "1.1.0",
-      "comments": {
-        "minor": [
-          {
-            "comment": "RNIcon feature",
-            "author": "warleu@microsoft.com",
-            "commit": "83a0f448bf9ee9dddece08e7c277304dcef96388",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 22 Oct 2020 21:21:59 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.0.3",
-      "version": "1.0.3",
-      "comments": {
-        "none": [
-          {
-            "comment": "onDismiss not called when contextual menu is dismissed with item click",
-            "author": "lehon@microsoft.com",
-            "commit": "4f3ed9d5555e86a6017901aa2f010732d6d6fe5a",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 13 Oct 2020 01:39:45 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.0.3",
-      "version": "1.0.3",
-      "comments": {
-        "none": [
-          {
-            "comment": "add focused state condition to onKeyUp callback",
-            "author": "lehon@microsoft.com",
-            "commit": "7a9cef9d56db7ad154e542b4ac5547458dfc604d",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 25 Sep 2020 19:21:43 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.0.3",
-      "version": "1.0.3",
-      "comments": {
-        "patch": [
-          {
-            "comment": "Update react-native-win32 versions - enable logbox",
-            "author": "acoates-ms@noreply.github.com",
-            "commit": "a95ab1b66822cceacc74e24094f85c6917f58086",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 23 Sep 2020 18:31:48 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.0.2",
-      "version": "1.0.2",
-      "comments": {
-        "patch": [
-          {
-            "comment": "start publishing src to fix customer source maps",
-            "author": "jasonmo@microsoft.com",
-            "commit": "b3d7b5ba710bc581a6f4db91c91e4ffc185fc427",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 11 Sep 2020 20:25:42 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.0.1",
-      "version": "1.0.1",
-      "comments": {
-        "none": [
-          {
-            "comment": "Add samples and some README text to use-slots and use-styling packages",
-            "author": "jasonmo@microsoft.com",
-            "commit": "2566347850eff4ed67bfad2a85134481e088cba6",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Fri, 28 Aug 2020 05:03:51 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.0.1",
-      "version": "1.0.1",
-      "comments": {
-        "none": [
-          {
-            "comment": "only allow menu container to focus on mount",
-            "author": "lehon@microsoft.com",
-            "commit": "9c93388527af2ea3ba60336c56a3da0ce65e3688",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 25 Aug 2020 21:17:13 GMT",
-      "tag": "@fluentui-react-native/component-cache_v1.0.1",
-      "version": "1.0.1",
-      "comments": {
-        "patch": [
-          {
-            "comment": "add native component cache for consolidating requireNativeComponent calls",
-            "author": "jasonmo@microsoft.com",
-            "commit": "f0cae19d5a52acc208b485e34dcf4cd3dc3444c2",
-            "package": "@fluentui-react-native/component-cache"
-          }
-        ]
-      }
-    }
-  ]
-}

packages/framework/component-cache/CHANGELOG.md

@@ -1,165 +0,0 @@
-# Change Log - @fluentui-react-native/component-cache
-
-This log was last generated on Fri, 01 Mar 2024 20:39:09 GMT and should not be manually modified.
-
-<!-- Start content -->
-
-## 1.6.1
-
-Fri, 01 Mar 2024 20:39:09 GMT
-
-### Patches
-
-- Use workspace for version of local package (ruaraki@microsoft.com)
-
-## 1.6.0
-
-Thu, 09 Nov 2023 02:39:07 GMT
-
-### Minor changes
-
-- Update to react-native 0.72 (30809111+acoates-ms@users.noreply.github.com)
-
-## 1.5.1
-
-Mon, 10 Jul 2023 17:25:04 GMT
-
-### Patches
-
-- Fix error (ruaraki@microsoft.com)
-
-## 1.5.0
-
-Mon, 05 Jun 2023 19:26:22 GMT
-
-### Minor changes
-
-- Upgrade to React Native 0.71 (sanajmi@microsoft.com)
-
-## 1.4.4
-
-Fri, 24 Feb 2023 20:39:57 GMT
-
-### Patches
-
-- Order imports (78454019+lyzhan7@users.noreply.github.com)
-
-## 1.4.3
-
-Wed, 01 Feb 2023 22:33:15 GMT
-
-### Patches
-
-- Enable @typescript-eslint/consistent-type-imports (30809111+acoates-ms@users.noreply.github.com)
-
-## 1.4.2
-
-Mon, 03 Oct 2022 16:40:48 GMT
-
-### Patches
-
-- Get the component cache to actually... cache... (ruaraki@microsoft.com)
-
-## 1.4.1
-
-Fri, 30 Sep 2022 00:54:35 GMT
-
-### Patches
-
-- Update react-native to 0.68 (krsiler@microsoft.com)
-
-## 1.4.0
-
-Thu, 14 Jul 2022 18:09:51 GMT
-
-### Minor changes
-
-- Update to React Native 0.66 (sanajmi@microsoft.com)
-
-## 1.3.2
-
-Thu, 31 Mar 2022 07:27:47 GMT
-
-### Patches
-
-- Ban `export *` in index files for better tree-shakeability (4123478+tido64@users.noreply.github.com)
-
-## 1.3.1
-
-Mon, 20 Dec 2021 22:56:00 GMT
-
-### Patches
-
-- Add repository property to all package.json files (ruaraki@microsoft.com)
-
-## 1.3.0
-
-Wed, 17 Nov 2021 19:28:07 GMT
-
-### Minor changes
-
-- Update to react-native 0.64 (afoxman@microsoft.com)
-
-## 1.2.3
-
-Wed, 04 Aug 2021 06:26:25 GMT
-
-### Patches
-
-- radio group on macOS (67026167+chiuam@users.noreply.github.com)
-
-## 1.2.2
-
-Wed, 21 Jul 2021 22:55:40 GMT
-
-### Patches
-
-- expose use-tokens in framework package (jasonmo@microsoft.com)
-
-## 1.2.1
-
-Fri, 18 Jun 2021 00:38:19 GMT
-
-### Patches
-
-- Apply prettier to framework, run (ruaraki@microsoft.com)
-
-## 1.2.0
-
-Sat, 06 Mar 2021 00:20:05 GMT
-
-### Minor changes
-
-- Update to react-native 0.63 (30809111+acoates-ms@users.noreply.github.com)
-
-## 1.1.0
-
-Fri, 23 Oct 2020 22:27:37 GMT
-
-### Minor changes
-
-- RNIcon feature (warleu@microsoft.com)
-
-## 1.0.3
-
-Fri, 25 Sep 2020 19:21:43 GMT
-
-### Patches
-
-- Update react-native-win32 versions - enable logbox (acoates-ms@noreply.github.com)
-
-## 1.0.2
-
-Wed, 23 Sep 2020 18:31:48 GMT
-
-### Patches
-
-- start publishing src to fix customer source maps (jasonmo@microsoft.com)
-
-## 1.0.1
-
-Tue, 25 Aug 2020 21:17:13 GMT
-
-### Patches
-
-- add native component cache for consolidating requireNativeComponent calls (jasonmo@microsoft.com)

packages/framework/component-cache/README.md

@@ -1,3 +0,0 @@
-# @fluentui-react-native/component-cache
-
-This is a simple wrapper to ensure that `requireNativeComponent` doesn't get called multiple times and that multiple consuming controls can reference the same HostComponent. It is designed to be very rarely changed, this helps insulate against multiple versions of a component in the same bundle making rNC calls.

packages/framework/component-cache/babel.config.js

@@ -1 +0,0 @@
-module.exports = require('@fluentui-react-native/scripts/babel.config');

packages/framework/component-cache/jest.config.js

@@ -1,2 +0,0 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
-module.exports = configureReactNativeJest('android', { preset: 'react-native' });

packages/framework/component-cache/just.config.js

@@ -1,3 +0,0 @@
-const { preset } = require('@fluentui-react-native/scripts');
-
-preset();

packages/framework/component-cache/package.json

@@ -1,63 +0,0 @@
-{
-  "name": "@fluentui-react-native/component-cache",
-  "version": "1.6.1",
-  "description": "Simple caching package to avoid duplicate requireNativeComponent calls",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/microsoft/fluentui-react-native",
-    "directory": "packages/framework/component-cache"
-  },
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "typings": "lib/index.d.ts",
-  "onPublish": {
-    "main": "lib-commonjs/index.js",
-    "module": "lib/index.js"
-  },
-  "scripts": {
-    "build": "fluentui-scripts build",
-    "just": "fluentui-scripts",
-    "clean": "fluentui-scripts clean",
-    "depcheck": "fluentui-scripts depcheck",
-    "lint": "fluentui-scripts eslint",
-    "start": "fluentui-scripts dev",
-    "start-test": "fluentui-scripts jest-watch",
-    "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
-    "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "devDependencies": {
-    "@fluentui-react-native/eslint-config-rules": "workspace:*",
-    "@fluentui-react-native/scripts": "workspace:*",
-    "@react-native/metro-config": "^0.72.0",
-    "@types/jest": "^29.0.0",
-    "@types/node": "^10.3.5",
-    "react": "18.2.0",
-    "react-native": "^0.72.0"
-  },
-  "peerDependencies": {
-    "react": "18.2.0",
-    "react-native": "^0.72.0"
-  },
-  "rnx-kit": {
-    "kitType": "library",
-    "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": [
-        "react-native@0.72"
-      ],
-      "capabilities": [
-        "core",
-        "core-android",
-        "core-ios",
-        "react"
-      ]
-    }
-  }
-}

packages/framework/component-cache/src/ensureNativeComponent.test.ts

@@ -1,44 +0,0 @@
-import { requireNativeComponent } from 'react-native';
-
-import { ensureNativeComponent } from './ensureNativeComponent';
-
-describe('ensureNativeComponent test suite', () => {
-  beforeAll(() => {
-    jest.mock('react-native/Libraries/ReactNative/requireNativeComponent', () => {
-      return {
-        default: jest.fn((className) => {
-          if (className == 'RCTView') {
-            return jest.requireActual('react-native/Libraries/Components/View/View');
-          }
-
-          return null;
-        }),
-      };
-    });
-  });
-
-  it('Base component render', () => {
-    ensureNativeComponent('RCTView');
-    expect(requireNativeComponent).toHaveBeenCalled();
-  });
-
-  it('Base component render', () => {
-    const component = ensureNativeComponent('RCTView');
-    const component2 = ensureNativeComponent('RCTView');
-
-    // Make sure requireNativeComponent has only been called once
-    expect(requireNativeComponent).toHaveBeenCalledTimes(1);
-    expect(component).toEqual(component2);
-  });
-
-  it('Base component render', () => {
-    ensureNativeComponent('RCTView');
-    expect(requireNativeComponent).toHaveBeenCalled();
-    ensureNativeComponent('RCTText');
-    expect(requireNativeComponent).toHaveBeenCalled();
-  });
-
-  afterAll(() => {
-    jest.clearAllMocks();
-  });
-});

packages/framework/component-cache/src/ensureNativeComponent.ts

@@ -1,15 +0,0 @@
-import type { HostComponent } from 'react-native';
-import { requireNativeComponent } from 'react-native';
-
-const cache: { [key: string]: HostComponent<any> } = {};
-
-/**
- * Get a native component of the given name, requiring it if necessary
- * @param name - name of the component to retrieve from the cache
- */
-export function ensureNativeComponent<T>(name: string): HostComponent<T> {
-  if (!cache[name]) {
-    cache[name] = requireNativeComponent<T>(name);
-  }
-  return cache[name];
-}

packages/framework/component-cache/src/index.ts

@@ -1 +0,0 @@
-export { ensureNativeComponent } from './ensureNativeComponent';

packages/framework/component-cache/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@fluentui-react-native/scripts/tsconfig.json",
-  "compilerOptions": {
-    "outDir": "lib",
-    "types": ["node", "jest"]
-  },
-  "include": ["src"]
-}

yarn.lock

@@ -2453,7 +2453,6 @@ __metadata:
   resolution: "@fluentui-react-native/callout@workspace:packages/components/Callout"
   dependencies:
     "@fluentui-react-native/adapters": "workspace:*"
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/interactive-hooks": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -2578,23 +2577,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@fluentui-react-native/component-cache@*, @fluentui-react-native/component-cache@workspace:*, @fluentui-react-native/component-cache@workspace:packages/framework/component-cache":
-  version: 0.0.0-use.local
-  resolution: "@fluentui-react-native/component-cache@workspace:packages/framework/component-cache"
-  dependencies:
-    "@fluentui-react-native/eslint-config-rules": "workspace:*"
-    "@fluentui-react-native/scripts": "workspace:*"
-    "@react-native/metro-config": ^0.72.0
-    "@types/jest": ^29.0.0
-    "@types/node": ^10.3.5
-    react: 18.2.0
-    react-native: ^0.72.0
-  peerDependencies:
-    react: 18.2.0
-    react-native: ^0.72.0
-  languageName: unknown
-  linkType: soft
-
 "@fluentui-react-native/composition@*, @fluentui-react-native/composition@workspace:*, @fluentui-react-native/composition@workspace:packages/framework/composition":
   version: 0.0.0-use.local
   resolution: "@fluentui-react-native/composition@workspace:packages/framework/composition"
@@ -2698,7 +2680,6 @@ __metadata:
     "@fluentui-react-native/button": "*"
     "@fluentui-react-native/callout": "*"
     "@fluentui-react-native/checkbox": "*"
-    "@fluentui-react-native/component-cache": "*"
     "@fluentui-react-native/composition": "*"
     "@fluentui-react-native/contextual-menu": "*"
     "@fluentui-react-native/default-theme": "*"
@@ -3006,7 +2987,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@fluentui-react-native/experimental-avatar@workspace:packages/experimental/Avatar"
   dependencies:
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/framework": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -3035,7 +3015,6 @@ __metadata:
   dependencies:
     "@fluentui-react-native/adapters": "workspace:*"
     "@fluentui-react-native/checkbox": "workspace:*"
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/framework": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -3065,7 +3044,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@fluentui-react-native/experimental-expander@workspace:packages/experimental/Expander"
   dependencies:
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/framework": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -3186,7 +3164,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@fluentui-react-native/experimental-shimmer@workspace:packages/experimental/Shimmer"
   dependencies:
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/framework": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -3250,7 +3227,6 @@ __metadata:
   resolution: "@fluentui-react-native/focus-trap-zone@workspace:packages/components/FocusTrapZone"
   dependencies:
     "@fluentui-react-native/adapters": "workspace:*"
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/interactive-hooks": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -3280,7 +3256,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@fluentui-react-native/focus-zone@workspace:packages/components/FocusZone"
   dependencies:
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/interactive-hooks": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -3514,7 +3489,6 @@ __metadata:
   resolution: "@fluentui-react-native/menu-button@workspace:packages/components/MenuButton"
   dependencies:
     "@fluentui-react-native/button": "workspace:*"
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/contextual-menu": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/icon": "workspace:*"
@@ -3808,7 +3782,6 @@ __metadata:
   resolution: "@fluentui-react-native/radio-group@workspace:packages/components/RadioGroup"
   dependencies:
     "@fluentui-react-native/adapters": "workspace:*"
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/focus-zone": "workspace:*"
     "@fluentui-react-native/framework": "workspace:*"
@@ -3953,7 +3926,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@fluentui-react-native/spinner@workspace:packages/experimental/Spinner"
   dependencies:
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/framework": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -4403,7 +4375,6 @@ __metadata:
   dependencies:
     "@fluentui-react-native/button": "workspace:*"
     "@fluentui-react-native/callout": "workspace:*"
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/framework": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
@@ -4504,7 +4475,6 @@ __metadata:
   resolution: "@fluentui-react-native/vibrancy-view@workspace:packages/experimental/VibrancyView"
   dependencies:
     "@fluentui-react-native/adapters": "workspace:*"
-    "@fluentui-react-native/component-cache": "workspace:*"
     "@fluentui-react-native/eslint-config-rules": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
     "@react-native/metro-config": ^0.72.0