first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IFabricProps } from './Fabric.types';
export declare const FabricBase: React.FunctionComponent<IFabricProps>;
+66
View File
@@ -0,0 +1,66 @@
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Styling", "@fluentui/react-hooks"], function (require, exports, tslib_1, React, Utilities_1, Styling_1, react_hooks_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FabricBase = void 0;
var getClassNames = (0, Utilities_1.classNamesFunction)();
var getFabricTheme = (0, Utilities_1.memoizeFunction)(function (theme, isRTL) { return (0, Styling_1.createTheme)(tslib_1.__assign(tslib_1.__assign({}, theme), { rtl: isRTL })); });
var getDir = function (_a) {
var theme = _a.theme, dir = _a.dir;
var contextDir = (0, Utilities_1.getRTL)(theme) ? 'rtl' : 'ltr';
var pageDir = (0, Utilities_1.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,
};
};
exports.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));
});
exports.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 = (0, Utilities_1.getNativeProps)(props, Utilities_1.divProperties, ['dir']);
var _c = getDir(props), rootDir = _c.rootDir, needsTheme = _c.needsTheme;
var renderedContent = (React.createElement(Utilities_1.FocusRectsProvider, { providerRef: rootElement },
React.createElement(Root, tslib_1.__assign({ dir: rootDir }, divProps, { className: root, ref: (0, react_hooks_1.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(Utilities_1.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 = (0, Utilities_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
File diff suppressed because one or more lines are too long
+6
View File
@@ -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>;
+12
View File
@@ -0,0 +1,12 @@
define(["require", "exports", "../../Utilities", "./Fabric.base", "./Fabric.styles"], function (require, exports, Utilities_1, Fabric_base_1, Fabric_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Fabric = void 0;
/**
* @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.
*/
exports.Fabric = (0, Utilities_1.styled)(Fabric_base_1.FabricBase, Fabric_styles_1.getStyles, undefined, {
scope: 'Fabric',
});
});
//# sourceMappingURL=Fabric.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"Fabric.js","sourceRoot":"../src/","sources":["components/Fabric/Fabric.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,MAAM,GAA0C,IAAA,kBAAM,EACjE,wBAAU,EACV,yBAAS,EACT,SAAS,EACT;QACE,KAAK,EAAE,QAAQ;KAChB,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"]}
@@ -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;
@@ -0,0 +1,41 @@
define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var inheritFont = { fontFamily: 'inherit' };
var GlobalClassNames = {
root: 'ms-Fabric',
bodyThemed: 'ms-Fabric-bodyThemed',
};
var getStyles = function (props) {
var applyTheme = props.applyTheme, className = props.className, preventBlanketFontInheritance = props.preventBlanketFontInheritance, theme = props.theme;
var classNames = (0, Styling_1.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,
},
],
};
};
exports.getStyles = getStyles;
});
//# sourceMappingURL=Fabric.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Fabric.styles.js","sourceRoot":"../src/","sources":["components/Fabric/Fabric.styles.ts"],"names":[],"mappings":";;;;IAGA,IAAM,WAAW,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;IAE9C,IAAM,gBAAgB,GAAG;QACvB,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,sBAAsB;KACnC,CAAC;IAOK,IAAM,SAAS,GAAG,UAAC,KAAwB;QACxC,IAAA,UAAU,GAAsD,KAAK,WAA3D,EAAE,SAAS,GAA2C,KAAK,UAAhD,EAAE,6BAA6B,GAAY,KAAK,8BAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAC9E,IAAM,UAAU,GAAG,IAAA,6BAAmB,EAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;QAChE,OAAO;YACL,IAAI,EAAE;gBACJ,UAAU,CAAC,IAAI;gBACf,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB;oBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;iBACpC;gBACD,CAAC,6BAA6B,IAAI;oBAChC,UAAU,EAAE,WAAW;oBACvB,SAAS,EAAE,WAAW;oBACtB,YAAY,EAAE,WAAW;iBAC1B;gBACD,4CAA4C;gBAC5C,UAAU,IAAI;oBACZ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;oBACpC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;iBACrD;gBACD,SAAS;aACV;YACD,UAAU,EAAE;gBACV;oBACE,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;iBACrD;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IA5BW,QAAA,SAAS,aA4BpB","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"]}
@@ -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;
}
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=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"]}
+3
View File
@@ -0,0 +1,3 @@
export * from './Fabric';
export * from './Fabric.base';
export * from './Fabric.types';
+8
View File
@@ -0,0 +1,8 @@
define(["require", "exports", "tslib", "./Fabric", "./Fabric.base", "./Fabric.types"], function (require, exports, tslib_1, Fabric_1, Fabric_base_1, Fabric_types_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
tslib_1.__exportStar(Fabric_1, exports);
tslib_1.__exportStar(Fabric_base_1, exports);
tslib_1.__exportStar(Fabric_types_1, exports);
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Fabric/index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB;IACzB,6CAA8B;IAC9B,8CAA+B","sourcesContent":["export * from './Fabric';\nexport * from './Fabric.base';\nexport * from './Fabric.types';\n"]}