@fluentui/react-provider 9.0.0-alpha.9 → 9.0.0-nightly.25435def33.0

package/dist/react-provider.d.ts

@@ -1,51 +1,67 @@
-import { PartialTheme } from '@fluentui/react-theme';
-import * as React from 'react';
-import { Theme } from '@fluentui/react-theme';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { PartialTheme } from '@fluentui/react-theme';
+import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
+import * as React_2 from 'react';
+import type { Theme } from '@fluentui/react-theme';
+import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
+import type { ThemeContextValue } from '@fluentui/react-shared-contexts';
+import type { TooltipContextType } from '@fluentui/react-shared-contexts';
+import { useFluent } from '@fluentui/react-shared-contexts';
+import { useTheme } from '@fluentui/react-shared-contexts';
 
-/**
- * A React provider that allows to define theme, text direction and context for rendering for children components.
- */
-export declare const FluentProvider: React.FunctionComponent<ProviderProps>;
+export declare const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
 
-export declare interface FluentProviderContextValue {
+export declare interface FluentProviderCommons {
     /** Sets the direction of text & generated styles. */
     dir: 'ltr' | 'rtl';
     /** Provides the document, can be undefined during SSR render. */
-    document: Document | undefined;
+    targetDocument: Document | undefined;
 }
 
-export declare interface FluentThemeProviderValue extends Theme {
+export declare interface FluentProviderContextValues {
+    provider: ProviderContextValue;
+    theme: ThemeContextValue;
+    themeClassName: ThemeClassNameContextValue;
+    tooltip: TooltipContextType;
 }
 
-export declare const internal__FluentProviderContext: React.Context<FluentProviderContextValue>;
-
-export declare interface ProviderProps {
-    /** Sets the direction of text & generated styles. */
-    dir?: 'ltr' | 'rtl';
-    /** Provides the document, can be undefined during SSR render. */
-    document?: Document | undefined;
+export declare interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
     theme?: PartialTheme;
 }
 
-export declare interface ProviderState {
-    dir: 'ltr' | 'rtl';
-    document: Document | undefined;
+export declare const fluentProviderShorthandProps: (keyof FluentProviderSlots)[];
+
+export declare type FluentProviderSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
+
+export declare interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
     theme: Theme;
+    themeClassName: string;
 }
 
-export declare function renderFluentProvider(state: ProviderState): JSX.Element;
+/**
+ * Render the final JSX of FluentProvider
+ */
+export declare const renderFluentProvider: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
 
-export declare function useFluent(): FluentProviderContextValue;
+export { useFluent }
 
 /**
- * Returns the ThemeProvider render function and calculated state, given user input, ref, and
- * a set of default prop values.
+ * Create the state required to render FluentProvider.
+ *
+ * The returned state can be modified with hooks such as useFluentProviderStyles,
+ * before being passed to renderFluentProvider.
+ *
+ * @param props - props from this instance of FluentProvider
+ * @param ref - reference to root HTMLElement of FluentProvider
  */
-export declare function useFluentProvider(props: ProviderProps, ref: React.Ref<HTMLElement>): {
-    state: ProviderState;
-    render: typeof renderFluentProvider;
-};
+export declare const useFluentProvider: (props: FluentProviderProps, ref: React_2.Ref<HTMLElement>) => FluentProviderState;
+
+export declare function useFluentProviderContextValues(state: FluentProviderState): FluentProviderContextValues;
 
-export declare function useFluentProviderState(draftState: ProviderState): void;
+export { useTheme }
 
 export { }

package/lib/FluentProvider.d.ts

@@ -1,28 +1 @@
-import { PartialTheme, Theme } from '@fluentui/react-theme';
-import * as React from 'react';
-export interface ProviderProps {
-    /** Sets the direction of text & generated styles. */
-    dir?: 'ltr' | 'rtl';
-    /** Provides the document, can be undefined during SSR render. */
-    document?: Document | undefined;
-    theme?: PartialTheme;
-}
-export interface ProviderState {
-    dir: 'ltr' | 'rtl';
-    document: Document | undefined;
-    theme: Theme;
-}
-export declare function useFluentProviderState(draftState: ProviderState): void;
-export declare function renderFluentProvider(state: ProviderState): JSX.Element;
-/**
- * Returns the ThemeProvider render function and calculated state, given user input, ref, and
- * a set of default prop values.
- */
-export declare function useFluentProvider(props: ProviderProps, ref: React.Ref<HTMLElement>): {
-    state: ProviderState;
-    render: typeof renderFluentProvider;
-};
-/**
- * A React provider that allows to define theme, text direction and context for rendering for children components.
- */
-export declare const FluentProvider: React.FunctionComponent<ProviderProps>;
+export * from './components/FluentProvider/index';

package/lib/FluentProvider.js

@@ -1,49 +1,2 @@
-import { __assign } from "tslib";
-import { internal__ThemeContext, useThemeProviderState } from '@fluentui/react-theme-provider';
-import { FocusManagementProvider } from '@fluentui/react-focus-management';
-import { getSlots, makeMergeProps, useMergedRefs } from '@fluentui/react-utilities';
-import * as React from 'react';
-import { internal__FluentProviderContext, useFluent } from './context';
-var mergeProps = makeMergeProps();
-export function useFluentProviderState(draftState) {
-    var parentContext = useFluent();
-    useThemeProviderState(draftState);
-    // TODO: add merge functions
-    draftState.document = draftState.document || parentContext.document;
-    draftState.dir = draftState.dir || parentContext.dir;
-}
-export function renderFluentProvider(state) {
-    var _a = getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-    var dir = state.dir, document = state.document, theme = state.theme;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var value = React.useMemo(function () { return ({ dir: dir, document: document }); }, [dir, document]);
-    return (React.createElement(internal__FluentProviderContext.Provider, { value: value },
-        React.createElement(internal__ThemeContext.Provider, { value: theme },
-            React.createElement(FocusManagementProvider, { document: document, dir: dir },
-                React.createElement(slots.root, __assign({}, slotProps.root))))));
-}
-/**
- * Returns the ThemeProvider render function and calculated state, given user input, ref, and
- * a set of default prop values.
- */
-export function useFluentProvider(props, ref) {
-    var rootRef = useMergedRefs(ref, React.useRef(null));
-    var state = mergeProps({
-        ref: rootRef,
-        as: 'div',
-    }, {}, props);
-    useFluentProviderState(state);
-    return {
-        state: state,
-        render: renderFluentProvider,
-    };
-}
-/**
- * A React provider that allows to define theme, text direction and context for rendering for children components.
- */
-export var FluentProvider = React.forwardRef(function (props, ref) {
-    var _a = useFluentProvider(props, ref), render = _a.render, state = _a.state;
-    return render(state);
-});
-FluentProvider.displayName = 'Provider';
+export * from './components/FluentProvider/index';
 //# sourceMappingURL=FluentProvider.js.map

package/lib/FluentProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentProvider.js","sourceRoot":"../src/","sources":["FluentProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,sBAAsB,EAAsB,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACnH,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,+BAA+B,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAiBvE,IAAM,UAAU,GAAG,cAAc,EAAiB,CAAC;AAEnD,MAAM,UAAU,sBAAsB,CAAC,UAAyB;IAC9D,IAAM,aAAa,GAAG,SAAS,EAAE,CAAC;IAElC,qBAAqB,CAAC,UAAgC,CAAC,CAAC;IAExD,4BAA4B;IAC5B,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC;IACpE,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,IAAI,aAAa,CAAC,GAAG,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,KAAoB;IACjD,IAAA,oBAAsC,EAApC,gBAAK,EAAE,wBAA6B,CAAC;IACrC,IAAA,eAAG,EAAE,yBAAQ,EAAE,mBAAK,CAAW;IAEvC,sDAAsD;IACtD,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,CAAC,EAAE,GAAG,KAAA,EAAE,QAAQ,UAAA,EAAE,CAAC,EAAnB,CAAmB,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,+BAA+B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACpD,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;YAC3C,oBAAC,uBAAuB,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG;gBACnD,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,EAAI,CACV,CACM,CACO,CAC5C,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAoB,EAAE,GAA2B;IACjF,IAAM,OAAO,GAAG,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC,CAAC;IACpE,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,OAAO;QACZ,EAAE,EAAE,KAAK;KACV,EACD,EAAE,EACF,KAAK,CACN,CAAC;IAEF,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAE9B,OAAO;QACL,KAAK,OAAA;QACL,MAAM,EAAE,oBAAoB;KAC7B,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,IAAM,cAAc,GAA2C,KAAK,CAAC,UAAU,CACpF,UAAC,KAAoB,EAAE,GAA8B;IAC7C,IAAA,kCAAiD,EAA/C,kBAAM,EAAE,gBAAuC,CAAC;IAExD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { PartialTheme, Theme } from '@fluentui/react-theme';\nimport { internal__ThemeContext, ThemeProviderState, useThemeProviderState } from '@fluentui/react-theme-provider';\nimport { FocusManagementProvider } from '@fluentui/react-focus-management';\nimport { getSlots, makeMergeProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { internal__FluentProviderContext, useFluent } from './context';\n\nexport interface ProviderProps {\n  /** Sets the direction of text & generated styles. */\n  dir?: 'ltr' | 'rtl';\n\n  /** Provides the document, can be undefined during SSR render. */\n  document?: Document | undefined;\n\n  theme?: PartialTheme;\n}\nexport interface ProviderState {\n  dir: 'ltr' | 'rtl';\n  document: Document | undefined;\n  theme: Theme;\n}\n\nconst mergeProps = makeMergeProps<ProviderState>();\n\nexport function useFluentProviderState(draftState: ProviderState) {\n  const parentContext = useFluent();\n\n  useThemeProviderState(draftState as ThemeProviderState);\n\n  // TODO: add merge functions\n  draftState.document = draftState.document || parentContext.document;\n  draftState.dir = draftState.dir || parentContext.dir;\n}\n\nexport function renderFluentProvider(state: ProviderState) {\n  const { slots, slotProps } = getSlots(state);\n  const { dir, document, theme } = state;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const value = React.useMemo(() => ({ dir, document }), [dir, document]);\n\n  return (\n    <internal__FluentProviderContext.Provider value={value}>\n      <internal__ThemeContext.Provider value={theme}>\n        <FocusManagementProvider document={document} dir={dir}>\n          <slots.root {...slotProps.root} />\n        </FocusManagementProvider>\n      </internal__ThemeContext.Provider>\n    </internal__FluentProviderContext.Provider>\n  );\n}\n\n/**\n * Returns the ThemeProvider render function and calculated state, given user input, ref, and\n * a set of default prop values.\n */\nexport function useFluentProvider(props: ProviderProps, ref: React.Ref<HTMLElement>) {\n  const rootRef = useMergedRefs(ref, React.useRef<HTMLElement>(null));\n  const state = mergeProps(\n    {\n      ref: rootRef,\n      as: 'div',\n    },\n    {},\n    props,\n  );\n\n  useFluentProviderState(state);\n\n  return {\n    state,\n    render: renderFluentProvider,\n  };\n}\n\n/**\n * A React provider that allows to define theme, text direction and context for rendering for children components.\n */\nexport const FluentProvider: React.FunctionComponent<ProviderProps> = React.forwardRef<HTMLDivElement, ProviderProps>(\n  (props: ProviderProps, ref: React.Ref<HTMLDivElement>) => {\n    const { render, state } = useFluentProvider(props, ref);\n\n    return render(state);\n  },\n);\n\nFluentProvider.displayName = 'Provider';\n"]}
+{"version":3,"file":"FluentProvider.js","sourceRoot":"","sources":["../src/FluentProvider.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}

package/lib/common/isConformant.d.ts

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

package/lib/common/isConformant.js

@@ -0,0 +1,12 @@
+import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
+import makeStylesTests from '@fluentui/react-conformance-make-styles';
+export function isConformant(testInfo) {
+  var defaultOptions = {
+    disabledTests: ['has-docblock'],
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    extraTests: makeStylesTests
+  };
+  baseIsConformant(defaultOptions, testInfo);
+}
+//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAD4C;AAE3D,IAAA,gBAAgB,EAAE,IAFyC;AAG3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAH4C;AAI3D,IAAA,UAAU,EAAE;AAJ+C,GAA7D;AAOA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

package/lib/components/FluentProvider/FluentProvider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { FluentProviderProps } from './FluentProvider.types';
+export declare const FluentProvider: React.ForwardRefExoticComponent<FluentProviderProps & React.RefAttributes<HTMLElement>>;

package/lib/components/FluentProvider/FluentProvider.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { renderFluentProvider } from './renderFluentProvider';
+import { useFluentProvider } from './useFluentProvider';
+import { useFluentProviderStyles } from './useFluentProviderStyles';
+import { useFluentProviderContextValues } from './useFluentProviderContextValues';
+export var FluentProvider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useFluentProvider(props, ref);
+  useFluentProviderStyles(state);
+  var contextValues = useFluentProviderContextValues(state);
+  return renderFluentProvider(state, contextValues);
+});
+FluentProvider.displayName = 'FluentProvider';
+//# sourceMappingURL=FluentProvider.js.map

package/lib/components/FluentProvider/FluentProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,uBAAT,QAAwC,2BAAxC;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA,OAAO,IAAM,cAAc,gBAAG,KAAK,CAAC,UAAN,CAAmD,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,MAAM,aAAa,GAAG,8BAA8B,CAAC,KAAD,CAApD;AAEA,SAAO,oBAAoB,CAAC,KAAD,EAAQ,aAAR,CAA3B;AACD,CAP6B,CAAvB;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourceRoot":""}

package/lib/components/FluentProvider/FluentProvider.types.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { PartialTheme, Theme } from '@fluentui/react-theme';
+import type { ProviderContextValue, TooltipContextType, ThemeContextValue, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
+export declare type FluentProviderSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
+export interface FluentProviderCommons {
+    /** Sets the direction of text & generated styles. */
+    dir: 'ltr' | 'rtl';
+    /** Provides the document, can be undefined during SSR render. */
+    targetDocument: Document | undefined;
+}
+export interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
+    theme?: PartialTheme;
+}
+export interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
+    theme: Theme;
+    themeClassName: string;
+}
+export interface FluentProviderContextValues {
+    provider: ProviderContextValue;
+    theme: ThemeContextValue;
+    themeClassName: ThemeClassNameContextValue;
+    tooltip: TooltipContextType;
+}

package/lib/components/FluentProvider/FluentProvider.types.js

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

package/lib/components/FluentProvider/FluentProvider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentProvider.types.js","sourceRoot":"","sources":["../../../src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":""}

package/lib/components/FluentProvider/index.d.ts

@@ -0,0 +1,5 @@
+export * from './FluentProvider';
+export * from './FluentProvider.types';
+export * from './renderFluentProvider';
+export * from './useFluentProvider';
+export * from './useFluentProviderContextValues';

package/lib/components/FluentProvider/index.js

@@ -0,0 +1,6 @@
+export * from './FluentProvider';
+export * from './FluentProvider.types';
+export * from './renderFluentProvider';
+export * from './useFluentProvider';
+export * from './useFluentProviderContextValues';
+//# sourceMappingURL=index.js.map

package/lib/components/FluentProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FluentProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kCAAkC,CAAC"}

package/lib/components/FluentProvider/renderFluentProvider.d.ts

@@ -0,0 +1,5 @@
+import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
+/**
+ * Render the final JSX of FluentProvider
+ */
+export declare const renderFluentProvider: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;

package/lib/components/FluentProvider/renderFluentProvider.js

@@ -0,0 +1,25 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } from '@fluentui/react-shared-contexts';
+import { getSlots } from '@fluentui/react-utilities';
+import { fluentProviderShorthandProps } from './useFluentProvider';
+/**
+ * Render the final JSX of FluentProvider
+ */
+
+export var renderFluentProvider = function (state, contextValues) {
+  var _a = getSlots(state, fluentProviderShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return /*#__PURE__*/React.createElement(ProviderContext.Provider, {
+    value: contextValues.provider
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: contextValues.theme
+  }, /*#__PURE__*/React.createElement(ThemeClassNameContext.Provider, {
+    value: contextValues.themeClassName
+  }, /*#__PURE__*/React.createElement(TooltipContext.Provider, {
+    value: contextValues.tooltip
+  }, /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.root.children)))));
+};
+//# sourceMappingURL=renderFluentProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,EAA0B,cAA1B,EAA0C,YAA1C,EAAwD,qBAAxD,QAAqF,iCAArF;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,4BAAT,QAA6C,qBAA7C;AAEA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA6B,aAA7B,EAAuE;AACnG,MAAA,EAAA,GAAuB,QAAQ,CAAsB,KAAtB,EAA6B,4BAA7B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,eACE,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAd,EAAsB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAtB,eACE,KAAA,CAAA,aAAA,CAAC,qBAAqB,CAAC,QAAvB,EAA+B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA/B,eACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAxB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF;AAWD,CAdM","sourceRoot":""}

package/lib/components/FluentProvider/useFluentProvider.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { FluentProviderProps, FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
+export declare const fluentProviderShorthandProps: (keyof FluentProviderSlots)[];
+/**
+ * Create the state required to render FluentProvider.
+ *
+ * The returned state can be modified with hooks such as useFluentProviderStyles,
+ * before being passed to renderFluentProvider.
+ *
+ * @param props - props from this instance of FluentProvider
+ * @param ref - reference to root HTMLElement of FluentProvider
+ */
+export declare const useFluentProvider: (props: FluentProviderProps, ref: React.Ref<HTMLElement>) => FluentProviderState;

package/lib/components/FluentProvider/useFluentProvider.js

@@ -0,0 +1,51 @@
+import { __assign } from "tslib";
+import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
+import { mergeThemes } from '@fluentui/react-theme';
+import { useFluent, useTheme } from '@fluentui/react-shared-contexts';
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { useThemeStyleTag } from './useThemeStyleTag';
+export var fluentProviderShorthandProps = ['root'];
+/**
+ * Create the state required to render FluentProvider.
+ *
+ * The returned state can be modified with hooks such as useFluentProviderStyles,
+ * before being passed to renderFluentProvider.
+ *
+ * @param props - props from this instance of FluentProvider
+ * @param ref - reference to root HTMLElement of FluentProvider
+ */
+
+export var useFluentProvider = function (props, ref) {
+  var parentContext = useFluent();
+  var parentTheme = useTheme();
+  /**
+   * TODO: add merge functions to "dir" merge,
+   * nesting providers with the same "dir" should not add additional attributes to DOM
+   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
+   */
+
+  var _a = props.dir,
+      dir = _a === void 0 ? parentContext.dir : _a,
+      _b = props.targetDocument,
+      targetDocument = _b === void 0 ? parentContext.targetDocument : _b,
+      _c = props.theme,
+      theme = _c === void 0 ? {} : _c;
+  var mergedTheme = mergeThemes(parentTheme, theme);
+  return {
+    dir: dir,
+    targetDocument: targetDocument,
+    theme: mergedTheme,
+    themeClassName: useThemeStyleTag({
+      theme: mergedTheme,
+      targetDocument: targetDocument
+    }),
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', __assign(__assign({}, props), {
+      dir: dir,
+      ref: useMergedRefs(ref, useKeyboardNavAttribute())
+    }))
+  };
+};
+//# sourceMappingURL=useFluentProvider.js.map

package/lib/components/FluentProvider/useFluentProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,WAAT,QAA4B,uBAA5B;AACA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC;AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA,OAAO,IAAM,4BAA4B,GAAkC,CAAC,MAAD,CAApE;AAEP;;;;;;;;AAQG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAA6B,GAA7B,EAAwD;AACvF,MAAM,aAAa,GAAG,SAAS,EAA/B;AACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;AAEA;;;;AAIG;;AACK,MAAA,EAAA,GAAuF,KAAK,CAArE,GAAvB;AAAA,MAAA,GAAG,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,CAAC,GAAjB,GAAoB,EAAvB;AAAA,MAAyB,EAAA,GAA8D,KAAK,CAAtB,cAAtE;AAAA,MAAyB,cAAc,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,CAAC,cAAjB,GAA+B,EAAtE;AAAA,MAAwE,EAAA,GAAe,KAAK,CAAV,KAAlF;AAAA,MAAwE,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAH,GAAK,EAAlF;AACR,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;AAEA,SAAO;AACL,IAAA,GAAG,EAAA,GADE;AAEL,IAAA,cAAc,EAAA,cAFT;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,gBAAgB,CAAC;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA,cAAc,EAAA;AAApC,KAAD,CAJ3B;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA,QAAA,CAAA,EAAA,EAC5B,KAD4B,CAAA,EACvB;AACR,MAAA,GAAG,EAAA,GADK;AAER,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,uBAAuB,EAA7B;AAFV,KADuB,CAAN;AAVtB,GAAP;AAgBD,CA5BM","sourceRoot":""}

package/lib/components/FluentProvider/useFluentProviderContextValues.d.ts

@@ -0,0 +1,2 @@
+import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
+export declare function useFluentProviderContextValues(state: FluentProviderState): FluentProviderContextValues;

package/lib/components/FluentProvider/useFluentProviderContextValues.js

@@ -0,0 +1,23 @@
+import { useConst } from '@fluentui/react-utilities';
+import * as React from 'react';
+export function useFluentProviderContextValues(state) {
+  var root = state.root,
+      dir = state.dir,
+      targetDocument = state.targetDocument,
+      theme = state.theme;
+  var provider = React.useMemo(function () {
+    return {
+      dir: dir,
+      targetDocument: targetDocument
+    };
+  }, [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
+
+  var tooltip = useConst({});
+  return {
+    provider: provider,
+    tooltip: tooltip,
+    theme: theme,
+    themeClassName: root.className
+  };
+}
+//# sourceMappingURL=useFluentProviderContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,QAAyB,2BAAzB;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,8BAAV,CAAyC,KAAzC,EAAmE;AAC/D,MAAA,IAAI,GAAiC,KAAK,CAAtC,IAAJ;AAAA,MAAM,GAAG,GAA4B,KAAK,CAAjC,GAAT;AAAA,MAAW,cAAc,GAAY,KAAK,CAAjB,cAAzB;AAAA,MAA2B,KAAK,GAAK,KAAK,CAAV,KAAhC;AAER,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAAM,WAAC;AAAE,MAAA,GAAG,EAAA,GAAL;AAAO,MAAA,cAAc,EAAtB;AAAC,KAAD;AAAyB,GAA7C,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHuE,CAIvE;;AACA,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAD,CAAxB;AAEA,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;AAEL,IAAA,OAAO,EAAA,OAFF;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,cAAc,EAAE,IAAI,CAAC;AAJhB,GAAP;AAMD","sourceRoot":""}

package/lib/components/FluentProvider/useFluentProviderStyles.d.ts

@@ -0,0 +1,3 @@
+import type { FluentProviderState } from './FluentProvider.types';
+/** Applies style classnames to slots */
+export declare const useFluentProviderStyles: (state: FluentProviderState) => FluentProviderState;

package/lib/components/FluentProvider/useFluentProviderStyles.js

@@ -0,0 +1,22 @@
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "sj55zd": "f19n0e5",
+    "De3pzq": "fxugw4r",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6"
+  }
+}, {
+  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}"]
+});
+/** Applies style classnames to slots */
+
+
+export var useFluentProviderStyles = function (state) {
+  var styles = useStyles();
+  state.root.className = mergeClasses(state.themeClassName, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useFluentProviderStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACA,OAAO,IAAM,uBAAuB,GAAG,UAAC,KAAD,EAA2B;AAChE,MAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,cAAP,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AAEA,SAAO,KAAP;AACD,CANM","sourceRoot":""}

package/lib/components/FluentProvider/useThemeStyleTag.d.ts

@@ -0,0 +1,7 @@
+import type { FluentProviderState } from './FluentProvider.types';
+/**
+ * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
+ *
+ * @returns CSS class to apply the rule
+ */
+export declare const useThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;

package/lib/components/FluentProvider/useThemeStyleTag.js

@@ -0,0 +1,58 @@
+import { useId, usePrevious } from '@fluentui/react-utilities';
+import { themeToCSSVariables } from '@fluentui/react-theme';
+import * as React from 'react';
+/**
+ * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
+ *
+ * @returns CSS class to apply the rule
+ */
+
+export var useThemeStyleTag = function (options) {
+  var targetDocument = options.targetDocument,
+      theme = options.theme;
+  var styleTagId = useId('fluent-provider');
+  var styleTag = React.useMemo(function () {
+    if (!targetDocument) {
+      return null;
+    }
+
+    var tag = targetDocument.createElement('style');
+    tag.setAttribute('id', styleTagId);
+    targetDocument.head.appendChild(tag);
+    return tag;
+  }, [styleTagId, targetDocument]);
+  var cssRule = React.useMemo(function () {
+    var cssVars = themeToCSSVariables(theme);
+    var cssVarsAsString = Object.keys(cssVars).reduce(function (cssVarRule, cssVar) {
+      cssVarRule += cssVar + ": " + cssVars[cssVar] + "; ";
+      return cssVarRule;
+    }, ''); // result: .fluent-provider1 { --css-var: '#fff' }
+
+    return "." + styleTagId + " { " + cssVarsAsString + " }";
+  }, [theme, styleTagId]);
+  var previousCssRule = usePrevious(cssRule);
+
+  if (styleTag && previousCssRule !== cssRule) {
+    var sheet = styleTag.sheet;
+
+    if (sheet.cssRules.length > 0) {
+      sheet.deleteRule(0);
+    }
+
+    sheet.insertRule(cssRule, 0);
+  } // Removes the style tag from the targetDocument on unmount or change
+
+
+  React.useEffect(function () {
+    return function () {
+      var _a;
+
+      if (styleTag) {
+        // IE11 safe node removal, otherwise use node.remove()
+        (_a = styleTag.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(styleTag);
+      }
+    };
+  }, [styleTag]);
+  return styleTagId;
+};
+//# sourceMappingURL=useThemeStyleTag.js.map

package/lib/components/FluentProvider/useThemeStyleTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;;;AAIG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,OAAD,EAA+D;AACrF,MAAA,cAAc,GAAY,OAAO,CAAnB,cAAd;AAAA,MAAgB,KAAK,GAAK,OAAO,CAAZ,KAArB;AAER,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAD,CAAxB;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC7B,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,QAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC5B,QAAM,OAAO,GAAG,mBAAmB,CAAC,KAAD,CAAnC;AACA,QAAM,eAAe,GAAG,MAAM,CAAC,IAAP,CAAY,OAAZ,EAAqB,MAArB,CAA4B,UAAC,UAAD,EAAa,MAAb,EAAmB;AACrE,MAAA,UAAU,IAAO,MAAM,GAAA,IAAN,GAAW,OAAO,CAAC,MAAD,CAAlB,GAA0B,IAA3C;AACA,aAAO,UAAP;AACD,KAHuB,EAGrB,EAHqB,CAAxB,CAF4B,CAO5B;;AACA,WAAO,MAAI,UAAJ,GAAc,KAAd,GAAoB,eAApB,GAAmC,IAA1C;AACD,GATe,EASb,CAAC,KAAD,EAAQ,UAAR,CATa,CAAhB;AAUA,MAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,QAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GAnC4F,CAqC7F;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,YAAA;AACd,WAAO,YAAA;;;AACL,UAAI,QAAJ,EAAc;AACZ;AACA,SAAA,EAAA,GAAA,QAAQ,CAAC,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,QAAd,CAAtB;AACD;AACF,KALD;AAMD,GAPD,EAOG,CAAC,QAAD,CAPH;AASA,SAAO,UAAP;AACD,CAhDM","sourceRoot":""}

package/lib/index.d.ts

@@ -1,2 +1,2 @@
-export * from './context';
 export * from './FluentProvider';
+export { useFluent, useTheme } from '@fluentui/react-shared-contexts';

package/lib/index.js

@@ -1,3 +1,3 @@
-export * from './context';
 export * from './FluentProvider';
+export { useFluent, useTheme } from '@fluentui/react-shared-contexts';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './context';\nexport * from './FluentProvider';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib-commonjs/FluentProvider.d.ts

@@ -1,28 +1 @@
-import { PartialTheme, Theme } from '@fluentui/react-theme';
-import * as React from 'react';
-export interface ProviderProps {
-    /** Sets the direction of text & generated styles. */
-    dir?: 'ltr' | 'rtl';
-    /** Provides the document, can be undefined during SSR render. */
-    document?: Document | undefined;
-    theme?: PartialTheme;
-}
-export interface ProviderState {
-    dir: 'ltr' | 'rtl';
-    document: Document | undefined;
-    theme: Theme;
-}
-export declare function useFluentProviderState(draftState: ProviderState): void;
-export declare function renderFluentProvider(state: ProviderState): JSX.Element;
-/**
- * Returns the ThemeProvider render function and calculated state, given user input, ref, and
- * a set of default prop values.
- */
-export declare function useFluentProvider(props: ProviderProps, ref: React.Ref<HTMLElement>): {
-    state: ProviderState;
-    render: typeof renderFluentProvider;
-};
-/**
- * A React provider that allows to define theme, text direction and context for rendering for children components.
- */
-export declare const FluentProvider: React.FunctionComponent<ProviderProps>;
+export * from './components/FluentProvider/index';