chore(xplat): Update canUseDOM to be aware of ReactNative (#30872)

Author: behowell

change/@fluentui-react-accordion-60736783-aa50-492f-a93b-5557fbeebfba.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update api.md file from TypeScript 5 changes",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-73497b94-9cd3-45c2-a951-45082c5596cd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(xplat): Update canUseDOM to be aware of ReactNative",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-platform-adapter-preview/package.json

@@ -36,7 +36,6 @@
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.15.2",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.5",
     "@griffel/core": "^1.14.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",

packages/react-components/react-platform-adapter-preview/src/index.ts

@@ -9,5 +9,5 @@ export { shorthands } from './styling/shorthands';
 export { isReactNative } from './utilities/isReactNative';
 
 // re-export some griffel types to have fluent use the griffel adapter instead of griffel directly
-export { useRenderer_unstable, TextDirectionProvider } from '@griffel/react';
 export { makeStyles as makeStylesCore } from '@griffel/core';
+export { TextDirectionProvider, useRenderer_unstable } from '@griffel/react';

packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx

@@ -13,7 +13,7 @@ import {
 } from '@fluentui/react-shared-contexts';
 import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
 import { IconDirectionContextProvider } from '@fluentui/react-icons';
-import { isReactNative, XPlatProvider } from '@fluentui/react-platform-adapter-preview';
+import { XPlatProvider } from '@fluentui/react-platform-adapter-preview';
 
 /**
  * Render the final JSX of FluentProvider
@@ -41,7 +41,7 @@ export const renderFluentProvider_unstable = (
                   <IconDirectionContextProvider value={contextValues.iconDirection}>
                     <OverridesProvider value={contextValues.overrides_unstable}>
                       <state.root>
-                        {canUseDOM() || isReactNative ? null : (
+                        {canUseDOM() ? null : (
                           <style
                             // Using dangerous HTML because react can escape characters
                             // which can lead to invalid CSS.

packages/react-components/react-utilities/package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
+    "@fluentui/react-platform-adapter-preview": "^0.0.0",
     "@fluentui/react-shared-contexts": "^9.15.2",
     "@swc/helpers": "^0.5.1"
   },

packages/react-components/react-utilities/src/ssr/canUseDOM.ts

@@ -1,9 +1,11 @@
+import { isReactNative } from '@fluentui/react-platform-adapter-preview';
+
 /**
  * Verifies if an application can use DOM.
  */
 export function canUseDOM(): boolean {
   return (
     // eslint-disable-next-line deprecation/deprecation, no-restricted-globals
-    typeof window !== 'undefined' && !!(window.document && window.document.createElement)
+    (typeof window !== 'undefined' && !!(window.document && window.document.createElement)) || isReactNative
   );
 }