@azure/communication-react 1.9.0 → 1.10.0-beta.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddPeopleDropdown.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AddPeopleDropdown.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAE,UAAoB,EAA0B,EAAE,CAAC,CAAC;IACzG,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;QACzC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QACtF,KAAK,EAAE,MAAM;KACd;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAkC,EAAE,CAAC,CAAC;IAChF,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,6EAA6E;IAC7E,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IContextualMenuStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const themedCopyLinkButtonStyles = (theme: Theme, mobileView?: boolean): Partial<IButtonStyles> => ({\n  root: {\n    minHeight: mobileView ? '3rem' : '2.5rem',\n    borderRadius: mobileView ? theme.effects.roundedCorner6 : theme.effects.roundedCorner4,\n    width: '100%'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\n\n/**\n * @private\n */\nexport const themedMenuStyle = (theme: Theme): Partial<IContextualMenuStyles> => ({\n  root: {\n    borderRadius: theme.effects.roundedCorner6\n  }\n});\n\n/**\n * @private\n */\nexport const iconStyles = {\n  // overwrite default line height which results in icons having different size\n  lineHeight: '0',\n  width: '1.125rem'\n};"]}

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

@@ -29,6 +29,11 @@ export declare type AvatarPersonaData = {
      * @defaultvalue `white`
      */
     initialsTextColor?: string;
+    /**
+     * If true, show the special coin for unknown persona.
+     * It has '?' in place of initials, with static font and background colors
+     */
+    showUnknownPersonaCoin?: boolean;
 };
 /**
  * Callback function used to provide custom data to build an avatar for a user.

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

@@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react';
  * @private
  */
 export const AvatarPersona = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = useState();
     useEffect(() => {
@@ -34,7 +34,8 @@ export const AvatarPersona = (props) => {
     }, [data, dataProvider, userId]);
     return React.createElement(Persona, Object.assign({}, props, { text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
         // default disable tooltip unless specified
-        showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false }));
+        showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, 
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ showUnknownPersonaCoin: (_h = (_g = data === null || data === void 0 ? void 0 : data.showUnknownPersonaCoin) !== null && _g !== void 0 ? _g : props.showUnknownPersonaCoin) !== null && _h !== void 0 ? _h : false }));
 };
 const avatarDeepDifferenceCheck = (currentData, newData) => {
     return (currentData === null || currentData === void 0 ? void 0 : currentData.text) !== (newData === null || newData === void 0 ? void 0 : newData.text) || (currentData === null || currentData === void 0 ? void 0 : currentData.imageUrl) !== (newData === null || newData === void 0 ? void 0 : newData.imageUrl) || (currentData === null || currentData === void 0 ? void 0 : currentData.initialsColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsColor) || (currentData === null || currentData === void 0 ? void 0 : currentData.imageInitials) !== (newData === null || newData === void 0 ? void 0 : newData.imageInitials) || (currentData === null || currentData === void 0 ? void 0 : currentData.initialsTextColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsTextColor);

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarPersona.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AvatarPersona.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAiB,OAAO,EAAwB,MAAM,iBAAiB,CAAC;AAC/E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAsDnD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;;IACtE,MAAM,EACJ,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,GAAS,EAAE;YACV,IAAI,YAAY,IAAI,MAAM,EAAE;gBAC1B,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;gBAC3C,IAAI,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE;oBAC5C,OAAO,CAAC,OAAO,CAAC,CAAC;iBAClB;aACF;QACH,CAAC,CAAA,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACjC,OAAO,oBAAC,OAAO,oBAAK,KAAK,IAAE,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,IAAI,EAAE,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,mCAAI,QAAQ,EAAE,aAAa,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,mCAAI,aAAa,EAAE,aAAa,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,mCAAI,aAAa,EAAE,iBAAiB,EAAE,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,mCAAI,iBAAiB,mCAAI,OAAO;QAC/Q,2CAA2C;QAC3C,mBAAmB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,KAAK,IAAI,CAAC;AACxD,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,WAA+B,EAAE,OAA2B,EAAW,EAAE;IAC1G,OAAO,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAA,CAAC;AAC/Q,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersonaProps, Persona, PersonaInitialsColor } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\n\n/**\n * Custom data attributes for displaying avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaData = {\n  /**\n   * Primary text to display, usually the name of the person.\n   */\n  text?: string;\n  /**\n   * Image URL to use, should be a square aspect ratio and big enough to fit in the image area.\n   */\n  imageUrl?: string;\n  /**\n   * The user's initials to display in the image area when there is no image.\n   * @defaultvalue Derived from `text`\n   */\n  imageInitials?: string;\n  /**\n   * The background color when the user's initials are displayed.\n   * @defaultvalue Derived from `text`\n   */\n  initialsColor?: PersonaInitialsColor | string;\n  /**\n   * The text color when the user's initials are displayed\n   * @defaultvalue `white`\n   */\n  initialsTextColor?: string;\n};\n\n/**\n * Callback function used to provide custom data to build an avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaDataCallback = (userId: string) => Promise<AvatarPersonaData>;\n\n/**\n * @private\n */\nexport interface AvatarPersonaProps extends IPersonaProps {\n  /**\n   * Azure Communicator user ID.\n   */\n  userId?: string;\n  /**\n   * A function that returns a Promise that resolves to the data to be displayed.\n   */\n  dataProvider?: AvatarPersonaDataCallback;\n}\n\n/**\n * An Avatar component made using the `Persona` component.\n * It allows you to specify a `userId` and a `dataProvider` to retrieve the `AvatarPersonaData`.\n * Read more about `Persona` component at https://developer.microsoft.com/fluentui#/controls/web/persona\n *\n * @private\n */\nexport const AvatarPersona = (props: AvatarPersonaProps): JSX.Element => {\n  const {\n    userId,\n    dataProvider,\n    text,\n    imageUrl,\n    imageInitials,\n    initialsColor,\n    initialsTextColor,\n    showOverflowTooltip\n  } = props;\n  const [data, setData] = useState<AvatarPersonaData | undefined>();\n  useEffect(() => {\n    (async () => {\n      if (dataProvider && userId) {\n        const newData = await dataProvider(userId);\n        if (avatarDeepDifferenceCheck(data, newData)) {\n          setData(newData);\n        }\n      }\n    })();\n  }, [data, dataProvider, userId]);\n  return <Persona {...props} text={data?.text ?? text} imageUrl={data?.imageUrl ?? imageUrl} imageInitials={data?.imageInitials ?? imageInitials} initialsColor={data?.initialsColor ?? initialsColor} initialsTextColor={data?.initialsTextColor ?? initialsTextColor ?? 'white'}\n  // default disable tooltip unless specified\n  showOverflowTooltip={showOverflowTooltip ?? false} />;\n};\nconst avatarDeepDifferenceCheck = (currentData?: AvatarPersonaData, newData?: AvatarPersonaData): boolean => {\n  return currentData?.text !== newData?.text || currentData?.imageUrl !== newData?.imageUrl || currentData?.initialsColor !== newData?.initialsColor || currentData?.imageInitials !== newData?.imageInitials || currentData?.initialsTextColor !== newData?.initialsTextColor;\n};"]}
+{"version":3,"file":"AvatarPersona.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AvatarPersona.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAiB,OAAO,EAAwB,MAAM,iBAAiB,CAAC;AAC/E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA4DnD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;;IACtE,MAAM,EACJ,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,GAAS,EAAE;YACV,IAAI,YAAY,IAAI,MAAM,EAAE;gBAC1B,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;gBAC3C,IAAI,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE;oBAC5C,OAAO,CAAC,OAAO,CAAC,CAAC;iBAClB;aACF;QACH,CAAC,CAAA,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACjC,OAAO,oBAAC,OAAO,oBAAK,KAAK,IAAE,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,IAAI,EAAE,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,mCAAI,QAAQ,EAAE,aAAa,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,mCAAI,aAAa,EAAE,aAAa,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,mCAAI,aAAa,EAAE,iBAAiB,EAAE,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,mCAAI,iBAAiB,mCAAI,OAAO;QAC/Q,2CAA2C;QAC3C,mBAAmB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,KAAK;QACjD,6CAA6C,CAAC,mDAAmD,CAAC,sBAAsB,EAAE,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,sBAAsB,mCAAI,KAAK,CAAC,sBAAsB,mCAAI,KAAK,IAAI,CAAC;AACtM,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,WAA+B,EAAE,OAA2B,EAAW,EAAE;IAC1G,OAAO,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAA,CAAC;AAC/Q,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersonaProps, Persona, PersonaInitialsColor } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\n\n/**\n * Custom data attributes for displaying avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaData = {\n  /**\n   * Primary text to display, usually the name of the person.\n   */\n  text?: string;\n  /**\n   * Image URL to use, should be a square aspect ratio and big enough to fit in the image area.\n   */\n  imageUrl?: string;\n  /**\n   * The user's initials to display in the image area when there is no image.\n   * @defaultvalue Derived from `text`\n   */\n  imageInitials?: string;\n  /**\n   * The background color when the user's initials are displayed.\n   * @defaultvalue Derived from `text`\n   */\n  initialsColor?: PersonaInitialsColor | string;\n  /**\n   * The text color when the user's initials are displayed\n   * @defaultvalue `white`\n   */\n  initialsTextColor?: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * If true, show the special coin for unknown persona.\n   * It has '?' in place of initials, with static font and background colors\n   */\n  showUnknownPersonaCoin?: boolean;\n};\n\n/**\n * Callback function used to provide custom data to build an avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaDataCallback = (userId: string) => Promise<AvatarPersonaData>;\n\n/**\n * @private\n */\nexport interface AvatarPersonaProps extends IPersonaProps {\n  /**\n   * Azure Communicator user ID.\n   */\n  userId?: string;\n  /**\n   * A function that returns a Promise that resolves to the data to be displayed.\n   */\n  dataProvider?: AvatarPersonaDataCallback;\n}\n\n/**\n * An Avatar component made using the `Persona` component.\n * It allows you to specify a `userId` and a `dataProvider` to retrieve the `AvatarPersonaData`.\n * Read more about `Persona` component at https://developer.microsoft.com/fluentui#/controls/web/persona\n *\n * @private\n */\nexport const AvatarPersona = (props: AvatarPersonaProps): JSX.Element => {\n  const {\n    userId,\n    dataProvider,\n    text,\n    imageUrl,\n    imageInitials,\n    initialsColor,\n    initialsTextColor,\n    showOverflowTooltip\n  } = props;\n  const [data, setData] = useState<AvatarPersonaData | undefined>();\n  useEffect(() => {\n    (async () => {\n      if (dataProvider && userId) {\n        const newData = await dataProvider(userId);\n        if (avatarDeepDifferenceCheck(data, newData)) {\n          setData(newData);\n        }\n      }\n    })();\n  }, [data, dataProvider, userId]);\n  return <Persona {...props} text={data?.text ?? text} imageUrl={data?.imageUrl ?? imageUrl} imageInitials={data?.imageInitials ?? imageInitials} initialsColor={data?.initialsColor ?? initialsColor} initialsTextColor={data?.initialsTextColor ?? initialsTextColor ?? 'white'}\n  // default disable tooltip unless specified\n  showOverflowTooltip={showOverflowTooltip ?? false}\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ showUnknownPersonaCoin={data?.showUnknownPersonaCoin ?? props.showUnknownPersonaCoin ?? false} />;\n};\nconst avatarDeepDifferenceCheck = (currentData?: AvatarPersonaData, newData?: AvatarPersonaData): boolean => {\n  return currentData?.text !== newData?.text || currentData?.imageUrl !== newData?.imageUrl || currentData?.initialsColor !== newData?.initialsColor || currentData?.imageInitials !== newData?.imageInitials || currentData?.initialsTextColor !== newData?.initialsTextColor;\n};"]}

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { PhoneNumberIdentifier } from '@azure/communication-common';
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
+/** @private */
+export interface CallingDialpadStrings {
+    dialpadModalAriaLabel: string;
+    dialpadModalTitle: string;
+    dialpadCloseModalButtonAriaLabel: string;
+    dialpadStartCallButtonLabel: string;
+}
+/** @private */
+export interface CallingDialpadProps {
+    isMobile: boolean;
+    showDialpad: boolean;
+    strings: CallingDialpadStrings;
+    onDismissDialpad: () => void;
+    onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;
+    alternateCallerId: string;
+}
+/** @private */
+export declare const CallingDialpad: (props: CallingDialpadProps) => JSX.Element;
+//# sourceMappingURL=CallingDialpad.d.ts.map

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

