@azure/communication-react 1.24.0 → 1.25.0-alpha-202502170018

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

@@ -14,13 +14,13 @@ export const Banner = (props) => {
     var _a, _b;
     const strings = props.strings;
     const theme = useTheme();
-    return React.createElement(Stack, { horizontalAlign: "center" },
+    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)),
+                    ((_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 }))));
+                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,

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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;IACzB,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;QAClC,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,oBAAC,IAAI,kBAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,SAAS,0CAAE,QAAQ,IAAM,KAAK,CAAC,SAAS,EAAI;oBAChI,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACtD;gBACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,GAAI,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,GAAI,CACxQ,CACF,CACF,CAAC;AACb,CAAC,CAAC;AACF,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;AACH,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IAC5D,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;AACH,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  return <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 && <Icon className={bannerIconClassName} iconName={props.iconProps?.iconName} {...props.iconProps} />}\n            <Text className={titleTextClassName}>{strings?.title}</Text>\n          </Stack>\n          {props.primaryButton ? <PrimaryButton text={strings?.primaryButtonLabel} ariaLabel={strings?.primaryButtonLabel} onClick={props.onClickButton} /> : <DefaultButton text={strings?.primaryButtonLabel} ariaLabel={strings?.primaryButtonLabel} onClick={props.onClickButton} />}\n        </Stack>\n      </Stack>\n    </Stack>;\n};\nconst titleTextClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(16),\n  alignSelf: 'center'\n});\nconst containerStyles = (theme: Theme): string => 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});\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});"]}
+{"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.js

@@ -1,11 +1,18 @@
 // 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, getLatestNotifications } from '../selectors/baseSelectors';
+/* @conditional-compile-remove(breakout-rooms) */
 import { Banner } from './Banner';
+/* @conditional-compile-remove(breakout-rooms) */
 /**
  * @private
  */
@@ -14,26 +21,26 @@ export const BreakoutRoomsBanner = (props) => {
     const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
     const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
     const latestNotifications = useSelector(getLatestNotifications);
-    if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' &&
+    if (assignedBreakoutRoom &&
+        assignedBreakoutRoom.state === 'open' &&
         // Breakout room settings are only defined in a breakout room so we use this to ensure
         // the button is not shown when already in a breakout room
-        !breakoutRoomSettings && !latestNotifications['assignedBreakoutRoomOpened']) {
-        return React.createElement(Stack, { styles: bannerNotificationStyles },
+        !breakoutRoomSettings &&
+        !latestNotifications['assignedBreakoutRoomOpened']) {
+        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,
+                    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 }));
+                }, onClickButton: () => assignedBreakoutRoom.join(), iconProps: { iconName: 'NotificationBarBreakoutRoomPromptJoin' }, primaryButton: true })));
     }
     else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {
-        return React.createElement(Stack, { styles: bannerNotificationStyles },
+        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'
-                } }));
+                }, onClickButton: () => adapter.returnFromBreakoutRoom(), iconProps: { iconName: 'NotificationBarBreakoutRoomClosingSoon' } })));
     }
     return null;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BreakoutRoomsBanner.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACtH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAGnC,EAAsB,EAAE;IACvB,MAAM,EACJ,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,mBAAmB,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAChE,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,KAAK,KAAK,MAAM;QACjE,sFAAsF;QACtF,0DAA0D;QAC1D,CAAC,oBAAoB,IAAI,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC5E,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YAC1C,oBAAC,MAAM,IAAC,OAAO,EAAE;oBACjB,KAAK,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,OAAO,CAAC,YAAY,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B;oBACnM,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;iBAC1E,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE;oBAC9D,QAAQ,EAAE,uCAAuC;iBAClD,EAAE,aAAa,SAAG,CACX,CAAC;IACb,CAAC;SAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,0BAA0B,KAAK,IAAI,EAAE,CAAC;QAC5F,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YAC1C,oBAAC,MAAM,IAAC,OAAO,EAAE;oBACjB,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;oBAC5D,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,uCAAuC;iBAChF,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,SAAS,EAAE;oBACnE,QAAQ,EAAE,wCAAwC;iBACnD,GAAI,CACG,CAAC;IACb,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { CommonCallAdapter } from '../adapter';\nimport { CompositeLocale } from '../../localization';\nimport { useSelector } from '../hooks/useSelector';\nimport { getAssignedBreakoutRoom, getBreakoutRoomSettings, getLatestNotifications } from '../selectors/baseSelectors';\nimport { Banner } from './Banner';\n/**\n * @private\n */\nexport const BreakoutRoomsBanner = (props: {\n  locale: CompositeLocale;\n  adapter: CommonCallAdapter;\n}): JSX.Element | null => {\n  const {\n    locale,\n    adapter\n  } = props;\n  const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n  const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n  const latestNotifications = useSelector(getLatestNotifications);\n  if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' &&\n  // Breakout room settings are only defined in a breakout room so we use this to ensure\n  // the button is not shown when already in a breakout room\n  !breakoutRoomSettings && !latestNotifications['assignedBreakoutRoomOpened']) {\n    return <Stack styles={bannerNotificationStyles}>\n        <Banner strings={{\n        title: assignedBreakoutRoom.displayName ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName) : locale.strings.call.joinBreakoutRoomBannerTitle,\n        primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel\n      }} onClickButton={() => assignedBreakoutRoom.join()} iconProps={{\n        iconName: 'NotificationBarBreakoutRoomPromptJoin'\n      }} primaryButton />\n      </Stack>;\n  } else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {\n    return <Stack styles={bannerNotificationStyles}>\n        <Banner strings={{\n        title: locale.strings.call.returnFromBreakoutRoomBannerTitle,\n        primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel\n      }} onClickButton={() => adapter.returnFromBreakoutRoom()} iconProps={{\n        iconName: 'NotificationBarBreakoutRoomClosingSoon'\n      }} />\n      </Stack>;\n  }\n  return null;\n};"]}
+{"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,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACtH,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;IAClE,MAAM,mBAAmB,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAEhE,IACE,oBAAoB;QACpB,oBAAoB,CAAC,KAAK,KAAK,MAAM;QACrC,sFAAsF;QACtF,0DAA0D;QAC1D,CAAC,oBAAoB;QACrB,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,EAClD,CAAC;QACD,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, getLatestNotifications } 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  const latestNotifications = useSelector(getLatestNotifications);\n\n  if (\n    assignedBreakoutRoom &&\n    assignedBreakoutRoom.state === 'open' &&\n    // Breakout room settings are only defined in a breakout room so we use this to ensure\n    // the button is not shown when already in a breakout room\n    !breakoutRoomSettings &&\n    !latestNotifications['assignedBreakoutRoomOpened']\n  ) {\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,7 +42,9 @@ import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPr
 import { getIsTeamsCall, getMediaAccessSetting } 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
@@ -59,7 +61,6 @@ export const CallArrangement = (props) => {
     }, [props.mobileView]);
     const theme = useTheme();
     const callGalleryStyles = useMemo(() => galleryParentContainerStyles(theme.palette.neutralLighterAlt), [theme.palette.neutralLighterAlt]);
-    const controlBarRef = useRef(null);
     const peopleButtonRef = useRef(null);
     const cameraButtonRef = useRef(null);
     const sidePaneDismissButtonRef = useRef(null);
@@ -100,7 +101,17 @@ export const CallArrangement = (props) => {
             sidePaneDismissButtonRef,
             chatButtonPresent: !!props.onCloseChatPane
         });
