@azure/communication-react 1.14.0-alpha-202403120012 → 1.14.0-alpha-202403140012

package/dist/dist-esm/chat-stateful-client/src/StatefulChatClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatefulChatClient.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/StatefulChatClient.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ChatClient, ChatClientOptions } from '@azure/communication-chat';\nimport { _getApplicationId, _TelemetryImplementationHint } from '@internal/acs-ui-common';\nimport { ChatContext } from './ChatContext';\nimport { ChatClientState } from './ChatClientState';\nimport { EventSubscriber } from './EventSubscriber';\nimport { chatThreadClientDeclaratify } from './StatefulChatThreadClient';\nimport { createDecoratedListThreads } from './iterators/createDecoratedListThreads';\nimport {\n  CommunicationTokenCredential,\n  CommunicationUserIdentifier,\n  getIdentifierKind\n} from '@azure/communication-common';\nimport { chatStatefulLogger } from './Logger';\n\n/**\n * Defines the methods that allow {@Link @azure/communication-chat#ChatClient} to be used with a centralized generated state.\n *\n * The interface provides access to proxied state and also allows registering a handler for state change events.\n *\n * @public\n */\nexport interface StatefulChatClient extends ChatClient {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Cleans up the resource cache from the chat thread client.\n   */\n  dispose(): void;\n  /**\n   * Holds all the state that we could proxy from ChatClient {@Link @azure/communication-chat#ChatClient} as\n   * ChatClientState {@Link ChatClientState}.\n   */\n  getState(): ChatClientState;\n  /**\n   * Allows a handler to be registered for 'stateChanged' events.\n   *\n   * @param handler - Callback to receive the state.\n   */\n  onStateChange(handler: (state: ChatClientState) => void): void;\n  /**\n   * Allows unregistering for 'stateChanged' events.\n   *\n   * @param handler - Original callback to be unsubscribed.\n   */\n  offStateChange(handler: (state: ChatClientState) => void): void;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Downloads a resource for specific message and caches it.\n   *\n   * @param threadId - The thread id of the chat thread.\n   * @param messageId - The message id of the chat message.\n   * @param resourceUrl - The resource url to fetch and cache.\n   */\n  downloadResourceToCache(threadId: string, messageId: string, resourceUrl: string): void;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Removes a resource from cache for a specific message.\n   *\n   * @param threadId - The thread id of the chat thread.\n   * @param messageId - The message id of the chat message.\n   * @param resourceUrl - The resource url to remove from cache.\n   */\n  removeResourceFromCache(threadId: string, messageId: string, resourceUrl: string): void;\n}\n\ninterface StatefulChatClientWithPrivateProps extends StatefulChatClient {\n  context: ChatContext;\n  eventSubscriber: EventSubscriber | undefined;\n}\n\nconst proxyChatClient: ProxyHandler<ChatClient> = {\n  get: function <P extends keyof StatefulChatClientWithPrivateProps>(\n    chatClient: ChatClient,\n    prop: P,\n    receiver: StatefulChatClientWithPrivateProps\n  ) {\n    // skip receiver.context call to avoid recursive bugs\n    if (prop === 'context') {\n      return Reflect.get(chatClient, prop);\n    }\n\n    const context = receiver.context;\n    switch (prop) {\n      case 'createChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['createChatThread']>) {\n          const result = await chatClient.createChatThread(...args);\n          const thread = result.chatThread;\n          if (thread) {\n            const [request] = args;\n            context.createThread(thread.id, { topic: request.topic });\n          }\n          return result;\n        }, 'ChatClient.createChatThread');\n      }\n\n      case 'deleteChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['deleteChatThread']>) {\n          const result = await chatClient.deleteChatThread(...args);\n          context.deleteThread(args[0]);\n          return result;\n        }, 'ChatClient.deleteChatThread');\n      }\n      case 'listChatThreads': {\n        return createDecoratedListThreads(chatClient, context);\n      }\n      case 'getChatThreadClient': {\n        return function (...args: Parameters<ChatClient['getChatThreadClient']>) {\n          const chatThreadClient = chatClient.getChatThreadClient(...args);\n          // TODO(prprabhu): Ensure that thread properties are fetched into the ChatContext at this point.\n          // A new thread might be created here, but the properties will never be fetched.\n          return chatThreadClientDeclaratify(chatThreadClient, context);\n        };\n      }\n      case 'startRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['startRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.startRealtimeNotifications(...args);\n          if (!receiver.eventSubscriber) {\n            receiver.eventSubscriber = new EventSubscriber(chatClient, context);\n          }\n          return ret;\n        },\n        'ChatClient.startRealtimeNotifications');\n      }\n      case 'stopRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['stopRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.stopRealtimeNotifications(...args);\n          if (receiver.eventSubscriber) {\n            receiver.eventSubscriber.unsubscribe();\n            receiver.eventSubscriber = undefined;\n          }\n          return ret;\n        },\n        'ChatClient.stopRealtimeNotifications');\n      }\n      default:\n        return Reflect.get(chatClient, prop);\n    }\n  }\n};\n\n/**\n * Arguments to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientArgs = {\n  userId: CommunicationUserIdentifier;\n  displayName: string;\n  endpoint: string;\n  credential: CommunicationTokenCredential;\n};\n\n/**\n * Options to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientOptions = {\n  /**\n   * Options to construct the {@link @azure/communication-chat#ChatClient} with.\n   */\n  chatClientOptions: ChatClientOptions;\n  /**\n   * Sets the max listeners limit of the 'stateChange' event. Defaults to the node.js EventEmitter.defaultMaxListeners\n   * if not specified.\n   */\n  maxStateChangeListeners?: number;\n};\n\n/**\n * Creates a stateful ChatClient {@link StatefulChatClient} by proxying ChatClient\n * {@link @azure/communication-chat#ChatClient} with ProxyChatClient {@link ProxyChatClient} which then allows access\n * to state in a declarative way.\n *\n * @public\n */\nexport const createStatefulChatClient = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  return _createStatefulChatClientInner(args, options);\n};\n\n/**\n * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.\n *\n * @internal\n */\nexport const _createStatefulChatClientInner = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions,\n  telemetryImplementationHint: _TelemetryImplementationHint = 'StatefulComponents'\n): StatefulChatClient => {\n  chatStatefulLogger.info(\n    `Creating chat stateful client using library version: ${_getApplicationId(telemetryImplementationHint)}`\n  );\n  const tweakedOptions = {\n    ...options,\n    chatClientOptions: {\n      ...options?.chatClientOptions,\n      userAgentOptions: { userAgentPrefix: _getApplicationId(telemetryImplementationHint) }\n    }\n  };\n  return _createStatefulChatClientWithDeps(\n    new ChatClient(args.endpoint, args.credential, tweakedOptions.chatClientOptions),\n    args,\n    tweakedOptions\n  );\n};\n\n/**\n * A function to modify the state of the StatefulChatClient.\n *\n * Provided as a callback to the {@link StatefulChatClient.modifyState} method.\n *\n * The function must modify the provided state in place as much as possible.\n * Making large modifications can lead to bad performance by causing spurious rerendering of the UI.\n *\n * Consider using commonly used modifier functions exported from this package.\n */\nexport type ChatStateModifier = (state: ChatClientState) => void;\n\n/**\n * Internal implementation of {@link createStatefulChatClient} for dependency injection.\n *\n * Used by tests. Should not be exported out of this package.\n * @internal\n */\nexport const _createStatefulChatClientWithDeps = (\n  chatClient: ChatClient,\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  const context = new ChatContext(\n    options?.maxStateChangeListeners,\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.credential\n  );\n\n  let eventSubscriber: EventSubscriber;\n\n  context.updateChatConfig(getIdentifierKind(args.userId), args.displayName);\n\n  const proxy = new Proxy(chatClient, proxyChatClient);\n\n  Object.defineProperty(proxy, 'context', {\n    configurable: false,\n    get: () => context\n  });\n\n  Object.defineProperty(proxy, 'eventSubscriber', {\n    configurable: false,\n    get: () => eventSubscriber,\n    set: (val: EventSubscriber) => {\n      eventSubscriber = val;\n    }\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'dispose', {\n    configurable: false,\n    value: () => context?.dispose()\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'downloadResourceToCache', {\n    configurable: false,\n    value: (threadId: string, messageId: string, resourceUrl: string) =>\n      context?.downloadResourceToCache(threadId, messageId, resourceUrl)\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'removeResourceFromCache', {\n    configurable: false,\n    value: (threadId: string, messageId: string, resourceUrl: string) =>\n      context?.removeResourceFromCache(threadId, messageId, resourceUrl)\n  });\n  Object.defineProperty(proxy, 'getState', {\n    configurable: false,\n    value: () => context?.getState()\n  });\n  Object.defineProperty(proxy, 'onStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.onStateChange(handler)\n  });\n  Object.defineProperty(proxy, 'offStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.offStateChange(handler)\n  });\n\n  return proxy as StatefulChatClient;\n};\n"]}
+{"version":3,"file":"StatefulChatClient.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/StatefulChatClient.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ChatClient, ChatClientOptions } from '@azure/communication-chat';\nimport { _getApplicationId, _TelemetryImplementationHint } from '@internal/acs-ui-common';\nimport { ChatContext } from './ChatContext';\nimport { ChatClientState } from './ChatClientState';\nimport { EventSubscriber } from './EventSubscriber';\nimport { chatThreadClientDeclaratify } from './StatefulChatThreadClient';\nimport { createDecoratedListThreads } from './iterators/createDecoratedListThreads';\nimport {\n  CommunicationTokenCredential,\n  CommunicationUserIdentifier,\n  getIdentifierKind\n} from '@azure/communication-common';\nimport { chatStatefulLogger } from './Logger';\n\n/**\n * Defines the methods that allow {@Link @azure/communication-chat#ChatClient} to be used with a centralized generated state.\n *\n * The interface provides access to proxied state and also allows registering a handler for state change events.\n *\n * @public\n */\nexport interface StatefulChatClient extends ChatClient {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Cleans up the resource cache from the chat thread client.\n   */\n  dispose(): void;\n  /**\n   * Holds all the state that we could proxy from ChatClient {@Link @azure/communication-chat#ChatClient} as\n   * ChatClientState {@Link ChatClientState}.\n   */\n  getState(): ChatClientState;\n  /**\n   * Allows a handler to be registered for 'stateChanged' events.\n   *\n   * @param handler - Callback to receive the state.\n   */\n  onStateChange(handler: (state: ChatClientState) => void): void;\n  /**\n   * Allows unregistering for 'stateChanged' events.\n   *\n   * @param handler - Original callback to be unsubscribed.\n   */\n  offStateChange(handler: (state: ChatClientState) => void): void;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Downloads a resource for specific message and caches it.\n   *\n   * @param threadId - The thread id of the chat thread.\n   * @param messageId - The message id of the chat message.\n   * @param resourceUrl - The resource url to fetch and cache.\n   */\n  downloadResourceToCache(threadId: string, messageId: string, resourceUrl: string): void;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Removes a resource from cache for a specific message.\n   *\n   * @param threadId - The thread id of the chat thread.\n   * @param messageId - The message id of the chat message.\n   * @param resourceUrl - The resource url to remove from cache.\n   */\n  removeResourceFromCache(threadId: string, messageId: string, resourceUrl: string): void;\n}\n\ninterface StatefulChatClientWithPrivateProps extends StatefulChatClient {\n  context: ChatContext;\n  eventSubscriber: EventSubscriber | undefined;\n}\n\nconst proxyChatClient: ProxyHandler<ChatClient> = {\n  get: function <P extends keyof StatefulChatClientWithPrivateProps>(\n    chatClient: ChatClient,\n    prop: P,\n    receiver: StatefulChatClientWithPrivateProps\n  ) {\n    // skip receiver.context call to avoid recursive bugs\n    if (prop === 'context') {\n      return Reflect.get(chatClient, prop);\n    }\n\n    const context = receiver.context;\n    switch (prop) {\n      case 'createChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['createChatThread']>) {\n          const result = await chatClient.createChatThread(...args);\n          const thread = result.chatThread;\n          if (thread) {\n            const [request] = args;\n            context.createThread(thread.id, { topic: request.topic });\n          }\n          return result;\n        }, 'ChatClient.createChatThread');\n      }\n\n      case 'deleteChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['deleteChatThread']>) {\n          const result = await chatClient.deleteChatThread(...args);\n          context.deleteThread(args[0]);\n          return result;\n        }, 'ChatClient.deleteChatThread');\n      }\n      case 'listChatThreads': {\n        return createDecoratedListThreads(chatClient, context);\n      }\n      case 'getChatThreadClient': {\n        return function (...args: Parameters<ChatClient['getChatThreadClient']>) {\n          const chatThreadClient = chatClient.getChatThreadClient(...args);\n          // TODO(prprabhu): Ensure that thread properties are fetched into the ChatContext at this point.\n          // A new thread might be created here, but the properties will never be fetched.\n          return chatThreadClientDeclaratify(chatThreadClient, context);\n        };\n      }\n      case 'startRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['startRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.startRealtimeNotifications(...args);\n          if (!receiver.eventSubscriber) {\n            receiver.eventSubscriber = new EventSubscriber(chatClient, context);\n          }\n          return ret;\n        },\n        'ChatClient.startRealtimeNotifications');\n      }\n      case 'stopRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['stopRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.stopRealtimeNotifications(...args);\n          if (receiver.eventSubscriber) {\n            receiver.eventSubscriber.unsubscribe();\n            receiver.eventSubscriber = undefined;\n          }\n          return ret;\n        },\n        'ChatClient.stopRealtimeNotifications');\n      }\n      default:\n        return Reflect.get(chatClient, prop);\n    }\n  }\n};\n\n/**\n * Arguments to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientArgs = {\n  userId: CommunicationUserIdentifier;\n  displayName: string;\n  endpoint: string;\n  credential: CommunicationTokenCredential;\n};\n\n/**\n * Options to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientOptions = {\n  /**\n   * Options to construct the {@link @azure/communication-chat#ChatClient} with.\n   */\n  chatClientOptions: ChatClientOptions;\n  /**\n   * Sets the max listeners limit of the 'stateChange' event. Defaults to the node.js EventEmitter.defaultMaxListeners\n   * if not specified.\n   */\n  maxStateChangeListeners?: number;\n};\n\n/**\n * Creates a stateful ChatClient {@link StatefulChatClient} by proxying ChatClient\n * {@link @azure/communication-chat#ChatClient} with ProxyChatClient {@link ProxyChatClient} which then allows access\n * to state in a declarative way.\n *\n * @public\n */\nexport const createStatefulChatClient = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  return _createStatefulChatClientInner(args, options);\n};\n\n/**\n * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.\n *\n * @internal\n */\nexport const _createStatefulChatClientInner = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions,\n  telemetryImplementationHint: _TelemetryImplementationHint = 'StatefulComponents'\n): StatefulChatClient => {\n  chatStatefulLogger.info(\n    `Creating chat stateful client using library version: ${_getApplicationId(telemetryImplementationHint)}`\n  );\n  const tweakedOptions = {\n    ...options,\n    chatClientOptions: {\n      ...options?.chatClientOptions,\n      userAgentOptions: { userAgentPrefix: _getApplicationId(telemetryImplementationHint) }\n    }\n  };\n  return _createStatefulChatClientWithDeps(\n    new ChatClient(args.endpoint, args.credential, tweakedOptions.chatClientOptions),\n    args,\n    tweakedOptions\n  );\n};\n\n/**\n * A function to modify the state of the StatefulChatClient.\n *\n * Provided as a callback to the {@link StatefulChatClient.modifyState} method.\n *\n * The function must modify the provided state in place as much as possible.\n * Making large modifications can lead to bad performance by causing spurious rerendering of the UI.\n *\n * Consider using commonly used modifier functions exported from this package.\n */\nexport type ChatStateModifier = (state: ChatClientState) => void;\n\n/**\n * Internal implementation of {@link createStatefulChatClient} for dependency injection.\n *\n * Used by tests. Should not be exported out of this package.\n * @internal\n */\nexport const _createStatefulChatClientWithDeps = (\n  chatClient: ChatClient,\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  const context = new ChatContext(\n    options?.maxStateChangeListeners,\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.credential,\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.endpoint\n  );\n\n  let eventSubscriber: EventSubscriber;\n\n  context.updateChatConfig(getIdentifierKind(args.userId), args.displayName);\n\n  const proxy = new Proxy(chatClient, proxyChatClient);\n\n  Object.defineProperty(proxy, 'context', {\n    configurable: false,\n    get: () => context\n  });\n\n  Object.defineProperty(proxy, 'eventSubscriber', {\n    configurable: false,\n    get: () => eventSubscriber,\n    set: (val: EventSubscriber) => {\n      eventSubscriber = val;\n    }\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'dispose', {\n    configurable: false,\n    value: () => context?.dispose()\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'downloadResourceToCache', {\n    configurable: false,\n    value: (threadId: string, messageId: string, resourceUrl: string) =>\n      context?.downloadResourceToCache(threadId, messageId, resourceUrl)\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'removeResourceFromCache', {\n    configurable: false,\n    value: (threadId: string, messageId: string, resourceUrl: string) =>\n      context?.removeResourceFromCache(threadId, messageId, resourceUrl)\n  });\n  Object.defineProperty(proxy, 'getState', {\n    configurable: false,\n    value: () => context?.getState()\n  });\n  Object.defineProperty(proxy, 'onStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.onStateChange(handler)\n  });\n  Object.defineProperty(proxy, 'offStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.offStateChange(handler)\n  });\n\n  return proxy as StatefulChatClient;\n};\n"]}

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

@@ -32,8 +32,8 @@ export const ImageOverlay = (props) => {
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
                 onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), 
                     /* @conditional-compile-remove(image-overlay) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel })),
-                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' })),
+                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel, disabled: imageSrc === '' })),
+                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite', disabled: imageSrc === '' })),
                 React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));

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

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  themeProviderRootStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay) */\nimport { imageOverlayTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\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/* @conditional-compile-remove(image-overlay) */\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/* @conditional-compile-remove(image-overlay) */\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 { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(imageOverlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              /* @conditional-compile-remove(image-overlay) */\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n            />\n          )}\n          {onDownloadButtonClicked && (\n            <IconButton\n              iconProps={downloadIcon}\n              className={mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme))}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              aria-live={'polite'}\n            />\n          )}\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(imageOverlayTheme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={() => {\n              setIsImageLoaded(false);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(imageOverlayTheme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      <FluentThemeProvider fluentTheme={imageOverlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>\n  );\n};\n"]}
+{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,gDAAgD;AAChD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7F,gDAAgD;AAChD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,gDAAgD;AAChD,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,sBAAsB,EACtB,iCAAiC,EACjC,sBAAsB,EACtB,sBAAsB,EACtB,UAAU,EACX,MAAM,6BAA6B,CAAC;AACrC,gDAAgD;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,gDAAgD;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAsD/C,gDAAgD;AAChD;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAElG,gDAAgD;IAChD,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAElE,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAE1F,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC;YACxC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC;gBAClD,SAAS;gBACV,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,gBAAc,KAAK,IAAI,OAAO,IAC5F,KAAK,CACK,CACP;YACR,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC;gBACpD,uBAAuB,IAAI,CAC1B,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC;oBAC3C,gDAAgD;oBAChD,IAAI,EAAE,aAAa,CAAC,mBAAmB,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,EAC3E,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,GAAI,eAC7F,QAAQ,gBAEP,aAAa,CAAC,mBAAmB,EAC7C,QAAQ,EAAE,QAAQ,KAAK,EAAE,GACzB,CACH;gBACA,uBAAuB,IAAI,CAC1B,oBAAC,UAAU,IACT,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE,WAAW,CAAC,iCAAiC,CAAC,iBAAiB,CAAC,CAAC,EAC5E,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,gBAE/D,aAAa,CAAC,mBAAmB,eAClC,QAAQ,EACnB,QAAQ,EAAE,QAAQ,KAAK,EAAE,GACzB,CACH;gBACD,oBAAC,UAAU,IACT,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,EAC5D,OAAO,EAAE,SAAS;oBAClB,gDAAgD;oBAChD,SAAS,EAAE,aAAa,CAAC,sBAAsB,eACpC,QAAQ,GACnB,CACI,CACF,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,0BAA0B,GAAG,GAAgB,EAAE;QACnD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAC3E,QAAQ,IAAI,CACX,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,EAClC,GAAG,EAAE,OAAO,IAAI,OAAO,gBACX,0BAA0B,eAC3B,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAC3C,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,GACD,CACH,CACK,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,WAAW,EAAE,KAAK,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,EAAE,MAAM,oBAAO,aAAa,CAAC,iBAAiB,CAAC,CAAE,EAAE,EAC5D,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,EAC/E,aAAa,EAAE,IAAI;QAEnB,oBAAC,mBAAmB,IAAC,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,sBAAsB;YACnF,eAAe,EAAE;YACjB,0BAA0B,EAAE,CACT,CAChB,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  themeProviderRootStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay) */\nimport { imageOverlayTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\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/* @conditional-compile-remove(image-overlay) */\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/* @conditional-compile-remove(image-overlay) */\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 { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(imageOverlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              /* @conditional-compile-remove(image-overlay) */\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              disabled={imageSrc === ''}\n            />\n          )}\n          {onDownloadButtonClicked && (\n            <IconButton\n              iconProps={downloadIcon}\n              className={mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme))}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              aria-live={'polite'}\n              disabled={imageSrc === ''}\n            />\n          )}\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(imageOverlayTheme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={() => {\n              setIsImageLoaded(false);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(imageOverlayTheme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      <FluentThemeProvider fluentTheme={imageOverlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>\n  );\n};\n"]}

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

@@ -11,6 +11,7 @@ export type InputBoxButtonProps = {
     id?: string;
     ariaLabel?: string;
     tooltipContent?: string;
+    'data-testId'?: string;
 };
 /**
  * @private

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

@@ -9,7 +9,7 @@ import { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } fro
  * @private
  */
 export const InputBoxButton = (props) => {
-    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
+    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId } = props;
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);
     const theme = useTheme();
@@ -27,6 +27,6 @@ export const InputBoxButton = (props) => {
                 setIsHover(false);
             }, 
             // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) })));
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId })));
 };
 //# sourceMappingURL=InputBoxButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAgBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAClF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAAO,YAAY;QAC9G,oBAAC,UAAU,IACT,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,GACvF,CACU,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n      />\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAiBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC7G,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAAO,YAAY;QAC9G,oBAAC,UAAU,IACT,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,iBAC1E,UAAU,GACvB,CACU,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n  'data-testId'?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n        data-testid={dataTestId}\n      />\n    </TooltipHost>\n  );\n};\n"]}

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

