@azure/communication-react 1.23.0 → 1.24.0-alpha-202501282341

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

@@ -1 +1 @@
-{"version":3,"file":"PeoplePaneContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/PeoplePaneContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps, 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 { CallCompositeStrings } from '../CallComposite';\nimport { AddPeopleButton } from './AddPeopleButton';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions, ParticipantRole } 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: (drawerMenuItems: _DrawerMenuItemProps[]) => void;\n  setParticipantActioned?: (userId: string) => void;\n  mobileView?: boolean;\n  participantListHeadingMoreButtonProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n  role: ParticipantRole | undefined;\n  alternateCallerId: string | undefined;\n}): JSX.Element => {\n  const {\n    inviteLink,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    setParticipantActioned,\n    participantListHeadingMoreButtonProps\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.call;\n  };\n  const strings = getStrings();\n  const removeParticipantFromCall = useCallback(async (participantId: string): Promise<void> => {\n    await adapter.removeParticipant(participantId);\n  }, [adapter]);\n  const addParticipantToCall = useCallback(async (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void> => {\n    await adapter.addParticipant(participant, options);\n  }, [adapter]);\n  const participantListDefaultProps = usePropsFor(ParticipantList);\n  const removeButtonAllowed = canRemoveParticipants(props.role);\n  const setDrawerMenuItemsForParticipant: (participant?: ParticipantListParticipant) => void = useMemo(() => {\n    return (participant?: ParticipantListParticipant) => {\n      if (participant) {\n        setParticipantActioned?.(participant.userId);\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, setParticipantActioned]);\n  const setDrawerMenuItemsForParticipantListHeadingMoreButton = useMemo(() => {\n    const drawerMenuItems = participantListHeadingMoreButtonProps?.items.map((contextualMenu: IContextualMenuItem) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([])));\n    return drawerMenuItems && drawerMenuItems.length > 0 ? () => setDrawerMenuItems(drawerMenuItems) : undefined;\n  }, [participantListHeadingMoreButtonProps?.items, 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 : onFetchParticipantMenuItems} title={strings.peoplePaneSubTitle} headingMoreButtonAriaLabel={localeStrings.strings.call.peoplePaneMoreButtonAriaLabel} onClickHeadingMoreButton={props.mobileView ? setDrawerMenuItemsForParticipantListHeadingMoreButton : undefined} headingMoreButtonMenuProps={props.participantListHeadingMoreButtonProps} pinnedParticipants={props.pinnedParticipants} />;\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} onAddParticipant={addParticipantToCall} alternateCallerId={props.alternateCallerId} />\n      </Stack>;\n  }\n  return <AddPeopleButton inviteLink={inviteLink} mobileView={props.mobileView} participantList={participantList} strings={strings} onAddParticipant={addParticipantToCall} alternateCallerId={props.alternateCallerId} />;\n};\n\n/**\n * Create default contextual menu items for particant\n * @param participant - participant to create contextual menu items for\n * @param strings - localized strings for menu item text\n * @param onRemoveParticipant - callback to remove participant\n * @param localParticipantUserId - Local participant user id\n * @returns - IContextualMenuItem[]\n */\nconst createDefaultContextualMenuItems = (participant: ParticipantListParticipant, strings: CallWithChatCompositeStrings | CallCompositeStrings, onRemoveParticipant?: (userId: string) => Promise<void>, localParticipantUserId?: string): IContextualMenuItem[] => {\n  const menuItems: IContextualMenuItem[] = [];\n  if (onRemoveParticipant && participant?.userId !== localParticipantUserId) {\n    menuItems.push({\n      key: 'remove',\n      text: strings.removeMenuLabel,\n      onClick: () => {\n        if (participant?.userId) {\n          onRemoveParticipant?.(participant?.userId);\n        }\n      },\n      iconProps: {\n        iconName: 'ContextMenuRemoveParticipant',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      'data-ui-id': 'participant-list-remove-participant-button'\n    });\n  }\n  return menuItems;\n};\nconst canRemoveParticipants = (role: ParticipantRole | undefined): boolean => {\n  // TODO: We should be using the removeParticipant capability here but there is an SDK bug for Rooms where a\n  // Presenter's removeParticipant capability is {isPresent: false, reason: 'CapabilityNotApplicableForTheCallType'}.\n  // But a Presenter in Rooms should be able to remove participants according to the following documentation\n  // https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#predefined-participant-roles-and-permissions\n  const canRemove = role === 'Presenter' || role === 'Unknown' || role === undefined;\n  return canRemove;\n};"]}
+{"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, IContextualMenuProps, 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';\nimport { CallCompositeStrings } from '../CallComposite';\nimport { AddPeopleButton } from './AddPeopleButton';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions, ParticipantRole } 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: (drawerMenuItems: _DrawerMenuItemProps[]) => void;\n  setParticipantActioned?: (userId: string) => void;\n  mobileView?: boolean;\n  participantListHeadingMoreButtonProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n  role: ParticipantRole | undefined;\n  alternateCallerId: string | undefined;\n}): JSX.Element => {\n  const {\n    inviteLink,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    setParticipantActioned,\n    participantListHeadingMoreButtonProps\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.call;\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  const addParticipantToCall = useCallback(\n    async (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void> => {\n      await adapter.addParticipant(participant, options);\n    },\n    [adapter]\n  );\n\n  const participantListDefaultProps = usePropsFor(ParticipantList);\n  const removeButtonAllowed = canRemoveParticipants(props.role);\n  const setDrawerMenuItemsForParticipant: (participant?: ParticipantListParticipant) => void = useMemo(() => {\n    return (participant?: ParticipantListParticipant) => {\n      if (participant) {\n        setParticipantActioned?.(participant.userId);\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    setParticipantActioned\n  ]);\n\n  const setDrawerMenuItemsForParticipantListHeadingMoreButton = useMemo(() => {\n    const drawerMenuItems = participantListHeadingMoreButtonProps?.items.map((contextualMenu: IContextualMenuItem) =>\n      convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([]))\n    );\n    return drawerMenuItems && drawerMenuItems.length > 0 ? () => setDrawerMenuItems(drawerMenuItems) : undefined;\n  }, [participantListHeadingMoreButtonProps?.items, setDrawerMenuItems]);\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 : onFetchParticipantMenuItems}\n      title={strings.peoplePaneSubTitle}\n      headingMoreButtonAriaLabel={localeStrings.strings.call.peoplePaneMoreButtonAriaLabel}\n      onClickHeadingMoreButton={props.mobileView ? setDrawerMenuItemsForParticipantListHeadingMoreButton : undefined}\n      headingMoreButtonMenuProps={props.participantListHeadingMoreButtonProps}\n      pinnedParticipants={props.pinnedParticipants}\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          onAddParticipant={addParticipantToCall}\n          alternateCallerId={props.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      onAddParticipant={addParticipantToCall}\n      alternateCallerId={props.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: CallWithChatCompositeStrings | 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: 'ContextMenuRemoveParticipant',\n        styles: { root: { lineHeight: 0 } }\n      },\n      'data-ui-id': 'participant-list-remove-participant-button'\n    });\n  }\n  return menuItems;\n};\n\nconst canRemoveParticipants = (role: ParticipantRole | undefined): boolean => {\n  // TODO: We should be using the removeParticipant capability here but there is an SDK bug for Rooms where a\n  // Presenter's removeParticipant capability is {isPresent: false, reason: 'CapabilityNotApplicableForTheCallType'}.\n  // But a Presenter in Rooms should be able to remove participants according to the following documentation\n  // https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#predefined-participant-roles-and-permissions\n  const canRemove = role === 'Presenter' || role === 'Unknown' || role === undefined;\n  return canRemove;\n};\n"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { RichTextSendBoxProps } from "../../../../react-components/src";
+/**
+ * @private
+ *
+ * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox
+ * before lazyLoading is done
+ */
+export declare const RichTextSendBoxWrapper: (props: RichTextSendBoxProps) => JSX.Element;
+//# sourceMappingURL=RichTextSendBoxWrapper.d.ts.map

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

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+import React from 'react';
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+import { usePropsFor } from '../ChatComposite/hooks/usePropsFor';
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+import { RichTextSendBox } from "../../../../react-components/src";
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+/**
+ * @private
+ *
+ * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox
+ * before lazyLoading is done
+ */
+export const RichTextSendBoxWrapper = (props) => {
+    const richTextSendBoxProps = usePropsFor(RichTextSendBox);
+    return React.createElement(RichTextSendBox, Object.assign({}, richTextSendBoxProps, props));
+};
+//# sourceMappingURL=RichTextSendBoxWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextSendBoxWrapper.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/RichTextSendBoxWrapper.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,qEAAqE;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,qEAAqE;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,qEAAqE;AACrE,OAAO,EAAE,eAAe,EAAwB,yCAAmC;AAEnF,qEAAqE;AACrE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAA2B,EAAe,EAAE;IACjF,MAAM,oBAAoB,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAE1D,OAAO,oBAAC,eAAe,oBAAK,oBAAoB,EAAM,KAAK,EAAI,CAAC;AAClE,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\nimport React from 'react';\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\nimport { usePropsFor } from '../ChatComposite/hooks/usePropsFor';\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\nimport { RichTextSendBox, RichTextSendBoxProps } from '@internal/react-components';\n\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\n/**\n * @private\n *\n * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox\n * before lazyLoading is done\n */\nexport const RichTextSendBoxWrapper = (props: RichTextSendBoxProps): JSX.Element => {\n  const richTextSendBoxProps = usePropsFor(RichTextSendBox);\n\n  return <RichTextSendBox {...richTextSendBoxProps} {...props} />;\n};\n"]}

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

@@ -1,12 +1,58 @@
-/// <reference types="react" />
+import React from 'react';
 import { SendBoxStylesProps } from "../../../../react-components/src";
+import { RichTextSendBoxProps, RichTextEditorOptions } from "../../../../react-components/src";
+import { AttachmentMetadataInProgress, MessageOptions } from "../../../../acs-ui-common/src";
+/**
+ * @private
+ * Use this function to load RoosterJS dependencies early in the lifecycle.
+ * It should be the same import as used for lazy loading.
+ *
+/* @conditional-compile-remove(rich-text-editor-composite-support)
+ */
+export declare const loadRichTextSendBox: () => Promise<{
+    default: React.ComponentType<RichTextSendBoxProps>;
+}>;
+/**
+ * Options for the rich text editor send box configuration.
+ *
+ * @internal
+ */
+export interface RichTextSendBoxOptions extends RichTextEditorOptions {
+    /**
+     * Optional callback to handle an inline image that's inserted in the rich text editor.
+     * When not provided, pasting images into rich text editor will be disabled.
+     * @param imageAttributes - attributes of the image such as id, src, style, etc.
+     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']
+     */
+    onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;
+    /**
+     * Optional callback invoked after inline image is removed from the UI.
+     * @param imageAttributes - attributes of the image such as id, src, style, etc.
+     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].
+     *        Note that if the src attribute is a local blob url, it has been revoked at this point.
+     */
+    onRemoveInlineImage?: (imageAttributes: Record<string, string>) => void;
+    /**
+     * Optional Array of type {@link AttachmentMetadataInProgress}
+     * to render the errorBar for inline images inserted in the RichTextSendBox when:
+     *   - there is an error provided in the inlineImagesWithProgress
+     *   - progress is less than 1 when the send button is clicked
+     *   - content html string is longer than the max allowed length.
+     *     (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html
+     *     when calculating the content length, only for the purpose of displaying the content length overflow error.)
+     */
+    inlineImagesWithProgress?: AttachmentMetadataInProgress[];
+}
 /**
  * @private
  */
 export type SendBoxPickerProps = {
     styles?: SendBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
-    onSendMessage: (content: string) => Promise<void>;
+    onSendMessage: (content: string, options?: MessageOptions) => Promise<void>;
+    richTextEditorOptions?: RichTextSendBoxOptions;
+    attachments?: AttachmentMetadataInProgress[];
+    onCancelAttachmentUpload?: (attachmentId: string) => void;
 };
 /**
  * @private

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

@@ -3,11 +3,50 @@
 import React, { useMemo } from 'react';
 import { SendBox } from "../../../../react-components/src";
 import { usePropsFor } from '../ChatComposite/hooks/usePropsFor';
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+import { Suspense } from 'react';
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+import { _ErrorBoundary } from "../../../../react-components/src";
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+/**
+ * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
+ */
+const RichTextSendBoxWrapper = React.lazy(() => import('./RichTextSendBoxWrapper').then((module) => ({ default: module.RichTextSendBoxWrapper })));
+/**
+ * @private
+ * Use this function to load RoosterJS dependencies early in the lifecycle.
+ * It should be the same import as used for lazy loading.
+ *
+/* @conditional-compile-remove(rich-text-editor-composite-support)
+ */
+export const loadRichTextSendBox = () => import('./RichTextSendBoxWrapper').then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
 export const SendBoxPicker = (props) => {
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    const { richTextEditorOptions } = props;
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const { onPaste, onInsertInlineImage, inlineImagesWithProgress, onRemoveInlineImage } = richTextEditorOptions || {};
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    const isRichTextEditorEnabled = useMemo(() => {
+        return richTextEditorOptions !== undefined;
+    }, [richTextEditorOptions]);
     const sendBox = useMemo(() => React.createElement(SendBoxWrapper, Object.assign({}, props)), [props]);
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    if (isRichTextEditorEnabled) {
+        return (React.createElement(_ErrorBoundary, { fallback: sendBox },
+            React.createElement(Suspense, { fallback: sendBox },
+                React.createElement(RichTextSendBoxWrapper, Object.assign({}, props, { 
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    onPaste: onPaste, 
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    onInsertInlineImage: onInsertInlineImage, 
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    inlineImagesWithProgress: inlineImagesWithProgress, 
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    onRemoveInlineImage: onRemoveInlineImage })))));
+    }
     return sendBox;
 };
 // Move SendBox initialization to a separate component as otherwise it will cause re-render for Suspense and _ErrorBoundary when props and sendBoxProps are updated

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/SendBoxPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,EAAsB,yCAAmC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAUjE;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAC,cAAc,oBAAK,KAAK,EAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACtE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,mKAAmK;AACnK,MAAM,cAAc,GAAG,CAAC,KAAyB,EAAe,EAAE;IAChE,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,oBAAC,OAAO,oBAAK,YAAY,EAAM,KAAK,EAAI,CAAC;AAClD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { SendBox, SendBoxStylesProps } from '@internal/react-components';\nimport { usePropsFor } from '../ChatComposite/hooks/usePropsFor';\n/**\n * @private\n */\nexport type SendBoxPickerProps = {\n  styles?: SendBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  onSendMessage: (content: string) => Promise<void>;\n};\n\n/**\n * @private\n */\nexport const SendBoxPicker = (props: SendBoxPickerProps): JSX.Element => {\n  const sendBox = useMemo(() => <SendBoxWrapper {...props} />, [props]);\n  return sendBox;\n};\n\n// Move SendBox initialization to a separate component as otherwise it will cause re-render for Suspense and _ErrorBoundary when props and sendBoxProps are updated\nconst SendBoxWrapper = (props: SendBoxPickerProps): JSX.Element => {\n  const sendBoxProps = usePropsFor(SendBox);\n  return <SendBox {...sendBoxProps} {...props} />;\n};"]}
+{"version":3,"file":"SendBoxPicker.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendBoxPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,EAAsB,yCAAmC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,qEAAqE;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,qEAAqE;AACrE,OAAO,EAAE,cAAc,EAA+C,yCAAmC;AAIzG,qEAAqE;AACrE;;GAEG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAC7C,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAClG,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAEhC,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC;AAuDxG;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,qEAAqE;IACrE,MAAM,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC;IACxC,gEAAgE;IAChE,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,GAAG,qBAAqB,IAAI,EAAE,CAAC;IAEpH,qEAAqE;IACrE,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3C,OAAO,qBAAqB,KAAK,SAAS,CAAC;IAC7C,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAC,cAAc,oBAAK,KAAK,EAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEtE,qEAAqE;IACrE,IAAI,uBAAuB,EAAE,CAAC;QAC5B,OAAO,CACL,oBAAC,cAAc,IAAC,QAAQ,EAAE,OAAO;YAC/B,oBAAC,QAAQ,IAAC,QAAQ,EAAE,OAAO;gBACzB,oBAAC,sBAAsB,oBACjB,KAAK;oBACT,gEAAgE;oBAChE,OAAO,EAAE,OAAO;oBAChB,gEAAgE;oBAChE,mBAAmB,EAAE,mBAAmB;oBACxC,gEAAgE;oBAChE,wBAAwB,EAAE,wBAAwB;oBAClD,gEAAgE;oBAChE,mBAAmB,EAAE,mBAAmB,IACxC,CACO,CACI,CAClB,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,mKAAmK;AACnK,MAAM,cAAc,GAAG,CAAC,KAAyB,EAAe,EAAE;IAChE,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAE1C,OAAO,oBAAC,OAAO,oBAAK,YAAY,EAAM,KAAK,EAAI,CAAC;AAClD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { SendBox, SendBoxStylesProps } from '@internal/react-components';\nimport { usePropsFor } from '../ChatComposite/hooks/usePropsFor';\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\nimport { Suspense } from 'react';\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\nimport { _ErrorBoundary, RichTextSendBoxProps, RichTextEditorOptions } from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\n/**\n * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading\n */\nconst RichTextSendBoxWrapper = React.lazy(() =>\n  import('./RichTextSendBoxWrapper').then((module) => ({ default: module.RichTextSendBoxWrapper }))\n);\n\n/**\n * @private\n * Use this function to load RoosterJS dependencies early in the lifecycle.\n * It should be the same import as used for lazy loading.\n *\n/* @conditional-compile-remove(rich-text-editor-composite-support)\n */\nexport const loadRichTextSendBox = (): Promise<{\n  default: React.ComponentType<RichTextSendBoxProps>;\n}> => import('./RichTextSendBoxWrapper').then((module) => ({ default: module.RichTextSendBoxWrapper }));\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * Options for the rich text editor send box configuration.\n *\n * @internal\n */\nexport interface RichTextSendBoxOptions extends RichTextEditorOptions {\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback to handle an inline image that's inserted in the rich text editor.\n   * When not provided, pasting images into rich text editor will be disabled.\n   * @param imageAttributes - attributes of the image such as id, src, style, etc.\n   *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']\n   */\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional callback invoked after inline image is removed from the UI.\n   * @param imageAttributes - attributes of the image such as id, src, style, etc.\n   *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].\n   *        Note that if the src attribute is a local blob url, it has been revoked at this point.\n   */\n  onRemoveInlineImage?: (imageAttributes: Record<string, string>) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  /**\n   * Optional Array of type {@link AttachmentMetadataInProgress}\n   * to render the errorBar for inline images inserted in the RichTextSendBox when:\n   *   - there is an error provided in the inlineImagesWithProgress\n   *   - progress is less than 1 when the send button is clicked\n   *   - content html string is longer than the max allowed length.\n   *     (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html\n   *     when calculating the content length, only for the purpose of displaying the content length overflow error.)\n   */\n  inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n}\n/**\n * @private\n */\nexport type SendBoxPickerProps = {\n  styles?: SendBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  onSendMessage: (\n    content: string,\n    /* @conditional-compile-remove(file-sharing-acs) */ options?: MessageOptions\n  ) => Promise<void>;\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  richTextEditorOptions?: RichTextSendBoxOptions;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  attachments?: AttachmentMetadataInProgress[];\n  /* @conditional-compile-remove(file-sharing-acs) */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n};\n\n/**\n * @private\n */\nexport const SendBoxPicker = (props: SendBoxPickerProps): JSX.Element => {\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  const { richTextEditorOptions } = props;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const { onPaste, onInsertInlineImage, inlineImagesWithProgress, onRemoveInlineImage } = richTextEditorOptions || {};\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  const isRichTextEditorEnabled = useMemo(() => {\n    return richTextEditorOptions !== undefined;\n  }, [richTextEditorOptions]);\n\n  const sendBox = useMemo(() => <SendBoxWrapper {...props} />, [props]);\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  if (isRichTextEditorEnabled) {\n    return (\n      <_ErrorBoundary fallback={sendBox}>\n        <Suspense fallback={sendBox}>\n          <RichTextSendBoxWrapper\n            {...props}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            onPaste={onPaste}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            onInsertInlineImage={onInsertInlineImage}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            inlineImagesWithProgress={inlineImagesWithProgress}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            onRemoveInlineImage={onRemoveInlineImage}\n          />\n        </Suspense>\n      </_ErrorBoundary>\n    );\n  }\n  return sendBox;\n};\n\n// Move SendBox initialization to a separate component as otherwise it will cause re-render for Suspense and _ErrorBoundary when props and sendBoxProps are updated\nconst SendBoxWrapper = (props: SendBoxPickerProps): JSX.Element => {\n  const sendBoxProps = usePropsFor(SendBox);\n\n  return <SendBox {...sendBoxProps} {...props} />;\n};\n"]}

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

