@fluentui/react-provider 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

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

@@ -3,27 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderFluentProvider = void 0;
+exports.renderFluentProvider_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of FluentProvider
  */
 
 
-var renderFluentProvider = function (state, contextValues) {
-  var _a = react_utilities_1.getSlots(state, useFluentProvider_1.fluentProviderShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
+const renderFluentProvider_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
   return React.createElement(react_shared_contexts_1.ProviderContext.Provider, {
     value: contextValues.provider
   }, React.createElement(react_shared_contexts_1.ThemeContext.Provider, {
@@ -32,8 +30,11 @@ var renderFluentProvider = function (state, contextValues) {
     value: contextValues.themeClassName
   }, React.createElement(react_shared_contexts_1.TooltipContext.Provider, {
     value: contextValues.tooltip
-  }, React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children)))));
+  }, React.createElement(react_1.TextDirectionProvider, {
+    dir: contextValues.textDirection
+  }, React.createElement(slots.root, { ...slotProps.root
+  }, state.root.children))))));
 };
 
-exports.renderFluentProvider = renderFluentProvider;
+exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
 //# sourceMappingURL=renderFluentProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAEA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA6B,aAA7B,EAAuE;AACnG,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,EAAqC,mBAAA,CAAA,4BAArC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,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,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF;AAWD,CAdM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"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/"}

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

@@ -3,64 +3,86 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFluentProvider = exports.fluentProviderShorthandProps = void 0;
+exports.useFluentProvider_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
-var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-var react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const React = /*#__PURE__*/require("react");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var useThemeStyleTag_1 = /*#__PURE__*/require("./useThemeStyleTag");
-
-exports.fluentProviderShorthandProps = ['root'];
+const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProviderThemeStyleTag");
 /**
  * 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
  */
 
-var useFluentProvider = function (props, ref) {
-  var parentContext = react_shared_contexts_1.useFluent();
-  var parentTheme = react_shared_contexts_1.useTheme();
+
+const useFluentProvider_unstable = (props, ref) => {
+  const parentContext = react_shared_contexts_1.useFluent();
+  const parentTheme = react_shared_contexts_1.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 = react_theme_1.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_1.useThemeStyleTag({
+    themeClassName: useFluentProviderThemeStyleTag_1.useFluentProviderThemeStyleTag({
       theme: mergedTheme,
-      targetDocument: targetDocument
+      targetDocument
     }),
     components: {
       root: 'div'
     },
-    root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({}, props), {
-      dir: dir,
+    root: react_utilities_1.getNativeElementProps('div', { ...props,
+      dir,
       ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useKeyboardNavAttribute())
-    }))
+    })
   };
 };
 
-exports.useFluentProvider = useFluentProvider;
+exports.useFluentProvider_unstable = useFluentProvider_unstable;
+
+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-commonjs/components/FluentProvider/useFluentProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGa,OAAA,CAAA,4BAAA,GAA8D,CAAC,MAAD,CAA9D;AAEb;;;;;;;;AAQG;;AACI,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAA6B,GAA7B,EAAwD;AACvF,MAAM,aAAa,GAAG,uBAAA,CAAA,SAAA,EAAtB;AACA,MAAM,WAAW,GAAG,uBAAA,CAAA,QAAA,EAApB;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,aAAA,CAAA,WAAA,CAAY,WAAZ,EAAyB,KAAzB,CAApB;AAEA,SAAO;AACL,IAAA,GAAG,EAAA,GADE;AAEL,IAAA,cAAc,EAAA,cAFT;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,kBAAA,CAAA,gBAAA,CAAiB;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA,cAAc,EAAA;AAApC,KAAjB,CAJX;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA2B,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAC5B,KAD4B,CAAA,EACvB;AACR,MAAA,GAAG,EAAA,GADK;AAER,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,uBAAA,EAAnB;AAFG,KADuB,CAA3B;AAVD,GAAP;AAgBD,CA5BM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"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/"}

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

