npm - @azure/communication-react - Versions diffs - 1.13.0-alpha-202402230012 → 1.13.0-alpha-202402240011 - Mend

@azure/communication-react 1.13.0-alpha-202402230012 → 1.13.0-alpha-202402240011

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo, useState, useEffect } from 'react';\nimport {\n IModalStyles,\n Modal,\n Stack,\n useTheme,\n Text,\n IconButton,\n Dropdown,\n IDropdownOption,\n DefaultButton,\n PrimaryButton\n} from '@fluentui/react';\n\nimport {\n buttonsContainerClassName,\n buttonStyles,\n dropdownContainerClassName,\n dropdownInfoTextStyle,\n dropdownStyles,\n themedCaptionsSettingsModalStyle,\n titleClassName,\n titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { SpokenLanguageStrings, CaptionLanguageStrings, _spokenLanguageToCaptionLanguage } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @internal\n * strings for captions setting modal\n /\nexport interface _CaptionsSettingsModalStrings {\n captionsSettingsModalTitle?: string;\n captionsSettingsSpokenLanguageDropdownLabel?: string;\n captionsSettingsCaptionLanguageDropdownLabel?: string;\n captionsSettingsSpokenLanguageDropdownInfoText?: string;\n captionsSettingsCaptionLanguageDropdownInfoText?: string;\n captionsSettingsConfirmButtonLabel?: string;\n captionsSettingsCancelButtonLabel?: string;\n captionsSettingsModalAriaLabel?: string;\n captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/\n @internal\n * _CaptionsSettingsModal Component Props.\n /\nexport interface _CaptionsSettingsModalProps {\n supportedSpokenLanguages: string[];\n supportedCaptionLanguages: string[];\n onSetSpokenLanguage: (language: string) => Promise<void>;\n onSetCaptionLanguage: (language: string) => Promise<void>;\n onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n currentSpokenLanguage: string;\n currentCaptionLanguage: string;\n spokenLanguageStrings?: SpokenLanguageStrings;\n captionLanguageStrings?: CaptionLanguageStrings;\n isCaptionsFeatureActive?: boolean;\n strings?: _CaptionsSettingsModalStrings;\n showModal?: boolean;\n onDismissCaptionsSettings?: () => void;\n changeCaptionLanguage?: boolean;\n}\n\n/\n @internal\n * a component for setting spoken languages\n */\nexport const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.Element => {\n const {\n supportedSpokenLanguages,\n supportedCaptionLanguages,\n currentSpokenLanguage,\n currentCaptionLanguage,\n isCaptionsFeatureActive,\n showModal,\n onSetSpokenLanguage,\n onSetCaptionLanguage,\n onDismissCaptionsSettings,\n onStartCaptions,\n strings,\n spokenLanguageStrings,\n captionLanguageStrings,\n changeCaptionLanguage = false\n } = props;\n\n const theme = useTheme();\n\n const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState<IDropdownOption>({\n key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n });\n\n const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState<IDropdownOption>({\n key:\n currentCaptionLanguage !== ''\n ? currentCaptionLanguage\n : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],\n text:\n currentCaptionLanguage !== ''\n ? currentCaptionLanguage\n : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]\n });\n\n useEffect(() => {\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {\n onSetSpokenLanguage(selectedSpokenLanguage.key.toString());\n // we only need to call set spoken language once when first starting captions\n setHasSetSpokenLanguage(true);\n }\n }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedSpokenLanguage.key, hasSetSpokenLanguage]);\n\n const onDismiss = useCallback((): void => {\n if (onDismissCaptionsSettings) {\n onDismissCaptionsSettings();\n }\n }, [onDismissCaptionsSettings]);\n\n const onConfirm = useCallback(async (): Promise<void> => {\n const spokenLanguageCode = selectedSpokenLanguage.key.toString();\n const captionLanguageCode = selectedCaptionLanguage.key.toString();\n if (isCaptionsFeatureActive) {\n onSetSpokenLanguage(spokenLanguageCode);\n onSetCaptionLanguage(captionLanguageCode);\n } else {\n await onStartCaptions({ spokenLanguage: spokenLanguageCode });\n }\n onDismiss();\n }, [\n onDismiss,\n isCaptionsFeatureActive,\n onSetSpokenLanguage,\n onSetCaptionLanguage,\n onStartCaptions,\n selectedSpokenLanguage.key,\n selectedCaptionLanguage.key\n ]);\n\n const spokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n return supportedSpokenLanguages.map((languageCode) => {\n return {\n key: languageCode,\n text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode\n };\n });\n }, [supportedSpokenLanguages, spokenLanguageStrings]);\n\n const captionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n return supportedCaptionLanguages.map((languageCode) => {\n return {\n key: languageCode,\n text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode\n };\n });\n }, [supportedCaptionLanguages, captionLanguageStrings]);\n\n const sortedSpokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n const copy = [...spokenLanguageDropdownOptions];\n return copy.sort((a, b) => (a.text > b.text ? 1 : -1));\n }, [spokenLanguageDropdownOptions]);\n\n const sortedCaptionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n const copy = [...captionLanguageDropdownOptions];\n return copy.sort((a, b) => (a.text > b.text ? 1 : -1));\n }, [captionLanguageDropdownOptions]);\n\n const onSpokenLanguageChange = (\n event: React.FormEvent<HTMLDivElement>,\n option: IDropdownOption \| undefined\n ): void => {\n if (option) {\n setSelectedSpokenLanguage(option);\n }\n };\n\n const onCaptionLanguageChange = (\n event: React.FormEvent<HTMLDivElement>,\n option: IDropdownOption \| undefined\n ): void => {\n if (option) {\n setSelectedCaptionLanguage(option);\n }\n };\n\n const calloutProps = useMemo(\n () => ({\n preventDismissOnEvent: _preventDismissOnEvent\n }),\n []\n );\n\n const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n const placeholderSpokenLanguage = currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage;\n const placeholderCaptionLanguage =\n currentCaptionLanguage !== ''\n ? currentCaptionLanguage\n : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];\n return (\n <Stack>\n <Dropdown\n label={strings?.captionsSettingsSpokenLanguageDropdownLabel}\n selectedKey={selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined}\n onChange={onSpokenLanguageChange}\n calloutProps={calloutProps}\n placeholder={placeholderSpokenLanguage}\n options={sortedSpokenLanguageDropdownOptions}\n styles={dropdownStyles}\n />\n <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsSpokenLanguageDropdownInfoText}</Text>\n {changeCaptionLanguage && (\n <>\n <Dropdown\n label={strings?.captionsSettingsCaptionLanguageDropdownLabel}\n selectedKey={selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined}\n onChange={onCaptionLanguageChange}\n calloutProps={calloutProps}\n placeholder={placeholderCaptionLanguage}\n options={sortedCaptionLanguageDropdownOptions}\n styles={dropdownStyles}\n />\n <Text className={dropdownInfoTextStyle(theme)}>\n {strings?.captionsSettingsCaptionLanguageDropdownInfoText}\n </Text>\n </>\n )}\n </Stack>\n );\n }, [\n calloutProps,\n currentSpokenLanguage,\n currentCaptionLanguage,\n sortedSpokenLanguageDropdownOptions,\n sortedCaptionLanguageDropdownOptions,\n selectedCaptionLanguage,\n selectedSpokenLanguage,\n strings?.captionsSettingsSpokenLanguageDropdownInfoText,\n strings?.captionsSettingsCaptionLanguageDropdownLabel,\n strings?.captionsSettingsSpokenLanguageDropdownLabel,\n strings?.captionsSettingsCaptionLanguageDropdownInfoText,\n theme,\n changeCaptionLanguage\n ]);\n\n const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(\n () => themedCaptionsSettingsModalStyle(theme),\n [theme]\n );\n\n return (\n <>\n {\n <Modal\n titleAriaId={strings?.captionsSettingsModalAriaLabel}\n isOpen={showModal}\n onDismiss={onDismiss}\n isBlocking={true}\n styles={CaptionsSettingsModalStyle}\n >\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n <IconButton\n iconProps={{ iconName: 'Cancel' }}\n ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}\n onClick={onDismiss}\n style={{ color: theme.palette.black }}\n />\n </Stack>\n\n <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n </PrimaryButton>\n <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n </DefaultButton>\n </Stack>\n </Modal>\n }\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,QAAQ,EAER,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,yBAAyB,EACzB,YAAY,EACZ,0BAA0B,EAC1B,qBAAqB,EACrB,cAAc,EACd,gCAAgC,EAChC,cAAc,EACd,uBAAuB,EACxB,MAAM,uCAAuC,CAAC;AAE/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAGL,gCAAgC,EAKjC,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,sBAAsB,EAAE,mCAAgC;AAuCjE;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EACJ,wBAAwB,EACxB,yBAAyB,EACzB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,eAAe,EACf,OAAO,EACP,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,GAAG,KAAK,EAC9B,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAgC;QAClG,GAAG,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,qBAAqB;QACnD,IAAI,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,qBAAqB;KACrD,CAAC,CAAC;IAEH,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAiC;QACrG,GAAG,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,gCAAgC,CAAC,sBAAsB,CAAC,GAAG,CAAC;QAC3F,IAAI,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,gCAAgC,CAAC,sBAAsB,CAAC,GAAG,CAAC;KAC7F,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,4EAA4E;QAC5E,iIAAiI;QACjI,IAAI,uBAAuB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACrD,mBAAmB,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC;YAChD,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,uBAAuB,EAAE,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAErG,MAAM,SAAS,GAAG,WAAW,CAAC,GAAS,EAAE;QACvC,IAAI,yBAAyB,EAAE,CAAC;YAC9B,yBAAyB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAEhC,MAAM,SAAS,GAAG,WAAW,CAAC,GAAwB,EAAE;QACtD,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,GAAG,CAAC;QACtD,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC;QACxD,IAAI,uBAAuB,EAAE,CAAC;YAC5B,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;YACxC,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC,CAAC;QAChE,CAAC;QACD,SAAS,EAAE,CAAC;IACd,CAAC,CAAA,EAAE;QACD,SAAS;QACT,uBAAuB;QACvB,mBAAmB;QACnB,oBAAoB;QACpB,eAAe;QACf,sBAAsB,CAAC,GAAG;QAC1B,uBAAuB,CAAC,GAAG;KAC5B,CAAC,CAAC;IAEH,MAAM,6BAA6B,GAAsB,OAAO,CAAC,GAAG,EAAE;QACpE,OAAO,wBAAwB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;YACnD,OAAO;gBACL,GAAG,EAAE,YAAY;gBACjB,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;aACjF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,wBAAwB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEtD,MAAM,8BAA8B,GAAsB,OAAO,CAAC,GAAG,EAAE;QACrE,OAAO,yBAAyB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;YACpD,OAAO;gBACL,GAAG,EAAE,YAAY;gBACjB,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;aACnF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAExD,MAAM,mCAAmC,GAAsB,OAAO,CAAC,GAAG,EAAE;QAC1E,MAAM,IAAI,GAAG,CAAC,GAAG,6BAA6B,CAAC,CAAC;QAChD,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAEpC,MAAM,oCAAoC,GAAsB,OAAO,CAAC,GAAG,EAAE;QAC3E,MAAM,IAAI,GAAG,CAAC,GAAG,8BAA8B,CAAC,CAAC;QACjD,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,8BAA8B,CAAC,CAAC,CAAC;IAErC,MAAM,sBAAsB,GAAG,CAC7B,KAAsC,EACtC,MAAiD,EAC3C,EAAE;QACR,IAAI,MAAM,EAAE,CAAC;YACX,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAC9B,KAAsC,EACtC,MAAkD,EAC5C,EAAE;QACR,IAAI,MAAM,EAAE,CAAC;YACX,0BAA0B,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,qBAAqB,EAAE,sBAAsB;KAC9C,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAgB,EAAE;QAC9D,MAAM,yBAAyB,GAAG,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,qBAAqB,CAAC;QACjF,MAAM,0BAA0B,GAC9B,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,gCAAgC,CAAC,yBAAyB,CAAC,CAAC;QACxF,OAAO,CACL,oBAAC,KAAK;YACJ,oBAAC,QAAQ,IACP,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,2CAA2C,EAC3D,WAAW,EAAE,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC5E,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,sBAAsB,CAAC,EAAE,EAAE,MAAuC,CAAC,EAC7F,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,yBAAyB,EACtC,OAAO,EAAE,mCAAmC,EAC5C,MAAM,EAAE,cAAc,GACtB;YACF,oBAAC,IAAI,IAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,8CAA8C,CAAQ;YAC9G,qBAAqB,IAAI,CACxB;gBACE,oBAAC,QAAQ,IACP,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,4CAA4C,EAC5D,WAAW,EAAE,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC9E,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,uBAAuB,CAAC,EAAE,EAAE,MAAwC,CAAC,EAC/F,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,0BAA0B,EACvC,OAAO,EAAE,oCAAoC,EAC7C,MAAM,EAAE,cAAc,GACtB;gBACF,oBAAC,IAAI,IAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,CAAC,IAC1C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,+CAA+C,CACpD,CACN,CACJ,CACK,CACT,CAAC;IACJ,CAAC,EAAE;QACD,YAAY;QACZ,qBAAqB;QACrB,sBAAsB;QACtB,mCAAmC;QACnC,oCAAoC;QACpC,uBAAuB;QACvB,sBAAsB;QACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,8CAA8C;QACvD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,4CAA4C;QACrD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,2CAA2C;QACpD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,+CAA+C;QACxD,KAAK;QACL,qBAAqB;KACtB,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAA0B,OAAO,CAC/D,GAAG,EAAE,CAAC,gCAAgC,CAAC,KAAK,CAAC,EAC7C,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,0CAEI,oBAAC,KAAK,IACJ,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,8BAA8B,EACpD,MAAM,EAAE,SAAS,EACjB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,0BAA0B;QAElC,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,uBAAuB;YACzG,oBAAC,IAAI,IAAC,SAAS,EAAE,cAAc,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B,CAAQ;YAC7E,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,yCAAyC,EAC7D,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,GACrC,CACI;QAER,oBAAC,KAAK,IAAC,SAAS,EAAE,0BAA0B,IAAG,yBAAyB,EAAE,CAAS;QACnF,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAE,yBAAyB;YAC1E,oBAAC,aAAa,IAAC,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS;gBAC5D,kCAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kCAAkC,CAAQ,CAC5C;YAChB,oBAAC,aAAa,IAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;gBAC5D,kCAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iCAAiC,CAAQ,CAC3C,CACV,CACF,CAET,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo, useState, useEffect } from 'react';\nimport {\n IModalStyles,\n Modal,\n Stack,\n useTheme,\n Text,\n IconButton,\n Dropdown,\n IDropdownOption,\n DefaultButton,\n PrimaryButton\n} from '@fluentui/react';\n\nimport {\n buttonsContainerClassName,\n buttonStyles,\n dropdownContainerClassName,\n dropdownInfoTextStyle,\n dropdownStyles,\n themedCaptionsSettingsModalStyle,\n titleClassName,\n titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport {\n SpokenLanguageStrings,\n CaptionLanguageStrings,\n _spokenLanguageToCaptionLanguage,\n _SupportedSpokenLanguage,\n _SupportedCaptionLanguage,\n SpokenLanguageDropdownOptions,\n CaptionLanguageDropdownOptions\n} from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @internal\n * strings for captions setting modal\n /\nexport interface _CaptionsSettingsModalStrings {\n captionsSettingsModalTitle?: string;\n captionsSettingsSpokenLanguageDropdownLabel?: string;\n captionsSettingsCaptionLanguageDropdownLabel?: string;\n captionsSettingsSpokenLanguageDropdownInfoText?: string;\n captionsSettingsCaptionLanguageDropdownInfoText?: string;\n captionsSettingsConfirmButtonLabel?: string;\n captionsSettingsCancelButtonLabel?: string;\n captionsSettingsModalAriaLabel?: string;\n captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/\n @internal\n * _CaptionsSettingsModal Component Props.\n /\nexport interface _CaptionsSettingsModalProps {\n supportedSpokenLanguages: _SupportedSpokenLanguage[];\n supportedCaptionLanguages: _SupportedCaptionLanguage[];\n onSetSpokenLanguage: (language: _SupportedSpokenLanguage) => Promise<void>;\n onSetCaptionLanguage: (language: _SupportedCaptionLanguage) => Promise<void>;\n onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n currentSpokenLanguage: _SupportedSpokenLanguage;\n currentCaptionLanguage: _SupportedCaptionLanguage;\n spokenLanguageStrings?: SpokenLanguageStrings;\n captionLanguageStrings?: CaptionLanguageStrings;\n isCaptionsFeatureActive?: boolean;\n strings?: _CaptionsSettingsModalStrings;\n showModal?: boolean;\n onDismissCaptionsSettings?: () => void;\n changeCaptionLanguage?: boolean;\n}\n\n/\n @internal\n * a component for setting spoken languages\n */\nexport const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.Element => {\n const {\n supportedSpokenLanguages,\n supportedCaptionLanguages,\n currentSpokenLanguage,\n currentCaptionLanguage,\n isCaptionsFeatureActive,\n showModal,\n onSetSpokenLanguage,\n onSetCaptionLanguage,\n onDismissCaptionsSettings,\n onStartCaptions,\n strings,\n spokenLanguageStrings,\n captionLanguageStrings,\n changeCaptionLanguage = false\n } = props;\n\n const theme = useTheme();\n\n const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState<SpokenLanguageDropdownOptions>({\n key: currentSpokenLanguage ?? defaultSpokenLanguage,\n text: currentSpokenLanguage ?? defaultSpokenLanguage\n });\n\n const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState<CaptionLanguageDropdownOptions>({\n key: currentCaptionLanguage ?? _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],\n text: currentCaptionLanguage ?? _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]\n });\n\n useEffect(() => {\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {\n onSetSpokenLanguage(selectedSpokenLanguage.key);\n // we only need to call set spoken language once when first starting captions\n setHasSetSpokenLanguage(true);\n }\n }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedSpokenLanguage.key, hasSetSpokenLanguage]);\n\n const onDismiss = useCallback((): void => {\n if (onDismissCaptionsSettings) {\n onDismissCaptionsSettings();\n }\n }, [onDismissCaptionsSettings]);\n\n const onConfirm = useCallback(async (): Promise<void> => {\n const spokenLanguageCode = selectedSpokenLanguage.key;\n const captionLanguageCode = selectedCaptionLanguage.key;\n if (isCaptionsFeatureActive) {\n onSetSpokenLanguage(spokenLanguageCode);\n onSetCaptionLanguage(captionLanguageCode);\n } else {\n await onStartCaptions({ spokenLanguage: spokenLanguageCode });\n }\n onDismiss();\n }, [\n onDismiss,\n isCaptionsFeatureActive,\n onSetSpokenLanguage,\n onSetCaptionLanguage,\n onStartCaptions,\n selectedSpokenLanguage.key,\n selectedCaptionLanguage.key\n ]);\n\n const spokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n return supportedSpokenLanguages.map((languageCode) => {\n return {\n key: languageCode,\n text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode\n };\n });\n }, [supportedSpokenLanguages, spokenLanguageStrings]);\n\n const captionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n return supportedCaptionLanguages.map((languageCode) => {\n return {\n key: languageCode,\n text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode\n };\n });\n }, [supportedCaptionLanguages, captionLanguageStrings]);\n\n const sortedSpokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n const copy = [...spokenLanguageDropdownOptions];\n return copy.sort((a, b) => (a.text > b.text ? 1 : -1));\n }, [spokenLanguageDropdownOptions]);\n\n const sortedCaptionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n const copy = [...captionLanguageDropdownOptions];\n return copy.sort((a, b) => (a.text > b.text ? 1 : -1));\n }, [captionLanguageDropdownOptions]);\n\n const onSpokenLanguageChange = (\n event: React.FormEvent<HTMLDivElement>,\n option: SpokenLanguageDropdownOptions \| undefined\n ): void => {\n if (option) {\n setSelectedSpokenLanguage(option);\n }\n };\n\n const onCaptionLanguageChange = (\n event: React.FormEvent<HTMLDivElement>,\n option: CaptionLanguageDropdownOptions \| undefined\n ): void => {\n if (option) {\n setSelectedCaptionLanguage(option);\n }\n };\n\n const calloutProps = useMemo(\n () => ({\n preventDismissOnEvent: _preventDismissOnEvent\n }),\n []\n );\n\n const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n const placeholderSpokenLanguage = currentSpokenLanguage ?? defaultSpokenLanguage;\n const placeholderCaptionLanguage =\n currentCaptionLanguage ?? _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];\n return (\n <Stack>\n <Dropdown\n label={strings?.captionsSettingsSpokenLanguageDropdownLabel}\n selectedKey={selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined}\n onChange={(ev, option) => onSpokenLanguageChange(ev, option as SpokenLanguageDropdownOptions)}\n calloutProps={calloutProps}\n placeholder={placeholderSpokenLanguage}\n options={sortedSpokenLanguageDropdownOptions}\n styles={dropdownStyles}\n />\n <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsSpokenLanguageDropdownInfoText}</Text>\n {changeCaptionLanguage && (\n <>\n <Dropdown\n label={strings?.captionsSettingsCaptionLanguageDropdownLabel}\n selectedKey={selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined}\n onChange={(ev, option) => onCaptionLanguageChange(ev, option as CaptionLanguageDropdownOptions)}\n calloutProps={calloutProps}\n placeholder={placeholderCaptionLanguage}\n options={sortedCaptionLanguageDropdownOptions}\n styles={dropdownStyles}\n />\n <Text className={dropdownInfoTextStyle(theme)}>\n {strings?.captionsSettingsCaptionLanguageDropdownInfoText}\n </Text>\n </>\n )}\n </Stack>\n );\n }, [\n calloutProps,\n currentSpokenLanguage,\n currentCaptionLanguage,\n sortedSpokenLanguageDropdownOptions,\n sortedCaptionLanguageDropdownOptions,\n selectedCaptionLanguage,\n selectedSpokenLanguage,\n strings?.captionsSettingsSpokenLanguageDropdownInfoText,\n strings?.captionsSettingsCaptionLanguageDropdownLabel,\n strings?.captionsSettingsSpokenLanguageDropdownLabel,\n strings?.captionsSettingsCaptionLanguageDropdownInfoText,\n theme,\n changeCaptionLanguage\n ]);\n\n const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(\n () => themedCaptionsSettingsModalStyle(theme),\n [theme]\n );\n\n return (\n <>\n {\n <Modal\n titleAriaId={strings?.captionsSettingsModalAriaLabel}\n isOpen={showModal}\n onDismiss={onDismiss}\n isBlocking={true}\n styles={CaptionsSettingsModalStyle}\n >\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n <IconButton\n iconProps={{ iconName: 'Cancel' }}\n ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}\n onClick={onDismiss}\n style={{ color: theme.palette.black }}\n />\n </Stack>\n\n <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n </PrimaryButton>\n <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n </DefaultButton>\n </Stack>\n </Modal>\n }\n </>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/Dialpad/DTMFToneGenerator.d.ts CHANGED Viewed

@@ -77,4 +77,11 @@ export declare const dtmfFrequencies: {
         f2: number;
     };
 };
+/**
+ * Key of the mapping of the different dtmf frequencies that are needed for the creation of sound that
+ * matches the dtmf tones.
+ *
+ * @internal
+ */
+export type DtmfFrequenciesKeys = keyof typeof dtmfFrequencies;
 //# sourceMappingURL=DTMFToneGenerator.d.ts.map

package/dist/dist-esm/react-components/src/components/Dialpad/DTMFToneGenerator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DTMFToneGenerator.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/DTMFToneGenerator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;GAIG;AACH,MAAM,OAAO,IAAI;IAQf,YAAY,OAAqB,EAAE,UAAkB,EAAE,UAAkB;QAFjE,cAAS,GAAY,KAAK,CAAC;QAQnC;;;WAGG;QACI,SAAI,GAAG,GAAS,EAAE;YACvB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YACD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;YAC3C,QAAQ,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;YAC1B,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAE3C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAEvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACvC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEF;;WAEG;QACI,SAAI,GAAG,GAAS,EAAE;YACvB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACjD,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;gBAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;gBAC5B,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;gBAClC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;gBAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAxCA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;CAsCF;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;IAC1B,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE;CAC3B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/*\n Class for playing individual DTMF Tones.\n \n @internal\n /\nexport class Tone {\n private context: AudioContext;\n private frequency1: number;\n private frequency2: number;\n private oscillatorNode1?: OscillatorNode;\n private oscillatorNode2?: OscillatorNode;\n private isPlaying: boolean = false;\n\n constructor(context: AudioContext, frequency1: number, frequency2: number) {\n this.context = context;\n this.frequency1 = frequency1;\n this.frequency2 = frequency2;\n }\n\n /\n Function to play the tone. will create new ocillators because they are one use objects so we need to make\n * new ones every time we play a tone.\n /\n public play = (): void => {\n if (this.isPlaying) {\n return;\n }\n const gainNode = this.context.createGain();\n gainNode.gain.value = 0.1;\n gainNode.connect(this.context.destination);\n\n this.oscillatorNode1 = this.context.createOscillator();\n this.oscillatorNode1.frequency.value = this.frequency1;\n this.oscillatorNode1.connect(gainNode);\n\n this.oscillatorNode2 = this.context.createOscillator();\n this.oscillatorNode2.frequency.value = this.frequency2;\n this.oscillatorNode2.connect(gainNode);\n this.oscillatorNode1.start();\n this.oscillatorNode2.start();\n this.isPlaying = true;\n };\n\n /\n Function to stop the tone.\n /\n public stop = (): void => {\n if (this.oscillatorNode1 && this.oscillatorNode2) {\n this.oscillatorNode1.stop();\n this.oscillatorNode2.stop();\n this.oscillatorNode1.disconnect();\n this.oscillatorNode2.disconnect();\n this.isPlaying = false;\n }\n };\n}\n\n/\n Mapping of the different dtmf frequencies that are needed for the creation of sound that\n * matches the dtmf tones.\n \n @internal\n /\nexport const dtmfFrequencies = {\n '1': { f1: 697, f2: 1209 },\n '2': { f1: 697, f2: 1336 },\n '3': { f1: 697, f2: 1477 },\n '4': { f1: 770, f2: 1209 },\n '5': { f1: 770, f2: 1336 },\n '6': { f1: 770, f2: 1477 },\n '7': { f1: 852, f2: 1209 },\n '8': { f1: 852, f2: 1336 },\n '9': { f1: 852, f2: 1477 },\n '': { f1: 941, f2: 1209 },\n '0': { f1: 941, f2: 1336 },\n '#': { f1: 941, f2: 1477 }\n};\n"]}
1	+ {"version":3,"file":"DTMFToneGenerator.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/DTMFToneGenerator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/*\n Class for playing individual DTMF Tones.\n \n @internal\n /\nexport class Tone {\n private context: AudioContext;\n private frequency1: number;\n private frequency2: number;\n private oscillatorNode1?: OscillatorNode;\n private oscillatorNode2?: OscillatorNode;\n private isPlaying: boolean = false;\n\n constructor(context: AudioContext, frequency1: number, frequency2: number) {\n this.context = context;\n this.frequency1 = frequency1;\n this.frequency2 = frequency2;\n }\n\n /\n Function to play the tone. will create new ocillators because they are one use objects so we need to make\n * new ones every time we play a tone.\n /\n public play = (): void => {\n if (this.isPlaying) {\n return;\n }\n const gainNode = this.context.createGain();\n gainNode.gain.value = 0.1;\n gainNode.connect(this.context.destination);\n\n this.oscillatorNode1 = this.context.createOscillator();\n this.oscillatorNode1.frequency.value = this.frequency1;\n this.oscillatorNode1.connect(gainNode);\n\n this.oscillatorNode2 = this.context.createOscillator();\n this.oscillatorNode2.frequency.value = this.frequency2;\n this.oscillatorNode2.connect(gainNode);\n this.oscillatorNode1.start();\n this.oscillatorNode2.start();\n this.isPlaying = true;\n };\n\n /\n Function to stop the tone.\n /\n public stop = (): void => {\n if (this.oscillatorNode1 && this.oscillatorNode2) {\n this.oscillatorNode1.stop();\n this.oscillatorNode2.stop();\n this.oscillatorNode1.disconnect();\n this.oscillatorNode2.disconnect();\n this.isPlaying = false;\n }\n };\n}\n\n/\n Mapping of the different dtmf frequencies that are needed for the creation of sound that\n * matches the dtmf tones.\n \n @internal\n /\nexport const dtmfFrequencies = {\n '1': { f1: 697, f2: 1209 },\n '2': { f1: 697, f2: 1336 },\n '3': { f1: 697, f2: 1477 },\n '4': { f1: 770, f2: 1209 },\n '5': { f1: 770, f2: 1336 },\n '6': { f1: 770, f2: 1477 },\n '7': { f1: 852, f2: 1209 },\n '8': { f1: 852, f2: 1336 },\n '9': { f1: 852, f2: 1477 },\n '': { f1: 941, f2: 1209 },\n '0': { f1: 941, f2: 1336 },\n '#': { f1: 941, f2: 1477 }\n};\n\n/*\n Key of the mapping of the different dtmf frequencies that are needed for the creation of sound that\n * matches the dtmf tones.\n \n @internal\n */\nexport type DtmfFrequenciesKeys = keyof typeof dtmfFrequencies;\n"]}

package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) /\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\nimport { dtmfFrequencies, Tone } from './DTMFToneGenerator';\n\n/\n Strings of {@link Dialpad} that can be overridden.\n \n @public\n /\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/\n Styles for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/\n DTMF tone for PSTN calls.\n \n @public\n /\nexport type DtmfTone =\n \| 'A'\n \| 'B'\n \| 'C'\n \| 'D'\n \| 'Flash'\n \| 'Num0'\n \| 'Num1'\n \| 'Num2'\n \| 'Num3'\n \| 'Num4'\n \| 'Num5'\n \| 'Num6'\n \| 'Num7'\n \| 'Num8'\n \| 'Num9'\n \| 'Pound'\n \| 'Star';\n\n/\n Modes of the dialpad component.\n * @public\n /\nexport type DialpadMode = 'dtmf' \| 'dialer';\n\n/\n Modes of how the longpress handlers can be tiggered.\n * @public\n /\nexport type LongPressTrigger = 'mouseAndTouch' \| 'touch';\n\n/\n Props for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /\n function to send dtmf tones on button click\n /\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /\n Callback for dialpad button behavior\n /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /\n set dialpad textfield content\n /\n textFieldValue?: string;\n /\n on change function for text field, provides an unformatted plain text\n /\n onChange?: (input: string) => void;\n /\n flag to determine when to show/hide delete button, default true\n /\n showDeleteButton?: boolean;\n /\n Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n /\n longPressTrigger?: LongPressTrigger;\n /\n Styles for customizing the dialpad component\n /\n styles?: DialpadStyles;\n /\n Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n /\n disableDtmfPlayback?: boolean;\n /\n Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n /\n dialpadMode?: DialpadMode;\n}\n\ntype DialpadButtonContent = {\n /* Number displayed on each dialpad button /\n digit: string;\n /* Letters displayed on each dialpad button /\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: string;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }),\n [digit, index, longPressTrigger, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (\n e.key === 'Tab' \|\|\n e.key === 'ArrowLeft' \|\|\n e.key === 'ArrowRight' \|\|\n e.key === 'ArrowUp' \|\|\n e.key === 'ArrowDown'\n ) {\n dtmfToneSound.current.stop();\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /* Pass in custom content to dialpad textfield /\n textFieldValue?: string;\n /* on change function for text field, provides an unformatted plain text /\n onChange?: (input: string) => void;\n /* boolean input to determine when to show/hide delete button, default true /\n showDeleteButton?: boolean;\n /* boolean input to determine if dialpad is in mobile view, default false /\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer'\n } = props;\n\n const dtmfToneAudioContext = useRef(new AudioContext());\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <Stack\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n horizontalAlign={'center'}\n >\n {dialpadMode === 'dialer' && (\n <TextField\n styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n )}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{ childrenGap: '1rem' }}>\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndexrows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n /\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n longPressTrigger={longPressTrigger}\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n disableDtmfPlayback={disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </Stack>\n );\n};\n\n/*\n A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n \n @public\n /\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n / @conditional-compile-remove(dialpad) / / @conditional-compile-remove(PSTN-calls) /\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n / @conditional-compile-remove(dialpad) / / @conditional-compile-remove(PSTN-calls) /\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}
1	+ {"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) /\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/\n Strings of {@link Dialpad} that can be overridden.\n \n @public\n /\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/\n Styles for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/\n DTMF tone for PSTN calls.\n \n @public\n /\nexport type DtmfTone =\n \| 'A'\n \| 'B'\n \| 'C'\n \| 'D'\n \| 'Flash'\n \| 'Num0'\n \| 'Num1'\n \| 'Num2'\n \| 'Num3'\n \| 'Num4'\n \| 'Num5'\n \| 'Num6'\n \| 'Num7'\n \| 'Num8'\n \| 'Num9'\n \| 'Pound'\n \| 'Star';\n\n/\n Modes of the dialpad component.\n * @public\n /\nexport type DialpadMode = 'dtmf' \| 'dialer';\n\n/\n Modes of how the longpress handlers can be tiggered.\n * @public\n /\nexport type LongPressTrigger = 'mouseAndTouch' \| 'touch';\n\n/\n Props for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /\n function to send dtmf tones on button click\n /\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /\n Callback for dialpad button behavior\n /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /\n set dialpad textfield content\n /\n textFieldValue?: string;\n /\n on change function for text field, provides an unformatted plain text\n /\n onChange?: (input: string) => void;\n /\n flag to determine when to show/hide delete button, default true\n /\n showDeleteButton?: boolean;\n /\n Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n /\n longPressTrigger?: LongPressTrigger;\n /\n Styles for customizing the dialpad component\n /\n styles?: DialpadStyles;\n /\n Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n /\n disableDtmfPlayback?: boolean;\n /\n Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n /\n dialpadMode?: DialpadMode;\n}\n\ntype DialpadButtonContent = {\n /* Number displayed on each dialpad button /\n digit: DtmfFrequenciesKeys;\n /* Letters displayed on each dialpad button /\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: DtmfFrequenciesKeys;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }),\n [digit, index, longPressTrigger, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (\n e.key === 'Tab' \|\|\n e.key === 'ArrowLeft' \|\|\n e.key === 'ArrowRight' \|\|\n e.key === 'ArrowUp' \|\|\n e.key === 'ArrowDown'\n ) {\n dtmfToneSound.current.stop();\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /* Pass in custom content to dialpad textfield /\n textFieldValue?: string;\n /* on change function for text field, provides an unformatted plain text /\n onChange?: (input: string) => void;\n /* boolean input to determine when to show/hide delete button, default true /\n showDeleteButton?: boolean;\n /* boolean input to determine if dialpad is in mobile view, default false /\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer'\n } = props;\n\n const dtmfToneAudioContext = useRef(new AudioContext());\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <Stack\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n horizontalAlign={'center'}\n >\n {dialpadMode === 'dialer' && (\n <TextField\n styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n )}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{ childrenGap: '1rem' }}>\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndexrows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n /\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n longPressTrigger={longPressTrigger}\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n disableDtmfPlayback={disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </Stack>\n );\n};\n\n/*\n A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n \n @public\n /\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n / @conditional-compile-remove(dialpad) / / @conditional-compile-remove(PSTN-calls) /\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n / @conditional-compile-remove(dialpad) / / @conditional-compile-remove(PSTN-calls) /\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}

package/dist/dist-esm/react-components/src/components/LocalVideoTile.js CHANGED Viewed

@@ -13,11 +13,11 @@ import { useLocalVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoS
 import { VideoTile } from './VideoTile';
 /* @conditional-compile-remove(spotlight) */
 import { useTheme } from '../theming';
-/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(spotlight) */
 import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';
-/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(spotlight) */
 import { _DrawerMenu } from './Drawer';
-/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(spotlight) */
 import { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';
 /**
  * A memoized version of VideoTile for rendering local participant.

package/dist/dist-esm/react-components/src/components/LocalVideoTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(spotlight) /\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\n/ @conditional-compile-remove(spotlight) /\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\n/ @conditional-compile-remove(reaction) /\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n/ @conditional-compile-remove(raise-hand) /\nimport { RaisedHand } from '../types';\n/ @conditional-compile-remove(spotlight) /\nimport { useTheme } from '../theming';\n/ @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '../types/ReactionTypes';\n/ @conditional-compile-remove(reaction) /\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\n/ @conditional-compile-remove(reaction) /\nimport { VideoGalleryStrings } from './VideoGallery';\n/ @conditional-compile-remove(reaction) /\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\n/ @conditional-compile-remove(reaction) /\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\n/\n A memoized version of VideoTile for rendering local participant.\n \n @internal\n /\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n / @conditional-compile-remove(raise-hand) /\n raisedHand?: RaisedHand;\n / @conditional-compile-remove(reaction) /\n reaction?: Reaction;\n / @conditional-compile-remove(spotlight) /\n spotlightedParticipantUserIds?: string[];\n / @conditional-compile-remove(spotlight) /\n isSpotlighted?: boolean;\n / @conditional-compile-remove(spotlight) /\n onStartSpotlight?: () => void;\n / @conditional-compile-remove(spotlight) /\n onStopSpotlight?: () => void;\n / @conditional-compile-remove(spotlight) /\n maxParticipantsToSpotlight?: number;\n / @conditional-compile-remove(spotlight) /\n menuKind?: 'contextual' \| 'drawer';\n / @conditional-compile-remove(spotlight) /\n drawerMenuHostId?: string;\n / @conditional-compile-remove(spotlight) /\n strings?: VideoGalleryStrings;\n / @conditional-compile-remove(reaction) /\n reactionResources?: ReactionResources;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n / @conditional-compile-remove(raise-hand) /\n raisedHand,\n / @conditional-compile-remove(reaction) /\n reaction,\n / @conditional-compile-remove(spotlight) /\n isSpotlighted,\n / @conditional-compile-remove(spotlight) /\n spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) /\n onStartSpotlight,\n / @conditional-compile-remove(spotlight) /\n onStopSpotlight,\n / @conditional-compile-remove(spotlight) /\n maxParticipantsToSpotlight,\n / @conditional-compile-remove(spotlight) /\n menuKind,\n / @conditional-compile-remove(spotlight) /\n strings,\n / @conditional-compile-remove(reaction) /\n reactionResources\n } = props;\n\n / @conditional-compile-remove(spotlight) /\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n / @conditional-compile-remove(spotlight) /\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n / @conditional-compile-remove(spotlight) /\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n / @conditional-compile-remove(spotlight) /\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [\n / @conditional-compile-remove(spotlight) / contextualMenuProps,\n / @conditional-compile-remove(spotlight) / menuKind\n ]);\n\n const videoTileStyles = useMemo(() => {\n / @conditional-compile-remove(spotlight) /\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / theme.palette.neutralTertiaryAlt,\n styles\n ]);\n\n / @conditional-compile-remove(spotlight) /\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n / @conditional-compile-remove(spotlight) /\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview\n ]);\n\n return (\n <Stack\n className={mergeStyles({ width: '100%', height: '100%' })}\n / @conditional-compile-remove(spotlight) / onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n / @conditional-compile-remove(raise-hand) /\n raisedHand={raisedHand}\n / @conditional-compile-remove(reaction) /\n reaction={reaction}\n / @conditional-compile-remove(spotlight) /\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n / @conditional-compile-remove(spotlight) /\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n / @conditional-compile-remove(reaction) /\n reactionResources={reactionResources}\n >\n {\n / @conditional-compile-remove(spotlight) / drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )\n }\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\n/ @conditional-compile-remove(spotlight) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1	+ {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(spotlight) /\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\n/ @conditional-compile-remove(spotlight) /\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\n/ @conditional-compile-remove(reaction) /\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n/ @conditional-compile-remove(raise-hand) /\nimport { RaisedHand } from '../types';\n/ @conditional-compile-remove(spotlight) /\nimport { useTheme } from '../theming';\n/ @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '../types/ReactionTypes';\n/ @conditional-compile-remove(spotlight) /\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\n/ @conditional-compile-remove(spotlight) /\nimport { VideoGalleryStrings } from './VideoGallery';\n/ @conditional-compile-remove(spotlight) /\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\n/ @conditional-compile-remove(spotlight) /\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\n/\n A memoized version of VideoTile for rendering local participant.\n \n @internal\n /\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n / @conditional-compile-remove(raise-hand) /\n raisedHand?: RaisedHand;\n / @conditional-compile-remove(reaction) /\n reaction?: Reaction;\n / @conditional-compile-remove(spotlight) /\n spotlightedParticipantUserIds?: string[];\n / @conditional-compile-remove(spotlight) /\n isSpotlighted?: boolean;\n / @conditional-compile-remove(spotlight) /\n onStartSpotlight?: () => void;\n / @conditional-compile-remove(spotlight) /\n onStopSpotlight?: () => void;\n / @conditional-compile-remove(spotlight) /\n maxParticipantsToSpotlight?: number;\n / @conditional-compile-remove(spotlight) /\n menuKind?: 'contextual' \| 'drawer';\n / @conditional-compile-remove(spotlight) /\n drawerMenuHostId?: string;\n / @conditional-compile-remove(spotlight) /\n strings?: VideoGalleryStrings;\n / @conditional-compile-remove(reaction) /\n reactionResources?: ReactionResources;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n / @conditional-compile-remove(raise-hand) /\n raisedHand,\n / @conditional-compile-remove(reaction) /\n reaction,\n / @conditional-compile-remove(spotlight) /\n isSpotlighted,\n / @conditional-compile-remove(spotlight) /\n spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) /\n onStartSpotlight,\n / @conditional-compile-remove(spotlight) /\n onStopSpotlight,\n / @conditional-compile-remove(spotlight) /\n maxParticipantsToSpotlight,\n / @conditional-compile-remove(spotlight) /\n menuKind,\n / @conditional-compile-remove(spotlight) /\n strings,\n / @conditional-compile-remove(reaction) /\n reactionResources\n } = props;\n\n / @conditional-compile-remove(spotlight) /\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n / @conditional-compile-remove(spotlight) /\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n / @conditional-compile-remove(spotlight) /\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n / @conditional-compile-remove(spotlight) /\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [\n / @conditional-compile-remove(spotlight) / contextualMenuProps,\n / @conditional-compile-remove(spotlight) / menuKind\n ]);\n\n const videoTileStyles = useMemo(() => {\n / @conditional-compile-remove(spotlight) /\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / theme.palette.neutralTertiaryAlt,\n styles\n ]);\n\n / @conditional-compile-remove(spotlight) /\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n / @conditional-compile-remove(spotlight) /\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview\n ]);\n\n return (\n <Stack\n className={mergeStyles({ width: '100%', height: '100%' })}\n / @conditional-compile-remove(spotlight) / onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n / @conditional-compile-remove(raise-hand) /\n raisedHand={raisedHand}\n / @conditional-compile-remove(reaction) /\n reaction={reaction}\n / @conditional-compile-remove(spotlight) /\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n / @conditional-compile-remove(spotlight) /\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n / @conditional-compile-remove(reaction) /\n reactionResources={reactionResources}\n >\n {\n / @conditional-compile-remove(spotlight) / drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )\n }\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\n/ @conditional-compile-remove(spotlight) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * Props for {@link MessageStatusIndicatorInternal}.
+ *
+ * @internal
+ */
+export interface MessageStatusIconProps {
+    shouldAnnounce: boolean;
+    iconName: string;
+    iconClassName: string;
+    ariaLabel?: string;
+}
+/**
+ * Component to display message status icon
+ *
+ * @internal
+ */
+export declare const MessageStatusIcon: (props: MessageStatusIconProps) => JSX.Element;
+//# sourceMappingURL=MessageStatusIcon.d.ts.map

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js ADDED Viewed

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Icon } from '@fluentui/react';
+import React from 'react';
+import LiveMessage from './Announcer/LiveMessage';
+/**
+ * Component to display message status icon
+ *
+ * @internal
+ */
+export const MessageStatusIcon = (props) => {
+    const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;
+    return (React.createElement(React.Fragment, null,
+        ariaLabel && React.createElement(LiveMessage, { message: ariaLabel, ariaLive: "polite" }),
+        React.createElement("div", {
+            // make icon accessible
+            tabIndex: 0 },
+            React.createElement(Icon, { role: 'status', "aria-live": shouldAnnounce ? 'polite' : 'off', "data-ui-id": 'chat-composite-message-status-icon', "aria-label": ariaLabel, iconName: iconName, className: iconClassName }))));
+};
+//# sourceMappingURL=MessageStatusIcon.js.map

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,OAAO,CACL;QAEG,SAAS,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACnE;YACE,uBAAuB;YACvB,QAAQ,EAAE,CAAC;YAEX,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,eAKH,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,gBAChC,oCAAoC,gBACpC,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,aAAa,GACxB,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/**\n * Props for {@link MessageStatusIndicatorInternal}.\n *\n * @internal\n */\nexport interface MessageStatusIconProps {\n shouldAnnounce: boolean;\n iconName: string;\n iconClassName: string;\n ariaLabel?: string;\n}\n\n/**\n * Component to display message status icon\n *\n * @internal\n */\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;\n\n return (\n <>\n {/* live message is used here so that aria labels are announced on mobile */}\n {ariaLabel && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\n <div\n // make icon accessible\n tabIndex={0}\n >\n <Icon\n role={'status'}\n // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n // it has aria-live prop set to `polite` by default.\n // By setting it to `off` value, we disable live updates when they aren't needed\n // and keep it available in the accessibility tree\n aria-live={shouldAnnounce ? 'polite' : 'off'}\n data-ui-id={'chat-composite-message-status-icon'}\n aria-label={ariaLabel}\n iconName={iconName}\n className={iconClassName}\n />\n </div>\n </>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js CHANGED Viewed

@@ -1,13 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { Icon, mergeStyles, TooltipHost } from '@fluentui/react';
-import { _formatString } from "../../../acs-ui-common/src";
-import React, { useState } from 'react';
-import { useLocale } from '../localization';
-import { useTheme } from '../theming';
-import { isDarkThemed } from '../theming/themeUtils';
-import { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';
-import LiveMessage from './Announcer/LiveMessage';
+import React from 'react';
+import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 /**
  * Component to display the status of a sent message.
  *
@@ -16,61 +10,7 @@ import LiveMessage from './Announcer/LiveMessage';
  * @public
  */
 export const MessageStatusIndicator = (props) => {
-    const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount } = props;
-    const localeStrings = useLocale().strings.messageStatusIndicator;
-    const [isTooltipToggled, setIsTooltipToggled] = useState(false);
-    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
-    // Place callout with no gap between it and the button.
-    const calloutProps = {
-        gapSpace: 0,
-        styles: calloutStyle,
-        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
-    };
-    switch (status) {
-        case 'failed':
-            return (React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                strings.failedToSendAriaLabel && (
-                // live message is used here and in the following tooltips so that aria labels are announced on mobile
-                React.createElement(LiveMessage, { message: strings.failedToSendAriaLabel, ariaLive: "polite" })),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.failedToSendAriaLabel, iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root) })));
-        case 'sending':
-            return (React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                strings.sendingAriaLabel && React.createElement(LiveMessage, { message: strings.sendingAriaLabel, ariaLive: "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.sendingAriaLabel, iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
-        case 'seen':
-            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content:
-                // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
-                // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back
-                // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
-                readCount === 0 ||
-                    (remoteParticipantsCount && remoteParticipantsCount <= 1) ||
-                    !readCount ||
-                    !remoteParticipantsCount ||
-                    strings.readByTooltipText === undefined
-                    ? strings.seenTooltipText
-                    : _formatString(strings.readByTooltipText, {
-                        messageThreadReadCount: `${readCount}`,
-                        remoteParticipantsCount: `${remoteParticipantsCount}`
-                    }), onTooltipToggle: () => {
-                    if (onToggleToolTip) {
-                        onToggleToolTip(!isTooltipToggled);
-                        setIsTooltipToggled(!isTooltipToggled);
-                    }
-                } },
-                strings.seenAriaLabel && React.createElement(LiveMessage, { message: strings.seenAriaLabel, ariaLive: "polite" }),
-                React.createElement(Icon, { "data-ui-id": "chat-composite-message-status-icon", role: "status", "aria-label": strings.seenAriaLabel, iconName: "MessageSeen", className: mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
-        case 'delivered':
-            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
-                strings.deliveredAriaLabel && React.createElement(LiveMessage, { message: strings.deliveredAriaLabel, ariaLive: "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.deliveredAriaLabel, iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
-        default:
-            return React.createElement(React.Fragment, null);
-    }
+    const internalProps = Object.assign(Object.assign({}, props), { shouldAnnounce: true });
+    return React.createElement(MessageStatusIndicatorInternal, Object.assign({}, internalProps));
 };
-// The TooltipHost root uses display: inline by default.
-// To prevent sizing issues or tooltip positioning issues, we override to inline-block.
-// For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = { root: { display: 'inline-block' } };
 //# sourceMappingURL=MessageStatusIndicator.js.map

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, Icon, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport {\n MessageStatusIndicatorErrorIconStyle,\n MessageStatusIndicatorIconStyle\n} from './styles/MessageStatusIndicator.styles';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Strings of {@link MessageStatusIndicator} that can be overridden.\n \n @public\n /\nexport interface MessageStatusIndicatorStrings {\n /* Aria label to notify user when their message has been delivered. /\n deliveredAriaLabel?: string;\n /* Text to display in the delivered message icon tooltip. /\n deliveredTooltipText: string;\n /* Aria label to notify user when their message has been seen by others. /\n seenAriaLabel?: string;\n /* Text to display in the seen message icon tooltip if read number/ participant number is 1 /\n seenTooltipText: string;\n /* Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)/\n readByTooltipText?: string;\n /* Aria label to notify user when their message is being sent. /\n sendingAriaLabel?: string;\n /* Text to display in the sending message icon tooltip. /\n sendingTooltipText: string;\n /* Aria label to notify user when their message has failed to be sent. /\n failedToSendAriaLabel?: string;\n /* Text to display in the failed message icon tooltip. /\n failedToSendTooltipText: string;\n}\n\n/\n Props for {@link MessageStatusIndicator}.\n \n @public\n /\nexport interface MessageStatusIndicatorProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\n Allows users to pass an object containing custom CSS styles.\n * @Example\n * ```\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n /\n Optional strings to override in component\n /\n strings?: MessageStatusIndicatorStrings;\n}\n\n/\n Component to display the status of a sent message.\n \n Adds an icon and tooltip corresponding to the message status.\n \n @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount } = props;\n const localeStrings = useLocale().strings.messageStatusIndicator;\n const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n const strings = { ...localeStrings, ...props.strings };\n const theme = useTheme();\n\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n\n switch (status) {\n case 'failed':\n return (\n <TooltipHost\n content={strings.failedToSendTooltipText}\n data-ui-id=\"chat-composite-message-tooltip\"\n calloutProps={{ ...calloutProps }}\n styles={hostStyles}\n >\n {strings.failedToSendAriaLabel && (\n // live message is used here and in the following tooltips so that aria labels are announced on mobile\n <LiveMessage message={strings.failedToSendAriaLabel} ariaLive=\"polite\" />\n )}\n <Icon\n role=\"status\"\n data-ui-id=\"chat-composite-message-status-icon\"\n aria-label={strings.failedToSendAriaLabel}\n iconName=\"MessageFailed\"\n className={mergeStyles(\n MessageStatusIndicatorErrorIconStyle,\n { color: theme.palette.redDark },\n styles?.root\n )}\n />\n </TooltipHost>\n );\n case 'sending':\n return (\n <TooltipHost\n content={strings.sendingTooltipText}\n data-ui-id=\"chat-composite-message-tooltip\"\n calloutProps={{ ...calloutProps }}\n styles={hostStyles}\n >\n {strings.sendingAriaLabel && <LiveMessage message={strings.sendingAriaLabel} ariaLive=\"polite\" />}\n\n <Icon\n role=\"status\"\n data-ui-id=\"chat-composite-message-status-icon\"\n aria-label={strings.sendingAriaLabel}\n iconName=\"MessageSending\"\n className={mergeStyles(\n MessageStatusIndicatorIconStyle,\n { color: theme.palette.themePrimary },\n styles?.root\n )}\n />\n </TooltipHost>\n );\n case 'seen':\n return (\n <TooltipHost\n calloutProps={{ ...calloutProps }}\n data-ui-id=\"chat-composite-message-tooltip\"\n styles={hostStyles}\n content={\n // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back\n // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n readCount === 0 \|\|\n (remoteParticipantsCount && remoteParticipantsCount <= 1) \|\|\n !readCount \|\|\n !remoteParticipantsCount \|\|\n strings.readByTooltipText === undefined\n ? strings.seenTooltipText\n : _formatString(strings.readByTooltipText, {\n messageThreadReadCount: `${readCount}`,\n remoteParticipantsCount: `${remoteParticipantsCount}`\n })\n }\n onTooltipToggle={() => {\n if (onToggleToolTip) {\n onToggleToolTip(!isTooltipToggled);\n setIsTooltipToggled(!isTooltipToggled);\n }\n }}\n >\n {strings.seenAriaLabel && <LiveMessage message={strings.seenAriaLabel} ariaLive=\"polite\" />}\n\n <Icon\n data-ui-id=\"chat-composite-message-status-icon\"\n role=\"status\"\n aria-label={strings.seenAriaLabel}\n iconName=\"MessageSeen\"\n className={mergeStyles({ color: theme.palette.themePrimary }, styles?.root)}\n />\n </TooltipHost>\n );\n case 'delivered':\n return (\n <TooltipHost\n calloutProps={{ ...calloutProps }}\n content={strings.deliveredTooltipText}\n data-ui-id=\"chat-composite-message-tooltip\"\n styles={hostStyles}\n >\n {strings.deliveredAriaLabel && <LiveMessage message={strings.deliveredAriaLabel} ariaLive=\"polite\" />}\n <Icon\n role=\"status\"\n data-ui-id=\"chat-composite-message-status-icon\"\n aria-label={strings.deliveredAriaLabel}\n iconName=\"MessageDelivered\"\n className={mergeStyles(\n MessageStatusIndicatorIconStyle,\n { color: theme.palette.themePrimary },\n styles?.root\n )}\n />\n </TooltipHost>\n );\n default:\n return <></>;\n }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n"]}
1	+ {"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,8BAA8B,EAAuC,MAAM,kCAAkC,CAAC;AAsDvH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,aAAa,mCACd,KAAK,KACR,cAAc,EAAE,IAAI,GACrB,CAAC;IAEF,OAAO,oBAAC,8BAA8B,oBAAK,aAAa,EAAmC,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorInternal, MessageStatusIndicatorInternalProps } from './MessageStatusIndicatorInternal';\n\n/*\n Strings of {@link MessageStatusIndicator} that can be overridden.\n \n @public\n /\nexport interface MessageStatusIndicatorStrings {\n /* Aria label to notify user when their message has been delivered. /\n deliveredAriaLabel?: string;\n /* Text to display in the delivered message icon tooltip. /\n deliveredTooltipText: string;\n /* Aria label to notify user when their message has been seen by others. /\n seenAriaLabel?: string;\n /* Text to display in the seen message icon tooltip if read number/ participant number is 1 /\n seenTooltipText: string;\n /* Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)/\n readByTooltipText?: string;\n /* Aria label to notify user when their message is being sent. /\n sendingAriaLabel?: string;\n /* Text to display in the sending message icon tooltip. /\n sendingTooltipText: string;\n /* Aria label to notify user when their message has failed to be sent. /\n failedToSendAriaLabel?: string;\n /* Text to display in the failed message icon tooltip. /\n failedToSendTooltipText: string;\n}\n\n/\n Props for {@link MessageStatusIndicator}.\n \n @public\n /\nexport interface MessageStatusIndicatorProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\n Allows users to pass an object containing custom CSS styles.\n * @Example\n * ```\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n /\n Optional strings to override in component\n /\n strings?: MessageStatusIndicatorStrings;\n}\n\n/\n Component to display the status of a sent message.\n \n Adds an icon and tooltip corresponding to the message status.\n \n @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n const internalProps: MessageStatusIndicatorInternalProps = {\n ...props,\n shouldAnnounce: true\n };\n\n return <MessageStatusIndicatorInternal {...internalProps}></MessageStatusIndicatorInternal>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicatorInternal.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { MessageStatus } from "../../../acs-ui-common/src";
+import { BaseCustomStyles } from '../types';
+import { MessageStatusIndicatorStrings } from './MessageStatusIndicator';
+/**
+ * Props for {@link MessageStatusIndicatorInternal}.
+ *
+ * @internal
+ */
+export interface MessageStatusIndicatorInternalProps {
+    /** Message status that determines the icon to display. */
+    status?: MessageStatus;
+    readCount?: number;
+    onToggleToolTip?: (isToggled: boolean) => void;
+    /** number of participants not including myself */
+    remoteParticipantsCount?: number;
+    /**
+     * Allows users to pass an object containing custom CSS styles.
+     * @Example
+     * ```
+     * <MessageStatus styles={{ root: { background: 'blue' } }} />
+     * ```
+     */
+    styles?: BaseCustomStyles;
+    /**
+     * Optional strings to override in component
+     */
+    strings?: MessageStatusIndicatorStrings;
+    /**
+     * Optional call back to provide LiveMessage component for accessibility
+     */
+    shouldAnnounce: boolean;
+}
+/**
+ * Component to display the status of a sent message.
+ *
+ * Adds an icon and tooltip corresponding to the message status.
+ *
+ * @internal
+ */
+export declare const MessageStatusIndicatorInternal: (props: MessageStatusIndicatorInternalProps) => JSX.Element;
+//# sourceMappingURL=MessageStatusIndicatorInternal.d.ts.map