Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

3091
node_modules/@fluentui/react-provider/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-provider/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-provider
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

3
node_modules/@fluentui/react-provider/README.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# @fluentui/react-provider
**React Provider component for [Fluent UI React](https://react.fluentui.dev)**

110
node_modules/@fluentui/react-provider/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,110 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';
import type { JSXElement } from '@fluentui/react-utilities';
import type { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { PartialTheme } from '@fluentui/react-theme';
import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';
/**
* Creates a CSS rule from a theme object.
*
* Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
*/
export declare function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string;
export declare const FluentProvider: ForwardRefComponent<FluentProviderProps>;
export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
export declare type FluentProviderContextValues = Pick<FluentProviderState, 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'> & {
provider: ProviderContextValue_unstable;
themeClassName: ThemeClassNameContextValue_unstable;
textDirection: 'ltr' | 'rtl';
iconDirection: IconDirectionContextValue;
tooltip: TooltipVisibilityContextValue_unstable;
};
export declare type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue_unstable;
export declare type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {
/**
* Passes styles applied to a component down to portals if enabled.
* @default true
*/
applyStylesToPortals?: boolean;
/** Sets the hooks for custom styling components. */
customStyleHooks_unstable?: FluentProviderCustomStyleHooks;
/** Sets the direction of text & generated styles. */
dir?: 'ltr' | 'rtl';
/** Provides the document, can be undefined during SSR render. */
targetDocument?: Document;
/** Sets the theme used in a scope. */
theme?: PartialTheme;
overrides_unstable?: OverridesContextValue_unstable;
};
export declare type FluentProviderSlots = {
root: Slot<'div'>;
};
export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
theme: ThemeContextValue_unstable;
themeClassName: string;
/**
* Props used to render SSR theme variables style element
*/
serverStyleProps: {
/**
* CSS rule containing CSS variables
*/
cssRule: string;
/**
* Additional attributes applied to the style element
*/
attributes: Record<string, string>;
};
};
/**
* Render the final JSX of FluentProvider
*/
export declare const renderFluentProvider_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSXElement;
/**
* Create the state required to render FluentProvider.
*
* The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
* before being passed to renderFluentProvider_unstable.
*
* @param props - props from this instance of FluentProvider
* @param ref - reference to root HTMLElement of FluentProvider
*/
export declare const useFluentProvider_unstable: (props: FluentProviderProps, ref: React_2.Ref<HTMLElement>) => FluentProviderState;
export declare function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues;
/** Applies style classnames to slots */
export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
/**
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
* @internal
* @returns CSS class to apply the rule
*/
export declare const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, "theme" | "targetDocument"> & {
rendererAttributes: Record<string, string>;
}) => {
styleTagId: string;
rule: string;
};
export { }

View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
FluentProvider: function() {
return _index.FluentProvider;
},
createCSSRuleFromTheme: function() {
return _index.createCSSRuleFromTheme;
},
fluentProviderClassNames: function() {
return _index.fluentProviderClassNames;
},
renderFluentProvider_unstable: function() {
return _index.renderFluentProvider_unstable;
},
useFluentProviderContextValues_unstable: function() {
return _index.useFluentProviderContextValues_unstable;
},
useFluentProviderStyles_unstable: function() {
return _index.useFluentProviderStyles_unstable;
},
useFluentProviderThemeStyleTag: function() {
return _index.useFluentProviderThemeStyleTag;
},
useFluentProvider_unstable: function() {
return _index.useFluentProvider_unstable;
}
});
const _index = require("./components/FluentProvider/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/FluentProvider.ts"],"sourcesContent":["export type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './components/FluentProvider/index';\nexport {\n FluentProvider,\n createCSSRuleFromTheme,\n fluentProviderClassNames,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n useFluentProvider_unstable,\n} from './components/FluentProvider/index';\n"],"names":["FluentProvider","createCSSRuleFromTheme","fluentProviderClassNames","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag","useFluentProvider_unstable"],"mappings":";;;;;;;;;;;IAQEA;oCAAc;;;eACdC,6BAAsB;;;eACtBC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,8CAAuC;;;eACvCC,uCAAgC;;;eAChCC,qCAA8B;;;eAC9BC,iCAA0B;;;uBACrB,oCAAoC"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "FluentProvider", {
enumerable: true,
get: function() {
return FluentProvider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderFluentProvider = require("./renderFluentProvider");
const _useFluentProvider = require("./useFluentProvider");
const _useFluentProviderStylesstyles = require("./useFluentProviderStyles.styles");
const _useFluentProviderContextValues = require("./useFluentProviderContextValues");
const FluentProvider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useFluentProvider.useFluentProvider_unstable)(props, ref);
(0, _useFluentProviderStylesstyles.useFluentProviderStyles_unstable)(state);
const contextValues = (0, _useFluentProviderContextValues.useFluentProviderContextValues_unstable)(state);
return (0, _renderFluentProvider.renderFluentProvider_unstable)(state, contextValues);
});
FluentProvider.displayName = 'FluentProvider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;sCAIe,yBAAyB;mCAC5B,sBAAsB;+CAChB,mCAAmC;gDAC5B,mCAAmC;AAGpF,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQP,6CAAAA,EAA2BK,OAAOC;QAChDL,+DAAAA,EAAiCM;IAEjC,MAAMC,oBAAgBN,uEAAAA,EAAwCK;IAE9D,WAAOR,mDAAAA,EAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

