@fluentui/react-provider 9.7.12 → 9.7.14

package/CHANGELOG.json

@@ -2,7 +2,61 @@
   "name": "@fluentui/react-provider",
   "entries": [
     {
-      "date": "Tue, 01 Aug 2023 10:14:29 GMT",
+      "date": "Fri, 04 Aug 2023 08:48:25 GMT",
+      "tag": "@fluentui/react-provider_v9.7.14",
+      "version": "9.7.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-tabster to v9.12.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-theme to v9.1.10",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-utilities to v9.11.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Aug 2023 13:04:25 GMT",
+      "tag": "@fluentui/react-provider_v9.7.13",
+      "version": "9.7.13",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-provider",
+            "commit": "2ddd2ef27e8f1421d095a2ba600d417af98a7b22",
+            "comment": "feat(FluentProvider): emit errors on duplicate IDs"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
       "tag": "@fluentui/react-provider_v9.7.12",
       "version": "9.7.12",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-provider
 
-This log was last generated on Tue, 01 Aug 2023 10:14:29 GMT and should not be manually modified.
+This log was last generated on Fri, 04 Aug 2023 08:48:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.14)
+
+Fri, 04 Aug 2023 08:48:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.7.13..@fluentui/react-provider_v9.7.14)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-tabster to v9.12.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+
+## [9.7.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.13)
+
+Tue, 01 Aug 2023 13:04:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.7.12..@fluentui/react-provider_v9.7.13)
+
+### Patches
+
+- feat(FluentProvider): emit errors on duplicate IDs ([PR #28670](https://github.com/microsoft/fluentui/pull/28670) by olfedias@microsoft.com)
+
 ## [9.7.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.12)
 
-Tue, 01 Aug 2023 10:14:29 GMT 
+Tue, 01 Aug 2023 10:17:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.7.11..@fluentui/react-provider_v9.7.12)
 
 ### Patches

package/lib/components/FluentProvider/useFluentProvider.js

@@ -1,9 +1,9 @@
+import { useRenderer_unstable } from '@griffel/react';
 import { useFocusVisible } from '@fluentui/react-tabster';
 import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, CustomStyleHooksContext_unstable as CustomStyleHooksContext } from '@fluentui/react-shared-contexts';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
