npm - @azure/communication-react - Versions diffs - 1.12.0 → 1.12.1-alpha-202401200012 - Mend

@azure/communication-react 1.12.0 → 1.12.1-alpha-202401200012

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 (1077) hide show

package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PeoplePaneContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/PeoplePaneContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, Stack } from '@fluentui/react';\nimport { ParticipantList, ParticipantListParticipant, ParticipantListProps, ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { ParticipantListWithHeading } from '../common/ParticipantContainer';\nimport { peoplePaneContainerTokens } from '../common/styles/ParticipantContainer.styles';\nimport { participantListContainerStyles, peoplePaneContainerStyle } from './styles/PeoplePaneContent.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\nimport { CommonCallAdapter } from '../CallComposite';\nimport { AddPeopleButton } from './AddPeopleButton';\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\nimport { useLocale } from '../localization';\n\n/*\n @private\n /\nexport const PeoplePaneContent = (props: {\n inviteLink?: string;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n setDrawerMenuItems: (_DrawerMenuItemProps) => void;\n mobileView?: boolean;\n}): JSX.Element => {\n const {\n inviteLink,\n onFetchParticipantMenuItems,\n setDrawerMenuItems\n } = props;\n const adapter = useAdapter();\n const localeStrings = useLocale();\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n const getStrings = () => {\n return localeStrings.strings.callWithChat;\n };\n const strings = getStrings();\n const removeParticipantFromCall = useCallback(async (participantId: string): Promise<void> => {\n await adapter.removeParticipant(participantId);\n }, [adapter]);\n const participantListDefaultProps = usePropsFor(ParticipantList);\n const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline(adapter);\n const setDrawerMenuItemsForParticipant: (participant?: ParticipantListParticipant) => void = useMemo(() => {\n return (participant?: ParticipantListParticipant) => {\n if (participant) {\n let contextualMenuItems: IContextualMenuItem[] = createDefaultContextualMenuItems(participant, strings, removeButtonAllowed && participant.isRemovable ? participantListDefaultProps.onRemoveParticipant : undefined, participantListDefaultProps.myUserId);\n if (onFetchParticipantMenuItems) {\n contextualMenuItems = onFetchParticipantMenuItems(participant.userId, participantListDefaultProps.myUserId, contextualMenuItems);\n }\n const drawerMenuItems = contextualMenuItems.map((contextualMenu: IContextualMenuItem) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([])));\n setDrawerMenuItems(drawerMenuItems);\n }\n };\n }, [strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId, removeButtonAllowed, onFetchParticipantMenuItems, setDrawerMenuItems]);\n const participantListProps: ParticipantListProps = useMemo(() => {\n const onRemoveAParticipant = async (participantId: string): Promise<void> => removeParticipantFromCall(participantId);\n return {\n ...participantListDefaultProps,\n // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked\n onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant,\n // We want the drawer menu items to appear when participants in ParticipantList are clicked\n onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined\n };\n }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, removeParticipantFromCall]);\n const participantList = <ParticipantListWithHeading isMobile={props.mobileView} participantListProps={participantListProps} onFetchAvatarPersonaData={props.onFetchAvatarPersonaData} onFetchParticipantMenuItems={props.mobileView ? undefined : props.onFetchParticipantMenuItems} title={strings.peoplePaneSubTitle} />;\n if (props.mobileView) {\n return <Stack verticalFill styles={peoplePaneContainerStyle} tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\">\n <Stack.Item grow styles={participantListContainerStyles}>\n {participantList}\n </Stack.Item>\n\n <AddPeopleButton inviteLink={inviteLink} mobileView={props.mobileView} participantList={participantList} strings={strings} />\n </Stack>;\n }\n return <AddPeopleButton inviteLink={inviteLink} mobileView={props.mobileView} participantList={participantList} strings={strings} />;\n};\n\n/\n Create default contextual menu items for particant\n * @param participant - participant to create contextual menu items for\n * @param strings - localized strings for menu item text\n * @param onRemoveParticipant - callback to remove participant\n * @param localParticipantUserId - Local participant user id\n * @returns - IContextualMenuItem[]\n /\nconst createDefaultContextualMenuItems = (participant: ParticipantListParticipant, strings: CallWithChatCompositeStrings, onRemoveParticipant?: (userId: string) => Promise<void>, localParticipantUserId?: string): IContextualMenuItem[] => {\n const menuItems: IContextualMenuItem[] = [];\n if (onRemoveParticipant && participant?.userId !== localParticipantUserId) {\n menuItems.push({\n key: 'remove',\n text: strings.removeMenuLabel,\n onClick: () => {\n if (participant?.userId) {\n onRemoveParticipant?.(participant?.userId);\n }\n },\n iconProps: {\n iconName: 'UserRemove'\n }\n });\n }\n return menuItems;\n};\n\n/\n @private\n /\nconst hasRemoveParticipantsPermissionTrampoline = (adapter: CommonCallAdapter): boolean => {\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n / @conditional-compile-remove(rooms) /\n const canRemove = role === 'Presenter' \|\| role === 'Unknown' \|\| role === undefined;\n / @conditional-compile-remove(rooms) */\n return canRemove;\n // Return true if stable.\n return true;\n};"]}
1	+ {"version":3,"file":"PeoplePaneContent.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/PeoplePaneContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, Stack } from '@fluentui/react';\nimport {\n ParticipantList,\n ParticipantListParticipant,\n ParticipantListProps,\n ParticipantMenuItemsCallback,\n _DrawerMenuItemProps\n} from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { ParticipantListWithHeading } from '../common/ParticipantContainer';\nimport { peoplePaneContainerTokens } from '../common/styles/ParticipantContainer.styles';\nimport { participantListContainerStyles, peoplePaneContainerStyle } from './styles/PeoplePaneContent.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\nimport { CallCompositeStrings } from '../CallComposite';\nimport { CommonCallAdapter } from '../CallComposite';\nimport { AddPeopleButton } from './AddPeopleButton';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\nimport { useLocale } from '../localization';\n\n/\n @private\n /\nexport const PeoplePaneContent = (props: {\n inviteLink?: string;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n setDrawerMenuItems: (_DrawerMenuItemProps) => void;\n mobileView?: boolean;\n}): JSX.Element => {\n const { inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems } = props;\n const adapter = useAdapter();\n const localeStrings = useLocale();\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n const getStrings = () => {\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n return localeStrings.strings.call;\n\n return localeStrings.strings.callWithChat;\n };\n const strings = getStrings();\n\n const removeParticipantFromCall = useCallback(\n async (participantId: string): Promise<void> => {\n await adapter.removeParticipant(participantId);\n },\n [adapter]\n );\n\n / @conditional-compile-remove(PSTN-calls) /\n const addParticipantToCall = useCallback(\n async (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void> => {\n await adapter.addParticipant(participant, options);\n },\n [adapter]\n );\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = adapter.getState().alternateCallerId;\n\n const participantListDefaultProps = usePropsFor(ParticipantList);\n const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline(adapter);\n const setDrawerMenuItemsForParticipant: (participant?: ParticipantListParticipant) => void = useMemo(() => {\n return (participant?: ParticipantListParticipant) => {\n if (participant) {\n let contextualMenuItems: IContextualMenuItem[] = createDefaultContextualMenuItems(\n participant,\n strings,\n removeButtonAllowed && participant.isRemovable ? participantListDefaultProps.onRemoveParticipant : undefined,\n participantListDefaultProps.myUserId\n );\n if (onFetchParticipantMenuItems) {\n contextualMenuItems = onFetchParticipantMenuItems(\n participant.userId,\n participantListDefaultProps.myUserId,\n contextualMenuItems\n );\n }\n const drawerMenuItems = contextualMenuItems.map((contextualMenu: IContextualMenuItem) =>\n convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([]))\n );\n setDrawerMenuItems(drawerMenuItems);\n }\n };\n }, [\n strings,\n participantListDefaultProps.onRemoveParticipant,\n participantListDefaultProps.myUserId,\n removeButtonAllowed,\n onFetchParticipantMenuItems,\n setDrawerMenuItems\n ]);\n\n const participantListProps: ParticipantListProps = useMemo(() => {\n const onRemoveAParticipant = async (participantId: string): Promise<void> =>\n removeParticipantFromCall(participantId);\n return {\n ...participantListDefaultProps,\n // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked\n onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant,\n // We want the drawer menu items to appear when participants in ParticipantList are clicked\n onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined\n };\n }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, removeParticipantFromCall]);\n\n const participantList = (\n <ParticipantListWithHeading\n isMobile={props.mobileView}\n participantListProps={participantListProps}\n onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={props.mobileView ? undefined : props.onFetchParticipantMenuItems}\n title={strings.peoplePaneSubTitle}\n />\n );\n\n if (props.mobileView) {\n return (\n <Stack\n verticalFill\n styles={peoplePaneContainerStyle}\n tokens={peoplePaneContainerTokens}\n data-ui-id=\"people-pane-content\"\n >\n <Stack.Item grow styles={participantListContainerStyles}>\n {participantList}\n </Stack.Item>\n\n <AddPeopleButton\n inviteLink={inviteLink}\n mobileView={props.mobileView}\n participantList={participantList}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n onAddParticipant={addParticipantToCall}\n / @conditional-compile-remove(PSTN-calls) /\n alternateCallerId={alternateCallerId}\n />\n </Stack>\n );\n }\n\n return (\n <AddPeopleButton\n inviteLink={inviteLink}\n mobileView={props.mobileView}\n participantList={participantList}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n onAddParticipant={addParticipantToCall}\n / @conditional-compile-remove(PSTN-calls) /\n alternateCallerId={alternateCallerId}\n />\n );\n};\n\n/\n Create default contextual menu items for particant\n * @param participant - participant to create contextual menu items for\n * @param strings - localized strings for menu item text\n * @param onRemoveParticipant - callback to remove participant\n * @param localParticipantUserId - Local participant user id\n * @returns - IContextualMenuItem[]\n /\nconst createDefaultContextualMenuItems = (\n participant: ParticipantListParticipant,\n strings:\n \| CallWithChatCompositeStrings\n \| / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) / CallCompositeStrings,\n onRemoveParticipant?: (userId: string) => Promise<void>,\n localParticipantUserId?: string\n): IContextualMenuItem[] => {\n const menuItems: IContextualMenuItem[] = [];\n if (onRemoveParticipant && participant?.userId !== localParticipantUserId) {\n menuItems.push({\n key: 'remove',\n text: strings.removeMenuLabel,\n onClick: () => {\n if (participant?.userId) {\n onRemoveParticipant?.(participant?.userId);\n }\n },\n iconProps: {\n iconName: 'UserRemove'\n }\n });\n }\n return menuItems;\n};\n\n/\n @private\n /\nconst hasRemoveParticipantsPermissionTrampoline = (adapter: CommonCallAdapter): boolean => {\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n / @conditional-compile-remove(rooms) /\n const canRemove = role === 'Presenter' \|\| role === 'Unknown' \|\| role === undefined;\n / @conditional-compile-remove(rooms) */\n return canRemove;\n // Return true if stable.\n return true;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/** @private */
+export interface SendDtmfDialpadStrings {
+    dialpadModalAriaLabel: string;
+    dialpadCloseModalButtonAriaLabel: string;
+    placeholderText: string;
+}
+/** @private */
+export interface SendDtmfDialpadProps {
+    isMobile: boolean;
+    showDialpad: boolean;
+    strings: SendDtmfDialpadStrings;
+    onDismissDialpad: () => void;
+}
+/** @private */
+export declare const SendDtmfDialpad: (props: SendDtmfDialpadProps) => JSX.Element;
+//# sourceMappingURL=SendDtmfDialpad.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.js ADDED Viewed

@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useState } from 'react';
+import { useMemo } from 'react';
+import { Dialpad } from "../../../../react-components/src";
+import { _DrawerSurface } from "../../../../react-components/src";
+import { Modal, Stack, useTheme, IconButton } from '@fluentui/react';
+import { themeddialpadModalStyle, themedDialpadStyle } from './SendDtmfDialpad.styles';
+import { usePropsFor } from '../CallComposite/hooks/usePropsFor';
+import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
+/** @private */
+export const SendDtmfDialpad = (props) => {
+    const dialpadProps = usePropsFor(Dialpad);
+    const { strings, isMobile, showDialpad, onDismissDialpad } = props;
+    const theme = useTheme();
+    const onDismissTriggered = () => {
+        onDismissDialpad();
+    };
+    const [textFieldValue, setTextFieldValue] = useState();
+    const onChange = (input) => {
+        if (input.length > 25) {
+            setTextFieldValue(input.slice(1));
+        }
+        else {
+            setTextFieldValue(input);
+        }
+    };
+    const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
+    const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
+    if (isMobile) {
+        return (React.createElement(Stack, null, showDialpad && (React.createElement(Stack, { styles: drawerContainerStyles() },
+            React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onDismissTriggered },
+                React.createElement(Stack, { style: { padding: '1rem' } },
+                    React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
+    }
+    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
+        React.createElement(Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
+            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
+        React.createElement(Stack, { style: { overflow: 'hidden' } },
+            React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
+};
+//# sourceMappingURL=SendDtmfDialpad.js.map

package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SendDtmfDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, IconButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle, themedDialpadStyle } from './SendDtmfDialpad.styles';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/** @private */\nexport interface SendDtmfDialpadStrings {\n dialpadModalAriaLabel: string;\n dialpadCloseModalButtonAriaLabel: string;\n placeholderText: string;\n}\n\n/** @private */\nexport interface SendDtmfDialpadProps {\n isMobile: boolean;\n showDialpad: boolean;\n strings: SendDtmfDialpadStrings;\n onDismissDialpad: () => void;\n}\n\n/** @private */\nexport const SendDtmfDialpad = (props: SendDtmfDialpadProps): JSX.Element => {\n const dialpadProps = usePropsFor(Dialpad);\n\n const { strings, isMobile, showDialpad, onDismissDialpad } = props;\n\n const theme = useTheme();\n\n const onDismissTriggered = (): void => {\n onDismissDialpad();\n };\n\n const [textFieldValue, setTextFieldValue] = useState<string>();\n\n const onChange = (input: string): void => {\n if (input.length > 25) {\n setTextFieldValue(input.slice(1));\n } else {\n setTextFieldValue(input);\n }\n };\n\n const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n if (isMobile) {\n return (\n <Stack>\n {showDialpad && (\n <Stack styles={drawerContainerStyles()}>\n <_DrawerSurface disableMaxHeight={true} onLightDismiss={onDismissTriggered}>\n <Stack style={{ padding: '1rem' }}>\n <Dialpad\n styles={dialpadStyle}\n {...dialpadProps}\n showDeleteButton={false}\n textFieldValue={textFieldValue}\n onChange={onChange}\n strings={strings}\n isMobile={isMobile}\n />\n </Stack>\n </_DrawerSurface>\n </Stack>\n )}\n </Stack>\n );\n }\n\n return (\n <>\n {\n <Modal\n titleAriaId={strings.dialpadModalAriaLabel}\n isOpen={showDialpad}\n onDismiss={onDismissTriggered}\n isBlocking={true}\n styles={dialpadModalStyle}\n >\n <Stack horizontal horizontalAlign=\"end\" verticalAlign=\"center\">\n <IconButton\n iconProps={{ iconName: 'Cancel' }}\n ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n onClick={onDismissTriggered}\n style={{ color: theme.palette.black }}\n />\n </Stack>\n\n <Stack style={{ overflow: 'hidden' }}>\n <Dialpad\n styles={dialpadStyle}\n {...dialpadProps}\n textFieldValue={textFieldValue}\n onChange={onChange}\n showDeleteButton={false}\n strings={strings}\n isMobile={isMobile}\n />\n </Stack>\n </Modal>\n }\n </>\n );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.styles.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { IModalStyles, Theme } from '@fluentui/react';
+import { DialpadStyles } from "../../../../react-components/src";
+/**
+ * @private
+ */
+export declare const themeddialpadModalStyle: (theme: Theme) => Partial<IModalStyles>;
+/**
+ * @private
+ */
+export declare const themedDialpadStyle: (isMobile: boolean, theme: Theme) => Partial<DialpadStyles>;
+//# sourceMappingURL=SendDtmfDialpad.styles.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.styles.js ADDED Viewed

@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+export const themeddialpadModalStyle = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: '1rem'
+    }
+});
+/**
+ * @private
+ */
+export const themedDialpadStyle = (isMobile, theme) => ({
+    root: {
+        padding: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        maxWidth: '100%'
+    },
+    textField: {
+        root: {
+            borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        },
+        field: {
+            backgroundColor: theme.palette.white,
+            fontSize: theme.fonts.large.fontSize,
+            padding: '0 0.5rem ',
+            textAlign: 'center',
+            ':active': {
+                padding: '0 0.5rem'
+            }
+        }
+    },
+    digit: {
+        color: theme.palette.themeDarkAlt
+    }
+});
+//# sourceMappingURL=SendDtmfDialpad.styles.js.map

package/dist/dist-esm/react-composites/src/composites/common/SendDtmfDialpad.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SendDtmfDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IModalStyles, Theme } from '@fluentui/react';\n\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n main: {\n borderRadius: theme.effects.roundedCorner6,\n padding: '1rem'\n }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n root: {\n padding: 0,\n marginLeft: 0,\n marginRight: 0,\n maxWidth: '100%'\n },\n textField: {\n root: {\n borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n },\n field: {\n backgroundColor: theme.palette.white,\n fontSize: theme.fonts.large.fontSize,\n padding: '0 0.5rem ',\n textAlign: 'center',\n ':active': {\n padding: '0 0.5rem'\n }\n }\n },\n digit: {\n color: theme.palette.themeDarkAlt\n }\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js CHANGED Viewed

@@ -18,25 +18,17 @@ export const SidePaneHeader = (props) => {
             marginRight: '0.25rem',
             backgroundColor: theme.semanticColors.bodyBackground
         },
-        icon: {
-            color: theme.palette.neutralSecondary
-        },
-        iconHovered: {
-            color: theme.palette.neutralSecondary
-        },
-        iconPressed: {
-            color: theme.palette.neutralSecondary
-        }
+        icon: { color: theme.palette.neutralSecondary },
+        iconHovered: { color: theme.palette.neutralSecondary },
+        iconPressed: { color: theme.palette.neutralSecondary }
     }), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]);
     if (props.mobileView) {
         return React.createElement(SidePaneMobileHeader, Object.assign({}, props));
     }
-    return React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
+    return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
         React.createElement(Stack.Item, { role: "heading", styles: sidePaneHeaderStyles }, props.headingText),
         React.createElement(Stack.Item, null,
-            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: {
-                    iconName: 'cancel'
-                }, onClick: props.onClose })));
+            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose }))));
 };
 const SidePaneMobileHeader = (props) => {
     const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;
@@ -52,10 +44,10 @@ const SidePaneMobileHeader = (props) => {
             }
         });
     }, [theme]);
-    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: dismissSidePaneButtonAriaLabel, ariaDescription: dismissSidePaneButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
         React.createElement(Stack.Item, { grow: true },
             React.createElement(DefaultButton, { checked: true, styles: mobilePaneButtonStylesThemed }, headingText)),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 //# sourceMappingURL=SidePaneHeader.js.map

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,yCAAmC;AACtD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACnH,OAAO,~~EAAE~~,0BAA0B,~~EAAE~~,sBAAsB,~~EAAE~~,yBAAyB,~~EAAE~~,0BAA0B,~~EAAE~~,MAAM,sBAAsB,CAAC;~~AACjJ~~,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAM9B,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,yBAAyB,GAAG,OAAO,~~CAAC~~,GAAG,EAAE,CAAC,CAAC;~~QAC/C~~,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,gBAAgB;YACzB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;SACrD;QACD,IAAI,EAAE~~;YACJ~~,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;~~SACtC;QACD~~,WAAW,EAAE~~;YACX~~,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;~~SACtC;QACD~~,WAAW,EAAE~~;YACX~~,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;~~SACtC;KACF~~,CAAC,~~EAAE~~,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,~~CAAC~~,CAAC;~~IAC3E~~,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,oBAAC,oBAAoB,oBAAK,KAAK,EAAI,CAAC;IAC7C,CAAC;~~IACD~~,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,MAAM,EAAE,6BAA6B,EAAE,aAAa,EAAC,QAAQ;~~QAClH~~,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAE,oBAAoB,IACpD,KAAK,CAAC,WAAW,CACP;QACb,oBAAC,KAAK,CAAC,IAAI;YACT,oBAAC,gBAAgB,~~IAAC~~,SAAS,EAAE,KAAK,CAAC,8BAA8B,~~EAAE~~,MAAM,EAAE,yBAAyB,~~EAAE~~,SAAS,EAAE~~;oBACjH~~,QAAQ,EAAE,QAAQ~~;iBACnB~~,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,~~GAAI~~,~~CAChB~~,CACP,CAAC;~~AACb~~,CAAC,CAAC;~~AACF~~,MAAM,oBAAoB,GAAG,CAAC,KAK7B,EAAe,EAAE;IAChB,MAAM,~~EACJ~~,WAAW,~~EACX~~,8BAA8B,~~EAC9B~~,oCAAoC,~~EACpC~~,OAAO,~~EACR~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,eAAe,CAAC,sBAAsB,EAAE;YAC7C,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;gBACrC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;aAC1C;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;~~IACZ~~,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI,QAAC,MAAM,EAAE,yBAAyB;~~QAC3D~~,oBAAC,aAAa,~~IAAC~~,SAAS,EAAE,8BAA8B,~~EAAE~~,eAAe,EAAE,oCAAoC,~~EAAE~~,OAAO,EAAE,OAAO,~~EAAE~~,MAAM,EAAE,0BAA0B,~~EAAE~~,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,~~EAAE~~,SAAS,~~SAAiB~~;~~QAC3Q~~,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI;YACd,oBAAC,aAAa,IAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,4BAA4B,IAC/D,WAAW,CACE,CACL;QAEb,oBAAC,aAAa,~~IAAC~~,MAAM,EAAE,0BAA0B,~~EAAE~~,UAAU,EAAE,IAAI,~~EAAE~~,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,~~GAAkB~~,~~CACzJ~~,CAAC;~~AACb~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/*\n @private\n /\nexport const SidePaneHeader = (props: {\n headingText?: string;\n dismissSidePaneButtonAriaLabel?: string;\n dismissSidePaneButtonAriaDescription?: string;\n onClose: () => void;\n mobileView: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n const sidePaneCloseButtonStyles = useMemo(() => ({\n root: {\n minWidth: '1.5rem',\n padding: '0.5rem 0.25rem',\n marginRight: '0.25rem',\n backgroundColor: theme.semanticColors.bodyBackground\n },\n icon: {\n color: theme.palette.neutralSecondary\n },\n iconHovered: {\n color: theme.palette.neutralSecondary\n },\n iconPressed: {\n color: theme.palette.neutralSecondary\n }\n ~~}),~~ [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]);\n if (props.mobileView) {\n return <SidePaneMobileHeader {...props} />;\n }\n return <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n <Stack.Item role=\"heading\" styles={sidePaneHeaderStyles}>\n {props.headingText}\n </Stack.Item>\n <Stack.Item>\n <CommandBarButton ariaLabel={props.dismissSidePaneButtonAriaLabel} styles={sidePaneCloseButtonStyles} iconProps={{\n iconName: 'cancel'\n }} onClick={props.onClose} />\n </Stack.Item>\n </Stack~~>;\~~n};\nconst SidePaneMobileHeader = (props: {\n headingText?: string;\n dismissSidePaneButtonAriaLabel?: string;\n dismissSidePaneButtonAriaDescription?: string;\n onClose: () => void;\n}): JSX.Element => {\n const {\n headingText~~,\n~~ dismissSidePaneButtonAriaLabel~~,\n~~ dismissSidePaneButtonAriaDescription~~,\n~~ onClose\n } = props;\n const theme = useTheme();\n const mobilePaneButtonStylesThemed = useMemo(() => {\n return concatStyleSets(mobilePaneButtonStyles, {\n root: {\n width: '100%'\n },\n label: {\n fontSize: theme.fonts.medium.fontSize,\n fontWeight: theme.fonts.medium.fontWeight\n }\n });\n }, [theme]);\n return <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n <DefaultButton ariaLabel={dismissSidePaneButtonAriaLabel} ariaDescription={dismissSidePaneButtonAriaDescription} onClick={onClose} styles={mobilePaneBackButtonStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />} autoFocus></DefaultButton>\n <Stack.Item grow>\n <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n {headingText}\n </DefaultButton>\n </Stack.Item>\n {/ Hidden icon to take the same space as the actual back button on the left. */}\n <DefaultButton styles={mobilePaneHiddenIconStyles} ariaHidden={true} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}></DefaultButton>\n </Stack~~>;\~~n};"]}
1	+ {"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport {\n mobilePaneBackButtonStyles,\n mobilePaneButtonStyles,\n mobilePaneControlBarStyle,\n mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/*\n @private\n /\nexport const SidePaneHeader = (props: {\n headingText?: string;\n dismissSidePaneButtonAriaLabel?: string;\n dismissSidePaneButtonAriaDescription?: string;\n onClose: () => void;\n mobileView: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n const sidePaneCloseButtonStyles = useMemo(\n () => ({\n root: {\n minWidth: '1.5rem',\n padding: '0.5rem 0.25rem',\n marginRight: '0.25rem',\n backgroundColor: theme.semanticColors.bodyBackground\n },\n icon: { color: theme.palette.neutralSecondary },\n iconHovered: { color: theme.palette.neutralSecondary },\n iconPressed: { color: theme.palette.neutralSecondary }\n }),\n [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]\n );\n\n if (props.mobileView) {\n return <SidePaneMobileHeader {...props} />;\n }\n\n return (\n <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n <Stack.Item role=\"heading\" styles={sidePaneHeaderStyles}>\n {props.headingText}\n </Stack.Item>\n <Stack.Item>\n <CommandBarButton\n ariaLabel={props.dismissSidePaneButtonAriaLabel}\n styles={sidePaneCloseButtonStyles}\n iconProps={{ iconName: 'cancel' }}\n onClick={props.onClose}\n />\n </Stack.Item>\n </Stack>\n );\n};\n\nconst SidePaneMobileHeader = (props: {\n headingText?: string;\n dismissSidePaneButtonAriaLabel?: string;\n dismissSidePaneButtonAriaDescription?: string;\n onClose: () => void;\n}): JSX.Element => {\n const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;\n const theme = useTheme();\n const mobilePaneButtonStylesThemed = useMemo(() => {\n return concatStyleSets(mobilePaneButtonStyles, {\n root: {\n width: '100%'\n },\n label: {\n fontSize: theme.fonts.medium.fontSize,\n fontWeight: theme.fonts.medium.fontWeight\n }\n });\n }, [theme]);\n\n return (\n <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n <DefaultButton\n ariaLabel={dismissSidePaneButtonAriaLabel}\n ariaDescription={dismissSidePaneButtonAriaDescription}\n onClick={onClose}\n styles={mobilePaneBackButtonStyles}\n onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n autoFocus\n ></DefaultButton>\n <Stack.Item grow>\n <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n {headingText}\n </DefaultButton>\n </Stack.Item>\n {/ Hidden icon to take the same space as the actual back button on the left. */}\n <DefaultButton\n styles={mobilePaneHiddenIconStyles}\n ariaHidden={true}\n onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n ></DefaultButton>\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/StarSurvey.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/** @private */
+export declare const StarSurvey: (props: {
+    onStarRatingSelected: (ratings: number) => void;
+}) => JSX.Element;
+//# sourceMappingURL=StarSurvey.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/StarSurvey.js ADDED Viewed

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { _StarSurvey } from "../../../../react-components/src";
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useLocale } from '../localization';
+/** @private */
+export const StarSurvey = (
+/* @conditional-compile-remove(end-of-call-survey) */ props) => {
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const { onStarRatingSelected } = props;
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const StarSurveyStrings = {
+        starSurveyHelperText: strings.starSurveyHelperText,
+        starSurveyOneStarText: strings.starSurveyOneStarText,
+        starSurveyTwoStarText: strings.starSurveyTwoStarText,
+        starSurveyThreeStarText: strings.starSurveyThreeStarText,
+        starSurveyFourStarText: strings.starSurveyFourStarText,
+        starSurveyFiveStarText: strings.starSurveyFiveStarText,
+        starRatingAriaLabel: strings.starRatingAriaLabel
+    };
+    /* @conditional-compile-remove(end-of-call-survey) */
+    return React.createElement(_StarSurvey, { strings: StarSurveyStrings, onStarRatingSelected: onStarRatingSelected });
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=StarSurvey.js.map

package/dist/dist-esm/react-composites/src/composites/common/StarSurvey.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StarSurvey.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/StarSurvey.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,qDAAqD;AACrD,OAAO,EAAE,WAAW,EAAwD,yCAAmC;AAG/G,qDAAqD;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,eAAe;AACf,MAAM,CAAC,MAAM,UAAU,GAAG;AACxB,qDAAqD,CAAC,KAErD,EACY,EAAE;IACf,qDAAqD;IACrD,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IACvC,qDAAqD;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,qDAAqD;IACrD,MAAM,iBAAiB,GAAuB;QAC5C,oBAAoB,EAAE,OAAO,CAAC,oBAAoB;QAClD,qBAAqB,EAAE,OAAO,CAAC,qBAAqB;QACpD,qBAAqB,EAAE,OAAO,CAAC,qBAAqB;QACpD,uBAAuB,EAAE,OAAO,CAAC,uBAAuB;QACxD,sBAAsB,EAAE,OAAO,CAAC,sBAAsB;QACtD,sBAAsB,EAAE,OAAO,CAAC,sBAAsB;QACtD,mBAAmB,EAAE,OAAO,CAAC,mBAAmB;KACjD,CAAC;IAEF,qDAAqD;IACrD,OAAO,oBAAC,WAAW,IAAC,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,GAAI,CAAC;IAE/F,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { _StarSurvey, _StarSurveyStrings, _CallSurvey, _CallSurveyResponse } from '@internal/react-components';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { _captionSettingsSelector } from '@internal/calling-component-bindings';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useLocale } from '../localization';\n\n/** @private */\nexport const StarSurvey = (\n /* @conditional-compile-remove(end-of-call-survey) */ props: {\n /* @conditional-compile-remove(end-of-call-survey) */ onStarRatingSelected: (ratings: number) => void;\n }\n): JSX.Element => {\n /* @conditional-compile-remove(end-of-call-survey) */\n const { onStarRatingSelected } = props;\n /* @conditional-compile-remove(end-of-call-survey) */\n const strings = useLocale().strings.call;\n\n /* @conditional-compile-remove(end-of-call-survey) */\n const StarSurveyStrings: _StarSurveyStrings = {\n starSurveyHelperText: strings.starSurveyHelperText,\n starSurveyOneStarText: strings.starSurveyOneStarText,\n starSurveyTwoStarText: strings.starSurveyTwoStarText,\n starSurveyThreeStarText: strings.starSurveyThreeStarText,\n starSurveyFourStarText: strings.starSurveyFourStarText,\n starSurveyFiveStarText: strings.starSurveyFiveStarText,\n starRatingAriaLabel: strings.starRatingAriaLabel\n };\n\n /* @conditional-compile-remove(end-of-call-survey) */\n return <_StarSurvey strings={StarSurveyStrings} onStarRatingSelected={onStarRatingSelected} />;\n\n return <></>;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SurveyPane.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';
+import { CallSurveyImprovementSuggestions } from "../../../../react-components/src";
+/** @private */
+export declare const SurveyPane: (props: {
+    onSubmitSurvey?: ((survey: CallSurvey) => Promise<CallSurveyResponse | undefined>) | undefined;
+    /**
+     * Optional callback to add extra logic when survey is dismissed. For self-host only
+     */
+    onSurveyDismissed?: (() => void) | undefined;
+    onSurveySubmittedCustom?: ((callId: string, surveyId: string, submittedSurvey: CallSurvey, improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>) | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=SurveyPane.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/SurveyPane.js ADDED Viewed

@@ -0,0 +1,87 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useState } from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { Panel, PanelType, PrimaryButton, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { SurveyPaneContent } from './SurveyPaneContent';
+/** @private */
+export const SurveyPane = (props) => {
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const { onSubmitSurvey, onSurveySubmittedCustom } = props;
+    /* @conditional-compile-remove(end-of-call-survey-self-host) */ /* @conditional-compile-remove(end-of-call-survey) */
+    const { onSurveyDismissed } = props;
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [isOpen, setIsOpen] = useState(true);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [ratings, setRatings] = useState(0);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [issuesSelected, setIssuesSelected] = useState();
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [improvementSuggestions, setImprovementSuggestions] = useState({});
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const onRenderFooterContent = React.useCallback(() => (React.createElement(React.Fragment, null, showSubmitFeedbackButton && (React.createElement(Stack, { horizontalAlign: "end" },
+        React.createElement(PrimaryButton, { style: { marginTop: '1rem' }, onClick: () => {
+                const surveyResults = { overallRating: { score: ratings } };
+                if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.overallRating) {
+                    surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };
+                }
+                if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.audioRating) {
+                    surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };
+                }
+                if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.screenshareRating) {
+                    surveyResults.screenshareRating = { score: ratings, issues: issuesSelected.screenshareRating.issues };
+                }
+                if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.videoRating) {
+                    surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };
+                }
+                if (onSubmitSurvey) {
+                    onSubmitSurvey(surveyResults)
+                        .then((res) => {
+                        var _a, _b;
+                        if (onSurveySubmittedCustom) {
+                            onSurveySubmittedCustom((_a = res === null || res === void 0 ? void 0 : res.callId) !== null && _a !== void 0 ? _a : '', (_b = res === null || res === void 0 ? void 0 : res.id) !== null && _b !== void 0 ? _b : '', surveyResults, improvementSuggestions);
+                        }
+                    })
+                        .catch((e) => console.log('error when submitting survey: ' + e));
+                }
+                setIsOpen(false);
+            } }, strings.surveyConfirmButtonLabel))))), [
+        showSubmitFeedbackButton,
+        ratings,
+        issuesSelected,
+        onSubmitSurvey,
+        strings.surveyConfirmButtonLabel,
+        onSurveySubmittedCustom,
+        improvementSuggestions
+    ]);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    return (React.createElement(Panel, { headerText: strings.surveyQuestion, isOpen: isOpen, onDismiss: () => {
+            /* @conditional-compile-remove(end-of-call-survey-self-host) */
+            if (onSurveyDismissed) {
+                onSurveyDismissed();
+            }
+            setIsOpen(false);
+        }, closeButtonAriaLabel: strings.surveyCancelButtonAriaLabel, type: PanelType.custom, customWidth: "24rem", onRenderFooterContent: onRenderFooterContent, isFooterAtBottom: true },
+        React.createElement(SurveyPaneContent, { setShowSubmitFeedbackButton: (showButton) => {
+                setShowSubmitFeedbackButton(showButton);
+            }, setRatings: (rating) => {
+                setRatings(rating);
+            }, setIssuesSelected: (issuesSelected) => {
+                setIssuesSelected(issuesSelected);
+            }, setImprovementSuggestions: onSurveySubmittedCustom
+                ? (improvementSuggestions) => {
+                    setImprovementSuggestions(improvementSuggestions);
+                }
+                : undefined })));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=SurveyPane.js.map

package/dist/dist-esm/react-composites/src/composites/common/SurveyPane.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SurveyPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SurveyPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { Panel, PanelType, PrimaryButton, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { SurveyPaneContent } from './SurveyPaneContent';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\n\n/** @private */\nexport const SurveyPane = (props: {\n /* @conditional-compile-remove(end-of-call-survey) */\n onSubmitSurvey?: (survey: CallSurvey) => Promise<CallSurveyResponse | undefined>;\n /* @conditional-compile-remove(end-of-call-survey-self-host) */\n /**\n * Optional callback to add extra logic when survey is dismissed. For self-host only\n */\n onSurveyDismissed?: () => void;\n /* @conditional-compile-remove(end-of-call-survey) */\n onSurveySubmittedCustom?: (\n callId: string,\n surveyId: string,\n /**\n * This is the survey results containing star survey data and API tag survey data.\n * This part of the result will always be sent to the calling sdk\n * This callback provides user with the ability to gain access to survey data\n */\n submittedSurvey: CallSurvey,\n /**\n * This is the survey results containing free form text\n * This part of the result will not be handled by composites\n * User will need to collect and handle this information 100% on their own\n * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n */\n improvementSuggestions: CallSurveyImprovementSuggestions\n ) => Promise<void>;\n}): JSX.Element => {\n /* @conditional-compile-remove(end-of-call-survey) */\n const { onSubmitSurvey, onSurveySubmittedCustom } = props;\n /* @conditional-compile-remove(end-of-call-survey-self-host) */ /* @conditional-compile-remove(end-of-call-survey) */\n const { onSurveyDismissed } = props;\n /* @conditional-compile-remove(end-of-call-survey) */\n const strings = useLocale().strings.call;\n /* @conditional-compile-remove(end-of-call-survey) */\n const [isOpen, setIsOpen] = useState(true);\n /* @conditional-compile-remove(end-of-call-survey) */\n const [ratings, setRatings] = useState(0);\n /* @conditional-compile-remove(end-of-call-survey) */\n const [issuesSelected, setIssuesSelected] = useState<CallSurvey | undefined>();\n /* @conditional-compile-remove(end-of-call-survey) */\n const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);\n /* @conditional-compile-remove(end-of-call-survey) */\n const [improvementSuggestions, setImprovementSuggestions] = useState<CallSurveyImprovementSuggestions>({});\n /* @conditional-compile-remove(end-of-call-survey) */\n const onRenderFooterContent = React.useCallback(\n () => (\n <>\n {showSubmitFeedbackButton && (\n <Stack horizontalAlign=\"end\">\n <PrimaryButton\n style={{ marginTop: '1rem' }}\n onClick={() => {\n const surveyResults: CallSurvey = { overallRating: { score: ratings } };\n if (issuesSelected?.overallRating) {\n surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };\n }\n if (issuesSelected?.audioRating) {\n surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };\n }\n if (issuesSelected?.screenshareRating) {\n surveyResults.screenshareRating = { score: ratings, issues: issuesSelected.screenshareRating.issues };\n }\n if (issuesSelected?.videoRating) {\n surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };\n }\n if (onSubmitSurvey) {\n onSubmitSurvey(surveyResults)\n .then((res) => {\n if (onSurveySubmittedCustom) {\n onSurveySubmittedCustom(\n res?.callId ?? '',\n res?.id ?? '',\n surveyResults,\n improvementSuggestions\n );\n }\n })\n .catch((e) => console.log('error when submitting survey: ' + e));\n }\n setIsOpen(false);\n }}\n >\n {strings.surveyConfirmButtonLabel}\n </PrimaryButton>\n </Stack>\n )}\n </>\n ),\n [\n showSubmitFeedbackButton,\n ratings,\n issuesSelected,\n onSubmitSurvey,\n strings.surveyConfirmButtonLabel,\n onSurveySubmittedCustom,\n improvementSuggestions\n ]\n );\n /* @conditional-compile-remove(end-of-call-survey) */\n return (\n <Panel\n headerText={strings.surveyQuestion}\n isOpen={isOpen}\n onDismiss={() => {\n /* @conditional-compile-remove(end-of-call-survey-self-host) */\n if (onSurveyDismissed) {\n onSurveyDismissed();\n }\n setIsOpen(false);\n }}\n closeButtonAriaLabel={strings.surveyCancelButtonAriaLabel}\n type={PanelType.custom}\n customWidth=\"24rem\"\n onRenderFooterContent={onRenderFooterContent}\n isFooterAtBottom\n >\n <SurveyPaneContent\n setShowSubmitFeedbackButton={(showButton: boolean) => {\n setShowSubmitFeedbackButton(showButton);\n }}\n setRatings={(rating: number) => {\n setRatings(rating);\n }}\n setIssuesSelected={(issuesSelected: CallSurvey) => {\n setIssuesSelected(issuesSelected);\n }}\n setImprovementSuggestions={\n onSurveySubmittedCustom\n ? (improvementSuggestions: CallSurveyImprovementSuggestions) => {\n setImprovementSuggestions(improvementSuggestions);\n }\n : undefined\n }\n />\n </Panel>\n );\n return <></>;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SurveyPaneContent.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CallSurveyImprovementSuggestions } from "../../../../react-components/src";
+import { CallSurvey } from '@azure/communication-calling';
+/**
+ * @private
+ */
+export declare const SurveyPaneContent: (props: {
+    setShowSubmitFeedbackButton: (showButton: boolean) => void;
+    setRatings: (rating: number) => void;
+    setIssuesSelected: (issuesSelected: CallSurvey) => void;
+    setImprovementSuggestions?: ((improvementSuggestions: CallSurveyImprovementSuggestions) => void) | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=SurveyPaneContent.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/SurveyPaneContent.js ADDED Viewed

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { StarSurvey } from './StarSurvey';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { TagsSurvey } from './TagsSurvey';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useState } from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { Stack } from '@fluentui/react';
+/**
+ * @private
+ */
+export const SurveyPaneContent = (
+/* @conditional-compile-remove(end-of-call-survey) */ props) => {
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [showTagsSurvey, setShowTagsSurvey] = useState(false);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const onStarRatingSelected = (ratings) => {
+        if (ratings <= 2) {
+            setShowTagsSurvey(true);
+            props.setShowSubmitFeedbackButton(true);
+        }
+        else {
+            props.setShowSubmitFeedbackButton(true);
+        }
+        props.setRatings(ratings);
+    };
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const onIssuesSelected = (selectedTags, improvementSuggestions) => {
+        props.setIssuesSelected(selectedTags);
+        props.setShowSubmitFeedbackButton(true);
+        if (improvementSuggestions && props.setImprovementSuggestions) {
+            props.setImprovementSuggestions(improvementSuggestions);
+        }
+    };
+    /* @conditional-compile-remove(end-of-call-survey) */
+    return (React.createElement(Stack, null,
+        React.createElement(StarSurvey, { onStarRatingSelected: onStarRatingSelected }),
+        showTagsSurvey && (React.createElement(TagsSurvey, { onConfirm: onIssuesSelected, showFreeFormTextField: !(props.setImprovementSuggestions === undefined) }))));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=SurveyPaneContent.js.map

package/dist/dist-esm/react-composites/src/composites/common/SurveyPaneContent.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SurveyPaneContent.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SurveyPaneContent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,qDAAqD;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,qDAAqD;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,qDAAqD;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWjC,qDAAqD;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;AAC/B,qDAAqD,CAAC,KASrD,EACY,EAAE;IACf,qDAAqD;IACrD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,qDAAqD;IACrD,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAQ,EAAE;QACrD,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;YACjB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;QACD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;IACF,qDAAqD;IACrD,MAAM,gBAAgB,GAAG,CACvB,YAAwB,EACxB,sBAAyD,EACnD,EAAE;QACR,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACtC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,sBAAsB,IAAI,KAAK,CAAC,yBAAyB,EAAE,CAAC;YAC9D,KAAK,CAAC,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC,CAAC;IACF,qDAAqD;IACrD,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,UAAU,IAAC,oBAAoB,EAAE,oBAAoB,GAAI;QAEzD,cAAc,IAAI,CACjB,oBAAC,UAAU,IACT,SAAS,EAAE,gBAAgB,EAC3B,qBAAqB,EAAE,CAAC,CAAC,KAAK,CAAC,yBAAyB,KAAK,SAAS,CAAC,GACvE,CACH,CACK,CACT,CAAC;IAEF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { StarSurvey } from './StarSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { TagsSurvey } from './TagsSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport {\n _AudioIssue,\n _OverallIssue,\n _ScreenshareIssue,\n _VideoIssue,\n CallSurveyImprovementSuggestions\n} from '@internal/react-components';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { CallSurvey } from '@azure/communication-calling';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { Stack } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const SurveyPaneContent = (\n /* @conditional-compile-remove(end-of-call-survey) */ props: {\n /* @conditional-compile-remove(end-of-call-survey) */\n setShowSubmitFeedbackButton: (showButton: boolean) => void;\n /* @conditional-compile-remove(end-of-call-survey) */\n setRatings: (rating: number) => void;\n /* @conditional-compile-remove(end-of-call-survey) */\n setIssuesSelected: (issuesSelected: CallSurvey) => void;\n /* @conditional-compile-remove(end-of-call-survey) */\n setImprovementSuggestions?: (improvementSuggestions: CallSurveyImprovementSuggestions) => void;\n }\n): JSX.Element => {\n /* @conditional-compile-remove(end-of-call-survey) */\n const [showTagsSurvey, setShowTagsSurvey] = useState(false);\n /* @conditional-compile-remove(end-of-call-survey) */\n const onStarRatingSelected = (ratings: number): void => {\n if (ratings <= 2) {\n setShowTagsSurvey(true);\n props.setShowSubmitFeedbackButton(true);\n } else {\n props.setShowSubmitFeedbackButton(true);\n }\n props.setRatings(ratings);\n };\n /* @conditional-compile-remove(end-of-call-survey) */\n const onIssuesSelected = (\n selectedTags: CallSurvey,\n improvementSuggestions?: CallSurveyImprovementSuggestions\n ): void => {\n props.setIssuesSelected(selectedTags);\n props.setShowSubmitFeedbackButton(true);\n if (improvementSuggestions && props.setImprovementSuggestions) {\n props.setImprovementSuggestions(improvementSuggestions);\n }\n };\n /* @conditional-compile-remove(end-of-call-survey) */\n return (\n <Stack>\n <StarSurvey onStarRatingSelected={onStarRatingSelected} />\n\n {showTagsSurvey && (\n <TagsSurvey\n onConfirm={onIssuesSelected}\n showFreeFormTextField={!(props.setImprovementSuggestions === undefined)}\n />\n )}\n </Stack>\n );\n\n return <></>;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js CHANGED Viewed

@@ -24,19 +24,21 @@ export const PeopleAndChatHeader = (props) => {
                 fontSize: theme.fonts.medium.fontSize,
                 fontWeight: theme.fonts.medium.fontWeight
             }
-        }, haveMultipleTabs ? {
-            rootChecked: {
-                borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
+        }, haveMultipleTabs
+            ? {
+                rootChecked: {
+                    borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
+                }
             }
-        } : {});
+            : {});
     }, [theme, haveMultipleTabs]);
-    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
         React.createElement(Stack.Item, { grow: true, role: "tablist" },
             React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, className: mergeStyles(availableSpaceStyles.root) },
                 React.createElement(Stack, { horizontal: true, styles: availableSpaceStyles },
-                    React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel)),
-                    React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))))),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
+                    React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+                    React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel)))))),
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 //# sourceMappingURL=TabHeader.js.map

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpH,OAAO,EAAE,QAAQ,EAAE,yCAAmC;AACtD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,~~EAAE~~,oBAAoB,~~EAAE~~,0BAA0B,~~EAAE~~,sBAAsB,~~EAAE~~,yBAAyB,~~EAAE~~,0BAA0B,~~EAAE~~,MAAM,sBAAsB,CAAC;~~AACvK~~,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAsB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,~~EACJ~~,OAAO,~~EACP~~,mBAAmB,~~EACnB~~,qBAAqB,~~EACrB~~,SAAS,~~EACV~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,gBAAgB,GAAG,mBAAmB,IAAI,qBAAqB,CAAC;IACtE,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,eAAe,~~CAAC~~,sBAAsB,~~EAAE~~;~~YAC7C~~,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;gBACrC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;aAC1C;SACF,~~EAAE~~,gBAAgB,CAAC,CAAC~~,CAAC~~;~~YACpB~~,WAAW,EAAE;~~gBACX~~,YAAY,EAAE,kBAAkB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;~~aAC7D~~;~~SACF~~,CAAC,CAAC,~~CAAC,~~EAAE,~~CAAC~~,CAAC;~~IACV~~,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;~~IAC9B~~,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI,QAAC,MAAM,EAAE,yBAAyB;~~QAC3D~~,oBAAC,aAAa,~~IAAC~~,SAAS,EAAE,OAAO,CAAC,2BAA2B,~~EAAE~~,eAAe,EAAE,OAAO,CAAC,iCAAiC,~~EAAE~~,OAAO,EAAE,OAAO,~~EAAE~~,MAAM,EAAE,0BAA0B,~~EAAE~~,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,~~EAAE~~,SAAS,~~SAAiB~~;~~QACrR~~,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,IAAI,EAAC,SAAS;YAC7B,oBAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAAI,CAAC;gBACpG,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,oBAAoB;oBAC5C,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,mBAAmB,IAAI,oBAAC,aAAa,~~IAAC~~,OAAO,EAAE,mBAAmB,~~EAAE~~,MAAM,EAAE,4BAA4B,~~EAAE~~,OAAO,EAAE,SAAS,KAAK,MAAM,~~mBAAiB~~,SAAS,KAAK,MAAM,~~EAAE~~,IAAI,EAAE,KAAK,~~EAAE~~,QAAQ,EAAE,KAAK,CAAC,iBAAiB,~~IACxN~~,OAAO,CAAC,eAAe,CACV,~~CACP~~;oBACb,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,qBAAqB,IAAI,oBAAC,aAAa,~~IAAC~~,OAAO,EAAE,qBAAqB,~~EAAE~~,MAAM,EAAE,4BAA4B,~~EAAE~~,OAAO,EAAE,SAAS,KAAK,QAAQ,~~mBAAiB~~,SAAS,KAAK,QAAQ,~~EAAE~~,IAAI,EAAE,KAAK,~~EAAE~~,QAAQ,EAAE,KAAK,CAAC,mBAAmB,~~IAClO~~,OAAO,CAAC,iBAAiB,CACZ,~~CACP~~,CACP,CACE,CACD;QAEb,oBAAC,aAAa,~~IAAC~~,MAAM,EAAE,0BAA0B,~~EAAE~~,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,~~GAAkB~~,~~CACvI~~,CAAC;~~AACb~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, DefaultButton, FocusZone, FocusZoneDirection, mergeStyles, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport { availableSpaceStyles, mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';\nimport { useLocale } from '../localization';\n\n/** @private /\nexport interface MobileChatSidePaneTabHeaderProps {\n onClick: () => void;\n disabled: boolean;\n}\n\n/\n Props for {@link TabHeader} component\n /\ntype PeopleAndChatHeaderProps = {\n onClose: () => void;\n // If set, show a button to open chat tab.\n onChatButtonClicked?: () => void;\n // If set, show a button to open people tab.\n onPeopleButtonClicked?: () => void;\n activeTab: TabHeaderTab;\n disableChatButton?: boolean;\n disablePeopleButton?: boolean;\n};\n\n/\n Legacy header to be removed when we make a breaking change.\n * @private\n /\nexport const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Element => {\n const {\n onClose~~,\n~~ onChatButtonClicked~~,\n~~ onPeopleButtonClicked~~,\n~~ activeTab\n } = props;\n const theme = useTheme();\n const strings = useLocale().strings.call;\n const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n const mobilePaneButtonStylesThemed = useMemo(() => {\n return concatStyleSets(mobilePaneButtonStyles, {\n root: {\n width: '100%'\n },\n label: {\n fontSize: theme.fonts.medium.fontSize,\n fontWeight: theme.fonts.medium.fontWeight\n }\n }, haveMultipleTabs ? {\n rootChecked: {\n borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n }\n } : {});\n }, [theme, haveMultipleTabs]);\n return <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n <DefaultButton ariaLabel={strings.returnToCallButtonAriaLabel} ariaDescription={strings.returnToCallButtonAriaDescription} onClick={onClose} styles={mobilePaneBackButtonStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />} autoFocus></DefaultButton>\n <Stack.Item grow role=\"tablist\">\n <FocusZone direction={FocusZoneDirection.horizontal} className={mergeStyles(availableSpaceStyles.root)}>\n <Stack horizontal styles={availableSpaceStyles}>\n <Stack.Item grow>\n {onChatButtonClicked && <DefaultButton onClick={onChatButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'chat'} aria-selected={activeTab === 'chat'} role={'tab'} disabled={props.disableChatButton}>\n {strings.chatButtonLabel}\n </DefaultButton>}\n </Stack.Item>\n <Stack.Item grow>\n {onPeopleButtonClicked && <DefaultButton onClick={onPeopleButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'people'} aria-selected={activeTab === 'people'} role={'tab'} disabled={props.disablePeopleButton}>\n {strings.peopleButtonLabel}\n </DefaultButton>}\n </Stack.Item>\n </Stack>\n </FocusZone>\n </Stack.Item>\n {/ Hidden icon to take the same space as the actual back button on the left. /}\n <DefaultButton styles={mobilePaneHiddenIconStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}></DefaultButton>\n </Stack~~>;\~~n};\n\n/\n Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' \| 'people';"]}
1	+ {"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, DefaultButton, FocusZone, FocusZoneDirection, mergeStyles, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport {\n availableSpaceStyles,\n mobilePaneBackButtonStyles,\n mobilePaneButtonStyles,\n mobilePaneControlBarStyle,\n mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { useLocale } from '../localization';\n\n/** @private /\nexport interface MobileChatSidePaneTabHeaderProps {\n onClick: () => void;\n disabled: boolean;\n}\n\n/\n Props for {@link TabHeader} component\n /\ntype PeopleAndChatHeaderProps = {\n onClose: () => void;\n // If set, show a button to open chat tab.\n onChatButtonClicked?: () => void;\n // If set, show a button to open people tab.\n onPeopleButtonClicked?: () => void;\n activeTab: TabHeaderTab;\n disableChatButton?: boolean;\n disablePeopleButton?: boolean;\n};\n\n/\n Legacy header to be removed when we make a breaking change.\n * @private\n /\nexport const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Element => {\n const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab } = props;\n const theme = useTheme();\n const strings = useLocale().strings.call;\n const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n const mobilePaneButtonStylesThemed = useMemo(() => {\n return concatStyleSets(\n mobilePaneButtonStyles,\n {\n root: {\n width: '100%'\n },\n label: {\n fontSize: theme.fonts.medium.fontSize,\n fontWeight: theme.fonts.medium.fontWeight\n }\n },\n haveMultipleTabs\n ? {\n rootChecked: {\n borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n }\n }\n : {}\n );\n }, [theme, haveMultipleTabs]);\n\n return (\n <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n <DefaultButton\n ariaLabel={strings.returnToCallButtonAriaLabel}\n ariaDescription={strings.returnToCallButtonAriaDescription}\n onClick={onClose}\n styles={mobilePaneBackButtonStyles}\n onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n autoFocus\n ></DefaultButton>\n <Stack.Item grow role=\"tablist\">\n <FocusZone direction={FocusZoneDirection.horizontal} className={mergeStyles(availableSpaceStyles.root)}>\n <Stack horizontal styles={availableSpaceStyles}>\n <Stack.Item grow>\n {onChatButtonClicked && (\n <DefaultButton\n onClick={onChatButtonClicked}\n styles={mobilePaneButtonStylesThemed}\n checked={activeTab === 'chat'}\n aria-selected={activeTab === 'chat'}\n role={'tab'}\n disabled={props.disableChatButton}\n >\n {strings.chatButtonLabel}\n </DefaultButton>\n )}\n </Stack.Item>\n <Stack.Item grow>\n {onPeopleButtonClicked && (\n <DefaultButton\n onClick={onPeopleButtonClicked}\n styles={mobilePaneButtonStylesThemed}\n checked={activeTab === 'people'}\n aria-selected={activeTab === 'people'}\n role={'tab'}\n disabled={props.disablePeopleButton}\n >\n {strings.peopleButtonLabel}\n </DefaultButton>\n )}\n </Stack.Item>\n </Stack>\n </FocusZone>\n </Stack.Item>\n {/ Hidden icon to take the same space as the actual back button on the left. /}\n <DefaultButton\n styles={mobilePaneHiddenIconStyles}\n onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n ></DefaultButton>\n </Stack>\n );\n};\n\n/\n Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' \| 'people';\n"]}