@@ -22,15 +22,9 @@ export const SidePaneHeader = (props) => {
                 borderRadius: theme.effects.roundedCorner4
             }
         },
-        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, theme.effects.roundedCorner4]);
     const handleShiftTab = useCallback((event) => {
         var _a, _b;
@@ -42,16 +36,14 @@ export const SidePaneHeader = (props) => {
     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, "aria-label": props.headingText, "aria-level": 2 }, props.headingText),
         React.createElement(Stack.Item, null,
-            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: {
-                    iconName: 'cancel'
-                }, onClick: () => {
+            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: () => {
                     var _a, _b;
                     props.onClose();
                     (_b = (_a = props.paneOpenerButton) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
-                }, onKeyDown: handleShiftTab, componentRef: props.dismissButtonComponentRef })));
+                }, onKeyDown: handleShiftTab, componentRef: props.dismissButtonComponentRef }))));
 };
 const SidePaneMobileHeader = (props) => {
     const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;
@@ -67,10 +59,10 @@ const SidePaneMobileHeader = (props) => {
             }
         });
     }, [theme]);
-    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: dismissSidePaneButtonAriaLabel, ariaDescription: dismissSidePaneButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
         React.createElement(Stack.Item, { grow: true },
             React.createElement(DefaultButton, { checked: true, styles: mobilePaneButtonStylesThemed }, headingText)),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 //# sourceMappingURL=SidePaneHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommandBarButton, DefaultButton, IButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo, RefObject, useCallback } 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  paneOpenerButton?: RefObject<IButton>;\n  dismissButtonComponentRef?: RefObject<IButton>;\n  chatButtonPresent?: 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      '@media (forced-colors: active)': {\n        border: `0.1rem solid ${theme.palette.neutralSecondary}`,\n        borderRadius: theme.effects.roundedCorner4\n      }\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, theme.effects.roundedCorner4]);\n  const handleShiftTab = useCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === 'Tab' && event.shiftKey && !props.chatButtonPresent) {\n      props.paneOpenerButton?.current?.focus();\n      event.preventDefault();\n    }\n  }, [props.chatButtonPresent, props.paneOpenerButton]);\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} aria-label={props.headingText} aria-level={2}>\n        {props.headingText}\n      </Stack.Item>\n      <Stack.Item>\n        <CommandBarButton ariaLabel={props.dismissSidePaneButtonAriaLabel} styles={sidePaneCloseButtonStyles} iconProps={{\n        iconName: 'cancel'\n      }} onClick={() => {\n        props.onClose();\n        props.paneOpenerButton?.current?.focus();\n      }} onKeyDown={handleShiftTab} componentRef={props.dismissButtonComponentRef} />\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};"]}
+{"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, IButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo, RefObject, useCallback } 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  paneOpenerButton?: RefObject<IButton>;\n  dismissButtonComponentRef?: RefObject<IButton>;\n  chatButtonPresent?: 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        '@media (forced-colors: active)': {\n          border: `0.1rem solid ${theme.palette.neutralSecondary}`,\n          borderRadius: theme.effects.roundedCorner4\n        }\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, theme.effects.roundedCorner4]\n  );\n\n  const handleShiftTab = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Tab' && event.shiftKey && !props.chatButtonPresent) {\n        props.paneOpenerButton?.current?.focus();\n        event.preventDefault();\n      }\n    },\n    [props.chatButtonPresent, props.paneOpenerButton]\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} aria-label={props.headingText} aria-level={2}>\n        {props.headingText}\n      </Stack.Item>\n      <Stack.Item>\n        <CommandBarButton\n          ariaLabel={props.dismissSidePaneButtonAriaLabel}\n          styles={sidePaneCloseButtonStyles}\n          iconProps={{ iconName: 'cancel' }}\n          onClick={() => {\n            props.onClose();\n            props.paneOpenerButton?.current?.focus();\n          }}\n          onKeyDown={handleShiftTab}\n          componentRef={props.dismissButtonComponentRef}\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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"StarSurvey.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/StarSurvey.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAwD,yCAAmC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,eAAe;AACf,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAE1B,EAAe,EAAE;IAChB,MAAM,EACJ,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,iBAAiB,GAAuB;QAC5C,oBAAoB,EAAE,OAAO,CAAC,oBAAoB;QAClD,qBAAqB,EAAE,OAAO,CAAC,qBAAqB;QACpD,qBAAqB,EAAE,OAAO,CAAC,qBAAqB;QACpD,uBAAuB,EAAE,OAAO,CAAC,uBAAuB;QACxD,sBAAsB,EAAE,OAAO,CAAC,sBAAsB;QACtD,sBAAsB,EAAE,OAAO,CAAC,sBAAsB;QACtD,mBAAmB,EAAE,OAAO,CAAC,mBAAmB;KACjD,CAAC;IACF,OAAO,oBAAC,WAAW,IAAC,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,GAAI,CAAC;AACjG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _StarSurvey, _StarSurveyStrings, _CallSurvey, _CallSurveyResponse } from '@internal/react-components';\nimport { useLocale } from '../localization';\n\n/** @private */\nexport const StarSurvey = (props: {\n  onStarRatingSelected: (ratings: number) => void;\n}): JSX.Element => {\n  const {\n    onStarRatingSelected\n  } = props;\n  const strings = useLocale().strings.call;\n  const StarSurveyStrings: _StarSurveyStrings = {\n    starSurveyHelperText: strings.starSurveyHelperText,\n    starSurveyOneStarText: strings.starSurveyOneStarText,\n    starSurveyTwoStarText: strings.starSurveyTwoStarText,\n    starSurveyThreeStarText: strings.starSurveyThreeStarText,\n    starSurveyFourStarText: strings.starSurveyFourStarText,\n    starSurveyFiveStarText: strings.starSurveyFiveStarText,\n    starRatingAriaLabel: strings.starRatingAriaLabel\n  };\n  return <_StarSurvey strings={StarSurveyStrings} onStarRatingSelected={onStarRatingSelected} />;\n};"]}
+{"version":3,"file":"StarSurvey.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/StarSurvey.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAwD,yCAAmC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,eAAe;AACf,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA0D,EAAe,EAAE;IACpG,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,MAAM,iBAAiB,GAAuB;QAC5C,oBAAoB,EAAE,OAAO,CAAC,oBAAoB;QAClD,qBAAqB,EAAE,OAAO,CAAC,qBAAqB;QACpD,qBAAqB,EAAE,OAAO,CAAC,qBAAqB;QACpD,uBAAuB,EAAE,OAAO,CAAC,uBAAuB;QACxD,sBAAsB,EAAE,OAAO,CAAC,sBAAsB;QACtD,sBAAsB,EAAE,OAAO,CAAC,sBAAsB;QACtD,mBAAmB,EAAE,OAAO,CAAC,mBAAmB;KACjD,CAAC;IAEF,OAAO,oBAAC,WAAW,IAAC,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,GAAI,CAAC;AACjG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _StarSurvey, _StarSurveyStrings, _CallSurvey, _CallSurveyResponse } from '@internal/react-components';\nimport { useLocale } from '../localization';\n\n/** @private */\nexport const StarSurvey = (props: { onStarRatingSelected: (ratings: number) => void }): JSX.Element => {\n  const { onStarRatingSelected } = props;\n  const strings = useLocale().strings.call;\n\n  const StarSurveyStrings: _StarSurveyStrings = {\n    starSurveyHelperText: strings.starSurveyHelperText,\n    starSurveyOneStarText: strings.starSurveyOneStarText,\n    starSurveyTwoStarText: strings.starSurveyTwoStarText,\n    starSurveyThreeStarText: strings.starSurveyThreeStarText,\n    starSurveyFourStarText: strings.starSurveyFourStarText,\n    starSurveyFiveStarText: strings.starSurveyFiveStarText,\n    starRatingAriaLabel: strings.starRatingAriaLabel\n  };\n\n  return <_StarSurvey strings={StarSurveyStrings} onStarRatingSelected={onStarRatingSelected} />;\n};\n"]}

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

