@azure/communication-react 1.18.0-beta.1 → 1.19.0-alpha-202407230014

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prompt.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/Prompt.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAiB,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAS,WAAW,EAAgB,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACjK,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAe,EAAE;;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,eAAe,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IAChE,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK;QAC7F,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC;gBAC9B,QAAQ,EAAE,UAAU;aACrB,CAAC;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC;oBAC7B,UAAU,EAAE,GAAG;oBACf,QAAQ,EAAE,SAAS;iBACpB,CAAC,IAAG,KAAK,CAAC,OAAO,CAAQ;YACxB,oBAAC,UAAU,IAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;oBACxD,QAAQ,EAAE,QAAQ;iBACnB,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,CACtB;QACR,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC;gBACrD,SAAS,EAAE,MAAM;aAClB,CAAC;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC;oBAC7B,QAAQ,EAAE,UAAU;iBACrB,CAAC,IAAG,KAAK,CAAC,IAAI,CAAQ,CACf;QACR,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAE;gBAChD,WAAW,EAAE,QAAQ;aACtB;YACG,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,GAAI;YACrG,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC7F,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IACzD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KACpC;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;KACjC;CACF,CAAC,CAAC;AACH,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC;AACF,MAAM,gBAAgB,GAAkB;IACtC,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButtonStyles, IconButton, Modal, PrimaryButton, Stack, Text, Theme, mergeStyles, IModalStyles, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React from 'react';\n\n/**\n * @private\n */\nexport interface PromptProps {\n  isOpen?: boolean;\n  onDismiss?: () => void;\n  heading?: string;\n  text?: string;\n  confirmButtonLabel?: string;\n  cancelButtonLabel?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  styles?: Partial<IModalStyles>;\n}\n\n/**\n * @private\n */\nexport const Prompt = (props: PromptProps): JSX.Element => {\n  const theme = useTheme();\n  const styles = concatStyleSets(modalStyles, props.styles ?? {});\n  return <Modal styles={styles} isOpen={props.isOpen} onDismiss={props.onDismiss} isBlocking={false}>\n      <Stack className={mergeStyles({\n      position: 'relative'\n    })}>\n        <Text className={mergeStyles({\n        fontWeight: 600,\n        fontSize: '1.25rem'\n      })}>{props.heading}</Text>\n        <IconButton styles={iconButtonStyles(theme)} iconProps={{\n        iconName: 'Cancel'\n      }} onClick={props.onCancel} />\n      </Stack>\n      <Stack verticalAlign=\"center\" className={mergeStyles({\n      minHeight: '6rem'\n    })}>\n        <Text className={mergeStyles({\n        fontSize: '0.875rem'\n      })}>{props.text}</Text>\n      </Stack>\n      <Stack horizontal horizontalAlign=\"end\" tokens={{\n      childrenGap: '0.5rem'\n    }}>\n        <PrimaryButton styles={buttonTextStyles} text={props.confirmButtonLabel} onClick={props.onConfirm} />\n        <DefaultButton styles={buttonTextStyles} text={props.cancelButtonLabel} onClick={props.onCancel} />\n      </Stack>\n    </Modal>;\n};\nconst iconButtonStyles = (theme: Theme): IButtonStyles => ({\n  root: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    color: theme.palette.neutralPrimary\n  },\n  rootHovered: {\n    color: theme.palette.neutralDark\n  }\n});\nconst modalStyles = {\n  main: {\n    padding: '1.5rem ',\n    maxWidth: '30rem'\n  }\n};\nconst buttonTextStyles: IButtonStyles = {\n  label: {\n    fontSize: '0.875rem'\n  }\n};\n\n/**\n * Strings used in prompt related to spotlight\n * @public\n */\nexport interface SpotlightPromptStrings {\n  /**\n   * Heading for prompt when starting spotlight on participant\n   */\n  startSpotlightHeading: string;\n  /**\n   * Text for prompt when starting spotlight on participant\n   */\n  startSpotlightText: string;\n  /**\n   * Label for button to confirm starting spotlight on local user in prompt\n   */\n  startSpotlightOnSelfText: string;\n  /**\n   * Label for button to confirm starting spotlight on participant in prompt\n   */\n  startSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel starting spotlight on participant in prompt\n   */\n  startSpotlightCancelButtonLabel: string;\n  /**\n   * Heading for prompt when stopping spotlight on participant\n   */\n  stopSpotlightHeading: string;\n  /**\n   * Heading for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfHeading: string;\n  /**\n   * Heading for prompt when stopping all spotlight\n   */\n  stopAllSpotlightHeading: string;\n  /**\n   * Text for prompt when stopping spotlight on participant\n   */\n  stopSpotlightText: string;\n  /**\n   * Text for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfText: string;\n  /**\n   * Text for prompt when stopping all spotlight\n   */\n  stopAllSpotlightText: string;\n  /**\n   * Label for button to confirm stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to confirm stopping spotlight on local user in prompt\n   */\n  stopSpotlightOnSelfConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightCancelButtonLabel: string;\n}"]}
+{"version":3,"file":"Prompt.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/Prompt.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,aAAa,EAEb,UAAU,EACV,KAAK,EACL,aAAa,EACb,KAAK,EACL,IAAI,EAEJ,WAAW,EAEX,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAe,EAAE;;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,eAAe,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK;QACxF,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;YACrD,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,IAAG,KAAK,CAAC,OAAO,CAAQ;YAC9F,oBAAC,UAAU,IAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,CACrG;QACR,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;YACzE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,IAAG,KAAK,CAAC,IAAI,CAAQ,CACrE;QACR,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;YACvE,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,GAAI;YACrG,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC7F,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IACzD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KACpC;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;KACjC;CACF,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC;AAExE,MAAM,gBAAgB,GAAkB,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButtonStyles,\n  IconButton,\n  Modal,\n  PrimaryButton,\n  Stack,\n  Text,\n  Theme,\n  mergeStyles,\n  IModalStyles,\n  concatStyleSets\n} from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React from 'react';\n\n/**\n * @private\n */\nexport interface PromptProps {\n  isOpen?: boolean;\n  onDismiss?: () => void;\n  heading?: string;\n  text?: string;\n  confirmButtonLabel?: string;\n  cancelButtonLabel?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  styles?: Partial<IModalStyles>;\n}\n\n/**\n * @private\n */\nexport const Prompt = (props: PromptProps): JSX.Element => {\n  const theme = useTheme();\n  const styles = concatStyleSets(modalStyles, props.styles ?? {});\n\n  return (\n    <Modal styles={styles} isOpen={props.isOpen} onDismiss={props.onDismiss} isBlocking={false}>\n      <Stack className={mergeStyles({ position: 'relative' })}>\n        <Text className={mergeStyles({ fontWeight: 600, fontSize: '1.25rem' })}>{props.heading}</Text>\n        <IconButton styles={iconButtonStyles(theme)} iconProps={{ iconName: 'Cancel' }} onClick={props.onCancel} />\n      </Stack>\n      <Stack verticalAlign=\"center\" className={mergeStyles({ minHeight: '6rem' })}>\n        <Text className={mergeStyles({ fontSize: '0.875rem' })}>{props.text}</Text>\n      </Stack>\n      <Stack horizontal horizontalAlign=\"end\" tokens={{ childrenGap: '0.5rem' }}>\n        <PrimaryButton styles={buttonTextStyles} text={props.confirmButtonLabel} onClick={props.onConfirm} />\n        <DefaultButton styles={buttonTextStyles} text={props.cancelButtonLabel} onClick={props.onCancel} />\n      </Stack>\n    </Modal>\n  );\n};\n\nconst iconButtonStyles = (theme: Theme): IButtonStyles => ({\n  root: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    color: theme.palette.neutralPrimary\n  },\n  rootHovered: {\n    color: theme.palette.neutralDark\n  }\n});\n\nconst modalStyles = { main: { padding: '1.5rem ', maxWidth: '30rem' } };\n\nconst buttonTextStyles: IButtonStyles = { label: { fontSize: '0.875rem' } };\n\n/**\n * Strings used in prompt related to spotlight\n * @public\n */\nexport interface SpotlightPromptStrings {\n  /**\n   * Heading for prompt when starting spotlight on participant\n   */\n  startSpotlightHeading: string;\n  /**\n   * Text for prompt when starting spotlight on participant\n   */\n  startSpotlightText: string;\n  /**\n   * Label for button to confirm starting spotlight on local user in prompt\n   */\n  startSpotlightOnSelfText: string;\n  /**\n   * Label for button to confirm starting spotlight on participant in prompt\n   */\n  startSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel starting spotlight on participant in prompt\n   */\n  startSpotlightCancelButtonLabel: string;\n  /**\n   * Heading for prompt when stopping spotlight on participant\n   */\n  stopSpotlightHeading: string;\n  /**\n   * Heading for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfHeading: string;\n  /**\n   * Heading for prompt when stopping all spotlight\n   */\n  stopAllSpotlightHeading: string;\n  /**\n   * Text for prompt when stopping spotlight on participant\n   */\n  stopSpotlightText: string;\n  /**\n   * Text for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfText: string;\n  /**\n   * Text for prompt when stopping all spotlight\n   */\n  stopAllSpotlightText: string;\n  /**\n   * Label for button to confirm stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to confirm stopping spotlight on local user in prompt\n   */\n  stopSpotlightOnSelfConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightCancelButtonLabel: string;\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js

@@ -11,10 +11,16 @@ import { hiddenStyles } from '../../../common/styles/Pane.styles';
 export const SidePane = (props) => {
     var _a;
     const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();
-    const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;
+    const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) &&
+        overrideSidePane.persistRenderingWhenClosed &&
+        !overrideSidePane.isActive;
     const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;
     const widthConstrainedStyles = useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);