@@ -3,32 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFluentProviderContextValues = void 0;
+exports.useFluentProviderContextValues_unstable = void 0;
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-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
+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 = react_utilities_1.useConst({});
+  const tooltip = react_utilities_1.useConst({});
   return {
-    provider: provider,
-    tooltip: tooltip,
-    theme: theme,
+    provider,
+    textDirection: dir,
+    tooltip,
+    theme,
     themeClassName: root.className
   };
 }
 
-exports.useFluentProviderContextValues = useFluentProviderContextValues;
+exports.useFluentProviderContextValues_unstable = useFluentProviderContextValues_unstable;
 //# sourceMappingURL=useFluentProviderContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,8BAAhB,CAA+C,KAA/C,EAAyE;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,iBAAA,CAAA,QAAA,CAAS,EAAT,CAAhB;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;;AAbD,OAAA,CAAA,8BAAA,GAAA,8BAAA","sourceRoot":""}
+{"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/"}

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

@@ -3,11 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFluentProviderStyles = void 0;
+exports.useFluentProviderStyles_unstable = exports.fluentProviderClassNames = exports.fluentProviderClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+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({
   "root": {
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
@@ -21,11 +32,11 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 /** Applies style classnames to slots */
 
 
-var useFluentProviderStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(state.themeClassName, styles.root, state.root.className);
+const useFluentProviderStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
   return state;
 };
 
-exports.useFluentProviderStyles = useFluentProviderStyles;
+exports.useFluentProviderStyles_unstable = useFluentProviderStyles_unstable;
 //# sourceMappingURL=useFluentProviderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACO,IAAM,uBAAuB,GAAG,UAAC,KAAD,EAA2B;AAChE,MAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,KAAK,CAAC,cAAnB,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;AAEA,SAAO,KAAP;AACD,CANM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}
+{"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/"}

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFluentProviderThemeStyleTag = void 0;
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const React = /*#__PURE__*/require("react");
+
+const useFluentProviderStyles_1 = /*#__PURE__*/require("./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
+ */
+
+
+const useFluentProviderThemeStyleTag = options => {
+  const {
+    targetDocument,
+    theme
+  } = options;
+  const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
+  const styleTag = React.useMemo(() => {
+    if (!targetDocument) {
+      return null;
+    }
+
+    const tag = targetDocument.createElement('style');
+    tag.setAttribute('id', styleTagId);
+    targetDocument.head.appendChild(tag);
+    return tag;
+  }, [styleTagId, targetDocument]);
+  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' }
+
+    return `.${styleTagId} { ${cssVarsAsString} }`;
+  }, [theme, styleTagId]);
+  const previousCssRule = react_utilities_1.usePrevious(cssRule);
+
+  if (styleTag && previousCssRule !== cssRule) {
+    const sheet = styleTag.sheet;
+
+    if (sheet) {
+      if (sheet.cssRules.length > 0) {
+        sheet.deleteRule(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
+
+
+  React.useEffect(() => {
+    return () => {
+      if (styleTag) {
+        styleTag.remove();
+      }
+    };
+  }, [styleTag]);
+  return styleTagId;
+};
+
+exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
+//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map

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

@@ -0,0 +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,KAAJ,EAAW;AACT,UAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,QAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AACD,MAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,KALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AAChD;AACA,MAAA,OAAO,CAAC,KAAR,CAAc,uFAAd;AACD;AACF,GAxC8G,CA0C/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,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/"}

package/lib-commonjs/index.js

@@ -3,11 +3,59 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTheme = exports.useFluent = void 0;
+exports.useTheme = exports.useFluent = exports.useFluentProviderThemeStyleTag = exports.useFluentProviderStyles_unstable = exports.useFluentProvider_unstable = exports.useFluentProviderContextValues_unstable = exports.renderFluentProvider_unstable = exports.FluentProvider = exports.fluentProviderClassNames = exports.fluentProviderClassName = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+var FluentProvider_1 = /*#__PURE__*/require("./FluentProvider"); // eslint-disable-next-line deprecation/deprecation
 
-tslib_1.__exportStar(require("./FluentProvider"), exports);
+
+Object.defineProperty(exports, "fluentProviderClassName", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.fluentProviderClassName;
+  }
+});
+Object.defineProperty(exports, "fluentProviderClassNames", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.fluentProviderClassNames;
+  }
+});
+Object.defineProperty(exports, "FluentProvider", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.FluentProvider;
+  }
+});
+Object.defineProperty(exports, "renderFluentProvider_unstable", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.renderFluentProvider_unstable;
+  }
+});
+Object.defineProperty(exports, "useFluentProviderContextValues_unstable", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.useFluentProviderContextValues_unstable;
+  }
+});
+Object.defineProperty(exports, "useFluentProvider_unstable", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.useFluentProvider_unstable;
+  }
+});
+Object.defineProperty(exports, "useFluentProviderStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.useFluentProviderStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useFluentProviderThemeStyleTag", {
+  enumerable: true,
+  get: function () {
+    return FluentProvider_1.useFluentProviderThemeStyleTag;
+  }
+});
 
 var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,WAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,SAAA;AAAS;AAAT,CAAA;AAAW,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,QAAA;AAAQ;AAAR,CAAA","sourceRoot":""}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA,C,CACE;;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uCAAA;AAAuC;AAAvC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,gCAAA;AAAgC;AAAhC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,8BAAA;AAA8B;AAA9B,CAAA;;AASF,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,WAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,SAAA;AAAS;AAAT,CAAA;AAAW,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,QAAA;AAAQ;AAAR,CAAA","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/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.0.0-nightly.d730088d7f.0",