@@ -62,16 +62,16 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                     isBeakVisible: false,
                     styles: ribbonOverflowButtonStyle(theme)
                 }
-            }, strings: ribbonButtonsStrings(strings) }));
+            }, strings: ribbonButtonsStrings(strings), "data-testid": 'rich-text-editor-ribbon' }));
     }, [strings, ribbonPlugin, theme]);
-    return (React.createElement("div", null,
+    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
         showRichTextEditorFormatting && ribbon,
         React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting, showRichTextEditorFormatting) },
             React.createElement(Rooster, { initialContent: initialContent, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle(props.styles), editorCreator: editorCreator, 
                 // TODO: confirm the color during inline images implementation
                 imageSelectionBorderColor: 'blue', 
                 // doNotAdjustEditorColor is used to fix the default background color for Rooster component
-                doNotAdjustEditorColor: true, 
+                doNotAdjustEditorColor: true, "data-testid": 'rooster-rich-text-editor', 
                 // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught
                 onKeyDown: props.onKeyDown }))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons, ribbonButtonsStrings } from './RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n  setEmptyContent: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting } = props;\n  const editor = useRef<IEditor | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    editor.current = new Editor(div, options);\n    // Remove default values for background color and color\n    // setBackgroundColor and setTextColor can't be used here as they cause the editor to be focused\n    // color will be set in richTextEditorWrapperStyle instead of inline styles\n    div.style.backgroundColor = '';\n    div.style.color = '';\n\n    return editor.current;\n  }, []);\n\n  const plugins = useMemo(() => {\n    const contentEdit = new ContentEdit();\n    const placeholderPlugin = new Watermark(placeholderText || '');\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n  }, [onChange, placeholderText, ribbonPlugin]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  return (\n    <div>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting, showRichTextEditorFormatting)}>\n        <Rooster\n          initialContent={initialContent}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n        />\n      </div>\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons, ribbonButtonsStrings } from './RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n  setEmptyContent: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting } = props;\n  const editor = useRef<IEditor | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    editor.current = new Editor(div, options);\n    // Remove default values for background color and color\n    // setBackgroundColor and setTextColor can't be used here as they cause the editor to be focused\n    // color will be set in richTextEditorWrapperStyle instead of inline styles\n    div.style.backgroundColor = '';\n    div.style.color = '';\n\n    return editor.current;\n  }, []);\n\n  const plugins = useMemo(() => {\n    const contentEdit = new ContentEdit();\n    const placeholderPlugin = new Watermark(placeholderText || '');\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n  }, [onChange, placeholderText, ribbonPlugin]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n        data-testid={'rich-text-editor-ribbon'}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting, showRichTextEditorFormatting)}>\n        <Rooster\n          initialContent={initialContent}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          data-testid={'rooster-rich-text-editor'}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n        />\n      </div>\n    </div>\n  );\n});\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js

