| 1 | {"version":3,"file":"TeachingBubble.base.js","sourceRoot":"../src/","sources":["components/TeachingBubble/TeachingBubble.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,6CAAqD;AACrD,iEAAgE;AAChE,yCAAwC;AACxC,gEAA+D;AAC/D,qDAAsD;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,iCAAe,CAAC,WAAW;CAC7C,CAAC;AAEF,IAAM,aAAa,GAAG,8BAAkB,EAAoD,CAAC;AAC7F,IAAM,eAAe,GAAG,UACtB,YAAoD,EACpD,cAA+C;IAE/C,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;AAEW,QAAA,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,2BAAa,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IAEhE,IAAc,eAAe,GAU3B,KAAK,aAVsB;IAC7B,mDAAmD;IACnD,aAAa,GAQX,KAAK,cARM,EACb,SAAS,GAOP,KAAK,UAPE;IACT,mDAAmD;IACnD,KAKE,KAAK,eAL4B;IADnC,mDAAmD;IACnD,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,wDAAM,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,iBAAO,qBACN,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,6CAAqB,uBAAK,KAAK,EAAI,CAChC,CACE,CACX,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,0BAAkB,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> | undefined,\n rootElementRef: React.RefObject<HTMLDivElement>,\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 deprecation/deprecation\n targetElement,\n onDismiss,\n // eslint-disable-next-line deprecation/deprecation\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"]} |