@azure/communication-react 1.5.1-beta.3 → 1.5.1-beta.5

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js

@@ -1,22 +1,59 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { CommandBarButton, Stack } from '@fluentui/react';
+import { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';
 import { useTheme } from "../../../../react-components/src";
 import React, { useMemo } from 'react';
 import { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';
+import { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';
+import { CallWithChatCompositeIcon } from './icons';
 /**
  * @private
  */
 export const SidePaneHeader = (props) => {
     const theme = useTheme();
     const sidePaneCloseButtonStyles = useMemo(() => ({
-        root: { minWidth: '1.5rem', padding: 0, backgroundColor: theme.semanticColors.bodyBackground },
-        icon: { color: theme.palette.neutralSecondary },
-        iconHovered: { color: theme.palette.neutralSecondary },
-        iconPressed: { color: theme.palette.neutralSecondary }
+        root: {
+            minWidth: '1.5rem',
+            padding: 0,
+            backgroundColor: theme.semanticColors.bodyBackground
+        },
+        icon: {
+            color: theme.palette.neutralSecondary
+        },
+        iconHovered: {
+            color: theme.palette.neutralSecondary
+        },
+        iconPressed: {
+            color: theme.palette.neutralSecondary
+        }
     }), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]);
-    return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles },
+    if (props.mobileView) {
+        return React.createElement(SidePaneMobileHeader, Object.assign({}, props));
+    }
+    return React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles },
         React.createElement(Stack.Item, { styles: sidePaneHeaderStyles }, props.headingText),
-        React.createElement(CommandBarButton, { ariaLabel: props.strings.dismissSidePaneButtonLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose })));
+        React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: {
+                iconName: 'cancel'
+            }, onClick: props.onClose }));
+};
+const SidePaneMobileHeader = (props) => {
+    const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;
+    const theme = useTheme();
+    const mobilePaneButtonStylesThemed = useMemo(() => {
+        return concatStyleSets(mobilePaneButtonStyles, {
+            root: {
+                width: '100%'
+            },
+            label: {
+                fontSize: theme.fonts.medium.fontSize,
+                fontWeight: theme.fonts.medium.fontWeight
+            }
+        });
+    }, [theme]);
+    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+        React.createElement(DefaultButton, { ariaLabel: dismissSidePaneButtonAriaLabel, ariaDescription: dismissSidePaneButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
+        React.createElement(Stack.Item, { grow: true },
+            React.createElement(DefaultButton, { checked: true, styles: mobilePaneButtonStylesThemed }, headingText)),
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
 };
 //# sourceMappingURL=SidePaneHeader.js.map

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,yCAAmC;AACtD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEnH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAM9B,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,yBAAyB,GAAG,OAAO,CACvC,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE;QAC9F,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE;QAC/C,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE;QACtD,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE;KACvD,CAAC,EACF,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CACtE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,MAAM,EAAE,6BAA6B;QACrF,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,oBAAoB,IAAG,KAAK,CAAC,WAAW,CAAc;QAC1E,oBAAC,gBAAgB,IACf,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,0BAA0B,EACnD,MAAM,EAAE,yBAAyB,EACjC,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACjC,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { CommandBarButton, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallCompositeStrings } from '../CallComposite';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText: string;\n  onClose: () => void;\n  strings:\n    | CallWithChatCompositeStrings\n    | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ CallCompositeStrings;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(\n    () => ({\n      root: { minWidth: '1.5rem', padding: 0, backgroundColor: theme.semanticColors.bodyBackground },\n      icon: { color: theme.palette.neutralSecondary },\n      iconHovered: { color: theme.palette.neutralSecondary },\n      iconPressed: { color: theme.palette.neutralSecondary }\n    }),\n    [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]\n  );\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles}>\n      <Stack.Item styles={sidePaneHeaderStyles}>{props.headingText}</Stack.Item>\n      <CommandBarButton\n        ariaLabel={props.strings.dismissSidePaneButtonLabel}\n        styles={sidePaneCloseButtonStyles}\n        iconProps={{ iconName: 'cancel' }}\n        onClick={props.onClose}\n      />\n    </Stack>\n  );\n};\n\"../../../../react-components/src\""]}
+{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n  mobileView: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(() => ({\n    root: {\n      minWidth: '1.5rem',\n      padding: 0,\n      backgroundColor: theme.semanticColors.bodyBackground\n    },\n    icon: {\n      color: theme.palette.neutralSecondary\n    },\n    iconHovered: {\n      color: theme.palette.neutralSecondary\n    },\n    iconPressed: {\n      color: theme.palette.neutralSecondary\n    }\n  }), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]);\n  if (props.mobileView) {\n    return <SidePaneMobileHeader {...props} />;\n  }\n  return <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles}>\n      <Stack.Item styles={sidePaneHeaderStyles}>{props.headingText}</Stack.Item>\n      <CommandBarButton ariaLabel={props.dismissSidePaneButtonAriaLabel} styles={sidePaneCloseButtonStyles} iconProps={{\n      iconName: 'cancel'\n    }} onClick={props.onClose} />\n    </Stack>;\n};\nconst SidePaneMobileHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n}): JSX.Element => {\n  const {\n    headingText,\n    dismissSidePaneButtonAriaLabel,\n    dismissSidePaneButtonAriaDescription,\n    onClose\n  } = props;\n  const theme = useTheme();\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    });\n  }, [theme]);\n  return <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton ariaLabel={dismissSidePaneButtonAriaLabel} ariaDescription={dismissSidePaneButtonAriaDescription} onClick={onClose} styles={mobilePaneBackButtonStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />} autoFocus></DefaultButton>\n      <Stack.Item grow>\n        <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n          {headingText}\n        </DefaultButton>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton styles={mobilePaneHiddenIconStyles} ariaHidden={true} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}></DefaultButton>\n    </Stack>;\n};\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.d.ts

@@ -1,22 +1,25 @@
 /// <reference types="react" />
-import { CallCompositeStrings } from '../CallComposite';
-import { CallWithChatCompositeStrings } from '../CallWithChatComposite';
+/** @private */
+export interface MobileChatSidePaneTabHeaderProps {
+    onClick: () => void;
+    disabled: boolean;
+}
 /**
  * Props for {@link TabHeader} component
  */
-declare type TabHeaderProps = {
+declare type PeopleAndChatHeaderProps = {
     onClose: () => void;
     onChatButtonClicked?: () => void;
     onPeopleButtonClicked?: () => void;
     activeTab: TabHeaderTab;
-    strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ CallCompositeStrings;
     disableChatButton?: boolean;
     disablePeopleButton?: boolean;
 };
 /**
+ * Legacy header to be removed when we make a breaking change.
  * @private
  */
-export declare const TabHeader: (props: TabHeaderProps) => JSX.Element;
+export declare const PeopleAndChatHeader: (props: PeopleAndChatHeaderProps) => JSX.Element;
 /**
  * Type used to define which tab is active in {@link TabHeader}
  */

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js

@@ -5,12 +5,15 @@ import { useTheme } from "../../../../react-components/src";
 import React, { useMemo } from 'react';
 import { CallWithChatCompositeIcon } from '../common/icons';
 import { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';
+import { useLocale } from '../localization';
 /**
+ * Legacy header to be removed when we make a breaking change.
  * @private
  */
-export const TabHeader = (props) => {
-    const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab, strings } = props;
+export const PeopleAndChatHeader = (props) => {
+    const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab } = props;
     const theme = useTheme();
+    const strings = localeTrampoline(useLocale());
     const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;
     const mobilePaneButtonStylesThemed = useMemo(() => {
         return concatStyleSets(mobilePaneButtonStyles, {
@@ -21,18 +24,22 @@ export const TabHeader = (props) => {
                 fontSize: theme.fonts.medium.fontSize,
                 fontWeight: theme.fonts.medium.fontWeight
             }
-        }, haveMultipleTabs
-            ? {
-                rootChecked: {
-                    borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
-                }
+        }, haveMultipleTabs ? {
+            rootChecked: {
+                borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
             }
-            : {});
+        } : {});
     }, [theme, haveMultipleTabs]);
-    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
-        React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
+        React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel)),
+        React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel)),
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const localeTrampoline = (locale) => {
+    /* @conditional-compile-remove(new-call-control-bar) */
+    return locale.strings.call;
+    return locale.strings.callWithChat;
 };
 //# sourceMappingURL=TabHeader.js.map

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,yCAAmC;AACtD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,sBAAsB,CAAC;AAmB9B;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1F,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,gBAAgB,GAAG,mBAAmB,IAAI,qBAAqB,CAAC;IACtE,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,eAAe,CACpB,sBAAsB,EACtB;YACE,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;gBACrC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;aAC1C;SACF,EACD,gBAAgB;YACd,CAAC,CAAC;gBACE,WAAW,EAAE;oBACX,YAAY,EAAE,kBAAkB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC7D;aACF;YACH,CAAC,CAAC,EAAE,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI,QAAC,MAAM,EAAE,yBAAyB;QACtD,oBAAC,aAAa,IACZ,SAAS,EAAE,OAAO,CAAC,2BAA2B,EAC9C,eAAe,EAAE,OAAO,CAAC,iCAAiC,EAC1D,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,EACxE,SAAS,SACM;QACjB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,mBAAmB,IAAI,CACtB,oBAAC,aAAa,IACZ,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,MAAM,EAC7B,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,KAAK,CAAC,iBAAiB,IAEhC,OAAO,CAAC,eAAe,CACV,CACjB,CACU;QACb,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,qBAAqB,IAAI,CACxB,oBAAC,aAAa,IACZ,OAAO,EAAE,qBAAqB,EAC9B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,QAAQ,EAC/B,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,KAAK,CAAC,mBAAmB,IAElC,OAAO,CAAC,iBAAiB,CACZ,CACjB,CACU;QAEb,oBAAC,aAAa,IACZ,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,GACzD,CACX,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, DefaultButton, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallCompositeStrings } from '../CallComposite';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\n\n/**\n * Props for {@link TabHeader} component\n */\ntype TabHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  strings:\n    | CallWithChatCompositeStrings\n    | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ CallCompositeStrings;\n  disableChatButton?: boolean;\n  disablePeopleButton?: boolean;\n};\n\n/**\n * @private\n */\nexport const TabHeader = (props: TabHeaderProps): JSX.Element => {\n  const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab, strings } = props;\n  const theme = useTheme();\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(\n      mobilePaneButtonStyles,\n      {\n        root: {\n          width: '100%'\n        },\n        label: {\n          fontSize: theme.fonts.medium.fontSize,\n          fontWeight: theme.fonts.medium.fontWeight\n        }\n      },\n      haveMultipleTabs\n        ? {\n            rootChecked: {\n              borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n            }\n          }\n        : {}\n    );\n  }, [theme, haveMultipleTabs]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={strings.returnToCallButtonAriaLabel}\n        ariaDescription={strings.returnToCallButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        {onChatButtonClicked && (\n          <DefaultButton\n            onClick={onChatButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'chat'}\n            role={'tab'}\n            disabled={props.disableChatButton}\n          >\n            {strings.chatButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      <Stack.Item grow>\n        {onPeopleButtonClicked && (\n          <DefaultButton\n            onClick={onPeopleButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'people'}\n            role={'tab'}\n            disabled={props.disablePeopleButton}\n          >\n            {strings.peopleButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';\n\"../../../../react-components/src\""]}
+{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, DefaultButton, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';\nimport { CompositeLocale, useLocale } from '../localization';\n\n/** @private */\nexport interface MobileChatSidePaneTabHeaderProps {\n  onClick: () => void;\n  disabled: boolean;\n}\n\n/**\n * Props for {@link TabHeader} component\n */\ntype PeopleAndChatHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  disableChatButton?: boolean;\n  disablePeopleButton?: boolean;\n};\n\n/**\n * Legacy header to be removed when we make a breaking change.\n * @private\n */\nexport const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Element => {\n  const {\n    onClose,\n    onChatButtonClicked,\n    onPeopleButtonClicked,\n    activeTab\n  } = props;\n  const theme = useTheme();\n  const strings = localeTrampoline(useLocale());\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    }, haveMultipleTabs ? {\n      rootChecked: {\n        borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n      }\n    } : {});\n  }, [theme, haveMultipleTabs]);\n  return <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton ariaLabel={strings.returnToCallButtonAriaLabel} ariaDescription={strings.returnToCallButtonAriaDescription} onClick={onClose} styles={mobilePaneBackButtonStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />} autoFocus></DefaultButton>\n      <Stack.Item grow>\n        {onChatButtonClicked && <DefaultButton onClick={onChatButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'chat'} role={'tab'} disabled={props.disableChatButton}>\n            {strings.chatButtonLabel}\n          </DefaultButton>}\n      </Stack.Item>\n      <Stack.Item grow>\n        {onPeopleButtonClicked && <DefaultButton onClick={onPeopleButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'people'} role={'tab'} disabled={props.disablePeopleButton}>\n            {strings.peopleButtonLabel}\n          </DefaultButton>}\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton styles={mobilePaneHiddenIconStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}></DefaultButton>\n    </Stack>;\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst localeTrampoline = (locale: CompositeLocale): any => {\n  /* @conditional-compile-remove(new-call-control-bar) */\n  return locale.strings.call;\n  return locale.strings.callWithChat;\n};\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { AdapterError } from './adapters';
+/**
+ * Pane that is used to show video effects button
+ * @private
+ */
+/** @beta */
+export declare const VideoEffectsPaneContent: (props: {
+    onDismissError: (error: AdapterError) => void;
+    activeVideoEffectError: () => AdapterError | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=VideoEffectsPane.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js

@@ -0,0 +1,140 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(video-background-effects) */
+import { useCallback, useMemo } from 'react';
+/* @conditional-compile-remove(video-background-effects) */
+import { MessageBar, MessageBarType, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(video-background-effects) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(video-background-effects) */
+import { _VideoBackgroundEffectsPicker } from "../../../../react-components/src";
+/* @conditional-compile-remove(video-background-effects) */
+import { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';
+/* @conditional-compile-remove(video-background-effects) */
+import { useSelector } from '../CallComposite/hooks/useSelector';
+/* @conditional-compile-remove(video-background-effects) */
+import { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';
+/* @conditional-compile-remove(video-background-effects) */
+import { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';
+/**
+ * Pane that is used to show video effects button
+ * @private
+ */
+/** @beta */
+export const VideoEffectsPaneContent = (props) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(video-background-effects) */
+    const strings = locale.strings.call;
+    /* @conditional-compile-remove(video-background-effects) */
+    const selectableVideoEffects = useMemo(() => {
+        const videoEffects = [{
+                itemKey: 'none',
+                iconProps: {
+                    iconName: 'RemoveVideoBackgroundEffect'
+                },
+                title: strings.removeBackgroundEffectButtonLabel,
+                tooltipProps: {
+                    content: strings.removeBackgroundTooltip
+                }
+            }, {
+                itemKey: 'blur',
+                iconProps: {
+                    iconName: 'BlurVideoBackground'
+                },
+                title: strings.blurBackgroundEffectButtonLabel,
+                tooltipProps: {
+                    content: strings.blurBackgroundTooltip
+                }
+            }];
+        const videoEffectImages = adapter.getState().videoBackgroundImages;
+        if (videoEffectImages) {
+            videoEffectImages.forEach((img) => {
+                var _a;
+                videoEffects.push({
+                    itemKey: img.key,
+                    backgroundProps: {
+                        url: img.url
+                    },
+                    tooltipProps: {
+                        content: (_a = img.tooltipText) !== null && _a !== void 0 ? _a : ''
+                    }
+                });
+            });
+        }
+        return videoEffects;
+    }, [strings, adapter]);
+    /* @conditional-compile-remove(video-background-effects) */
+    const onEffectChange = useCallback((effectKey) => __awaiter(void 0, void 0, void 0, function* () {
+        if (effectKey === 'blur') {
+            const blurEffect = {
+                effectName: effectKey
+            };
+            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
+            yield adapter.blurVideoBackground();
+        }
+        else if (effectKey === 'none') {
+            const noneEffect = {
+                effectName: effectKey
+            };
+            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
+            yield adapter.stopVideoBackgroundEffects();
+        }
+        else {
+            const backgroundImg = selectableVideoEffects.find(effect => {
+                return effect.itemKey === effectKey;
+            });
+            if (backgroundImg && backgroundImg.backgroundProps) {
+                const replaceEffect = {
+                    effectName: 'replacement',
+                    effectKey,
+                    backgroundImageUrl: backgroundImg.backgroundProps.url
+                };
+                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
+                yield adapter.replaceVideoBackground({
+                    backgroundImageUrl: backgroundImg.backgroundProps.url
+                });
+            }
+        }
+    }), [adapter, selectableVideoEffects]);
+    return VideoEffectsPaneTrampoline(props.onDismissError, props.activeVideoEffectError, /* @conditional-compile-remove(video-background-effects) */ selectableVideoEffects, /* @conditional-compile-remove(video-background-effects) */ onEffectChange);
+};
+const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    const videoEffectError = activeVideoEffectError && activeVideoEffectError();
+    /* @conditional-compile-remove(video-background-effects) */
+    const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);
+    /* @conditional-compile-remove(video-background-effects) */
+    const isCameraOn = useSelector(localVideoSelector).isAvailable;
+    /* @conditional-compile-remove(video-background-effects) */
+    const showWarning = !isCameraOn && selectedEffect !== 'none';
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    return React.createElement(Stack, { horizontalAlign: "center" },
+        videoEffectError && React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(videoEffectError) }, locale.strings.call.unableToStartVideoEffect),
+        showWarning && React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText),
+        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect }));
+    return React.createElement(React.Fragment, null);
+};
+/* @conditional-compile-remove(video-background-effects) */
+const backgroundPickerStyles = {
+    label: {
+        fontSize: '0.75rem',
+        lineHeight: '0.5rem',
+        fontWeight: '400'
+    }
+};
+//# sourceMappingURL=VideoEffectsPane.js.map

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { MessageBar, MessageBarType, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { VideoBackgroundImage, VideoBackgroundBlurEffect, VideoBackgroundNoEffect, VideoBackgroundReplacementEffect } from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\nimport { AdapterError } from './adapters';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPaneContent = (props: {\n  onDismissError: (error: AdapterError) => void;\n  activeVideoEffectError: () => AdapterError | undefined;\n}): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(video-background-effects) */\n  const strings = locale.strings.call;\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [{\n      itemKey: 'none',\n      iconProps: {\n        iconName: 'RemoveVideoBackgroundEffect'\n      },\n      title: strings.removeBackgroundEffectButtonLabel,\n      tooltipProps: {\n        content: strings.removeBackgroundTooltip\n      }\n    }, {\n      itemKey: 'blur',\n      iconProps: {\n        iconName: 'BlurVideoBackground'\n      },\n      title: strings.blurBackgroundEffectButtonLabel,\n      tooltipProps: {\n        content: strings.blurBackgroundTooltip\n      }\n    }];\n    const videoEffectImages = adapter.getState().videoBackgroundImages;\n    if (videoEffectImages) {\n      videoEffectImages.forEach((img: VideoBackgroundImage) => {\n        videoEffects.push({\n          itemKey: img.key,\n          backgroundProps: {\n            url: img.url\n          },\n          tooltipProps: {\n            content: img.tooltipText ?? ''\n          }\n        });\n      });\n    }\n    return videoEffects;\n  }, [strings, adapter]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const onEffectChange = useCallback(async (effectKey: string) => {\n    if (effectKey === 'blur') {\n      const blurEffect: VideoBackgroundBlurEffect = {\n        effectName: effectKey\n      };\n      adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n      await adapter.blurVideoBackground();\n    } else if (effectKey === 'none') {\n      const noneEffect: VideoBackgroundNoEffect = {\n        effectName: effectKey\n      };\n      adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n      await adapter.stopVideoBackgroundEffects();\n    } else {\n      const backgroundImg = selectableVideoEffects.find(effect => {\n        return effect.itemKey === effectKey;\n      });\n      if (backgroundImg && backgroundImg.backgroundProps) {\n        const replaceEffect: VideoBackgroundReplacementEffect = {\n          effectName: 'replacement',\n          effectKey,\n          backgroundImageUrl: backgroundImg.backgroundProps.url\n        };\n        adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n        await adapter.replaceVideoBackground({\n          backgroundImageUrl: backgroundImg.backgroundProps.url\n        });\n      }\n    }\n  }, [adapter, selectableVideoEffects]);\n  return VideoEffectsPaneTrampoline(props.onDismissError, props.activeVideoEffectError, /* @conditional-compile-remove(video-background-effects) */\n  selectableVideoEffects, /* @conditional-compile-remove(video-background-effects) */\n  onEffectChange);\n};\nconst VideoEffectsPaneTrampoline = (onDismissError: (error: AdapterError) => void, activeVideoEffectError?: () => AdapterError | undefined, selectableVideoEffects?: _VideoEffectsItemProps[], onEffectChange?: (effectKey: string) => Promise<void>): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const videoEffectError = activeVideoEffectError && activeVideoEffectError();\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  /* @conditional-compile-remove(video-background-effects) */\n  const showWarning = !isCameraOn && selectedEffect !== 'none';\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n\n  /* @conditional-compile-remove(video-background-effects) */\n  return <Stack horizontalAlign=\"center\">\n      {videoEffectError && <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(videoEffectError)}>\n          {locale.strings.call.unableToStartVideoEffect}\n        </MessageBar>}\n      {showWarning && <MessageBar messageBarType={MessageBarType.warning}>\n          {locale.strings.call.cameraOffBackgroundEffectWarningText}\n        </MessageBar>}\n      <_VideoBackgroundEffectsPicker label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle} styles={backgroundPickerStyles} options={selectableVideoEffects ?? []} onChange={onEffectChange} selectedEffectKey={selectedEffect} />\n    </Stack>;\n  return <></>;\n};\n\n/* @conditional-compile-remove(video-background-effects) */\nconst backgroundPickerStyles = {\n  label: {\n    fontSize: '0.75rem',\n    lineHeight: '0.5rem',\n    fontWeight: '400'\n  }\n};\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/adapters.js.map

@@ -1 +1 @@
-{"version":3,"file":"adapters.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/adapters.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * Functionality for interfacing with Composite adapter state.\n *\n * @public\n */\nexport interface AdapterState<TState> {\n  /** Subscribes the handler to stateChanged events. */\n  onStateChange(handler: (state: TState) => void): void;\n  /** Unsubscribes the handler to stateChanged events. */\n  offStateChange(handler: (state: TState) => void): void;\n  /** Get the current State */\n  getState(): TState;\n}\n\n/**\n * Functionality for correctly disposing a Composite.\n *\n * @public\n */\nexport interface Disposable {\n  /** Dispose of the Composite */\n  dispose(): void;\n}\n\n/**\n * Error reported via error events and stored in adapter state.\n *\n * @public\n */\nexport interface AdapterError extends Error {\n  /**\n   * The operation that failed.\n   */\n  target: string;\n  /**\n   * Error thrown by the failed operation.\n   */\n  innerError: Error;\n  /**\n   * Timestamp added to the error in the adapter implementation.\n   */\n  timestamp: Date;\n}\n\n/**\n * Adapters stores the latest error for each operation in the state.\n *\n * `target` is an adapter defined string for each unique operation performed by the adapter.\n *\n * @public\n */\nexport type AdapterErrors = { [target: string]: AdapterError };\n"]}
+{"version":3,"file":"adapters.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/adapters.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * Functionality for interfacing with Composite adapter state.\n *\n * @public\n */\nexport interface AdapterState<TState> {\n  /** Subscribes the handler to stateChanged events. */\n  onStateChange(handler: (state: TState) => void): void;\n  /** Unsubscribes the handler to stateChanged events. */\n  offStateChange(handler: (state: TState) => void): void;\n  /** Get the current State */\n  getState(): TState;\n}\n\n/**\n * Functionality for correctly disposing a Composite.\n *\n * @public\n */\nexport interface Disposable {\n  /** Dispose of the Composite */\n  dispose(): void;\n}\n\n/**\n * Error reported via error events and stored in adapter state.\n *\n * @public\n */\nexport interface AdapterError extends Error {\n  /**\n   * The operation that failed.\n   */\n  target: string;\n  /**\n   * Error thrown by the failed operation.\n   */\n  innerError: Error;\n  /**\n   * Timestamp added to the error in the adapter implementation.\n   */\n  timestamp: Date;\n}\n\n/**\n * Adapters stores the latest error for each operation in the state.\n *\n * `target` is an adapter defined string for each unique operation performed by the adapter.\n *\n * @public\n */\nexport type AdapterErrors = {\n  [target: string]: AdapterError;\n};"]}

package/dist/dist-esm/react-composites/src/composites/common/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/constants.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GACtC,yHAAyH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * @private\n */\nexport const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];\n\n/**\n * @private\n */\nexport const TEAMS_LIMITATION_LEARN_MORE =\n  'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/constants.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,yHAAyH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * @private\n */\nexport const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];\n\n/**\n * @private\n */\nexport const TEAMS_LIMITATION_LEARN_MORE = 'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';"]}

package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts

@@ -72,6 +72,8 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     PeoplePaneOpenDialpad?: JSX.Element | undefined;
     DialpadStartCall?: JSX.Element | undefined;
     NoticePageInvalidRoom?: JSX.Element | undefined;
+    BlurVideoBackground?: JSX.Element | undefined;
+    RemoveVideoBackgroundEffect?: JSX.Element | undefined;
     ChevronLeft?: JSX.Element | undefined;
     ControlBarChatButtonActive?: JSX.Element | undefined;
     ControlBarChatButtonInactive?: JSX.Element | undefined;
@@ -112,6 +114,8 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    ControlButtonVideoEffectsOption: JSX.Element;
+    ConfigurationScreenVideoEffectsButton: JSX.Element;
     CaptionsIcon: JSX.Element;
     CaptionsOffIcon: JSX.Element;
     CaptionsSettingsIcon: JSX.Element;
@@ -204,6 +208,8 @@ export declare type CallCompositeIcons = {
     PeoplePaneOpenDialpad?: JSX.Element;
     DialpadStartCall?: JSX.Element;
     NoticePageInvalidRoom?: JSX.Element;
+    BlurVideoBackground?: JSX.Element;
+    RemoveVideoBackgroundEffect?: JSX.Element;
 };
 /**
  * Icon wrapper to use when including customizable icons inside the CallComposite.

package/dist/dist-esm/react-composites/src/composites/common/icons.js

@@ -9,6 +9,8 @@ import React from 'react';
 import { FontIcon, Spinner, SpinnerSize } from '@fluentui/react';
 /* @conditional-compile-remove(file-sharing) */
 import { Attach20Regular } from '@fluentui/react-icons';
+/* @conditional-compile-remove(video-background-effects) */
+import { VideoBackgroundEffect20Regular, VideoPerson20Filled } from '@fluentui/react-icons';
 const SpinnerIcon = () => React.createElement(Spinner, { size: SpinnerSize.large });
 /**
  * The default set of icons used by the composites directly (i.e. not via the components defined in this library).
@@ -48,7 +50,11 @@ export const COMPOSITE_ONLY_ICONS = {
     /* @conditional-compile-remove(PSTN-calls) */
     DialpadStartCall: React.createElement(Call20Regular, null),
     /* @conditional-compile-remove(rooms) */
-    NoticePageInvalidRoom: React.createElement(Info20Filled, null)
+    NoticePageInvalidRoom: React.createElement(Info20Filled, null),
+    /* @conditional-compile-remove(video-background-effects) */
+    BlurVideoBackground: React.createElement(VideoBackgroundEffect20Regular, null),
+    /* @conditional-compile-remove(video-background-effects) */
+    RemoveVideoBackgroundEffect: React.createElement(VideoPerson20Filled, null)
 };
 /**
  * The default set of icons that are available to used in the Composites.
@@ -63,7 +69,7 @@ export const DEFAULT_COMPOSITE_ICONS = Object.assign(Object.assign({}, DEFAULT_C
  *
  * @private
  */
-export const ChatCompositeIcon = (props) => (React.createElement(FontIcon, Object.assign({}, props)));
+export const ChatCompositeIcon = (props) => React.createElement(FontIcon, Object.assign({}, props));
 /**
  * Icon wrapper to use when including customizable icons inside the CallComposite.
  * This wrapper ensures the icon name is being type-checked helping ensure no typos
@@ -71,7 +77,7 @@ export const ChatCompositeIcon = (props) => (React.createElement(FontIcon, Objec
  *
  * @private
  */
-export const CallCompositeIcon = (props) => (React.createElement(FontIcon, Object.assign({}, props)));
+export const CallCompositeIcon = (props) => React.createElement(FontIcon, Object.assign({}, props));
 /**
  * Icon wrapper to use when including customizable icons inside the CallWithChatComposite.
  * This wrapper ensures the icon name is being type-checked helping ensure no typos
@@ -79,5 +85,5 @@ export const CallCompositeIcon = (props) => (React.createElement(FontIcon, Objec
  *
  * @private
  */
-export const CallWithChatCompositeIcon = (props) => (React.createElement(FontIcon, Object.assign({}, props)));
+export const CallWithChatCompositeIcon = (props) => React.createElement(FontIcon, Object.assign({}, props));
 //# sourceMappingURL=icons.js.map

package/dist/dist-esm/react-composites/src/composites/common/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/icons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  CallEnd20Filled,\n  CallMissed20Filled,\n  CameraSwitch24Regular,\n  Chat20Filled,\n  Chat20Regular,\n  Info20Filled,\n  MicOff20Filled,\n  Mic20Filled,\n  Mic20Regular,\n  People20Regular,\n  PersonDelete20Filled,\n  Speaker220Filled,\n  Speaker220Regular,\n  Video20Filled,\n  VideoOff20Filled,\n  WifiWarning20Filled\n} from '@fluentui/react-icons';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PersonAdd20Regular, Dialpad20Regular, Call20Regular } from '@fluentui/react-icons';\nimport { DEFAULT_COMPONENT_ICONS } from '@internal/react-components';\nimport React from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon, IIconProps, Spinner, SpinnerSize } from '@fluentui/react';\n/* @conditional-compile-remove(file-sharing) */\nimport { Attach20Regular } from '@fluentui/react-icons';\n\nconst SpinnerIcon = (): JSX.Element => <Spinner size={SpinnerSize.large} />;\n\n/**\n * The default set of icons used by the composites directly (i.e. not via the components defined in this library).\n *\n * @public\n */\nexport const COMPOSITE_ONLY_ICONS: CompositeIcons = {\n  ChevronLeft: undefined,\n  Link: undefined,\n  LobbyScreenConnectingToCall: <SpinnerIcon />,\n  LobbyScreenWaitingToBeAdmitted: <SpinnerIcon />,\n  LocalDeviceSettingsCamera: <Video20Filled />,\n  LocalDeviceSettingsMic: <Mic20Filled />,\n  LocalDeviceSettingsSpeaker: <Speaker220Filled />,\n  LocalPreviewPlaceholder: <VideoOff20Filled />,\n  LocalCameraSwitch: <CameraSwitch24Regular />,\n  ControlBarChatButtonActive: <Chat20Filled />,\n  ControlBarChatButtonInactive: <Chat20Regular />,\n  ControlBarPeopleButton: <People20Regular />,\n  MoreDrawerMicrophones: <Mic20Regular />,\n  MoreDrawerPeople: <People20Regular />,\n  MoreDrawerSpeakers: <Speaker220Regular />,\n  MoreDrawerSelectedMicrophone: <Mic20Filled />,\n  MoreDrawerSelectedSpeaker: <Speaker220Filled />,\n  Muted: <MicOff20Filled />,\n  NetworkReconnectIcon: <CallMissed20Filled />,\n  NoticePageAccessDeniedTeamsMeeting: <PersonDelete20Filled />,\n  NoticePageJoinCallFailedDueToNoNetwork: <WifiWarning20Filled />,\n  NoticePageLeftCall: <CallEnd20Filled />,\n  NoticePageRemovedFromCall: <Info20Filled />,\n  /* @conditional-compile-remove(file-sharing) */\n  SendBoxAttachFile: <Attach20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneAddPerson: <PersonAdd20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneOpenDialpad: <Dialpad20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  DialpadStartCall: <Call20Regular />,\n  /* @conditional-compile-remove(rooms) */\n  NoticePageInvalidRoom: <Info20Filled />\n};\n\n/**\n * The default set of icons that are available to used in the Composites.\n *\n * @public\n */\nexport const DEFAULT_COMPOSITE_ICONS = {\n  ...DEFAULT_COMPONENT_ICONS,\n  ...COMPOSITE_ONLY_ICONS\n};\n\n/** @private */\nexport type CompositeIconProps<Icons> = IIconProps & { iconName: keyof Icons };\n\n/**\n * Icons that can be overridden for {@link ChatComposite}.\n *\n * @public\n */\nexport type ChatCompositeIcons = {\n  EditBoxCancel?: JSX.Element;\n  EditBoxSubmit?: JSX.Element;\n  MessageDelivered?: JSX.Element;\n  MessageEdit?: JSX.Element;\n  MessageFailed?: JSX.Element;\n  MessageRemove?: JSX.Element;\n  MessageSeen?: JSX.Element;\n  MessageSending?: JSX.Element;\n  ParticipantItemOptions?: JSX.Element;\n  ParticipantItemOptionsHovered?: JSX.Element;\n  SendBoxSend?: JSX.Element;\n  SendBoxSendHovered?: JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  SendBoxAttachFile?: JSX.Element;\n};\n\n/**\n * Icon wrapper to use when including customizable icons inside the ChatComposite.\n * This wrapper ensures the icon name is being type-checked helping ensure no typos\n * and ensure that icon is customizable through the composite API.\n *\n * @private\n */\nexport const ChatCompositeIcon = (props: CompositeIconProps<ChatCompositeIcons>): JSX.Element => (\n  <FontIcon {...props} />\n);\n\n/**\n * Icons that can be overridden for {@link CallComposite}.\n *\n * @public\n */\nexport type CallCompositeIcons = {\n  ControlBarPeopleButton?: JSX.Element;\n  ControlButtonCameraOff?: JSX.Element;\n  ControlButtonCameraOn?: JSX.Element;\n  ControlButtonEndCall?: JSX.Element;\n  ControlButtonMicOff?: JSX.Element;\n  ControlButtonMicOn?: JSX.Element;\n  ControlButtonOptions?: JSX.Element;\n  ControlButtonParticipants?: JSX.Element;\n  ControlButtonScreenShareStart?: JSX.Element;\n  ControlButtonScreenShareStop?: JSX.Element;\n  ErrorBarCallCameraAccessDenied?: JSX.Element;\n  ErrorBarCallCameraAlreadyInUse?: JSX.Element;\n  ErrorBarCallLocalVideoFreeze?: JSX.Element;\n  ErrorBarCallMacOsCameraAccessDenied?: JSX.Element;\n  ErrorBarCallMacOsMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneMutedBySystem?: JSX.Element;\n  ErrorBarCallMicrophoneUnmutedBySystem?: JSX.Element;\n  ErrorBarCallNetworkQualityLow?: JSX.Element;\n  ErrorBarCallNoMicrophoneFound?: JSX.Element;\n  ErrorBarCallNoSpeakerFound?: JSX.Element;\n  ErrorBarClear?: JSX.Element;\n  HorizontalGalleryLeftButton?: JSX.Element;\n  HorizontalGalleryRightButton?: JSX.Element;\n  LobbyScreenConnectingToCall?: JSX.Element;\n  LobbyScreenWaitingToBeAdmitted?: JSX.Element;\n  LocalDeviceSettingsCamera?: JSX.Element;\n  LocalDeviceSettingsMic?: JSX.Element;\n  LocalDeviceSettingsSpeaker?: JSX.Element;\n  LocalPreviewPlaceholder?: JSX.Element;\n  Muted?: JSX.Element;\n  NetworkReconnectIcon?: JSX.Element;\n  NoticePageAccessDeniedTeamsMeeting?: JSX.Element;\n  NoticePageJoinCallFailedDueToNoNetwork?: JSX.Element;\n  NoticePageLeftCall?: JSX.Element;\n  NoticePageRemovedFromCall?: JSX.Element;\n  OptionsCamera?: JSX.Element;\n  OptionsMic?: JSX.Element;\n  OptionsSpeaker?: JSX.Element;\n  ParticipantItemMicOff?: JSX.Element;\n  ParticipantItemOptions?: JSX.Element;\n  ParticipantItemOptionsHovered?: JSX.Element;\n  ParticipantItemScreenShareStart?: JSX.Element;\n  VideoTileMicOff?: JSX.Element;\n  LocalCameraSwitch?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneAddPerson?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneOpenDialpad?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  DialpadStartCall?: JSX.Element;\n  /* @conditional-compile-remove(rooms) */\n  NoticePageInvalidRoom?: JSX.Element;\n};\n\n/**\n * Icon wrapper to use when including customizable icons inside the CallComposite.\n * This wrapper ensures the icon name is being type-checked helping ensure no typos\n * and ensure that icon is customizable through the composite API.\n *\n * @private\n */\nexport const CallCompositeIcon = (props: CompositeIconProps<CallCompositeIcons>): JSX.Element => (\n  <FontIcon {...props} />\n);\n\n/**\n * Icons that can be overridden for {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeIcons = {\n  // CallWithChat Specific Icons\n  ChevronLeft?: JSX.Element;\n  ControlBarChatButtonActive?: JSX.Element;\n  ControlBarChatButtonInactive?: JSX.Element;\n  ControlBarPeopleButton?: JSX.Element;\n  Link?: JSX.Element;\n  MoreDrawerMicrophones?: JSX.Element;\n  MoreDrawerPeople?: JSX.Element;\n  MoreDrawerSelectedMicrophone?: JSX.Element;\n  MoreDrawerSelectedSpeaker?: JSX.Element;\n  MoreDrawerSpeakers?: JSX.Element;\n\n  // Call icons\n  ControlButtonCameraOff?: JSX.Element;\n  ControlButtonCameraOn?: JSX.Element;\n  ControlButtonEndCall?: JSX.Element;\n  ControlButtonMicOff?: JSX.Element;\n  ControlButtonMicOn?: JSX.Element;\n  ControlButtonOptions?: JSX.Element;\n  ControlButtonScreenShareStart?: JSX.Element;\n  ControlButtonScreenShareStop?: JSX.Element;\n  ErrorBarCallCameraAccessDenied?: JSX.Element;\n  ErrorBarCallCameraAlreadyInUse?: JSX.Element;\n  ErrorBarCallLocalVideoFreeze?: JSX.Element;\n  ErrorBarCallMacOsCameraAccessDenied?: JSX.Element;\n  ErrorBarCallMacOsMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneMutedBySystem?: JSX.Element;\n  ErrorBarCallMicrophoneUnmutedBySystem?: JSX.Element;\n  ErrorBarCallNetworkQualityLow?: JSX.Element;\n  ErrorBarCallNoMicrophoneFound?: JSX.Element;\n  ErrorBarCallNoSpeakerFound?: JSX.Element;\n  ErrorBarClear?: JSX.Element;\n  HorizontalGalleryLeftButton?: JSX.Element;\n  HorizontalGalleryRightButton?: JSX.Element;\n  LobbyScreenConnectingToCall?: JSX.Element;\n  LobbyScreenWaitingToBeAdmitted?: JSX.Element;\n  LocalDeviceSettingsCamera?: JSX.Element;\n  LocalDeviceSettingsMic?: JSX.Element;\n  LocalDeviceSettingsSpeaker?: JSX.Element;\n  LocalPreviewPlaceholder?: JSX.Element;\n  Muted?: JSX.Element;\n  NetworkReconnectIcon?: JSX.Element;\n  NoticePageAccessDeniedTeamsMeeting?: JSX.Element;\n  NoticePageJoinCallFailedDueToNoNetwork?: JSX.Element;\n  NoticePageLeftCall?: JSX.Element;\n  NoticePageRemovedFromCall?: JSX.Element;\n  OptionsCamera?: JSX.Element;\n  OptionsMic?: JSX.Element;\n  OptionsSpeaker?: JSX.Element;\n  ParticipantItemMicOff?: JSX.Element;\n  ParticipantItemScreenShareStart?: JSX.Element;\n  VideoTileMicOff?: JSX.Element;\n  LocalCameraSwitch?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneAddPerson?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneOpenDialpad?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  DialpadStartCall?: JSX.Element;\n\n  // Chat icons\n  EditBoxCancel?: JSX.Element;\n  EditBoxSubmit?: JSX.Element;\n  MessageDelivered?: JSX.Element;\n  MessageEdit?: JSX.Element;\n  MessageFailed?: JSX.Element;\n  MessageRemove?: JSX.Element;\n  MessageSeen?: JSX.Element;\n  MessageSending?: JSX.Element;\n  SendBoxSend?: JSX.Element;\n  SendBoxSendHovered?: JSX.Element;\n  SendBoxAttachFile?: JSX.Element;\n\n  // Icons common to Call and Chat.\n  ParticipantItemOptions?: JSX.Element;\n  ParticipantItemOptionsHovered?: JSX.Element;\n};\n\n/**\n * Icon wrapper to use when including customizable icons inside the CallWithChatComposite.\n * This wrapper ensures the icon name is being type-checked helping ensure no typos\n * and ensure that icon is customizable through the composite API.\n *\n * @private\n */\nexport const CallWithChatCompositeIcon = (props: CompositeIconProps<CallWithChatCompositeIcons>): JSX.Element => (\n  <FontIcon {...props} />\n);\n\n/**\n * Icons that can be overridden in one of the composites exported by this library.\n *\n * See {@link ChatCompositeIcons}, {@link CallCompositeIcons} and {@link CallWithChatCompositeIcons} for more targeted types.\n *\n * @public\n */\nexport type CompositeIcons = ChatCompositeIcons & CallCompositeIcons & CallWithChatCompositeIcons;\n\"../../../../react-components/src\""]}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/icons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CallEnd20Filled, CallMissed20Filled, CameraSwitch24Regular, Chat20Filled, Chat20Regular, Info20Filled, MicOff20Filled, Mic20Filled, Mic20Regular, People20Regular, PersonDelete20Filled, Speaker220Filled, Speaker220Regular, Video20Filled, VideoOff20Filled, WifiWarning20Filled } from '@fluentui/react-icons';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PersonAdd20Regular, Dialpad20Regular, Call20Regular } from '@fluentui/react-icons';\nimport { DEFAULT_COMPONENT_ICONS } from '@internal/react-components';\nimport React from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon, IIconProps, Spinner, SpinnerSize } from '@fluentui/react';\n/* @conditional-compile-remove(file-sharing) */\nimport { Attach20Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(video-background-effects) */\nimport { VideoBackgroundEffect20Regular, VideoPerson20Filled } from '@fluentui/react-icons';\nconst SpinnerIcon = (): JSX.Element => <Spinner size={SpinnerSize.large} />;\n\n/**\n * The default set of icons used by the composites directly (i.e. not via the components defined in this library).\n *\n * @public\n */\nexport const COMPOSITE_ONLY_ICONS: CompositeIcons = {\n  ChevronLeft: undefined,\n  Link: undefined,\n  LobbyScreenConnectingToCall: <SpinnerIcon />,\n  LobbyScreenWaitingToBeAdmitted: <SpinnerIcon />,\n  LocalDeviceSettingsCamera: <Video20Filled />,\n  LocalDeviceSettingsMic: <Mic20Filled />,\n  LocalDeviceSettingsSpeaker: <Speaker220Filled />,\n  LocalPreviewPlaceholder: <VideoOff20Filled />,\n  LocalCameraSwitch: <CameraSwitch24Regular />,\n  ControlBarChatButtonActive: <Chat20Filled />,\n  ControlBarChatButtonInactive: <Chat20Regular />,\n  ControlBarPeopleButton: <People20Regular />,\n  MoreDrawerMicrophones: <Mic20Regular />,\n  MoreDrawerPeople: <People20Regular />,\n  MoreDrawerSpeakers: <Speaker220Regular />,\n  MoreDrawerSelectedMicrophone: <Mic20Filled />,\n  MoreDrawerSelectedSpeaker: <Speaker220Filled />,\n  Muted: <MicOff20Filled />,\n  NetworkReconnectIcon: <CallMissed20Filled />,\n  NoticePageAccessDeniedTeamsMeeting: <PersonDelete20Filled />,\n  NoticePageJoinCallFailedDueToNoNetwork: <WifiWarning20Filled />,\n  NoticePageLeftCall: <CallEnd20Filled />,\n  NoticePageRemovedFromCall: <Info20Filled />,\n  /* @conditional-compile-remove(file-sharing) */\n  SendBoxAttachFile: <Attach20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneAddPerson: <PersonAdd20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneOpenDialpad: <Dialpad20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  DialpadStartCall: <Call20Regular />,\n  /* @conditional-compile-remove(rooms) */\n  NoticePageInvalidRoom: <Info20Filled />,\n  /* @conditional-compile-remove(video-background-effects) */\n  BlurVideoBackground: <VideoBackgroundEffect20Regular />,\n  /* @conditional-compile-remove(video-background-effects) */\n  RemoveVideoBackgroundEffect: <VideoPerson20Filled />\n};\n\n/**\n * The default set of icons that are available to used in the Composites.\n *\n * @public\n */\nexport const DEFAULT_COMPOSITE_ICONS = {\n  ...DEFAULT_COMPONENT_ICONS,\n  ...COMPOSITE_ONLY_ICONS\n};\n\n/** @private */\nexport type CompositeIconProps<Icons> = IIconProps & {\n  iconName: keyof Icons;\n};\n\n/**\n * Icons that can be overridden for {@link ChatComposite}.\n *\n * @public\n */\nexport type ChatCompositeIcons = {\n  EditBoxCancel?: JSX.Element;\n  EditBoxSubmit?: JSX.Element;\n  MessageDelivered?: JSX.Element;\n  MessageEdit?: JSX.Element;\n  MessageFailed?: JSX.Element;\n  MessageRemove?: JSX.Element;\n  MessageSeen?: JSX.Element;\n  MessageSending?: JSX.Element;\n  ParticipantItemOptions?: JSX.Element;\n  ParticipantItemOptionsHovered?: JSX.Element;\n  SendBoxSend?: JSX.Element;\n  SendBoxSendHovered?: JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  SendBoxAttachFile?: JSX.Element;\n};\n\n/**\n * Icon wrapper to use when including customizable icons inside the ChatComposite.\n * This wrapper ensures the icon name is being type-checked helping ensure no typos\n * and ensure that icon is customizable through the composite API.\n *\n * @private\n */\nexport const ChatCompositeIcon = (props: CompositeIconProps<ChatCompositeIcons>): JSX.Element => <FontIcon {...props} />;\n\n/**\n * Icons that can be overridden for {@link CallComposite}.\n *\n * @public\n */\nexport type CallCompositeIcons = {\n  ControlBarPeopleButton?: JSX.Element;\n  ControlButtonCameraOff?: JSX.Element;\n  ControlButtonCameraOn?: JSX.Element;\n  ControlButtonEndCall?: JSX.Element;\n  ControlButtonMicOff?: JSX.Element;\n  ControlButtonMicOn?: JSX.Element;\n  ControlButtonOptions?: JSX.Element;\n  ControlButtonParticipants?: JSX.Element;\n  ControlButtonScreenShareStart?: JSX.Element;\n  ControlButtonScreenShareStop?: JSX.Element;\n  ErrorBarCallCameraAccessDenied?: JSX.Element;\n  ErrorBarCallCameraAlreadyInUse?: JSX.Element;\n  ErrorBarCallLocalVideoFreeze?: JSX.Element;\n  ErrorBarCallMacOsCameraAccessDenied?: JSX.Element;\n  ErrorBarCallMacOsMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneMutedBySystem?: JSX.Element;\n  ErrorBarCallMicrophoneUnmutedBySystem?: JSX.Element;\n  ErrorBarCallNetworkQualityLow?: JSX.Element;\n  ErrorBarCallNoMicrophoneFound?: JSX.Element;\n  ErrorBarCallNoSpeakerFound?: JSX.Element;\n  ErrorBarClear?: JSX.Element;\n  HorizontalGalleryLeftButton?: JSX.Element;\n  HorizontalGalleryRightButton?: JSX.Element;\n  LobbyScreenConnectingToCall?: JSX.Element;\n  LobbyScreenWaitingToBeAdmitted?: JSX.Element;\n  LocalDeviceSettingsCamera?: JSX.Element;\n  LocalDeviceSettingsMic?: JSX.Element;\n  LocalDeviceSettingsSpeaker?: JSX.Element;\n  LocalPreviewPlaceholder?: JSX.Element;\n  Muted?: JSX.Element;\n  NetworkReconnectIcon?: JSX.Element;\n  NoticePageAccessDeniedTeamsMeeting?: JSX.Element;\n  NoticePageJoinCallFailedDueToNoNetwork?: JSX.Element;\n  NoticePageLeftCall?: JSX.Element;\n  NoticePageRemovedFromCall?: JSX.Element;\n  OptionsCamera?: JSX.Element;\n  OptionsMic?: JSX.Element;\n  OptionsSpeaker?: JSX.Element;\n  ParticipantItemMicOff?: JSX.Element;\n  ParticipantItemOptions?: JSX.Element;\n  ParticipantItemOptionsHovered?: JSX.Element;\n  ParticipantItemScreenShareStart?: JSX.Element;\n  VideoTileMicOff?: JSX.Element;\n  LocalCameraSwitch?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneAddPerson?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneOpenDialpad?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  DialpadStartCall?: JSX.Element;\n  /* @conditional-compile-remove(rooms) */\n  NoticePageInvalidRoom?: JSX.Element;\n  /* @conditional-compile-remove(video-background-effects) */\n  BlurVideoBackground?: JSX.Element;\n  /* @conditional-compile-remove(video-background-effects) */\n  RemoveVideoBackgroundEffect?: JSX.Element;\n};\n\n/**\n * Icon wrapper to use when including customizable icons inside the CallComposite.\n * This wrapper ensures the icon name is being type-checked helping ensure no typos\n * and ensure that icon is customizable through the composite API.\n *\n * @private\n */\nexport const CallCompositeIcon = (props: CompositeIconProps<CallCompositeIcons>): JSX.Element => <FontIcon {...props} />;\n\n/**\n * Icons that can be overridden for {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeIcons = {\n  // CallWithChat Specific Icons\n  ChevronLeft?: JSX.Element;\n  ControlBarChatButtonActive?: JSX.Element;\n  ControlBarChatButtonInactive?: JSX.Element;\n  ControlBarPeopleButton?: JSX.Element;\n  Link?: JSX.Element;\n  MoreDrawerMicrophones?: JSX.Element;\n  MoreDrawerPeople?: JSX.Element;\n  MoreDrawerSelectedMicrophone?: JSX.Element;\n  MoreDrawerSelectedSpeaker?: JSX.Element;\n  MoreDrawerSpeakers?: JSX.Element;\n\n  // Call icons\n  ControlButtonCameraOff?: JSX.Element;\n  ControlButtonCameraOn?: JSX.Element;\n  ControlButtonEndCall?: JSX.Element;\n  ControlButtonMicOff?: JSX.Element;\n  ControlButtonMicOn?: JSX.Element;\n  ControlButtonOptions?: JSX.Element;\n  ControlButtonScreenShareStart?: JSX.Element;\n  ControlButtonScreenShareStop?: JSX.Element;\n  ErrorBarCallCameraAccessDenied?: JSX.Element;\n  ErrorBarCallCameraAlreadyInUse?: JSX.Element;\n  ErrorBarCallLocalVideoFreeze?: JSX.Element;\n  ErrorBarCallMacOsCameraAccessDenied?: JSX.Element;\n  ErrorBarCallMacOsMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneAccessDenied?: JSX.Element;\n  ErrorBarCallMicrophoneMutedBySystem?: JSX.Element;\n  ErrorBarCallMicrophoneUnmutedBySystem?: JSX.Element;\n  ErrorBarCallNetworkQualityLow?: JSX.Element;\n  ErrorBarCallNoMicrophoneFound?: JSX.Element;\n  ErrorBarCallNoSpeakerFound?: JSX.Element;\n  ErrorBarClear?: JSX.Element;\n  HorizontalGalleryLeftButton?: JSX.Element;\n  HorizontalGalleryRightButton?: JSX.Element;\n  LobbyScreenConnectingToCall?: JSX.Element;\n  LobbyScreenWaitingToBeAdmitted?: JSX.Element;\n  LocalDeviceSettingsCamera?: JSX.Element;\n  LocalDeviceSettingsMic?: JSX.Element;\n  LocalDeviceSettingsSpeaker?: JSX.Element;\n  LocalPreviewPlaceholder?: JSX.Element;\n  Muted?: JSX.Element;\n  NetworkReconnectIcon?: JSX.Element;\n  NoticePageAccessDeniedTeamsMeeting?: JSX.Element;\n  NoticePageJoinCallFailedDueToNoNetwork?: JSX.Element;\n  NoticePageLeftCall?: JSX.Element;\n  NoticePageRemovedFromCall?: JSX.Element;\n  OptionsCamera?: JSX.Element;\n  OptionsMic?: JSX.Element;\n  OptionsSpeaker?: JSX.Element;\n  ParticipantItemMicOff?: JSX.Element;\n  ParticipantItemScreenShareStart?: JSX.Element;\n  VideoTileMicOff?: JSX.Element;\n  LocalCameraSwitch?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneAddPerson?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  PeoplePaneOpenDialpad?: JSX.Element;\n  /* @conditional-compile-remove(PSTN-calls) */\n  DialpadStartCall?: JSX.Element;\n\n  // Chat icons\n  EditBoxCancel?: JSX.Element;\n  EditBoxSubmit?: JSX.Element;\n  MessageDelivered?: JSX.Element;\n  MessageEdit?: JSX.Element;\n  MessageFailed?: JSX.Element;\n  MessageRemove?: JSX.Element;\n  MessageSeen?: JSX.Element;\n  MessageSending?: JSX.Element;\n  SendBoxSend?: JSX.Element;\n  SendBoxSendHovered?: JSX.Element;\n  SendBoxAttachFile?: JSX.Element;\n\n  // Icons common to Call and Chat.\n  ParticipantItemOptions?: JSX.Element;\n  ParticipantItemOptionsHovered?: JSX.Element;\n};\n\n/**\n * Icon wrapper to use when including customizable icons inside the CallWithChatComposite.\n * This wrapper ensures the icon name is being type-checked helping ensure no typos\n * and ensure that icon is customizable through the composite API.\n *\n * @private\n */\nexport const CallWithChatCompositeIcon = (props: CompositeIconProps<CallWithChatCompositeIcons>): JSX.Element => <FontIcon {...props} />;\n\n/**\n * Icons that can be overridden in one of the composites exported by this library.\n *\n * See {@link ChatCompositeIcons}, {@link CallCompositeIcons} and {@link CallWithChatCompositeIcons} for more targeted types.\n *\n * @public\n */\nexport type CompositeIcons = ChatCompositeIcons & CallCompositeIcons & CallWithChatCompositeIcons;\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/styles/Composite.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Composite.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/Composite.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * This minimum width is to make sure the side pane does not overlap with the composite when the screen is narrow.\n *\n * @private\n */\nexport const compositeMinWidthRem = 30;\n"]}
+{"version":3,"file":"Composite.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/styles/Composite.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * This minimum width is to make sure the side pane does not overlap with the composite when the screen is narrow.\n *\n * @private\n */\nexport const compositeMinWidthRem = 30;"]}