+  "version": "9.0.0-rc.10",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -14,40 +14,29 @@
   "scripts": {
     "build": "just-scripts build",
     "bundle-size": "bundle-size measure",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-provider/src && yarn docs",
-    "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-provider/src && yarn docs",
+    "storybook": "node ../../../scripts/storybook/runner",
+    "start": "yarn storybook",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-nightly.d730088d7f.0",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-nightly.d730088d7f.0",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/jest": "24.9.1",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.6",
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/react-shared-contexts": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/react-tabster": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/react-theme": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/react-utilities": "9.0.0-nightly.d730088d7f.0",
+    "@griffel/react": "1.0.5",
+    "@fluentui/react-shared-contexts": "9.0.0-rc.8",
+    "@fluentui/react-tabster": "9.0.0-rc.10",
+    "@fluentui/react-theme": "9.0.0-rc.8",
+    "@fluentui/react-utilities": "9.0.0-rc.9",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -57,11 +46,17 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
   }
 }

package/dist/react-provider.d.ts

@@ -1,67 +0,0 @@
-import type { ComponentProps } from '@fluentui/react-utilities';
-import type { ComponentState } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import type { PartialTheme } from '@fluentui/react-theme';
-import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
-import * as React_2 from 'react';
-import type { Theme } from '@fluentui/react-theme';
-import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
-import type { ThemeContextValue } 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';
-
-export declare const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
-
-export 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 {
-    provider: ProviderContextValue;
-    theme: ThemeContextValue;
-    themeClassName: ThemeClassNameContextValue;
-    tooltip: TooltipContextType;
-}
-
-export declare interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
-    theme?: PartialTheme;
-}
-
-export declare const fluentProviderShorthandProps: (keyof FluentProviderSlots)[];
-
-export declare type FluentProviderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-};
-
-export declare interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
-    theme: Theme;
-    themeClassName: string;
-}
-
-/**
- * Render the final JSX of FluentProvider
- */
-export declare const renderFluentProvider: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
-
-export { useFluent }
-
-/**
- * Create the state required to render FluentProvider.
- *
- * The returned state can be modified with hooks such as useFluentProviderStyles,
- * before being passed to renderFluentProvider.
- *
- * @param props - props from this instance of FluentProvider
- * @param ref - reference to root HTMLElement of FluentProvider
- */
-export declare const useFluentProvider: (props: FluentProviderProps, ref: React_2.Ref<HTMLElement>) => FluentProviderState;
-
-export declare function useFluentProviderContextValues(state: FluentProviderState): FluentProviderContextValues;
-
-export { useTheme }
-
-export { }

package/lib/FluentProvider.d.ts

@@ -1 +0,0 @@
-export * from './components/FluentProvider/index';

package/lib/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import type { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;