@fluentui/react-provider 9.0.0-rc.7 → 9.0.0

package/dist/{react-provider.d.ts → index.d.ts}

@@ -1,59 +1,52 @@
-import type { ComponentProps } from '@fluentui/react-utilities';
+import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { PartialTheme } from '@fluentui/react-theme';
-import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
+import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import type { Theme } from '@fluentui/react-theme';
-import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
-import type { TooltipContextType } from '@fluentui/react-shared-contexts';
-import { useFluent } from '@fluentui/react-shared-contexts';
-import { useTheme } from '@fluentui/react-shared-contexts';
+import { Theme } from '@fluentui/react-theme';
+import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts';
+import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
+import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';
 
-export declare const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
-
-/**
- * @deprecated Use `fluentProviderClassNames.root` instead.
- */
-export declare const fluentProviderClassName = "fui-FluentProvider";
+export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots, "root">, "dir"> & {
+    dir?: "ltr" | "rtl" | undefined;
+    targetDocument?: Document | undefined;
+    theme?: Partial<Theme> | undefined;
+} & React_2.RefAttributes<HTMLElement>>;
 
 export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
 
-declare interface FluentProviderCommons {
-    /** Sets the direction of text & generated styles. */
-    dir: 'ltr' | 'rtl';
-    /** Provides the document, can be undefined during SSR render. */
-    targetDocument: Document | undefined;
-}
-
-export declare interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
-    provider: ProviderContextValue;
-    themeClassName: ThemeClassNameContextValue;
+export declare type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {
+    provider: ProviderContextValue_unstable;
+    themeClassName: ThemeClassNameContextValue_unstable;
     textDirection: 'ltr' | 'rtl';
-    tooltip: TooltipContextType;
-}
+    tooltip: TooltipVisibilityContextValue_unstable;
+};
 
-export declare interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
+export declare type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {
+    /** Sets the direction of text & generated styles. */
+    dir?: 'ltr' | 'rtl';
+    /** Provides the document, can be undefined during SSR render. */
+    targetDocument?: Document;
     theme?: PartialTheme;
-}
+};
 
 export declare type FluentProviderSlots = {
     root: Slot<'div'>;
 };
 
-export declare interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
-    theme: Theme | Partial<Theme> | undefined;
+export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'dir'>> & {
+    theme: ThemeContextValue_unstable;
     themeClassName: string;
-}
+};
 
 /**
  * Render the final JSX of FluentProvider
  */
 export declare const renderFluentProvider_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
 
-export { useFluent }
-
 /**
  * Create the state required to render FluentProvider.
  *
@@ -77,6 +70,4 @@ export declare const useFluentProviderStyles_unstable: (state: FluentProviderSta
  */
 export declare const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
 
-export { useTheme }
-
 export { }

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AACA,SAAS,uCAAT,QAAwD,kCAAxD;AAGA,OAAO,MAAM,cAAc,gBAAG,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AACA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,QAAM,aAAa,GAAG,uCAAuC,CAAC,KAAD,CAA7D;AAEA,SAAO,6BAA6B,CAAC,KAAD,EAAQ,aAAR,CAApC;AACD,CAP6B,CAAvB;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AACA,SAAS,uCAAT,QAAwD,kCAAxD;AAGA,OAAO,MAAM,cAAc,gBAAG,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EACA,gCAAgC,CAAC,KAAD,CAAhC;EAEA,MAAM,aAAa,GAAG,uCAAuC,CAAC,KAAD,CAA7D;EAEA,OAAO,6BAA6B,CAAC,KAAD,EAAQ,aAAR,CAApC;AACD,CAP6B,CAAvB;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ProviderContextValue,\n  TooltipContextType,\n  ThemeClassNameContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme, Theme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n  root: Slot<'div'>;\n};\n\ninterface FluentProviderCommons {\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 | undefined;\n}\n\nexport interface FluentProviderProps\n  extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>,\n    Partial<FluentProviderCommons> {\n  theme?: PartialTheme;\n}\n\nexport interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {\n  theme: Theme | Partial<Theme> | undefined;\n  themeClassName: string;\n}\n\nexport interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  tooltip: TooltipContextType;\n}\n"]}
+{"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ProviderContextValue_unstable as ProviderContextValue,\n  TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n  ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n  root: Slot<'div'>;\n};\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n  /** 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  theme?: PartialTheme;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n  Pick<FluentProviderProps, 'targetDocument'> &\n  Required<Pick<FluentProviderProps, 'dir'>> & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n  };\n\nexport type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  tooltip: TooltipVisibilityContextValue;\n};\n"]}

