@azure/communication-react 1.22.0 → 1.23.0-alpha-202412190017

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

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { IIconProps } from '@fluentui/react';
+/**
+ * Props for {@link Banner}.
+ *
+ * @private
+ */
+export interface BannerProps {
+    /**
+     * Banner strings.
+     */
+    strings?: BannerStrings;
+    /**
+     * Banner icon.
+     */
+    iconProps?: IIconProps;
+    /**
+     * Callback called when the button inside banner is clicked.
+     */
+    onClickButton?: () => void;
+    /**
+     * If true, the primary button will be styled as a primary button. Default is false.
+     */
+    primaryButton?: boolean;
+}
+/**
+ * All strings that may be shown on the UI in the {@link Banner}.
+ *
+ * @private
+ */
+export interface BannerStrings {
+    /**
+     * Banner title.
+     */
+    title: string;
+    /**
+     * Banner primary button label.
+     */
+    primaryButtonLabel: string;
+}
+/**
+ * A component to show a banner in the UI.
+ *
+ * @private
+ */
+export declare const Banner: (props: BannerProps) => JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

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

@@ -0,0 +1,48 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { DefaultButton, mergeStyles } from '@fluentui/react';
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+// eslint-disable-next-line no-restricted-imports
+import { Icon, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';
+import React from 'react';
+/**
+ * A component to show a banner in the UI.
+ *
+ * @private
+ */
+export const Banner = (props) => {
+    var _a, _b;
+    const strings = props.strings;
+    const theme = useTheme();
+    return (React.createElement(Stack, { horizontalAlign: "center" },
+        React.createElement(Stack, { "data-ui-id": "banner", className: containerStyles(theme) },
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
+                React.createElement(Stack, { horizontal: true },
+                    ((_a = props.iconProps) === null || _a === void 0 ? void 0 : _a.iconName) && (React.createElement(Icon, Object.assign({ className: bannerIconClassName, iconName: (_b = props.iconProps) === null || _b === void 0 ? void 0 : _b.iconName }, props.iconProps))),
+                    React.createElement(Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
+                props.primaryButton ? (React.createElement(PrimaryButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton })) : (React.createElement(DefaultButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }))))));
+};
+const titleTextClassName = mergeStyles({
+    fontWeight: 400,
+    fontSize: _pxToRem(14),
+    lineHeight: _pxToRem(16),
+    alignSelf: 'center'
+});
+const containerStyles = (theme) => mergeStyles({
+    boxShadow: theme.effects.elevation8,
+    width: '20rem',
+    padding: '0.75rem',
+    borderRadius: '0.25rem',
+    position: 'relative',
+    backgroundColor: theme.palette.white
+});
+const bannerIconClassName = mergeStyles({
+    fontSize: '1.25rem',
+    alignSelf: 'center',
+    marginRight: '0.5rem',
+    svg: {
+        width: '1.25rem',
+        height: '1.25rem'
+    }
+});
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/Banner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAS,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AACnD,iDAAiD;AACjD,OAAO,EAAc,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAe,EAAE;;IACxD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;QAC7B,oBAAC,KAAK,kBAAY,QAAQ,EAAC,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;YAC1D,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe;gBAC/C,oBAAC,KAAK,IAAC,UAAU;oBACd,CAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,QAAQ,KAAI,CAC5B,oBAAC,IAAI,kBAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,SAAS,0CAAE,QAAQ,IAAM,KAAK,CAAC,SAAS,EAAI,CACnG;oBACD,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACtD;gBACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACrB,oBAAC,aAAa,IACZ,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACtC,OAAO,EAAE,KAAK,CAAC,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,aAAa,IACZ,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACtC,OAAO,EAAE,KAAK,CAAC,aAAa,GAC5B,CACH,CACK,CACF,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,WAAW,CAAC;IACrC,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,CAC/C,WAAW,CAAC;IACV,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;IACnC,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,UAAU;IACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;CACrC,CAAC,CAAC;AAEL,MAAM,mBAAmB,GAAG,WAAW,CAAC;IACtC,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,QAAQ;IACnB,WAAW,EAAE,QAAQ;IACrB,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n// eslint-disable-next-line no-restricted-imports\nimport { IIconProps, Icon, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Props for {@link Banner}.\n *\n * @private\n */\nexport interface BannerProps {\n  /**\n   * Banner strings.\n   */\n  strings?: BannerStrings;\n\n  /**\n   * Banner icon.\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Callback called when the button inside banner is clicked.\n   */\n  onClickButton?: () => void;\n\n  /**\n   * If true, the primary button will be styled as a primary button. Default is false.\n   */\n  primaryButton?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link Banner}.\n *\n * @private\n */\nexport interface BannerStrings {\n  /**\n   * Banner title.\n   */\n  title: string;\n  /**\n   * Banner primary button label.\n   */\n  primaryButtonLabel: string;\n}\n\n/**\n * A component to show a banner in the UI.\n *\n * @private\n */\nexport const Banner = (props: BannerProps): JSX.Element => {\n  const strings = props.strings;\n  const theme = useTheme();\n\n  return (\n    <Stack horizontalAlign=\"center\">\n      <Stack data-ui-id=\"banner\" className={containerStyles(theme)}>\n        <Stack horizontal horizontalAlign=\"space-between\">\n          <Stack horizontal>\n            {props.iconProps?.iconName && (\n              <Icon className={bannerIconClassName} iconName={props.iconProps?.iconName} {...props.iconProps} />\n            )}\n            <Text className={titleTextClassName}>{strings?.title}</Text>\n          </Stack>\n          {props.primaryButton ? (\n            <PrimaryButton\n              text={strings?.primaryButtonLabel}\n              ariaLabel={strings?.primaryButtonLabel}\n              onClick={props.onClickButton}\n            />\n          ) : (\n            <DefaultButton\n              text={strings?.primaryButtonLabel}\n              ariaLabel={strings?.primaryButtonLabel}\n              onClick={props.onClickButton}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst titleTextClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(16),\n  alignSelf: 'center'\n});\n\nconst containerStyles = (theme: Theme): string =>\n  mergeStyles({\n    boxShadow: theme.effects.elevation8,\n    width: '20rem',\n    padding: '0.75rem',\n    borderRadius: '0.25rem',\n    position: 'relative',\n    backgroundColor: theme.palette.white\n  });\n\nconst bannerIconClassName = mergeStyles({\n  fontSize: '1.25rem',\n  alignSelf: 'center',\n  marginRight: '0.5rem',\n  svg: {\n    width: '1.25rem',\n    height: '1.25rem'\n  }\n});\n"]}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CommonCallAdapter } from '../adapter';
+import { CompositeLocale } from '../../localization';
+/**
+ * @private
+ */
+export declare const BreakoutRoomsBanner: (props: {
+    locale: CompositeLocale;
+    adapter: CommonCallAdapter;
+}) => JSX.Element | null;
+//# sourceMappingURL=BreakoutRoomsBanner.d.ts.map

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