View File

@@ -0,0 +1,8 @@
/*
IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being
downloaded when trying to use the FluentProvider.
This issue has more context: https://github.com/microsoft/fluentui/issues/30909
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n downloaded when trying to use the FluentProvider.\n This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n OverridesContextValue_unstable as OverridesContextValue,\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /**\n * Passes styles applied to a component down to portals if enabled.\n * @default true\n */\n applyStylesToPortals?: boolean;\n\n /** Sets the hooks for custom styling components. */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n /** Sets the direction of text & generated styles. */\n dir?: 'ltr' | 'rtl';\n\n /** Provides the document, can be undefined during SSR render. */\n targetDocument?: Document;\n\n /** Sets the theme used in a scope. */\n theme?: PartialTheme;\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<\n Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n > & {\n theme: ThemeContextValue;\n themeClassName: string;\n /**\n * Props used to render SSR theme variables style element\n */\n serverStyleProps: {\n /**\n * CSS rule containing CSS variables\n */\n cssRule: string;\n /**\n * Additional attributes applied to the style element\n */\n attributes: Record<string, string>;\n };\n };\n\nexport type FluentProviderContextValues = Pick<\n FluentProviderState,\n 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' | 'rtl';\n iconDirection: IconDirectionContextValue;\n tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createCSSRuleFromTheme", {
enumerable: true,
get: function() {
return createCSSRuleFromTheme;
}
});
const CSS_ESCAPE_MAP = {
'<': '\\3C ',
'>': '\\3E '
};
/**
* Escapes characters that could break out of a <style> tag during SSR.
*
* IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.
* We only need to ensure the generated text cannot terminate the style tag and inject HTML.
*/ function escapeForStyleTag(value) {
// Escape as CSS code points so the resulting CSS still represents the same characters.
// Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.
return value.replace(/[<>]/g, (match)=>CSS_ESCAPE_MAP[match]);
}
function createCSSRuleFromTheme(selector, theme) {
if (theme) {
const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
}, '');
return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;
}
return `${selector} {}`;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n '<': '\\\\3C ',\n '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n // Escape as CSS code points so the resulting CSS still represents the same characters.\n // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n if (theme) {\n const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n }, '');\n\n return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n }\n\n return `${selector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":";;;;+BAuBgBK;;;;;;AArBhB,MAAML,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAOO,gCAAgCE,QAAgB,EAAEC,KAA+B;IACtF,IAAIA,OAAO;QACT,MAAMC,kBAAmBC,OAAOC,IAAI,CAACH,OAAkCI,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEN,KAAK,CAACM,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGP,SAAS,GAAG,EAAEL,kBAAkBO,iBAAiB,EAAE,CAAC;IAChE;IAEA,OAAO,GAAGF,SAAS,GAAG,CAAC;AACzB"}

View File

@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
FluentProvider: function() {
return _FluentProvider.FluentProvider;
},
createCSSRuleFromTheme: function() {
return _createCSSRuleFromTheme.createCSSRuleFromTheme;
},
fluentProviderClassNames: function() {
return _useFluentProviderStylesstyles.fluentProviderClassNames;
},
renderFluentProvider_unstable: function() {
return _renderFluentProvider.renderFluentProvider_unstable;
},
useFluentProviderContextValues_unstable: function() {
return _useFluentProviderContextValues.useFluentProviderContextValues_unstable;
},
useFluentProviderStyles_unstable: function() {
return _useFluentProviderStylesstyles.useFluentProviderStyles_unstable;
},
useFluentProviderThemeStyleTag: function() {
return _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag;
},
useFluentProvider_unstable: function() {
return _useFluentProvider.useFluentProvider_unstable;
}
});
const _createCSSRuleFromTheme = require("./createCSSRuleFromTheme");
const _FluentProvider = require("./FluentProvider");
const _renderFluentProvider = require("./renderFluentProvider");
const _useFluentProvider = require("./useFluentProvider");
const _useFluentProviderStylesstyles = require("./useFluentProviderStyles.styles");
const _useFluentProviderContextValues = require("./useFluentProviderContextValues");
const _useFluentProviderThemeStyleTag = require("./useFluentProviderThemeStyleTag");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IACSC;6CAAc;;;eADdD,8CAAsB;;;eAWtBI,uDAAwB;;;eAFxBF,mDAA6B;;;eAG7BI,uEAAuC;;;eADbD,+DAAgC;;;eAE1DE,8DAA8B;;;eAH9BJ,6CAA0B;;;wCAVI,2BAA2B;gCACnC,mBAAmB;sCAQJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC;gDACtD,mCAAmC;gDAC5C,mCAAmC"}

View File

