npm - @fluentui/react-provider - Versions diffs - 9.2.3 → 9.3.0 - Mend

@fluentui/react-provider 9.2.3 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,48 @@
   "name": "@fluentui/react-provider",
   "entries": [
     {
-      "date": "Wed, 18 Jan 2023 16:30:58 GMT",
+      "date": "Thu, 26 Jan 2023 13:27:48 GMT",
+      "tag": "@fluentui/react-provider_v9.3.0",
+      "version": "9.3.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-provider",
+            "commit": "4f3871db826e542114d853b57fb2f740787f91e8",
+            "comment": "fix: Update FluentProvider's class name to use backslash when a colon is present."
+          }
+        ],
+        "minor": [
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-provider",
+            "commit": "6f29c8f65b2db6125efbd2a7ec2d7abdd0f44601",
+            "comment": "feat: add support for overrides (unstable)"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.2.0",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-tabster to v9.4.1",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-utilities to v9.5.0",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 18 Jan 2023 16:32:57 GMT",
       "tag": "@fluentui/react-provider_v9.2.3",
       "version": "9.2.3",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-provider
-This log was last generated on Wed, 18 Jan 2023 16:30:58 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Jan 2023 13:27:48 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.3.0)
+Thu, 26 Jan 2023 13:27:48 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.2.3..@fluentui/react-provider_v9.3.0)
+### Minor changes
+- feat: add support for overrides (unstable) ([PR #25262](https://github.com/microsoft/fluentui/pull/25262) by miroslav.stastny@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.2.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-tabster to v9.4.1 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-utilities to v9.5.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+### Patches
+- fix: Update FluentProvider's class name to use backslash when a colon is present. ([PR #26465](https://github.com/microsoft/fluentui/pull/26465) by esteban.230@hotmail.com)
 ## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.2.3)
-Wed, 18 Jan 2023 16:30:58 GMT
+Wed, 18 Jan 2023 16:32:57 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.2.2..@fluentui/react-provider_v9.2.3)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
@@ -15,11 +16,12 @@ export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<Comp
     dir?: "ltr" | "rtl" | undefined;
     targetDocument?: Document | undefined;
     theme?: Partial<Theme> | undefined;
+    overrides_unstable?: OverridesContextValue_unstable | undefined;
 } & React_2.RefAttributes<HTMLElement>>;
 export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
-export declare type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {
+export declare type FluentProviderContextValues = Pick<FluentProviderState, 'theme' | 'overrides_unstable'> & {
     provider: ProviderContextValue_unstable;
     themeClassName: ThemeClassNameContextValue_unstable;
     textDirection: 'ltr' | 'rtl';
@@ -38,13 +40,14 @@ export declare type FluentProviderProps = Omit<ComponentProps<FluentProviderSlot
     targetDocument?: Document;
     /** Sets the theme used in a scope. */
     theme?: PartialTheme;
+    overrides_unstable?: OverridesContextValue_unstable;
 };
 export declare type FluentProviderSlots = {
     root: Slot<'div'>;
 };
-export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir'>> & {
+export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir' | 'overrides_unstable'>> & {
     theme: ThemeContextValue_unstable;
     themeClassName: string;
 };

package/lib/components/FluentProvider/FluentProvider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /*\n Passes styles applied to a component down to portals if enabled.\n * @default true\n /\n applyStylesToPortals?: boolean;\n\n /* Sets the direction of text & generated styles. /\n dir?: 'ltr' \| 'rtl';\n\n /* Provides the document, can be undefined during SSR render. /\n targetDocument?: Document;\n\n /* Sets the theme used in a scope. */\n theme?: PartialTheme;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<Pick<FluentProviderProps, 'applyStylesToPortals' \| 'dir'>> & {\n theme: ThemeContextValue;\n themeClassName: string;\n };\n\nexport type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' \| 'rtl';\n tooltip: TooltipVisibilityContextValue;\n};\n"]}
1	+ {"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n OverridesContextValue_unstable as OverridesContextValue,\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /*\n Passes styles applied to a component down to portals if enabled.\n * @default true\n /\n applyStylesToPortals?: boolean;\n\n /* Sets the direction of text & generated styles. /\n dir?: 'ltr' \| 'rtl';\n\n /* Provides the document, can be undefined during SSR render. /\n targetDocument?: Document;\n\n /* Sets the theme used in a scope. */\n theme?: PartialTheme;\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<Pick<FluentProviderProps, 'applyStylesToPortals' \| 'dir' \| 'overrides_unstable'>> & {\n theme: ThemeContextValue;\n themeClassName: string;\n };\n\nexport type FluentProviderContextValues = Pick<FluentProviderState, 'theme' \| 'overrides_unstable'> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' \| 'rtl';\n tooltip: TooltipVisibilityContextValue;\n};\n"]}

package/lib/components/FluentProvider/renderFluentProvider.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextDirectionProvider } from '@griffel/react';
-import { Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider } from '@fluentui/react-shared-contexts';
+import { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider } from '@fluentui/react-shared-contexts';
 import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of FluentProvider
@@ -20,8 +20,10 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
     value: contextValues.tooltip
   }, /*#__PURE__*/React.createElement(TextDirectionProvider, {
     dir: contextValues.textDirection
+  }, /*#__PURE__*/React.createElement(OverridesProvider, {
+    value: contextValues.overrides_unstable
   }, /*#__PURE__*/React.createElement(slots.root, {
     ...slotProps.root
-  }, state.root.children))))));
+  }, state.root.children)))))));
 };
 //# sourceMappingURL=renderFluentProvider.js.map

