@azure/communication-react 1.14.0-alpha-202403060013 → 1.14.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport {\n  containerContextStyles,\n  paneBodyContainer,\n  scrollableContainer,\n  scrollableContainerContents\n} from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n  minWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n  onHeaderMenuClick?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  const renderingHiddenOverrideContent =\n    overrideSidePane?.renderer.contentRenderer &&\n    overrideSidePane.persistRenderingWhenClosed &&\n    !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n\n  const widthConstrainedStyles = useMemo(\n    () => sidePaneStyles(props.maxWidth, props.minWidth),\n    [props.maxWidth, props.minWidth]\n  );\n  const paneStyles = renderingOnlyHiddenContent\n    ? hiddenStyles\n    : props.mobileView\n    ? availableSpaceStyles\n    : widthConstrainedStyles;\n\n  const Header =\n    (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ??\n    EmptyElement;\n\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const { updateSidePaneRenderer } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n\n  const LegacyHeader = useMemo((): JSX.Element => {\n    return (\n      <PeopleAndChatHeader\n        onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane}\n        activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n        // legacy arguments to be removed in breaking change:\n        disablePeopleButton={props.disablePeopleButton}\n        disableChatButton={props.disableChatButton}\n        onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked}\n        onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked}\n        onHeaderMenuClick={props.onHeaderMenuClick}\n      />\n    );\n  }, [\n    overrideSidePaneId,\n    props.onChatButtonClicked,\n    props.onPeopleButtonClicked,\n    props.disablePeopleButton,\n    props.disableChatButton,\n    props.onHeaderMenuClick,\n    sidePaneRenderer?.id,\n    closePane\n  ]);\n\n  const HeaderToRender =\n    props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender =\n    overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed\n      ? overrideSidePane.renderer.contentRenderer\n      : undefined;\n\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n\n  return (\n    <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && (\n            <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n          {OverrideContentRender && (\n            <Stack.Item\n              verticalFill\n              styles={\n                !overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed\n                  ? hiddenStyles\n                  : scrollableContainerContents\n              }\n            >\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n        </Stack>\n      </Stack.Item>\n    </Stack>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;\n"]}
+{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport { containerContextStyles, paneBodyContainer, scrollableContainer, scrollableContainerContents } from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n  minWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  const renderingHiddenOverrideContent = overrideSidePane?.renderer.contentRenderer && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n  const widthConstrainedStyles = useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);\n  const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : widthConstrainedStyles;\n  const Header = (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ?? EmptyElement;\n\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const {\n    updateSidePaneRenderer\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n  const LegacyHeader = useMemo((): JSX.Element => {\n    return <PeopleAndChatHeader onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane} activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n    // legacy arguments to be removed in breaking change:\n    disablePeopleButton={props.disablePeopleButton} disableChatButton={props.disableChatButton} onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked} onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked} />;\n  }, [overrideSidePaneId, props.onChatButtonClicked, props.onPeopleButtonClicked, props.disablePeopleButton, props.disableChatButton, sidePaneRenderer?.id, closePane]);\n  const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender = overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed ? overrideSidePane.renderer.contentRenderer : undefined;\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n  return <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>}\n          {OverrideContentRender && <Stack.Item verticalFill styles={!overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed ? hiddenStyles : scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>}\n        </Stack>\n      </Stack.Item>\n    </Stack>;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACpE,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAClD,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\n\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const { sidePaneRenderer } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};\n"]}
+{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EACJ,gBAAgB,EAChB,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EACJ,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const {\n    sidePaneRenderer\n  } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.d.ts

@@ -12,13 +12,6 @@ export declare const usePeoplePane: (props: {
     onFetchParticipantMenuItems?: ParticipantMenuItemsCallback | undefined;
     mobileView?: boolean | undefined;
     peopleButtonRef?: React.RefObject<IButton> | undefined;
-    spotlightedParticipantUserIds?: string[] | undefined;
-    onStartLocalSpotlight?: (() => Promise<void>) | undefined;
-    onStopLocalSpotlight?: (() => Promise<void>) | undefined;
-    onStartRemoteSpotlight?: ((userIds?: string[]) => Promise<void>) | undefined;
-    onStopRemoteSpotlight?: ((userIds?: string[]) => Promise<void>) | undefined;
-    onStopAllSpotlight?: (() => Promise<void>) | undefined;
-    maxParticipantsToSpotlight?: number | undefined;
 }) => {
     openPeoplePane: () => void;
     closePeoplePane: () => void;

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

@@ -8,134 +8,17 @@ import { useLocale } from '../../../localization';
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
 export const usePeoplePane = (props) => {
-    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef, 
-    /* @conditional-compile-remove(spotlight) */
-    spotlightedParticipantUserIds, 
-    /* @conditional-compile-remove(spotlight) */
-    onStartLocalSpotlight, 
-    /* @conditional-compile-remove(spotlight) */
-    onStopLocalSpotlight, 
-    /* @conditional-compile-remove(spotlight) */
-    onStartRemoteSpotlight, 
-    /* @conditional-compile-remove(spotlight) */
-    onStopRemoteSpotlight, 
-    /* @conditional-compile-remove(spotlight) */
-    onStopAllSpotlight, 
-    /* @conditional-compile-remove(spotlight) */
-    maxParticipantsToSpotlight } = props;
+    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef } = props;
     const closePane = useCallback(() => {
         var _a;
         updateSidePaneRenderer(undefined);
         (_a = peopleButtonRef === null || peopleButtonRef === void 0 ? void 0 : peopleButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [peopleButtonRef, updateSidePaneRenderer]);
     const localeStrings = useLocale().strings.call;
-    /* @conditional-compile-remove(spotlight) */
-    const sidePaneHeaderMenuProps = useMemo(() => {
-        const menuItems = [];
-        if (onStopAllSpotlight && spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0) {
-            menuItems.push({
-                key: 'stopAllSpotlightKey',
-                text: localeStrings.stopAllSpotlightMenuLabel,
-                iconProps: { iconName: 'StopAllSpotlightMenuButton', styles: { root: { lineHeight: 0 } } },
-                onClick: () => {
-                    onStopAllSpotlight();
-                },
-                ariaLabel: localeStrings.stopAllSpotlightMenuLabel
-            });
-        }
-        return {
-            items: menuItems
-        };
-    }, [onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.stopAllSpotlightMenuLabel]);
-    const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false, 
-        /* @conditional-compile-remove(spotlight) */
-        moreSidePaneButtonAriaLabel: localeStrings.peoplePaneMoreButtonAriaLabel, 
-        /* @conditional-compile-remove(spotlight) */
-        menuProps: sidePaneHeaderMenuProps })), [mobileView, closePane, localeStrings, /* @conditional-compile-remove(spotlight) */ sidePaneHeaderMenuProps]);
-    /* @conditional-compile-remove(spotlight) */
-    const onFetchParticipantMenuItemsForCallComposite = useCallback((participantId, myUserId, defaultMenuItems) => {
-        const _defaultMenuItems = defaultMenuItems !== null && defaultMenuItems !== void 0 ? defaultMenuItems : [];
-        const isSpotlighted = spotlightedParticipantUserIds === null || spotlightedParticipantUserIds === void 0 ? void 0 : spotlightedParticipantUserIds.find((p) => p === participantId);
-        const isMe = myUserId === participantId;
-        if (isSpotlighted) {
-            const stopSpotlightMenuText = isMe
-                ? localeStrings.stopSpotlightOnSelfParticipantListMenuLabel
-                : localeStrings.stopSpotlightParticipantListMenuLabel;
-            const onStopSpotlight = isMe
-                ? onStopLocalSpotlight
-                : onStopRemoteSpotlight
-                    ? () => {
-                        onStopRemoteSpotlight([participantId]);
-                    }
-                    : undefined;
-            if (onStopSpotlight && stopSpotlightMenuText) {
-                _defaultMenuItems.push({
-                    key: 'stop-spotlight',
-                    text: stopSpotlightMenuText,
-                    onClick: onStopSpotlight,
-                    iconProps: {
-                        iconName: 'StopSpotlightContextualMenuItem',
-                        styles: { root: { lineHeight: 0 } }
-                    },
-                    ariaLabel: stopSpotlightMenuText
-                });
-            }
-        }
-        else {
-            const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
-                ? localeStrings.addSpotlightParticipantListMenuLabel
-                : localeStrings.startSpotlightParticipantListMenuLabel;
-            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
-                ? spotlightedParticipantUserIds
-                    ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
-                    : false
-                : false;
-            const onStartSpotlight = isMe
-                ? onStartLocalSpotlight
-                : onStartRemoteSpotlight
-                    ? () => {
-                        onStartRemoteSpotlight([participantId]);
-                    }
-                    : undefined;
-            if (onStartSpotlight && startSpotlightMenuText) {
-                _defaultMenuItems.push({
-                    key: 'start-spotlight',
-                    text: startSpotlightMenuText,
-                    onClick: onStartSpotlight,
-                    iconProps: {
-                        iconName: 'StartSpotlightContextualMenuItem',
-                        styles: { root: { lineHeight: 0 } }
-                    },
-                    ariaLabel: startSpotlightMenuText,
-                    disabled: maxSpotlightedParticipantsReached,
-                    title: maxSpotlightedParticipantsReached
-                        ? localeStrings.spotlightLimitReachedParticipantListMenuTitle
-                        : undefined
-                });
-            }
-        }
-        return onFetchParticipantMenuItems
-            ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems)
-            : _defaultMenuItems;
-    }, [
-        spotlightedParticipantUserIds,
-        onStartLocalSpotlight,
-        onStopLocalSpotlight,
-        onStartRemoteSpotlight,
-        onStopRemoteSpotlight,
-        onFetchParticipantMenuItems,
-        localeStrings.stopSpotlightParticipantListMenuLabel,
-        localeStrings.stopSpotlightOnSelfParticipantListMenuLabel,
-        localeStrings.addSpotlightParticipantListMenuLabel,
-        localeStrings.startSpotlightParticipantListMenuLabel,
-        localeStrings.spotlightLimitReachedParticipantListMenuTitle,
-        maxParticipantsToSpotlight
-    ]);
+    const onRenderHeader = useCallback(() => React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false }), [mobileView, closePane, localeStrings]);
     let _onFetchParticipantMenuItems = onFetchParticipantMenuItems;
-    /* @conditional-compile-remove(spotlight) */
-    _onFetchParticipantMenuItems = onFetchParticipantMenuItemsForCallComposite;
     const onRenderContent = useCallback(() => {
-        return (React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: _onFetchParticipantMenuItems, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView }));
+        return React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: _onFetchParticipantMenuItems, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView });
     }, [inviteLink, mobileView, onFetchAvatarPersonaData, _onFetchParticipantMenuItems, setDrawerMenuItems]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