@@ -0,0 +1,60 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderFluentProvider_unstable", {
enumerable: true,
get: function() {
return renderFluentProvider_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _react = require("@griffel/react");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _providers = require("@fluentui/react-icons/lib/providers");
const renderFluentProvider_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.Provider_unstable, {
value: contextValues.provider,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.ThemeProvider_unstable, {
value: contextValues.theme,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.ThemeClassNameProvider_unstable, {
value: contextValues.themeClassName,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.CustomStyleHooksProvider_unstable, {
value: contextValues.customStyleHooks_unstable,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.TooltipVisibilityProvider_unstable, {
value: contextValues.tooltip,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.TextDirectionProvider, {
dir: contextValues.textDirection,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_providers.IconDirectionContextProvider, {
value: contextValues.iconDirection,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.OverridesProvider_unstable, {
value: contextValues.overrides_unstable,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
(0, _reactutilities.canUseDOM)() ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
// Using dangerous HTML because react can escape characters
// which can lead to invalid CSS.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML: {
__html: state.serverStyleProps.cssRule
},
...state.serverStyleProps.attributes
}),
state.root.children
]
})
})
})
})
})
})
})
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n): JSXElement => {\n assertSlots<FluentProviderSlots>(state);\n\n // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <CustomStyleHooksProvider\n value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n >\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <IconDirectionContextProvider value={contextValues.iconDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <state.root>\n {canUseDOM() ? null : (\n <style\n // Using dangerous HTML because react can escape characters\n // which can lead to invalid CSS.\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n {...state.serverStyleProps.attributes}\n />\n )}\n\n {state.root.children}\n </state.root>\n </OverridesProvider>\n </IconDirectionContextProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,wBAA0B,GAC1B,iDAAiD,GAEjD;;;;;+BAoBagB;;;;;;;gCAlB0B,4BAA4B;uBAE7B,iBAAiB;qCAShD,kCAAkC;2BAEI,sCAAsC;AAK5E,sCAAsC,CAC3CC,OACAC;QAEAjB,2BAAAA,EAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,OAAA,WAAA,OACE,eAAA,EAACX,sCAAAA,EAAAA;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,WAAA,OAAA,eAAA,EAACV,2CAAAA,EAAAA;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,WAAA,GAAA,mBAAA,EAACT,oDAAAA,EAAAA;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,WAAA,OAAA,eAAA,EAACR,sDAAAA,EAAAA;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,WAAA,OAAA,eAAA,EAACf,uDAAAA,EAAAA;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,WAAA,OAAA,eAAA,EAACtB,4BAAAA,EAAAA;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,WAAA,OAAA,eAAA,EAACX,uCAAAA,EAAAA;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,WAAA,OAAA,eAAA,EAACvB,+CAAAA,EAAAA;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,WAAA,OAAA,gBAAA,EAACX,MAAMY,IAAI,EAAA;;gDACR7B,yBAAAA,MAAc,OAAA,WAAA,OACb,eAAA,EAAC8B,SAAAA;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}

View File

@@ -0,0 +1,105 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useFluentProvider_unstable", {
enumerable: true,
get: function() {
return useFluentProvider_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactutilities = require("@fluentui/react-utilities");
const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useFluentProviderThemeStyleTag = require("./useFluentProviderThemeStyleTag");
// Meomizing empty objects to avoid unnecessary rerenders.
const DEFAULT_STYLE_HOOKS = {};
const DEFAULT_RENDERER_ATTRIBUTES = {};
const useFluentProvider_unstable = (props, ref)=>{
'use no memo';
const parentContext = (0, _reactsharedcontexts.useFluent_unstable)();
const parentTheme = useTheme();
const parentOverrides = (0, _reactsharedcontexts.useOverrides_unstable)();
const parentCustomStyleHooks = _react1.useContext(_reactsharedcontexts.CustomStyleHooksContext_unstable) || DEFAULT_STYLE_HOOKS;
/**
* 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
*/ const { applyStylesToPortals = true, customStyleHooks_unstable, dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme, overrides_unstable: overrides = {} } = props;
const mergedTheme = shallowMerge(parentTheme, theme);
const mergedOverrides = shallowMerge(parentOverrides, overrides);
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
const renderer = (0, _react.useRenderer_unstable)();
var _renderer_styleElementAttributes;
const { styleTagId, rule } = (0, _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag)({
theme: mergedTheme,
targetDocument,
rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : DEFAULT_RENDERER_ATTRIBUTES
});
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
_react1.useEffect(()=>{
if (mergedTheme === undefined) {
// eslint-disable-next-line no-console
console.warn([
'@fluentui/react-provider: FluentProvider does not have your "theme" defined.',
"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider."
].join(' '));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}
return {
applyStylesToPortals,
// eslint-disable-next-line @typescript-eslint/naming-convention
customStyleHooks_unstable: mergedCustomStyleHooks,
dir,
targetDocument,
theme: mergedTheme,
// eslint-disable-next-line @typescript-eslint/naming-convention
overrides_unstable: mergedOverrides,
themeClassName: styleTagId,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
...props,
dir,
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, (0, _reacttabster.useFocusVisible)({
targetDocument
}))
}), {
elementType: 'div'
}),
serverStyleProps: {
cssRule: rule,
attributes: {
...renderer.styleElementAttributes,
id: styleTagId
}
}
};
};
function shallowMerge(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;
}
function useTheme() {
return _react1.useContext(_reactsharedcontexts.ThemeContext_unstable);
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,42 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useFluentProviderContextValues_unstable", {
enumerable: true,
get: function() {
return useFluentProviderContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useFluentProviderContextValues_unstable(state) {
const { applyStylesToPortals, customStyleHooks_unstable, dir, root, targetDocument, theme, themeClassName, overrides_unstable } = state;
const provider = _react.useMemo(()=>({
dir,
targetDocument
}), [
dir,
targetDocument
]);
// "Tooltip" component mutates an object in this context, instance should be stable
const [tooltip] = _react.useState(()=>({}));
const iconDirection = _react.useMemo(()=>({
textDirection: dir
}), [
dir
]);
return {
// eslint-disable-next-line @typescript-eslint/naming-convention
customStyleHooks_unstable,
// eslint-disable-next-line @typescript-eslint/naming-convention
overrides_unstable,
provider,
textDirection: dir,
iconDirection,
tooltip,
theme,
themeClassName: applyStylesToPortals ? root.className : themeClassName
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir,\n root,\n targetDocument,\n theme,\n themeClassName,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n } = 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] = React.useState(() => ({}));\n const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n iconDirection,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;;;;;+BAKgBC;;;;;;;iEAHO,QAAQ;AAGxB,iDAAiDC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,AACAC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,GANgE,WAMlD,EACd,AACAC,kBAAkB,EACnB,GAAGR,yCAF8D;IAIlE,MAAMS,WAAWX,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;SAAe,CAAA,EAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,OAAMc,QAAQ,CAAC,IAAO,CAAA,EAAC,CAAA;IACzC,MAAMC,gBAAgBf,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}

View File

@@ -0,0 +1,59 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
fluentProviderClassNames: function() {
return fluentProviderClassNames;
},
useFluentProviderStyles_unstable: function() {
return useFluentProviderStyles_unstable;
}
});
const _core = require("@griffel/core");
const _react = require("@griffel/react");
const fluentProviderClassNames = {
root: 'fui-FluentProvider'
};
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);}"
]
});
const useFluentProviderStyles_unstable = (state)=>{
'use no memo';
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, 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 = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1\n }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n 'use no memo';\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"],"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,wBAAwB;;;oCAWiD;;;;sBAd7C,eAAe;uBACnB,gBAAgB;AAE9C,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGP,cAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAC8C,MAAMC,oCAAoCC,KAAK,IAAG;IAC9F,aAAa;IACb,MAAMC,QAAQ,OAAGhB,2BAAoB,CAAC,CAAC;IACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;QACrBa,GAAG,EAAEH,KAAK,CAACG,GAAG;QACdF;IACJ,CAAC,CAAC;IACFD,KAAK,CAACX,IAAI,CAACe,SAAS,OAAGpB,kBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEW,KAAK,CAACK,cAAc,EAAEH,MAAM,CAACb,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;IAC3H,OAAOJ,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,43 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
fluentProviderClassNames: function() {
return fluentProviderClassNames;
},
useFluentProviderStyles_unstable: function() {
return useFluentProviderStyles_unstable;
}
});
const _core = require("@griffel/core");
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const fluentProviderClassNames = {
root: 'fui-FluentProvider'
};
const useStyles = (0, _core.makeStyles)({
root: {
color: _reacttheme.tokens.colorNeutralForeground1,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
textAlign: 'left',
..._reacttheme.typographyStyles.body1
}
});
const useFluentProviderStyles_unstable = (state)=>{
'use no memo';
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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): FluentProviderState => {\n 'use no memo';\n\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"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,wBAAAA;;;oCAcAS;;;;sBApB4B,gBAAgB;uBACpB,iBAAiB;4BACb,wBAAwB;AAI1D,iCAAsE;IAC3ER,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYP,gBAAAA,EAAW;IAC3BM,MAAM;QACJE,OAAOL,kBAAAA,CAAOM,uBAAuB;QACrCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,4BAAAA,CAAiBS,KAAK;IAC3B;AACF;AAGO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,eAAWd,2BAAAA;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpDD,MAAMT,IAAI,CAACa,SAAS,OAAGlB,kBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,143 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useFluentProviderThemeStyleTag", {
enumerable: true,
get: function() {
return useFluentProviderThemeStyleTag;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _createCSSRuleFromTheme = require("./createCSSRuleFromTheme");
const _useFluentProviderStylesstyles = require("./useFluentProviderStyles.styles");
// String concatenation is used to prevent bundlers to complain with older versions of React
const useInsertionEffect = _react['useInsertion' + 'Effect'] ? _react['useInsertion' + 'Effect'] : _reactutilities.useIsomorphicLayoutEffect;
const createStyleTag = (target, elementAttributes)=>{
// Document might exist but not be ready yet (e.g. during SSR)
// In that case, we should not create a style tag
if (!(target === null || target === void 0 ? void 0 : target.head)) {
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);
}
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.');
}
};
const useFluentProviderThemeStyleTag = (options)=>{
'use no memo';
const { targetDocument, theme, rendererAttributes } = options;
const styleTag = _react.useRef(undefined);
const styleTagId = (0, _reactutilities.useId)(_useFluentProviderStylesstyles.fluentProviderClassNames.root);
const styleElementAttributes = rendererAttributes;
const rule = _react.useMemo(()=>(0, _createCSSRuleFromTheme.createCSSRuleFromTheme)(`.${styleTagId}`, theme), [
theme,
styleTagId
]);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
_react.useMemo(()=>{
// Heads up!
// .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,
// this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
// of double render.
if (targetDocument) {
var _styleElement_textContent;
const providerElementSelector = `.${_useFluentProviderStylesstyles.fluentProviderClassNames.root}.${styleTagId}`;
const providerElements = targetDocument.querySelectorAll(providerElementSelector);
const styleElementSelector = `style[id="${styleTagId}"]`;
const styleElements = targetDocument.querySelectorAll(styleElementSelector);
if (styleElements.length > 1) {
// eslint-disable-next-line no-console
console.error([
'@fluentui/react-provider: We found multiple <style> elements with same IDs in your DOM.',
'Please make sure that you configured your application properly.',
'\n',
'\n',
'Configuration guide: https://aka.ms/fluentui-conflicting-ids'
].join(' '));
return;
}
const styleElement = styleElements.item(0);
var _styleElement_textContent_length;
// Heads up!
//
// In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`
const isSSR = ((_styleElement_textContent_length = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _styleElement_textContent_length !== void 0 ? _styleElement_textContent_length : 0) > 0;
const elementsCount = isSSR ? 1 : 0;
if (providerElements.length > elementsCount) {
// eslint-disable-next-line no-console
console.error([
'@fluentui/react-provider: There are conflicting ids in your DOM.',
'Please make sure that you configured your application properly.',
'\n',
'\n',
'Configuration guide: https://aka.ms/fluentui-conflicting-ids'
].join(' '));
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}
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);
}
});
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
FluentProvider: function() {
return _FluentProvider.FluentProvider;
},
createCSSRuleFromTheme: function() {
return _FluentProvider.createCSSRuleFromTheme;
},
fluentProviderClassNames: function() {
return _FluentProvider.fluentProviderClassNames;
},
renderFluentProvider_unstable: function() {
return _FluentProvider.renderFluentProvider_unstable;
},
useFluentProviderContextValues_unstable: function() {
return _FluentProvider.useFluentProviderContextValues_unstable;
},
useFluentProviderStyles_unstable: function() {
return _FluentProvider.useFluentProviderStyles_unstable;
},
useFluentProviderThemeStyleTag: function() {
return _FluentProvider.useFluentProviderThemeStyleTag;
},
useFluentProvider_unstable: function() {
return _FluentProvider.useFluentProvider_unstable;
}
});
const _FluentProvider = require("./FluentProvider");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n createCSSRuleFromTheme,\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"],"names":["createCSSRuleFromTheme","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IAGEE;6CAAc;;;eAFdF,sCAAsB;;;eACtBC,wCAAwB;;;eAExBE,6CAA6B;;;eAC7BC,uDAAuC;;;eAEvCE,gDAAgC;;;eAChCC,8CAA8B;;;eAF9BF,0CAA0B;;;gCAGrB,mBAAmB"}

