@fluentui/react-provider 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.3

package/lib/components/FluentProvider/FluentProvider.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { renderFluentProvider } from './renderFluentProvider';
-import { useFluentProvider } from './useFluentProvider';
-import { useFluentProviderStyles } from './useFluentProviderStyles';
-import { useFluentProviderContextValues } from './useFluentProviderContextValues';
-export var FluentProvider = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useFluentProvider(props, ref);
-  useFluentProviderStyles(state);
-  var contextValues = useFluentProviderContextValues(state);
-  return renderFluentProvider(state, contextValues);
+import { renderFluentProvider_unstable } from './renderFluentProvider';
+import { useFluentProvider_unstable } from './useFluentProvider';
+import { useFluentProviderStyles_unstable } from './useFluentProviderStyles';
+import { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';
+export const FluentProvider = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useFluentProvider_unstable(props, ref);
+  useFluentProviderStyles_unstable(state);
+  const contextValues = useFluentProviderContextValues_unstable(state);
+  return renderFluentProvider_unstable(state, contextValues);
 });
 FluentProvider.displayName = 'FluentProvider';
 //# sourceMappingURL=FluentProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,uBAAT,QAAwC,2BAAxC;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA,OAAO,IAAM,cAAc,gBAAG,KAAK,CAAC,UAAN,CAAmD,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,MAAM,aAAa,GAAG,8BAA8B,CAAC,KAAD,CAApD;AAEA,SAAO,oBAAoB,CAAC,KAAD,EAAQ,aAAR,CAA3B;AACD,CAP6B,CAAvB;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourceRoot":""}
+{"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/"}

package/lib/components/FluentProvider/FluentProvider.types.d.ts

@@ -1,10 +1,10 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ProviderContextValue, TooltipContextType, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
 import type { PartialTheme, Theme } from '@fluentui/react-theme';
-import type { ProviderContextValue, TooltipContextType, ThemeContextValue, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type FluentProviderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
-export interface FluentProviderCommons {
+interface FluentProviderCommons {
     /** Sets the direction of text & generated styles. */
     dir: 'ltr' | 'rtl';
     /** Provides the document, can be undefined during SSR render. */
@@ -14,12 +14,13 @@ export interface FluentProviderProps extends Omit<ComponentProps<FluentProviderS
     theme?: PartialTheme;
 }
 export interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
-    theme: Theme;
+    theme: Theme | Partial<Theme> | undefined;
     themeClassName: string;
 }
-export interface FluentProviderContextValues {
+export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
     provider: ProviderContextValue;
-    theme: ThemeContextValue;
     themeClassName: ThemeClassNameContextValue;
+    textDirection: 'ltr' | 'rtl';
     tooltip: TooltipContextType;
 }
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FluentProvider.types.js","sourceRoot":"","sources":["../../../src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":""}
+{"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"]}

package/lib/components/FluentProvider/index.d.ts

@@ -2,4 +2,5 @@ export * from './FluentProvider';
 export * from './FluentProvider.types';
 export * from './renderFluentProvider';
 export * from './useFluentProvider';
+export * from './useFluentProviderStyles';
 export * from './useFluentProviderContextValues';

package/lib/components/FluentProvider/index.js

@@ -2,5 +2,6 @@ export * from './FluentProvider';
 export * from './FluentProvider.types';
 export * from './renderFluentProvider';
 export * from './useFluentProvider';
+export * from './useFluentProviderStyles';
 export * from './useFluentProviderContextValues';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FluentProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/FluentProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\n"]}

package/lib/components/FluentProvider/renderFluentProvider.d.ts

@@ -2,4 +2,4 @@ import type { FluentProviderContextValues, FluentProviderState } from './FluentP
 /**
  * Render the final JSX of FluentProvider
  */
-export declare const renderFluentProvider: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
+export declare const renderFluentProvider_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;

package/lib/components/FluentProvider/renderFluentProvider.js

@@ -1,17 +1,16 @@
-import { __assign } from "tslib";
 import * as React from 'react';
+import { TextDirectionProvider } from '@griffel/react';
 import { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } from '@fluentui/react-shared-contexts';
 import { getSlots } from '@fluentui/react-utilities';
-import { fluentProviderShorthandProps } from './useFluentProvider';
 /**
  * Render the final JSX of FluentProvider
  */
 
