@azure/communication-react 1.22.0-beta.1 → 1.22.0

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\nimport { BlockedMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    showMessageStatus,\n    onRenderMessageStatus,\n    participantCount,\n    readCount,\n    onActionButtonClick,\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    mentionOptions,\n    userId,\n    defaultStatusRenderer,\n    statusToRender,\n    actionsForAttachment,\n    onRenderAttachmentDownloads,\n    isRichTextEditorEnabled,\n    onPaste,\n    inlineImagesWithProgress,\n    onRemoveInlineImage,\n    onInsertInlineImage\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n    if (messageProps.message.messageType === 'chat' || messageProps.message.messageType === 'blocked') {\n      return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloads} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} onDisplayDateTimeString={onDisplayDateTimeString} inlineImageOptions={inlineImageOptions} mentionOptions={mentionOptions} actionsForAttachment={actionsForAttachment} isRichTextEditorEnabled={isRichTextEditorEnabled} onPaste={onPaste} onRemoveInlineImage={onRemoveInlineImage} onInsertInlineImage={onInsertInlineImage} inlineImagesWithProgress={inlineImagesWithProgress} />;\n    }\n    return <></>;\n  }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, onDisplayDateTimeString, inlineImageOptions, mentionOptions, onRenderAttachmentDownloads, actionsForAttachment,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  new Date().toDateString(), isRichTextEditorEnabled, onPaste, onRemoveInlineImage, onInsertInlineImage, inlineImagesWithProgress]);\n  const messageRenderer = useCallback((messageProps: MessageProps) => {\n    return onRenderMessage === undefined ? defaultChatMessageRenderer({\n      ...messageProps\n    }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n  }, [defaultChatMessageRenderer, onRenderMessage]);\n  const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined, defaultStatusRenderer: (message: ChatMessage | BlockedMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n    return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n      status: message.status\n    }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n  }, [message, statusToRender]);\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n  const myMessageRootProps = useMemo(() => {\n    return {\n      // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n      style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n  const myMessageBodyProps = useMemo(() => {\n    return {\n      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)\n    };\n  }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n  const myMessageStatusIcon = useMemo(() => {\n    return <div className={mergeStyles({\n      paddingLeft: '0.25rem'\n    }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n        {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n      </div>;\n  }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Status and avatar should be shown for both custom and default renderers.\n  return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n      {messageRenderer({\n      ...props\n    })}\n    </FluentChatMyMessage>;\n};"]}
+{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    showMessageStatus,\n    onRenderMessageStatus,\n    participantCount,\n    readCount,\n    onActionButtonClick,\n    inlineImageOptions,\n    userId,\n    defaultStatusRenderer,\n    statusToRender,\n    actionsForAttachment,\n    onRenderAttachmentDownloads\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n    if (messageProps.message.messageType === 'chat') {\n      return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloads} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} inlineImageOptions={inlineImageOptions} actionsForAttachment={actionsForAttachment} />;\n    }\n    return <></>;\n  }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  new Date().toDateString()]);\n  const messageRenderer = useCallback((messageProps: MessageProps) => {\n    return onRenderMessage === undefined ? defaultChatMessageRenderer({\n      ...messageProps\n    }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n  }, [defaultChatMessageRenderer, onRenderMessage]);\n  const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined, defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n    return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n      status: message.status\n    }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n  }, [message, statusToRender]);\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n  const myMessageRootProps = useMemo(() => {\n    return {\n      // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n      style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n  const myMessageBodyProps = useMemo(() => {\n    return {\n      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)\n    };\n  }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n  const myMessageStatusIcon = useMemo(() => {\n    return <div className={mergeStyles({\n      paddingLeft: '0.25rem'\n    }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n        {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n      </div>;\n  }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Status and avatar should be shown for both custom and default renderers.\n  return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n      {messageRenderer({\n      ...props\n    })}\n    </FluentChatMyMessage>;\n};"]}

package/dist/dist-esm/react-components/src/components/ControlBarButton.js

@@ -21,6 +21,6 @@ export const ControlBarButton = (props) => {
     const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled) ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent : (props === null || props === void 0 ? void 0 : props.checked) ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
     return React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
-        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
+        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, "aria-describedby": tooltipId, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
 };
 //# sourceMappingURL=ControlBarButton.js.map

package/dist/dist-esm/react-components/src/components/ControlBarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { DefaultButton, IButtonProps, IRenderFunction, concatStyleSets, IButtonStyles, KeyCodes } from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Disable tooltip.\n   *\n   * @defaultValue 'false'\n   */\n  disableTooltip?: boolean;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked ? props?.onRenderOnIcon ? props?.onRenderOnIcon() : null : props?.onRenderOffIcon ? props?.onRenderOffIcon() : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n  const labelText = props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n  const tooltipContent = props?.strings?.tooltipContent ?? (props?.disabled ? props?.strings?.tooltipDisabledContent : props?.checked ? props?.strings?.tooltipOnContent : props?.strings?.tooltipOffContent);\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n  return <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>\n      <DefaultButton {...props} styles={componentStyles} onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined} onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon} ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? labelText ?? tooltipContent} allowDisabledFocus={props.allowDisabledFocus ?? true} menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n    text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n    >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>;\n};"]}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { DefaultButton, IButtonProps, IRenderFunction, concatStyleSets, IButtonStyles, KeyCodes } from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Disable tooltip.\n   *\n   * @defaultValue 'false'\n   */\n  disableTooltip?: boolean;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked ? props?.onRenderOnIcon ? props?.onRenderOnIcon() : null : props?.onRenderOffIcon ? props?.onRenderOffIcon() : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n  const labelText = props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n  const tooltipContent = props?.strings?.tooltipContent ?? (props?.disabled ? props?.strings?.tooltipDisabledContent : props?.checked ? props?.strings?.tooltipOnContent : props?.strings?.tooltipOffContent);\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n  return <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>\n      <DefaultButton {...props} styles={componentStyles} onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined} onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon} ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? labelText ?? tooltipContent} allowDisabledFocus={props.allowDisabledFocus ?? true} aria-describedby={tooltipId} menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n    text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n    >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>;\n};"]}

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.js

