@azure/communication-react 1.7.0-beta.2 → 1.7.1-alpha-202308170011

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

@@ -6,14 +6,15 @@ import { ParticipantList } from "../../../../react-components/src";
 import { FocusZone, Stack, Text, useTheme } from '@fluentui/react';
 import { AvatarPersona } from './AvatarPersona';
 import { useId } from '@fluentui/react-hooks';
+import { _formatString } from "../../../../acs-ui-common/src";
 /**
  * @private
  */
 export const ParticipantContainer = (props) => {
     const theme = useTheme();
     const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);
-    return React.createElement(Stack, { className: participantListWrapperClassName },
-        React.createElement(ParticipantListWithHeading, Object.assign({}, props)));
+    return (React.createElement(Stack, { className: participantListWrapperClassName },
+        React.createElement(ParticipantListWithHeading, Object.assign({}, props))));
 };
 /**
  * @private
@@ -22,6 +23,8 @@ export const ParticipantListWithHeading = (props) => {
     const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, title, participantListProps } = props;
     const subheadingUniqueId = useId();
     const theme = useTheme();
+    /* @conditional-compile-remove(total-participant-count) */
+    const totalParticipantCount = participantListProps.totalParticipantCount;
     const subheadingStyleThemed = useMemo(() => ({
         root: {
             color: theme.palette.neutralSecondary,
@@ -29,13 +32,18 @@ export const ParticipantListWithHeading = (props) => {
             fontSize: theme.fonts.smallPlus.fontSize
         }
     }), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);
-    return React.createElement(Stack, { className: participantListStack },
-        React.createElement(Stack.Item, { styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId }, title),
+    return (React.createElement(Stack, { className: participantListStack },
+        React.createElement(Stack.Item, { styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId }, paneTitleTrampoline(title !== null && title !== void 0 ? title : '', 
+        /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount)),
         React.createElement(FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
-            React.createElement(ParticipantList, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => React.createElement(React.Fragment, null,
-                    React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, {
-                        hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text)
-                    }, { dataProvider: onFetchAvatarPersonaData })),
-                    (options === null || options === void 0 ? void 0 : options.text) && React.createElement(Text, { nowrap: true, styles: displayNameStyles }, options === null || options === void 0 ? void 0 : options.text)), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId }))));
+            React.createElement(ParticipantList, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
+                    React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text) }, { dataProvider: onFetchAvatarPersonaData })),
+                    (options === null || options === void 0 ? void 0 : options.text) && (React.createElement(Text, { nowrap: true, styles: displayNameStyles }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
+};
+const paneTitleTrampoline = (paneTitle, totalParticipantCount) => {
+    const participantCountString = totalParticipantCount
+        ? { numberOfPeople: `(${totalParticipantCount})` }
+        : { numberOfPeople: ' ' };
+    return _formatString(paneTitle, participantCountString);
 };
 //# sourceMappingURL=ParticipantContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,6BAA6B,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACxM,OAAO,EAA0B,eAAe,EAAsD,yCAAmC;AACzI,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAA6B,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAU9C;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,+BAA+B,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9F,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,+BAA+B;QACpD,oBAAC,0BAA0B,oBAAK,KAAK,EAAI,CACnC,CAAC;AACb,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAM1C,EAAe,EAAE;IAChB,MAAM,EACJ,wBAAwB,EACxB,2BAA2B,EAC3B,KAAK,EACL,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,kBAAkB,GAAG,KAAK,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3C,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACrC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ;YACjD,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;SACzC;KACF,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IACtF,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,oBAAoB;QACzC,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,qBAAqB,gBAAc,KAAK,EAAE,EAAE,EAAE,kBAAkB,IACjF,KAAK,CACK;QACb,oBAAC,SAAS,IAAC,SAAS,EAAE,6BAA6B,EAAE,kBAAkB,EAAE,IAAI;YAC3E,oBAAC,eAAe,oBAAK,oBAAoB,IAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,oBAAoB,EAAE,cAAc,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC;oBACtJ,oBAAC,aAAa,gCAAY,0CAA0C,EAAC,MAAM,EAAE,MAAM,IAAM,OAAO,EAAM;wBAC1G,kBAAkB,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA;qBACpC,IAAE,YAAY,EAAE,wBAAwB,IAAI;oBACtC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,KAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,IAC1D,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CACT,CACR,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,yBAAyB,EAAE,kBAAkB,IAAI,CAC3J,CACN,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useMemo } from 'react';\nimport { participantListContainerStyle, participantListMobileStyle, participantListStack, participantListStyle, participantListWrapper, displayNameStyles } from './styles/ParticipantContainer.styles';\nimport { OnRenderAvatarCallback, ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, useTheme } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\ntype ParticipantContainerProps = {\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>;\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n}): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    title,\n    participantListProps\n  } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  const subheadingStyleThemed = useMemo(() => ({\n    root: {\n      color: theme.palette.neutralSecondary,\n      margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n      fontSize: theme.fonts.smallPlus.fontSize\n    }\n  }), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);\n  return <Stack className={participantListStack}>\n      <Stack.Item styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n        {title}\n      </Stack.Item>\n      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n        <ParticipantList {...participantListProps} styles={props.isMobile ? participantListMobileStyle : participantListStyle} onRenderAvatar={(userId, options) => <>\n              <AvatarPersona data-ui-id=\"chat-composite-participant-custom-avatar\" userId={userId} {...options} {...{\n          hidePersonaDetails: !!options?.text\n        }} dataProvider={onFetchAvatarPersonaData} />\n              {options?.text && <Text nowrap={true} styles={displayNameStyles}>\n                  {options?.text}\n                </Text>}\n            </>} onFetchParticipantMenuItems={onFetchParticipantMenuItems} showParticipantOverflowTooltip={!props.isMobile} participantAriaLabelledBy={subheadingUniqueId} />\n      </FocusZone>\n    </Stack>;\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useMemo } from 'react';\nimport {\n  participantListContainerStyle,\n  participantListMobileStyle,\n  participantListStack,\n  participantListStyle,\n  participantListWrapper,\n  displayNameStyles\n} from './styles/ParticipantContainer.styles';\nimport {\n  OnRenderAvatarCallback,\n  ParticipantList,\n  ParticipantListProps,\n  ParticipantMenuItemsCallback\n} from '@internal/react-components';\nimport { FocusZone, Stack, Text, useTheme } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return (\n    <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n}): JSX.Element => {\n  const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, title, participantListProps } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  /* @conditional-compile-remove(total-participant-count) */\n  const totalParticipantCount = participantListProps.totalParticipantCount;\n  const subheadingStyleThemed = useMemo(\n    () => ({\n      root: {\n        color: theme.palette.neutralSecondary,\n        margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n        fontSize: theme.fonts.smallPlus.fontSize\n      }\n    }),\n    [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n  );\n\n  return (\n    <Stack className={participantListStack}>\n      <Stack.Item styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n        {paneTitleTrampoline(\n          title ?? '',\n          /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n        )}\n      </Stack.Item>\n      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n        <ParticipantList\n          {...participantListProps}\n          styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n          onRenderAvatar={(userId, options) => (\n            <>\n              <AvatarPersona\n                data-ui-id=\"chat-composite-participant-custom-avatar\"\n                userId={userId}\n                {...options}\n                {...{ hidePersonaDetails: !!options?.text }}\n                dataProvider={onFetchAvatarPersonaData}\n              />\n              {options?.text && (\n                <Text nowrap={true} styles={displayNameStyles}>\n                  {options?.text}\n                </Text>\n              )}\n            </>\n          )}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          showParticipantOverflowTooltip={!props.isMobile}\n          participantAriaLabelledBy={subheadingUniqueId}\n        />\n      </FocusZone>\n    </Stack>\n  );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n  const participantCountString = totalParticipantCount\n    ? { numberOfPeople: `(${totalParticipantCount})` }\n    : { numberOfPeople: ' ' };\n  return _formatString(paneTitle, participantCountString);\n};\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}

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

@@ -11,8 +11,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Stack } from '@fluentui/react';
 import { ParticipantList } from "../../../../react-components/src";