@@ -0,0 +1,74 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { useState } from 'react';
+import { useMemo } from 'react';
+import { Dialpad } from "../../../../react-components/src";
+import { _DrawerSurface } from "../../../../react-components/src";
+import { Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';
+import { PrimaryButton } from '@fluentui/react';
+import { themeddialpadModalStyle } from './CallingDialpad.styles';
+import { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';
+/* @conditional-compile-remove(PSTN-calls) */
+import { CallWithChatCompositeIcon } from './icons';
+import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
+/** @private */
+export const CallingDialpad = (props) => {
+    const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;
+    const [textFieldInput, setTextFieldInput] = useState('');
+    const theme = useTheme();
+    const onDismissTriggered = () => {
+        setTextFieldInput('');
+        onDismissDialpad();
+    };
+    const onClickCall = () => {
+        if (onAddParticipant) {
+            /**
+             * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.
+             * We assume the input number always include countrycode
+             */
+            const phoneNumber = {
+                phoneNumber: '+' + textFieldInput.replace(/\D/g, '').replaceAll(' ', '')
+            };
+            onAddParticipant(phoneNumber, {
+                alternateCallerId: {
+                    phoneNumber: alternateCallerId
+                }
+            });
+            onDismissTriggered();
+        }
+    };
+    const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
+    const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
+    const callButtonStyle = useMemo(() => themedCallButtonStyle(theme), [theme]);
+    const dialpadComponent = () => {
+        return React.createElement(React.Fragment, null,
+            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
+            React.createElement(PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' }));
+        return React.createElement(React.Fragment, null);
+    };
+    if (isMobile) {
+        return React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, showDialpad && React.createElement(Stack, { styles: drawerContainerStyles() },
+            React.createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered, disableMaxHeight: true },
+                React.createElement(Stack, { style: {
+                        padding: '1rem'
+                    } }, dialpadComponent()))));
+    }
+    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
+        React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
+            React.createElement(Text, null, strings.dialpadModalTitle),
+            React.createElement(IconButton, { iconProps: {
+                    iconName: 'Cancel'
+                }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: {
+                    color: theme.palette.black
+                } })),
+        React.createElement(Stack, { style: {
+                overflow: 'hidden'
+            } }, dialpadComponent())));
+};
+function DialpadStartCallIconTrampoline() {
+    /* @conditional-compile-remove(PSTN-calls) */
+    return React.createElement(CallWithChatCompositeIcon, { iconName: "DialpadStartCall" });
+    return React.createElement(React.Fragment, null);
+}
+//# sourceMappingURL=CallingDialpad.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallingDialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CallingDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';\nimport { IButtonStyles, PrimaryButton } from '@fluentui/react';\nimport { themeddialpadModalStyle } from './CallingDialpad.styles';\nimport { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/** @private */\nexport interface CallingDialpadStrings {\n  dialpadModalAriaLabel: string;\n  dialpadModalTitle: string;\n  dialpadCloseModalButtonAriaLabel: string;\n  dialpadStartCallButtonLabel: string;\n}\n\n/** @private */\nexport interface CallingDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: CallingDialpadStrings;\n  onDismissDialpad: () => void;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId: string;\n}\n\n/** @private */\nexport const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {\n  const {\n    strings,\n    isMobile,\n    showDialpad,\n    onDismissDialpad,\n    onAddParticipant,\n    alternateCallerId\n  } = props;\n  const [textFieldInput, setTextFieldInput] = useState('');\n  const theme = useTheme();\n  const onDismissTriggered = (): void => {\n    setTextFieldInput('');\n    onDismissDialpad();\n  };\n  const onClickCall = (): void => {\n    if (onAddParticipant) {\n      /**\n       * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.\n       * We assume the input number always include countrycode\n       */\n\n      const phoneNumber = {\n        phoneNumber: '+' + textFieldInput.replace(/\\D/g, '').replaceAll(' ', '')\n      };\n      onAddParticipant(phoneNumber, {\n        alternateCallerId: {\n          phoneNumber: alternateCallerId\n        }\n      });\n      onDismissTriggered();\n    }\n  };\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n  const callButtonStyle: Partial<IButtonStyles> = useMemo(() => themedCallButtonStyle(theme), [theme]);\n  const dialpadComponent = (): JSX.Element => {\n    return <>\n        <Dialpad styles={dialpadStyle} onChange={setTextFieldInput} isMobile={isMobile} />\n        <PrimaryButton text={strings.dialpadStartCallButtonLabel} onRenderIcon={() => DialpadStartCallIconTrampoline()} onClick={onClickCall} styles={callButtonStyle} disabled={textFieldInput === ''} />\n      </>;\n    return <></>;\n  };\n  if (isMobile) {\n    return <Stack data-ui-id=\"call-with-chat-composite-dialpad\">\n        {showDialpad && <Stack styles={drawerContainerStyles()}>\n            <_DrawerSurface onLightDismiss={onDismissTriggered} disableMaxHeight={true}>\n              <Stack style={{\n            padding: '1rem'\n          }}>{dialpadComponent()}</Stack>\n            </_DrawerSurface>\n          </Stack>}\n      </Stack>;\n  }\n  return <>\n      {<Modal titleAriaId={strings.dialpadModalAriaLabel} isOpen={showDialpad} onDismiss={onDismissTriggered} isBlocking={true} styles={dialpadModalStyle} data-ui-id=\"call-with-chat-composite-dialpad\">\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n            <Text>{strings.dialpadModalTitle}</Text>\n            <IconButton iconProps={{\n          iconName: 'Cancel'\n        }} ariaLabel={strings.dialpadCloseModalButtonAriaLabel} onClick={onDismissTriggered} style={{\n          color: theme.palette.black\n        }} />\n          </Stack>\n\n          <Stack style={{\n        overflow: 'hidden'\n      }}>{dialpadComponent()}</Stack>\n        </Modal>}\n    </>;\n};\nfunction DialpadStartCallIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"DialpadStartCall\" />;\n  return <></>;\n}\"../../../../react-components/src\""]}

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