@@ -152,6 +35,10 @@ export const usePeoplePane = (props) => {
             openPane();
         }
     }, [isOpen, openPane]);
-    return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };
+    return {
+        openPeoplePane: openPane,
+        closePeoplePane: closePane,
+        isPeoplePaneOpen: isOpen
+    };
 };
 //# sourceMappingURL=usePeoplePane.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAsB7B,EAIC,EAAE;IACF,MAAM,EACJ,sBAAsB,EACtB,UAAU,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,kBAAkB,EAClB,UAAU,EACV,eAAe;IACf,4CAA4C;IAC5C,6BAA6B;IAC7B,4CAA4C;IAC5C,qBAAqB;IACrB,4CAA4C;IAC5C,oBAAoB;IACpB,4CAA4C;IAC5C,sBAAsB;IACtB,4CAA4C;IAC5C,qBAAqB;IACrB,4CAA4C;IAC5C,kBAAkB;IAClB,4CAA4C;IAC5C,0BAA0B,EAC3B,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE9C,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAE/C,4CAA4C;IAC5C,MAAM,uBAAuB,GAAyB,OAAO,CAAC,GAAG,EAAE;QACjE,MAAM,SAAS,GAA0B,EAAE,CAAC;QAC5C,IAAI,kBAAkB,IAAI,6BAA6B,IAAI,6BAA6B,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpG,SAAS,CAAC,IAAI,CAAC;gBACb,GAAG,EAAE,qBAAqB;gBAC1B,IAAI,EAAE,aAAa,CAAC,yBAAyB;gBAC7C,SAAS,EAAE,EAAE,QAAQ,EAAE,4BAA4B,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC1F,OAAO,EAAE,GAAG,EAAE;oBACZ,kBAAkB,EAAE,CAAC;gBACvB,CAAC;gBACD,SAAS,EAAE,aAAa,CAAC,yBAAyB;aACnD,CAAC,CAAC;QACL,CAAC;QACD,OAAO;YACL,KAAK,EAAE,SAAS;SACjB,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,EAAE,6BAA6B,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAEjG,MAAM,cAAc,GAAG,WAAW,CAChC,GAAG,EAAE,CAAC,CACJ,oBAAC,cAAc,IACb,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,aAAa,CAAC,eAAe,EAC1C,8BAA8B,EAAE,aAAa,CAAC,0BAA0B,EACxE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK;QAC/B,4CAA4C;QAC5C,2BAA2B,EAAE,aAAa,CAAC,6BAA6B;QACxE,4CAA4C;QAC5C,SAAS,EAAE,uBAAuB,GAClC,CACH,EACD,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,4CAA4C,CAAC,uBAAuB,CAAC,CAC7G,CAAC;IAEF,4CAA4C;IAC5C,MAAM,2CAA2C,GAAG,WAAW,CAC7D,CAAC,aAAqB,EAAE,QAAiB,EAAE,gBAAwC,EAAyB,EAAE;QAC5G,MAAM,iBAAiB,GAA0B,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE,CAAC;QACxE,MAAM,aAAa,GAAG,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC;QACtF,MAAM,IAAI,GAAG,QAAQ,KAAK,aAAa,CAAC;QACxC,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,qBAAqB,GAAG,IAAI;gBAChC,CAAC,CAAC,aAAa,CAAC,2CAA2C;gBAC3D,CAAC,CAAC,aAAa,CAAC,qCAAqC,CAAC;YACxD,MAAM,eAAe,GAAG,IAAI;gBAC1B,CAAC,CAAC,oBAAoB;gBACtB,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,GAAG,EAAE;wBACH,qBAAqB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;oBACzC,CAAC;oBACH,CAAC,CAAC,SAAS,CAAC;YACd,IAAI,eAAe,IAAI,qBAAqB,EAAE,CAAC;gBAC7C,iBAAiB,CAAC,IAAI,CAAC;oBACrB,GAAG,EAAE,gBAAgB;oBACrB,IAAI,EAAE,qBAAqB;oBAC3B,OAAO,EAAE,eAAe;oBACxB,SAAS,EAAE;wBACT,QAAQ,EAAE,iCAAiC;wBAC3C,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;qBACpC;oBACD,SAAS,EAAE,qBAAqB;iBACjC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,sBAAsB,GAC1B,6BAA6B,IAAI,6BAA6B,CAAC,MAAM,GAAG,CAAC;gBACvE,CAAC,CAAC,aAAa,CAAC,oCAAoC;gBACpD,CAAC,CAAC,aAAa,CAAC,sCAAsC,CAAC;YAC3D,MAAM,iCAAiC,GAAG,0BAA0B;gBAClE,CAAC,CAAC,6BAA6B;oBAC7B,CAAC,CAAC,6BAA6B,CAAC,MAAM,IAAI,0BAA0B;oBACpE,CAAC,CAAC,KAAK;gBACT,CAAC,CAAC,KAAK,CAAC;YACV,MAAM,gBAAgB,GAAG,IAAI;gBAC3B,CAAC,CAAC,qBAAqB;gBACvB,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,GAAG,EAAE;wBACH,sBAAsB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;oBAC1C,CAAC;oBACH,CAAC,CAAC,SAAS,CAAC;YACd,IAAI,gBAAgB,IAAI,sBAAsB,EAAE,CAAC;gBAC/C,iBAAiB,CAAC,IAAI,CAAC;oBACrB,GAAG,EAAE,iBAAiB;oBACtB,IAAI,EAAE,sBAAsB;oBAC5B,OAAO,EAAE,gBAAgB;oBACzB,SAAS,EAAE;wBACT,QAAQ,EAAE,kCAAkC;wBAC5C,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;qBACpC;oBACD,SAAS,EAAE,sBAAsB;oBACjC,QAAQ,EAAE,iCAAiC;oBAC3C,KAAK,EAAE,iCAAiC;wBACtC,CAAC,CAAC,aAAa,CAAC,6CAA6C;wBAC7D,CAAC,CAAC,SAAS;iBACd,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,OAAO,2BAA2B;YAChC,CAAC,CAAC,2BAA2B,CAAC,aAAa,EAAE,QAAQ,EAAE,iBAAiB,CAAC;YACzE,CAAC,CAAC,iBAAiB,CAAC;IACxB,CAAC,EACD;QACE,6BAA6B;QAC7B,qBAAqB;QACrB,oBAAoB;QACpB,sBAAsB;QACtB,qBAAqB;QACrB,2BAA2B;QAC3B,aAAa,CAAC,qCAAqC;QACnD,aAAa,CAAC,2CAA2C;QACzD,aAAa,CAAC,oCAAoC;QAClD,aAAa,CAAC,sCAAsC;QACpD,aAAa,CAAC,6CAA6C;QAC3D,0BAA0B;KAC3B,CACF,CAAC;IAEF,IAAI,4BAA4B,GAAG,2BAA2B,CAAC;IAC/D,4CAA4C;IAC5C,4BAA4B,GAAG,2CAA2C,CAAC;IAE3E,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,UAAU,EACtB,wBAAwB,EAAE,wBAAwB,EAClD,2BAA2B,EAAE,4BAA4B,EACzD,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEzG,MAAM,gBAAgB,GAAqB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,mBAAmB;KACxB,CAAC,EACF,CAAC,eAAe,EAAE,cAAc,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAC;IAEhE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC;AAC5F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { RefObject, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\nimport { IButton } from '@fluentui/react';\n/* @conditional-compile-remove(spotlight) */\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\n\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private */\nexport const usePeoplePane = (props: {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  mobileView?: boolean;\n  peopleButtonRef?: RefObject<IButton>;\n  /* @conditional-compile-remove(spotlight) */\n  spotlightedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(spotlight) */\n  onStartLocalSpotlight?: () => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  onStopLocalSpotlight?: () => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  onStartRemoteSpotlight?: (userIds?: string[]) => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  onStopRemoteSpotlight?: (userIds?: string[]) => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  onStopAllSpotlight?: () => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  maxParticipantsToSpotlight?: number;\n}): {\n  openPeoplePane: () => void;\n  closePeoplePane: () => void;\n  isPeoplePaneOpen: boolean;\n} => {\n  const {\n    updateSidePaneRenderer,\n    inviteLink,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    mobileView,\n    peopleButtonRef,\n    /* @conditional-compile-remove(spotlight) */\n    spotlightedParticipantUserIds,\n    /* @conditional-compile-remove(spotlight) */\n    onStartLocalSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    onStopLocalSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    onStartRemoteSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    onStopRemoteSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    onStopAllSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    maxParticipantsToSpotlight\n  } = props;\n\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    peopleButtonRef?.current?.focus();\n  }, [peopleButtonRef, updateSidePaneRenderer]);\n\n  const localeStrings = useLocale().strings.call;\n\n  /* @conditional-compile-remove(spotlight) */\n  const sidePaneHeaderMenuProps: IContextualMenuProps = useMemo(() => {\n    const menuItems: IContextualMenuItem[] = [];\n    if (onStopAllSpotlight && spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0) {\n      menuItems.push({\n        key: 'stopAllSpotlightKey',\n        text: localeStrings.stopAllSpotlightMenuLabel,\n        iconProps: { iconName: 'StopAllSpotlightMenuButton', styles: { root: { lineHeight: 0 } } },\n        onClick: () => {\n          onStopAllSpotlight();\n        },\n        ariaLabel: localeStrings.stopAllSpotlightMenuLabel\n      });\n    }\n    return {\n      items: menuItems\n    };\n  }, [onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.stopAllSpotlightMenuLabel]);\n\n  const onRenderHeader = useCallback(\n    () => (\n      <SidePaneHeader\n        onClose={closePane}\n        headingText={localeStrings.peoplePaneTitle}\n        dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel}\n        mobileView={mobileView ?? false}\n        /* @conditional-compile-remove(spotlight) */\n        moreSidePaneButtonAriaLabel={localeStrings.peoplePaneMoreButtonAriaLabel}\n        /* @conditional-compile-remove(spotlight) */\n        menuProps={sidePaneHeaderMenuProps}\n      />\n    ),\n    [mobileView, closePane, localeStrings, /* @conditional-compile-remove(spotlight) */ sidePaneHeaderMenuProps]\n  );\n\n  /* @conditional-compile-remove(spotlight) */\n  const onFetchParticipantMenuItemsForCallComposite = useCallback(\n    (participantId: string, myUserId?: string, defaultMenuItems?: IContextualMenuItem[]): IContextualMenuItem[] => {\n      const _defaultMenuItems: IContextualMenuItem[] = defaultMenuItems ?? [];\n      const isSpotlighted = spotlightedParticipantUserIds?.find((p) => p === participantId);\n      const isMe = myUserId === participantId;\n      if (isSpotlighted) {\n        const stopSpotlightMenuText = isMe\n          ? localeStrings.stopSpotlightOnSelfParticipantListMenuLabel\n          : localeStrings.stopSpotlightParticipantListMenuLabel;\n        const onStopSpotlight = isMe\n          ? onStopLocalSpotlight\n          : onStopRemoteSpotlight\n          ? () => {\n              onStopRemoteSpotlight([participantId]);\n            }\n          : undefined;\n        if (onStopSpotlight && stopSpotlightMenuText) {\n          _defaultMenuItems.push({\n            key: 'stop-spotlight',\n            text: stopSpotlightMenuText,\n            onClick: onStopSpotlight,\n            iconProps: {\n              iconName: 'StopSpotlightContextualMenuItem',\n              styles: { root: { lineHeight: 0 } }\n            },\n            ariaLabel: stopSpotlightMenuText\n          });\n        }\n      } else {\n        const startSpotlightMenuText =\n          spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n            ? localeStrings.addSpotlightParticipantListMenuLabel\n            : localeStrings.startSpotlightParticipantListMenuLabel;\n        const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n          ? spotlightedParticipantUserIds\n            ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n            : false\n          : false;\n        const onStartSpotlight = isMe\n          ? onStartLocalSpotlight\n          : onStartRemoteSpotlight\n          ? () => {\n              onStartRemoteSpotlight([participantId]);\n            }\n          : undefined;\n        if (onStartSpotlight && startSpotlightMenuText) {\n          _defaultMenuItems.push({\n            key: 'start-spotlight',\n            text: startSpotlightMenuText,\n            onClick: onStartSpotlight,\n            iconProps: {\n              iconName: 'StartSpotlightContextualMenuItem',\n              styles: { root: { lineHeight: 0 } }\n            },\n            ariaLabel: startSpotlightMenuText,\n            disabled: maxSpotlightedParticipantsReached,\n            title: maxSpotlightedParticipantsReached\n              ? localeStrings.spotlightLimitReachedParticipantListMenuTitle\n              : undefined\n          });\n        }\n      }\n      return onFetchParticipantMenuItems\n        ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems)\n        : _defaultMenuItems;\n    },\n    [\n      spotlightedParticipantUserIds,\n      onStartLocalSpotlight,\n      onStopLocalSpotlight,\n      onStartRemoteSpotlight,\n      onStopRemoteSpotlight,\n      onFetchParticipantMenuItems,\n      localeStrings.stopSpotlightParticipantListMenuLabel,\n      localeStrings.stopSpotlightOnSelfParticipantListMenuLabel,\n      localeStrings.addSpotlightParticipantListMenuLabel,\n      localeStrings.startSpotlightParticipantListMenuLabel,\n      localeStrings.spotlightLimitReachedParticipantListMenuTitle,\n      maxParticipantsToSpotlight\n    ]\n  );\n\n  let _onFetchParticipantMenuItems = onFetchParticipantMenuItems;\n  /* @conditional-compile-remove(spotlight) */\n  _onFetchParticipantMenuItems = onFetchParticipantMenuItemsForCallComposite;\n\n  const onRenderContent = useCallback((): JSX.Element => {\n    return (\n      <PeoplePaneContent\n        inviteLink={inviteLink}\n        onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n        onFetchParticipantMenuItems={_onFetchParticipantMenuItems}\n        setDrawerMenuItems={setDrawerMenuItems}\n        mobileView={mobileView}\n      />\n    );\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, _onFetchParticipantMenuItems, setDrawerMenuItems]);\n\n  const sidePaneRenderer: SidePaneRenderer = useMemo(\n    () => ({\n      headerRenderer: onRenderHeader,\n      contentRenderer: onRenderContent,\n      id: PEOPLE_SIDE_PANE_ID\n    }),\n    [onRenderContent, onRenderHeader]\n  );\n\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n  const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n\n  return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };\n};\n"]}
