diff --git a/apps/xplat-v9/StrictDomDemo.tsx b/apps/xplat-v9/StrictDomDemo.tsx index fea77d44421bea..701a4cf4203764 100644 --- a/apps/xplat-v9/StrictDomDemo.tsx +++ b/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 ( - - - + + + + + ); }; diff --git a/apps/xplat-v9/babel.config.js b/apps/xplat-v9/babel.config.js index e68f72da3b0333..94bd7267d31665 100644 --- a/apps/xplat-v9/babel.config.js +++ b/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'], }; diff --git a/apps/xplat-v9/index.js b/apps/xplat-v9/index.js index 9a739b41317a7a..9b73932914001a 100644 --- a/apps/xplat-v9/index.js +++ b/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'; diff --git a/apps/xplat-v9/ios/Podfile.lock b/apps/xplat-v9/ios/Podfile.lock index e134932d60a660..3b0c9fb8c2ce36 100644 --- a/apps/xplat-v9/ios/Podfile.lock +++ b/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 diff --git a/apps/xplat-v9/macos/Podfile.lock b/apps/xplat-v9/macos/Podfile.lock index 4747a1ef213829..382919e2966d27 100644 --- a/apps/xplat-v9/macos/Podfile.lock +++ b/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 diff --git a/apps/xplat-v9/package.json b/apps/xplat-v9/package.json index e35578d1391c86..5cf0ec8439b546 100644 --- a/apps/xplat-v9/package.json +++ b/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" }, diff --git a/change/@fluentui-react-provider-511fd237-f87b-4ac9-bd19-c845dc1518c5.json b/change/@fluentui-react-provider-511fd237-f87b-4ac9-bd19-c845dc1518c5.json new file mode 100644 index 00000000000000..4ffea052197d2a --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-platform-adapter/.eslintrc.json b/packages/react-components/react-platform-adapter/.eslintrc.json index ceea884c70dccc..3e768a4e52d20c 100644 --- a/packages/react-components/react-platform-adapter/.eslintrc.json +++ b/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" + } + ] + } + } + ] } diff --git a/packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md b/packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md index 0316e9daed56fd..62a22765e67a94 100644 --- a/packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md +++ b/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,6 +28,8 @@ export const makeResetStyles: (resetStyles: GriffelStyle) => () => string; export { makeStyles } +export { makeStylesCore } + export { mergeClasses } export { shorthands } @@ -31,12 +37,16 @@ export { shorthands } // @public (undocumented) export const suppressCssVariableInsertion = false; +export { TextDirectionProvider } + +export { useRenderer_unstable } + // @public export const XPlatProvider: React_2.FunctionComponent; // @public (undocumented) export type XPlatProviderProps = { - theme: PartialTheme; + theme: Theme | PartialTheme | undefined; children: JSX.Element; }; diff --git a/packages/react-components/react-platform-adapter/package.json b/packages/react-components/react-platform-adapter/package.json index c656958f2765ab..c0e66d2facc43b 100644 --- a/packages/react-components/react-platform-adapter/package.json +++ b/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" diff --git a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts b/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts index f2e4551d2dcb76..283c2b7287a36c 100644 --- a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts +++ b/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; }; diff --git a/packages/react-components/react-platform-adapter/src/XPlatProvider/index.ts b/packages/react-components/react-platform-adapter/src/XPlatProvider/index.ts deleted file mode 100644 index e49ea051e5750b..00000000000000 --- a/packages/react-components/react-platform-adapter/src/XPlatProvider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { XPlatProvider, suppressCssVariableInsertion } from './XPlatProvider'; -export { type XPlatProviderProps } from './XPlatProvider.types'; diff --git a/packages/react-components/react-platform-adapter/src/index.ts b/packages/react-components/react-platform-adapter/src/index.ts index a3d275b92e3df9..22355950f85048 100644 --- a/packages/react-components/react-platform-adapter/src/index.ts +++ b/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'; diff --git a/packages/react-components/react-platform-adapter/src/jsx/index.ts b/packages/react-components/react-platform-adapter/src/jsx/index.ts deleted file mode 100644 index 784f1eb6398488..00000000000000 --- a/packages/react-components/react-platform-adapter/src/jsx/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './jsxPlatformAdapter'; diff --git a/packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.native.tsx b/packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.native.tsx index 9bbe689f9d75ce..ab3b8e69c138a1 100644 --- a/packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.native.tsx +++ b/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. diff --git a/packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.tsx b/packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.tsx index b777ab5e232f78..aba2aa68e64d3b 100644 --- a/packages/react-components/react-platform-adapter/src/jsx/jsxPlatformAdapter.tsx +++ b/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; diff --git a/packages/react-components/react-platform-adapter/src/styling/index.ts b/packages/react-components/react-platform-adapter/src/styling/index.ts deleted file mode 100644 index 71476305f82092..00000000000000 --- a/packages/react-components/react-platform-adapter/src/styling/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './classNameMap'; -export * from './makeResetStyles'; -export * from './makeStyles'; -export * from './mergeClasses'; -export * from './shorthands'; diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md index 801ce9f7169177..819e5e52ad057d 100644 --- a/packages/react-components/react-provider/etc/react-provider.api.md +++ b/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, "dir"> & { +export const FluentProvider: React_2.ForwardRefExoticComponent, "dir"> & { applyStylesToPortals?: boolean | undefined; customStyleHooks_unstable?: Partial<{ useAccordionHeaderStyles_unstable: (state: unknown) => void; diff --git a/packages/react-components/react-provider/package.json b/packages/react-components/react-provider/package.json index 9a33d4b736690e..aa35e83ea0293e 100644 --- a/packages/react-components/react-provider/package.json +++ b/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": { diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx index b5a5a037137850..c16b6661603e85 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx +++ b/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 = ( - } - > - - - - - - {canUseDOM() ? null : ( -