@@ -0,0 +1,15 @@
+import { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';
+import { DialpadStyles } from "../../../../react-components/src";
+/**
+ * @private
+ */
+export declare const themeddialpadModalStyle: (theme: Theme) => Partial<IModalStyles>;
+/**
+ * @private
+ */
+export declare const themedDialpadStyle: (isMobile: boolean, theme: Theme) => Partial<DialpadStyles>;
+/**
+ * @private
+ */
+export declare const themedCallButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+//# sourceMappingURL=CallingDialpad.styles.d.ts.map

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

@@ -0,0 +1,61 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+export const themeddialpadModalStyle = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: '1rem'
+    }
+});
+/**
+ * @private
+ */
+export const themedDialpadStyle = (isMobile, theme) => ({
+    root: {
+        padding: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        maxWidth: '100%'
+    },
+    textField: {
+        root: {
+            borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        },
+        field: {
+            backgroundColor: theme.palette.white,
+            fontSize: theme.fonts.large.fontSize,
+            padding: '0 0.5rem',
+            textAlign: isMobile ? 'center' : 'left',
+            ':active': {
+                padding: '0 0.5rem'
+            }
+        }
+    },
+    deleteIcon: {
+        root: {
+            backgroundColor: theme.palette.white
+        }
+    },
+    digit: {
+        color: theme.palette.themeDarkAlt
+    }
+});
+/**
+ * @private
+ */
+export const themedCallButtonStyle = (theme) => ({
+    root: {
+        fontWeight: theme.fonts.medium.fontWeight,
+        fontSize: theme.fonts.medium.fontSize,
+        width: '100%',
+        height: '2.5rem',
+        borderRadius: 3,
+        padding: '0.625rem'
+    },
+    textContainer: {
+        display: 'contents'
+    }
+});
+//# sourceMappingURL=CallingDialpad.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallingDialpad.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CallingDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACvC,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACrC;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9E,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,UAAU;KACpB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: '1rem'\n  }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n  root: {\n    padding: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    maxWidth: '100%'\n  },\n  textField: {\n    root: {\n      borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n    },\n    field: {\n      backgroundColor: theme.palette.white,\n      fontSize: theme.fonts.large.fontSize,\n      padding: '0 0.5rem',\n      textAlign: isMobile ? 'center' : 'left',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  deleteIcon: {\n    root: {\n      backgroundColor: theme.palette.white\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\n\n/**\n * @private\n */\nexport const themedCallButtonStyle = (theme: Theme): Partial<IButtonStyles> => ({\n  root: {\n    fontWeight: theme.fonts.medium.fontWeight,\n    fontSize: theme.fonts.medium.fontSize,\n    width: '100%',\n    height: '2.5rem',\n    borderRadius: 3,\n    padding: '0.625rem'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\"../../../../react-components/src\""]}

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { AvatarPersonaDataCallback } from './AvatarPersona';
 /** @private */
 export declare const CaptionsBanner: (props: {
     isMobile: boolean;
+    onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
 }) => JSX.Element;
 //# sourceMappingURL=CaptionsBanner.d.ts.map

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 import React from 'react';
 /* @conditional-compile-remove(close-captions) */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 /* @conditional-compile-remove(close-captions) */
 import { _CaptionsBanner } from "../../../../react-components/src";
 /* @conditional-compile-remove(close-captions) */