-/* @conditional-compile-remove(rooms) */
-import { _usePermissions } from "../../../../react-components/src";
 import React, { useCallback, useMemo } from 'react';
 import { usePropsFor } from '../CallComposite/hooks/usePropsFor';
 import { ParticipantListWithHeading } from '../common/ParticipantContainer';
@@ -46,7 +44,7 @@ export const PeoplePaneContent = (props) => {
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = adapter.getState().alternateCallerId;
     const participantListDefaultProps = usePropsFor(ParticipantList);
-    const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline();
+    const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline(adapter);
     const setDrawerMenuItemsForParticipant = useMemo(() => {
         return (participant) => {
             if (participant) {
@@ -58,7 +56,14 @@ export const PeoplePaneContent = (props) => {
                 setDrawerMenuItems(drawerMenuItems);
             }
         };
-    }, [strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId, removeButtonAllowed, onFetchParticipantMenuItems, setDrawerMenuItems]);
+    }, [
+        strings,
+        participantListDefaultProps.onRemoveParticipant,
+        participantListDefaultProps.myUserId,
+        removeButtonAllowed,
+        onFetchParticipantMenuItems,
+        setDrawerMenuItems
+    ]);
     const participantListProps = useMemo(() => {
         const onRemoveAParticipant = (participantId) => __awaiter(void 0, void 0, void 0, function* () { return removeParticipantFromCall(participantId); });
         return Object.assign(Object.assign({}, participantListDefaultProps), { 
@@ -67,17 +72,21 @@ export const PeoplePaneContent = (props) => {
             // We want the drawer menu items to appear when participants in ParticipantList are clicked
             onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined });
     }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, removeParticipantFromCall]);
-    const participantList = React.createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.mobileView ? undefined : props.onFetchParticipantMenuItems, title: strings.peoplePaneSubTitle });
+    const participantList = (React.createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.mobileView ? undefined : props.onFetchParticipantMenuItems, title: strings.peoplePaneSubTitle }));
     if (props.mobileView) {
-        return React.createElement(Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content" },
+        return (React.createElement(Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content" },
             React.createElement(Stack.Item, { grow: true, styles: participantListContainerStyles }, participantList),
             React.createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings, 
-                /* @conditional-compile-remove(PSTN-calls) */ onAddParticipant: addParticipantToCall, 
-                /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: alternateCallerId }));
+                /* @conditional-compile-remove(PSTN-calls) */
+                onAddParticipant: addParticipantToCall, 
+                /* @conditional-compile-remove(PSTN-calls) */
+                alternateCallerId: alternateCallerId })));
     }