@@ -29,10 +29,10 @@ export const Survey = (props) => {
     const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState(false);
     const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
     const theme = useTheme();
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         showDefaultAfterSubmitScreen && React.createElement(ThankYouForFeedbackPage, { iconName: iconName }),
-        showDefaultAfterDismissedScreen && React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton }),
-        !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && React.createElement(Stack, { verticalAlign: "center", className: surveyContainerStyle(!!isMobile) },
+        showDefaultAfterDismissedScreen && (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton })),
+        !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (React.createElement(Stack, { verticalAlign: "center", className: surveyContainerStyle(!!isMobile) },
             React.createElement(Text, { className: questionTextStyle(theme) }, strings.surveyTitle),
             React.createElement(SurveyContent, { setShowSubmitFeedbackButton: (showButton) => {
                     setShowSubmitFeedbackButton(showButton);
@@ -40,14 +40,13 @@ export const Survey = (props) => {
                     setRatings(rating);
                 }, setIssuesSelected: (issuesSelected) => {
                     setIssuesSelected(issuesSelected);
-                }, setImprovementSuggestions: onSurveySubmittedCustom ? (improvementSuggestions) => {
-                    setImprovementSuggestions(improvementSuggestions);
-                } : undefined }),
+                }, setImprovementSuggestions: onSurveySubmittedCustom
+                    ? (improvementSuggestions) => {
+                        setImprovementSuggestions(improvementSuggestions);
+                    }
+                    : undefined }),
             React.createElement(Stack, { horizontal: true, horizontalAlign: "end" },
-                React.createElement(DefaultButton, { style: {
-                        marginTop: '1rem',
-                        marginRight: '0.5rem'
-                    }, onClick: () => {
+                React.createElement(DefaultButton, { style: { marginTop: '1rem', marginRight: '0.5rem' }, onClick: () => {
                         if (onSurveyClosed) {
                             onSurveyClosed('skipped');
                         }
@@ -55,26 +54,13 @@ export const Survey = (props) => {
                             setShowDefaultAfterDismissedScreen(true);
                         }
                     } }, strings.surveySkipButtonLabel),
-                showSubmitFeedbackButton && React.createElement(PrimaryButton, { disabled: submitButtonDisabled, style: {
-                        marginTop: '1rem',
-                        marginLeft: '0.5rem'
-                    }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                        const surveyResults = {
-                            overallRating: {
-                                score: ratings
-                            }
-                        };
+                showSubmitFeedbackButton && (React.createElement(PrimaryButton, { disabled: submitButtonDisabled, style: { marginTop: '1rem', marginLeft: '0.5rem' }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                        const surveyResults = { overallRating: { score: ratings } };
                         if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.overallRating) {
-                            surveyResults.overallRating = {
-                                score: ratings,
-                                issues: issuesSelected.overallRating.issues
-                            };
+                            surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };
                         }
                         if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.audioRating) {
-                            surveyResults.audioRating = {
-                                score: ratings,
-                                issues: issuesSelected.audioRating.issues
-                            };
+                            surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };
                         }
                         if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.screenshareRating) {
                             surveyResults.screenshareRating = {
@@ -83,16 +69,14 @@ export const Survey = (props) => {
                             };
                         }
                         if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.videoRating) {
-                            surveyResults.videoRating = {
-                                score: ratings,
-                                issues: issuesSelected.videoRating.issues
-                            };
+                            surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };
                         }
                         if (onSubmitSurvey) {
                             // disable submit button while waiting for the survey to submit
                             setSubmitButtonDisabled(true);
                             // submitting survey results to calling
-                            onSubmitSurvey(surveyResults).then(res => {
+                            onSubmitSurvey(surveyResults)
+                                .then((res) => {
                                 var _a, _b;
                                 // if contoso provided callback to handle their own survey data, send over the submitted survey results
                                 if (onSurveySubmittedCustom) {
@@ -111,7 +95,8 @@ export const Survey = (props) => {
                                     // if call back not provided, redirect to default screen
                                     setShowDefaultAfterSubmitScreen(true);
                                 }
-                            }).catch(e => {
+                            })
+                                .catch((e) => {
                                 // if there is an error submitting the survey, log the error in the console
                                 console.log('error when submitting survey: ' + e);
                                 // if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen
@@ -120,6 +105,6 @@ export const Survey = (props) => {
                                 }
                             });
                         }
-                    }) }, strings.surveyConfirmButtonLabel))));
+                    }) }, strings.surveyConfirmButtonLabel)))))));
 };
 //# sourceMappingURL=Survey.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Survey.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/Survey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';\nimport { Text, PrimaryButton, Stack, useTheme, DefaultButton } from '@fluentui/react';\nimport { SurveyContent } from './SurveyContent';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { CallCompositeIcons } from './icons';\nimport { NoticePage } from '../CallComposite/pages/NoticePage';\nimport { ThankYouForFeedbackPage } from '../CallComposite/pages/ThankYouForFeedbackPage';\nimport { questionTextStyle, surveyContainerStyle } from './styles/Survey.styles';\n\n/** @private */\nexport const Survey = (props: {\n  iconName?: keyof CallCompositeIcons;\n  title: string;\n  moreDetails?: string;\n  disableStartCallButton?: boolean;\n  isMobile?: boolean;\n  onSubmitSurvey?: (survey: CallSurvey) => Promise<CallSurveyResponse | undefined>;\n  /**\n   * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n   * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n   */\n  onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n  onSurveySubmittedCustom?: (callId: string, surveyId: string,\n  /**\n   * This is the survey results containing star survey data and API tag survey data.\n   * This part of the result will always be sent to the calling sdk\n   * This callback provides user with the ability to gain access to survey data\n   */\n  submittedSurvey: CallSurvey,\n  /**\n   * This is the survey results containing free form text\n   * This part of the result will not be handled by composites\n   * User will need to collect and handle this information 100% on their own\n   * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n   */\n  improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>;\n}): JSX.Element => {\n  const {\n    onSubmitSurvey,\n    onSurveySubmittedCustom,\n    onSurveyClosed,\n    iconName,\n    title,\n    moreDetails,\n    disableStartCallButton,\n    isMobile\n  } = props;\n  const strings = useLocale().strings.call;\n  const [ratings, setRatings] = useState(0);\n  const [issuesSelected, setIssuesSelected] = useState<CallSurvey | undefined>();\n  const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);\n  const [improvementSuggestions, setImprovementSuggestions] = useState<CallSurveyImprovementSuggestions>({});\n  const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = useState<boolean>(false);\n  const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState<boolean>(false);\n  const [submitButtonDisabled, setSubmitButtonDisabled] = useState<boolean>(false);\n  const theme = useTheme();\n  return <>\n      {showDefaultAfterSubmitScreen && <ThankYouForFeedbackPage iconName={iconName} />}\n      {showDefaultAfterDismissedScreen && <NoticePage iconName={iconName} title={title} moreDetails={moreDetails} dataUiId={'left-call-page'} disableStartCallButton={disableStartCallButton} />}\n      {!showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && <Stack verticalAlign=\"center\" className={surveyContainerStyle(!!isMobile)}>\n          <Text className={questionTextStyle(theme)}>{strings.surveyTitle}</Text>\n          <SurveyContent setShowSubmitFeedbackButton={(showButton: boolean) => {\n        setShowSubmitFeedbackButton(showButton);\n      }} setRatings={(rating: number) => {\n        setRatings(rating);\n      }} setIssuesSelected={(issuesSelected: CallSurvey) => {\n        setIssuesSelected(issuesSelected);\n      }} setImprovementSuggestions={onSurveySubmittedCustom ? (improvementSuggestions: CallSurveyImprovementSuggestions) => {\n        setImprovementSuggestions(improvementSuggestions);\n      } : undefined} />\n          <Stack horizontal horizontalAlign=\"end\">\n            <DefaultButton style={{\n          marginTop: '1rem',\n          marginRight: '0.5rem'\n        }} onClick={() => {\n          if (onSurveyClosed) {\n            onSurveyClosed('skipped');\n          } else {\n            setShowDefaultAfterDismissedScreen(true);\n          }\n        }}>\n              {strings.surveySkipButtonLabel}\n            </DefaultButton>\n\n            {showSubmitFeedbackButton && <PrimaryButton disabled={submitButtonDisabled} style={{\n          marginTop: '1rem',\n          marginLeft: '0.5rem'\n        }} onClick={async () => {\n          const surveyResults: CallSurvey = {\n            overallRating: {\n              score: ratings\n            }\n          };\n          if (issuesSelected?.overallRating) {\n            surveyResults.overallRating = {\n              score: ratings,\n              issues: issuesSelected.overallRating.issues\n            };\n          }\n          if (issuesSelected?.audioRating) {\n            surveyResults.audioRating = {\n              score: ratings,\n              issues: issuesSelected.audioRating.issues\n            };\n          }\n          if (issuesSelected?.screenshareRating) {\n            surveyResults.screenshareRating = {\n              score: ratings,\n              issues: issuesSelected.screenshareRating.issues\n            };\n          }\n          if (issuesSelected?.videoRating) {\n            surveyResults.videoRating = {\n              score: ratings,\n              issues: issuesSelected.videoRating.issues\n            };\n          }\n          if (onSubmitSurvey) {\n            // disable submit button while waiting for the survey to submit\n            setSubmitButtonDisabled(true);\n            // submitting survey results to calling\n            onSubmitSurvey(surveyResults).then(res => {\n              // if contoso provided callback to handle their own survey data, send over the submitted survey results\n              if (onSurveySubmittedCustom) {\n                onSurveySubmittedCustom(res?.callId ?? '', res?.id ?? '', surveyResults, improvementSuggestions).then(() => setSubmitButtonDisabled(false));\n              } else {\n                // if callback is not provided, enable the submit button after survey is submitted\n                setSubmitButtonDisabled(false);\n              }\n\n              // redirect to new screen\n              if (onSurveyClosed) {\n                // redirect to new screen according to contoso's callback set up\n                onSurveyClosed('sent');\n              } else {\n                // if call back not provided, redirect to default screen\n                setShowDefaultAfterSubmitScreen(true);\n              }\n            }).catch(e => {\n              // if there is an error submitting the survey, log the error in the console\n              console.log('error when submitting survey: ' + e);\n              // if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen\n              if (onSurveyClosed) {\n                onSurveyClosed('error', e);\n              }\n            });\n          }\n        }}>\n                {strings.surveyConfirmButtonLabel}\n              </PrimaryButton>}\n          </Stack>\n        </Stack>}\n    </>;\n};"]}