package/lib/components/FluentProvider/renderFluentProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SACEC,iBAAiB,IAAIC,QAAQ,EAC7BC,kCAAkC,IAAIC,yBAAyB,EAC/DC,sBAAsB,IAAIC,aAAa,EACvCC,+BAA+B,IAAIC,sBAAsB,QACpD,iCAAiC;AACxC,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAsBE,KAAK,CAAC;EAEjE,~~oBACEZ~~,~~oBAACG~~,QAAQ;IAACa,KAAK,EAAEH,aAAa,CAACI;EAAQ,~~gBACrCjB~~,~~oBAACO~~,aAAa;IAACS,KAAK,EAAEH,aAAa,CAACK;EAAK,~~gBACvClB~~,~~oBAACS~~,sBAAsB;IAACO,KAAK,EAAEH,aAAa,CAACM;EAAc,~~gBACzDnB~~,~~oBAACK~~,yBAAyB;IAACW,KAAK,EAAEH,aAAa,CAACO;EAAO,~~gBACrDpB~~,oBAACC,qBAAqB;~~IAACoB~~,GAAG,EAAER,aAAa,CAACS;EAAa,~~gBACrDtB~~,~~oBAACc~~,KAAK,~~CAACS~~,IAAI;IAAA,~~GAAKR~~,SAAS,~~CAACQ~~;EAAI,~~GAAGX~~,KAAK,~~CAACW~~,IAAI,CAACC,QAAQ,CAAc,~~CAC5C~~,CACE,CACL,CACX,CACP;AAEf,CAAC","names":["React","TextDirectionProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","getSlots","renderFluentProvider_unstable","state","contextValues","slots","slotProps","value","provider","theme","themeClassName","tooltip","dir","textDirection","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/*\n Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SACEC,0BAA0B,IAAIC,iBAAiB,EAC/CC,iBAAiB,IAAIC,QAAQ,EAC7BC,kCAAkC,IAAIC,yBAAyB,EAC/DC,sBAAsB,IAAIC,aAAa,EACvCC,+BAA+B,IAAIC,sBAAsB,QACpD,iCAAiC;AACxC,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAsBE,KAAK,CAAC;EAEjE,oBACEd,oBAACK,QAAQ;IAACa,KAAK,EAAEH,aAAa,CAACI;EAAQ,gBACrCnB,oBAACS,aAAa;IAACS,KAAK,EAAEH,aAAa,CAACK;EAAK,gBACvCpB,oBAACW,sBAAsB;IAACO,KAAK,EAAEH,aAAa,CAACM;EAAc,gBACzDrB,oBAACO,yBAAyB;IAACW,KAAK,EAAEH,aAAa,CAACO;EAAO,gBACrDtB,oBAACC,qBAAqB;IAACsB,GAAG,EAAER,aAAa,CAACS;EAAa,gBACrDxB,oBAACG,iBAAiB;IAACe,KAAK,EAAEH,aAAa,CAACU;EAAkB,gBACxDzB,oBAACgB,KAAK,CAACU,IAAI;IAAA,GAAKT,SAAS,CAACS;EAAI,GAAGZ,KAAK,CAACY,IAAI,CAACC,QAAQ,CAAc,CAChD,CACE,CACE,CACL,CACX,CACP;AAEf,CAAC","names":["React","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","getSlots","renderFluentProvider_unstable","state","contextValues","slots","slotProps","value","provider","theme","themeClassName","tooltip","dir","textDirection","overrides_unstable","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/*\n Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </OverridesProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}

package/lib/components/FluentProvider/useFluentProvider.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useFocusVisible } from '@fluentui/react-tabster';
-import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
@@ -15,6 +15,7 @@ import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag
 export const useFluentProvider_unstable = (props, ref) => {
   const parentContext = useFluent();
   const parentTheme = useTheme();
+  const parentOverrides = useOverrides();
   /**
    * TODO: add merge functions to "dir" merge,
    * nesting providers with the same "dir" should not add additional attributes to DOM
@@ -24,9 +25,11 @@ export const useFluentProvider_unstable = (props, ref) => {
     applyStylesToPortals = true,
     dir = parentContext.dir,
     targetDocument = parentContext.targetDocument,
-    theme
+    theme,
+    overrides_unstable: overrides = {}
   } = props;
-  const mergedTheme = mergeThemes(parentTheme, theme);
+  const mergedTheme = shallowMerge(parentTheme, theme);
+  const mergedOverrides = shallowMerge(parentOverrides, overrides);
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
       // eslint-disable-next-line no-console
@@ -43,6 +46,8 @@ export const useFluentProvider_unstable = (props, ref) => {
     dir,
     targetDocument,
     theme: mergedTheme,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    overrides_unstable: mergedOverrides,
     themeClassName: useFluentProviderThemeStyleTag({
       theme: mergedTheme,
       targetDocument
@@ -57,7 +62,7 @@ export const useFluentProvider_unstable = (props, ref) => {
     })
   };
 };
-function mergeThemes(a, b) {
+function shallowMerge(a, b) {
   // Merge impacts perf: we should like to avoid it if it's possible
   if (a && b) {
     return {

package/lib/components/FluentProvider/useFluentProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,SACEC,qBAAqB,IAAIC,YAAY,EACrCC,kBAAkB,IAAIC,SAAS,~~QAC1B~~,iCAAiC;AAExC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,kCAAkC;AAGjF;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,~~GAAGR~~,SAAS,EAAE;EACjC,~~MAAMS~~,WAAW,GAAGC,QAAQ,EAAE;~~EAE9B~~;;;;;EAKA,MAAM;~~IACJC~~,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,~~GAAGJ~~,aAAa,~~CAACI~~,GAAG;IACvBC,cAAc,~~GAAGL~~,aAAa,~~CAACK~~,cAAc;IAC7CC;~~EAAK~~,~~CACN~~,~~GAAGR~~,KAAK;EACT,~~MAAMS~~,WAAW,GAAGC,~~WAAW~~,~~CAACP~~,WAAW,~~EAAEK~~,KAAK,CAAC;~~EAEnDX~~,KAAK,~~CAACc~~,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,~~IAAIL~~,WAAW,~~KAAKM~~,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;~~IACLZ~~,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,~~EAAEC~~,WAAW;~~IAClBS~~,cAAc,~~EAAEpB~~,8BAA8B,CAAC;~~MAAEU~~,KAAK,~~EAAEC~~,WAAW;~~MAAEF~~;IAAc,CAAE,CAAC;~~IAEtFY~~,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,~~EAAEzB~~,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGK,KAAK;~~MACRM~~,GAAG;~~MACHL~~,GAAG,EAAEL,aAAa,CAACK,GAAG,~~EAAEX~~,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAED,~~SAASoB~~,~~WAAW~~,~~CAACW~~,~~CAAoB~~,EAAEC,~~CAAoB~~;~~EAC7D~~;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,~~SAASlB~~,QAAQ;EACf,OAAOP,KAAK,~~CAAC0B~~,UAAU,~~CAAC/B~~,YAAY,CAAC;AACvC","names":["useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","applyStylesToPortals","dir","targetDocument","theme","mergedTheme","~~mergeThemes~~","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","components","root","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/*\n Create the state required to render FluentProvider.\n \n The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n \n @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n /\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /\n TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = props;\n const mergedTheme = ~~mergeThemes~~(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction ~~mergeThemes~~(a: ~~ThemeContextValue~~, b: ~~ThemeContextValue~~): ~~ThemeContextValue~~ {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}
1	+ {"version":3,"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,SACEC,qBAAqB,IAAIC,YAAY,EACrCC,kBAAkB,IAAIC,SAAS,EAC/BC,qBAAqB,IAAIC,YAAY,QAChC,iCAAiC;AAExC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,kCAAkC;AAGjF;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGV,SAAS,EAAE;EACjC,MAAMW,WAAW,GAAGC,QAAQ,EAAE;EAC9B,MAAMC,eAAe,GAAGX,YAAY,EAAE;EAEtC;;;;;EAKA,MAAM;IACJY,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,GAAGL,aAAa,CAACK,GAAG;IACvBC,cAAc,GAAGN,aAAa,CAACM,cAAc;IAC7CC,KAAK;IACLC,kBAAkB,EAAEC,SAAS,GAAG;EAAE,CACnC,GAAGX,KAAK;EACT,MAAMY,WAAW,GAAGC,YAAY,CAACV,WAAW,EAAEM,KAAK,CAAC;EAEpD,MAAMK,eAAe,GAAGD,YAAY,CAACR,eAAe,EAAEM,SAAS,CAAC;EAEhEd,KAAK,CAACkB,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIN,WAAW,KAAKO,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLf,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEG,WAAW;IAClB;IACAF,kBAAkB,EAAEI,eAAe;IACnCQ,cAAc,EAAExB,8BAA8B,CAAC;MAAEW,KAAK,EAAEG,WAAW;MAAEJ;IAAc,CAAE,CAAC;IAEtFe,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAE7B,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGK,KAAK;MACRO,GAAG;MACHN,GAAG,EAAEL,aAAa,CAACK,GAAG,EAAEb,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAED,SAASyB,YAAY,CAAIY,CAAI,EAAEC,CAAI;EACjC;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAAStB,QAAQ;EACf,OAAOP,KAAK,CAAC8B,UAAU,CAACrC,YAAY,CAAC;AACvC","names":["useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","applyStylesToPortals","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","components","root","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/*\n Create the state required to render FluentProvider.\n \n The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n \n @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n /\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n\n /\n TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n overrides_unstable: overrides = {},\n } = props;\n const mergedTheme = shallowMerge(parentTheme, theme);\n\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable: mergedOverrides,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}

package/lib/components/FluentProvider/useFluentProviderContextValues.js CHANGED Viewed

@@ -1,12 +1,14 @@
 import * as React from 'react';
 export function useFluentProviderContextValues_unstable(state) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const {
     applyStylesToPortals,
     dir,
     root,
     targetDocument,
     theme,
-    themeClassName
+    themeClassName,
+    overrides_unstable
   } = state;
   const provider = React.useMemo(() => ({
     dir,
@@ -15,6 +17,8 @@ export function useFluentProviderContextValues_unstable(state) {
   // "Tooltip" component mutates an object in this context, instance should be stable
   const [tooltip] = React.useState(() => ({}));
   return {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    overrides_unstable,
     provider,
     textDirection: dir,
     tooltip,

package/lib/components/FluentProvider/useFluentProviderContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,uCAAuC,CAACC,KAA0B;EAChF,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC;~~EAAc~~,CAAE,~~GAAGN~~,KAAK;~~EAExF~~,~~MAAMO~~,QAAQ,~~GAAGT~~,KAAK,~~CAACU~~,OAAO,CAAC,OAAO;~~IAAEN~~,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,~~CAACK~~,OAAO,CAAC,~~GAAGX~~,KAAK,~~CAACY~~,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;~~IACLH~~,QAAQ;IACRI,aAAa,~~EAAET~~,GAAG;~~IAClBO~~,OAAO;~~IACPJ~~,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,~~CAACS~~,SAAU,~~GAAGN~~;GAC1D;AACH","names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","provider","useMemo","tooltip","useState","textDirection","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,uCAAuC,CAACC,KAA0B;EAChF;EACA,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC,cAAc;IAAEC;EAAkB,CAAE,GAAGP,KAAK;EAE5G,MAAMQ,QAAQ,GAAGV,KAAK,CAACW,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGZ,KAAK,CAACa,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACL;IACAJ,kBAAkB;IAClBC,QAAQ;IACRI,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH","names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","textDirection","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName, overrides_unstable } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}

package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js CHANGED Viewed

@@ -47,7 +47,8 @@ export const useFluentProviderThemeStyleTag = options => {
       return cssVarRule;
     }, '') : '';
   }, [theme]);
-  const rule = `.${styleTagId} { ${cssVarsAsString} }`;
+  // When using React 18, the id generated will contain : which is not valid unless we add an escape character
+  const rule = `.${styleTagId.replace(/:/g, '\\:')} { ${cssVarsAsString} }`;
   useInsertionEffect(() => {
     styleTag.current = createStyleTag(targetDocument, {
       ...styleElementAttributes,

package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,2BAA2B;AAC5E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAG9B,SAASC,wBAAwB,QAAQ,2BAA2B;AAEpE;AACA,MAAMC,kBAAkB,GAAIF,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CF,yBAAyB;AAE7B,MAAMK,cAAc,GAAG,CAACC,MAA4B,EAAEC,iBAAyC,KAAI;EACjG,IAAI,CAACD,MAAM,EAAE;IACX,OAAOE,SAAS;;EAGlB,MAAMC,GAAG,GAAGH,MAAM,CAACI,aAAa,CAAC,OAAO,CAAC;EAEzCC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,OAAO,CAACC,QAAQ,IAAG;IAChDL,GAAG,CAACM,YAAY,CAACD,QAAQ,EAAEP,iBAAiB,CAACO,QAAQ,CAAC,CAAC;EACzD,CAAC,CAAC;EAEFR,MAAM,CAACU,IAAI,CAACC,WAAW,CAACR,GAAG,CAAC;EAC5B,OAAOA,GAAG;AACZ,CAAC;AAED,MAAMS,WAAW,GAAG,CAACT,GAAqB,EAAEU,IAAY,KAAI;EAC1D,MAAMC,KAAK,GAAGX,GAAG,CAACW,KAAK;EAEvB,IAAIA,KAAK,EAAE;IACT,IAAIA,KAAK,CAACC,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MAC7BF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;;IAErBH,KAAK,CAACI,UAAU,CAACL,IAAI,EAAE,CAAC,CAAC;GAC1B,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IAChD;IACAC,OAAO,CAACC,KAAK,CAAC,uFAAuF,CAAC;;AAE1G,CAAC;AAED;;;;;AAKA,OAAO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGjC,oBAAoB,EAAE;EACvC,MAAMkC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGtC,KAAK,CAACI,wBAAwB,CAACmC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGL,QAAQ,CAACK,sBAAsB;EAE9D,MAAMC,eAAe,GAAGtC,KAAK,CAACuC,OAAO,CAAC,MAAK;IACzC,OAAOR,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACS,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKX,KAAK,CAACW,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;EAEX,MAAMd,IAAI,GAAG,IAAIkB,UAAU,~~MAAMG~~,eAAe,IAAI;~~EAEpDpC~~,kBAAkB,CAAC,MAAK;IACtB+B,QAAQ,~~CAACU~~,OAAO,~~GAAGxC~~,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGO,sBAAsB;~~MAAEO~~,EAAE,~~EAAET~~;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,~~CAACU~~,OAAO,EAAE;~~MACpB3B~~,WAAW,CAACiB,QAAQ,~~CAACU~~,OAAO,~~EAAE1B~~,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,~~CAAC0B~~,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,~~CAACV~~,UAAU,EAAEL,cAAc,EAAEb,IAAI,EAAEoB,sBAAsB,CAAC,CAAC;EAE9D,OAAOF,UAAU;AACnB,CAAC","names":["useId","useIsomorphicLayoutEffect","useRenderer_unstable","React","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","remove"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document \| undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/*\n Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n \n @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' \| 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
1	+ {"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,2BAA2B;AAC5E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAG9B,SAASC,wBAAwB,QAAQ,2BAA2B;AAEpE;AACA,MAAMC,kBAAkB,GAAIF,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CF,yBAAyB;AAE7B,MAAMK,cAAc,GAAG,CAACC,MAA4B,EAAEC,iBAAyC,KAAI;EACjG,IAAI,CAACD,MAAM,EAAE;IACX,OAAOE,SAAS;;EAGlB,MAAMC,GAAG,GAAGH,MAAM,CAACI,aAAa,CAAC,OAAO,CAAC;EAEzCC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,OAAO,CAACC,QAAQ,IAAG;IAChDL,GAAG,CAACM,YAAY,CAACD,QAAQ,EAAEP,iBAAiB,CAACO,QAAQ,CAAC,CAAC;EACzD,CAAC,CAAC;EAEFR,MAAM,CAACU,IAAI,CAACC,WAAW,CAACR,GAAG,CAAC;EAC5B,OAAOA,GAAG;AACZ,CAAC;AAED,MAAMS,WAAW,GAAG,CAACT,GAAqB,EAAEU,IAAY,KAAI;EAC1D,MAAMC,KAAK,GAAGX,GAAG,CAACW,KAAK;EAEvB,IAAIA,KAAK,EAAE;IACT,IAAIA,KAAK,CAACC,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MAC7BF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;;IAErBH,KAAK,CAACI,UAAU,CAACL,IAAI,EAAE,CAAC,CAAC;GAC1B,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IAChD;IACAC,OAAO,CAACC,KAAK,CAAC,uFAAuF,CAAC;;AAE1G,CAAC;AAED;;;;;AAKA,OAAO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGjC,oBAAoB,EAAE;EACvC,MAAMkC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGtC,KAAK,CAACI,wBAAwB,CAACmC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGL,QAAQ,CAACK,sBAAsB;EAE9D,MAAMC,eAAe,GAAGtC,KAAK,CAACuC,OAAO,CAAC,MAAK;IACzC,OAAOR,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACS,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKX,KAAK,CAACW,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;EAEX;EACA,MAAMd,IAAI,GAAG,IAAIkB,UAAU,CAACQ,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAML,eAAe,IAAI;EAEzEpC,kBAAkB,CAAC,MAAK;IACtB+B,QAAQ,CAACW,OAAO,GAAGzC,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGO,sBAAsB;MAAEQ,EAAE,EAAEV;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,CAACW,OAAO,EAAE;MACpB5B,WAAW,CAACiB,QAAQ,CAACW,OAAO,EAAE3B,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,CAAC2B,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACX,UAAU,EAAEL,cAAc,EAAEb,IAAI,EAAEoB,sBAAsB,CAAC,CAAC;EAE9D,OAAOF,UAAU;AACnB,CAAC","names":["useId","useIsomorphicLayoutEffect","useRenderer_unstable","React","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","replace","current","id","remove"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document \| undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/*\n Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n \n @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' \| 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n // When using React 18, the id generated will contain : which is not valid unless we add an escape character\n const rule = `.${styleTagId.replace(/:/g, '\\\\:')} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}

package/lib-amd/components/FluentProvider/FluentProvider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentProvider.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /*\n Passes styles applied to a component down to portals if enabled.\n * @default true\n /\n applyStylesToPortals?: boolean;\n\n /* Sets the direction of text & generated styles. /\n dir?: 'ltr' \| 'rtl';\n\n /* Provides the document, can be undefined during SSR render. /\n targetDocument?: Document;\n\n /* Sets the theme used in a scope. */\n theme?: PartialTheme;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<Pick<FluentProviderProps, 'applyStylesToPortals' \| 'dir'>> & {\n theme: ThemeContextValue;\n themeClassName: string;\n };\n\nexport type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' \| 'rtl';\n tooltip: TooltipVisibilityContextValue;\n};\n"]}
1	+ {"version":3,"file":"FluentProvider.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n OverridesContextValue_unstable as OverridesContextValue,\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /*\n Passes styles applied to a component down to portals if enabled.\n * @default true\n /\n applyStylesToPortals?: boolean;\n\n /* Sets the direction of text & generated styles. /\n dir?: 'ltr' \| 'rtl';\n\n /* Provides the document, can be undefined during SSR render. /\n targetDocument?: Document;\n\n /* Sets the theme used in a scope. */\n theme?: PartialTheme;\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<Pick<FluentProviderProps, 'applyStylesToPortals' \| 'dir' \| 'overrides_unstable'>> & {\n theme: ThemeContextValue;\n themeClassName: string;\n };\n\nexport type FluentProviderContextValues = Pick<FluentProviderState, 'theme' \| 'overrides_unstable'> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' \| 'rtl';\n tooltip: TooltipVisibilityContextValue;\n};\n"]}