@@ -20,6 +20,8 @@ import { _captionsBannerSelector } from "../../../../calling-component-bindings/
 /* @conditional-compile-remove(close-captions) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(close-captions) */
+import { AvatarPersona } from './AvatarPersona';
+/* @conditional-compile-remove(close-captions) */
 const mobileViewBannerWidth = '90%';
 /** @private */
 export const CaptionsBanner = (props) => {
@@ -54,6 +56,10 @@ export const CaptionsBanner = (props) => {
         captionsBannerSpinnerText: strings.captionsBannerSpinnerText
     };
     /* @conditional-compile-remove(close-captions) */
+    const onRenderAvatar = useCallback((userId, options) => {
+        return React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }));
+    }, [props.onFetchAvatarPersonaData]);
+    /* @conditional-compile-remove(close-captions) */
     const { innerWidth: width } = window;
     /* @conditional-compile-remove(close-captions) */
     const [windowWidth, setWindowWidth] = useState(width);
@@ -74,7 +80,7 @@ export const CaptionsBanner = (props) => {
                 React.createElement(Stack.Item, { style: {
                         width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth
                     } },
-                    React.createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
+                    React.createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
             !props.isMobile && captionsBannerProps.isCaptionsOn && React.createElement("div", { className: floatingChildClassName },
                 React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useState, useEffect } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { _CaptionsBanner, _CaptionsBannerStrings } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from './CaptionsSettingsModal';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { _captionsBannerSelector } from '@internal/calling-component-bindings';\n\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(close-captions) */\nconst mobileViewBannerWidth = '90%';\n\n/** @private */\nexport const CaptionsBanner = (props: {\n  isMobile: boolean;\n}): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const handlers = useHandlers(_CaptionsBanner);\n  /* @conditional-compile-remove(close-captions) */\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(close-captions) */\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const containerClassName = mergeStyles({\n    position: 'relative'\n  });\n  /* @conditional-compile-remove(close-captions) */\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  /* @conditional-compile-remove(close-captions) */\n  const strings = useLocale().strings.call;\n\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerStrings: _CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const {\n    innerWidth: width\n  } = window;\n  /* @conditional-compile-remove(close-captions) */\n  const [windowWidth, setWindowWidth] = useState(width);\n  /* @conditional-compile-remove(close-captions) */\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  /* @conditional-compile-remove(close-captions) */\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n  return <>\n      {/* @conditional-compile-remove(close-captions) */isCaptionsSettingsOpen && <CaptionsSettingsModal showCaptionsSettingsModal={isCaptionsSettingsOpen} onDismissCaptionsSettings={onDismissCaptionsSettings} changeCaptionLanguage />}\n      {/* @conditional-compile-remove(close-captions) */<div className={containerClassName}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{\n          width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth\n        }}>\n              <_CaptionsBanner {...captionsBannerProps} {...handlers} formFactor={props.isMobile ? 'compact' : 'default'} strings={captionsBannerStrings} />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} />\n            </div>}\n        </div>}\n    </>;\n};\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\""]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,iDAAiD;AACjD,OAAO,EAAE,eAAe,EAA+C,yCAAmC;AAG1G,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,iDAAiD;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,iDAAiD;AACjD,OAAO,EAAE,uBAAuB,EAAE,mDAA6C;AAE/E,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,iDAAiD;AACjD,OAAO,EAAE,aAAa,EAA6B,MAAM,iBAAiB,CAAC;AAE3E,iDAAiD;AACjD,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAEpC,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAI9B,EAAe,EAAE;IAChB,iDAAiD;IACjD,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IACxE,iDAAiD;IACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,iDAAiD;IACjD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrF,iDAAiD;IACjD,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,GAAS,EAAE;QAC3C,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,kBAAkB,GAAG,WAAW,CAAC;QACrC,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IACH,iDAAiD;IACjD,MAAM,sBAAsB,GAAG,WAAW,CAAC;QACzC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;KACP,CAAC,CAAC;IAEH,iDAAiD;IACjD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,iDAAiD;IACjD,MAAM,qBAAqB,GAA2B;QACpD,yBAAyB,EAAE,OAAO,CAAC,yBAAyB;KAC7D,CAAC;IACF,iDAAiD;IACjD,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,MAAe,EAAE,OAA6B,EAAE,EAAE;QACpF,OAAO,oBAAC,aAAa,kBAAC,MAAM,EAAE,MAAM,IAAM,OAAO,IAAE,YAAY,EAAE,KAAK,CAAC,wBAAwB,IAAI,CAAC;IACtG,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACrC,iDAAiD;IACjD,MAAM,EACJ,UAAU,EAAE,KAAK,EAClB,GAAG,MAAM,CAAC;IACX,iDAAiD;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,YAAY;YACnB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAClE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iDAAiD;IACjD,MAAM,sBAAsB,GAAG,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IACnE,OAAO;QAC+C,sBAAsB,IAAI,oBAAC,qBAAqB,IAAC,yBAAyB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,qBAAqB,SAAG;QAClL,6BAAK,SAAS,EAAE,kBAAkB;YAChF,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;gBAC7B,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAE;wBACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,sBAAsB;qBACvE;oBACK,oBAAC,eAAe,oBAAK,mBAAmB,EAAM,QAAQ,IAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,qBAAqB,IAAI,CACnK,CACP;YACP,CAAC,KAAK,CAAC,QAAQ,IAAI,mBAAmB,CAAC,YAAY,IAAI,6BAAK,SAAS,EAAE,sBAAsB;gBAC1F,oBAAC,wBAAwB,IAAC,uBAAuB,EAAE,uBAAuB,GAAI,CAC1E,CACJ,CACP,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useState, useEffect, useCallback } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { _CaptionsBanner, _CaptionsBannerStrings, CustomAvatarOptions } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from './CaptionsSettingsModal';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { _captionsBannerSelector } from '@internal/calling-component-bindings';\n\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(close-captions) */\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\n\n/* @conditional-compile-remove(close-captions) */\nconst mobileViewBannerWidth = '90%';\n\n/** @private */\nexport const CaptionsBanner = (props: {\n  isMobile: boolean;\n  /* @conditional-compile-remove(close-captions) */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const handlers = useHandlers(_CaptionsBanner);\n  /* @conditional-compile-remove(close-captions) */\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(close-captions) */\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const containerClassName = mergeStyles({\n    position: 'relative'\n  });\n  /* @conditional-compile-remove(close-captions) */\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  /* @conditional-compile-remove(close-captions) */\n  const strings = useLocale().strings.call;\n\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerStrings: _CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n    return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n  }, [props.onFetchAvatarPersonaData]);\n  /* @conditional-compile-remove(close-captions) */\n  const {\n    innerWidth: width\n  } = window;\n  /* @conditional-compile-remove(close-captions) */\n  const [windowWidth, setWindowWidth] = useState(width);\n  /* @conditional-compile-remove(close-captions) */\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  /* @conditional-compile-remove(close-captions) */\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n  return <>\n      {/* @conditional-compile-remove(close-captions) */isCaptionsSettingsOpen && <CaptionsSettingsModal showCaptionsSettingsModal={isCaptionsSettingsOpen} onDismissCaptionsSettings={onDismissCaptionsSettings} changeCaptionLanguage />}\n      {/* @conditional-compile-remove(close-captions) */<div className={containerClassName}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{\n          width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth\n        }}>\n              <_CaptionsBanner {...captionsBannerProps} {...handlers} onRenderAvatar={onRenderAvatar} formFactor={props.isMobile ? 'compact' : 'default'} strings={captionsBannerStrings} />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} />\n            </div>}\n        </div>}\n    </>;\n};\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\""]}

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