+{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAQ7B,EAIC,EAAE;IACF,MAAM,EACJ,sBAAsB,EACtB,UAAU,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,kBAAkB,EAClB,UAAU,EACV,eAAe,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAC/C,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,eAAe,EAAE,8BAA8B,EAAE,aAAa,CAAC,0BAA0B,EAAE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,GAAI,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAChR,IAAI,4BAA4B,GAAG,2BAA2B,CAAC;IAC/D,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,oBAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,4BAA4B,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,GAAI,CAAC;IACtO,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACzG,MAAM,gBAAgB,GAAqB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACxD,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,mBAAmB;KACxB,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAC;IAEhE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,OAAO;QACL,cAAc,EAAE,QAAQ;QACxB,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,MAAM;KACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { RefObject, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\nimport { IButton } from '@fluentui/react';\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private */\nexport const usePeoplePane = (props: {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  mobileView?: boolean;\n  peopleButtonRef?: RefObject<IButton>;\n}): {\n  openPeoplePane: () => void;\n  closePeoplePane: () => void;\n  isPeoplePaneOpen: boolean;\n} => {\n  const {\n    updateSidePaneRenderer,\n    inviteLink,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    mobileView,\n    peopleButtonRef\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    peopleButtonRef?.current?.focus();\n  }, [peopleButtonRef, updateSidePaneRenderer]);\n  const localeStrings = useLocale().strings.call;\n  const onRenderHeader = useCallback(() => <SidePaneHeader onClose={closePane} headingText={localeStrings.peoplePaneTitle} dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel} mobileView={mobileView ?? false} />, [mobileView, closePane, localeStrings]);\n  let _onFetchParticipantMenuItems = onFetchParticipantMenuItems;\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <PeoplePaneContent inviteLink={inviteLink} onFetchAvatarPersonaData={onFetchAvatarPersonaData} onFetchParticipantMenuItems={_onFetchParticipantMenuItems} setDrawerMenuItems={setDrawerMenuItems} mobileView={mobileView} />;\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, _onFetchParticipantMenuItems, setDrawerMenuItems]);\n  const sidePaneRenderer: SidePaneRenderer = useMemo(() => ({\n    headerRenderer: onRenderHeader,\n    contentRenderer: onRenderContent,\n    id: PEOPLE_SIDE_PANE_ID\n  }), [onRenderContent, onRenderHeader]);\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n  const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n  return {\n    openPeoplePane: openPane,\n    closePeoplePane: closePane,\n    isPeoplePaneOpen: isOpen\n  };\n};"]}

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

