@azure/communication-react 1.11.1-alpha-202401170012 → 1.12.0

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

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

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

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

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

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

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

@@ -24,21 +24,19 @@ export const PeopleAndChatHeader = (props) => {
                 fontSize: theme.fonts.medium.fontSize,
                 fontWeight: theme.fonts.medium.fontWeight
             }
-        }, haveMultipleTabs
-            ? {
-                rootChecked: {
-                    borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
-                }
+        }, haveMultipleTabs ? {
+            rootChecked: {
+                borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
             }
-            : {});
+        } : {});
     }, [theme, haveMultipleTabs]);
-    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
         React.createElement(Stack.Item, { grow: true, role: "tablist" },
             React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, className: mergeStyles(availableSpaceStyles.root) },
                 React.createElement(Stack, { horizontal: true, styles: availableSpaceStyles },
-                    React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
-                    React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel)))))),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
+                    React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel)),
+                    React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))))),
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
 };
 //# sourceMappingURL=TabHeader.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -24,7 +24,6 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ParticipantItemOptionsHovered: JSX.Element;
     SendBoxSend: JSX.Element;
     SendBoxSendHovered: JSX.Element;
-    SendBoxAttachFile?: JSX.Element | undefined;
     ControlBarPeopleButton?: JSX.Element | undefined;
     ControlButtonCameraOff: JSX.Element;
     ControlButtonCameraOn: JSX.Element;
@@ -40,9 +39,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ControlButtonRaiseHand: JSX.Element;
     ControlButtonLowerHand: JSX.Element;
     RaiseHandContextualMenuItem: JSX.Element;
-    ReactionContextualMenuItem?: JSX.Element | undefined;
     LowerHandContextualMenuItem: JSX.Element;
-    ReactionButtonIcon: JSX.Element;
     ErrorBarCallCameraAccessDenied: JSX.Element;
     ErrorBarCallCameraAlreadyInUse: JSX.Element;
     ErrorBarCallLocalVideoFreeze: JSX.Element;
@@ -81,9 +78,6 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ParticipantItemScreenShareStart: JSX.Element;
     VideoTileMicOff: JSX.Element;
     LocalCameraSwitch?: JSX.Element | undefined;
-    PeoplePaneAddPerson?: JSX.Element | undefined;
-    PeoplePaneOpenDialpad?: JSX.Element | undefined;
-    DialpadStartCall?: JSX.Element | undefined;
     NoticePageInviteToRoomRemoved?: JSX.Element | undefined;
     BlurVideoBackground?: JSX.Element | undefined;
     RemoveVideoBackgroundEffect?: JSX.Element | undefined;
@@ -104,25 +98,11 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     MoreDrawerSelectedMicrophone?: JSX.Element | undefined;
     MoreDrawerSelectedSpeaker?: JSX.Element | undefined;
     MoreDrawerSpeakers?: JSX.Element | undefined;
+    SendBoxAttachFile?: JSX.Element | undefined;
     ChatMessageOptions: React.JSX.Element;
-    ControlButtonParticipantsContextualMenuItem: React.JSX.Element;
-    CancelFileUpload: React.JSX.Element;
-    DownloadFile: React.JSX.Element;
-    DataLossPreventionProhibited: React.JSX.Element;
     ErrorBarCallVideoRecoveredBySystem: React.JSX.Element;
     ErrorBarCallVideoStoppedBySystem: React.JSX.Element;
     MessageResend: React.JSX.Element;
-    HoldCallContextualMenuItem: React.JSX.Element;
-    HoldCallButton: React.JSX.Element;
-    ResumeCall: React.JSX.Element;
-    DialpadBackspace: React.JSX.Element;
-    SitePermissionsSparkle: React.JSX.Element;
-    SitePermissionCamera: React.JSX.Element;
-    SitePermissionMic: React.JSX.Element;
-    SitePermissionCameraDenied: React.JSX.Element;
-    SitePermissionMicDenied: React.JSX.Element;
-    UnsupportedEnvironmentWarning: React.JSX.Element;
-    BrowserPermissionDeniedError: React.JSX.Element;
     VideoTilePinned: React.JSX.Element;
     VideoTileMoreOptions: React.JSX.Element;
     VideoTileScaleFit: React.JSX.Element;
@@ -145,8 +125,6 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ContextMenuCameraIcon: React.JSX.Element;
     ContextMenuMicIcon: React.JSX.Element;
     ContextMenuSpeakerIcon: React.JSX.Element;