@@ -18,6 +18,7 @@ export interface CommonCallControlBarProps {
     disableButtonsForLobbyPage: boolean;
     callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;
     disableButtonsForHoldScreen?: boolean;
+    onClickShowDialpad?: () => void;
     onClickVideoEffects?: (showVideoEffects: boolean) => void;
     isCaptionsSupported?: boolean;
     isCaptionsOn?: boolean;
@@ -27,6 +28,7 @@ export interface CommonCallControlBarProps {
     userSetGalleryLayout?: VideoGalleryLayout;
     peopleButtonRef?: React.RefObject<IButton>;
     cameraButtonRef?: React.RefObject<IButton>;
+    videoBackgroundPickerRef?: React.RefObject<IButton>;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js

@@ -131,7 +131,7 @@ export const CommonCallControlBar = (props) => {
     const screenShareButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.screenShareButton);
     const microphoneButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.microphoneButton);
     const cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
-    const showDesktopMoreButton = /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) && (false || /* @conditional-compile-remove(close-captions) */ props.isCaptionsSupported || /* @conditional-compile-remove(gallery-layouts) */ props.onUserSetGalleryLayout);
+    const showDesktopMoreButton = /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) && (false || /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) || /* @conditional-compile-remove(close-captions) */ props.isCaptionsSupported || /* @conditional-compile-remove(gallery-layouts) */ props.onUserSetGalleryLayout);
     return React.createElement("div", { ref: controlBarSizeRef },
         React.createElement(CallAdapterProvider, { adapter: props.callAdapter }, /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn })),
         React.createElement(Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles) },
@@ -142,15 +142,23 @@ export const CommonCallControlBar = (props) => {
                         React.createElement(Stack.Item, null,
                             React.createElement("div", { ref: controlBarContainerRef },
                                 React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
-                                    microphoneButtonIsEnabled && React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView }),
-                                    cameraButtonIsEnabled && React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef }),
-                                    !props.mobileView && isEnabled(options.raiseHandButton) && React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles }),
-                                    screenShareButtonIsEnabled && React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles }), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
+                                    microphoneButtonIsEnabled && React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) }),
+                                    cameraButtonIsEnabled && React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), 
+                                        /* @conditional-compile-remove(video-background-effects) */ onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef }),
+                                    !props.mobileView && isEnabled(options.raiseHandButton) && React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) }),
+                                    screenShareButtonIsEnabled && React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) }), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
                                     _a.slice(0, props.mobileView ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                                         return React.createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' });
                                     }),
                                     props.mobileView && React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage }),
-                                    !props.mobileView && showDesktopMoreButton && React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, isCaptionsSupported: props.isCaptionsSupported, 
+                                    !props.mobileView && showDesktopMoreButton && React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, 
+                                        /*@conditional-compile-remove(PSTN-calls) */ onClickShowDialpad: props.onClickShowDialpad, 
+                                        /* @conditional-compile-remove(control-bar-button-injection) */ callControls: props.callControls, 
+                                        /* @conditional-compile-remove(close-captions) */ isCaptionsSupported: props.isCaptionsSupported, 
                                         /* @conditional-compile-remove(close-captions) */ onCaptionsSettingsClick: openCaptionsSettingsModal, 
                                         /* @conditional-compile-remove(gallery-layouts) */ onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, 
                                         /* @conditional-compile-remove(gallery-layouts) */ onUserSetGalleryLayout: props.onUserSetGalleryLayout, 

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