@@ -21,26 +21,21 @@ export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestEr
     const locale = useLocale();
     const onRenderHeader = useCallback(() => {
         var _a, _b;
-        return (React.createElement(SidePaneHeader, { onClose: closePane, 
-            /* @conditional-compile-remove(video-background-effects) */
-            headingText: locale.strings.call.videoEffectsPaneTitle, 
-            /* @conditional-compile-remove(video-background-effects) */
-            dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView }));
+        return React.createElement(SidePaneHeader, { onClose: closePane, 
+            /* @conditional-compile-remove(video-background-effects) */ headingText: locale.strings.call.videoEffectsPaneTitle, 
+            /* @conditional-compile-remove(video-background-effects) */ dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView });
     }, [closePane, /* @conditional-compile-remove(video-background-effects) */ locale.strings, mobileView]);
     /* @conditional-compile-remove(video-background-effects) */
-    const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');
+    const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');
     const onRenderContent = useCallback(() => {
-        return (React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, 
-            /* @conditional-compile-remove(video-background-effects) */
-            activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
+        return React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, 
+            /* @conditional-compile-remove(video-background-effects) */ activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
                 // Clear any existing video effects error when the user clicks on a new video effect
                 /* @conditional-compile-remove(video-background-effects) */
                 latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
-            } }));
+            } });
     }, [
-        /* @conditional-compile-remove(video-background-effects) */
-        latestVideoEffectError,
-        onDismissError
+        latestVideoEffectError, onDismissError
     ]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/** @private */\nexport const useVideoEffectsPane = (\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void,\n  mobileView: boolean,\n  latestErrors: ActiveErrorMessage[],\n  onDismissError: (error: ActiveErrorMessage) => void,\n  cameraButtonRef?: React.RefObject<IButton>\n): {\n  openVideoEffectsPane: () => void;\n  closeVideoEffectsPane: () => void;\n  toggleVideoEffectsPane: () => void;\n  isVideoEffectsPaneOpen: boolean;\n} => {\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    cameraButtonRef?.current?.focus();\n  }, [cameraButtonRef, updateSidePaneRenderer]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n\n  const onRenderHeader = useCallback(() => {\n    return (\n      <SidePaneHeader\n        onClose={closePane}\n        /* @conditional-compile-remove(video-background-effects) */\n        headingText={locale.strings.call.videoEffectsPaneTitle}\n        /* @conditional-compile-remove(video-background-effects) */\n        dismissSidePaneButtonAriaLabel={\n          locale.strings.call.dismissSidePaneButtonLabel ??\n          locale.strings.callWithChat.dismissSidePaneButtonLabel ??\n          'Close'\n        }\n        mobileView={mobileView}\n      />\n    );\n  }, [closePane, /* @conditional-compile-remove(video-background-effects) */ locale.strings, mobileView]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');\n\n  const onRenderContent = useCallback((): JSX.Element => {\n    return (\n      <VideoEffectsPaneContent\n        onDismissError={onDismissError}\n        /* @conditional-compile-remove(video-background-effects) */\n        activeVideoEffectError={latestVideoEffectError}\n        activeVideoEffectChange={() => {\n          // Clear any existing video effects error when the user clicks on a new video effect\n          /* @conditional-compile-remove(video-background-effects) */\n          latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n        }}\n      />\n    );\n  }, [\n    /* @conditional-compile-remove(video-background-effects) */\n    latestVideoEffectError,\n    onDismissError\n  ]);\n\n  const sidePaneRenderer: SidePaneRenderer = useMemo(\n    () => ({\n      headerRenderer: onRenderHeader,\n      contentRenderer: onRenderContent,\n      id: VIDEO_EFFECTS_SIDE_PANE_ID\n    }),\n    [onRenderContent, onRenderHeader]\n  );\n\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n  const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n\n  const togglePane = useCallback(() => {\n    if (isOpen) {\n      closePane();\n    } else {\n      openPane();\n    }\n  }, [closePane, isOpen, openPane]);\n\n  return {\n    openVideoEffectsPane: openPane,\n    closeVideoEffectsPane: closePane,\n    toggleVideoEffectsPane: togglePane,\n    isVideoEffectsPaneOpen: isOpen\n  };\n};\n\n/**\n * Active video effect with timestamp.\n *\n * @private\n */\nexport interface ActiveVideoEffect {\n  /**\n   * Type of video effect that is active.\n   */\n  type: 'blur' | 'replacement';\n  /**\n   * The latest timestamp when this effect was activated.\n   *\n   */\n  timestamp: Date;\n}\n"]}
+{"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/** @private */\nexport const useVideoEffectsPane = (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean, latestErrors: ActiveErrorMessage[], onDismissError: (error: ActiveErrorMessage) => void, cameraButtonRef?: React.RefObject<IButton>): {\n  openVideoEffectsPane: () => void;\n  closeVideoEffectsPane: () => void;\n  toggleVideoEffectsPane: () => void;\n  isVideoEffectsPaneOpen: boolean;\n} => {\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    cameraButtonRef?.current?.focus();\n  }, [cameraButtonRef, updateSidePaneRenderer]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  const onRenderHeader = useCallback(() => {\n    return <SidePaneHeader onClose={closePane}\n    /* @conditional-compile-remove(video-background-effects) */ headingText={locale.strings.call.videoEffectsPaneTitle}\n    /* @conditional-compile-remove(video-background-effects) */ dismissSidePaneButtonAriaLabel={locale.strings.call.dismissSidePaneButtonLabel ?? locale.strings.callWithChat.dismissSidePaneButtonLabel ?? 'Close'} mobileView={mobileView} />;\n  }, [closePane, /* @conditional-compile-remove(video-background-effects) */locale.strings, mobileView]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <VideoEffectsPaneContent onDismissError={onDismissError}\n    /* @conditional-compile-remove(video-background-effects) */ activeVideoEffectError={latestVideoEffectError} activeVideoEffectChange={() => {\n      // Clear any existing video effects error when the user clicks on a new video effect\n      /* @conditional-compile-remove(video-background-effects) */\n      latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n    }} />;\n  }, [/* @conditional-compile-remove(video-background-effects) */\n  latestVideoEffectError, onDismissError]);\n  const sidePaneRenderer: SidePaneRenderer = useMemo(() => ({\n    headerRenderer: onRenderHeader,\n    contentRenderer: onRenderContent,\n    id: VIDEO_EFFECTS_SIDE_PANE_ID\n  }), [onRenderContent, onRenderHeader]);\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n  const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n  const togglePane = useCallback(() => {\n    if (isOpen) {\n      closePane();\n    } else {\n      openPane();\n    }\n  }, [closePane, isOpen, openPane]);\n  return {\n    openVideoEffectsPane: openPane,\n    closeVideoEffectsPane: closePane,\n    toggleVideoEffectsPane: togglePane,\n    isVideoEffectsPaneOpen: isOpen\n  };\n};\n\n/**\n * Active video effect with timestamp.\n *\n * @private\n */\nexport interface ActiveVideoEffect {\n  /**\n   * Type of video effect that is active.\n   */\n  type: 'blur' | 'replacement';\n  /**\n   * The latest timestamp when this effect was activated.\n   *\n   */\n  timestamp: Date;\n}"]}

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