-    return React.createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings, 
-        /* @conditional-compile-remove(PSTN-calls) */ onAddParticipant: addParticipantToCall, 
-        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: alternateCallerId });
+    return (React.createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings, 
+        /* @conditional-compile-remove(PSTN-calls) */
+        onAddParticipant: addParticipantToCall, 
+        /* @conditional-compile-remove(PSTN-calls) */
+        alternateCallerId: alternateCallerId }));
 };
 /**
  * Create default contextual menu items for particant
@@ -108,9 +117,10 @@ const createDefaultContextualMenuItems = (participant, strings, onRemoveParticip
 /**
  * @private
  */
-const hasRemoveParticipantsPermissionTrampoline = () => {
+const hasRemoveParticipantsPermissionTrampoline = (adapter) => {
+    var _a;
     /* @conditional-compile-remove(rooms) */
-    return _usePermissions().removeParticipantButton;
+    return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Presenter';
     // Return true if stable.
     return true;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PeoplePaneContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/PeoplePaneContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem, Stack } from '@fluentui/react';\nimport { ParticipantList, ParticipantListParticipant, ParticipantListProps, ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { ParticipantListWithHeading } from '../common/ParticipantContainer';\nimport { peoplePaneContainerTokens } from '../common/styles/ParticipantContainer.styles';\nimport { participantListContainerStyles, peoplePaneContainerStyle } from './styles/PeoplePaneContent.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallCompositeStrings } from '../CallComposite';\nimport { AddPeopleButton } from './AddPeopleButton';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\nimport { useLocale } from '../localization';\n\n/**\n * @private\n */\nexport const PeoplePaneContent = (props: {\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  setDrawerMenuItems: (_DrawerMenuItemProps) => void;\n  mobileView?: boolean;\n}): JSX.Element => {\n  const {\n    inviteLink,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems\n  } = props;\n  const adapter = useAdapter();\n  const localeStrings = useLocale();\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const getStrings = () => {\n    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n    return localeStrings.strings.call;\n    return localeStrings.strings.callWithChat;\n  };\n  const strings = getStrings();\n  const removeParticipantFromCall = useCallback(async (participantId: string): Promise<void> => {\n    await adapter.removeParticipant(participantId);\n  }, [adapter]);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const addParticipantToCall = useCallback(async (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void> => {\n    await adapter.addParticipant(participant, options);\n  }, [adapter]);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const alternateCallerId = adapter.getState().alternateCallerId;\n  const participantListDefaultProps = usePropsFor(ParticipantList);\n  const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline();\n  const setDrawerMenuItemsForParticipant: (participant?: ParticipantListParticipant) => void = useMemo(() => {\n    return (participant?: ParticipantListParticipant) => {\n      if (participant) {\n        let contextualMenuItems: IContextualMenuItem[] = createDefaultContextualMenuItems(participant, strings, removeButtonAllowed && participant.isRemovable ? participantListDefaultProps.onRemoveParticipant : undefined, participantListDefaultProps.myUserId);\n        if (onFetchParticipantMenuItems) {\n          contextualMenuItems = onFetchParticipantMenuItems(participant.userId, participantListDefaultProps.myUserId, contextualMenuItems);\n        }\n        const drawerMenuItems = contextualMenuItems.map((contextualMenu: IContextualMenuItem) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([])));\n        setDrawerMenuItems(drawerMenuItems);\n      }\n    };\n  }, [strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId, removeButtonAllowed, onFetchParticipantMenuItems, setDrawerMenuItems]);\n  const participantListProps: ParticipantListProps = useMemo(() => {\n    const onRemoveAParticipant = async (participantId: string): Promise<void> => removeParticipantFromCall(participantId);\n    return {\n      ...participantListDefaultProps,\n      // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked\n      onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant,\n      // We want the drawer menu items to appear when participants in ParticipantList are clicked\n      onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined\n    };\n  }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, removeParticipantFromCall]);\n  const participantList = <ParticipantListWithHeading isMobile={props.mobileView} participantListProps={participantListProps} onFetchAvatarPersonaData={props.onFetchAvatarPersonaData} onFetchParticipantMenuItems={props.mobileView ? undefined : props.onFetchParticipantMenuItems} title={strings.peoplePaneSubTitle} />;\n  if (props.mobileView) {\n    return <Stack verticalFill styles={peoplePaneContainerStyle} tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\">\n        <Stack.Item grow styles={participantListContainerStyles}>\n          {participantList}\n        </Stack.Item>\n\n        <AddPeopleButton inviteLink={inviteLink} mobileView={props.mobileView} participantList={participantList} strings={strings}\n      /* @conditional-compile-remove(PSTN-calls) */ onAddParticipant={addParticipantToCall}\n      /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId={alternateCallerId} />\n      </Stack>;\n  }\n  return <AddPeopleButton inviteLink={inviteLink} mobileView={props.mobileView} participantList={participantList} strings={strings}\n  /* @conditional-compile-remove(PSTN-calls) */ onAddParticipant={addParticipantToCall}\n  /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId={alternateCallerId} />;\n};\n\n/**\n * Create default contextual menu items for particant\n * @param participant - participant to create contextual menu items for\n * @param strings - localized strings for menu item text\n * @param onRemoveParticipant - callback to remove participant\n * @param localParticipantUserId - Local participant user id\n * @returns - IContextualMenuItem[]\n */\nconst createDefaultContextualMenuItems = (participant: ParticipantListParticipant, strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */CallCompositeStrings, onRemoveParticipant?: (userId: string) => Promise<void>, localParticipantUserId?: string): IContextualMenuItem[] => {\n  const menuItems: IContextualMenuItem[] = [];\n  if (onRemoveParticipant && participant?.userId !== localParticipantUserId) {\n    menuItems.push({\n      key: 'remove',\n      text: strings.removeMenuLabel,\n      onClick: () => {\n        if (participant?.userId) {\n          onRemoveParticipant?.(participant?.userId);\n        }\n      },\n      iconProps: {\n        iconName: 'UserRemove'\n      }\n    });\n  }\n  return menuItems;\n};\n\n/**\n * @private\n */\nconst hasRemoveParticipantsPermissionTrampoline = (): boolean => {\n  /* @conditional-compile-remove(rooms) */\n  return _usePermissions().removeParticipantButton;\n  // Return true if stable.\n  return true;\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"PeoplePaneContent.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/PeoplePaneContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem, Stack } from '@fluentui/react';\nimport {\n  ParticipantList,\n  ParticipantListParticipant,\n  ParticipantListProps,\n  ParticipantMenuItemsCallback,\n  _DrawerMenuItemProps\n} from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { ParticipantListWithHeading } from '../common/ParticipantContainer';\nimport { peoplePaneContainerTokens } from '../common/styles/ParticipantContainer.styles';\nimport { participantListContainerStyles, peoplePaneContainerStyle } from './styles/PeoplePaneContent.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallCompositeStrings } from '../CallComposite';\nimport { CommonCallAdapter } from '../CallComposite';\nimport { AddPeopleButton } from './AddPeopleButton';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\nimport { useLocale } from '../localization';\n\n/**\n * @private\n */\nexport const PeoplePaneContent = (props: {\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  setDrawerMenuItems: (_DrawerMenuItemProps) => void;\n  mobileView?: boolean;\n}): JSX.Element => {\n  const { inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems } = props;\n  const adapter = useAdapter();\n  const localeStrings = useLocale();\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const getStrings = () => {\n    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n    return localeStrings.strings.call;\n\n    return localeStrings.strings.callWithChat;\n  };\n  const strings = getStrings();\n\n  const removeParticipantFromCall = useCallback(\n    async (participantId: string): Promise<void> => {\n      await adapter.removeParticipant(participantId);\n    },\n    [adapter]\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const addParticipantToCall = useCallback(\n    async (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void> => {\n      await adapter.addParticipant(participant, options);\n    },\n    [adapter]\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const alternateCallerId = adapter.getState().alternateCallerId;\n\n  const participantListDefaultProps = usePropsFor(ParticipantList);\n  const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline(adapter);\n  const setDrawerMenuItemsForParticipant: (participant?: ParticipantListParticipant) => void = useMemo(() => {\n    return (participant?: ParticipantListParticipant) => {\n      if (participant) {\n        let contextualMenuItems: IContextualMenuItem[] = createDefaultContextualMenuItems(\n          participant,\n          strings,\n          removeButtonAllowed && participant.isRemovable ? participantListDefaultProps.onRemoveParticipant : undefined,\n          participantListDefaultProps.myUserId\n        );\n        if (onFetchParticipantMenuItems) {\n          contextualMenuItems = onFetchParticipantMenuItems(\n            participant.userId,\n            participantListDefaultProps.myUserId,\n            contextualMenuItems\n          );\n        }\n        const drawerMenuItems = contextualMenuItems.map((contextualMenu: IContextualMenuItem) =>\n          convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([]))\n        );\n        setDrawerMenuItems(drawerMenuItems);\n      }\n    };\n  }, [\n    strings,\n    participantListDefaultProps.onRemoveParticipant,\n    participantListDefaultProps.myUserId,\n    removeButtonAllowed,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems\n  ]);\n\n  const participantListProps: ParticipantListProps = useMemo(() => {\n    const onRemoveAParticipant = async (participantId: string): Promise<void> =>\n      removeParticipantFromCall(participantId);\n    return {\n      ...participantListDefaultProps,\n      // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked\n      onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant,\n      // We want the drawer menu items to appear when participants in ParticipantList are clicked\n      onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined\n    };\n  }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, removeParticipantFromCall]);\n\n  const participantList = (\n    <ParticipantListWithHeading\n      isMobile={props.mobileView}\n      participantListProps={participantListProps}\n      onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n      onFetchParticipantMenuItems={props.mobileView ? undefined : props.onFetchParticipantMenuItems}\n      title={strings.peoplePaneSubTitle}\n    />\n  );\n\n  if (props.mobileView) {\n    return (\n      <Stack\n        verticalFill\n        styles={peoplePaneContainerStyle}\n        tokens={peoplePaneContainerTokens}\n        data-ui-id=\"people-pane-content\"\n      >\n        <Stack.Item grow styles={participantListContainerStyles}>\n          {participantList}\n        </Stack.Item>\n\n        <AddPeopleButton\n          inviteLink={inviteLink}\n          mobileView={props.mobileView}\n          participantList={participantList}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          onAddParticipant={addParticipantToCall}\n          /* @conditional-compile-remove(PSTN-calls) */\n          alternateCallerId={alternateCallerId}\n        />\n      </Stack>\n    );\n  }\n\n  return (\n    <AddPeopleButton\n      inviteLink={inviteLink}\n      mobileView={props.mobileView}\n      participantList={participantList}\n      strings={strings}\n      /* @conditional-compile-remove(PSTN-calls) */\n      onAddParticipant={addParticipantToCall}\n      /* @conditional-compile-remove(PSTN-calls) */\n      alternateCallerId={alternateCallerId}\n    />\n  );\n};\n\n/**\n * Create default contextual menu items for particant\n * @param participant - participant to create contextual menu items for\n * @param strings - localized strings for menu item text\n * @param onRemoveParticipant - callback to remove participant\n * @param localParticipantUserId - Local participant user id\n * @returns - IContextualMenuItem[]\n */\nconst createDefaultContextualMenuItems = (\n  participant: ParticipantListParticipant,\n  strings:\n    | CallWithChatCompositeStrings\n    | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ CallCompositeStrings,\n  onRemoveParticipant?: (userId: string) => Promise<void>,\n  localParticipantUserId?: string\n): IContextualMenuItem[] => {\n  const menuItems: IContextualMenuItem[] = [];\n  if (onRemoveParticipant && participant?.userId !== localParticipantUserId) {\n    menuItems.push({\n      key: 'remove',\n      text: strings.removeMenuLabel,\n      onClick: () => {\n        if (participant?.userId) {\n          onRemoveParticipant?.(participant?.userId);\n        }\n      },\n      iconProps: {\n        iconName: 'UserRemove'\n      }\n    });\n  }\n  return menuItems;\n};\n\n/**\n * @private\n */\nconst hasRemoveParticipantsPermissionTrampoline = (adapter: CommonCallAdapter): boolean => {\n  /* @conditional-compile-remove(rooms) */\n  return adapter.getState().call?.role === 'Presenter';\n  // Return true if stable.\n  return true;\n};\n\"../../../../react-components/src\""]}

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

@@ -28,23 +28,15 @@ export const SendDtmfDialpad = (props) => {
     const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
     const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
     if (isMobile) {
-        return React.createElement(Stack, null, showDialpad && React.createElement(Stack, { styles: drawerContainerStyles() },
+        return (React.createElement(Stack, null, showDialpad && (React.createElement(Stack, { styles: drawerContainerStyles() },
             React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onDismissTriggered },
-                React.createElement(Stack, { style: {
-                        padding: '1rem'
-                    } },
-                    React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))));
+                React.createElement(Stack, { style: { padding: '1rem' } },
+                    React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
     }
-    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
+    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
-            React.createElement(IconButton, { iconProps: {
-                    iconName: 'Cancel'
-                }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: {
-                    color: theme.palette.black
-                } })),
-        React.createElement(Stack, { style: {
-                overflow: 'hidden'
-            } },
-            React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile })))));
+            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
+        React.createElement(Stack, { style: { overflow: 'hidden' } },
+            React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
 };
 //# sourceMappingURL=SendDtmfDialpad.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SendDtmfDialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/SendDtmfDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { 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, IconButton } from '@fluentui/react';\nimport { themeddialpadModalStyle, themedDialpadStyle } from './SendDtmfDialpad.styles';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/** @private */\nexport interface SendDtmfDialpadStrings {\n  dialpadModalAriaLabel: string;\n  dialpadCloseModalButtonAriaLabel: string;\n  placeholderText: string;\n}\n\n/** @private */\nexport interface SendDtmfDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: SendDtmfDialpadStrings;\n  onDismissDialpad: () => void;\n}\n\n/** @private */\nexport const SendDtmfDialpad = (props: SendDtmfDialpadProps): JSX.Element => {\n  const dialpadProps = usePropsFor(Dialpad);\n  const {\n    strings,\n    isMobile,\n    showDialpad,\n    onDismissDialpad\n  } = props;\n  const theme = useTheme();\n  const onDismissTriggered = (): void => {\n    onDismissDialpad();\n  };\n  const [textFieldValue, setTextFieldValue] = useState<string>();\n  const onChange = (input: string): void => {\n    if (input.length > 25) {\n      setTextFieldValue(input.slice(1));\n    } else {\n      setTextFieldValue(input);\n    }\n  };\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n  if (isMobile) {\n    return <Stack>\n        {showDialpad && <Stack styles={drawerContainerStyles()}>\n            <_DrawerSurface disableMaxHeight={true} onLightDismiss={onDismissTriggered}>\n              <Stack style={{\n            padding: '1rem'\n          }}>\n                <Dialpad styles={dialpadStyle} {...dialpadProps} showDeleteButton={false} textFieldValue={textFieldValue} onChange={onChange} strings={strings} isMobile={isMobile} />\n              </Stack>\n            </_DrawerSurface>\n          </Stack>}\n      </Stack>;\n  }\n  return <>\n      {<Modal titleAriaId={strings.dialpadModalAriaLabel} isOpen={showDialpad} onDismiss={onDismissTriggered} isBlocking={true} styles={dialpadModalStyle}>\n          <Stack horizontal horizontalAlign=\"end\" verticalAlign=\"center\">\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      }}>\n            <Dialpad styles={dialpadStyle} {...dialpadProps} textFieldValue={textFieldValue} onChange={onChange} showDeleteButton={false} strings={strings} isMobile={isMobile} />\n          </Stack>\n        </Modal>}\n    </>;\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"SendDtmfDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { 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, IconButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle, themedDialpadStyle } from './SendDtmfDialpad.styles';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/** @private */\nexport interface SendDtmfDialpadStrings {\n  dialpadModalAriaLabel: string;\n  dialpadCloseModalButtonAriaLabel: string;\n  placeholderText: string;\n}\n\n/** @private */\nexport interface SendDtmfDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: SendDtmfDialpadStrings;\n  onDismissDialpad: () => void;\n}\n\n/** @private */\nexport const SendDtmfDialpad = (props: SendDtmfDialpadProps): JSX.Element => {\n  const dialpadProps = usePropsFor(Dialpad);\n\n  const { strings, isMobile, showDialpad, onDismissDialpad } = props;\n\n  const theme = useTheme();\n\n  const onDismissTriggered = (): void => {\n    onDismissDialpad();\n  };\n\n  const [textFieldValue, setTextFieldValue] = useState<string>();\n\n  const onChange = (input: string): void => {\n    if (input.length > 25) {\n      setTextFieldValue(input.slice(1));\n    } else {\n      setTextFieldValue(input);\n    }\n  };\n\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n  if (isMobile) {\n    return (\n      <Stack>\n        {showDialpad && (\n          <Stack styles={drawerContainerStyles()}>\n            <_DrawerSurface disableMaxHeight={true} onLightDismiss={onDismissTriggered}>\n              <Stack style={{ padding: '1rem' }}>\n                <Dialpad\n                  styles={dialpadStyle}\n                  {...dialpadProps}\n                  showDeleteButton={false}\n                  textFieldValue={textFieldValue}\n                  onChange={onChange}\n                  strings={strings}\n                  isMobile={isMobile}\n                />\n              </Stack>\n            </_DrawerSurface>\n          </Stack>\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings.dialpadModalAriaLabel}\n          isOpen={showDialpad}\n          onDismiss={onDismissTriggered}\n          isBlocking={true}\n          styles={dialpadModalStyle}\n        >\n          <Stack horizontal horizontalAlign=\"end\" verticalAlign=\"center\">\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n              onClick={onDismissTriggered}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack style={{ overflow: 'hidden' }}>\n            <Dialpad\n              styles={dialpadStyle}\n              {...dialpadProps}\n              textFieldValue={textFieldValue}\n              onChange={onChange}\n              showDeleteButton={false}\n              strings={strings}\n              isMobile={isMobile}\n            />\n          </Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n\"../../../../react-components/src\""]}

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

@@ -1 +1 @@
-{"version":3,"file":"SendDtmfDialpad.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/SendDtmfDialpad.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,WAAW;YACpB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { 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: 'center',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\"../../../../react-components/src\""]}
+{"version":3,"file":"SendDtmfDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;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,WAAW;YACpB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IModalStyles, Theme } from '@fluentui/react';\n\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: 'center',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\n\"../../../../react-components/src\""]}

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

@@ -18,25 +18,17 @@ export const SidePaneHeader = (props) => {
             marginRight: '0.25rem',
             backgroundColor: theme.semanticColors.bodyBackground
         },
-        icon: {
-            color: theme.palette.neutralSecondary
-        },
-        iconHovered: {
-            color: theme.palette.neutralSecondary
-        },
-        iconPressed: {
-            color: theme.palette.neutralSecondary
-        }
+        icon: { color: theme.palette.neutralSecondary },
+        iconHovered: { color: theme.palette.neutralSecondary },
+        iconPressed: { color: theme.palette.neutralSecondary }
     }), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]);
     if (props.mobileView) {
         return React.createElement(SidePaneMobileHeader, Object.assign({}, props));
     }