@@ -0,0 +1,41 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(breakout-rooms) */
+import { Stack } from '@fluentui/react';
+/* @conditional-compile-remove(breakout-rooms) */
+import React from 'react';
+/* @conditional-compile-remove(breakout-rooms) */
+import { bannerNotificationStyles } from '../styles/CallPage.styles';
+/* @conditional-compile-remove(breakout-rooms) */
+import { useSelector } from '../hooks/useSelector';
+/* @conditional-compile-remove(breakout-rooms) */
+import { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../selectors/baseSelectors';
+/* @conditional-compile-remove(breakout-rooms) */
+import { Banner } from './Banner';
+/* @conditional-compile-remove(breakout-rooms) */
+/**
+ * @private
+ */
+export const BreakoutRoomsBanner = (props) => {
+    const { locale, adapter } = props;
+    const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
+    const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
+    if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && assignedBreakoutRoom.call) {
+        return (React.createElement(Stack, { styles: bannerNotificationStyles },
+            React.createElement(Banner, { strings: {
+                    title: assignedBreakoutRoom.displayName
+                        ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName)
+                        : locale.strings.call.joinBreakoutRoomBannerTitle,
+                    primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel
+                }, onClickButton: () => assignedBreakoutRoom.join(), iconProps: { iconName: 'NotificationBarBreakoutRoomPromptJoin' }, primaryButton: true })));
+    }
+    else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {
+        return (React.createElement(Stack, { styles: bannerNotificationStyles },
+            React.createElement(Banner, { strings: {
+                    title: locale.strings.call.returnFromBreakoutRoomBannerTitle,
+                    primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel
+                }, onClickButton: () => adapter.returnFromBreakoutRoom(), iconProps: { iconName: 'NotificationBarBreakoutRoomClosingSoon' } })));
+    }
+    return null;
+};
+//# sourceMappingURL=BreakoutRoomsBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreakoutRoomsBanner.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAKrE,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,iDAAiD;AACjD,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAC9F,iDAAiD;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,iDAAiD;AACjD;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAGnC,EAAsB,EAAE;IACvB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAElE,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,KAAK,KAAK,MAAM,IAAI,oBAAoB,CAAC,IAAI,EAAE,CAAC;QAC/F,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YACrC,oBAAC,MAAM,IACL,OAAO,EAAE;oBACP,KAAK,EAAE,oBAAoB,CAAC,WAAW;wBACrC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,OAAO,CAAC,YAAY,EAAE,oBAAoB,CAAC,WAAW,CAAC;wBACzG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B;oBACnD,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;iBAC1E,EACD,aAAa,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAChD,SAAS,EAAE,EAAE,QAAQ,EAAE,uCAAuC,EAAE,EAChE,aAAa,SACb,CACI,CACT,CAAC;IACJ,CAAC;SAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,0BAA0B,KAAK,IAAI,EAAE,CAAC;QAC5F,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YACrC,oBAAC,MAAM,IACL,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;oBAC5D,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,uCAAuC;iBAChF,EACD,aAAa,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,sBAAsB,EAAE,EACrD,SAAS,EAAE,EAAE,QAAQ,EAAE,wCAAwC,EAAE,GACjE,CACI,CACT,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport React from 'react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { CommonCallAdapter } from '../adapter';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { CompositeLocale } from '../../localization';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { useSelector } from '../hooks/useSelector';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Banner } from './Banner';\n\n/* @conditional-compile-remove(breakout-rooms) */\n/**\n * @private\n */\nexport const BreakoutRoomsBanner = (props: {\n  locale: CompositeLocale;\n  adapter: CommonCallAdapter;\n}): JSX.Element | null => {\n  const { locale, adapter } = props;\n\n  const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n  const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n\n  if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && assignedBreakoutRoom.call) {\n    return (\n      <Stack styles={bannerNotificationStyles}>\n        <Banner\n          strings={{\n            title: assignedBreakoutRoom.displayName\n              ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName)\n              : locale.strings.call.joinBreakoutRoomBannerTitle,\n            primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel\n          }}\n          onClickButton={() => assignedBreakoutRoom.join()}\n          iconProps={{ iconName: 'NotificationBarBreakoutRoomPromptJoin' }}\n          primaryButton\n        />\n      </Stack>\n    );\n  } else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {\n    return (\n      <Stack styles={bannerNotificationStyles}>\n        <Banner\n          strings={{\n            title: locale.strings.call.returnFromBreakoutRoomBannerTitle,\n            primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel\n          }}\n          onClickButton={() => adapter.returnFromBreakoutRoom()}\n          iconProps={{ iconName: 'NotificationBarBreakoutRoomClosingSoon' }}\n        />\n      </Stack>\n    );\n  }\n  return null;\n};\n"]}

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