+{"version":3,"file":"Survey.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/Survey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';\nimport { Text, PrimaryButton, Stack, useTheme, DefaultButton } from '@fluentui/react';\nimport { SurveyContent } from './SurveyContent';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { CallCompositeIcons } from './icons';\nimport { NoticePage } from '../CallComposite/pages/NoticePage';\nimport { ThankYouForFeedbackPage } from '../CallComposite/pages/ThankYouForFeedbackPage';\nimport { questionTextStyle, surveyContainerStyle } from './styles/Survey.styles';\n\n/** @private */\nexport const Survey = (props: {\n  iconName?: keyof CallCompositeIcons;\n  title: string;\n  moreDetails?: string;\n  disableStartCallButton?: boolean;\n  isMobile?: boolean;\n  onSubmitSurvey?: (survey: CallSurvey) => Promise<CallSurveyResponse | undefined>;\n  /**\n   * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n   * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n   */\n  onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n  onSurveySubmittedCustom?: (\n    callId: string,\n    surveyId: string,\n    /**\n     * This is the survey results containing star survey data and API tag survey data.\n     * This part of the result will always be sent to the calling sdk\n     * This callback provides user with the ability to gain access to survey data\n     */\n    submittedSurvey: CallSurvey,\n    /**\n     * This is the survey results containing free form text\n     * This part of the result will not be handled by composites\n     * User will need to collect and handle this information 100% on their own\n     * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n     */\n    improvementSuggestions: CallSurveyImprovementSuggestions\n  ) => Promise<void>;\n}): JSX.Element => {\n  const {\n    onSubmitSurvey,\n    onSurveySubmittedCustom,\n    onSurveyClosed,\n    iconName,\n    title,\n    moreDetails,\n    disableStartCallButton,\n    isMobile\n  } = props;\n  const strings = useLocale().strings.call;\n  const [ratings, setRatings] = useState(0);\n  const [issuesSelected, setIssuesSelected] = useState<CallSurvey | undefined>();\n  const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);\n  const [improvementSuggestions, setImprovementSuggestions] = useState<CallSurveyImprovementSuggestions>({});\n\n  const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = useState<boolean>(false);\n\n  const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState<boolean>(false);\n\n  const [submitButtonDisabled, setSubmitButtonDisabled] = useState<boolean>(false);\n\n  const theme = useTheme();\n\n  return (\n    <>\n      {showDefaultAfterSubmitScreen && <ThankYouForFeedbackPage iconName={iconName} />}\n      {showDefaultAfterDismissedScreen && (\n        <NoticePage\n          iconName={iconName}\n          title={title}\n          moreDetails={moreDetails}\n          dataUiId={'left-call-page'}\n          disableStartCallButton={disableStartCallButton}\n        />\n      )}\n      {!showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (\n        <Stack verticalAlign=\"center\" className={surveyContainerStyle(!!isMobile)}>\n          <Text className={questionTextStyle(theme)}>{strings.surveyTitle}</Text>\n          <SurveyContent\n            setShowSubmitFeedbackButton={(showButton: boolean) => {\n              setShowSubmitFeedbackButton(showButton);\n            }}\n            setRatings={(rating: number) => {\n              setRatings(rating);\n            }}\n            setIssuesSelected={(issuesSelected: CallSurvey) => {\n              setIssuesSelected(issuesSelected);\n            }}\n            setImprovementSuggestions={\n              onSurveySubmittedCustom\n                ? (improvementSuggestions: CallSurveyImprovementSuggestions) => {\n                    setImprovementSuggestions(improvementSuggestions);\n                  }\n                : undefined\n            }\n          />\n          <Stack horizontal horizontalAlign=\"end\">\n            <DefaultButton\n              style={{ marginTop: '1rem', marginRight: '0.5rem' }}\n              onClick={() => {\n                if (onSurveyClosed) {\n                  onSurveyClosed('skipped');\n                } else {\n                  setShowDefaultAfterDismissedScreen(true);\n                }\n              }}\n            >\n              {strings.surveySkipButtonLabel}\n            </DefaultButton>\n\n            {showSubmitFeedbackButton && (\n              <PrimaryButton\n                disabled={submitButtonDisabled}\n                style={{ marginTop: '1rem', marginLeft: '0.5rem' }}\n                onClick={async () => {\n                  const surveyResults: CallSurvey = { overallRating: { score: ratings } };\n                  if (issuesSelected?.overallRating) {\n                    surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };\n                  }\n                  if (issuesSelected?.audioRating) {\n                    surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };\n                  }\n                  if (issuesSelected?.screenshareRating) {\n                    surveyResults.screenshareRating = {\n                      score: ratings,\n                      issues: issuesSelected.screenshareRating.issues\n                    };\n                  }\n                  if (issuesSelected?.videoRating) {\n                    surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };\n                  }\n                  if (onSubmitSurvey) {\n                    // disable submit button while waiting for the survey to submit\n                    setSubmitButtonDisabled(true);\n                    // submitting survey results to calling\n                    onSubmitSurvey(surveyResults)\n                      .then((res) => {\n                        // if contoso provided callback to handle their own survey data, send over the submitted survey results\n                        if (onSurveySubmittedCustom) {\n                          onSurveySubmittedCustom(\n                            res?.callId ?? '',\n                            res?.id ?? '',\n                            surveyResults,\n                            improvementSuggestions\n                          ).then(() => setSubmitButtonDisabled(false));\n                        } else {\n                          // if callback is not provided, enable the submit button after survey is submitted\n                          setSubmitButtonDisabled(false);\n                        }\n\n                        // redirect to new screen\n                        if (onSurveyClosed) {\n                          // redirect to new screen according to contoso's callback set up\n                          onSurveyClosed('sent');\n                        } else {\n                          // if call back not provided, redirect to default screen\n                          setShowDefaultAfterSubmitScreen(true);\n                        }\n                      })\n                      .catch((e) => {\n                        // if there is an error submitting the survey, log the error in the console\n                        console.log('error when submitting survey: ' + e);\n                        // if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen\n                        if (onSurveyClosed) {\n                          onSurveyClosed('error', e);\n                        }\n                      });\n                  }\n                }}\n              >\n                {strings.surveyConfirmButtonLabel}\n              </PrimaryButton>\n            )}\n          </Stack>\n        </Stack>\n      )}\n    </>\n  );\n};\n"]}

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