package/dist/dist-esm/react-composites/src/composites/common/styles/GlobalHostLayer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHostLayer.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/GlobalHostLayer.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,QAAQ;CACrB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react/lib/Styling';\n\n/**\n * @private\n */\nexport const globalLayerHostStyle: IStyle = {\n  position: 'fixed',\n  zIndex: 1000000,\n  inset: '0px',\n  visibility: 'hidden'\n};\n"]}
+{"version":3,"file":"GlobalHostLayer.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/styles/GlobalHostLayer.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,QAAQ;CACrB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react/lib/Styling';\n\n/**\n * @private\n */\nexport const globalLayerHostStyle: IStyle = {\n  position: 'fixed',\n  zIndex: 1000000,\n  inset: '0px',\n  visibility: 'hidden'\n};"]}

package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.js

@@ -20,21 +20,32 @@ export const getPipStyles = (theme) => ({
     modal: {
         main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
             // Above the message thread / people pane.
-            zIndex: 2 }, (theme.rtl
-            ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
-            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
+            zIndex: 2 }, (theme.rtl ? {
+            left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx)
+        } : {
+            right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx)
+        })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
     }
 });
 /**
  * @private
  */
 export const PIPContainerStyle = {
-    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
+    root: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none'
+    }
 };
 /**
  * @private
  */
-export const hiddenStyle = concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
+export const hiddenStyle = concatStyleSets(PIPContainerStyle, {
+    root: {
+        display: 'none'
+    }
+});
 /**
  * @private
  */