-    const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : widthConstrainedStyles;
+    const paneStyles = renderingOnlyHiddenContent
+        ? hiddenStyles
+        : props.mobileView
+            ? availableSpaceStyles
+            : widthConstrainedStyles;
     const Header = (_a = ((overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.headerRenderer)) !== null && _a !== void 0 ? _a : EmptyElement;
     /**
      * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.
@@ -27,26 +33,38 @@ export const SidePane = (props) => {
     }, [updateSidePaneRenderer]);
     const LegacyHeader = useMemo(() => {
         var _a;
-        return React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat', 
+        return (React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat', 
             // legacy arguments to be removed in breaking change:
-            disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked });
-    }, [overrideSidePaneId, props.onChatButtonClicked, props.onPeopleButtonClicked, props.disablePeopleButton, props.disableChatButton, sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id, closePane]);
+            disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked }));
+    }, [
+        overrideSidePaneId,
+        props.onChatButtonClicked,
+        props.onPeopleButtonClicked,
+        props.disablePeopleButton,
+        props.disableChatButton,
+        sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id,
+        closePane
+    ]);
     const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people') ? LegacyHeader : Header();
     const ContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? undefined : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.contentRenderer;
-    const OverrideContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? overrideSidePane.renderer.contentRenderer : undefined;
+    const OverrideContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed)
+        ? overrideSidePane.renderer.contentRenderer
+        : undefined;
     if (!ContentRender && !OverrideContentRender) {
         return React.createElement(EmptyElement, null);
     }
-    return React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
+    return (React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
         HeaderToRender,
         React.createElement(Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
             React.createElement(Stack, { verticalFill: true, styles: scrollableContainer },
-                ContentRender && React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
+                ContentRender && (React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React.createElement(Stack, { styles: containerContextStyles },
-                        React.createElement(ContentRender, null))),
-                OverrideContentRender && React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? hiddenStyles : scrollableContainerContents },
+                        React.createElement(ContentRender, null)))),
+                OverrideContentRender && (React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed)
+                        ? hiddenStyles
+                        : scrollableContainerContents },
                     React.createElement(Stack, { styles: containerContextStyles },
-                        React.createElement(OverrideContentRender, null))))));
+                        React.createElement(OverrideContentRender, null))))))));
 };
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,oDAAoD,CAAC;AACjK,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC1G,OAAO,EAAoB,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAgBlE,eAAe;AACf,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,EACJ,gBAAgB,EAChB,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,MAAM,8BAA8B,GAAG,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAC,eAAe,KAAI,gBAAgB,CAAC,0BAA0B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;IAC/J,MAAM,0BAA0B,GAAG,8BAA8B,IAAI,CAAC,gBAAgB,CAAC;IACvF,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/H,MAAM,UAAU,GAAG,0BAA0B,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAChI,MAAM,MAAM,GAAG,MAAA,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,EAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,cAAc,CAAC,mCAAI,YAAY,CAAC;IAE1I;;;OAGG;IACH,MAAM,kBAAkB,GAAG,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,EAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACjG,MAAM,EACJ,sBAAsB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC7B,MAAM,YAAY,GAAG,OAAO,CAAC,GAAgB,EAAE;;QAC7C,OAAO,oBAAC,mBAAmB,IAAC,OAAO,EAAE,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,mBAAmB,mCAAI,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACpL,qDAAqD;YACrD,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAAE,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAAE,qBAAqB,EAAE,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,EAAE,mBAAmB,EAAE,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,mBAAmB,GAAI,CAAC;IACvR,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;IACtK,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,IAAI,CAAC,kBAAkB,KAAK,MAAM,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;IAC1I,MAAM,aAAa,GAAG,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,eAAe,CAAC;IACjG,MAAM,qBAAqB,GAAG,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,MAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,0BAA0B,CAAA,CAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IACjK,IAAI,CAAC,aAAa,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7C,OAAO,oBAAC,YAAY,OAAG,CAAC;IAC1B,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,YAAY,QAAC,IAAI,QAAC,MAAM,EAAE,UAAU,gBAAa,UAAU,EAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;QACnH,cAAc;QACf,oBAAC,KAAK,CAAC,IAAI,IAAC,YAAY,QAAC,IAAI,QAAC,MAAM,EAAE,iBAAiB;YACrD,oBAAC,KAAK,IAAC,YAAY,QAAC,MAAM,EAAE,mBAAmB;gBAC5C,aAAa,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,YAAY,QAAC,MAAM,EAAE,2BAA2B;oBAC1E,oBAAC,KAAK,IAAC,MAAM,EAAE,sBAAsB;wBACnC,oBAAC,aAAa,OAAG,CACX,CACG;gBACd,qBAAqB,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,YAAY,QAAC,MAAM,EAAE,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,0BAA0B,CAAA,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,2BAA2B;oBAC/K,oBAAC,KAAK,IAAC,MAAM,EAAE,sBAAsB;wBACnC,oBAAC,qBAAqB,OAAG,CACnB,CACG,CACT,CACG,CACP,CAAC;AACb,CAAC,CAAC;AAEF,gEAAgE;AAChE,MAAM,IAAI,GAAG,GAAS,EAAE,GAAE,CAAC,CAAC;AAC5B,MAAM,YAAY,GAAG,GAAgB,EAAE,CAAC,yCAAK,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport { containerContextStyles, paneBodyContainer, scrollableContainer, scrollableContainerContents } from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n  minWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  const renderingHiddenOverrideContent = overrideSidePane?.renderer.contentRenderer && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n  const widthConstrainedStyles = useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);\n  const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : widthConstrainedStyles;\n  const Header = (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ?? EmptyElement;\n\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const {\n    updateSidePaneRenderer\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n  const LegacyHeader = useMemo((): JSX.Element => {\n    return <PeopleAndChatHeader onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane} activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n    // legacy arguments to be removed in breaking change:\n    disablePeopleButton={props.disablePeopleButton} disableChatButton={props.disableChatButton} onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked} onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked} />;\n  }, [overrideSidePaneId, props.onChatButtonClicked, props.onPeopleButtonClicked, props.disablePeopleButton, props.disableChatButton, sidePaneRenderer?.id, closePane]);\n  const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender = overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed ? overrideSidePane.renderer.contentRenderer : undefined;\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n  return <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>}\n          {OverrideContentRender && <Stack.Item verticalFill styles={!overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed ? hiddenStyles : scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>}\n        </Stack>\n      </Stack.Item>\n    </Stack>;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;"]}
+{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport {\n  containerContextStyles,\n  paneBodyContainer,\n  scrollableContainer,\n  scrollableContainerContents\n} from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n  minWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  const renderingHiddenOverrideContent =\n    overrideSidePane?.renderer.contentRenderer &&\n    overrideSidePane.persistRenderingWhenClosed &&\n    !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n\n  const widthConstrainedStyles = useMemo(\n    () => sidePaneStyles(props.maxWidth, props.minWidth),\n    [props.maxWidth, props.minWidth]\n  );\n  const paneStyles = renderingOnlyHiddenContent\n    ? hiddenStyles\n    : props.mobileView\n      ? availableSpaceStyles\n      : widthConstrainedStyles;\n\n  const Header =\n    (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ??\n    EmptyElement;\n\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const { updateSidePaneRenderer } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n\n  const LegacyHeader = useMemo((): JSX.Element => {\n    return (\n      <PeopleAndChatHeader\n        onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane}\n        activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n        // legacy arguments to be removed in breaking change:\n        disablePeopleButton={props.disablePeopleButton}\n        disableChatButton={props.disableChatButton}\n        onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked}\n        onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked}\n      />\n    );\n  }, [\n    overrideSidePaneId,\n    props.onChatButtonClicked,\n    props.onPeopleButtonClicked,\n    props.disablePeopleButton,\n    props.disableChatButton,\n    sidePaneRenderer?.id,\n    closePane\n  ]);\n\n  const HeaderToRender =\n    props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender =\n    overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed\n      ? overrideSidePane.renderer.contentRenderer\n      : undefined;\n\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n\n  return (\n    <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && (\n            <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n          {OverrideContentRender && (\n            <Stack.Item\n              verticalFill\n              styles={\n                !overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed\n                  ? hiddenStyles\n                  : scrollableContainerContents\n              }\n            >\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n        </Stack>\n      </Stack.Item>\n    </Stack>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EACJ,gBAAgB,EAChB,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EACJ,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const {\n    sidePaneRenderer\n  } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};"]}
+{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACpE,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAClD,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\n\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const { sidePaneRenderer } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useMeetingPhoneInfo.d.ts

@@ -0,0 +1,13 @@
+import { SidePaneRenderer } from './SidePaneProvider';
+import { ConferencePhoneInfo } from "../../../../../../react-components/src";
+/** @private */
+export declare const useMeetingPhoneInfoPane: (props: {
+    updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
+    mobileView?: boolean;
+    conferencePhoneInfo?: ConferencePhoneInfo[];
+}) => {
+    openMeetingPhoneInfoPane: () => void;
+    closeMeetingPhoneInfoPane: () => void;
+    isMeetingPhoneInfoPaneOpen: boolean;
+};
+//# sourceMappingURL=useMeetingPhoneInfo.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useMeetingPhoneInfo.js

@@ -0,0 +1,49 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(teams-meeting-conference) */
+import React, { useCallback, useEffect, useMemo } from 'react';
+/* @conditional-compile-remove(teams-meeting-conference) */
+import { useIsParticularSidePaneOpen } from './SidePaneProvider';
+/* @conditional-compile-remove(teams-meeting-conference) */
+import { SidePaneHeader } from '../../../common/SidePaneHeader';
+/* @conditional-compile-remove(teams-meeting-conference) */
+import { MeetingPhoneInfoPaneContent } from '../../../common/MeetingPhoneInfoPaneContent';
+/* @conditional-compile-remove(teams-meeting-conference) */
+import { useLocale } from '../../../localization';
+/* @conditional-compile-remove(teams-meeting-conference) */
+const SIDE_PANE_ID = 'Meeting Phone Info';
+/* @conditional-compile-remove(teams-meeting-conference) */
+/** @private */
+export const useMeetingPhoneInfoPane = (props) => {
+    const { updateSidePaneRenderer, mobileView, conferencePhoneInfo } = props;
+    const closePane = useCallback(() => {
+        updateSidePaneRenderer(undefined);
+    }, [updateSidePaneRenderer]);
+    const localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;
+    const callStrings = useLocale().strings.call;
+    const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.meetingConferencePhoneInfoModalTitle, dismissSidePaneButtonAriaLabel: callStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false })), [mobileView, closePane, localeStrings, callStrings]);
+    const onRenderContent = useCallback(() => {
+        return React.createElement(MeetingPhoneInfoPaneContent, { mobileView: mobileView, conferencePhoneInfoList: conferencePhoneInfo });
+    }, [mobileView, conferencePhoneInfo]);
+    const sidePaneRenderer = useMemo(() => ({
+        headerRenderer: onRenderHeader,
+        contentRenderer: onRenderContent,
+        id: SIDE_PANE_ID
+    }), [onRenderContent, onRenderHeader]);
+    const openPane = useCallback(() => {
+        updateSidePaneRenderer(sidePaneRenderer);
+    }, [sidePaneRenderer, updateSidePaneRenderer]);
+    const isOpen = useIsParticularSidePaneOpen(SIDE_PANE_ID);
+    // Update pane renderer if it is open and the openPane dep changes
+    useEffect(() => {
+        if (isOpen) {
+            openPane();
+        }
+    }, [isOpen, openPane]);
+    return {
+        openMeetingPhoneInfoPane: openPane,
+        closeMeetingPhoneInfoPane: closePane,
+        isMeetingPhoneInfoPaneOpen: isOpen
+    };
+};
+//# sourceMappingURL=useMeetingPhoneInfo.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useMeetingPhoneInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMeetingPhoneInfo.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useMeetingPhoneInfo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2DAA2D;AAC3D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,2DAA2D;AAC3D,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,2DAA2D;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,2DAA2D;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,2DAA2D;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,2DAA2D;AAC3D,MAAM,YAAY,GAAG,oBAAoB,CAAC;AAE1C,2DAA2D;AAC3D,eAAe;AACf,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAIvC,EAIC,EAAE;IACF,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAE1E,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,0BAA0B,CAAC;IAC/E,MAAM,WAAW,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAE7C,MAAM,cAAc,GAAG,WAAW,CAChC,GAAG,EAAE,CAAC,CACJ,oBAAC,cAAc,IACb,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,aAAa,CAAC,oCAAoC,EAC/D,8BAA8B,EAAE,WAAW,CAAC,0BAA0B,EACtE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,GAC/B,CACH,EACD,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,CAAC,CACpD,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,oBAAC,2BAA2B,IAAC,UAAU,EAAE,UAAU,EAAE,uBAAuB,EAAE,mBAAmB,GAAI,CAAC;IAC/G,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEtC,MAAM,gBAAgB,GAAqB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,YAAY;KACjB,CAAC,EACF,CAAC,eAAe,EAAE,cAAc,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,YAAY,CAAC,CAAC;IAEzD,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO;QACL,wBAAwB,EAAE,QAAQ;QAClC,yBAAyB,EAAE,SAAS;QACpC,0BAA0B,EAAE,MAAM;KACnC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport React, { useCallback, useEffect, useMemo } from 'react';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { MeetingPhoneInfoPaneContent } from '../../../common/MeetingPhoneInfoPaneContent';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { ConferencePhoneInfo } from '@internal/react-components';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nconst SIDE_PANE_ID = 'Meeting Phone Info';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/** @private */\nexport const useMeetingPhoneInfoPane = (props: {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  conferencePhoneInfo?: ConferencePhoneInfo[];\n}): {\n  openMeetingPhoneInfoPane: () => void;\n  closeMeetingPhoneInfoPane: () => void;\n  isMeetingPhoneInfoPaneOpen: boolean;\n} => {\n  const { updateSidePaneRenderer, mobileView, conferencePhoneInfo } = props;\n\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n\n  const localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;\n  const callStrings = useLocale().strings.call;\n\n  const onRenderHeader = useCallback(\n    () => (\n      <SidePaneHeader\n        onClose={closePane}\n        headingText={localeStrings.meetingConferencePhoneInfoModalTitle}\n        dismissSidePaneButtonAriaLabel={callStrings.dismissSidePaneButtonLabel}\n        mobileView={mobileView ?? false}\n      />\n    ),\n    [mobileView, closePane, localeStrings, callStrings]\n  );\n\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <MeetingPhoneInfoPaneContent mobileView={mobileView} conferencePhoneInfoList={conferencePhoneInfo} />;\n  }, [mobileView, conferencePhoneInfo]);\n\n  const sidePaneRenderer: SidePaneRenderer = useMemo(\n    () => ({\n      headerRenderer: onRenderHeader,\n      contentRenderer: onRenderContent,\n      id: SIDE_PANE_ID\n    }),\n    [onRenderContent, onRenderHeader]\n  );\n\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n  const isOpen = useIsParticularSidePaneOpen(SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n\n  return {\n    openMeetingPhoneInfoPane: openPane,\n    closeMeetingPhoneInfoPane: closePane,\n    isMeetingPhoneInfoPaneOpen: isOpen\n  };\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.d.ts

