@fluentui/react-provider 9.3.5 → 9.4.0

package/CHANGELOG.json

@@ -2,7 +2,40 @@
   "name": "@fluentui/react-provider",
   "entries": [
     {
-      "date": "Wed, 15 Feb 2023 11:41:24 GMT",
+      "date": "Wed, 08 Mar 2023 17:39:08 GMT",
+      "tag": "@fluentui/react-provider_v9.4.0",
+      "version": "9.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-provider",
+            "commit": "27c3cfe8a95bd26541c7c47ad2fd7fbc8ea332df",
+            "comment": "feat: Added customstylehooks property"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-tabster to v9.5.4",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-provider",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Feb 2023 11:44:52 GMT",
       "tag": "@fluentui/react-provider_v9.3.5",
       "version": "9.3.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-provider
 
-This log was last generated on Wed, 15 Feb 2023 11:41:24 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Mar 2023 17:39:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.4.0)
+
+Wed, 08 Mar 2023 17:39:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.3.5..@fluentui/react-provider_v9.4.0)
+
+### Minor changes
+
+- feat: Added customstylehooks property ([PR #26943](https://github.com/microsoft/fluentui/pull/26943) by gcox@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-tabster to v9.5.4 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
 ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.3.5)
 
-Wed, 15 Feb 2023 11:41:24 GMT 
+Wed, 15 Feb 2023 11:44:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.3.4..@fluentui/react-provider_v9.3.5)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
 import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
@@ -13,6 +14,7 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha
 
 export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots, "root">, "dir"> & {
     applyStylesToPortals?: boolean | undefined;
+    customStyleHooks_unstable?: Partial<CustomStyleHooksContextValue_unstable> | undefined;
     dir?: "ltr" | "rtl" | undefined;
     targetDocument?: Document | undefined;
     theme?: Partial<Theme> | undefined;
@@ -21,19 +23,23 @@ export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<Comp
 
 export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
 
-export declare type FluentProviderContextValues = Pick<FluentProviderState, 'theme' | 'overrides_unstable'> & {
+export declare type FluentProviderContextValues = Pick<FluentProviderState, 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'> & {
     provider: ProviderContextValue_unstable;
     themeClassName: ThemeClassNameContextValue_unstable;
     textDirection: 'ltr' | 'rtl';
     tooltip: TooltipVisibilityContextValue_unstable;
 };
 
+export declare type FluentProviderCustomStyleHooks = Partial<CustomStyleHooksContextValue_unstable>;
+
 export declare type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {
     /**
      * Passes styles applied to a component down to portals if enabled.
      * @default true
      */
     applyStylesToPortals?: boolean;
+    /** Sets the hooks for custom styling components. */
+    customStyleHooks_unstable?: FluentProviderCustomStyleHooks;
     /** Sets the direction of text & generated styles. */
     dir?: 'ltr' | 'rtl';
     /** Provides the document, can be undefined during SSR render. */
@@ -47,7 +53,7 @@ export declare type FluentProviderSlots = {
     root: Slot<'div'>;
 };
 
-export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir' | 'overrides_unstable'>> & {
+export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
     theme: ThemeContextValue_unstable;
     themeClassName: string;
 };

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,uCAAuC,QAAQ,kCAAkC;AAG1F,OAAO,MAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EACpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGN,uCAAuC,CAACK,KAAK,CAAC;EAEpE,OAAOR,6BAA6B,CAACQ,KAAK,EAAEC,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFL,cAAc,CAACM,WAAW,GAAG,gBAAgB","names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"]}
+{"version":3,"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,uCAAuC,QAAQ,kCAAkC;AAG1F,OAAO,MAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EACpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGN,uCAAuC,CAACK,KAAK,CAAC;EAEpE,OAAOR,6BAA6B,CAACQ,KAAK,EAAEC,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFL,cAAc,CAACM,WAAW,GAAG,gBAAgB"}

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

@@ -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  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"]}
+{"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  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\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\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = Partial<CustomStyleHooksContextValue>;\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 hooks for custom styling components. */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\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<\n    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n  > & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n  };\n\nexport type FluentProviderContextValues = Pick<\n  FluentProviderState,\n  'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  tooltip: TooltipVisibilityContextValue;\n};\n"]}