@@ -11,6 +11,6 @@ import { useLocale } from '../../localization';
 export const StartCallButton = (props) => {
     const { rejoinCall } = props;
     const locale = useLocale();
-    return (React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: props.hideIcon ? undefined : () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) })));
+    return React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: props.hideIcon ? undefined : () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) }));
 };
 //# sourceMappingURL=StartCallButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StartCallButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/StartCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAY/C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,kBACE,kCAAkC,EAC7C,SAAS,EAAE,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,EACpD,MAAM,EAAE,oBAAoB,EAC5B,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EACvG,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,oBAAC,aAAa,IAAC,SAAS,EAAE,oBAAoB,GAAI,IACnG,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PrimaryButton, mergeStyles, IButtonProps } from '@fluentui/react';\nimport React from 'react';\nimport { buttonStyle, buttonWithIconStyles, videoCameraIconStyle } from '../styles/StartCallButton.styles';\nimport { Video20Filled } from '@fluentui/react-icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface StartCallButtonProps extends IButtonProps {\n  className?: string;\n  /** If set, the button is intended to rejoin an existing call. */\n  rejoinCall?: boolean;\n  hideIcon?: boolean;\n}\n\n/**\n * @private\n */\nexport const StartCallButton = (props: StartCallButtonProps): JSX.Element => {\n  const { rejoinCall } = props;\n  const locale = useLocale();\n\n  return (\n    <PrimaryButton\n      {...props}\n      data-ui-id=\"call-composite-start-call-button\"\n      className={mergeStyles(buttonStyle, props.className)}\n      styles={buttonWithIconStyles}\n      text={rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel}\n      onRenderIcon={props.hideIcon ? undefined : () => <Video20Filled className={videoCameraIconStyle} />}\n    />\n  );\n};\n"]}
+{"version":3,"file":"StartCallButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/StartCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAY/C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,UAAU,EACX,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,aAAa,oBAAK,KAAK,kBAAa,kCAAkC,EAAC,SAAS,EAAE,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,oBAAoB,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,oBAAC,aAAa,IAAC,SAAS,EAAE,oBAAoB,GAAI,IAAI,CAAC;AACtX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PrimaryButton, mergeStyles, IButtonProps } from '@fluentui/react';\nimport React from 'react';\nimport { buttonStyle, buttonWithIconStyles, videoCameraIconStyle } from '../styles/StartCallButton.styles';\nimport { Video20Filled } from '@fluentui/react-icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface StartCallButtonProps extends IButtonProps {\n  className?: string;\n  /** If set, the button is intended to rejoin an existing call. */\n  rejoinCall?: boolean;\n  hideIcon?: boolean;\n}\n\n/**\n * @private\n */\nexport const StartCallButton = (props: StartCallButtonProps): JSX.Element => {\n  const {\n    rejoinCall\n  } = props;\n  const locale = useLocale();\n  return <PrimaryButton {...props} data-ui-id=\"call-composite-start-call-button\" className={mergeStyles(buttonStyle, props.className)} styles={buttonWithIconStyles} text={rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel} onRenderIcon={props.hideIcon ? undefined : () => <Video20Filled className={videoCameraIconStyle} />} />;\n};"]}

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

@@ -22,9 +22,11 @@ export const SvgWithWordWrapping = (props) => {
             setHeight(numLines * lineHeightPx);
         }
     }, [width, lineHeightPx, text]);