@@ -42,6 +42,10 @@ import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPr
 import { getCaptionsKind, getIsTeamsCall } from '../selectors/baseSelectors';
 import { useHandlers } from '../hooks/useHandlers';
 import { MoreDrawer } from '../../common/Drawer/MoreDrawer';
+/* @conditional-compile-remove(breakout-rooms) */
+import { useCompositeStringsForNotificationStackStrings } from '../hooks/useCompositeStringsForNotificationStack';
+/* @conditional-compile-remove(breakout-rooms) */
+import { BreakoutRoomsBanner } from './BreakoutRoomsBanner';
 /**
  * @private
  * Maximum number of remote video tiles that can be pinned
@@ -95,7 +99,15 @@ export const CallArrangement = (props) => {
             peopleButtonRef,
             setParticipantActioned
         });
-    }, [updateSidePaneRenderer, props.callControlProps.callInvitationURL, (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, props.onFetchAvatarPersonaData, props.mobileView, peopleButtonRef, setParticipantActioned]);
+    }, [
+        updateSidePaneRenderer,
+        props.callControlProps.callInvitationURL,
+        (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
+        props.onFetchAvatarPersonaData,
+        props.mobileView,
+        peopleButtonRef,
+        setParticipantActioned
+    ]);
     const locale = useLocale();
     const role = useSelector(getRole);
     const videoGalleryProps = usePropsFor(VideoGallery);
@@ -130,7 +142,7 @@ export const CallArrangement = (props) => {
     }, [pinnedParticipants, setPinnedParticipants]);
     const onUnpinParticipant = useCallback((userId) => {
         if (pinnedParticipants && setPinnedParticipants) {
-            setPinnedParticipants(pinnedParticipants.filter(participantId => participantId !== userId));
+            setPinnedParticipants(pinnedParticipants.filter((participantId) => participantId !== userId));
         }
     }, [setPinnedParticipants, pinnedParticipants]);
     const pinPeoplePaneProps = useMemo(() => {
@@ -144,13 +156,15 @@ export const CallArrangement = (props) => {
     const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const canRemoveSpotlight = capabilities === null || capabilities === void 0 ? void 0 : capabilities.removeParticipantsSpotlight.isPresent;
-    const stopAllSpotlight = useMemo(() => canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined, [canRemoveSpotlight, adapter]);
+    const stopAllSpotlight = useMemo(() => (canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined), [canRemoveSpotlight, adapter]);
     const { stopAllSpotlightWithPrompt } = useStopAllSpotlightCallbackWithPrompt(stopAllSpotlight, setIsPromptOpen, setPromptProps);
     const onMuteParticipantPeoplePaneProps = useMemo(() => {
         var _a, _b;
         return {
             onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || role === 'Unknown' ? onMuteParticipant : undefined,
-            onMuteAllRemoteParticipants: ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _b === void 0 ? void 0 : _b.isPresent) || role === 'Unknown' ? muteAllHandlers.onMuteAllRemoteParticipants : undefined
+            onMuteAllRemoteParticipants: ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _b === void 0 ? void 0 : _b.isPresent) || role === 'Unknown'
+                ? muteAllHandlers.onMuteAllRemoteParticipants
+                : undefined
         };
     }, [onMuteParticipant, role, capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers, muteAllHandlers.onMuteAllRemoteParticipants]);
     const spotlightPeoplePaneProps = useMemo(() => {
@@ -164,7 +178,16 @@ export const CallArrangement = (props) => {
             maxParticipantsToSpotlight
         };
         return {};
-    }, [hideSpotlightButtons, maxParticipantsToSpotlight, onStartLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, stopAllSpotlightWithPrompt, spotlightedParticipants]);
+    }, [
+        hideSpotlightButtons,
+        maxParticipantsToSpotlight,
+        onStartLocalSpotlightWithPrompt,
+        onStartRemoteSpotlightWithPrompt,
+        onStopLocalSpotlightWithPrompt,
+        onStopRemoteSpotlightWithPrompt,
+        stopAllSpotlightWithPrompt,
+        spotlightedParticipants
+    ]);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps), onMuteParticipantPeoplePaneProps), pinPeoplePaneProps));
     const togglePeoplePane = useCallback(() => {
         if (isPeoplePaneOpen) {
@@ -190,9 +213,7 @@ export const CallArrangement = (props) => {
             setRenderGallery(true);
         }
     }, [props.mobileView, isSidePaneOpen]);
-    const modalStrings = {
-        dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel
-    };
+    const modalStrings = { dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel };
     const isMobileWithActivePane = props.mobileView && isSidePaneOpen;
     const callCompositeContainerCSS = useMemo(() => {
         return {
@@ -217,18 +238,20 @@ export const CallArrangement = (props) => {
         togglePeoplePane();
     }, [togglePeoplePane]);
     const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
-    let filteredLatestErrorNotifications = props.showErrorNotifications ? props.latestErrors : [];
+    let filteredLatestErrorNotifications = props.showErrorNotifications
+        ? props.latestErrors
+        : [];
     const isCameraOn = useSelector(localVideoSelector).isAvailable;
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (role === 'Consumer' && (props.errorBarProps || props.showErrorNotifications)) {
-        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
+        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     if (props.doNotShowCameraAccessNotifications) {
-        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
+        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
     if ((isVideoPaneOpen || !isCameraOn) && (props.errorBarProps || props.showErrorNotifications)) {
-        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'unableToStartVideoEffect');
+        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
     const isTeamsCaptions = useSelector(getCaptionsKind) === 'TeamsCaptions';
     const isTeamsMeeting = useSelector(getIsTeamsMeeting);
@@ -240,53 +263,71 @@ export const CallArrangement = (props) => {
     const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
     const galleryContainerStyles = useMemo(() => {
         var _a;
-        return Object.assign(Object.assign({}, mediaGalleryContainerStyles), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? {
-            root: {
-                postion: 'absolute'
-            }
-        } : {}));
+        return Object.assign(Object.assign({}, mediaGalleryContainerStyles), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? { root: { postion: 'absolute' } } : {}));
     }, [(_b = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _b === void 0 ? void 0 : _b.height]);
     if (isTeamsMeeting) {
-        filteredLatestErrorNotifications.filter(notification => notification.type === 'teamsMeetingCallNetworkQualityLow').forEach(notification => {
-            notification.onClickPrimaryButton = props.mobileView ? toggleMeetingPhoneInfoPane : toggleTeamsMeetingConferenceModal;
+        filteredLatestErrorNotifications
+            .filter((notification) => notification.type === 'teamsMeetingCallNetworkQualityLow')
+            .forEach((notification) => {
+            notification.onClickPrimaryButton = props.mobileView
+                ? toggleMeetingPhoneInfoPane
+                : toggleTeamsMeetingConferenceModal;
         });
     }
     const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
     // Filter out shareScreen capability notifications if on mobile
-    const filteredCapabilitesChangedNotifications = props.mobileView ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter(notification => notification.capabilityName !== 'shareScreen') : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
+    const filteredCapabilitesChangedNotifications = props.mobileView
+        ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
+    /* @conditional-compile-remove(breakout-rooms) */
+    const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
     let latestNotifications = props.latestNotifications;
