first commit

node_modules/@fluentui/react/lib/components/Fabric/Fabric.base.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IFabricProps } from './Fabric.types';
+export declare const FabricBase: React.FunctionComponent<IFabricProps>;

node_modules/@fluentui/react/lib/components/Fabric/Fabric.base.js

@@ -0,0 +1,66 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, divProperties, getDocument, getNativeProps, getRTL, memoizeFunction, Customizer, FocusRectsProvider, } from '../../Utilities';
+import { createTheme } from '../../Styling';
+import { useMergedRefs } from '@fluentui/react-hooks';
+var getClassNames = classNamesFunction();
+var getFabricTheme = memoizeFunction(function (theme, isRTL) { return createTheme(__assign(__assign({}, theme), { rtl: isRTL })); });
+var getDir = function (_a) {
+    var theme = _a.theme, dir = _a.dir;
+    var contextDir = getRTL(theme) ? 'rtl' : 'ltr';
+    var pageDir = getRTL() ? 'rtl' : 'ltr';
+    var componentDir = dir ? dir : contextDir;
+    return {
+        // If Fabric dir !== contextDir
+        // Or If contextDir !== pageDir
+        // Then we need to set dir of the Fabric root
+        rootDir: componentDir !== contextDir || componentDir !== pageDir ? componentDir : dir,
+        // If dir !== contextDir || pageDir
+        // then set contextual theme around content
+        needsTheme: componentDir !== contextDir,
+    };
+};
+export var FabricBase = React.forwardRef(function (props, ref) {
+    var className = props.className, theme = props.theme, applyTheme = props.applyTheme, applyThemeToBody = props.applyThemeToBody, styles = props.styles;
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        applyTheme: applyTheme,
+        className: className,
+    });
+    var rootElement = React.useRef(null);
+    useApplyThemeToBody(applyThemeToBody, classNames, rootElement);
+    return React.createElement(React.Fragment, null, useRenderedContent(props, classNames, rootElement, ref));
+});
+FabricBase.displayName = 'FabricBase';
+function useRenderedContent(props, _a, rootElement, ref) {
+    var root = _a.root;
+    var _b = props.as, Root = _b === void 0 ? 'div' : _b, dir = props.dir, theme = props.theme;
+    var divProps = getNativeProps(props, divProperties, ['dir']);
+    var _c = getDir(props), rootDir = _c.rootDir, needsTheme = _c.needsTheme;
+    var renderedContent = (React.createElement(FocusRectsProvider, { providerRef: rootElement },
+        React.createElement(Root, __assign({ dir: rootDir }, divProps, { className: root, ref: useMergedRefs(rootElement, ref) }))));
+    // Create the contextual theme if component direction does not match parent direction.
+    if (needsTheme) {
+        // Disabling ThemeProvider here because theme doesn't need to be re-provided by ThemeProvider if dir has changed.
+        renderedContent = (
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        React.createElement(Customizer, { settings: { theme: getFabricTheme(theme, dir === 'rtl') } }, renderedContent));
+    }
+    return renderedContent;
+}
+function useApplyThemeToBody(applyThemeToBody, _a, rootElement) {
+    var bodyThemed = _a.bodyThemed;
+    React.useEffect(function () {
+        if (applyThemeToBody) {
+            var currentDoc_1 = getDocument(rootElement.current);
+            if (currentDoc_1) {
+                currentDoc_1.body.classList.add(bodyThemed);
+                return function () {
+                    currentDoc_1.body.classList.remove(bodyThemed);
+                };
+            }
+        }
+    }, [bodyThemed, applyThemeToBody, rootElement]);
+    return rootElement;
+}
+//# sourceMappingURL=Fabric.base.js.map

node_modules/@fluentui/react/lib/components/Fabric/Fabric.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IFabricProps } from './Fabric.types';
+/**
+ * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.
+ */
+export declare const Fabric: React.FunctionComponent<IFabricProps>;

node_modules/@fluentui/react/lib/components/Fabric/Fabric.js

@@ -0,0 +1,10 @@
+import { styled } from '../../Utilities';
+import { FabricBase } from './Fabric.base';
+import { getStyles } from './Fabric.styles';
+/**
+ * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.
+ */
+export var Fabric = styled(FabricBase, getStyles, undefined, {
+    scope: 'Fabric',
+});
+//# sourceMappingURL=Fabric.js.map