-    return (React.createElement("svg", { width: width, height: height + bufferHeightPx, ref: svgRef, xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("text", { height: 0, ref: calculationTextElement, style: { visibility: 'hidden' } }, text),
-        React.createElement("text", { ref: visibleTextElement, x: "0", y: bufferHeightPx / 4, role: "heading", "aria-level": 1 })));
+    return React.createElement("svg", { width: width, height: height + bufferHeightPx, ref: svgRef, xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("text", { height: 0, ref: calculationTextElement, style: {
+                visibility: 'hidden'
+            } }, text),
+        React.createElement("text", { ref: visibleTextElement, x: "0", y: bufferHeightPx / 4, role: "heading", "aria-level": 1 }));
 };
 /**
  * Wrap text in tspan elements to fit the width of the SVG

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

@@ -1 +1 @@
-{"version":3,"file":"SvgWithWordWrapping.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/SvgWithWordWrapping.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\n/**\n * An SVG element component that wraps inner text to fit the width of the SVG.\n * @private\n */\nexport const SvgWithWordWrapping = (props: {\n  width: number;\n  text: string;\n  lineHeightPx: number;\n  bufferHeightPx: number;\n}): JSX.Element => {\n  const { width, text, lineHeightPx, bufferHeightPx } = props;\n  const svgRef = useRef<SVGSVGElement>(null);\n  const calculationTextElement = useRef<SVGTextElement>(null);\n  const visibleTextElement = useRef<SVGTextElement>(null);\n  const [height, setHeight] = useState<number>(0);\n\n  // useLayoutEffect ensures that the calculationTextElement is rendered before being used for calculations.\n  // Using useLayoutEffect over useEffect ensures we do not get a layout shift when the visibleTextElement is rendered\n  // and the height is updated. This is because useLayoutEffect runs synchronously after DOM mutations but\n  // before the browser has a chance to paint. See https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n  // for more details.\n  useLayoutEffect(() => {\n    if (text && calculationTextElement.current && visibleTextElement.current) {\n      const numLines = convertTextToWrappedText(\n        calculationTextElement.current,\n        visibleTextElement.current,\n        width,\n        lineHeightPx\n      );\n      setHeight(numLines * lineHeightPx);\n    }\n  }, [width, lineHeightPx, text]);\n\n  return (\n    <svg width={width} height={height + bufferHeightPx} ref={svgRef} xmlns=\"http://www.w3.org/2000/svg\">\n      <text height={0} ref={calculationTextElement} style={{ visibility: 'hidden' }}>\n        {text}\n      </text>\n      <text ref={visibleTextElement} x=\"0\" y={bufferHeightPx / 4} role=\"heading\" aria-level={1} />\n    </svg>\n  );\n};\n\n/**\n * Wrap text in tspan elements to fit the width of the SVG\n * @param baseTextElement The text element to create the wrapped text from.\n * @param outputTextElement The text element to insert the wrapped text into.\n * @param maxWidth The maximum width of the text element.\n * @param lineHeightPx The height of each line in pixels.\n * @returns The number of lines of text.\n */\nconst convertTextToWrappedText = (\n  inputTextElement: SVGTextElement,\n  outputTextElement: SVGTextElement,\n  maxWidth: number,\n  lineHeightPx: number\n): number => {\n  const words = inputTextElement.textContent?.split(' ') ?? [];\n  if (words.length === 0 || words[0] === '') {\n    throw new Error('Text element must contain text');\n  }\n\n  // The current line being built.\n  let line = '';\n\n  // Running total of the number of lines.\n  let numLines = 0;\n\n  // First, clear the output text element.\n  outputTextElement.textContent = '';\n\n  // Iterate through each word and create a tspan element for each line.\n  for (let i = 0; i < words.length; i++) {\n    const testLine = line + words[i] + ' ';\n    const testWidth = inputTextElement.getSubStringLength(0, testLine.length);\n\n    if (testWidth > maxWidth && i > 0) {\n      const newLine = constructTSpanLine(line, lineHeightPx);\n      outputTextElement.appendChild(newLine);\n      line = words[i] + ' ';\n      numLines++;\n    } else {\n      line = testLine;\n    }\n  }\n\n  // Add the last line.\n  const newLine = constructTSpanLine(line, lineHeightPx);\n  outputTextElement.appendChild(newLine);\n  numLines++;\n\n  // Return the number of lines to calculate the height of the SVG.\n  return numLines;\n};\n\n/**\n * Create a tspan element for a line of text, with text set to be centered.\n * @param line The line of text.\n * @param lineHeightPx The height of each line in pixels.\n * @returns The tspan element.\n */\nconst constructTSpanLine = (line: string, lineHeightPx: number): SVGTSpanElement => {\n  const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n  tspan.textContent = line;\n  tspan.setAttribute('x', '50%');\n  tspan.setAttribute('dy', `${lineHeightPx}px`);\n  tspan.setAttribute('text-anchor', 'middle');\n  return tspan;\n};\n"]}
+{"version":3,"file":"SvgWithWordWrapping.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SvgWithWordWrapping.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\n/**\n * An SVG element component that wraps inner text to fit the width of the SVG.\n * @private\n */\nexport const SvgWithWordWrapping = (props: {\n  width: number;\n  text: string;\n  lineHeightPx: number;\n  bufferHeightPx: number;\n}): JSX.Element => {\n  const {\n    width,\n    text,\n    lineHeightPx,\n    bufferHeightPx\n  } = props;\n  const svgRef = useRef<SVGSVGElement>(null);\n  const calculationTextElement = useRef<SVGTextElement>(null);\n  const visibleTextElement = useRef<SVGTextElement>(null);\n  const [height, setHeight] = useState<number>(0);\n\n  // useLayoutEffect ensures that the calculationTextElement is rendered before being used for calculations.\n  // Using useLayoutEffect over useEffect ensures we do not get a layout shift when the visibleTextElement is rendered\n  // and the height is updated. This is because useLayoutEffect runs synchronously after DOM mutations but\n  // before the browser has a chance to paint. See https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n  // for more details.\n  useLayoutEffect(() => {\n    if (text && calculationTextElement.current && visibleTextElement.current) {\n      const numLines = convertTextToWrappedText(calculationTextElement.current, visibleTextElement.current, width, lineHeightPx);\n      setHeight(numLines * lineHeightPx);\n    }\n  }, [width, lineHeightPx, text]);\n  return <svg width={width} height={height + bufferHeightPx} ref={svgRef} xmlns=\"http://www.w3.org/2000/svg\">\n      <text height={0} ref={calculationTextElement} style={{\n      visibility: 'hidden'\n    }}>\n        {text}\n      </text>\n      <text ref={visibleTextElement} x=\"0\" y={bufferHeightPx / 4} role=\"heading\" aria-level={1} />\n    </svg>;\n};\n\n/**\n * Wrap text in tspan elements to fit the width of the SVG\n * @param baseTextElement The text element to create the wrapped text from.\n * @param outputTextElement The text element to insert the wrapped text into.\n * @param maxWidth The maximum width of the text element.\n * @param lineHeightPx The height of each line in pixels.\n * @returns The number of lines of text.\n */\nconst convertTextToWrappedText = (inputTextElement: SVGTextElement, outputTextElement: SVGTextElement, maxWidth: number, lineHeightPx: number): number => {\n  const words = inputTextElement.textContent?.split(' ') ?? [];\n  if (words.length === 0 || words[0] === '') {\n    throw new Error('Text element must contain text');\n  }\n\n  // The current line being built.\n  let line = '';\n\n  // Running total of the number of lines.\n  let numLines = 0;\n\n  // First, clear the output text element.\n  outputTextElement.textContent = '';\n\n  // Iterate through each word and create a tspan element for each line.\n  for (let i = 0; i < words.length; i++) {\n    const testLine = line + words[i] + ' ';\n    const testWidth = inputTextElement.getSubStringLength(0, testLine.length);\n    if (testWidth > maxWidth && i > 0) {\n      const newLine = constructTSpanLine(line, lineHeightPx);\n      outputTextElement.appendChild(newLine);\n      line = words[i] + ' ';\n      numLines++;\n    } else {\n      line = testLine;\n    }\n  }\n\n  // Add the last line.\n  const newLine = constructTSpanLine(line, lineHeightPx);\n  outputTextElement.appendChild(newLine);\n  numLines++;\n\n  // Return the number of lines to calculate the height of the SVG.\n  return numLines;\n};\n\n/**\n * Create a tspan element for a line of text, with text set to be centered.\n * @param line The line of text.\n * @param lineHeightPx The height of each line in pixels.\n * @returns The tspan element.\n */\nconst constructTSpanLine = (line: string, lineHeightPx: number): SVGTSpanElement => {\n  const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n  tspan.textContent = line;\n  tspan.setAttribute('x', '50%');\n  tspan.setAttribute('dy', `${lineHeightPx}px`);\n  tspan.setAttribute('text-anchor', 'middle');\n  return tspan;\n};"]}

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

@@ -21,14 +21,8 @@ export const Camera = (props) => {
     const isRoomsCall = adapter.getState().isRoomsCall;
     /* @conditional-compile-remove(capabilities) */
     const turnVideoOnCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.turnVideoOn;
-    return (React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disableTooltip: props.disableTooltip, disabled: cameraButtonProps.disabled ||
-            props.disabled ||
-            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
-        /* @conditional-compile-remove(capabilities) */
-        onRenderOffIcon: turnVideoOnCapability && !turnVideoOnCapability.isPresent
-            ? () => React.createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonCameraProhibited' })
-            : undefined, 
-        /* @conditional-compile-remove(video-background-effects) */
-        onClickVideoEffects: props.onClickVideoEffects, componentRef: props.componentRef })));
+    return React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disableTooltip: props.disableTooltip, disabled: cameraButtonProps.disabled || props.disabled || ( /* @conditional-compile-remove(rooms) */isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
+        /* @conditional-compile-remove(capabilities) */ onRenderOffIcon: turnVideoOnCapability && !turnVideoOnCapability.isPresent ? () => React.createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonCameraProhibited' }) : undefined, 
+        /* @conditional-compile-remove(video-background-effects) */ onClickVideoEffects: props.onClickVideoEffects, componentRef: props.componentRef }));
 };
 //# sourceMappingURL=Camera.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,+CAA+C;AAC/C,OAAO,EAAE,sBAAsB,EAAE,+CAAmC;AACpE,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,wCAAwC,CAAC,+CAA+C;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG/D;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAStB,EAAe,EAAE;;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,wCAAwC,CAAC,+CAA+C;IACxF,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC;IAEnD,+CAA+C;IAC/C,MAAM,qBAAqB,GAAG,MAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,mBAAmB,0CAAE,YAAY,CAAC,WAAW,CAAC;IAErG,OAAO,CACL,oBAAC,YAAY,gCACA,8BAA8B,IACrC,iBAAiB,IACrB,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAC1C,MAAM,EAAE,MAAM,EACd,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAC/D,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,QAAQ,EACN,iBAAiB,CAAC,QAAQ;YAC1B,KAAK,CAAC,QAAQ;YACd,wCAAwC,CAAC,CAAC,WAAW,IAAI,CAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,MAAK,SAAS,CAAC;QAEvG,+CAA+C;QAC/C,eAAe,EACb,qBAAqB,IAAI,CAAC,qBAAqB,CAAC,SAAS;YACvD,CAAC,CAAC,GAAG,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,+BAA+B,GAAI;YAC7F,CAAC,CAAC,SAAS;QAEf,2DAA2D;QAC3D,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,YAAY,EAAE,KAAK,CAAC,YAAY,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\n/* @conditional-compile-remove(capabilities) */\nimport { _HighContrastAwareIcon } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\nimport { useAdapter } from '../../adapter/CallAdapterProvider';\nimport { IButton } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const Camera = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n  splitButtonsForDeviceSelection?: boolean;\n  disabled?: boolean;\n  /* @conditional-compile-remove(video-background-effects) */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n  componentRef?: React.RefObject<IButton>;\n  disableTooltip?: boolean;\n}): JSX.Element => {\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n  /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(rooms) */\n  const isRoomsCall = adapter.getState().isRoomsCall;\n\n  /* @conditional-compile-remove(capabilities) */\n  const turnVideoOnCapability = adapter.getState().call?.capabilitiesFeature?.capabilities.turnVideoOn;\n\n  return (\n    <CameraButton\n      data-ui-id=\"call-composite-camera-button\"\n      {...cameraButtonProps}\n      showLabel={props.displayType !== 'compact'}\n      styles={styles}\n      enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection}\n      disableTooltip={props.disableTooltip}\n      disabled={\n        cameraButtonProps.disabled ||\n        props.disabled ||\n        /* @conditional-compile-remove(rooms) */ (isRoomsCall && adapter.getState().call?.role === 'Unknown')\n      }\n      /* @conditional-compile-remove(capabilities) */\n      onRenderOffIcon={\n        turnVideoOnCapability && !turnVideoOnCapability.isPresent\n          ? () => <_HighContrastAwareIcon disabled={true} iconName={'ControlButtonCameraProhibited'} />\n          : undefined\n      }\n      /* @conditional-compile-remove(video-background-effects) */\n      onClickVideoEffects={props.onClickVideoEffects}\n      componentRef={props.componentRef}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,+CAA+C;AAC/C,OAAO,EAAE,sBAAsB,EAAE,+CAAmC;AACpE,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,wCAAwC,CAAC,+CAA+C;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG/D;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAStB,EAAe,EAAE;;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,wCAAwC,CAAC,+CAA+C;IACxF,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC;IAEnD,+CAA+C;IAC/C,MAAM,qBAAqB,GAAG,MAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,mBAAmB,0CAAE,YAAY,CAAC,WAAW,CAAC;IACrG,OAAO,oBAAC,YAAY,gCAAY,8BAA8B,IAAK,iBAAiB,IAAE,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,EAAE,wCAAwC,WAAW,IAAI,CAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,MAAK,SAAS,CAAC;QACxZ,+CAA+C,CAAC,eAAe,EAAE,qBAAqB,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,+BAA+B,GAAI,CAAC,CAAC,CAAC,SAAS;QACpO,2DAA2D,CAAC,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC;AACnJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\n/* @conditional-compile-remove(capabilities) */\nimport { _HighContrastAwareIcon } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\nimport { useAdapter } from '../../adapter/CallAdapterProvider';\nimport { IButton } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const Camera = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n  splitButtonsForDeviceSelection?: boolean;\n  disabled?: boolean;\n  /* @conditional-compile-remove(video-background-effects) */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n  componentRef?: React.RefObject<IButton>;\n  disableTooltip?: boolean;\n}): JSX.Element => {\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n  /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(rooms) */\n  const isRoomsCall = adapter.getState().isRoomsCall;\n\n  /* @conditional-compile-remove(capabilities) */\n  const turnVideoOnCapability = adapter.getState().call?.capabilitiesFeature?.capabilities.turnVideoOn;\n  return <CameraButton data-ui-id=\"call-composite-camera-button\" {...cameraButtonProps} showLabel={props.displayType !== 'compact'} styles={styles} enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection} disableTooltip={props.disableTooltip} disabled={cameraButtonProps.disabled || props.disabled || ( /* @conditional-compile-remove(rooms) */isRoomsCall && adapter.getState().call?.role === 'Unknown')}\n  /* @conditional-compile-remove(capabilities) */ onRenderOffIcon={turnVideoOnCapability && !turnVideoOnCapability.isPresent ? () => <_HighContrastAwareIcon disabled={true} iconName={'ControlButtonCameraProhibited'} /> : undefined}\n  /* @conditional-compile-remove(video-background-effects) */ onClickVideoEffects={props.onClickVideoEffects} componentRef={props.componentRef} />;\n};"]}

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