+    /* @conditional-compile-remove(breakout-rooms) */
+    // Filter out breakout room notification that prompts user to join breakout room when in mobile view. We will
+    // replace it with a non-dismissible banner
+    latestNotifications = props.mobileView
+        ? (latestNotifications !== null && latestNotifications !== void 0 ? latestNotifications : []).filter((notification) => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin')
+        : latestNotifications;
     const reactionResources = useSelector(getReactionResources);
-    return React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
         React.createElement(Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React.createElement(Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar })) : React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { ref: controlBarRef, callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: useTeamsCaptions && hasJoinedCall || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))),
-                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && React.createElement(Stack, { styles: drawerContainerStylesValue },
-                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: useTeamsCaptions && hasJoinedCall || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, dtmfDialerOptions: props.dtmfDialerOptions, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked })),
+                    }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { ref: controlBarRef, callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))))),
+                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(Stack, { styles: drawerContainerStylesValue },
+                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, dtmfDialerOptions: props.dtmfDialerOptions, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked }))),
                 React.createElement(Stack, { horizontal: true, grow: true },
                     React.createElement(Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(Stack.Item, { styles: callGalleryStyles, grow: true },
                             React.createElement(Stack, { verticalFill: true, styles: galleryContainerStyles },
                                 React.createElement(Stack.Item, { styles: notificationsContainerStyles },
-                                    props.showErrorNotifications && React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
-                                        React.createElement(NotificationStack, { onDismissNotification: props.onDismissError, activeNotifications: filteredLatestErrorNotifications })),
-                                    latestNotifications && React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
-                                        React.createElement(NotificationStack, { activeNotifications: latestNotifications, onDismissNotification: props.onDismissNotification })),
-                                    props.capabilitiesChangedNotificationBarProps && props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && React.createElement(Stack, { styles: bannerNotificationStyles },
-                                        React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))),
+                                    /* @conditional-compile-remove(breakout-rooms) */
+                                    props.mobileView && React.createElement(BreakoutRoomsBanner, { locale: locale, adapter: adapter }),
+                                    props.showErrorNotifications && (React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
+                                        React.createElement(NotificationStack, { onDismissNotification: props.onDismissError, activeNotifications: filteredLatestErrorNotifications }))),
+                                    latestNotifications && (React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
+                                        React.createElement(NotificationStack, { activeNotifications: latestNotifications, onDismissNotification: props.onDismissNotification, 
+                                            /* @conditional-compile-remove(breakout-rooms) */
+                                            strings: notificationStackStrings }))),
+                                    props.capabilitiesChangedNotificationBarProps &&
+                                        props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (React.createElement(Stack, { styles: bannerNotificationStyles },
+                                        React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] }))))),
                                 renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent(),
-                                !isInLocalHold && React.createElement(CallingCaptionsBanner, { captionsOptions: props.captionsOptions, isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions, returnFocusRef: controlBarRef })))),
-                    React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options) ? undefined : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' && isDisabled((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
-                    props.mobileView && React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
+                                !isInLocalHold && (React.createElement(CallingCaptionsBanner, { captionsOptions: props.captionsOptions, isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions, returnFocusRef: controlBarRef }))))),
+                    React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
+                            ? undefined
+                            : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
+                            isDisabled((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
+                    props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
                                 props.onCloseChatPane();
                             }
-                        } }),
-                    drawerMenuItems.length > 0 && React.createElement(Stack, { styles: drawerContainerStyles() },
-                        React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))));
+                        } })),
+                    drawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles() },
+                        React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))))));
 };
 const isLegacyCallControlEnabled = (options) => {
     return !!options && options !== true && (options === null || options === void 0 ? void 0 : options.legacyControlBarExperience) === true;