@@ -46,7 +46,7 @@ export const _DrawerMenu = (props) => {
             borderTopLeftRadius: borderRadius
         }
     }), [firstItemStyle, borderRadius]);
-    return React.createElement(_DrawerSurface, { disableMaxHeight: props.disableMaxHeight, styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
+    return React.createElement(_DrawerSurface, { disableMaxHeight: props.disableMaxHeight, styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading, "data-ui-id": "drawer-menu" },
         React.createElement(Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
             menuItemsToRender.slice(0, 1).map(item => {
                 var _a;

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer menu\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n  styles?: _DrawerMenuStyles;\n}\nconst isDrawerMenuItem = (item: _DrawerMenuItemProps): boolean => {\n  return item.onRendererContent === undefined;\n};\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find(item => isDrawerMenuItem(item) && item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback((item: _DrawerMenuItemProps, ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined, itemKey?: string | undefined): void => {\n    if (item.subMenuProps) {\n      setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n    }\n    item.onItemClick?.(ev, itemKey);\n  }, [selectedKeyPath]);\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender?.[0] && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(() => merge(firstItemStyle ?? {}, {\n    root: {\n      borderTopRightRadius: borderRadius,\n      borderTopLeftRadius: borderRadius\n    }\n  }), [firstItemStyle, borderRadius]);\n  return <_DrawerSurface disableMaxHeight={props.disableMaxHeight} styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss} heading={props.heading}>\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map(item => isDrawerMenuItem(item) ? <DrawerMenuItem {...item} key={`${item.itemKey}` + '0'} shouldFocusOnMount={item.itemKey === 'reactions' ? false : true} styles={modifiedFirstItemStyle} onItemClick={item.itemKey === 'reactions' ? undefined : (ev, itemKey) => {\n        onItemClick(item, ev, itemKey);\n      }} /> : item.onRendererContent?.())}\n        {menuItemsToRender?.slice(1).map((item, i) => isDrawerMenuItem(item) ? <DrawerMenuItem {...item} key={`${item.itemKey}` + `${i + 1}`} onItemClick={(ev, itemKey) => {\n        onItemClick(item, ev, itemKey);\n      }} /> : item.onRendererContent?.())}\n      </Stack>\n    </_DrawerSurface>;\n};"]}
+{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer menu\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n  styles?: _DrawerMenuStyles;\n}\nconst isDrawerMenuItem = (item: _DrawerMenuItemProps): boolean => {\n  return item.onRendererContent === undefined;\n};\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find(item => isDrawerMenuItem(item) && item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback((item: _DrawerMenuItemProps, ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined, itemKey?: string | undefined): void => {\n    if (item.subMenuProps) {\n      setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n    }\n    item.onItemClick?.(ev, itemKey);\n  }, [selectedKeyPath]);\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender?.[0] && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(() => merge(firstItemStyle ?? {}, {\n    root: {\n      borderTopRightRadius: borderRadius,\n      borderTopLeftRadius: borderRadius\n    }\n  }), [firstItemStyle, borderRadius]);\n  return <_DrawerSurface disableMaxHeight={props.disableMaxHeight} styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss} heading={props.heading} data-ui-id=\"drawer-menu\">\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map(item => isDrawerMenuItem(item) ? <DrawerMenuItem {...item} key={`${item.itemKey}` + '0'} shouldFocusOnMount={item.itemKey === 'reactions' ? false : true} styles={modifiedFirstItemStyle} onItemClick={item.itemKey === 'reactions' ? undefined : (ev, itemKey) => {\n        onItemClick(item, ev, itemKey);\n      }} /> : item.onRendererContent?.())}\n        {menuItemsToRender?.slice(1).map((item, i) => isDrawerMenuItem(item) ? <DrawerMenuItem {...item} key={`${item.itemKey}` + `${i + 1}`} onItemClick={(ev, itemKey) => {\n        onItemClick(item, ev, itemKey);\n      }} /> : item.onRendererContent?.())}\n      </Stack>\n    </_DrawerSurface>;\n};"]}

package/dist/dist-esm/react-components/src/components/ImageOverlay.js

@@ -5,7 +5,6 @@ import React, { useMemo, useState } from 'react';
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 import { useLocale } from '../localization';
-import { imageOverlayTheme } from '../theming';
 import { darkTheme } from '../theming';
 /**
  * Component to render a fullscreen modal for a selected image.
@@ -17,7 +16,6 @@ export const ImageOverlay = (props) => {
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
     const overlayTheme = useMemo(() => {
-        return imageOverlayTheme;
         return Object.assign(Object.assign({}, darkTheme), { semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' }) });
     }, []);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);

package/dist/dist-esm/react-components/src/components/ImageOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAgB,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3G,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,sBAAsB,EAAE,iCAAiC,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACtX,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAoDvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,uBAAuB,EACvB,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAiB,EAAE;QAC9C,OAAO,iBAAiB,CAAC;QACzB,uCACK,SAAS,KACZ,cAAc,kCACT,SAAS,CAAC,cAAc,KAC3B,cAAc,EAAE,qBAAqB,OAEvC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,EAAE,IAAI,EAAC,SAAS,gBAAa,KAAK,IAAI,OAAO,gBAAc,CAAC;YACzG,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC;gBAClD,SAAS;gBACV,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAG,KAAK,CAAc,CAC5E;YACR,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC;gBACpD,uBAAuB,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC,EAAE,IAAI,EAAE,aAAa,CAAC,mBAAmB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,GAAI,eAAa,QAAQ,gBAAc,aAAa,CAAC,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,KAAK,EAAE,GAAI;gBACxZ,uBAAuB,IAAI,oBAAC,UAAU,IAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,iCAAiC,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,gBAAc,aAAa,CAAC,mBAAmB,eAAa,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAK,EAAE,GAAI;gBACxT,oBAAC,UAAU,IAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,gBAAc,aAAa,CAAC,sBAAsB,eAAa,QAAQ,GAAI,CACnL,CACF,CAAC;IACb,CAAC,CAAC;IACF,MAAM,0BAA0B,GAAG,GAAgB,EAAE;QACnD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAChF,QAAQ,IAAI,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,OAAO,IAAI,OAAO,gBAAc,0BAA0B,gBAAc,0BAA0B,eAAa,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE;gBACjN,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE;gBACnE,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,GAAI,CACG,CAAC;IACb,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,IAAC,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE;YAC/E,MAAM,oBACD,aAAa,CAAC,YAAY,CAAC,CAC/B;SACF,EAAE,MAAM,EAAE;YACT,IAAI,EAAE,kBAAkB;YACxB,iBAAiB,EAAE,sBAAsB;SAC1C,EAAE,aAAa,EAAE,IAAI;QAClB,oBAAC,mBAAmB,IAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB;YAC9E,eAAe,EAAE;YACjB,0BAA0B,EAAE,CACT,CAChB,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { imageOverlayTheme } from '../theming';\nimport { darkTheme } from '../theming';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const {\n    isOpen,\n    imageSrc,\n    title,\n    titleIcon,\n    altText,\n    onDownloadButtonClicked,\n    onDismiss\n  } = props;\n  const localeStrings = useLocale().strings.imageOverlay;\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n  const overlayTheme = useMemo((): PartialTheme => {\n    return imageOverlayTheme;\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n  const renderHeaderBar = (): JSX.Element => {\n    return <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title || 'Image'} aria-level={2}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n          {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n          <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} aria-label={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n        </Stack>\n      </Stack>;\n  };\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText || 'image'} aria-label={'image-overlay-main-image'} data-ui-id={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n        setIsImageLoaded(false);\n      }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n        event.persist();\n      }} />}\n      </Stack>;\n  };\n  return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n    styles: {\n      ...overlayStyles(overlayTheme)\n    }\n  }} styles={{\n    main: focusTrapZoneStyle,\n    scrollableContent: scrollableContentStyle\n  }} isDarkOverlay={true}>\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>;\n};"]}
+{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { darkTheme } from '../theming';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const {\n    isOpen,\n    imageSrc,\n    title,\n    titleIcon,\n    altText,\n    onDownloadButtonClicked,\n    onDismiss\n  } = props;\n  const localeStrings = useLocale().strings.imageOverlay;\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n  const overlayTheme = useMemo((): PartialTheme => {\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n  const renderHeaderBar = (): JSX.Element => {\n    return <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title || 'Image'} aria-level={2}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n          {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n          <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} aria-label={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n        </Stack>\n      </Stack>;\n  };\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText || 'image'} aria-label={'image-overlay-main-image'} data-ui-id={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n        setIsImageLoaded(false);\n      }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n        event.persist();\n      }} />}\n      </Stack>;\n  };\n  return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n    styles: {\n      ...overlayStyles(overlayTheme)\n    }\n  }} styles={{\n    main: focusTrapZoneStyle,\n    scrollableContent: scrollableContentStyle\n  }} isDarkOverlay={true}>\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>;\n};"]}

package/dist/dist-esm/react-components/src/components/InputBoxComponent.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { MentionLookupOptions } from './MentionPopover';
 /**
  * @private
  */
@@ -30,7 +29,6 @@ type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
-    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

package/dist/dist-esm/react-components/src/components/InputBoxComponent.js

@@ -4,7 +4,6 @@ import React, { useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
 import { isEnterKeyEventFromCompositionSession } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
-import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
@@ -51,20 +50,6 @@ export const InputBoxComponent = (props) => {
             errorMessage,
             onRenderSuffix: props.children ? onRenderChildren : undefined
         };
-        const textFieldWithMentionProps = {
-            textFieldProps: textFieldProps,
-            dataUiId: dataUiId,
-            textValue: textValue,
-            onChange: onChange,
-            onKeyDown: onKeyDown,
-            onEnterKeyDown: onEnterKeyDown,
-            textFieldRef: textFieldRef,
-            supportNewline: supportNewline,
-            mentionLookupOptions: props.mentionLookupOptions
-        };
-        if (props.mentionLookupOptions) {
-            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
-        }
         return React.createElement("div", { style: textFieldProps.errorMessage ? {
                 padding: '0 0 5px 5px'
             } : undefined },

package/dist/dist-esm/react-components/src/components/InputBoxComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';\nimport { MentionLookupOptions } from './MentionPopover';\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n  children?: ReactNode;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n  const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n      return;\n    }\n    if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n      ev.preventDefault();\n      onEnterKeyDown && onEnterKeyDown();\n    }\n    onKeyDown && onKeyDown(ev);\n  }, [onEnterKeyDown, onKeyDown, supportNewline]);\n  const onRenderChildren = (): JSX.Element => {\n    return <>{children}</>;\n  };\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: props.children ? onRenderChildren : undefined\n    };\n    const textFieldWithMentionProps: TextFieldWithMentionProps = {\n      textFieldProps: textFieldProps,\n      dataUiId: dataUiId,\n      textValue: textValue,\n      onChange: onChange,\n      onKeyDown: onKeyDown,\n      onEnterKeyDown: onEnterKeyDown,\n      textFieldRef: textFieldRef,\n      supportNewline: supportNewline,\n      mentionLookupOptions: props.mentionLookupOptions\n    };\n    if (props.mentionLookupOptions) {\n      return <TextFieldWithMention {...textFieldWithMentionProps} />;\n    }\n    return <div style={textFieldProps.errorMessage ? {\n      padding: '0 0 5px 5px'\n    } : undefined}>\n        <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n        // Fix for setting the cursor to the correct position when multiline is true\n        // This approach should be reviewed during migration to FluentUI v9\n        e.currentTarget.value = '';\n        e.currentTarget.value = textValue;\n      }} />\n      </div>;\n  };\n  return <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>;\n};"]}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n  children?: ReactNode;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n  const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n      return;\n    }\n    if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n      ev.preventDefault();\n      onEnterKeyDown && onEnterKeyDown();\n    }\n    onKeyDown && onKeyDown(ev);\n  }, [onEnterKeyDown, onKeyDown, supportNewline]);\n  const onRenderChildren = (): JSX.Element => {\n    return <>{children}</>;\n  };\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: props.children ? onRenderChildren : undefined\n    };\n    return <div style={textFieldProps.errorMessage ? {\n      padding: '0 0 5px 5px'\n    } : undefined}>\n        <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n        // Fix for setting the cursor to the correct position when multiline is true\n        // This approach should be reviewed during migration to FluentUI v9\n        e.currentTarget.value = '';\n        e.currentTarget.value = textValue;\n      }} />\n      </div>;\n  };\n  return <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>;\n};"]}

package/dist/dist-esm/react-components/src/components/MessageThread.d.ts

@@ -1,15 +1,9 @@
 /// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types';
-import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
 import { MessageStatus } from "../../../acs-ui-common/src";
-import { AttachmentMetadataInProgress } from "../../../acs-ui-common/src";
-import { MessageOptions } from "../../../acs-ui-common/src";
-import { AttachmentOptions } from '../types/Attachment';
-import { MentionOptions } from './MentionPopover';
 import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
-import { RichTextEditorOptions, RichTextStrings } from './RichTextEditor/RichTextSendBox';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -35,7 +29,6 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
     /** Styles for blocked message container. */
-    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -99,20 +92,10 @@ export interface MessageThreadStrings {
     actionMenuMoreOptions?: string;
     /** Aria label to announce when a message is deleted */
     messageDeletedAnnouncementAriaLabel: string;
-    /** String for download attachment button in attachment card */
-    downloadAttachment: string;
     /** String for open attachment button in attachment card */
     openAttachment: string;
-    /** String for policy violation message removal */
-    blockedWarningText: string;
-    /** String for policy violation message removal details link */
-    blockedWarningLinkText: string;
     /** String for aria text in attachment card group*/
     attachmentCardGroupMessage: string;
-    /**
-     * Error message indicating that one or more image uploads are not complete.
-     */
-    imageUploadsPendingError: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -135,7 +118,7 @@ export type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export type UpdateMessageCallback = (messageId: string, content: string, options?: MessageOptions) => Promise<void>;
+export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
@@ -154,7 +137,7 @@ export type MessageThreadProps = {
     /**
      * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage | BlockedMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage)[];
     /**
      * number of participants in the thread
      */
@@ -235,11 +218,6 @@ export type MessageThreadProps = {
      * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
-    /**
-     * Optional callback to render attachments in the message component.
-     * @beta
-     */
-    onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -268,7 +246,7 @@ export type MessageThreadProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
     /**
      * Disable editing messages.
@@ -282,66 +260,12 @@ export type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
-    /**
-     * @beta
-     * Optional attachment options, which defines behvaiour for uploading and downloading attachments.
-     * As this moment, the uploadOptions would be ignored and this option is intended for download only.
-     */
-    attachmentOptions?: AttachmentOptions;
-    /**
-     * Optional function to provide customized date format.
-     * @beta
-     */
-    onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to lookup a mention query and display mentions
-     * @beta
-     */
-    mentionOptions?: MentionOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta
      */
     inlineImageOptions?: InlineImageOptions;
-    /**
-     * Options to enable rich text editor for the edit box.
-     * @beta
-     */
-    richTextEditorOptions?: RichTextEditBoxOptions;
 };
-/**
- * Options for the rich text editor edit box configuration.
- *
- * @beta
- */
-export interface RichTextEditBoxOptions 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']
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: 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.
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    /**
-     * Optional Record of type {@link AttachmentMetadataInProgress}
-     * to render the errorBar for inline images inserted in the MessageThread's edit boxes when:
-     *   - there is an error provided in the messagesInlineImagesWithProgress
-     *   - 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 messagesInlineImagesWithProgress 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.)
-     */
-    messagesInlineImagesWithProgress?: Record<string, AttachmentMetadataInProgress[]>;
-}
 /**
  * Props to render a single message.
  *
@@ -357,7 +281,7 @@ export type MessageProps = {
     /**
      * Strings from parent MessageThread component
      */
-    strings: MessageThreadStrings & Partial<RichTextStrings>;
+    strings: MessageThreadStrings;
     /**
      * Custom CSS styles for chat message container.
      */
@@ -403,7 +327,7 @@ export type MessageProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
 };
 /**
  * @internal

package/dist/dist-esm/react-components/src/components/MessageThread.js

@@ -26,7 +26,6 @@ import { createStyleFromV8Style } from './styles/v8StyleShim';
 import { ChatMessageComponentWrapper } from './ChatMessage/ChatMessageComponentWrapper';
 import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 import { Announcer } from './Announcer';
-import { loadChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker';
 const isMessageSame = (first, second) => {
     return first.messageId === second.messageId && first.content === second.content && first.contentType === second.contentType && JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) && first.senderId === second.senderId && first.senderDisplayName === second.senderDisplayName && JSON.stringify(first.editedOn) === JSON.stringify(second.editedOn);
 };
@@ -79,7 +78,7 @@ const DefaultJumpToNewMessageButton = (props) => {
 const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage) => {
     let key = message.messageId;
     let statusToRender = undefined;
-    if (message.messageType === 'chat' || message.messageType === 'blocked') {
+    if (message.messageType === 'chat') {
         if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
             key = message.clientMessageId;
         }
@@ -163,7 +162,7 @@ export const MessageThread = (props) => {
  */
 export const MessageThreadWrapper = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, onDisplayDateTimeString, mentionOptions, inlineImageOptions, attachmentOptions, onRenderAttachmentDownloads, richTextEditorOptions } = props;
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, inlineImageOptions } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
     const [chatMessagesInitialized, setChatMessagesInitialized] = useState(false);
@@ -189,14 +188,6 @@ export const MessageThreadWrapper = (props) => {
     const previousMessagesRef = useRef([]);
     // an aria label for Narrator to notify when a message is deleted
     const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = useState(undefined);
-    useEffect(() => {
-        // if rich text editor is enabled, the rich text editor component should be loaded early for good UX
-        if (richTextEditorOptions !== undefined) {
-            // this line is needed to load the Rooster JS dependencies early in the lifecycle
-            // when the rich text editor is enabled
-            loadChatMessageComponentAsRichTextEditBox();
-        }
-    }, [richTextEditorOptions]);
     const onDeleteMessageCallback = useCallback((messageId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
@@ -486,8 +477,7 @@ export const MessageThreadWrapper = (props) => {
                     className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, chatArrowNavigationAttributes),
                     latestDeletedMessageId && React.createElement(Announcer, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'polite' }),
                     messagesToDisplay.map((message) => {
-                        var _a;
-                        return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, actionsForAttachment: (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _a === void 0 ? void 0 : _a.actionsForAttachment, inlineImageOptions: inlineImageOptions, onDisplayDateTimeString: onDisplayDateTimeString, mentionOptions: mentionOptions, onRenderAttachmentDownloads: onRenderAttachmentDownloads, isRichTextEditorEnabled: !!richTextEditorOptions, onPaste: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onPaste, onInsertInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onInsertInlineImage, inlineImagesWithProgress: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress) && (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress[message.message.messageId]), onRemoveInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onRemoveInlineImage }));
+                        return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, inlineImageOptions: inlineImageOptions }));
                     })))));
 };
 const MemoChatMessageComponentWrapper = React.memo((obj) => {