node_modules/@fluentui/react/lib/components/Fabric/Fabric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fabric.js","sourceRoot":"../src/","sources":["components/Fabric/Fabric.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C;;GAEG;AACH,MAAM,CAAC,IAAM,MAAM,GAA0C,MAAM,CACjE,UAAU,EACV,SAAS,EACT,SAAS,EACT;IACE,KAAK,EAAE,QAAQ;CAChB,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { FabricBase } from './Fabric.base';\nimport { getStyles } from './Fabric.styles';\nimport type { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types';\n\n/**\n * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.\n */\nexport const Fabric: React.FunctionComponent<IFabricProps> = styled<IFabricProps, IFabricStyleProps, IFabricStyles>(\n  FabricBase,\n  getStyles,\n  undefined,\n  {\n    scope: 'Fabric',\n  },\n);\n"]}

node_modules/@fluentui/react/lib/components/Fabric/Fabric.styles.d.ts

@@ -0,0 +1,6 @@
+import type { IFabricStyleProps, IFabricStyles } from './Fabric.types';
+export interface IFabricClassNames {
+    root: string;
+    bodyThemed: string;
+}
+export declare const getStyles: (props: IFabricStyleProps) => IFabricStyles;

node_modules/@fluentui/react/lib/components/Fabric/Fabric.styles.js

@@ -0,0 +1,36 @@
+import { getGlobalClassNames } from '../../Styling';
+var inheritFont = { fontFamily: 'inherit' };
+var GlobalClassNames = {
+    root: 'ms-Fabric',
+    bodyThemed: 'ms-Fabric-bodyThemed',
+};
+export var getStyles = function (props) {
+    var applyTheme = props.applyTheme, className = props.className, preventBlanketFontInheritance = props.preventBlanketFontInheritance, theme = props.theme;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    return {
+        root: [
+            classNames.root,
+            theme.fonts.medium,
+            {
+                color: theme.palette.neutralPrimary,
+            },
+            !preventBlanketFontInheritance && {
+                '& button': inheritFont,
+                '& input': inheritFont,
+                '& textarea': inheritFont,
+            },
+            // apply theme to only if applyTheme is true
+            applyTheme && {
+                color: theme.semanticColors.bodyText,
+                backgroundColor: theme.semanticColors.bodyBackground,
+            },
+            className,
+        ],
+        bodyThemed: [
+            {
+                backgroundColor: theme.semanticColors.bodyBackground,
+            },
+        ],
+    };
+};
+//# sourceMappingURL=Fabric.styles.js.map

node_modules/@fluentui/react/lib/components/Fabric/Fabric.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fabric.styles.js","sourceRoot":"../src/","sources":["components/Fabric/Fabric.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGpD,IAAM,WAAW,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AAE9C,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,sBAAsB;CACnC,CAAC;AAOF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAwB;IACxC,IAAA,UAAU,GAAsD,KAAK,WAA3D,EAAE,SAAS,GAA2C,KAAK,UAAhD,EAAE,6BAA6B,GAAY,KAAK,8BAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAC9E,IAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAChE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,CAAC,IAAI;YACf,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACpC;YACD,CAAC,6BAA6B,IAAI;gBAChC,UAAU,EAAE,WAAW;gBACvB,SAAS,EAAE,WAAW;gBACtB,YAAY,EAAE,WAAW;aAC1B;YACD,4CAA4C;YAC5C,UAAU,IAAI;gBACZ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;gBACpC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;aACrD;YACD,SAAS;SACV;QACD,UAAU,EAAE;YACV;gBACE,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;aACrD;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { getGlobalClassNames } from '../../Styling';\nimport type { IFabricStyleProps, IFabricStyles } from './Fabric.types';\n\nconst inheritFont = { fontFamily: 'inherit' };\n\nconst GlobalClassNames = {\n  root: 'ms-Fabric',\n  bodyThemed: 'ms-Fabric-bodyThemed',\n};\n\nexport interface IFabricClassNames {\n  root: string;\n  bodyThemed: string;\n}\n\nexport const getStyles = (props: IFabricStyleProps): IFabricStyles => {\n  const { applyTheme, className, preventBlanketFontInheritance, theme } = props;\n  const classNames = getGlobalClassNames(GlobalClassNames, theme);\n  return {\n    root: [\n      classNames.root,\n      theme.fonts.medium,\n      {\n        color: theme.palette.neutralPrimary,\n      },\n      !preventBlanketFontInheritance && {\n        '& button': inheritFont,\n        '& input': inheritFont,\n        '& textarea': inheritFont,\n      },\n      // apply theme to only if applyTheme is true\n      applyTheme && {\n        color: theme.semanticColors.bodyText,\n        backgroundColor: theme.semanticColors.bodyBackground,\n      },\n      className,\n    ],\n    bodyThemed: [\n      {\n        backgroundColor: theme.semanticColors.bodyBackground,\n      },\n    ],\n  };\n};\n"]}

node_modules/@fluentui/react/lib/components/Fabric/Fabric.types.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { IStyle, ITheme } from '../../Styling';
+import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
+export interface IFabricProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
+    componentRef?: IRefObject<{}>;
+    /**
+     * Overrides the root element type, defaults to `div`.
+     */
+    as?: React.ElementType;
+    /**
+     * Injected by the `styled` HOC wrapper.
+     */
+    theme?: ITheme;
+    /**
+     * Overrides the styles for the component.
+     */
+    styles?: IStyleFunctionOrObject<IFabricStyleProps, IFabricStyles>;
+    /**
+     * Applies the current body background specified in the theme to the root element.
+     */
+    applyTheme?: boolean;
+    /**
+     * Applies the current body background specified in the theme to the body element.
+     */
+    applyThemeToBody?: boolean;
+    /**
+     * Specifies the direction of the content. Will inject a `dir` attribute, and also ensure that the `rtl` flag of the
+     * contextual theme object is set correctly so that css registered with merge-styles can be auto flipped correctly.
+     */
+    dir?: 'rtl' | 'ltr' | 'auto';
+    /**
+     * By default, the Fabric component has children selectors for button, input and textarea elements that apply the
+     * style `fontFamily: 'inherit'`. This is done so the font family is consistent across all of these elements under a
+     * Fabric component. However, this is expensive in style recalculation scenarios and it is not the responsibility of
+     * the Fabric component to ensure that non-Fluent elements within it have these styles.
+     * Setting this prop to true prevents the Fabric component from applying these children selectors. As long as only
+     * v8 Fluent components are being used within it, no changes should be apparent since all Fluent components already
+     * set the font family in their styles.
+     * @defaultvalue false
+     */
+    preventBlanketFontInheritance?: boolean;
+}
+export interface IFabricStyleProps extends IFabricProps {
+    theme: ITheme;
+}
+export interface IFabricStyles {
+    root: IStyle;
+    bodyThemed: IStyle;
+}

node_modules/@fluentui/react/lib/components/Fabric/Fabric.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Fabric.types.js.map

node_modules/@fluentui/react/lib/components/Fabric/Fabric.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fabric.types.js","sourceRoot":"../src/","sources":["components/Fabric/Fabric.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\n\nexport interface IFabricProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {\n  componentRef?: IRefObject<{}>;\n\n  /**\n   * Overrides the root element type, defaults to `div`.\n   */\n  as?: React.ElementType;\n\n  /**\n   * Injected by the `styled` HOC wrapper.\n   */\n  theme?: ITheme;\n\n  /**\n   * Overrides the styles for the component.\n   */\n  styles?: IStyleFunctionOrObject<IFabricStyleProps, IFabricStyles>;\n\n  /**\n   * Applies the current body background specified in the theme to the root element.\n   */\n  applyTheme?: boolean;\n\n  /**\n   * Applies the current body background specified in the theme to the body element.\n   */\n  applyThemeToBody?: boolean;\n\n  /**\n   * Specifies the direction of the content. Will inject a `dir` attribute, and also ensure that the `rtl` flag of the\n   * contextual theme object is set correctly so that css registered with merge-styles can be auto flipped correctly.\n   */\n  dir?: 'rtl' | 'ltr' | 'auto';\n\n  /**\n   * By default, the Fabric component has children selectors for button, input and textarea elements that apply the\n   * style `fontFamily: 'inherit'`. This is done so the font family is consistent across all of these elements under a\n   * Fabric component. However, this is expensive in style recalculation scenarios and it is not the responsibility of\n   * the Fabric component to ensure that non-Fluent elements within it have these styles.\n   * Setting this prop to true prevents the Fabric component from applying these children selectors. As long as only\n   * v8 Fluent components are being used within it, no changes should be apparent since all Fluent components already\n   * set the font family in their styles.\n   * @defaultvalue false\n   */\n  preventBlanketFontInheritance?: boolean;\n}\n\nexport interface IFabricStyleProps extends IFabricProps {\n  theme: ITheme;\n}\n\nexport interface IFabricStyles {\n  root: IStyle;\n  bodyThemed: IStyle;\n}\n"]}

node_modules/@fluentui/react/lib/components/Fabric/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Fabric';
+export * from './Fabric.base';
+export * from './Fabric.types';

node_modules/@fluentui/react/lib/components/Fabric/index.js

@@ -0,0 +1,4 @@
+export * from './Fabric';
+export * from './Fabric.base';
+export * from './Fabric.types';
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib/components/Fabric/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Fabric/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './Fabric';\nexport * from './Fabric.base';\nexport * from './Fabric.types';\n"]}