-    return React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
+    return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
         React.createElement(Stack.Item, { styles: sidePaneHeaderStyles }, props.headingText),
         React.createElement(Stack.Item, null,
-            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: {
-                    iconName: 'cancel'
-                }, onClick: props.onClose })));
+            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose }))));
 };
 const SidePaneMobileHeader = (props) => {
     const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;
@@ -52,10 +44,10 @@ const SidePaneMobileHeader = (props) => {
             }
         });
     }, [theme]);
-    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: dismissSidePaneButtonAriaLabel, ariaDescription: dismissSidePaneButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
         React.createElement(Stack.Item, { grow: true },
             React.createElement(DefaultButton, { checked: true, styles: mobilePaneButtonStylesThemed }, headingText)),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 //# sourceMappingURL=SidePaneHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n  mobileView: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(() => ({\n    root: {\n      minWidth: '1.5rem',\n      padding: '0.5rem 0.25rem',\n      marginRight: '0.25rem',\n      backgroundColor: theme.semanticColors.bodyBackground\n    },\n    icon: {\n      color: theme.palette.neutralSecondary\n    },\n    iconHovered: {\n      color: theme.palette.neutralSecondary\n    },\n    iconPressed: {\n      color: theme.palette.neutralSecondary\n    }\n  }), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]);\n  if (props.mobileView) {\n    return <SidePaneMobileHeader {...props} />;\n  }\n  return <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n      <Stack.Item styles={sidePaneHeaderStyles}>{props.headingText}</Stack.Item>\n      <Stack.Item>\n        <CommandBarButton ariaLabel={props.dismissSidePaneButtonAriaLabel} styles={sidePaneCloseButtonStyles} iconProps={{\n        iconName: 'cancel'\n      }} onClick={props.onClose} />\n      </Stack.Item>\n    </Stack>;\n};\nconst SidePaneMobileHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n}): JSX.Element => {\n  const {\n    headingText,\n    dismissSidePaneButtonAriaLabel,\n    dismissSidePaneButtonAriaDescription,\n    onClose\n  } = props;\n  const theme = useTheme();\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    });\n  }, [theme]);\n  return <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton ariaLabel={dismissSidePaneButtonAriaLabel} ariaDescription={dismissSidePaneButtonAriaDescription} onClick={onClose} styles={mobilePaneBackButtonStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />} autoFocus></DefaultButton>\n      <Stack.Item grow>\n        <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n          {headingText}\n        </DefaultButton>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton styles={mobilePaneHiddenIconStyles} ariaHidden={true} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}></DefaultButton>\n    </Stack>;\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n  mobileView: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(\n    () => ({\n      root: {\n        minWidth: '1.5rem',\n        padding: '0.5rem 0.25rem',\n        marginRight: '0.25rem',\n        backgroundColor: theme.semanticColors.bodyBackground\n      },\n      icon: { color: theme.palette.neutralSecondary },\n      iconHovered: { color: theme.palette.neutralSecondary },\n      iconPressed: { color: theme.palette.neutralSecondary }\n    }),\n    [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]\n  );\n\n  if (props.mobileView) {\n    return <SidePaneMobileHeader {...props} />;\n  }\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n      <Stack.Item styles={sidePaneHeaderStyles}>{props.headingText}</Stack.Item>\n      <Stack.Item>\n        <CommandBarButton\n          ariaLabel={props.dismissSidePaneButtonAriaLabel}\n          styles={sidePaneCloseButtonStyles}\n          iconProps={{ iconName: 'cancel' }}\n          onClick={props.onClose}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n\nconst SidePaneMobileHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n}): JSX.Element => {\n  const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;\n  const theme = useTheme();\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    });\n  }, [theme]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={dismissSidePaneButtonAriaLabel}\n        ariaDescription={dismissSidePaneButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n          {headingText}\n        </DefaultButton>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        ariaHidden={true}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n\"../../../../react-components/src\""]}

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