package/lib/components/FluentProvider/renderFluentProvider.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextDirectionProvider } from '@griffel/react';
-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 { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider, CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts';
 import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of FluentProvider
@@ -10,12 +10,17 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = getSlots(state);
+  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
+  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
+  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
   return /*#__PURE__*/React.createElement(Provider, {
     value: contextValues.provider
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     value: contextValues.theme
   }, /*#__PURE__*/React.createElement(ThemeClassNameProvider, {
     value: contextValues.themeClassName
+  }, /*#__PURE__*/React.createElement(CustomStyleHooksProvider, {
+    value: contextValues.customStyleHooks_unstable
   }, /*#__PURE__*/React.createElement(TooltipVisibilityProvider, {
     value: contextValues.tooltip
   }, /*#__PURE__*/React.createElement(TextDirectionProvider, {
@@ -24,6 +29,6 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
     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

@@ -1 +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"]}
+{"version":3,"names":["React","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","getSlots","renderFluentProvider_unstable","state","contextValues","slots","slotProps","createElement","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","overrides_unstable","root","children"],"sources":["../src/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  CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\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  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <CustomStyleHooksProvider\n            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n          >\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          </CustomStyleHooksProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"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,EACzDC,iCAAiC,IAAIC,wBAAwB,QAExD,iCAAiC;AACxC,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAGA,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAsBE,KAAK,CAAC;EAEjE;EACA;EACA;EAEA,oBACEhB,KAAA,CAAAoB,aAAA,CAACf,QAAQ;IAACgB,KAAK,EAAEJ,aAAa,CAACK;EAAQ,gBACrCtB,KAAA,CAAAoB,aAAA,CAACX,aAAa;IAACY,KAAK,EAAEJ,aAAa,CAACM;EAAK,gBACvCvB,KAAA,CAAAoB,aAAA,CAACT,sBAAsB;IAACU,KAAK,EAAEJ,aAAa,CAACO;EAAc,gBACzDxB,KAAA,CAAAoB,aAAA,CAACP,wBAAwB;IACvBQ,KAAK,EAAEJ,aAAa,CAACQ;EAAmE,gBAExFzB,KAAA,CAAAoB,aAAA,CAACb,yBAAyB;IAACc,KAAK,EAAEJ,aAAa,CAACS;EAAO,gBACrD1B,KAAA,CAAAoB,aAAA,CAACnB,qBAAqB;IAAC0B,GAAG,EAAEV,aAAa,CAACW;EAAa,gBACrD5B,KAAA,CAAAoB,aAAA,CAACjB,iBAAiB;IAACkB,KAAK,EAAEJ,aAAa,CAACY;EAAkB,gBACxD7B,KAAA,CAAAoB,aAAA,CAACF,KAAK,CAACY,IAAI;IAAA,GAAKX,SAAS,CAACW;EAAI,GAAGd,KAAK,CAACc,IAAI,CAACC,QAAQ,CAAc,CAChD,CACE,CACE,CACH,CACJ,CACX,CACP;AAEf,CAAC"}

package/lib/components/FluentProvider/useFluentProvider.js

@@ -1,5 +1,5 @@
 import { useFocusVisible } from '@fluentui/react-tabster';
-import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
+import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, useCustomStyleHooks_unstable as useCustomStyleHooks } from '@fluentui/react-shared-contexts';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
@@ -16,6 +16,7 @@ export const useFluentProvider_unstable = (props, ref) => {
   const parentContext = useFluent();
   const parentTheme = useTheme();
   const parentOverrides = useOverrides();
+  const parentCustomStyleHooks = useCustomStyleHooks();
   /**
    * TODO: add merge functions to "dir" merge,
    * nesting providers with the same "dir" should not add additional attributes to DOM
@@ -23,6 +24,8 @@ export const useFluentProvider_unstable = (props, ref) => {
    */
   const {
     applyStylesToPortals = true,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    customStyleHooks_unstable,
     dir = parentContext.dir,
     targetDocument = parentContext.targetDocument,
     theme,
@@ -30,6 +33,8 @@ export const useFluentProvider_unstable = (props, ref) => {
   } = props;
   const mergedTheme = shallowMerge(parentTheme, theme);
   const mergedOverrides = shallowMerge(parentOverrides, overrides);
+  // parentCustomStyleHooks will not be a partial
+  const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
       // eslint-disable-next-line no-console
@@ -43,6 +48,8 @@ export const useFluentProvider_unstable = (props, ref) => {
   }, []);
   return {
     applyStylesToPortals,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    customStyleHooks_unstable: mergedCustomStyleHooks,
     dir,
     targetDocument,
     theme: mergedTheme,

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

@@ -1 +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"]}
+{"version":3,"names":["useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","useCustomStyleHooks_unstable","useCustomStyleHooks","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","components","root","a","b","useContext"],"sources":["../src/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  useCustomStyleHooks_unstable as useCustomStyleHooks,\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';\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 = useCustomStyleHooks();\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  // parentCustomStyleHooks will not be a partial\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  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: 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"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,SACEC,qBAAqB,IAAIC,YAAY,EACrCC,kBAAkB,IAAIC,SAAS,EAC/BC,qBAAqB,IAAIC,YAAY,EACrCC,4BAA4B,IAAIC,mBAAmB,QAC9C,iCAAiC;AAMxC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,kCAAkC;AAGjF;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGZ,SAAS,EAAE;EACjC,MAAMa,WAAW,GAAGC,QAAQ,EAAE;EAC9B,MAAMC,eAAe,GAAGb,YAAY,EAAE;EACtC,MAAMc,sBAAsB,GAAGZ,mBAAmB,EAAE;EAEpD;;;;;EAKA,MAAM;IACJa,oBAAoB,GAAG,IAAI;IAC3B;IACAC,yBAAyB;IACzBC,GAAG,GAAGP,aAAa,CAACO,GAAG;IACvBC,cAAc,GAAGR,aAAa,CAACQ,cAAc;IAC7CC,KAAK;IACLC,kBAAkB,EAAEC,SAAS,GAAG;EAAE,CACnC,GAAGb,KAAK;EACT,MAAMc,WAAW,GAAGC,YAAY,CAACZ,WAAW,EAAEQ,KAAK,CAAC;EAEpD,MAAMK,eAAe,GAAGD,YAAY,CAACV,eAAe,EAAEQ,SAAS,CAAC;EAEhE;EACA,MAAMI,sBAAsB,GAAGF,YAAY,CACzCT,sBAAsB,EACtBE,yBAAyB,CACM;EAEjCX,KAAK,CAACqB,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;IACLjB,oBAAoB;IACpB;IACAC,yBAAyB,EAAES,sBAAsB;IACjDR,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEG,WAAW;IAClB;IACAF,kBAAkB,EAAEI,eAAe;IACnCS,cAAc,EAAE3B,8BAA8B,CAAC;MAAEa,KAAK,EAAEG,WAAW;MAAEJ;IAAc,CAAE,CAAC;IAEtFgB,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEhC,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGK,KAAK;MACRS,GAAG;MACHR,GAAG,EAAEL,aAAa,CAACK,GAAG,EAAEf,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAED,SAAS6B,YAAYA,CAAIa,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,SAASzB,QAAQA,CAAA;EACf,OAAOP,KAAK,CAACiC,UAAU,CAAC1C,YAAY,CAAC;AACvC"}

package/lib/components/FluentProvider/useFluentProviderContextValues.js

@@ -3,11 +3,14 @@ export function useFluentProviderContextValues_unstable(state) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const {
     applyStylesToPortals,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    customStyleHooks_unstable,
     dir,
     root,
     targetDocument,
     theme,
     themeClassName,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable
   } = state;
   const provider = React.useMemo(() => ({
@@ -17,6 +20,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
+    customStyleHooks_unstable,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable,
     provider,

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

@@ -1 +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"]}
+{"version":3,"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","textDirection","className"],"sources":["../src/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 {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir,\n    root,\n    targetDocument,\n    theme,\n    themeClassName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n  } = 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    customStyleHooks_unstable,\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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,uCAAuCA,CAACC,KAA0B;EAChF;EACA,MAAM;IACJC,oBAAoB;IACpB;IACAC,yBAAyB;IACzBC,GAAG;IACHC,IAAI;IACJC,cAAc;IACdC,KAAK;IACLC,cAAc;IACd;IACAC;EAAkB,CACnB,GAAGR,KAAK;EAET,MAAMS,QAAQ,GAAGX,KAAK,CAACY,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACL;IACAV,yBAAyB;IACzB;IACAM,kBAAkB;IAClBC,QAAQ;IACRI,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEN,oBAAoB,GAAGG,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAOhB;AAEF;AACA,OAAO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGR,oBAAoB,EAAE;EACvC,MAAMS,MAAM,GAAGJ,SAAS,CAAC;IAAEK,GAAG,EAAEH,KAAK,CAACG,GAAG;IAAEF;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACH,IAAI,CAACO,SAAS,GAAGZ,YAAY,CACjCI,wBAAwB,CAACC,IAAI,EAC7BG,KAAK,CAACK,cAAc,EACpBH,MAAM,CAACL,IAAI,EACXG,KAAK,CAACH,IAAI,CAACO,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC","names":["mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAOhB;AAEF;AACA,OAAO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGhB,oBAAoB,EAAE;EACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;IAAEa,GAAG,EAAEH,KAAK,CAACG,GAAG;IAAEF;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACX,IAAI,CAACe,SAAS,GAAGpB,YAAY,CACjCI,wBAAwB,CAACC,IAAI,EAC7BW,KAAK,CAACK,cAAc,EACpBH,MAAM,CAACb,IAAI,EACXW,KAAK,CAACX,IAAI,CAACe,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","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"]}
+{"version":3,"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","_a","remove"],"sources":["../src/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"],"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,GAAGA,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,GAAGA,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,CAAA4B,EAAA,GAAAZ,QAAQ,CAACU,OAAO,cAAAE,EAAA,uBAAAA,EAAA,CAAEC,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACX,UAAU,EAAEL,cAAc,EAAEb,IAAI,EAAEoB,sBAAsB,CAAC,CAAC;EAE9D,OAAOF,UAAU;AACnB,CAAC"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,kBAAkB","names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"]}
+{"version":3,"names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sources":["../src/packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"],"mappings":"AAAA,SACEA,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,kBAAkB"}

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

@@ -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  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"]}
+{"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  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\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\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = Partial<CustomStyleHooksContextValue>;\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 hooks for custom styling components. */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\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<\n    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n  > & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n  };\n\nexport type FluentProviderContextValues = Pick<\n  FluentProviderState,\n  'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  tooltip: TooltipVisibilityContextValue;\n};\n"]}

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

@@ -7,13 +7,17 @@ define(["require", "exports", "tslib", "react", "@griffel/react", "@fluentui/rea
      */
     var renderFluentProvider_unstable = function (state, contextValues) {
         var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
+        // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
+        // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
         return (React.createElement(react_shared_contexts_1.Provider_unstable, { value: contextValues.provider },
             React.createElement(react_shared_contexts_1.ThemeProvider_unstable, { value: contextValues.theme },
                 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(react_shared_contexts_1.OverridesProvider_unstable, { value: contextValues.overrides_unstable },
-                                React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children))))))));
+                    React.createElement(react_shared_contexts_1.CustomStyleHooksProvider_unstable, { value: contextValues.customStyleHooks_unstable },
+                        React.createElement(react_shared_contexts_1.TooltipVisibilityProvider_unstable, { 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, tslib_1.__assign({}, slotProps.root), state.root.children)))))))));
     };
     exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
 });

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

@@ -1 +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"]}
+{"version":3,"file":"renderFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;IAcA;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAC3C,KAA0B,EAC1B,aAA0C;QAEpC,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,+FAA+F;QAC/F,oFAAoF;QACpF,0GAA0G;QAE1G,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,yDAAwB,IACvB,KAAK,EAAE,aAAa,CAAC,yBAAmE;wBAExF,oBAAC,0DAAyB,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO;4BACrD,oBAAC,6BAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,aAAa;gCACrD,oBAAC,kDAAiB,IAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB;oCACxD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAc,CAChD,CACE,CACE,CACH,CACJ,CACX,CACP,CACZ,CAAC;IACJ,CAAC,CAAC;IA7BW,QAAA,6BAA6B,iCA6BxC","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  CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\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  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <CustomStyleHooksProvider\n            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n          >\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          </CustomStyleHooksProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"]}

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

@@ -15,14 +15,19 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
         var parentContext = react_shared_contexts_1.useFluent_unstable();
         var parentTheme = useTheme();
         var parentOverrides = react_shared_contexts_1.useOverrides_unstable();
+        var parentCustomStyleHooks = react_shared_contexts_1.useCustomStyleHooks_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, _d = props.overrides_unstable, overrides = _d === void 0 ? {} : _d;
+        var _a = props.applyStylesToPortals, applyStylesToPortals = _a === void 0 ? true : _a, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        customStyleHooks_unstable = props.customStyleHooks_unstable, _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);
+        // parentCustomStyleHooks will not be a partial
+        var mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
         React.useEffect(function () {
             if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
                 // eslint-disable-next-line no-console
@@ -32,6 +37,8 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
         }, []);
         return {
             applyStylesToPortals: applyStylesToPortals,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            customStyleHooks_unstable: mergedCustomStyleHooks,
             dir: dir,
             targetDocument: targetDocument,
             theme: mergedTheme,

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

@@ -1 +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"]}
+{"version":3,"file":"useFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;IAiBA;;;;;;;;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;QACvC,IAAM,sBAAsB,GAAG,oDAAmB,EAAE,CAAC;QAErD;;;;WAIG;QAED,IAAA,KAOE,KAAK,qBAPoB,EAA3B,oBAAoB,mBAAG,IAAI,KAAA;QAC3B,gEAAgE;QAChE,yBAAyB,GAKvB,KAAK,0BALkB,EACzB,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,+CAA+C;QAC/C,IAAM,sBAAsB,GAAG,YAAY,CACzC,sBAAsB,EACtB,yBAAyB,CACM,CAAC;QAElC,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,gEAAgE;YAChE,yBAAyB,EAAE,sBAAsB;YACjD,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;IAlEW,QAAA,0BAA0B,8BAkErC;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  useCustomStyleHooks_unstable as useCustomStyleHooks,\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';\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 = useCustomStyleHooks();\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  // parentCustomStyleHooks will not be a partial\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  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: 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

@@ -4,11 +4,17 @@ define(["require", "exports", "react"], function (require, exports, React) {
     exports.useFluentProviderContextValues_unstable = void 0;
     function useFluentProviderContextValues_unstable(state) {
         // 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 applyStylesToPortals = state.applyStylesToPortals, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        customStyleHooks_unstable = state.customStyleHooks_unstable, dir = state.dir, root = state.root, targetDocument = state.targetDocument, theme = state.theme, themeClassName = state.themeClassName, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        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
+            customStyleHooks_unstable: customStyleHooks_unstable,
             // eslint-disable-next-line @typescript-eslint/naming-convention
             overrides_unstable: overrides_unstable,
             provider: provider,

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

@@ -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;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"]}
+{"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;QAE9D,IAAA,oBAAoB,GAUlB,KAAK,qBAVa;QACpB,gEAAgE;QAChE,yBAAyB,GAQvB,KAAK,0BARkB,EACzB,GAAG,GAOD,KAAK,IAPJ,EACH,IAAI,GAMF,KAAK,KANH,EACJ,cAAc,GAKZ,KAAK,eALO,EACd,KAAK,GAIH,KAAK,MAJF,EACL,cAAc,GAGZ,KAAK,eAHO;QACd,gEAAgE;QAChE,kBAAkB,GAChB,KAAK,mBADW,CACV;QAEV,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,yBAAyB,2BAAA;YACzB,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;IA9BD,0FA8BC","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 {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir,\n    root,\n    targetDocument,\n    theme,\n    themeClassName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n  } = 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    customStyleHooks_unstable,\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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-provider/src/index.ts"],"names":[],"mappings":";;;;IACE,0HAAA,wBAAwB,OAAA;IACxB,gHAAA,cAAc,OAAA;IACd,+HAAA,6BAA6B,OAAA;IAC7B,yIAAA,uCAAuC,OAAA;IACvC,4HAAA,0BAA0B,OAAA;IAC1B,kIAAA,gCAAgC,OAAA;IAChC,gIAAA,8BAA8B,OAAA","sourcesContent":["export {\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-provider/src/index.ts"],"names":[],"mappings":";;;;IACE,0HAAA,wBAAwB,OAAA;IACxB,gHAAA,cAAc,OAAA;IACd,+HAAA,6BAA6B,OAAA;IAC7B,yIAAA,uCAAuC,OAAA;IACvC,4HAAA,0BAA0B,OAAA;IAC1B,kIAAA,gCAAgC,OAAA;IAChC,gIAAA,8BAA8B,OAAA","sourcesContent":["export {\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"]}

package/lib-commonjs/FluentProvider.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/FluentProvider.ts"],"sourcesContent":["export * from './components/FluentProvider/index';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-provider/src/FluentProvider.ts"],"sourcesContent":["export * from './components/FluentProvider/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,uCAAAC,OAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAGaA,sBAAc,gBAAGC,KAAK,CAACC,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,8CAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EACpDG,0DAAgC,CAACF,KAAK,CAAC;EAEvC,MAAMG,aAAa,GAAGC,wEAAuC,CAACJ,KAAK,CAAC;EAEpE,OAAOK,oDAA6B,CAACL,KAAK,EAAEG,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFR,sBAAc,CAACW,WAAW,GAAG,gBAAgB","names":["exports","React","forwardRef","props","ref","state","useFluentProvider_1","useFluentProviderStyles_1","contextValues","useFluentProviderContextValues_1","renderFluentProvider_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"]}
+{"version":3,"names":["React","require","renderFluentProvider_1","useFluentProvider_1","useFluentProviderStyles_1","useFluentProviderContextValues_1","exports","FluentProvider","forwardRef","props","ref","state","useFluentProvider_unstable","useFluentProviderStyles_unstable","contextValues","useFluentProviderContextValues_unstable","renderFluentProvider_unstable","displayName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,sBAAA,gBAAAD,OAAA;AACA,MAAAE,mBAAA,gBAAAF,OAAA;AACA,MAAAG,yBAAA,gBAAAH,OAAA;AACA,MAAAI,gCAAA,gBAAAJ,OAAA;AAGaK,OAAA,CAAAC,cAAc,gBAAGP,KAAK,CAACQ,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGR,mBAAA,CAAAS,0BAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EACpDN,yBAAA,CAAAS,gCAAgC,CAACF,KAAK,CAAC;EAEvC,MAAMG,aAAa,GAAGT,gCAAA,CAAAU,uCAAuC,CAACJ,KAAK,CAAC;EAEpE,OAAOT,sBAAA,CAAAc,6BAA6B,CAACL,KAAK,EAAEG,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFR,OAAA,CAAAC,cAAc,CAACU,WAAW,GAAG,gBAAgB"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"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  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\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\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = Partial<CustomStyleHooksContextValue>;\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 hooks for custom styling components. */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\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<\n    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n  > & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n  };\n\nexport type FluentProviderContextValues = Pick<\n  FluentProviderState,\n  'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  tooltip: TooltipVisibilityContextValue;\n};\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/index.ts"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/index.ts"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sCAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sCAAAC,OAAA"}

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

@@ -16,12 +16,17 @@ const renderFluentProvider_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
+  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
+  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
+  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
   return React.createElement(react_shared_contexts_1.Provider_unstable, {
     value: contextValues.provider
   }, React.createElement(react_shared_contexts_1.ThemeProvider_unstable, {
     value: contextValues.theme
   }, React.createElement(react_shared_contexts_1.ThemeClassNameProvider_unstable, {
     value: contextValues.themeClassName
+  }, React.createElement(react_shared_contexts_1.CustomStyleHooksProvider_unstable, {
+    value: contextValues.customStyleHooks_unstable
   }, React.createElement(react_shared_contexts_1.TooltipVisibilityProvider_unstable, {
     value: contextValues.tooltip
   }, React.createElement(react_1.TextDirectionProvider, {
@@ -30,7 +35,7 @@ const renderFluentProvider_unstable = (state, contextValues) => {
     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

@@ -1 +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"]}
+{"version":3,"names":["React","require","react_1","react_shared_contexts_1","react_utilities_1","renderFluentProvider_unstable","state","contextValues","slots","slotProps","getSlots","createElement","Provider_unstable","value","provider","ThemeProvider_unstable","theme","ThemeClassNameProvider_unstable","themeClassName","CustomStyleHooksProvider_unstable","customStyleHooks_unstable","TooltipVisibilityProvider_unstable","tooltip","TextDirectionProvider","dir","textDirection","OverridesProvider_unstable","overrides_unstable","root","children","exports"],"sources":["../src/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  CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\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  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <CustomStyleHooksProvider\n            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n          >\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          </CustomStyleHooksProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,uBAAA,gBAAAF,OAAA;AASA,MAAAG,iBAAA,gBAAAH,OAAA;AAGA;;;AAGO,MAAMI,6BAA6B,GAAGA,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAsBJ,KAAK,CAAC;EAEjE;EACA;EACA;EAEA,OACEN,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAS,iBAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GACrCd,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAY,sBAAa;IAACF,KAAK,EAAEN,aAAa,CAACS;EAAK,GACvChB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAc,+BAAsB;IAACJ,KAAK,EAAEN,aAAa,CAACW;EAAc,GACzDlB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAgB,iCAAwB;IACvBN,KAAK,EAAEN,aAAa,CAACa;EAAmE,GAExFpB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAkB,kCAAyB;IAACR,KAAK,EAAEN,aAAa,CAACe;EAAO,GACrDtB,KAAA,CAAAW,aAAA,CAACT,OAAA,CAAAqB,qBAAqB;IAACC,GAAG,EAAEjB,aAAa,CAACkB;EAAa,GACrDzB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAuB,0BAAiB;IAACb,KAAK,EAAEN,aAAa,CAACoB;EAAkB,GACxD3B,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACoB,IAAI;IAAA,GAAKnB,SAAS,CAACmB;EAAI,GAAGtB,KAAK,CAACsB,IAAI,CAACC,QAAQ,CAAc,CAChD,CACE,CACE,CACH,CACJ,CACX,CACP;AAEf,CAAC;AA7BYC,OAAA,CAAAzB,6BAA6B,GAAAA,6BAAA"}

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

@@ -22,6 +22,7 @@ const useFluentProvider_unstable = (props, ref) => {
   const parentContext = react_shared_contexts_1.useFluent_unstable();
   const parentTheme = useTheme();
   const parentOverrides = react_shared_contexts_1.useOverrides_unstable();
+  const parentCustomStyleHooks = react_shared_contexts_1.useCustomStyleHooks_unstable();
   /**
    * TODO: add merge functions to "dir" merge,
    * nesting providers with the same "dir" should not add additional attributes to DOM
@@ -29,6 +30,8 @@ const useFluentProvider_unstable = (props, ref) => {
    */
   const {
     applyStylesToPortals = true,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    customStyleHooks_unstable,
     dir = parentContext.dir,
     targetDocument = parentContext.targetDocument,
     theme,
@@ -36,6 +39,8 @@ const useFluentProvider_unstable = (props, ref) => {
   } = props;
   const mergedTheme = shallowMerge(parentTheme, theme);
   const mergedOverrides = shallowMerge(parentOverrides, overrides);
+  // parentCustomStyleHooks will not be a partial
+  const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
       // eslint-disable-next-line no-console
@@ -49,6 +54,8 @@ const useFluentProvider_unstable = (props, ref) => {
   }, []);
   return {
     applyStylesToPortals,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    customStyleHooks_unstable: mergedCustomStyleHooks,
     dir,
     targetDocument,
     theme: mergedTheme,

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

@@ -1 +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"]}
+{"version":3,"names":["react_tabster_1","require","react_shared_contexts_1","react_utilities_1","React","useFluentProviderThemeStyleTag_1","useFluentProvider_unstable","props","ref","parentContext","useFluent_unstable","parentTheme","useTheme","parentOverrides","useOverrides_unstable","parentCustomStyleHooks","useCustomStyleHooks_unstable","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag","components","root","getNativeElementProps","useMergedRefs","useFocusVisible","exports","a","b","useContext","ThemeContext_unstable"],"sources":["../src/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  useCustomStyleHooks_unstable as useCustomStyleHooks,\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';\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 = useCustomStyleHooks();\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  // parentCustomStyleHooks will not be a partial\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  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: 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"],"mappings":";;;;;;AAAA,MAAAA,eAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AAWA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,KAAA,gBAAAH,OAAA;AACA,MAAAI,gCAAA,gBAAAJ,OAAA;AAGA;;;;;;;;;AASO,MAAMK,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGP,uBAAA,CAAAQ,kBAAS,EAAE;EACjC,MAAMC,WAAW,GAAGC,QAAQ,EAAE;EAC9B,MAAMC,eAAe,GAAGX,uBAAA,CAAAY,qBAAY,EAAE;EACtC,MAAMC,sBAAsB,GAAGb,uBAAA,CAAAc,4BAAmB,EAAE;EAEpD;;;;;EAKA,MAAM;IACJC,oBAAoB,GAAG,IAAI;IAC3B;IACAC,yBAAyB;IACzBC,GAAG,GAAGV,aAAa,CAACU,GAAG;IACvBC,cAAc,GAAGX,aAAa,CAACW,cAAc;IAC7CC,KAAK;IACLC,kBAAkB,EAAEC,SAAS,GAAG;EAAE,CACnC,GAAGhB,KAAK;EACT,MAAMiB,WAAW,GAAGC,YAAY,CAACd,WAAW,EAAEU,KAAK,CAAC;EAEpD,MAAMK,eAAe,GAAGD,YAAY,CAACZ,eAAe,EAAEU,SAAS,CAAC;EAEhE;EACA,MAAMI,sBAAsB,GAAGF,YAAY,CACzCV,sBAAsB,EACtBG,yBAAyB,CACM;EAEjCd,KAAK,CAACwB,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;IACLjB,oBAAoB;IACpB;IACAC,yBAAyB,EAAES,sBAAsB;IACjDR,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEG,WAAW;IAClB;IACAF,kBAAkB,EAAEI,eAAe;IACnCS,cAAc,EAAE9B,gCAAA,CAAA+B,8BAA8B,CAAC;MAAEf,KAAK,EAAEG,WAAW;MAAEJ;IAAc,CAAE,CAAC;IAEtFiB,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEnC,iBAAA,CAAAoC,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGhC,KAAK;MACRY,GAAG;MACHX,GAAG,EAAEL,iBAAA,CAAAqC,aAAa,CAAChC,GAAG,EAAER,eAAA,CAAAyC,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAlEYC,OAAA,CAAApC,0BAA0B,GAAAA,0BAAA;AAoEvC,SAASmB,YAAYA,CAAIkB,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,SAAShC,QAAQA,CAAA;EACf,OAAOR,KAAK,CAACyC,UAAU,CAAC3C,uBAAA,CAAA4C,qBAAY,CAAC;AACvC"}

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

@@ -9,11 +9,14 @@ function useFluentProviderContextValues_unstable(state) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const {
     applyStylesToPortals,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    customStyleHooks_unstable,
     dir,
     root,
     targetDocument,
     theme,
     themeClassName,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable
   } = state;
   const provider = React.useMemo(() => ({
@@ -23,6 +26,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
+    customStyleHooks_unstable,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable,
     provider,

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

@@ -1 +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"]}
+{"version":3,"names":["React","require","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","textDirection","className","exports"],"sources":["../src/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 {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir,\n    root,\n    targetDocument,\n    theme,\n    themeClassName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n  } = 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    customStyleHooks_unstable,\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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,SAAgBC,uCAAuCA,CAACC,KAA0B;EAChF;EACA,MAAM;IACJC,oBAAoB;IACpB;IACAC,yBAAyB;IACzBC,GAAG;IACHC,IAAI;IACJC,cAAc;IACdC,KAAK;IACLC,cAAc;IACd;IACAC;EAAkB,CACnB,GAAGR,KAAK;EAET,MAAMS,QAAQ,GAAGZ,KAAK,CAACa,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACL;IACAV,yBAAyB;IACzB;IACAM,kBAAkB;IAClBC,QAAQ;IACRI,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEN,oBAAoB,GAAGG,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH;AA9BAQ,OAAA,CAAAhB,uCAAA,GAAAA,uCAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,gCAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGC,eAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAO1B;AAEF;AACO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGC,4BAAoB,EAAE;EACvC,MAAMC,MAAM,GAAGN,SAAS,CAAC;IAAEO,GAAG,EAAEJ,KAAK,CAACI,GAAG;IAAEH;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACJ,IAAI,CAACS,SAAS,GAAGP,mBAAY,CACjCH,gCAAwB,CAACC,IAAI,EAC7BI,KAAK,CAACM,cAAc,EACpBH,MAAM,CAACP,IAAI,EACXI,KAAK,CAACJ,IAAI,CAACS,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAZYL,wCAAgC","names":["exports","root","useStyles","core_1","useFluentProviderStyles_unstable","state","renderer","react_1","styles","dir","className","themeClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}
+{"version":3,"names":["core_1","require","react_1","react_theme_1","exports","fluentProviderClassNames","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,MAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AAIaG,OAAA,CAAAC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGP,MAAA,CAAAQ,QAAU;EAAAF,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAO1B;AAEF;AACO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGjB,OAAA,CAAAkB,oBAAoB,EAAE;EACvC,MAAMC,MAAM,GAAGd,SAAS,CAAC;IAAEe,GAAG,EAAEJ,KAAK,CAACI,GAAG;IAAEH;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGvB,MAAA,CAAAwB,YAAY,CACjCpB,OAAA,CAAAC,wBAAwB,CAACC,IAAI,EAC7BY,KAAK,CAACO,cAAc,EACpBJ,MAAM,CAACf,IAAI,EACXY,KAAK,CAACZ,IAAI,CAACiB,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAZYd,OAAA,CAAAa,gCAAgC,GAAAA,gCAAA"}

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

@@ -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"]}
+{"version":3,"names":["react_utilities_1","require","react_1","React","useFluentProviderStyles_1","useInsertionEffect","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","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","useRenderer_unstable","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","_a","remove","exports"],"sources":["../src/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"],"mappings":"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"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,gDAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,sCAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,qDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,+DAAuC;EAAA;AAAA;AACvCF;EAAAC;EAAAC;IAAA,kDAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,wDAAgC;EAAA;AAAA;AAChCF;EAAAC;EAAAC;IAAA,sDAA8B;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"]}
+{"version":3,"names":["FluentProvider_1","require","Object","defineProperty","exports","enumerable","get","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sources":["../src/packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAO,wBAAwB;EAAA;AAAA;AACxBL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAQ,cAAc;EAAA;AAAA;AACdN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAS,6BAA6B;EAAA;AAAA;AAC7BP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAU,uCAAuC;EAAA;AAAA;AACvCR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAW,0BAA0B;EAAA;AAAA;AAC1BT,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAY,gCAAgC;EAAA;AAAA;AAChCV,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAa,8BAA8B;EAAA;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.3.5",
+  "version": "9.4.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.2.0",
-    "@fluentui/react-tabster": "^9.5.3",
+    "@fluentui/react-shared-contexts": "^9.3.0",
+    "@fluentui/react-tabster": "^9.5.4",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.6.0",
+    "@fluentui/react-utilities": "^9.6.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {