first commit

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

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

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

@@ -0,0 +1,49 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { classNamesFunction } from '../../Utilities';
+import { TeachingBubbleContent } from './TeachingBubbleContent';
+import { Callout } from '../../Callout';
+import { DirectionalHint } from '../../common/DirectionalHint';
+import { useMergedRefs } from '@fluentui/react-hooks';
+var COMPONENT_NAME = 'TeachingBubble';
+var defaultCalloutProps = {
+    beakWidth: 16,
+    gapSpace: 0,
+    setInitialFocus: true,
+    doNotLayer: false,
+    directionalHint: DirectionalHint.rightCenter,
+};
+var getClassNames = classNamesFunction();
+var useComponentRef = function (componentRef, rootElementRef) {
+    React.useImperativeHandle(componentRef, function () { return ({
+        focus: function () { var _a; return (_a = rootElementRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+    }); }, [rootElementRef]);
+};
+export var TeachingBubbleBase = React.forwardRef(function (props, forwardedRef) {
+    var rootElementRef = React.useRef(null);
+    var mergedRootRef = useMergedRefs(rootElementRef, forwardedRef);
+    var setCalloutProps = props.calloutProps, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    targetElement = props.targetElement, onDismiss = props.onDismiss, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    _a = props.hasCloseButton, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    hasCloseButton = _a === void 0 ? props.hasCloseIcon : _a, isWide = props.isWide, styles = props.styles, theme = props.theme, target = props.target;
+    var calloutProps = React.useMemo(function () { return (__assign(__assign(__assign({}, defaultCalloutProps), setCalloutProps), { theme: theme })); }, [setCalloutProps, theme]);
+    var stylesProps = {
+        theme: theme,
+        isWide: isWide,
+        calloutProps: calloutProps,
+        hasCloseButton: hasCloseButton,
+    };
+    var classNames = getClassNames(styles, stylesProps);
+    var calloutStyles = classNames.subComponentStyles
+        ? classNames.subComponentStyles.callout
+        : undefined;
+    useComponentRef(props.componentRef, rootElementRef);
+    return (React.createElement(Callout, __assign({ target: target || targetElement, onDismiss: onDismiss }, calloutProps, { className: classNames.root, styles: calloutStyles, hideOverflow: true }),
+        React.createElement("div", { ref: mergedRootRef },
+            React.createElement(TeachingBubbleContent, __assign({}, props)))));
+});
+TeachingBubbleBase.displayName = COMPONENT_NAME;
+//# sourceMappingURL=TeachingBubble.base.js.map

node_modules/@fluentui/react/lib/components/TeachingBubble/TeachingBubble.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeachingBubble.base.js","sourceRoot":"../src/","sources":["components/TeachingBubble/TeachingBubble.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAUtD,IAAM,cAAc,GAAG,gBAAgB,CAAC;AACxC,IAAM,mBAAmB,GAAkB;IACzC,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,CAAC;IACX,eAAe,EAAE,IAAI;IACrB,UAAU,EAAE,KAAK;IACjB,eAAe,EAAE,eAAe,CAAC,WAAW;CAC7C,CAAC;AAEF,IAAM,aAAa,GAAG,kBAAkB,EAAoD,CAAC;AAC7F,IAAM,eAAe,GAAG,UACtB,YAA2D,EAC3D,cAAsD;IAEtD,KAAK,CAAC,mBAAmB,CACvB,YAAY,EACZ,cAAM,OAAA,CAAC;QACL,KAAK,EAAE,sBAAM,OAAA,MAAA,cAAc,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;KAC7C,CAAC,EAFI,CAEJ,EACF,CAAC,cAAc,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAkD,KAAK,CAAC,UAAU,CAG/F,UAAC,KAAK,EAAE,YAAY;IACpB,IAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1D,IAAM,aAAa,GAAG,aAAa,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IAEhE,IAAc,eAAe,GAU3B,KAAK,aAVsB;IAC7B,4DAA4D;IAC5D,aAAa,GAQX,KAAK,cARM,EACb,SAAS,GAOP,KAAK,UAPE;IACT,4DAA4D;IAC5D,KAKE,KAAK,eAL4B;IADnC,4DAA4D;IAC5D,cAAc,mBAAG,KAAK,CAAC,YAAY,KAAA,EACnC,MAAM,GAIJ,KAAK,OAJD,EACN,MAAM,GAGJ,KAAK,OAHD,EACN,KAAK,GAEH,KAAK,MAFF,EACL,MAAM,GACJ,KAAK,OADD,CACE;IAEV,IAAM,YAAY,GAA2D,KAAK,CAAC,OAAO,CACxF,cAAM,OAAA,gCAAM,mBAAmB,GAAK,eAAe,KAAE,KAAK,EAAE,KAAM,IAAG,EAA/D,CAA+D,EACrE,CAAC,eAAe,EAAE,KAAK,CAAC,CACzB,CAAC;IAEF,IAAM,WAAW,GAA8B;QAC7C,KAAK,EAAE,KAAM;QACb,MAAM,QAAA;QACN,YAAY,cAAA;QACZ,cAAc,gBAAA;KACf,CAAC;IAEF,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACtD,IAAM,aAAa,GAAG,UAAU,CAAC,kBAAkB;QACjD,CAAC,CAAE,UAAU,CAAC,kBAAwD,CAAC,OAAO;QAC9E,CAAC,CAAC,SAAS,CAAC;IAEd,eAAe,CAAC,KAAK,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,OAAO,aACN,MAAM,EAAE,MAAM,IAAI,aAAa,EAC/B,SAAS,EAAE,SAAS,IAChB,YAAY,IAChB,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,MAAM,EAAE,aAAa,EACrB,YAAY;QAEZ,6BAAK,GAAG,EAAE,aAAa;YACrB,oBAAC,qBAAqB,eAAK,KAAK,EAAI,CAChC,CACE,CACX,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,kBAAkB,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nimport { TeachingBubbleContent } from './TeachingBubbleContent';\nimport { Callout } from '../../Callout';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport type {\n  ITeachingBubble,\n  ITeachingBubbleProps,\n  ITeachingBubbleStyleProps,\n  ITeachingBubbleStyles,\n  ITeachingBubbleSubComponentStyles,\n} from './TeachingBubble.types';\nimport type { ICalloutProps } from '../../Callout';\n\nconst COMPONENT_NAME = 'TeachingBubble';\nconst defaultCalloutProps: ICalloutProps = {\n  beakWidth: 16,\n  gapSpace: 0,\n  setInitialFocus: true,\n  doNotLayer: false,\n  directionalHint: DirectionalHint.rightCenter,\n};\n\nconst getClassNames = classNamesFunction<ITeachingBubbleStyleProps, ITeachingBubbleStyles>();\nconst useComponentRef = (\n  componentRef: React.Ref<ITeachingBubble | null> | undefined,\n  rootElementRef: React.RefObject<HTMLDivElement | null>,\n) => {\n  React.useImperativeHandle(\n    componentRef,\n    () => ({\n      focus: () => rootElementRef.current?.focus(),\n    }),\n    [rootElementRef],\n  );\n};\n\nexport const TeachingBubbleBase: React.FunctionComponent<ITeachingBubbleProps> = React.forwardRef<\n  HTMLDivElement,\n  ITeachingBubbleProps\n>((props, forwardedRef) => {\n  const rootElementRef = React.useRef<HTMLDivElement>(null);\n  const mergedRootRef = useMergedRefs(rootElementRef, forwardedRef);\n  const {\n    calloutProps: setCalloutProps,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    targetElement,\n    onDismiss,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    hasCloseButton = props.hasCloseIcon,\n    isWide,\n    styles,\n    theme,\n    target,\n  } = props;\n\n  const calloutProps: ICalloutProps & Required<Pick<ICalloutProps, 'theme'>> = React.useMemo(\n    () => ({ ...defaultCalloutProps, ...setCalloutProps, theme: theme! }),\n    [setCalloutProps, theme],\n  );\n\n  const stylesProps: ITeachingBubbleStyleProps = {\n    theme: theme!,\n    isWide,\n    calloutProps,\n    hasCloseButton,\n  };\n\n  const classNames = getClassNames(styles, stylesProps);\n  const calloutStyles = classNames.subComponentStyles\n    ? (classNames.subComponentStyles as ITeachingBubbleSubComponentStyles).callout\n    : undefined;\n\n  useComponentRef(props.componentRef, rootElementRef);\n\n  return (\n    <Callout\n      target={target || targetElement}\n      onDismiss={onDismiss}\n      {...calloutProps}\n      className={classNames.root}\n      styles={calloutStyles}\n      hideOverflow\n    >\n      <div ref={mergedRootRef}>\n        <TeachingBubbleContent {...props} />\n      </div>\n    </Callout>\n  );\n});\nTeachingBubbleBase.displayName = COMPONENT_NAME;\n"]}

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

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

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

@@ -0,0 +1,5 @@
+import { styled } from '../../Utilities';
+import { TeachingBubbleBase } from './TeachingBubble.base';
+import { getStyles } from './TeachingBubble.styles';
+export var TeachingBubble = styled(TeachingBubbleBase, getStyles, undefined, { scope: 'TeachingBubble' });
+//# sourceMappingURL=TeachingBubble.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeachingBubble.js","sourceRoot":"../src/","sources":["components/TeachingBubble/TeachingBubble.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,IAAM,cAAc,GAAkD,MAAM,CAIjF,kBAAkB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { TeachingBubbleBase } from './TeachingBubble.base';\nimport { getStyles } from './TeachingBubble.styles';\nimport type { ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types';\n\nexport const TeachingBubble: React.FunctionComponent<ITeachingBubbleProps> = styled<\n  ITeachingBubbleProps,\n  ITeachingBubbleStyleProps,\n  ITeachingBubbleStyles\n>(TeachingBubbleBase, getStyles, undefined, { scope: 'TeachingBubble' });\n"]}

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

@@ -0,0 +1,2 @@
+import type { ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types';
+export declare const getStyles: (props: ITeachingBubbleStyleProps) => ITeachingBubbleStyles;

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

@@ -0,0 +1,279 @@
+import { __spreadArray } from "tslib";
+import { AnimationVariables, FontWeights, getFocusStyle, getGlobalClassNames, keyframes } from '../../Styling';
+import { memoizeFunction } from '../../Utilities';
+var globalClassNames = {
+    root: 'ms-TeachingBubble',
+    body: 'ms-TeachingBubble-body',
+    bodyContent: 'ms-TeachingBubble-bodycontent',
+    closeButton: 'ms-TeachingBubble-closebutton',
+    content: 'ms-TeachingBubble-content',
+    footer: 'ms-TeachingBubble-footer',
+    header: 'ms-TeachingBubble-header',
+    headerIsCondensed: 'ms-TeachingBubble-header--condensed',
+    headerIsSmall: 'ms-TeachingBubble-header--small',
+    headerIsLarge: 'ms-TeachingBubble-header--large',
+    headline: 'ms-TeachingBubble-headline',
+    image: 'ms-TeachingBubble-image',
+    primaryButton: 'ms-TeachingBubble-primaryButton',
+    secondaryButton: 'ms-TeachingBubble-secondaryButton',
+    subText: 'ms-TeachingBubble-subText',
+    // TODO: Button global class name usage should be converted to a styles function once
+    //        Button supports JS styling, which means these button names can be removed.
+    button: 'ms-Button',
+    buttonLabel: 'ms-Button-label',
+};
+var opacityFadeIn = memoizeFunction(function () {
+    return keyframes({
+        '0%': {
+            opacity: 0,
+            animationTimingFunction: AnimationVariables.easeFunction1,
+            transform: 'scale3d(.90,.90,.90)',
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'scale3d(1,1,1)',
+        },
+    });
+});
+var rootStyle = function (isWide, calloutProps) {
+    var _a = calloutProps || {}, calloutWidth = _a.calloutWidth, calloutMaxWidth = _a.calloutMaxWidth;
+    return [
+        {
+            display: 'block',
+            maxWidth: 364,
+            border: 0,
+            outline: 'transparent',
+            width: calloutWidth || 'calc(100% + 1px)',
+            animationName: "".concat(opacityFadeIn()),
+            animationDuration: '300ms',
+            animationTimingFunction: 'linear',
+            animationFillMode: 'both',
+        },
+        isWide && {
+            maxWidth: calloutMaxWidth || 456,
+        },
+    ];
+};
+var headerStyle = function (classNames, hasCondensedHeadline, hasSmallHeadline) {
+    if (hasCondensedHeadline) {
+        return [
+            classNames.headerIsCondensed,
+            {
+                marginBottom: 14,
+            },
+        ];
+    }
+    return [
+        hasSmallHeadline && classNames.headerIsSmall,
+        !hasSmallHeadline && classNames.headerIsLarge,
+        {
+            selectors: {
+                ':not(:last-child)': {
+                    marginBottom: 14,
+                },
+            },
+        },
+    ];
+};
+export var getStyles = function (props) {
+    var _a, _b, _c;
+    var hasCondensedHeadline = props.hasCondensedHeadline, hasSmallHeadline = props.hasSmallHeadline, hasCloseButton = props.hasCloseButton, hasHeadline = props.hasHeadline, isWide = props.isWide, primaryButtonClassName = props.primaryButtonClassName, secondaryButtonClassName = props.secondaryButtonClassName, theme = props.theme, _d = props.calloutProps, calloutProps = _d === void 0 ? { className: undefined, theme: theme } : _d;
+    var hasLargeHeadline = !hasCondensedHeadline && !hasSmallHeadline;
+    var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
+    var classNames = getGlobalClassNames(globalClassNames, theme);
+    var hideDefaultFocusRing = getFocusStyle(theme, {
+        outlineColor: 'transparent',
+        borderColor: 'transparent',
+    });
+    return {
+        root: [classNames.root, fonts.medium, calloutProps.className],
+        body: [
+            classNames.body,
+            hasCloseButton && !hasHeadline && { marginRight: 24 },
+            {
+                selectors: {
+                    ':not(:last-child)': {
+                        marginBottom: 20,
+                    },
+                },
+            },
+        ],
+        bodyContent: [
+            classNames.bodyContent,
+            {
+                padding: '20px 24px 20px 24px',
+            },
+        ],
+        closeButton: [
+            classNames.closeButton,
+            {
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                margin: '15px 15px 0 0',
+                borderRadius: 0,
+                color: palette.white,
+                fontSize: fonts.small.fontSize,
+                selectors: {
+                    ':hover': {
+                        background: palette.themeDarkAlt,
+                        color: palette.white,
+                    },
+                    ':active': {
+                        background: palette.themeDark,
+                        color: palette.white,
+                    },
+                    ':focus': {
+                        border: "1px solid ".concat(semanticColors.variantBorder),
+                    },
+                },
+            },
+        ],
+        content: __spreadArray(__spreadArray([
+            classNames.content
+        ], rootStyle(isWide), true), [
+            isWide && {
+                display: 'flex',
+            },
+        ], false),
+        footer: [
+            classNames.footer,
+            {
+                display: 'flex',
+                flex: 'auto',
+                alignItems: 'center',
+                color: palette.white,
+                selectors: (_a = {},
+                    // TODO: global class name usage should be converted to a styles function once Button supports JS styling
+                    _a[".".concat(classNames.button, ":not(:first-child)")] = {
+                        marginLeft: 10,
+                    },
+                    _a),
+            },
+        ],
+        header: __spreadArray(__spreadArray([
+            classNames.header
+        ], headerStyle(classNames, hasCondensedHeadline, hasSmallHeadline), true), [
+            hasCloseButton && { marginRight: 24 },
+            (hasCondensedHeadline || hasSmallHeadline) && [
+                fonts.medium,
+                {
+                    fontWeight: FontWeights.semibold,
+                },
+            ],
+        ], false),
+        headline: [
+            classNames.headline,
+            {
+                margin: 0,
+                color: palette.white,
+                fontWeight: FontWeights.semibold,
+                overflowWrap: 'break-word',
+            },
+            hasLargeHeadline && [
+                {
+                    fontSize: fonts.xLarge.fontSize,
+                },
+            ],
+        ],
+        imageContent: [
+            classNames.header,
+            classNames.image,
+            isWide && {
+                display: 'flex',
+                alignItems: 'center',
+                maxWidth: 154,
+            },
+        ],
+        primaryButton: [
+            classNames.primaryButton,
+            primaryButtonClassName,
+            hideDefaultFocusRing,
+            {
+                backgroundColor: palette.white,
+                borderColor: palette.white,
+                color: palette.themePrimary,
+                whiteSpace: 'nowrap',
+                selectors: (_b = {},
+                    // TODO: global class name usage should be converted to a styles function once Button supports JS styling
+                    _b[".".concat(classNames.buttonLabel)] = fonts.medium,
+                    _b[':hover'] = {
+                        backgroundColor: palette.themeLighter,
+                        borderColor: palette.themeLighter,
+                        color: palette.themeDark,
+                    },
+                    _b[':focus'] = {
+                        backgroundColor: palette.themeLighter,
+                        border: "1px solid ".concat(palette.black),
+                        color: palette.themeDark,
+                        outline: "1px solid ".concat(palette.white),
+                        outlineOffset: '-2px',
+                    },
+                    _b[':active'] = {
+                        backgroundColor: palette.white,
+                        borderColor: palette.white,
+                        color: palette.themePrimary,
+                    },
+                    _b),
+            },
+        ],
+        secondaryButton: [
+            classNames.secondaryButton,
+            secondaryButtonClassName,
+            hideDefaultFocusRing,
+            {
+                backgroundColor: palette.themePrimary,
+                borderColor: palette.white,
+                whiteSpace: 'nowrap',
+                selectors: (_c = {},
+                    // TODO: global class name usage should be converted to a styles function once Button supports JS styling
+                    _c[".".concat(classNames.buttonLabel)] = [
+                        fonts.medium,
+                        {
+                            color: palette.white,
+                        },
+                    ],
+                    _c[':hover'] = {
+                        backgroundColor: palette.themeDarkAlt,
+                        borderColor: palette.white,
+                    },
+                    _c[':focus'] = {
+                        backgroundColor: palette.themeDark,
+                        border: "1px solid ".concat(palette.black),
+                        outline: "1px solid ".concat(palette.white),
+                        outlineOffset: '-2px',
+                    },
+                    _c[':active'] = {
+                        backgroundColor: palette.themePrimary,
+                        borderColor: palette.white,
+                    },
+                    _c),
+            },
+        ],
+        subText: [
+            classNames.subText,
+            {
+                margin: 0,
+                fontSize: fonts.medium.fontSize,
+                color: palette.white,
+                fontWeight: FontWeights.regular,
+            },
+        ],
+        subComponentStyles: {
+            callout: {
+                root: __spreadArray(__spreadArray([], rootStyle(isWide, calloutProps), true), [fonts.medium], false),
+                beak: [
+                    {
+                        background: palette.themePrimary,
+                    },
+                ],
+                calloutMain: [
+                    {
+                        background: palette.themePrimary,
+                    },
+                ],
+            },
+        },
+    };
+};
+//# sourceMappingURL=TeachingBubble.styles.js.map

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

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import type { IImageProps } from '../../Image';
+import type { IButtonProps } from '../../Button';
+import type { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps';
+import type { ICalloutProps, ICalloutContentStyleProps } from '../../Callout';
+import type { IStyle, ITheme } from '../../Styling';
+import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
+import type { IFocusTrapZoneProps } from '../FocusTrapZone/index';
+import type { Target } from '@fluentui/react-hooks';
+import type { JSXElement } from '@fluentui/utilities';
+/**
+ * {@docCategory TeachingBubble}
+ */
+export interface ITeachingBubble {
+    /** Sets focus to the TeachingBubble root element */
+    focus(): void;
+}
+/**
+ * TeachingBubble component props.
+ * {@docCategory TeachingBubble}
+ */
+export interface ITeachingBubbleProps extends React.RefAttributes<HTMLDivElement>, IAccessiblePopupProps {
+    children?: React.ReactNode;
+    /**
+     * Optional callback to access the ITeachingBubble interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<ITeachingBubble>;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ITeachingBubbleStyleProps, ITeachingBubbleStyles>;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Properties to pass through for Callout, reference detail properties in ICalloutProps
+     */
+    calloutProps?: ICalloutProps;
+    /**
+     * Properties to pass through for FocusTrapZone, reference detail properties in IFocusTrapZoneProps
+     */
+    focusTrapZoneProps?: IFocusTrapZoneProps;
+    /**
+     * A headline for the Teaching Bubble.
+     */
+    headline?: string;
+    /**
+     * A variation with smaller bold headline and no margins.
+     */
+    hasCondensedHeadline?: boolean;
+    /**
+     * @deprecated Use `hasCloseButton`.
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * Whether the TeachingBubble renders close button in the top right corner.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * An Image for the TeachingBubble.
+     */
+    illustrationImage?: IImageProps;
+    /**
+     * The Primary interaction button
+     */
+    primaryButtonProps?: IButtonProps;
+    /**
+     * The Secondary interaction button
+     */
+    secondaryButtonProps?: IButtonProps;
+    /**
+     * Text that will be rendered in the footer of the TeachingBubble.
+     * May be rendered alongside primary and secondary buttons.
+     */
+    footerContent?: string | JSXElement;
+    /**
+     * Element to anchor the TeachingBubble to.
+     * @deprecated Use `target` instead
+     */
+    targetElement?: HTMLElement;
+    /**
+     * Element, MouseEvent, Point, or querySelector string that the TeachingBubble
+     * should anchor to.
+     */
+    target?: Target;
+    /**
+     * Callback when the TeachingBubble tries to close.
+     */
+    onDismiss?: (ev?: any) => void;
+    /**
+     * Whether or not the TeachingBubble is wide, with image on the left side.
+     */
+    isWide?: boolean;
+    /**
+     * A variation with smaller bold headline and margins to the body.
+     * (`hasCondensedHeadline` takes precedence if it is also set to true.)
+     */
+    hasSmallHeadline?: boolean;
+    /**
+     *  Defines the element id referencing the element containing label text for TeachingBubble.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Defines the element id referencing the element containing the description for the TeachingBubble.
+     */
+    ariaDescribedBy?: string;
+}
+/**
+ * {@docCategory TeachingBubble}
+ */
+export type ITeachingBubbleStyleProps = Required<Pick<ITeachingBubbleProps, 'theme'>> & Pick<ITeachingBubbleProps, 'hasCondensedHeadline' | 'hasSmallHeadline' | 'isWide'> & {
+    /** Style props for callout. */
+    calloutProps?: ICalloutContentStyleProps;
+    /** Class name for primary button. */
+    primaryButtonClassName?: string;
+    /** Class name for secondary button. */
+    secondaryButtonClassName?: string;
+    /** If the close button is visible. */
+    hasCloseButton?: boolean;
+    /** If a headline has been specified. */
+    hasHeadline?: boolean;
+};
+/**
+ * {@docCategory TeachingBubble}
+ */
+export interface ITeachingBubbleStyles {
+    root: IStyle;
+    body: IStyle;
+    bodyContent: IStyle;
+    closeButton: IStyle;
+    content: IStyle;
+    footer: IStyle;
+    header: IStyle;
+    headline: IStyle;
+    imageContent: IStyle;
+    primaryButton: IStyle;
+    secondaryButton: IStyle;
+    subText: IStyle;
+    subComponentStyles?: ITeachingBubbleSubComponentStyles;
+}
+/**
+ * {@docCategory TeachingBubble}
+ */
+export interface ITeachingBubbleSubComponentStyles {
+    /** Refers to the callout that hosts the TeachingBubble. */
+    callout: IStyleFunctionOrObject<any, any>;
+}

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

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

node_modules/@fluentui/react/lib/components/TeachingBubble/TeachingBubbleContent.base.d.ts

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

node_modules/@fluentui/react/lib/components/TeachingBubble/TeachingBubbleContent.base.js

@@ -0,0 +1,88 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, KeyCodes } from '../../Utilities';
+import { PrimaryButton, DefaultButton, IconButton } from '../../Button';
+import { Stack } from '../../Stack';
+import { FocusTrapZone } from '../../FocusTrapZone';
+import { Image } from '../../Image';
+import { useOnEvent, useMergedRefs, useId } from '@fluentui/react-hooks';
+import { useDocument } from '../../WindowProvider';
+var getClassNames = classNamesFunction();
+var useComponentRef = function (componentRef, rootElementRef) {
+    React.useImperativeHandle(componentRef, function () { return ({
+        focus: function () { var _a; return (_a = rootElementRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+    }); }, [rootElementRef]);
+};
+export var TeachingBubbleContentBase = React.forwardRef(function (props, forwardedRef) {
+    var _a, _b;
+    var rootElementRef = React.useRef(null);
+    var documentRef = useDocument();
+    var mergedRootRef = useMergedRefs(rootElementRef, forwardedRef);
+    var ariaDescribedById = useId('teaching-bubble-content-');
+    var ariaLabelledById = useId('teaching-bubble-title-');
+    var ariaDescribedBy = (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : ariaDescribedById;
+    var ariaLabelledBy = (_b = props.ariaLabelledBy) !== null && _b !== void 0 ? _b : ariaLabelledById;
+    var illustrationImage = props.illustrationImage, primaryButtonProps = props.primaryButtonProps, secondaryButtonProps = props.secondaryButtonProps, headline = props.headline, hasCondensedHeadline = props.hasCondensedHeadline, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    _c = props.hasCloseButton, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    hasCloseButton = _c === void 0 ? props.hasCloseIcon : _c, onDismiss = props.onDismiss, closeButtonAriaLabel = props.closeButtonAriaLabel, hasSmallHeadline = props.hasSmallHeadline, isWide = props.isWide, styles = props.styles, theme = props.theme, customFooterContent = props.footerContent, focusTrapZoneProps = props.focusTrapZoneProps;
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        hasCondensedHeadline: hasCondensedHeadline,
+        hasSmallHeadline: hasSmallHeadline,
+        hasCloseButton: hasCloseButton,
+        hasHeadline: !!headline,
+        isWide: isWide,
+        primaryButtonClassName: primaryButtonProps ? primaryButtonProps.className : undefined,
+        secondaryButtonClassName: secondaryButtonProps ? secondaryButtonProps.className : undefined,
+    });
+    var onKeyDown = React.useCallback(function (ev) {
+        if (onDismiss) {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            if (ev.which === KeyCodes.escape) {
+                onDismiss(ev);
+            }
+        }
+    }, [onDismiss]);
+    useOnEvent(documentRef, 'keydown', onKeyDown);
+    var imageContent;
+    var headerContent;
+    var bodyContent;
+    var footerContent;
+    var closeButton;
+    if (illustrationImage && illustrationImage.src) {
+        imageContent = (React.createElement("div", { className: classNames.imageContent },
+            React.createElement(Image, __assign({}, illustrationImage))));
+    }
+    if (headline) {
+        var HeaderWrapperAs = typeof headline === 'string' ? 'p' : 'div';
+        headerContent = (React.createElement("div", { className: classNames.header },
+            React.createElement(HeaderWrapperAs, { role: "heading", "aria-level": 3, className: classNames.headline, id: ariaLabelledBy }, headline)));
+    }
+    if (props.children) {
+        var BodyContentWrapperAs = typeof props.children === 'string' ? 'p' : 'div';
+        bodyContent = (React.createElement("div", { className: classNames.body },
+            React.createElement(BodyContentWrapperAs, { className: classNames.subText, id: ariaDescribedBy }, props.children)));
+    }
+    if (primaryButtonProps || secondaryButtonProps || customFooterContent) {
+        footerContent = (React.createElement(Stack, { className: classNames.footer, horizontal: true, horizontalAlign: customFooterContent ? 'space-between' : 'end' },
+            React.createElement(Stack.Item, { align: "center" }, React.createElement("span", null, customFooterContent)),
+            React.createElement(Stack.Item, null,
+                primaryButtonProps && React.createElement(PrimaryButton, __assign({}, primaryButtonProps, { className: classNames.primaryButton })),
+                secondaryButtonProps && React.createElement(DefaultButton, __assign({}, secondaryButtonProps, { className: classNames.secondaryButton })))));
+    }
+    if (hasCloseButton) {
+        closeButton = (React.createElement(IconButton, { className: classNames.closeButton, iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }));
+    }
+    useComponentRef(props.componentRef, rootElementRef);
+    return (React.createElement("div", { className: classNames.content, ref: mergedRootRef, role: 'dialog', tabIndex: -1, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-is-focusable": true },
+        imageContent,
+        React.createElement(FocusTrapZone, __assign({ isClickableOutsideFocusTrap: true }, focusTrapZoneProps),
+            React.createElement("div", { className: classNames.bodyContent },
+                headerContent,
+                bodyContent,
+                footerContent,
+                closeButton))));
+});
+//# sourceMappingURL=TeachingBubbleContent.base.js.map

node_modules/@fluentui/react/lib/components/TeachingBubble/TeachingBubbleContent.d.ts

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

node_modules/@fluentui/react/lib/components/TeachingBubble/TeachingBubbleContent.js

@@ -0,0 +1,5 @@
+import { styled } from '../../Utilities';
+import { TeachingBubbleContentBase } from './TeachingBubbleContent.base';
+import { getStyles } from './TeachingBubble.styles';
+export var TeachingBubbleContent = styled(TeachingBubbleContentBase, getStyles, undefined, { scope: 'TeachingBubbleContent' });
+//# sourceMappingURL=TeachingBubbleContent.js.map

node_modules/@fluentui/react/lib/components/TeachingBubble/TeachingBubbleContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeachingBubbleContent.js","sourceRoot":"../src/","sources":["components/TeachingBubble/TeachingBubbleContent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,IAAM,qBAAqB,GAAkD,MAAM,CAIxF,yBAAyB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { TeachingBubbleContentBase } from './TeachingBubbleContent.base';\nimport { getStyles } from './TeachingBubble.styles';\nimport type { ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types';\n\nexport const TeachingBubbleContent: React.FunctionComponent<ITeachingBubbleProps> = styled<\n  ITeachingBubbleProps,\n  ITeachingBubbleStyleProps,\n  ITeachingBubbleStyles\n>(TeachingBubbleContentBase, getStyles, undefined, { scope: 'TeachingBubbleContent' });\n"]}

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

@@ -0,0 +1,5 @@
+export * from './TeachingBubble';
+export * from './TeachingBubble.base';
+export * from './TeachingBubble.types';
+export * from './TeachingBubbleContent';
+export * from './TeachingBubbleContent.base';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TeachingBubble/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './TeachingBubble';\nexport * from './TeachingBubble.base';\nexport * from './TeachingBubble.types';\nexport * from './TeachingBubbleContent';\nexport * from './TeachingBubbleContent.base';\n"]}