View File

@@ -0,0 +1 @@
export { FluentProvider, createCSSRuleFromTheme, fluentProviderClassNames, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag, useFluentProvider_unstable } from './components/FluentProvider/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/FluentProvider.ts"],"sourcesContent":["export type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './components/FluentProvider/index';\nexport {\n FluentProvider,\n createCSSRuleFromTheme,\n fluentProviderClassNames,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n useFluentProvider_unstable,\n} from './components/FluentProvider/index';\n"],"names":["FluentProvider","createCSSRuleFromTheme","fluentProviderClassNames","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag","useFluentProvider_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,sBAAsB,EACtBC,wBAAwB,EACxBC,6BAA6B,EAC7BC,uCAAuC,EACvCC,gCAAgC,EAChCC,8BAA8B,EAC9BC,0BAA0B,QACrB,oCAAoC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAChDL,iCAAiCM;IAEjC,MAAMC,gBAAgBN,wCAAwCK;IAE9D,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

View File

@@ -0,0 +1,5 @@
/*
IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being
downloaded when trying to use the FluentProvider.
This issue has more context: https://github.com/microsoft/fluentui/issues/30909
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n downloaded when trying to use the FluentProvider.\n This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n OverridesContextValue_unstable as OverridesContextValue,\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /**\n * Passes styles applied to a component down to portals if enabled.\n * @default true\n */\n applyStylesToPortals?: boolean;\n\n /** Sets the hooks for custom styling components. */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n /** Sets the direction of text & generated styles. */\n dir?: 'ltr' | 'rtl';\n\n /** Provides the document, can be undefined during SSR render. */\n targetDocument?: Document;\n\n /** Sets the theme used in a scope. */\n theme?: PartialTheme;\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<\n Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n > & {\n theme: ThemeContextValue;\n themeClassName: string;\n /**\n * Props used to render SSR theme variables style element\n */\n serverStyleProps: {\n /**\n * CSS rule containing CSS variables\n */\n cssRule: string;\n /**\n * Additional attributes applied to the style element\n */\n attributes: Record<string, string>;\n };\n };\n\nexport type FluentProviderContextValues = Pick<\n FluentProviderState,\n 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' | 'rtl';\n iconDirection: IconDirectionContextValue;\n tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}

