@azure/communication-react 1.19.0-alpha-202408310015 → 1.19.0-beta.2

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":["../../../../../../../../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"]}
+{"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});"]}

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

@@ -1,18 +1,11 @@
 // 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
  */
@@ -20,23 +13,24 @@ export const BreakoutRoomsBanner = (props) => {
     const { latestNotifications, locale, adapter } = props;
     const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
     const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
-    const autoMoveToBreakoutRoomCurrentlyInEffect = (assignedBreakoutRoom === null || assignedBreakoutRoom === void 0 ? void 0 : assignedBreakoutRoom.autoMoveParticipantToBreakoutRoom) &&
-        (latestNotifications === null || latestNotifications === void 0 ? void 0 : latestNotifications.find((notification) => notification.type === 'assignedBreakoutRoomOpened' || notification.type === 'assignedBreakoutRoomChanged'));
+    const autoMoveToBreakoutRoomCurrentlyInEffect = (assignedBreakoutRoom === null || assignedBreakoutRoom === void 0 ? void 0 : assignedBreakoutRoom.autoMoveParticipantToBreakoutRoom) && (latestNotifications === null || latestNotifications === void 0 ? void 0 : latestNotifications.find(notification => notification.type === 'assignedBreakoutRoomOpened' || notification.type === 'assignedBreakoutRoomChanged'));
     if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && !autoMoveToBreakoutRoomCurrentlyInEffect) {
-        return (React.createElement(Stack, { styles: bannerNotificationStyles },
+        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 undefined;
 };

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

@@ -1 +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;AAGxC,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,KAInC,EAA2B,EAAE;IAC5B,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvD,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAElE,MAAM,uCAAuC,GAC3C,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,iCAAiC;SACvD,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,IAAI,CACvB,CAAC,YAAY,EAAE,EAAE,CACf,YAAY,CAAC,IAAI,KAAK,4BAA4B,IAAI,YAAY,CAAC,IAAI,KAAK,6BAA6B,CAC5G,CAAA,CAAC;IAEJ,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,KAAK,KAAK,MAAM,IAAI,CAAC,uCAAuC,EAAE,CAAC;QAC9G,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,SAAS,CAAC;AACnB,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 { ActiveNotification } from '@internal/react-components';\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  latestNotifications: ActiveNotification[] | undefined;\n  locale: CompositeLocale;\n  adapter: CommonCallAdapter;\n}): JSX.Element | undefined => {\n  const { latestNotifications, locale, adapter } = props;\n\n  const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n  const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n\n  const autoMoveToBreakoutRoomCurrentlyInEffect =\n    assignedBreakoutRoom?.autoMoveParticipantToBreakoutRoom &&\n    latestNotifications?.find(\n      (notification) =>\n        notification.type === 'assignedBreakoutRoomOpened' || notification.type === 'assignedBreakoutRoomChanged'\n    );\n\n  if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && !autoMoveToBreakoutRoomCurrentlyInEffect) {\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 undefined;\n};\n"]}
+{"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;AAExC,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,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAInC,EAA2B,EAAE;IAC5B,MAAM,EACJ,mBAAmB,EACnB,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,uCAAuC,GAAG,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,iCAAiC,MAAI,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,KAAK,4BAA4B,IAAI,YAAY,CAAC,IAAI,KAAK,6BAA6B,CAAC,CAAA,CAAC;IAChQ,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,KAAK,KAAK,MAAM,IAAI,CAAC,uCAAuC,EAAE,CAAC;QAC9G,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,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack } from '@fluentui/react';\nimport { ActiveNotification } from '@internal/react-components';\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 } from '../selectors/baseSelectors';\nimport { Banner } from './Banner';\n/**\n * @private\n */\nexport const BreakoutRoomsBanner = (props: {\n  latestNotifications: ActiveNotification[] | undefined;\n  locale: CompositeLocale;\n  adapter: CommonCallAdapter;\n}): JSX.Element | undefined => {\n  const {\n    latestNotifications,\n    locale,\n    adapter\n  } = props;\n  const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n  const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n  const autoMoveToBreakoutRoomCurrentlyInEffect = assignedBreakoutRoom?.autoMoveParticipantToBreakoutRoom && latestNotifications?.find(notification => notification.type === 'assignedBreakoutRoomOpened' || notification.type === 'assignedBreakoutRoomChanged');\n  if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && !autoMoveToBreakoutRoomCurrentlyInEffect) {\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 undefined;\n};"]}

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