-    SurveyStarIcon: React.JSX.Element;
-    SurveyStarIconFilled: React.JSX.Element;
 };
 /** @private */
 export type CompositeIconProps<Icons> = IIconProps & {
@@ -170,7 +148,6 @@ export type ChatCompositeIcons = {
     ParticipantItemOptionsHovered?: JSX.Element;
     SendBoxSend?: JSX.Element;
     SendBoxSendHovered?: JSX.Element;
-    SendBoxAttachFile?: JSX.Element;
 };
 /**
  * Icon wrapper to use when including customizable icons inside the ChatComposite.
@@ -201,9 +178,7 @@ export type CallCompositeIcons = {
     ControlButtonRaiseHand?: JSX.Element;
     ControlButtonLowerHand?: JSX.Element;
     RaiseHandContextualMenuItem?: JSX.Element;
-    ReactionContextualMenuItem?: JSX.Element;
     LowerHandContextualMenuItem?: JSX.Element;
-    ReactionButtonIcon?: JSX.Element;
     ErrorBarCallCameraAccessDenied?: JSX.Element;
     ErrorBarCallCameraAlreadyInUse?: JSX.Element;
     ErrorBarCallLocalVideoFreeze?: JSX.Element;
@@ -244,9 +219,6 @@ export type CallCompositeIcons = {
     ParticipantItemScreenShareStart?: JSX.Element;
     VideoTileMicOff?: JSX.Element;
     LocalCameraSwitch?: JSX.Element;
-    PeoplePaneAddPerson?: JSX.Element;
-    PeoplePaneOpenDialpad?: JSX.Element;
-    DialpadStartCall?: JSX.Element;
     NoticePageInviteToRoomRemoved?: JSX.Element;
     BlurVideoBackground?: JSX.Element;
     RemoveVideoBackgroundEffect?: JSX.Element;
@@ -326,9 +298,6 @@ export type CallWithChatCompositeIcons = {
     ParticipantItemScreenShareStart?: JSX.Element;
     VideoTileMicOff?: JSX.Element;
     LocalCameraSwitch?: JSX.Element;
-    PeoplePaneAddPerson?: JSX.Element;
-    PeoplePaneOpenDialpad?: JSX.Element;
-    DialpadStartCall?: JSX.Element;
     DefaultCustomButton?: JSX.Element;
     EditBoxCancel?: JSX.Element;
     EditBoxSubmit?: JSX.Element;

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

@@ -5,14 +5,10 @@ import { CallEnd20Filled, CallMissed20Filled, CameraSwitch24Regular, Chat20Fille
 import { MicProhibited20Filled, VideoProhibited20Filled } from '@fluentui/react-icons';
 /* @conditional-compile-remove(gallery-layouts) */
 import { Grid20Regular } from '@fluentui/react-icons';
-/* @conditional-compile-remove(PSTN-calls) */
-import { PersonAdd20Regular, Dialpad20Regular, Call20Regular } from '@fluentui/react-icons';
 import { DEFAULT_COMPONENT_ICONS } from "../../../../react-components/src";
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { FontIcon, Spinner, SpinnerSize } from '@fluentui/react';
-/* @conditional-compile-remove(file-sharing) */
-import { Attach20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(video-background-effects) */
 import { VideoBackgroundEffect20Regular, VideoPerson20Filled } from '@fluentui/react-icons';
 /* @conditional-compile-remove(gallery-layouts) */
@@ -60,14 +56,6 @@ export const COMPOSITE_ONLY_ICONS = {
     /* @conditional-compile-remove(calling-sounds) */
     NoticePageCallRejected: React.createElement(Info20Filled, null),
     NoticePageCallTimeout: React.createElement(Info20Filled, null),
-    /* @conditional-compile-remove(file-sharing) */
-    SendBoxAttachFile: React.createElement(Attach20Regular, null),
-    /* @conditional-compile-remove(PSTN-calls) */
-    PeoplePaneAddPerson: React.createElement(PersonAdd20Regular, null),
-    /* @conditional-compile-remove(PSTN-calls) */
-    PeoplePaneOpenDialpad: React.createElement(Dialpad20Regular, null),
-    /* @conditional-compile-remove(PSTN-calls) */
-    DialpadStartCall: React.createElement(Call20Regular, null),
     /* @conditional-compile-remove(rooms) */
     NoticePageInviteToRoomRemoved: React.createElement(Info20Filled, null),
     /* @conditional-compile-remove(video-background-effects) */
@@ -104,7 +92,7 @@ export const DEFAULT_COMPOSITE_ICONS = Object.assign(Object.assign({}, DEFAULT_C
  *
  * @private
  */
-export const ChatCompositeIcon = (props) => (React.createElement(FontIcon, Object.assign({}, props)));
+export const ChatCompositeIcon = (props) => React.createElement(FontIcon, Object.assign({}, props));
 /**
  * Icon wrapper to use when including customizable icons inside the CallComposite.
  * This wrapper ensures the icon name is being type-checked helping ensure no typos
@@ -112,7 +100,7 @@ export const ChatCompositeIcon = (props) => (React.createElement(FontIcon, Objec
  *
  * @private
  */
-export const CallCompositeIcon = (props) => (React.createElement(FontIcon, Object.assign({}, props)));
+export const CallCompositeIcon = (props) => React.createElement(FontIcon, Object.assign({}, props));
 /**
  * Icon wrapper to use when including customizable icons inside the CallWithChatComposite.
  * This wrapper ensures the icon name is being type-checked helping ensure no typos
@@ -120,5 +108,5 @@ export const CallCompositeIcon = (props) => (React.createElement(FontIcon, Objec
  *
  * @private
  */
-export const CallWithChatCompositeIcon = (props) => (React.createElement(FontIcon, Object.assign({}, props)));
+export const CallWithChatCompositeIcon = (props) => React.createElement(FontIcon, Object.assign({}, props));
 //# sourceMappingURL=icons.js.map