package/lib-amd/components/FluentProvider/renderFluentProvider.js CHANGED Viewed

@@ -12,7 +12,8 @@ define(["require", "exports", "tslib", "react", "@griffel/react", "@fluentui/rea
                 React.createElement(react_shared_contexts_1.ThemeClassNameProvider_unstable, { value: contextValues.themeClassName },
                     React.createElement(react_shared_contexts_1.TooltipVisibilityProvider_unstable, { value: contextValues.tooltip },
                         React.createElement(react_1.TextDirectionProvider, { dir: contextValues.textDirection },
-                            React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children)))))));
+                            React.createElement(react_shared_contexts_1.OverridesProvider_unstable, { value: contextValues.overrides_unstable },
+                                React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children))))))));
     };
     exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
 });

package/lib-amd/components/FluentProvider/renderFluentProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"renderFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;~~IAWA~~;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAC3C,KAA0B,EAC1B,aAA0C;QAEpC,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,OAAO,CACL,oBAAC,yCAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ;YACrC,oBAAC,8CAAa,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK;gBACvC,oBAAC,uDAAsB,IAAC,KAAK,EAAE,aAAa,CAAC,cAAc;oBACzD,oBAAC,0DAAyB,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO;wBACrD,oBAAC,6BAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,aAAa;4BACrD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAc,~~CAC5C~~,CACE,CACL,CACX,CACP,CACZ,CAAC;IACJ,CAAC,CAAC;~~IAnBW~~,QAAA,6BAA6B,~~iCAmBxC~~","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/*\n Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
1	+ {"version":3,"file":"renderFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;IAYA;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAC3C,KAA0B,EAC1B,aAA0C;QAEpC,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,OAAO,CACL,oBAAC,yCAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ;YACrC,oBAAC,8CAAa,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK;gBACvC,oBAAC,uDAAsB,IAAC,KAAK,EAAE,aAAa,CAAC,cAAc;oBACzD,oBAAC,0DAAyB,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO;wBACrD,oBAAC,6BAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,aAAa;4BACrD,oBAAC,kDAAiB,IAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB;gCACxD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAc,CAChD,CACE,CACE,CACL,CACX,CACP,CACZ,CAAC;IACJ,CAAC,CAAC;IArBW,QAAA,6BAA6B,iCAqBxC","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/*\n Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </OverridesProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}

package/lib-amd/components/FluentProvider/useFluentProvider.js CHANGED Viewed

@@ -14,13 +14,15 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
     var useFluentProvider_unstable = function (props, ref) {
         var parentContext = react_shared_contexts_1.useFluent_unstable();
         var parentTheme = useTheme();
+        var parentOverrides = react_shared_contexts_1.useOverrides_unstable();
         /**
          * TODO: add merge functions to "dir" merge,
          * nesting providers with the same "dir" should not add additional attributes to DOM
          * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
          */
-        var _a = props.applyStylesToPortals, applyStylesToPortals = _a === void 0 ? true : _a, _b = props.dir, dir = _b === void 0 ? parentContext.dir : _b, _c = props.targetDocument, targetDocument = _c === void 0 ? parentContext.targetDocument : _c, theme = props.theme;
-        var mergedTheme = mergeThemes(parentTheme, theme);
+        var _a = props.applyStylesToPortals, applyStylesToPortals = _a === void 0 ? true : _a, _b = props.dir, dir = _b === void 0 ? parentContext.dir : _b, _c = props.targetDocument, targetDocument = _c === void 0 ? parentContext.targetDocument : _c, theme = props.theme, _d = props.overrides_unstable, overrides = _d === void 0 ? {} : _d;
+        var mergedTheme = shallowMerge(parentTheme, theme);
+        var mergedOverrides = shallowMerge(parentOverrides, overrides);
         React.useEffect(function () {
             if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
                 // eslint-disable-next-line no-console
@@ -33,6 +35,8 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
             dir: dir,
             targetDocument: targetDocument,
             theme: mergedTheme,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            overrides_unstable: mergedOverrides,
             themeClassName: useFluentProviderThemeStyleTag_1.useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument: targetDocument }),
             components: {
                 root: 'div',
@@ -41,7 +45,7 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
         };
     };
     exports.useFluentProvider_unstable = useFluentProvider_unstable;
-    function mergeThemes(a, b) {
+    function shallowMerge(a, b) {
         // Merge impacts perf: we should like to avoid it if it's possible
         if (a && b) {
             return tslib_1.__assign(tslib_1.__assign({}, a), b);

package/lib-amd/components/FluentProvider/useFluentProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;~~IAWA~~;;;;;;;;OAQG;IACI,IAAM,0BAA0B,GAAG,UACxC,KAA0B,EAC1B,GAA2B;QAE3B,IAAM,aAAa,GAAG,0CAAS,EAAE,CAAC;QAClC,IAAM,WAAW,GAAG,QAAQ,EAAE,CAAC;~~QAE~~/B;;;;WAIG;QAED,IAAA,~~KAIE~~,KAAK,~~qBAJoB~~,EAA3B,oBAAoB,mBAAG,IAAI,KAAA,EAC3B,~~KAGE~~,KAAK,~~IAHgB~~,EAAvB,GAAG,mBAAG,aAAa,CAAC,GAAG,KAAA,EACvB,~~KAEE~~,KAAK,~~eAFsC~~,EAA7C,cAAc,mBAAG,aAAa,CAAC,cAAc,KAAA,EAC7C,KAAK,~~GACH~~,KAAK,~~MADF~~,~~CACG~~;QACV,IAAM,WAAW,GAAG,~~WAAW~~,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;~~QAEpD~~,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,WAAW,KAAK,SAAS,EAAE;gBACtE,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,0OAIZ,CAAC,CAAC;aACJ;YACD,uDAAuD;QACzD,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO;YACL,oBAAoB,sBAAA;YACpB,GAAG,KAAA;YACH,cAAc,gBAAA;YACd,KAAK,EAAE,WAAW;YAClB,cAAc,EAAE,+DAA8B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,gBAAA,EAAE,CAAC;YAEtF,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,wCAC5B,KAAK,KACR,GAAG,KAAA,EACH,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,+BAAe,EAAkB,CAAC,IAC1D;SACH,CAAC;IACJ,CAAC,CAAC;~~IAjDW~~,QAAA,0BAA0B,~~8BAiDrC~~;IAEF,SAAS,~~WAAW~~,~~CAAC~~,~~CAAoB~~,EAAE,~~CAAoB~~;~~QAC7D~~,kEAAkE;QAClE,IAAI,CAAC,IAAI,CAAC,EAAE;YACV,6CAAY,CAAC,GAAK,CAAC,EAAG;SACvB;QAED,IAAI,CAAC,EAAE;YACL,OAAO,CAAC,CAAC;SACV;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAED,SAAS,QAAQ;QACf,OAAO,KAAK,CAAC,UAAU,CAAC,6CAAY,CAAC,CAAC;IACxC,CAAC","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/*\n Create the state required to render FluentProvider.\n \n The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n \n @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n /\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /\n TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = props;\n const mergedTheme = ~~mergeThemes~~(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction ~~mergeThemes~~(a: ~~ThemeContextValue~~, b: ~~ThemeContextValue~~): ~~ThemeContextValue~~ {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}
1	+ {"version":3,"file":"useFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;IAYA;;;;;;;;OAQG;IACI,IAAM,0BAA0B,GAAG,UACxC,KAA0B,EAC1B,GAA2B;QAE3B,IAAM,aAAa,GAAG,0CAAS,EAAE,CAAC;QAClC,IAAM,WAAW,GAAG,QAAQ,EAAE,CAAC;QAC/B,IAAM,eAAe,GAAG,6CAAY,EAAE,CAAC;QAEvC;;;;WAIG;QAED,IAAA,KAKE,KAAK,qBALoB,EAA3B,oBAAoB,mBAAG,IAAI,KAAA,EAC3B,KAIE,KAAK,IAJgB,EAAvB,GAAG,mBAAG,aAAa,CAAC,GAAG,KAAA,EACvB,KAGE,KAAK,eAHsC,EAA7C,cAAc,mBAAG,aAAa,CAAC,cAAc,KAAA,EAC7C,KAAK,GAEH,KAAK,MAFF,EACL,KACE,KAAK,mBAD2B,EAAd,SAAS,mBAAG,EAAE,KAAA,CAC1B;QACV,IAAM,WAAW,GAAG,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAErD,IAAM,eAAe,GAAG,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;QAEjE,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,WAAW,KAAK,SAAS,EAAE;gBACtE,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,0OAIZ,CAAC,CAAC;aACJ;YACD,uDAAuD;QACzD,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO;YACL,oBAAoB,sBAAA;YACpB,GAAG,KAAA;YACH,cAAc,gBAAA;YACd,KAAK,EAAE,WAAW;YAClB,gEAAgE;YAChE,kBAAkB,EAAE,eAAe;YACnC,cAAc,EAAE,+DAA8B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,gBAAA,EAAE,CAAC;YAEtF,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,wCAC5B,KAAK,KACR,GAAG,KAAA,EACH,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,+BAAe,EAAkB,CAAC,IAC1D;SACH,CAAC;IACJ,CAAC,CAAC;IAvDW,QAAA,0BAA0B,8BAuDrC;IAEF,SAAS,YAAY,CAAI,CAAI,EAAE,CAAI;QACjC,kEAAkE;QAClE,IAAI,CAAC,IAAI,CAAC,EAAE;YACV,6CAAY,CAAC,GAAK,CAAC,EAAG;SACvB;QAED,IAAI,CAAC,EAAE;YACL,OAAO,CAAC,CAAC;SACV;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAED,SAAS,QAAQ;QACf,OAAO,KAAK,CAAC,UAAU,CAAC,6CAAY,CAAC,CAAC;IACxC,CAAC","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/*\n Create the state required to render FluentProvider.\n \n The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n \n @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n /\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n\n /\n TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n overrides_unstable: overrides = {},\n } = props;\n const mergedTheme = shallowMerge(parentTheme, theme);\n\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable: mergedOverrides,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}

package/lib-amd/components/FluentProvider/useFluentProviderContextValues.js CHANGED Viewed

@@ -3,11 +3,14 @@ define(["require", "exports", "react"], function (require, exports, React) {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useFluentProviderContextValues_unstable = void 0;
     function useFluentProviderContextValues_unstable(state) {
-        var applyStylesToPortals = state.applyStylesToPortals, dir = state.dir, root = state.root, targetDocument = state.targetDocument, theme = state.theme, themeClassName = state.themeClassName;
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        var applyStylesToPortals = state.applyStylesToPortals, dir = state.dir, root = state.root, targetDocument = state.targetDocument, theme = state.theme, themeClassName = state.themeClassName, overrides_unstable = state.overrides_unstable;
         var provider = React.useMemo(function () { return ({ dir: dir, targetDocument: targetDocument }); }, [dir, targetDocument]);
         // "Tooltip" component mutates an object in this context, instance should be stable
         var tooltip = React.useState(function () { return ({}); })[0];
         return {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            overrides_unstable: overrides_unstable,
             provider: provider,
             textDirection: dir,
             tooltip: tooltip,

package/lib-amd/components/FluentProvider/useFluentProviderContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFluentProviderContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,uCAAuC,CAAC,KAA0B;~~QACxE~~,IAAA,oBAAoB,~~GAAuD~~,KAAK,~~qBAA5D~~,EAAE,GAAG,~~GAAkD~~,KAAK,~~IAAvD~~,EAAE,IAAI,~~GAA4C~~,KAAK,~~KAAjD~~,EAAE,cAAc,~~GAA4B~~,KAAK,~~eAAjC~~,EAAE,KAAK,~~GAAqB~~,KAAK,~~MAA1B~~,EAAE,cAAc,GAAK,KAAK,~~eAAV~~,CAAW;~~QAEzF~~,IAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,CAAC,EAAE,GAAG,KAAA,EAAE,cAAc,gBAAA,EAAE,CAAC,EAAzB,CAAyB,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;QACvF,mFAAmF;QAC5E,IAAA,OAAO,GAAI,KAAK,CAAC,QAAQ,CAAC,cAAM,OAAA,CAAC,EAAE,CAAC,EAAJ,CAAI,CAAC,GAA9B,CAA+B;QAE7C,OAAO;YACL,QAAQ,UAAA;YACR,aAAa,EAAE,GAAG;YAClB,OAAO,SAAA;YACP,KAAK,OAAA;YACL,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,cAAc;SACxE,CAAC;IACJ,CAAC;~~IAdD~~,~~0FAcC~~","sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}
1	+ {"version":3,"file":"useFluentProviderContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,uCAAuC,CAAC,KAA0B;QAChF,gEAAgE;QACxD,IAAA,oBAAoB,GAA2E,KAAK,qBAAhF,EAAE,GAAG,GAAsE,KAAK,IAA3E,EAAE,IAAI,GAAgE,KAAK,KAArE,EAAE,cAAc,GAAgD,KAAK,eAArD,EAAE,KAAK,GAAyC,KAAK,MAA9C,EAAE,cAAc,GAAyB,KAAK,eAA9B,EAAE,kBAAkB,GAAK,KAAK,mBAAV,CAAW;QAE7G,IAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,CAAC,EAAE,GAAG,KAAA,EAAE,cAAc,gBAAA,EAAE,CAAC,EAAzB,CAAyB,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;QACvF,mFAAmF;QAC5E,IAAA,OAAO,GAAI,KAAK,CAAC,QAAQ,CAAC,cAAM,OAAA,CAAC,EAAE,CAAC,EAAJ,CAAI,CAAC,GAA9B,CAA+B;QAE7C,OAAO;YACL,gEAAgE;YAChE,kBAAkB,oBAAA;YAClB,QAAQ,UAAA;YACR,aAAa,EAAE,GAAG;YAClB,OAAO,SAAA;YACP,KAAK,OAAA;YACL,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,cAAc;SACxE,CAAC;IACJ,CAAC;IAjBD,0FAiBC","sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName, overrides_unstable } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}

package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js CHANGED Viewed

@@ -49,7 +49,8 @@ define(["require", "exports", "tslib", "@fluentui/react-utilities", "@griffel/re
                 }, '')
                 : '';
         }, [theme]);
-        var rule = "." + styleTagId + " { " + cssVarsAsString + " }";
+        // When using React 18, the id generated will contain : which is not valid unless we add an escape character
+        var rule = "." + styleTagId.replace(/:/g, '\\:') + " { " + cssVarsAsString + " }";
         useInsertionEffect(function () {
             styleTag.current = createStyleTag(targetDocument, tslib_1.__assign(tslib_1.__assign({}, styleElementAttributes), { id: styleTagId }));
             if (styleTag.current) {

package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFluentProviderThemeStyleTag.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;IAOA,4FAA4F;IAC5F,IAAM,kBAAkB,GAAI,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QACpE,CAAC,CAAE,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC7C,CAAC,CAAC,2CAAyB,CAAC;IAE9B,IAAM,cAAc,GAAG,UAAC,MAA4B,EAAE,iBAAyC;QAC7F,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,SAAS,CAAC;SAClB;QAED,IAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,UAAA,QAAQ;YAC7C,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC7B,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,GAAqB,EAAE,IAAY;QACtD,IAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QAExB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACrB;YACD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YAChD,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uFAAuF,CAAC,CAAC;SACxG;IACH,CAAC,CAAC;IAEF;;;;OAIG;IACI,IAAM,8BAA8B,GAAG,UAAC,OAA8D;QACnG,IAAA,cAAc,GAAY,OAAO,eAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;QAE1C,IAAM,QAAQ,GAAG,4BAAoB,EAAE,CAAC;QACxC,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;QAElD,IAAM,UAAU,GAAG,uBAAK,CAAC,kDAAwB,CAAC,IAAI,CAAC,CAAC;QACxD,IAAM,sBAAsB,GAAG,QAAQ,CAAC,sBAAsB,CAAC;QAE/D,IAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC;YACpC,OAAO,KAAK;gBACV,CAAC,CAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAA4B,CAAC,MAAM,CAAC,UAAC,UAAU,EAAE,MAAM;oBACvE,UAAU,IAAI,OAAK,MAAM,UAAK,KAAK,CAAC,MAAM,CAAC,OAAI,CAAC;oBAChD,OAAO,UAAU,CAAC;gBACpB,CAAC,EAAE,EAAE,CAAC;gBACR,CAAC,CAAC,EAAE,CAAC;QACT,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAEZ,IAAM,IAAI,GAAG,MAAI,UAAU,WAAM,eAAe,OAAI,CAAC;~~QAErD~~,kBAAkB,CAAC;YACjB,QAAQ,CAAC,OAAO,GAAG,cAAc,CAAC,cAAc,wCAAO,sBAAsB,KAAE,EAAE,EAAE,UAAU,IAAG,CAAC;YAEjG,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAEpC,OAAO;;oBACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;gBAC7B,CAAC,CAAC;aACH;QACH,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC;QAE/D,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;~~IAjCW~~,QAAA,8BAA8B,~~kCAiCzC~~","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document \| undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/*\n Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n \n @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' \| 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
1	+ {"version":3,"file":"useFluentProviderThemeStyleTag.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;IAOA,4FAA4F;IAC5F,IAAM,kBAAkB,GAAI,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QACpE,CAAC,CAAE,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC7C,CAAC,CAAC,2CAAyB,CAAC;IAE9B,IAAM,cAAc,GAAG,UAAC,MAA4B,EAAE,iBAAyC;QAC7F,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,SAAS,CAAC;SAClB;QAED,IAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,UAAA,QAAQ;YAC7C,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC7B,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,GAAqB,EAAE,IAAY;QACtD,IAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QAExB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACrB;YACD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YAChD,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uFAAuF,CAAC,CAAC;SACxG;IACH,CAAC,CAAC;IAEF;;;;OAIG;IACI,IAAM,8BAA8B,GAAG,UAAC,OAA8D;QACnG,IAAA,cAAc,GAAY,OAAO,eAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;QAE1C,IAAM,QAAQ,GAAG,4BAAoB,EAAE,CAAC;QACxC,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;QAElD,IAAM,UAAU,GAAG,uBAAK,CAAC,kDAAwB,CAAC,IAAI,CAAC,CAAC;QACxD,IAAM,sBAAsB,GAAG,QAAQ,CAAC,sBAAsB,CAAC;QAE/D,IAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC;YACpC,OAAO,KAAK;gBACV,CAAC,CAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAA4B,CAAC,MAAM,CAAC,UAAC,UAAU,EAAE,MAAM;oBACvE,UAAU,IAAI,OAAK,MAAM,UAAK,KAAK,CAAC,MAAM,CAAC,OAAI,CAAC;oBAChD,OAAO,UAAU,CAAC;gBACpB,CAAC,EAAE,EAAE,CAAC;gBACR,CAAC,CAAC,EAAE,CAAC;QACT,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAEZ,4GAA4G;QAC5G,IAAM,IAAI,GAAG,MAAI,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,WAAM,eAAe,OAAI,CAAC;QAE1E,kBAAkB,CAAC;YACjB,QAAQ,CAAC,OAAO,GAAG,cAAc,CAAC,cAAc,wCAAO,sBAAsB,KAAE,EAAE,EAAE,UAAU,IAAG,CAAC;YAEjG,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAEpC,OAAO;;oBACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;gBAC7B,CAAC,CAAC;aACH;QACH,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC;QAE/D,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;IAlCW,QAAA,8BAA8B,kCAkCzC","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document \| undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/*\n Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n \n @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' \| 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n // When using React 18, the id generated will contain : which is not valid unless we add an escape character\n const rule = `.${styleTagId.replace(/:/g, '\\\\:')} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}

package/lib-commonjs/components/FluentProvider/renderFluentProvider.js CHANGED Viewed

@@ -26,9 +26,11 @@ const renderFluentProvider_unstable = (state, contextValues) => {
     value: contextValues.tooltip
   }, React.createElement(react_1.TextDirectionProvider, {
     dir: contextValues.textDirection
+  }, React.createElement(react_shared_contexts_1.OverridesProvider_unstable, {
+    value: contextValues.overrides_unstable
   }, React.createElement(slots.root, {
     ...slotProps.root
-  }, state.root.children))))));
+  }, state.root.children)))))));
 };
 exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
 //# sourceMappingURL=renderFluentProvider.js.map

package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;~~AAMA~~;AAGA;;;AAGO,MAAMA,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAsBJ,KAAK,CAAC;EAEjE,OACEK,oBAACC,yCAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GACrCH,oBAACC,8CAAa;IAACC,KAAK,EAAEN,aAAa,CAACQ;EAAK,GACvCJ,oBAACC,uDAAsB;IAACC,KAAK,EAAEN,aAAa,CAACS;EAAc,GACzDL,oBAACC,0DAAyB;IAACC,KAAK,EAAEN,aAAa,CAACU;EAAO,GACrDN,oBAACO,6BAAqB;IAACC,GAAG,EAAEZ,aAAa,CAACa;EAAa,GACrDT,oBAACH,KAAK,~~CAACa~~,IAAI;IAAA,~~GAAKZ~~,SAAS,~~CAACY~~;EAAI,~~GAAGf~~,KAAK,~~CAACe~~,IAAI,CAACC,QAAQ,CAAc,~~CAC5C~~,CACE,CACL,CACX,CACP;AAEf,CAAC;~~AAnBYC~~,qCAA6B","names":["renderFluentProvider_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","react_shared_contexts_1","value","provider","theme","themeClassName","tooltip","react_1","dir","textDirection","root","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/*\n Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAOA;AAGA;;;AAGO,MAAMA,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAsBJ,KAAK,CAAC;EAEjE,OACEK,oBAACC,yCAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GACrCH,oBAACC,8CAAa;IAACC,KAAK,EAAEN,aAAa,CAACQ;EAAK,GACvCJ,oBAACC,uDAAsB;IAACC,KAAK,EAAEN,aAAa,CAACS;EAAc,GACzDL,oBAACC,0DAAyB;IAACC,KAAK,EAAEN,aAAa,CAACU;EAAO,GACrDN,oBAACO,6BAAqB;IAACC,GAAG,EAAEZ,aAAa,CAACa;EAAa,GACrDT,oBAACC,kDAAiB;IAACC,KAAK,EAAEN,aAAa,CAACc;EAAkB,GACxDV,oBAACH,KAAK,CAACc,IAAI;IAAA,GAAKb,SAAS,CAACa;EAAI,GAAGhB,KAAK,CAACgB,IAAI,CAACC,QAAQ,CAAc,CAChD,CACE,CACE,CACL,CACX,CACP;AAEf,CAAC;AArBYC,qCAA6B","names":["renderFluentProvider_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","react_shared_contexts_1","value","provider","theme","themeClassName","tooltip","react_1","dir","textDirection","overrides_unstable","root","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/*\n Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </OverridesProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}

package/lib-commonjs/components/FluentProvider/useFluentProvider.js CHANGED Viewed

@@ -21,6 +21,7 @@ const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProvid
 const useFluentProvider_unstable = (props, ref) => {
   const parentContext = react_shared_contexts_1.useFluent_unstable();
   const parentTheme = useTheme();
+  const parentOverrides = react_shared_contexts_1.useOverrides_unstable();
   /**
    * TODO: add merge functions to "dir" merge,
    * nesting providers with the same "dir" should not add additional attributes to DOM
@@ -30,9 +31,11 @@ const useFluentProvider_unstable = (props, ref) => {
     applyStylesToPortals = true,
     dir = parentContext.dir,
     targetDocument = parentContext.targetDocument,
-    theme
+    theme,
+    overrides_unstable: overrides = {}
   } = props;
-  const mergedTheme = mergeThemes(parentTheme, theme);
+  const mergedTheme = shallowMerge(parentTheme, theme);
+  const mergedOverrides = shallowMerge(parentOverrides, overrides);
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
       // eslint-disable-next-line no-console
@@ -49,6 +52,8 @@ const useFluentProvider_unstable = (props, ref) => {
     dir,
     targetDocument,
     theme: mergedTheme,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    overrides_unstable: mergedOverrides,
     themeClassName: useFluentProviderThemeStyleTag_1.useFluentProviderThemeStyleTag({
       theme: mergedTheme,
       targetDocument
@@ -64,7 +69,7 @@ const useFluentProvider_unstable = (props, ref) => {
   };
 };
 exports.useFluentProvider_unstable = useFluentProvider_unstable;
-function mergeThemes(a, b) {
+function shallowMerge(a, b) {
   // Merge impacts perf: we should like to avoid it if it's possible
   if (a && b) {
     return {

package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;~~AAKA~~;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGC,0CAAS,EAAE;EACjC,MAAMC,WAAW,GAAGC,QAAQ,EAAE;~~EAE9B~~;;;;;EAKA,MAAM;~~IACJC~~,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,~~GAAGL~~,aAAa,~~CAACK~~,GAAG;IACvBC,cAAc,~~GAAGN~~,aAAa,~~CAACM~~,cAAc;IAC7CC;~~EAAK~~,~~CACN~~,~~GAAGT~~,KAAK;EACT,~~MAAMU~~,WAAW,GAAGC,~~WAAW~~,~~CAACP~~,WAAW,~~EAAEK~~,KAAK,CAAC;~~EAEnDG~~,KAAK,CAACC,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,~~IAAIN~~,WAAW,~~KAAKO~~,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;~~IACLb~~,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,~~EAAEC~~,WAAW;~~IAClBU~~,cAAc,EAAEC,+DAA8B,CAAC;~~MAAEZ~~,KAAK,~~EAAEC~~,WAAW;~~MAAEF~~;IAAc,CAAE,CAAC;~~IAEtFc~~,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEC,uCAAqB,CAAC,KAAK,EAAE;MACjC,~~GAAGxB~~,KAAK;~~MACRO~~,GAAG;~~MACHN~~,GAAG,~~EAAEuB~~,+BAAa,~~CAACvB~~,GAAG,~~EAAEwB~~,+BAAe,EAAkB;KAC1D;GACF;AACH,CAAC;~~AAjDYC~~,kCAA0B;~~AAmDvC~~,~~SAASf~~,~~WAAW~~,~~CAACgB~~,~~CAAoB~~,EAAEC,~~CAAoB~~;~~EAC7D~~;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,~~SAASvB~~,QAAQ;EACf,~~OAAOO~~,KAAK,CAACiB,UAAU,~~CAAC1B~~,6CAAY,CAAC;AACvC","names":["useFluentProvider_unstable","props","ref","parentContext","react_shared_contexts_1","parentTheme","useTheme","applyStylesToPortals","dir","targetDocument","theme","mergedTheme","~~mergeThemes~~","React","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag_1","components","root","react_utilities_1","react_tabster_1","exports","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/*\n Create the state required to render FluentProvider.\n \n The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n \n @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n /\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /\n TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = props;\n const mergedTheme = ~~mergeThemes~~(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction ~~mergeThemes~~(a: ~~ThemeContextValue~~, b: ~~ThemeContextValue~~): ~~ThemeContextValue~~ {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAMA;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGC,0CAAS,EAAE;EACjC,MAAMC,WAAW,GAAGC,QAAQ,EAAE;EAC9B,MAAMC,eAAe,GAAGH,6CAAY,EAAE;EAEtC;;;;;EAKA,MAAM;IACJI,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,GAAGN,aAAa,CAACM,GAAG;IACvBC,cAAc,GAAGP,aAAa,CAACO,cAAc;IAC7CC,KAAK;IACLC,kBAAkB,EAAEC,SAAS,GAAG;EAAE,CACnC,GAAGZ,KAAK;EACT,MAAMa,WAAW,GAAGC,YAAY,CAACV,WAAW,EAAEM,KAAK,CAAC;EAEpD,MAAMK,eAAe,GAAGD,YAAY,CAACR,eAAe,EAAEM,SAAS,CAAC;EAEhEI,KAAK,CAACC,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIP,WAAW,KAAKQ,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLhB,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEG,WAAW;IAClB;IACAF,kBAAkB,EAAEI,eAAe;IACnCS,cAAc,EAAEC,+DAA8B,CAAC;MAAEf,KAAK,EAAEG,WAAW;MAAEJ;IAAc,CAAE,CAAC;IAEtFiB,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEC,uCAAqB,CAAC,KAAK,EAAE;MACjC,GAAG5B,KAAK;MACRQ,GAAG;MACHP,GAAG,EAAE2B,+BAAa,CAAC3B,GAAG,EAAE4B,+BAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAvDYC,kCAA0B;AAyDvC,SAAShB,YAAY,CAAIiB,CAAI,EAAEC,CAAI;EACjC;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAAS3B,QAAQ;EACf,OAAOW,KAAK,CAACiB,UAAU,CAAC9B,6CAAY,CAAC;AACvC","names":["useFluentProvider_unstable","props","ref","parentContext","react_shared_contexts_1","parentTheme","useTheme","parentOverrides","applyStylesToPortals","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","React","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag_1","components","root","react_utilities_1","react_tabster_1","exports","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/*\n Create the state required to render FluentProvider.\n \n The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n \n @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n /\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n\n /\n TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n overrides_unstable: overrides = {},\n } = props;\n const mergedTheme = shallowMerge(parentTheme, theme);\n\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable: mergedOverrides,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}

package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js CHANGED Viewed

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFluentProviderContextValues_unstable = void 0;
 const React = /*#__PURE__*/require("react");
 function useFluentProviderContextValues_unstable(state) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const {
     applyStylesToPortals,
     dir,
     root,
     targetDocument,
     theme,
-    themeClassName
+    themeClassName,
+    overrides_unstable
   } = state;
   const provider = React.useMemo(() => ({
     dir,
@@ -21,6 +23,8 @@ function useFluentProviderContextValues_unstable(state) {
   // "Tooltip" component mutates an object in this context, instance should be stable
   const [tooltip] = React.useState(() => ({}));
   return {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    overrides_unstable,
     provider,
     textDirection: dir,
     tooltip,

package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AAGA,SAAgBA,uCAAuC,CAACC,KAA0B;EAChF,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC;~~EAAc~~,CAAE,~~GAAGN~~,KAAK;~~EAExF~~,~~MAAMO~~,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAAC,OAAO;~~IAAEP~~,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,~~CAACM~~,OAAO,CAAC,GAAGF,KAAK,CAACG,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;~~IACLJ~~,QAAQ;IACRK,aAAa,~~EAAEV~~,GAAG;~~IAClBQ~~,OAAO;~~IACPL~~,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,~~CAACU~~,SAAU,~~GAAGP~~;GAC1D;AACH;~~AAdAQ~~","names":["useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","provider","React","useMemo","tooltip","useState","textDirection","className","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AAGA,SAAgBA,uCAAuC,CAACC,KAA0B;EAChF;EACA,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC,cAAc;IAAEC;EAAkB,CAAE,GAAGP,KAAK;EAE5G,MAAMQ,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAAC,OAAO;IAAER,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACO,OAAO,CAAC,GAAGF,KAAK,CAACG,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACL;IACAL,kBAAkB;IAClBC,QAAQ;IACRK,aAAa,EAAEX,GAAG;IAClBS,OAAO;IACPN,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,CAACW,SAAU,GAAGR;GAC1D;AACH;AAjBAS","names":["useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","React","useMemo","tooltip","useState","textDirection","className","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName, overrides_unstable } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}

package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js CHANGED Viewed

@@ -53,7 +53,8 @@ const useFluentProviderThemeStyleTag = options => {
       return cssVarRule;
     }, '') : '';
   }, [theme]);
-  const rule = `.${styleTagId} { ${cssVarsAsString} }`;
+  // When using React 18, the id generated will contain : which is not valid unless we add an escape character
+  const rule = `.${styleTagId.replace(/:/g, '\\:')} { ${cssVarsAsString} }`;
   useInsertionEffect(() => {
     styleTag.current = createStyleTag(targetDocument, {
       ...styleElementAttributes,

package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AAEA;AACA,MAAMA,kBAAkB,GAAIC,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CC,2CAAyB;AAE7B,MAAMC,cAAc,GAAG,CAACC,MAA4B,EAAEC,iBAAyC,KAAI;EACjG,IAAI,CAACD,MAAM,EAAE;IACX,OAAOE,SAAS;;EAGlB,MAAMC,GAAG,GAAGH,MAAM,CAACI,aAAa,CAAC,OAAO,CAAC;EAEzCC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,OAAO,CAACC,QAAQ,IAAG;IAChDL,GAAG,CAACM,YAAY,CAACD,QAAQ,EAAEP,iBAAiB,CAACO,QAAQ,CAAC,CAAC;EACzD,CAAC,CAAC;EAEFR,MAAM,CAACU,IAAI,CAACC,WAAW,CAACR,GAAG,CAAC;EAC5B,OAAOA,GAAG;AACZ,CAAC;AAED,MAAMS,WAAW,GAAG,CAACT,GAAqB,EAAEU,IAAY,KAAI;EAC1D,MAAMC,KAAK,GAAGX,GAAG,CAACW,KAAK;EAEvB,IAAIA,KAAK,EAAE;IACT,IAAIA,KAAK,CAACC,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MAC7BF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;;IAErBH,KAAK,CAACI,UAAU,CAACL,IAAI,EAAE,CAAC,CAAC;GAC1B,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IAChD;IACAC,OAAO,CAACC,KAAK,CAAC,uFAAuF,CAAC;;AAE1G,CAAC;AAED;;;;;AAKO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGC,4BAAoB,EAAE;EACvC,MAAMC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGlC,uBAAK,CAACmC,kDAAwB,CAACC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGP,QAAQ,CAACO,sBAAsB;EAE9D,MAAMC,eAAe,GAAGvC,KAAK,CAACwC,OAAO,CAAC,MAAK;IACzC,OAAOV,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACW,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKb,KAAK,CAACa,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACZ,KAAK,CAAC,CAAC;EAEX,MAAMd,IAAI,GAAG,IAAImB,UAAU,~~MAAMI~~,eAAe,IAAI;~~EAEpDxC~~,kBAAkB,CAAC,MAAK;IACtBkC,QAAQ,~~CAACW~~,OAAO,~~GAAG1C~~,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGS,sBAAsB;~~MAAEO~~,EAAE,~~EAAEV~~;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,~~CAACW~~,OAAO,EAAE;~~MACpB7B~~,WAAW,CAACkB,QAAQ,~~CAACW~~,OAAO,~~EAAE5B~~,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,~~CAAC4B~~,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,~~CAACX~~,UAAU,EAAEN,cAAc,EAAEb,IAAI,EAAEsB,sBAAsB,CAAC,CAAC;EAE9D,OAAOH,UAAU;AACnB,CAAC;~~AAjCYY~~,sCAA8B","names":["useInsertionEffect","React","react_utilities_1","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","react_1","styleTag","useRef","styleTagId","useFluentProviderStyles_1","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","remove","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document \| undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/*\n Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n \n @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' \| 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AAEA;AACA,MAAMA,kBAAkB,GAAIC,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CC,2CAAyB;AAE7B,MAAMC,cAAc,GAAG,CAACC,MAA4B,EAAEC,iBAAyC,KAAI;EACjG,IAAI,CAACD,MAAM,EAAE;IACX,OAAOE,SAAS;;EAGlB,MAAMC,GAAG,GAAGH,MAAM,CAACI,aAAa,CAAC,OAAO,CAAC;EAEzCC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,OAAO,CAACC,QAAQ,IAAG;IAChDL,GAAG,CAACM,YAAY,CAACD,QAAQ,EAAEP,iBAAiB,CAACO,QAAQ,CAAC,CAAC;EACzD,CAAC,CAAC;EAEFR,MAAM,CAACU,IAAI,CAACC,WAAW,CAACR,GAAG,CAAC;EAC5B,OAAOA,GAAG;AACZ,CAAC;AAED,MAAMS,WAAW,GAAG,CAACT,GAAqB,EAAEU,IAAY,KAAI;EAC1D,MAAMC,KAAK,GAAGX,GAAG,CAACW,KAAK;EAEvB,IAAIA,KAAK,EAAE;IACT,IAAIA,KAAK,CAACC,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MAC7BF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;;IAErBH,KAAK,CAACI,UAAU,CAACL,IAAI,EAAE,CAAC,CAAC;GAC1B,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IAChD;IACAC,OAAO,CAACC,KAAK,CAAC,uFAAuF,CAAC;;AAE1G,CAAC;AAED;;;;;AAKO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGC,4BAAoB,EAAE;EACvC,MAAMC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGlC,uBAAK,CAACmC,kDAAwB,CAACC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGP,QAAQ,CAACO,sBAAsB;EAE9D,MAAMC,eAAe,GAAGvC,KAAK,CAACwC,OAAO,CAAC,MAAK;IACzC,OAAOV,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACW,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKb,KAAK,CAACa,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACZ,KAAK,CAAC,CAAC;EAEX;EACA,MAAMd,IAAI,GAAG,IAAImB,UAAU,CAACS,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAML,eAAe,IAAI;EAEzExC,kBAAkB,CAAC,MAAK;IACtBkC,QAAQ,CAACY,OAAO,GAAG3C,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGS,sBAAsB;MAAEQ,EAAE,EAAEX;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,CAACY,OAAO,EAAE;MACpB9B,WAAW,CAACkB,QAAQ,CAACY,OAAO,EAAE7B,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,CAAC6B,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACZ,UAAU,EAAEN,cAAc,EAAEb,IAAI,EAAEsB,sBAAsB,CAAC,CAAC;EAE9D,OAAOH,UAAU;AACnB,CAAC;AAlCYa,sCAA8B","names":["useInsertionEffect","React","react_utilities_1","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","react_1","styleTag","useRef","styleTagId","useFluentProviderStyles_1","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","replace","current","id","remove","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document \| undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/*\n Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n \n @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' \| 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n // When using React 18, the id generated will contain : which is not valid unless we add an escape character\n const rule = `.${styleTagId.replace(/:/g, '\\\\:')} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.2.3",
+  "version": "9.3.0",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@griffel/core": "^1.9.0",
     "@griffel/react": "^1.5.2",
-    "@fluentui/react-shared-contexts": "^9.1.5",
-    "@fluentui/react-tabster": "^9.4.0",
+    "@fluentui/react-shared-contexts": "^9.2.0",
+    "@fluentui/react-tabster": "^9.4.1",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.4.0",
+    "@fluentui/react-utilities": "^9.5.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {