npm - @azure/communication-react - Versions diffs - 1.3.3-alpha-202208280018.0 → 1.3.3-alpha-202209010016.0 - Mend

@azure/communication-react 1.3.3-alpha-202208280018.0 → 1.3.3-alpha-202209010016.0

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

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js CHANGED Viewed

@@ -27,6 +27,9 @@ import { usePropsFor } from '../hooks/usePropsFor';
 import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
 /* @conditional-compile-remove(PSTN-calls) */
 import { SendDtmfDialpad } from '../../common/SendDtmfDialpad';
+/* @conditional-compile-remove(PSTN-calls) */
+import { useAdapter } from '../adapter/CallAdapterProvider';
+import { isDisabled } from '../utils';
 // Enforce a background color on control bar to ensure it matches the composite background color.
 const controlBarStyles = memoizeFunction((background) => ({ root: { background: background } }));
 /**
@@ -55,10 +58,12 @@ export const CallControls = (props) => {
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor(HoldButton);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = useAdapter().getState().alternateCallerId;
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
     const moreButtonContextualMenuItems = () => {
         const items = [];
-        if (props.isMobile && props.onPeopleButtonClicked) {
+        if (props.isMobile && props.onPeopleButtonClicked && isEnabled(options === null || options === void 0 ? void 0 : options.participantsButton)) {
             items.push({
                 key: 'peopleButtonKey',
                 text: localeStrings.component.strings.participantsButton.label,
@@ -71,6 +76,7 @@ export const CallControls = (props) => {
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
+                disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton),
                 ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
@@ -88,17 +94,20 @@ export const CallControls = (props) => {
             ['data-ui-id']: 'hold-button'
         });
         /* @conditional-compile-remove(PSTN-calls) */
-        items.push({
-            key: 'showDialpadKey',
-            text: localeStrings.strings.call.openDtmfDialpadLabel,
-            onClick: () => {
-                setShowDialpad(true);
-            },
-            iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
-            itemProps: {
-                styles: buttonFlyoutIncreasedSizeStyles
-            }
-        });
+        // dtmf tone sending only works for 1:1 PSTN call
+        if (alternateCallerId) {
+            items.push({
+                key: 'showDialpadKey',
+                text: localeStrings.strings.call.openDtmfDialpadLabel,
+                onClick: () => {
+                    setShowDialpad(true);
+                },
+                iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                }
+            });
+        }
         return items;
     };
     /* @conditional-compile-remove(PSTN-calls) */
@@ -134,10 +143,4 @@ export const CallControls = (props) => {
                 isEnabled(options === null || options === void 0 ? void 0 : options.endCallButton) && React.createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled = (option) => option !== false;
-const isDisabled = (option) => {
-    if (typeof option !== 'boolean') {
-        return !!(option === null || option === void 0 ? void 0 : option.disabled);
-    }
-    return option;
-};
 //# sourceMappingURL=CallControls.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallControls.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { memoizeFunction, Stack, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { IContextualMenuItem } from '@fluentui/react';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useState } from 'react';\nimport { _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport { ControlBar, ParticipantMenuItemsCallback } from '@internal/react-components';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { HoldButton } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlOptions } from '../types/CallControlOptions';\nimport { Camera } from './buttons/Camera';\n/ @conditional-compile-remove(control-bar-button-injection) /\nimport { generateCustomControlBarButtons, onFetchCustomButtonPropsTrampoline } from './buttons/Custom';\nimport { Devices } from './buttons/Devices';\nimport { EndCall } from './buttons/EndCall';\nimport { Microphone } from './buttons/Microphone';\nimport { Participants } from './buttons/Participants';\nimport { ScreenShare } from './buttons/ScreenShare';\nimport { ContainerRectProps } from '../../common/ContainerRectProps';\n/ @conditional-compile-remove(one-to-n-calling) /\nimport { People } from './buttons/People';\n/ @conditional-compile-remove(one-to-n-calling) /\nimport { useLocale } from '../../localization';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { MoreButton } from '../../common/MoreButton';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { usePropsFor } from '../hooks/usePropsFor';\n/ @conditional-compile-remove(one-to-n-calling) /\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { SendDtmfDialpad } from '../../common/SendDtmfDialpad';\n\n/\n @private\n /\nexport type CallControlsProps = {\n / @conditional-compile-remove(one-to-n-calling) /\n peopleButtonChecked?: boolean;\n / @conditional-compile-remove(one-to-n-calling) /\n onPeopleButtonClicked?: () => void;\n callInvitationURL?: string;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n options?: boolean \| CallControlOptions;\n /\n Option to increase the height of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n /\n increaseFlyoutItemSize?: boolean;\n isMobile?: boolean;\n};\n\n// Enforce a background color on control bar to ensure it matches the composite background color.\nconst controlBarStyles = memoizeFunction((background: string) => ({ root: { background: background } }));\n\n/\n @private\n /\nexport const CallControls = (props: CallControlsProps & ContainerRectProps): JSX.Element => {\n const options = useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);\n\n / @conditional-compile-remove(one-to-n-calling) /\n const localeStrings = useLocale();\n\n / @conditional-compile-remove(one-to-n-calling) /\n const peopleButtonStrings = useMemo(\n () => ({\n label: localeStrings.strings.callWithChat.peopleButtonLabel,\n tooltipOffContent: localeStrings.strings.callWithChat.peopleButtonTooltipOpen,\n tooltipOnContent: localeStrings.strings.callWithChat.peopleButtonTooltipClose\n }),\n [localeStrings]\n );\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const moreButtonStrings = useMemo(\n () => ({\n label: localeStrings.strings.call.moreButtonCallingLabel,\n tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip\n }),\n [localeStrings]\n );\n\n / @conditional-compile-remove(PSTN-calls) /\n const dialpadStrings = useMemo(\n () => ({\n dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,\n dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,\n placeholderText: localeStrings.strings.call.dtmfDialpadPlaceHolderText\n }),\n [localeStrings]\n );\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const holdButtonProps = usePropsFor(HoldButton);\n\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n const moreButtonContextualMenuItems = (): IContextualMenuItem[] => {\n const items: IContextualMenuItem[] = [];\n\n if (props.isMobile && props.onPeopleButtonClicked) {\n items.push({\n key: 'peopleButtonKey',\n text: localeStrings.component.strings.participantsButton.label,\n onClick: () => {\n if (props.onPeopleButtonClicked) {\n props.onPeopleButtonClicked();\n }\n },\n iconProps: { iconName: 'ControlButtonParticipantsContextualMenuItem', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: buttonFlyoutIncreasedSizeStyles\n },\n ['data-ui-id']: 'call-composite-more-menu-people-button'\n });\n }\n\n items.push({\n key: 'holdButtonKey',\n text: localeStrings.component.strings.holdButton.tooltipOffContent,\n onClick: () => {\n holdButtonProps.onToggleHold();\n },\n iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: buttonFlyoutIncreasedSizeStyles\n },\n disabled: isDisabled(options?.holdButton),\n ['data-ui-id']: 'hold-button'\n });\n\n / @conditional-compile-remove(PSTN-calls) /\n items.push({\n key: 'showDialpadKey',\n text: localeStrings.strings.call.openDtmfDialpadLabel,\n onClick: () => {\n setShowDialpad(true);\n },\n iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: buttonFlyoutIncreasedSizeStyles\n }\n });\n\n return items;\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const [showDialpad, setShowDialpad] = useState(false);\n\n const theme = useTheme();\n\n / @conditional-compile-remove(control-bar-button-injection) /\n const customButtons = useMemo(\n () => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline(options), options?.displayType),\n [options]\n );\n\n // when props.options is false then we want to hide the whole control bar.\n if (props.options === false) {\n return <></>;\n }\n\n / @conditional-compile-remove(PSTN-calls) /\n const onDismissDialpad = (): void => {\n setShowDialpad(false);\n };\n\n return (\n <Stack horizontalAlign=\"center\">\n {\n / @conditional-compile-remove(PSTN-calls) /\n <SendDtmfDialpad\n isMobile={!!props.isMobile}\n strings={dialpadStrings}\n showDialpad={showDialpad}\n onDismissDialpad={onDismissDialpad}\n />\n }\n <Stack.Item>\n {/\n Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n dockedBottom it has position absolute and would therefore float on top of the media gallery,\n occluding some of its content.\n /}\n <ControlBar layout=\"horizontal\" styles={controlBarStyles(theme.semanticColors.bodyBackground)}>\n {isEnabled(options?.microphoneButton) && (\n <Microphone displayType={options?.displayType} disabled={isDisabled(options?.microphoneButton)} />\n )}\n {isEnabled(options?.cameraButton) && (\n <Camera displayType={options?.displayType} disabled={isDisabled(options?.cameraButton)} />\n )}\n {isEnabled(options?.screenShareButton) && (\n <ScreenShare\n option={options?.screenShareButton}\n displayType={options?.displayType}\n disabled={isDisabled(options?.screenShareButton)}\n />\n )}\n {isEnabled(options?.participantsButton) &&\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n !props.isMobile && (\n <Participants\n option={options?.participantsButton}\n callInvitationURL={props.callInvitationURL}\n onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n displayType={options?.displayType}\n increaseFlyoutItemSize={props.increaseFlyoutItemSize}\n isMobile={props.isMobile}\n disabled={isDisabled(options?.participantsButton)}\n />\n ) && (\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n <People\n checked={props.peopleButtonChecked}\n showLabel={options?.displayType !== 'compact'}\n onClick={props.onPeopleButtonClicked}\n data-ui-id=\"call-composite-people-button\"\n strings={peopleButtonStrings}\n disabled={isDisabled(options?.participantsButton)}\n />\n )}\n {isEnabled(options?.devicesButton) && (\n <Devices\n displayType={options?.displayType}\n increaseFlyoutItemSize={props.increaseFlyoutItemSize}\n disabled={isDisabled(options?.devicesButton)}\n />\n )}\n {\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n isEnabled(options?.moreButton) && (\n <MoreButton\n strings={moreButtonStrings}\n menuIconProps={{ hidden: true }}\n menuProps={{ items: moreButtonContextualMenuItems() }}\n showLabel={!props.isMobile}\n />\n )\n }\n {/ @conditional-compile-remove(control-bar-button-injection) */ customButtons['primary']}\n {isEnabled(options?.endCallButton) && <EndCall displayType={options?.displayType} />}\n </ControlBar>\n </Stack.Item>\n </Stack>\n );\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\nconst isDisabled = (option?: boolean \| { disabled: boolean }): boolean => {\n if (typeof option !== 'boolean') {\n return !!option?.disabled;\n }\n return option;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
1	+ {"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallControls.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { memoizeFunction, Stack, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { IContextualMenuItem } from '@fluentui/react';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useState } from 'react';\nimport { _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport { ControlBar, ParticipantMenuItemsCallback } from '@internal/react-components';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { HoldButton } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlOptions } from '../types/CallControlOptions';\nimport { Camera } from './buttons/Camera';\n/ @conditional-compile-remove(control-bar-button-injection) /\nimport { generateCustomControlBarButtons, onFetchCustomButtonPropsTrampoline } from './buttons/Custom';\nimport { Devices } from './buttons/Devices';\nimport { EndCall } from './buttons/EndCall';\nimport { Microphone } from './buttons/Microphone';\nimport { Participants } from './buttons/Participants';\nimport { ScreenShare } from './buttons/ScreenShare';\nimport { ContainerRectProps } from '../../common/ContainerRectProps';\n/ @conditional-compile-remove(one-to-n-calling) /\nimport { People } from './buttons/People';\n/ @conditional-compile-remove(one-to-n-calling) /\nimport { useLocale } from '../../localization';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { MoreButton } from '../../common/MoreButton';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { usePropsFor } from '../hooks/usePropsFor';\n/ @conditional-compile-remove(one-to-n-calling) /\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { SendDtmfDialpad } from '../../common/SendDtmfDialpad';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { isDisabled } from '../utils';\n\n/\n @private\n /\nexport type CallControlsProps = {\n / @conditional-compile-remove(one-to-n-calling) /\n peopleButtonChecked?: boolean;\n / @conditional-compile-remove(one-to-n-calling) /\n onPeopleButtonClicked?: () => void;\n callInvitationURL?: string;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n options?: boolean \| CallControlOptions;\n /\n Option to increase the height of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n /\n increaseFlyoutItemSize?: boolean;\n isMobile?: boolean;\n};\n\n// Enforce a background color on control bar to ensure it matches the composite background color.\nconst controlBarStyles = memoizeFunction((background: string) => ({ root: { background: background } }));\n\n/\n @private\n /\nexport const CallControls = (props: CallControlsProps & ContainerRectProps): JSX.Element => {\n const options = useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);\n\n / @conditional-compile-remove(one-to-n-calling) /\n const localeStrings = useLocale();\n\n / @conditional-compile-remove(one-to-n-calling) /\n const peopleButtonStrings = useMemo(\n () => ({\n label: localeStrings.strings.callWithChat.peopleButtonLabel,\n tooltipOffContent: localeStrings.strings.callWithChat.peopleButtonTooltipOpen,\n tooltipOnContent: localeStrings.strings.callWithChat.peopleButtonTooltipClose\n }),\n [localeStrings]\n );\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const moreButtonStrings = useMemo(\n () => ({\n label: localeStrings.strings.call.moreButtonCallingLabel,\n tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip\n }),\n [localeStrings]\n );\n\n / @conditional-compile-remove(PSTN-calls) /\n const dialpadStrings = useMemo(\n () => ({\n dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,\n dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,\n placeholderText: localeStrings.strings.call.dtmfDialpadPlaceHolderText\n }),\n [localeStrings]\n );\n\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const holdButtonProps = usePropsFor(HoldButton);\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n const moreButtonContextualMenuItems = (): IContextualMenuItem[] => {\n const items: IContextualMenuItem[] = [];\n\n if (props.isMobile && props.onPeopleButtonClicked && isEnabled(options?.participantsButton)) {\n items.push({\n key: 'peopleButtonKey',\n text: localeStrings.component.strings.participantsButton.label,\n onClick: () => {\n if (props.onPeopleButtonClicked) {\n props.onPeopleButtonClicked();\n }\n },\n iconProps: { iconName: 'ControlButtonParticipantsContextualMenuItem', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: buttonFlyoutIncreasedSizeStyles\n },\n disabled: isDisabled(options?.participantsButton),\n ['data-ui-id']: 'call-composite-more-menu-people-button'\n });\n }\n\n items.push({\n key: 'holdButtonKey',\n text: localeStrings.component.strings.holdButton.tooltipOffContent,\n onClick: () => {\n holdButtonProps.onToggleHold();\n },\n iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: buttonFlyoutIncreasedSizeStyles\n },\n disabled: isDisabled(options?.holdButton),\n ['data-ui-id']: 'hold-button'\n });\n\n / @conditional-compile-remove(PSTN-calls) /\n // dtmf tone sending only works for 1:1 PSTN call\n if (alternateCallerId) {\n items.push({\n key: 'showDialpadKey',\n text: localeStrings.strings.call.openDtmfDialpadLabel,\n onClick: () => {\n setShowDialpad(true);\n },\n iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: buttonFlyoutIncreasedSizeStyles\n }\n });\n }\n\n return items;\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const [showDialpad, setShowDialpad] = useState(false);\n\n const theme = useTheme();\n\n / @conditional-compile-remove(control-bar-button-injection) /\n const customButtons = useMemo(\n () => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline(options), options?.displayType),\n [options]\n );\n\n // when props.options is false then we want to hide the whole control bar.\n if (props.options === false) {\n return <></>;\n }\n\n / @conditional-compile-remove(PSTN-calls) /\n const onDismissDialpad = (): void => {\n setShowDialpad(false);\n };\n\n return (\n <Stack horizontalAlign=\"center\">\n {\n / @conditional-compile-remove(PSTN-calls) /\n <SendDtmfDialpad\n isMobile={!!props.isMobile}\n strings={dialpadStrings}\n showDialpad={showDialpad}\n onDismissDialpad={onDismissDialpad}\n />\n }\n <Stack.Item>\n {/\n Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n dockedBottom it has position absolute and would therefore float on top of the media gallery,\n occluding some of its content.\n /}\n <ControlBar layout=\"horizontal\" styles={controlBarStyles(theme.semanticColors.bodyBackground)}>\n {isEnabled(options?.microphoneButton) && (\n <Microphone displayType={options?.displayType} disabled={isDisabled(options?.microphoneButton)} />\n )}\n {isEnabled(options?.cameraButton) && (\n <Camera displayType={options?.displayType} disabled={isDisabled(options?.cameraButton)} />\n )}\n {isEnabled(options?.screenShareButton) && (\n <ScreenShare\n option={options?.screenShareButton}\n displayType={options?.displayType}\n disabled={isDisabled(options?.screenShareButton)}\n />\n )}\n {isEnabled(options?.participantsButton) &&\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n !props.isMobile && (\n <Participants\n option={options?.participantsButton}\n callInvitationURL={props.callInvitationURL}\n onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n displayType={options?.displayType}\n increaseFlyoutItemSize={props.increaseFlyoutItemSize}\n isMobile={props.isMobile}\n disabled={isDisabled(options?.participantsButton)}\n />\n ) && (\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n <People\n checked={props.peopleButtonChecked}\n showLabel={options?.displayType !== 'compact'}\n onClick={props.onPeopleButtonClicked}\n data-ui-id=\"call-composite-people-button\"\n strings={peopleButtonStrings}\n disabled={isDisabled(options?.participantsButton)}\n />\n )}\n {isEnabled(options?.devicesButton) && (\n <Devices\n displayType={options?.displayType}\n increaseFlyoutItemSize={props.increaseFlyoutItemSize}\n disabled={isDisabled(options?.devicesButton)}\n />\n )}\n {\n / @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\n isEnabled(options?.moreButton) && (\n <MoreButton\n strings={moreButtonStrings}\n menuIconProps={{ hidden: true }}\n menuProps={{ items: moreButtonContextualMenuItems() }}\n showLabel={!props.isMobile}\n />\n )\n }\n {/ @conditional-compile-remove(control-bar-button-injection) */ customButtons['primary']}\n {isEnabled(options?.endCallButton) && <EndCall displayType={options?.displayType} />}\n </ControlBar>\n </Stack.Item>\n </Stack>\n );\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ParticipantMenuItemsCallback } from "../../../../../react-components/src";
-import { CallAdapter } from '../';
+import { CallAdapter, CallControlOptions } from '../';
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 /**
  * Pane that is used to store participants for Call composite
@@ -18,6 +18,7 @@ export declare const CallPane: (props: {
     mobileView?: boolean;
     inviteLink?: string;
     rtl?: boolean;
+    callControls?: CallControlOptions;
 }) => JSX.Element;
 /**
  * Active tab option type for {@link CallPane} component

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.js CHANGED Viewed

@@ -25,12 +25,14 @@ import { useMinMaxDragPosition } from '../../common/utils';
 import { availableSpaceStyles, hiddenStyles, sidePaneStyles, sidePaneTokens } from '../../common/styles/Pane.styles';
 /* @conditional-compile-remove(PSTN-calls) */
 import { useAdapter } from '../adapter/CallAdapterProvider';
+import { isDisabled } from '../utils';
 /**
  * Pane that is used to store participants for Call composite
  * @private
  */
 /** @beta */
 export const CallPane = (props) => {
+    var _a;
     const [drawerMenuItems, setDrawerMenuItems] = useState([]);
     const hidden = props.activePane === 'none';
     const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
@@ -43,7 +45,7 @@ export const CallPane = (props) => {
     };
     const strings = getStrings();
     const theme = useTheme();
-    const header = props.activePane === 'none' ? null : props.mobileView ? (React.createElement(TabHeader, Object.assign({}, props, { strings: strings, activeTab: props.activePane }))) : (React.createElement(SidePaneHeader, Object.assign({}, props, { strings: strings, headingText: props.activePane === 'people' ? strings.peoplePaneTitle : '' })));
+    const header = props.activePane === 'none' ? null : props.mobileView ? (React.createElement(TabHeader, Object.assign({}, props, { strings: strings, activeTab: props.activePane, disablePeopleButton: isDisabled((_a = props.callControls) === null || _a === void 0 ? void 0 : _a.participantsButton) }))) : (React.createElement(SidePaneHeader, Object.assign({}, props, { strings: strings, headingText: props.activePane === 'people' ? strings.peoplePaneTitle : '' })));
     /**
      * In a Call Composite when a participant is removed, we must remove them from the call.
      */

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallPane.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack } from '@fluentui/react';\nimport {\n _DrawerMenu,\n _DrawerMenuItemProps,\n _useContainerHeight,\n _useContainerWidth,\n ParticipantMenuItemsCallback,\n useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useState } from 'react';\nimport { CallAdapter } from '../';\nimport { CallAdapterProvider } from '../adapter/CallAdapterProvider';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport {\n paneBodyContainer,\n scrollableContainer,\n scrollableContainerContents\n} from '../../common/styles/ParticipantContainer.styles';\nimport { SidePaneHeader } from '../../common/SidePaneHeader';\nimport { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';\nimport { PeoplePaneContent } from '../../common/PeoplePaneContent';\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\nimport { TabHeader } from '../../common/TabHeader';\nimport { _ICoordinates } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { useLocale } from '../../localization';\nimport { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../../common/utils';\nimport { availableSpaceStyles, hiddenStyles, sidePaneStyles, sidePaneTokens } from '../../common/styles/Pane.styles';\n/* @conditional-compile-remove(PSTN-calls) /\nimport { CommunicationIdentifier } from '@azure/communication-common';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n\n/\n Pane that is used to store participants for Call composite\n * @private\n /\n/* @beta /\nexport const CallPane = (props: {\n callAdapter: CallAdapter;\n onClose: () => void;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n onPeopleButtonClicked?: () => void;\n modalLayerHostId: string;\n activePane: CallPaneOption;\n mobileView?: boolean;\n inviteLink?: string;\n rtl?: boolean;\n}): JSX.Element => {\n const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n const hidden = props.activePane === 'none';\n const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;\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) /\n return localeStrings.strings.call;\n\n return localeStrings.strings.callWithChat;\n };\n\n const strings = getStrings();\n const theme = useTheme();\n\n const header =\n props.activePane === 'none' ? null : props.mobileView ? (\n <TabHeader {...props} strings={strings} activeTab={props.activePane} />\n ) : (\n <SidePaneHeader\n {...props}\n strings={strings}\n headingText={props.activePane === 'people' ? strings.peoplePaneTitle : ''}\n />\n );\n\n /\n In a Call Composite when a participant is removed, we must remove them from the call.\n /\n const removeParticipantFromCall = async (participantId: string): Promise<void> => {\n await props.callAdapter.removeParticipant(participantId);\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const addParticipantToCall = async (\n participant: CommunicationIdentifier,\n options?: AddPhoneNumberOptions\n ): Promise<void> => {\n await props.callAdapter.addParticipant(participant, options);\n };\n\n const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);\n\n const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n\n const dataUiId = props.activePane === 'people' ? 'call-composite-people-pane' : '';\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n return (\n <Stack verticalFill grow styles={paneStyles} data-ui-id={dataUiId} tokens={props.mobileView ? {} : sidePaneTokens}>\n {header}\n <Stack.Item verticalFill grow styles={paneBodyContainer}>\n <Stack horizontal styles={scrollableContainer}>\n <Stack.Item verticalFill styles={scrollableContainerContents}>\n <Stack styles={props.activePane === 'people' ? availableSpaceStyles : hiddenStyles}>\n <CallAdapterProvider adapter={props.callAdapter}>\n <PeoplePaneContent\n {...props}\n onRemoveParticipant={removeParticipantFromCall}\n / @conditional-compile-remove(PSTN-calls) /\n onAddParticipant={addParticipantToCall}\n setDrawerMenuItems={setDrawerMenuItems}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n alternateCallerId={alternateCallerId}\n />\n </CallAdapterProvider>\n </Stack>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n {props.mobileView && (\n <ModalLocalAndRemotePIP\n callAdapter={props.callAdapter}\n modalLayerHostId={props.modalLayerHostId}\n hidden={hidden}\n styles={pipStyles}\n minDragPosition={minMaxDragPosition.minDragPosition}\n maxDragPosition={minMaxDragPosition.maxDragPosition}\n />\n )}\n {drawerMenuItems.length > 0 && (\n <Stack styles={drawerContainerStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n </Stack>\n )}\n </Stack>\n );\n};\n\n/\n Active tab option type for {@link CallPane} component\n * @private\n /\n/* @beta */\nexport type CallPaneOption = 'none' \| 'people';\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"CallPane.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack } from '@fluentui/react';\nimport {\n _DrawerMenu,\n _DrawerMenuItemProps,\n _useContainerHeight,\n _useContainerWidth,\n ParticipantMenuItemsCallback,\n useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useState } from 'react';\nimport { CallAdapter, CallControlOptions } from '../';\nimport { CallAdapterProvider } from '../adapter/CallAdapterProvider';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport {\n paneBodyContainer,\n scrollableContainer,\n scrollableContainerContents\n} from '../../common/styles/ParticipantContainer.styles';\nimport { SidePaneHeader } from '../../common/SidePaneHeader';\nimport { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';\nimport { PeoplePaneContent } from '../../common/PeoplePaneContent';\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\nimport { TabHeader } from '../../common/TabHeader';\nimport { _ICoordinates } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { useLocale } from '../../localization';\nimport { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../../common/utils';\nimport { availableSpaceStyles, hiddenStyles, sidePaneStyles, sidePaneTokens } from '../../common/styles/Pane.styles';\n/* @conditional-compile-remove(PSTN-calls) /\nimport { CommunicationIdentifier } from '@azure/communication-common';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { isDisabled } from '../utils';\n\n/\n Pane that is used to store participants for Call composite\n * @private\n /\n/* @beta /\nexport const CallPane = (props: {\n callAdapter: CallAdapter;\n onClose: () => void;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n onPeopleButtonClicked?: () => void;\n modalLayerHostId: string;\n activePane: CallPaneOption;\n mobileView?: boolean;\n inviteLink?: string;\n rtl?: boolean;\n callControls?: CallControlOptions;\n}): JSX.Element => {\n const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n const hidden = props.activePane === 'none';\n const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;\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) /\n return localeStrings.strings.call;\n\n return localeStrings.strings.callWithChat;\n };\n\n const strings = getStrings();\n const theme = useTheme();\n\n const header =\n props.activePane === 'none' ? null : props.mobileView ? (\n <TabHeader\n {...props}\n strings={strings}\n activeTab={props.activePane}\n disablePeopleButton={isDisabled(props.callControls?.participantsButton)}\n />\n ) : (\n <SidePaneHeader\n {...props}\n strings={strings}\n headingText={props.activePane === 'people' ? strings.peoplePaneTitle : ''}\n />\n );\n\n /\n In a Call Composite when a participant is removed, we must remove them from the call.\n /\n const removeParticipantFromCall = async (participantId: string): Promise<void> => {\n await props.callAdapter.removeParticipant(participantId);\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const addParticipantToCall = async (\n participant: CommunicationIdentifier,\n options?: AddPhoneNumberOptions\n ): Promise<void> => {\n await props.callAdapter.addParticipant(participant, options);\n };\n\n const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);\n\n const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n\n const dataUiId = props.activePane === 'people' ? 'call-composite-people-pane' : '';\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n return (\n <Stack verticalFill grow styles={paneStyles} data-ui-id={dataUiId} tokens={props.mobileView ? {} : sidePaneTokens}>\n {header}\n <Stack.Item verticalFill grow styles={paneBodyContainer}>\n <Stack horizontal styles={scrollableContainer}>\n <Stack.Item verticalFill styles={scrollableContainerContents}>\n <Stack styles={props.activePane === 'people' ? availableSpaceStyles : hiddenStyles}>\n <CallAdapterProvider adapter={props.callAdapter}>\n <PeoplePaneContent\n {...props}\n onRemoveParticipant={removeParticipantFromCall}\n / @conditional-compile-remove(PSTN-calls) /\n onAddParticipant={addParticipantToCall}\n setDrawerMenuItems={setDrawerMenuItems}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n alternateCallerId={alternateCallerId}\n />\n </CallAdapterProvider>\n </Stack>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n {props.mobileView && (\n <ModalLocalAndRemotePIP\n callAdapter={props.callAdapter}\n modalLayerHostId={props.modalLayerHostId}\n hidden={hidden}\n styles={pipStyles}\n minDragPosition={minMaxDragPosition.minDragPosition}\n maxDragPosition={minMaxDragPosition.maxDragPosition}\n />\n )}\n {drawerMenuItems.length > 0 && (\n <Stack styles={drawerContainerStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n </Stack>\n )}\n </Stack>\n );\n};\n\n/\n Active tab option type for {@link CallPane} component\n * @private\n /\n/* @beta */\nexport type CallPaneOption = 'none' \| 'people';\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/HoldPane.js CHANGED Viewed

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { PrimaryButton, Spinner, Stack, Text } from '@fluentui/react';
+import { PrimaryButton, Stack, Text } from '@fluentui/react';
 import React, { useRef, useState } from 'react';
 import { useLocale } from '../../localization';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -39,14 +39,11 @@ export const HoldPane = () => {
             clearInterval(interval);
         };
     }, [startTime]);
-    const resumeSpinner = () => {
-        return React.createElement(Spinner, { label: strings.resumingCallButtonLabel, labelPosition: 'right' });
-    };
     return (React.createElement(Stack, { styles: paneStyles },
         React.createElement(Stack, { horizontal: true, styles: holdPaneContentStyles },
             React.createElement(Text, { styles: holdPaneTimerStyles }, elapsedTime),
             React.createElement(Text, { styles: holdPaneLabelStyles }, strings.holdScreenLabel),
-            React.createElement(PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : undefined, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+            React.createElement(PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                     setResumingCall(true);
                     try {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -56,7 +53,7 @@ export const HoldPane = () => {
                         setResumingCall(false);
                         throw e;
                     }
-                }), "data-ui-id": "hold-page-resume-call-button" }, resumingCall && resumeSpinner()))));
+                }), "data-ui-id": "hold-page-resume-call-button" }))));
 };
 const getMinutes = (time) => {
     return Math.floor(getSeconds(time) / 60);

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/HoldPane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HoldPane.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/HoldPane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,aAAa,EAAE,~~OAAO,EAAE,~~KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;~~AAEtE~~,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,6CAA6C,CAAC,mDAAmD;AACjG,OAAO,EAAE,UAAU,EAAE,4CAAmC;AACxD,6CAA6C,CAAC,mDAAmD;AACjG,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,UAAU,EACV,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AAUnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAgB,EAAE;IACxC,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,OAAO,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEjE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,~~MAAM,aAAa,GAAG,GAAgB,EAAE;QACtC,~~OAAO,~~oBAAC,OAAO,IAAC,KAAK,EAAE,OAAO,CAAC,uBAAuB,EAAE,aAAa,EAAE,OAAO,GAAI,CAAC;IACrF,CAAC,CAAC;IAEF,OAAO,~~CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU;QACvB,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB;YAC7C,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,WAAW,CAAQ;YACvD,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,CAAC,eAAe,CAAQ;YACnE,oBAAC,aAAa,IACZ,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,~~SAAS~~,~~EAC/D~~,SAAS,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,2BAA2B,EAClG,MAAM,EAAE,kBAAkB,EAC1B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,GAAS,EAAE;oBAClB,eAAe,CAAC,IAAI,CAAC,CAAC;oBACtB,IAAI;wBACF,6CAA6C,CAAC,mDAAmD;wBACjG,MAAM,eAAe,CAAC,YAAY,EAAE,CAAC;qBACtC;oBAAC,OAAO,CAAC,EAAE;wBACV,eAAe,CAAC,KAAK,CAAC,CAAC;wBACvB,MAAM,CAAC,CAAC;qBACT;gBACH,CAAC,CAAA,gBACU,8BAA8B,~~IAExC~~,~~YAAY~~,~~IAAI,aAAa,EAAE,CAClB,CACV,~~CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE;IAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE;IAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IACxC,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAY,EAAU,EAAE;IACtD,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,eAAe,GAAG,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,eAAe,IAAI,eAAe,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,MAAuB,EAAmB,EAAE;IACrE,6CAA6C,CAAC,mDAAmD;IACjG,OAAO;QACL,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe;QACpD,qBAAqB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;QAChE,yBAAyB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB;QACxE,uBAAuB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,uBAAuB;QACpE,2BAA2B,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B;KAC7E,CAAC;IACF,OAAO;QACL,eAAe,EAAE,EAAE;QACnB,qBAAqB,EAAE,EAAE;QACzB,yBAAyB,EAAE,EAAE;QAC7B,uBAAuB,EAAE,EAAE;QAC3B,2BAA2B,EAAE,EAAE;KAChC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PrimaryButton, ~~Spinner,~~ Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useRef, useState } from 'react';\nimport { CompositeLocale, useLocale } from '../../localization';\n/* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { HoldButton } from '@internal/react-components';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport {\n holdPaneContentStyles,\n holdPaneLabelStyles,\n holdPaneTimerStyles,\n paneStyles,\n resumeButtonStyles\n} from '../styles/HoldPane.styles';\n\ninterface HoldPaneStrings {\n holdScreenLabel: string;\n resumeCallButtonLabel: string;\n resumeCallButtonAriaLabel: string;\n resumingCallButtonLabel: string;\n resumingCallButtonAriaLabel: string;\n}\n\n/\n Hold pane to display when the user places themselves on hold\n \n @beta\n /\nexport const HoldPane = (): JSX.Element => {\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const holdButtonProps = usePropsFor(HoldButton);\n const locale = useLocale();\n\n const strings = stringsTrampoline(locale);\n\n const [time, setTime] = useState<number>(0);\n\n const elapsedTime = getReadableTime(time);\n\n const startTime = useRef(performance.now());\n const [resumingCall, setResumingCall] = useState<boolean>(false);\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n setTime(performance.now() - startTime.current);\n }, 10);\n return () => {\n clearInterval(interval);\n };\n }, [startTime]);\n\n ~~const resumeSpinner = (): JSX.Element => {\n~~ return ~~<Spinner label={strings.resumingCallButtonLabel} labelPosition={'right'} />;\n };\n\n return~~ (\n <Stack styles={paneStyles}>\n <Stack horizontal styles={holdPaneContentStyles}>\n <Text styles={holdPaneTimerStyles}>{elapsedTime}</Text>\n <Text styles={holdPaneLabelStyles}>{strings.holdScreenLabel}</Text>\n <PrimaryButton\n text={!resumingCall ? strings.resumeCallButtonLabel : ~~undefined~~}\n ariaLabel={!resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel}\n styles={resumeButtonStyles}\n disabled={resumingCall}\n onClick={async () => {\n setResumingCall(true);\n try {\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n await holdButtonProps.onToggleHold();\n } catch (e) {\n setResumingCall(false);\n throw e;\n }\n }}\n data-ui-id=\"hold-page-resume-call-button\"\n ~~>\n {resumingCall && resumeSpinner()}\n </~~PrimaryButton>\n </Stack>\n </Stack>\n );\n};\n\nconst getMinutes = (time: number): number => {\n return Math.floor(getSeconds(time) / 60);\n};\n\nconst getSeconds = (time: number): number => {\n return Math.floor(time / 1000);\n};\n\nconst getHours = (time: number): number => {\n return Math.floor(getMinutes(time) / 60);\n};\n\n/\n @internal\n /\nexport const getReadableTime = (time: number): string => {\n const hours = getHours(time);\n const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);\n const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);\n return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;\n};\n\nconst stringsTrampoline = (locale: CompositeLocale): HoldPaneStrings => {\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) */\n return {\n holdScreenLabel: locale.strings.call.holdScreenLabel,\n resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel,\n resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel,\n resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel,\n resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel\n };\n return {\n holdScreenLabel: '',\n resumeCallButtonLabel: '',\n resumeCallButtonAriaLabel: '',\n resumingCallButtonLabel: '',\n resumingCallButtonAriaLabel: ''\n };\n};\n\"../../../../../acs-ui-common/src\"\"../../../../../react-components/src\""]}
1	+ {"version":3,"file":"HoldPane.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/HoldPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PrimaryButton, Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useRef, useState } from 'react';\nimport { CompositeLocale, useLocale } from '../../localization';\n/* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { HoldButton } from '@internal/react-components';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport {\n holdPaneContentStyles,\n holdPaneLabelStyles,\n holdPaneTimerStyles,\n paneStyles,\n resumeButtonStyles\n} from '../styles/HoldPane.styles';\n\ninterface HoldPaneStrings {\n holdScreenLabel: string;\n resumeCallButtonLabel: string;\n resumeCallButtonAriaLabel: string;\n resumingCallButtonLabel: string;\n resumingCallButtonAriaLabel: string;\n}\n\n/\n Hold pane to display when the user places themselves on hold\n \n @beta\n /\nexport const HoldPane = (): JSX.Element => {\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const holdButtonProps = usePropsFor(HoldButton);\n const locale = useLocale();\n\n const strings = stringsTrampoline(locale);\n\n const [time, setTime] = useState<number>(0);\n\n const elapsedTime = getReadableTime(time);\n\n const startTime = useRef(performance.now());\n const [resumingCall, setResumingCall] = useState<boolean>(false);\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n setTime(performance.now() - startTime.current);\n }, 10);\n return () => {\n clearInterval(interval);\n };\n }, [startTime]);\n\n return (\n <Stack styles={paneStyles}>\n <Stack horizontal styles={holdPaneContentStyles}>\n <Text styles={holdPaneTimerStyles}>{elapsedTime}</Text>\n <Text styles={holdPaneLabelStyles}>{strings.holdScreenLabel}</Text>\n <PrimaryButton\n text={!resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel}\n ariaLabel={!resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel}\n styles={resumeButtonStyles}\n disabled={resumingCall}\n onClick={async () => {\n setResumingCall(true);\n try {\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n await holdButtonProps.onToggleHold();\n } catch (e) {\n setResumingCall(false);\n throw e;\n }\n }}\n data-ui-id=\"hold-page-resume-call-button\"\n ></PrimaryButton>\n </Stack>\n </Stack>\n );\n};\n\nconst getMinutes = (time: number): number => {\n return Math.floor(getSeconds(time) / 60);\n};\n\nconst getSeconds = (time: number): number => {\n return Math.floor(time / 1000);\n};\n\nconst getHours = (time: number): number => {\n return Math.floor(getMinutes(time) / 60);\n};\n\n/\n @internal\n /\nexport const getReadableTime = (time: number): string => {\n const hours = getHours(time);\n const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);\n const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);\n return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;\n};\n\nconst stringsTrampoline = (locale: CompositeLocale): HoldPaneStrings => {\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) */\n return {\n holdScreenLabel: locale.strings.call.holdScreenLabel,\n resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel,\n resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel,\n resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel,\n resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel\n };\n return {\n holdScreenLabel: '',\n resumeCallButtonLabel: '',\n resumeCallButtonAriaLabel: '',\n resumingCallButtonLabel: '',\n resumingCallButtonAriaLabel: ''\n };\n};\n\"../../../../../acs-ui-common/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/HoldPane.styles.js CHANGED Viewed

@@ -29,11 +29,12 @@ export const resumeButtonStyles = {
  */
 export const holdPaneLabelStyles = {
     root: {
-        color: '#FFFFFF',
+        color: 'inherit',
         fontWeight: 600,
         fontHeight: _pxToRem(22),
         fontSize: _pxToRem(16),
-        margin: '1rem auto 0.5rem'
+        marginTop: '0.5rem',
+        marginBottom: '1.5rem'
     }
 };
 /**
@@ -43,7 +44,7 @@ export const holdPaneLabelStyles = {
  */
 export const holdPaneTimerStyles = {
     root: {
-        color: '#FFFFFF',
+        color: 'inherit',
         fontWeight: 600,
         fontSize: _pxToRem(20),
         lineHeight: _pxToRem(28),
@@ -59,7 +60,7 @@ export const paneStyles = {
     root: {
         width: '100%',
         height: '100%',
-        background: 'rgba(0, 0, 0, 0.5)'
+        background: 'inherit'
     }
 };
 /**
@@ -72,7 +73,9 @@ export const holdPaneContentStyles = {
         display: 'flex',
         margin: 'auto',
         flexDirection: 'column',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center'
     }
 };
 //# sourceMappingURL=HoldPane.styles.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/HoldPane.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HoldPane.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/HoldPane.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAkB;IAC/C,IAAI,EAAE;QACJ,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;QACzB,OAAO,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,EAAE,CAAC,GAAG;KAC3C;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;KACvB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;KACvB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,~~MAAM~~,EAAE,~~kBAAkB~~;~~KAC3B~~;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiB;IACtC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,~~oBAAoB~~;~~KACjC~~;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiB;IACjD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ;~~KACzB~~;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IStackStyles, ITextStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n styles for hold pane resume button\n \n @private\n /\nexport const resumeButtonStyles: IButtonStyles = {\n root: {\n borderRadius: _pxToRem(4),\n padding: `${_pxToRem(6)} ${_pxToRem(20)} `\n },\n label: {\n fontWeight: 400,\n display: 'flex',\n fontSize: _pxToRem(14)\n },\n labelDisabled: {\n fontWeight: 400,\n display: 'flex',\n fontSize: _pxToRem(14)\n }\n};\n\n/\n styles for hold pane main text\n \n @private\n /\nexport const holdPaneLabelStyles: ITextStyles = {\n root: {\n color: '~~#FFFFFF~~',\n fontWeight: 600,\n fontHeight: _pxToRem(22),\n fontSize: _pxToRem(16),\n ~~margin~~: '~~1rem auto~~ 0.5rem'\n }\n};\n\n/\n styles for hold pane timer\n \n @private\n /\nexport const holdPaneTimerStyles: ITextStyles = {\n root: {\n color: '~~#FFFFFF~~',\n fontWeight: 600,\n fontSize: _pxToRem(20),\n lineHeight: _pxToRem(28),\n margin: 'auto'\n }\n};\n\n/\n styles for hold pane container\n \n @private\n /\nexport const paneStyles: IStackStyles = {\n root: {\n width: '100%',\n height: '100%',\n background: '~~rgba(0, 0, 0, 0.5)~~'\n }\n};\n\n/\n styles for the hold pane content container\n \n @private\n */\nexport const holdPaneContentStyles: IStackStyles = {\n root: {\n display: 'flex',\n margin: 'auto',\n flexDirection: 'column',\n justifyContent: 'center'\n }\n};\n\"../../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"HoldPane.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/HoldPane.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAkB;IAC/C,IAAI,EAAE;QACJ,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;QACzB,OAAO,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,EAAE,CAAC,GAAG;KAC3C;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;KACvB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;KACvB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,SAAS,EAAE,QAAQ;QACnB,YAAY,EAAE,QAAQ;KACvB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiB;IACtC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,SAAS;KACtB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiB;IACjD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ;QACxB,YAAY,EAAE,QAAQ;QACtB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IStackStyles, ITextStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n styles for hold pane resume button\n \n @private\n /\nexport const resumeButtonStyles: IButtonStyles = {\n root: {\n borderRadius: _pxToRem(4),\n padding: `${_pxToRem(6)} ${_pxToRem(20)} `\n },\n label: {\n fontWeight: 400,\n display: 'flex',\n fontSize: _pxToRem(14)\n },\n labelDisabled: {\n fontWeight: 400,\n display: 'flex',\n fontSize: _pxToRem(14)\n }\n};\n\n/\n styles for hold pane main text\n \n @private\n /\nexport const holdPaneLabelStyles: ITextStyles = {\n root: {\n color: 'inherit',\n fontWeight: 600,\n fontHeight: _pxToRem(22),\n fontSize: _pxToRem(16),\n marginTop: '0.5rem',\n marginBottom: '1.5rem'\n }\n};\n\n/\n styles for hold pane timer\n \n @private\n /\nexport const holdPaneTimerStyles: ITextStyles = {\n root: {\n color: 'inherit',\n fontWeight: 600,\n fontSize: _pxToRem(20),\n lineHeight: _pxToRem(28),\n margin: 'auto'\n }\n};\n\n/\n styles for hold pane container\n \n @private\n /\nexport const paneStyles: IStackStyles = {\n root: {\n width: '100%',\n height: '100%',\n background: 'inherit'\n }\n};\n\n/\n styles for the hold pane content container\n \n @private\n */\nexport const holdPaneContentStyles: IStackStyles = {\n root: {\n display: 'flex',\n margin: 'auto',\n flexDirection: 'column',\n justifyContent: 'center',\n alignContent: 'center',\n alignItems: 'center'\n }\n};\n\"../../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.d.ts CHANGED Viewed

@@ -38,4 +38,14 @@ export declare const IsCallEndedPage: (page: 'accessDeniedTeamsMeeting' | 'call'
  * @private
  */
 export declare const disableCallControls: (callControlOptions: CallControlOptions | boolean | undefined, disabledControls: (keyof CallControlOptions)[]) => CallControlOptions | boolean | undefined;
+/**
+ * Check if a disabled object is provided for a button and returns if the button is disabled.
+ *
+ * @param option
+ * @returns whether a button is disabled
+ * @private
+ */
+export declare const isDisabled: (option?: boolean | {
+    disabled: boolean;
+} | undefined) => boolean;
 //# sourceMappingURL=Utils.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js CHANGED Viewed

@@ -2,8 +2,10 @@
 // Licensed under the MIT license.
 import { END_CALL_PAGES } from '../adapter/CallAdapter';
 import { _isInCall, _isPreviewOn, _isInLobbyOrConnecting } from "../../../../../calling-component-bindings/src";
+import { isPhoneNumberIdentifier } from '@azure/communication-common';
 const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
-const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300];
+const REMOTE_PSTN_USER_HUNG_UP = 560000;
+const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
 /**
  * @private
  */
@@ -48,11 +50,23 @@ var CallEndReasons;
     CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
 })(CallEndReasons || (CallEndReasons = {}));
 const getCallEndReason = (call) => {
-    var _a, _b;
-    if (((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
+    var _a, _b, _c;
+    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
+    /**
+     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
+     * The code and subcode is the same as when a user is removed from a teams interop call.
+     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
+     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
+     */
+    if (remoteParticipantsEndedArray.length === 1 &&
+        isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
+        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
+        return CallEndReasons.LEFT_CALL;
+    }
+    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
         return CallEndReasons.ACCESS_DENIED;
     }
-    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
+    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
         return CallEndReasons.REMOVED_FROM_CALL;
     }
     if (call.callEndReason) {
@@ -160,4 +174,17 @@ export const disableCallControls = (callControlOptions, disabledControls) => {
     }
     return newOptions;
 };
+/**
+ * Check if a disabled object is provided for a button and returns if the button is disabled.
+ *
+ * @param option
+ * @returns whether a button is disabled
+ * @private
+ */
+export const isDisabled = (option) => {
+    if (typeof option !== 'boolean') {
+        return !!(option === null || option === void 0 ? void 0 : option.disabled);
+    }
+    return option;
+};
 //# sourceMappingURL=Utils.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/Utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CallAdapterState, CallCompositePage, END_CALL_PAGES } from '../adapter/CallAdapter';\nimport { _isInCall, _isPreviewOn, _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport { CallControlOptions } from '../types/CallControlOptions';\nimport { CallState } from '@internal/calling-stateful-client';\n\nconst ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;\nconst REMOVED_FROM_CALL_SUB_CODES = [5000, 5300];\n\n/*\n @private\n /\nexport const isCameraOn = (state: CallAdapterState): boolean => {\n if (state.call) {\n const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');\n return !!stream;\n } else {\n if (state.devices.selectedCamera) {\n const previewOn = _isPreviewOn(state.devices);\n return previewOn;\n }\n }\n return false;\n};\n\n/\n Reduce the set of call controls visible on mobile.\n * For example do not show screenshare button.\n \n @private\n /\nexport const reduceCallControlsForMobile = (\n callControlOptions: CallControlOptions \| boolean \| undefined\n): CallControlOptions \| false => {\n if (callControlOptions === false) {\n return false;\n }\n\n // Ensure call controls a valid object.\n const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions \|\| {};\n\n // Set to compressed mode when composite is optimized for mobile\n reduceCallControlOptions.displayType = 'compact';\n\n // Do not show screen share button when composite is optimized for mobile unless the developer\n // has explicitly opted in.\n if (reduceCallControlOptions.screenShareButton !== true) {\n reduceCallControlOptions.screenShareButton = false;\n }\n\n return reduceCallControlOptions;\n};\n\nenum CallEndReasons {\n LEFT_CALL,\n ACCESS_DENIED,\n REMOVED_FROM_CALL\n}\n\nconst getCallEndReason = (call: CallState): CallEndReasons => {\n if (call.callEndReason?.subCode && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {\n return CallEndReasons.ACCESS_DENIED;\n }\n\n if (call.callEndReason?.subCode && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {\n return CallEndReasons.REMOVED_FROM_CALL;\n }\n\n if (call.callEndReason) {\n // No error codes match, assume the user simply left the call regularly\n return CallEndReasons.LEFT_CALL;\n }\n\n throw new Error('No matching call end reason');\n};\n\n/\n Get the current call composite page based on the current call composite state\n \n @param Call - The current call state\n * @param previousCall - The state of the most recent previous call that has ended.\n \n @remarks - The previousCall state is needed to determine if the call has ended.\n * When the call ends a new call object is created, and so we must lookback at the\n * previous call state to understand how the call has ended. If there is no previous\n * call we know that this is a fresh call and can display the configuration page.\n \n @private\n /\nexport const getCallCompositePage = (\n call: CallState \| undefined,\n previousCall: CallState \| undefined\n): CallCompositePage => {\n // Must check for ongoing call before* looking at any previous calls.\n // If the composite completes one call and joins another, the previous calls\n // will be populated, but not relevant for determining the page.\n if (call) {\n // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.\n if (_isInLobbyOrConnecting(call?.state)) {\n return 'lobby';\n // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.\n } else if (call?.state === 'LocalHold') {\n /* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return 'hold';\n return 'call';\n } else if (_isInCall(call?.state)) {\n return 'call';\n } else {\n // When the call object has been constructed after clicking , but before 'connecting' has been\n // set on the call object, we continue to show the configuration screen.\n // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.\n // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect\n // transitional state.\n return 'configuration';\n }\n }\n\n if (previousCall) {\n const reason = getCallEndReason(previousCall);\n switch (reason) {\n case CallEndReasons.ACCESS_DENIED:\n return 'accessDeniedTeamsMeeting';\n case CallEndReasons.REMOVED_FROM_CALL:\n return 'removedFromCall';\n case CallEndReasons.LEFT_CALL:\n if (previousCall.diagnostics.network.latest.noNetwork) {\n return 'joinCallFailedDueToNoNetwork';\n }\n return 'leftCall';\n }\n }\n\n // No call state - show starting page (configuration)\n return 'configuration';\n};\n\n/* @private /\nexport const IsCallEndedPage = (\n /\n Explicitly listing the pages of this function intentionally.\n * This protects against adding a new composite page that should be marked as an callEndedPage.\n * EndCallPages are used to trigger onCallEnded events so this could easily be missed.\n * When you add a new composite page this will throw a compiler error. If this new page is an\n * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter\n * type below to allow your new page, i.e. add `\| <your new page>\n /\n page:\n \| 'accessDeniedTeamsMeeting'\n \| 'call'\n \| 'configuration'\n \| 'joinCallFailedDueToNoNetwork'\n \| 'leftCall'\n \| 'lobby'\n \| 'removedFromCall'\n \| / @conditional-compile-remove(PSTN-calls) / 'hold'\n): boolean => END_CALL_PAGES.includes(page);\n\n/\n Creates a new call control options object and sets the correct values for disabling\n * the buttons provided in the `disabledControls` array.\n * Returns a new object without changing the original object.\n * @param callControlOptions options for the call control component that need to be modified.\n * @param disabledControls An array of controls to disable.\n * @returns a copy of callControlOptions with disabledControls disabled\n * @private\n */\nexport const disableCallControls = (\n callControlOptions: CallControlOptions \| boolean \| undefined,\n disabledControls: (keyof CallControlOptions)[]\n): CallControlOptions \| boolean \| undefined => {\n if (callControlOptions === false) {\n return false;\n }\n // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.\n let newOptions = (callControlOptions instanceof Object ? { ...callControlOptions } : callControlOptions) ?? {};\n if (newOptions === true \|\| newOptions === undefined) {\n newOptions = disabledControls.reduce((acc, key) => {\n acc[key] = { disabled: true };\n return acc;\n }, {});\n } else {\n disabledControls.forEach((key) => {\n if (newOptions[key] !== false) {\n newOptions[key] = { disabled: true };\n }\n });\n }\n return newOptions;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../calling-stateful-client/src\""]}
1	+ {"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/Utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CallAdapterState, CallCompositePage, END_CALL_PAGES } from '../adapter/CallAdapter';\nimport { _isInCall, _isPreviewOn, _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport { CallControlOptions } from '../types/CallControlOptions';\nimport { CallState } from '@internal/calling-stateful-client';\nimport { isPhoneNumberIdentifier } from '@azure/communication-common';\n\nconst ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;\nconst REMOTE_PSTN_USER_HUNG_UP = 560000;\nconst REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];\n\n/*\n @private\n /\nexport const isCameraOn = (state: CallAdapterState): boolean => {\n if (state.call) {\n const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');\n return !!stream;\n } else {\n if (state.devices.selectedCamera) {\n const previewOn = _isPreviewOn(state.devices);\n return previewOn;\n }\n }\n return false;\n};\n\n/\n Reduce the set of call controls visible on mobile.\n * For example do not show screenshare button.\n \n @private\n /\nexport const reduceCallControlsForMobile = (\n callControlOptions: CallControlOptions \| boolean \| undefined\n): CallControlOptions \| false => {\n if (callControlOptions === false) {\n return false;\n }\n\n // Ensure call controls a valid object.\n const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions \|\| {};\n\n // Set to compressed mode when composite is optimized for mobile\n reduceCallControlOptions.displayType = 'compact';\n\n // Do not show screen share button when composite is optimized for mobile unless the developer\n // has explicitly opted in.\n if (reduceCallControlOptions.screenShareButton !== true) {\n reduceCallControlOptions.screenShareButton = false;\n }\n\n return reduceCallControlOptions;\n};\n\nenum CallEndReasons {\n LEFT_CALL,\n ACCESS_DENIED,\n REMOVED_FROM_CALL\n}\n\nconst getCallEndReason = (call: CallState): CallEndReasons => {\n const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));\n /\n Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.\n * The code and subcode is the same as when a user is removed from a teams interop call.\n * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.\n * If yes, the caller was kicked out of the call, but we need to show them that they left the call.\n /\n if (\n remoteParticipantsEndedArray.length === 1 &&\n isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&\n call.callEndReason?.subCode !== REMOTE_PSTN_USER_HUNG_UP\n ) {\n return CallEndReasons.LEFT_CALL;\n }\n\n if (call.callEndReason?.subCode && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {\n return CallEndReasons.ACCESS_DENIED;\n }\n\n if (call.callEndReason?.subCode && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {\n return CallEndReasons.REMOVED_FROM_CALL;\n }\n\n if (call.callEndReason) {\n // No error codes match, assume the user simply left the call regularly\n return CallEndReasons.LEFT_CALL;\n }\n\n throw new Error('No matching call end reason');\n};\n\n/\n Get the current call composite page based on the current call composite state\n \n @param Call - The current call state\n * @param previousCall - The state of the most recent previous call that has ended.\n \n @remarks - The previousCall state is needed to determine if the call has ended.\n * When the call ends a new call object is created, and so we must lookback at the\n * previous call state to understand how the call has ended. If there is no previous\n * call we know that this is a fresh call and can display the configuration page.\n \n @private\n /\nexport const getCallCompositePage = (\n call: CallState \| undefined,\n previousCall: CallState \| undefined\n): CallCompositePage => {\n // Must check for ongoing call before* looking at any previous calls.\n // If the composite completes one call and joins another, the previous calls\n // will be populated, but not relevant for determining the page.\n if (call) {\n // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.\n if (_isInLobbyOrConnecting(call?.state)) {\n return 'lobby';\n // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.\n } else if (call?.state === 'LocalHold') {\n /* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n return 'hold';\n return 'call';\n } else if (_isInCall(call?.state)) {\n return 'call';\n } else {\n // When the call object has been constructed after clicking , but before 'connecting' has been\n // set on the call object, we continue to show the configuration screen.\n // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.\n // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect\n // transitional state.\n return 'configuration';\n }\n }\n\n if (previousCall) {\n const reason = getCallEndReason(previousCall);\n switch (reason) {\n case CallEndReasons.ACCESS_DENIED:\n return 'accessDeniedTeamsMeeting';\n case CallEndReasons.REMOVED_FROM_CALL:\n return 'removedFromCall';\n case CallEndReasons.LEFT_CALL:\n if (previousCall.diagnostics.network.latest.noNetwork) {\n return 'joinCallFailedDueToNoNetwork';\n }\n return 'leftCall';\n }\n }\n\n // No call state - show starting page (configuration)\n return 'configuration';\n};\n\n/* @private /\nexport const IsCallEndedPage = (\n /\n Explicitly listing the pages of this function intentionally.\n * This protects against adding a new composite page that should be marked as an callEndedPage.\n * EndCallPages are used to trigger onCallEnded events so this could easily be missed.\n * When you add a new composite page this will throw a compiler error. If this new page is an\n * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter\n * type below to allow your new page, i.e. add `\| <your new page>\n /\n page:\n \| 'accessDeniedTeamsMeeting'\n \| 'call'\n \| 'configuration'\n \| 'joinCallFailedDueToNoNetwork'\n \| 'leftCall'\n \| 'lobby'\n \| 'removedFromCall'\n \| / @conditional-compile-remove(PSTN-calls) / 'hold'\n): boolean => END_CALL_PAGES.includes(page);\n\n/\n Creates a new call control options object and sets the correct values for disabling\n * the buttons provided in the `disabledControls` array.\n * Returns a new object without changing the original object.\n * @param callControlOptions options for the call control component that need to be modified.\n * @param disabledControls An array of controls to disable.\n * @returns a copy of callControlOptions with disabledControls disabled\n * @private\n /\nexport const disableCallControls = (\n callControlOptions: CallControlOptions \| boolean \| undefined,\n disabledControls: (keyof CallControlOptions)[]\n): CallControlOptions \| boolean \| undefined => {\n if (callControlOptions === false) {\n return false;\n }\n // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.\n let newOptions = (callControlOptions instanceof Object ? { ...callControlOptions } : callControlOptions) ?? {};\n if (newOptions === true \|\| newOptions === undefined) {\n newOptions = disabledControls.reduce((acc, key) => {\n acc[key] = { disabled: true };\n return acc;\n }, {});\n } else {\n disabledControls.forEach((key) => {\n if (newOptions[key] !== false) {\n newOptions[key] = { disabled: true };\n }\n });\n }\n return newOptions;\n};\n\n/\n Check if a disabled object is provided for a button and returns if the button is disabled.\n \n @param option\n * @returns whether a button is disabled\n * @private\n */\nexport const isDisabled = (option?: boolean \| { disabled: boolean }): boolean => {\n if (typeof option !== 'boolean') {\n return !!option?.disabled;\n }\n return option;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../calling-stateful-client/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.d.ts CHANGED Viewed

@@ -72,12 +72,16 @@ export interface CallWithChatControlOptions {
      * Show or Hide Microphone button during a call.
      * @defaultValue true
      */
-    microphoneButton?: boolean;
+    microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show or Hide Camera Button during a call
      * @defaultValue true
      */
-    cameraButton?: boolean;
+    cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show, Hide or Disable the screen share button during a call.
      * @defaultValue true
@@ -94,12 +98,16 @@ export interface CallWithChatControlOptions {
      * Show or hide the chat button in the call-with-chat composite control bar.
      * @defaultValue true
      */
-    chatButton?: boolean;
+    chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show or hide the people button in the call-with-chat composite control bar.
      * @defaultValue true
      */
-    peopleButton?: boolean;
+    peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Inject custom buttons in the call controls.
      *
@@ -113,7 +121,9 @@ export interface CallWithChatControlOptions {
     /**
      * Show or hide the hold button in the bottom sheet drawer
      */
-    holdButton?: boolean;
+    holdButton?: boolean | {
+        disabled: boolean;
+    };
 }
 /**
  * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.