@@ -25,7 +25,7 @@ export const RichTextInputBoxComponent = (props) => {
                         setShowRichTextEditorFormatting(!showRichTextEditorFormatting);
                         (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                         e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
-                    }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle }),
+                    }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle, "data-testId": 'rich-text-input-box-format-button' }),
                 React.createElement(Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
                 actionComponents)));
     }, [

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAwD,MAAM,kBAAkB,CAAC;AAExG,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EACL,iCAAiC,EACjC,+BAA+B,EAC/B,0BAA0B,EAC1B,6BAA6B,EAC9B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AACnH,OAAO,EAAE,qCAAqC,EAAE,MAAM,UAAU,CAAC;AAyBjE;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,eAAe,EACf,cAAc,EACd,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,4BAA4B,EAAE,+BAA+B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExF,MAAM,0BAA0B,GAAG,WAAW,CAC5C,CAAC,OAAgB,EAAE,EAAE,CAAC,CACpB,oBAAC,IAAI,IACH,QAAQ,EACN,OAAO,IAAI,4BAA4B,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,0BAA0B,EAEzG,SAAS,EAAE,6BAA6B,CAAC,KAAK,EAAE,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,4BAA4B,CAAC,CAAC,GACvG,CACH,EACD,CAAC,QAAQ,EAAE,4BAA4B,EAAE,KAAK,CAAC,CAChD,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAE,+BAA+B;YAChE,oBAAC,KAAK,IAAC,UAAU;gBACf,oBAAC,cAAc,IACb,YAAY,EAAE,0BAA0B,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;wBACb,+BAA+B,CAAC,CAAC,4BAA4B,CAAC,CAAC;wBAC/D,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;wBACpC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,gFAAgF;oBACvG,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,2BAA2B,EAC9C,cAAc,EAAE,OAAO,CAAC,2BAA2B,EACnD,SAAS,EAAE,0BAA0B,GACrC;gBACF,oBAAC,IAAI,IAAC,QAAQ,EAAC,qBAAqB,EAAC,SAAS,EAAE,iCAAiC,CAAC,KAAK,CAAC,GAAI;gBAC3F,gBAAgB,CACX,CACG,CACd,CAAC;IACJ,CAAC,EAAE;QACD,gBAAgB;QAChB,kBAAkB;QAClB,0BAA0B;QAC1B,4BAA4B;QAC5B,OAAO,CAAC,2BAA2B;QACnC,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,wBAAwB,CAAC,4BAA4B,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,wBAAwB,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAE7D,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAoC,EAAE,EAAE;QACvC,IAAI,qCAAqC,CAAC,EAAE,CAAC,EAAE,CAAC;YAC9C,OAAO;QACT,CAAC;QACD,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACjF,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,IAAI,cAAc,EAAE,CAAC;QACrC,CAAC;IACH,CAAC,EACD,CAAC,cAAc,EAAE,4BAA4B,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,sBAAsB,CAAC;YAChC,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,CAAC,CAAC,QAAQ;SACrB,CAAC;QAEF,oBAAC,KAAK,IACJ,IAAI,QACJ,UAAU,EAAE,uBAAuB,IAAI,CAAC,4BAA4B,EACpE,SAAS,EAAE,yBAAyB;YAGpC,oBAAC,KAAK,IAAC,IAAI,QAAC,SAAS,EAAE,0BAA0B;gBAC/C,oBAAC,cAAc,IACb,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,kBAAkB,EACvB,OAAO,EAAE,OAAO,EAChB,4BAA4B,EAAE,4BAA4B,EAC1D,MAAM,EAAE,mBAAmB,GAC3B,CAEI;YACP,aAAa,CACR,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { richTextBorderBoxStyle } from '../styles/RichTextInputBoxComponent.styles';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport { inputBoxContentStackStyle, inputBoxRichTextStackStyle } from '../styles/RichTextInputBoxComponent.styles';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  supportHorizontalLayout?: boolean;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    richTextEditorStyleProps,\n    supportHorizontalLayout = true\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={\n          isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n        }\n        className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))}\n      />\n    ),\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n              editorComponentRef.current?.focus();\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    editorComponentRef,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting]\n  );\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      <Stack\n        grow\n        horizontal={supportHorizontalLayout && !showRichTextEditorFormatting}\n        className={inputBoxContentStackStyle}\n      >\n        {/* fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <RichTextEditor\n            initialContent={initialContent}\n            placeholderText={placeholderText}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            ref={editorComponentRef}\n            strings={strings}\n            showRichTextEditorFormatting={showRichTextEditorFormatting}\n            styles={richTextEditorStyle}\n          />\n          {/* File Upload */}\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { richTextBorderBoxStyle } from '../styles/RichTextInputBoxComponent.styles';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport { inputBoxContentStackStyle, inputBoxRichTextStackStyle } from '../styles/RichTextInputBoxComponent.styles';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  supportHorizontalLayout?: boolean;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    richTextEditorStyleProps,\n    supportHorizontalLayout = true\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={\n          isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n        }\n        className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))}\n      />\n    ),\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n              editorComponentRef.current?.focus();\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n            data-testId={'rich-text-input-box-format-button'}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    editorComponentRef,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting]\n  );\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      <Stack\n        grow\n        horizontal={supportHorizontalLayout && !showRichTextEditorFormatting}\n        className={inputBoxContentStackStyle}\n      >\n        {/* fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <RichTextEditor\n            initialContent={initialContent}\n            placeholderText={placeholderText}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            ref={editorComponentRef}\n            strings={strings}\n            showRichTextEditorFormatting={showRichTextEditorFormatting}\n            styles={richTextEditorStyle}\n          />\n          {/* File Upload */}\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}

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

