@fluentui/react-provider 0.0.0-nightly-20230321-0440.1 → 0.0.0-nightly-20230324-0422.1

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

@@ -1,37 +1,55 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    fluentProviderClassNames: ()=>fluentProviderClassNames,
+    useFluentProviderStyles_unstable: ()=>useFluentProviderStyles_unstable
 });
-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");
-exports.fluentProviderClassNames = {
-  root: 'fui-FluentProvider'
+const _core = require("@griffel/core");
+const _react = require("@griffel/react");
+const fluentProviderClassNames = {
+    root: 'fui-FluentProvider'
 };
-const useStyles = /*#__PURE__*/core_1.__styles({
-  root: {
-    sj55zd: "f19n0e5",
-    De3pzq: "fxugw4r",
-    fsow6f: ["f1o700av", "fes3tcz"],
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fkhj508",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "f1i3iumi"
-  }
+const useStyles = /*#__PURE__*/ (0, _core["__styles"])({
+    root: {
+        sj55zd: "f19n0e5",
+        De3pzq: "fxugw4r",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ],
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    }
 }, {
-  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);}"]
+    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 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;
-};
-exports.useFluentProviderStyles_unstable = useFluentProviderStyles_unstable;
+const useFluentProviderStyles_unstable = (state)=>{
+    const renderer = (0, _react.useRenderer_unstable)();
+    const styles = useStyles({
+        dir: state.dir,
+        renderer
+    });
+    state.root.className = (0, _core.mergeClasses)(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
+    return state;
+}; //# sourceMappingURL=useFluentProviderStyles.js.map
+
 //# sourceMappingURL=useFluentProviderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["core_1","require","react_1","react_theme_1","exports","fluentProviderClassNames","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,MAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AAIaG,OAAA,CAAAC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGP,MAAA,CAAAQ,QAAU;EAAAF,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAO1B;AAEF;AACO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGjB,OAAA,CAAAkB,oBAAoB,EAAE;EACvC,MAAMC,MAAM,GAAGd,SAAS,CAAC;IAAEe,GAAG,EAAEJ,KAAK,CAACI,GAAG;IAAEH;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGvB,MAAA,CAAAwB,YAAY,CACjCpB,OAAA,CAAAC,wBAAwB,CAACC,IAAI,EAC7BY,KAAK,CAACO,cAAc,EACpBJ,MAAM,CAACf,IAAI,EACXY,KAAK,CAACZ,IAAI,CAACiB,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAZYd,OAAA,CAAAa,gCAAgC,GAAAA,gCAAA"}
+{"version":3,"sources":["../../../lib/components/FluentProvider/useFluentProviderStyles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n  root: 'fui-FluentProvider'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    sj55zd: \"f19n0e5\",\n    De3pzq: \"fxugw4r\",\n    fsow6f: [\"f1o700av\", \"fes3tcz\"],\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  }\n}, {\n  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);}\"]\n});\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = state => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({\n    dir: state.dir,\n    renderer\n  });\n  state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useFluentProviderStyles.js.map"],"names":["fluentProviderClassNames","useFluentProviderStyles_unstable","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB,MAAxBA;IAiBAC,gCAAgC,MAAhCA;;sBApB0B;uBACF;AAE9B,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,iBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAmD;QAA8D;QAA+B;QAA+B;QAAgD;QAA+C;QAAmD;KAAmD;AAC1X;AAEO,MAAMX,mCAAmCY,CAAAA,QAAS;IACvD,MAAMC,WAAWC,IAAAA,2BAAoB;IACrC,MAAMC,SAASb,UAAU;QACvBc,KAAKJ,MAAMI,GAAG;QACdH;IACF;IACAD,MAAMX,IAAI,CAACgB,SAAS,GAAGC,IAAAA,kBAAY,EAACnB,yBAAyBE,IAAI,EAAEW,MAAMO,cAAc,EAAEJ,OAAOd,IAAI,EAAEW,MAAMX,IAAI,CAACgB,SAAS;IAC1H,OAAOL;AACT,GACA,mDAAmD"}

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

@@ -1,73 +1,98 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useFluentProviderThemeStyleTag", {
+    enumerable: true,
+    get: ()=>useFluentProviderThemeStyleTag
 });
-exports.useFluentProviderThemeStyleTag = void 0;
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const react_1 = /*#__PURE__*/require("@griffel/react");
-const React = /*#__PURE__*/require("react");
-const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _reactUtilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _useFluentProviderStyles = require("./useFluentProviderStyles");
 // String concatenation is used to prevent bundlers to complain with older versions of React
-const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
-const createStyleTag = (target, elementAttributes) => {
-  if (!target) {
-    return undefined;
-  }
-  const tag = target.createElement('style');
-  Object.keys(elementAttributes).forEach(attrName => {
-    tag.setAttribute(attrName, elementAttributes[attrName]);
-  });
-  target.head.appendChild(tag);
-  return tag;
-};
-const insertSheet = (tag, rule) => {
-  const sheet = tag.sheet;
-  if (sheet) {
-    if (sheet.cssRules.length > 0) {
-      sheet.deleteRule(0);
+const useInsertionEffect = _react['useInsertion' + 'Effect'] ? _react['useInsertion' + 'Effect'] : _reactUtilities.useIsomorphicLayoutEffect;
+const createStyleTag = (target, elementAttributes)=>{
+    if (!target) {
+        return undefined;
     }
-    sheet.insertRule(rule, 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.');
-  }
-};
-/**
- * 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 renderer = react_1.useRenderer_unstable();
-  const styleTag = React.useRef();
-  const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
-  const styleElementAttributes = renderer.styleElementAttributes;
-  const cssVarsAsString = React.useMemo(() => {
-    return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
-      cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
-      return cssVarRule;
-    }, '') : '';
-  }, [theme]);
-  const rule = `.${styleTagId} { ${cssVarsAsString} }`;
-  useInsertionEffect(() => {
-    styleTag.current = createStyleTag(targetDocument, {
-      ...styleElementAttributes,
-      id: styleTagId
+    const tag = target.createElement('style');
+    Object.keys(elementAttributes).forEach((attrName)=>{
+        tag.setAttribute(attrName, elementAttributes[attrName]);
     });
-    if (styleTag.current) {
-      insertSheet(styleTag.current, rule);
-      return () => {
-        var _a;
-        (_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
-      };
+    target.head.appendChild(tag);
+    return tag;
+};
+const insertSheet = (tag, rule)=>{
+    const sheet = tag.sheet;
+    if (sheet) {
+        if (sheet.cssRules.length > 0) {
+            sheet.deleteRule(0);
+        }
+        sheet.insertRule(rule, 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.');
     }
-  }, [styleTagId, targetDocument, rule, styleElementAttributes]);
-  return styleTagId;
 };
-exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
+const useFluentProviderThemeStyleTag = (options)=>{
+    const { targetDocument , theme , rendererAttributes  } = options;
+    const styleTag = _react.useRef();
+    const styleTagId = (0, _reactUtilities.useId)(_useFluentProviderStyles.fluentProviderClassNames.root);
+    const styleElementAttributes = rendererAttributes;
+    const cssVarsAsString = _react.useMemo(()=>{
+        return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{
+            cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
+            return cssVarRule;
+        }, '') : '';
+    }, [
+        theme
+    ]);
+    const rule = `.${styleTagId} { ${cssVarsAsString} }`;
+    useHandleSSRStyleElements(targetDocument, styleTagId);
+    useInsertionEffect(()=>{
+        // The style element could already have been created during SSR - no need to recreate it
+        const ssrStyleElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.getElementById(styleTagId);
+        if (ssrStyleElement) {
+            styleTag.current = ssrStyleElement;
+        } else {
+            styleTag.current = createStyleTag(targetDocument, {
+                ...styleElementAttributes,
+                id: styleTagId
+            });
+            if (styleTag.current) {
+                insertSheet(styleTag.current, rule);
+            }
+        }
+        return ()=>{
+            var _styleTag_current;
+            (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();
+        };
+    }, [
+        styleTagId,
+        targetDocument,
+        rule,
+        styleElementAttributes
+    ]);
+    return {
+        styleTagId,
+        rule
+    };
+};
+function useHandleSSRStyleElements(targetDocument, styleTagId) {
+    // Using a state factory so that this logic only runs once per render
+    // Each FluentProvider can create its own style element during SSR as a slot
+    // Moves all theme style elements to document head during render to avoid hydration errors.
+    // Should be strict mode safe since the logic is idempotent.
+    _react.useState(()=>{
+        if (!targetDocument) {
+            return;
+        }
+        const themeStyleElement = targetDocument.getElementById(styleTagId);
+        if (themeStyleElement) {
+            targetDocument.head.append(themeStyleElement);
+        }
+    });
+} //# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
+
 //# sourceMappingURL=useFluentProviderThemeStyleTag.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["react_utilities_1","require","react_1","React","useFluentProviderStyles_1","useInsertionEffect","useIsomorphicLayoutEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","useRenderer_unstable","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","_a","remove","exports"],"sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n  ? (React as never)['useInsertion' + 'Effect']\n  : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n  if (!target) {\n    return undefined;\n  }\n\n  const tag = target.createElement('style');\n\n  Object.keys(elementAttributes).forEach(attrName => {\n    tag.setAttribute(attrName, elementAttributes[attrName]);\n  });\n\n  target.head.appendChild(tag);\n  return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n  const sheet = tag.sheet;\n\n  if (sheet) {\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n    sheet.insertRule(rule, 0);\n  } else if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n  }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n  const { targetDocument, theme } = options;\n\n  const renderer = useRenderer_unstable();\n  const styleTag = React.useRef<HTMLStyleElement>();\n\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = renderer.styleElementAttributes;\n\n  const cssVarsAsString = React.useMemo(() => {\n    return theme\n      ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n          cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n          return cssVarRule;\n        }, '')\n      : '';\n  }, [theme]);\n\n  const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n  useInsertionEffect(() => {\n    styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n    if (styleTag.current) {\n      insertSheet(styleTag.current, rule);\n\n      return () => {\n        styleTag.current?.remove();\n      };\n    }\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n  return styleTagId;\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/FluentProvider/useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes) => {\n  if (!target) {\n    return undefined;\n  }\n  const tag = target.createElement('style');\n  Object.keys(elementAttributes).forEach(attrName => {\n    tag.setAttribute(attrName, elementAttributes[attrName]);\n  });\n  target.head.appendChild(tag);\n  return tag;\n};\nconst insertSheet = (tag, rule) => {\n  const sheet = tag.sheet;\n  if (sheet) {\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n    sheet.insertRule(rule, 0);\n  } else if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n  }\n};\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = options => {\n  const {\n    targetDocument,\n    theme,\n    rendererAttributes\n  } = options;\n  const styleTag = React.useRef();\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = rendererAttributes;\n  const cssVarsAsString = React.useMemo(() => {\n    return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {\n      cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n      return cssVarRule;\n    }, '') : '';\n  }, [theme]);\n  const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n  useHandleSSRStyleElements(targetDocument, styleTagId);\n  useInsertionEffect(() => {\n    // The style element could already have been created during SSR - no need to recreate it\n    const ssrStyleElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.getElementById(styleTagId);\n    if (ssrStyleElement) {\n      styleTag.current = ssrStyleElement;\n    } else {\n      styleTag.current = createStyleTag(targetDocument, {\n        ...styleElementAttributes,\n        id: styleTagId\n      });\n      if (styleTag.current) {\n        insertSheet(styleTag.current, rule);\n      }\n    }\n    return () => {\n      var _styleTag_current;\n      (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();\n    };\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n  return {\n    styleTagId,\n    rule\n  };\n};\nfunction useHandleSSRStyleElements(targetDocument, styleTagId) {\n  // Using a state factory so that this logic only runs once per render\n  // Each FluentProvider can create its own style element during SSR as a slot\n  // Moves all theme style elements to document head during render to avoid hydration errors.\n  // Should be strict mode safe since the logic is idempotent.\n  React.useState(() => {\n    if (!targetDocument) {\n      return;\n    }\n    const themeStyleElement = targetDocument.getElementById(styleTagId);\n    if (themeStyleElement) {\n      targetDocument.head.append(themeStyleElement);\n    }\n  });\n}\n//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map"],"names":["useFluentProviderThemeStyleTag","useInsertionEffect","React","useIsomorphicLayoutEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","_styleTag_current","remove","useState","themeStyleElement","append"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -1,50 +1,23 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFluentProviderThemeStyleTag = exports.useFluentProviderStyles_unstable = exports.useFluentProvider_unstable = exports.useFluentProviderContextValues_unstable = exports.renderFluentProvider_unstable = exports.FluentProvider = exports.fluentProviderClassNames = void 0;
-var FluentProvider_1 = /*#__PURE__*/require("./FluentProvider");
-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;
-  }
-});
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    fluentProviderClassNames: ()=>_fluentProvider.fluentProviderClassNames,
+    FluentProvider: ()=>_fluentProvider.FluentProvider,
+    renderFluentProvider_unstable: ()=>_fluentProvider.renderFluentProvider_unstable,
+    useFluentProviderContextValues_unstable: ()=>_fluentProvider.useFluentProviderContextValues_unstable,
+    useFluentProvider_unstable: ()=>_fluentProvider.useFluentProvider_unstable,
+    useFluentProviderStyles_unstable: ()=>_fluentProvider.useFluentProviderStyles_unstable,
+    useFluentProviderThemeStyleTag: ()=>_fluentProvider.useFluentProviderThemeStyleTag
+});
+const _fluentProvider = require("./FluentProvider");
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["FluentProvider_1","require","Object","defineProperty","exports","enumerable","get","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sources":["../../../../../../../packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAO,wBAAwB;EAAA;AAAA;AACxBL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAQ,cAAc;EAAA;AAAA;AACdN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAS,6BAA6B;EAAA;AAAA;AAC7BP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAU,uCAAuC;EAAA;AAAA;AACvCR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAW,0BAA0B;EAAA;AAAA;AAC1BT,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAY,gCAAgC;EAAA;AAAA;AAChCV,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAa,8BAA8B;EAAA;AAAA"}
+{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';\n//# sourceMappingURL=index.js.map"],"names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IAASA,wBAAwB,MAAxBA,wCAAwB;IAAEC,cAAc,MAAdA,8BAAc;IAAEC,6BAA6B,MAA7BA,6CAA6B;IAAEC,uCAAuC,MAAvCA,uDAAuC;IAAEC,0BAA0B,MAA1BA,0CAA0B;IAAEC,gCAAgC,MAAhCA,gDAAgC;IAAEC,8BAA8B,MAA9BA,8CAA8B;;gCAAQ;CAC/N,iCAAiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "0.0.0-nightly-20230321-0440.1",
+  "version": "0.0.0-nightly-20230324-0422.1",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,23 +22,23 @@
     "storybook": "start-storybook",
     "start": "yarn storybook",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230321-0440.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230324-0422.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
     "@griffel/core": "^1.9.0",
     "@griffel/react": "^1.5.2",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230321-0440.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230321-0440.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230321-0440.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230321-0440.1",
-    "tslib": "^2.1.0"
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230324-0422.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230324-0422.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230324-0422.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230324-0422.1",
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",