Merge branch 'xplat' of https://github.com/microsoft/fluentui into xp…

…lat-griffel-stylex-nested-selectors

apps/xplat-v9/StrictDomDemo.tsx

@@ -9,6 +9,8 @@ import {
   shorthands,
 } from '@fluentui/react-platform-adapter';
 import { html } from 'react-strict-dom';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
 
 const useBaseClassName = makeResetStyles({
   marginBlock: '1rem',
@@ -36,10 +38,12 @@ export const StrictDomDemo = (props: { cond?: boolean }) => {
   const classNames = useClassNames();
 
   return (
-    <html.div
-      style={getStylesFromClassName(mergeClasses(useBaseClassName(), classNames.root, cond && classNames.cond))}
-    >
-      <Label required>This is a label</Label>
-    </html.div>
+    <FluentProvider theme={webLightTheme}>
+      <html.div
+        style={getStylesFromClassName(mergeClasses(useBaseClassName(), classNames.root, cond && classNames.cond))}
+      >
+        <Label required>This is a label</Label>
+      </html.div>
+    </FluentProvider>
   );
 };

apps/xplat-v9/babel.config.js

@@ -1,8 +1,4 @@
 module.exports = {
   presets: ['@rnx-kit/babel-preset-metro-react-native'],
-  plugins: [
-    '@babel/plugin-transform-nullish-coalescing-operator', // required by Chakra
-    '@babel/plugin-transform-logical-assignment-operators', // required by Chakra
-    '@stylexjs/babel-plugin',
-  ],
+  plugins: ['@stylexjs/babel-plugin'],
 };

apps/xplat-v9/index.js

@@ -2,8 +2,6 @@
  * @format
  */
 
-import 'core-js/features/array/flat'; // required by Chakra
-import 'core-js/features/array/flat-map'; // required by Chakra
 import { AppRegistry } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';

apps/xplat-v9/ios/Podfile.lock

@@ -1054,7 +1054,7 @@ PODS:
     - React-RCTFabric
     - ReactCommon/turbomodule/core
     - Yoga
-  - ReactTestApp-DevSupport (3.2.15):
+  - ReactTestApp-DevSupport (3.3.1):
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
@@ -1280,11 +1280,11 @@ SPEC CHECKSUMS:
   React-utils: 987a4526a2fc0acdfaf87888adfe0bf9d0452066
   ReactCommon: dcc87812d79ce368cc41b7cf49fb624cf3c22b6b
   ReactNativeHost: 46268e9273b0afaf9e9720d6cc81507d95d8dd7a
-  ReactTestApp-DevSupport: 8a69118a4beadc5c4426e35d4d38c3dc7357cb3d
-  ReactTestApp-Resources: da77347b3f02b5d79ba3fecb3ad328b2f6a7ef4d
+  ReactTestApp-DevSupport: d07f4ee3757454ccca60cc95b9d533a00ba41513
+  ReactTestApp-Resources: 857244f3a23f2b3157b364fa06cf3e8866deff9c
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: a716eea57d0d3430219c0a5a233e1e93ee931eb7
 
 PODFILE CHECKSUM: cadb274a002043a2a0ccc7f3d1f4c687c0004793
 
-COCOAPODS: 1.14.2
+COCOAPODS: 1.14.3

apps/xplat-v9/macos/Podfile.lock

@@ -1019,7 +1019,7 @@ PODS:
     - React-Core
     - React-cxxreact
     - ReactCommon/turbomodule/core
-  - ReactTestApp-DevSupport (3.2.7):
+  - ReactTestApp-DevSupport (3.3.1):
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
@@ -1237,11 +1237,11 @@ SPEC CHECKSUMS:
   React-utils: b360b43f6554167a3d030d18d439e62872ee7eb1
   ReactCommon: 4a9c46cbe8803df27da190b48f5c64cee33a483a
   ReactNativeHost: 59d4565eee4fb44efb46d3bff7adbaf2cf29fa5f
-  ReactTestApp-DevSupport: c8cfb17ad2c1ae1f179f91eb2b5c99ae3ac567a6
-  ReactTestApp-Resources: 8539dac0f8d2ef3821827a537e37812104c6ff78
+  ReactTestApp-DevSupport: d07f4ee3757454ccca60cc95b9d533a00ba41513
+  ReactTestApp-Resources: 9d83e280b173ba2ee053b8135730dff60f9ab674
   SocketRocket: f6c6249082c011e6de2de60ed641ef8bbe0cfac9
   Yoga: 3725908fb0d6c8d45b7e133940f5d603e588b7ce
 
-PODFILE CHECKSUM: 46a625250ee05f1423e150ad0885f5fe7be9c090
+PODFILE CHECKSUM: b33f0b7a7f695ecaa04ef3bb721e1a1a3f780ad6
 
-COCOAPODS: 1.14.2
+COCOAPODS: 1.14.3

apps/xplat-v9/package.json

@@ -18,11 +18,12 @@
     "windows": "react-native run-windows --sln windows/xplat-v9.sln"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.3.61",
-    "@fluentui/react-label": "^9.1.64",
-    "@fluentui/react-platform-adapter": "^0.0.0",
+    "@fluentui/react-button": "*",
+    "@fluentui/react-label": "*",
+    "@fluentui/react-platform-adapter": "*",
+    "@fluentui/react-provider": "*",
+    "@fluentui/react-theme": "*",
     "@stylexjs/babel-plugin": "^0.5.1",
-    "@stylexjs/stylex": "^0.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "^0.73.5",
@@ -32,8 +33,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@babel/plugin-transform-logical-assignment-operators": "^7.20.0",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@react-native/babel-preset": "^0.73.0",
@@ -47,11 +46,10 @@
     "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
-    "core-js": "^3.8.2",
     "eslint": "^8.19.0",
     "jest": "^29.2.1",
     "prettier": "^2.4.1",
-    "react-native-test-app": "^3.2.15",
+    "react-native-test-app": "^3.3.1",
     "react-test-renderer": "18.2.0",
     "typescript": "4.8.4"
   },

change/@fluentui-react-provider-511fd237-f87b-4ac9-bd19-c845dc1518c5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update provider to use adapter instead of griffel",
+  "packageName": "@fluentui/react-provider",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-platform-adapter/.eslintrc.json

@@ -1,4 +1,17 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
+  "root": true,
+  "overrides": [
+    {
+      "files": "**/*.ts",
+      "rules": {
+        "@rnx-kit/no-export-all": [
+          "error",
+          {
+            "expand": "all"
+          }
+        ]
+      }
+    }
+  ]
 }

packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md

@@ -6,10 +6,14 @@
 
 import type { GriffelStyle } from '@griffel/react';
 import { makeStyles } from '@griffel/react';
+import { makeStyles as makeStylesCore } from '@griffel/core';
 import { mergeClasses } from '@griffel/react';
 import type { PartialTheme } from '@fluentui/react-theme';
 import * as React_2 from 'react';
 import { shorthands } from '@griffel/react';
+import { TextDirectionProvider } from '@griffel/react';
+import type { Theme } from '@fluentui/react-theme';
+import { useRenderer_unstable } from '@griffel/react';
 
 // @public (undocumented)
 export const getStylesFromClassName: (className: string) => {
@@ -24,19 +28,25 @@ export const makeResetStyles: (resetStyles: GriffelStyle) => () => string;
 
 export { makeStyles }
 
+export { makeStylesCore }
+
 export { mergeClasses }
 
 export { shorthands }
 
 // @public (undocumented)
 export const suppressCssVariableInsertion = false;
 
+export { TextDirectionProvider }
+
+export { useRenderer_unstable }
+
 // @public
 export const XPlatProvider: React_2.FunctionComponent<XPlatProviderProps>;
 
 // @public (undocumented)
 export type XPlatProviderProps = {
-    theme: PartialTheme;
+    theme: Theme | PartialTheme | undefined;
     children: JSX.Element;
 };
 

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

@@ -30,12 +30,14 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@stylexjs/stylex": "^0.5.1"
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.15.0",
     "@fluentui/react-theme": "^9.1.17",
     "@fluentui/react-utilities": "^9.18.3",
+    "@griffel/core": "^1.14.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",
     "react-strict-dom": "0.0.3"

packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts

@@ -1,6 +1,6 @@
-import type { PartialTheme } from '@fluentui/react-theme';
+import type { Theme, PartialTheme } from '@fluentui/react-theme';
 
 export type XPlatProviderProps = {
-  theme: PartialTheme;
+  theme: Theme | PartialTheme | undefined;
   children: JSX.Element;
 };

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

@@ -1,3 +1,12 @@
-export { XPlatProvider, suppressCssVariableInsertion, type XPlatProviderProps } from './XPlatProvider';
-export { jsxPlatformAdapter } from './jsx';
-export { getStylesFromClassName, makeResetStyles, makeStyles, mergeClasses, shorthands } from './styling';
+export { XPlatProvider, suppressCssVariableInsertion } from './XPlatProvider/XPlatProvider';
+export type { XPlatProviderProps } from './XPlatProvider/XPlatProvider.types';
+export { jsxPlatformAdapter } from './jsx/jsxPlatformAdapter';
+export { getStylesFromClassName } from './styling/classNameMap';
+export { makeResetStyles } from './styling/makeResetStyles';
+export { makeStyles } from './styling/makeStyles';
+export { mergeClasses } from './styling/mergeClasses';
+export { shorthands } from './styling/shorthands';
+
+// 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';

packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.native.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
 import { html } from 'react-strict-dom';
-import { getStylesFromClassName } from '../styling/index';
-import { JSXRuntime } from './types';
+import { getStylesFromClassName } from '../styling/classNameMap';
+import type { JSXRuntime } from './types';
 
 /**
  * Create a wrapper for React JSX that creates react-strict-dom elements for intrinsic elements.

packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.tsx

@@ -1,4 +1,4 @@
-import { JSXRuntime } from './types';
+import type { JSXRuntime } from './types';
 
 export const jsxPlatformAdapter = (reactJsx: JSXRuntime) => {
   return reactJsx;

packages/react-components/react-provider/etc/react-provider.api.md

@@ -25,7 +25,7 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha
 export function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string;
 
 // @public (undocumented)
-export const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots, "root">, "dir"> & {
+export const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots>, "dir"> & {
     applyStylesToPortals?: boolean | undefined;
     customStyleHooks_unstable?: Partial<{
         useAccordionHeaderStyles_unstable: (state: unknown) => void;

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

@@ -34,13 +34,12 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.224",
+    "@fluentui/react-platform-adapter": "^0.0.0",
     "@fluentui/react-shared-contexts": "^9.15.0",
     "@fluentui/react-tabster": "^9.19.3",
     "@fluentui/react-theme": "^9.1.17",
     "@fluentui/react-utilities": "^9.18.3",
     "@fluentui/react-jsx-runtime": "^9.0.32",
-    "@griffel/core": "^1.14.1",
-    "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { canUseDOM, assertSlots } from '@fluentui/react-utilities';
-import { TextDirectionProvider } from '@griffel/react';
+import { TextDirectionProvider } from '@fluentui/react-platform-adapter';
 import {
   OverridesProvider_unstable as OverridesProvider,
   Provider_unstable as Provider,
@@ -13,6 +13,7 @@ import {
 } from '@fluentui/react-shared-contexts';
 import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
 import { IconDirectionContextProvider } from '@fluentui/react-icons';
+import { XPlatProvider } from '@fluentui/react-platform-adapter';
 
 /**
  * Render the final JSX of FluentProvider
@@ -31,31 +32,33 @@ export const renderFluentProvider_unstable = (
     <Provider value={contextValues.provider}>
       <ThemeProvider value={contextValues.theme}>
         <ThemeClassNameProvider value={contextValues.themeClassName}>
-          <CustomStyleHooksProvider
-            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}
-          >
-            <TooltipVisibilityProvider value={contextValues.tooltip}>
-              <TextDirectionProvider dir={contextValues.textDirection}>
-                <IconDirectionContextProvider value={contextValues.iconDirection}>
-                  <OverridesProvider value={contextValues.overrides_unstable}>
-                    <state.root>
-                      {canUseDOM() ? null : (
-                        <style
-                          // Using dangerous HTML because react can escape characters
-                          // which can lead to invalid CSS.
-                          // eslint-disable-next-line react/no-danger
-                          dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
-                          {...state.serverStyleProps.attributes}
-                        />
-                      )}
+          <XPlatProvider theme={contextValues.theme}>
+            <CustomStyleHooksProvider
+              value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}
+            >
+              <TooltipVisibilityProvider value={contextValues.tooltip}>
+                <TextDirectionProvider dir={contextValues.textDirection}>
+                  <IconDirectionContextProvider value={contextValues.iconDirection}>
+                    <OverridesProvider value={contextValues.overrides_unstable}>
+                      <state.root>
+                        {canUseDOM() ? null : (
+                          <style
+                            // Using dangerous HTML because react can escape characters
+                            // which can lead to invalid CSS.
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
+                            {...state.serverStyleProps.attributes}
+                          />
+                        )}
 
-                      {state.root.children}
-                    </state.root>
-                  </OverridesProvider>
-                </IconDirectionContextProvider>
-              </TextDirectionProvider>
-            </TooltipVisibilityProvider>
-          </CustomStyleHooksProvider>
+                        {state.root.children}
+                      </state.root>
+                    </OverridesProvider>
+                  </IconDirectionContextProvider>
+                </TextDirectionProvider>
+              </TooltipVisibilityProvider>
+            </CustomStyleHooksProvider>
+          </XPlatProvider>
         </ThemeClassNameProvider>
       </ThemeProvider>
     </Provider>

packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts

@@ -1,4 +1,4 @@
-import { useRenderer_unstable } from '@griffel/react';
+import { useRenderer_unstable } from '@fluentui/react-platform-adapter';
 import { useFocusVisible } from '@fluentui/react-tabster';
 import {
   ThemeContext_unstable as ThemeContext,

packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.styles.ts

@@ -1,5 +1,4 @@
-import { makeStyles, mergeClasses } from '@griffel/core';
-import { useRenderer_unstable } from '@griffel/react';
+import { useRenderer_unstable, makeStylesCore, mergeClasses } from '@fluentui/react-platform-adapter';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
 import { SlotClassNames } from '@fluentui/react-utilities';
@@ -8,7 +7,7 @@ export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {
   root: 'fui-FluentProvider',
 };
 
-const useStyles = makeStyles({
+const useStyles = makeStylesCore({
   root: {
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorNeutralBackground1,