@@ -27,8 +27,8 @@ export const SurveyContent = (props) => {
             props.setImprovementSuggestions(improvementSuggestions);
         }
     };
-    return React.createElement(Stack, { "data-ui-id": "call-composite-survey" },
+    return (React.createElement(Stack, { "data-ui-id": "call-composite-survey" },
         React.createElement(StarSurvey, { onStarRatingSelected: onStarRatingSelected }),
-        showTagsSurvey && React.createElement(TagsSurvey, { onConfirm: onIssuesSelected, showFreeFormTextField: !(props.setImprovementSuggestions === undefined) }));
+        showTagsSurvey && (React.createElement(TagsSurvey, { onConfirm: onIssuesSelected, showFreeFormTextField: !(props.setImprovementSuggestions === undefined) }))));
 };
 //# sourceMappingURL=SurveyContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SurveyContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/SurveyContent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAK7B,EAAe,EAAE;IAChB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAQ,EAAE;QACrD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;YAChB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;QACD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;IACF,MAAM,gBAAgB,GAAG,CAAC,YAAwB,EAAE,sBAAyD,EAAQ,EAAE;QACrH,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACtC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,sBAAsB,IAAI,KAAK,CAAC,yBAAyB,EAAE,CAAC;YAC9D,KAAK,CAAC,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,kBAAY,uBAAuB;QAC5C,oBAAC,UAAU,IAAC,oBAAoB,EAAE,oBAAoB,GAAI;QAEzD,cAAc,IAAI,oBAAC,UAAU,IAAC,SAAS,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,CAAC,CAAC,KAAK,CAAC,yBAAyB,KAAK,SAAS,CAAC,GAAI,CACjI,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { StarSurvey } from './StarSurvey';\nimport { TagsSurvey } from './TagsSurvey';\nimport { useState } from 'react';\nimport { _AudioIssue, _OverallIssue, _ScreenshareIssue, _VideoIssue, CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport { CallSurvey } from '@azure/communication-calling';\nimport { Stack } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const SurveyContent = (props: {\n  setShowSubmitFeedbackButton: (showButton: boolean) => void;\n  setRatings: (rating: number) => void;\n  setIssuesSelected: (issuesSelected: CallSurvey) => void;\n  setImprovementSuggestions?: (improvementSuggestions: CallSurveyImprovementSuggestions) => void;\n}): JSX.Element => {\n  const [showTagsSurvey, setShowTagsSurvey] = useState(false);\n  const onStarRatingSelected = (ratings: number): void => {\n    if (ratings < 5) {\n      setShowTagsSurvey(true);\n      props.setShowSubmitFeedbackButton(true);\n    } else {\n      props.setShowSubmitFeedbackButton(true);\n    }\n    props.setRatings(ratings);\n  };\n  const onIssuesSelected = (selectedTags: CallSurvey, improvementSuggestions?: CallSurveyImprovementSuggestions): void => {\n    props.setIssuesSelected(selectedTags);\n    props.setShowSubmitFeedbackButton(true);\n    if (improvementSuggestions && props.setImprovementSuggestions) {\n      props.setImprovementSuggestions(improvementSuggestions);\n    }\n  };\n  return <Stack data-ui-id=\"call-composite-survey\">\n      <StarSurvey onStarRatingSelected={onStarRatingSelected} />\n\n      {showTagsSurvey && <TagsSurvey onConfirm={onIssuesSelected} showFreeFormTextField={!(props.setImprovementSuggestions === undefined)} />}\n    </Stack>;\n};"]}