View File

@@ -0,0 +1,27 @@
const CSS_ESCAPE_MAP = {
'<': '\\3C ',
'>': '\\3E '
};
/**
* Escapes characters that could break out of a <style> tag during SSR.
*
* IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.
* We only need to ensure the generated text cannot terminate the style tag and inject HTML.
*/ function escapeForStyleTag(value) {
// Escape as CSS code points so the resulting CSS still represents the same characters.
// Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.
return value.replace(/[<>]/g, (match)=>CSS_ESCAPE_MAP[match]);
}
/**
* Creates a CSS rule from a theme object.
*
* Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
*/ export function createCSSRuleFromTheme(selector, theme) {
if (theme) {
const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
}, '');
return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;
}
return `${selector} {}`;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n '<': '\\\\3C ',\n '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n // Escape as CSS code points so the resulting CSS still represents the same characters.\n // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n if (theme) {\n const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n }, '');\n\n return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n }\n\n return `${selector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":"AAEA,MAAMA,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAEA;;;;CAIC,GACD,OAAO,SAASC,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,IAAIA,OAAO;QACT,MAAMC,kBAAkB,AAACC,OAAOC,IAAI,CAACH,OAAkCI,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEN,KAAK,CAACM,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGP,SAAS,GAAG,EAAEL,kBAAkBO,iBAAiB,EAAE,CAAC;IAChE;IAEA,OAAO,GAAGF,SAAS,GAAG,CAAC;AACzB"}