@@ -29,7 +29,7 @@ export const SendBoxErrorBar = (props) => {
     if (errorMessage) {
         return (React.createElement(React.Fragment, null,
             React.createElement(Announcer, { announcementString: errorMessage, ariaLive: 'polite' }),
-            React.createElement(MessageBar, { "data-test-id": 'send-box-message-bar', messageBarType: MessageBarType.warning, styles: {
+            React.createElement(MessageBar, { "data-testid": 'send-box-message-bar', messageBarType: MessageBarType.warning, styles: {
                     iconContainer: {
                         display: 'none'
                     }

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgCxC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YAC1C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvC,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI;YACnE,oBAAC,UAAU,oBACK,sBAAsB,EACpC,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,MAAM,EAAE;oBACN,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF,IAEA,YAAY,CACF,CACZ,CACJ,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { Announcer } from './Announcer';\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const { error, dismissAfterMs, onDismiss } = props;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n\n  if (errorMessage) {\n    return (\n      <>\n        <Announcer announcementString={errorMessage} ariaLive={'polite'} />\n        <MessageBar\n          data-test-id={'send-box-message-bar'}\n          messageBarType={MessageBarType.warning}\n          styles={{\n            iconContainer: {\n              display: 'none'\n            }\n          }}\n        >\n          {errorMessage}\n        </MessageBar>\n      </>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}
+{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgCxC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YAC1C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvC,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI;YACnE,oBAAC,UAAU,mBACI,sBAAsB,EACnC,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,MAAM,EAAE;oBACN,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF,IAEA,YAAY,CACF,CACZ,CACJ,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { Announcer } from './Announcer';\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const { error, dismissAfterMs, onDismiss } = props;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n\n  if (errorMessage) {\n    return (\n      <>\n        <Announcer announcementString={errorMessage} ariaLive={'polite'} />\n        <MessageBar\n          data-testid={'send-box-message-bar'}\n          messageBarType={MessageBarType.warning}\n          styles={{\n            iconContainer: {\n              display: 'none'\n            }\n          }}\n        >\n          {errorMessage}\n        </MessageBar>\n      </>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.d.ts

@@ -16,5 +16,6 @@ export declare const RemoteScreenShare: React.MemoExoticComponent<(props: {
     isSpeaking?: boolean | undefined;
     renderElement?: HTMLElement | undefined;
     participantVideoScalingMode?: VideoStreamOptions | undefined;
+    isPPTLive?: boolean | undefined;
 }) => React.JSX.Element>;
 //# sourceMappingURL=RemoteScreenShare.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.js

@@ -13,7 +13,9 @@ import { _formatString } from "../../../../acs-ui-common/src";
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 export const RemoteScreenShare = React.memo((props) => {
-    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode } = props;
+    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode, 
+    /* @conditional-compile-remove(ppt-live) */
+    isPPTLive } = props;
     const locale = useLocale();
     if (!renderElement) {
         /**
@@ -37,6 +39,10 @@ export const RemoteScreenShare = React.memo((props) => {
             participant: displayName
         })
         : '';
+    /* @conditional-compile-remove(ppt-live) */
+    if (isPPTLive) {
+        return (React.createElement(VideoTile, { renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
+    }
     return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
 });
 const LoadingSpinner = (props) => {

package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAcA,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB;;;;;;;WAOG;QACH,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,EAAE,2BAA2B,CAAC,CAAC;IAC5F,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC7E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IACxE,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo(\n  (props: {\n    userId: string;\n    displayName?: string;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isMuted?: boolean;\n    isSpeaking?: boolean;\n    renderElement?: HTMLElement;\n    participantVideoScalingMode?: VideoStreamOptions;\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving,\n      participantVideoScalingMode\n    } = props;\n    const locale = useLocale();\n\n    if (!renderElement) {\n      /**\n       * TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n       * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n       * mode is the same as before we started the screen share.\n       *\n       * We should deprecate the current function and replace it with a\n       * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n       */\n      onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n      />\n    );\n  }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAgBA,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,2BAA2B;IAC3B,2CAA2C;IAC3C,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB;;;;;;;WAOG;QACH,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,EAAE,2BAA2B,CAAC,CAAC;IAC5F,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACP,2CAA2C;IAC3C,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,oBAAC,SAAS,IACR,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IACV,kBAAkB,EAAE,aAAa,EACjC,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GACxD,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC7E,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC7E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IACxE,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo(\n  (props: {\n    userId: string;\n    displayName?: string;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isMuted?: boolean;\n    isSpeaking?: boolean;\n    renderElement?: HTMLElement;\n    participantVideoScalingMode?: VideoStreamOptions;\n    /* @conditional-compile-remove(ppt-live) */\n    isPPTLive?: boolean;\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving,\n      participantVideoScalingMode,\n      /* @conditional-compile-remove(ppt-live) */\n      isPPTLive\n    } = props;\n    const locale = useLocale();\n\n    if (!renderElement) {\n      /**\n       * TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n       * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n       * mode is the same as before we started the screen share.\n       *\n       * We should deprecate the current function and replace it with a\n       * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n       */\n      onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n    /* @conditional-compile-remove(ppt-live) */\n    if (isPPTLive) {\n      return (\n        <VideoTile\n          renderElement={\n            renderElement ? (\n              <StreamMedia\n                videoStreamElement={renderElement}\n                loadingState={isReceiving === false ? 'loading' : 'none'}\n              />\n            ) : undefined\n          }\n          onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n        />\n      );\n    }\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n      />\n    );\n  }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n"]}

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

@@ -61,7 +61,7 @@ export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  * @public
  */
 export const VideoGallery = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteScreenShareStreamView, onDisposeRemoteVideoStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, onPinParticipant: onPinParticipantHandler, onUnpinParticipant: onUnpinParticipantHandler, remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
     /* @conditional-compile-remove(vertical-gallery) */
     overflowGalleryPosition = 'horizontalBottom', 
@@ -290,7 +290,9 @@ export const VideoGallery = (props) => {
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId] })));
+    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], 
+        /* @conditional-compile-remove(ppt-live) */
+        isPPTLive: !((_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.id) })));
     const screenShareComponent = remoteScreenShareComponent
         ? remoteScreenShareComponent
         : localParticipant.isScreenSharingOn