@azure/communication-react 1.0.0-beta.5 → 1.0.0

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

@@ -1,10 +1,16 @@
 import React from 'react';
 import { IStyle } from '@fluentui/react';
-import { BaseCustomStylesProps } from '../types';
-import { InputBoxButtonProps } from './InputBoxComponent';
-export interface SendBoxStylesProps extends BaseCustomStylesProps {
+import { BaseCustomStyles } from '../types';
+/**
+ * Fluent styles for {@link Sendbox}.
+ *
+ * @public
+ */
+export interface SendBoxStylesProps extends BaseCustomStyles {
     /** Styles for the text field. */
     textField?: IStyle;
+    /** styles for the text field container */
+    textFieldContainer?: IStyle;
     /** Styles for the container of the send message icon. */
     sendMessageIconContainer?: IStyle;
     /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */
@@ -13,16 +19,24 @@ export interface SendBoxStylesProps extends BaseCustomStylesProps {
     systemMessage?: IStyle;
 }
 /**
- * Strings of SendBox that can be overridden
+ * Strings of {@link SendBox} that can be overridden.
+ *
+ * @public
  */
 export interface SendBoxStrings {
     /**
      * Placeholder text in SendBox when there is no user input
      */
     placeholderText: string;
+    /**
+     * The warning message when send box text length is more than max limit
+     */
+    textTooLong: string;
 }
 /**
- * Props for SendBox component
+ * Props for {@link SendBox}.
+ *
+ * @public
  */
 export interface SendBoxProps {
     /**
@@ -54,9 +68,9 @@ export interface SendBoxProps {
     supportNewline?: boolean;
     /**
      * Optional callback to render send button icon to the right of the SendBox.
-     * @defaultValue SendIcon
+     * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise
      */
-    onRenderIcon?: (props: InputBoxButtonProps, isMouseOverSendIcon: boolean) => JSX.Element;
+    onRenderIcon?: (isHover: boolean) => JSX.Element;
     /**
      * Allows users to pass in an object contains custom CSS styles.
      * @Example
@@ -71,8 +85,12 @@ export interface SendBoxProps {
     strings?: Partial<SendBoxStrings>;
 }
 /**
- * `SendBox` is a component for users to send messages and typing notifications. An optional message
- * can also be shown below the `SendBox`.
+ * Component for typing and sending messages.
+ *
+ * Supports sending typing notification when user starts entering text.
+ * Supports an optional message below the text input field.
+ *
+ * @public
  */
 export declare const SendBox: (props: SendBoxProps) => JSX.Element;
 //# sourceMappingURL=SendBox.d.ts.map

package/dist/dist-esm/react-components/src/components/SendBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SendBox.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAkD,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAIjD,OAAO,EAAkB,mBAAmB,EAAqB,MAAM,qBAAqB,CAAC;AAM7F,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,kHAAkH;IAClH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sHAAsH;IACtH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,KAAK,KAAK,CAAC,YAAY,CAAC;IAClF;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACzF;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,KAAG,WAkH7C,CAAC"}
+{"version":3,"file":"SendBox.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAkD,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAS5C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,kHAAkH;IAClH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sHAAsH;IACtH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,KAAK,KAAK,CAAC,YAAY,CAAC;IAClF;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACjD;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,KAAG,WAqH7C,CAAC"}

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

@@ -9,10 +9,13 @@ import { useIdentifiers } from '../identifiers';
 import { InputBoxButton, InputBoxComponent } from './InputBoxComponent';
 const EMPTY_MESSAGE_REGEX = /^\s*$/;
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
-const TEXT_EXCEEDS_LIMIT = `Your message is over the limit of ${MAXIMUM_LENGTH_OF_MESSAGE} characters`;
 /**
- * `SendBox` is a component for users to send messages and typing notifications. An optional message
- * can also be shown below the `SendBox`.
+ * Component for typing and sending messages.
+ *
+ * Supports sending typing notification when user starts entering text.
+ * Supports an optional message below the text input field.
+ *
+ * @public
  */
 export const SendBox = (props) => {
     const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles } = props;
@@ -37,8 +40,9 @@ export const SendBox = (props) => {
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const setText = (event, newValue) => {
-        if (newValue === undefined)
+        if (newValue === undefined) {
             return;
+        }
         if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {
             setTextValueOverflow(true);
         }
@@ -47,7 +51,7 @@ export const SendBox = (props) => {
         }
         setTextValue(newValue);
     };
-    const textTooLongMessage = textValueOverflow ? TEXT_EXCEEDS_LIMIT : undefined;
+    const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;
     const errorMessage = systemMessage !== null && systemMessage !== void 0 ? systemMessage : textTooLongMessage;
     const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = useMemo(() => concatStyleSets(sendBoxStyleSet, styles), [styles]);
@@ -55,8 +59,8 @@ export const SendBox = (props) => {
     const mergedSendIconStyle = useMemo(() => mergeStyles(sendIconStyle, {
         color: !!errorMessage || !hasText ? theme.palette.neutralTertiary : theme.palette.themePrimary
     }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasText, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
-    const onRenderSendIcon = useCallback((props, isMouseOverSendIcon) => onRenderIcon ? (onRenderIcon(props, isMouseOverSendIcon)) : (React.createElement(Icon, { iconName: isMouseOverSendIcon ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon]);
-    return (React.createElement(InputBoxComponent, { "data-ui-id": ids.sendboxTextfield, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", inputClassName: sendBoxStyle, placeholderText: strings.placeholderText, textValue: textValue, onChange: setText, onKeyDown: () => {
+    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(Icon, { iconName: isHover ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon]);
+    return (React.createElement(InputBoxComponent, { "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", inputClassName: sendBoxStyle, placeholderText: strings.placeholderText, textValue: textValue, onChange: setText, onKeyDown: () => {
             onTyping && onTyping();
         }, onEnterKeyDown: () => {
             sendMessageOnClick();

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { BaseCustomStylesProps } from '../types';
+import { BaseCustomStyles } from '../types';
 /**
- * Props for StreamMedia component
+ * Props for {@link StreamMedia}.
+ *
+ * @public
  */
 export interface StreamMediaProps {
     /** Video stream element to render. */
@@ -15,11 +17,14 @@ export interface StreamMediaProps {
      * <StreamMedia styles={{ root: { background: 'blue' } }} />
      * ```
      */
-    styles?: BaseCustomStylesProps;
+    styles?: BaseCustomStyles;
 }
 /**
- * StreamMedia component converts a HTMLElement to a JSX Element.
- * This component becomes very handy when you get the video stream HTMLElement from the calling sdk and want to render it in components like VideoTile.
+ * Utility component to convert an HTMLElement with a video stream into a JSX element.
+ *
+ * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.
+ *
+ * @public
  */
 export declare const StreamMedia: (props: StreamMediaProps) => JSX.Element;
 //# sourceMappingURL=StreamMedia.d.ts.map

package/dist/dist-esm/react-components/src/components/StreamMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StreamMedia.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGjD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,kBAAkB,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WA0BrD,CAAC"}
+{"version":3,"file":"StreamMedia.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,kBAAkB,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WA+BrD,CAAC"}

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

@@ -1,14 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+import { mergeStyles } from '@fluentui/react';
 import React, { useEffect, useRef } from 'react';
 import { invertedVideoStyle, mediaContainer } from './styles/StreamMedia.styles';
-import { mergeStyles } from '@fluentui/react';
+import { useTheme } from '../theming';
 /**
- * StreamMedia component converts a HTMLElement to a JSX Element.
- * This component becomes very handy when you get the video stream HTMLElement from the calling sdk and want to render it in components like VideoTile.
+ * Utility component to convert an HTMLElement with a video stream into a JSX element.
+ *
+ * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.
+ *
+ * @public
  */
 export const StreamMedia = (props) => {
     const containerEl = useRef(null);
+    const theme = useTheme();
     const { isMirrored, videoStreamElement, styles } = props;
     useEffect(() => {
         const container = containerEl.current;
@@ -26,6 +31,6 @@ export const StreamMedia = (props) => {
             container.innerHTML = '';
         };
     }, [videoStreamElement]);
-    return (React.createElement("div", { className: mergeStyles(isMirrored ? invertedVideoStyle : mediaContainer, styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }));
+    return (React.createElement("div", { className: mergeStyles(isMirrored ? invertedVideoStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }));
 };
 //# sourceMappingURL=StreamMedia.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEjF,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAoB9C;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,IAAI,kBAAkB,EAAE;YACtB,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;SAC3C;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,GAAI,CAClH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAuBtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,IAAI,kBAAkB,EAAE;YACtB,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;SAC3C;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,6BACE,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EACpG,GAAG,EAAE,WAAW,GAChB,CACH,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,9 +1,17 @@
 /// <reference types="react" />
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
+/**
+ * Todo: We need to add more types of system messages that we support.
+ *
+ * @private
+ */
 export declare type SystemMessageIconTypes = 'PeopleAdd' | 'PeopleBlock' | 'Edit';
+/**
+ * @private
+ */
 export declare type SystemMessageProps = {
     /**
-     * Icon name for the system message. iconName should match the iconName in fluentUI icon.
+     * Icon name for the system message.
      */
     iconName: SystemMessageIconTypes;
     /**
@@ -12,5 +20,8 @@ export declare type SystemMessageProps = {
     content: string;
     containerStyle?: ComponentSlotStyle;
 };
+/**
+ * @private
+ */
 export declare const SystemMessage: (props: SystemMessageProps) => JSX.Element;
 //# sourceMappingURL=SystemMessage.d.ts.map

package/dist/dist-esm/react-components/src/components/SystemMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAK/D,oBAAY,sBAAsB,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAE1E,oBAAY,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAIhB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WAUzD,CAAC"}
+{"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI/D;;;;GAIG;AACH,oBAAY,sBAAsB,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAE1E;;GAEG;AACH,oBAAY,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAIhB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WAYzD,CAAC"}

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

@@ -1,13 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { FontIcon, mergeStyles, Stack } from '@fluentui/react';
+import { FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
 import React from 'react';
 import { systemMessageIconStyle } from './styles/SystemMessage.styles';
+/**
+ * @private
+ */
 export const SystemMessage = (props) => {
     const { iconName, content } = props;
     const Icon = React.createElement(FontIcon, { iconName: iconName, className: mergeStyles(systemMessageIconStyle) });
     return (React.createElement(Stack, { horizontal: true, className: mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle) },
         Icon,
-        React.createElement("span", null, content)));
+        React.createElement(Text, { style: { wordBreak: 'break-word' }, role: "status", title: content }, content)));
 };
 //# sourceMappingURL=SystemMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAoBvE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,GAAI,CAAC;IAE3G,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC;QACtE,IAAI;QACL,kCAAO,OAAO,CAAQ,CAChB,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AA2BvE;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,GAAI,CAAC;IAE3G,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC;QACtE,IAAI;QACL,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,OAAO,IACnE,OAAO,CACH,CACD,CACT,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,14 +1,21 @@
 /// <reference types="react" />
-import { BaseCustomStylesProps, CommunicationParticipant } from '../types';
+import { BaseCustomStyles, CommunicationParticipant } from '../types';
 import { IStyle } from '@fluentui/react';
-export interface TypingIndicatorStylesProps extends BaseCustomStylesProps {
+/**
+ * Fluent styles for {@link TypingIndicator}.
+ *
+ * @public
+ */
+export interface TypingIndicatorStylesProps extends BaseCustomStyles {
     /** Styles for each typing user's displayName. */
     typingUserDisplayName?: IStyle;
     /** Styles for the typing string. */
     typingString?: IStyle;
 }
 /**
- * Strings of TypingIndicator that can be overridden
+ * Strings of {@link TypingIndicator} that can be overridden.
+ *
+ * @public
  */
 export interface TypingIndicatorStrings {
     /**
@@ -87,7 +94,9 @@ export interface TypingIndicatorStrings {
     delimiter: string;
 }
 /**
- * Props for TypingIndicator component
+ * Props for {@link TypingIndicator}.
+ *
+ * @public
  */
 export interface TypingIndicatorProps {
     /** List of the typing users. */
@@ -108,7 +117,9 @@ export interface TypingIndicatorProps {
     strings?: Partial<TypingIndicatorStrings>;
 }
 /**
- * Typing Indicator is used to notify users if there are any other users typing in the thread.
+ * Component to notify local user when one or more participants in the chat thread are typing.
+ *
+ * @public
  */
 export declare const TypingIndicator: (props: TypingIndicatorProps) => JSX.Element;
 //# sourceMappingURL=TypingIndicator.d.ts.map

package/dist/dist-esm/react-components/src/components/TypingIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAsB,MAAM,iBAAiB,CAAC;AAK7D,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;;;QAUI;IACJ,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;;QAaI;IACJ,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;QAaI;IACJ,0BAA0B,EAAE,MAAM,CAAC;IACnC;;;;;;;;;;;;;;QAcI;IACJ,2BAA2B,EAAE,MAAM,CAAC;IACpC;;;;;;;;;;;;;;QAcI;IACJ,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,WAAW,EAAE,wBAAwB,EAAE,CAAC;IACxC,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,CAAC;IAChE;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,0BAA0B,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;CAC3C;AAqID;;GAEG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,WAc7D,CAAC"}
+{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACtE,OAAO,EAAE,MAAM,EAA4B,MAAM,iBAAiB,CAAC;AAKnE;;;;GAIG;AACH,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB;IAClE,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;;;QAUI;IACJ,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;;QAaI;IACJ,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;QAaI;IACJ,0BAA0B,EAAE,MAAM,CAAC;IACnC;;;;;;;;;;;;;;QAcI;IACJ,2BAA2B,EAAE,MAAM,CAAC;IACpC;;;;;;;;;;;;;;QAcI;IACJ,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,WAAW,EAAE,wBAAwB,EAAE,CAAC;IACxC,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,CAAC;IAChE;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,0BAA0B,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;CAC3C;AAqMD;;;;GAIG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,WAc7D,CAAC"}

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

@@ -2,9 +2,8 @@
 // Licensed under the MIT license.
 import { typingIndicatorContainerStyle, typingIndicatorStringStyle } from './styles/TypingIndicator.styles';
 import React from 'react';
-import { mergeStyles, Stack } from '@fluentui/react';
+import { mergeStyles, Stack, Text } from '@fluentui/react';
 import { useLocale } from '../localization/LocalizationProvider';
-import { formatSpanElements } from '../localization/localizationUtils';
 import { useIdentifiers } from '../identifiers';
 const MAXIMUM_LENGTH_OF_TYPING_USERS = 35;
 /**
@@ -12,18 +11,33 @@ const MAXIMUM_LENGTH_OF_TYPING_USERS = 35;
  * @param typingUsers typing users
  * @param delimiter string to separate typing users
  * @param onRenderUser optional callback to render each typing user
- * @param styles optional additional IStyle to apply to element containing all users
+ * @param userDisplayNameStyles optional additional IStyle to apply to each element containing users name
  * @returns element wrapping all typing users
  */
-const getUsersElement = (typingUsers, delimiter, onRenderUser, styles) => {
+const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameStyles) => {
     const userElements = [];
     typingUsers.forEach((user, index) => {
-        userElements.push(onRenderUser ? onRenderUser(user) : React.createElement("span", { key: `user-${index}` }, user.displayName));
-        userElements.push(React.createElement("span", { key: `comma-${index}` }, `${delimiter}`));
+        userElements.push(onRenderUser ? (onRenderUser(user)) : (React.createElement(Text, { className: mergeStyles(userDisplayNameStyles), key: `user-${index}` }, user.displayName)));
+        userElements.push(React.createElement(Text, { key: `comma-${index}` }, `${delimiter}`));
     });
     // pop last comma
     userElements.pop();
-    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(typingIndicatorStringStyle, styles) }, userElements));
+    return React.createElement(React.Fragment, null, userElements);
+};
+/**
+ * Helper function to get a string of all typing users
+ * @param typingUsers typing users
+ * @param delimiter string to separate typing users
+ * @returns string of all typing users
+ */
+const getNamesString = (typingUsers, delimiter) => {
+    const userNames = [];
+    typingUsers.forEach((user) => {
+        if (user.displayName) {
+            userNames.push(user.displayName);
+        }
+    });
+    return userNames.join(delimiter);
 };
 /**
  * Helper function to create span elements making up the typing indicator string
@@ -61,7 +75,32 @@ const getSpanElements = (strings, usersElement, numTypingUsers, numTypingUsersAb
             numOthers: React.createElement(React.Fragment, null, numTypingUsersAbbreviated)
         };
     }
-    return formatSpanElements(typingString, variables);
+    return formatInlineElements(typingString, variables);
+};
+/**
+ * Helper function to get the string making up the typing indicator string
+ * @param strings TypingIndicatorStrings containing strings to create span elements
+ * @param namesString string of all typing users
+ * @param numTypingUsers number of total typing users
+ * @param numUserNotMentioned number of typing users abbreviated
+ * @returns typing indicator string
+ */
+const getIndicatorString = (strings, namesString, numTypingUsers, numTypingUsersAbbreviated) => {
+    if (numTypingUsers === 1) {
+        return strings.singleUser.replace('{user}', namesString);
+    }
+    if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {
+        return strings.multipleUsers.replace('{users}', namesString);
+    }
+    if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {
+        return strings.multipleUsersAbbreviateOne.replace('{users}', namesString);
+    }
+    if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {
+        return strings.multipleUsersAbbreviateMany
+            .replace('{users}', namesString)
+            .replace('{numOthers}', `${numTypingUsersAbbreviated}`);
+    }
+    return undefined;
 };
 const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
     const typingUsersMentioned = [];
@@ -88,10 +127,13 @@ const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
     const usersElement = getUsersElement(typingUsersMentioned, strings.delimiter, onRenderUser, styles === null || styles === void 0 ? void 0 : styles.typingUserDisplayName);
     const numUserNotMentioned = typingUsers.length - typingUsersMentioned.length;
     const spanElements = getSpanElements(strings, usersElement, typingUsersMentioned.length, numUserNotMentioned);
-    return (React.createElement(Stack, { horizontal: true, "data-ui-id": ids.typingIndicator, className: mergeStyles(typingIndicatorStringStyle, styles === null || styles === void 0 ? void 0 : styles.typingString), key: "typingStringKey" }, spanElements));
+    const labelString = getIndicatorString(strings, getNamesString(typingUsersMentioned, strings.delimiter), typingUsersMentioned.length, numUserNotMentioned);
+    return (React.createElement("div", { "data-ui-id": ids.typingIndicator, className: mergeStyles(typingIndicatorStringStyle, styles === null || styles === void 0 ? void 0 : styles.typingString), key: "typingStringKey", role: "status", "aria-label": labelString }, spanElements));
 };
 /**
- * Typing Indicator is used to notify users if there are any other users typing in the thread.
+ * Component to notify local user when one or more participants in the chat thread are typing.
+ *
+ * @public
  */
 export const TypingIndicator = (props) => {
     const { typingUsers, onRenderUser, styles } = props;
@@ -100,4 +142,36 @@ export const TypingIndicator = (props) => {
     const indicatorComponent = IndicatorComponent(typingUsersToRender, Object.assign(Object.assign({}, strings.typingIndicator), props.strings), onRenderUser, styles);
     return React.createElement(Stack, { className: mergeStyles(typingIndicatorContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, indicatorComponent);
 };
+/**
+ * Create an array of span elements by replacing the pattern "\{\}" in str with the elements
+ * passed in as vars and creating inline elements from the rest
+ *
+ * @param str - The string to be formatted
+ * @param vars - Variables to use to format the string
+ * @returns formatted JSX elements
+ */
+const formatInlineElements = (str, vars) => {
+    if (!str) {
+        return [];
+    }
+    if (!vars) {
+        return [];
+    }
+    const elements = [];
+    // regex to search for the pattern "{}"
+    const placeholdersRegex = /{(\w+)}/g;
+    const regex = RegExp(placeholdersRegex);
+    let array = regex.exec(str);
+    let prev = 0;
+    while (array !== null) {
+        if (prev !== array.index) {
+            elements.push(React.createElement(Text, { key: elements.length }, str.substring(prev, array.index)));
+        }
+        elements.push(React.createElement(Text, { key: elements.length }, vars[array[0].substring(1, array[0].length - 1)]));
+        prev = regex.lastIndex;
+        array = regex.exec(str);
+    }
+    elements.push(React.createElement(Text, { key: elements.length }, str.substring(prev)));
+    return elements;
+};
 //# sourceMappingURL=TypingIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { VideoGalleryLocalParticipant } from '../../types';
+/**
+ * A memoized version of local screen share component. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
+ * https://reactjs.org/docs/react-api.html#reactmemo
+ */
+export declare const LocalScreenShare: React.MemoExoticComponent<(props: {
+    localParticipant: VideoGalleryLocalParticipant;
+}) => JSX.Element | null>;
+//# sourceMappingURL=LocalScreenShare.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocalScreenShare.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAU3D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,oCAAsB;IAAE,gBAAgB,EAAE,4BAA4B,CAAA;CAAE,wBAqCnG,CAAC"}

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

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Icon, Stack, Text } from '@fluentui/react';
+import React from 'react';
+import { useLocale } from '../../localization';
+import { useTheme } from '../../theming';
+import { VideoTile } from '../VideoTile';
+import { screenSharingContainerStyle, screenSharingNotificationContainerStyle, screenSharingNotificationIconContainerStyle, screenSharingNotificationIconStyle, screenSharingNotificationTextStyle } from './styles/LocalScreenShare.styles';
+/**
+ * A memoized version of local screen share component. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
+ * https://reactjs.org/docs/react-api.html#reactmemo
+ */
+export const LocalScreenShare = React.memo((props) => {
+    const { localParticipant } = props;
+    const theme = useTheme();
+    const locale = useLocale();
+    if (!localParticipant || !localParticipant.isScreenSharingOn) {
+        return null;
+    }
+    const localScreenSharingNotification = (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
+        React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: { childrenGap: '1rem' } },
+            React.createElement(Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
+                React.createElement(Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
+            React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage))));
+    return (React.createElement(VideoTile, { displayName: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingNotification));
+});
+//# sourceMappingURL=LocalScreenShare.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,EACvC,2CAA2C,EAC3C,kCAAkC,EAClC,kCAAkC,EACnC,MAAM,kCAAkC,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAyD,EAAE,EAAE;IACvG,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAEnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE;QAC5D,OAAO,IAAI,CAAC;KACb;IAED,MAAM,8BAA8B,GAAG,CACrC,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;QAC3F,oBAAC,KAAK,IACJ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,uCAAuC,CAAC,KAAK,CAAC,EACzD,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;YAE/B,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2CAA2C;gBAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,kCAAkC,CAAC,KAAK,CAAC,GAAI,CACjG;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,kCAAkC,eAAY,QAAQ,IACpE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAClD,CACD,CACF,CACT,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,EAC1C,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAClC,mBAAmB,EAAE,GAAG,EAAE,CAAC,yCAAK,IAE/B,8BAA8B,CACrB,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { VideoStreamOptions } from '../../types';
+/**
+ * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
+ * https://reactjs.org/docs/react-api.html#reactmemo
+ */
+export declare const RemoteScreenShare: React.MemoExoticComponent<(props: {
+    userId: string;
+    displayName?: string | undefined;
+    onCreateRemoteStreamView?: ((userId: string, options?: VideoStreamOptions | undefined) => Promise<void>) | undefined;
+    onDisposeRemoteStreamView?: ((userId: string) => Promise<void>) | undefined;
+    isAvailable?: boolean | undefined;
+    isMuted?: boolean | undefined;
+    isSpeaking?: boolean | undefined;
+    renderElement?: HTMLElement | undefined;
+}) => JSX.Element>;
+//# sourceMappingURL=RemoteScreenShare.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteScreenShare.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;YAElB,MAAM;;yCAEsB,MAAM,+CAAmC,QAAQ,IAAI,CAAC;0CACrD,MAAM,KAAK,QAAQ,IAAI,CAAC;;;;;kBAmChE,CAAC"}