-    }, [updateSidePaneRenderer, props.callControlProps.callInvitationURL, (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, props.onFetchAvatarPersonaData, props.mobileView, peopleButtonRef, setParticipantActioned, sidePaneDismissButtonRef, props.onCloseChatPane]);
+    }, [
+        updateSidePaneRenderer,
+        props.callControlProps.callInvitationURL,
+        (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
+        props.onFetchAvatarPersonaData,
+        props.mobileView,
+        peopleButtonRef,
+        setParticipantActioned,
+        sidePaneDismissButtonRef,
+        props.onCloseChatPane
+    ]);
     const locale = useLocale();
     const role = useSelector(getRole);
     const videoGalleryProps = usePropsFor(VideoGallery);
@@ -135,7 +146,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(() => {
@@ -149,13 +160,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(() => {
@@ -168,7 +181,16 @@ export const CallArrangement = (props) => {
             onStopAllSpotlight: hideSpotlightButtons ? undefined : stopAllSpotlightWithPrompt,
             maxParticipantsToSpotlight
         };
-    }, [hideSpotlightButtons, maxParticipantsToSpotlight, onStartLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, stopAllSpotlightWithPrompt, spotlightedParticipants]);
+    }, [
+        hideSpotlightButtons,
+        maxParticipantsToSpotlight,
+        onStartLocalSpotlightWithPrompt,
+        onStartRemoteSpotlightWithPrompt,
+        onStopLocalSpotlightWithPrompt,
+        onStopRemoteSpotlightWithPrompt,
+        stopAllSpotlightWithPrompt,
+        spotlightedParticipants
+    ]);
     const meetingMediaAccess = useSelector(getMediaAccessSetting);
     const canForbidOthersAudio = !!((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.forbidOthersAudio) === null || _b === void 0 ? void 0 : _b.isPresent);
     const canForbidOthersVideo = !!((_c = capabilities === null || capabilities === void 0 ? void 0 : capabilities.forbidOthersVideo) === null || _c === void 0 ? void 0 : _c.isPresent);
@@ -184,7 +206,19 @@ export const CallArrangement = (props) => {
             onPermitOthersVideo: canForbidOthersVideo ? muteAllHandlers.onPermitOthersVideo : undefined,
             meetingMediaAccess
         };