@@ -20,15 +20,12 @@ import { useSelector } from '../hooks/useSelector';
 import { callStatusSelector } from '../selectors/callStatusSelector';
 import { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';
 import { getIsTeamsMeeting, getRemoteParticipants } from '../selectors/baseSelectors';
-/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { getPage } from '../selectors/baseSelectors';
 import { getCallStatus, getCaptionsStatus } from '../selectors/baseSelectors';
 import { drawerContainerStyles } from '../styles/CallComposite.styles';
 import { SidePane } from './SidePane/SidePane';
 import { usePeoplePane } from './SidePane/usePeoplePane';
-/* @conditional-compile-remove(teams-meeting-conference) */
 import { useMeetingPhoneInfoPane } from './SidePane/useMeetingPhoneInfo';
-/* @conditional-compile-remove(teams-meeting-conference) */
 import { getTeamsMeetingCoordinates } from '../selectors/baseSelectors';
 import { useVideoEffectsPane, VIDEO_EFFECTS_SIDE_PANE_ID, VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM } from './SidePane/useVideoEffectsPane';
 import { isDisabled } from '../utils';
@@ -42,15 +39,10 @@ import { CapabilitiesChangedNotificationBar } from './CapabilitiesChangedNotific
 import { useLocale } from '../../localization';
 import { usePropsFor } from '../hooks/usePropsFor';
 import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt, useStopAllSpotlightCallbackWithPrompt } from '../utils/spotlightUtils';
-/* @conditional-compile-remove(acs-close-captions) */
 import { getCaptionsKind, getIsTeamsCall } from '../selectors/baseSelectors';
-/* @conditional-compile-remove(soft-mute) */
 import { useHandlers } from '../hooks/useHandlers';
-/* @conditional-compile-remove(soft-mute) */
 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
@@ -74,7 +66,6 @@ export const CallArrangement = (props) => {
     const containerHeight = _useContainerHeight(containerRef);
     const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);
     const { updateSidePaneRenderer } = props;
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const isInLocalHold = useSelector(getPage) === 'hold';
     const adapter = useAdapter();
     const [participantActioned, setParticipantActioned] = useState();
@@ -86,9 +77,7 @@ export const CallArrangement = (props) => {
             setDrawerMenuItems([]);
         }
     }, [participantActioned, remoteParticipants]);
-    /* @conditional-compile-remove(teams-meeting-conference) */
     const conferencePhoneInfo = useSelector(getTeamsMeetingCoordinates);
-    /* @conditional-compile-remove(teams-meeting-conference) */
     const meetingPhoneInfoPaneProps = {
         updateSidePaneRenderer,
         mobileView: props.mobileView,
@@ -106,33 +95,18 @@ 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 = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     const videoGalleryProps = usePropsFor(VideoGallery);
-    /* @conditional-compile-remove(soft-mute) */
     const muteAllHandlers = useHandlers(MoreDrawer);
     const { setPromptProps, setIsPromptOpen, hideSpotlightButtons } = props;
-    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, 
-    /* @conditional-compile-remove(soft-mute) */
-    onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
-    /* @conditional-compile-remove(teams-meeting-conference) */
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
     const [showTeamsMeetingConferenceModal, setShowTeamsMeetingConferenceModal] = useState(false);
-    /* @conditional-compile-remove(teams-meeting-conference) */
     const toggleTeamsMeetingConferenceModal = useCallback(() => {
         setShowTeamsMeetingConferenceModal(!showTeamsMeetingConferenceModal);
     }, [showTeamsMeetingConferenceModal]);
-    /* @conditional-compile-remove(teams-meeting-conference) */
     const { isMeetingPhoneInfoPaneOpen, openMeetingPhoneInfoPane, closeMeetingPhoneInfoPane } = useMeetingPhoneInfoPane(Object.assign({}, meetingPhoneInfoPaneProps));
-    /* @conditional-compile-remove(teams-meeting-conference) */
     const toggleMeetingPhoneInfoPane = useCallback(() => {
         if (isMeetingPhoneInfoPaneOpen) {
             closeMeetingPhoneInfoPane();
@@ -141,7 +115,6 @@ export const CallArrangement = (props) => {
             openMeetingPhoneInfoPane();
         }
     }, [closeMeetingPhoneInfoPane, isMeetingPhoneInfoPaneOpen, openMeetingPhoneInfoPane]);
-    /* @conditional-compile-remove(teams-meeting-conference) */
     const onMeetingPhoneInfoClicked = useCallback(() => {
         setShowDrawer(false);
         toggleMeetingPhoneInfoPane();
@@ -157,7 +130,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(() => {
@@ -171,24 +144,15 @@ export const CallArrangement = (props) => {
     const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const canRemoveSpotlight = (_d = (_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.capabilitiesFeature) === null || _d === void 0 ? void 0 : _d.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(() => {
-        /* @conditional-compile-remove(soft-mute) */
         return {
-            onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '')
-                ? onMuteParticipant
-                : undefined,
-            onMuteAllRemoteParticipants: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '')
-                ? muteAllHandlers.onMuteAllRemoteParticipants
-                : undefined
+            onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '') ? onMuteParticipant : undefined,
+            onMuteAllRemoteParticipants: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '') ? muteAllHandlers.onMuteAllRemoteParticipants : undefined
         };
         return {};
-    }, [
-        /* @conditional-compile-remove(soft-mute) */ onMuteParticipant,
-        /* @conditional-compile-remove(soft-mute) */ role,
-        /* @conditional-compile-remove(soft-mute) */ muteAllHandlers.onMuteAllRemoteParticipants
-    ]);
+    }, [onMuteParticipant, role, muteAllHandlers.onMuteAllRemoteParticipants]);
     const spotlightPeoplePaneProps = useMemo(() => {
         return {
             spotlightedParticipantUserIds: spotlightedParticipants,
@@ -200,16 +164,7 @@ 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) {
@@ -219,7 +174,6 @@ export const CallArrangement = (props) => {
             openPeoplePane();
         }
     }, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     useEffect(() => {
         if (isInLocalHold) {
             // close side pane on local hold
@@ -236,7 +190,9 @@ 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 {
@@ -261,112 +217,71 @@ 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');
     }
-    /* @conditional-compile-remove(acs-close-captions) */
     const isTeamsCaptions = useSelector(getCaptionsKind) === 'TeamsCaptions';
     const isTeamsMeeting = useSelector(getIsTeamsMeeting);
-    /* @conditional-compile-remove(acs-close-captions) */
     const isTeamsCall = useSelector(getIsTeamsCall);
-    const useTeamsCaptions = isTeamsMeeting ||
-        /* @conditional-compile-remove(acs-close-captions) */ isTeamsCall ||
-        /* @conditional-compile-remove(acs-close-captions) */ isTeamsCaptions;
+    const useTeamsCaptions = isTeamsMeeting || isTeamsCall || isTeamsCaptions;
     const hasJoinedCall = useSelector(getCallStatus) === 'Connected';
     const isCaptionsOn = useSelector(getCaptionsStatus);
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
     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
-        ? (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === void 0 ? void 0 : _e.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
-        : (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications;
-    /* @conditional-compile-remove(breakout-rooms) */
+    const filteredCapabilitesChangedNotifications = props.mobileView ? (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === void 0 ? void 0 : _e.capabilitiesChangedNotifications.filter(notification => notification.capabilityName !== 'shareScreen') : (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications;
     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
+    let latestNotifications = props.latestNotifications; // 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;
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
+    latestNotifications = props.mobileView ? (latestNotifications !== null && latestNotifications !== void 0 ? latestNotifications : []).filter(notification => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin') : latestNotifications;
+    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) },
-                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && !isMobileWithActivePane && (React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
+                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && !isMobileWithActivePane && React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
-                    /* @conditional-compile-remove(one-to-n-calling) */
-                    peopleButtonChecked: isPeoplePaneOpen, 
-                    /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, 
-                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                    disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
-                        /* @conditional-compile-remove(acs-close-captions) */ 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, 
-                    /* @conditional-compile-remove(teams-meeting-conference) */
-                    onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, 
-                    /* @conditional-compile-remove(teams-meeting-conference) */
-                    teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))))),
-                ((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.options) !== false && showDrawer && (React.createElement(Stack, { styles: drawerContainerStylesValue },
-                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
-                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                        disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
-                            /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: adapter.getState().reactions, 
-                        /* @conditional-compile-remove(teams-meeting-conference) */
-                        onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked }))),
+                    }) }, isLegacyCallControlEnabled((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.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, 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 }))),
+                ((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.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, reactionResources: adapter.getState().reactions, 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: mediaGalleryContainerStyles },
                                 React.createElement(Stack.Item, { styles: notificationsContainerStyles },
-                                    /* @conditional-compile-remove(breakout-rooms) */
-                                    props.mobileView && (React.createElement(BreakoutRoomsBanner, { latestNotifications: latestNotifications, 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 : [] }))))),
+                                    props.mobileView && React.createElement(BreakoutRoomsBanner, { latestNotifications: latestNotifications, 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 : [] })))),
                                 renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent(),
-                                true &&
-                                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React.createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions }))))),
-                    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((_k = props.callControlProps.options) === null || _k === void 0 ? void 0 : _k.participantsButton), onChatButtonClicked: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.onClick, disableChatButton: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.disabled }),
-                    props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
+                                true && !isInLocalHold && React.createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions })))),
+                    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((_k = props.callControlProps.options) === null || _k === void 0 ? void 0 : _k.participantsButton), onChatButtonClicked: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.onClick, disableChatButton: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.disabled }),
+                    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;