@@ -21,15 +21,9 @@ export const Devices = (props) => {
         /* @conditional-compile-remove(rooms) */
         microphones: role === 'Consumer' ? [] : devicesButtonProps.microphones, 
         /* @conditional-compile-remove(rooms) */
-        cameras: role === 'Consumer' ? [] : devicesButtonProps.cameras })), [
-        devicesButtonProps,
-        /* @conditional-compile-remove(rooms) */
-        role
-    ]);
-    const styles = useMemo(() => {
-        var _a;
-        return concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
-    }, [props.increaseFlyoutItemSize, props.styles]);
+        cameras: role === 'Consumer' ? [] : devicesButtonProps.cameras })), [devicesButtonProps, /* @conditional-compile-remove(rooms) */
+        role]);
+    const styles = useMemo(() => { var _a; return concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.increaseFlyoutItemSize, props.styles]);
     /* @conditional-compile-remove(rooms) */
     const locale = useLocale();
     /* @conditional-compile-remove(rooms) */
@@ -38,20 +32,18 @@ export const Devices = (props) => {
     const onRenderDevicesIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "OptionsSpeaker" });
     };
-    return (React.createElement(DevicesButton
-    /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
-    , Object.assign({ 
-        /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
-        persistMenu: true }, augmentedDeviceButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled, 
-        /* @conditional-compile-remove(rooms) */
-        strings: getLabelFromRole(role, locale), 
-        /* @conditional-compile-remove(rooms) */
-        onRenderIcon: onlyManageSpeakers ? onRenderDevicesIcon : undefined })));
+    return React.createElement(DevicesButton
+    /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ , Object.assign({ 
+        /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ persistMenu: true }, augmentedDeviceButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled, 
+        /* @conditional-compile-remove(rooms) */ strings: getLabelFromRole(role, locale), 
+        /* @conditional-compile-remove(rooms) */ onRenderIcon: onlyManageSpeakers ? onRenderDevicesIcon : undefined }));
 };
 /* @conditional-compile-remove(rooms) */
 const getLabelFromRole = (role, locale) => {
     if (role === 'Consumer') {
-        return { label: locale.component.strings.microphoneButton.speakerMenuTitle };
+        return {
+            label: locale.component.strings.microphoneButton.speakerMenuTitle
+        };
     }
     return undefined;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Devices.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Devices.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButtonStyles, DevicesButton } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { DevicesButtonStrings } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles, devicesButtonWithIncreasedTouchTargets } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) */\nimport { CompositeLocale, useLocale } from '../../../localization';\nimport { _HighContrastAwareIcon } from '@internal/react-components';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\n/* @conditional-compile-remove(rooms) */\nimport { useAdapter } from '../../adapter/CallAdapterProvider';\n/* @conditional-compile-remove(rooms) */\nimport { ParticipantRole } from '@azure/communication-calling';\n\n/** @private */\nexport const Devices = (props: {\n  displayType?: CallControlDisplayType;\n  increaseFlyoutItemSize?: boolean;\n  styles?: ControlBarButtonStyles;\n  disabled?: boolean;\n}): JSX.Element => {\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  /* @conditional-compile-remove(rooms) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(rooms) */\n  const role: ParticipantRole = adapter.getState().call?.role ?? 'Unknown';\n\n  const augmentedDeviceButtonProps = useMemo(\n    () => ({\n      ...devicesButtonProps,\n      /* @conditional-compile-remove(rooms) */\n      microphones: role === 'Consumer' ? [] : devicesButtonProps.microphones,\n      /* @conditional-compile-remove(rooms) */\n      cameras: role === 'Consumer' ? [] : devicesButtonProps.cameras\n    }),\n    [\n      devicesButtonProps,\n      /* @conditional-compile-remove(rooms) */\n      role\n    ]\n  );\n  const styles = useMemo(\n    () =>\n      concatButtonBaseStyles(\n        props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {},\n        props.styles ?? {}\n      ),\n    [props.increaseFlyoutItemSize, props.styles]\n  );\n  /* @conditional-compile-remove(rooms) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(rooms) */\n  const onlyManageSpeakers = role === 'Consumer';\n\n  /* @conditional-compile-remove(rooms) */\n  const onRenderDevicesIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"OptionsSpeaker\" />;\n  };\n\n  return (\n    <DevicesButton\n      /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */\n      persistMenu={true}\n      {...augmentedDeviceButtonProps}\n      showLabel={props.displayType !== 'compact'}\n      styles={styles}\n      data-ui-id=\"calling-composite-devices-button\"\n      disabled={props.disabled}\n      /* @conditional-compile-remove(rooms) */\n      strings={getLabelFromRole(role as ParticipantRole, locale)}\n      /* @conditional-compile-remove(rooms) */\n      onRenderIcon={onlyManageSpeakers ? onRenderDevicesIcon : undefined}\n    />\n  );\n};\n\n/* @conditional-compile-remove(rooms) */\nconst getLabelFromRole = (\n  role: ParticipantRole,\n  locale: CompositeLocale\n): Partial<DevicesButtonStrings> | undefined => {\n  if (role === 'Consumer') {\n    return { label: locale.component.strings.microphoneButton.speakerMenuTitle };\n  }\n  return undefined;\n};\n"]}