-export var renderFluentProvider = function (state, contextValues) {
-  var _a = getSlots(state, fluentProviderShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
+export const renderFluentProvider_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(ProviderContext.Provider, {
     value: contextValues.provider
   }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
@@ -20,6 +19,9 @@ export var renderFluentProvider = function (state, contextValues) {
     value: contextValues.themeClassName
   }, /*#__PURE__*/React.createElement(TooltipContext.Provider, {
     value: contextValues.tooltip
-  }, /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.root.children)))));
+  }, /*#__PURE__*/React.createElement(TextDirectionProvider, {
+    dir: contextValues.textDirection
+  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, state.root.children))))));
 };
 //# sourceMappingURL=renderFluentProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,EAA0B,cAA1B,EAA0C,YAA1C,EAAwD,qBAAxD,QAAqF,iCAArF;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,4BAAT,QAA6C,qBAA7C;AAEA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA6B,aAA7B,EAAuE;AACnG,MAAA,EAAA,GAAuB,QAAQ,CAAsB,KAAtB,EAA6B,4BAA7B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,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,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF;AAWD,CAdM","sourceRoot":""}
+{"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/"}

package/lib/components/FluentProvider/useFluentProvider.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import type { FluentProviderProps, FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
-export declare const fluentProviderShorthandProps: (keyof FluentProviderSlots)[];
+import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
 /**
  * Create the state required to render FluentProvider.
  *
- * The returned state can be modified with hooks such as useFluentProviderStyles,
- * before being passed to renderFluentProvider.
+ * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
+ * before being passed to renderFluentProvider_unstable.
  *
  * @param props - props from this instance of FluentProvider
  * @param ref - reference to root HTMLElement of FluentProvider
  */
-export declare const useFluentProvider: (props: FluentProviderProps, ref: React.Ref<HTMLElement>) => FluentProviderState;
+export declare const useFluentProvider_unstable: (props: FluentProviderProps, ref: React.Ref<HTMLElement>) => FluentProviderState;

package/lib/components/FluentProvider/useFluentProvider.js

@@ -1,51 +1,74 @@
-import { __assign } from "tslib";
 import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
-import { mergeThemes } from '@fluentui/react-theme';
 import { useFluent, useTheme } from '@fluentui/react-shared-contexts';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
 import { useThemeStyleTag } from './useThemeStyleTag';
-export var fluentProviderShorthandProps = ['root'];
 /**
  * Create the state required to render FluentProvider.
  *
- * The returned state can be modified with hooks such as useFluentProviderStyles,
- * before being passed to renderFluentProvider.
+ * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
+ * before being passed to renderFluentProvider_unstable.
  *
  * @param props - props from this instance of FluentProvider
  * @param ref - reference to root HTMLElement of FluentProvider
  */
 
-export var useFluentProvider = function (props, ref) {
-  var parentContext = useFluent();
-  var parentTheme = useTheme();
+export const useFluentProvider_unstable = (props, ref) => {
+  const parentContext = useFluent();
+  const parentTheme = useTheme();
   /**
    * 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.dir,
-      dir = _a === void 0 ? parentContext.dir : _a,
-      _b = props.targetDocument,
-      targetDocument = _b === void 0 ? parentContext.targetDocument : _b,
-      _c = props.theme,
-      theme = _c === void 0 ? {} : _c;
-  var mergedTheme = mergeThemes(parentTheme, theme);
+  const {
+    dir = parentContext.dir,
+    targetDocument = parentContext.targetDocument,
+    theme
+  } = props;
+  const mergedTheme = mergeThemes(parentTheme, theme);
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
+      // eslint-disable-next-line no-console
+      console.warn(`
+      FluentProvider: your "theme" is not defined !
+      =============================================
+      Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
+      `);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   return {
-    dir: dir,
-    targetDocument: targetDocument,
+    dir,
+    targetDocument,
     theme: mergedTheme,
     themeClassName: useThemeStyleTag({
       theme: mergedTheme,
-      targetDocument: targetDocument
+      targetDocument
     }),
     components: {
       root: 'div'
     },
-    root: getNativeElementProps('div', __assign(__assign({}, props), {
-      dir: dir,
+    root: getNativeElementProps('div', { ...props,
+      dir,
       ref: useMergedRefs(ref, useKeyboardNavAttribute())
-    }))
+    })
   };
 };
+
+function mergeThemes(a, b) {
+  // Merge impacts perf: we should like to avoid it if it's possible
+  if (a && b) {
+    return { ...a,
+      ...b
+    };
+  }
+
+  if (a) {
+    return a;
+  }
+
+  return b;
+}
 //# sourceMappingURL=useFluentProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,WAAT,QAA4B,uBAA5B;AACA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC;AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA,OAAO,IAAM,4BAA4B,GAAkC,CAAC,MAAD,CAApE;AAEP;;;;;;;;AAQG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAA6B,GAA7B,EAAwD;AACvF,MAAM,aAAa,GAAG,SAAS,EAA/B;AACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;AAEA;;;;AAIG;;AACK,MAAA,EAAA,GAAuF,KAAK,CAArE,GAAvB;AAAA,MAAA,GAAG,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,CAAC,GAAjB,GAAoB,EAAvB;AAAA,MAAyB,EAAA,GAA8D,KAAK,CAAtB,cAAtE;AAAA,MAAyB,cAAc,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,CAAC,cAAjB,GAA+B,EAAtE;AAAA,MAAwE,EAAA,GAAe,KAAK,CAAV,KAAlF;AAAA,MAAwE,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAH,GAAK,EAAlF;AACR,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;AAEA,SAAO;AACL,IAAA,GAAG,EAAA,GADE;AAEL,IAAA,cAAc,EAAA,cAFT;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,gBAAgB,CAAC;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA,cAAc,EAAA;AAApC,KAAD,CAJ3B;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA,QAAA,CAAA,EAAA,EAC5B,KAD4B,CAAA,EACvB;AACR,MAAA,GAAG,EAAA,GADK;AAER,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,uBAAuB,EAA7B;AAFV,KADuB,CAAN;AAVtB,GAAP;AAgBD,CA5BM","sourceRoot":""}
+{"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,gBAAT,QAAiC,oBAAjC;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,gBAAgB,CAAC;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA;AAAtB,KAAD,CAJ3B;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 { useThemeStyleTag } from './useThemeStyleTag';\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: useThemeStyleTag({ 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/"}

package/lib/components/FluentProvider/useFluentProviderContextValues.d.ts

@@ -1,2 +1,2 @@
 import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
-export declare function useFluentProviderContextValues(state: FluentProviderState): FluentProviderContextValues;
+export declare function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues;

package/lib/components/FluentProvider/useFluentProviderContextValues.js

@@ -1,22 +1,23 @@
 import { useConst } from '@fluentui/react-utilities';
 import * as React from 'react';
-export function useFluentProviderContextValues(state) {
-  var root = state.root,
-      dir = state.dir,
-      targetDocument = state.targetDocument,
-      theme = state.theme;
-  var provider = React.useMemo(function () {
-    return {
-      dir: dir,
-      targetDocument: targetDocument
-    };
-  }, [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
+export function useFluentProviderContextValues_unstable(state) {
+  const {
+    root,
+    dir,
+    targetDocument,
+    theme
+  } = state;
+  const provider = React.useMemo(() => ({
+    dir,
+    targetDocument
+  }), [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
 
-  var tooltip = useConst({});
+  const tooltip = useConst({});
   return {
-    provider: provider,
-    tooltip: tooltip,
-    theme: theme,
+    provider,
+    textDirection: dir,
+    tooltip,
+    theme,
     themeClassName: root.className
   };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,QAAyB,2BAAzB;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,8BAAV,CAAyC,KAAzC,EAAmE;AAC/D,MAAA,IAAI,GAAiC,KAAK,CAAtC,IAAJ;AAAA,MAAM,GAAG,GAA4B,KAAK,CAAjC,GAAT;AAAA,MAAW,cAAc,GAAY,KAAK,CAAjB,cAAzB;AAAA,MAA2B,KAAK,GAAK,KAAK,CAAV,KAAhC;AAER,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAAM,WAAC;AAAE,MAAA,GAAG,EAAA,GAAL;AAAO,MAAA,cAAc,EAAtB;AAAC,KAAD;AAAyB,GAA7C,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHuE,CAIvE;;AACA,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAD,CAAxB;AAEA,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;AAEL,IAAA,OAAO,EAAA,OAFF;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,cAAc,EAAE,IAAI,CAAC;AAJhB,GAAP;AAMD","sourceRoot":""}
+{"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/"}

package/lib/components/FluentProvider/useFluentProviderStyles.d.ts

@@ -1,3 +1,4 @@
 import type { FluentProviderState } from './FluentProvider.types';
+export declare const fluentProviderClassName = "fui-FluentProvider";
 /** Applies style classnames to slots */
-export declare const useFluentProviderStyles: (state: FluentProviderState) => FluentProviderState;
+export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;

package/lib/components/FluentProvider/useFluentProviderStyles.js

@@ -1,6 +1,8 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const fluentProviderClassName = 'fui-FluentProvider';
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
@@ -14,9 +16,9 @@ var useStyles = /*#__PURE__*/__styles({
 /** Applies style classnames to slots */
 
 
-export var useFluentProviderStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = mergeClasses(state.themeClassName, styles.root, state.root.className);
+export const useFluentProviderStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useFluentProviderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACA,OAAO,IAAM,uBAAuB,GAAG,UAAC,KAAD,EAA2B;AAChE,MAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,cAAP,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AAEA,SAAO,KAAP;AACD,CANM","sourceRoot":""}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;;AAEP,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,CAAC,uBAAD,EAA0B,KAAK,CAAC,cAAhC,EAAgD,MAAM,CAAC,IAAvD,EAA6D,KAAK,CAAC,IAAN,CAAW,SAAxE,CAAnC;AAEA,SAAO,KAAP;AACD,CANM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FluentProviderState } from './FluentProvider.types';\n\nexport const fluentProviderClassName = 'fui-FluentProvider';\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(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/FluentProvider/useThemeStyleTag.js

@@ -1,39 +1,40 @@
 import { useId, usePrevious } from '@fluentui/react-utilities';
-import { themeToCSSVariables } from '@fluentui/react-theme';
 import * as React from 'react';
+import { fluentProviderClassName } from './useFluentProviderStyles';
 /**
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
  *
  * @returns CSS class to apply the rule
  */
 
-export var useThemeStyleTag = function (options) {
-  var targetDocument = options.targetDocument,
-      theme = options.theme;
-  var styleTagId = useId('fluent-provider');
-  var styleTag = React.useMemo(function () {
+export const useThemeStyleTag = options => {
+  const {
+    targetDocument,
+    theme
+  } = options;
+  const styleTagId = useId(fluentProviderClassName);
+  const styleTag = React.useMemo(() => {
     if (!targetDocument) {
       return null;
     }
 
-    var tag = targetDocument.createElement('style');
+    const tag = targetDocument.createElement('style');
     tag.setAttribute('id', styleTagId);
     targetDocument.head.appendChild(tag);
     return tag;
   }, [styleTagId, targetDocument]);
-  var cssRule = React.useMemo(function () {
-    var cssVars = themeToCSSVariables(theme);
-    var cssVarsAsString = Object.keys(cssVars).reduce(function (cssVarRule, cssVar) {
-      cssVarRule += cssVar + ": " + cssVars[cssVar] + "; ";
+  const cssRule = React.useMemo(() => {
+    const cssVarsAsString = theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
+      cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
       return cssVarRule;
-    }, ''); // result: .fluent-provider1 { --css-var: '#fff' }
+    }, '') : ''; // result: .fluent-provider1 { --css-var: '#fff' }
 
-    return "." + styleTagId + " { " + cssVarsAsString + " }";
+    return `.${styleTagId} { ${cssVarsAsString} }`;
   }, [theme, styleTagId]);
-  var previousCssRule = usePrevious(cssRule);
+  const previousCssRule = usePrevious(cssRule);
 
   if (styleTag && previousCssRule !== cssRule) {
-    var sheet = styleTag.sheet;
+    const sheet = styleTag.sheet;
 
     if (sheet.cssRules.length > 0) {
       sheet.deleteRule(0);
@@ -43,13 +44,10 @@ export var useThemeStyleTag = function (options) {
   } // Removes the style tag from the targetDocument on unmount or change
 
 
-  React.useEffect(function () {
-    return function () {
-      var _a;
-
+  React.useEffect(() => {
+    return () => {
       if (styleTag) {
-        // IE11 safe node removal, otherwise use node.remove()
-        (_a = styleTag.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(styleTag);
+        styleTag.remove();
       }
     };
   }, [styleTag]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;;;AAIG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,OAAD,EAA+D;AACrF,MAAA,cAAc,GAAY,OAAO,CAAnB,cAAd;AAAA,MAAgB,KAAK,GAAK,OAAO,CAAZ,KAArB;AAER,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAD,CAAxB;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC7B,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,QAAM,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,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC5B,QAAM,OAAO,GAAG,mBAAmB,CAAC,KAAD,CAAnC;AACA,QAAM,eAAe,GAAG,MAAM,CAAC,IAAP,CAAY,OAAZ,EAAqB,MAArB,CAA4B,UAAC,UAAD,EAAa,MAAb,EAAmB;AACrE,MAAA,UAAU,IAAO,MAAM,GAAA,IAAN,GAAW,OAAO,CAAC,MAAD,CAAlB,GAA0B,IAA3C;AACA,aAAO,UAAP;AACD,KAHuB,EAGrB,EAHqB,CAAxB,CAF4B,CAO5B;;AACA,WAAO,MAAI,UAAJ,GAAc,KAAd,GAAoB,eAApB,GAAmC,IAA1C;AACD,GATe,EASb,CAAC,KAAD,EAAQ,UAAR,CATa,CAAhB;AAUA,MAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,QAAM,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,GAnC4F,CAqC7F;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,YAAA;AACd,WAAO,YAAA;;;AACL,UAAI,QAAJ,EAAc;AACZ;AACA,SAAA,EAAA,GAAA,QAAQ,CAAC,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,QAAd,CAAtB;AACD;AACF,KALD;AAMD,GAPD,EAOG,CAAC,QAAD,CAPH;AASA,SAAO,UAAP;AACD,CAhDM","sourceRoot":""}
+{"version":3,"sources":["components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,uBAAT,QAAwC,2BAAxC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,gBAAgB,GAAI,OAAD,IAAmE;AACjG,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,KAAK,CAAC,uBAAD,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,GApCgG,CAsCjG;;;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 { fluentProviderClassName } 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 useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n  const { targetDocument, theme } = options;\n\n  const styleTagId = useId(fluentProviderClassName);\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/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\n"]}

package/lib-commonjs/FluentProvider.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/FluentProvider/index"), exports);
 //# sourceMappingURL=FluentProvider.js.map

package/lib-commonjs/FluentProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FluentProvider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["FluentProvider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/FluentProvider/index';\n"],"sourceRoot":"../src/"}

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

@@ -5,21 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FluentProvider = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var renderFluentProvider_1 = /*#__PURE__*/require("./renderFluentProvider");
+const renderFluentProvider_1 = /*#__PURE__*/require("./renderFluentProvider");
 
-var useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
+const useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
 
-var useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
+const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
 
-var useFluentProviderContextValues_1 = /*#__PURE__*/require("./useFluentProviderContextValues");
+const useFluentProviderContextValues_1 = /*#__PURE__*/require("./useFluentProviderContextValues");
 
-exports.FluentProvider = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useFluentProvider_1.useFluentProvider(props, ref);
-  useFluentProviderStyles_1.useFluentProviderStyles(state);
-  var contextValues = useFluentProviderContextValues_1.useFluentProviderContextValues(state);
-  return renderFluentProvider_1.renderFluentProvider(state, contextValues);
+exports.FluentProvider = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useFluentProvider_1.useFluentProvider_unstable(props, ref);
+  useFluentProviderStyles_1.useFluentProviderStyles_unstable(state);
+  const contextValues = useFluentProviderContextValues_1.useFluentProviderContextValues_unstable(state);
+  return renderFluentProvider_1.renderFluentProvider_unstable(state, contextValues);
 });
 exports.FluentProvider.displayName = 'FluentProvider';
 //# sourceMappingURL=FluentProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,UAAN,CAAmD,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AACA,EAAA,yBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,MAAM,aAAa,GAAG,gCAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAtB;AAEA,SAAO,sBAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,aAA5B,CAAP;AACD,CAP6B,CAAjB;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourceRoot":""}
+{"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/"}

package/lib-commonjs/components/FluentProvider/FluentProvider.types.d.ts

@@ -1,10 +1,10 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ProviderContextValue, TooltipContextType, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
 import type { PartialTheme, Theme } from '@fluentui/react-theme';
-import type { ProviderContextValue, TooltipContextType, ThemeContextValue, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type FluentProviderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
-export interface FluentProviderCommons {
+interface FluentProviderCommons {
     /** Sets the direction of text & generated styles. */
     dir: 'ltr' | 'rtl';
     /** Provides the document, can be undefined during SSR render. */
@@ -14,12 +14,13 @@ export interface FluentProviderProps extends Omit<ComponentProps<FluentProviderS
     theme?: PartialTheme;
 }
 export interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
-    theme: Theme;
+    theme: Theme | Partial<Theme> | undefined;
     themeClassName: string;
 }
-export interface FluentProviderContextValues {
+export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
     provider: ProviderContextValue;
-    theme: ThemeContextValue;
     themeClassName: ThemeClassNameContextValue;
+    textDirection: 'ltr' | 'rtl';
     tooltip: TooltipContextType;
 }
+export {};

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/FluentProvider/index.d.ts

@@ -2,4 +2,5 @@ export * from './FluentProvider';
 export * from './FluentProvider.types';
 export * from './renderFluentProvider';
 export * from './useFluentProvider';
+export * from './useFluentProviderStyles';
 export * from './useFluentProviderContextValues';

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./FluentProvider"), exports);
 
@@ -14,5 +14,7 @@ tslib_1.__exportStar(require("./renderFluentProvider"), exports);
 
 tslib_1.__exportStar(require("./useFluentProvider"), exports);
 
+tslib_1.__exportStar(require("./useFluentProviderStyles"), exports);
+
 tslib_1.__exportStar(require("./useFluentProviderContextValues"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\n"],"sourceRoot":"../src/"}