package/lib/components/FluentProvider/renderFluentProvider.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextDirectionProvider } from '@griffel/react';
-import { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } from '@fluentui/react-shared-contexts';
+import { Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider } from '@fluentui/react-shared-contexts';
 import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of FluentProvider
@@ -11,13 +11,13 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(ProviderContext.Provider, {
+  return /*#__PURE__*/React.createElement(Provider, {
     value: contextValues.provider
-  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
     value: contextValues.theme
-  }, /*#__PURE__*/React.createElement(ThemeClassNameContext.Provider, {
+  }, /*#__PURE__*/React.createElement(ThemeClassNameProvider, {
     value: contextValues.themeClassName
-  }, /*#__PURE__*/React.createElement(TooltipContext.Provider, {
+  }, /*#__PURE__*/React.createElement(TooltipVisibilityProvider, {
     value: contextValues.tooltip
   }, /*#__PURE__*/React.createElement(TextDirectionProvider, {
     dir: contextValues.textDirection

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,eAAT,EAA0B,cAA1B,EAA0C,YAA1C,EAAwD,qBAAxD,QAAqF,iCAArF;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;AACF,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,eACE,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAd,EAAsB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAtB,eACE,KAAA,CAAA,aAAA,CAAC,qBAAqB,CAAC,QAAvB,EAA+B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA/B,eACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAxB,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;AAAC,IAAA,GAAG,EAAE,aAAa,CAAC;AAApB,GAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } 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    <ProviderContext.Provider value={contextValues.provider}>\n      <ThemeContext.Provider value={contextValues.theme}>\n        <ThemeClassNameContext.Provider value={contextValues.themeClassName}>\n          <TooltipContext.Provider value={contextValues.tooltip}>\n            <TextDirectionProvider dir={contextValues.textDirection}>\n              <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n            </TextDirectionProvider>\n          </TooltipContext.Provider>\n        </ThemeClassNameContext.Provider>\n      </ThemeContext.Provider>\n    </ProviderContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SACE,iBAAiB,IAAI,QADvB,EAEE,kCAAkC,IAAI,yBAFxC,EAGE,sBAAsB,IAAI,aAH5B,EAIE,+BAA+B,IAAI,sBAJrC,QAKO,iCALP;AAMA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,eACE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,sBAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,eACE,KAAA,CAAA,aAAA,CAAC,yBAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n  Provider_unstable as Provider,\n  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n  ThemeProvider_unstable as ThemeProvider,\n  ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n  state: FluentProviderState,\n  contextValues: FluentProviderContextValues,\n) => {\n  const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <TooltipVisibilityProvider value={contextValues.tooltip}>\n            <TextDirectionProvider dir={contextValues.textDirection}>\n              <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n            </TextDirectionProvider>\n          </TooltipVisibilityProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/FluentProvider/useFluentProvider.js

@@ -1,5 +1,5 @@
 import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
-import { useFluent, useTheme } from '@fluentui/react-shared-contexts';
+import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
@@ -71,4 +71,8 @@ function mergeThemes(a, b) {
 
   return b;
 }
+
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
 //# sourceMappingURL=useFluentProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC;AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,aAAa,GAAG,SAAS,EAA/B;AACA,QAAM,WAAW,GAAG,QAAQ,EAA5B;AAEA;;;;AAIG;;AACH,QAAM;AAAE,IAAA,GAAG,GAAG,aAAa,CAAC,GAAtB;AAA2B,IAAA,cAAc,GAAG,aAAa,CAAC,cAA1D;AAA0E,IAAA;AAA1E,MAAoF,KAA1F;AACA,QAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;AACtE;AACA,MAAA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;AAKD,KARkB,CASnB;;AACD,GAVD,EAUG,EAVH;AAYA,SAAO;AACL,IAAA,GADK;AAEL,IAAA,cAFK;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,8BAA8B,CAAC;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA;AAAtB,KAAD,CAJzC;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,uBAAuB,EAA7B;AAHe,KAAR;AAVtB,GAAP;AAgBD,CA3CM;;AA6CP,SAAS,WAAT,CAAqB,CAArB,EAA4D,CAA5D,EAAuE;AACrE;AACA,MAAI,CAAC,IAAI,CAAT,EAAY;AACV,WAAO,EAAE,GAAG,CAAL;AAAQ,SAAG;AAAX,KAAP;AACD;;AAED,MAAI,CAAJ,EAAO;AACL,WAAO,CAAP;AACD;;AAED,SAAO,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport type { Theme } from '@fluentui/react-theme';\nimport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const { dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme } = props;\n  const mergedTheme = mergeThemes(parentTheme, theme);\n\n  React.useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n      // eslint-disable-next-line no-console\n      console.warn(`\n      FluentProvider: your \"theme\" is not defined !\n      =============================================\n      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n      `);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return {\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      dir,\n      ref: useMergedRefs(ref, useKeyboardNavAttribute()),\n    }),\n  };\n};\n\nfunction mergeThemes(a: Theme | Partial<Theme> | undefined, b: typeof a): Theme | Partial<Theme> | undefined {\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SACE,qBAAqB,IAAI,YAD3B,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAKA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,SAAS,EAA/B;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,8BAA8B,CAAC;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAAD,CAJzC;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,uBAAuB,EAA7B;IAHe,CAAR;EAVtB,CAAP;AAgBD,CA3CM;;AA6CP,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,YAAjB,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport {\n  ThemeContext_unstable as ThemeContext,\n  useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const { dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme } = props;\n  const mergedTheme = mergeThemes(parentTheme, theme);\n\n  React.useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n      // eslint-disable-next-line no-console\n      console.warn(`\n      FluentProvider: your \"theme\" is not defined !\n      =============================================\n      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n      `);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return {\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      dir,\n      ref: useMergedRefs(ref, useKeyboardNavAttribute()),\n    }),\n  };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n  // Merge impacts perf: we should like to avoid it if it's possible\n  if (a && b) {\n    return { ...a, ...b };\n  }\n\n  if (a) {\n    return a;\n  }\n\n  return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n  return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}

package/lib/components/FluentProvider/useFluentProviderContextValues.js

@@ -1,4 +1,3 @@
-import { useConst } from '@fluentui/react-utilities';
 import * as React from 'react';
 export function useFluentProviderContextValues_unstable(state) {
   const {
@@ -12,7 +11,7 @@ export function useFluentProviderContextValues_unstable(state) {
     targetDocument
   }), [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
 
-  const tooltip = useConst({});
+  const [tooltip] = React.useState(() => ({}));
   return {
     provider,
     textDirection: dir,

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,QAAyB,2BAAzB;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,uCAAV,CAAkD,KAAlD,EAA4E;AAChF,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,GAAR;AAAa,IAAA,cAAb;AAA6B,IAAA;AAA7B,MAAuC,KAA7C;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,GAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;AACA,QAAM,OAAO,GAAG,QAAQ,CAAC,EAAD,CAAxB;AAEA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,aAAa,EAAE,GAFV;AAGL,IAAA,OAHK;AAIL,IAAA,KAJK;AAKL,IAAA,cAAc,EAAE,IAAI,CAAC;AALhB,GAAP;AAOD","sourcesContent":["import { useConst } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const { root, dir, targetDocument, theme } = 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 = useConst({});\n\n  return {\n    provider,\n    textDirection: dir,\n    tooltip,\n    theme,\n    themeClassName: root.className!,\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,uCAAV,CAAkD,KAAlD,EAA4E;EAChF,MAAM;IAAE,IAAF;IAAQ,GAAR;IAAa,cAAb;IAA6B;EAA7B,IAAuC,KAA7C;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,IAAI,CAAC;EALhB,CAAP;AAOD","sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const { root, dir, targetDocument, theme } = state;\n\n  const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n  // \"Tooltip\" component mutates an object in this context, instance should be stable\n  const [tooltip] = React.useState(() => ({}));\n\n  return {\n    provider,\n    textDirection: dir,\n    tooltip,\n    theme,\n    themeClassName: root.className!,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/FluentProvider/useFluentProviderStyles.js

@@ -1,10 +1,6 @@
-import { __styles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-/**
- * @deprecated Use `fluentProviderClassNames.root` instead.
- */
-
-export const fluentProviderClassName = 'fui-FluentProvider';
+import { __styles, mergeClasses } from '@griffel/core';
+import { useRenderer_unstable } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const fluentProviderClassNames = {
   root: 'fui-FluentProvider'
 };
@@ -13,18 +9,24 @@ const useStyles = /*#__PURE__*/__styles({
   "root": {
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
+    "fsow6f": ["f1o700av", "fes3tcz"],
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
-    "Bhrd7zp": "figsok6"
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "f1i3iumi"
   }
 }, {
-  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}"]
+  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
 });
 /** Applies style classnames to slots */
 
 
 export const useFluentProviderStyles_unstable = state => {
-  const styles = useStyles();
+  const renderer = useRenderer_unstable();
+  const styles = useStyles({
+    dir: state.dir,
+    renderer
+  });
   state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AACP,OAAO,MAAM,wBAAwB,GAAwC;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAtE;;AAIP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,wBAAwB,CAAC,IADQ,EAEjC,KAAK,CAAC,cAF2B,EAGjC,MAAM,CAAC,IAH0B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAOA,SAAO,KAAP;AACD,CAXM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `fluentProviderClassNames.root` instead.\n */\nexport const fluentProviderClassName = 'fui-FluentProvider';\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    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const styles = useStyles();\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,eAAzC;AACA,SAAS,oBAAT,QAAqC,gBAArC;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,wBAAwB,GAAwC;EAC3E,IAAI,EAAE;AADqE,CAAtE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,oBAAoB,EAArC;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,wBAAwB,CAAC,IADQ,EAEjC,KAAK,CAAC,cAF2B,EAGjC,MAAM,CAAC,IAH0B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAZM","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"],"sourceRoot":"../src/"}

package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js

@@ -36,11 +36,16 @@ export const useFluentProviderThemeStyleTag = options => {
   if (styleTag && previousCssRule !== cssRule) {
     const sheet = styleTag.sheet;
 
-    if (sheet.cssRules.length > 0) {
-      sheet.deleteRule(0);
-    }
+    if (sheet) {
+      if (sheet.cssRules.length > 0) {
+        sheet.deleteRule(0);
+      }
 
-    sheet.insertRule(cssRule, 0);
+      sheet.insertRule(cssRule, 0);
+    } else if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
+    }
   } // Removes the style tag from the targetDocument on unmount or change
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GApC8G,CAsC/G;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 styleTagId = useId(fluentProviderClassNames.root);\n  const styleTag = React.useMemo(() => {\n    if (!targetDocument) {\n      return null;\n    }\n\n    const tag = targetDocument.createElement('style');\n    tag.setAttribute('id', styleTagId);\n    targetDocument.head.appendChild(tag);\n    return tag;\n  }, [styleTagId, targetDocument]);\n\n  const cssRule = React.useMemo(() => {\n    const cssVarsAsString = theme\n      ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n          cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n          return cssVarRule;\n        }, '')\n      : '';\n\n    // result: .fluent-provider1 { --css-var: '#fff' }\n    return `.${styleTagId} { ${cssVarsAsString} }`;\n  }, [theme, styleTagId]);\n  const previousCssRule = usePrevious(cssRule);\n\n  if (styleTag && previousCssRule !== cssRule) {\n    const sheet = styleTag.sheet as CSSStyleSheet;\n\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n\n    sheet.insertRule(cssRule, 0);\n  }\n\n  // Removes the style tag from the targetDocument on unmount or change\n  React.useEffect(() => {\n    return () => {\n      if (styleTag) {\n        styleTag.remove();\n      }\n    };\n  }, [styleTag]);\n\n  return styleTagId;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EAEA,MAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAClC,IAAI,CAAC,cAAL,EAAqB;MACnB,OAAO,IAAP;IACD;;IAED,MAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;IACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;IACA,OAAO,GAAP;EACD,CATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;EAWA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,MAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;IACA,OAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;EACD,CAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;EAWA,MAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;EAEA,IAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;IAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;IAEA,IAAI,KAAJ,EAAW;MACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;QAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;MACD;;MACD,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;IACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;MAChD;MACA,OAAO,CAAC,KAAR,CAAc,uFAAd;IACD;EACF,CAxC8G,CA0C/G;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;MACV,IAAI,QAAJ,EAAc;QACZ,QAAQ,CAAC,MAAT;MACD;IACF,CAJD;EAKD,CAND,EAMG,CAAC,QAAD,CANH;EAQA,OAAO,UAAP;AACD,CApDM","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 styleTagId = useId(fluentProviderClassNames.root);\n  const styleTag = React.useMemo(() => {\n    if (!targetDocument) {\n      return null;\n    }\n\n    const tag = targetDocument.createElement('style');\n    tag.setAttribute('id', styleTagId);\n    targetDocument.head.appendChild(tag);\n    return tag;\n  }, [styleTagId, targetDocument]);\n\n  const cssRule = React.useMemo(() => {\n    const cssVarsAsString = theme\n      ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n          cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n          return cssVarRule;\n        }, '')\n      : '';\n\n    // result: .fluent-provider1 { --css-var: '#fff' }\n    return `.${styleTagId} { ${cssVarsAsString} }`;\n  }, [theme, styleTagId]);\n  const previousCssRule = usePrevious(cssRule);\n\n  if (styleTag && previousCssRule !== cssRule) {\n    const sheet = styleTag.sheet;\n\n    if (sheet) {\n      if (sheet.cssRules.length > 0) {\n        sheet.deleteRule(0);\n      }\n      sheet.insertRule(cssRule, 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  // Removes the style tag from the targetDocument on unmount or change\n  React.useEffect(() => {\n    return () => {\n      if (styleTag) {\n        styleTag.remove();\n      }\n    };\n  }, [styleTag]);\n\n  return styleTagId;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,4 +1,2 @@
-export { // eslint-disable-next-line deprecation/deprecation
-fluentProviderClassName, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';
-export { useFluent, useTheme } from '@fluentui/react-shared-contexts';
+export { fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE;AACA,uBAFF,EAGE,wBAHF,EAIE,cAJF,EAKE,6BALF,EAME,uCANF,EAOE,0BAPF,EAQE,gCARF,EASE,8BATF,QAUO,kBAVP;AAkBA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC","sourcesContent":["export {\n  // eslint-disable-next-line deprecation/deprecation\n  fluentProviderClassName,\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\nexport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,wBADF,EAEE,cAFF,EAGE,6BAHF,EAIE,uCAJF,EAKE,0BALF,EAME,gCANF,EAOE,8BAPF,QAQO,kBARP","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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AACA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AAEA,QAAM,aAAa,GAAG,gCAAA,CAAA,uCAAA,CAAwC,KAAxC,CAAtB;AAEA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,EAAqC,aAArC,CAAP;AACD,CAP6B,CAAjB;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EAEA,MAAM,aAAa,GAAG,gCAAA,CAAA,uCAAA,CAAwC,KAAxC,CAAtB;EAEA,OAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,EAAqC,aAArC,CAAP;AACD,CAP6B,CAAjB;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","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"],"sourceRoot":"../src/"}

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

@@ -22,13 +22,13 @@ const renderFluentProvider_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(react_shared_contexts_1.ProviderContext.Provider, {
+  return React.createElement(react_shared_contexts_1.Provider_unstable, {
     value: contextValues.provider
-  }, React.createElement(react_shared_contexts_1.ThemeContext.Provider, {
+  }, React.createElement(react_shared_contexts_1.ThemeProvider_unstable, {
     value: contextValues.theme
-  }, React.createElement(react_shared_contexts_1.ThemeClassNameContext.Provider, {
+  }, React.createElement(react_shared_contexts_1.ThemeClassNameProvider_unstable, {
     value: contextValues.themeClassName
-  }, React.createElement(react_shared_contexts_1.TooltipContext.Provider, {
+  }, React.createElement(react_shared_contexts_1.TooltipVisibilityProvider_unstable, {
     value: contextValues.tooltip
   }, React.createElement(react_1.TextDirectionProvider, {
     dir: contextValues.textDirection

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;AACF,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,YAAA,CAAa,QAAd,EAAsB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAtB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,qBAAA,CAAsB,QAAvB,EAA+B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA/B,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAxB,EACE,KAAA,CAAA,aAAA,CAAC,OAAA,CAAA,qBAAD,EAAsB;AAAC,IAAA,GAAG,EAAE,aAAa,CAAC;AAApB,GAAtB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } 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    <ProviderContext.Provider value={contextValues.provider}>\n      <ThemeContext.Provider value={contextValues.theme}>\n        <ThemeClassNameContext.Provider value={contextValues.themeClassName}>\n          <TooltipContext.Provider value={contextValues.tooltip}>\n            <TextDirectionProvider dir={contextValues.textDirection}>\n              <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n            </TextDirectionProvider>\n          </TooltipContext.Provider>\n        </ThemeClassNameContext.Provider>\n      </ThemeContext.Provider>\n    </ProviderContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAMA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,iBAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,sBAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,+BAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,kCAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,EACE,KAAA,CAAA,aAAA,CAAC,OAAA,CAAA,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n  Provider_unstable as Provider,\n  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n  ThemeProvider_unstable as ThemeProvider,\n  ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n  state: FluentProviderState,\n  contextValues: FluentProviderContextValues,\n) => {\n  const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <TooltipVisibilityProvider value={contextValues.tooltip}>\n            <TextDirectionProvider dir={contextValues.textDirection}>\n              <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n            </TextDirectionProvider>\n          </TooltipVisibilityProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -26,8 +26,8 @@ const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProvid
 
 
 const useFluentProvider_unstable = (props, ref) => {
-  const parentContext = react_shared_contexts_1.useFluent();
-  const parentTheme = react_shared_contexts_1.useTheme();
+  const parentContext = react_shared_contexts_1.useFluent_unstable();
+  const parentTheme = useTheme();
   /**
    * TODO: add merge functions to "dir" merge,
    * nesting providers with the same "dir" should not add additional attributes to DOM
@@ -85,4 +85,8 @@ function mergeThemes(a, b) {
 
   return b;
 }
+
+function useTheme() {
+  return React.useContext(react_shared_contexts_1.ThemeContext_unstable);
+}
 //# sourceMappingURL=useFluentProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,aAAa,GAAG,uBAAA,CAAA,SAAA,EAAtB;AACA,QAAM,WAAW,GAAG,uBAAA,CAAA,QAAA,EAApB;AAEA;;;;AAIG;;AACH,QAAM;AAAE,IAAA,GAAG,GAAG,aAAa,CAAC,GAAtB;AAA2B,IAAA,cAAc,GAAG,aAAa,CAAC,cAA1D;AAA0E,IAAA;AAA1E,MAAoF,KAA1F;AACA,QAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;AACtE;AACA,MAAA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;AAKD,KARkB,CASnB;;AACD,GAVD,EAUG,EAVH;AAYA,SAAO;AACL,IAAA,GADK;AAEL,IAAA,cAFK;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA;AAAtB,KAA/B,CAJX;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,uBAAA,EAAnB;AAH4B,KAA7B;AAVD,GAAP;AAgBD,CA3CM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B;;AA6Cb,SAAS,WAAT,CAAqB,CAArB,EAA4D,CAA5D,EAAuE;AACrE;AACA,MAAI,CAAC,IAAI,CAAT,EAAY;AACV,WAAO,EAAE,GAAG,CAAL;AAAQ,SAAG;AAAX,KAAP;AACD;;AAED,MAAI,CAAJ,EAAO;AACL,WAAO,CAAP;AACD;;AAED,SAAO,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport type { Theme } from '@fluentui/react-theme';\nimport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const { dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme } = props;\n  const mergedTheme = mergeThemes(parentTheme, theme);\n\n  React.useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n      // eslint-disable-next-line no-console\n      console.warn(`\n      FluentProvider: your \"theme\" is not defined !\n      =============================================\n      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n      `);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return {\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      dir,\n      ref: useMergedRefs(ref, useKeyboardNavAttribute()),\n    }),\n  };\n};\n\nfunction mergeThemes(a: Theme | Partial<Theme> | undefined, b: typeof a): Theme | Partial<Theme> | undefined {\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAKA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,uBAAA,CAAA,kBAAA,EAAtB;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAA/B,CAJX;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,uBAAA,EAAnB;IAH4B,CAA7B;EAVD,CAAP;AAgBD,CA3CM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B;;AA6Cb,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,uBAAA,CAAA,qBAAjB,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport {\n  ThemeContext_unstable as ThemeContext,\n  useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const { dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme } = props;\n  const mergedTheme = mergeThemes(parentTheme, theme);\n\n  React.useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n      // eslint-disable-next-line no-console\n      console.warn(`\n      FluentProvider: your \"theme\" is not defined !\n      =============================================\n      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n      `);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return {\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      dir,\n      ref: useMergedRefs(ref, useKeyboardNavAttribute()),\n    }),\n  };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n  // Merge impacts perf: we should like to avoid it if it's possible\n  if (a && b) {\n    return { ...a, ...b };\n  }\n\n  if (a) {\n    return a;\n  }\n\n  return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n  return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFluentProviderContextValues_unstable = void 0;
 
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const React = /*#__PURE__*/require("react");
 
 function useFluentProviderContextValues_unstable(state) {
@@ -21,7 +19,7 @@ function useFluentProviderContextValues_unstable(state) {
     targetDocument
   }), [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
 
-  const tooltip = react_utilities_1.useConst({});
+  const [tooltip] = React.useState(() => ({}));
   return {
     provider,
     textDirection: dir,

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,uCAAhB,CAAwD,KAAxD,EAAkF;AAChF,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,GAAR;AAAa,IAAA,cAAb;AAA6B,IAAA;AAA7B,MAAuC,KAA7C;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,GAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;AACA,QAAM,OAAO,GAAG,iBAAA,CAAA,QAAA,CAAS,EAAT,CAAhB;AAEA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,aAAa,EAAE,GAFV;AAGL,IAAA,OAHK;AAIL,IAAA,KAJK;AAKL,IAAA,cAAc,EAAE,IAAI,CAAC;AALhB,GAAP;AAOD;;AAdD,OAAA,CAAA,uCAAA,GAAA,uCAAA","sourcesContent":["import { useConst } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const { root, dir, targetDocument, theme } = 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 = useConst({});\n\n  return {\n    provider,\n    textDirection: dir,\n    tooltip,\n    theme,\n    themeClassName: root.className!,\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,uCAAhB,CAAwD,KAAxD,EAAkF;EAChF,MAAM;IAAE,IAAF;IAAQ,GAAR;IAAa,cAAb;IAA6B;EAA7B,IAAuC,KAA7C;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,IAAI,CAAC;EALhB,CAAP;AAOD;;AAdD,OAAA,CAAA,uCAAA,GAAA,uCAAA","sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const { root, dir, targetDocument, theme } = state;\n\n  const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n  // \"Tooltip\" component mutates an object in this context, instance should be stable\n  const [tooltip] = React.useState(() => ({}));\n\n  return {\n    provider,\n    textDirection: dir,\n    tooltip,\n    theme,\n    themeClassName: root.className!,\n  };\n}\n"],"sourceRoot":"../src/"}

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

@@ -3,38 +3,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFluentProviderStyles_unstable = exports.fluentProviderClassNames = exports.fluentProviderClassName = void 0;
+exports.useFluentProviderStyles_unstable = exports.fluentProviderClassNames = void 0;
+
+const core_1 = /*#__PURE__*/require("@griffel/core");
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-/**
- * @deprecated Use `fluentProviderClassNames.root` instead.
- */
-
 
-exports.fluentProviderClassName = 'fui-FluentProvider';
 exports.fluentProviderClassNames = {
   root: 'fui-FluentProvider'
 };
 
-const useStyles = /*#__PURE__*/react_1.__styles({
+const useStyles = /*#__PURE__*/core_1.__styles({
   "root": {
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
+    "fsow6f": ["f1o700av", "fes3tcz"],
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
-    "Bhrd7zp": "figsok6"
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "f1i3iumi"
   }
 }, {
-  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}"]
+  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
 });
 /** Applies style classnames to slots */
 
 
 const useFluentProviderStyles_unstable = state => {
-  const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
+  const renderer = react_1.useRenderer_unstable();
+  const styles = useStyles({
+    dir: state.dir,
+    renderer
+  });
+  state.root.className = core_1.mergeClasses(exports.fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
   return state;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;AACA,OAAA,CAAA,wBAAA,GAAgE;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAhE;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBAAA,CAAyB,IADJ,EAErB,KAAK,CAAC,cAFe,EAGrB,MAAM,CAAC,IAHc,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAOA,SAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `fluentProviderClassNames.root` instead.\n */\nexport const fluentProviderClassName = 'fui-FluentProvider';\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    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const styles = useStyles();\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAAgE;EAC3E,IAAI,EAAE;AADqE,CAAhE;;AAIb,MAAM,SAAS,gBAAG,MAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,OAAA,CAAA,oBAAA,EAAjB;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,MAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBAAA,CAAyB,IADJ,EAErB,KAAK,CAAC,cAFe,EAGrB,MAAM,CAAC,IAHc,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAZM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","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"],"sourceRoot":"../src/"}

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

@@ -46,11 +46,16 @@ const useFluentProviderThemeStyleTag = options => {
   if (styleTag && previousCssRule !== cssRule) {
     const sheet = styleTag.sheet;
 
-    if (sheet.cssRules.length > 0) {
-      sheet.deleteRule(0);
-    }
+    if (sheet) {
+      if (sheet.cssRules.length > 0) {
+        sheet.deleteRule(0);
+      }
 
-    sheet.insertRule(cssRule, 0);
+      sheet.insertRule(cssRule, 0);
+    } else if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
+    }
   } // Removes the style tag from the targetDocument on unmount or change
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GApC8G,CAsC/G;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 styleTagId = useId(fluentProviderClassNames.root);\n  const styleTag = React.useMemo(() => {\n    if (!targetDocument) {\n      return null;\n    }\n\n    const tag = targetDocument.createElement('style');\n    tag.setAttribute('id', styleTagId);\n    targetDocument.head.appendChild(tag);\n    return tag;\n  }, [styleTagId, targetDocument]);\n\n  const cssRule = React.useMemo(() => {\n    const cssVarsAsString = theme\n      ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n          cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n          return cssVarRule;\n        }, '')\n      : '';\n\n    // result: .fluent-provider1 { --css-var: '#fff' }\n    return `.${styleTagId} { ${cssVarsAsString} }`;\n  }, [theme, styleTagId]);\n  const previousCssRule = usePrevious(cssRule);\n\n  if (styleTag && previousCssRule !== cssRule) {\n    const sheet = styleTag.sheet as CSSStyleSheet;\n\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n\n    sheet.insertRule(cssRule, 0);\n  }\n\n  // Removes the style tag from the targetDocument on unmount or change\n  React.useEffect(() => {\n    return () => {\n      if (styleTag) {\n        styleTag.remove();\n      }\n    };\n  }, [styleTag]);\n\n  return styleTagId;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EAEA,MAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAClC,IAAI,CAAC,cAAL,EAAqB;MACnB,OAAO,IAAP;IACD;;IAED,MAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;IACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;IACA,OAAO,GAAP;EACD,CATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;EAWA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,MAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;IACA,OAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;EACD,CAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;EAWA,MAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;EAEA,IAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;IAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;IAEA,IAAI,KAAJ,EAAW;MACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;QAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;MACD;;MACD,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;IACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;MAChD;MACA,OAAO,CAAC,KAAR,CAAc,uFAAd;IACD;EACF,CAxC8G,CA0C/G;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;MACV,IAAI,QAAJ,EAAc;QACZ,QAAQ,CAAC,MAAT;MACD;IACF,CAJD;EAKD,CAND,EAMG,CAAC,QAAD,CANH;EAQA,OAAO,UAAP;AACD,CApDM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 styleTagId = useId(fluentProviderClassNames.root);\n  const styleTag = React.useMemo(() => {\n    if (!targetDocument) {\n      return null;\n    }\n\n    const tag = targetDocument.createElement('style');\n    tag.setAttribute('id', styleTagId);\n    targetDocument.head.appendChild(tag);\n    return tag;\n  }, [styleTagId, targetDocument]);\n\n  const cssRule = React.useMemo(() => {\n    const cssVarsAsString = theme\n      ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n          cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n          return cssVarRule;\n        }, '')\n      : '';\n\n    // result: .fluent-provider1 { --css-var: '#fff' }\n    return `.${styleTagId} { ${cssVarsAsString} }`;\n  }, [theme, styleTagId]);\n  const previousCssRule = usePrevious(cssRule);\n\n  if (styleTag && previousCssRule !== cssRule) {\n    const sheet = styleTag.sheet;\n\n    if (sheet) {\n      if (sheet.cssRules.length > 0) {\n        sheet.deleteRule(0);\n      }\n      sheet.insertRule(cssRule, 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  // Removes the style tag from the targetDocument on unmount or change\n  React.useEffect(() => {\n    return () => {\n      if (styleTag) {\n        styleTag.remove();\n      }\n    };\n  }, [styleTag]);\n\n  return styleTagId;\n};\n"],"sourceRoot":"../src/"}