+{"version":3,"file":"Devices.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/buttons/Devices.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0B,aAAa,EAAE,+CAAmC;AAGnF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,sCAAsC,EAAE,MAAM,6BAA6B,CAAC;AAC7G,wCAAwC;AACxC,OAAO,EAAmB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,+CAAmC;AAEpE,wCAAwC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAI/D,eAAe;AACf,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAKvB,EAAe,EAAE;;IAChB,MAAM,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACtD,wCAAwC;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,IAAI,GAAoB,MAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,mCAAI,SAAS,CAAC;IACzE,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iCAC5C,kBAAkB;QACrB,wCAAwC;QACxC,WAAW,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,WAAW;QACtE,wCAAwC;QACxC,OAAO,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO,IAC9D,EAAE,CAAC,kBAAkB,EAAE,wCAAwC;QACjE,IAAI,CAAC,CAAC,CAAC;IACP,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACnM,wCAAwC;IACxC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,wCAAwC;IACxC,MAAM,kBAAkB,GAAG,IAAI,KAAK,UAAU,CAAC;IAE/C,wCAAwC;IACxC,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,gBAAgB,GAAG,CAAC;IACxF,CAAC,CAAC;IACF,OAAO,oBAAC,aAAa;IACrB,8HAA8H;QAA9H,8HAA8H,CAAC,WAAW,EAAE,IAAI,IAAM,0BAA0B,IAAE,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAAE,MAAM,EAAE,MAAM,gBAAa,kCAAkC,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACpT,wCAAwC,CAAC,OAAO,EAAE,gBAAgB,CAAE,IAAwB,EAAE,MAAM,CAAC;QACrG,wCAAwC,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC;AAClH,CAAC,CAAC;AAEF,wCAAwC;AACxC,MAAM,gBAAgB,GAAG,CAAC,IAAqB,EAAE,MAAuB,EAA6C,EAAE;IACrH,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,OAAO;YACL,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,gBAAgB;SAClE,CAAC;IACJ,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButtonStyles, DevicesButton } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { DevicesButtonStrings } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles, devicesButtonWithIncreasedTouchTargets } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) */\nimport { CompositeLocale, useLocale } from '../../../localization';\nimport { _HighContrastAwareIcon } from '@internal/react-components';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\n/* @conditional-compile-remove(rooms) */\nimport { useAdapter } from '../../adapter/CallAdapterProvider';\n/* @conditional-compile-remove(rooms) */\nimport { ParticipantRole } from '@azure/communication-calling';\n\n/** @private */\nexport const Devices = (props: {\n  displayType?: CallControlDisplayType;\n  increaseFlyoutItemSize?: boolean;\n  styles?: ControlBarButtonStyles;\n  disabled?: boolean;\n}): JSX.Element => {\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  /* @conditional-compile-remove(rooms) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(rooms) */\n  const role: ParticipantRole = adapter.getState().call?.role ?? 'Unknown';\n  const augmentedDeviceButtonProps = useMemo(() => ({\n    ...devicesButtonProps,\n    /* @conditional-compile-remove(rooms) */\n    microphones: role === 'Consumer' ? [] : devicesButtonProps.microphones,\n    /* @conditional-compile-remove(rooms) */\n    cameras: role === 'Consumer' ? [] : devicesButtonProps.cameras\n  }), [devicesButtonProps, /* @conditional-compile-remove(rooms) */\n  role]);\n  const styles = useMemo(() => concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, props.styles ?? {}), [props.increaseFlyoutItemSize, props.styles]);\n  /* @conditional-compile-remove(rooms) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(rooms) */\n  const onlyManageSpeakers = role === 'Consumer';\n\n  /* @conditional-compile-remove(rooms) */\n  const onRenderDevicesIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"OptionsSpeaker\" />;\n  };\n  return <DevicesButton\n  /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ persistMenu={true} {...augmentedDeviceButtonProps} showLabel={props.displayType !== 'compact'} styles={styles} data-ui-id=\"calling-composite-devices-button\" disabled={props.disabled}\n  /* @conditional-compile-remove(rooms) */ strings={getLabelFromRole((role as ParticipantRole), locale)}\n  /* @conditional-compile-remove(rooms) */ onRenderIcon={onlyManageSpeakers ? onRenderDevicesIcon : undefined} />;\n};\n\n/* @conditional-compile-remove(rooms) */\nconst getLabelFromRole = (role: ParticipantRole, locale: CompositeLocale): Partial<DevicesButtonStrings> | undefined => {\n  if (role === 'Consumer') {\n    return {\n      label: locale.component.strings.microphoneButton.speakerMenuTitle\n    };\n  }\n  return undefined;\n};"]}