+{"version":3,"file":"SurveyContent.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SurveyContent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AASjC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAK7B,EAAe,EAAE;IAChB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAQ,EAAE;QACrD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;YAChB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;QACD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CACvB,YAAwB,EACxB,sBAAyD,EACnD,EAAE;QACR,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACtC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,sBAAsB,IAAI,KAAK,CAAC,yBAAyB,EAAE,CAAC;YAC9D,KAAK,CAAC,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,uBAAuB;QACvC,oBAAC,UAAU,IAAC,oBAAoB,EAAE,oBAAoB,GAAI;QAEzD,cAAc,IAAI,CACjB,oBAAC,UAAU,IACT,SAAS,EAAE,gBAAgB,EAC3B,qBAAqB,EAAE,CAAC,CAAC,KAAK,CAAC,yBAAyB,KAAK,SAAS,CAAC,GACvE,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { StarSurvey } from './StarSurvey';\nimport { TagsSurvey } from './TagsSurvey';\nimport { useState } from 'react';\nimport {\n  _AudioIssue,\n  _OverallIssue,\n  _ScreenshareIssue,\n  _VideoIssue,\n  CallSurveyImprovementSuggestions\n} from '@internal/react-components';\nimport { CallSurvey } from '@azure/communication-calling';\nimport { Stack } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const SurveyContent = (props: {\n  setShowSubmitFeedbackButton: (showButton: boolean) => void;\n  setRatings: (rating: number) => void;\n  setIssuesSelected: (issuesSelected: CallSurvey) => void;\n  setImprovementSuggestions?: (improvementSuggestions: CallSurveyImprovementSuggestions) => void;\n}): JSX.Element => {\n  const [showTagsSurvey, setShowTagsSurvey] = useState(false);\n  const onStarRatingSelected = (ratings: number): void => {\n    if (ratings < 5) {\n      setShowTagsSurvey(true);\n      props.setShowSubmitFeedbackButton(true);\n    } else {\n      props.setShowSubmitFeedbackButton(true);\n    }\n    props.setRatings(ratings);\n  };\n\n  const onIssuesSelected = (\n    selectedTags: CallSurvey,\n    improvementSuggestions?: CallSurveyImprovementSuggestions\n  ): void => {\n    props.setIssuesSelected(selectedTags);\n    props.setShowSubmitFeedbackButton(true);\n    if (improvementSuggestions && props.setImprovementSuggestions) {\n      props.setImprovementSuggestions(improvementSuggestions);\n    }\n  };\n\n  return (\n    <Stack data-ui-id=\"call-composite-survey\">\n      <StarSurvey onStarRatingSelected={onStarRatingSelected} />\n\n      {showTagsSurvey && (\n        <TagsSurvey\n          onConfirm={onIssuesSelected}\n          showFreeFormTextField={!(props.setImprovementSuggestions === undefined)}\n        />\n      )}\n    </Stack>\n  );\n};\n"]}

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

@@ -24,19 +24,22 @@ 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))))), /* Hidden icon to take the same space as the actual back button on the left. */
-        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)))))),
+        /* Hidden icon to take the same space as the actual back button on the left. */
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 //# sourceMappingURL=TabHeader.js.map