@@ -20,6 +20,8 @@ export declare const usePeoplePane: (props: {
     onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;
     onStopAllSpotlight?: () => Promise<void>;
     maxParticipantsToSpotlight?: number;
+    onMuteParticipant?: (userId: string) => Promise<void>;
+    onMuteAllRemoteParticipants?: () => Promise<void>;
     pinnedParticipants?: string[];
     onPinParticipant?: (userId: string) => void;
     onUnpinParticipant?: (userId: string) => void;

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js

@@ -5,52 +5,117 @@ import { useIsParticularSidePaneOpen } from './SidePaneProvider';
 import { SidePaneHeader } from '../../../common/SidePaneHeader';
 import { PeoplePaneContent } from '../../../common/PeoplePaneContent';
 import { useLocale } from '../../../localization';
+/* @conditional-compile-remove(soft-mute) */
+import { getRemoteParticipants } from '../../selectors/baseSelectors';
+/* @conditional-compile-remove(soft-mute) */
+import { useSelector } from '../../hooks/useSelector';
+/* @conditional-compile-remove(soft-mute) */
+import { Prompt } from '../Prompt';
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
 export const usePeoplePane = (props) => {
-    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef, setParticipantActioned, spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onStopAllSpotlight, maxParticipantsToSpotlight, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem } = props;
+    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef, setParticipantActioned, spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onStopAllSpotlight, maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(soft-mute) */
+    onMuteParticipant, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, 
+    /* @conditional-compile-remove(soft-mute) */
+    onMuteAllRemoteParticipants } = props;
     const closePane = useCallback(() => {
         var _a;
         updateSidePaneRenderer(undefined);
         (_a = peopleButtonRef === null || peopleButtonRef === void 0 ? void 0 : peopleButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [peopleButtonRef, updateSidePaneRenderer]);
     const localeStrings = useLocale().strings.call;
+    /* @conditional-compile-remove(soft-mute) */
+    const remoteParticipants = useSelector(getRemoteParticipants);
+    /* @conditional-compile-remove(soft-mute) */
+    const [showMuteAllPrompt, setShowMuteAllPrompt] = React.useState(false);
+    /* @conditional-compile-remove(soft-mute) */
+    const muteAllPromptLabels = useMemo(() => ({
+        confirmButtonLabel: localeStrings.muteAllConfirmButtonLabel,
+        heading: localeStrings.muteAllDialogTitle,
+        text: localeStrings.muteAllDialogContent,
+        cancelButtonLabel: localeStrings.muteAllCancelButtonLabel
+    }), [
+        localeStrings.muteAllConfirmButtonLabel,
+        localeStrings.muteAllDialogTitle,
+        localeStrings.muteAllDialogContent,
+        localeStrings.muteAllCancelButtonLabel
+    ]);
+    /* @conditional-compile-remove(soft-mute) */
+    const onMuteAllPromptConfirm = useCallback(() => {
+        onMuteAllRemoteParticipants && onMuteAllRemoteParticipants();
+        setShowMuteAllPrompt(false);
+    }, [onMuteAllRemoteParticipants, setShowMuteAllPrompt]);
     const sidePaneHeaderMenuProps = useMemo(() => {
         const menuItems = [];
         if (onStopAllSpotlight && spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0) {
             menuItems.push({
                 key: 'stopAllSpotlightKey',
                 text: localeStrings.stopAllSpotlightMenuLabel,
-                iconProps: {
-                    iconName: 'StopAllSpotlightMenuButton',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
+                iconProps: { iconName: 'StopAllSpotlightMenuButton', styles: { root: { lineHeight: 0 } } },
                 onClick: () => {
                     onStopAllSpotlight();
                 },
                 ariaLabel: localeStrings.stopAllSpotlightMenuLabel
             });
         }
+        /* @conditional-compile-remove(soft-mute) */
+        if (onMuteAllRemoteParticipants && remoteParticipants) {
+            let isAllMuted = true;
+            if (remoteParticipants) {
+                for (const participant of Object.values(remoteParticipants)) {
+                    if (!participant.isMuted) {
+                        isAllMuted = false;
+                        break;
+                    }
+                }
+            }
+            menuItems.push({
+                ['data-ui-id']: 'people-pane-mute-all-remote-participants',
+                key: 'muteAllRemoteParticipants',
+                text: localeStrings.muteAllMenuLabel,
+                iconProps: {
+                    iconName: 'ContextualMenuMicMutedIcon',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                onClick: () => {
+                    setShowMuteAllPrompt(true);
+                },
+                ariaLabel: localeStrings.muteAllMenuLabel,
+                disabled: isAllMuted
+            });
+        }
         return {
             items: menuItems
         };
-    }, [onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.stopAllSpotlightMenuLabel]);
-    const onRenderHeader = useCallback(() => React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false }), [mobileView, closePane, localeStrings]);
+    }, [
+        onStopAllSpotlight,
+        spotlightedParticipantUserIds,
+        localeStrings.stopAllSpotlightMenuLabel,
+        /* @conditional-compile-remove(soft-mute) */ localeStrings.muteAllMenuLabel,
+        /* @conditional-compile-remove(soft-mute) */ onMuteAllRemoteParticipants,
+        /* @conditional-compile-remove(soft-mute) */ remoteParticipants,
+        /* @conditional-compile-remove(soft-mute) */ setShowMuteAllPrompt
+    ]);
+    const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false })), [mobileView, closePane, localeStrings]);
     const onFetchParticipantMenuItemsForCallComposite = useCallback((participantId, myUserId, defaultMenuItems) => {
+        var _a;
         let isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participantId);
         const _defaultMenuItems = defaultMenuItems !== null && defaultMenuItems !== void 0 ? defaultMenuItems : [];
         const isSpotlighted = spotlightedParticipantUserIds === null || spotlightedParticipantUserIds === void 0 ? void 0 : spotlightedParticipantUserIds.includes(participantId);
         const isMe = myUserId === participantId;
         isPinned = isSpotlighted ? false : isPinned;
         if (isSpotlighted) {
-            const stopSpotlightMenuText = isMe ? localeStrings.stopSpotlightOnSelfMenuLabel : localeStrings.stopSpotlightMenuLabel;
-            const onStopSpotlight = isMe ? onStopLocalSpotlight : onStopRemoteSpotlight ? () => {
-                onStopRemoteSpotlight([participantId]);
-            } : undefined;
+            const stopSpotlightMenuText = isMe
+                ? localeStrings.stopSpotlightOnSelfMenuLabel
+                : localeStrings.stopSpotlightMenuLabel;
+            const onStopSpotlight = isMe
+                ? onStopLocalSpotlight
+                : onStopRemoteSpotlight
+                    ? () => {
+                        onStopRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
             if (onStopSpotlight && stopSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'stop-spotlight',
@@ -58,22 +123,28 @@ export const usePeoplePane = (props) => {
                     onClick: onStopSpotlight,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
-                        styles: {
-                            root: {
-                                lineHeight: 0
-                            }
-                        }
+                        styles: { root: { lineHeight: 0 } }
                     },
                     ariaLabel: stopSpotlightMenuText
                 });
             }
         }
         else {
-            const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0 ? localeStrings.addSpotlightMenuLabel : localeStrings.startSpotlightMenuLabel;
-            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight ? spotlightedParticipantUserIds ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight : false : false;
-            const onStartSpotlight = isMe ? onStartLocalSpotlight : onStartRemoteSpotlight ? () => {
-                onStartRemoteSpotlight([participantId]);
-            } : undefined;
+            const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
+                ? localeStrings.addSpotlightMenuLabel
+                : localeStrings.startSpotlightMenuLabel;
+            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
+                ? spotlightedParticipantUserIds
+                    ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
+                    : false
+                : false;
+            const onStartSpotlight = isMe
+                ? onStartLocalSpotlight
+                : onStartRemoteSpotlight
+                    ? () => {
+                        onStartRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
             if (onStartSpotlight && startSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'start-spotlight',
@@ -81,11 +152,7 @@ export const usePeoplePane = (props) => {
                     onClick: onStartSpotlight,
                     iconProps: {
                         iconName: 'StartSpotlightContextualMenuItem',
-                        styles: {
-                            root: {
-                                lineHeight: 0
-                            }
-                        }
+                        styles: { root: { lineHeight: 0 } }
                     },
                     ariaLabel: startSpotlightMenuText,
                     disabled: maxSpotlightedParticipantsReached,
@@ -93,6 +160,24 @@ export const usePeoplePane = (props) => {
                 });
             }
         }
+        /* @conditional-compile-remove(soft-mute) */
+        if (onMuteParticipant && !isMe) {
+            const isMuted = remoteParticipants && ((_a = remoteParticipants[participantId]) === null || _a === void 0 ? void 0 : _a.isMuted);
+            _defaultMenuItems.push({
+                key: 'mute',
+                text: 'Mute',
+                iconProps: {
+                    iconName: 'ContextualMenuMicMutedIcon',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                onClick: () => {
+                    onMuteParticipant(participantId);
+                },
+                'data-ui-id': 'participant-item-mute-participant',
+                ariaLabel: 'Mute',
+                disabled: isMuted
+            });
+        }
         if (!isMe && isPinned !== undefined) {
             if (isPinned && onUnpinParticipant && (localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel)) {
                 _defaultMenuItems.push({
@@ -100,12 +185,7 @@ export const usePeoplePane = (props) => {
                     text: localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel,
                     iconProps: {
                         iconName: 'UnpinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUnpinParticipant === null || onUnpinParticipant === void 0 ? void 0 : onUnpinParticipant(participantId);
@@ -117,15 +197,12 @@ export const usePeoplePane = (props) => {
             if (!isPinned && onPinParticipant && (localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.pinParticipantMenuLabel)) {
                 _defaultMenuItems.push({
                     key: 'pin',
-                    text: disablePinMenuItem ? localeStrings.pinParticipantLimitReachedMenuLabel : localeStrings.pinParticipantMenuLabel,
+                    text: disablePinMenuItem
+                        ? localeStrings.pinParticipantLimitReachedMenuLabel
+                        : localeStrings.pinParticipantMenuLabel,
                     iconProps: {
                         iconName: 'PinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onPinParticipant(participantId);
@@ -136,11 +213,55 @@ export const usePeoplePane = (props) => {
                 });
             }
         }
-        return onFetchParticipantMenuItems ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems) : _defaultMenuItems;
-    }, [spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onFetchParticipantMenuItems, localeStrings.stopSpotlightMenuLabel, localeStrings.stopSpotlightOnSelfMenuLabel, localeStrings.addSpotlightMenuLabel, localeStrings.startSpotlightMenuLabel, localeStrings.spotlightLimitReachedMenuTitle, maxParticipantsToSpotlight, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, localeStrings.pinParticipantMenuLabel, localeStrings.pinParticipantLimitReachedMenuLabel, localeStrings.unpinParticipantMenuLabel, localeStrings.unpinParticipantMenuItemAriaLabel, localeStrings.pinParticipantMenuItemAriaLabel]);
+        return onFetchParticipantMenuItems
+            ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems)
+            : _defaultMenuItems;
+    }, [
+        spotlightedParticipantUserIds,
+        onStartLocalSpotlight,
+        onStopLocalSpotlight,
+        onStartRemoteSpotlight,
+        onStopRemoteSpotlight,
+        onFetchParticipantMenuItems,
+        /* @conditional-compile-remove(soft-mute) */
+        onMuteParticipant,
+        /* @conditional-compile-remove(soft-mute) */
+        remoteParticipants,
+        localeStrings.stopSpotlightMenuLabel,
+        localeStrings.stopSpotlightOnSelfMenuLabel,
+        localeStrings.addSpotlightMenuLabel,
+        localeStrings.startSpotlightMenuLabel,
+        localeStrings.spotlightLimitReachedMenuTitle,
+        maxParticipantsToSpotlight,
+        pinnedParticipants,
+        onPinParticipant,
+        onUnpinParticipant,
+        disablePinMenuItem,
+        localeStrings.pinParticipantMenuLabel,
+        localeStrings.pinParticipantLimitReachedMenuLabel,
+        localeStrings.unpinParticipantMenuLabel,
+        localeStrings.unpinParticipantMenuItemAriaLabel,
+        localeStrings.pinParticipantMenuItemAriaLabel
+    ]);
     const onRenderContent = useCallback(() => {
-        return React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants });
-    }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems, setParticipantActioned, sidePaneHeaderMenuProps, pinnedParticipants]);
+        return (React.createElement(React.Fragment, null,
+            /* @conditional-compile-remove(soft-mute) */
+            React.createElement(Prompt, Object.assign({}, muteAllPromptLabels, { styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onMuteAllPromptConfirm(), isOpen: showMuteAllPrompt, onCancel: () => setShowMuteAllPrompt(false) })),
+            React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants })));
+    }, [
+        inviteLink,
+        mobileView,
+        onFetchAvatarPersonaData,
+        onFetchParticipantMenuItemsForCallComposite,
+        setDrawerMenuItems,
+        setParticipantActioned,
+        sidePaneHeaderMenuProps,
+        pinnedParticipants,
+        /* @conditional-compile-remove(soft-mute) */ showMuteAllPrompt,
+        /* @conditional-compile-remove(soft-mute) */ setShowMuteAllPrompt,
+        /* @conditional-compile-remove(soft-mute) */ muteAllPromptLabels,
+        /* @conditional-compile-remove(soft-mute) */ onMuteAllPromptConfirm
+    ]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,
@@ -156,10 +277,6 @@ export const usePeoplePane = (props) => {
             openPane();
         }
     }, [isOpen, openPane]);
-    return {
-        openPeoplePane: openPane,
-        closePeoplePane: closePane,
-        isPeoplePaneOpen: isOpen
-    };
+    return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };
 };
 //# sourceMappingURL=usePeoplePane.js.map