-import { useRenderer_unstable } from '@griffel/react';
 /**
  * Create the state required to render FluentProvider.
  *
@@ -26,17 +26,6 @@ import { useRenderer_unstable } from '@griffel/react';
     const mergedTheme = shallowMerge(parentTheme, theme);
     const mergedOverrides = shallowMerge(parentOverrides, overrides);
     const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
-    React.useEffect(()=>{
-        if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
-            // eslint-disable-next-line no-console
-            console.warn(`
-      FluentProvider: your "theme" is not defined !
-      =============================================
-      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
-      `);
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const renderer = useRenderer_unstable();
     var _renderer_styleElementAttributes;
     const { styleTagId , rule  } = useFluentProviderThemeStyleTag({
@@ -44,6 +33,19 @@ import { useRenderer_unstable } from '@griffel/react';
         targetDocument,
         rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : {}
     });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(()=>{
+            if (mergedTheme === undefined) {
+                // eslint-disable-next-line no-console
+                console.warn([
+                    '@fluentui/react-provider: FluentProvider does not have your "theme" defined.',
+                    "Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider."
+                ].join(' '));
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
     return {
         applyStylesToPortals,
         // eslint-disable-next-line @typescript-eslint/naming-convention

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

@@ -1 +1 @@
-{"version":3,"sources":["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  CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\n\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\nimport { useRenderer_unstable } from '@griffel/react';\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  const parentCustomStyleHooks: CustomStyleHooksContextValue = React.useContext(CustomStyleHooksContext) || {};\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    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\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  const mergedCustomStyleHooks = shallowMerge(\n    parentCustomStyleHooks,\n    customStyleHooks_unstable,\n  ) as CustomStyleHooksContextValue;\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  const renderer = useRenderer_unstable();\n  const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n    theme: mergedTheme,\n    targetDocument,\n    rendererAttributes: renderer.styleElementAttributes ?? {},\n  });\n  return {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable: mergedCustomStyleHooks,\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable: mergedOverrides,\n    themeClassName: styleTagId,\n\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      dir,\n      ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),\n    }),\n\n    serverStyleProps: {\n      cssRule: rule,\n      attributes: {\n        ...renderer.styleElementAttributes,\n        id: styleTagId,\n      },\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"],"names":["useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useRenderer_unstable","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","useEffect","process","env","NODE_ENV","undefined","console","warn","renderer","styleTagId","rule","rendererAttributes","styleElementAttributes","themeClassName","components","root","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA,SAASA,eAAe,QAAQ,0BAA0B;AAC1D,SACEC,yBAAyBC,YAAY,EACrCC,sBAAsBC,SAAS,EAC/BC,yBAAyBC,YAAY,EACrCC,oCAAoCC,uBAAuB,QACtD,kCAAkC;AAMzC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AACjF,YAAYC,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,mCAAmC;AAElF,SAASC,oBAAoB,QAAQ,iBAAiB;AAEtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAMC,gBAAgBb;IACtB,MAAMc,cAAcC;IACpB,MAAMC,kBAAkBd;IACxB,MAAMe,yBAAuDV,MAAMW,UAAU,CAACd,4BAA4B,CAAC;IAE3G;;;;GAIC,GACD,MAAM,EACJe,sBAAuB,IAAI,CAAA,EAC3B,gEAAgE;IAChEC,0BAAyB,EACzBC,KAAMR,cAAcQ,GAAG,CAAA,EACvBC,gBAAiBT,cAAcS,cAAc,CAAA,EAC7CC,MAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,CAAA,EACnC,GAAGd;IACJ,MAAMe,cAAcC,aAAab,aAAaS;IAE9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGFb,MAAMuB,SAAS,CAAC,IAAM;QACpB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBP,gBAAgBQ,WAAW;YACtE,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;;;MAId,CAAC;QACH,CAAC;IACD,uDAAuD;IACzD,GAAG,EAAE;IAEL,MAAMC,WAAW5B;QAIK4B;IAHtB,MAAM,EAAEC,WAAU,EAAEC,KAAI,EAAE,GAAG/B,+BAA+B;QAC1De,OAAOG;QACPJ;QACAkB,oBAAoBH,CAAAA,mCAAAA,SAASI,sBAAsB,cAA/BJ,8CAAAA,mCAAmC,CAAC,CAAC;IAC3D;IACA,OAAO;QACLlB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBc,gBAAgBJ;QAEhBK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMvC,sBAAsB,OAAO;YACjC,GAAGM,KAAK;YACRU;YACAT,KAAKN,cAAcM,KAAKhB,gBAAgC;gBAAE0B;YAAe;QAC3E;QAEAuB,kBAAkB;YAChBC,SAASP;YACTQ,YAAY;gBACV,GAAGV,SAASI,sBAAsB;gBAClCO,IAAIV;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASX,aAAgBsB,CAAI,EAAEC,CAAI,EAAK;IACtC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB,CAAC;IAED,IAAID,GAAG;QACL,OAAOA;IACT,CAAC;IAED,OAAOC;AACT;AAEA,SAASnC,WAA8B;IACrC,OAAOR,MAAMW,UAAU,CAACpB;AAC1B"}
+{"version":3,"sources":["useFluentProvider.ts"],"sourcesContent":["import { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n  ThemeContext_unstable as ThemeContext,\n  useFluent_unstable as useFluent,\n  useOverrides_unstable as useOverrides,\n  CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\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  const parentCustomStyleHooks: CustomStyleHooksContextValue = React.useContext(CustomStyleHooksContext) || {};\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    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir = parentContext.dir,\n    targetDocument = parentContext.targetDocument,\n    theme,\n    overrides_unstable: overrides = {},\n  } = props;\n\n  const mergedTheme = shallowMerge(parentTheme, theme);\n  const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n  const mergedCustomStyleHooks = shallowMerge(\n    parentCustomStyleHooks,\n    customStyleHooks_unstable,\n  ) as CustomStyleHooksContextValue;\n\n  const renderer = useRenderer_unstable();\n  const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n    theme: mergedTheme,\n    targetDocument,\n    rendererAttributes: renderer.styleElementAttributes ?? {},\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (mergedTheme === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n            \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\",\n          ].join(' '),\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  return {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable: mergedCustomStyleHooks,\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable: mergedOverrides,\n    themeClassName: styleTagId,\n\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      dir,\n      ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),\n    }),\n\n    serverStyleProps: {\n      cssRule: rule,\n      attributes: {\n        ...renderer.styleElementAttributes,\n        id: styleTagId,\n      },\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"],"names":["useRenderer_unstable","useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","renderer","styleTagId","rule","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SACEC,yBAAyBC,YAAY,EACrCC,sBAAsBC,SAAS,EAC/BC,yBAAyBC,YAAY,EACrCC,oCAAoCC,uBAAuB,QACtD,kCAAkC;AAKzC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AACjF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,8BAA8B,QAAQ,mCAAmC;AAGlF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAMC,gBAAgBZ;IACtB,MAAMa,cAAcC;IACpB,MAAMC,kBAAkBb;IACxB,MAAMc,yBAAuDT,MAAMU,UAAU,CAACb,4BAA4B,CAAC;IAE3G;;;;GAIC,GACD,MAAM,EACJc,sBAAuB,IAAI,CAAA,EAC3B,gEAAgE;IAChEC,0BAAyB,EACzBC,KAAMR,cAAcQ,GAAG,CAAA,EACvBC,gBAAiBT,cAAcS,cAAc,CAAA,EAC7CC,MAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,CAAA,EACnC,GAAGd;IAEJ,MAAMe,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMU,WAAWlC;QAIKkC;IAHtB,MAAM,EAAEC,WAAU,EAAEC,KAAI,EAAE,GAAGvB,+BAA+B;QAC1Dc,OAAOG;QACPJ;QACAW,oBAAoBH,CAAAA,mCAAAA,SAASI,sBAAsB,cAA/BJ,8CAAAA,mCAAmC,CAAC,CAAC;IAC3D;IAEA,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD7B,MAAM8B,SAAS,CAAC,IAAM;YACpB,IAAIZ,gBAAgBa,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX,CAAC;QACD,uDAAuD;QACzD,GAAG,EAAE;IACP,CAAC;IAED,OAAO;QACLvB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBe,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMvC,sBAAsB,OAAO;YACjC,GAAGK,KAAK;YACRU;YACAT,KAAKL,cAAcK,KAAKf,gBAAgC;gBAAEyB;YAAe;QAC3E;QAEAwB,kBAAkB;YAChBC,SAASf;YACTgB,YAAY;gBACV,GAAGlB,SAASI,sBAAsB;gBAClCe,IAAIlB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASJ,aAAgBuB,CAAI,EAAEC,CAAI,EAAK;IACtC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB,CAAC;IAED,IAAID,GAAG;QACL,OAAOA;IACT,CAAC;IAED,OAAOC;AACT;AAEA,SAASpC,WAA8B;IACrC,OAAOP,MAAMU,UAAU,CAACnB;AAC1B"}

package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js

@@ -44,6 +44,33 @@ const insertSheet = (tag, rule)=>{
         theme
     ]);
     const rule = `.${styleTagId} { ${cssVarsAsString} }`;
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useMemo(()=>{
+            // Heads up!
+            // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,
+            // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
+            // of double render.
+            if (targetDocument) {
+                const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;
+                const providerElements = targetDocument.querySelectorAll(providerSelector);
+                // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed
+                const isSSR = targetDocument.querySelector(`${providerSelector} > style[id="${styleTagId}"]`) !== null;
+                const elementsCount = isSSR ? 1 : 0;
+                if (providerElements.length > elementsCount) {
+                    // eslint-disable-next-line no-console
+                    console.error([
+                        '@fluentui/react-provider: There are conflicting ids in your DOM.',
+                        'Please make sure that you configured your application properly.',
+                        '\n',
+                        '\n',
+                        'Configuration guide: https://aka.ms/fluentui-conflicting-ids'
+                    ].join(' '));
+                }
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
     useHandleSSRStyleElements(targetDocument, styleTagId);
     useInsertionEffect(()=>{
         // The style element could already have been created during SSR - no need to recreate it

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

@@ -1 +1 @@
-{"version":3,"sources":["useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\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 * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n) => {\n  const { targetDocument, theme, rendererAttributes } = options;\n\n  const styleTag = React.useRef<HTMLStyleElement | undefined | null>();\n\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = rendererAttributes;\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  useHandleSSRStyleElements(targetDocument, styleTagId);\n  useInsertionEffect(() => {\n    // The style element could already have been created during SSR - no need to recreate it\n    const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n    if (ssrStyleElement) {\n      styleTag.current = ssrStyleElement as HTMLStyleElement;\n    } else {\n      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n      if (styleTag.current) {\n        insertSheet(styleTag.current, rule);\n      }\n    }\n\n    return () => {\n      styleTag.current?.remove();\n    };\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n  return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n  // Using a state factory so that this logic only runs once per render\n  // Each FluentProvider can create its own style element during SSR as a slot\n  // Moves all theme style elements to document head during render to avoid hydration errors.\n  // Should be strict mode safe since the logic is idempotent.\n  React.useState(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const themeStyleElement = targetDocument.getElementById(styleTagId);\n    if (themeStyleElement) {\n      targetDocument.head.append(themeStyleElement);\n    }\n  });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","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","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}
+{"version":3,"sources":["useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\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 * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n) => {\n  const { targetDocument, theme, rendererAttributes } = options;\n\n  const styleTag = React.useRef<HTMLStyleElement | undefined | null>();\n\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = rendererAttributes;\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  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      // Heads up!\n      // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n      // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n      // of double render.\n\n      if (targetDocument) {\n        const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n        const providerElements = targetDocument.querySelectorAll(providerSelector);\n\n        // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n        const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n        const elementsCount = isSSR ? 1 : 0;\n\n        if (providerElements.length > elementsCount) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: There are conflicting ids in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n        }\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  useHandleSSRStyleElements(targetDocument, styleTagId);\n  useInsertionEffect(() => {\n    // The style element could already have been created during SSR - no need to recreate it\n    const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n    if (ssrStyleElement) {\n      styleTag.current = ssrStyleElement as HTMLStyleElement;\n    } else {\n      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n      if (styleTag.current) {\n        insertSheet(styleTag.current, rule);\n      }\n    }\n\n    return () => {\n      styleTag.current?.remove();\n    };\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n  return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n  // Using a state factory so that this logic only runs once per render\n  // Each FluentProvider can create its own style element during SSR as a slot\n  // Moves all theme style elements to document head during render to avoid hydration errors.\n  // Should be strict mode safe since the logic is idempotent.\n  React.useState(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const themeStyleElement = targetDocument.getElementById(styleTagId);\n    if (themeStyleElement) {\n      targetDocument.head.append(themeStyleElement);\n    }\n  });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","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","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"AAAA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,wBAAwB,QAAQ,mCAAmC;AAE5E,4FAA4F;AAC5F,MAAMC,qBAAqB,AAACF,KAAe,CAAC,iBAAiB,SAAS,GAClE,AAACA,KAAe,CAAC,iBAAiB,SAAS,GAC3CD,yBAAyB;AAE7B,MAAMI,iBAAiB,CAACC,QAA8BC,oBAA8C;IAClG,IAAI,CAACD,QAAQ;QACX,OAAOE;IACT,CAAC;IAED,MAAMC,MAAMH,OAAOI,aAAa,CAAC;IAEjCC,OAAOC,IAAI,CAACL,mBAAmBM,OAAO,CAACC,CAAAA,WAAY;QACjDL,IAAIM,YAAY,CAACD,UAAUP,iBAAiB,CAACO,SAAS;IACxD;IAEAR,OAAOU,IAAI,CAACC,WAAW,CAACR;IACxB,OAAOA;AACT;AAEA,MAAMS,cAAc,CAACT,KAAuBU,OAAiB;IAC3D,MAAMC,QAAQX,IAAIW,KAAK;IAEvB,IAAIA,OAAO;QACT,IAAIA,MAAMC,QAAQ,CAACC,MAAM,GAAG,GAAG;YAC7BF,MAAMG,UAAU,CAAC;QACnB,CAAC;QACDH,MAAMI,UAAU,CAACL,MAAM;IACzB,OAAO,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAChD,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;IAChB,CAAC;AACH;AAEA;;;;CAIC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,UACG;IACH,MAAM,EAAEC,eAAc,EAAEC,MAAK,EAAEC,mBAAkB,EAAE,GAAGH;IAEtD,MAAMI,WAAWjC,MAAMkC,MAAM;IAE7B,MAAMC,aAAarC,MAAMG,yBAAyBmC,IAAI;IACtD,MAAMC,yBAAyBL;IAE/B,MAAMM,kBAAkBtC,MAAMuC,OAAO,CAAC,IAAM;QAC1C,OAAOR,QACH,AAACtB,OAAOC,IAAI,CAACqB,OAAkCS,MAAM,CAAC,CAACC,YAAYC,SAAW;YAC5ED,cAAc,CAAC,EAAE,EAAEC,OAAO,EAAE,EAAEX,KAAK,CAACW,OAAO,CAAC,EAAE,CAAC;YAC/C,OAAOD;QACT,GAAG,MACH,EAAE;IACR,GAAG;QAACV;KAAM;IAEV,MAAMd,OAAO,CAAC,CAAC,EAAEkB,WAAW,GAAG,EAAEG,gBAAgB,EAAE,CAAC;IAEpD,IAAIf,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtDzB,MAAMuC,OAAO,CAAC,IAAM;YAClB,YAAY;YACZ,kHAAkH;YAClH,gHAAgH;YAChH,oBAAoB;YAEpB,IAAIT,gBAAgB;gBAClB,MAAMa,mBAAmB,CAAC,CAAC,EAAE1C,yBAAyBmC,IAAI,CAAC,CAAC,EAAED,WAAW,CAAC;gBAC1E,MAAMS,mBAAmBd,eAAee,gBAAgB,CAACF;gBAEzD,wGAAwG;gBACxG,MAAMG,QAAQhB,eAAeiB,aAAa,CAAC,CAAC,EAAEJ,iBAAiB,aAAa,EAAER,WAAW,EAAE,CAAC,MAAM,IAAI;gBACtG,MAAMa,gBAAgBF,QAAQ,IAAI,CAAC;gBAEnC,IAAIF,iBAAiBxB,MAAM,GAAG4B,eAAe;oBAC3C,sCAAsC;oBACtCtB,QAAQC,KAAK,CACX;wBACE;wBACA;wBACA;wBACA;wBACA;qBACD,CAACsB,IAAI,CAAC;gBAEX,CAAC;YACH,CAAC;QACD,uDAAuD;QACzD,GAAG,EAAE;IACP,CAAC;IAEDC,0BAA0BpB,gBAAgBK;IAC1CjC,mBAAmB,IAAM;QACvB,wFAAwF;QACxF,MAAMiD,kBAAkBrB,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,cAAc,CAACjB;QACvD,IAAIgB,iBAAiB;YACnBlB,SAASoB,OAAO,GAAGF;QACrB,OAAO;YACLlB,SAASoB,OAAO,GAAGlD,eAAe2B,gBAAgB;gBAAE,GAAGO,sBAAsB;gBAAEiB,IAAInB;YAAW;YAC9F,IAAIF,SAASoB,OAAO,EAAE;gBACpBrC,YAAYiB,SAASoB,OAAO,EAAEpC;YAChC,CAAC;QACH,CAAC;QAED,OAAO,IAAM;gBACXgB;YAAAA,CAAAA,oBAAAA,SAASoB,OAAO,cAAhBpB,+BAAAA,KAAAA,IAAAA,kBAAkBsB;QACpB;IACF,GAAG;QAACpB;QAAYL;QAAgBb;QAAMoB;KAAuB;IAE7D,OAAO;QAAEF;QAAYlB;IAAK;AAC5B,EAAE;AAEF,SAASiC,0BAA0BpB,cAA2C,EAAEK,UAAkB,EAAE;IAClG,qEAAqE;IACrE,4EAA4E;IAC5E,2FAA2F;IAC3F,4DAA4D;IAC5DnC,MAAMwD,QAAQ,CAAC,IAAM;QACnB,IAAI,CAAC1B,gBAAgB;YACnB;QACF,CAAC;QAED,MAAM2B,oBAAoB3B,eAAesB,cAAc,CAACjB;QACxD,IAAIsB,mBAAmB;YACrB3B,eAAehB,IAAI,CAAC4C,MAAM,CAACD;QAC7B,CAAC;IACH;AACF"}

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

@@ -7,17 +7,17 @@ Object.defineProperty(exports, "useFluentProvider_unstable", {
     get: ()=>useFluentProvider_unstable
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = require("@griffel/react");
 const _reactTabster = require("@fluentui/react-tabster");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const _reactUtilities = require("@fluentui/react-utilities");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useFluentProviderThemeStyleTag = require("./useFluentProviderThemeStyleTag");
-const _react1 = require("@griffel/react");
 const useFluentProvider_unstable = (props, ref)=>{
     const parentContext = (0, _reactSharedContexts.useFluent_unstable)();
     const parentTheme = useTheme();
     const parentOverrides = (0, _reactSharedContexts.useOverrides_unstable)();
-    const parentCustomStyleHooks = _react.useContext(_reactSharedContexts.CustomStyleHooksContext_unstable) || {};
+    const parentCustomStyleHooks = _react1.useContext(_reactSharedContexts.CustomStyleHooksContext_unstable) || {};
     /**
    * TODO: add merge functions to "dir" merge,
    * nesting providers with the same "dir" should not add additional attributes to DOM
@@ -26,24 +26,26 @@ const useFluentProvider_unstable = (props, ref)=>{
     const mergedTheme = shallowMerge(parentTheme, theme);
     const mergedOverrides = shallowMerge(parentOverrides, overrides);
     const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
-    _react.useEffect(()=>{
-        if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
-            // eslint-disable-next-line no-console
-            console.warn(`
-      FluentProvider: your "theme" is not defined !
-      =============================================
-      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
-      `);
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const renderer = (0, _react1.useRenderer_unstable)();
+    const renderer = (0, _react.useRenderer_unstable)();
     var _renderer_styleElementAttributes;
     const { styleTagId , rule  } = (0, _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag)({
         theme: mergedTheme,
         targetDocument,
         rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : {}
     });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        _react1.useEffect(()=>{
+            if (mergedTheme === undefined) {
+                // eslint-disable-next-line no-console
+                console.warn([
+                    '@fluentui/react-provider: FluentProvider does not have your "theme" defined.',
+                    "Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider."
+                ].join(' '));
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
     return {
         applyStylesToPortals,
         // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -87,5 +89,5 @@ function shallowMerge(a, b) {
     return b;
 }
 function useTheme() {
-    return _react.useContext(_reactSharedContexts.ThemeContext_unstable);
+    return _react1.useContext(_reactSharedContexts.ThemeContext_unstable);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useFluentProvider.js"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, CustomStyleHooksContext_unstable as CustomStyleHooksContext } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport { useRenderer_unstable } from '@griffel/react';\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 */ export const useFluentProvider_unstable = (props, ref)=>{\n    const parentContext = useFluent();\n    const parentTheme = useTheme();\n    const parentOverrides = useOverrides();\n    const parentCustomStyleHooks = React.useContext(CustomStyleHooksContext) || {};\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   */ const { applyStylesToPortals =true , // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable , dir =parentContext.dir , targetDocument =parentContext.targetDocument , theme , overrides_unstable: overrides = {}  } = props;\n    const mergedTheme = shallowMerge(parentTheme, theme);\n    const mergedOverrides = shallowMerge(parentOverrides, overrides);\n    const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);\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    const renderer = useRenderer_unstable();\n    var _renderer_styleElementAttributes;\n    const { styleTagId , rule  } = useFluentProviderThemeStyleTag({\n        theme: mergedTheme,\n        targetDocument,\n        rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : {}\n    });\n    return {\n        applyStylesToPortals,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        customStyleHooks_unstable: mergedCustomStyleHooks,\n        dir,\n        targetDocument,\n        theme: mergedTheme,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        overrides_unstable: mergedOverrides,\n        themeClassName: styleTagId,\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ...props,\n            dir,\n            ref: useMergedRefs(ref, useFocusVisible({\n                targetDocument\n            }))\n        }),\n        serverStyleProps: {\n            cssRule: rule,\n            attributes: {\n                ...renderer.styleElementAttributes,\n                id: styleTagId\n            }\n        }\n    };\n};\nfunction shallowMerge(a, b) {\n    // Merge impacts perf: we should like to avoid it if it's possible\n    if (a && b) {\n        return {\n            ...a,\n            ...b\n        };\n    }\n    if (a) {\n        return a;\n    }\n    return b;\n}\nfunction useTheme() {\n    return React.useContext(ThemeContext);\n}\n"],"names":["useFluentProvider_unstable","props","ref","parentContext","useFluent","parentTheme","useTheme","parentOverrides","useOverrides","parentCustomStyleHooks","React","useContext","CustomStyleHooksContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","useEffect","process","env","NODE_ENV","undefined","console","warn","renderer","useRenderer_unstable","_renderer_styleElementAttributes","styleTagId","rule","useFluentProviderThemeStyleTag","rendererAttributes","styleElementAttributes","themeClassName","components","root","getNativeElementProps","useMergedRefs","useFocusVisible","serverStyleProps","cssRule","attributes","id","a","b","ThemeContext"],"mappings":";;;;+BAciBA;;aAAAA;;;8BAde;qCAC2J;gCACtI;6DAC9B;gDACwB;wBACV;AAS1B,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAMC,gBAAgBC,IAAAA,uCAAS;IAC/B,MAAMC,cAAcC;IACpB,MAAMC,kBAAkBC,IAAAA,0CAAY;IACpC,MAAMC,yBAAyBC,OAAMC,UAAU,CAACC,qDAAuB,KAAK,CAAC;IAC7E;;;;GAID,GAAG,MAAM,EAAEC,sBAAsB,IAAI,CAAA,EACpCC,0BAAyB,EAAGC,KAAKZ,cAAcY,GAAG,CAAA,EAAGC,gBAAgBb,cAAca,cAAc,CAAA,EAAGC,MAAK,EAAGC,oBAAoBC,YAAY,CAAC,CAAC,CAAA,EAAG,GAAGlB;IACpJ,MAAMmB,cAAcC,aAAahB,aAAaY;IAC9C,MAAMK,kBAAkBD,aAAad,iBAAiBY;IACtD,MAAMI,yBAAyBF,aAAaZ,wBAAwBK;IACpEJ,OAAMc,SAAS,CAAC,IAAI;QAChB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBP,gBAAgBQ,WAAW;YACpE,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;;;MAIpB,CAAC;QACC,CAAC;IACL,uDAAuD;IACvD,GAAG,EAAE;IACL,MAAMC,WAAWC,IAAAA,4BAAoB;IACrC,IAAIC;IACJ,MAAM,EAAEC,WAAU,EAAGC,KAAI,EAAG,GAAGC,IAAAA,8DAA8B,EAAC;QAC1DnB,OAAOG;QACPJ;QACAqB,oBAAoB,AAACJ,CAAAA,mCAAmCF,SAASO,sBAAsB,AAAD,MAAO,IAAI,IAAIL,qCAAqC,KAAK,IAAIA,mCAAmC,CAAC,CAAC;IAC5L;IACA,OAAO;QACHpB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBiB,gBAAgBL;QAChBM,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/B,GAAGzC,KAAK;YACRc;YACAb,KAAKyC,IAAAA,6BAAa,EAACzC,KAAK0C,IAAAA,6BAAe,EAAC;gBACpC5B;YACJ;QACJ;QACA6B,kBAAkB;YACdC,SAASX;YACTY,YAAY;gBACR,GAAGhB,SAASO,sBAAsB;gBAClCU,IAAId;YACR;QACJ;IACJ;AACJ;AACA,SAASb,aAAa4B,CAAC,EAAEC,CAAC,EAAE;IACxB,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACR,OAAO;YACH,GAAGD,CAAC;YACJ,GAAGC,CAAC;QACR;IACJ,CAAC;IACD,IAAID,GAAG;QACH,OAAOA;IACX,CAAC;IACD,OAAOC;AACX;AACA,SAAS5C,WAAW;IAChB,OAAOI,OAAMC,UAAU,CAACwC,0CAAY;AACxC"}
+{"version":3,"sources":["useFluentProvider.js"],"sourcesContent":["import { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, CustomStyleHooksContext_unstable as CustomStyleHooksContext } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\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 */ export const useFluentProvider_unstable = (props, ref)=>{\n    const parentContext = useFluent();\n    const parentTheme = useTheme();\n    const parentOverrides = useOverrides();\n    const parentCustomStyleHooks = React.useContext(CustomStyleHooksContext) || {};\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   */ const { applyStylesToPortals =true , // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable , dir =parentContext.dir , targetDocument =parentContext.targetDocument , theme , overrides_unstable: overrides = {}  } = props;\n    const mergedTheme = shallowMerge(parentTheme, theme);\n    const mergedOverrides = shallowMerge(parentOverrides, overrides);\n    const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);\n    const renderer = useRenderer_unstable();\n    var _renderer_styleElementAttributes;\n    const { styleTagId , rule  } = useFluentProviderThemeStyleTag({\n        theme: mergedTheme,\n        targetDocument,\n        rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : {}\n    });\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        React.useEffect(()=>{\n            if (mergedTheme === undefined) {\n                // eslint-disable-next-line no-console\n                console.warn([\n                    '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n                    \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\"\n                ].join(' '));\n            }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n    }\n    return {\n        applyStylesToPortals,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        customStyleHooks_unstable: mergedCustomStyleHooks,\n        dir,\n        targetDocument,\n        theme: mergedTheme,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        overrides_unstable: mergedOverrides,\n        themeClassName: styleTagId,\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ...props,\n            dir,\n            ref: useMergedRefs(ref, useFocusVisible({\n                targetDocument\n            }))\n        }),\n        serverStyleProps: {\n            cssRule: rule,\n            attributes: {\n                ...renderer.styleElementAttributes,\n                id: styleTagId\n            }\n        }\n    };\n};\nfunction shallowMerge(a, b) {\n    // Merge impacts perf: we should like to avoid it if it's possible\n    if (a && b) {\n        return {\n            ...a,\n            ...b\n        };\n    }\n    if (a) {\n        return a;\n    }\n    return b;\n}\nfunction useTheme() {\n    return React.useContext(ThemeContext);\n}\n"],"names":["useFluentProvider_unstable","props","ref","parentContext","useFluent","parentTheme","useTheme","parentOverrides","useOverrides","parentCustomStyleHooks","React","useContext","CustomStyleHooksContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","renderer","useRenderer_unstable","_renderer_styleElementAttributes","styleTagId","rule","useFluentProviderThemeStyleTag","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","getNativeElementProps","useMergedRefs","useFocusVisible","serverStyleProps","cssRule","attributes","id","a","b","ThemeContext"],"mappings":";;;;+BAciBA;;aAAAA;;;uBAdoB;8BACL;qCAC2J;gCACtI;8DAC9B;gDACwB;AASpC,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAMC,gBAAgBC,IAAAA,uCAAS;IAC/B,MAAMC,cAAcC;IACpB,MAAMC,kBAAkBC,IAAAA,0CAAY;IACpC,MAAMC,yBAAyBC,QAAMC,UAAU,CAACC,qDAAuB,KAAK,CAAC;IAC7E;;;;GAID,GAAG,MAAM,EAAEC,sBAAsB,IAAI,CAAA,EACpCC,0BAAyB,EAAGC,KAAKZ,cAAcY,GAAG,CAAA,EAAGC,gBAAgBb,cAAca,cAAc,CAAA,EAAGC,MAAK,EAAGC,oBAAoBC,YAAY,CAAC,CAAC,CAAA,EAAG,GAAGlB;IACpJ,MAAMmB,cAAcC,aAAahB,aAAaY;IAC9C,MAAMK,kBAAkBD,aAAad,iBAAiBY;IACtD,MAAMI,yBAAyBF,aAAaZ,wBAAwBK;IACpE,MAAMU,WAAWC,IAAAA,2BAAoB;IACrC,IAAIC;IACJ,MAAM,EAAEC,WAAU,EAAGC,KAAI,EAAG,GAAGC,IAAAA,8DAA8B,EAAC;QAC1DZ,OAAOG;QACPJ;QACAc,oBAAoB,AAACJ,CAAAA,mCAAmCF,SAASO,sBAAsB,AAAD,MAAO,IAAI,IAAIL,qCAAqC,KAAK,IAAIA,mCAAmC,CAAC,CAAC;IAC5L;IACA,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,sDAAsD;QACtDxB,QAAMyB,SAAS,CAAC,IAAI;YAChB,IAAIf,gBAAgBgB,WAAW;gBAC3B,sCAAsC;gBACtCC,QAAQC,IAAI,CAAC;oBACT;oBACA;iBACH,CAACC,IAAI,CAAC;YACX,CAAC;QACL,uDAAuD;QACvD,GAAG,EAAE;IACT,CAAC;IACD,OAAO;QACH1B;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBkB,gBAAgBb;QAChBc,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/B,GAAG1C,KAAK;YACRc;YACAb,KAAK0C,IAAAA,6BAAa,EAAC1C,KAAK2C,IAAAA,6BAAe,EAAC;gBACpC7B;YACJ;QACJ;QACA8B,kBAAkB;YACdC,SAASnB;YACToB,YAAY;gBACR,GAAGxB,SAASO,sBAAsB;gBAClCkB,IAAItB;YACR;QACJ;IACJ;AACJ;AACA,SAASN,aAAa6B,CAAC,EAAEC,CAAC,EAAE;IACxB,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACR,OAAO;YACH,GAAGD,CAAC;YACJ,GAAGC,CAAC;QACR;IACJ,CAAC;IACD,IAAID,GAAG;QACH,OAAOA;IACX,CAAC;IACD,OAAOC;AACX;AACA,SAAS7C,WAAW;IAChB,OAAOI,QAAMC,UAAU,CAACyC,0CAAY;AACxC"}

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

@@ -49,6 +49,33 @@ const useFluentProviderThemeStyleTag = (options)=>{
         theme
     ]);
     const rule = `.${styleTagId} { ${cssVarsAsString} }`;
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        _react.useMemo(()=>{
+            // Heads up!
+            // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,
+            // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
+            // of double render.
+            if (targetDocument) {
+                const providerSelector = `.${_useFluentProviderStylesStyles.fluentProviderClassNames.root}.${styleTagId}`;
+                const providerElements = targetDocument.querySelectorAll(providerSelector);
+                // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed
+                const isSSR = targetDocument.querySelector(`${providerSelector} > style[id="${styleTagId}"]`) !== null;
+                const elementsCount = isSSR ? 1 : 0;
+                if (providerElements.length > elementsCount) {
+                    // eslint-disable-next-line no-console
+                    console.error([
+                        '@fluentui/react-provider: There are conflicting ids in your DOM.',
+                        'Please make sure that you configured your application properly.',
+                        '\n',
+                        '\n',
+                        'Configuration guide: https://aka.ms/fluentui-conflicting-ids'
+                    ].join(' '));
+                }
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
     useHandleSSRStyleElements(targetDocument, styleTagId);
     useInsertionEffect(()=>{
         // The style element could already have been created during SSR - no need to recreate it

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

@@ -1 +1 @@
-{"version":3,"sources":["useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes)=>{\n    if (!target) {\n        return undefined;\n    }\n    const tag = target.createElement('style');\n    Object.keys(elementAttributes).forEach((attrName)=>{\n        tag.setAttribute(attrName, elementAttributes[attrName]);\n    });\n    target.head.appendChild(tag);\n    return tag;\n};\nconst insertSheet = (tag, rule)=>{\n    const sheet = tag.sheet;\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 * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */ export const useFluentProviderThemeStyleTag = (options)=>{\n    const { targetDocument , theme , rendererAttributes  } = options;\n    const styleTag = React.useRef();\n    const styleTagId = useId(fluentProviderClassNames.root);\n    const styleElementAttributes = rendererAttributes;\n    const cssVarsAsString = React.useMemo(()=>{\n        return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{\n            cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n            return cssVarRule;\n        }, '') : '';\n    }, [\n        theme\n    ]);\n    const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n    useHandleSSRStyleElements(targetDocument, styleTagId);\n    useInsertionEffect(()=>{\n        // The style element could already have been created during SSR - no need to recreate it\n        const ssrStyleElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.getElementById(styleTagId);\n        if (ssrStyleElement) {\n            styleTag.current = ssrStyleElement;\n        } else {\n            styleTag.current = createStyleTag(targetDocument, {\n                ...styleElementAttributes,\n                id: styleTagId\n            });\n            if (styleTag.current) {\n                insertSheet(styleTag.current, rule);\n            }\n        }\n        return ()=>{\n            var _styleTag_current;\n            (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();\n        };\n    }, [\n        styleTagId,\n        targetDocument,\n        rule,\n        styleElementAttributes\n    ]);\n    return {\n        styleTagId,\n        rule\n    };\n};\nfunction useHandleSSRStyleElements(targetDocument, styleTagId) {\n    // Using a state factory so that this logic only runs once per render\n    // Each FluentProvider can create its own style element during SSR as a slot\n    // Moves all theme style elements to document head during render to avoid hydration errors.\n    // Should be strict mode safe since the logic is idempotent.\n    React.useState(()=>{\n        if (!targetDocument) {\n            return;\n        }\n        const themeStyleElement = targetDocument.getElementById(styleTagId);\n        if (themeStyleElement) {\n            targetDocument.head.append(themeStyleElement);\n        }\n    });\n}\n"],"names":["useFluentProviderThemeStyleTag","useInsertionEffect","React","useIsomorphicLayoutEffect","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","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","_styleTag_current","remove","useState","themeStyleElement","append"],"mappings":"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"}
+{"version":3,"sources":["useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes)=>{\n    if (!target) {\n        return undefined;\n    }\n    const tag = target.createElement('style');\n    Object.keys(elementAttributes).forEach((attrName)=>{\n        tag.setAttribute(attrName, elementAttributes[attrName]);\n    });\n    target.head.appendChild(tag);\n    return tag;\n};\nconst insertSheet = (tag, rule)=>{\n    const sheet = tag.sheet;\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 * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */ export const useFluentProviderThemeStyleTag = (options)=>{\n    const { targetDocument , theme , rendererAttributes  } = options;\n    const styleTag = React.useRef();\n    const styleTagId = useId(fluentProviderClassNames.root);\n    const styleElementAttributes = rendererAttributes;\n    const cssVarsAsString = React.useMemo(()=>{\n        return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{\n            cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n            return cssVarRule;\n        }, '') : '';\n    }, [\n        theme\n    ]);\n    const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        React.useMemo(()=>{\n            // Heads up!\n            // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n            // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n            // of double render.\n            if (targetDocument) {\n                const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n                const providerElements = targetDocument.querySelectorAll(providerSelector);\n                // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n                const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n                const elementsCount = isSSR ? 1 : 0;\n                if (providerElements.length > elementsCount) {\n                    // eslint-disable-next-line no-console\n                    console.error([\n                        '@fluentui/react-provider: There are conflicting ids in your DOM.',\n                        'Please make sure that you configured your application properly.',\n                        '\\n',\n                        '\\n',\n                        'Configuration guide: https://aka.ms/fluentui-conflicting-ids'\n                    ].join(' '));\n                }\n            }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n    }\n    useHandleSSRStyleElements(targetDocument, styleTagId);\n    useInsertionEffect(()=>{\n        // The style element could already have been created during SSR - no need to recreate it\n        const ssrStyleElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.getElementById(styleTagId);\n        if (ssrStyleElement) {\n            styleTag.current = ssrStyleElement;\n        } else {\n            styleTag.current = createStyleTag(targetDocument, {\n                ...styleElementAttributes,\n                id: styleTagId\n            });\n            if (styleTag.current) {\n                insertSheet(styleTag.current, rule);\n            }\n        }\n        return ()=>{\n            var _styleTag_current;\n            (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();\n        };\n    }, [\n        styleTagId,\n        targetDocument,\n        rule,\n        styleElementAttributes\n    ]);\n    return {\n        styleTagId,\n        rule\n    };\n};\nfunction useHandleSSRStyleElements(targetDocument, styleTagId) {\n    // Using a state factory so that this logic only runs once per render\n    // Each FluentProvider can create its own style element during SSR as a slot\n    // Moves all theme style elements to document head during render to avoid hydration errors.\n    // Should be strict mode safe since the logic is idempotent.\n    React.useState(()=>{\n        if (!targetDocument) {\n            return;\n        }\n        const themeStyleElement = targetDocument.getElementById(styleTagId);\n        if (themeStyleElement) {\n            targetDocument.head.append(themeStyleElement);\n        }\n    });\n}\n"],"names":["useFluentProviderThemeStyleTag","useInsertionEffect","React","useIsomorphicLayoutEffect","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","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","_styleTag_current","remove","useState","themeStyleElement","append"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.7.12",
+  "version": "9.7.14",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,11 +33,11 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.7.0",
-    "@fluentui/react-tabster": "^9.11.1",
-    "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-utilities": "^9.10.1",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
+    "@fluentui/react-shared-contexts": "^9.7.1",
+    "@fluentui/react-tabster": "^9.12.0",
+    "@fluentui/react-theme": "^9.1.10",
+    "@fluentui/react-utilities": "^9.11.0",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.13",
     "@griffel/core": "^1.11.0",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"