@@ -24,17 +24,19 @@ export const PeopleAndChatHeader = (props) => {
                 fontSize: theme.fonts.medium.fontSize,
                 fontWeight: theme.fonts.medium.fontWeight
             }
-        }, haveMultipleTabs ? {
-            rootChecked: {
-                borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
+        }, haveMultipleTabs
+            ? {
+                rootChecked: {
+                    borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
+                }
             }
-        } : {});
+            : {});
     }, [theme, haveMultipleTabs]);
-    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel)),
-        React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel)),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
+        React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+        React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const localeTrampoline = (locale) => {

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

@@ -1 +1 @@
-{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, DefaultButton, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';\nimport { CompositeLocale, useLocale } from '../localization';\n\n/** @private */\nexport interface MobileChatSidePaneTabHeaderProps {\n  onClick: () => void;\n  disabled: boolean;\n}\n\n/**\n * Props for {@link TabHeader} component\n */\ntype PeopleAndChatHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  disableChatButton?: boolean;\n  disablePeopleButton?: boolean;\n};\n\n/**\n * Legacy header to be removed when we make a breaking change.\n * @private\n */\nexport const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Element => {\n  const {\n    onClose,\n    onChatButtonClicked,\n    onPeopleButtonClicked,\n    activeTab\n  } = props;\n  const theme = useTheme();\n  const strings = localeTrampoline(useLocale());\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    }, haveMultipleTabs ? {\n      rootChecked: {\n        borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n      }\n    } : {});\n  }, [theme, haveMultipleTabs]);\n  return <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton ariaLabel={strings.returnToCallButtonAriaLabel} ariaDescription={strings.returnToCallButtonAriaDescription} onClick={onClose} styles={mobilePaneBackButtonStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />} autoFocus></DefaultButton>\n      <Stack.Item grow>\n        {onChatButtonClicked && <DefaultButton onClick={onChatButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'chat'} aria-selected={activeTab === 'chat'} role={'tab'} disabled={props.disableChatButton}>\n            {strings.chatButtonLabel}\n          </DefaultButton>}\n      </Stack.Item>\n      <Stack.Item grow>\n        {onPeopleButtonClicked && <DefaultButton onClick={onPeopleButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'people'} aria-selected={activeTab === 'people'} role={'tab'} disabled={props.disablePeopleButton}>\n            {strings.peopleButtonLabel}\n          </DefaultButton>}\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton styles={mobilePaneHiddenIconStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}></DefaultButton>\n    </Stack>;\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst localeTrampoline = (locale: CompositeLocale): any => {\n  /* @conditional-compile-remove(new-call-control-bar) */\n  return locale.strings.call;\n  return locale.strings.callWithChat;\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, DefaultButton, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { CompositeLocale, useLocale } from '../localization';\n\n/** @private */\nexport interface MobileChatSidePaneTabHeaderProps {\n  onClick: () => void;\n  disabled: boolean;\n}\n\n/**\n * Props for {@link TabHeader} component\n */\ntype PeopleAndChatHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  disableChatButton?: boolean;\n  disablePeopleButton?: boolean;\n};\n\n/**\n * Legacy header to be removed when we make a breaking change.\n * @private\n */\nexport const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Element => {\n  const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab } = props;\n  const theme = useTheme();\n  const strings = localeTrampoline(useLocale());\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(\n      mobilePaneButtonStyles,\n      {\n        root: {\n          width: '100%'\n        },\n        label: {\n          fontSize: theme.fonts.medium.fontSize,\n          fontWeight: theme.fonts.medium.fontWeight\n        }\n      },\n      haveMultipleTabs\n        ? {\n            rootChecked: {\n              borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n            }\n          }\n        : {}\n    );\n  }, [theme, haveMultipleTabs]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={strings.returnToCallButtonAriaLabel}\n        ariaDescription={strings.returnToCallButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        {onChatButtonClicked && (\n          <DefaultButton\n            onClick={onChatButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'chat'}\n            aria-selected={activeTab === 'chat'}\n            role={'tab'}\n            disabled={props.disableChatButton}\n          >\n            {strings.chatButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      <Stack.Item grow>\n        {onPeopleButtonClicked && (\n          <DefaultButton\n            onClick={onPeopleButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'people'}\n            aria-selected={activeTab === 'people'}\n            role={'tab'}\n            disabled={props.disablePeopleButton}\n          >\n            {strings.peopleButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst localeTrampoline = (locale: CompositeLocale): any => {\n  /* @conditional-compile-remove(new-call-control-bar) */\n  return locale.strings.call;\n\n  return locale.strings.callWithChat;\n};\n\"../../../../react-components/src\""]}

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

@@ -46,7 +46,8 @@ export const VideoEffectsPaneContent = (props) => {
     const activeVideoEffects = (_a = useSelector(localVideoSelector).activeVideoEffects) === null || _a === void 0 ? void 0 : _a.activeEffects;
     /* @conditional-compile-remove(video-background-effects) */
     const selectableVideoEffects = useMemo(() => {
-        const videoEffects = [{
+        const videoEffects = [
+            {
                 itemKey: 'none',
                 iconProps: {
                     iconName: 'RemoveVideoBackgroundEffect'
@@ -55,7 +56,8 @@ export const VideoEffectsPaneContent = (props) => {
                 tooltipProps: {
                     content: strings.removeBackgroundTooltip
                 }
-            }, {
+            },
+            {
                 itemKey: 'blur',
                 iconProps: {
                     iconName: 'BlurVideoBackground'
@@ -64,7 +66,8 @@ export const VideoEffectsPaneContent = (props) => {
                 tooltipProps: {
                     content: strings.blurBackgroundTooltip
                 }
-            }];
+            }
+        ];
         const videoEffectImages = adapter.getState().videoBackgroundImages;
         if (videoEffectImages) {
             videoEffectImages.forEach((img) => {
@@ -103,7 +106,7 @@ export const VideoEffectsPaneContent = (props) => {
             adapter.updateSelectedVideoBackgroundEffect(noneEffect);
         }
         else {
-            const backgroundImg = selectableVideoEffects.find(effect => {
+            const backgroundImg = selectableVideoEffects.find((effect) => {
                 return effect.itemKey === effectKey;
             });
             if (backgroundImg && backgroundImg.backgroundProps) {
@@ -128,7 +131,11 @@ export const VideoEffectsPaneContent = (props) => {
         };
         adapter.updateSelectedVideoBackgroundEffect(noneEffect);
     }
-    return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, /* @conditional-compile-remove(video-background-effects) */ selectableVideoEffects, /* @conditional-compile-remove(video-background-effects) */ onEffectChange);
+    return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, 
+    /* @conditional-compile-remove(video-background-effects) */
+    selectableVideoEffects, 
+    /* @conditional-compile-remove(video-background-effects) */
+    onEffectChange);
 };
 const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
     /* @conditional-compile-remove(video-background-effects) */
@@ -140,12 +147,10 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
-    return React.createElement(Stack, { className: mergeStyles({
-            paddingLeft: '0.5rem'
-        }) },
-        activeVideoEffectError && isCameraOn && React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect),
-        showWarning && React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText),
-        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect }));
+    return (React.createElement(Stack, { className: mergeStyles({ paddingLeft: '0.5rem' }) },
+        activeVideoEffectError && isCameraOn && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
+        showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
+        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
     return React.createElement(React.Fragment, null);
 };
 /* @conditional-compile-remove(video-background-effects) */