-    }, [canForbidOthersAudio, onForbidAudio, onPermitAudio, muteAllHandlers.onForbidOthersAudio, muteAllHandlers.onPermitOthersAudio, muteAllHandlers.onForbidOthersVideo, muteAllHandlers.onPermitOthersVideo, canForbidOthersVideo, onForbidVideo, onPermitVideo, meetingMediaAccess]);
+    }, [
+        canForbidOthersAudio,
+        onForbidAudio,
+        onPermitAudio,
+        muteAllHandlers.onForbidOthersAudio,
+        muteAllHandlers.onPermitOthersAudio,
+        muteAllHandlers.onForbidOthersVideo,
+        muteAllHandlers.onPermitOthersVideo,
+        canForbidOthersVideo,
+        onForbidVideo,
+        onPermitVideo,
+        meetingMediaAccess
+    ]);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps), onMuteParticipantPeoplePaneProps), pinPeoplePaneProps), onToggleParticipantMicPeoplePaneProps));
     const togglePeoplePane = useCallback(() => {
         if (isPeoplePaneOpen) {
@@ -210,9 +244,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 {
@@ -237,81 +269,117 @@ 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 isTeamsMeeting = useSelector(getIsTeamsMeeting);
     const isTeamsCall = useSelector(getIsTeamsCall);
     // Teams captions are only available in Teams meetings or Teams calls.
     // For Teams Meetings, we need to check if the capability is present.
-    const useTeamsCaptions = isTeamsMeeting && ((_d = capabilities === null || capabilities === void 0 ? void 0 : capabilities.setCaptionLanguage) === null || _d === void 0 ? void 0 : _d.isPresent) || isTeamsCall;
+    const useTeamsCaptions = (isTeamsMeeting && ((_d = capabilities === null || capabilities === void 0 ? void 0 : capabilities.setCaptionLanguage) === null || _d === void 0 ? void 0 : _d.isPresent)) || isTeamsCall;
     const hasJoinedCall = useSelector(getCallStatus) === 'Connected';
     const isCaptionsOn = useSelector(getCaptionsStatus);
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     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' } } : {}));
     }, [(_e = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _e === void 0 ? void 0 : _e.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 ? (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications.filter(notification => notification.capabilityName !== 'shareScreen') : (_g = props.capabilitiesChangedNotificationBarProps) === null || _g === void 0 ? void 0 : _g.capabilitiesChangedNotifications;
+    const filteredCapabilitesChangedNotifications = props.mobileView
+        ? (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_g = props.capabilitiesChangedNotificationBarProps) === null || _g === void 0 ? void 0 : _g.capabilitiesChangedNotifications;
+    /* @conditional-compile-remove(breakout-rooms) */
     const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
-    let latestNotifications = props.latestNotifications; // Filter out breakout room notification that prompts user to join breakout room when in mobile view. We will
+    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;
+    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 },
+    /* @conditional-compile-remove(rtt) */
+    const [openRealTimeText, setOpenRealTimeText] = useState(false);
+    /* @conditional-compile-remove(rtt) */
+    const onStartRealTimeText = useCallback(() => {
+        setOpenRealTimeText(true);
+    }, []);
+    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) },
-                ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && !isMobileWithActivePane && React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
-                        zIndex: CONTROL_BAR_Z_INDEX,
-                        padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.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, sidePaneDismissButtonRef: sidePaneDismissButtonRef }))),
-                ((_k = props.callControlProps) === null || _k === void 0 ? void 0 : _k.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 },
+                                    /* @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, 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 : [] })))),
+                                    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((_l = props.callControlProps.options) === null || _l === void 0 ? void 0 : _l.participantsButton), onChatButtonClicked: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.onClick, disableChatButton: (_o = props.mobileChatTabHeader) === null || _o === void 0 ? void 0 : _o.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, 
+                                    /* @conditional-compile-remove(rtt) */
+                                    isRealTimeTextOn: openRealTimeText }))))),
+                    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 })))),
+                ((_l = props.callControlProps) === null || _l === void 0 ? void 0 : _l.options) !== false && !isMobileWithActivePane && (React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
+                        zIndex: CONTROL_BAR_Z_INDEX,
+                        padding: verticalControlBar ? '0.25rem' : 'unset'
+                    }) }, isLegacyCallControlEnabled((_m = props.callControlProps) === null || _m === void 0 ? void 0 : _m.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, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, 
+                    /* @conditional-compile-remove(rtt) */
+                    isRealTimeTextSupported: hasJoinedCall, 
+                    /* @conditional-compile-remove(rtt) */
+                    onStartRealTimeText: onStartRealTimeText, 
+                    /* @conditional-compile-remove(rtt) */
+                    startRealTimeTextButtonChecked: openRealTimeText, 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, sidePaneDismissButtonRef: sidePaneDismissButtonRef }))))),
+                ((_o = props.callControlProps) === null || _o === void 0 ? void 0 : _o.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, 
+                        /* @conditional-compile-remove(rtt) */
+                        isRealTimeTextSupported: hasJoinedCall, 
+                        /* @conditional-compile-remove(rtt) */
+                        onStartRealTimeText: onStartRealTimeText, 
+                        /* @conditional-compile-remove(rtt) */
+                        startRealTimeTextButtonChecked: openRealTimeText, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, dtmfDialerOptions: props.dtmfDialerOptions, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked })))))));
 };
 const isLegacyCallControlEnabled = (options) => {
     return !!options && options !== true && (options === null || options === void 0 ? void 0 : options.legacyControlBarExperience) === true;