@@ -1 +1 @@
-{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IButton, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\nimport { CUSTOM_BUTTON_OPTIONS, generateCustomCallControlBarButton, onFetchCustomButtonPropsTrampoline } from './CustomButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from '../CaptionsSettingsModal';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaiseHand } from '../../CallComposite/components/buttons/RaiseHand';\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n  callAdapter: CallAdapter;\n  peopleButtonChecked: boolean;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked?: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n  disableButtonsForHoldScreen?: boolean;\n  /* @conditional-compile-remove(video-background-effects) */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsSupported?: boolean;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsOn?: boolean;\n  displayVertical?: boolean;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetGalleryLayout?: VideoGalleryLayout;\n  peopleButtonRef?: React.RefObject<IButton>;\n  cameraButtonRef?: React.RefObject<IButton>;\n}\nconst inferCommonCallControlOptions = (mobileView: boolean, commonCallControlOptions?: boolean | CallWithChatControlOptions): CallWithChatControlOptions | false => {\n  if (commonCallControlOptions === false) {\n    return false;\n  }\n  const options = commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Do not show screen share button when composite is optimized for mobile unless the developer\n    // has explicitly opted in.\n    if (options.screenShareButton !== true) {\n      options.screenShareButton = false;\n    }\n  }\n  return options;\n};\n\n/**\n * @private\n */\nexport const CommonCallControlBar = (props: CommonCallControlBarProps & ContainerRectProps): JSX.Element => {\n  const theme = useTheme();\n  const rtl = theme.rtl;\n  const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n  const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n  const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n  const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n  const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n  const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n  const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n  const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n  /* @conditional-compile-remove(close-captions) */\n  const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n  const handleResize = useCallback((): void => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // on load set inital width\n  useEffect(() => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // get the current width of control bar buttons and panel control buttons when browser size change\n  useEffect(() => {\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [handleResize]);\n\n  /* when size change, reset total buttons width and compare with the control bar container width\n  if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n  Instead let them take up the remaining white space on the left */\n  useEffect(() => {\n    // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n    setTotalButtonsWidth((controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth);\n  }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n  useEffect(() => {\n    setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n  }, [totalButtonsWidth, controlBarContainerWidth]);\n\n  /* @conditional-compile-remove(close-captions) */\n  const openCaptionsSettingsModal = useCallback((): void => {\n    setShowCaptionsSettingsModal(true);\n  }, []);\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = useCallback((): void => {\n    setShowCaptionsSettingsModal(false);\n  }, []);\n  const peopleButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.peopleButtonLabel,\n    selectedLabel: callWithChatStrings.selectedPeopleButtonLabel,\n    tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n    tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n  }), [callWithChatStrings]);\n  const moreButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.moreDrawerButtonLabel,\n    tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n  }), [callWithChatStrings]);\n  const centerContainerStyles = useMemo(() => {\n    const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n    return mergeStyleSets(styles, {\n      root: {\n        // Enforce a background color on control bar to ensure it matches the composite background color.\n        background: theme.semanticColors.bodyBackground\n      }\n    });\n  }, [props.mobileView, theme.semanticColors.bodyBackground]);\n  const screenShareButtonStyles = useMemo(() => !props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const commonButtonStyles = useMemo(() => !props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const endCallButtonStyles = useMemo(() => !props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const controlBarWrapperDesktopStyles: IStyle = useMemo(\n  // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n  () => !props.mobileView && !isOutOfSpace ? rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles : {}, [props.mobileView, rtl, isOutOfSpace]);\n\n  // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n  const controlBarDesktopContainerStyles: IStyle = useMemo(() => !props.mobileView && !isOutOfSpace ? {\n    position: 'relative',\n    minHeight: '4.5rem',\n    width: '100%'\n  } : {}, [props.mobileView, isOutOfSpace]);\n  const customButtons = useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options?.displayType : undefined), [options]);\n\n  // when options is false then we want to hide the whole control bar.\n  if (options === false) {\n    return <></>;\n  }\n  const sideButtonsPresent = isEnabled(options.peopleButton) || isEnabled(options.chatButton) || customButtons['secondary'] !== undefined;\n  const screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n  const microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n  const cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n  const showDesktopMoreButton = /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */isEnabled(options?.moreButton) && (false || /* @conditional-compile-remove(close-captions) */props.isCaptionsSupported || /* @conditional-compile-remove(gallery-layouts) */props.onUserSetGalleryLayout);\n  return <div ref={controlBarSizeRef}>\n      <CallAdapterProvider adapter={props.callAdapter}>\n        {/* @conditional-compile-remove(close-captions) */showCaptionsSettingsModal && <CaptionsSettingsModal showCaptionsSettingsModal={showCaptionsSettingsModal} onDismissCaptionsSettings={onDismissCaptionsSettings} changeCaptionLanguage={props.isCaptionsOn} />}\n      </CallAdapterProvider>\n      <Stack horizontal reversed={!props.mobileView && !isOutOfSpace} horizontalAlign=\"space-between\" className={mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles)}>\n        <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n          <CallAdapterProvider adapter={props.callAdapter}>\n            <Stack horizontalAlign=\"center\">\n              {/*\n               HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n               tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n               immediately after it in the dom tree.\n               */}\n              <HiddenFocusStartPoint />\n              <Stack.Item>\n                {/*\n                  Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n                  control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n                  set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n                  dockedBottom it has position absolute and would therefore float on top of the media gallery,\n                  occluding some of its content.\n                 */}\n                <div ref={controlBarContainerRef}>\n                  <ControlBar layout={props.displayVertical ? 'vertical' : 'horizontal'} styles={centerContainerStyles}>\n                    {microphoneButtonIsEnabled && <Microphone displayType={options.displayType} styles={commonButtonStyles} splitButtonsForDeviceSelection={!props.mobileView} />}\n                    {cameraButtonIsEnabled && <Camera displayType={options.displayType} styles={commonButtonStyles} splitButtonsForDeviceSelection={!props.mobileView} /* @conditional-compile-remove(video-background-effects) */\n                  onClickVideoEffects={props.onClickVideoEffects} componentRef={props.cameraButtonRef} />}\n                    {/* @conditional-compile-remove(raise-hand) */!props.mobileView && isEnabled(options.raiseHandButton) && <RaiseHand displayType={options.displayType} styles={commonButtonStyles} />}\n                    {screenShareButtonIsEnabled && <ScreenShare option={options.screenShareButton} displayType={options.displayType} styles={screenShareButtonStyles} />}\n                    {customButtons['primary']?.slice(0, props.mobileView ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {\n                    return <CustomButton key={`primary-custom-button-${i}`} styles={commonButtonStyles} showLabel={options.displayType !== 'compact'} />;\n                  })}\n                    {props.mobileView && <MoreButton data-ui-id=\"common-call-composite-more-button\" strings={moreButtonStrings} onClick={props.onMoreButtonClicked} disabled={props.disableButtonsForLobbyPage} />}\n                    {!props.mobileView && showDesktopMoreButton && <DesktopMoreButton disableButtonsForHoldScreen={props.disableButtonsForHoldScreen} styles={commonButtonStyles} /* @conditional-compile-remove(close-captions) */\n                  isCaptionsSupported={props.isCaptionsSupported}\n                  /* @conditional-compile-remove(close-captions) */ onCaptionsSettingsClick={openCaptionsSettingsModal}\n                  /* @conditional-compile-remove(gallery-layouts) */ onUserSetOverflowGalleryPositionChange={props.onUserSetOverflowGalleryPositionChange}\n                  /* @conditional-compile-remove(gallery-layouts) */ onUserSetGalleryLayout={props.onUserSetGalleryLayout}\n                  /* @conditional-compile-remove(gallery-layouts) */ userSetGalleryLayout={props.userSetGalleryLayout} />}\n                    <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n                  </ControlBar>\n                </div>\n              </Stack.Item>\n            </Stack>\n          </CallAdapterProvider>\n        </Stack.Item>\n        {!props.mobileView && sideButtonsPresent && <Stack.Item>\n            <div ref={sidepaneControlsRef}>\n              <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n                {isEnabled(options?.peopleButton) && <PeopleButton checked={props.peopleButtonChecked} ariaLabel={props.peopleButtonChecked ? peopleButtonStrings?.selectedLabel : peopleButtonStrings?.label} showLabel={options.displayType !== 'compact'} onClick={props.onPeopleButtonClicked} data-ui-id=\"common-call-composite-people-button\" disabled={props.disableButtonsForLobbyPage || props.disableButtonsForHoldScreen || isDisabled(options.peopleButton)} strings={peopleButtonStrings} styles={commonButtonStyles} componentRef={props.peopleButtonRef} />}\n                {customButtons['secondary']?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {\n              return <CustomButton key={`secondary-custom-button-${i}`} styles={commonButtonStyles} showLabel={options.displayType !== 'compact'} />;\n            })}\n              </Stack>\n            </div>\n          </Stack.Item>}\n      </Stack>\n    </div>;\n};\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\n{\n  /*\n    Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n    Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n  */\n}\nconst wrapperDesktopStyles: IStyle = {\n  position: 'absolute',\n  left: '50%',\n  transform: 'translate(-50%, 0)'\n};\nconst wrapperDesktopRtlStyles: IStyle = {\n  position: 'absolute',\n  right: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\n/** @private */\nexport const getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n  root: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: theme.effects.roundedCorner4,\n    minHeight: '2.5rem',\n    maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n  },\n\n  flexContainer: {\n    display: 'flex',\n    flexFlow: 'row nowrap'\n  },\n  textContainer: {\n    // Override the default so that label doesn't introduce a new block.\n    display: 'inline',\n    // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n    maxWidth: '100%'\n  },\n  label: {\n    fontSize: theme.fonts.medium.fontSize,\n    // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n    marginLeft: '0.625rem',\n    // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n    lineHeight: '1.5rem',\n    // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  },\n  splitButtonMenuButton: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderTopRightRadius: theme.effects.roundedCorner4,\n    borderBottomRightRadius: theme.effects.roundedCorner4,\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0'\n  },\n  splitButtonMenuButtonChecked: {\n    // Default colors the menu half similarly for :hover and when button is checked.\n    // To align with how the left-half is styled, override the checked style.\n    background: 'none'\n  }\n});\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrideStyles = {\n    border: 'none',\n    background: theme.palette.themePrimary,\n    color: theme.palette.white,\n    '* > svg': {\n      fill: theme.palette.white\n    },\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  };\n  const overrides: ControlBarButtonStyles = {\n    rootChecked: overrideStyles,\n    rootCheckedHovered: overrideStyles\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrides: ControlBarButtonStyles = {\n    root: {\n      // Suppress border around the dark-red button.\n      border: 'none'\n    },\n    rootFocused: {\n      '@media (forced-colors: active)': {\n        background: 'highlight',\n        color: 'highlightText',\n        borderColor: theme.palette.black,\n        borderRadius: 'unset',\n        outline: `3px solid ${theme.palette.black}`\n      }\n    },\n    icon: {\n      '@media (forced-colors: active)': {\n        ':focused': {\n          color: theme.palette.white\n        }\n      }\n    }\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\nconst isEnabled = (option: unknown): boolean => option !== false;\"../../../../../react-components/src\""]}
+{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IButton, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\nimport { CUSTOM_BUTTON_OPTIONS, generateCustomCallControlBarButton, onFetchCustomButtonPropsTrampoline } from './CustomButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from '../CaptionsSettingsModal';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaiseHand } from '../../CallComposite/components/buttons/RaiseHand';\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n  callAdapter: CallAdapter;\n  peopleButtonChecked: boolean;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked?: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n  disableButtonsForHoldScreen?: boolean;\n  /* @conditional-compile-remove(PSTN-calls) */\n  onClickShowDialpad?: () => void;\n  /* @conditional-compile-remove(video-background-effects) */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsSupported?: boolean;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsOn?: boolean;\n  displayVertical?: boolean;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetGalleryLayout?: VideoGalleryLayout;\n  peopleButtonRef?: React.RefObject<IButton>;\n  cameraButtonRef?: React.RefObject<IButton>;\n  /* @conditional-compile-remove(video-background-effects) */\n  videoBackgroundPickerRef?: React.RefObject<IButton>;\n}\nconst inferCommonCallControlOptions = (mobileView: boolean, commonCallControlOptions?: boolean | CallWithChatControlOptions): CallWithChatControlOptions | false => {\n  if (commonCallControlOptions === false) {\n    return false;\n  }\n  const options = commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Do not show screen share button when composite is optimized for mobile unless the developer\n    // has explicitly opted in.\n    if (options.screenShareButton !== true) {\n      options.screenShareButton = false;\n    }\n  }\n  return options;\n};\n\n/**\n * @private\n */\nexport const CommonCallControlBar = (props: CommonCallControlBarProps & ContainerRectProps): JSX.Element => {\n  const theme = useTheme();\n  const rtl = theme.rtl;\n  const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n  const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n  const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n  const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n  const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n  const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n  const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n  const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n  /* @conditional-compile-remove(close-captions) */\n  const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n  const handleResize = useCallback((): void => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // on load set inital width\n  useEffect(() => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // get the current width of control bar buttons and panel control buttons when browser size change\n  useEffect(() => {\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [handleResize]);\n\n  /* when size change, reset total buttons width and compare with the control bar container width\n  if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n  Instead let them take up the remaining white space on the left */\n  useEffect(() => {\n    // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n    setTotalButtonsWidth((controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth);\n  }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n  useEffect(() => {\n    setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n  }, [totalButtonsWidth, controlBarContainerWidth]);\n\n  /* @conditional-compile-remove(close-captions) */\n  const openCaptionsSettingsModal = useCallback((): void => {\n    setShowCaptionsSettingsModal(true);\n  }, []);\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = useCallback((): void => {\n    setShowCaptionsSettingsModal(false);\n  }, []);\n  const peopleButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.peopleButtonLabel,\n    selectedLabel: callWithChatStrings.selectedPeopleButtonLabel,\n    tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n    tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n  }), [callWithChatStrings]);\n  const moreButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.moreDrawerButtonLabel,\n    tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n  }), [callWithChatStrings]);\n  const centerContainerStyles = useMemo(() => {\n    const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n    return mergeStyleSets(styles, {\n      root: {\n        // Enforce a background color on control bar to ensure it matches the composite background color.\n        background: theme.semanticColors.bodyBackground\n      }\n    });\n  }, [props.mobileView, theme.semanticColors.bodyBackground]);\n  const screenShareButtonStyles = useMemo(() => !props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const commonButtonStyles = useMemo(() => !props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const endCallButtonStyles = useMemo(() => !props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const controlBarWrapperDesktopStyles: IStyle = useMemo(\n  // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n  () => !props.mobileView && !isOutOfSpace ? rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles : {}, [props.mobileView, rtl, isOutOfSpace]);\n\n  // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n  const controlBarDesktopContainerStyles: IStyle = useMemo(() => !props.mobileView && !isOutOfSpace ? {\n    position: 'relative',\n    minHeight: '4.5rem',\n    width: '100%'\n  } : {}, [props.mobileView, isOutOfSpace]);\n  const customButtons = useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options?.displayType : undefined), [options]);\n\n  // when options is false then we want to hide the whole control bar.\n  if (options === false) {\n    return <></>;\n  }\n  const sideButtonsPresent = isEnabled(options.peopleButton) || isEnabled(options.chatButton) || customButtons['secondary'] !== undefined;\n  const screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n  const microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n  const cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n  const showDesktopMoreButton = /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */isEnabled(options?.moreButton) && (false || /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */isEnabled(options?.holdButton) || /* @conditional-compile-remove(close-captions) */props.isCaptionsSupported || /* @conditional-compile-remove(gallery-layouts) */props.onUserSetGalleryLayout);\n  return <div ref={controlBarSizeRef}>\n      <CallAdapterProvider adapter={props.callAdapter}>\n        {/* @conditional-compile-remove(close-captions) */showCaptionsSettingsModal && <CaptionsSettingsModal showCaptionsSettingsModal={showCaptionsSettingsModal} onDismissCaptionsSettings={onDismissCaptionsSettings} changeCaptionLanguage={props.isCaptionsOn} />}\n      </CallAdapterProvider>\n      <Stack horizontal reversed={!props.mobileView && !isOutOfSpace} horizontalAlign=\"space-between\" className={mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles)}>\n        <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n          <CallAdapterProvider adapter={props.callAdapter}>\n            <Stack horizontalAlign=\"center\">\n              {/*\n               HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n               tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n               immediately after it in the dom tree.\n               */}\n              <HiddenFocusStartPoint />\n              <Stack.Item>\n                {/*\n                  Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n                  control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n                  set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n                  dockedBottom it has position absolute and would therefore float on top of the media gallery,\n                  occluding some of its content.\n                 */}\n                <div ref={controlBarContainerRef}>\n                  <ControlBar layout={props.displayVertical ? 'vertical' : 'horizontal'} styles={centerContainerStyles}>\n                    {microphoneButtonIsEnabled && <Microphone displayType={options.displayType} styles={commonButtonStyles} splitButtonsForDeviceSelection={!props.mobileView}\n                  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)} />}\n                    {cameraButtonIsEnabled && <Camera displayType={options.displayType} styles={commonButtonStyles} splitButtonsForDeviceSelection={!props.mobileView}\n                  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n                  /* @conditional-compile-remove(video-background-effects) */ onClickVideoEffects={props.onClickVideoEffects} componentRef={props.cameraButtonRef} />}\n                    {/* @conditional-compile-remove(raise-hand) */!props.mobileView && isEnabled(options.raiseHandButton) && <RaiseHand displayType={options.displayType} styles={commonButtonStyles}\n                  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)} />}\n                    {screenShareButtonIsEnabled && <ScreenShare option={options.screenShareButton} displayType={options.displayType} styles={screenShareButtonStyles}\n                  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)} />}\n                    {customButtons['primary']?.slice(0, props.mobileView ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {\n                    return <CustomButton key={`primary-custom-button-${i}`} styles={commonButtonStyles} showLabel={options.displayType !== 'compact'} />;\n                  })}\n                    {props.mobileView && <MoreButton data-ui-id=\"common-call-composite-more-button\" strings={moreButtonStrings} onClick={props.onMoreButtonClicked} disabled={props.disableButtonsForLobbyPage} />}\n                    {!props.mobileView && showDesktopMoreButton && <DesktopMoreButton disableButtonsForHoldScreen={props.disableButtonsForHoldScreen} styles={commonButtonStyles}\n                  /*@conditional-compile-remove(PSTN-calls) */ onClickShowDialpad={props.onClickShowDialpad}\n                  /* @conditional-compile-remove(control-bar-button-injection) */ callControls={props.callControls}\n                  /* @conditional-compile-remove(close-captions) */ isCaptionsSupported={props.isCaptionsSupported}\n                  /* @conditional-compile-remove(close-captions) */ onCaptionsSettingsClick={openCaptionsSettingsModal}\n                  /* @conditional-compile-remove(gallery-layouts) */ onUserSetOverflowGalleryPositionChange={props.onUserSetOverflowGalleryPositionChange}\n                  /* @conditional-compile-remove(gallery-layouts) */ onUserSetGalleryLayout={props.onUserSetGalleryLayout}\n                  /* @conditional-compile-remove(gallery-layouts) */ userSetGalleryLayout={props.userSetGalleryLayout} />}\n                    <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n                  </ControlBar>\n                </div>\n              </Stack.Item>\n            </Stack>\n          </CallAdapterProvider>\n        </Stack.Item>\n        {!props.mobileView && sideButtonsPresent && <Stack.Item>\n            <div ref={sidepaneControlsRef}>\n              <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n                {isEnabled(options?.peopleButton) && <PeopleButton checked={props.peopleButtonChecked} ariaLabel={props.peopleButtonChecked ? peopleButtonStrings?.selectedLabel : peopleButtonStrings?.label} showLabel={options.displayType !== 'compact'} onClick={props.onPeopleButtonClicked} data-ui-id=\"common-call-composite-people-button\" disabled={props.disableButtonsForLobbyPage || props.disableButtonsForHoldScreen || isDisabled(options.peopleButton)} strings={peopleButtonStrings} styles={commonButtonStyles} componentRef={props.peopleButtonRef} />}\n                {customButtons['secondary']?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {\n              return <CustomButton key={`secondary-custom-button-${i}`} styles={commonButtonStyles} showLabel={options.displayType !== 'compact'} />;\n            })}\n              </Stack>\n            </div>\n          </Stack.Item>}\n      </Stack>\n    </div>;\n};\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\n{\n  /*\n    Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n    Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n  */\n}\nconst wrapperDesktopStyles: IStyle = {\n  position: 'absolute',\n  left: '50%',\n  transform: 'translate(-50%, 0)'\n};\nconst wrapperDesktopRtlStyles: IStyle = {\n  position: 'absolute',\n  right: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\n/** @private */\nexport const getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n  root: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: theme.effects.roundedCorner4,\n    minHeight: '2.5rem',\n    maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n  },\n\n  flexContainer: {\n    display: 'flex',\n    flexFlow: 'row nowrap'\n  },\n  textContainer: {\n    // Override the default so that label doesn't introduce a new block.\n    display: 'inline',\n    // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n    maxWidth: '100%'\n  },\n  label: {\n    fontSize: theme.fonts.medium.fontSize,\n    // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n    marginLeft: '0.625rem',\n    // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n    lineHeight: '1.5rem',\n    // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  },\n  splitButtonMenuButton: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderTopRightRadius: theme.effects.roundedCorner4,\n    borderBottomRightRadius: theme.effects.roundedCorner4,\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0'\n  },\n  splitButtonMenuButtonChecked: {\n    // Default colors the menu half similarly for :hover and when button is checked.\n    // To align with how the left-half is styled, override the checked style.\n    background: 'none'\n  }\n});\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrideStyles = {\n    border: 'none',\n    background: theme.palette.themePrimary,\n    color: theme.palette.white,\n    '* > svg': {\n      fill: theme.palette.white\n    },\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  };\n  const overrides: ControlBarButtonStyles = {\n    rootChecked: overrideStyles,\n    rootCheckedHovered: overrideStyles\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrides: ControlBarButtonStyles = {\n    root: {\n      // Suppress border around the dark-red button.\n      border: 'none'\n    },\n    rootFocused: {\n      '@media (forced-colors: active)': {\n        background: 'highlight',\n        color: 'highlightText',\n        borderColor: theme.palette.black,\n        borderRadius: 'unset',\n        outline: `3px solid ${theme.palette.black}`\n      }\n    },\n    icon: {\n      '@media (forced-colors: active)': {\n        ':focused': {\n          color: theme.palette.white\n        }\n      }\n    }\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\nconst isEnabled = (option: unknown): boolean => option !== false;\"../../../../../react-components/src\""]}