View File

@@ -0,0 +1,7 @@
export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';
export { FluentProvider } from './FluentProvider';
export { renderFluentProvider_unstable } from './renderFluentProvider';
export { useFluentProvider_unstable } from './useFluentProvider';
export { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';
export { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';
export { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,2BAA2B;AAClE,SAASC,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC;AAC9G,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SAASC,8BAA8B,QAAQ,mCAAmC"}

View File

@@ -0,0 +1,52 @@
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { canUseDOM, assertSlots } from '@fluentui/react-utilities';
import { TextDirectionProvider } from '@griffel/react';
import { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider, CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts';
import { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';
/**
* Render the final JSX of FluentProvider
*/ export const renderFluentProvider_unstable = (state, contextValues)=>{
assertSlots(state);
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
return /*#__PURE__*/ _jsx(Provider, {
value: contextValues.provider,
children: /*#__PURE__*/ _jsx(ThemeProvider, {
value: contextValues.theme,
children: /*#__PURE__*/ _jsx(ThemeClassNameProvider, {
value: contextValues.themeClassName,
children: /*#__PURE__*/ _jsx(CustomStyleHooksProvider, {
value: contextValues.customStyleHooks_unstable,
children: /*#__PURE__*/ _jsx(TooltipVisibilityProvider, {
value: contextValues.tooltip,
children: /*#__PURE__*/ _jsx(TextDirectionProvider, {
dir: contextValues.textDirection,
children: /*#__PURE__*/ _jsx(IconDirectionContextProvider, {
value: contextValues.iconDirection,
children: /*#__PURE__*/ _jsx(OverridesProvider, {
value: contextValues.overrides_unstable,
children: /*#__PURE__*/ _jsxs(state.root, {
children: [
canUseDOM() ? null : /*#__PURE__*/ _jsx("style", {
// Using dangerous HTML because react can escape characters
// which can lead to invalid CSS.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML: {
__html: state.serverStyleProps.cssRule
},
...state.serverStyleProps.attributes
}),
state.root.children
]
})
})
})
})
})
})
})
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n): JSXElement => {\n assertSlots<FluentProviderSlots>(state);\n\n // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <CustomStyleHooksProvider\n value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n >\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <IconDirectionContextProvider value={contextValues.iconDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <state.root>\n {canUseDOM() ? null : (\n <style\n // Using dangerous HTML because react can escape characters\n // which can lead to invalid CSS.\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n {...state.serverStyleProps.attributes}\n />\n )}\n\n {state.root.children}\n </state.root>\n </OverridesProvider>\n </IconDirectionContextProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,SAASA,SAAS,EAAEC,WAAW,QAAQ,4BAA4B;AAEnE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SACEC,8BAA8BC,iBAAiB,EAC/CC,qBAAqBC,QAAQ,EAC7BC,sCAAsCC,yBAAyB,EAC/DC,0BAA0BC,aAAa,EACvCC,mCAAmCC,sBAAsB,EACzDC,qCAAqCC,wBAAwB,QAExD,kCAAkC;AAEzC,SAASC,4BAA4B,QAAQ,sCAAsC;AAEnF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAjB,YAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,qBACE,KAACX;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,cAAA,KAACV;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,cAAA,KAACT;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,cAAA,KAACR;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,cAAA,KAACf;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,cAAA,KAACtB;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,cAAA,KAACX;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,cAAA,KAACvB;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,cAAA,MAACX,MAAMY,IAAI;;4CACR7B,cAAc,qBACb,KAAC8B;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}

View File

@@ -0,0 +1,103 @@
'use client';
import { useRenderer_unstable } from '@griffel/react';
import { useFocusVisible } from '@fluentui/react-tabster';
import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, CustomStyleHooksContext_unstable as CustomStyleHooksContext } from '@fluentui/react-shared-contexts';
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
import * as React from 'react';
import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
// Meomizing empty objects to avoid unnecessary rerenders.
const DEFAULT_STYLE_HOOKS = {};
const DEFAULT_RENDERER_ATTRIBUTES = {};
/**
* Create the state required to render FluentProvider.
*
* The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
* before being passed to renderFluentProvider_unstable.
*
* @param props - props from this instance of FluentProvider
* @param ref - reference to root HTMLElement of FluentProvider
*/ export const useFluentProvider_unstable = (props, ref)=>{
'use no memo';
const parentContext = useFluent();
const parentTheme = useTheme();
const parentOverrides = useOverrides();
const parentCustomStyleHooks = React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;
/**
* 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
*/ const { applyStylesToPortals = true, // eslint-disable-next-line @typescript-eslint/naming-convention
customStyleHooks_unstable, dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme, overrides_unstable: overrides = {} } = props;
const mergedTheme = shallowMerge(parentTheme, theme);
const mergedOverrides = shallowMerge(parentOverrides, overrides);
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
const renderer = useRenderer_unstable();
var _renderer_styleElementAttributes;
const { styleTagId, rule } = useFluentProviderThemeStyleTag({
theme: mergedTheme,
targetDocument,
rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : DEFAULT_RENDERER_ATTRIBUTES
});
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(()=>{
if (mergedTheme === undefined) {
// eslint-disable-next-line no-console
console.warn([
'@fluentui/react-provider: FluentProvider does not have your "theme" defined.',
"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider."
].join(' '));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}
return {
applyStylesToPortals,
// eslint-disable-next-line @typescript-eslint/naming-convention
customStyleHooks_unstable: mergedCustomStyleHooks,
dir,
targetDocument,
theme: mergedTheme,
// eslint-disable-next-line @typescript-eslint/naming-convention
overrides_unstable: mergedOverrides,
themeClassName: styleTagId,
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
...props,
dir,
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: useMergedRefs(ref, useFocusVisible({
targetDocument
}))
}), {
elementType: 'div'
}),
serverStyleProps: {
cssRule: rule,
attributes: {
...renderer.styleElementAttributes,
id: styleTagId
}
}
};
};
function shallowMerge(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;
}
function useTheme() {
return React.useContext(ThemeContext);
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,33 @@
'use client';
import * as React from 'react';
export function useFluentProviderContextValues_unstable(state) {
const { applyStylesToPortals, // eslint-disable-next-line @typescript-eslint/naming-convention
customStyleHooks_unstable, dir, root, targetDocument, theme, themeClassName, // eslint-disable-next-line @typescript-eslint/naming-convention
overrides_unstable } = state;
const provider = React.useMemo(()=>({
dir,
targetDocument
}), [
dir,
targetDocument
]);
// "Tooltip" component mutates an object in this context, instance should be stable
const [tooltip] = React.useState(()=>({}));
const iconDirection = React.useMemo(()=>({
textDirection: dir
}), [
dir
]);
return {
// eslint-disable-next-line @typescript-eslint/naming-convention
customStyleHooks_unstable,
// eslint-disable-next-line @typescript-eslint/naming-convention
overrides_unstable,
provider,
textDirection: dir,
iconDirection,
tooltip,
theme,
themeClassName: applyStylesToPortals ? root.className : themeClassName
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir,\n root,\n targetDocument,\n theme,\n themeClassName,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n } = 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] = React.useState(() => ({}));\n const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n iconDirection,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,gEAAgE;IAChEC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,cAAc,EACd,gEAAgE;IAChEC,kBAAkB,EACnB,GAAGR;IAEJ,MAAMS,WAAWX,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;QAAe,CAAA,GAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,MAAMc,QAAQ,CAAC,IAAO,CAAA,CAAC,CAAA;IACzC,MAAMC,gBAAgBf,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}

View File

@@ -0,0 +1,33 @@
'use client';
import { __styles, mergeClasses } from '@griffel/core';
import { useRenderer_unstable } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const fluentProviderClassNames = {
root: 'fui-FluentProvider'
};
const useStyles = /*#__PURE__*/__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);}"]
});
/** Applies style classnames to slots */
export const useFluentProviderStyles_unstable = state => {
'use no memo';
const renderer = useRenderer_unstable();
const styles = useStyles({
dir: state.dir,
renderer
});
state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, 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 = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1\n }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n 'use no memo';\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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AAAyC,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EAC9F,aAAa;;EACb,MAAMC,QAAQ,GAAGhB,oBAAoB,CAAC,CAAC;EACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;IACrBa,GAAG,EAAEH,KAAK,CAACG,GAAG;IACdF;EACJ,CAAC,CAAC;EACFD,KAAK,CAACX,IAAI,CAACe,SAAS,GAAGpB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEW,KAAK,CAACK,cAAc,EAAEH,MAAM,CAACb,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;EAC3H,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,25 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/core';
import { useRenderer_unstable } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const fluentProviderClassNames = {
root: 'fui-FluentProvider'
};
const useStyles = makeStyles({
root: {
color: tokens.colorNeutralForeground1,
backgroundColor: tokens.colorNeutralBackground1,
textAlign: 'left',
...typographyStyles.body1
}
});
/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{
'use no memo';
const renderer = useRenderer_unstable();
const styles = useStyles({
dir: state.dir,
renderer
});
state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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): FluentProviderState => {\n 'use no memo';\n\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"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,OAAOL,OAAOM,uBAAuB;QACrCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,iBAAiBS,KAAK;IAC3B;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,WAAWd;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpDD,MAAMT,IAAI,CAACa,SAAS,GAAGlB,aACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,136 @@
'use client';
import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { createCSSRuleFromTheme } from './createCSSRuleFromTheme';
import { fluentProviderClassNames } from './useFluentProviderStyles.styles';
// String concatenation is used to prevent bundlers to complain with older versions of React
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
const createStyleTag = (target, elementAttributes)=>{
// Document might exist but not be ready yet (e.g. during SSR)
// In that case, we should not create a style tag
if (!(target === null || target === void 0 ? void 0 : target.head)) {
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);
}
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
* @internal
* @returns CSS class to apply the rule
*/ export const useFluentProviderThemeStyleTag = (options)=>{
'use no memo';
const { targetDocument, theme, rendererAttributes } = options;
const styleTag = React.useRef(undefined);
const styleTagId = useId(fluentProviderClassNames.root);
const styleElementAttributes = rendererAttributes;
const rule = React.useMemo(()=>createCSSRuleFromTheme(`.${styleTagId}`, theme), [
theme,
styleTagId
]);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useMemo(()=>{
// Heads up!
// .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,
// this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
// of double render.
if (targetDocument) {
var _styleElement_textContent;
const providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;
const providerElements = targetDocument.querySelectorAll(providerElementSelector);
const styleElementSelector = `style[id="${styleTagId}"]`;
const styleElements = targetDocument.querySelectorAll(styleElementSelector);
if (styleElements.length > 1) {
// eslint-disable-next-line no-console
console.error([
'@fluentui/react-provider: We found multiple <style> elements with same IDs in your DOM.',
'Please make sure that you configured your application properly.',
'\n',
'\n',
'Configuration guide: https://aka.ms/fluentui-conflicting-ids'
].join(' '));
return;
}
const styleElement = styleElements.item(0);
var _styleElement_textContent_length;
// Heads up!
//
// In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`
const isSSR = ((_styleElement_textContent_length = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _styleElement_textContent_length !== void 0 ? _styleElement_textContent_length : 0) > 0;
const elementsCount = isSSR ? 1 : 0;
if (providerElements.length > elementsCount) {
// eslint-disable-next-line no-console
console.error([
'@fluentui/react-provider: There are conflicting ids in your DOM.',
'Please make sure that you configured your application properly.',
'\n',
'\n',
'Configuration guide: https://aka.ms/fluentui-conflicting-ids'
].join(' '));
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}
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);
}
});
}

File diff suppressed because one or more lines are too long

1
node_modules/@fluentui/react-provider/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { createCSSRuleFromTheme, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n createCSSRuleFromTheme,\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"],"names":["createCSSRuleFromTheme","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":"AAAA,SACEA,sBAAsB,EACtBC,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,mBAAmB"}

52
node_modules/@fluentui/react-provider/package.json generated vendored Normal file
View File

@@ -0,0 +1,52 @@
{
"name": "@fluentui/react-provider",
"version": "9.22.15",
"description": "Fluent UI React provider component",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
"typings": "./dist/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "https://github.com/microsoft/fluentui"
},
"license": "MIT",
"dependencies": {
"@fluentui/react-icons": "^2.0.245",
"@fluentui/react-shared-contexts": "^9.26.2",
"@fluentui/react-tabster": "^9.26.13",
"@fluentui/react-theme": "^9.2.1",
"@fluentui/react-utilities": "^9.26.2",
"@fluentui/react-jsx-runtime": "^9.4.1",
"@griffel/core": "^1.16.0",
"@griffel/react": "^1.5.32",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
"@types/react": ">=16.14.0 <20.0.0",
"@types/react-dom": ">=16.9.0 <20.0.0",
"react": ">=16.14.0 <20.0.0",
"react-dom": ">=16.14.0 <20.0.0"
},
"beachball": {
"disallowedChangeTypes": [
"major",
"prerelease"
]
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./lib-commonjs/index.js",
"import": "./lib/index.js",
"require": "./lib-commonjs/index.js"
},
"./package.json": "./package.json"
},
"files": [
"*.md",
"dist/*.d.ts",
"lib",
"lib-commonjs"
]
}